OneSet.vue

<template>
  <div>
    <v-skeleton-loader v-if="loading" type="table" />
    <v-card-text v-else-if="showError">
      <div class="text-caption error--text">Error: {{ errorMsg }}.</div>
    </v-card-text>
    <template v-else>
      <v-text-field
        v-model="search"
        append-icon="mdi-magnify"
        label="Search"
        single-line
        hide-details
      ></v-text-field>
      <br />
      <v-data-table
        :headers="headers"
        :items="setItems"
        :items-per-page="10"
        :search="search"
      >
        <template #[`item.target_pref_name`]="{ item }">
          <a
            v-if="showItemLinkToTarget(item)"
            :href="getItemLinkToTarget(item)"
          >
            {{ getItemTargetIDText(item) }}
          </a>
          <template v-else>
            {{ getItemTargetIDText(item) }}
          </template>
        </template>

        <template #[`item.COMPOUND_NAME`]="{ item }">
          <div
            v-if="showItemLinkToCompound(item)"
            class="d-flex flex-column justify-center align-center"
          >
            <MoleculeImage
              :molecule-chembl-id="item['Molecule ChEMBL ID']"
              :aspect-ratio="String(16 / 9)"
              max-width="250px"
              contain
            />

            <a :href="getItemLinkToCompound(item)">
              {{ getItemCompoundIDText(item) }}
            </a>
          </div>
          <template v-else>
            {{ getItemCompoundIDText(item) }}
          </template>
        </template>
      </v-data-table>
    </template>
  </div>
</template>

<script>
import ESProxyService from '~/web-components-submodule/services/ESProxyService.js'
import LinksToEntities from '~/web-components-submodule/standardisation/LinksToEntities.js'
import EntityNames from '~/web-components-submodule/standardisation/EntityNames.js'
import MoleculeImage from '~/web-components-submodule/components/common/ReportCards/Shared/MoleculeImage.vue'

export default {
  components: {
    MoleculeImage,
  },
  props: {
    setID: {
      type: String,
      default: () => undefined,
    },
  },
  data() {
    return {
      loading: true,
      showError: false,
      errorMsg: undefined,
      setItems: [],
      search: '',
      nullTextValue: '---',
      headers: [
        {
          text: 'Compound Name',
          value: 'COMPOUND_NAME',
        },
        {
          text: 'Protein Family',
          value: 'Protein Family',
        },
        {
          text: 'Target Name',
          value: 'target_pref_name',
        },
        {
          text: 'Affinity Biochemical (nM)',
          value: 'Affinity biochemical',
        },
        {
          text: 'Affinity On-target Cellular (nM)',
          value: 'Affinity on-target cellular',
        },
        {
          text: 'Recommended Concentration',
          value: 'Recommended Concentration',
        },
      ],
    }
  },
  async mounted() {
    try {
      const setItemsResponse = await ESProxyService.getGenericData(
        `eubopen/miscellaneous/dataset/${this.setID}`
      )
      this.setItems = setItemsResponse.data.setItems
    } catch (e) {
      this.showError = true
      this.errorMsg = e.message
    } finally {
      this.loading = false
    }
  },
  methods: {
    showItemLinkToTarget(item) {
      return item.target_id != null && item.target_id !== this.nullTextValue
    },
    getItemTargetIDText(item) {
      const targetPrefName = item.target_pref_name
      const targetID = item.target_id
      return targetPrefName == null || targetPrefName === this.nullTextValue
        ? targetID
        : targetPrefName
    },
    getItemLinkToTarget(item) {
      return LinksToEntities[
        EntityNames.EubopenTarget.entityID
      ].getLinkToReportCard(item.target_id)
    },
    showItemLinkToCompound(item) {
      return (
        item['Molecule ChEMBL ID'] != null &&
        item['Molecule ChEMBL ID'] !== this.nullTextValue
      )
    },
    getItemCompoundIDText(item) {
      const compoundPrefName = item.COMPOUND_NAME
      const compoundID = item['Molecule ChEMBL ID']
      return compoundPrefName == null || compoundPrefName === this.nullTextValue
        ? compoundID
        : compoundPrefName
    },
    getItemLinkToCompound(item) {
      return LinksToEntities[
        EntityNames.EubopenCompound.entityID
      ].getLinkToReportCard(item['Molecule ChEMBL ID'])
    },
  },
}
</script>

<style></style>