@abi-software/mapintegratedvuer 1.9.2 → 1.9.3-beta.0

package/src/components/SplitDialog.vue

@@ -51,7 +51,6 @@ export default {
       styles: { },
       query: "",
       filter: [],
-      target: [],
     }
   },
   methods: {
@@ -217,11 +216,14 @@ export default {
       // mix connectivites of available maps
       if (uuids.length) {
         this.connectivitiesStore.updateActiveConnectivityKeys(uuids);
+        
         const uniqueConnectivities = this.connectivitiesStore.getUniqueConnectivitiesByKeys;
-
         EventBus.emit("connectivity-knowledge", {
           data: uniqueConnectivities
         });
+
+        const uniqueFilters = this.connectivitiesStore.getUniqueFilterOptionsByKeys;
+        EventBus.emit("connectivity-filter-options", uniqueFilters);
       } else {
         if (sckanVersion) {
           EventBus.emit("connectivity-knowledge", {
@@ -239,10 +241,17 @@ export default {
       const featureIds = searchResult.__featureIds || searchResult.featureIds;
       featureIds.forEach((id) => {
         const annotation = flatmap.mapImp.annotation(id);
-        if (
-          annotation.label?.toLowerCase().includes(term.toLowerCase()) &&
-          annotation.models && !ids.includes(annotation.models)
-        ) {
+        const compareRanges = [
+          annotation.id,
+          annotation.name,
+          annotation.label,
+          annotation.models,
+          annotation.source
+        ];
+        const isMatched = compareRanges.some((item) => {
+          return item && item.toLowerCase().includes(term.toLowerCase())
+        });
+        if (isMatched && annotation.models && !ids.includes(annotation.models)) {
           ids.push(annotation.models);
         }
       });
@@ -250,8 +259,7 @@ export default {
     },
     connectivityQueryFilter: async function (data) {
       const activeContents = this.getActiveContents();
-      let searchResults = [];
-      let searchState = '';
+      let searchOrders = [], searchHighlights = [], searchResults = [];
 
       for (const activeContent of activeContents) {
         const viewer = activeContent.$refs.viewer;
@@ -267,55 +275,79 @@ export default {
               currentFlatmap = _currentFlatmap;
             }
           }
-
           if (flatmap && flatmap.mapImp) {
             currentFlatmap = flatmap;
           }
 
-          const uniqueConnectivities = this.connectivitiesStore.getUniqueConnectivitiesByKeys;
-
+          const uniqueFilters = this.connectivitiesStore.getUniqueFilterOptionsByKeys;
+          const uniqueFilterSources = this.connectivitiesStore.getUniqueFilterSourcesByKeys;
           if (currentFlatmap && currentFlatmap.$el.checkVisibility()) {
-            let payload = {
-              state: "default",
-              data: [...uniqueConnectivities],
-            };
-
+            let results = this.connectivitiesStore.getUniqueConnectivitiesByKeys;
             if (data) {
+              this.query = data.query;
+              let filters = {}
+              data.filter.forEach((item) => {
+                const facetKey = item.facetPropPath.split('.').pop();;
+                if (!(facetKey in filters)) {
+                  filters[facetKey] = [];
+                }
+                const matchedFilter = uniqueFilters.find(filter => filter.key.includes(facetKey));
+                if (matchedFilter) {
+                  matchedFilter.children.forEach((child) => {
+                    if (child.label === item.facet && child.key) {
+                      const childKey = child.key.split('.').pop();
+                      filters[facetKey].push(childKey);
+                    }
+                  });
+                }
+              });
+              let ids = []
+              for (const [key, value] of Object.entries(filters)) {
+                value.forEach((v) => ids.push(...uniqueFilterSources[key][v]));
+              }
+              this.filter = [...new Set(ids)];
               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 = {};
+              let options = {};
               const searchTerms = this.query.split(",").map((term) => term.trim());
+              const nestedIds = [];
               for (let index = 0; index < searchTerms.length; index++) {
-                prom1.push(this.getSearchedId(currentFlatmap, searchTerms[index]));
+                nestedIds.push(this.getSearchedId(currentFlatmap, searchTerms[index]));
               }
-              const nestedIds = await Promise.all(prom1);
               const ids = [...new Set(nestedIds.flat())];
-              let paths = await currentFlatmap.retrieveConnectedPaths(ids, options);
-              paths = [...ids, ...paths.filter((path) => !ids.includes(path))];
-              let results = uniqueConnectivities.filter((item) => paths.includes(item.id));
-              payload.data = results;
+              searchOrders.push(...ids);
+              const paths = await currentFlatmap.retrieveConnectedPaths(ids, options);
+              searchHighlights.push(...paths);
+              results = results.filter((item) => paths.includes(item.id));
             }
-
-            searchState = payload.state;
-            searchResults = [...searchResults, ...payload.data];
+            if (this.filter.length) {
+              searchHighlights.push(...this.filter);
+              results = results.filter((item) => this.filter.includes(item.id));
+            }
+            searchResults.push(...results);
           }
         }
       }
 
-      const uniqueResults = Array.from(
+      const uniqueOrders = [...new Set(searchOrders)];
+      const uniqueHighlights = [...new Set(searchHighlights)];
+      let uniqueResults = Array.from(
         new Map(searchResults.map((item) => [item.id, item])).values()
       );
+      // Ensure that the results always show search items first
+      // and the rest ordered by alphabetical order
+      uniqueResults = [
+        ...uniqueResults.filter((r) => uniqueOrders.includes(r.id)),
+        ...uniqueResults.filter((r) => !uniqueOrders.includes(r.id))
+      ];
 
       const connectivitiesPayload = {
-        state: searchState,
+        highlight: uniqueHighlights,
         data: uniqueResults,
       };
 

package/src/components/SplitFlow.vue

@@ -28,6 +28,7 @@
           :createData="createData"
           :connectivityEntry="connectivityEntry"
           :connectivityKnowledge="connectivityKnowledge"
+          :filterOptions="filterOptions"
           @tabClicked="onSidebarTabClicked"
           @tabClosed="onSidebarTabClosed"
           @actionClick="actionClick"
@@ -44,8 +45,9 @@
           @show-connectivity="onShowConnectivity"
           @show-reference-connectivities="onShowReferenceConnectivities"
           @connectivity-hovered="onConnectivityHovered"
-          @connectivity-explorer-clicked="onConnectivityExplorerClicked"
+          @connectivity-collapse-change="onConnectivityCollapseChange"
           @connectivity-source-change="onConnectivitySourceChange"
+          @connectivity-item-close="onConnectivityItemClose"
         />
         <SplitDialog
           :entries="entries"
@@ -118,6 +120,7 @@ export default {
       sideBarVisibility: true,
       startUp: true,
       search: '',
+      expanded: '',
       filterTriggered: false,
       availableFacets: [],
       connectivityEntry: [],
@@ -131,6 +134,7 @@ export default {
       connectivityHighlight: [],
       connectivityKnowledge: [],
       connectivityExplorerClicked: [], // to support multi views
+      filterOptions: [],
     }
   },
   watch: {
@@ -139,16 +143,25 @@ export default {
         if (value) {
           if (!this._externalStateSet) this.setState(value);
           this._externalStateSet = true;
+          this.updateGlobalSettingsFromState(value);
         }
       },
       immediate: true,
     },
+    connectivityHighlight: {
+      handler: function () {
+        this.hoverChanged({ tabType: 'connectivity' });
+      },
+    },
   },
   methods: {
-    onConnectivityExplorerClicked: function (payload) {
-      this.search = payload.id
+    onConnectivityCollapseChange: function (payload) {
+      this.expanded = payload.id
       this.onDisplaySearch({ term: payload.id }, false, true);
     },
+    onConnectivityItemClose: function () {
+      EventBus.emit('connectivity-item-close');
+    },
     /**
      * Callback when an action is performed (open new dialogs).
      */
@@ -302,13 +315,15 @@ export default {
      * @arg featureIds
      */
     onShowConnectivity: function (featureIds) {
-      const splitFlowState = this.splitFlowStore.getState();
-      const activeView = splitFlowState?.activeView || '';
-      // offset sidebar only on singlepanel and 2horpanel views
-      EventBus.emit('show-connectivity', {
-        featureIds: featureIds,
-        offset: activeView === 'singlepanel' || activeView === '2horpanel'
-      });
+      if (featureIds.length) {
+        const splitFlowState = this.splitFlowStore.getState();
+        const activeView = splitFlowState?.activeView || '';
+        // offset sidebar only on singlepanel and 2horpanel views
+        EventBus.emit('show-connectivity', {
+          featureIds: featureIds,
+          offset: activeView === 'singlepanel' || activeView === '2horpanel'
+        });
+      }
     },
     onShowReferenceConnectivities: function (refSource) {
       EventBus.emit('show-reference-connectivities', refSource);
@@ -322,22 +337,18 @@ export default {
     },
     hoverChanged: function (data) {
       let hoverAnatomies = [], hoverOrgans = [], hoverDOI = '', hoverConnectivity = [];
-      if (data) {
-        if (data.type === 'dataset') {
-          hoverAnatomies = data.anatomy ? data.anatomy : [];
-          hoverOrgans = data.organs ? data.organs : [];
-          hoverDOI = data.doi ? data.doi : '';
-        } else if (data.type === 'connectivity') {
-          hoverConnectivity = data.id ? [data.id] : [];
-        }
-      } else {
-        hoverConnectivity = this.connectivityHighlight;
+      if (data.tabType === 'dataset') {
+        hoverAnatomies = data.anatomy ? data.anatomy : [];
+        hoverOrgans = data.organs ? data.organs : [];
+        hoverDOI = data.doi ? data.doi : '';
+      } else if (data.tabType === 'connectivity') {
+        hoverConnectivity = data.id ? [data.id] : this.connectivityHighlight;
       }
       this.settingsStore.updateHoverFeatures(hoverAnatomies, hoverOrgans, hoverDOI, hoverConnectivity);
       EventBus.emit("hoverUpdate");
     },
     searchChanged: function (data) {
-      if (data.id === 1) {
+      if (data.tabType === 'dataset') {
         if (data && data.type == "query-update") {
           this.search = data.value;
           if (this.search && !this.filterTriggered) {
@@ -374,8 +385,8 @@ export default {
           }
           this.filterTriggered = false; // reset for next action
         }
-      } else if (data.id === 2) {
-        this.search = '';
+      } else if (data.tabType === 'connectivity') {
+        this.expanded = '';
         this.connectivityEntry = [];
         EventBus.emit("connectivity-query-filter", data);
       }
@@ -517,7 +528,6 @@ export default {
         // Use to update the connectivity when switch species
         // Wait for provenance info with uuid update
         this.$nextTick(() => {
-          // EventBus.emit("connectivity-query-filter");
           EventBus.emit('species-layout-connectivity-update');
           this.$refs.sideBar.close();
         })
@@ -585,17 +595,52 @@ export default {
     },
     onSidebarTabClicked: function (tab) {
       let globalSettings = { ...this.settingsStore.globalSettings };
-      if (tab.id === 1 && tab.type === 'datasetExplorer') {
-        globalSettings.interactiveMode = 'dataset';
-      } else if (tab.id === 2 && tab.type === 'connectivityExplorer') {
-        globalSettings.interactiveMode = 'connectivity';
+
+      if ('interactiveMode' in globalSettings) {
+        if (tab.id === 1 && tab.type === 'datasetExplorer') {
+          globalSettings.interactiveMode = 'dataset';
+        } else if (tab.id === 2 && tab.type === 'connectivityExplorer') {
+          globalSettings.interactiveMode = 'connectivity';
+        }
+        this.settingsStore.updateGlobalSettings(globalSettings);
       }
-      this.settingsStore.updateGlobalSettings(globalSettings);
+
       this.$refs.dialogToolbar.loadGlobalSettings();
     },
     onSidebarTabClosed: function (tab) {
       if (tab.id === 3 && tab.type === "annotation") EventBus.emit('annotation-close');
     },
+    updateGlobalSettingsFromStorage: function () {
+      const globalSettingsFromStorage = localStorage.getItem('mapviewer.globalSettings');
+      if (globalSettingsFromStorage) {
+        this.settingsStore.updateGlobalSettings(JSON.parse(globalSettingsFromStorage));
+      }
+    },
+    updateGlobalSettingsFromState: function (state) {
+      let mappedSettings = null;
+      state.entries.forEach((entry) => {
+        if (entry.state?.state) {
+          const {
+            background,
+            colour,
+            flightPath3D,
+            outlines,
+            viewingMode
+          } = entry.state.state;
+
+          mappedSettings = {
+            viewingMode: viewingMode,
+            flightPathDisplay: flightPath3D,
+            organsDisplay: colour,
+            outlinesDisplay: outlines,
+            backgroundDisplay: background,
+          };
+        }
+      })
+      if (mappedSettings) {
+        this.settingsStore.updateGlobalSettings(mappedSettings);
+      }
+    },
   },
   created: function () {
     this._facets = [];
@@ -619,49 +664,77 @@ export default {
       } else {
         this.createData = markRaw(payload.createData);
       }
-      this.confirmCreateCallback = markRaw(payload.confirmCreate);
-      this.cancelCreateCallback = markRaw(payload.cancelCreate);
-      this.confirmDeleteCallback = markRaw(payload.confirmDelete);
-      this.confirmCommentCallback = markRaw(payload.confirmComment);
+      if (payload.confirmCreate) {
+        this.confirmCreateCallback = markRaw(payload.confirmCreate);
+      }
+      if (payload.cancelCreate) {
+        this.cancelCreateCallback = markRaw(payload.cancelCreate);
+      }
+      if (payload.confirmDelete) {
+        this.confirmDeleteCallback = markRaw(payload.confirmDelete);
+      }
+      if (payload.confirmComment) {
+        this.confirmCommentCallback = markRaw(payload.confirmComment);
+      }
       if (this.$refs.sideBar) {
         this.$refs.sideBar.tabClicked({id: 3, type: 'annotation'});
         this.$refs.sideBar.setDrawerOpen(true);
       }
     });
     EventBus.on('annotation-close', () => {
-      this.$refs.sideBar.tabClicked({id:  1, type: 'datasetExplorer'});
+      const globalSettings = { ...this.settingsStore.globalSettings };
+      const { interactiveMode, viewingMode } = globalSettings;
+
       this.annotationEntry = [];
       this.createData = {};
+
       if (this.$refs.sideBar) {
-        this.$refs.sideBar.setDrawerOpen(false);
+        if (interactiveMode === "dataset") {
+          this.$refs.sideBar.tabClicked({id:  1, type: 'datasetExplorer'});
+        } else if (interactiveMode === "connectivity") {
+          this.$refs.sideBar.tabClicked({id:  2, type: 'connectivityExplorer'});
+        }
+
+        if (viewingMode === 'Annotation') {
+          this.$refs.sideBar.setDrawerOpen(false);
+        }
+
+        this.$refs.sideBar.closeConnectivity();
+        EventBus.emit('connectivity-item-close');
       }
     });
+    EventBus.on('update-offline-annotation-enabled', (payload) => {
+      this.settingsStore.updateOfflineAnnotationEnabled(payload);
+    });
     EventBus.on('connectivity-info-open', payload => {
-      if (!this.search || payload.length > 1) {
-        this.connectivityEntry = payload;
-      } else if (this.search && payload.length === 1) {
-        // if search exist, payload should always be an array of one element
-        // skip those payload not contain the search
-        if (payload[0].featureId[0] === this.search) {
-          this.connectivityEntry = payload;
+      // expand connectivity card and show connectivity info
+      // if expanded exist, payload should be an array of one element
+      // skip payload not match the expanded in multiple views
+      const isMatched = payload.some(entry => entry.featureId[0] === this.expanded);
+      if (this.expanded && this.connectivityExplorerClicked.length && !isMatched) {
+        this.connectivityExplorerClicked.pop();
+        return;
+      }
+      this.connectivityEntry = payload.map(entry => {
+        return { ...entry, label: entry.title, id: entry.featureId[0] };
+      });
+      if (this.connectivityExplorerClicked.length) {
+        // only remove clicked if not placeholder entry
+        if (this.connectivityEntry.every(entry => entry.ready)) {
+          this.connectivityExplorerClicked.pop();
         }
-      }
-      // click on the flatmap paths/features directly
-      // or onDisplaySearch is performed
-      if (!this.connectivityExplorerClicked.length) {
-        this.connectivityKnowledge = payload.map((entry) => {
-          return { label: entry.title, id: entry.featureId[0], detailsReady: entry.ready }
-        });
-        if (this.connectivityKnowledge.every(conn => conn.detailsReady)) {
-          this.connectivityHighlight = this.connectivityKnowledge.map(conn => conn.id);
-          this.onShowConnectivity(this.connectivityHighlight);
+      } else {
+        // click on the flatmap paths/features directly
+        // or onDisplaySearch is performed
+        this.connectivityKnowledge = this.connectivityEntry;
+        if (this.connectivityKnowledge.every(ck => ck.ready)) {
+          this.connectivityHighlight = this.connectivityKnowledge.map(ck => ck.id);
         }
         if (this.$refs.sideBar) {
           this.$refs.sideBar.tabClicked({ id: 2, type: 'connectivityExplorer' });
           this.$refs.sideBar.setDrawerOpen(true);
         }
       }
-      this.connectivityExplorerClicked.pop();
     });
     EventBus.on('connectivity-info-close', payload => {
       if (this.$refs.sideBar) {
@@ -683,13 +756,7 @@ export default {
     });
     EventBus.on("connectivity-knowledge", payload => {
       this.connectivityKnowledge = payload.data;
-      this.connectivityHighlight = [];
-      if (payload.state === "processed") {
-        this.connectivityHighlight = this.connectivityKnowledge.map(conn => conn.id);;
-        this.onShowConnectivity(this.connectivityHighlight);
-      } else {
-        this.hoverChanged();
-      }
+      this.connectivityHighlight = payload.highlight || [];
     })
     EventBus.on("modeUpdate", payload => {
       if (payload === "dataset") {
@@ -698,6 +765,10 @@ export default {
         this.$refs.sideBar.tabClicked({id:  2, type: 'connectivityExplorer'});
       }
     })
+    this.updateGlobalSettingsFromStorage();
+    EventBus.on("connectivity-filter-options", payload => {
+      this.filterOptions = payload;
+    })
     this.$nextTick(() => {
       if (this.search === "" && this._facets.length === 0) {
         if (this.$refs.sideBar) {

package/src/components/viewers/Flatmap.vue

@@ -18,6 +18,7 @@
       @shown-map-tooltip="onMapTooltipShown"
       @annotation-open="onAnnotationOpen"
       @annotation-close="onAnnotationClose"
+      @update-offline-annotation-enabled="updateOfflineAnnotationEnabled"
       :annotationSidebar="annotationSidebar"
       @connectivity-info-open="onConnectivityInfoOpen"
       @connectivity-error="onConnectivityError"
@@ -31,6 +32,8 @@
       :enableOpenMapUI="true"
       :flatmapAPI="flatmapAPI"
       :sparcAPI="apiLocation"
+      :showLocalSettings="showLocalSettings"
+      :showOpenMapButton="showOpenMapButton"
       @open-map="openMap"
       @pathway-selection-changed="onPathwaySelectionChanged"
       @mapmanager-loaded="onMapmanagerLoaded"
@@ -107,7 +110,8 @@ export default {
       EventBus.emit("mapImpProv", provClone); // send clone to context card
       this.$emit("flatmap-provenance-ready", provClone);
       this.flatmapReadyForMarkerUpdates(flatmap);
-      this.loadConnectivityKnowledge(flatmapImp);
+      this.updateSettings();
+      this.loadConnectivityExplorerConfig(flatmap);
       EventBus.emit("mapLoaded", flatmap);
     },
     onPathwaySelectionChanged: function (data) {
@@ -168,6 +172,23 @@ export default {
     changeViewingMode: function (modeName) {
       this.$refs.flatmap.changeViewingMode(modeName);
     },
+    updateSettings: function () {
+      const {
+        backgroundDisplay,
+        viewingMode,
+        flightPathDisplay,
+        organsDisplay,
+        outlines,
+      } = this.settingsStore.globalSettings;
+
+      const currentFlatmap = this.$refs.flatmap;
+
+      currentFlatmap.changeViewingMode(viewingMode);
+      currentFlatmap.setFlightPath3D(flightPathDisplay);
+      currentFlatmap.setColour(organsDisplay);
+      currentFlatmap.setOutlines(outlines);
+      currentFlatmap.backgroundChangeCallback(backgroundDisplay);
+    },
   },
   computed: {
     facetSpecies() {
@@ -187,6 +208,21 @@ export default {
     EventBus.on("hoverUpdate", () => {
       this.cardHoverHighlight();
     });
+    EventBus.on('viewingModeUpdate', (payload) => {
+      this.$refs.flatmap.changeViewingMode(payload);
+    });
+    EventBus.on('flightPathUpdate', (payload) => {
+      this.$refs.flatmap.setFlightPath3D(payload);
+    });
+    EventBus.on('organsDisplayUpdate', (payload) => {
+      this.$refs.flatmap.setColour(payload);
+    });
+    EventBus.on('outlinesDisplayUpdate', (payload) => {
+      this.$refs.flatmap.setOutlines(payload);
+    });
+    EventBus.on('backgroundDisplayUpdate', (payload) => {
+      this.$refs.flatmap.backgroundChangeCallback(payload);
+    });
     EventBus.on('show-connectivity', (payload) => {
       const { featureIds, offset } = payload;
       const currentFlatmap = this.$refs.flatmap;

package/src/components/viewers/MultiFlatmap.vue

@@ -17,6 +17,7 @@
       @shown-map-tooltip="onMapTooltipShown"
       @annotation-open="onAnnotationOpen"
       @annotation-close="onAnnotationClose"
+      @update-offline-annotation-enabled="updateOfflineAnnotationEnabled"
       :annotationSidebar="annotationSidebar"
       @connectivity-info-open="onConnectivityInfoOpen"
       @connectivity-error="onConnectivityError"
@@ -29,12 +30,15 @@
       :openMapOptions="openMapOptions"
       :flatmapAPI="flatmapAPI"
       :sparcAPI="apiLocation"
+      :showLocalSettings="showLocalSettings"
+      :showOpenMapButton="showOpenMapButton"
       @pan-zoom-callback="flatmapPanZoomCallback"
       @open-map="openMap"
       @finish-help-mode="endHelp"
       @pathway-selection-changed="onPathwaySelectionChanged"
       @open-pubmed-url="onOpenPubmedUrl"
       @mapmanager-loaded="onMapmanagerLoaded"
+      :showPathwayFilter="false"
     />
 
     <HelpModeDialog
@@ -337,7 +341,8 @@ export default {
         const flatmapImp = flatmap.mapImp;
         this.flatmapMarkerUpdate(flatmapImp);
         this.updateProvCard();
-        this.loadConnectivityKnowledge(flatmapImp);
+        this.updateSettings();
+        this.loadConnectivityExplorerConfig(flatmap);
         EventBus.emit("mapLoaded", flatmap);
       }
     },
@@ -433,6 +438,25 @@ export default {
         flatmap.changeConnectivitySource(payload);
       }
     },
+    updateSettings: function () {
+      const {
+        backgroundDisplay,
+        viewingMode,
+        flightPathDisplay,
+        organsDisplay,
+        outlines,
+      } = this.settingsStore.globalSettings;
+
+      if (this.flatmapReady) {
+        const currentFlatmap = this.$refs.multiflatmap.getCurrentFlatmap();
+
+        currentFlatmap.changeViewingMode(viewingMode);
+        currentFlatmap.setFlightPath3D(flightPathDisplay);
+        currentFlatmap.setColour(organsDisplay);
+        currentFlatmap.setOutlines(outlines);
+        currentFlatmap.backgroundChangeCallback(backgroundDisplay);
+      }
+    },
   },
   computed: {
     facetSpecies() {
@@ -505,6 +529,36 @@ export default {
         this.cardHoverHighlight();
       }
     });
+    EventBus.on('viewingModeUpdate', (payload) => {
+      if (this.flatmapReady) {
+        const currentFlatmap = this.$refs.multiflatmap.getCurrentFlatmap();
+        currentFlatmap.changeViewingMode(payload);
+      }
+    });
+    EventBus.on('flightPathUpdate', (payload) => {
+      if (this.flatmapReady) {
+        const currentFlatmap = this.$refs.multiflatmap.getCurrentFlatmap();
+        currentFlatmap.setFlightPath3D(payload);
+      }
+    });
+    EventBus.on('organsDisplayUpdate', (payload) => {
+      if (this.flatmapReady) {
+        const currentFlatmap = this.$refs.multiflatmap.getCurrentFlatmap();
+        currentFlatmap.setColour(payload);
+      }
+    });
+    EventBus.on('outlinesDisplayUpdate', (payload) => {
+      if (this.flatmapReady) {
+        const currentFlatmap = this.$refs.multiflatmap.getCurrentFlatmap();
+        currentFlatmap.setOutlines(payload);
+      }
+    });
+    EventBus.on('backgroundDisplayUpdate', (payload) => {
+      if (this.flatmapReady) {
+        const currentFlatmap = this.$refs.multiflatmap.getCurrentFlatmap();
+        currentFlatmap.backgroundChangeCallback(payload);
+      }
+    });
   },
 };
 </script>