@abi-software/map-utilities 1.4.3-beta.1 → 1.4.3-isan.0

package/src/components/Tooltip/ProvenancePopup.vue

@@ -1,11 +1,37 @@
 <template>
-  <div v-if="tooltipEntry" class="main" v-loading="loading">
-    <div class="block" v-if="tooltipEntry.title">
-      <div class="title">{{ capitalise(tooltipEntry.title) }}</div>
+  <div v-if="entry" class="main" v-loading="loading">
+    <div v-if="tooltipEntry.length > 1" class="toggle-button">
+      <el-popover width="auto" trigger="hover" :teleported="false">
+        <template #reference>
+          <el-button
+            class="button"
+            @click="previous"
+            :disabled="this.entryIndex === 0"
+          >
+            Previous
+          </el-button>
+        </template>
+        <span>{{ previousLabel }}</span>
+      </el-popover>
+      <el-popover width="auto" trigger="hover" :teleported="false">
+        <template #reference>
+          <el-button
+            class="button"
+            @click="next"
+            :disabled="this.entryIndex === this.tooltipEntry.length - 1"
+          >
+            Next
+          </el-button>
+        </template>
+        <span>{{ nextLabel }}</span>
+      </el-popover>
+    </div>
+    <div class="block" v-if="entry.title">
+      <div class="title">{{ capitalise(entry.title) }}</div>
       <div
         v-if="
-          tooltipEntry.provenanceTaxonomyLabel &&
-          tooltipEntry.provenanceTaxonomyLabel.length > 0
+          entry.provenanceTaxonomyLabel &&
+          entry.provenanceTaxonomyLabel.length > 0
         "
         class="subtitle"
       >
@@ -13,9 +39,9 @@
       </div>
     </div>
     <div class="block" v-else>
-      <div class="title">{{ tooltipEntry.featureId }}</div>
+      <div class="title">{{ entry.featureId }}</div>
     </div>
-    <div v-if="featuresAlert" class="attribute-title-container">
+    <div v-if="entry.featuresAlert" class="attribute-title-container">
       <span class="attribute-title">Alert</span>
       <el-popover
         width="250"
@@ -27,7 +53,7 @@
           <el-icon class="info"><el-icon-warning /></el-icon>
         </template>
         <span style="word-break: keep-all">
-          {{ featuresAlert }}
+          {{ entry.featuresAlert }}
         </span>
       </el-popover>
     </div>
@@ -52,8 +78,8 @@
     <transition name="slide-fade">
       <div v-show="showDetails" class="content-container scrollbar">
         <connectivity-list
-          :key="tooltipEntry.featureId[0]"
-          :entry="tooltipEntry"
+          :key="entry.featureId[0]"
+          :entry="entry"
           :origins="origins"
           :components="components"
           :destinations="destinations"
@@ -62,9 +88,11 @@
           :destinationsWithDatasets="destinationsWithDatasets"
           :availableAnatomyFacets="availableAnatomyFacets"
           @connectivity-action-click="onConnectivityActionClick"
-        ></connectivity-list>
-
-        <external-resource-card :resources="resources" v-if="resources.length"></external-resource-card>
+        />
+        <external-resource-card
+          v-if="resources.length"
+          :resources="resources"
+        />
       </div>
     </transition>
   </div>
@@ -75,11 +103,11 @@ import {
   ArrowUp as ElIconArrowUp,
   ArrowDown as ElIconArrowDown,
   Warning as ElIconWarning,
-} from '@element-plus/icons-vue'
+} from "@element-plus/icons-vue";
 import EventBus from "../EventBus.js";
-import ConnectivityList from '../ConnectivityList/ConnectivityList.vue';
-import ExternalResourceCard from './ExternalResourceCard.vue';
-import { capitalise, titleCase } from '../utilities.js';
+import ConnectivityList from "../ConnectivityList/ConnectivityList.vue";
+import ExternalResourceCard from "./ExternalResourceCard.vue";
+import { capitalise, titleCase } from "../utilities.js";
 
 export default {
   name: "ProvenancePopup",
@@ -92,19 +120,10 @@ export default {
   },
   props: {
     tooltipEntry: {
-      type: Object,
-      default: () => ({
-        destinations: [],
-        origins: [],
-        components: [],
-        destinationsWithDatasets: [],
-        originsWithDatasets: [],
-        componentsWithDatasets: [],
-        resource: undefined,
-      }),
+      type: Array,
+      default: [],
     },
   },
-  inject: ["getFeaturesAlert"],
   data: function () {
     return {
       loading: false,
@@ -113,61 +132,71 @@ export default {
         motor: "is the location of the initial cell body of the circuit",
         sensory: "is the location of the initial cell body in the PNS circuit",
       },
-      origins: [],
-      components: [],
-      destinations: [],
-      originsWithDatasets: [],
-      componentsWithDatasets: [],
-      destinationsWithDatasets: [],
+      entryIndex: 0,
       availableAnatomyFacets: [],
     };
   },
-  watch: {
-    tooltipEntry: {
-      handler: function (val) {
-        this.updateConnectionsData(val);
-      },
-      immediate: true,
-      deep: true,
-    }
-  },
   computed: {
-    featuresAlert() {
-      return this.getFeaturesAlert();
+    entry: function () {
+      return this.tooltipEntry[this.entryIndex];
     },
-    resources: function () {
-      let resources = [];
-      if (this.tooltipEntry && this.tooltipEntry.hyperlinks) {
-        resources = this.tooltipEntry.hyperlinks;
+    previousLabel: function () {
+      if (this.entryIndex === 0) {
+        return "This is the first item. Click 'Next' to see more information.";
       }
-      return resources;
+      return this.tooltipEntry[this.entryIndex - 1]?.title;
     },
-    originDescription: function () {
-      if (
-        this.tooltipEntry &&
-        this.tooltipEntry.title &&
-        this.tooltipEntry.title.toLowerCase().includes("motor")
-      ) {
-        return this.originDescriptions.motor;
-      } else {
-        return this.originDescriptions.sensory;
+    nextLabel: function () {
+      if (this.entryIndex === this.tooltipEntry.length - 1) {
+        return "This is the last item. Click 'Previous' to see more information.";
       }
+      return this.tooltipEntry[this.entryIndex + 1]?.title;
     },
     provSpeciesDescription: function () {
       let text = "Studied in";
-      this.tooltipEntry.provenanceTaxonomyLabel.forEach((label) => {
+      this.entry.provenanceTaxonomyLabel.forEach((label) => {
         text += ` ${label},`;
       });
       text = text.slice(0, -1); // remove last comma
       text += " species";
       return text;
     },
+    origins: function () {
+      return this.entry.origins;
+    },
+    components: function () {
+      return this.entry.components;
+    },
+    destinations: function () {
+      return this.entry.destinations;
+    },
+    originsWithDatasets: function () {
+      return this.entry.originsWithDatasets;
+    },
+    componentsWithDatasets: function () {
+      return this.entry.componentsWithDatasets;
+    },
+    destinationsWithDatasets: function () {
+      return this.entry.destinationsWithDatasets;
+    },
+    resources: function () {
+      return this.entry.hyperlinks;
+    },
   },
   mounted: function () {
     this.loadAvailableAnatomyFacets();
-    this.updateConnectionsData(this.tooltipEntry);
   },
   methods: {
+    previous: function () {
+      if (this.entryIndex !== 0) {
+        this.entryIndex = this.entryIndex - 1;
+      }
+    },
+    next: function () {
+      if (this.entryIndex !== this.tooltipEntry.length - 1) {
+        this.entryIndex = this.entryIndex + 1;
+      }
+    },
     titleCase: function (title) {
       return titleCase(title);
     },
@@ -175,33 +204,32 @@ export default {
       return capitalise(text);
     },
     onConnectivityActionClick: function (data) {
-      EventBus.emit('onActionClick', data);
+      EventBus.emit("onActionClick", data);
     },
     // Load available anatomy facets from the local storage if available.
     // The data is from Algolia in Sidebar.
     loadAvailableAnatomyFacets: function () {
-      const availableAnatomyFacets = localStorage.getItem('available-anatomy-facets');
-
+      const availableAnatomyFacets = localStorage.getItem(
+        "available-anatomy-facets"
+      );
       if (availableAnatomyFacets) {
         this.availableAnatomyFacets = JSON.parse(availableAnatomyFacets);
       }
     },
-    updateConnectionsData: function (source) {
-      this.origins = source.origins;
-      this.components = source.components;
-      this.destinations = source.destinations;
-      this.originsWithDatasets = source.originsWithDatasets;
-      this.componentsWithDatasets = source.componentsWithDatasets;
-      this.destinationsWithDatasets = source.destinationsWithDatasets;
-    },
   },
 };
 </script>
 
 <style lang="scss" scoped>
-.display {
-  width: 44px;
-  word-break: normal;
+.toggle-button {
+  display: flex;
+  justify-content: space-between;
+
+  .is-disabled {
+    color: #fff !important;
+    background-color: #ac76c5 !important;
+    border: 1px solid #ac76c5 !important;
+  }
 }
 
 .title {
@@ -223,43 +251,12 @@ export default {
   }
 }
 
-.pub {
-  width: 16rem;
-}
-
-.icon {
-  right: 0px;
-  position: absolute;
-  top: 10px;
-}
-
-.icon:hover {
-  cursor: pointer;
-}
-
-:deep(.popover-origin-help.el-popover) {
-  text-transform: none !important; // need to overide the tooltip text transform
-  border: 1px solid $app-primary-color;
-  .el-popper__arrow {
-    &:before {
-      border-color: $app-primary-color;
-      background-color: #ffffff;
-    }
-  }
-}
-
 .info {
   transform: rotate(180deg);
   color: #8300bf;
   margin-left: 8px;
 }
 
-.separator {
-  width: 90%;
-  height: 1px;
-  background-color: #bfbec2;
-}
-
 .hide {
   color: $app-primary-color;
   cursor: pointer;
@@ -267,17 +264,6 @@ export default {
   margin-top: 3px;
 }
 
-.slide-fade-enter-active {
-  transition: opacity 0.5s, transform 0.5s;
-}
-.slide-fade-leave-active {
-  transition: opacity 0.2s, transform 0.2s;
-}
-.slide-fade-enter, .slide-fade-leave-to /* .slide-fade-leave-active in <2.1.8 */ {
-  opacity: 0;
-  transform: translateY(-8px);
-}
-
 .main {
   font-size: 14px;
   text-align: left;
@@ -310,11 +296,6 @@ export default {
   }
 }
 
-.popover-container {
-  height: 100%;
-  width: 100%;
-}
-
 .main {
   .el-button.is-round {
     border-radius: 4px;
@@ -330,9 +311,11 @@ export default {
   font-size: 14px !important;
   background-color: $app-primary-color;
   color: #fff;
+
   & + .button {
     margin-top: 10px !important;
   }
+
   &:hover {
     color: #fff !important;
     background: #ac76c5 !important;
@@ -340,27 +323,6 @@ export default {
   }
 }
 
-.tooltip-container {
-  &::after,
-  &::before {
-    content: "";
-    display: block;
-    position: absolute;
-    width: 0;
-    height: 0;
-    border-style: solid;
-    flex-shrink: 0;
-  }
-  .tooltip {
-    &::after {
-      display: none;
-    }
-    &::before {
-      display: none;
-    }
-  }
-}
-
 .maplibregl-popup-anchor-bottom {
   .tooltip-container {
     &::after,
@@ -368,10 +330,12 @@ export default {
       top: 100%;
       border-width: 12px;
     }
+
     &::after {
       margin-top: -1px;
       border-color: rgb(255, 255, 255) transparent transparent transparent;
     }
+
     &::before {
       margin: 0 auto;
       border-color: $app-primary-color transparent transparent transparent;
@@ -386,10 +350,12 @@ export default {
       top: -24px;
       border-width: 12px;
     }
+
     &::after {
       margin-top: 1px;
       border-color: transparent transparent rgb(255, 255, 255) transparent;
     }
+
     &::before {
       margin: 0 auto;
       border-color: transparent transparent $app-primary-color transparent;
@@ -427,10 +393,4 @@ export default {
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
   background-color: #979797;
 }
-
-/* Fix for chrome bug where under triangle pops up above one on top of it  */
-.selector:not(*:root),
-.tooltip-container::after {
-  top: 99.4%;
-}
 </style>

package/src/components/Tooltip/Tooltip.vue

@@ -19,7 +19,7 @@ export default {
   name: "Tooltip",
   props: {
     tooltipEntry: {
-      type: Object,
+      type: Array,
     },
     annotationDisplay: {
       type: Boolean,

package/src/components/utilities.js

@@ -1,9 +1,3 @@
-import { Cite, plugins } from '@citation-js/core';
-import '@citation-js/plugin-doi';
-import '@citation-js/plugin-csl';
-import '@citation-js/plugin-bibtex';
-import '@citation-js/plugin-pubmed';
-
 const capitalise = term => {
   if (term)
     return term.charAt(0).toUpperCase() + term.slice(1);
@@ -60,43 +54,9 @@ const delay = (ms) => {
   return new Promise(resolve => setTimeout(resolve, ms));
 };
 
-/**
- * @param {id} id - DOI or PMID
- * @param {options:type} type - type of the ID, e.g., 'pmid'
- * @param {options:format} format - 'apa' (default), 'chicago', 'ieee', 'bibtex', etc.
- * @returns {citation} formatted citation text
- */
-const getCitationById = async (id, { type, format }) => {
-  // because 'chicago' and 'ieee' are not in citation.js default styles
-  if ((format !== 'bibtex') && (format !== 'apa')) {
-    const xml = `https://raw.githubusercontent.com/citation-style-language/styles/refs/heads/master/${format}.csl`;
-    const response = await fetch(xml);
-    const template = await response.text();
-    let config = plugins.config.get('@csl');
-    config.templates.add(format, template);
-  }
-
-  const option = {};
-
-  if (type === 'pmid') {
-    option['forceType'] = '@pubmed/id';
-  }
-
-  const cite = await Cite.async(id, option);
-  const citation = (format === 'bibtex') ?
-    cite.format(format) :
-    cite.format('bibliography', {
-      format: 'html',
-      template: format || 'apa', // default as 'apa' style
-      lang: 'en-US'
-    })
-  return citation;
-};
-
 export {
   capitalise,
   titleCase,
   xmlToJSON,
   delay,
-  getCitationById,
 };