@abi-software/mapintegratedvuer 1.17.3-simulation.2 → 1.17.4

package/src/mixins/ContentMixin.js

@@ -1,21 +1,23 @@
-import { markRaw } from 'vue'
-import { getNerveNames, getParentsRegion } from '../components/SimulatedData.js'
-import EventBus from '../components/EventBus'
-import { mapStores } from 'pinia'
-import { useEntriesStore } from '../stores/entries'
-import { useSettingsStore } from '../stores/settings'
-import { useSplitFlowStore } from '../stores/splitFlow'
-import { useConnectivitiesStore } from '../stores/connectivities'
-import Tagging from '../services/tagging.js'
+import { markRaw } from "vue";
+import {
+  getNerveNames,
+  getParentsRegion,
+} from "../components/SimulatedData.js";
+import EventBus from "../components/EventBus";
+import { mapStores } from 'pinia';
+import { useEntriesStore } from '../stores/entries';
+import { useSettingsStore } from '../stores/settings';
+import { useSplitFlowStore } from '../stores/splitFlow';
+import { useConnectivitiesStore } from '../stores/connectivities';
+import Tagging from '../services/tagging.js';
 
-import { getFlatmapFilterOptions } from '@abi-software/map-utilities'
-import { FlatmapQueries } from '@abi-software/flatmapvuer'
-import { getKnowledgeSource, loadAndStoreKnowledge } from '@abi-software/flatmapvuer'
 import {
-  getTermNerveMaps,
-  getFilterOptions as getScaffoldFilterOptions,
-} from '@abi-software/scaffoldvuer/src/scripts/MappedNerves.js'
-import { defaultSpecies } from '../components/scripts/utilities.js'
+  getFlatmapFilterOptions,
+} from '@abi-software/map-utilities'
+import { FlatmapQueries } from "@abi-software/flatmapvuer/src/services/flatmapQueries.js";
+import { getKnowledgeSource, loadAndStoreKnowledge } from "@abi-software/flatmapvuer/src/services/flatmapKnowledge.js";
+import { getTermNerveMaps, getFilterOptions as getScaffoldFilterOptions } from "@abi-software/scaffoldvuer/src/scripts/MappedNerves.js";
+import { defaultSpecies } from "../components/scripts/utilities.js";
 
 function capitalise(text) {
   return text[0].toUpperCase() + text.substring(1)
@@ -23,7 +25,7 @@ function capitalise(text) {
 
 /* eslint-disable no-alert, no-console */
 export default {
-  emits: ['flatmap-provenance-ready', 'resource-selected', 'species-changed'],
+  emits: [ "flatmap-provenance-ready", "resource-selected", "species-changed"],
   props: {
     /**
      * Object containing information for
@@ -43,39 +45,38 @@ export default {
   computed: {
     ...mapStores(useEntriesStore, useSettingsStore, useSplitFlowStore, useConnectivitiesStore),
     idNamePair() {
-      return this.splitFlowStore.idNamePair
+      return this.splitFlowStore.idNamePair;
     },
     useHelpModeDialog() {
-      return this.settingsStore.useHelpModeDialog
+      return this.settingsStore.useHelpModeDialog;
     },
     connectivityInfoSidebar() {
-      return this.settingsStore.connectivityInfoSidebar
+      return this.settingsStore.connectivityInfoSidebar;
     },
     annotationSidebar() {
-      return this.settingsStore.annotationSidebar
+      return this.settingsStore.annotationSidebar;
     },
     // Hide local settings if global settings are shown
     showLocalSettings() {
-      return !this.showGlobalSettings
+      return !this.showGlobalSettings;
     },
   },
-  beforeUnmount: function () {
-    this.alive = false
+  beforeUnmount: function() {
+    this.alive = false;
   },
   mounted: function () {
-    this.multiflatmapRef = this.$refs.multiflatmap
-    this.flatmapRef = this.$refs.flatmap
-    this.scaffoldRef = this.$refs.scaffold
-    this.iframeRef = this.$refs.iframe
-    this.plotRef = this.$refs.plot
-    this.simulationRef = this.$refs.simulation
+    this.multiflatmapRef = markRaw(this.$refs.multiflatmap);
+    this.flatmapRef = markRaw(this.$refs.flatmap);
+    this.iframeRef = markRaw(this.$refs.iframe);
+    this.plotRef = markRaw(this.$refs.plot);
+    this.simulationRef = markRaw(this.$refs.simulation);
     // load connectivity with mock human male flatmap
-    if (this.scaffoldRef || this.iframeRef || this.plotRef || this.simulationRef) {
-      this.loadExplorerConfig()
+    if (this.iframeRef || this.plotRef || this.simulationRef) {
+      this.loadExplorerConfig();
     }
-    this.connectivityKnowledge = this.connectivitiesStore.globalConnectivities
-    this.connectivityFilterOptions = this.connectivitiesStore.filterOptions
-    this.connectivityFilterSources = this.connectivitiesStore.filterSources
+    this.connectivityKnowledge = this.connectivitiesStore.globalConnectivities;
+    this.connectivityFilterOptions = this.connectivitiesStore.filterOptions;
+    this.connectivityFilterSources = this.connectivitiesStore.filterSources;
   },
   methods: {
     toggleMinimap: function (option, prevState) {
@@ -86,15 +87,13 @@ export default {
           if (option === true) {
             // Only create minimap when it is not created before or destroyed
             if (prevState === false) {
-              const minimapOptions = mapImp.options?.minimap || {
-                position: 'top-right',
-              }
-              mapImp.createMinimap(minimapOptions)
-              currentFlatmap.addResizeButtonToMinimap()
-              currentFlatmap.minimapSmall = false
+              const minimapOptions = mapImp.options?.minimap || { position: 'top-right' };
+              mapImp.createMinimap(minimapOptions);
+              currentFlatmap.addResizeButtonToMinimap();
+              currentFlatmap.minimapSmall = false;
             }
           } else {
-            mapImp.closeMinimap()
+            mapImp.closeMinimap();
           }
         }
       }
@@ -102,60 +101,60 @@ export default {
     onConnectivityItemClose() {
       if (this?.alive) {
         if (this.multiflatmapRef) {
-          const currentFlatmap = this.multiflatmapRef.getCurrentFlatmap()
+          const currentFlatmap = this.multiflatmapRef.getCurrentFlatmap();
           if (currentFlatmap) {
-            currentFlatmap.closeTooltip()
+            currentFlatmap.closeTooltip();
           }
         }
         if (this.flatmapRef) {
-          this.flatmapRef.closeTooltip()
+          this.flatmapRef.closeTooltip();
         }
       }
     },
     getState: function () {
-      return undefined
+      return undefined;
     },
     openMap: function (type) {
-      EventBus.emit('OpenNewMap', type)
-      this.trackOpenMap(`open_new_${type}_map`)
+      EventBus.emit("OpenNewMap", type);
+      this.trackOpenMap(`open_new_${type}_map`);
     },
     onMapmanagerLoaded: function (mapManager) {
-      this.settingsStore.updateMapManager(mapManager)
+      this.settingsStore.updateMapManager(mapManager);
     },
     trackOpenMap: function (category) {
       // GA Tagging
       // Open map tracking
       Tagging.sendEvent({
-        event: 'interaction_event',
-        event_name: 'portal_maps_open_map',
-        category: category,
-        location: 'open_new_map',
-      })
+        'event': 'interaction_event',
+        'event_name': 'portal_maps_open_map',
+        'category': category,
+        'location': 'open_new_map'
+      });
     },
-    updateEntryLabel: function (label) {
+    updateEntryLabel: function(label) {
       if (label) {
-        this.entriesStore.updateLabelForEntry(this.entry, label)
+        this.entriesStore.updateLabelForEntry(this.entry, label);
       }
     },
-    updateEntryTitle: function (title) {
+    updateEntryTitle: function(title) {
       if (title) {
-        this.entriesStore.updateTitleForEntry(this.entry, title)
+        this.entriesStore.updateTitleForEntry(this.entry, title);
       }
     },
-    updateWithViewUrl: function () {
-      return
+    updateWithViewUrl: function() {
+      return;
     },
     /**
      * Perform a local search on this contentvuer
      */
     search: function () {
-      return false
+      return false;
     },
     /**
      * Get a list of search suggestions on this contentvuer
      */
     searchSuggestions: function () {
-      return
+      return;
     },
     /**
      * Callback when the vuers emit a selected event.
@@ -164,206 +163,148 @@ export default {
       const resource = resources[0]
       // Skip processing if resources already has actions
       if (this.resourceHasAction(resource)) {
-        EventBus.emit('PopoverActionClick', resource)
-        return
+        EventBus.emit("PopoverActionClick", resource);
+        return;
       }
 
-      let returnedAction = undefined
-      let fireResourceSelected = false
+      let returnedAction = undefined;
+      let action = "none";
+      let fireResourceSelected = false;
       const result = {
         paneIndex: this.entry.id,
         type: type,
         resource: resources,
         internalName: undefined,
         eventType: undefined,
-      }
+      };
 
-      if (type == 'MultiFlatmap' || type == 'Flatmap') {
-        result.internalName = resource?.feature?.label
-          ? resource.feature.label
-          : this.idNamePair[resource.feature.models]
-        if (resource.eventType == 'click') {
-          result.eventType = 'selected'
-          if (resource.feature.type == 'marker') {
-            let label = result.internalName
+      if (type == "MultiFlatmap" || type == "Flatmap") {
+        result.internalName = resource?.feature?.label ?
+          resource.feature.label : this.idNamePair[resource.feature.models];
+        if (resource.eventType == "click") {
+          result.eventType = "selected";
+          if (resource.feature.type == "marker") {
+            let label = result.internalName;
             // `resource.feature.id` is the marker identifier (not featureId or models)
             if (this.settingsStore.isFeaturedMarkerIdentifier(resource.feature.id)) {
               // It is a featured dataset search for DOI.
               returnedAction = {
-                type: 'Search',
+                type: "Search",
                 term: this.settingsStore.featuredMarkerDoi(resource.feature.id),
                 featuredDataset: true,
-              }
+              };
             } else {
-              if (resource.protocol) {
-                let term = resource.feature.models ? resource.feature.models : resource.feature.variable;
-                if (!term && this.markerToUberonID) {
-                  term = this.markerToUberonID[resource.feature.id]
-                }
-                returnedAction = {
-                  type: 'ProtocolSearch',
-                  protocol: resource.protocol,
-                  term: term,
+              // Facet search on anatomy if it is not a keyword search
+              returnedAction = {
+                type: "Facet",
+                facets: [label],
+              };
+              let labels = new Set();
+              // 'marker-terms' changed to 'dataset-terms' in flatmap-viewer@4.3.5
+              resource.feature['dataset-terms'].forEach((term) => {
+                labels.add(term.label ? term.label : term.term);
+              });
+              if (labels.size === 0) {
+                labels.add(label);
+              }
+              returnedAction.facets = [...labels];
+              // The number of current level labels will reduce as zoom in flatmap
+              if (
+                this.settingsStore.hasAppliedFacets(labels) &&
+                this.settingsStore.appliedFacets.length <= labels.size
+              ) {
+                return;
+              }
+              /* Add to the filter list as and if there is selected facets */
+              if (this.settingsStore.appliedFacets.length) {
+                if (!this.settingsStore.hasAppliedFacets(labels)) {
+                  const newFacets = [...new Set([
+                    ...this.settingsStore.appliedFacets,
+                    ...labels
+                  ])];
+                  this.settingsStore.updateAppliedFacets(newFacets);
                 }
               } else {
-                // Facet search on anatomy if it is not a keyword search
-                returnedAction = {
-                  type: 'Facet',
-                  facets: [label],
+                if (labels.size > 1) {
+                  returnedAction.type = "Facets";
                 }
-                let labels = new Set()
-                // 'marker-terms' changed to 'dataset-terms' in flatmap-viewer@4.3.5
-                resource.feature['dataset-terms'].forEach((term) => {
-                  labels.add(term.label ? term.label : term.term)
-                })
-                if (labels.size === 0) {
-                  labels.add(label)
-                }
-                returnedAction.facets = [...labels]
-                // The number of current level labels will reduce as zoom in flatmap
-                if (
-                  this.settingsStore.hasAppliedFacets(labels) &&
-                  this.settingsStore.appliedFacets.length <= labels.size
-                ) {
-                  return
-                }
-                /* Add to the filter list as and if there is selected facets */
-                if (this.settingsStore.appliedFacets.length) {
-                  if (!this.settingsStore.hasAppliedFacets(labels)) {
-                    const newFacets = [...new Set([...this.settingsStore.appliedFacets, ...labels])]
-                    this.settingsStore.updateAppliedFacets(newFacets)
-                  }
-                } else {
-                  if (labels.size > 1) {
-                    returnedAction.type = 'Facets'
-                  }
-                  this.settingsStore.updateAppliedFacets(returnedAction.facets)
-                }
-              }
-              fireResourceSelected = true
-              if (type == 'MultiFlatmap') {
-                const flatmap = this.$refs.multiflatmap.getCurrentFlatmap().mapImp
-                flatmap.clearSearchResults()
+                this.settingsStore.updateAppliedFacets(returnedAction.facets);
               }
             }
+            fireResourceSelected = true;
+            if (type == "MultiFlatmap") {
+              const flatmap = this.$refs.multiflatmap.getCurrentFlatmap().mapImp;
+              flatmap.clearSearchResults();
+            }
           }
-        } else if (resource.eventType == 'mouseenter') {
-          result.eventType = 'highlighted'
-          fireResourceSelected = true
+        } else if (resource.eventType == "mouseenter") {
+          result.eventType = "highlighted";
+          fireResourceSelected = true;
         }
-      } else if (type == 'Scaffold') {
+      } else if (type == "Scaffold") {
         if (resource) {
-          if (resource.data?.id === undefined || resource.data?.id === '') {
-            resource.data.id = resource.data?.group
+          if (resource.data?.id === undefined || resource.data?.id === "") {
+            resource.data.id = resource.data?.group;
           }
-          result.internalName = resource.data.id
+          result.internalName = resource.data.id;
           // Facet search if marker is clicked
           if (resource.data.lastActionOnMarker === true) {
             returnedAction = {
-              type: 'Facet',
+              type: "Facet",
               facets: [capitalise(resource.data.id)],
-            }
+            };
           }
         }
-        result.eventType = 'selected'
-        fireResourceSelected = true
+        result.eventType = "selected";
+        fireResourceSelected = true;
+        action = "search";
       }
-      if (returnedAction) EventBus.emit('PopoverActionClick', returnedAction)
-      if (fireResourceSelected) this.$emit('resource-selected', result)
+      if (returnedAction) EventBus.emit("PopoverActionClick", returnedAction);
+      if (fireResourceSelected) this.$emit("resource-selected", result);
     },
     resourceHasAction: function (resource) {
       return (
-        resource &&
-        (resource.type === 'URL' ||
-          resource.type === 'Search' ||
-          resource.type === 'Neuron Search' ||
-          resource.type == 'Facet' ||
-          resource.type == 'Facets')
-      )
-    },
-    /**
-     * Get the term to zoom/highlight in a synchronisation event,
-     * if it cannot be found in the map, it will perform several
-     * calls to try to ge a valid name/id.
-     */
-    getNameAndIdFromSyncData: async function (data) {
-      let name = data.internalName
-      if (name === undefined && data.resource) {
-        name = data.resource.label
-      }
-      let id = undefined
-      if (data.resource && data.resource.resource) {
-        id = data.resource.resource[0]
-      }
-      if (this.entry.type === 'Scaffold') {
-        const objects = this.$refs.scaffold.findObjectsWithGroupName(name)
-        // If a region is not found use a hardcoded list to determine
-        // its parents region first
-        if (objects.length === 0) {
-          //Use nerve mapping
-          if (data.resource && data.resource.feature) {
-            const matched = getNerveNames(data.resource.feature.models)
-            if (matched.length > 0) return matched
-          }
-          let matched = getParentsRegion(name)
-          if (matched) {
-            return matched
-          }
-          // Hardcoded list failed - use an endpoint to find its parents
-          if (id && data.eventType === 'selected') {
-            return fetch(`${this.apiLocation}get-related-terms/${id}`)
-              .then((response) => response.json())
-              .then((data) => {
-                if (data.uberon?.array.length > 0) {
-                  name = data.uberon.array[0].name.charAt(0).toUpperCase() + data.uberon.array[0].name.slice(1)
-                  id = data.uberon.array[0].id.toUpperCase()
-                  return { id, name }
-                }
-              })
-          }
-        }
-      } else if (this.entry.type === 'MultiFlatmap') {
-        if (name === 'Bladder') {
-          name = 'Urinary Bladder'
-        } else {
-          const matched = getNerveNames(name)
-          if (matched.length > 0) name = matched[0]
-        }
-      }
-      return { id, name }
+        resource && (
+          resource.type === "URL" ||
+          resource.type === "Search" ||
+          resource.type === "Neuron Search" ||
+          resource.type == "Facet" ||
+          resource.type == "Facets"
+        )
+      );
     },
     // Get the species and andaotmy info for the featured datasets
     getDatasetAnatomyInfo: function (identifier) {
       fetch(`${this.apiLocation}dataset_info/anatomy?identifier=${identifier}`)
-        .then((response) => response.json())
-        .then((data) => {
-          const resultPayload = data.result[0]
-          let markerCurie
+        .then(response => response.json())
+        .then(data => {
+          const resultPayload = data.result[0];
+          let markerCurie;
           try {
-            markerCurie = resultPayload.anatomy.organ[0].curie
+            markerCurie = resultPayload.anatomy.organ[0].curie;
           } catch (error) {
-            markerCurie = undefined
+            markerCurie = undefined;
           }
-          let markerDoi
+          let markerDoi;
           try {
-            markerDoi = resultPayload.item.curie
+            markerDoi = resultPayload.item.curie;
           } catch (error) {
-            markerDoi = undefined
+            markerDoi = undefined;
           }
-          let markerSpecies
+          let markerSpecies;
           try {
-            let index = 0
-            let found = false
+            let index = 0;
+            let found = false;
             while (!found && index < resultPayload.organisms.subject.length) {
-              const entry = resultPayload.organisms.subject[index]
+              const entry = resultPayload.organisms.subject[index];
               if (entry.species) {
-                markerSpecies = entry.species.name
-                found = true
+                markerSpecies = entry.species.name;
+                found = true;
               }
-              index += 1
+              index += 1;
             }
           } catch (error) {
-            markerSpecies = undefined
+            markerSpecies = undefined;
           }
           // can test the featured marker by uncommenting the line below:
           // markerSpecies = "Rat"
@@ -372,17 +313,17 @@ export default {
             marker: markerCurie,
             doi: markerDoi,
             species: markerSpecies,
-          })
-        })
+          });
+        });
     },
     // Check if the old featured dataset api has any info
     oldFeaturedDatasetApiHasInfo: async function () {
       let response = await fetch(`${this.apiLocation}get_featured_datasets_identifiers`)
       let data = await response.json()
       if (!data.identifiers || data.identifiers.length == 0) {
-        return false
+        return false;
       } else {
-        return data.identifiers
+        return data.identifiers;
       }
     },
     // Check if the new featured dataset api has any info
@@ -390,219 +331,182 @@ export default {
       let response = await fetch(`${this.apiLocation}get_featured_dataset`)
       let data = await response.json()
       if (!data.datasets || data.datasets.length == 0) {
-        return false
+        return false;
       } else {
-        return data.datasets.map((d) => d.id)
+        return data.datasets.map(d => d.id);
       }
     },
     flatmapResourceSelected: function (type, resources) {
-      this.resourceSelected(type, resources)
+      this.resourceSelected(type, resources);
 
-      const firstResource = resources[0]
-      const { eventType, feature } = firstResource
-      const { viewingMode } = this.settingsStore.globalSettings
+      const firstResource = resources[0];
+      const { eventType, feature } = firstResource;
+      const { viewingMode } = this.settingsStore.globalSettings;
 
       if (eventType === 'click' && feature.type === 'feature' && feature.models?.startsWith('ilxtr:')) {
         // Use only models data for GA tagging
         // There is character limit (100 characters) for event parameter value in GA
-        const categories = []
-        resources.forEach((resource) => {
-          const { models } = resource.feature
-          categories.push(models)
-        })
+        const categories = [];
+        resources.forEach(resource => {
+          const { models } = resource.feature;
+          categories.push(models);
+        });
 
         Tagging.sendEvent({
-          event: 'interaction_event',
-          event_name: 'portal_maps_connectivity',
-          category: categories.join(', '),
-          location: type + ' ' + viewingMode,
-        })
-      }
-      if (eventType === 'click' && feature.type === 'feature' && type === 'Flatmap') {
-
-        let component = undefined;
-        let variable = undefined;
-        if (feature && feature.variable) {
-          const components = feature.variable.split("/");
-          if (components.length === 1) {
-            variable = components[0]
-          }
-          if (components.length === 2) {
-            component = components[0]
-            variable = components[1]
-          }
-
-        }
-        //Use the hard code list if variable is not available
-        if (!variable) {
-          const data = this.mappingStore.mapToCellMLIdentifiers(feature.mapUUID, feature.id)
-          component = data?.component
-          variable = data?.variable
-        }
-        if (!component || !variable) {
-          return  // No mapping found, do not proceed with the simulation request
-        }
-
-        const simulationDataRequest = {
-          component,
-          featureId: feature.id,
-          label: feature.label,
-          mapId: feature.mapUUID,
-          offset: { left: 15, top: 15 },
-          ownerId: this.entry.id,
-          position: { x: this.elementX + this.left, y: this.elementY + this.top },
-          protocol: firstResource.protocol,
-          variable,
-          windowId: `simulation-window-${this.entry.id}-${component}-${variable}`,
-        }
-        this.simulationPlotStore.requestSimulation(simulationDataRequest)
+          'event': 'interaction_event',
+          'event_name': 'portal_maps_connectivity',
+          'category': categories.join(', '),
+          "location": type + ' ' + viewingMode
+        });
       }
     },
     /**
      * Get a list of featured datasets to display.
      */
     getFeaturedDatasets: async function () {
-      let datasetIds = []
+      let datasetIds = [];
 
       // Check the two api endpoints for featured datasets, old one first
-      let oldInfo = await this.oldFeaturedDatasetApiHasInfo()
-      if (oldInfo) datasetIds = oldInfo
+      let oldInfo = await this.oldFeaturedDatasetApiHasInfo();
+      if (oldInfo) datasetIds = oldInfo;
       else {
-        let newInfo = await this.newFeaturedDatasetApiHasInfo()
-        if (newInfo) datasetIds = newInfo
+        let newInfo = await this.newFeaturedDatasetApiHasInfo();
+        if (newInfo) datasetIds = newInfo;
       }
       // Update the store with the new list of featured datasets
-      this.settingsStore.updateFeatured(datasetIds)
-      datasetIds.forEach((element) => {
+      this.settingsStore.updateFeatured(datasetIds);
+      datasetIds.forEach(element => {
         this.getDatasetAnatomyInfo(element)
-      })
+      });
     },
     flatmapMarkerUpdate() {
-      return
+      return;
     },
     onResize: function () {
-      return
+      return;
     },
-    updateViewerSettings: function () {
-      return
+    updateViewerSettings: function() {
+      return;
     },
     startHelp: function () {
       if (this?.alive) {
         if (this.isInHelp === false) {
-          this.helpMode = true
-          window.addEventListener('mousedown', this.checkEndHelpMouseDown)
-          this.isInHelp = true
+          this.helpMode = true;
+          window.addEventListener("mousedown", this.checkEndHelpMouseDown);
+          this.isInHelp = true;
         }
       }
     },
     endHelp: function () {
-      window.removeEventListener('mousedown', this.checkEndHelpMouseDown)
-      this.helpMode = false
+      window.removeEventListener("mousedown", this.checkEndHelpMouseDown);
+      this.helpMode = false;
       setTimeout(() => {
-        this.isInHelp = false
-      }, 200)
+        this.isInHelp = false;
+      }, 200);
     },
     onHelpModeShowNext: function () {
-      this.helpModeActiveItem += 1
+      this.helpModeActiveItem += 1;
     },
     onHelpModeLastItem: function (isLastItem) {
       if (isLastItem) {
-        this.helpModeLastItem = true
+        this.helpModeLastItem = true;
       }
     },
     onFinishHelpMode: function () {
-      this.helpMode = false
+      this.helpMode = false;
       // reset help mode to default values
-      this.helpModeActiveItem = 0
-      this.helpModeLastItem = false
+      this.helpModeActiveItem = 0;
+      this.helpModeLastItem = false;
     },
     onTooltipShown: function () {
       if (this.$refs.multiflatmap && this.$refs.multiflatmapHelp) {
-        this.$refs.multiflatmapHelp.toggleTooltipHighlight()
+        this.$refs.multiflatmapHelp.toggleTooltipHighlight();
       }
 
       if (this.$refs.flatmap && this.$refs.flatmapHelp) {
-        this.$refs.flatmapHelp.toggleTooltipHighlight()
+        this.$refs.flatmapHelp.toggleTooltipHighlight();
       }
 
       if (this.$refs.scaffold && this.$refs.scaffoldHelp) {
-        this.$refs.scaffoldHelp.toggleTooltipHighlight()
+        this.$refs.scaffoldHelp.toggleTooltipHighlight();
       }
     },
     onMapTooltipShown: function () {
       if (this.$refs.multiflatmap && this.$refs.multiflatmapHelp) {
-        this.$refs.multiflatmapHelp.toggleTooltipPinHighlight()
+        this.$refs.multiflatmapHelp.toggleTooltipPinHighlight();
       }
 
       if (this.$refs.flatmap && this.$refs.flatmapHelp) {
-        this.$refs.flatmapHelp.toggleTooltipPinHighlight()
+        this.$refs.flatmapHelp.toggleTooltipPinHighlight();
       }
 
       if (this.$refs.scaffold && this.$refs.scaffoldHelp) {
-        this.$refs.scaffoldHelp.toggleTooltipPinHighlight()
+        this.$refs.scaffoldHelp.toggleTooltipPinHighlight();
       }
     },
     /**
      * End help-mode only if user clicks outside of help mode dialog.
      */
     checkEndHelpMouseDown: function (e) {
-      const el = e.target
+      const el = e.target;
       if (!el.closest('.help-mode-dialog')) {
-        this.endHelp()
+        this.endHelp();
       }
     },
     flatmapHighlight: async function (flatmap, hoverAnatomies, hoverDOI, hoverConnectivity) {
-      let toHighlight = [...hoverAnatomies, ...hoverConnectivity]
-      const globalSettings = this.settingsStore.globalSettings
+      let toHighlight = [...hoverAnatomies, ...hoverConnectivity];
+      const globalSettings = this.settingsStore.globalSettings;
 
       // to highlight connected paths
       if (globalSettings.highlightConnectedPaths) {
-        const hoverEntry = hoverAnatomies.length ? hoverAnatomies : hoverConnectivity.length ? hoverConnectivity : []
-        const connectedPaths = await flatmap.retrieveConnectedPaths(hoverEntry)
+        const hoverEntry = hoverAnatomies.length ? hoverAnatomies :
+          hoverConnectivity.length ? hoverConnectivity :
+            []
+        const connectedPaths = await flatmap.retrieveConnectedPaths(hoverEntry);
         if (connectedPaths) {
-          toHighlight.push(...connectedPaths)
+          toHighlight.push(...connectedPaths);
         }
       }
 
       // to highlight related paths from reference DOI
       if (globalSettings.highlightDOIPaths) {
-        const connectionsFromDOI = await flatmap.searchConnectivitiesByReference(hoverDOI)
+        const connectionsFromDOI = await flatmap.searchConnectivitiesByReference(hoverDOI);
         if (connectionsFromDOI) {
-          toHighlight.push(...connectionsFromDOI)
+          toHighlight.push(...connectionsFromDOI);
         }
       }
-      toHighlight = [...new Set(toHighlight)]
-      return toHighlight
+      toHighlight = [...new Set(toHighlight)];
+      return toHighlight;
     },
     sidebarHoverHighlight: function (payload) {
-      if (
-        this.visible &&
-        (((this.flatmapRef || this.multiflatmapRef) && this.flatmapReady) || (this.scaffoldRef && this.scaffoldLoaded))
+      if (this.visible && (
+        ((this.flatmapRef || this.multiflatmapRef) && this.flatmapReady) ||
+        (this.scaffoldRef && this.scaffoldLoaded))
       ) {
-        const hoverAnatomies = this.settingsStore.hoverAnatomies
-        const hoverOrgans = this.settingsStore.hoverOrgans
-        const hoverDOI = this.settingsStore.hoverDOI
-        const hoverConnectivity = this.settingsStore.hoverConnectivity
+        const hoverAnatomies = this.settingsStore.hoverAnatomies;
+        const hoverOrgans = this.settingsStore.hoverOrgans;
+        const hoverDOI = this.settingsStore.hoverDOI;
+        const hoverConnectivity = this.settingsStore.hoverConnectivity;
 
-        let flatmap = null
-        let scaffold = null
-        if (this.flatmapRef) flatmap = this.flatmapRef
-        if (this.multiflatmapRef) flatmap = this.multiflatmapRef.getCurrentFlatmap()
-        if (this.scaffoldRef) scaffold = this.scaffoldRef
+        let flatmap = null;
+        let scaffold = null;
+        if (this.flatmapRef) flatmap = this.flatmapRef;
+        if (this.multiflatmapRef) flatmap = this.multiflatmapRef.getCurrentFlatmap();
+        if (this.scaffoldRef) scaffold = this.scaffoldRef;
 
         // reset
-        clearTimeout(this.highlightDelay)
+        clearTimeout(this.highlightDelay);
         if (!hoverAnatomies.length && !hoverOrgans.length && !hoverDOI && !hoverConnectivity.length) {
           if ((this.multiflatmapRef || this.flatmapRef) && flatmap) {
             if (flatmap.mapImp && !flatmap.mapImp.contextLost) {
-              flatmap.mapImp?.clearSearchResults()
+              flatmap.mapImp?.clearSearchResults();
               if (payload.connectivityProcessed) {
                 // grey out all connectivity if no search results
                 flatmap.mapImp?.setPaint({ dimmed: true })
               }
             }
           } else if (this.scaffoldRef && scaffold) {
-            scaffold.changeHighlightedByName(hoverOrgans, '', false)
+            scaffold.changeHighlightedByName(hoverOrgans, "", false);
           }
         }
 
@@ -613,275 +517,254 @@ export default {
                 try {
                   flatmap.showConnectivityTooltips({
                     connectivityInfo: { featureId: paths },
-                    data: [],
-                  })
+                    data: []
+                  });
                 } catch (error) {
+                  console.log(error)
                   // only for connectivity hover highlight
                   if (hoverConnectivity.length && flatmap.mapImp) {
-                    const uuid = flatmap.mapImp.uuid
+                    const uuid = flatmap.mapImp.uuid;
                     const found = paths.every((path) =>
-                      this.connectivityKnowledge[uuid].some((connectivity) => connectivity.id === path)
-                    )
+                      this.connectivityKnowledge[uuid].some((connectivity) =>
+                        connectivity.id === path
+                      )
+                    );
                     if (!found) {
                       if (flatmap.mapImp && !flatmap.mapImp.contextLost) {
-                        flatmap.mapImp.clearSearchResults()
+                        flatmap.mapImp.clearSearchResults();
                       }
                     }
                   }
                 }
-              })
+              });
             } else if (this.scaffoldRef && scaffold) {
-              scaffold.changeHighlightedByName(hoverOrgans, '', false)
+              scaffold.changeHighlightedByName(hoverOrgans, "", false);
             }
           }
-        }, 100)
+        }, 100);
       }
     },
     onAnnotationOpen: function (payload) {
-      EventBus.emit('annotation-open', payload)
+      EventBus.emit('annotation-open', payload);
     },
     onAnnotationClose: function () {
-      EventBus.emit('sidebar-annotation-close')
+      EventBus.emit('sidebar-annotation-close');
     },
     updateOfflineAnnotationEnabled: function (payload) {
-      EventBus.emit('update-offline-annotation-enabled', payload)
+      EventBus.emit('update-offline-annotation-enabled', payload);
     },
     onConnectivityInfoOpen: function (connectivityInfoData) {
-      EventBus.emit('connectivity-info-open', connectivityInfoData)
+      EventBus.emit('connectivity-info-open', connectivityInfoData);
     },
     onConnectivityError: function (errorInfo) {
-      EventBus.emit('connectivity-error', errorInfo)
+      EventBus.emit('connectivity-error', errorInfo);
     },
     onConnectivityInfoClose: function () {
-      EventBus.emit('connectivity-info-close')
+      EventBus.emit('connectivity-info-close');
     },
-    onSidebarAnnotationClose: function () {
-      return
+    onSidebarAnnotationClose: function() {
+      return;
     },
     onNeuronConnectionFeatureClick: function (payload) {
-      EventBus.emit('neuron-connection-feature-click', payload)
+      EventBus.emit('neuron-connection-feature-click', payload);
     },
-    showConnectivity: function () {
-      return
+    showConnectivity: function() {
+      return;
     },
     showConnectivityTooltips: function () {
-      return
+      return;
     },
-    setVisibilityFilter: function () {
-      return
+    setVisibilityFilter: function() {
+      return;
     },
     loadExplorerConfig: async function () {
-      this.flatmapService = await this.mockUpFlatmapService()
-      this.loadConnectivityExplorerConfig(this.flatmapService)
+      this.flatmapService = await this.mockUpFlatmapService();
+      this.loadConnectivityExplorerConfig(this.flatmapService);
     },
-    mockUpFlatmapService: async function () {
-      const flatmapResponse = await fetch(this.flatmapAPI)
-      const flatmapJson = await flatmapResponse.json()
+    mockUpFlatmapService: async function() {
+      const flatmapResponse = await fetch(this.flatmapAPI);
+      const flatmapJson = await flatmapResponse.json();
       const latestFlatmap = flatmapJson
-        .filter((f) => f.id === 'human-flatmap_male')
-        .sort((a, b) => b.created.localeCompare(a.created))[0]
-      const flatmapUuid = latestFlatmap.uuid
-      const flatmapSource = latestFlatmap.sckan['knowledge-source']
-      const pathwaysResponse = await fetch(`${this.flatmapAPI}/flatmap/${flatmapUuid}/pathways`)
-      const pathwaysJson = await pathwaysResponse.json()
+        .filter(f => f.id === 'human-flatmap_male')
+        .sort((a, b) => b.created.localeCompare(a.created))[0];
+      const flatmapUuid = latestFlatmap.uuid;
+      const flatmapSource = latestFlatmap.sckan['knowledge-source'];
+      const pathwaysResponse = await fetch(`${this.flatmapAPI}/flatmap/${flatmapUuid}/pathways`);
+      const pathwaysJson = await pathwaysResponse.json();
 
-      this.flatmapQueries = markRaw(new FlatmapQueries())
-      this.flatmapQueries.initialise(this.flatmapAPI)
+      this.flatmapQueries = markRaw(new FlatmapQueries());
+      this.flatmapQueries.initialise(this.flatmapAPI);
 
       const mapImp = {
-        mapMetadata: {
-          uuid: flatmapUuid,
-          connectivity: {
+        'mapMetadata': {
+          'uuid': flatmapUuid,
+          'connectivity': {
             ...latestFlatmap.sckan,
           },
         },
-        pathways: pathwaysJson,
-        resource: this.entry.resource,
+        'pathways': pathwaysJson,
+        'resource': this.entry.resource,
         knowledgeSource: flatmapSource,
-        queryKnowledge: async (keastId) => {
-          const sql =
-            'select knowledge from knowledge where (source=? or source is null) and entity=? order by source desc'
-          const params = [flatmapSource, keastId]
-          const response = await this.flatmapQueries.queryKnowledge(sql, params)
-          return JSON.parse(response)
+        queryKnowledge : async (keastId) => {
+          const sql = 'select knowledge from knowledge where (source=? or source is null) and entity=? order by source desc';
+          const params = [flatmapSource, keastId];
+          const response = await this.flatmapQueries.queryKnowledge(sql, params);
+          return JSON.parse(response);
         },
-        queryLabels: async (entities) => {
-          const sql = `select source, entity, knowledge from knowledge where (source=? or source is null) and entity in (?${', ?'.repeat(
-            entities.length - 1
-          )}) order by entity, source desc`
-          const params = [flatmapSource, ...entities]
-          const response = await this.flatmapQueries.queryKnowledge(sql, params)
-          const entityLabels = []
-          let last_entity
+        queryLabels : async (entities) => {
+          const sql = `select source, entity, knowledge from knowledge where (source=? or source is null) and entity in (?${', ?'.repeat(entities.length-1)}) order by entity, source desc`;
+          const params = [flatmapSource, ...entities];
+          const response = await this.flatmapQueries.queryKnowledge(sql, params);
+          const entityLabels = [];
+          let last_entity;
           for (const row of response) {
-            if (row[1] !== last_entity) {
-              const knowledge = JSON.parse(row[2])
-              entityLabels.push({
-                entity: row[1],
-                label: knowledge['label'] || row[1],
-              })
-              last_entity = row[1]
-            }
+              if (row[1] !== last_entity) {
+                  const knowledge = JSON.parse(row[2]);
+                  entityLabels.push({
+                      entity: row[1],
+                      label: knowledge['label'] || row[1]
+                  })
+                  last_entity = row[1];
+              }
           }
-          return entityLabels
+          return entityLabels;
         },
-      }
+      };
 
-      const scaffoldFilterOptions = getScaffoldFilterOptions()
+      const scaffoldFilterOptions = getScaffoldFilterOptions();
       const combinedFilterOptions = async (flatmapImp, providedKnowledge) => {
-        const providedPathways = undefined
-        const flatmapFilterOptions = await getFlatmapFilterOptions(
-          this.flatmapAPI,
-          flatmapImp,
-          providedKnowledge,
-          providedPathways
-        )
-        return [...scaffoldFilterOptions, ...flatmapFilterOptions]
-      }
+        const providedPathways = undefined;
+        const flatmapFilterOptions = await getFlatmapFilterOptions(this.flatmapAPI, flatmapImp, providedKnowledge, providedPathways);
+        return [...scaffoldFilterOptions, ...flatmapFilterOptions];
+      };
 
       return {
-        mockup: true,
+        'mockup': true,
         getFilterOptions: combinedFilterOptions,
         getTermNerveMaps: getTermNerveMaps,
-        mapImp: mapImp,
+        'mapImp': mapImp,
       }
     },
     loadConnectivityExplorerConfig: async function (flatmap) {
-      const flatmapImp = flatmap.mapImp
-      const sckanVersion = getKnowledgeSource(flatmapImp)
-      const uuid = flatmap.mockup ? flatmapImp.resource : flatmapImp.uuid
-      let validNerves = []
+      const flatmapImp = flatmap.mapImp;
+      const sckanVersion = getKnowledgeSource(flatmapImp);
+      const uuid = flatmap.mockup ? flatmapImp.resource : flatmapImp.uuid;
+      let validNerves = [];
 
       if (!this.connectivityKnowledge[sckanVersion]) {
-        this.flatmapQueries = markRaw(new FlatmapQueries())
-        this.flatmapQueries.initialise(this.flatmapAPI)
-        const knowledge = await loadAndStoreKnowledge(flatmapImp, this.flatmapQueries)
+        this.flatmapQueries = markRaw(new FlatmapQueries());
+        this.flatmapQueries.initialise(this.flatmapAPI);
+        const knowledge = await loadAndStoreKnowledge(flatmapImp, this.flatmapQueries);
         this.connectivityKnowledge[sckanVersion] = knowledge
-          .filter((item) => item.connectivity?.length)
-          .sort((a, b) => a.label.localeCompare(b.label))
+          .filter(item => item.connectivity?.length)
+          .sort((a, b) => a.label.localeCompare(b.label));
       }
       if (!this.connectivityKnowledge[uuid]) {
-        const pathways = flatmapImp.pathways?.paths || {}
-        this.connectivityKnowledge[uuid] = this.connectivityKnowledge[sckanVersion].filter(
-          (item) => item.id in pathways
-        )
+        const pathways = flatmapImp.pathways?.paths || {};
+        this.connectivityKnowledge[uuid] = this.connectivityKnowledge[sckanVersion]
+          .filter(item => item.id in pathways);
       }
       if (!this.connectivityFilterOptions[uuid] && !flatmap.mockup) {
-        this.connectivityFilterOptions[uuid] = await flatmap.getFilterOptions(
-          flatmapImp,
-          this.connectivityKnowledge[uuid]
-        )
+        this.connectivityFilterOptions[uuid] = await flatmap.getFilterOptions(flatmapImp , this.connectivityKnowledge[uuid]);
       }
       if (flatmap.mockup) {
-        const nerveMaps = flatmap.getTermNerveMaps() || {}
+        const nerveMaps = flatmap.getTermNerveMaps() || {};
         // deep copy the connectivity knowledge
         // to avoid modifying the original data
-        const deepCopyConnectivityKnowledge = JSON.parse(JSON.stringify(this.connectivityKnowledge[uuid]))
+        const deepCopyConnectivityKnowledge = JSON.parse(JSON.stringify(this.connectivityKnowledge[uuid]));
         this.connectivityKnowledge[uuid] = deepCopyConnectivityKnowledge
           .map((item) => {
-            let payload = item
+            let payload = item;
             if (item.nerves?.length) {
-              const terms = item.nerves.flat(Infinity)
+              const terms = item.nerves.flat(Infinity);
               const nerveLabels = terms.reduce((acc, term) => {
                 if (term in nerveMaps) {
-                  acc.push(nerveMaps[term])
+                  acc.push(nerveMaps[term]);
                 }
-                return acc
-              }, [])
+                return acc;
+              }, []);
               if (nerveLabels?.length) {
-                validNerves.push(...nerveLabels)
-                payload['nerve-label'] = nerveLabels.sort((a, b) => a.nerve.localeCompare(b.nerve))
+                validNerves.push(...nerveLabels);
+                payload["nerve-label"] = nerveLabels.sort((a, b) => a.nerve.localeCompare(b.nerve));
               }
             }
-            return payload
+            return payload;
           })
-          .filter((item) => item['nerve-label'])
+          .filter((item) => item["nerve-label"]);
 
         if (!this.connectivityFilterOptions[uuid]) {
-          this.connectivityFilterOptions[uuid] = await flatmap.getFilterOptions(
-            flatmapImp,
-            this.connectivityKnowledge[uuid]
-          )
+          this.connectivityFilterOptions[uuid] = await flatmap.getFilterOptions(flatmapImp , this.connectivityKnowledge[uuid]);
         }
 
-        validNerves = validNerves.map((nerve) => nerve.nerve.toLowerCase())
-        const deepCopyFilterOption = JSON.parse(JSON.stringify(this.connectivityFilterOptions[uuid]))
-        this.connectivityFilterOptions[uuid] = deepCopyFilterOption.map((option) => {
-          if (option.key === 'scaffold.connectivity.nerve') {
-            const newChildren = option.children.filter((child) => validNerves.includes(child.label.toLowerCase()))
-            return { ...option, children: newChildren }
-          } else {
-            return option
-          }
-        })
+        validNerves = validNerves.map(nerve => nerve.nerve.toLowerCase());
+        const deepCopyFilterOption = JSON.parse(JSON.stringify(this.connectivityFilterOptions[uuid]));
+        this.connectivityFilterOptions[uuid] = deepCopyFilterOption
+          .map((option) => {
+            if (option.key === 'scaffold.connectivity.nerve') {
+              const newChildren = option.children.filter((child) => validNerves.includes(child.label.toLowerCase()));
+              return { ...option, children: newChildren };
+            } else {
+              return option;
+            }
+          })
       } else {
         if (!this.connectivityFilterSources[uuid]) {
-          this.connectivityFilterSources[uuid] = flatmap.getFilterSources()
+          this.connectivityFilterSources[uuid] = flatmap.getFilterSources();
         }
-        this.connectivitiesStore.updateFilterSources(this.connectivityFilterSources)
+        this.connectivitiesStore.updateFilterSources(this.connectivityFilterSources);
       }
-      this.connectivitiesStore.updateFilterOptions(this.connectivityFilterOptions)
-      this.connectivitiesStore.updateGlobalConnectivities(this.connectivityKnowledge)
-      EventBus.emit('species-layout-connectivity-update')
+      this.connectivitiesStore.updateFilterOptions(this.connectivityFilterOptions);
+      this.connectivitiesStore.updateGlobalConnectivities(this.connectivityKnowledge);
+      EventBus.emit('species-layout-connectivity-update');
     },
     knowledgeTooltipQuery: async function (data) {
-      await this.flatmapQueries.retrieveFlatmapKnowledgeForEvent(this.flatmapService.mapImp, { resource: [data.id] })
+      await this.flatmapQueries.retrieveFlatmapKnowledgeForEvent(this.flatmapService.mapImp, { resource: [data.id] });
       let tooltip = await this.flatmapQueries.createTooltipData(this.flatmapService.mapImp, {
         resource: [data.id],
         label: data.label,
         provenanceTaxonomy: data.taxons,
-        feature: [],
+        feature: []
       })
-      tooltip['knowledgeSource'] = getKnowledgeSource(this.flatmapService.mapImp)
-      tooltip['mapId'] = this.flatmapService.mapImp.mapMetadata.id
-      tooltip['mapuuid'] = this.flatmapService.mapImp.mapMetadata.uuid
-      tooltip['nerve-label'] = data['nerve-label']
-      tooltip['ready'] = true
-      return tooltip
+      tooltip['knowledgeSource'] = getKnowledgeSource(this.flatmapService.mapImp);
+      tooltip['mapId'] = this.flatmapService.mapImp.mapMetadata.id;
+      tooltip['mapuuid'] = this.flatmapService.mapImp.mapMetadata.uuid;
+      tooltip['nerve-label'] = data['nerve-label'];
+      tooltip['ready'] = true;
+      return tooltip;
     },
     getKnowledgeTooltip: async function (payload) {
-      this.tooltipEntry = []
-      payload.data.forEach((d) =>
-        this.tooltipEntry.push({
-          title: d.label,
-          featureId: [d.id],
-          ready: false,
-        })
-      )
-      EventBus.emit('connectivity-info-open', this.tooltipEntry)
+      this.tooltipEntry = [];
+      payload.data.forEach(d => this.tooltipEntry.push({ title: d.label, featureId: [d.id], ready: false }));
+      EventBus.emit('connectivity-info-open', this.tooltipEntry);
 
-      let prom1 = []
+      let prom1 = [];
       // While having placeholders displayed, get details for all paths and then replace.
       for (let index = 0; index < payload.data.length; index++) {
-        prom1.push(await this.knowledgeTooltipQuery(payload.data[index]))
+        prom1.push(await this.knowledgeTooltipQuery(payload.data[index]));
       }
-      this.tooltipEntry = await Promise.all(prom1)
-      const featureIds = this.tooltipEntry.map((tooltip) => tooltip.featureId[0])
+      this.tooltipEntry = await Promise.all(prom1);
+      const featureIds = this.tooltipEntry.map(tooltip => tooltip.featureId[0]);
       if (featureIds.length > 0) {
-        EventBus.emit('connectivity-info-open', this.tooltipEntry)
+        EventBus.emit('connectivity-info-open', this.tooltipEntry);
       }
     },
     changeConnectivitySource: async function (payload, ongoingSource) {
-      const { entry, connectivitySource } = payload
-      const flatmapUUID = this?.flatmapService?.mapImp?.mapMetadata.uuid
+      const { entry, connectivitySource } = payload;
+      const flatmapUUID = this?.flatmapService?.mapImp?.mapMetadata.uuid;
       if (!ongoingSource.includes(flatmapUUID)) {
-        ongoingSource.push(flatmapUUID)
-        await this.flatmapQueries.queryForConnectivityNew(
-          this.flatmapService.mapImp,
-          entry.featureId[0],
-          connectivitySource
-        )
+        ongoingSource.push(flatmapUUID);
+        await this.flatmapQueries.queryForConnectivityNew(this.flatmapService.mapImp, entry.featureId[0], connectivitySource);
         this.tooltipEntry = this.tooltipEntry.map((tooltip) => {
           if (tooltip.featureId[0] === entry.featureId[0]) {
-            return this.flatmapQueries.updateTooltipData(tooltip)
+            return this.flatmapQueries.updateTooltipData(tooltip);
           }
-          return tooltip
+          return tooltip;
         })
-        EventBus.emit('connectivity-info-open', this.tooltipEntry)
+        EventBus.emit('connectivity-info-open', this.tooltipEntry);
       }
     },
     trackEvent: function (data) {
-      Tagging.sendEvent(data)
+      Tagging.sendEvent(data);
     },
   },
   data: function () {
@@ -890,9 +773,9 @@ export default {
       activeSpecies: defaultSpecies,
       scaffoldCamera: undefined,
       mainStyle: {
-        height: this.entry.datasetTitle ? 'calc(100% - 30px)' : '100%',
-        width: '100%',
-        bottom: '0px',
+        height: this.entry.datasetTitle ? "calc(100% - 30px)" : "100%",
+        width: "100%",
+        bottom: "0px",
       },
       helpMode: false,
       helpModeActiveItem: 0,
@@ -900,6 +783,9 @@ export default {
       multiflatmapRef: null,
       flatmapRef: null,
       scaffoldRef: null,
+      iframeRef: null,
+      plotRef: null,
+      simulationRef: null,
       scaffoldLoaded: false,
       isInHelp: false,
       mapManager: undefined,
@@ -911,22 +797,24 @@ export default {
       flatmapService: undefined,
       flatmapQueries: undefined,
       tooltipEntry: [],
-    }
+    };
   },
   created: function () {
-    this.flatmapAPI = undefined
-    this.apiLocation = undefined
-    if (this.settingsStore.flatmapAPI) this.flatmapAPI = this.settingsStore.flatmapAPI
-    if (this.settingsStore.sparcApi) this.apiLocation = this.settingsStore.sparcApi
+    this.flatmapAPI = undefined;
+    this.apiLocation = undefined;
+    if (this.settingsStore.flatmapAPI)
+      this.flatmapAPI = this.settingsStore.flatmapAPI;
+    if (this.settingsStore.sparcApi)
+      this.apiLocation = this.settingsStore.sparcApi;
     if (this.settingsStore.mapManager) {
-      this.mapManager = this.settingsStore.mapManager
+      this.mapManager = this.settingsStore.mapManager;
     }
   },
   watch: {
     helpMode: function (newVal) {
       if (!newVal) {
-        this.helpModeActiveItem = 0
+        this.helpModeActiveItem = 0;
       }
-    },
+    }
   },
-}
+};