Eubopen compounds: show only sections with data on quality control and activity profile

components/report_cards/chemical_probe/ActivityProfileComponents/ActivityDataTabs.vue

 <template>
   <div>
-    <DownloadButton :item-i-d="itemID" :section-key="sectionKey" />
-    <v-tabs v-model="tab" show-arrows>
-      <v-tab v-for="item in shownSections" :key="item.key">
-        {{ item.title }}
-      </v-tab>
-    </v-tabs>
+    <v-skeleton-loader v-if="loading" type="card"></v-skeleton-loader>
+    <template v-else-if="error">
+      <v-alert outlined type="error">
+        {{ errorMessage }}
+      </v-alert>
+    </template>
+    <template v-else>
+      <DownloadButton :item-i-d="itemID" :section-key="sectionKey" />
+      <v-tabs v-model="tab" show-arrows>
+        <v-tab v-for="item in shownSections" :key="item.key">
+          {{ item.title }}
+        </v-tab>
+      </v-tabs>
 
-    <v-tabs-items v-model="tab">
-      <v-tab-item v-for="item in shownSections" :key="item.key">
-        <ActivityDataSingleTab :tab-config="item" :item-i-d="itemID" />
-      </v-tab-item>
-    </v-tabs-items>
+      <v-tabs-items v-model="tab">
+        <v-tab-item v-for="item in shownSections" :key="item.key">
+          <ActivityDataSingleTab :tab-config="item" :item-i-d="itemID" />
+        </v-tab-item>
+      </v-tabs-items>
+    </template>
   </div>
 </template>
 
 <script>
 import ActivityDataSingleTab from '~/components/report_cards/chemical_probe/ActivityProfileComponents/ActivityDataSingleTab.vue'
 import DownloadButton from '~/components/report_cards/chemical_probe/ActivityProfileComponents/DownloadButton.vue'
+import EntityNames from '~/web-components-submodule/standardisation/EntityNames.js'
+import IndexNames from '~/web-components-submodule/standardisation/IndexNames.js'
+import ESProxyService from '~/web-components-submodule/services/ESProxyService.js'
+
 export default {
   components: { ActivityDataSingleTab, DownloadButton },
   props: {
@@ -33,90 +45,152 @@ export default {
   data() {
     return {
       tab: null,
+      loading: true,
+      error: false,
+      errorMessage: '',
+      shownSections: [],
       sections: {
-        QualityControl: [
-          {
+        QualityControl: {
+          MULTI: {
             key: 'MULTI',
             filter: 'filter1',
             title: 'Cell Health',
             label: 'Cell Health Data',
           },
-          {
+          INCU: {
             key: 'INCU',
             filter: 'filter2',
             title: 'Incucyte Cell Viability',
             label: 'Incucyte Cell Viability Data',
           },
-          {
+          LIABILITY: {
             key: 'LIABILITY',
             filter: 'filter3',
             title: 'Liability',
             label: 'Liability Data',
           },
-        ],
-        ActivityProfile: [
-          {
+        },
+        ActivityProfile: {
+          AB: {
             key: 'AB',
             filter: 'filter1',
             title: 'Affinity Biochemical',
             label: 'Affinity Biochemical Assay',
           },
-          {
+          AOT: {
             key: 'AOT',
             filter: 'filter2',
             title: 'Affinity On-target Cellular',
             label: 'Affinity On-target Cellular Assay',
           },
-          {
+          AP: {
             key: 'AP',
             filter: 'filter3',
             title: 'Affinity Phenotypic Cellular',
             label: 'Affinity Phenotypic Cellular Assay',
           },
-          {
+          S: {
             key: 'S',
             filter: 'filter4',
             title: 'Selectivity',
             label: 'Selectivity Assay',
           },
-          {
-            key: 'ASIC50, ASSS',
+          ASIC50: {
+            key: 'ASIC50',
             filter: 'filter5',
             title: 'Alphascreen',
             label: 'Alphascreen Assay',
           },
-          {
+          ASSS: {
+            key: 'ASSS',
+            filter: 'filter5',
+            title: 'Alphascreen',
+            label: 'Alphascreen Assay',
+          },
+          GPCR: {
             key: 'GPCR',
             filter: 'filter6',
             title: 'GPCR Beta-arrestin Recruitment',
             label: 'GPCR Beta-arrestin Recruitment Assay',
           },
-          {
+          NanoBRET: {
             key: 'NanoBRET',
             filter: 'filter7',
             title: 'NanoBRET',
             label: 'NanoBRET Assay',
           },
-          {
+          ITC: {
             key: 'ITC',
             filter: 'filter8',
             title: 'Isothermal Titration Calorimetry',
             label: 'Isothermal Titration Calorimetry Assay',
           },
-          {
+          HTRF: {
             key: 'HTRF',
             filter: 'filter9',
             title: 'Homogeneous Time Resolved Fluorescence',
             label: 'Homogeneous Time Resolved Fluorescence Assay',
           },
-        ],
+        },
       },
     }
   },
-  computed: {
-    shownSections() {
-      return this.sections[this.sectionKey]
-    },
+  mounted() {
+    const potentialSections = this.sections[this.sectionKey]
+    const entityID = EntityNames.EubopenActivity.entityID
+    const indexName = IndexNames.getIndexNameFromEntityID(entityID)
+    const aidxPrefixes = Object.keys(potentialSections)
+
+    const query = {
+      size: 0,
+      query: {
+        bool: {
+          must: [
+            { terms: { molecule_chembl_id: [this.itemID] } },
+            {
+              terms: {
+                '_metadata.eubopen_assay_type.aidx_prefix.keyword': aidxPrefixes,
+              },
+            },
+          ],
+        },
+      },
+      aggs: {
+        assay_types: {
+          terms: {
+            field: '_metadata.eubopen_assay_type.aidx_prefix',
+            size: aidxPrefixes.length,
+            order: { _count: 'desc' },
+          },
+        },
+      },
+    }
+
+    ESProxyService.getESData(indexName, query)
+      .then((response) => {
+        const buckets =
+          response.data.es_response.aggregations.assay_types.buckets
+        const shownKeys = buckets
+          .filter((item) => item.doc_count > 0)
+          .map((item) => item.key)
+
+        const shownSections = []
+        for (const key of shownKeys) {
+          const section = potentialSections[key]
+          if (section == null) {
+            continue
+          }
+          shownSections.push(section)
+        }
+
+        this.shownSections = shownSections
+        this.loading = false
+      })
+      .catch((error) => {
+        this.loading = false
+        this.error = true
+        this.errorMessage = `There was an error when loading the categories. ${error}`
+      })
   },
 }
 </script>