Summary.vue

<template>
  <v-card>
    <v-card-text v-if="loading">
      <v-skeleton-loader type="paragraph, paragraph"></v-skeleton-loader>
    </v-card-text>
    <v-card-text v-else-if="showError">
      <div class="text-caption error--text">Error: {{ errorMsg }}.</div>
    </v-card-text>
    <template v-else>
      <v-row dense>
        <v-col cols="12" md="7" lg="8">
          <template v-if="!showStructureImgLaterally">
            <v-divider />
            <v-card-subtitle>Structure</v-card-subtitle>
            <v-divider />
            <MoleculeImage :molecule-chembl-id="chemblID" />
          </template>
          <v-card-subtitle>Details</v-card-subtitle>
          <v-divider />
          <v-card-text>
            <v-row dense>
              <v-col cols="12">
                <div><b>EUbOPEN ID:</b> {{ itemID }}<v-divider /></div>
              </v-col>
              <v-col cols="12">
                <div><b>ChEMBL ID:</b> {{ chemblID }}<v-divider /></div>
              </v-col>
              <v-col cols="12">
                <div>
                  <b>Name:</b>
                  {{ prefName }}
                  <v-divider />
                </div>
              </v-col>
              <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">
                <div>
                  <b>Suitable for in vivo use:</b>
                  {{ suitableForInVivoUse }}
                  <v-divider />
                </div>
              </v-col>
              <v-col cols="12">
                <div>
                  <b>Molecule Class:</b>
                  {{ moleculeClassText }}
                  <v-divider />
                </div>
              </v-col>
              <v-col cols="12">
                <div>
                  <b>Recommended Cell Concentration:</b>
                  {{ recommendedCellConcentration }}
                  <v-divider />
                </div>
              </v-col>
              <v-col cols="12">
                <b>Download probe data package:</b>
                <br /><br />
                <v-btn :href="linkToPDF" color="primary">
                  <v-icon>mdi-download</v-icon> PDF
                </v-btn>
              </v-col>
            </v-row>
          </v-card-text>
        </v-col>
        <v-col
          v-if="showStructureImgLaterally"
          cols="4"
          md="5"
          lg="4"
          class="molecule-img-container"
        >
          <MoleculeImage :molecule-chembl-id="chemblID" bordered />
        </v-col>
      </v-row>
    </template>
  </v-card>
</template>

<script>
import Synonyms from '~/web-components-submodule/components/common/ReportCards/Shared/Synonyms.vue'
import MoleculeImage from '~/web-components-submodule/components/common/ReportCards/Shared/MoleculeImage.vue'
import ObjectPropertyAccess from '~/web-components-submodule/utils/ObjectPropertyAccess.js'
import EntityNames from '~/web-components-submodule/standardisation/EntityNames.js'
import ESProxyService from '~/web-components-submodule/services/ESProxyService.js'
import ErrorTracking from '~/web-components-submodule/tracking/ErrorTracking.js'
import IndexNames from '~/web-components-submodule/standardisation/IndexNames.js'

export default {
  components: {
    Synonyms,
    MoleculeImage,
  },
  props: {
    itemID: {
      type: String,
      default: () => undefined,
    },
  },
  data() {
    return {
      loading: true,
      showError: false,
      errorMsg: undefined,
      chemblID: undefined,
      prefName: undefined,
      suitableForInVivoUse: undefined,
      moleculeClassText: undefined,
      recommendedCellConcentration: undefined,
    }
  },
  computed: {
    showStructureImgLaterally() {
      switch (this.$vuetify.breakpoint.name) {
        case 'xs':
          return false
        case 'sm':
          return false
        default:
          return true
      }
    },
    entityID() {
      return EntityNames.EubopenCompound.entityID
    },
  },
  mounted() {
    this.$store.dispatch('probe/probeSummary/loadData', this.itemID)

    const docSource = [
      'molecule_chembl_id',
      'pref_name',
      '_metadata.compound_generated.image_file',
      '_metadata.eubopen.recommended_cell_concentration',
      '_metadata.eubopen.in_vivo_use',
      '_metadata.eubopen.is_probe',
      '_metadata.eubopen.is_control',
      '_metadata.eubopen.is_chemogenomic_probe',
      'molecule_structures.canonical_smiles',
      'molecule_structures.standard_inchi_key',
      '_metadata.compound_records.src_id',
    ]
    const entityID = EntityNames.EubopenCompound.entityID
    const indexName = IndexNames.getIndexNameFromEntityID(entityID)

    ESProxyService.getESDocument(indexName, this.itemID, docSource)
      .then((response) => {
        const compoundData = response.data._source
        this.chemblID = compoundData.molecule_chembl_id
        this.prefName = compoundData.pref_name

        this.suitableForInVivoUse = ObjectPropertyAccess.getPropertyPalue(
          compoundData,
          '_metadata.eubopen.in_vivo_use',
          false
        )
          ? 'yes'
          : 'no'

        const isChemicalProbe = ObjectPropertyAccess.getPropertyPalue(
          compoundData,
          '_metadata.eubopen.is_probe',
          false
        )
        const isNegativeControl = ObjectPropertyAccess.getPropertyPalue(
          compoundData,
          '_metadata.eubopen.is_control',
          false
        )

        const isChemogenomicProbe = ObjectPropertyAccess.getPropertyPalue(
          compoundData,
          '_metadata.eubopen.is_chemogenomic_probe',
          false
        )

        const allClasses = []
        if (isChemicalProbe) {
          allClasses.push('Chemical Probe')
        }
        if (isNegativeControl) {
          allClasses.push('Negative Control')
        }
        if (isChemogenomicProbe) {
          allClasses.push('Chemogenomic Compound')
        }

        this.moleculeClassText = allClasses.join(', ')
        this.recommendedCellConcentration = ObjectPropertyAccess.getPropertyPalue(
          compoundData,
          '_metadata.eubopen.recommended_cell_concentration'
        )

        const compoundRecords = ObjectPropertyAccess.getPropertyPalue(
          compoundData,
          '_metadata.compound_records'
        )
        const srcIDs = compoundRecords.map((record) => record.src_id)
        if (srcIDs.includes(55)) {
          this.linkToPDF = 'https://www.thesgc.org/donated-chemical-probes'
        } else {
          this.linkToPDF = 'https://www.eubopen.org/chemical-probes'
        }

        this.loading = false
      })
      .catch((error) => {
        ErrorTracking.trackError(error, this)

        this.loading = false
        this.showError = true
        this.errorMsg = error
      })
  },
  methods: {
    getPropertyPalue: ObjectPropertyAccess.getPropertyPalue,
  },
}
</script>

<style scoped lang="scss">
.molecule-img-container {
  padding-right: 10px;
}
</style>