Skip to content

Update detail page #35

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
yfen955 wants to merge 5 commits into
base: dev
Choose a base branch
from
Open

Update detail page #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
00c0115
Merge pull request #33 from TwelveLaboursDev/dev
yfen955 Oct 23, 2023
3cdba9e
update detail page
yfen955 Oct 24, 2023
53539a0
auto open & close collapse
yfen955 Oct 24, 2023
5e69529
Update README.md
yfen955 Oct 27, 2023
3d717ff
Update docker-compose.yml
yfen955 Oct 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`

Expand Down
8 changes: 7 additions & 1 deletion components/DataBrowser/FilterData.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,11 +37,12 @@
</div>
</div>

<el-collapse>
<el-collapse v-model="activeNames">
<el-collapse-item
v-for="(filter, index) in convertedFilterList"
:key="index"
:title="filter.title"
:name="index"
>
<el-checkbox
:indeterminate="filter.isIndeterminate"
Expand Down Expand Up @@ -84,6 +85,7 @@ export default {
selectedFilterDict: {},
filterDictResult: {},
relationAND: true,
activeNames: [],
};
},

Expand Down Expand Up @@ -178,6 +180,8 @@ export default {
// check whether facet in URL is valid
const index = filter.filterFacetName.indexOf(facet);
if (index > -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;
Expand Down Expand Up @@ -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;
}
}
Expand Down
14 changes: 7 additions & 7 deletions components/DatasetDetails/AboutInfo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,14 @@
<p><b>Title:</b> {{ title }}</p>
<p>
<b>First Published:</b>
{{ detail_data.created_datetime ?
detail_data.created_datetime.slice(0, 10) :
{{ detail_data.created ?
detail_data.created.slice(0, 10) :
"N/A" }}
</p>
<p>
<b>Last Published:</b>
{{ detail_data.updated_datetime ?
detail_data.updated_datetime.slice(0, 10) :
{{ detail_data.updated ?
detail_data.updated.slice(0, 10) :
"N/A" }}
</p>
<hr />
Expand Down Expand Up @@ -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")) {
Expand All @@ -79,9 +79,9 @@ export default {
console.log(err);
});
}
result += "; " + name;
result.push(name);
}
return result.slice(2);
return result.join('; ');
},
}
}
Expand Down
97 changes: 19 additions & 78 deletions components/DatasetDetails/AbstractInfo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,98 +13,39 @@
<p class="indent --2"><b>Protocol Links:</b> N/A</p>
<p class="indent --2"><b>Experimental Approach:</b> N/A</p> -->
<p><b>Subject Information:</b></p>
<p class="indent --2">
<b>Anatomical structure:</b>
<span v-if="detail_data.study_organ_system.length === 0"> N/A</span>
<nobr
v-else
v-for="(organ, i) in detail_data.study_organ_system"
:key="i"
>
<nobr v-if="i < detail_data.study_organ_system.length - 1">
{{ organ[0].toUpperCase() + organ.slice(1) }},
</nobr>
<nobr v-else>
{{ organ[0].toUpperCase() + organ.slice(1) }}
</nobr>
</nobr>
</p>
<p class="indent --2">
<b>Species:</b>
<span v-if="species_list.length === 0"> N/A</span>
<nobr
v-else
v-for="(item, i) in species_list"
:key="i"
>
<nobr v-if="i < species_list.length - 1">
{{ item[0].toUpperCase() + item.slice(1) }},
</nobr>
<nobr v-else>
{{ item[0].toUpperCase() + item.slice(1) }}
</nobr>
</nobr>
</p>
<p class="indent --2">
<b>Sex:</b>
<span v-if="sex_list.length === 0"> N/A</span>
<nobr
v-else
v-for="(item, i) in sex_list"
:key="i"
>
<nobr v-if="i < sex_list.length - 1">
{{ item[0].toUpperCase() + item.slice(1) }},
</nobr>
<nobr v-else>
{{ item[0].toUpperCase() + item.slice(1) }}
</nobr>
</nobr>
</p>
<p class="indent --2">
<b>Age range:</b>
<span v-if="age_list.length === 0"> N/A</span>
<nobr
v-else
v-for="(item, i) in age_list"
:key="i"
>
<nobr v-if="i < age_list.length - 1">
{{ item[0].toUpperCase() + item.slice(1) }},
</nobr>
<nobr v-else>
{{ item[0].toUpperCase() + item.slice(1) }}
</nobr>
</nobr>
</p>
<div v-if="detail_data.number_of_samples[0] > 0 || detail_data.number_of_subjects[0] > 0">
<div v-for="facet_list, key, i in facets_dict" :key="i">
<p class="indent --2" v-if="key !== 'Data type'">
<b>{{ key }}:</b>
<span v-if="facet_list.length === 0"> N/A</span>
<span v-else>{{ facet_list.join(', ') }}</span>
<!-- <nobr
v-else
v-for="(facet, n) in facet_list"
:key="n"
>
<nobr v-if="n < facet_list.length - 1">{{ facet }}, </nobr>
<nobr v-else>{{ facet }}</nobr>
</nobr> -->
</p>
</div>
<div v-if="detail_data.numberSamples > 0 || detail_data.numberSubjects > 0">
<p class="indent --2">
<b>Number of samples:</b>
{{ detail_data.number_of_samples[0] }} samples from {{ detail_data.number_of_subjects[0] }} subjects
{{ detail_data.numberSamples }} samples from {{ detail_data.numberSubjects }} subjects
</p>
</div>
<div v-else>
<p class="indent --2"><b>Number of samples:</b> N/A</p>
</div>
<hr>
<p><b>Keywords:</b> {{ displayKeywords(detail_data.keywords) }}</p>
<p><b>Keywords:</b> {{ detail_data.keywords.join(', ') }}</p>
</div>
</template>

<script>
export default {
name: "AbstractInfo",
props: [ "detail_data", "species_list", "sex_list", "age_list" ],
methods: {
displayKeywords(keywords) {
let result = "";
for (let i = 0; i < keywords.length; i++) {
let word = keywords[i].trim();
result += ", " + word.charAt(0).toUpperCase() + word.slice(1);
}
return result.slice(2);
}
}
props: [ "detail_data", "facets_dict" ],
}
</script>

Expand Down
34 changes: 10 additions & 24 deletions components/DatasetDetails/HeaderInfo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,32 +8,33 @@
<b>Contributors: </b>
<span
v-if="
detail_data.contributor_name.length !==
detail_data.contributor_orcid.length
detail_data.contributors.length !==
detail_data.contributor_orcids.length
"
>
{{ combineNames() }}
{{ detail_data.contributors.join(', ') }}
</span>
<span
v-else
v-for="(name, i) in detail_data.contributor_name"
v-for="(name, i) in detail_data.contributors"
:key="i"
>
<!-- Must be on one line so that there are no space between the text and comma -->
<a :href="modifyLink(i)">{{modifyName(name)}}</a>{{i===detail_data.contributor_name.length-1?'':','}}
<a :href="modifyLink(i)">{{name}}</a>{{i===detail_data.contributors.length-1?'':','}}
</span>
</p>
<hr />
<p>
<b>Description: </b>
{{ detail_data.subtitle[0] }}
{{ detail_data.subname }}
</p>
</section>
<el-card shadow="never">
<p><b>Dataset ID:</b> {{ $route.params.id }}</p>
<!-- <p>
<b>Viewing version:</b> {{ detail_data.metadata_version[0] }}
</p> -->
<p v-if="detail_data.created"><b>Created Date:</b> {{ detail_data.created.slice(0, 10) }}</p>
<div v-if="detail_data.identifier_type[0] === 'DOI'">
<b>DOI: </b>
<div
Expand All @@ -45,7 +46,6 @@
</div>
</div>
<!-- need more data to display these infomation -->
<p v-if="detail_data.date">Date: {{ detail_data.date }}</p>
<p v-if="detail_data.files">
<i class="el-icon-document-copy"></i>
{{ detail_data.files }} files
Expand All @@ -55,9 +55,9 @@
</p>
<!-- <p>
<b>Latest version:</b> {{ detail_data.metadata_version[0] }}
</p> -->
<p v-if="detail_data.date">Date: {{ detail_data.date }}</p>
<p v-if="detail_data.other_version">View other version</p>
</p>
<p v-if="detail_data.date">Date: {{ detail_data.created.date }}</p>
<p v-if="detail_data.other_version">View other version</p> -->
</el-card>
</div>
<hr v-if="detail_data.download_num" />
Expand All @@ -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);
},
}
}
</script>
Expand Down
Loading