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

package/src/components/Tooltip/ProvenancePopup.vue

@@ -15,7 +15,7 @@
     <div class="block" v-else>
       <div class="title">{{ tooltipEntry.featureId }}</div>
     </div>
-    <div v-if="featuresAlert">
+    <div v-if="featuresAlert" class="attribute-title-container">
       <span class="attribute-title">Alert</span>
       <el-popover
         width="250"
@@ -31,6 +31,24 @@
         </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"
@@ -53,7 +71,7 @@
       <div v-show="showDetails" class="content-container scrollbar">
         {{ tooltipEntry.paths }}
         <div v-if="tooltipEntry.origins && tooltipEntry.origins.length > 0" class="block">
-          <div>
+          <div class="attribute-title-container">
             <span class="attribute-title">Origin</span>
             <el-popover
               width="250"
@@ -93,7 +111,9 @@
           v-if="tooltipEntry.components && tooltipEntry.components.length > 0"
           class="block"
         >
-          <div class="attribute-title">Components</div>
+          <div class="attribute-title-container">
+            <div class="attribute-title">Components</div>
+          </div>
           <div
             v-for="(component, i) in tooltipEntry.components"
             class="attribute-content"
@@ -111,7 +131,7 @@
           v-if="tooltipEntry.destinations && tooltipEntry.destinations.length > 0"
           class="block"
         >
-          <div>
+          <div class="attribute-title-container">
             <span class="attribute-title">Destination</span>
             <el-popover
               width="250"
@@ -169,6 +189,20 @@
 </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) => {
@@ -182,8 +216,41 @@ 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: {
       type: Object,
@@ -207,6 +274,9 @@ 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",
@@ -278,6 +348,9 @@ export default {
     pubmedSearchUrlUpdate: function (val) {
       this.pubmedSearchUrl = val;
     },
+    viewImage: function (url) {
+      this.$emit('view-image', url);
+    },
   },
 };
 </script>
@@ -292,18 +365,18 @@ export default {
   text-align: left;
   // width: 16em;
   line-height: 1.5em !important;
-  font-size: 1em;
+  font-size: 18px;
   font-family: Helvetica;
-  font-weight: 500;
-  /* font-weight: bold; */
+  font-weight: bold;
   padding-bottom: 8px;
+  color: $app-primary-color;
 }
 
 .block {
   margin-bottom: 0.5em;
 
   .main > &:first-of-type {
-    margin-right: 0.5em;
+    margin-right: 1em;
   }
 }
 
@@ -374,12 +447,8 @@ export default {
   min-width: 16rem;
 }
 
-.title {
-  font-size: 18px;
-  font-weight: 500;
-  font-weight: bold;
-  padding-bottom: 8px;
-  color: rgb(131, 0, 191);
+.attribute-title-container {
+  margin-bottom: 0.5em;
 }
 
 .attribute-title {
@@ -392,6 +461,10 @@ export default {
 .attribute-content {
   font-size: 14px;
   font-weight: 500;
+
+  &:last-of-type {
+    margin-bottom: 0.5em;
+  }
 }
 
 .popover-container {
@@ -508,6 +581,18 @@ 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,24 +1,39 @@
 <template>
   <div class="tooltip-container" id="tooltip-container">
-    <template v-if="annotationDisplay">
+    <template v-if="tooltipType === 'annotation' && annotationDisplay">
       <annotation-popup
         :annotationEntry="annotationEntry"
         @annotation="$emit('annotation', $event)"
       />
     </template>
-    <template v-else>
-      <provenance-popup :tooltipEntry="tooltipEntry" />
+    <template v-if="tooltipType === 'provenance'">
+      <provenance-popup
+        :tooltipEntry="tooltipEntry"
+        @view-image="viewImage"
+      />
+    </template>
+    <template v-if="tooltipType === 'image-gallery'">
+      <image-gallery-popup
+        :galleryItems="galleryItems"
+        @viewImage="viewImage"
+      />
     </template>
   </div>
 </template>
 
 <script>
+import EventBus from '../EventBus.js';
+
 export default {
   name: "Tooltip",
   props: {
     tooltipEntry: {
       type: Object,
     },
+    tooltipType: {
+      type: String,
+      default: 'provenance',
+    },
     annotationDisplay: {
       type: Boolean,
       default: false,
@@ -26,7 +41,22 @@ export default {
     annotationEntry: {
       type: Object,
     },
+    galleryItems: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  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/TreeControls/TreeControls.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="selections-container">
     <el-row v-if="title">
       <el-col :span="12">
         <div class="title-text">
@@ -7,7 +7,24 @@
         </div>
       </el-col>
     </el-row>
-    <div class="tree-container">
+    <div class="tree-container" ref="treeContainer">
+      <div :class="['tree-tooltip', tooltipAtBottom ? 'bottom' : '']" >
+        <el-popover
+          ref="tooltip"
+          :visible="tooltipVisible"
+          placement="top"
+          :show-arrow="false"
+          :teleported="false"
+          trigger="manual"
+          popper-class="tree-tooltip-popper"
+          virtual-triggering
+          :width="260"
+        >
+          <template #default>
+            <div class="tooltip-text">{{ tooltipLabel }}</div>
+          </template>
+        </el-popover>
+      </div>
       <el-tree
         ref="regionTree"
         v-loading="!isReady"
@@ -20,6 +37,8 @@
         :render-after-expand="false"
         :default-expanded-keys="expandedKeys"
         @check="checkChanged"
+        :indent="8"
+        :class="[mapType === 'flatmap' ? 'hide_grandchildren_checkbox': '']"
       >
         <template #default="{ node, data }">
           <span
@@ -30,9 +49,11 @@
               hoverItem: nodeIsHover(data),
             }"
             @click="changeActiveByNode(data)"
-            @mouseover="changeHoverByNode(data)"
+            @mouseover="changeHoverByNode(data, false)"
+            @mouseenter="displayTooltip(node.label, true, $event)"
+            @mouseleave="displayTooltip('', false, $event)"
           >
-            <div :style="getBackgroundStyles(data)">
+            <div :style="getBackgroundStyles(data)" class="lastChildInItem">
               {{ node.label }}
             </div>
           </span>
@@ -44,7 +65,9 @@
               hoverItem: hover.includes(data.id),
             }"
             @click="changeActiveByNode(data, true)"
-            @mouseover="changeHoverByNode(data, true)"
+            @mouseover="changeHoverByNode(data, true, $event)"
+            @mouseenter="displayTooltip(node.label, true, $event)"
+            @mouseleave="displayTooltip('', false, $event)"
           >
             <el-color-picker
               v-if="data.isPrimitives"
@@ -54,10 +77,12 @@
               :popper-class="myPopperClass"
               @change="setColour(data, $event)"
             />
-            <span>{{ node.label }}</span>
-            <span v-if="data.isTextureSlides" class="node-options">
-              (Texture)
-            </span>
+            <div class="lastChildInItem">
+              <span>{{ node.label }}</span>
+              <span v-if="data.isTextureSlides" class="node-options">
+                (Texture)
+              </span>
+            </div>
           </span>
         </template>
       </el-tree>
@@ -118,6 +143,9 @@ export default {
     return {
       defaultExpandedKeys: ["All"],
       myPopperClass: "hide-scaffold-colour-popup",
+      tooltipVisible: false,
+      tooltipLabel: "",
+      tooltipAtBottom: false,
     };
   },
   computed: {
@@ -201,6 +229,23 @@ export default {
         this.$emit("checkChanged", node, data);
       }
     },
+    displayTooltip: function (tooltipLabel, visible, e) {
+      const hoverItem = e.target;
+      const containerItem = hoverItem.closest('.el-tree-node__content');
+      const containerItemWidth = containerItem.clientWidth;
+      const xOffset = containerItem.getBoundingClientRect().x;
+      const lastElement = containerItem.querySelector('.lastChildInItem');
+      let childrenWidth = 0;
+      if (lastElement) {
+        const rect = lastElement.getBoundingClientRect();
+        childrenWidth = rect.x + rect.width - xOffset;
+      }
+      const longLabel = childrenWidth > containerItemWidth;
+      this.tooltipVisible = longLabel && visible;
+      this.tooltipLabel = tooltipLabel;
+      this.tooltipAtBottom =
+        0.5 > (e.layerY / this.$refs.treeContainer.clientHeight) ? true : false;
+    }
   },
   unmounted: function () {
     this.sortedPrimitiveGroups = undefined;
@@ -219,6 +264,10 @@ export default {
   }
 }
 
+.selections-container {
+  padding-top: 5px;
+}
+
 .title-text {
   width: 59px;
   height: 20px;
@@ -236,6 +285,8 @@ export default {
   background: #ffffff;
   margin-top: 6px;
   scrollbar-width: thin;
+  overflow: hidden;
+  position:relative;
 
   :deep(.el-tree) {
     max-height: 240px;
@@ -267,13 +318,15 @@ export default {
   }
 }
 
-:deep(
-    .el-tree-node__children
+.hide_grandchildren_checkbox {
+  :deep(
       .el-tree-node__children
-      .el-tree-node__content
-      > label.el-checkbox
-  ) {
-  display: none;
+        .el-tree-node__children
+        .el-tree-node__content
+        > label.el-checkbox
+    ) {
+    display: none;
+  }
 }
 
 :deep(.el-checkbox__label) {
@@ -342,4 +395,24 @@ export default {
 .node-options {
   text-align: right;
 }
+
+:deep(.tree-tooltip-popper.el-popover) {
+  text-transform: none !important; // need to overide the tooltip text transform
+  border: 1px solid $app-primary-color;
+  padding: 4px;
+  font-size: 12px;
+  .el-popper__arrow {
+    &:before {
+      border-color: $app-primary-color;
+      background-color: #ffffff;
+    }
+  }
+}
+
+.tree-tooltip {
+  position:absolute;
+  &.bottom {
+    top: 70% ;
+  }
+}
 </style>

package/src/components/index.js

@@ -2,5 +2,6 @@ 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 };
+export { DrawToolbar, HelpModeDialog, Tooltip, TreeControls, IframeImageDialog };

package/src/components.d.ts

@@ -29,9 +29,12 @@ declare module 'vue' {
     ElPopover: typeof import('element-plus/es')['ElPopover']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElTag: typeof import('element-plus/es')['ElTag']
     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']
     TreeControls: typeof import('./components/TreeControls/TreeControls.vue')['default']

package/src/mixins/flatmapImageMixin.js

@@ -0,0 +1,42 @@
+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;
+    },
+  }
+}

package/vite.config.js

@@ -9,7 +9,7 @@ import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
 // https://vitejs.dev/config/
 export default defineConfig({
   server: {
-    port: 8083,
+    port: 8081,
   },
   plugins: [
     vue(),