@abi-software/map-utilities 1.3.3-beta.1 → 1.3.3-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-utilities",
-  "version": "1.3.3-beta.1",
+  "version": "1.3.3-beta.2",
   "files": [
     "dist/*",
     "src/*",

package/src/components/ConnectivityGraph/ConnectivityGraph.vue

@@ -1,10 +1,6 @@
 <template>
   <div class="connectivity-graph" v-loading="loading" ref="connectivityGraphRef">
 
-    <div class="sckan-version">
-      SCKAN Release: {{ this.selectedSource }}
-    </div>
-
     <div ref="graphCanvas" class="graph-canvas"></div>
 
     <div class="control-panel control-panel-tools">
@@ -121,12 +117,15 @@
       {{ connectivityError.errorMessage }}
     </div>
 
+    <div v-if="loadingError" class="loading-error">
+      {{ loadingError }}
+    </div>
+
   </div>
 </template>
 
 <script>
 import { ConnectivityGraph } from './graph';
-import { capitalise } from '../utilities';
 
 const MIN_SCHEMA_VERSION = 1.3;
 const CACHE_LIFETIME = 24 * 60 * 60 * 1000; // One day
@@ -165,8 +164,10 @@ export default {
   data: function () {
     return {
       loading: true,
+      loadingError: '',
       connectivityGraph: null,
       selectedSource: '',
+      availableSources: [],
       pathList: [],
       schemaVersion: '',
       knowledgeByPath: new Map(),
@@ -184,45 +185,62 @@ export default {
     };
   },
   mounted() {
+    this.showSpinner();
     this.updateTooltipContainer();
     this.refreshCache();
     this.loadCacheData();
-    this.run().then((res) => {
-      this.showGraph(this.entry);
-    });
+    this.run()
+      .then((res) => {
+        if (res?.success) {
+          this.showGraph(this.entry);
+        } else if (res?.error) {
+          this.loadingError = res.error;
+        } else {
+          this.loadingError = 'Loading error!';
+        }
+        this.hideSpinner();
+      })
+      .catch((error) => {
+        this.loadingError = 'Loading error!';
+        this.hideSpinner();
+      });
   },
   methods: {
     updateTooltipContainer: function () {
       this.connectivityGraphContainer = this.$refs.connectivityGraphRef;
     },
     loadCacheData: function () {
-      const selectedSource = sessionStorage.getItem('connectivity-graph-source');
+      const availableSources = sessionStorage.getItem('connectivity-graph-sources');
       const labelCache = sessionStorage.getItem('connectivity-graph-labels');
       const pathList = sessionStorage.getItem('connectivity-graph-pathlist');
       const schemaVersion = sessionStorage.getItem('connectivity-graph-schema-version');
 
-      if (selectedSource) {
-        this.selectedSource = selectedSource;
-      }
-      // Update knowledge source if SCKAN version is provided
+      // Use provided SCKAN version for the knowledge source
       if (this.sckanVersion) {
         this.selectedSource = this.sckanVersion;
-        sessionStorage.setItem('connectivity-graph-source', this.selectedSource);
-        this.updateCacheExpiry();
       }
+      sessionStorage.setItem('connectivity-graph-selected-source', this.selectedSource);
+      this.updateCacheExpiry();
+
+      if (availableSources) {
+        this.availableSources = JSON.parse(availableSources);
+      }
+
       if (pathList) {
         this.pathList = JSON.parse(pathList);
       }
+
       if (labelCache) {
         const labelCacheObj = JSON.parse(labelCache);
         this.labelCache = new Map(Object.entries(labelCacheObj));
       }
+
       if (schemaVersion) {
         this.schemaVersion = schemaVersion;
       }
     },
     isValidKnowledgeSource: function () {
-      const selectedSource = sessionStorage.getItem('connectivity-graph-source');
+      const selectedSource = sessionStorage.getItem('connectivity-graph-selected-source');
       if (this.sckanVersion && (this.sckanVersion !== selectedSource)) {
         return false;
       }
@@ -231,7 +249,9 @@ export default {
     removeAllCacheData: function () {
       const keys = [
         'connectivity-graph-expiry',
-        'connectivity-graph-source',
+        'connectivity-graph-selected-source',
+        'connectivity-graph-source', // to clear old data
+        'connectivity-graph-sources',
         'connectivity-graph-labels',
         'connectivity-graph-pathlist',
         'connectivity-graph-schema-version',
@@ -262,28 +282,32 @@ export default {
         this.updateCacheExpiry();
       }
       if (this.schemaVersion < MIN_SCHEMA_VERSION) {
-        console.warn('No Server!');
-        return;
+        return {
+          error: `No server available for schema-version ${this.schemaVersion}.`,
+        };
       }
-      this.showSpinner();
-      if (!this.selectedSource) {
-        this.selectedSource = await this.setSourceList();
-        sessionStorage.setItem('connectivity-graph-source', this.selectedSource);
-        this.updateCacheExpiry();
+
+      if (!this.availableSources.length) {
+        this.availableSources = await this.loadAvailableSources();
       }
+
+      if (!this.isSCKANVersionAvailable()) {
+        return {
+          error: `No data available for SCKAN version ${this.selectedSource}.`,
+        };
+      }
+
       await this.setPathList(this.selectedSource);
-      this.hideSpinner();
+      return {
+        success: true,
+      };
     },
     showGraph: async function (neuronPath) {
       const graphCanvas = this.$refs.graphCanvas;
 
-      this.showSpinner();
-
       this.connectivityGraph = new ConnectivityGraph(this.labelCache, graphCanvas);
       await this.connectivityGraph.addConnectivity(this.knowledgeByPath.get(neuronPath));
 
-      this.hideSpinner();
-
       this.connectivityGraph.showConnectivity(graphCanvas);
 
       // saved state from list view
@@ -325,25 +349,16 @@ export default {
         };
       }
     },
-    setSourceList: async function () {
+    isSCKANVersionAvailable: function () {
+      return this.availableSources.includes(this.selectedSource);
+    },
+    loadAvailableSources: async function () {
       const data = await this.getJsonData(`${this.mapServer}knowledge/sources`);
       const sources = data ? (data.sources || []) : [];
-
-      // Order with most recent first...
-      let firstSource = '';
-      const sourceList = [];
-
-      for (const source of sources) {
-        if (source) {
-          sourceList.push(source);
-
-          if (firstSource === '') {
-            firstSource = source;
-          }
-        }
-      }
-
-      return firstSource;
+      const filteredSources = sources.filter((source) => source); // filter null values
+      sessionStorage.setItem('connectivity-graph-sources', JSON.stringify(filteredSources));
+      this.updateCacheExpiry();
+      return filteredSources;
     },
     loadPathData: async function (source) {
       const data = await this.query(
@@ -664,14 +679,13 @@ export default {
   width: 1px;
 }
 
-.sckan-version {
+.loading-error {
   position: absolute;
-  bottom: 0;
-  right: 0;
-  margin-bottom: -22px;
-  font-size: 12px;
-  font-style: italic;
-  color: gray;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--el-mask-color);
 }
 </style>
 

package/src/components.d.ts

@@ -15,6 +15,7 @@ declare module 'vue' {
     DrawToolbar: typeof import('./components/DrawToolbar/DrawToolbar.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCol: typeof import('element-plus/es')['ElCol']
+    ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
     ElContainer: typeof import('element-plus/es')['ElContainer']
     ElHeader: typeof import('element-plus/es')['ElHeader']
     ElIcon: typeof import('element-plus/es')['ElIcon']
@@ -28,6 +29,7 @@ declare module 'vue' {
     ElIconFinished: typeof import('@element-plus/icons-vue')['Finished']
     ElIconLock: typeof import('@element-plus/icons-vue')['Lock']
     ElIconUnlock: typeof import('@element-plus/icons-vue')['Unlock']
+    ElIconWarning: typeof import('@element-plus/icons-vue')['Warning']
     ElIconZoomIn: typeof import('@element-plus/icons-vue')['ZoomIn']
     ElIconZoomOut: typeof import('@element-plus/icons-vue')['ZoomOut']
     ElInput: typeof import('element-plus/es')['ElInput']
@@ -37,6 +39,7 @@ declare module 'vue' {
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     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']
     ProvenancePopup: typeof import('./components/Tooltip/ProvenancePopup.vue')['default']