From 3cdba9ee7f80214657b0670a18f9a98ef8a59a0e Mon Sep 17 00:00:00 2001 From: Frances Feng Date: Tue, 24 Oct 2023 15:12:31 +1300 Subject: [PATCH 1/4] update detail page --- components/DatasetDetails/AboutInfo.vue | 14 +-- components/DatasetDetails/AbstractInfo.vue | 97 ++++------------- components/DatasetDetails/HeaderInfo.vue | 34 ++---- components/DatasetDetails/RelatedInfo.vue | 104 ++++-------------- pages/data/browser/dataset/_id.vue | 116 ++++++--------------- services/backendQuery.js | 2 +- 6 files changed, 89 insertions(+), 278 deletions(-) diff --git a/components/DatasetDetails/AboutInfo.vue b/components/DatasetDetails/AboutInfo.vue index eb7849a..e3f05ac 100644 --- a/components/DatasetDetails/AboutInfo.vue +++ b/components/DatasetDetails/AboutInfo.vue @@ -8,14 +8,14 @@

Title: {{ title }}

First Published: - {{ detail_data.created_datetime ? - detail_data.created_datetime.slice(0, 10) : + {{ detail_data.created ? + detail_data.created.slice(0, 10) : "N/A" }}

Last Published: - {{ detail_data.updated_datetime ? - detail_data.updated_datetime.slice(0, 10) : + {{ detail_data.updated ? + detail_data.updated.slice(0, 10) : "N/A" }}

@@ -65,7 +65,7 @@ export default { }, async handelNames(val) { - let result = ""; + let result = []; for (let i = 0; i < val.length; i++) { let name = val[i]; if (name.includes("ror.org")) { @@ -79,9 +79,9 @@ export default { console.log(err); }); } - result += "; " + name; + result.push(name); } - return result.slice(2); + return result.join('; '); }, } } diff --git a/components/DatasetDetails/AbstractInfo.vue b/components/DatasetDetails/AbstractInfo.vue index f2c3715..690e952 100644 --- a/components/DatasetDetails/AbstractInfo.vue +++ b/components/DatasetDetails/AbstractInfo.vue @@ -13,98 +13,39 @@

Protocol Links: N/A

Experimental Approach: N/A

-->

Subject Information:

-

- Anatomical structure: - N/A - - - {{ organ[0].toUpperCase() + organ.slice(1) }}, - - - {{ organ[0].toUpperCase() + organ.slice(1) }} - - -

-

- Species: - N/A - - - {{ item[0].toUpperCase() + item.slice(1) }}, - - - {{ item[0].toUpperCase() + item.slice(1) }} - - -

-

- Sex: - N/A - - - {{ item[0].toUpperCase() + item.slice(1) }}, - - - {{ item[0].toUpperCase() + item.slice(1) }} - - -

-

- Age range: - N/A - - - {{ item[0].toUpperCase() + item.slice(1) }}, - - - {{ item[0].toUpperCase() + item.slice(1) }} - - -

-
+
+

+ {{ key }}: + N/A + {{ facet_list.join(', ') }} + +

+
+

Number of samples: - {{ detail_data.number_of_samples[0] }} samples from {{ detail_data.number_of_subjects[0] }} subjects + {{ detail_data.numberSamples }} samples from {{ detail_data.numberSubjects }} subjects

Number of samples: N/A

-

Keywords: {{ displayKeywords(detail_data.keywords) }}

+

Keywords: {{ detail_data.keywords.join(', ') }}

diff --git a/components/DatasetDetails/HeaderInfo.vue b/components/DatasetDetails/HeaderInfo.vue index 3b1d29d..ace5669 100644 --- a/components/DatasetDetails/HeaderInfo.vue +++ b/components/DatasetDetails/HeaderInfo.vue @@ -8,25 +8,25 @@ Contributors: - {{ combineNames() }} + {{ detail_data.contributors.join(', ') }} - {{modifyName(name)}}{{i===detail_data.contributor_name.length-1?'':','}} + {{name}}{{i===detail_data.contributors.length-1?'':','}}

Description: - {{ detail_data.subtitle[0] }} + {{ detail_data.subname }}

@@ -34,6 +34,7 @@ +

Created Date: {{ detail_data.created.slice(0, 10) }}

DOI:
-

Date: {{ detail_data.date }}

{{ detail_data.files }} files @@ -55,9 +55,9 @@

-

Date: {{ detail_data.date }}

-

View other version

+

+

Date: {{ detail_data.created.date }}

+

View other version

-->
@@ -75,23 +75,9 @@ export default { props: [ "detail_data", "title" ], methods: { - combineNames() { - let result = ""; - let name_list = this.detail_data.contributor_name; - name_list.map((item) => { - let person_names = item.split(", "); - result += person_names[1] + " " + person_names[0] + ", "; - }); - return result.slice(0, -2); - }, - modifyLink(i) { return this.$parent.modifyLink(i); }, - - modifyName(name, i) { - return this.$parent.modifyName(name, i); - }, } } diff --git a/components/DatasetDetails/RelatedInfo.vue b/components/DatasetDetails/RelatedInfo.vue index 81e0d5b..5ae4a2a 100644 --- a/components/DatasetDetails/RelatedInfo.vue +++ b/components/DatasetDetails/RelatedInfo.vue @@ -40,92 +40,31 @@ PROJECT:
N/A
--> -
- TYPE:
- - Dataset - -
-
-
- ANATOMICAL STRUCTURE:
-
-
- - {{ organ }} - -
-
-
-
-
- SPECIES:
-
-
- - {{ species }} - +
+
+ {{ key.toUpperCase() }}:
+
+
+ + {{ facet }} + +
+
-
- -
- SEX:
-
-
- - {{ sex }} - -
-
-
-
-
- AGE:
-
-
- - {{ age }} - -
-
-
-
- +
CONTRIBUTORS:
@@ -137,10 +76,7 @@ diff --git a/pages/data/browser/dataset/_id.vue b/pages/data/browser/dataset/_id.vue index 9058c9a..7d53f13 100644 --- a/pages/data/browser/dataset/_id.vue +++ b/pages/data/browser/dataset/_id.vue @@ -29,9 +29,7 @@ > @@ -86,9 +84,7 @@ :detail_data="detail_data" :datasetImage="datasetImage" :imagePlaceholder="imagePlaceholder" - :species_list="species_list" - :sex_list="sex_list" - :age_list="age_list" + :facets_dict="facets_dict" />
@@ -179,9 +175,7 @@ export default { cards_list: [], all_models: undefined, datasetImage: "", - species_list: [], - sex_list: [], - age_list: [], + facets_dict: {}, flatmap_data: [], // show_segmentation: false, // show_pdf: false, @@ -198,29 +192,27 @@ export default { "detail", this.$config.query_access_token ); + if (result.facet) + this.handleFacets(result.facet); if (result.detail) { - const data = result.detail; - this.detail_data = data.dataset_descriptions[0]; - this.title = data.dataset_descriptions[0].title[0]; - this.scaffold_view_data = data.scaffoldViews; - this.thumbnail_data = data.thumbnails; + this.detail_data = result.detail; + this.title = this.detail_data.name; + this.scaffold_view_data = this.detail_data.scaffoldViews; + this.thumbnail_data = this.detail_data.thumbnails; this.getDatasetImage(); - if (this.species_list.length > 0) { - this.handleSpecies(); - } + + if (this.facets_dict.Species && this.facets_dict.Species.length > 0) + this.handleFlatmapData(); const cardsData = { - Scaffold: data.scaffoldViews, + Scaffold: this.detail_data.scaffoldViews, Flatmap: this.flatmap_data, - Plot: data.plots, - Thumbnail: data.thumbnails, - MRI: data.mris, - DICOM: data.dicomImages, + Plot: this.detail_data.plots, + Thumbnail: this.detail_data.thumbnails, + MRI: this.detail_data.mris, + DICOM: this.detail_data.dicomImages, }; this.handleCards(cardsData); } - if (result.facet) { - this.handleFacets(result.facet); - } // this.show_pdf = false; this.isLoading = false; } @@ -262,42 +254,17 @@ export default { } }, - modifyName(name) { - let name_list = name.split(", "); - let result = name_list[1] + " " + name_list[0]; - return result; - }, - modifyLink(i) { - let link = this.detail_data.contributor_orcid[i]; + let link = this.detail_data.contributor_orcids[i]; if (!link.includes("http")) { link = "https://orcid.org/" + link; } return link; }, - generateFilename(name) { - let name_list = name.split("/"); - let index = name_list.length - 1; - let fileName = name_list[index]; - return fileName; - }, - - generateImage(method, filename, is_source_of) { + generateImage(img_url) { const oneOffToken = backendQuery.getLocalStorage("one_off_token"); - let url = `${this.$config.query_api_url}/data/${method}`; - if (!filename.includes(this.$route.params.id)) { - url += `/${this.$route.params.id}`; - } - if (is_source_of) { - url += `/${filename.substring( - 0, - filename.lastIndexOf("/") - )}/${is_source_of}`; - } else { - url += `/${filename}`; - } - url += `?token=${oneOffToken}`; + let url = `${this.$config.query_api_url}${img_url}?token=${oneOffToken}`; return url; }, @@ -313,16 +280,12 @@ export default { type: cardType, url: cardType === "Scaffold" || cardType === "Thumbnail" - ? this.generateImage( - "preview", - element.filename, - element.is_source_of - ) + ? this.generateImage(element.image_url) : "", - filename: this.generateFilename(element.filename), - id: element.id, + filename: element.name, + id: element.identifier, }; - if (element.additional_metadata !== null) { + if (element.additional_metadata) { const spotlight = JSON.parse( element.additional_metadata @@ -342,21 +305,12 @@ export default { }, getDatasetImage() { - let item = {}; - if (this.scaffold_view_data.length > 0) { - item = this.scaffold_view_data[0]; - } else if (this.thumbnail_data.length > 0) { - item = this.thumbnail_data[0]; - } - if (JSON.stringify(item) === "{}") { + if (this.scaffold_view_data.length > 0) + this.datasetImage = this.generateImage(this.scaffold_view_data[0].image_url); + else if (this.thumbnail_data.length > 0) + this.datasetImage = this.generateImage(this.thumbnail_data[0].image_url); + else this.datasetImage = this.imagePlaceholder; - } else { - this.datasetImage = this.generateImage( - "preview", - item.filename, - item.is_source_of - ); - } }, // changeShowState(val) { @@ -407,11 +361,11 @@ export default { } }, - handleSpecies() { - this.species_list.forEach((item) => { + handleFlatmapData() { + this.facets_dict.Species.forEach((item) => { this.flatmap_data.push({ - id: item, - filename: item, + name: item, + identifier: item, additional_metadata: null, }); }); @@ -419,9 +373,7 @@ export default { handleFacets(facets) { Object.keys(facets).forEach((item) => { - if (item === "Species") this.species_list = facets[item]; - else if (item === "Sex") this.sex_list = facets[item]; - else if (item === "Age category") this.age_list = facets[item]; + this.facets_dict[item] = facets[item]; }); }, }, diff --git a/services/backendQuery.js b/services/backendQuery.js index 5e44332..0c11a3e 100644 --- a/services/backendQuery.js +++ b/services/backendQuery.js @@ -176,7 +176,7 @@ async function fetchPaginationData( setLocalStorage("one_off_token", res.headers["x-one-off"]); }) .catch((err) => { - throw new Error(`${err}`); + // throw new Error(`${err}`); }); return pagination; } From 53539a0232cba36bfc0fa1a95b983e8be7c79a87 Mon Sep 17 00:00:00 2001 From: Frances Feng Date: Tue, 24 Oct 2023 15:48:02 +1300 Subject: [PATCH 2/4] auto open & close collapse --- components/DataBrowser/FilterData.vue | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/components/DataBrowser/FilterData.vue b/components/DataBrowser/FilterData.vue index 7940000..e2bbeb4 100644 --- a/components/DataBrowser/FilterData.vue +++ b/components/DataBrowser/FilterData.vue @@ -37,11 +37,12 @@
- + -1) { + if (!this.activeNames.includes(j)) + this.activeNames.push(j); // Add facets from URL filter.selectedFacet.push(filter.filterFacetName[index]); this.selectedFilterDict[filter.nodeField] = filter.selectedFacet; @@ -270,6 +274,8 @@ export default { this.convertedFilterList[i].isIndeterminate = true; } this.handleChange(this.convertedFilterList[i]); + if (this.convertedFilterList[i].selectedFacet.length === 0) + this.activeNames.splice(this.activeNames.indexOf(this.convertedFilterList[i].index), 1) break; } } From 5e695292995bc68ab6d341322c2b11fd29479a0d Mon Sep 17 00:00:00 2001 From: Frances <53888286+yfen955@users.noreply.github.com> Date: Fri, 27 Oct 2023 13:38:51 +1300 Subject: [PATCH 3/4] Update README.md --- README.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index fae3bad..168d55a 100644 --- a/README.md +++ b/README.md @@ -55,9 +55,15 @@ $ yarn generate For detailed explanation on how things work, check out the [documentation](https://nuxtjs.org). +## End-to-end Testing + +This repo is set up to run testing automatically when there are any commits in GitHub. You can see all testing results on the `Actions` page and [Cypress Cloud](https://cloud.cypress.io/projects/zadmv6/runs?branches=%5B%5D&committers=%5B%5D&flaky=%5B%5D&page=1&status=%5B%5D&tags=%5B%5D&timeRange=%7B%22startDate%22%3A%221970-01-01%22%2C%22endDate%22%3A%222038-01-19%22%7D). + +To run the testing manually, please run this command: `yarn cypress open`. Then click on `E2E Testing` and select any browser you prefer. Finally choose the testing you want to run. + ## Special Directories -You can create the following extra directories, some of which have special behaviors. Only `pages` is required; you can delete them if you don't want to use their functionality. +You can create the following extra directories, some of which have special behaviours. Only `pages` is required; you can delete them if you don't want to use their functionality. ### `assets` From 3d717ff7bcc6994673b47897779dd421e6a1df6c Mon Sep 17 00:00:00 2001 From: Frances Feng Date: Tue, 31 Oct 2023 12:55:27 +1300 Subject: [PATCH 4/4] Update docker-compose.yml --- docker-compose.yml | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docker-compose.yml b/docker-compose.yml index 7262bcc..7050e4b 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -7,6 +7,7 @@ services: environment: PORTAL_URL: ${PORTAL_URL} QUERY_API_URL: ${QUERY_API_URL} + QUERY_ACCESS_TOKEN: ${QUERY_ACCESS_TOKEN} LOGIN_API_URL: ${LOGIN_API_URL} LOGIN_API_KEY: ${LOGIN_API_KEY} LOGIN_SECRET_KEY: ${LOGIN_SECRET_KEY} @@ -16,4 +17,4 @@ services: GOOGLE_ANALYTICS_GA4: ${GOOGLE_ANALYTICS_GA4} FLATMAP_API: ${FLATMAP_API} ports: - - "3000:3000" + - "3000:3000" \ No newline at end of file