Probe Calculated pros: use real data

components/report_cards/chemical_probe/CalculatedProperties.vue

 <template>
   <v-card>
     <v-card-text>
-      <v-row dense no-gutters>
+      <v-skeleton-loader v-if="!dataLoaded" type="text@6"></v-skeleton-loader>
+      <v-row v-else dense no-gutters>
         <v-col
-          v-for="item in properties"
+          v-for="item in calculatedProperties"
           :key="item.propLabel"
           cols="12"
           sm="6"
@@ -16,10 +17,10 @@
                 <v-list-item-title>
                   <div class="d-flex justify-space-between">
                     <div>
-                      <b>{{ item.propLabel }}:</b>
+                      <b>{{ item.label }}:</b>
                     </div>
                     <div>
-                      {{ item.propValue }}
+                      {{ item.value }}
                     </div>
                   </div>
                 </v-list-item-title>
@@ -34,88 +35,24 @@
 </template>
 
 <script>
+import { mapState } from 'vuex'
+
 export default {
-  data() {
-    return {
-      properties: [
-        {
-          propLabel: 'Mol. Weight',
-          propValue: '494.3',
-        },
-        {
-          propLabel: 'MW. Monoisotopic',
-          propValue: '180.0423',
-        },
-        {
-          propLabel: 'ALogP',
-          propValue: '1.31',
-        },
-        {
-          propLabel: '#Rotatable Bonds',
-          propValue: '2',
-        },
-        {
-          propLabel: 'Polar Surface Area',
-          propValue: '63.60',
-        },
-        {
-          propLabel: 'Molecular Species',
-          propValue: 'ACID',
-        },
-        {
-          propLabel: 'HBA',
-          propValue: '3',
-        },
-        {
-          propLabel: 'HDB',
-          propValue: '1',
-        },
-        {
-          propLabel: '#Ro5 Violations',
-          propValue: '0',
-        },
-        {
-          propLabel: 'HBA (Lipinski)',
-          propValue: '4',
-        },
-        {
-          propLabel: 'HBD (Lipinski)',
-          propValue: '1',
-        },
-        {
-          propLabel: '#Ro5 Violations (Lipinski)',
-          propValue: '0',
-        },
-        {
-          propLabel: 'CX Acidic pKa',
-          propValue: '3.41',
-        },
-        {
-          propLabel: 'CX Basic pKa',
-          propValue: '--',
-        },
-        {
-          propLabel: 'CX LogP',
-          propValue: '1.24',
-        },
-        {
-          propLabel: 'CX LogD pH7.4',
-          propValue: '-2.16',
-        },
-        {
-          propLabel: 'Aromatic Rings',
-          propValue: '1',
-        },
-        {
-          propLabel: 'Heavy Atoms',
-          propValue: '13',
-        },
-        {
-          propLabel: 'QED Weighted',
-          propValue: '0.55',
-        },
-      ],
-    }
+  props: {
+    itemID: {
+      type: String,
+      default: () => undefined,
+    },
+  },
+  computed: {
+    ...mapState({
+      dataLoaded: (state) => state.probe.calculatedProperties.dataLoaded,
+      calculatedProperties: (state) =>
+        state.probe.calculatedProperties.calculatedProperties,
+    }),
+  },
+  mounted() {
+    this.$store.dispatch('probe/calculatedProperties/loadData', this.itemID)
   },
 }
 </script>

store/probe/probeSummary.js

@@ -29,7 +29,6 @@ export const actions = {
 
     ESProxyService.getESDocument(indexName, itemID, docSource)
       .then((response) => {
-        console.log('data received: ', response.data._source)
         commit('SET_PROBE_SUMMARY_DATA', response.data._source)
         commit('SET_DATA_LOADED', true)
       })

web-components-submodule @ d37465c7

-Subproject commit 743d6c6657d00d482c4204cba10efcbdd6b432ca
+Subproject commit d37465c76f734beb356eee88fd2d0e327c153be9