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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-utilities",
-  "version": "0.0.0-beta.5",
+  "version": "0.0.0-beta.7",
   "files": [
     "dist/*",
     "src/*",
@@ -9,9 +9,13 @@
     "*.js"
   ],
   "scripts": {
-    "serve": "vite",
+    "serve": "vite --host",
     "build-bundle": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "version": "npm run build-bundle;",
+    "release:beta": "npm version prerelease --preid=beta; npm publish --tag beta",
+    "release:minor": "npm version minor; npm publish",
+    "release:patch": "npm version patch;  npm publish"
   },
   "type": "module",
   "main": "./dist/map-utilities.umd.cjs",
@@ -25,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

@@ -15,7 +15,7 @@ const flatmapToolbarOptions = [
   "Polygon",
   "Connection",
 ];
-const scaffoldToolbarOptions = ["Edit", "Point", "LineString"];
+const scaffoldToolbarOptions = ["Edit", "Delete", "Point", "LineString"];
 const activeDrawTool = ref(undefined);
 const activeDrawMode = ref(undefined);
 const hoverVisibilities = [
@@ -117,6 +117,10 @@ function onFinishHelpMode() {
   helpModeActiveItem.value = 0;
   helpModeLastItem.value = false;
 }
+function onActionClick(value) {
+  console.log("🚀 ~ onActionClick ~ value:", value);
+}
+
 /**
  * Tooltip
  */
@@ -410,11 +414,11 @@ function changeHover(value) {
         <h3>TreeControls - {{ mapType }}</h3>
       </el-col>
       <el-col>
-        <el-button @click="switchTreeEntry('flatmap')" size="small">
-          Add Flatmap Tree Entry
+        <el-button v-show="mapType==='scaffold'" @click="switchTreeEntry('flatmap')" size="small">
+          Display Flatmap Tree
         </el-button>
-        <el-button @click="switchTreeEntry('scaffold')" size="small">
-          Add Scaffold Tree Entry
+        <el-button v-show="mapType==='flatmap'" @click="switchTreeEntry('scaffold')" size="small">
+          Display Scaffold Tree
         </el-button>
       </el-col>
     </el-row>
@@ -461,6 +465,7 @@ function changeHover(value) {
       :annotationDisplay="annotationDisplay"
       :annotationEntry="annotationEntry"
       @annotation="commitAnnotationEvent"
+      @onActionClick="onActionClick"
     />
     <TreeControls
       v-show="mapType === 'flatmap'"

package/src/components/HelpModeDialog/HelpModeDialog.vue

@@ -171,9 +171,7 @@ export default {
       return scaffoldEl;
     },
     getCurrentMultiflatmap: function () {
-      console.log("🚀 ~ this.multiflatmapRef:", this.multiflatmapRef);
       const multiflatmapEl = this.multiflatmapRef?.$el || null;
-      console.log("🚀 ~ multiflatmapEl:", multiflatmapEl);
       return multiflatmapEl;
     },
     getCurrentFlatmap: function () {
@@ -184,7 +182,6 @@ export default {
     },
     toggleHelpModeHighlight: function (option) {
       const currentMultiflatmapEl = this.getCurrentMultiflatmap();
-      console.log("🚀 ~ currentMultiflatmapEl:", currentMultiflatmapEl);
       const currentFlatmapEl = this.getCurrentFlatmap();
       const currentScaffoldEl = this.getCurrentScaffold();
       const allHighlightedItems =
@@ -192,25 +189,9 @@ export default {
 
       if (currentMultiflatmapEl) {
         if (option) {
-          console.log(
-            "🚀 ~ currentMultiflatmapEl.classList:",
-            currentMultiflatmapEl.classList
-          );
           currentMultiflatmapEl.classList.add("in-help");
-          console.log(
-            "🚀 ~ currentMultiflatmapEl.classList:",
-            currentMultiflatmapEl.classList
-          );
         } else {
-          console.log(
-            "🚀 ~ currentMultiflatmapEl.classList:",
-            currentMultiflatmapEl.classList
-          );
           currentMultiflatmapEl.classList.remove("in-help");
-          console.log(
-            "🚀 ~ currentMultiflatmapEl.classList:",
-            currentMultiflatmapEl.classList
-          );
         }
       }
 

package/src/components/ImageDialog/IframeImageDialog.vue

@@ -0,0 +1,70 @@
+<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/ExternalResourceCard.vue

@@ -9,7 +9,7 @@
           :icon="ElIconNotebook"
           @click="openUrl(resource.url)"
         >
-          Open publications in pubmed
+          Open publications in PubMed
         </el-button>
       </div>
     </template>
@@ -51,6 +51,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.resource-container {
+  margin-top: 0.5em;
+}
+
 .attribute-title {
   font-size: 16px;
   font-weight: 600;

package/src/components/Tooltip/ImageGalleryPopup.vue

@@ -0,0 +1,343 @@
+<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>