Eubopen: Add probe profile section with real data

components/Masthead/LinksMenu.vue

 <template>
-  <div class="d-flex justify-space-between links-menu">
+  <div class="d-flex justify-space-between justify-sm-start links-menu">
     <v-btn color="primary" depressed tile nuxt to="/">
       <v-icon>mdi-home</v-icon>
     </v-btn>

components/footer/LicenseAndPrivacy.vue

@@ -3,7 +3,7 @@
     <v-divider />
     <div class="d-flex justify-center text-container">
       <span class="text-body-2 text-justify">
-        Website Hosted by the
+        Website hosted by the
         <a target="_blank" href="https://www.ebi.ac.uk/">EMBL-EBI</a>, licensed
         under the
         <a target="_blank" href="https://www.apache.org/licenses/LICENSE-2.0"

components/report_cards/chemical_probe/ProbeMechanism.vue

@@ -22,7 +22,7 @@ export default {
   },
   mixins: [datasetMixin],
   props: {
-    chemblID: {
+    itemID: {
       type: String,
       default: () => undefined,
     },
@@ -47,7 +47,7 @@ export default {
     starterParams() {
       const starterParams = ProbeMechanism.getReportCardStarterParams(
         EntityNames.EubopenMechanismOfAction.entityID,
-        'CHEMBL101253',
+        this.itemID,
         this.propertiesGroups
       )
       return starterParams

components/report_cards/chemical_probe/ProbeProfile.vue

 <template>
-  <v-card class="yellow lighten-4">
+  <v-card>
     <v-card-text>
-      <EntityRelations />
+      <ChEMBLDataTable
+        :dataset-state="datasetState"
+        :store-module-name="storeModuleName"
+        :outlined-card="true"
+      />
     </v-card-text>
   </v-card>
 </template>
 
 <script>
-import EntityRelations from '~/web-components-submodule/components/common/ReportCards/EntityRelations/EntityRelations.vue'
+import { datasetMixin } from '~/web-components-submodule/mixins/datasets/datasetMixin.js'
+import ChEMBLDataTable from '~/web-components-submodule/components/common/dataSets/data_table/ChEMBLDataTable.vue'
+import EntityNames from '~/web-components-submodule/standardisation/EntityNames.js'
+import ProbeProfile from '~/web-components-submodule/store/datasets/generators/eubopen/activity/ProbeProfile.js'
+
 export default {
   components: {
-    EntityRelations,
+    ChEMBLDataTable,
+  },
+  mixins: [datasetMixin],
+  props: {
+    itemID: {
+      type: String,
+      default: () => undefined,
+    },
+    storeModuleName: {
+      type: String,
+      default: () => `probe_profile`,
+    },
+  },
+  data() {
+    return {
+      propertiesGroups: {
+        1: {
+          id: 'eubopen_compound_probe_profile',
+          selected: true,
+          allHeaders: [],
+        },
+      },
+      entityID: EntityNames.EubopenActivity.entityID,
+      customDataRepresentationParams: {
+        possiblePageSizes: [5, 10],
+        itemsPerPage: 5,
+      },
+    }
+  },
+  computed: {
+    starterParams() {
+      const starterParams = ProbeProfile.getReportCardStarterParams(
+        EntityNames.EubopenActivity.entityID,
+        this.itemID,
+        this.propertiesGroups
+      )
+      return starterParams
+    },
   },
 }
 </script>

components/report_cards/chemical_probe/Summary.vue

@@ -15,45 +15,41 @@
           <v-card-subtitle>Details</v-card-subtitle>
           <v-divider />
           <v-card-text>
-            <v-row class="details-row yellow lighten-4" dense>
+            <v-row dense>
               <v-col cols="12">
-                <b>EUbOPEN ID:</b>
-                {{ itemID }}
+                <div><b>EUbOPEN ID:</b> {{ itemID }}<v-divider /></div>
               </v-col>
-            </v-row>
-            <v-divider />
-
-            <v-row class="details-row" dense>
               <v-col cols="12">
-                <b>Name:</b>
-                {{ getPropertyPalue(probeSummaryData, 'pref_name', '---') }}
+                <div>
+                  <b>Name:</b>
+                  {{ getPropertyPalue(probeSummaryData, 'pref_name', '---') }}
+                  <v-divider />
+                </div>
               </v-col>
-            </v-row>
-            <v-divider />
-            <v-row class="details-row" dense>
-              <v-col
-                cols="12"
-                class="d-flex align-center flex-column flex-md-row"
-              >
-                <b>Synonyms:</b>
-                <Synonyms
-                  type="molecule_synonyms"
-                  :entity-i-d="entityID"
-                  :item-i-d="itemID"
-                />
+              <v-col cols="12">
+                <div>
+                  <b>Synonyms:</b>
+                  <br />
+                  <Synonyms
+                    type="molecule_synonyms"
+                    :entity-i-d="entityID"
+                    :item-i-d="itemID"
+                  />
+                  <v-divider />
+                </div>
+              </v-col>
+              <v-col cols="12">
+                <b>Download probe data package:</b>
+                <br /><br />
+                <v-btn
+                  href="https://drive.google.com/file/d/1FQOGQxTdcIfTeM1Vq73vbHOEJ0ZptkHV/view?usp=sharing"
+                  color="primary"
+                >
+                  <v-icon>mdi-download</v-icon> PDF
+                </v-btn>
               </v-col>
             </v-row>
-            <v-divider />
           </v-card-text>
-
-          <v-card-actions class="d-flex justify-center">
-            <v-btn
-              href="https://drive.google.com/file/d/1FQOGQxTdcIfTeM1Vq73vbHOEJ0ZptkHV/view?usp=sharing"
-              color="primary"
-            >
-              <v-icon>mdi-download</v-icon> PDF
-            </v-btn>
-          </v-card-actions>
         </v-col>
         <v-col
           v-if="showStructureImgLaterally"
@@ -116,9 +112,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.details-row {
-  margin: 0;
-}
 .molecule-img-container {
   padding-right: 10px;
 }

report_cards_structure/CompoundReportCardGenerator.js

 import Summary from '~/components/report_cards/chemical_probe/Summary.vue'
 import ControlStructuresAndUse from '~/components/report_cards/chemical_probe/ControlStructuresAndUse.vue'
-import CellularAssayTargetEngagement from '~/components/report_cards/chemical_probe/CellularAssayTargetEngagement.vue'
 import ProbeProfile from '~/components/report_cards/chemical_probe/ProbeProfile.vue'
 import ProbeMechanism from '~/components/report_cards/chemical_probe/ProbeMechanism.vue'
 import CompoundCrystalStructures from '~/components/report_cards/chemical_probe/CompoundCrystalStructures.vue'
@@ -20,15 +19,15 @@ const methods = {
           index: 0,
         },
         {
-          id: 'ControlStructuresAndUse',
-          title: 'Control Structures And Use',
-          component: ControlStructuresAndUse,
+          id: 'ProbeMechanism',
+          title: 'Probe Mechanism',
+          component: ProbeMechanism,
           index: 1,
         },
         {
-          id: 'CellularAssayTargetEngagement',
-          title: 'Cellular Assay and Target Engagement',
-          component: CellularAssayTargetEngagement,
+          id: 'ControlStructuresAndUse',
+          title: 'Control Structures And Use',
+          component: ControlStructuresAndUse,
           index: 2,
         },
         {
@@ -37,12 +36,6 @@ const methods = {
           component: ProbeProfile,
           index: 3,
         },
-        {
-          id: 'ProbeMechanism',
-          title: 'Probe Mechanism',
-          component: ProbeMechanism,
-          index: 4,
-        },
         {
           id: 'CalculatedProperties',
           title: 'Calculated Properties',
@@ -51,13 +44,13 @@ const methods = {
             entityID: EntityNames.EubopenCompound.entityID,
           },
 
-          index: 5,
+          index: 4,
         },
         {
           id: 'CrystalStructures',
           title: 'PBD Ligand Codes',
           component: CompoundCrystalStructures,
-          index: 6,
+          index: 5,
         },
       ],
     }

web-components-submodule @ 11257a06

-Subproject commit b3cc0c893a74ec4555438fa271f7958d160ed6ef
+Subproject commit 11257a066e00627de771f1aa223e4325197e75a1