@abi-software/flatmapvuer 1.12.0-beta.1 → 1.12.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "1.12.0-beta.1",
+  "version": "1.12.1",
   "license": "Apache-2.0",
   "files": [
     "dist/*",
@@ -46,7 +46,7 @@
   "dependencies": {
     "@abi-software/map-utilities": "^1.7.6",
     "@abi-software/sparc-annotation": "0.3.2",
-    "@abi-software/svg-sprite": "1.0.2",
+    "@abi-software/svg-sprite": "1.0.3",
     "@element-plus/icons-vue": "^2.3.1",
     "css-element-queries": "^1.2.2",
     "element-plus": "2.8.4",

package/src/components/FlatmapError.vue

@@ -11,7 +11,7 @@
     </div>
     <div class="flatmap-error-message" v-if="flatmapError.messages">
       <div v-for="(message, index) in flatmapError.messages" :key="index">
-        {{ message }}
+        <div v-html="message"></div>
       </div>
     </div>
     <div v-if="flatmapError.button">

package/src/components/FlatmapVuer.vue

@@ -2158,40 +2158,46 @@ export default {
           });
         } else {
           // clicking on paths
-          // do nothing for origin, destination, via
           const searchTerms = resources.join();
 
+          // for neuron connection mode "all"
           if (this.connectionType.toLowerCase() === 'all') {
             this.$emit('neuron-connection-feature-click', {
               filters: [],
               search: searchTerms,
             });
+          } else {
+            // for neuron connection mode "origin", "via" and "destination"
+            await this.openConnectivityInfo(data);
           }
         }
       } else {
-        // load and store knowledge
-        loadAndStoreKnowledge(this.mapImp, this.flatmapQueries);
-        let prom1 = []
-        // Emit placeholders first.
-        // This may contain invalid connectivity.
-        this.tooltipEntry = data
-          .filter(tooltip => tooltip.resource[0] in this.mapImp.pathways.paths)
-          .map((tooltip) => {
-            return { title: tooltip.label, featureId: tooltip.resource, ready: false }
-          })
-        // this should only for flatmap paths not all features
-        if (this.tooltipEntry.length) {
-          this.$emit('connectivity-info-open', this.tooltipEntry);
+        await this.openConnectivityInfo(data);
+      }
+    },
+    openConnectivityInfo: async function (data) {
+      // load and store knowledge
+      loadAndStoreKnowledge(this.mapImp, this.flatmapQueries);
+      let prom1 = []
+      // Emit placeholders first.
+      // This may contain invalid connectivity.
+      this.tooltipEntry = data
+        .filter(tooltip => tooltip.resource[0] in this.mapImp.pathways.paths)
+        .map((tooltip) => {
+          return { title: tooltip.label, featureId: tooltip.resource, ready: false }
+        })
+      // this should only for flatmap paths not all features
+      if (this.tooltipEntry.length) {
+        this.$emit('connectivity-info-open', this.tooltipEntry);
 
-          // While having placeholders displayed, get details for all paths and then replace.
-          for (let index = 0; index < data.length; index++) {
-            prom1.push(await this.getKnowledgeTooltip(data[index]))
-          }
-          this.tooltipEntry = await Promise.all(prom1)
-          const featureIds = this.tooltipEntry.map(tooltip => tooltip.featureId[0])
-          if (featureIds.length > 0) {
-            this.displayTooltip(featureIds)
-          }
+        // While having placeholders displayed, get details for all paths and then replace.
+        for (let index = 0; index < data.length; index++) {
+          prom1.push(await this.getKnowledgeTooltip(data[index]))
+        }
+        this.tooltipEntry = await Promise.all(prom1)
+        const featureIds = this.tooltipEntry.map(tooltip => tooltip.featureId[0])
+        if (featureIds.length > 0) {
+          this.displayTooltip(featureIds)
         }
       }
     },
@@ -3028,7 +3034,11 @@ export default {
       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['messages'] = [`A display issue has occurred due
+      to a limit on available WebGL contexts. You can restore the display
+      using the Restore Context button. Please see the
+      <a href="https://docs.sparc.science/docs/integrated-maps-viewer-overview#limit-on-available-webgl-contexts" target='_blank'>documentation</a>
+      for more details.`]
       this.flatmapError['button'] = {
         text: 'Restore Context',
         callback: () => {

package/src/components/MultiFlatmapVuer.vue

@@ -166,10 +166,35 @@ export default {
         if (this.requireInitialisation) {
           //It has not been initialised yet
           this.requireInitialisation = false
-          fetch(this.flatmapAPI)
-            .then((response) => response.json())
+          const controller = new AbortController();
+          const signal = controller.signal;
+          const timeoutId = setTimeout(() => controller.abort(), 5000);
+
+          fetch(this.flatmapAPI, {signal})
+            .then((response) => {
+              if (!response.ok) {
+                // HTTP-level errors
+                if (response.status === 404) {
+                  this.multiflatmapError = {};
+                  this.multiflatmapError['title'] = 'MultiFlatmap Error!';
+                  this.multiflatmapError['messages'] = [
+                    `Sorry, the component could not be loaded because the specified
+                    flatmap API endpoint is incorrect. Please check the endpoint URL
+                    or contact support if the problem persists.`
+                  ];
+                  this.initialised = true;
+                  resolve();
+                  this.resolveList.forEach((other) => other());
+
+                  return Promise.reject({ handled: true });
+                }
+                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+              }
+              return response.json()
+            })
             .then((data) => {
-              if (data.status_code === 404) {
+              // Application-level 404 in a 200 response
+              if (data && data.status_code === 404) {
                 console.error('Flatmap API endpoint is incorrect', data);
                 this.multiflatmapError = {};
                 this.multiflatmapError['title'] = 'MultiFlatmap Error!';
@@ -178,6 +203,11 @@ export default {
                   flatmap API endpoint is incorrect. Please check the endpoint URL
                   or contact support if the problem persists.`
                 ];
+
+                this.initialised = true;
+                resolve();
+                this.resolveList.forEach((other) => other());
+                return;
               }
               //Check each key in the provided availableSpecies against the one
               Object.keys(this.availableSpecies).forEach((key) => {
@@ -237,6 +267,7 @@ export default {
               })
             })
             .catch((error) => {
+              if (error && error.handled) return;
               console.error('Error fetching flatmap:', error)
               this.initialised = true;
               this.multiflatmapError = {};
@@ -251,6 +282,9 @@ export default {
                 other()
               })
             })
+            .finally(() => {
+              clearTimeout(timeoutId);
+            });
         } else if (this.initialised) {
           //resolve as it has been initialised
           resolve()

package/src/components/legends/LegendItem.vue

@@ -70,6 +70,7 @@ export default {
       const specifiedColour = this.item["color"] ? this.item["color"] : this.item["colour"];
       let colour = specifiedColour ? specifiedColour : "transparent";
       let borderColour = this.item.border ? this.item.border : "black";
+      let borderStyle = this.item.borderStyle ? this.item.borderStyle : "default";
       if (specifiedColour && !this.item.border) {
         borderColour = colour;
       }
@@ -82,7 +83,7 @@ export default {
       } else if (this.item[this.styleKey] === 'line') {
         return {'color': colour};
       } else {
-        return { 'background-color': colour, 'border-color': borderColour};
+        return { 'background-color': colour, 'border-color': borderColour, 'border-style': borderStyle};
       }
     },
   },

package/src/services/flatmapLoader.js

@@ -1,6 +1,6 @@
 /**
  * a single source for the flatmap-viewer library import
  */
-import * as flatmap from 'https://cdn.jsdelivr.net/npm/@abi-software/flatmap-viewer@4.4.1/+esm';
+import * as flatmap from 'https://cdn.jsdelivr.net/npm/@abi-software/flatmap-viewer@4.4.3/+esm';
 
 export default flatmap;