@abi-software/map-utilities 1.1.1-beta.0 → 1.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-utilities",
-  "version": "1.1.1-beta.0",
+  "version": "1.1.2",
   "files": [
     "dist/*",
     "src/*",
@@ -29,10 +29,9 @@
     "./src/*": "./src/*"
   },
   "dependencies": {
-    "@abi-software/gallery": "^1.1.0",
-    "@abi-software/svg-sprite": "^1.0.0",
+    "@abi-software/svg-sprite": "^1.0.1",
     "@element-plus/icons-vue": "^2.3.1",
-    "element-plus": "^2.7.3",
+    "element-plus": "2.8.4",
     "mitt": "^3.0.1",
     "vue": "^3.4.21"
   },

package/src/components/Tooltip/AnnotationPopup.vue

@@ -329,7 +329,7 @@ export default {
   },
   mounted: function () {
     this.$annotator?.authenticate(this.userApiKey).then((userData) => {
-      if (userData.name && userData.email) {
+      if (userData.name && userData.email && userData.canUpdate) {
         this.creator = userData;
         if (!userData.orcid) this.creator.orcid = "0000-0000-0000-0000";
         this.authenticated = true;

package/src/components/Tooltip/ProvenancePopup.vue

@@ -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"
@@ -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,41 +184,8 @@ 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,
@@ -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",
@@ -348,9 +280,6 @@ export default {
     pubmedSearchUrlUpdate: function (val) {
       this.pubmedSearchUrl = val;
     },
-    viewImage: function (url) {
-      this.$emit('view-image', url);
-    },
   },
 };
 </script>
@@ -581,18 +510,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,22 +1,13 @@
 <template>
   <div class="tooltip-container" id="tooltip-container">
-    <template v-if="tooltipType === 'annotation' && annotationDisplay">
+    <template v-if="annotationDisplay">
       <annotation-popup
         :annotationEntry="annotationEntry"
         @annotation="$emit('annotation', $event)"
       />
     </template>
-    <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 v-else>
+      <provenance-popup :tooltipEntry="tooltipEntry" />
     </template>
   </div>
 </template>
@@ -30,10 +21,6 @@ export default {
     tooltipEntry: {
       type: Object,
     },
-    tooltipType: {
-      type: String,
-      default: 'provenance',
-    },
     annotationDisplay: {
       type: Boolean,
       default: false,
@@ -41,10 +28,6 @@ export default {
     annotationEntry: {
       type: Object,
     },
-    galleryItems: {
-      type: Array,
-      default: () => [],
-    },
   },
   mounted: function() {
     // Emit events from child components
@@ -52,11 +35,6 @@ export default {
       this.$emit("onActionClick", data);
     });
   },
-  methods: {
-    viewImage: function (url) {
-      this.$emit('view-image', url)
-    }
-  }
 };
 </script>
 

package/src/components/index.js

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

package/src/components.d.ts

@@ -31,13 +31,10 @@ 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']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     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/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/components/Tooltip/ImageGalleryPopup.vue

@@ -1,343 +0,0 @@
-<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>
-  </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()
-  })
-}
-
-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'
-}
-
-export default {
-  name: 'ImageGalleryPopup',
-  mixins: [flatmapImageMixin],
-  components: {
-    Button,
-    Container,
-    Icon,
-    Tag,
-    ElIconArrowUp,
-    ElIconArrowDown,
-    ElIconWarning,
-    Gallery,
-  },
-  props: {
-    galleryItems: {
-      type: Array,
-      default: () => [],
-    },
-    entry: {
-      type: Object,
-      default: () => ({
-        destinations: [],
-        origins: [],
-        components: [],
-        destinationsWithDatasets: [],
-        originsWithDatasets: [],
-        componentsWithDatasets: [],
-        resource: undefined,
-      }),
-    },
-  },
-  data: function () {
-    return {
-      controller: undefined,
-      activeSpecies: undefined,
-      loading: false,
-      showImages: false,
-      activeSpecies: { taxon: '', name: ''},
-      imageIframeURL: imageIframeURL,
-      speciesFilterTags: [],
-      filteredItems: [],
-    }
-  },
-  watch: {
-    galleryItems: {
-      handler: function () {
-        this.populateSpeciesFilterTags()
-      },
-      deep: true,
-    },
-  },
-  methods: {
-    removeSpeciesFilterTag: function (species) {
-      this.activeSpecies = { taxon: '', name: '' }
-      this.filteredItems = this.galleryItems
-    },
-    populateSpeciesFilterTags: function () {
-      this.speciesFilterTags = this.findAllSpeciesFromGalleryItems(this.galleryItems)
-    },
-    filterBySpecies: function (species) {
-      this.activeSpecies = species
-      this.filteredItems = this.findImagesForSpeciesFromGalleryItems(this.galleryItems, species.taxon)
-    },
-    titleCase: function (title) {
-      return titleCase(title)
-    },
-    capitalise: function (text) {
-      return capitalise(text)
-    },
-    viewImage: function (url) {
-      this.$emit('view-image', url)
-    }
-  },
-  mounted: function () {
-    this.populateSpeciesFilterTags()
-    this.filteredItems = this.galleryItems
-  },
-}
-</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;
-}
-
-.tag {
-  margin-right: 5px;
-  margin-bottom: 5px;
-  cursor: pointer;
-}
-
-.active-tag {
-  background-color: $app-primary-color;
-  color: #fff;
-}
-
-.icon {
-  right: 0px;
-  position: absolute;
-  top: 10px;
-}
-
-.icon:hover {
-  cursor: pointer;
-}
-
-
-.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;
-}
-
-.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;
-    border: 1px solid #ac76c5 !important;
-  }
-}
-
-.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 {
-  :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 {
-  top: 99.4%;
-}
-</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;
-    },
-  }
-}