Tweak sizes for molecule image and null values for summary data

components/report_cards/chemical_probe/ControlStructuresAndUse.vue

@@ -5,10 +5,11 @@
         <v-col cols="12" sm="6">
           <v-card tile elevation="0">
             <v-card-title>PFI-6 Chemical Probe</v-card-title>
-            <v-img
-              height="250"
-              src="https://www.ebi.ac.uk/chembl/api/data/image/CHEMBL160074.svg"
-            ></v-img>
+            <MoleculeImage
+              molecule-chembl-id="CHEMBL160074"
+              contain
+              :aspect-ratio="16 / 9"
+            />
             <v-card-subtitle>
               <a
                 href="https://www.ebi.ac.uk/chembl/compound_report_card/CHEMBL160074"
@@ -39,10 +40,11 @@
         <v-col cols="12" sm="6">
           <v-card tile elevation="0">
             <v-card-title>PFI-6N Negative Control</v-card-title>
-            <v-img
-              height="250"
-              src="https://www.ebi.ac.uk/chembl/api/data/image/CHEMBL1269459.svg"
-            ></v-img>
+            <MoleculeImage
+              molecule-chembl-id="CHEMBL1269459"
+              contain
+              :aspect-ratio="16 / 9"
+            />
             <v-card-subtitle>
               <a
                 href="https://www.ebi.ac.uk/chembl/compound_report_card/CHEMBL1269459"
@@ -73,10 +75,11 @@
         <v-col cols="12" sm="6">
           <v-card tile elevation="0">
             <v-card-title>PFI-6N Another Control 1</v-card-title>
-            <v-img
-              height="250"
-              src="https://www.ebi.ac.uk/chembl/api/data/image/CHEMBL1276106.svg"
-            ></v-img>
+            <MoleculeImage
+              molecule-chembl-id="CHEMBL1276106"
+              contain
+              :aspect-ratio="16 / 9"
+            />
             <v-card-subtitle>
               <a
                 href="https://www.ebi.ac.uk/chembl/compound_report_card/CHEMBL1276106"
@@ -107,10 +110,11 @@
         <v-col cols="12" sm="6">
           <v-card tile elevation="0">
             <v-card-title>PFI-6N Another Control 2</v-card-title>
-            <v-img
-              height="250"
-              src="https://www.ebi.ac.uk/chembl/api/data/image/CHEMBL1557.svg"
-            ></v-img>
+            <MoleculeImage
+              molecule-chembl-id="CHEMBL1557"
+              contain
+              :aspect-ratio="16 / 9"
+            />
             <v-card-subtitle>
               <a
                 href="https://www.ebi.ac.uk/chembl/compound_report_card/CHEMBL1557"
@@ -145,9 +149,12 @@
 
 <script>
 import TextToClipboard from '~/web-components-submodule/components/common/TextToClipboard.vue'
+import MoleculeImage from '~/web-components-submodule/components/common/ReportCards/Shared/MoleculeImage.vue'
+
 export default {
   components: {
     TextToClipboard,
+    MoleculeImage,
   },
 }
 </script>

components/report_cards/chemical_probe/Summary.vue

@@ -35,7 +35,7 @@
             <v-row class="details-row" dense>
               <v-col cols="12">
                 <b>Chemical Probe Name:</b>
-                {{ probeSummaryData.pref_name }}
+                {{ getPropertyPalue(probeSummaryData, 'pref_name', '---') }}
               </v-col>
             </v-row>
             <v-divider />
@@ -184,6 +184,9 @@ export default {
   mounted() {
     this.$store.dispatch('probe/probeSummary/loadData', this.itemID)
   },
+  methods: {
+    getPropertyPalue: ObjectPropertyAccess.getPropertyPalue,
+  },
 }
 </script>
 

components/report_cards/target/NameAndClassification.vue

@@ -7,14 +7,16 @@
       <v-row class="details-row" dense>
         <v-col cols="12">
           <b>Type:</b>
-          {{ nameAndClassificationData.target_type }}
+          {{
+            getPropertyPalue(nameAndClassificationData, 'target_type', '---')
+          }}
         </v-col>
       </v-row>
       <v-divider />
       <v-row class="details-row" dense>
         <v-col cols="12">
           <b>Preferred Name:</b>
-          {{ nameAndClassificationData.pref_name }}
+          {{ getPropertyPalue(nameAndClassificationData, 'pref_name', '---') }}
         </v-col>
       </v-row>
       <v-divider />
@@ -33,7 +35,7 @@
       <v-row class="details-row" dense>
         <v-col cols="12">
           <b>Organism:</b>
-          {{ nameAndClassificationData.organism }}
+          {{ getPropertyPalue(nameAndClassificationData, 'organism', '---') }}
         </v-col>
       </v-row>
       <v-divider />
@@ -66,6 +68,7 @@
 import { mapState } from 'vuex'
 import Synonyms from '~/web-components-submodule/components/common/ReportCards/Shared/Synonyms.vue'
 import ProteinTargetClassification from '~/web-components-submodule/components/common/ReportCards/Target/ProteinTargetClassification.vue'
+import ObjectPropertyAccess from '~/web-components-submodule/utils/ObjectPropertyAccess.js'
 
 export default {
   components: {
@@ -95,10 +98,12 @@ export default {
       return 'No'
     },
   }),
-
   mounted() {
     this.$store.dispatch('target/nameAndClassification/loadData', this.itemID)
   },
+  methods: {
+    getPropertyPalue: ObjectPropertyAccess.getPropertyPalue,
+  },
 }
 </script>
 

web-components-submodule @ 6e14f50d

-Subproject commit 28f28cd2cafd89687a170b5a9191b1ed8199c026
+Subproject commit 6e14f50d6975490861689cd3f838830632b7448d