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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-utilities",
-  "version": "0.0.0-beta.7",
+  "version": "1.0.0-beta.1",
   "files": [
     "dist/*",
     "src/*",

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

@@ -1,174 +1,112 @@
 <template>
-  <div class="main" v-loading="loading">
-      <!-- <div class="block" v-if="entry.title">
-        <span class="title">{{ capitalise(entry.title) }}</span>
-      </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>
-        <template :key="index" v-for="(species, index) in speciesFilterTags">
-          <el-tag
-            type="info"
-            class="tag"
-            :class="{ 'active-tag': species.taxon === activeSpecies.taxon}"
-            @close="removeSpeciesFilterTag(species)"
-            @click="filterBySpecies(species)"
-            :closable="species.taxon === activeSpecies.taxon"
-          >
-            {{ species.name }} ({{ species.count }})
-          </el-tag>
-        </template>
-        <div v-if="showImages" class="image-gallery-container">
-          <Gallery  class="gallery" :items="filteredItems" />
-        </div>
-        <el-button
-          class="button"
-          @click="viewImage(imageIframeURL[this.entry.featureId[0]])"
-        >
-          <span>View images at this location (iFrame)</span>
-        </el-button>
+  <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" />
+      </div>
     </div>
   </div>
 </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,
-  ElTag as Tag,
-} from 'element-plus'
-
-import flatmapImageMixin from '../../mixins/flatmapImageMixin';
-
-const titleCase = (str) => {
-  return str.replace(/\w\S*/g, (t) => {
-    return t.charAt(0).toUpperCase() + t.substr(1).toLowerCase()
-  })
-}
+import { ElTag as Tag } from "element-plus";
 
-const capitalise = function (str) {
-  if (str) return str.charAt(0).toUpperCase() + str.slice(1)
-  return ''
-}
-
-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'
-}
+import Gallery from "@abi-software/gallery";
+import "@abi-software/gallery/dist/style.css";
 
 export default {
-  name: 'ImageGalleryPopup',
-  mixins: [flatmapImageMixin],
+  name: "ImagePopup",
   components: {
-    Button,
-    Container,
-    Icon,
     Tag,
-    ElIconArrowUp,
-    ElIconArrowDown,
-    ElIconWarning,
     Gallery,
   },
   props: {
-    galleryItems: {
+    imageEntry: {
       type: Array,
-      default: () => [],
-    },
-    entry: {
-      type: Object,
-      default: () => ({
-        destinations: [],
-        origins: [],
-        components: [],
-        destinationsWithDatasets: [],
-        originsWithDatasets: [],
-        componentsWithDatasets: [],
-        resource: undefined,
-      }),
+      default: [],
     },
   },
   data: function () {
     return {
-      controller: undefined,
-      activeSpecies: undefined,
-      loading: false,
-      showImages: false,
-      activeSpecies: { taxon: '', name: ''},
-      imageIframeURL: imageIframeURL,
+      activeSpecies: { taxon: "", name: "" },
       speciesFilterTags: [],
-      filteredItems: [],
-    }
+      filteredImages: [],
+      showImageGallery: false,
+    };
   },
   watch: {
-    galleryItems: {
-      handler: function () {
-        this.populateSpeciesFilterTags()
+    imageEntry: {
+      handler: function (value) {
+        if (value) {
+          this.populateFilterTags();
+          this.filteredImages = this.imageEntry;
+        }
       },
       deep: true,
     },
   },
   methods: {
-    removeSpeciesFilterTag: function (species) {
-      this.activeSpecies = { taxon: '', name: '' }
-      this.filteredItems = this.galleryItems
-    },
-    populateSpeciesFilterTags: function () {
-      this.speciesFilterTags = this.findAllSpeciesFromGalleryItems(this.galleryItems)
+    removeSpeciesFilterTag: function () {
+      this.activeSpecies = { taxon: "", name: "" };
+      this.filteredImages = this.imageEntry;
     },
-    filterBySpecies: function (species) {
-      this.activeSpecies = species
-      this.filteredItems = this.findImagesForSpeciesFromGalleryItems(this.galleryItems, species.taxon)
+    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;
     },
-    titleCase: function (title) {
-      return titleCase(title)
+    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);
     },
-    capitalise: function (text) {
-      return capitalise(text)
-    },
-    viewImage: function (url) {
-      this.$emit('view-image', url)
-    }
   },
   mounted: function () {
-    this.populateSpeciesFilterTags()
-    this.filteredItems = this.galleryItems
+    this.populateFilterTags();
+    this.filteredImages = this.imageEntry;
   },
-}
+};
 </script>
 
 <style lang="scss" scoped>
-
-.display {
-  width: 44px;
-  word-break: normal;
-}
-
-.title {
-  text-align: left;
-  width: 16em;
-  line-height: 1.5em !important;
-  font-size: 1em;
-  font-family: Helvetica;
-  font-weight: 500;
-  /* font-weight: bold; */
-  padding-bottom: 8px;
-}
-
 .block {
   margin-bottom: 0.5em;
 }
@@ -184,17 +122,6 @@ export default {
   color: #fff;
 }
 
-.icon {
-  right: 0px;
-  position: absolute;
-  top: 10px;
-}
-
-.icon:hover {
-  cursor: pointer;
-}
-
-
 .main {
   font-size: 14px;
   text-align: left;
@@ -207,35 +134,17 @@ export default {
   min-width: 18rem;
 }
 
-.title {
-  font-size: 18px;
-  font-weight: 500;
-  font-weight: bold;
-  padding-bottom: 8px;
-  color: rgb(131, 0, 191);
-}
-
-.attribute-title {
-  font-size: 16px;
-  font-weight: 600;
-  /* font-weight: bold; */
-  text-transform: uppercase;
-}
-
-.attribute-content {
-  font-size: 14px;
-  font-weight: 500;
-}
-
 .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;
@@ -243,87 +152,7 @@ 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,
-    &::before {
-      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;
-    }
-  }
-}
-
-.maplibregl-popup-anchor-top {
-  .tooltip-container {
-    &::after,
-    &::before {
-      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;
-    }
-  }
-}
-
-.content-container {
-  overflow-y: scroll;
-  scrollbar-width: thin !important;
-  max-height: 240px;
-}
-
-.scrollbar::-webkit-scrollbar-track {
-  border-radius: 10px;
-  background-color: #f5f5f5;
-}
-
-.scrollbar::-webkit-scrollbar {
-  width: 12px;
-  right: -12px;
-  background-color: #f5f5f5;
-}
-
-.scrollbar::-webkit-scrollbar-thumb {
-  border-radius: 4px;
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-  background-color: #979797;
-}
-
-.image-gallery-container {
+.gallery-container {
   :deep(.gallery) {
     .gallery-strip {
       padding: 1rem 0;
@@ -334,10 +163,4 @@ export default {
     }
   }
 }
-
-/* 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>