Skip to content

[BI-1375] - Make GIDs clickable links #218

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

Merged
HMS17 merged 9 commits into from
May 11, 2022
Merged

[BI-1375] - Make GIDs clickable links #218

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
ace3a32
[BI-1375] - Make GIDs clickable links
HMS17 Apr 13, 2022
87bc219
[BI-1375] - Make GIDs clickable links
HMS17 Apr 13, 2022
c544c2c
Germplasm Details Parent GID Links
HMS17 Apr 14, 2022
8ac629d
Merge remote-tracking branch 'origin/feature/BI-1375' into feature/BI…
HMS17 Apr 14, 2022
75df9da
Merge branch 'develop' of https://github.com/Breeding-Insight/bi-web …
HMS17 Apr 15, 2022
88da05c
Small fixes
HMS17 Apr 15, 2022
cace7e5
Unit test fix
HMS17 Apr 15, 2022
3802cb2
[BI-1339] [BI-1375] QA fix and Code review fix
HMS17 May 3, 2022
a32e82f
Merge branch 'develop' into feature/BI-1375
HMS17 May 3, 2022
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
2 changes: 1 addition & 1 deletion .env.development
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,4 +14,4 @@ VUE_APP_BI_API_ROOT=${API_BASE_URL}
VUE_APP_LOG_LEVEL=${WEB_LOG_LEVEL}

# The reference source
VUE_APP_BI_REFERENCE_SOURCE=breedinginsight.org
VUE_APP_BI_REFERENCE_SOURCE=${BRAPI_REFERENCE_SOURCE}
49 changes: 49 additions & 0 deletions src/components/germplasm/GermplasmLink.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
<!--
- See the NOTICE file distributed with this work for additional information
- regarding copyright ownership.
-
- Licensed under the Apache License, Version 2.0 (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
-->

<template>
<router-link v-if="this.germplasmUUID" v-bind:to="{name: 'germplasm-details', params: {programId: activeProgram.id, germplasmId: this.germplasmUUID}}">
{{ this.germplasmGID }}
</router-link>
Copy link
Contributor

@ctucker3 ctucker3 Apr 21, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm wondering for this if it would be better to have the GID not be a link if UUID isn't provided, rather than not showing the GID at all?

I'm thinking that because from a user perspective it might be better to have a broken link rather than missing data in the case of a data error such as missing UUID.

Copy link
Contributor Author

@HMS17 HMS17 May 3, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point, changed to be text in the case of no UUID

<div v-else>
{{ this.germplasmGID }}
</div>
</template>

<script lang="ts">
import {Component, Prop, Vue} from 'vue-property-decorator'
import { mapGetters } from 'vuex'
import {Program} from "@/breeding-insight/model/Program";

@Component({
computed: {
...mapGetters([
'activeProgram'
])
}
})
export default class GermplasmLink extends Vue {

private activeProgram?: Program;
@Prop()
private germplasmUUID!: String;
@Prop()
private germplasmGID!: String;

}

</script>
25 changes: 21 additions & 4 deletions src/views/germplasm/GermplasmDetails.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,18 @@
<li><b>Breeding Method: </b> {{ germplasm.additionalInfo.breedingMethod }}</li>
<li><b>Source: </b> {{ germplasm.seedSource }}</li>
<li><b>Pedigree: </b> {{ germplasm.additionalInfo.pedigreeByName }}</li>
<li><b>Pedigree GID(s): </b> {{ germplasm.pedigree }}</li>
<li><b>Pedigree GID(s): </b>
<GermplasmLink
v-if="germplasm.pedigree"
v-bind:germplasmUUID="Pedigree.parsePedigreeString(germplasm.additionalInfo.pedigreeByUUID).femaleParent"
v-bind:germplasmGID="Pedigree.parsePedigreeString(germplasm.pedigree).femaleParent"
> </GermplasmLink>
<template v-if="Pedigree.parsePedigreeString(germplasm.pedigree).maleParent">
Copy link
Contributor

@ctucker3 ctucker3 Apr 21, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the GermplasmLink above you have the v-if directly in the component, but here you have it in a template. Is it possible to move this into the GermplasmLink for consistency?

Copy link
Contributor Author

@HMS17 HMS17 May 3, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Right now I have the GermplasmLink as a one germplasm per link sort of thing rather than a more complicated component that includes multiple configurations of links. The v-if here is wrapped around the "/ " part of the pedigree since the slash and gid only show up if there is a male parent. I could add some sort of boolean to pass in but I would still need a boolean on the outside for the slash lest I make the Germplasm Link more complicated by adding the slash. So what I have now seems to be the simplest route?

Copy link
Contributor

@ctucker3 ctucker3 May 3, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah gotcha, I missed the /. No need to change anything, thanks for the explanation!

/ <GermplasmLink
v-bind:germplasmUUID="Pedigree.parsePedigreeString(germplasm.additionalInfo.pedigreeByUUID).maleParent"
v-bind:germplasmGID="Pedigree.parsePedigreeString(germplasm.pedigree).maleParent"
> </GermplasmLink></template>
</li>
</ul>
</section>
</article>
Expand Down Expand Up @@ -93,29 +104,35 @@ import {Program} from "@/breeding-insight/model/Program";
import GermplasmBase from "@/components/germplasm/GermplasmBase.vue";
import {Germplasm} from "@/breeding-insight/brapi/model/germplasm";
import {GermplasmService} from "@/breeding-insight/service/GermplasmService";
import GermplasmLink from '@/components/germplasm/GermplasmLink.vue'
import {Pedigree} from "@/breeding-insight/model/import/germplasm/Pedigree";
import {GermplasmUtils} from '@/breeding-insight/utils/GermplasmUtils';
import { Result } from '@/breeding-insight/model/Result';

@Component({
components: {},
components: {GermplasmLink},
computed: {
...mapGetters([
'activeProgram'
])
},
data: () => ({GermplasmUtils})
data: () => ({Pedigree, GermplasmUtils})
})
export default class GermplasmDetails extends GermplasmBase {

private activeProgram?: Program;
private germplasm?: Germplasm;
private germplasmLoading: boolean = true;
private germplasmUUID: string = this.$route.params.germplasmId;

mounted() {
this.getGermplasm();
}

get germplasmUUID(): string {
return this.$route.params.germplasmId;
}

@Watch('$route')
async getGermplasm() {
this.germplasmLoading = true;
try {
Expand Down
21 changes: 16 additions & 5 deletions src/views/germplasm/GermplasmTable.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,11 @@
v-on:sort="paginationController.updateSort($event)"
>
<b-table-column field="accessionNumber" label="GID" v-slot="props" :th-attrs="(column) => ({scope:'col'})">
{{ props.row.data.accessionNumber }}
<GermplasmLink
v-bind:germplasmUUID="GermplasmUtils.getGermplasmUUID(props.row.data.externalReferences)"
v-bind:germplasmGID="props.row.data.accessionNumber"
>
</GermplasmLink>
</b-table-column>
<b-table-column field="defaultDisplayName" label="Name" v-slot="props" :th-attrs="(column) => ({scope:'col'})">
{{ props.row.data.defaultDisplayName }}
Expand All @@ -26,18 +30,24 @@
{{ props.row.data.seedSource }}
</b-table-column>
<b-table-column field="pedigree" label="Female Parent GID" v-slot="props" :th-attrs="(column) => ({scope:'col'})">
{{ Pedigree.parsePedigreeString(props.row.data.pedigree).femaleParent }}
<GermplasmLink
v-bind:germplasmUUID="Pedigree.parsePedigreeString(props.row.data.additionalInfo.pedigreeByUUID).femaleParent"
v-bind:germplasmGID="Pedigree.parsePedigreeString(props.row.data.pedigree).femaleParent"
> </GermplasmLink>
</b-table-column>
<b-table-column field="pedigree" label="Male Parent GID" v-slot="props" :th-attrs="(column) => ({scope:'col'})">
{{ Pedigree.parsePedigreeString(props.row.data.pedigree).maleParent }}
<GermplasmLink
v-bind:germplasmUUID="Pedigree.parsePedigreeString(props.row.data.additionalInfo.pedigreeByUUID).maleParent"
v-bind:germplasmGID="Pedigree.parsePedigreeString(props.row.data.pedigree).maleParent"
> </GermplasmLink>
</b-table-column>
<b-table-column field="createdDate" label="Created Date" v-slot="props" :th-attrs="(column) => ({scope:'col'})">
{{ props.row.data.additionalInfo.createdDate }}
</b-table-column>
<b-table-column field="createdBy.userName" label="Created By" v-slot="props" :th-attrs="(column) => ({scope:'col'})">
{{ props.row.data.additionalInfo.createdBy.userName }}
</b-table-column>
<b-table-column field="germplasmId" v-slot="props" :th-attrs="(column) => ({scope:'col'})">
<b-table-column v-slot="props" :th-attrs="(column) => ({scope:'col'})">
<router-link v-bind:to="{name: 'germplasm-details', params: {programId: activeProgram.id, germplasmId: GermplasmUtils.getGermplasmUUID(props.row.data.externalReferences)}}">
Show Details
</router-link>
Expand Down Expand Up @@ -68,11 +78,12 @@ import {Pagination} from "@/breeding-insight/model/BiResponse";
import ExpandableTable from "@/components/tables/expandableTable/ExpandableTable.vue";
import {PaginationController} from "@/breeding-insight/model/view_models/PaginationController";
import {Pedigree} from "@/breeding-insight/model/import/germplasm/Pedigree";
import GermplasmLink from '@/components/germplasm/GermplasmLink.vue'
import {GermplasmUtils} from '@/breeding-insight/utils/GermplasmUtils';

@Component({
mixins: [validationMixin],
components: {ReportTable, ExpandableTable},
components: {GermplasmLink, ReportTable, ExpandableTable},
computed: {
...mapGetters([
'activeProgram'
Expand Down
1 change: 1 addition & 0 deletions vue.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ process.env.VUE_APP_BI_API_ROOT = process.env.VUE_APP_BI_API_ROOT || "http://loc
process.env.VUE_APP_OPENID_LOGOUT_URL = process.env.VUE_APP_OPENID_LOGOUT_URL || "https://sandbox.orcid.org/userStatus.json?logUserOut=true";
process.env.VUE_APP_BI_API_V1_PATH = process.env.VUE_APP_BI_API_ROOT + "/v1";
process.env.VUE_APP_LOG_LEVEL = process.env.VUE_APP_LOG_LEVEL || 'error';
process.env.VUE_APP_BI_REFERENCE_SOURCE = process.env.VUE_APP_BI_REFERENCE_SOURCE || 'breedinginsight.org';

module.exports = {
devServer: {
Expand Down