@abi-software/mapintegratedvuer 1.3.4-beta.1 → 1.3.4-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/mapintegratedvuer",
-  "version": "1.3.4-beta.1",
+  "version": "1.3.4-beta.3",
   "license": "Apache-2.0",
   "scripts": {
     "serve": "vite --host --force",
@@ -50,11 +50,11 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/flatmapvuer": "1.3.2-beta.1",
+    "@abi-software/flatmapvuer": "^1.3.2-beta.2",
     "@abi-software/map-side-bar": "^2.3.1",
     "@abi-software/map-utilities": "^1.0.0",
     "@abi-software/plotvuer": "1.0.0",
-    "@abi-software/scaffoldvuer": "^1.3.2",
+    "@abi-software/scaffoldvuer": "^1.3.3-beta.0",
     "@abi-software/simulationvuer": "1.0.0",
     "@abi-software/svg-sprite": "1.0.0",
     "@element-plus/icons-vue": "^2.3.1",

package/src/App.vue

@@ -99,6 +99,9 @@ export default {
     }
   },
   methods: {
+    changeViewingMode: function(modeName) {
+      this.$refs.map.changeViewingMode(modeName);
+    },
     saveSettings: function() {
       this.mapSettings.push(this.$refs.map.getState());
     },
@@ -166,6 +169,7 @@ export default {
     },
     mapIsReady: function() {
       console.log("map is ready")
+      // this.changeViewingMode('Annotation')
     },
     parseQuery: function () {
       this.$router.isReady().then(() => {

package/src/components/MapContent.vue

@@ -266,11 +266,6 @@ export default {
      */
     flowMounted: function () {
       this._flowMounted = true;
-      /**
-       * This event emit when the component is mounted.
-       */
-      this.$emit("isReady");
-
       // GA Tagging
       // Page view tracking for maps' buttons click on portal
       // category: AC | FC | WholeBody
@@ -280,6 +275,9 @@ export default {
         'category': this.startingMap
       });
     },
+    changeViewingMode: function(modeName) {
+      EventBus.emit("changeViewingMode", modeName);
+    },
   },
   computed: {
     ...mapStores(useSettingsStore, useSplitFlowStore),
@@ -308,6 +306,7 @@ export default {
       this.options.rootUrl ? this.settingsStore.updateRootUrl(this.options.rootUrl) : null
     }
     this.splitFlowStore?.reset();
+    this.splitFlowStore?.getAvailableTerms(this.settingsStore.sparcApi);
   },
   mounted: async function() {
     EventBus.on("updateShareLinkRequested", () => {
@@ -325,6 +324,12 @@ export default {
     if (!this.state) {
       this.initialState = await initialState(this.startingMap, this.options.sparcApi);
     }
+    EventBus.on('mapReady', () => {
+      /**
+       * This event emit when the component is mounted and map is ready.
+       */
+      if (this._flowMounted) this.$emit("isReady");
+    });
     this.isReady = true;
     this.settingsStore.updateUseHelpModeDialog(this.useHelpModeDialog);
     this.settingsStore.updateConnectivityInfoSidebar(this.connectivityInfoSidebar);

package/src/components/viewers/Flatmap.vue

@@ -100,10 +100,10 @@ export default {
       let provClone = {id: this.entry.id, prov: this.getFlatmapImp().provenance}; //create clone of provenance and add id
       EventBus.emit("mapImpProv", provClone); // send clone to context card
       this.$emit("flatmap-provenance-ready", provClone);
-      this.getAvailableTerms();
       if (this.entry.resource === "FunctionalConnectivity"){
         this.flatmapReadyForMarkerUpdates(flatmap);
       }
+      EventBus.emit("mapReady", flatmap);
     },
     onPathwaySelectionChanged: function (data) {
       const { label, property, checked, selectionsTitle } = data;
@@ -159,6 +159,9 @@ export default {
         flatmap.clearSearchResults();
       }
     },
+    changeViewingMode: function (modeName) {
+      this.$refs.flatmap.changeViewingMode(modeName);
+    },
   },
   computed: {
     facetSpecies() {
@@ -166,7 +169,6 @@ export default {
     },
   },
   mounted: function() {
-    this.getAvailableTerms();
     EventBus.on("markerUpdate", () => {
       this.flatmapMarkerUpdate(undefined);
     });
@@ -183,6 +185,9 @@ export default {
         });
       }
     });
+    EventBus.on("changeViewingMode", (modeName) => {
+      this.changeViewingMode(modeName);
+    });
   },
 };
 </script>

package/src/components/viewers/MultiFlatmap.vue

@@ -329,6 +329,7 @@ export default {
         const flatmapImp = flatmap.mapImp;
         this.flatmapMarkerUpdate(flatmapImp);
         this.updateProvCard();
+        EventBus.emit("mapReady", flatmap);
       }
     },
     getFlatmapImp: function () {
@@ -404,6 +405,13 @@ export default {
       }
       return false;
     },
+    /**
+     * Change the view mode of the current flatmap
+     */
+    changeViewingMode: function (modeName) {
+      const flatmap = this.$refs.multiflatmap.getCurrentFlatmap();
+      flatmap.changeViewingMode(modeName);
+    },
   },
   computed: {
     facetSpecies() {
@@ -427,9 +435,7 @@ export default {
     },
   },
   mounted: function () {
-    this.getAvailableTerms();
     this.getFeaturedDatasets();
-
     EventBus.on('show-connectivity', (payload) => {
       const { featureIds, offset } = payload;
       if (this.flatmapReady && this.$refs.multiflatmap) {
@@ -453,6 +459,11 @@ export default {
         this.mapHoverHighlight(this.$refs.multiflatmap.getCurrentFlatmap().mapImp);
       }
     });
+    EventBus.on("changeViewingMode", (modeName) => {
+      if (this.flatmapReady) {
+        this.changeViewingMode(modeName);
+      }
+    });
   },
 };
 </script>
@@ -480,7 +491,7 @@ export default {
     z-index: 1;
     div {
       scale: 0.5;
-      transform: translate(45px, -7px);
+      width: 0;
     }
   }
 }

package/src/components/viewers/Scaffold.vue

@@ -139,6 +139,7 @@ export default {
         this.$refs.scaffold.toggleSyncControl(this.splitFlowStore.globalCallback, rotation);
         if (this.splitFlowStore.syncMode) this.$refs.scaffold.fitWindow();
       }
+      EventBus.emit("mapReady", this.$refs.scaffold);
     },
     requestSynchronisedEvent: function (flag) {
       if (this.scaffoldLoaded) {
@@ -183,6 +184,12 @@ export default {
     updateWithViewUrl: function(viewUrl) {
       this.$refs.scaffold.updateViewURL(viewUrl);
     },
+    /**
+     * Change the view mode of the current scaffold
+     */
+    changeViewingMode: function (modeName) {
+      this.$refs.scaffold.changeViewingMode(modeName);
+    },
   },
   computed: {
     warningMessage: function() {
@@ -214,6 +221,11 @@ export default {
         this.mapHoverHighlight(this.$refs.scaffold);
       }
     });
+    EventBus.on("changeViewingMode", (modeName) => {
+      if (this.scaffoldLoaded) {
+        this.changeViewingMode(modeName);
+      }
+    });
   },
 };
 </script>

package/src/mixins/ContentMixin.js

@@ -1,5 +1,4 @@
 import {
-  getAvailableTermsForSpecies,
   getInteractiveAction,
   getNerveNames,
   getParentsRegion,
@@ -35,6 +34,9 @@ export default {
   },
   computed: {
     ...mapStores(useSettingsStore, useSplitFlowStore),
+    idNamePair() {
+      return this.splitFlowStore.idNamePair;
+    },
     syncMode() {
       return this.splitFlowStore.syncMode;
     },
@@ -397,31 +399,6 @@ export default {
     requestSynchronisedEvent: function () {
       return;
     },
-    getAvailableTerms: function () {
-      //Use the default list of uberons before we get the list from
-      //the api
-      let terms = getAvailableTermsForSpecies();
-      for (let i = 0; i < terms.length; i++) {
-        this.idNamePair[terms[i].id] = terms[i].name;
-      }
-      if (this.apiLocation) {
-        if (this._controller) this._controller.abort();
-        this._controller = new AbortController();
-        let signal = this._controller.signal;
-        fetch(`${this.apiLocation}get-organ-curies`, {
-          signal,
-        })
-          .then(response => response.json())
-          .then(data => {
-            this._controller = undefined;
-            data.uberon.array.forEach(pair => {
-              this.idNamePair[pair.id.toUpperCase()] =
-                pair.name.charAt(0).toUpperCase() + pair.name.slice(1);
-            });
-            return;
-          });
-      }
-    },
     flatmapMarkerUpdate() {
       return;
     },
@@ -536,7 +513,6 @@ export default {
       multiflatmapRef: null,
       flatmapRef: null,
       scaffoldRef: null,
-      idNamePair: {},
       scaffoldLoaded: false,
       isInHelp: false,
       hoverDelay: undefined

package/src/stores/index.js

@@ -8,7 +8,7 @@ import { defineStore } from 'pinia'
 export const useMainStore = defineStore('main', {
   state: () => ({
     userProfile: {
-      token: ''
+      token: 'eyJraWQiOiJ1UUMzRDl1RGpTTlhoNzZJRW1ldExcL05uOGRMazFyaU1LWSt5T2ZTUytHaz0iLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOiJjNDhmZDkyOS0wYjIwLTQxNjEtOTEyZi03NTBmMGZiY2VkNWQiLCJ0b2tlbl91c2UiOiJhY2Nlc3MiLCJzY29wZSI6Im9wZW5pZCIsImF1dGhfdGltZSI6MTcyMzA3ODgyOCwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfRlZMaEo3Q1FBIiwiZXhwIjoxNzIzMDgyNDI4LCJpYXQiOjE3MjMwNzg4MjgsInZlcnNpb24iOjIsImp0aSI6ImZiZDZiYmU5LWQwNjgtNGI1Ni05ZTcwLTJkZTJhMmFhNTdjYSIsImNsaWVudF9pZCI6IjcwM2xtNWQ4b2RjY3UyMXBhZ2NmamtlYWVhIiwidXNlcm5hbWUiOiJjNDhmZDkyOS0wYjIwLTQxNjEtOTEyZi03NTBmMGZiY2VkNWQifQ.QbLut-N287n6cPFl8KLytSsyv6OREwS30Xy_ydc-g5tOKItmAKry40MWQTDJNTXj8qetxn-dDsnvlwPm9Bf-L6cgKQcBRdKfTQ551PGLhkoSbCJYPFD7O1HRcf3WAdOU1uqmlSoQ-qlvX0r3GfYGgqctWghK4SmZyI6IsIe2-c6yl_A0mJDUwOL0Hfv7TKb0i_bGX-cxnDnGP0GJC8Szp4497PXb9iugbPosj-VWHmS_gKNt4SaByiUx0jmtfzCODMMjCjVNuZinc65xd1obPxiIuFPozLw2Ju6st7ShPz8iBG_r_uj9pfxiHSBEZDMvA4fMT9J_3CspVqs5iI5YYw'
     },
   }),
   getters: {

package/src/stores/splitFlow.js

@@ -1,4 +1,7 @@
 import { defineStore } from 'pinia';
+import {
+  getAvailableTermsForSpecies,
+} from "../components/SimulatedData.js";
 
 /* eslint-disable no-alert, no-console */
 const presetLayouts = (view) => {
@@ -130,6 +133,7 @@ const findKeyWithId = (layout, id) => {
 const getOriginalState = () => {
   return {
     activeView: "singlepanel",
+    idNamePair: {},
     viewIcons: [
       { icon: "singlepanel", name: "Single view", min: 1 },
       { icon: "2horpanel", name: "Horizontal split", min: 2 },
@@ -195,6 +199,30 @@ export const useSplitFlowStore = defineStore('splitFlow', {
         this.customLayout[sourceKey].id = payload.target;
       }
     },
+    getAvailableTerms(apiLocation) {
+      let terms = getAvailableTermsForSpecies();
+      for (let i = 0; i < terms.length; i++) {
+        this.idNamePair[terms[i].id] = terms[i].name;
+      }
+      if (apiLocation) {
+        if (this._controller) this._controller.abort();
+        this._controller = new AbortController();
+        let signal = this._controller.signal;
+        console.log("getAvailableTerms")
+        fetch(`${apiLocation}get-organ-curies`, {
+          signal,
+        })
+          .then(response => response.json())
+          .then(data => {
+            this._controller = undefined;
+            data.uberon.array.forEach(pair => {
+              this.idNamePair[pair.id.toUpperCase()] =
+                pair.name.charAt(0).toUpperCase() + pair.name.slice(1);
+            });
+            return;
+          });
+      }
+    },
     toggleGlobalCallback(flag) {
       this.globalCallback = flag;
     },