Eubopen report cards: just show links to pdbe or uniprot instead of visualisation

components/report_cards/chemical_probe/CompoundCrystalStructures.vue

@@ -5,12 +5,23 @@
       <v-card-text> No entires found in PDB for {{ itemID }} </v-card-text>
     </template>
     <template v-if="!loading && thereAreRefs">
-      <v-tabs show-arrows :vertical="makeTabsVertical">
-        <v-tab v-for="ref in pdbeRefs" :key="ref.id"> {{ ref.id }} </v-tab>
-        <v-tab-item v-for="ref in pdbeRefs" :key="`${ref.id}-item`">
-          <PDBeVisualisations :ligand-code="ref.id" :ref-link="ref.link" />
-        </v-tab-item>
-      </v-tabs>
+      <v-card-title> Ligand codes found in PDB </v-card-title>
+      <v-divider />
+      <v-card-text>
+        <v-btn
+          v-for="ref in pdbeRefs"
+          :key="ref.id"
+          depressed
+          color="primary"
+          :href="ref.link"
+          target="_blank"
+          class="a-button"
+        >
+          {{ ref.id }}
+
+          <v-icon> mdi-open-in-new </v-icon>
+        </v-btn>
+      </v-card-text>
     </template>
   </v-card>
 </template>
@@ -21,12 +32,9 @@ import ESProxyService from '~/web-components-submodule/services/ESProxyService.j
 import EntityNames from '~/web-components-submodule/standardisation/EntityNames.js'
 import IndexNames from '~/web-components-submodule/standardisation/IndexNames.js'
 import ObjectPropertyAccess from '~/web-components-submodule/utils/ObjectPropertyAccess.js'
-import PDBeVisualisations from '~/components/report_cards/shared/CrystalStructures/PDBeVisualisations.vue'
 
 export default {
-  components: {
-    PDBeVisualisations,
-  },
+  components: {},
   props: {
     itemID: {
       type: String,
@@ -41,16 +49,6 @@ export default {
     }
   },
   computed: {
-    makeTabsVertical() {
-      switch (this.$vuetify.breakpoint.name) {
-        case 'xs':
-          return false
-        case 'sm':
-          return false
-        default:
-          return true
-      }
-    },
     thereAreRefs() {
       return this.pdbeRefs.length > 0
     },
@@ -90,4 +88,8 @@ export default {
 }
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+.a-button {
+  margin-right: 5px;
+}
+</style>

components/report_cards/target/TargetCrystalStructures.vue

@@ -5,17 +5,21 @@
       <v-card-text> No entires found in PDB for {{ itemID }} </v-card-text>
     </template>
     <template v-if="!loading && thereAreAccessions">
-      <v-tabs show-arrows :vertical="makeTabsVertical">
-        <v-tab v-for="accession in uniProtAccessions" :key="accession">
-          {{ accession }}
-        </v-tab>
-        <v-tab-item
+      <v-card-text>
+        <v-btn
           v-for="accession in uniProtAccessions"
-          :key="`${accession}-item`"
+          :key="accession"
+          depressed
+          color="primary"
+          :href="`https://www.uniprot.org/uniprot/${accession}`"
+          target="_blank"
+          class="a-button"
         >
-          <PDBeRepresentativeStructure :uni-prot-accession="accession" />
-        </v-tab-item>
-      </v-tabs>
+          {{ accession }}
+
+          <v-icon> mdi-open-in-new </v-icon>
+        </v-btn>
+      </v-card-text>
     </template>
   </v-card>
 </template>
@@ -26,12 +30,8 @@ import ESProxyService from '~/web-components-submodule/services/ESProxyService.j
 import EntityNames from '~/web-components-submodule/standardisation/EntityNames.js'
 import IndexNames from '~/web-components-submodule/standardisation/IndexNames.js'
 import ObjectPropertyAccess from '~/web-components-submodule/utils/ObjectPropertyAccess.js'
-import PDBeRepresentativeStructure from '~/components/report_cards/shared/CrystalStructures/PDBeRepresentativeStructure.vue'
 
 export default {
-  components: {
-    PDBeRepresentativeStructure,
-  },
   props: {
     itemID: {
       type: String,
@@ -41,7 +41,6 @@ export default {
   data() {
     return {
       loading: true,
-      ligandCode: 'VIA',
       uniProtAccessions: [],
     }
   },
@@ -96,4 +95,8 @@ export default {
 }
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+.a-button {
+  margin-right: 5px;
+}
+</style>

report_cards_structure/CompoundReportCardGenerator.js

@@ -51,7 +51,7 @@ const methods = {
         },
         {
           id: 'CrystalStructures',
-          title: 'Crystal Structures',
+          title: 'PBD Ligand Codes',
           component: CompoundCrystalStructures,
           index: 6,
         },

report_cards_structure/TargetReportCardGenerator.js

@@ -23,7 +23,7 @@ const methods = {
         },
         {
           id: 'CrystalStructures',
-          title: 'Crystal Structures',
+          title: 'Uniprot Accessions',
           component: TargetCrystalStructures,
           index: 2,
         },