@abi-software/flatmapvuer 1.11.4 → 1.12.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "1.11.4",
+  "version": "1.12.0-beta.0",
   "license": "Apache-2.0",
   "files": [
     "dist/*",
@@ -44,7 +44,7 @@
     "./src/*": "./src/*"
   },
   "dependencies": {
-    "@abi-software/map-utilities": "1.7.2",
+    "@abi-software/map-utilities": "^1.7.6",
     "@abi-software/sparc-annotation": "0.3.2",
     "@abi-software/svg-sprite": "1.0.2",
     "@element-plus/icons-vue": "^2.3.1",

package/src/App.vue

@@ -68,6 +68,7 @@
       @pan-zoom-callback="panZoomcallback"
       @open-map="openMap"
       @ready="FlatmapReady"
+      @context-restored="FlatmapReady"
       :initial="initial"
       :helpMode="helpMode"
       :helpModeDialog="useHelpModeDialog"
@@ -297,7 +298,7 @@ export default {
         position: 'absolute',
       },
       displayCloseButton: false,
-      initial: 'Rat',
+      initial: 'Human Male',
       helpMode: false,
       helpModeActiveItem: 0,
       helpModeLastItem: false,
@@ -359,6 +360,8 @@ export default {
   },
   mounted: function () {
     this.multiflatmapRef = this.$refs.multi;
+    window.multiflatmapRef = this.multiflatmapRef;
+    //window.flatmapRef = this.multiflatmapRef.getCurrentFlatmap();
   },
   watch: {
     helpMode: function (newVal) {

package/src/components/FlatmapVuer.vue

@@ -18,6 +18,7 @@
       <div class="beta-popovers" v-show="!disableUI">
         <div>
           <el-popover
+            v-if="displayWarning || isLegacy"
             placement="right"
             popper-class="warning-popper flatmap-popper"
             :teleported="false"
@@ -58,7 +59,10 @@ Please use `const` to assign meaningful names to them...
                 SCKAN </a
               >.
             </p>
-            <p v-else @mouseover="showTooltip(7)" @mouseout="hideTooltip(7)">
+            <p v-else
+              @mouseover="showTooltip(7)"
+              @mouseout="hideTooltip(7)"
+            >
               This map displays the connectivity of neuron populations.
               Specifically, those from the primarily rat-based
               <a
@@ -264,35 +268,17 @@ Please use `const` to assign meaningful names to them...
               :style="{ 'max-height': pathwaysMaxHeight + 'px' }"
               v-popover:checkBoxPopover
             >
-              <el-popover
-                content="Location of the featured dataset"
-                placement="bottom"
-                :teleported="true"
-                trigger="manual"
-                width="max-content"
-                :offset="-10"
-                popper-class="flatmap-popper flatmap-teleport-popper"
-                :visible="hoverVisibilities[9].value && showStarInLegend"
+              <dynamic-legends
+                v-if="legendEntry.length"
+                identifierKey="prompt"
+                colourKey="colour"
+                styleKey="style"
+                :legends="legendEntry"
+                :showStarInLegend="true"
+                :showDatasetMarkerTooltip="showDatasetMarkerTooltip"
                 ref="featuredMarkerPopover"
-              >
-                <template #reference>
-                  <div
-                    v-popover:featuredMarkerPopover
-                    @mouseover="showTooltip(9)"
-                    @mouseout="hideTooltip(9)"
-                  >
-                    <dynamic-legends
-                      v-if="legendEntry.length"
-                      identifierKey="prompt"
-                      colourKey="colour"
-                      styleKey="style"
-                      :legends="legendEntry"
-                      :showStarInLegend="true"
-                      class="svg-legends-container"
-                    />
-                  </div>
-                </template>
-              </el-popover>
+                class="svg-legends-container"
+              />
               <!-- The line below places the yellowstar svg on the left, and the text "Featured markers on the right" with css so they are both centered in the div -->
               <el-popover
                 content="Find these markers for data. The number inside the markers is the number of datasets available for each marker."
@@ -647,7 +633,7 @@ import {
 import { capitalise } from './utilities.js'
 import yellowstar from '../icons/yellowstar'
 import ResizeSensor from 'css-element-queries/src/ResizeSensor'
-import * as flatmap from 'https://cdn.jsdelivr.net/npm/@abi-software/flatmap-viewer@4.3.5/+esm'
+import flatmap from '../services/flatmapLoader.js'
 import { AnnotationService } from '@abi-software/sparc-annotation'
 import { mapState } from 'pinia'
 import { useMainStore } from '@/store/index'
@@ -775,10 +761,19 @@ export default {
     setVisibilityFilter: function (filter) {
       // More filter options -> this.mapImp.featureFilterRanges()
       if (this.mapImp) {
-        if (filter) {
-          this.mapImp.setVisibilityFilter(filter);
+        if (this.mapImp.contextLost) {
+          if (filter) {
+            this.filterToRestore = markRaw(JSON.parse(JSON.stringify(filter)));
+          } else {
+            this.filterToRestore = undefined;
+          }
         } else {
-          this.mapImp.clearVisibilityFilter();
+          if (filter) {
+            this.mapImp.setVisibilityFilter(filter);
+          } else {
+            this.mapImp.clearVisibilityFilter();
+          }
+          this.filterToRestore = undefined;
         }
       }
     },
@@ -937,6 +932,17 @@ export default {
         this.mapImp.clearAnnotationFeature()
       }
     },
+    forceContextLoss: function() {
+      if (this.mapImp && !this.mapImp.contextLost && !this.loading) {
+        this.mapImp.forceContextLoss()
+      }
+    },
+    forceContextRestore: function() {
+      if (this.mapImp) {
+        this.flatmapError = null
+        this.mapImp.forceContextRestore()
+      }
+    },
     /**
      * @public
      * Function to fire the ``trash`` action.
@@ -1706,6 +1712,10 @@ export default {
             eventType: eventType,
           }
           this.annotationEventCallback(payload, data)
+        } else if (eventType === 'context-lost') {
+          this.onContextLost()
+        } else if (eventType === 'context-restored') {
+          this.onContextRestored()
         } else if (eventType === 'pan-zoom') {
           this.$emit('pan-zoom-callback', data)
         } else {
@@ -1813,7 +1823,7 @@ export default {
     setConnectivityDataSource: function (viewingMode, data) {
       // Exploration mode, only path click will be used as data source
       if (viewingMode === 'Exploration') {
-        this.connectivityDataSource = data.models.startsWith('ilxtr:') ? data.models : '';
+        this.connectivityDataSource = data.models?.startsWith('ilxtr:') ? data.models : '';
       } else {
         // Other modes, it can be anything
         // (annotation drawing doesn't have featureId or models)
@@ -2401,9 +2411,17 @@ export default {
         } else {
           // skip the unavailable tooltips
           this.helpModeActiveIndex += 1;
+          this.setHelpMode(helpMode);
         }
       }
 
+      // Skip checkbox tooltip if pathway filter is not shown
+      const activePopoverObjAfter = this.hoverVisibilities[this.helpModeActiveIndex];
+      if (activePopoverObjAfter?.ref === 'checkBoxPopover' && !this.showPathwayFilter) {
+        this.helpModeActiveIndex += 1;
+        this.setHelpMode(helpMode);
+      }
+
       if (!helpMode) {
         // reset to iniital state
         this.helpModeActiveIndex = this.helpModeInitialIndex;
@@ -2765,10 +2783,6 @@ export default {
       if (!this.mapImp && !this.loading) {
         this.loading = true
         this.flatmapError = null
-        let minimap = false
-        if (this.displayMinimap) {
-          minimap = { position: 'top-right' }
-        }
 
         //As for flatmap-viewer@2.2.7, see below for the documentation
         //for the identifier:
@@ -2820,7 +2834,7 @@ export default {
             //debug: true,
             minZoom: this.minZoom,
             tooltips: this.tooltips,
-            minimap: minimap,
+            minimap: false,
             container: this.$refs.display,
             // tooltipDelay: 15, // new feature to delay tooltips showing
           }
@@ -2896,7 +2910,6 @@ export default {
         this.computePathControlsMaximumHeight()
         if (this.mapImp) {
           this.mapImp.resize()
-          this.showMinimap(this.displayMinimap)
         }
       } catch {
         console.error('Map resize error')
@@ -2979,12 +2992,16 @@ export default {
       this.processTaxon(this.mapImp.taxonIdentifiers, state ? state['taxonSelection'] : undefined)
       this.containsAlert = "alert" in this.mapImp.featureFilterRanges()
       this.flatmapLegends = this.mapImp.flatmapLegend
-      this.addResizeButtonToMinimap()
       this.loading = false
       this.computePathControlsMaximumHeight()
       this.mapResize()
       this.handleMapClick();
       this.setInitMapState();
+      if (this.displayMinimap) {
+        const minimapOptions = { position: 'top-right' };
+        this.mapImp.createMinimap(minimapOptions);
+        this.addResizeButtonToMinimap()
+      }
       /**
        * This is ``onFlatmapReady`` event.
        * @arg ``this`` (Component Vue Instance)
@@ -3007,14 +3024,38 @@ export default {
         });
       }
     },
-    /**
-     * @public
-     * Function to show or hide the minimap
-     * by providing ``flag`` (boolean) value.
-     * @arg {Boolean} `flag`
-     */
-    showMinimap: function (flag) {
-      if (this.mapImp) this.mapImp.showMinimap(flag)
+    onContextLost: function() {
+      this.lastViewport = markRaw(this.mapImp.getState())
+      this.flatmapError = {};
+      this.flatmapError['title'] = 'GL context lost!'
+      this.flatmapError['messages'] = [`GL context is lost due to too many concurrent GL contexts. Please try using the Restore Context button.`]
+      this.flatmapError['button'] = {
+        text: 'Restore Context',
+        callback: () => {
+          this.forceContextRestore()
+        }
+      };
+    },
+    onContextRestored: function() {
+      if (this.mapImp) {
+        this.handleMapClick()
+        this.setInitMapState()
+        const lostState = this.getState()
+        if (lostState) {
+          lostState.viewport = this.lastViewport
+        }
+        this.restoreMapState(lostState)
+        if (this.displayMinimap) {
+          const minimapOptions = { position: 'top-right' };
+          this.mapImp.createMinimap(minimapOptions);
+          this.addResizeButtonToMinimap()
+        }
+        if (this.filterToRestore) {
+          this.mapImp.setVisibilityFilter(this.filterToRestore)
+          this.filterToRestore = undefined
+        }
+        this.$emit('context-restored', this)
+      }
     },
     /**
      * @public
@@ -3187,6 +3228,15 @@ export default {
       type: Number,
       default: 0,
     },
+    /**
+     * This flag dictate whether a context will be allocatged
+     * for this instance
+     */
+    render: {
+      type: Boolean,
+      default: true,
+    },
+
     /**
      * The option to create map on component mounted.
      */
@@ -3352,6 +3402,7 @@ export default {
   },
   data: function () {
     return {
+      filterToRestore: undefined,
       flatmapError: null,
       sensor: null,
       mapManagerRef: undefined,
@@ -3469,6 +3520,7 @@ export default {
       taxonLeaveDelay: undefined,
       connectivityFilters: [],
       flatmapLegends: [],
+      lastViewport: undefined,
     }
   },
   computed: {
@@ -3505,7 +3557,10 @@ export default {
     },
     legendEntry: function () {
       return [...this.flatmapLegends, ...this.externalLegends]
-    }
+    },
+    showDatasetMarkerTooltip: function () {
+      return this.hoverVisibilities[9].value;
+    },
   },
   watch: {
     entry: function () {
@@ -3524,6 +3579,15 @@ export default {
         this.setHelpMode(this.helpMode);
       }
     },
+    render: function(val) {
+      if (val) {
+        if (this.mapImp && this.mapImp.contextLost && !this.loading) {
+          this.$nextTick(() => {
+            this.forceContextRestore()
+          })
+        }
+      }
+    },
     state: {
       handler: function (state, oldVal) {
         if (state !== oldVal) {

package/src/components/MultiFlatmapVuer.vue

@@ -58,6 +58,7 @@
       :enableOpenMapUI="enableOpenMapUI"
       :openMapOptions="openMapOptions"
       :disableUI="disableUI"
+      @context-restored="onContextRestored"
       @view-latest-map="viewLatestMap"
       @resource-selected="resourceSelected"
       @ready="FlatmapReady"
@@ -82,6 +83,7 @@
       @shown-tooltip="onTooltipShown"
       @shown-map-tooltip="onMapTooltipShown"
       :renderAtMounted="renderAtMounted"
+      :render="render && (activeSpecies == key)"
       :displayMinimap="displayMinimap"
       :showStarInLegend="showStarInLegend"
       style="height: 100%"
@@ -104,7 +106,7 @@
 import { markRaw } from 'vue'
 import EventBus from './EventBus'
 import FlatmapVuer from './FlatmapVuer.vue'
-import * as flatmap from 'https://cdn.jsdelivr.net/npm/@abi-software/flatmap-viewer@4.3.5/+esm'
+import flatmap from '../services/flatmapLoader.js'
 import {
   ElCol as Col,
   ElOption as Option,
@@ -286,6 +288,18 @@ export default {
        */
       this.$emit('resource-selected', action)
     },
+    /**
+     * @public
+     * Function to emit ``context-restored`` event after the flatmap is restored.
+     * @arg {Object} `component`
+     */
+     onContextRestored: function (component) {
+      /**
+       * This event is emitted by ``ContextRestore`` method after the flatmap is restored.
+       * @arg component
+       */
+       this.$emit('context-restored', component)
+    },
     /**
      * @public
      * Function to emit ``ready`` event after the flatmap is loaded.
@@ -619,6 +633,13 @@ export default {
       type: Boolean,
       default: false,
     },
+    /**
+     * This option enable rendering of the map
+     */
+    render: {
+      type: Boolean,
+      default: true,
+    },
     /**
      * The option to show tooltips for help mode.
      */
@@ -858,6 +879,13 @@ export default {
       immediate: true,
       deep: true,
     },
+    activeSpecies: {
+      handler: function (value, oldValue) {
+        if (oldValue) {
+          this.$refs[oldValue][0].forceContextLoss()
+        }
+      }
+    }
   },
 }
 </script>
@@ -887,6 +915,8 @@ export default {
   left: 16px;
   top: 44px;
   position: absolute;
+  width: fit-content;
+
   :deep(.el-input__inner) {
     color: rgb(48, 49, 51);
     padding-top: 0.25em;

package/src/components/legends/DynamicLegends.vue

@@ -6,37 +6,55 @@
       :key="item[identifierKey]"
       :label="item[identifierKey]"
     >
-      <div class="legend-item" v-if="legendStyle(item)">
-        <template v-if="clipPathLegends.includes(legendStyle(item))">
-          <div
-            :class="legendStyle(item)"
-            :style="customClipPathStyle(item, true)"
-          >
+      <template v-if="item[identifierKey] === 'Featured dataset marker'">
+        <el-popover
+          content="Location of the featured dataset"
+          placement="right"
+          :teleported="true"
+          trigger="manual"
+          width="max-content"
+          :offset="0"
+          popper-class="flatmap-popper flatmap-teleport-popper"
+          :visible="tooltipVisible"
+          ref="featuredMarkerPopover"
+        >
+          <template #reference>
             <div
-              :class="legendStyle(item)"
-              :style="customClipPathStyle(item, false)"
+              v-popover:featuredMarkerPopover
+              @mouseover="onMouseOver"
+              @mouseout="onMouseOut"
             >
+              <LegendItem
+                :item="item"
+                :identifierKey="identifierKey"
+                :styleKey="styleKey"
+                :showStarInLegend="showStarInLegend"
+              />
             </div>
-          </div>
-        </template>
-        <template v-else>
-          <div
-          :class="legendStyle(item)"
-          :style="customStyle(item)"
-          >
-          </div>
-        </template>
-        <div class="label">{{ capitalise(item[identifierKey]) }}</div>
-      </div>
+          </template>
+        </el-popover>
+      </template>
+      <template v-else>
+        <LegendItem
+          :item="item"
+          :identifierKey="identifierKey"
+          :styleKey="styleKey"
+          :showStarInLegend="showStarInLegend"
+        />
+      </template>
     </div>
   </div>
 </template>
 
 <script>
-const starTemplate = '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="<fillColor>" stroke="<borderColor>" stroke-width="<borderWidth>" d="M11.0748 3.25583C11.4141 2.42845 12.5859 2.42845 12.9252 3.25583L14.6493 7.45955C14.793 7.80979 15.1221 8.04889 15.4995 8.07727L20.0303 8.41798C20.922 8.48504 21.2841 9.59942 20.6021 10.1778L17.1369 13.1166C16.8482 13.3614 16.7225 13.7483 16.8122 14.1161L17.8882 18.5304C18.1 19.3992 17.152 20.0879 16.3912 19.618L12.5255 17.2305C12.2034 17.0316 11.7966 17.0316 11.4745 17.2305L7.60881 19.618C6.84796 20.0879 5.90001 19.3992 6.1118 18.5304L7.18785 14.1161C7.2775 13.7483 7.1518 13.3614 6.86309 13.1166L3.3979 10.1778C2.71588 9.59942 3.07796 8.48504 3.96971 8.41798L8.50046 8.07727C8.87794 8.04889 9.20704 7.80979 9.35068 7.45955L11.0748 3.25583Z"/></svg>'
+import LegendItem from './LegendItem.vue';
+
 /* eslint-disable no-alert, no-console */
 export default {
   name: "DynamicLegends",
+  components: {
+    LegendItem,
+  },
   props: {
     identifierKey: {
       type: String,
@@ -60,58 +78,35 @@ export default {
       type: Boolean,
       default: false,
     },
+    showDatasetMarkerTooltip: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      isHovering: false,
+      hoverTimeout: null,
+    };
   },
   computed: {
-    clipPathLegends: function () {
-      return ['exoid', 'hexagon'];
+    tooltipVisible() {
+      // Show tooltip when either help mode is active OR user is hovering
+      return (this.showDatasetMarkerTooltip && this.showStarInLegend) || this.isHovering;
     },
   },
   methods: {
-    capitalise: function (label) {
-      return label.charAt(0).toUpperCase() + label.slice(1).toLowerCase();
-    },
-    customStyle: function(item) {
-      const specifiedColour = item["color"] ? item["color"] : item["colour"];
-      let colour = specifiedColour ? specifiedColour : "transparent";
-      let borderColour = item.border ? item.border : "black";
-      if (specifiedColour && !item.border) {
-        borderColour = colour;
-      } 
-      if (item[this.styleKey] === 'star') {
-        let star = starTemplate.replace('<fillColor>', colour);
-        star = star.replace('<borderColor>', borderColour);
-        star = star.replace('<borderWidth>', borderColour ? '2' : '0');
-        star = 'data:image/svg+xml,' + encodeURIComponent(star);
-        return { 'color': colour, 'background-image': `url(${star})` };
-      } else if (item[this.styleKey] === 'line') {
-        return {'color': colour};
-      } else {
-        return { 'background-color': colour, 'border-color': borderColour};
-      }
-    },
-    customClipPathStyle: function(item, isBorder) {
-      const style = this.customStyle(item);
-      if (isBorder) {
-        style['background-color'] = style['border-color'];
-      } else {
-        style.scale = 0.7;
-      }
-      return style;
+    onMouseOver() {
+      clearTimeout(this.hoverTimeout);
+      this.hoverTimeout = setTimeout(() => {
+        this.isHovering = true;
+      }, 500);
     },
-    legendStyle: function (item) {
-      if (item[this.styleKey] === "star") {
-        if (item[this.identifierKey] === "Featured dataset marker") {
-          if (!this.showStarInLegend) {
-            return;
-          }
-        }
-        return 'star';
-      } else if (this.clipPathLegends.includes(item[this.styleKey])) {
-        return item[this.styleKey];
-      } else if (item[this.styleKey] === 'line') {
-        return [item[this.styleKey], item.dashed ? 'dashed' : '', item.arrow ? 'arrow' : ''];
-      }
-      return [item[this.styleKey], 'shape'];
+    onMouseOut() {
+      clearTimeout(this.hoverTimeout);
+      this.hoverTimeout = setTimeout(() => {
+        this.isHovering = false;
+      }, 500);
     },
   },
 };
@@ -125,92 +120,4 @@ export default {
 .legend-container {
   width: max-content;
 }
-
-.legend-item {
-  display: flex;
-  align-items: center;
-  margin: 8px 12.5px;
-}
-
-.line {
-  position: relative;
-  width: 20px;
-  border-top: 2px solid currentColor;
-}
-
-.line.dashed {
-  border-top: 2px dashed currentColor;
-}
-
-.line::after {
-  content: "";
-  position: absolute;
-  right: -2px;
-  top: -5px;
-  width: 0;
-  height: 0;
-  border-left: 7px solid currentColor;
-  border-top: 4px solid transparent;
-  border-bottom: 4px solid transparent;
-  display: none;
-}
-
-.line.arrow::after {
-  display: block;
-}
-
-.shape {
-  height: 16px;
-  width: 16px;
-  border-color: black;
-  border-style: solid;
-  border-width: 2px;
-  background-color: transparent;
-  display: inline-block;
-}
-
-.circle {
-  border-radius: 50%;
-}
-
-.rounded-square {
-  border-radius: 30%;
-}
-
-.hexagon {
-  width: 20px;
-  height: calc(20px * 0.866);
-  background-color: transparent;
-  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
-  -webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
-}
-
-.exoid {
-  width: 20px;
-  height: 25px;
-  background-color: transparent;
-  clip-path: path(
-    "M9.96 0.72 c-2.01 3.53 -5.81 5.74 -9.92 5.74 l-0.15 0.23 c1.94 3.42 1.94 7.6 0 11.02 l0.15 0.23 c4.07 0 7.9 2.2 9.92 5.74 c2.01 -3.53 5.81 -5.74 9.92 -5.74 c-2.01 -3.53 -2.01 -7.94 0 -11.55 C15.81 6.5 12.04 4.29 9.96 0.72z"
-  );
-  -webkit-clip-path: path(
-    "M9.96 0.72 c-2.01 3.53 -5.81 5.74 -9.92 5.74 l-0.15 0.23 c1.94 3.42 1.94 7.6 0 11.02 l0.15 0.23 c4.07 0 7.9 2.2 9.92 5.74 c2.01 -3.53 5.81 -5.74 9.92 -5.74 c-2.01 -3.53 -2.01 -7.94 0 -11.55 C15.81 6.5 12.04 4.29 9.96 0.72z"
-  );
-}
-
-.star {
-  width: 25px;
-  height: 25px;
-  background-color: transparent !important;
-  background-repeat: no-repeat;
-  background-size: contain;
-  display: inline-block;
-  margin: -3px;
-  padding-right: 2px;
-}
-
-.label {
-  margin-left: 14px;
-  font-size: 12px;
-  color: rgb(48, 49, 51);
-}
 </style>