@abi-software/mapintegratedvuer 1.21.1 → 1.22.0

package/src/mixins/ContentMixin.js

@@ -1,9 +1,5 @@
-import { markRaw } from "vue";
-import {
-  getNerveNames,
-  getParentsRegion,
-} from "../components/SimulatedData.js";
-import EventBus from "../components/EventBus";
+import { markRaw } from 'vue';
+import EventBus from '../components/EventBus';
 import { mapStores } from 'pinia';
 import { useEntriesStore } from '../stores/entries';
 import { useSettingsStore } from '../stores/settings';
@@ -11,21 +7,24 @@ 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/src/services/flatmapQueries.js';
+import {
+  getKnowledgeSource,
+  loadAndStoreKnowledge,
+} from '@abi-software/flatmapvuer/src/services/flatmapKnowledge.js';
 import {
-  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";
+  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)
+  return text[0].toUpperCase() + text.substring(1);
 }
 
-/* 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
@@ -77,7 +76,7 @@ export default {
       return !this.showGlobalSettings;
     },
   },
-  beforeUnmount: function() {
+  beforeUnmount: function () {
     this.alive = false;
   },
   mounted: function () {
@@ -126,7 +125,7 @@ export default {
     },
     onConnectivityItemClose() {
       if (this?.alive) {
-        if (this.multiflatmapRef) {
+        if (this.multiflatmapRef && this.flatmapIsReady()) {
           const currentFlatmap = this.multiflatmapRef.getCurrentFlatmap();
           if (currentFlatmap) {
             currentFlatmap.closeTooltip();
@@ -141,7 +140,7 @@ export default {
       return undefined;
     },
     openMap: function (type) {
-      EventBus.emit("OpenNewMap", type);
+      EventBus.emit('OpenNewMap', type);
       this.trackOpenMap(`open_new_${type}_map`);
     },
     onMapmanagerLoaded: function (mapManager) {
@@ -151,23 +150,23 @@ export default {
       // 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);
       }
     },
-    updateEntryTitle: function(title) {
+    updateEntryTitle: function (title) {
       if (title) {
         this.entriesStore.updateTitleForEntry(this.entry, title);
       }
     },
-    updateWithViewUrl: function() {
+    updateWithViewUrl: function () {
       return;
     },
     /**
@@ -186,15 +185,14 @@ export default {
      * Callback when the vuers emit a selected event.
      */
     resourceSelected: function (type, resources) {
-      const resource = resources[0]
+      const resource = resources[0];
       // Skip processing if resources already has actions
       if (this.resourceHasAction(resource)) {
-        EventBus.emit("PopoverActionClick", resource);
+        EventBus.emit('PopoverActionClick', resource);
         return;
       }
 
       let returnedAction = undefined;
-      let action = "none";
       let fireResourceSelected = false;
       const result = {
         paneIndex: this.entry.id,
@@ -204,25 +202,26 @@ export default {
         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") {
+      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 {
               // Facet search on anatomy if it is not a keyword search
               returnedAction = {
-                type: "Facet",
+                type: 'Facet',
                 facets: [label],
               };
               let labels = new Set();
@@ -244,77 +243,72 @@ export default {
               /* 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
-                  ])];
+                  const newFacets = [...new Set([...this.settingsStore.appliedFacets, ...labels])];
                   this.settingsStore.updateAppliedFacets(newFacets);
                 }
               } else {
                 if (labels.size > 1) {
-                  returnedAction.type = "Facets";
+                  returnedAction.type = 'Facets';
                 }
                 this.settingsStore.updateAppliedFacets(returnedAction.facets);
               }
             }
             fireResourceSelected = true;
-            if (type == "MultiFlatmap") {
+            if (type == 'MultiFlatmap') {
               const flatmap = this.$refs.multiflatmap.getCurrentFlatmap().mapImp;
               flatmap.clearSearchResults();
             }
           }
-        } else if (resource.eventType == "mouseenter") {
-          result.eventType = "highlighted";
+        } 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 === "") {
+          if (resource.data?.id === undefined || resource.data?.id === '') {
             resource.data.id = resource.data?.group;
           }
           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";
+        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"
-        )
+        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 => {
+        .then((response) => response.json())
+        .then((data) => {
           const resultPayload = data.result[0];
           let markerCurie;
           try {
             markerCurie = resultPayload.anatomy.organ[0].curie;
-          } catch (error) {
+          } catch (_error) {
             markerCurie = undefined;
           }
           let markerDoi;
           try {
             markerDoi = resultPayload.item.curie;
-          } catch (error) {
+          } catch (_error) {
             markerDoi = undefined;
           }
           let markerSpecies;
@@ -329,7 +323,7 @@ export default {
               }
               index += 1;
             }
-          } catch (error) {
+          } catch (_error) {
             markerSpecies = undefined;
           }
           // can test the featured marker by uncommenting the line below:
@@ -344,8 +338,8 @@ export default {
     },
     // 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()
+      let response = await fetch(`${this.apiLocation}get_featured_datasets_identifiers`);
+      let data = await response.json();
       if (!data.identifiers || data.identifiers.length == 0) {
         return false;
       } else {
@@ -354,12 +348,12 @@ export default {
     },
     // Check if the new featured dataset api has any info
     newFeaturedDatasetApiHasInfo: async function () {
-      let response = await fetch(`${this.apiLocation}get_featured_dataset`)
-      let data = await response.json()
+      let response = await fetch(`${this.apiLocation}get_featured_dataset`);
+      let data = await response.json();
       if (!data.datasets || data.datasets.length == 0) {
         return false;
       } else {
-        return data.datasets.map(d => d.id);
+        return data.datasets.map((d) => d.id);
       }
     },
     flatmapResourceSelected: function (type, resources) {
@@ -369,20 +363,24 @@ export default {
       const { eventType, feature } = firstResource;
       const { viewingMode } = this.settingsStore.globalSettings;
 
-      if (eventType === 'click' && feature.type === 'feature' && feature.models?.startsWith('ilxtr:')) {
+      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 => {
+        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
+          event: 'interaction_event',
+          event_name: 'portal_maps_connectivity',
+          category: categories.join(', '),
+          location: type + ' ' + viewingMode,
         });
       }
     },
@@ -401,8 +399,8 @@ export default {
       }
       // Update the store with the new list of featured datasets
       this.settingsStore.updateFeatured(datasetIds);
-      datasetIds.forEach(element => {
-        this.getDatasetAnatomyInfo(element)
+      datasetIds.forEach((element) => {
+        this.getDatasetAnatomyInfo(element);
       });
     },
     flatmapMarkerUpdate() {
@@ -411,20 +409,20 @@ export default {
     onResize: function () {
       return;
     },
-    updateViewerSettings: function() {
+    updateViewerSettings: function () {
       return;
     },
     startHelp: function () {
       if (this?.alive) {
         if (this.isInHelp === false) {
           this.helpMode = true;
-          window.addEventListener("mousedown", this.checkEndHelpMouseDown);
+          window.addEventListener('mousedown', this.checkEndHelpMouseDown);
           this.isInHelp = true;
         }
       }
     },
     endHelp: function () {
-      window.removeEventListener("mousedown", this.checkEndHelpMouseDown);
+      window.removeEventListener('mousedown', this.checkEndHelpMouseDown);
       this.helpMode = false;
       setTimeout(() => {
         this.isInHelp = false;
@@ -485,9 +483,11 @@ export default {
 
       // to highlight connected paths
       if (globalSettings.highlightConnectedPaths) {
-        const hoverEntry = hoverAnatomies.length ? hoverAnatomies :
-          hoverConnectivity.length ? hoverConnectivity :
-            []
+        const hoverEntry = hoverAnatomies.length
+          ? hoverAnatomies
+          : hoverConnectivity.length
+            ? hoverConnectivity
+            : [];
         const connectedPaths = await flatmap.retrieveConnectedPaths(hoverEntry);
         if (connectedPaths) {
           toHighlight.push(...connectedPaths);
@@ -505,9 +505,10 @@ export default {
       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;
@@ -522,49 +523,56 @@ export default {
 
         // reset
         clearTimeout(this.highlightDelay);
-        if (!hoverAnatomies.length && !hoverOrgans.length && !hoverDOI && !hoverConnectivity.length) {
+        if (
+          !hoverAnatomies.length &&
+          !hoverOrgans.length &&
+          !hoverDOI &&
+          !hoverConnectivity.length
+        ) {
           if ((this.multiflatmapRef || this.flatmapRef) && flatmap) {
             if (flatmap.mapImp && !flatmap.mapImp.contextLost) {
               flatmap.mapImp?.clearSearchResults();
               if (payload.connectivityProcessed) {
                 // grey out all connectivity if no search results
-                flatmap.mapImp?.setPaint({ dimmed: true })
+                flatmap.mapImp?.setPaint({ dimmed: true });
               }
             }
           } else if (this.scaffoldRef && scaffold) {
-            scaffold.changeHighlightedByName(hoverOrgans, "", false);
+            scaffold.changeHighlightedByName(hoverOrgans, '', false);
           }
         }
 
         this.highlightDelay = setTimeout(() => {
           if (hoverAnatomies.length || hoverOrgans.length || hoverDOI || hoverConnectivity.length) {
             if ((this.multiflatmapRef || this.flatmapRef) && flatmap) {
-              this.flatmapHighlight(flatmap, hoverAnatomies, hoverDOI, hoverConnectivity).then((paths) => {
-                try {
-                  flatmap.showConnectivityTooltips({
-                    connectivityInfo: { featureId: paths },
-                    data: []
-                  });
-                } catch (error) {
-                  console.log(error)
-                  // only for connectivity hover highlight
-                  if (hoverConnectivity.length && flatmap.mapImp) {
-                    const uuid = flatmap.mapImp.uuid;
-                    const found = paths.every((path) =>
-                      this.connectivityKnowledge[uuid].some((connectivity) =>
-                        connectivity.id === path
-                      )
-                    );
-                    if (!found) {
-                      if (flatmap.mapImp && !flatmap.mapImp.contextLost) {
-                        flatmap.mapImp.clearSearchResults();
+              this.flatmapHighlight(flatmap, hoverAnatomies, hoverDOI, hoverConnectivity).then(
+                (paths) => {
+                  try {
+                    flatmap.showConnectivityTooltips({
+                      connectivityInfo: { featureId: paths },
+                      data: [],
+                    });
+                  } catch (error) {
+                    console.log(error);
+                    // only for connectivity hover highlight
+                    if (hoverConnectivity.length && flatmap.mapImp) {
+                      const uuid = flatmap.mapImp.uuid;
+                      const found = paths.every((path) =>
+                        this.connectivityKnowledge[uuid].some(
+                          (connectivity) => connectivity.id === path,
+                        ),
+                      );
+                      if (!found) {
+                        if (flatmap.mapImp && !flatmap.mapImp.contextLost) {
+                          flatmap.mapImp.clearSearchResults();
+                        }
                       }
                     }
                   }
-                }
-              });
+                },
+              );
             } else if (this.scaffoldRef && scaffold) {
-              scaffold.changeHighlightedByName(hoverOrgans, "", false);
+              scaffold.changeHighlightedByName(hoverOrgans, '', false);
             }
           }
         }, 100);
@@ -588,30 +596,30 @@ export default {
     onConnectivityInfoClose: function () {
       EventBus.emit('connectivity-info-close');
     },
-    onSidebarAnnotationClose: function() {
+    onSidebarAnnotationClose: function () {
       return;
     },
     onNeuronConnectionFeatureClick: function (payload) {
       EventBus.emit('neuron-connection-feature-click', payload);
     },
-    showConnectivity: function() {
+    showConnectivity: function () {
       return;
     },
     showConnectivityTooltips: function () {
       return;
     },
-    setVisibilityFilter: function() {
+    setVisibilityFilter: function () {
       return;
     },
     loadExplorerConfig: async function () {
       this.flatmapService = await this.mockUpFlatmapService();
       this.loadConnectivityExplorerConfig(this.flatmapService);
     },
-    mockUpFlatmapService: async function() {
+    mockUpFlatmapService: async function () {
       const flatmapResponse = await fetch(this.flatmapAPI);
       const flatmapJson = await flatmapResponse.json();
       const latestFlatmap = flatmapJson
-        .filter(f => f.id === 'human-flatmap_male')
+        .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'];
@@ -622,36 +630,37 @@ export default {
       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';
+        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`;
+        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;
         },
@@ -660,16 +669,21 @@ export default {
       const scaffoldFilterOptions = getScaffoldFilterOptions();
       const combinedFilterOptions = async (flatmapImp, providedKnowledge) => {
         const providedPathways = undefined;
-        const flatmapFilterOptions = await getFlatmapFilterOptions(this.flatmapAPI, flatmapImp, providedKnowledge, providedPathways);
+        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;
@@ -682,22 +696,28 @@ export default {
         this.flatmapQueries.initialise(this.flatmapAPI);
         const knowledge = await loadAndStoreKnowledge(flatmapImp, this.flatmapQueries);
         this.connectivityKnowledge[sckanVersion] = knowledge
-          .filter(item => item.connectivity?.length)
+          .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);
+        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() || {};
         // 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;
@@ -711,28 +731,34 @@ export default {
               }, []);
               if (nerveLabels?.length) {
                 validNerves.push(...nerveLabels);
-                payload["nerve-label"] = nerveLabels.sort((a, b) => a.nerve.localeCompare(b.nerve));
+                payload['nerve-label'] = nerveLabels.sort((a, b) => a.nerve.localeCompare(b.nerve));
               }
             }
             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();
@@ -744,13 +770,15 @@ export default {
       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;
@@ -760,7 +788,9 @@ export default {
     },
     getKnowledgeTooltip: async function (payload) {
       this.tooltipEntry = [];
-      payload.data.forEach(d => this.tooltipEntry.push({ title: d.label, featureId: [d.id], ready: false }));
+      payload.data.forEach((d) =>
+        this.tooltipEntry.push({ title: d.label, featureId: [d.id], ready: false }),
+      );
       EventBus.emit('connectivity-info-open', this.tooltipEntry);
 
       let prom1 = [];
@@ -769,7 +799,7 @@ export default {
         prom1.push(await this.knowledgeTooltipQuery(payload.data[index]));
       }
       this.tooltipEntry = await Promise.all(prom1);
-      const featureIds = this.tooltipEntry.map(tooltip => tooltip.featureId[0]);
+      const featureIds = this.tooltipEntry.map((tooltip) => tooltip.featureId[0]);
       if (featureIds.length > 0) {
         EventBus.emit('connectivity-info-open', this.tooltipEntry);
       }
@@ -779,13 +809,17 @@ export default {
       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);
+        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 tooltip;
-        })
+        });
         EventBus.emit('connectivity-info-open', this.tooltipEntry);
       }
     },
@@ -810,8 +844,8 @@ export default {
       const connectivities = uuid ? this.connectivitiesStore?.globalConnectivities?.[uuid] : null;
 
       // Make features unique by it's id.
-      const uniqueFeatures = features.filter((feature, index, self) =>
-        index === self.findIndex((f) => f.id === feature.id)
+      const uniqueFeatures = features.filter(
+        (feature, index, self) => index === self.findIndex((f) => f.id === feature.id),
       );
 
       for (const feature of uniqueFeatures) {
@@ -822,12 +856,10 @@ export default {
         }
         // Look up long-label from the connectivity store
         if (connectivities) {
-          const match = connectivities.find(c => c.id === featureId);
+          const match = connectivities.find((c) => c.id === featureId);
           const truncate = this.truncateLongLabel?.value ?? this.truncateLongLabel;
           const lineClamp = 3;
-          const withIdStyles = [
-            `margin-bottom: 4px`,
-          ];
+          const withIdStyles = [`margin-bottom: 4px`];
           const truncateStyles = [
             `display: -webkit-box`,
             `-webkit-line-clamp: ${lineClamp}`,
@@ -836,11 +868,11 @@ export default {
           ];
           const styles = [
             ...(this.showIdInTooltip ? withIdStyles : []),
-            ...(truncate ? truncateStyles : [])
+            ...(truncate ? truncateStyles : []),
           ].join(';');
 
           if (match && match['long-label']) {
-            let labelTag = []
+            let labelTag = [];
             labelTag.push(`<div style="${styles}">${capitalise(match['long-label'])}</div>`);
             if (this.showIdInTooltip) {
               labelTag.push(`<span class="id-tag">${featureId}</span>`);
@@ -863,9 +895,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,
@@ -892,10 +924,8 @@ export default {
   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;
+    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;
     }
@@ -905,6 +935,6 @@ export default {
       if (!newVal) {
         this.helpModeActiveItem = 0;
       }
-    }
+    },
   },
 };