@abi-software/mapintegratedvuer 1.9.0-externalise.0 → 1.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/mapintegratedvuer",
-  "version": "1.9.0-externalise.0",
+  "version": "1.9.0",
   "license": "Apache-2.0",
   "scripts": {
     "serve": "vite --host --force",
@@ -50,12 +50,12 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/flatmapvuer": "^1.9.0-beta.2",
-    "@abi-software/map-side-bar": "^2.7.3-beta.5",
-    "@abi-software/map-utilities": "^1.5.0-beta.2",
-    "@abi-software/plotvuer": "^1.0.3",
-    "@abi-software/scaffoldvuer": "^1.9.0-beta.1",
-    "@abi-software/simulationvuer": "1.0.1",
+    "@abi-software/flatmapvuer": "^1.9.0",
+    "@abi-software/map-side-bar": "^2.8.0",
+    "@abi-software/map-utilities": "^1.5.0",
+    "@abi-software/plotvuer": "1.0.4",
+    "@abi-software/scaffoldvuer": "^1.9.0",
+    "@abi-software/simulationvuer": "1.0.2",
     "@abi-software/sparc-annotation": "0.3.2",
     "@abi-software/svg-sprite": "^1.0.1",
     "@element-plus/icons-vue": "^2.3.1",

package/src/components/ContentVuer.vue

@@ -28,7 +28,7 @@
           :visible="visible"
           :lazy="true"
           ref="viewer"
-          @flatmap-provenance-ready="flatmapProvenacneReady"
+          @flatmap-provenance-ready="flatmapProvenanceReady"
           @resource-selected="resourceSelected"
           @species-changed="speciesChanged"
         />
@@ -78,8 +78,9 @@ export default {
     Simulation,
   },
   methods: {
-    flatmapProvenacneReady: function(prov) {
+    flatmapProvenanceReady: function(prov) {
       this.$refs.contentBar?.setupFlatmapContextCard(prov);
+      this.entriesStore.updateMapForEntry(this.entry, prov);
     },
     /**
      * Toggle sync mode on/off depending on species and current state

package/src/components/DialogToolbarContent.vue

@@ -113,46 +113,32 @@
       >
         <template v-if="displayShareOptions">
           <el-row>
-            <el-col :span="8">
-              <el-popover class="tooltip"
-                content="Create a permanent link for current views and settings." 
-                placement="bottom-end"
-                :show-after="helpDelay" :teleported=false trigger="hover"
-                popper-class="header-popper"
+            <el-col :offset="3" :span="8">
+              <el-button
+                type="primary"
+                size="small"
+                @click="getShareLink(exportAnnotation)"
+                class="share-options"
               >
-                <template #reference>
-                  <el-button
-                    type="primary"
-                    size="small"
-                    @click="getShareLink(false)"
-                    class="share-options"
-                  >
-                    Settings Only
-                  </el-button>
-                </template>
-              </el-popover>
+                Create Permalink
+              </el-button>
             </el-col>
-            <el-col :span="14">
+            <el-col :span="10">
               <el-popover class="tooltip"
                 placement="bottom-end"
                 :show-after="helpDelay" :teleported=false trigger="hover"
                 popper-class="header-popper"
               >
                 <template #reference>
-                  <el-button
-                    type="primary"
+                  <el-checkbox
+                    v-model="exportAnnotation"
                     size="small"
-                    @click="getShareLink(true)"
-                    class="share-options"
                   >
-                    Settings with Annotations
-                    (Valid for 30 days)
-                  </el-button>
+                    Export Annotations
+                  </el-checkbox>
                 </template>
                 <template #default>
-                  Create a link for current views settings 
-                  <br>
-                  and anonymous annotations.
+                  Create a permalink with anonymous annotations.
                   <br>
                   NOTE: Annotations will only be stored for
                   <br>
@@ -286,6 +272,7 @@ import {
 } from '@element-plus/icons-vue';
 import {
   ElButton as Button,
+  ElCheckbox as Checkbox,
   ElCol as Col,
   ElIcon as Icon,
   ElInput as Input,
@@ -303,6 +290,7 @@ export default {
   name: "DialogToolbarContent",
   components: {
     Button,
+    Checkbox,
     Col,
     Icon,
     Input,
@@ -371,16 +359,17 @@ export default {
   },
   data: function() {
     return {
-      isFullscreen: false,
-      loadingLink: true,
-      displayShareOptions: false,
-      independent: true,
-      failedSearch: undefined,
       activeViewRef: undefined,
-      permalinkRef: undefined,
-      globalSettingRef: undefined,
+      displayShareOptions: false,
       ElIconCopyDocument: shallowRef(ElIconCopyDocument),
+      exportAnnotation: false,
+      failedSearch: undefined,
       globalSettings: {},
+      globalSettingRef: undefined,
+      independent: true,
+      isFullscreen: false,
+      loadingLink: true,
+      permalinkRef: undefined,
     }
   },
   methods: {

package/src/components/SplitDialog.vue

@@ -30,6 +30,7 @@ import CustomSplitter from "./CustomSplitter.vue";
 import EventBus from './EventBus';
 import { mapStores } from 'pinia';
 import { useSplitFlowStore } from '../stores/splitFlow';
+import { useConnectivitiesStore } from '../stores/connectivities';
 
 export default {
   name: "SplitDialog",
@@ -157,13 +158,99 @@ export default {
         });
       }
       this.__userResize__ = false;
-    }
+    },
+    onSpeciesLayoutConnectivityUpdate: function () {
+      let activePaneIDs = [];
+      let availablePaneIDs = [];
+      let combinedConnectivities = [];
+      let sckanVersion = '';
+      let uuid = '';
+
+      for (const key in this.customLayout) {
+        if (this.customLayout[key].id) {
+          availablePaneIDs.push(this.customLayout[key].id);
+        }
+      }
+
+      switch (this.activeView) {
+        case 'singlepanel': {
+          activePaneIDs = availablePaneIDs.slice(0, 1);
+        } break;
+        case '2horpanel':
+        case '2vertpanel': {
+          activePaneIDs = availablePaneIDs.slice(0, 2);
+        } break;
+        case '3panel': {
+          activePaneIDs = availablePaneIDs.slice(0, 3);
+        } break;
+        case '4panel': {
+          activePaneIDs = availablePaneIDs.slice(0, 4);
+        } break;
+        case '5panel': {
+          activePaneIDs = availablePaneIDs.slice(0, 5);
+        } break;
+        case '6panelVertical':
+        case '6panel': {
+          activePaneIDs = availablePaneIDs.slice(0, 6);
+        } break;
+        default:
+          break;
+      }
+
+      const uuids = Array.from(
+        new Set(
+          this.entries
+            .filter(entry => activePaneIDs.includes(entry.id) && entry.uuid)
+            .map(entry => entry.uuid)
+        )
+      );
+
+      this.entries.forEach((entry) => {
+        if (entry.sckanVersion in this.connectivitiesStore.globalConnectivities) {
+          sckanVersion = entry.sckanVersion;
+        }
+      });
+
+      // mix connectivites of available maps
+      if (uuids.length) {
+        uuids.forEach((_uuid) => {
+          if (_uuid in this.connectivitiesStore.globalConnectivities) {
+            const connectivity = this.connectivitiesStore.globalConnectivities[_uuid];
+            combinedConnectivities.push(...connectivity);
+          }
+        });
+
+        const uniqueConnectivities = Array.from(
+          new Map(combinedConnectivities.map((item) => [item.id, item])).values()
+        );
+
+        EventBus.emit("connectivity-knowledge", {
+          data: uniqueConnectivities
+        });
+
+        if (uuids.length === 1) {
+          this.connectivitiesStore.updateActiveConnectivityKey(uuid);
+        }
+      } else {
+        if (sckanVersion) {
+          EventBus.emit("connectivity-knowledge", {
+            data: this.connectivitiesStore.globalConnectivities[sckanVersion]
+          });
+          this.connectivitiesStore.updateActiveConnectivityKey(sckanVersion);
+        } else {
+          console.warn(`There has no connectivity to show!`);
+        }
+      }
+    },
   },
   computed: {
-    ...mapStores(useSplitFlowStore),
+    ...mapStores(useSplitFlowStore, useConnectivitiesStore),
     activeView: function() {
       return this.splitFlowStore.activeView;
     },
+    customLayout: function() {
+      return this.splitFlowStore.customLayout;
+    },
     horizontal() {
       if (this.splitFlowStore.activeView === "2horpanel") {
         return true;
@@ -209,6 +296,9 @@ export default {
     EventBus.on("PaneUnmounted", payload => {
       this.hidePane(payload.refName);
     });
+    EventBus.on('species-layout-connectivity-update', () => {
+      this.onSpeciesLayoutConnectivityUpdate();
+    })
   },
 };
 </script>

package/src/components/SplitFlow.vue

@@ -130,7 +130,7 @@ export default {
       createData: {},
       connectivityHighlight: [],
       connectivityKnowledge: [],
-      connectivityExplorerClicked: false,
+      connectivityExplorerClicked: [], // to support multi views
     }
   },
   watch: {
@@ -146,8 +146,7 @@ export default {
   },
   methods: {
     onConnectivityExplorerClicked: function (payload) {
-      this.connectivityExplorerClicked = true;
-      this.onDisplaySearch({ term: payload.id }, false);
+      this.onDisplaySearch({ term: payload.id }, false, true);
     },
     /**
      * Callback when an action is performed (open new dialogs).
@@ -249,13 +248,16 @@ export default {
         'file_path': filePath,
       });
     },
-    onDisplaySearch: function (payload, tracking = true) {
+    onDisplaySearch: function (payload, tracking = true, connectivityExplorerClicked = false) {
       let searchFound = false;
       //Search all active viewers when global callback is on
       let splitdialog = this.$refs.splitdialog;
       if (splitdialog) {
         const activeContents = splitdialog.getActiveContents();
         activeContents.forEach(content => {
+          if (connectivityExplorerClicked) {
+            this.connectivityExplorerClicked.push(true);
+          }
           if (content.search(payload.term)) {
             searchFound = true;
           }
@@ -314,7 +316,7 @@ export default {
       EventBus.emit('connectivity-hovered', data);
     },
     onConnectivitySourceChange: function (data) {
-      this.connectivityExplorerClicked = true;
+      this.connectivityExplorerClicked.push(true);
       EventBus.emit('connectivity-source-change', data);
     },
     hoverChanged: function (data) {
@@ -511,8 +513,12 @@ export default {
     speciesChanged: function (species) {
       if (this.$refs.sideBar) {
         // Use to update the connectivity when switch species
-        EventBus.emit("connectivity-query-filter");
-        this.$refs.sideBar.close();
+        // Wait for provenance info with uuid update
+        this.$nextTick(() => {
+          // EventBus.emit("connectivity-query-filter");
+          EventBus.emit('species-layout-connectivity-update');
+          this.$refs.sideBar.close();
+        })
       }
     },
     toggleSyncMode: function (payload) {
@@ -632,7 +638,7 @@ export default {
       this.connectivityEntry = payload;
       // click on the flatmap paths/features directly
       // or onDisplaySearch is performed
-      if (!this.connectivityExplorerClicked) {
+      if (!this.connectivityExplorerClicked.length) {
         this.connectivityKnowledge = payload.map((entry) => {
           return { label: entry.title, id: entry.featureId[0], detailsReady: entry.ready }
         });
@@ -645,11 +651,11 @@ export default {
           this.$refs.sideBar.setDrawerOpen(true);
         }
       }
-      this.connectivityExplorerClicked = false;
+      this.connectivityExplorerClicked.pop();
     });
-    EventBus.on('connectivity-graph-error', payload => {
+    EventBus.on('connectivity-error', payload => {
       if (this.$refs.sideBar) {
-        this.$refs.sideBar.updateConnectivityGraphError(payload.data);
+        this.$refs.sideBar.updateConnectivityError(payload.data);
       }
     });
     EventBus.on("OpenNewMap", type => {

package/src/components/viewers/Flatmap.vue

@@ -20,7 +20,7 @@
       @annotation-close="onAnnotationClose"
       :annotationSidebar="annotationSidebar"
       @connectivity-info-open="onConnectivityInfoOpen"
-      @connectivity-graph-error="onConnectivityGraphError"
+      @connectivity-error="onConnectivityError"
       :connectivityInfoSidebar="connectivityInfoSidebar"
       :pathControls="true"
       ref="flatmap"

package/src/components/viewers/MultiFlatmap.vue

@@ -19,7 +19,7 @@
       @annotation-close="onAnnotationClose"
       :annotationSidebar="annotationSidebar"
       @connectivity-info-open="onConnectivityInfoOpen"
-      @connectivity-graph-error="onConnectivityGraphError"
+      @connectivity-error="onConnectivityError"
       :connectivityInfoSidebar="connectivityInfoSidebar"
       ref="multiflatmap"
       :displayMinimap="true"

package/src/components.d.ts

@@ -16,6 +16,7 @@ declare module 'vue' {
     DialogToolbarContent: typeof import('./components/DialogToolbarContent.vue')['default']
     ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElContainer: typeof import('element-plus/es')['ElContainer']
     ElHeader: typeof import('element-plus/es')['ElHeader']

package/src/mixins/ContentMixin.js

@@ -7,6 +7,7 @@ import EventBus from "../components/EventBus";
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '../stores/settings';
 import { useSplitFlowStore } from '../stores/splitFlow';
+import { useConnectivitiesStore } from '../stores/connectivities';
 import Tagging from '../services/tagging.js';
 
 import { FlatmapQueries } from "@abi-software/flatmapvuer/src/services/flatmapQueries.js";
@@ -35,7 +36,7 @@ export default {
     },
   },
   computed: {
-    ...mapStores(useSettingsStore, useSplitFlowStore),
+    ...mapStores(useSettingsStore, useSplitFlowStore, useConnectivitiesStore),
     idNamePair() {
       return this.splitFlowStore.idNamePair;
     },
@@ -60,6 +61,7 @@ export default {
     this.multiflatmapRef = this.$refs.multiflatmap;
     this.flatmapRef = this.$refs.flatmap;
     this.scaffoldRef = this.$refs.scaffold;
+    this.connectivityKnowledge = this.connectivitiesStore.globalConnectivities;
   },
   methods: {
     toggleSyncMode: function () {
@@ -521,6 +523,18 @@ export default {
                   flatmap.zoomToFeatures(paths);
                 } catch (error) {
                   console.log(error)
+                  // only for connectivity hover highlight
+                  if (hoverConnectivity.length && flatmap.mapImp) {
+                    const uuid = flatmap.mapImp.uuid;
+                    const found = paths.every((path) =>
+                      this.connectivityKnowledge[uuid].some((connectivity) =>
+                        connectivity.id === path
+                      )
+                    );
+                    if (!found) {
+                      flatmap.mapImp.clearSearchResults();
+                    }
+                  }
                 }
               });
             } else if (this.scaffoldRef && scaffold) {
@@ -539,25 +553,46 @@ export default {
     onConnectivityInfoOpen: function (connectivityInfoData) {
       EventBus.emit('connectivity-info-open', connectivityInfoData);
     },
-    onConnectivityGraphError: function (errorInfo) {
-      EventBus.emit('connectivity-graph-error', errorInfo);
+    onConnectivityError: function (errorInfo) {
+      EventBus.emit('connectivity-error', errorInfo);
     },
-    loadConnectivityKnowledge: async function (flatmap) {
-      const sckanVersion = getKnowledgeSource(flatmap);
+    loadConnectivityKnowledge: async function (flatmapImp) {
+      const sckanVersion = getKnowledgeSource(flatmapImp);
       const flatmapQueries = markRaw(new FlatmapQueries());
       flatmapQueries.initialise(this.flatmapAPI);
-      const knowledge = await loadAndStoreKnowledge(flatmap, flatmapQueries);
-      const uuid = flatmap.uuid;
-      const mapPathsData = await flatmapQueries.queryMapPaths(uuid);
-      const pathsFromMap = mapPathsData ? mapPathsData.paths : {};
+      const knowledge = await loadAndStoreKnowledge(flatmapImp, flatmapQueries);
+      const uuid = flatmapImp.uuid;
 
-      this.connectivityKnowledge[uuid] = knowledge.filter((item) => {
-        if (item.source === sckanVersion && item.connectivity?.length && item.id in pathsFromMap) {
-          return true;
-        }
-        return false;
-      });
-      EventBus.emit("connectivity-knowledge", { type: "default", data: this.connectivityKnowledge[uuid] });
+      if (!this.connectivityKnowledge[sckanVersion]) {
+        this.connectivityKnowledge[sckanVersion] = knowledge
+          .filter((item) => {
+            return (
+              item.source === sckanVersion &&
+              item.connectivity?.length
+            );
+          })
+          .sort((a, b) => a.label.localeCompare(b.label));
+      }
+
+      if (!this.connectivitiesStore.globalConnectivities[uuid]) {
+        const mapPathsData = await flatmapQueries.queryMapPaths(uuid);
+        const pathsFromMap = mapPathsData ? mapPathsData.paths : {};
+
+        this.connectivityKnowledge[uuid] = knowledge
+          .filter((item) => {
+            return (
+              item.source === sckanVersion &&
+              item.connectivity?.length &&
+              item.id in pathsFromMap
+            );
+          })
+          .sort((a, b) => a.label.localeCompare(b.label));
+      }
+
+      this.connectivitiesStore.updateGlobalConnectivities(this.connectivityKnowledge);
+
+      // EventBus.emit("connectivity-knowledge", { data: this.connectivityKnowledge[uuid] });
+      EventBus.emit('species-layout-connectivity-update');
     },
     getSearchedId: function (flatmap, term) {
       let ids = [];
@@ -575,35 +610,39 @@ export default {
       return ids;
     },
     connectivityQueryFilter: async function (flatmap, data) {
-      const uuid = flatmap.mapImp.uuid
-      let payload = {
-        state: "default",
-        data: [...this.connectivityKnowledge[uuid]],
-      };      
-      if (data) {        
-        if (data.type === "query-update") {
-          if (this.query !== data.value) this.target = [];
-          this.query = data.value;
-        } else if (data.type === "filter-update") {
-          this.filter = data.value;
+      const uuid = flatmap.mapImp.uuid;
+      // to search from sckan or uuid based on the maps showing on split screens
+      const activeConnectivityKey = this.connectivitiesStore.activeConnectivityKey || uuid;
+      // only for those flatmaps that are shown on the split screen
+      if (flatmap.$el.checkVisibility()) {
+        let payload = {
+          state: "default",
+          data: [...this.connectivityKnowledge[activeConnectivityKey]],
+        };
+        if (data) {
+          if (data.type === "query-update") {
+            if (this.query !== data.value) this.target = [];
+            this.query = data.value;
+          } else if (data.type === "filter-update") {
+            this.filter = data.value;
+          }
         }
-      }
-      if (this.query) {
-        payload.state = "processed";
-        let prom1 = [], options = {};
-        const searchTerms = this.query.split(",").map((term) => term.trim());
-        for (let index = 0; index < searchTerms.length; index++) {
-          prom1.push(this.getSearchedId(flatmap, searchTerms[index]));
+        if (this.query) {
+          payload.state = "processed";
+          let prom1 = [], options = {};
+          const searchTerms = this.query.split(",").map((term) => term.trim());
+          for (let index = 0; index < searchTerms.length; index++) {
+            prom1.push(this.getSearchedId(flatmap, searchTerms[index]));
+          }
+          const nestedIds = await Promise.all(prom1);
+          const ids = [...new Set(nestedIds.flat())];
+          let paths = await flatmap.retrieveConnectedPaths(ids, options);
+          paths = [...ids, ...paths.filter((path) => !ids.includes(path))];
+          let results = this.connectivityKnowledge[activeConnectivityKey].filter((item) => paths.includes(item.id));
+          payload.data = results;
         }
-        const nestedIds = await Promise.all(prom1);
-        const ids = [...new Set(nestedIds.flat())];
-        let paths = await flatmap.retrieveConnectedPaths(ids, options);
-        paths = [...ids, ...paths.filter((path) => !ids.includes(path))];
-        let results = this.connectivityKnowledge[uuid].filter((item) => paths.includes(item.id));
-        results.sort((a, b) => paths.indexOf(a.id) - paths.indexOf(b.id));
-        payload.data = results;
+        EventBus.emit("connectivity-knowledge", payload);
       }
-      EventBus.emit("connectivity-knowledge", payload);
     }
   },
   data: function () {

package/src/stores/connectivities.js

@@ -0,0 +1,21 @@
+import { defineStore } from 'pinia';
+
+export const useConnectivitiesStore = defineStore('connectivities', {
+  state: () => {
+    return {
+      globalConnectivities: {},
+      activeConnectivityKey: '',
+    }
+  },
+  getters: {
+
+  },
+  actions: {
+    updateGlobalConnectivities(globalConnectivities) {
+      this.globalConnectivities = globalConnectivities;
+    },
+    updateActiveConnectivityKey(activeConnectivityKey) {
+      this.activeConnectivityKey = activeConnectivityKey;
+    },
+  }
+});

package/src/stores/entries.js

@@ -1,5 +1,6 @@
 import { defineStore } from 'pinia';
 import { initialDefaultState } from "../components/scripts/utilities";
+import { getKnowledgeSourceFromProvenance } from '@abi-software/flatmapvuer/src/services/flatmapKnowledge.js';
 
 /* eslint-disable no-alert, no-console */
 
@@ -35,6 +36,12 @@ export const useEntriesStore = defineStore('entries', {
       const entry = this.entries.find(entry => entry.id === id);
       entry.viewUrl = viewUrl;
     },
-
+    updateMapForEntry(entry, prov) {
+      if (entry.id === prov.id) {
+        const sckanVersion = getKnowledgeSourceFromProvenance(prov.prov);
+        entry['uuid'] = prov.prov.uuid;
+        entry['sckanVersion'] = sckanVersion;
+      }
+    },
   }
 });