@abi-software/mapintegratedvuer 1.7.1 → 1.8.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/mapintegratedvuer",
-  "version": "1.7.1",
+  "version": "1.8.0-beta.1",
   "license": "Apache-2.0",
   "scripts": {
     "serve": "vite --host --force",
@@ -50,11 +50,11 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/flatmapvuer": "1.7.2",
-    "@abi-software/map-side-bar": "2.6.2",
-    "@abi-software/map-utilities": "1.3.1",
+    "@abi-software/flatmapvuer": "^1.8.0-beta.0",
+    "@abi-software/map-side-bar": "^2.7.0-beta.0",
+    "@abi-software/map-utilities": "^1.4.0-beta.0",
     "@abi-software/plotvuer": "^1.0.3",
-    "@abi-software/scaffoldvuer": "1.7.1",
+    "@abi-software/scaffoldvuer": "^1.8.0-beta.3",
     "@abi-software/simulationvuer": "1.0.1",
     "@abi-software/sparc-annotation": "0.3.2",
     "@abi-software/svg-sprite": "^1.0.1",

package/src/App.vue

@@ -11,18 +11,21 @@
           :teleported=false
           >
             <div class="options-container">
-              <el-row class="row" :gutter="20">
+              <div class="row">
                 <el-button @click="saveSettings()" size="small">Save Settings</el-button>
                 <el-button @click="restoreSettings()" size="small">Restore Settings</el-button>
                 <el-button @click="getShareableURL()" size="small">Get Link</el-button>
-              </el-row>
-              <el-row class="row" :gutter="20">
+              </div>
+              <div class="row">
                 <el-button @click="setMultiFlatmap()" size="small">Set MultiFlatmap</el-button>
                 <el-button @click="setLegacyMultiFlatmap()" size="small">Set Legacy MultiFlatmap</el-button>
                 <el-button @click="setScaffold()" size="small">Set To Scaffold</el-button>
+                <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-row>
+                <el-button @click="toggleHighlightConnectedPaths()" size="small">Toggle Highlight Connected Paths</el-button>
+                <el-button @click="toggleHighlightDOIPaths()" size="small">Toggle Highlight DOI Paths</el-button>
+              </div>
             </div>
             <template #reference>
 
@@ -40,6 +43,7 @@
         :shareLink="shareLink"
         :useHelpModeDialog="true"
         :connectivityInfoSidebar="true"
+        :hoverHighlightOptions="hoverHighlightOptions"
         @updateShareLinkRequested="updateUUID"
         @isReady="viewerIsReady"
         @mapLoaded="mapIsLoaded"
@@ -77,13 +81,17 @@ export default {
       api: import.meta.env.VITE_API_LOCATION,
       mapSettings: [],
       startingMap: "AC",
-      ElIconSetting: shallowRef(ElIconSetting)
+      ElIconSetting: shallowRef(ElIconSetting),
+      hoverHighlightOptions: {
+        highlightConnectedPaths: true,
+        highlightDOIPaths: false,
+      },
     }
   },
   computed: {
     shareLink: function() {
       if (this.uuid)
-        return this.prefix +"?id=" + this.uuid;
+        return this.prefix +"#/?id=" + this.uuid;
       return this.prefix;
     },
     options: function() {
@@ -96,7 +104,6 @@ export default {
         flatmapAPI: import.meta.env.VITE_FLATMAPAPI_LOCATION,
         nlLinkPrefix: import.meta.env.VITE_NL_LINK_PREFIX,
         rootUrl: import.meta.env.VITE_ROOT_URL,
-        flatmapAPI2: import.meta.env.VITE_FLATMAPAPI_LOCATION2,
       }
     }
   },
@@ -166,9 +173,24 @@ export default {
         }
       );
     },
+    setWholebody: function() {
+      this.$refs.map.setCurrentEntry(
+        {
+          type: "Scaffold",
+          label: "Human",
+          isBodyScaffold: true
+        }
+      );
+    },
     setSearch: function() {
       this.$refs.map.openSearch([], "10.26275/1uno-tynt");
     },
+    toggleHighlightConnectedPaths: function () {
+      this.hoverHighlightOptions.highlightConnectedPaths = !this.hoverHighlightOptions.highlightConnectedPaths;
+    },
+    toggleHighlightDOIPaths: function () {
+      this.hoverHighlightOptions.highlightDOIPaths = !this.hoverHighlightOptions.highlightDOIPaths;
+    },
     mapIsLoaded: function(map) {
       console.log("map is loaded", map)
       // map.changeViewingMode('Annotation')
@@ -206,11 +228,15 @@ export default {
 </script>
 
 <style lang="scss">
+$button-container-size: 50px;
+$gap: 24px;
+
 #app {
   height:100%;
   width: 100%;
   position:absolute;
   font-family: "Asap",sans-serif;
+  background-color: #f5f7fa;
   --el-color-primary: #8300BF;
   --el-color-primary-light-7: #dab3ec;
   --el-color-primary-light-8: #e6ccf2;
@@ -222,14 +248,13 @@ body {
 }
 
 .map-app {
-  position:absolute;
-  height: calc(100% - 104px);
-  width:calc(100% - 54px);
-  margin-top:20px;
-  margin-left:26px;
-  margin-right:26px;
+  margin: 0 auto;
+  width: calc(100% - #{$gap * 2});
+  height: calc(100% - #{$button-container-size + $gap});
   border: solid 1px #dcdfe6;
   box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.06);
+  box-sizing: border-box;
+  position: relative;
 }
 
 .popover{
@@ -240,9 +265,16 @@ body {
 }
 
 .row {
-  margin-bottom: 5px;
-  &:last-child {
-    margin-bottom: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+
+  + .row {
+    margin-top: 12px;
+  }
+
+  .el-button + .el-button {
+    margin: 0;
   }
 }
 
@@ -250,7 +282,7 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
-  height:50px;
+  height: $button-container-size;
 }
 
 

package/src/components/DialogToolbarContent.vue

@@ -265,10 +265,23 @@ export default {
       failedSearch: undefined,
       activeViewRef: undefined,
       permalinkRef: undefined,
-      ElIconCopyDocument: shallowRef(ElIconCopyDocument)
+      ElIconCopyDocument: shallowRef(ElIconCopyDocument),
     }
   },
   methods: {
+    updateGlobalSettings: function(globalSettings) {
+      this.settingsStore.updateGlobalSettings(globalSettings)
+    },
+    setDisplayMarkerFlag: function(displayMarker) {
+      if (displayMarker !== undefined) {
+        let incomingSettings = { displayMarker };
+        const updatedSettings = this.settingsStore.getUpdatedGlobalSettingsKey(incomingSettings);
+        if (updatedSettings.includes('displayMarker')) {
+          this.settingsStore.updateGlobalSettings(incomingSettings);
+          EventBus.emit("markerUpdate");
+        }
+      }
+    },
     titleClicked: function(id) {
       this.$emit("titleClicked", id);
     },

package/src/components/MapContent.vue

@@ -27,7 +27,7 @@ import { useSettingsStore } from '../stores/settings';
 import { useSplitFlowStore } from '../stores/splitFlow';
 import { findSpeciesKey } from './scripts/utilities.js';
 import { MapSvgSpriteColor} from '@abi-software/svg-sprite';
-import { initialState } from "./scripts/utilities.js";
+import { initialState, getBodyScaffoldInfo } from "./scripts/utilities.js";
 import RetrieveContextCardMixin from "../mixins/RetrieveContextCardMixin.js"
 import {
   ElLoading as Loading
@@ -99,6 +99,17 @@ export default {
       type: Boolean,
       default: true,
     },
+    /**
+     * The options to highlight features and paths on maps and scaffolds
+     * when hover over the dataset cards on sidebar.
+     */
+    hoverHighlightOptions: {
+      type: Object,
+      default: () => ({
+        highlightConnectedPaths: false,
+        highlightDOIPaths: false,
+      }),
+    },
   },
   data: function () {
     return {
@@ -201,7 +212,7 @@ export default {
      */
     setCurrentEntry: async function(state) {
       if (state && state.type) {
-        if (state.type === "Scaffold" && state.url) {
+        if (state.type === "Scaffold" && (state.url || state.isBodyScaffold)) {
           //State for scaffold containing the following items:
           //  label - Setting the name of the dialog
           //  region - Which region/group currently focusing on
@@ -216,52 +227,67 @@ export default {
             state: state.state,
             viewUrl: state.viewUrl
           };
-          // Add content from scicrunch for the context card
-          const contextCardInfo = await this.retrieveContextCardFromUrl(state.url);
-          newView = {...newView, ...contextCardInfo};
+          if (state.isBodyScaffold) {
+            const data = await getBodyScaffoldInfo(this.options.sparcApi, state.label);
+            newView = { ...newView, ...data.datasetInfo, resource: data.url };
+          } else {
+            // Add content from scicrunch for the context card
+            const contextCardInfo = await this.retrieveContextCardFromUrl(state.url);
+            newView = { ...newView, ...contextCardInfo };
+          }
           this.$refs.flow.createNewEntry(newView);
         } else if (state.type === "MultiFlatmap") {
-          //State for scaffold containing the following items:
-          //  label - Setting the name of the dialog
-          //  taxo - taxo of species to set
-          //  biologicalSex - biological sex to be displayed (PATO)
-          //  organ - Target organ, flatmap will conduct a local search
-          //          using this
-
-          //Look for the key in the available species array,
-          //it will use the taxo and biologicalSex as hints.
-          const key = findSpeciesKey(state);
-          if (key) {
-            const currentState = this.getState();
-            if (currentState && currentState.entries) {
-              for (let i = 0; i < currentState.entries.length; i++) {
-                const entry =  currentState.entries[i];
-                if (entry.type === "MultiFlatmap") {
-                  entry.resource = key;
-                  entry.state = {species: key};
-                  if (state.organ || state.uuid) {
-                    entry.state.state = { searchTerm: state.organ, uuid: state.uuid };
-                    //if it contains an uuid, use the taxo to help identify if the uuid
-                    //is current
-                    if (state.uuid) entry.state.state.entry = state.taxo;
+          if (state.resource) {
+            //State for new multiflatmap containing the following items:
+            //  label - Setting the name of the dialog
+            //  resource - the url to metadata
+            //  state - state to restore (viewport)
+            const newView = {
+              type: state.type,
+              resource: state.resource,
+              state: state.state,
+              label: state.label
+            };
+            this.$refs.flow.createNewEntry(newView);
+          } else {
+            //State for multiflatmap containing the following items:
+            //  taxo - taxo of species to set
+            //  biologicalSex - biological sex to be displayed (PATO)
+            //  organ - Target organ, flatmap will conduct a local search
+            //          using this
+  
+            //Look for the key in the available species array,
+            //it will use the taxo and biologicalSex as hints.
+            const key = findSpeciesKey(state);
+            if (key) {
+              const currentState = this.getState();
+              if (currentState && currentState.entries) {
+                for (let i = 0; i < currentState.entries.length; i++) {
+                  const entry = currentState.entries[i];
+                  if (entry.type === "MultiFlatmap") {
+                    entry.resource = key;
+                    entry.state = { species: key };
+                    if (state.organ || state.uuid) {
+                      entry.state.state = { searchTerm: state.organ, uuid: state.uuid };
+                      //if it contains an uuid, use the taxo to help identify if the uuid
+                      //is current
+                      if (state.uuid) entry.state.state.entry = state.taxo;
+                    }
+                    this.$refs.flow.setState(currentState);
+                    //Do not create a new entry, instead set the multiflatmap viewer
+                    //to the primary slot
+                    this.$refs.flow.setIdToPrimaryPane(entry.id);
+                    break;
                   }
-                  this.$refs.flow.setState(currentState);
-                  //Do not create a new entry, instead set the multiflatmap viewer
-                  //to the primary slot
-                  this.$refs.flow.setIdToPrimaryPane(entry.id);
-                  break;
                 }
               }
             }
           }
-        }
-        else if (state.type === "Flatmap") {
-          //State for scaffold containing the following items:
+        } else if (state.type === "Flatmap") {
+          //State for flatmap containing the following items:
           //  label - Setting the name of the dialog
-          //  region - Which region/group currently focusing on
           //  resource - the url to metadata
           //  state - state to restore (viewport)
-          //  viewUrl - relative path of the view file to metadata
           const newView = {
             type: state.type,
             resource: state.resource,
@@ -325,7 +351,6 @@ export default {
       this.options.algoliaId ? this.settingsStore.updateAlgoliaId(this.options.algoliaId) : null
       this.options.pennsieveApi ? this.settingsStore.updatePennsieveApi(this.options.pennsieveApi) : null
       this.options.flatmapAPI ? this.settingsStore.updateFlatmapAPI(this.options.flatmapAPI) : null,
-      this.options.flatmapAPI2 ? this.settingsStore.updateFlatmapAPI2(this.options.flatmapAPI2) : null,
       this.options.nlLinkPrefix ? this.settingsStore.updateNLLinkPrefix(this.options.nlLinkPrefix) : null
       this.options.rootUrl ? this.settingsStore.updateRootUrl(this.options.rootUrl) : null
     }
@@ -358,6 +383,7 @@ export default {
     this.settingsStore.updateUseHelpModeDialog(this.useHelpModeDialog);
     this.settingsStore.updateConnectivityInfoSidebar(this.connectivityInfoSidebar);
     this.settingsStore.updateAnnotationSidebar(this.annotationSidebar);
+    this.settingsStore.updateHoverHighlightOptions(this.hoverHighlightOptions);
   }
 }
 

package/src/components/SplitFlow.vue

@@ -42,6 +42,7 @@
           @contextUpdate="contextUpdate($event)"
           @datalink-clicked="datalinkClicked($event)"
           @show-connectivity="onShowConnectivity"
+          @show-reference-connectivities="onShowReferenceConnectivities"
           @connectivity-component-click="onConnectivityComponentClick"
         />
         <SplitDialog
@@ -306,6 +307,9 @@ export default {
         offset: activeView === 'singlepanel' || activeView === '2horpanel'
       });
     },
+    onShowReferenceConnectivities: function (refSource) {
+      EventBus.emit('show-reference-connectivities', refSource);
+    },
     onConnectivityComponentClick: function (data) {
       EventBus.emit('connectivity-component-click', {
         connectivityInfo: this.connectivityInfo,
@@ -315,7 +319,8 @@ export default {
     hoverChanged: function (data) {
       const hoverAnatomies = data && data.anatomy ? data.anatomy : [];
       const hoverOrgans = data && data.organs ? data.organs : [];
-      this.settingsStore.updateHoverFeatures(hoverAnatomies, hoverOrgans);
+      const hoverDOI = data && data.doi ? data.doi : '';
+      this.settingsStore.updateHoverFeatures(hoverAnatomies, hoverOrgans, hoverDOI);
       EventBus.emit("hoverUpdate");
     },
     searchChanged: function (data) {
@@ -558,11 +563,7 @@ export default {
       if (id === 3) EventBus.emit('annotation-close', { tabClose: true });
     },
     resetActivePathways: function () {
-      const containerEl = this.$el;
-      const activeCanvas = containerEl.querySelector('.maplibregl-canvas');
-      if (activeCanvas) {
-        activeCanvas.click();
-      }
+      this.hoverChanged(undefined);
     },
   },
   created: function () {
@@ -650,7 +651,7 @@ export default {
         PENNSIEVE_API_LOCATION: this.settingsStore.pennsieveApi,
         NL_LINK_PREFIX: this.settingsStore.nlLinkPrefix,
         ROOT_URL: this.settingsStore.rootUrl,
-        FLATMAPAPI_LOCATION: this.settingsStore.flatmapAPI2, // temporary
+        FLATMAPAPI_LOCATION: this.settingsStore.flatmapAPI,
       };
     },
     entries: function() {

package/src/components/viewers/Flatmap.vue

@@ -183,7 +183,7 @@ export default {
       this.flatmapMarkerUpdate(undefined);
     });
     EventBus.on("hoverUpdate", () => {
-      this.mapHoverHighlight(this.$refs.flatmap.mapImp);
+      this.mapHoverHighlight();
     });
     EventBus.on('show-connectivity', (payload) => {
       const { featureIds, offset } = payload;
@@ -195,6 +195,12 @@ export default {
         });
       }
     });
+    EventBus.on('show-reference-connectivities', (payload) => {
+      const currentFlatmap = this.$refs.flatmap;
+      if (currentFlatmap) {
+        currentFlatmap.showConnectivitiesByReference(payload);
+      }
+    });
   },
 };
 </script>

package/src/components/viewers/MultiFlatmap.vue

@@ -471,6 +471,15 @@ export default {
       }
     });
 
+    EventBus.on('show-reference-connectivities', (payload) => {
+      if (this.flatmapReady && this.$refs.multiflatmap) {
+        const currentFlatmap = this.$refs.multiflatmap.getCurrentFlatmap();
+        if (currentFlatmap) {
+          currentFlatmap.showConnectivitiesByReference(payload);
+        }
+      }
+    });
+
     EventBus.on('connectivity-component-click', (payload) => {
       this.showConnectivityTooltips(payload);
     });
@@ -482,7 +491,7 @@ export default {
     });
     EventBus.on("hoverUpdate", () => {
       if (this.flatmapReady) {
-        this.mapHoverHighlight(this.$refs.multiflatmap.getCurrentFlatmap().mapImp);
+        this.mapHoverHighlight();
       }
     });
   },

package/src/components/viewers/Scaffold.vue

@@ -201,7 +201,7 @@ export default {
       }
     },
     markerLabels: function () {
-      return this.settingsStore.numberOfDatasetsForFacets;
+      return this.settingsStore.globalSettings.displayMarker ? this.settingsStore.numberOfDatasetsForFacets : {};
     },
   },
   data: function () {
@@ -219,7 +219,7 @@ export default {
     });
     EventBus.on("hoverUpdate", () => {
       if (this.scaffoldLoaded) {
-        this.mapHoverHighlight(this.$refs.scaffold);
+        this.mapHoverHighlight();
       }
     });
   },

package/src/mixins/ContentMixin.js

@@ -458,23 +458,73 @@ export default {
         this.endHelp();
       }
     },
-    mapHoverHighlight: function (mapImp) {
+    getConnectivitiesByDOI: async function (hoverDOI) {
+      const currentFlatmap = this.$refs.multiflatmap.getCurrentFlatmap();
+      const response = await currentFlatmap.searchConnectivitiesByReference(hoverDOI);
+      return response;
+    },
+    highlightAnatomies: async function (mapImp, hoverAnatomies, hoverDOI) {
+      const itemsToHighlight = [...hoverAnatomies];
+      const hoverHighlightOptions = this.settingsStore.hoverHighlightOptions;
+
+      // to highlight connected paths
+      if (hoverHighlightOptions.highlightConnectedPaths) {
+        const connectionsFromFeatures = await mapImp.queryPathsForFeatures(hoverAnatomies);
+        if (connectionsFromFeatures) {
+          itemsToHighlight.push(...connectionsFromFeatures);
+        }
+      }
+
+      // to highlight related paths from reference DOI
+      if (hoverHighlightOptions.highlightDOIPaths) {
+        const connectionsFromDOI = await this.getConnectivitiesByDOI(hoverDOI);
+        if (connectionsFromDOI) {
+          itemsToHighlight.push(...connectionsFromDOI);
+        }
+      }
+
+      return itemsToHighlight;
+    },
+    mapHoverHighlight: function () {
       if (this.visible) {
         const hoverAnatomies = this.settingsStore.hoverAnatomies;
         const hoverOrgans = this.settingsStore.hoverOrgans;
+        const hoverDOI = this.settingsStore.hoverDOI;
+        let mapImp = null;
+        let scaffold = null;
+
+        if (this.flatmapRef) {
+          mapImp = this.$refs.flatmap.mapImp;
+        }
+
+        if (this.multiflatmapRef) {
+          mapImp = this.$refs.multiflatmap.getCurrentFlatmap().mapImp;
+        }
+
+        if (this.scaffoldRef) {
+          scaffold = this.$refs.scaffold;
+        }
+
+        // reset
+        if (mapImp) {
+          mapImp.clearSearchResults();
+        }
+
         if (hoverAnatomies.length || hoverOrgans.length) {
           clearTimeout(this.hoverDelay);
           if (this.multiflatmapRef || this.flatmapRef) {
-            mapImp?.zoomToFeatures(hoverAnatomies, { noZoomIn: true });
+            this.highlightAnatomies(mapImp, hoverAnatomies, hoverDOI).then((itemsToHighlight) => {
+              mapImp.selectFeatures(itemsToHighlight);
+            });
           } else if (this.scaffoldRef) {
-            mapImp?.changeHighlightedByName(hoverOrgans, "", false);
+            scaffold?.changeHighlightedByName(hoverOrgans, "", false);
           }
         } else {
           this.hoverDelay = setTimeout(() => {
             if (this.multiflatmapRef || this.flatmapRef) {
               mapImp?.clearSearchResults();
             } else if (this.scaffoldRef) {
-              mapImp?.changeHighlightedByName(hoverOrgans, "", false);
+              scaffold?.changeHighlightedByName(hoverOrgans, "", false);
             }
           }, 500);
         }

package/src/mixins/DynamicMarkerMixin.js

@@ -40,7 +40,7 @@ export default {
 
       if (flatmapImp) {
         // Set the dataset markers
-        let markers = this.settingsStore.markers;
+        let markers = this.settingsStore.globalSettings.displayMarker ? this.settingsStore.markers : [];
         markers = removeDuplicates(markers);
         let fmMarkers = this.removeMarkersNotOnFlatmap(flatmapImp, markers);
         flatmapImp.clearMarkers();

package/src/stores/settings.js

@@ -13,7 +13,6 @@ export const useSettingsStore = defineStore('settings', {
       pennsieveApi: undefined,
       flatmapAPI: undefined,
       nlLinkPrefix: undefined,
-      flatmapAPI2: "https://mapcore-demo.org/curation/flatmap/",
       mapManager: undefined,
       rootUrl: undefined,
       facets: { species: [], gender: [], organ: [] },
@@ -21,6 +20,7 @@ export const useSettingsStore = defineStore('settings', {
       markers: [],
       hoverAnatomies: [],
       hoverOrgans: [],
+      hoverDOI: '',
       featuredMarkers: [],
       featuredMarkerIdentifiers: [],
       featuredMarkerDois: [],
@@ -30,6 +30,13 @@ export const useSettingsStore = defineStore('settings', {
       useHelpModeDialog: false,
       connectivityInfoSidebar: true,
       annotationSidebar: true,
+      hoverHighlightOptions: {
+        highlightConnectedPaths: false,
+        highlightDOIPaths: false,
+      },
+      globalSettings: {
+        displayMarker: true,
+      },
     }
   },
   getters: {
@@ -42,6 +49,16 @@ export const useSettingsStore = defineStore('settings', {
       );
       return state.featuredMarkerDois[index];
     },
+    getUpdatedGlobalSettingsKey: state => settings => {
+      let updatedSettings = [];
+      for (const [key, value] of Object.entries(settings)) {
+        const attribute = state.globalSettings[key];
+        if (!attribute || (attribute !== value)) {
+          updatedSettings.push(key);
+        }
+      }
+      return updatedSettings;
+    },
   },
   actions: {
     updateShareLink(newLink) {
@@ -65,9 +82,6 @@ export const useSettingsStore = defineStore('settings', {
     updateFlatmapAPI(flatmapAPI) {
       this.flatmapAPI = flatmapAPI;
     },
-    updateFlatmapAPI2(flatmapAPI2) {
-      this.flatmapAPI2 = flatmapAPI2;
-    },
     updateMapManager(mapManager) {
       this.mapManager = mapManager;
     },
@@ -80,9 +94,10 @@ export const useSettingsStore = defineStore('settings', {
     updateMarkers(markers) {
       this.markers = markers;
     },
-    updateHoverFeatures(anatomies, organs) {
+    updateHoverFeatures(anatomies, organs, doi) {
       this.hoverAnatomies = anatomies;
       this.hoverOrgans = organs;
+      this.hoverDOI = doi;
     },
     updateFeatured(datasetIdentifiers) {
       this.featuredMarkerIdentifiers = new Array(datasetIdentifiers.length);
@@ -166,5 +181,13 @@ export const useSettingsStore = defineStore('settings', {
     updateAnnotationSidebar(annotationSidebar) {
       this.annotationSidebar = annotationSidebar;
     },
+    updateHoverHighlightOptions(hoverHighlightOptions) {
+      this.hoverHighlightOptions = hoverHighlightOptions;
+    },
+    updateGlobalSettings(globalSettings) {
+      for (const [key, value] of Object.entries(globalSettings)) {
+        this.globalSettings[key] = value;
+      }
+    },
   }
 });