@abi-software/mapintegratedvuer 1.16.3 → 1.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/mapintegratedvuer",
-  "version": "1.16.3",
+  "version": "1.17.0",
   "license": "Apache-2.0",
   "scripts": {
     "serve": "vite --host --force",
@@ -52,12 +52,12 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/flatmapvuer": "1.12.2",
-    "@abi-software/map-side-bar": "2.13.0",
-    "@abi-software/map-utilities": "1.7.7",
+    "@abi-software/flatmapvuer": "1.13.0",
+    "@abi-software/map-side-bar": "2.14.0",
+    "@abi-software/map-utilities": "1.8.0",
     "@abi-software/plotvuer": "1.0.7",
-    "@abi-software/scaffoldvuer": "1.13.1-beta.2",
-    "@abi-software/simulationvuer": "3.0.9",
+    "@abi-software/scaffoldvuer": "1.14.0",
+    "@abi-software/simulationvuer": "3.0.15",
     "@abi-software/sparc-annotation": "0.3.2",
     "@abi-software/svg-sprite": "1.0.4",
     "@element-plus/icons-vue": "^2.3.1",

package/src/App.vue

@@ -24,6 +24,7 @@
                 <el-button @click="setWholebody()" size="small">Set to Wholebody</el-button>
                 <el-button @click="setFlatmap()" size="small">Set Flatmap</el-button>
                 <el-button @click="setSearch()" size="small">Set Search</el-button>
+                <el-button @click="toggleLongLabel()" size="small">Toggle Long Label</el-button>
               </div>
             </div>
             <template #reference>
@@ -40,6 +41,7 @@
         :startingMap="startingMap"
         :options="options"
         :state="state"
+        :showLongLabel="showLongLabel"
         :shareLink="shareLink"
         :useHelpModeDialog="true"
         :connectivityInfoSidebar="true"
@@ -158,6 +160,7 @@ export default {
       startingMap: "AC",
       ElIconSetting: shallowRef(ElIconSetting),
       routerIsReady: false,
+      showLongLabel: true,
     }
   },
   computed: {
@@ -309,6 +312,9 @@ export default {
     setSearch: function() {
       this.$refs.map.openSearch([], "10.26275/1uno-tynt");
     },
+    toggleLongLabel: function() {
+      this.showLongLabel = !this.showLongLabel;
+    },
     mapIsLoaded: function(map) {
       console.log("map is loaded", map)
       // map.changeViewingMode('Annotation')

package/src/components/ContentVuer.vue

@@ -49,6 +49,7 @@ import { useSplitFlowStore } from '../stores/splitFlow';
 const Flatmap = defineAsyncComponent(() => import("./viewers/Flatmap.vue"));
 const Iframe = defineAsyncComponent(() => import("./viewers/Iframe.vue"));
 const MultiFlatmap = defineAsyncComponent(() => import("./viewers/MultiFlatmap.vue"));
+const ConnectivityGraph = defineAsyncComponent(() => import("./viewers/ConnectivityGraph.vue"));
 const Plot = defineAsyncComponent(() => import("./viewers/Plot.vue"));
 const Scaffold = defineAsyncComponent(() => import("./viewers/Scaffold.vue"));
 const Simulation = defineAsyncComponent(() => import("./viewers/Simulation.vue"));
@@ -70,6 +71,7 @@ export default {
     //DatasetHeader,
     Button,
     ContentBar,
+    ConnectivityGraph,
     Flatmap,
     Iframe,
     MultiFlatmap,
@@ -157,7 +159,9 @@ export default {
       this.$refs.viewer?.setVisibilityFilter(payload);
     },
     onLoadConnectivityDetail: function(payload) {
-      this.$refs.viewer?.getKnowledgeTooltip(payload);
+      if (this.$refs.viewer?.entry.type !== 'ConnectivityGraph') {
+        this.$refs.viewer?.getKnowledgeTooltip(payload);
+      }
     },
     toggleMinimap: function(option, prevState) {
       this.$refs.viewer?.toggleMinimap(option, prevState);

package/src/components/MapContent.vue

@@ -11,6 +11,7 @@
         v-if="isReady"
         @onFullscreen="onFullscreen"
         :state="stateToSet"
+        :showLongLabel="showLongLabel"
         ref="flow"
         @vue:mounted="flowMounted"
       />
@@ -59,6 +60,10 @@ export default {
       type: Object,
       default: undefined
     },
+    showLongLabel: {
+      type: Boolean,
+      default: true,
+    },
     /**
      * The options include APIs and Keys.
      */

package/src/components/SplitDialog.vue

@@ -203,12 +203,11 @@ export default {
 
       // mix connectivites of available maps
       if (uuids.length) {
-        this.connectivitiesStore.updateActiveConnectivityKeys(uuids);
-
-        // emit connectivity-knowledge event will be at connectivityQueryFilter
-
-        const uniqueFilters = this.connectivitiesStore.getUniqueFilterOptionsByKeys;
-        EventBus.emit("connectivity-filter-options", uniqueFilters);
+        // emit connectivity-knowledge event only if active connectivity keys are updated
+        if (this.connectivitiesStore.updateActiveConnectivityKeys(uuids)) {
+          const uniqueFilters = this.connectivitiesStore.getUniqueFilterOptionsByKeys;
+          EventBus.emit("connectivity-filter-options", uniqueFilters);
+        }
       } else {
         const connectivityData = this.connectivitiesStore.globalConnectivities[sckanVersion] || [];
         EventBus.emit("connectivity-knowledge", {

package/src/components/SplitFlow.vue

@@ -30,6 +30,7 @@
           :connectivityKnowledge="connectivityKnowledge"
           :filterOptions="filterOptions"
           :showVisibilityFilter="showVisibilityFilter"
+          :showLongLabel="showLongLabel"
           @tabClicked="onSidebarTabClicked"
           @tabClosed="onSidebarTabClosed"
           @actionClick="actionClick"
@@ -48,6 +49,7 @@
           @connectivity-hovered="onConnectivityHovered"
           @connectivity-collapse-change="onConnectivityCollapseChange"
           @connectivity-source-change="onConnectivitySourceChange"
+          @show-connectivity-graph="onShowConnectivityGraph"
           @filter-visibility="onFilterVisibility"
           @connectivity-item-close="onConnectivityItemClose"
           @trackEvent="trackEvent"
@@ -146,7 +148,11 @@ export default {
     state: {
       type: Object,
       default: undefined,
-    }
+    },
+    showLongLabel: {
+      type: Boolean,
+      default: true,
+    },
   },
   data: function () {
     return {
@@ -480,9 +486,25 @@ export default {
         if (entry.ready) {
           result['nerve-label'] = entry['nerve-label'] || ck['nerve-label'];
         }
+        if (ck && ck['long-label']) {
+          result['long-label'] = ck['long-label'];
+        }
         return result;
       });
 
+      // Fetch long-label from global connectivities if not exist in the payload,
+      // this is for the case when user click on the flatmap paths/features directly without going through sidebar list,
+      // which will only have id and label in the payload
+      if (!this.connectivityEntry[0]['long-label'] && this.connectivityEntry[0].mapuuid) {
+        const connectivityData = this.connectivitiesStore.globalConnectivities[this.connectivityEntry[0].mapuuid] || [];
+        if (connectivityData.length) {
+          const ck = connectivityData.find(ck => ck.id === this.connectivityEntry[0].id);
+          if (ck && ck['long-label']) {
+            this.connectivityEntry[0]['long-label'] = ck['long-label'];
+          }
+        }
+      }
+
       if (this.connectivityExplorerClicked.length) {
         // only remove clicked if not placeholder entry
         if (this.connectivityEntry.every(entry => entry.ready)) {
@@ -571,6 +593,38 @@ export default {
       this.connectivityExplorerClicked.push(true);
       EventBus.emit('connectivity-source-change', data);
     },
+    onShowConnectivityGraph: function (data) {
+      const previousPrimaryId = this.splitFlowStore.customLayout?.['pane-1']?.id;
+      const connectivityGraphId = this.createNewEntry({
+        resource: data.entry,
+        type: 'ConnectivityGraph',
+        label: data.title || data.label || data.entry ||'Connectivity Graph',
+        graphPayload: { ...data },
+        mapServer: this.settingsStore.flatmapAPI,
+        sckanVersion: data.sckanVersion,
+      });
+
+      this.splitFlowStore.updateActiveView({
+        view: '2vertpanel',
+        entries: this.entries,
+      }, false);
+
+      if (previousPrimaryId && previousPrimaryId !== connectivityGraphId) {
+        this.splitFlowStore.assignOrSwapPaneWithIds({
+          source: connectivityGraphId,
+          target: previousPrimaryId,
+        }, false);
+      }
+
+      const secondPaneId = this.splitFlowStore.customLayout?.['pane-2']?.id;
+      if (secondPaneId && secondPaneId !== connectivityGraphId) {
+        this.splitFlowStore.assignOrSwapPaneWithIds({
+          source: connectivityGraphId,
+          target: secondPaneId,
+        }, false);
+      }
+      this.splitFlowStore.updateSplitPanels();
+    },
     hoverChanged: function (data) {
       let hoverAnatomies = [], hoverOrgans = [], hoverDOI = '', hoverConnectivity = [];
       if (data.tabType === 'dataset') {

package/src/components/scripts/utilities.js

@@ -50,6 +50,15 @@ const getNewMapEntry = async (type, sparcApi) => {
       version: data.datasetInfo.version,
       isBodyScaffold: true,
     };
+  } else if (type === "CG") {
+    entry = {
+      resource: "ConnectivityGraph",
+      type: "ConnectivityGraph",
+      mode: "main",
+      state: undefined,
+      label: "Connectivity Graph",
+      discoverId: undefined
+    }
   }
 
   return entry;
@@ -190,7 +199,13 @@ const transformStringToObj = (str) => {
   return obj;
 };
 
+const listsAreEqual = (a, b) => {
+  if (a.length !== b.length) return false;
+  return JSON.stringify([...a].sort()) === JSON.stringify([...b].sort());
+};
+
 export {
+  listsAreEqual,
   availableSpecies,
   capitalise,
   findSpeciesKey,

package/src/components/viewers/ConnectivityGraph.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="viewer-container">
+    <MapUtilitiesConnectivityGraph
+      :entry="graphEntry"
+      :mapServer="mapServer"
+      :sckanVersion="sckanVersion"
+      :connectivityFromMap="connectivityFromMap"
+      :connectivityError="connectivityError"
+      :origins="origins"
+      :components="components"
+      :destinations="destinations"
+      :originsWithDatasets="originsWithDatasets"
+      :componentsWithDatasets="componentsWithDatasets"
+      :destinationsWithDatasets="destinationsWithDatasets"
+      :hasSingleConnectivityList="hasSingleConnectivityList"
+      :originsCombinations="originsCombinations"
+      :componentsCombinations="componentsCombinations"
+      :destinationsCombinations="destinationsCombinations"
+      @tap-node="onTapNode"
+    />
+  </div>
+</template>
+
+<script>
+/* eslint-disable no-alert, no-console */
+import {
+  ConnectivityGraph as MapUtilitiesConnectivityGraph,
+} from '@abi-software/map-utilities';
+import ContentMixin from "../../mixins/ContentMixin";
+import EventBus from '../EventBus';
+
+export default {
+  name: "ConnectivityGraph",
+  mixins: [ ContentMixin ],
+  components: {
+    MapUtilitiesConnectivityGraph,
+  },
+  computed: {
+    graphEntry() {
+      return this.entry.resource;
+    },
+    connectivityError() {
+      return {};
+    },
+    connectivityFromMap() {
+      return this.entry.graphPayload?.connectivityFromMap || null;
+    },
+    origins() {
+      return this.entry.graphPayload?.origins || [];
+    },
+    components() {
+      return this.entry.graphPayload?.components || [];
+    },
+    destinations() {
+      return this.entry.graphPayload?.destinations || [];
+    },
+    originsWithDatasets() {
+      return this.entry.graphPayload?.originsWithDatasets || [];
+    },
+    componentsWithDatasets() {
+      return this.entry.graphPayload?.componentsWithDatasets || [];
+    },
+    destinationsWithDatasets() {
+      return this.entry.graphPayload?.destinationsWithDatasets || [];
+    },
+    hasSingleConnectivityList() {
+      return this.entry.graphPayload?.hasSingleConnectivityList || false;
+    },
+    originsCombinations() {
+      return this.entry.graphPayload?.originsCombinations || [];
+    },
+    componentsCombinations() {
+      return this.entry.graphPayload?.componentsCombinations || [];
+    },
+    destinationsCombinations() {
+      return this.entry.graphPayload?.destinationsCombinations || [];
+    },
+    mapServer() {
+      return this.entry.mapServer || null;
+    },
+    sckanVersion() {
+      return this.entry.sckanVersion || null;
+    },
+  },
+  methods: {
+    onTapNode: function (data) {
+      const name = data.map(t => t.label).join(', ');
+      this.onConnectivityHovered(name);
+
+      // Hover outside of node area
+      if (!name) {
+        EventBus.emit('show-connectivity', {
+          featureIds: [this.entry.resource]
+        });
+      }
+
+    },
+    onConnectivityHovered: function (label) {
+      const payload = {
+        connectivityInfo: this.graphEntry,
+        label: label,
+        data: label ? this.getConnectivityDatasets(label) : [],
+      };
+      EventBus.emit('connectivity-hovered', payload);
+    },
+    getConnectivityDatasets: function (label) {
+      const allWithDatasets = this.entry.graphPayload?.allWithDatasets || [];
+      const names = label.split(',');
+      let data = [];
+      names.forEach((n) => {
+        const foundData = allWithDatasets.find((a) =>
+          a.name.toLowerCase().trim() === n.toLowerCase().trim()
+        );
+        if (foundData) {
+          data.push({
+            id: foundData.id,
+            label: foundData.name
+          });
+        }
+      });
+      return data
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.viewer-container {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+
+  .connectivity-graph {
+    width: 100%;
+    height: 100%;
+    box-shadow: none;
+    border: none;
+    border-radius: 0;
+
+    :deep(.graph-canvas) {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>

package/src/components/viewers/MultiFlatmap.vue

@@ -88,6 +88,10 @@ const getOpenMapOptions = (species) => {
       display: "Open 3D Human Map",
       key: "3D"
     },
+    {
+      display: "Open Connectivity Graph",
+      key: "CG"
+    },
   ]
   return options;
 }
@@ -228,9 +232,6 @@ export default {
           this.speciesHasChanged = true;
         }
       }
-
-
-
       // GA Tagging
       // Event tracking for maps' species change
       Tagging.sendEvent({
@@ -270,6 +271,9 @@ export default {
       };
       EventBus.emit("PopoverActionClick", returnedAction);
     },
+    flatmapIsReady() {
+      return this.flatmapReady;
+    },
     restoreFeaturedMarkers: function (flatmap) {
 
       this.settingsStore.resetFeaturedMarkerIdentifier();
@@ -464,4 +468,4 @@ export default {
 
 </style>
 
-<style src="../../assets/mapicon-species-style.css"></style>
+<style src="../../assets/mapicon-species-style.css"></style>

package/src/components.d.ts

@@ -7,6 +7,7 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    ConnectivityGraph: typeof import('./components/viewers/ConnectivityGraph.vue')['default']
     ContentBar: typeof import('./components/ContentBar.vue')['default']
     ContentVuer: typeof import('./components/ContentVuer.vue')['default']
     ContextCard: typeof import('./components/ContextCard.vue')['default']

package/src/mixins/ContentMixin.js

@@ -81,7 +81,7 @@ export default {
   },
   methods: {
     toggleMinimap: function (option, prevState) {
-      if (this.multiflatmapRef) {
+      if (this.multiflatmapRef && this.flatmapIsReady()) {
         const currentFlatmap = this.multiflatmapRef.getCurrentFlatmap();
         const mapImp = currentFlatmap?.mapImp;
         if (mapImp) {

package/src/stores/connectivities.js

@@ -1,4 +1,5 @@
 import { defineStore } from 'pinia';
+import { listsAreEqual } from "../components/scripts/utilities";
 
 export const useConnectivitiesStore = defineStore('connectivities', {
   state: () => {
@@ -70,7 +71,11 @@ export const useConnectivitiesStore = defineStore('connectivities', {
   },
   actions: {
     updateActiveConnectivityKeys(activeConnectivityKeys) {
-      this.activeConnectivityKeys = activeConnectivityKeys;
+      if (!listsAreEqual(this.activeConnectivityKeys, activeConnectivityKeys)) {
+        this.activeConnectivityKeys = activeConnectivityKeys;
+        return true;
+      }
+      return false;
     },
     updateGlobalConnectivities(globalConnectivities) {
       this.globalConnectivities = globalConnectivities;

package/src/stores/splitFlow.js

@@ -89,7 +89,7 @@ const autoAssignEntryIdsToPane = (entries, layout) => {
     if (value.content) {
       if ((1 > value.id) || assignedIds.includes(value.id)) {
         //id has got an assigned pane or pane contains an invalid id,
-        //cache it and find one later 
+        //cache it and find one later
         invalidIdKeys.push(key);
       } else {
         assignedIds.push(value.id);
@@ -221,7 +221,7 @@ export const useSplitFlowStore = defineStore('splitFlow', {
     },
   },
   actions: {
-    assignOrSwapPaneWithIds(payload) {
+    assignOrSwapPaneWithIds(payload, emitSpeciesChanged = true) {
       let sourceKey = findKeyWithId(this.customLayout, payload.source);
       let targetKey = findKeyWithId(this.customLayout, payload.target);
       if (targetKey) {
@@ -230,7 +230,9 @@ export const useSplitFlowStore = defineStore('splitFlow', {
       if (sourceKey) {
         this.customLayout[sourceKey].id = payload.target;
       }
-      this.updateSplitPanels();
+      if (emitSpeciesChanged) {
+        this.updateSplitPanels();
+      }
     },
     getAvailableTerms(apiLocation) {
       let terms = getAvailableTermsForSpecies();
@@ -255,7 +257,7 @@ export const useSplitFlowStore = defineStore('splitFlow', {
           });
       }
     },
-    updateActiveView(payload) {
+    updateActiveView(payload, emitSpeciesChanged = true) {
       this.activeView = payload.view;
       const customLayout = newLayoutWithOrigInfo(
         this.customLayout, this.activeView);
@@ -263,7 +265,9 @@ export const useSplitFlowStore = defineStore('splitFlow', {
       for (const [key, value] of Object.entries(customLayout)) {
         this.customLayout[key] = value;
       }
-      this.updateSplitPanels();
+      if (emitSpeciesChanged) {
+        this.updateSplitPanels();
+      }
     },
     setSplitter(payload) {
       if (this.splitters[payload.name])