Add targets, compounds browser mockup and more sections to compound report card

components/report_cards/chemical_probe/CalculatedProperties.vue

+<template>
+  <v-card>
+    <v-card-text>
+      <v-row>
+        <v-col cols="12" md="6">
+          <v-list dense>
+            <template v-for="item in properties1">
+              <v-list-item :key="item.propLabel">
+                <v-list-item-content>
+                  <v-list-item-title>
+                    <div class="d-flex justify-space-between">
+                      <div>
+                        <b>{{ item.propLabel }}:</b>
+                      </div>
+                      <div>
+                        {{ item.propValue }}
+                      </div>
+                    </div>
+                  </v-list-item-title>
+                </v-list-item-content>
+              </v-list-item>
+              <v-divider :key="`${item.propLabel}-divider`" />
+            </template>
+          </v-list>
+        </v-col>
+        <v-col cols="12" md="6">
+          <v-list dense>
+            <template v-for="item in properties2">
+              <v-list-item :key="item.propLabel">
+                <v-list-item-content>
+                  <v-list-item-title>
+                    <div class="d-flex justify-space-between">
+                      <div>
+                        <b>{{ item.propLabel }}:</b>
+                      </div>
+                      <div>
+                        {{ item.propValue }}
+                      </div>
+                    </div>
+                  </v-list-item-title>
+                </v-list-item-content>
+              </v-list-item>
+              <v-divider :key="`${item.propLabel}-divider`" />
+            </template>
+          </v-list>
+        </v-col>
+      </v-row>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      properties1: [
+        {
+          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',
+        },
+      ],
+      properties2: [
+        {
+          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',
+        },
+      ],
+    }
+  },
+}
+</script>
+
+<style></style>