@abi-software/flatmapvuer 0.6.0-vue3.6 → 0.6.0-vue3.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "0.6.0-vue3.6",
+  "version": "0.6.0-vue3.8",
   "license": "Apache-2.0",
   "files": [
     "dist/*",

package/src/App.vue

@@ -9,29 +9,48 @@
     >
       <div class="options-container">
         <el-row :gutter="20">
-          <el-button @click="helpMode = !helpMode" size="small"
-            >Help Mode</el-button
-          >
-          <el-button @click="saveSettings()" size="small"
-            >Save Settings</el-button
-          >
-          <el-button
-            :disabled="mapSettings.length === 0"
-            @click="restoreSettings()"
-            size="small"
-            >Restore Settings</el-button
-          >
-          <el-autocomplete
-            class="search-box"
-            placeholder="Search"
-            v-model="searchText"
-            :fetch-suggestions="fetchSuggestions"
-            @keyup.enter="search"
-            @select="search"
-            popper-class="autocomplete-popper"
-            :teleported="false"
-          >
-          </el-autocomplete>
+          <el-col :span="8">
+            <el-button @click="helpMode = !helpMode" size="small"
+              >Help Mode</el-button
+            >
+          </el-col>
+          <el-col :span="8">
+            <el-button @click="saveSettings()" size="small"
+              >Save Settings</el-button
+            >
+          </el-col>
+          <el-col :span="8">
+            <el-button
+              :disabled="mapSettings.length === 0"
+              @click="restoreSettings()"
+              size="small"
+              >Restore Settings</el-button
+            >
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <el-switch
+              v-model="disableUI"
+              active-text="Disable UI"
+            >
+            </el-switch>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <el-autocomplete
+              class="search-box"
+              placeholder="Search"
+              v-model="searchText"
+              :fetch-suggestions="fetchSuggestions"
+              @keyup.enter="search"
+              @select="search"
+              popper-class="autocomplete-popper"
+              :teleported="false"
+            >
+            </el-autocomplete>
+          </el-col>
         </el-row>
       </div>
       <template #reference>
@@ -57,6 +76,7 @@
       :displayMinimap="true"
       :enableOpenMapUI="true"
       :flatmapAPI="flatmapAPI"
+      :disableUI="disableUI"
     />
   </div>
 </template>
@@ -150,6 +170,7 @@ export default {
       searchable: true,
       pathControls: true,
       layerControl: true,
+      disableUI: false,
       minZoom: 4,
       availableSpecies: {
         'Human Female': {

package/src/components/FlatmapVuer.vue

@@ -11,7 +11,7 @@
       style="height: 100%; width: 100%; position: relative; overflow-y: none"
     >
       <div style="height: 100%; width: 100%" ref="display"></div>
-      <div class="beta-popovers">
+      <div class="beta-popovers" v-show="!disableUI">
         <div>
           <el-popover
             placement="right"
@@ -136,7 +136,7 @@
         <el-icon-arrow-down />
       </el-icon>
 
-      <div class="bottom-right-control">
+      <div class="bottom-right-control" v-show="!disableUI">
         <el-popover
           content="Zoom in"
           placement="left"
@@ -213,6 +213,7 @@
           <div
             class="pathway-location"
             :class="{ open: drawerOpen, close: !drawerOpen }"
+            v-show="!disableUI"
           >
             <div
               class="pathway-container"
@@ -279,7 +280,7 @@
                 ref="centrelinesSelection"
                 key="centrelinesSelection"
               />
-              <!--             
+              <!--
                 <selections-group
                   v-if="isFC && sckanDisplay && sckanDisplay.length > 0"
                   title="SCKAN"
@@ -429,6 +430,7 @@
       <div
         class="settings-group"
         :class="{ open: drawerOpen, close: !drawerOpen }"
+        v-show="!disableUI"
       >
         <el-row>
           <el-popover
@@ -975,6 +977,11 @@ export default {
     },
     displayTooltip: function (feature) {
       this.tooltipDisplay = true
+      if (!this.disableUI) {
+        this.displayPopup(feature)
+      }
+    },
+    displayPopup: function (feature) {
       this.mapImp.showPopup(
         this.mapImp.modelFeatureIds(feature)[0],
         this.$refs.tooltip.$el,
@@ -1337,6 +1344,13 @@ export default {
       type: String,
       default: 'https://api.sparc.science/',
     },
+    /**
+     * Flag to disable UIs on Map
+     */
+     disableUI: {
+      type: Boolean,
+      default: false,
+    }
   },
   provide() {
     return {
@@ -1424,6 +1438,11 @@ export default {
       immediate: true,
       deep: true,
     },
+    disableUI: function (isUIDisabled) {
+      if (isUIDisabled) {
+        this.closeTooltip()
+      }
+    }
   },
   mounted: function () {
     this.openMapRef = shallowRef(this.$refs.openMapRef)
@@ -2087,21 +2106,6 @@ export default {
   font-weight: 500;
   color: rgb(48, 49, 51);
   width: 150px!important;
-  :deep(.el-input__inner) {
-    height: 30px;
-    color: rgb(48, 49, 51);
-  }
-  :deep() {
-    .el-input__inner {
-      &is-focus,
-      &:focus {
-        border: 1px solid $app-primary-color;
-      }
-    }
-  }
-  :deep(.el-input__icon) {
-    line-height: 30px;
-  }
 }
 
 :deep(.flatmap_dropdown) {

package/src/components/MultiFlatmapVuer.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="multi-container" ref="multiContainer">
-    <div style="position: absolute; z-index: 10">
+    <div style="position: absolute; z-index: 10" v-if="!disableUI">
       <div class="species-display-text">Species</div>
       <el-popover
         content="Select a species"
@@ -51,6 +51,7 @@
       :ref="key"
       :enableOpenMapUI="enableOpenMapUI"
       :openMapOptions="openMapOptions"
+      :disableUI="disableUI"
       @view-latest-map="viewLatestMap"
       @resource-selected="FlatmapSelected"
       @ready="FlatmapReady"
@@ -77,6 +78,7 @@
 import { reactive } from 'vue'
 import EventBus from './EventBus'
 import FlatmapVuer from './FlatmapVuer.vue'
+import * as flatmap from '@abi-software/flatmap-viewer'
 import {
   ElCol as Col,
   ElOption as Option,
@@ -307,10 +309,7 @@ export default {
             //uuid is in the state but should be checked if it is the latest map
             //for that taxon
             return new Promise(() => {
-              const mapManager =
-                new (require('@abi-software/flatmap-viewer').MapManager)(
-                  this.flatmapAPI
-                )
+              const mapManager = new flatmap.MapManager(this.flatmapAPI)
               //mapManager.findMap_ is an async function so we need to wrap this with a promise
               const identifier = { taxon: mapState.entry }
               if (mapState.biologicalSex)
@@ -499,6 +498,13 @@ export default {
       type: String,
       default: 'https://api.sparc.science/',
     },
+    /**
+     * Flag to disable UIs on Map
+     */
+    disableUI: {
+      type: Boolean,
+      default: false,
+    }
   },
   data: function () {
     return {

package/src/components/TreeControls.vue

@@ -79,7 +79,7 @@ export default {
       defaultExpandedKeys: ['All'],
     }
   },
-  destroyed: function () {
+  unmounted: function () {
     this.sortedPrimitiveGroups = undefined
   },
   methods: {
@@ -118,9 +118,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@use 'element-plus/theme-chalk/src/checkbox';
-@use 'element-plus/theme-chalk/src/row';
-@use 'element-plus/theme-chalk/src/tree';
 
 .checkbox-container {
   display: flex;

package/src/icons/yellowstar.js

@@ -1,4 +1,4 @@
-export default '<svg width="160px" height="24px" viewBox="0 0 160 24" fill="yellow">' +
+export default '<svg width="195px" height="24px" viewBox="0 0 160 24" fill="yellow">' +
   '<path d="M22.0748 3.25583C22.4141 2.42845 23.5859 2.42845 23.9252 3.25583L25.6493 7.45955C25.793 7.80979 26.1221 8.04889 26.4995 8.07727L31.0303 8.41798C31.922 8.48504 32.2841 9.59942 31.6021 10.1778L28.1369 13.1166C27.8482 13.3614 27.7225 13.7483 27.8122 14.1161L28.8882 18.5304C29.1 19.3992 28.152 20.0879 27.3912 19.618L23.5255 17.2305C23.2034 17.0316 22.7966 17.0316 22.4745 17.2305L18.60881 19.618C17.84796 20.0879 16.9 19.3992 17.1118 18.5304L18.18785 14.1161C18.2775 13.7483 18.1518 13.3614 17.86309 13.1166L14.3979 10.1778C13.71588 9.59942 14.07796 8.48504 14.96971 8.41798L19.50046 8.07727C19.87794 8.04889 20.20704 7.80979 20.35068 7.45955L22.0748 3.25583Z" stroke="#000000" stroke-width="2"/>' +
   // Adjusting the x attribute and adding padding for the text element
   '<text x="42" y="50%" dominant-baseline="middle" text-anchor="start" font-family="Asap, sans-serif" font-size="12" fill="#000000">Featured dataset marker</text>' +