From 7695530ebd3c126987ab76d334a9e18008f46319 Mon Sep 17 00:00:00 2001
From: David Mendez <dmendez@ebi.ac.uk>
Date: Thu, 25 Jan 2024 15:45:20 -0500
Subject: [PATCH] Tissue Basic Information: add new vue component

---
 .../BasicInformation.vue                      |   1 -
 .../basic_information/BasicInformation.vue    | 167 ++++++++++++++++++
 .../sections/basic_information/_chembl_id.vue |   2 +-
 .../sections/basic_information/_chembl_id.vue |  22 +++
 4 files changed, 190 insertions(+), 2 deletions(-)
 rename components/report_cards/cell_line/sections/{ => basic_information}/BasicInformation.vue (98%)
 create mode 100644 components/report_cards/tissue/sections/basic_information/BasicInformation.vue
 create mode 100644 pages/embed/report_cards/tissue/sections/basic_information/_chembl_id.vue

diff --git a/components/report_cards/cell_line/sections/BasicInformation.vue b/components/report_cards/cell_line/sections/basic_information/BasicInformation.vue
similarity index 98%
rename from components/report_cards/cell_line/sections/BasicInformation.vue
rename to components/report_cards/cell_line/sections/basic_information/BasicInformation.vue
index 49ae324..5a141da 100644
--- a/components/report_cards/cell_line/sections/BasicInformation.vue
+++ b/components/report_cards/cell_line/sections/basic_information/BasicInformation.vue
@@ -101,7 +101,6 @@ import IndexNames from '~/web-components-submodule/standardisation/IndexNames.js
 import ESProxyService from '~/web-components-submodule/services/ESProxyService.js'
 import ObjectPropertyAccess from '~/web-components-submodule/utils/ObjectPropertyAccess.js'
 import DefaultValues from '~/web-components-submodule/standardisation/DefaultValues.js'
-//   import LinksToEntities from '~/web-components-submodule/standardisation/LinksToEntities.js'
 
 export default {
   mixins: [resizeMessagesMixin, embeddingStateMixin],
diff --git a/components/report_cards/tissue/sections/basic_information/BasicInformation.vue b/components/report_cards/tissue/sections/basic_information/BasicInformation.vue
new file mode 100644
index 0000000..049cbdc
--- /dev/null
+++ b/components/report_cards/tissue/sections/basic_information/BasicInformation.vue
@@ -0,0 +1,167 @@
+<template>
+  <div class="main-container">
+    <resize-observer v-if="isEmbedded" @notify="handleResize" />
+
+    <v-card flat>
+      <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>
+
+      <v-card-text v-else>
+        <v-row dense>
+          <v-col cols="12">
+            <div><b>ID:</b> {{ chemblID }}<v-divider /></div>
+          </v-col>
+          <v-col cols="12">
+            <div><b>Name:</b> {{ pref_name }}<v-divider /></div>
+          </v-col>
+          <v-col cols="12">
+            <div>
+              <b>Uberon ID:</b>
+              <a
+                v-if="hasUberonID"
+                target="_parent"
+                :href="`https://www.ebi.ac.uk/ols/search?q=${uberon_id}`"
+                >{{ uberon_id }}</a
+              ><template v-else>{{ uberon_id }}</template>
+              <v-divider />
+            </div>
+          </v-col>
+          <v-col cols="12">
+            <div>
+              <b>EFO ID:</b>
+
+              <a
+                v-if="hasEFOID"
+                target="_parent"
+                :href="`https://www.ebi.ac.uk/ols/search?q=${efo_id}`"
+                >{{ efo_id }}</a
+              ><template v-else>{{ efo_id }}</template>
+              <v-divider />
+            </div>
+          </v-col>
+          <v-col cols="12">
+            <div>
+              <b>BTO ID:</b>
+
+              <a
+                v-if="hasBTOID"
+                target="_parent"
+                :href="`https://www.ebi.ac.uk/ols/search?q=${bto_id}`"
+                >{{ bto_id }}</a
+              ><template v-else>{{ bto_id }}</template>
+              <v-divider />
+            </div>
+          </v-col>
+          <v-col cols="12">
+            <div>
+              <b>Caloha ID:</b>
+
+              <a
+                v-if="hasCalohaID"
+                target="_parent"
+                :href="`https://www.nextprot.org/term/${caloha_id}`"
+                >{{ caloha_id }}</a
+              ><template v-else>{{ caloha_id }}</template>
+              <v-divider />
+            </div>
+          </v-col>
+        </v-row>
+      </v-card-text>
+    </v-card>
+  </div>
+</template>
+
+<script>
+import { resizeMessagesMixin } from '~/mixins/embedding/resizeMessages.js'
+import { embeddingStateMixin } from '~/mixins/embedding/embeddingState.js'
+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'
+import ObjectPropertyAccess from '~/web-components-submodule/utils/ObjectPropertyAccess.js'
+import DefaultValues from '~/web-components-submodule/standardisation/DefaultValues.js'
+
+export default {
+  mixins: [resizeMessagesMixin, embeddingStateMixin],
+  props: {
+    chemblID: {
+      type: String,
+      default: () => undefined,
+    },
+  },
+  data() {
+    return {
+      loading: true,
+      showError: false,
+      errorMsg: undefined,
+      pref_name: undefined,
+      uberon_id: undefined,
+      efo_id: undefined,
+      bto_id: undefined,
+      caloha_id: undefined,
+    }
+  },
+  computed: {
+    hasUberonID() {
+      return this.uberon_id !== DefaultValues.DefaultNullTextValue
+    },
+    hasEFOID() {
+      return this.efo_id !== DefaultValues.DefaultNullTextValue
+    },
+    hasBTOID() {
+      return this.bto_id !== DefaultValues.DefaultNullTextValue
+    },
+    hasCalohaID() {
+      return this.caloha_id !== DefaultValues.DefaultNullTextValue
+    },
+  },
+  mounted() {
+    const docSource = [
+      'pref_name',
+      'uberon_id',
+      'efo_id',
+      'bto_id',
+      'caloha_id',
+    ]
+    const entityID = EntityNames.Tissue.entityID
+    const indexName = IndexNames.getIndexNameFromEntityID(entityID)
+
+    ESProxyService.getESDocument(indexName, this.chemblID, docSource)
+      .then((response) => {
+        const docData = response.data._source
+        this.pref_name = ObjectPropertyAccess.getPropertyPalue(
+          docData,
+          'pref_name'
+        )
+        this.uberon_id = ObjectPropertyAccess.getPropertyPalue(
+          docData,
+          'uberon_id'
+        )
+        this.efo_id = ObjectPropertyAccess.getPropertyPalue(docData, 'efo_id')
+        this.bto_id = ObjectPropertyAccess.getPropertyPalue(docData, 'bto_id')
+        this.caloha_id = ObjectPropertyAccess.getPropertyPalue(
+          docData,
+          'caloha_id'
+        )
+
+        this.loading = false
+      })
+      .catch((error) => {
+        this.loading = false
+        this.showError = true
+        this.errorMsg = error
+      })
+  },
+  methods: {},
+}
+</script>
+
+<style scoped lang="scss">
+.main-container {
+  position: relative;
+}
+</style>
diff --git a/pages/embed/report_cards/cell_line/sections/basic_information/_chembl_id.vue b/pages/embed/report_cards/cell_line/sections/basic_information/_chembl_id.vue
index 0fc03d8..f1e13e9 100644
--- a/pages/embed/report_cards/cell_line/sections/basic_information/_chembl_id.vue
+++ b/pages/embed/report_cards/cell_line/sections/basic_information/_chembl_id.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import BasicInformation from '~/components/report_cards/cell_line/sections/BasicInformation.vue'
+import BasicInformation from '~/components/report_cards/cell_line/sections/basic_information/BasicInformation.vue'
 
 export default {
   components: { BasicInformation },
diff --git a/pages/embed/report_cards/tissue/sections/basic_information/_chembl_id.vue b/pages/embed/report_cards/tissue/sections/basic_information/_chembl_id.vue
new file mode 100644
index 0000000..aea4080
--- /dev/null
+++ b/pages/embed/report_cards/tissue/sections/basic_information/_chembl_id.vue
@@ -0,0 +1,22 @@
+<template>
+  <BasicInformation
+    :chembl-i-d="chemblID"
+    id-for-parent="TissueBasicInformation"
+  />
+</template>
+
+<script>
+import BasicInformation from '~/components/report_cards/tissue/sections/basic_information/BasicInformation.vue'
+
+export default {
+  components: { BasicInformation },
+  layout: 'embedded',
+  computed: {
+    chemblID() {
+      return this.$route.params.chembl_id
+    },
+  },
+}
+</script>
+
+<style></style>
-- 
GitLab