@abi-software/map-utilities 1.0.1-beta.3 → 1.1.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-utilities",
-  "version": "1.0.1-beta.3",
+  "version": "1.1.0-beta.1",
   "files": [
     "dist/*",
     "src/*",
@@ -29,6 +29,7 @@
     "./src/*": "./src/*"
   },
   "dependencies": {
+    "@abi-software/gallery": "^1.1.0",
     "@abi-software/svg-sprite": "^1.0.0",
     "@element-plus/icons-vue": "^2.3.1",
     "element-plus": "^2.7.3",

package/src/App.vue

@@ -124,19 +124,19 @@ function onActionClick(value) {
 /**
  * Tooltip
  */
-const tooltipDisplay = ref(false);
-const tooltipEntry = ref({});
+const tooltipType = ref("");
+const provenanceEntry = ref({});
 const featuresAlert = ref(undefined);
-const annotationDisplay = ref(false);
 const annotationEntry = ref({});
+const imageEntry = ref([]);
 
 provide(/* key */ "getFeaturesAlert", /* value */ () => featuresAlert.value);
 provide(/* key */ "$annotator", /* value */ undefined);
 provide(/* key */ "userApiKey", /* value */ undefined);
 
-function addTooltipEntry() {
-  tooltipDisplay.value = true;
-  tooltipEntry.value = {
+function addProvenanceEntry() {
+  tooltipType.value = "provenance";
+  provenanceEntry.value = {
     destinations: [null],
     origins: [null],
     components: ["pudendal nerve"],
@@ -160,13 +160,12 @@ function addTooltipEntry() {
     provenanceTaxonomyLabel: ["Homo sapiens"],
   };
 }
-function removeTooltipEntry() {
-  tooltipDisplay.value = false;
-  tooltipEntry.value = {};
+function removeProvenanceEntry() {
+  tooltipType.value = "";
+  provenanceEntry.value = {};
 }
 function addAnnotationEntry() {
-  tooltipDisplay.value = true;
-  annotationDisplay.value = true;
+  tooltipType.value = "annotation";
   annotationEntry.value = {
     id: "digestive_8-1",
     featureId: 4958,
@@ -179,13 +178,97 @@ function addAnnotationEntry() {
   };
 }
 function removeAnnotationEntry() {
-  tooltipDisplay.value = false;
-  annotationDisplay.value = false;
+  tooltipType.value = "";
   annotationEntry.value = {};
 }
 function commitAnnotationEvent(value) {
   console.log("🚀 ~ commitAnnotationEvent ~ value:", value);
 }
+function addImageEntry() {
+  tooltipType.value = "image";
+  imageEntry.value = [
+    {
+      anatomy: [
+        {
+          curie: "",
+          matchingStatus: "Exact Match",
+          name: "stomach",
+        },
+      ],
+      datasetId: "22",
+      datasetVersion: "2",
+      link: "https://sparc.biolucida.net/image?c=Mzg3Ny1jb2wtMTUw",
+      resource: {
+        share_link: "https://sparc.biolucida.net/image?c=Mzg3Ny1jb2wtMTUw",
+      },
+      s3uri: "s3://prd-sparc-discover50-use1/22/",
+      species: [
+        {
+          species: {
+            curie: "NCBITaxon:9825",
+            matchingStatus: "approved",
+            name: "Pig",
+            originalName: "Domestic Pig",
+            parents: [
+              {
+                curie: "ilx:0739765",
+                name: "Pig",
+              },
+            ],
+          },
+          strain: {
+            name: "Large White / Landrace crossbred pig",
+          },
+        },
+      ],
+      thumbnail: "https://sparc.biolucida.net/api/v1/thumbnail/3877",
+      title: "SPARC Image 1",
+      type: "image",
+    },
+    {
+      anatomy: [
+        {
+          curie: "",
+          matchingStatus: "Exact Match",
+          name: "stomach",
+        },
+      ],
+      datasetId: "22",
+      datasetVersion: "2",
+      link: "https://sparc.biolucida.net/image?c=Mzg3Ny1jb2wtMTUw",
+      resource: {
+        share_link: "https://sparc.biolucida.net/image?c=Mzg3Ny1jb2wtMTUw",
+      },
+      s3uri: "s3://prd-sparc-discover50-use1/22/",
+      species: [
+        {
+          species: {
+            curie: "NCBITaxon:9825",
+            matchingStatus: "approved",
+            name: "Pig",
+            originalName: "Domestic Pig",
+            parents: [
+              {
+                curie: "ilx:0739765",
+                name: "Pig",
+              },
+            ],
+          },
+          strain: {
+            name: "Large White / Landrace crossbred pig",
+          },
+        },
+      ],
+      thumbnail: "https://sparc.biolucida.net/api/v1/thumbnail/3877",
+      title: "SPARC Image 2",
+      type: "image",
+    },
+  ];
+}
+function removeImageEntry() {
+  tooltipType.value = "";
+  imageEntry.value = [];
+}
 /**
  * TreeControls
  */
@@ -229,7 +312,7 @@ function setColourField(treeData, nodeData, activeColour) {
 function setColour(nodeData, value) {
   if (nodeData && nodeData.isPrimitives) {
     const activeColour = value ? value : nodeData.defaultColour;
-    setColourField(treeDataEntry.value, nodeData, activeColour)
+    setColourField(treeDataEntry.value, nodeData, activeColour);
   }
 }
 function checkAll(value) {
@@ -380,21 +463,29 @@ function changeHover(value) {
       </el-col>
       <el-col>
         <el-button
-          v-show="!annotationDisplay"
-          @click="addTooltipEntry"
+          v-show="
+            tooltipType === '' ||
+            (tooltipType === 'provenance' &&
+              Object.keys(provenanceEntry).length === 0)
+          "
+          @click="addProvenanceEntry"
           size="small"
         >
-          Add Tooltip Entry
+          Add Provenance Entry
         </el-button>
         <el-button
-          v-show="Object.keys(tooltipEntry).length > 0"
-          @click="removeTooltipEntry"
+          v-show="Object.keys(provenanceEntry).length > 0"
+          @click="removeProvenanceEntry"
           size="small"
         >
-          Remove Tooltip Entry
+          Remove Provenance Entry
         </el-button>
         <el-button
-          v-show="!Object.keys(tooltipEntry).length > 0"
+          v-show="
+            tooltipType === '' ||
+            (tooltipType === 'annotation' &&
+              Object.keys(annotationEntry).length === 0)
+          "
           @click="addAnnotationEntry"
           size="small"
         >
@@ -407,6 +498,23 @@ function changeHover(value) {
         >
           Remove Annotation Entry
         </el-button>
+        <el-button
+          v-show="
+            tooltipType === '' ||
+            (tooltipType === 'image' && Object.keys(imageEntry).length === 0)
+          "
+          @click="addImageEntry"
+          size="small"
+        >
+          Add Image Entry
+        </el-button>
+        <el-button
+          v-show="Object.keys(imageEntry).length > 0"
+          @click="removeImageEntry"
+          size="small"
+        >
+          Remove Image Entry
+        </el-button>
       </el-col>
     </el-row>
     <el-row>
@@ -414,10 +522,18 @@ function changeHover(value) {
         <h3>TreeControls - {{ mapType }}</h3>
       </el-col>
       <el-col>
-        <el-button v-show="mapType==='scaffold'" @click="switchTreeEntry('flatmap')" size="small">
+        <el-button
+          v-show="mapType === 'scaffold'"
+          @click="switchTreeEntry('flatmap')"
+          size="small"
+        >
           Display Flatmap Tree
         </el-button>
-        <el-button v-show="mapType==='flatmap'" @click="switchTreeEntry('scaffold')" size="small">
+        <el-button
+          v-show="mapType === 'flatmap'"
+          @click="switchTreeEntry('scaffold')"
+          size="small"
+        >
           Display Scaffold Tree
         </el-button>
       </el-col>
@@ -459,11 +575,12 @@ function changeHover(value) {
       @finish-help-mode="onFinishHelpMode"
     />
     <Tooltip
-      v-show="tooltipDisplay"
+      v-show="tooltipType"
       class="tooltip"
-      :tooltipEntry="tooltipEntry"
-      :annotationDisplay="annotationDisplay"
+      :tooltipType="tooltipType"
+      :provenanceEntry="provenanceEntry"
       :annotationEntry="annotationEntry"
+      :imageEntry="imageEntry"
       @annotation="commitAnnotationEvent"
       @onActionClick="onActionClick"
     />
@@ -498,10 +615,12 @@ function changeHover(value) {
 .options-container {
   text-align: center;
 }
+
 .help-mode-dialog {
   position: absolute;
   top: 50%;
 }
+
 .tooltip {
   width: 400px;
   position: absolute;

package/src/components/Tooltip/ImageGalleryPopup.vue

@@ -0,0 +1,174 @@
+<template>
+  <div class="main">
+    <div v-if="imageEntry">
+      <el-tag
+        v-for="(species, index) in speciesFilterTags"
+        :key="index"
+        type="info"
+        class="tag"
+        :class="{ 'active-tag': species.taxon === activeSpecies.taxon }"
+        :closable="species.taxon === activeSpecies.taxon"
+        @close="removeSpeciesFilterTag"
+        @click="filterBySpecies(species)"
+      >
+        {{ species.name }} ({{ species.count }})
+      </el-tag>
+      <div class="gallery-container">
+        <Gallery :items="filteredImages" :imageStyle="imageStyle" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+/* eslint-disable no-alert, no-console */
+import { ElTag as Tag } from "element-plus";
+
+import Gallery from "@abi-software/gallery";
+import "@abi-software/gallery/dist/style.css";
+
+export default {
+  name: "ImagePopup",
+  components: {
+    Tag,
+    Gallery,
+  },
+  props: {
+    imageEntry: {
+      type: Array,
+      default: [],
+    },
+  },
+  data: function () {
+    return {
+      activeSpecies: { taxon: "", name: "" },
+      speciesFilterTags: [],
+      filteredImages: [],
+      showImageGallery: false,
+    };
+  },
+  computed: {
+    imageStyle() {
+      return {
+        width: "180px",
+        height: "135px",
+      };
+    },
+  },
+  watch: {
+    imageEntry: {
+      handler: function (value) {
+        if (value) {
+          this.populateFilterTags();
+          this.filteredImages = this.imageEntry;
+        }
+      },
+      deep: true,
+    },
+  },
+  methods: {
+    removeSpeciesFilterTag: function () {
+      this.activeSpecies = { taxon: "", name: "" };
+      this.filteredImages = this.imageEntry;
+    },
+    filterBySpecies: function (tagInfo) {
+      this.activeSpecies = tagInfo;
+      let imageList = [];
+      this.imageEntry.forEach((image) => {
+        if (image.species && image.species.length > 0) {
+          image.species.forEach((species) => {
+            if (species.species && species.species.curie === tagInfo.taxon) {
+              imageList.push(image);
+            }
+          });
+        }
+      });
+      this.filteredImages = imageList;
+    },
+    populateFilterTags: function () {
+      let imageObjects = {};
+      this.imageEntry.forEach((image) => {
+        if (image.species && image.species.length > 0) {
+          image.species.forEach((species) => {
+            if (species.species) {
+              const speciesInfo = species.species;
+              if (!(speciesInfo.curie in imageObjects)) {
+                imageObjects[speciesInfo.curie] = {
+                  taxon: speciesInfo.curie,
+                  name: speciesInfo.name,
+                  count: 0,
+                };
+              }
+              imageObjects[speciesInfo.curie].count++;
+            }
+          });
+        }
+      });
+      this.speciesFilterTags = Object.values(imageObjects);
+    },
+  },
+  mounted: function () {
+    this.populateFilterTags();
+    this.filteredImages = this.imageEntry;
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.block {
+  margin-bottom: 0.5em;
+}
+
+.tag {
+  margin-right: 5px;
+  margin-bottom: 5px;
+  cursor: pointer;
+}
+
+.active-tag {
+  background-color: $app-primary-color;
+  color: #fff;
+}
+
+.main {
+  font-size: 14px;
+  text-align: left;
+  line-height: 1.5em;
+  font-family: Asap, sans-serif, Helvetica;
+  font-weight: 400;
+  /* outline: thin red solid; */
+  padding: 1em !important;
+  overflow: hidden;
+  min-width: 18rem;
+}
+
+.button {
+  margin-left: 0px !important;
+  margin-top: 0px !important;
+  font-size: 14px !important;
+  background-color: $app-primary-color;
+  color: #fff;
+
+  & + .button {
+    margin-top: 10px !important;
+  }
+
+  &:hover {
+    color: #fff !important;
+    background: #ac76c5 !important;
+    border: 1px solid #ac76c5 !important;
+  }
+}
+
+.gallery-container {
+  :deep(.gallery) {
+    .gallery-strip {
+      padding: 1rem 0;
+    }
+
+    > div {
+      min-height: max-content !important;
+    }
+  }
+}
+</style>

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>
@@ -51,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
@@ -70,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"
@@ -90,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">
@@ -130,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"
@@ -155,8 +155,8 @@
 
         <el-button
           v-show="
-            tooltipEntry.componentsWithDatasets &&
-            tooltipEntry.componentsWithDatasets.length > 0
+            provenanceEntry.componentsWithDatasets &&
+            provenanceEntry.componentsWithDatasets.length > 0
           "
           class="button"
           @click="openAll"
@@ -187,7 +187,7 @@ const capitalise = function (str) {
 export default {
   name: "ProvenancePopup",
   props: {
-    tooltipEntry: {
+    provenanceEntry: {
       type: Object,
       default: () => ({
         destinations: [],
@@ -223,16 +223,16 @@ export default {
     },
     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 {
@@ -241,7 +241,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
@@ -262,19 +262,19 @@ 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) {

package/src/components/Tooltip/Tooltip.vue

@@ -1,35 +1,44 @@
 <template>
   <div class="tooltip-container" id="tooltip-container">
-    <template v-if="annotationDisplay">
+    <template v-if="tooltipType === 'annotation'">
       <annotation-popup
         :annotationEntry="annotationEntry"
         @annotation="$emit('annotation', $event)"
       />
     </template>
-    <template v-else>
-      <provenance-popup :tooltipEntry="tooltipEntry" />
+    <template v-if="tooltipType === 'provenance'">
+      <provenance-popup :provenanceEntry="provenanceEntry" />
+    </template>
+    <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: "",
     },
-    annotationDisplay: {
-      type: Boolean,
-      default: false,
+    provenanceEntry: {
+      type: Object,
+      default: {},
     },
     annotationEntry: {
       type: Object,
+      default: {},
+    },
+    imageEntry: {
+      type: Array,
+      default: [],
     },
   },
-  mounted: function() {
+  mounted: function () {
     // Emit events from child components
     EventBus.on("onActionClick", (data) => {
       this.$emit("onActionClick", data);