Add mockup of target name and classification

components/report_cards/chemical_probe/CellularAssayTargetEngagement.vue

+<template>
+  <v-card>
+    <v-card-text>
+      <p class="text-justify">
+        In a NanoBRET cellular target engagement assay, PFI-6 displays potent
+        binding, with an average IC50 value of 0.76 μM (±0.1). In comparison,
+        PFI-6N shows no binding properties (up to 30 μM). Further in cell
+        validation using a Fluorescence Recovery After Photobleaching (FRAP)
+        assay has been used to confirm target inhibition by PFI-6.
+      </p>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style></style>

components/report_cards/target/NameAndClassification.vue

+<template>
+  <v-card>
+    <v-card-text>
+      <v-row class="details-row" dense>
+        <v-col cols="12">
+          <b>Type:</b>
+          SINGLE PROTEIN
+        </v-col>
+      </v-row>
+      <v-divider />
+      <v-row class="details-row" dense>
+        <v-col cols="12">
+          <b>Preferred Name:</b>
+          Microtubule-associated protein 2
+        </v-col>
+      </v-row>
+      <v-divider />
+      <v-row class="details-row" dense>
+        <v-col cols="12">
+          <b>Synonyms:</b>
+          MAP2 MAP-2 Microtubule-associated protein 2
+        </v-col>
+      </v-row>
+      <v-divider />
+      <v-row class="details-row" dense>
+        <v-col cols="12">
+          <b>Organism:</b>
+          Homo Sapiens
+        </v-col>
+      </v-row>
+      <v-divider />
+      <v-row class="details-row" dense>
+        <v-col cols="12">
+          <b>Species Group:</b>
+          No
+        </v-col>
+      </v-row>
+      <v-divider />
+      <v-row class="details-row" dense>
+        <v-col cols="12">
+          <b>Protein Target Classification:</b>
+          <br />
+          <br />
+          <p>
+            <v-chip outlined color="secondary" label>
+              Unclassified protein
+            </v-chip>
+            >
+            <v-chip outlined color="secondary" label>
+              Epigenetic regulator
+            </v-chip>
+            >
+            <v-chip outlined color="secondary" label> Reader </v-chip>
+            >
+            <v-chip outlined color="secondary" label> Bromodomain </v-chip>
+          </p>
+        </v-col>
+      </v-row>
+      <v-divider />
+    </v-card-text>
+  </v-card>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style>
+.details-row {
+  margin: 0;
+}
+</style>

report_cards_structure/TargetReportCardGenerator.js

+import NameAndClassification from '~/components/report_cards/target/NameAndClassification.vue'
+
+const methods = {
+  generateReportCardStructure() {
+    return {
+      title: 'Target 123456',
+      sections: [
+        {
+          id: 'NameAndClassification',
+          title: 'Name and Classification',
+          component: NameAndClassification,
+          index: 0,
+        },
+      ],
+    }
+  },
+}
+
+export default methods

web-components-submodule @ a3dde080

-Subproject commit 9234c346d68eca62090852c93978aae0e9a4b817
+Subproject commit a3dde080e163aaaff71220a4d3a65af1876b887a