@abi-software/map-utilities 0.0.0-beta.7 → 1.0.0-beta.1

package/src/components/Tooltip/ProvenancePopup.vue

@@ -1,11 +1,11 @@
 <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="provenanceEntry" class="main" v-loading="loading">
+    <div class="block" v-if="provenanceEntry.title">
+      <div class="title">{{ capitalise(provenanceEntry.title) }}</div>
       <div
         v-if="
-          tooltipEntry.provenanceTaxonomyLabel &&
-          tooltipEntry.provenanceTaxonomyLabel.length > 0
+          provenanceEntry.provenanceTaxonomyLabel &&
+          provenanceEntry.provenanceTaxonomyLabel.length > 0
         "
         class="subtitle"
       >
@@ -13,7 +13,7 @@
       </div>
     </div>
     <div class="block" v-else>
-      <div class="title">{{ tooltipEntry.featureId }}</div>
+      <div class="title">{{ provenanceEntry.featureId }}</div>
     </div>
     <div v-if="featuresAlert" class="attribute-title-container">
       <span class="attribute-title">Alert</span>
@@ -31,24 +31,6 @@
         </span>
       </el-popover>
     </div>
-    <div class="block">
-      <el-button
-        class="button"
-        @click="showImages = !showImages"
-      >
-        <span v-if="showImages">Hide images</span>
-        <span v-else>View images at this location (Gallery)</span>
-      </el-button>
-      <div v-if="showImages" class="image-gallery-container">
-        <Gallery :items="galleryItems" />
-      </div>
-      <el-button
-        class="button"
-        @click="viewImage(imageIframeURL[this.tooltipEntry.featureId[0]])"
-      >
-        <span>View images at this location (iFrame)</span>
-      </el-button>
-    </div>
     <div
       v-show="showDetails"
       class="hide"
@@ -69,8 +51,8 @@
     </div>
     <transition name="slide-fade">
       <div v-show="showDetails" class="content-container scrollbar">
-        {{ tooltipEntry.paths }}
-        <div v-if="tooltipEntry.origins && tooltipEntry.origins.length > 0" class="block">
+        {{ provenanceEntry.paths }}
+        <div v-if="provenanceEntry.origins && provenanceEntry.origins.length > 0" class="block">
           <div class="attribute-title-container">
             <span class="attribute-title">Origin</span>
             <el-popover
@@ -88,17 +70,17 @@
             </el-popover>
           </div>
           <div
-            v-for="(origin, i) in tooltipEntry.origins"
+            v-for="(origin, i) in provenanceEntry.origins"
             class="attribute-content"
             :origin-item-label="origin"
             :key="origin"
           >
             {{ capitalise(origin) }}
-            <div v-if="i != tooltipEntry.origins.length - 1" class="separator"></div>
+            <div v-if="i != provenanceEntry.origins.length - 1" class="separator"></div>
           </div>
           <el-button
             v-show="
-              tooltipEntry.originsWithDatasets && tooltipEntry.originsWithDatasets.length > 0
+              provenanceEntry.originsWithDatasets && provenanceEntry.originsWithDatasets.length > 0
             "
             class="button"
             id="open-dendrites-button"
@@ -108,27 +90,27 @@
           </el-button>
         </div>
         <div
-          v-if="tooltipEntry.components && tooltipEntry.components.length > 0"
+          v-if="provenanceEntry.components && provenanceEntry.components.length > 0"
           class="block"
         >
           <div class="attribute-title-container">
             <div class="attribute-title">Components</div>
           </div>
           <div
-            v-for="(component, i) in tooltipEntry.components"
+            v-for="(component, i) in provenanceEntry.components"
             class="attribute-content"
             :component-item-label="component"
             :key="component"
           >
             {{ capitalise(component) }}
             <div
-              v-if="i != tooltipEntry.components.length - 1"
+              v-if="i != provenanceEntry.components.length - 1"
               class="separator"
             ></div>
           </div>
         </div>
         <div
-          v-if="tooltipEntry.destinations && tooltipEntry.destinations.length > 0"
+          v-if="provenanceEntry.destinations && provenanceEntry.destinations.length > 0"
           class="block"
         >
           <div class="attribute-title-container">
@@ -148,21 +130,21 @@
             </el-popover>
           </div>
           <div
-            v-for="(destination, i) in tooltipEntry.destinations"
+            v-for="(destination, i) in provenanceEntry.destinations"
             class="attribute-content"
             :destination-item-label="destination"
             :key="destination"
           >
             {{ capitalise(destination) }}
             <div
-              v-if="i != tooltipEntry.destinations.length - 1"
+              v-if="i != provenanceEntry.destinations.length - 1"
               class="separator"
             ></div>
           </div>
           <el-button
             v-show="
-              tooltipEntry.destinationsWithDatasets &&
-              tooltipEntry.destinationsWithDatasets.length > 0
+              provenanceEntry.destinationsWithDatasets &&
+              provenanceEntry.destinationsWithDatasets.length > 0
             "
             class="button"
             @click="openAxons"
@@ -173,8 +155,8 @@
 
         <el-button
           v-show="
-            tooltipEntry.componentsWithDatasets &&
-            tooltipEntry.componentsWithDatasets.length > 0
+            provenanceEntry.componentsWithDatasets &&
+            provenanceEntry.componentsWithDatasets.length > 0
           "
           class="button"
           @click="openAll"
@@ -189,20 +171,6 @@
 </template>
 
 <script>
-import Gallery from "@abi-software/gallery";
-import "@abi-software/gallery/dist/style.css";
-import {
-  ArrowUp as ElIconArrowUp,
-  ArrowDown as ElIconArrowDown,
-  Warning as ElIconWarning,
-} from '@element-plus/icons-vue'
-/* eslint-disable no-alert, no-console */
-import {
-  ElButton as Button,
-  ElContainer as Container,
-  ElIcon as Icon,
-} from 'element-plus'
-
 import EventBus from "../EventBus.js";
 
 const titleCase = (str) => {
@@ -216,43 +184,10 @@ const capitalise = function (str) {
   return "";
 };
 
-// TODO: temp data for testing
-const galleryItems = [
-  {
-    title: 'Title 1',
-    type: 'data1',
-    userData: 'https://sparc.science/',
-  },
-  {
-    title: 'Title 2',
-    type: 'data2',
-    link: 'https://sparc.science/',
-  },
-  {
-    title: 'Title 3',
-    type: 'data3',
-    link: 'https://sparc.science/',
-  },
-]
-const imageIframeURL = {
-  'UBERON:0000948': 'https://sparc.biolucida.net/image?c=MjIzNzItY29sLTI1NA%3D%3D',
-  'UBERON:0016508': 'https://sparc.biolucida.net/image?c=MjIzNzQtY29sLTI1NA%3D%3D',
-  'ILX:0793082': 'https://sparc.biolucida.net/image?c=MjIzNzUtY29sLTI1NA%3D%3D'
-}
-
 export default {
   name: "ProvenancePopup",
-  components: {
-    Button,
-    Container,
-    Icon,
-    ElIconArrowUp,
-    ElIconArrowDown,
-    ElIconWarning,
-    Gallery,
-  },
   props: {
-    tooltipEntry: {
+    provenanceEntry: {
       type: Object,
       default: () => ({
         destinations: [],
@@ -265,7 +200,7 @@ export default {
       }),
     },
   },
-  inject: ["getFeaturesAlert"],
+  // inject: ["getFeaturesAlert"],
   data: function () {
     return {
       controller: undefined,
@@ -274,9 +209,6 @@ export default {
       loading: false,
       showToolip: false,
       showDetails: false,
-      showImages: false,
-      galleryItems: galleryItems,
-      imageIframeURL: imageIframeURL,
       originDescriptions: {
         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",
@@ -287,20 +219,21 @@ export default {
   },
   computed: {
     featuresAlert() {
-      return this.getFeaturesAlert();
+      // return this.getFeaturesAlert();
+      return ""
     },
     resources: function () {
       let resources = [];
-      if (this.tooltipEntry && this.tooltipEntry.hyperlinks) {
-        resources = this.tooltipEntry.hyperlinks;
+      if (this.provenanceEntry && this.provenanceEntry.hyperlinks) {
+        resources = this.provenanceEntry.hyperlinks;
       }
       return resources;
     },
     originDescription: function () {
       if (
-        this.tooltipEntry &&
-        this.tooltipEntry.title &&
-        this.tooltipEntry.title.toLowerCase().includes("motor")
+        this.provenanceEntry &&
+        this.provenanceEntry.title &&
+        this.provenanceEntry.title.toLowerCase().includes("motor")
       ) {
         return this.originDescriptions.motor;
       } else {
@@ -309,7 +242,7 @@ export default {
     },
     provSpeciesDescription: function () {
       let text = "Studied in";
-      this.tooltipEntry.provenanceTaxonomyLabel.forEach((label) => {
+      this.provenanceEntry.provenanceTaxonomyLabel.forEach((label) => {
         text += ` ${label},`;
       });
       text = text.slice(0, -1); // remove last comma
@@ -330,27 +263,24 @@ export default {
     openAll: function () {
       EventBus.emit("onActionClick", {
         type: "Facets",
-        labels: this.tooltipEntry.componentsWithDatasets.map((a) => a.name),
+        labels: this.provenanceEntry.componentsWithDatasets.map((a) => a.name),
       });
     },
     openAxons: function () {
       EventBus.emit("onActionClick", {
         type: "Facets",
-        labels: this.tooltipEntry.destinationsWithDatasets.map((a) => a.name),
+        labels: this.provenanceEntry.destinationsWithDatasets.map((a) => a.name),
       });
     },
     openDendrites: function () {
       EventBus.emit("onActionClick", {
         type: "Facets",
-        labels: this.tooltipEntry.originsWithDatasets.map((a) => a.name),
+        labels: this.provenanceEntry.originsWithDatasets.map((a) => a.name),
       });
     },
     pubmedSearchUrlUpdate: function (val) {
       this.pubmedSearchUrl = val;
     },
-    viewImage: function (url) {
-      this.$emit('view-image', url);
-    },
   },
 };
 </script>
@@ -581,18 +511,6 @@ export default {
   background-color: #979797;
 }
 
-.image-gallery-container {
-  :deep(.gallery) {
-    .gallery-strip {
-      padding: 1rem 0;
-    }
-
-    > div {
-      min-height: max-content !important;
-    }
-  }
-}
-
 /* Fix for chrome bug where under triangle pops up above one on top of it  */
 .selector:not(*:root),
 .tooltip-container::after {

package/src/components/Tooltip/Tooltip.vue

@@ -1,62 +1,49 @@
 <template>
   <div class="tooltip-container" id="tooltip-container">
-    <template v-if="tooltipType === 'annotation' && annotationDisplay">
+    <template v-if="tooltipType === 'annotation'">
       <annotation-popup
         :annotationEntry="annotationEntry"
         @annotation="$emit('annotation', $event)"
       />
     </template>
     <template v-if="tooltipType === 'provenance'">
-      <provenance-popup
-        :tooltipEntry="tooltipEntry"
-        @view-image="viewImage"
-      />
+      <provenance-popup :provenanceEntry="provenanceEntry" />
     </template>
-    <template v-if="tooltipType === 'image-gallery'">
-      <image-gallery-popup
-        :galleryItems="galleryItems"
-        @viewImage="viewImage"
-      />
+    <template v-if="tooltipType === 'image'">
+      <image-gallery-popup :imageEntry="imageEntry" />
     </template>
   </div>
 </template>
 
 <script>
-import EventBus from '../EventBus.js';
+import EventBus from "../EventBus.js";
 
 export default {
   name: "Tooltip",
   props: {
-    tooltipEntry: {
-      type: Object,
-    },
     tooltipType: {
       type: String,
-      default: 'provenance',
+      default: "",
     },
-    annotationDisplay: {
-      type: Boolean,
-      default: false,
+    provenanceEntry: {
+      type: Object,
+      default: {},
     },
     annotationEntry: {
       type: Object,
+      default: {},
     },
-    galleryItems: {
+    imageEntry: {
       type: Array,
-      default: () => [],
+      default: [],
     },
   },
-  mounted: function() {
+  mounted: function () {
     // Emit events from child components
     EventBus.on("onActionClick", (data) => {
       this.$emit("onActionClick", data);
     });
   },
-  methods: {
-    viewImage: function (url) {
-      this.$emit('view-image', url)
-    }
-  }
 };
 </script>
 

package/src/components/index.js

@@ -2,6 +2,5 @@ import DrawToolbar from "./DrawToolbar/DrawToolbar.vue";
 import HelpModeDialog from "./HelpModeDialog/HelpModeDialog.vue";
 import Tooltip from "./Tooltip/Tooltip.vue";
 import TreeControls from "./TreeControls/TreeControls.vue";
-import IframeImageDialog from "./ImageDialog/IframeImageDialog.vue";
 
-export { DrawToolbar, HelpModeDialog, Tooltip, TreeControls, IframeImageDialog };
+export { DrawToolbar, HelpModeDialog, Tooltip, TreeControls };

package/src/components.d.ts

@@ -33,7 +33,6 @@ declare module 'vue' {
     ElTree: typeof import('element-plus/es')['ElTree']
     ExternalResourceCard: typeof import('./components/Tooltip/ExternalResourceCard.vue')['default']
     HelpModeDialog: typeof import('./components/HelpModeDialog/HelpModeDialog.vue')['default']
-    IframeImageDialog: typeof import('./components/ImageDialog/IframeImageDialog.vue')['default']
     ImageGalleryPopup: typeof import('./components/Tooltip/ImageGalleryPopup.vue')['default']
     ProvenancePopup: typeof import('./components/Tooltip/ProvenancePopup.vue')['default']
     Tooltip: typeof import('./components/Tooltip/Tooltip.vue')['default']

package/src/components/ImageDialog/IframeImageDialog.vue

@@ -1,70 +0,0 @@
-<template>
-  <div class="image-dialog" v-if="imageIframeOpen">
-    <div class="map-iframe-container">
-      <iframe
-        class="my-iframe"
-        :src="imageIframeURL">
-      </iframe>
-    </div>
-    <button
-      class="image-dialog-close"
-      @click="closeImageIframe"
-    >
-      Close
-    </button>
-  </div>
-</template>
-
-<script>
-  export default {
-    name: 'IframeImageDialog',
-    props: {
-      imageIframeOpen: false,
-      imageIframeURL: ''
-    },
-    methods: {
-      closeImageIframe: function () {
-        this.$emit('closeImageIframe')
-      },
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-  .image-dialog {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(#000, 0.9);
-    z-index: 1000;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .image-dialog-close {
-      position: absolute;
-      top: 1rem;
-      right: 1rem;
-      padding: 4px;
-      border: 2px solid;
-      border-radius: 4px;
-    }
-
-    .map-iframe-container {
-      height: 80%;
-      width: 80%;
-      background: #fff;
-      border: 1px solid black;
-      overflow: hidden;
-    }
-
-    .my-iframe {
-      height:100%;
-      width:100%;
-      position:relative;
-      border-width:0px;
-    }
-  }
-</style>

package/src/mixins/flatmapImageMixin.js

@@ -1,42 +0,0 @@
-export default {
-  // Note that the setting store is included in MapContent.vue
-  methods: {
-    findImagesForSpeciesFromGalleryItems: function (galleryItems, speciesToFind) {
-      let imageList = []
-      galleryItems.forEach((image) => {
-        if (image.species && image.species.length > 0) {
-          image.species.forEach((species) => {
-            if (species.species && species.species.curie === speciesToFind) {
-              imageList.push(image)
-            }
-          })
-        }
-      })
-      return imageList
-    },
-    findAllSpeciesFromGalleryItems: function (galleryItems) {
-      let speciesList = [];
-      let speciesSet = new Set();
-
-      galleryItems.forEach((image) => {
-        if (image.species && image.species.length > 0) {
-          image.species.forEach((species) => {
-            if (species.species) {
-              let ispc = species.species;
-              if (!speciesSet.has(ispc.curie)) {
-                speciesSet.add(ispc.curie);
-                speciesList.push({ 'taxon': ispc.curie, 'name': ispc.name, 'count': 1});
-              } else {
-                speciesList.forEach((sp) => {
-                  if (sp.taxon === ispc.curie) sp.count++;
-                });
-              }
-            }
-          });
-        }
-      });
-
-      return speciesList;
-    },
-  }
-}