From cae7e236b6502824104f6afc559037881d83d95f Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Wed, 1 Apr 2026 16:42:49 +1300
Subject: [PATCH 01/25] Add cell cards api

---
 .env                          | 1 +
 src/App.vue                   | 1 +
 src/components/MapContent.vue | 1 +
 src/components/SplitFlow.vue  | 1 +
 src/stores/settings.js        | 4 ++++
 5 files changed, 8 insertions(+)

diff --git a/.env b/.env
index d616f95f..dedacd3d 100644
--- a/.env
+++ b/.env
@@ -6,3 +6,4 @@
 //VITE_PENNSIEVE_API_LOCATION=https://api.pennsieve.io
 #VITE_API_LOCATION=https://sparc-api.herokuapp.com/
 VITE_SPARC_API=https://alan-wu-portal-api.herokuapp.com/
+VITE_APP_CELL_CARDS_API=http://localhost:8787/cellCardsData.json
diff --git a/src/App.vue b/src/App.vue
index 3977e04e..1211f6e3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -177,6 +177,7 @@ export default {
         algoliaId: import.meta.env.VITE_ALGOLIA_ID,
         pennsieveApi: import.meta.env.VITE_PENNSIEVE_API_LOCATION,
         flatmapAPI: this.$route.query.flatmapserver ? this.$route.query.flatmapserver : import.meta.env.VITE_FLATMAPAPI_LOCATION,
+        cellCardsApi: import.meta.env.VITE_APP_CELL_CARDS_API,
         rootUrl: import.meta.env.VITE_ROOT_URL,
       }
     }
diff --git a/src/components/MapContent.vue b/src/components/MapContent.vue
index 79b078e5..f326a55b 100644
--- a/src/components/MapContent.vue
+++ b/src/components/MapContent.vue
@@ -411,6 +411,7 @@ export default {
       this.options.algoliaId ? this.settingsStore.updateAlgoliaId(this.options.algoliaId) : null;
       this.options.pennsieveApi ? this.settingsStore.updatePennsieveApi(this.options.pennsieveApi) : null;
       this.options.flatmapAPI ? this.settingsStore.updateFlatmapAPI(this.options.flatmapAPI) : null;
+      this.options.cellCardsApi ? this.settingsStore.updateCellCardsApi(this.options.cellCardsApi) : null;
       this.options.rootUrl ? this.settingsStore.updateRootUrl(this.options.rootUrl) : null;
     }
     this.settingsStore.updateAllClosable(this.allClosable);
diff --git a/src/components/SplitFlow.vue b/src/components/SplitFlow.vue
index c4c1352c..f8deb381 100644
--- a/src/components/SplitFlow.vue
+++ b/src/components/SplitFlow.vue
@@ -1082,6 +1082,7 @@ export default {
         PENNSIEVE_API_LOCATION: this.settingsStore.pennsieveApi,
         ROOT_URL: this.settingsStore.rootUrl,
         FLATMAPAPI_LOCATION: this.settingsStore.flatmapAPI,
+        CELL_CARDS_API: this.settingsStore.cellCardsApi,
       };
     },
     entries: function() {
diff --git a/src/stores/settings.js b/src/stores/settings.js
index 510ee4b7..0d0a1acd 100644
--- a/src/stores/settings.js
+++ b/src/stores/settings.js
@@ -12,6 +12,7 @@ export const useSettingsStore = defineStore('settings', {
       algoliaId: undefined,
       pennsieveApi: undefined,
       flatmapAPI: undefined,
+      cellCardsApi: undefined,
       mapManager: undefined,
       rootUrl: undefined,
       facets: { species: [], gender: [], organ: [] },
@@ -110,6 +111,9 @@ export const useSettingsStore = defineStore('settings', {
     updateFlatmapAPI(flatmapAPI) {
       this.flatmapAPI = flatmapAPI;
     },
+    updateCellCardsApi(cellCardsApi) {
+      this.cellCardsApi = cellCardsApi;
+    },
     updateMapManager(mapManager) {
       this.mapManager = mapManager;
     },

From 7cec10816d3e6b737e2007b5f1e0afb6481c8d48 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Wed, 6 May 2026 19:29:30 +1200
Subject: [PATCH 02/25] Add cell cards explorer show hide toggle

---
 src/App.vue                   | 6 ++++++
 src/components/MapContent.vue | 8 ++++++++
 src/components/SplitFlow.vue  | 5 +++++
 3 files changed, 19 insertions(+)

diff --git a/src/App.vue b/src/App.vue
index 1211f6e3..06fc87f3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -25,6 +25,7 @@
                 <el-button @click="setFlatmap()" size="small">Set Flatmap</el-button>
                 <el-button @click="setSearch()" size="small">Set Search</el-button>
                 <el-button @click="toggleLongLabel()" size="small">Toggle Long Label</el-button>
+                <el-button @click="toggleCellCards()" size="small">Toggle Cell Cards</el-button>
               </div>
             </div>
             <template #reference>
@@ -42,6 +43,7 @@
         :options="options"
         :state="state"
         :showLongLabel="showLongLabel"
+        :showCellCards="showCellCards"
         :shareLink="shareLink"
         :useHelpModeDialog="true"
         :connectivityInfoSidebar="true"
@@ -161,6 +163,7 @@ export default {
       ElIconSetting: shallowRef(ElIconSetting),
       routerIsReady: false,
       showLongLabel: true,
+      showCellCards: false,
     }
   },
   computed: {
@@ -316,6 +319,9 @@ export default {
     toggleLongLabel: function() {
       this.showLongLabel = !this.showLongLabel;
     },
+    toggleCellCards: function() {
+      this.showCellCards = !this.showCellCards;
+    },
     mapIsLoaded: function(map) {
       console.log("map is loaded", map)
       // map.changeViewingMode('Annotation')
diff --git a/src/components/MapContent.vue b/src/components/MapContent.vue
index f326a55b..a01e22eb 100644
--- a/src/components/MapContent.vue
+++ b/src/components/MapContent.vue
@@ -12,6 +12,7 @@
         @onFullscreen="onFullscreen"
         :state="stateToSet"
         :showLongLabel="showLongLabel"
+        :showCellCards="showCellCards"
         ref="flow"
         @vue:mounted="flowMounted"
       />
@@ -64,6 +65,13 @@ export default {
       type: Boolean,
       default: true,
     },
+    /**
+     * The option to show cell cards explorer in the sidebar.
+     */
+    showCellCards: {
+      type: Boolean,
+      default: false,
+    },
     /**
      * The options include APIs and Keys.
      */
diff --git a/src/components/SplitFlow.vue b/src/components/SplitFlow.vue
index 31664131..f3278b67 100644
--- a/src/components/SplitFlow.vue
+++ b/src/components/SplitFlow.vue
@@ -31,6 +31,7 @@
           :filterOptions="filterOptions"
           :showVisibilityFilter="showVisibilityFilter"
           :showLongLabel="showLongLabel"
+          :showCellCards="showCellCards"
           @tabClicked="onSidebarTabClicked"
           @tabClosed="onSidebarTabClosed"
           @actionClick="actionClick"
@@ -153,6 +154,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    showCellCards: {
+      type: Boolean,
+      default: false,
+    },
   },
   data: function () {
     return {

From 1a0967acc3f13f99f239a9a0be76f02d67148f79 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Thu, 7 May 2026 13:46:09 +1200
Subject: [PATCH 03/25] Update split-flow entries resource with correct species
 information

---
 src/components/viewers/MultiFlatmap.vue | 2 +-
 src/stores/entries.js                   | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/viewers/MultiFlatmap.vue b/src/components/viewers/MultiFlatmap.vue
index 3ddacd8c..2a702c60 100644
--- a/src/components/viewers/MultiFlatmap.vue
+++ b/src/components/viewers/MultiFlatmap.vue
@@ -200,7 +200,7 @@ export default {
     updateProvCard: function() {
       const imp = this.getFlatmapImp();
       if (imp) {
-        let provClone = {id: this.entry.id, prov: imp.mapMetadata};
+        let provClone = {id: this.entry.id, prov: imp.mapMetadata, species: this.activeSpecies};
         EventBus.emit("mapImpProv", provClone);
         this.$emit("flatmap-provenance-ready", provClone);
       }
diff --git a/src/stores/entries.js b/src/stores/entries.js
index 0cddf703..e401b68e 100644
--- a/src/stores/entries.js
+++ b/src/stores/entries.js
@@ -41,6 +41,9 @@ export const useEntriesStore = defineStore('entries', {
         const sckanVersion = getKnowledgeSourceFromProvenance(prov.prov);
         entry['uuid'] = prov.prov.uuid;
         entry['sckanVersion'] = sckanVersion;
+        if (entry.type === 'MultiFlatmap' && prov.species) {
+          entry['resource'] = prov.species;
+        }
       }
     },
     updateLabelForEntry(targetEntry, label) {

From a260a951bff27767ea9eae9bf8e6a5a231599a99 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Thu, 7 May 2026 14:06:48 +1200
Subject: [PATCH 04/25] Filter and emit active species from entries

---
 src/components/SplitDialog.vue | 4 ++++
 src/components/SplitFlow.vue   | 6 ++++++
 2 files changed, 10 insertions(+)

diff --git a/src/components/SplitDialog.vue b/src/components/SplitDialog.vue
index fe1287ce..18afa5d9 100644
--- a/src/components/SplitDialog.vue
+++ b/src/components/SplitDialog.vue
@@ -173,6 +173,10 @@ export default {
       const wholeBodyScaffoldIDs = [307, '307'];
       const sckanVersion = Object.keys(this.connectivitiesStore.globalConnectivities)
         .find(key => key.includes('sckan'));
+      // Filter active entries and emit their resources (species)
+      const activeEntries = this.entries.filter((entry) => activePaneIDs.includes(entry.id));
+      const activeSpecies = activeEntries.map((entry) => entry.resource);
+      this.$emit('update-active-species', activeSpecies);
       const uuids = Array.from(
         new Set(
           this.entries
diff --git a/src/components/SplitFlow.vue b/src/components/SplitFlow.vue
index f3278b67..7378e94f 100644
--- a/src/components/SplitFlow.vue
+++ b/src/components/SplitFlow.vue
@@ -60,6 +60,7 @@
           ref="splitdialog"
           @resource-selected="resourceSelected"
           @species-changed="speciesChanged"
+          @update-active-species="updateActiveSpeciesForEntries"
         />
       </div>
     </el-main>
@@ -889,6 +890,11 @@ export default {
         })
       }
     },
+    updateActiveSpeciesForEntries: function (activeSpecies) {
+      if (this.$refs.sideBar) {
+        this.$refs.sideBar.updateActiveSpeciesForEntries(activeSpecies);
+      }
+    },
     contextUpdate: function (payload) {
       EventBus.emit("contextUpdate", payload);
     },

From 4304c03c46689ebdc1acabb65ac516e930caf01a Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Mon, 18 May 2026 18:19:55 +1200
Subject: [PATCH 05/25] Add show soma location tooltip on map

---
 src/components/ContentVuer.vue          |  3 +++
 src/components/SplitDialog.vue          |  6 ++++++
 src/components/SplitFlow.vue            |  4 ++++
 src/components/viewers/Flatmap.vue      | 22 ++++++++++++++++++++++
 src/components/viewers/MultiFlatmap.vue | 22 ++++++++++++++++++++++
 src/mixins/ContentMixin.js              |  3 +++
 6 files changed, 60 insertions(+)

diff --git a/src/components/ContentVuer.vue b/src/components/ContentVuer.vue
index 7b44eb3f..28e595d5 100644
--- a/src/components/ContentVuer.vue
+++ b/src/components/ContentVuer.vue
@@ -146,6 +146,9 @@ export default {
     onShowConnectivityTooltips: function(payload) {
       this.$refs.viewer?.showConnectivityTooltips(payload);
     },
+    onShowFeatureInFlatmap: function(payload) {
+      this.$refs.viewer?.showFeatureInFlatmap(payload);
+    },
     onShowReferenceConnectivity: function(payload) {
       this.$refs.viewer?.showConnectivitiesByReference(payload);
     },
diff --git a/src/components/SplitDialog.vue b/src/components/SplitDialog.vue
index 18afa5d9..f5400645 100644
--- a/src/components/SplitDialog.vue
+++ b/src/components/SplitDialog.vue
@@ -643,6 +643,12 @@ export default {
         content.onShowConnectivityTooltips(payload);
       });
     });
+    EventBus.on('soma-location-hovered', (payload) => {
+      const contents = this.getActiveContents();
+      contents.forEach((content) => {
+        content.onShowFeatureInFlatmap(payload);
+      });
+    });
     EventBus.on('connectivity-source-change', (payload) => {
       const contents = this.getActiveContents();
       //Use ongoingSource array to make sure, the knowledge
diff --git a/src/components/SplitFlow.vue b/src/components/SplitFlow.vue
index 2e117268..a34f7bc6 100644
--- a/src/components/SplitFlow.vue
+++ b/src/components/SplitFlow.vue
@@ -53,6 +53,7 @@
           @show-connectivity-graph="onShowConnectivityGraph"
           @filter-visibility="onFilterVisibility"
           @connectivity-item-close="onConnectivityItemClose"
+          @soma-location-hovered="showSomaLocation"
           @trackEvent="trackEvent"
         />
         <SplitDialog
@@ -601,6 +602,9 @@ export default {
     onConnectivityHovered: function (data) {
       EventBus.emit('connectivity-hovered', data);
     },
+    showSomaLocation: function (name) {
+      EventBus.emit('soma-location-hovered', name);
+    },
     onConnectivitySourceChange: function (data) {
       this.connectivityExplorerClicked.push(true);
       EventBus.emit('connectivity-source-change', data);
diff --git a/src/components/viewers/Flatmap.vue b/src/components/viewers/Flatmap.vue
index 99930125..09b92783 100644
--- a/src/components/viewers/Flatmap.vue
+++ b/src/components/viewers/Flatmap.vue
@@ -166,6 +166,28 @@ export default {
         flatmap.showConnectivityTooltips(payload);
       }
     },
+    showFeatureInFlatmap: function (payload) {
+      if (this?.alive && this.flatmapReady) {
+        const flatmap = this.$refs.flatmap;
+
+        if (payload) {
+          const searchResults = flatmap.searchSuggestions(payload);
+          let geoJSONID = undefined;
+
+          if (searchResults?.results.length) {
+            const featureId = searchResults?.results[0].featureId;
+            geoJSONID = featureId;
+          }
+
+          if (geoJSONID) {
+            flatmap.showPopup(geoJSONID, payload);
+          }
+        } else {
+          flatmap.closeTooltip();
+          this.showConnectivityTooltips({connectivityInfo: null, data: []});
+        }
+      }
+    },
     showConnectivitiesByReference: function (payload) {
       if (this?.alive) {
         const currentFlatmap = this.$refs.flatmap;
diff --git a/src/components/viewers/MultiFlatmap.vue b/src/components/viewers/MultiFlatmap.vue
index 2a702c60..f6e5a783 100644
--- a/src/components/viewers/MultiFlatmap.vue
+++ b/src/components/viewers/MultiFlatmap.vue
@@ -355,6 +355,28 @@ export default {
         flatmap.showConnectivityTooltips(payload);
       }
     },
+    showFeatureInFlatmap: function (payload) {
+      if (this?.alive && this.flatmapReady) {
+        const flatmap = this.$refs.multiflatmap.getCurrentFlatmap();
+
+        if (payload) {
+          const searchResults = flatmap.searchSuggestions(payload);
+          let geoJSONID = undefined;
+
+          if (searchResults?.results.length) {
+            const featureId = searchResults?.results[0].featureId;
+            geoJSONID = featureId;
+          }
+
+          if (geoJSONID) {
+            flatmap.showPopup(geoJSONID, payload);
+          }
+        } else {
+          flatmap.closeTooltip();
+          this.showConnectivityTooltips({connectivityInfo: null, data: []});
+        }
+      }
+    },
     showConnectivitiesByReference: function (payload) {
       if (this?.alive && this.flatmapReady && this.$refs.multiflatmap) {
         const currentFlatmap = this.$refs.multiflatmap.getCurrentFlatmap();
diff --git a/src/mixins/ContentMixin.js b/src/mixins/ContentMixin.js
index b08052d0..0675abbc 100644
--- a/src/mixins/ContentMixin.js
+++ b/src/mixins/ContentMixin.js
@@ -574,6 +574,9 @@ export default {
     showConnectivityTooltips: function () {
       return;
     },
+    showFeatureInFlatmap: function () {
+      return;
+    },
     setVisibilityFilter: function() {
       return;
     },

From 102b62da1f14b2b947672b5ef979ba1843973d0c Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Tue, 19 May 2026 10:11:25 +1200
Subject: [PATCH 06/25] Update the app's show cell card explorer button

---
 src/App.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 06fc87f3..5a110e3e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -25,7 +25,7 @@
                 <el-button @click="setFlatmap()" size="small">Set Flatmap</el-button>
                 <el-button @click="setSearch()" size="small">Set Search</el-button>
                 <el-button @click="toggleLongLabel()" size="small">Toggle Long Label</el-button>
-                <el-button @click="toggleCellCards()" size="small">Toggle Cell Cards</el-button>
+                <el-button @click="showCellCardExplorer()" size="small">Show Cell Card Explorer</el-button>
               </div>
             </div>
             <template #reference>
@@ -319,8 +319,8 @@ export default {
     toggleLongLabel: function() {
       this.showLongLabel = !this.showLongLabel;
     },
-    toggleCellCards: function() {
-      this.showCellCards = !this.showCellCards;
+    showCellCardExplorer: function() {
+      this.showCellCards = true;
     },
     mapIsLoaded: function(map) {
       console.log("map is loaded", map)

From f9d0dc681e3a0d4f87f38bd6318dcd5423d60312 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Tue, 19 May 2026 10:26:23 +1200
Subject: [PATCH 07/25] Disable the show cell card explorer before the map is
 loaded

---
 src/App.vue | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index 5a110e3e..72662849 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -25,7 +25,9 @@
                 <el-button @click="setFlatmap()" size="small">Set Flatmap</el-button>
                 <el-button @click="setSearch()" size="small">Set Search</el-button>
                 <el-button @click="toggleLongLabel()" size="small">Toggle Long Label</el-button>
-                <el-button @click="showCellCardExplorer()" size="small">Show Cell Card Explorer</el-button>
+                <el-button @click="showCellCardExplorer()" size="small" :disabled="!isMapLoaded">
+                  Show Cell Card Explorer
+                </el-button>
               </div>
             </div>
             <template #reference>
@@ -164,6 +166,7 @@ export default {
       routerIsReady: false,
       showLongLabel: true,
       showCellCards: false,
+      isMapLoaded: false,
     }
   },
   computed: {
@@ -321,9 +324,18 @@ export default {
     },
     showCellCardExplorer: function() {
       this.showCellCards = true;
+      // Open the cell card explorer tab only after the map is loaded.
+      // It can be opened before the map is loaded,
+      // but the tab will switch back to dataset explorer after the map is loaded.
+      const splitFlow = this.$refs.map.$refs.flow;
+      if (splitFlow.$refs.sideBar && this.isMapLoaded) {
+        splitFlow.$refs.sideBar.tabClicked({ id: 4, type: 'cellCardExplorer' });
+        splitFlow.$refs.sideBar.setDrawerOpen(true);
+      }
     },
     mapIsLoaded: function(map) {
       console.log("map is loaded", map)
+      this.isMapLoaded = true;
       // map.changeViewingMode('Annotation')
     },
     viewerIsReady: function() {

From 93a89ed129e6f1e13f5e7601fffe92cabb756c99 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Fri, 29 May 2026 15:50:38 +1200
Subject: [PATCH 08/25] Add cell card exploration viewing mode

---
 src/components/DialogToolbarContent.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/DialogToolbarContent.vue b/src/components/DialogToolbarContent.vue
index 6d386815..f0b9f69e 100644
--- a/src/components/DialogToolbarContent.vue
+++ b/src/components/DialogToolbarContent.vue
@@ -29,6 +29,9 @@
           <el-icon class="el-icon--left" v-if="globalSettings.viewingMode === 'Annotation'">
             <el-icon-edit-pen />
           </el-icon>
+          <el-icon class="el-icon--left" v-if="globalSettings.viewingMode === 'Cell Type'">
+            <el-icon-cpu />
+          </el-icon>
           {{ globalSettings.viewingMode }}
           <template v-if="globalSettings.viewingMode === 'Neuron Connection'">
             &nbsp;
@@ -56,6 +59,9 @@
                 <el-icon class="el-icon--left" v-if="key === 'Annotation'">
                   <el-icon-edit-pen />
                 </el-icon>
+                <el-icon class="el-icon--left" v-if="key === 'Cell Type'">
+                  <el-icon-cpu />
+                </el-icon>
                 {{ key }}
               </h5>
               <small class="el-option__description">
@@ -435,6 +441,7 @@ import {
   ElButton as Button,
   ElCheckbox as Checkbox,
   ElCol as Col,
+  ElIcon,
   ElIcon as Icon,
   ElInput as Input,
   ElPopover as Popover,
@@ -520,7 +527,8 @@ export default {
       viewingModes: {
         'Exploration': 'Find relevant research and view detail of neural pathways by selecting a pathway to view its connections and data sources',
         'Neuron Connection': 'Discover neuron connections by selecting a feature and viewing its associated network connections',
-        'Annotation': ['View feature annotations', 'Add, comment on and view feature annotations']
+        'Annotation': ['View feature annotations', 'Add, comment on and view feature annotations'],
+        'Cell Type': 'Explore cell cards for different cell types and their associated data',
       },
       authorisedUser: false,
       mapLoaded: false,

From c7cf51da65e9dc733320c6198efcf86e9e88c499 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Fri, 29 May 2026 16:02:24 +1200
Subject: [PATCH 09/25] Add cell type viewing mode for cell cards

---
 src/components/DialogToolbarContent.vue |  4 ++++
 src/components/SplitFlow.vue            | 15 ++++++++++++++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/components/DialogToolbarContent.vue b/src/components/DialogToolbarContent.vue
index f0b9f69e..bf6b0d78 100644
--- a/src/components/DialogToolbarContent.vue
+++ b/src/components/DialogToolbarContent.vue
@@ -560,6 +560,10 @@ export default {
         }
 
         this.updateGlobalSettings('viewingMode');
+
+        if (value === 'Cell Type') {
+          this.$emit('open-cell-card-explorer');
+        }
       }
     },
     updateGlobalSettings: function(changedKey) {
diff --git a/src/components/SplitFlow.vue b/src/components/SplitFlow.vue
index a34f7bc6..7363f4a9 100644
--- a/src/components/SplitFlow.vue
+++ b/src/components/SplitFlow.vue
@@ -11,6 +11,7 @@
         @onFullscreen="onFullscreen"
         @local-search="onDisplaySearch"
         @fetch-suggestions="fetchSuggestions"
+        @open-cell-card-explorer="openCellCardExplorerFromToolbar"
         ref="dialogToolbar"
       />
     </el-header>
@@ -31,7 +32,7 @@
           :filterOptions="filterOptions"
           :showVisibilityFilter="showVisibilityFilter"
           :showLongLabel="showLongLabel"
-          :showCellCards="showCellCards"
+          :showCellCards="resolvedShowCellCards"
           @tabClicked="onSidebarTabClicked"
           @tabClosed="onSidebarTabClosed"
           @actionClick="actionClick"
@@ -193,6 +194,7 @@ export default {
       filterVisibility: true,
       filterOptions: [],
       annotationHighlight: [],
+      cellCardExplorerRequested: false,
     }
   },
   watch: {
@@ -219,6 +221,14 @@ export default {
     },
   },
   methods: {
+    openCellCardExplorerFromToolbar: function () {
+      this.cellCardExplorerRequested = true;
+
+      if (this.$refs.sideBar) {
+        this.$refs.sideBar.tabClicked({ id: 4, type: 'cellCardExplorer' });
+        this.$refs.sideBar.setDrawerOpen(true);
+      }
+    },
     onFilterVisibility: function (state) {
       this.filterVisibility = state;
       const filterExpression = {
@@ -1095,6 +1105,9 @@ export default {
   },
   computed: {
     ...mapStores(useEntriesStore, useSettingsStore, useSplitFlowStore, useConnectivitiesStore),
+    resolvedShowCellCards: function () {
+      return this.showCellCards || this.cellCardExplorerRequested;
+    },
     envVars: function () {
       return {
         API_LOCATION: this.settingsStore.sparcApi,

From 66db74cbcc2f7f57d7a6442bd4d360beed174ab1 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Fri, 29 May 2026 17:08:18 +1200
Subject: [PATCH 10/25] Receive soma locations from sidebar cell cards

---
 src/components/SplitFlow.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/SplitFlow.vue b/src/components/SplitFlow.vue
index 7363f4a9..d11cbfa9 100644
--- a/src/components/SplitFlow.vue
+++ b/src/components/SplitFlow.vue
@@ -55,6 +55,7 @@
           @filter-visibility="onFilterVisibility"
           @connectivity-item-close="onConnectivityItemClose"
           @soma-location-hovered="showSomaLocation"
+          @soma-locations-ready="onSomaLocationsReady"
           @trackEvent="trackEvent"
         />
         <SplitDialog
@@ -195,6 +196,7 @@ export default {
       filterOptions: [],
       annotationHighlight: [],
       cellCardExplorerRequested: false,
+      cellCardSomaLocations: [],
     }
   },
   watch: {
@@ -615,6 +617,9 @@ export default {
     showSomaLocation: function (name) {
       EventBus.emit('soma-location-hovered', name);
     },
+    onSomaLocationsReady: function (somaLocations) {
+      this.cellCardSomaLocations = [...new Set((somaLocations || []).filter(Boolean))];
+    },
     onConnectivitySourceChange: function (data) {
       this.connectivityExplorerClicked.push(true);
       EventBus.emit('connectivity-source-change', data);

From 3fec3a17f1650556940aec9a8a56f0139be60d11 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Sun, 31 May 2026 13:00:21 +1200
Subject: [PATCH 11/25] Receive soma locations from cell card explorer

---
 src/components/SplitFlow.vue | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/SplitFlow.vue b/src/components/SplitFlow.vue
index d11cbfa9..ca9de710 100644
--- a/src/components/SplitFlow.vue
+++ b/src/components/SplitFlow.vue
@@ -618,7 +618,19 @@ export default {
       EventBus.emit('soma-location-hovered', name);
     },
     onSomaLocationsReady: function (somaLocations) {
-      this.cellCardSomaLocations = [...new Set((somaLocations || []).filter(Boolean))];
+      const normalizedSomaLocations = (Array.isArray(somaLocations) ? somaLocations : [])
+        .map((item) => {
+          return {
+            label: String(item?.label || '').trim(),
+            curie: String(item?.curie || '').trim(),
+          };
+        })
+        .filter((item) => item.label);
+
+      this.cellCardSomaLocations = [...new Map(
+        normalizedSomaLocations.map((item) => [item.label.toLowerCase(), item])
+      ).values()];
+      // TODO: use cellCardSomaLocations to place markers on flatmap for cell card explorer.
     },
     onConnectivitySourceChange: function (data) {
       this.connectivityExplorerClicked.push(true);

From 42c1ae01238914aaa76938721d0e3cab4faa7c79 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Sun, 31 May 2026 13:37:13 +1200
Subject: [PATCH 12/25] Show dataset markers on cell type exploration mode

---
 src/components.d.ts                     |  3 +++
 src/components/DialogToolbarContent.vue |  3 +++
 src/components/SplitFlow.vue            |  3 ++-
 src/mixins/DynamicMarkerMixin.js        | 27 ++++++++++++++++++++++++-
 src/stores/settings.js                  |  4 ++++
 5 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/src/components.d.ts b/src/components.d.ts
index 36a78026..0ebd6d22 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -30,8 +30,11 @@ declare module 'vue' {
     ElIconArrowDown: typeof import('@element-plus/icons-vue')['ArrowDown']
     ElIconArrowUp: typeof import('@element-plus/icons-vue')['ArrowUp']
     ElIconCompass: typeof import('@element-plus/icons-vue')['Compass']
+    ElIconCpu: typeof import('@element-plus/icons-vue')['Cpu']
+    ElIconDocument: typeof import('@element-plus/icons-vue')['Document']
     ElIconEditPen: typeof import('@element-plus/icons-vue')['EditPen']
     ElIconMoreFilled: typeof import('@element-plus/icons-vue')['MoreFilled']
+    ElIconSGrid: typeof import('@element-plus/icons-vue')['SGrid']
     ElIconShare: typeof import('@element-plus/icons-vue')['Share']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElMain: typeof import('element-plus/es')['ElMain']
diff --git a/src/components/DialogToolbarContent.vue b/src/components/DialogToolbarContent.vue
index bf6b0d78..5a818e1e 100644
--- a/src/components/DialogToolbarContent.vue
+++ b/src/components/DialogToolbarContent.vue
@@ -554,6 +554,9 @@ export default {
         } else if (value === 'Annotation') {
           this.globalSettings.displayMarkers = false;
           this.globalSettings.interactiveMode = 'dataset';
+        } else if (value === 'Cell Type') {
+          this.globalSettings.displayMarkers = true;
+          this.globalSettings.interactiveMode = 'connectivity';
         } else {
           this.globalSettings.displayMarkers = false;
           this.globalSettings.interactiveMode = 'connectivity';
diff --git a/src/components/SplitFlow.vue b/src/components/SplitFlow.vue
index ca9de710..19c2002c 100644
--- a/src/components/SplitFlow.vue
+++ b/src/components/SplitFlow.vue
@@ -630,7 +630,8 @@ export default {
       this.cellCardSomaLocations = [...new Map(
         normalizedSomaLocations.map((item) => [item.label.toLowerCase(), item])
       ).values()];
-      // TODO: use cellCardSomaLocations to place markers on flatmap for cell card explorer.
+      this.settingsStore.updateCellCardSomaLocations(this.cellCardSomaLocations);
+      EventBus.emit("markerUpdate");
     },
     onConnectivitySourceChange: function (data) {
       this.connectivityExplorerClicked.push(true);
diff --git a/src/mixins/DynamicMarkerMixin.js b/src/mixins/DynamicMarkerMixin.js
index 59a487da..c6bd1186 100644
--- a/src/mixins/DynamicMarkerMixin.js
+++ b/src/mixins/DynamicMarkerMixin.js
@@ -9,7 +9,29 @@ const removeDuplicates = function (arrayOfAnything) {
     JSON.parse(e)
   )
 }
-  
+
+const getCellTypeMarkers = function (markers, somaLocations) {
+  const somaCuries = new Set(
+    (Array.isArray(somaLocations) ? somaLocations : [])
+      .map((location) => String(location?.curie || '').trim())
+      .filter(Boolean)
+  );
+
+  if (!somaCuries.size) return [];
+
+  return markers
+    .map((marker) => {
+      const matchedTerms = (Array.isArray(marker?.terms) ? marker.terms : [])
+        .filter((term) => somaCuries.has(term));
+
+      return {
+        ...marker,
+        terms: matchedTerms,
+      };
+    })
+    .filter((marker) => marker.terms.length > 0);
+}
+
 /* eslint-disable no-alert, no-console */
 export default {
   computed: {
@@ -41,6 +63,9 @@ export default {
       if (flatmapImp) {
         // Set the dataset markers
         let markers = this.settingsStore.globalSettings.displayMarkers ? this.settingsStore.markers : [];
+        if (this.settingsStore.globalSettings.viewingMode === "Cell Type") {
+          markers = getCellTypeMarkers(markers, this.settingsStore.cellCardSomaLocations);
+        }
         markers = removeDuplicates(markers);
         flatmapImp.clearMarkers();
         flatmapImp.clearDatasetMarkers();
diff --git a/src/stores/settings.js b/src/stores/settings.js
index 0d0a1acd..bdfec547 100644
--- a/src/stores/settings.js
+++ b/src/stores/settings.js
@@ -19,6 +19,7 @@ export const useSettingsStore = defineStore('settings', {
       appliedFacets: [],
       numberOfDatasetsForFacets: [],
       markers: [],
+      cellCardSomaLocations: [],
       hoverAnatomies: [],
       hoverOrgans: [],
       hoverDOI: '',
@@ -123,6 +124,9 @@ export const useSettingsStore = defineStore('settings', {
     updateMarkers(markers) {
       this.markers = markers;
     },
+    updateCellCardSomaLocations(somaLocations) {
+      this.cellCardSomaLocations = somaLocations;
+    },
     updateHoverFeatures(anatomies, organs, doi, connectivity) {
       this.hoverAnatomies = anatomies;
       this.hoverOrgans = organs;

From 6f0d9ce682a52b493812c3eb1eb2228461b7f1d1 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Sun, 31 May 2026 15:31:11 +1200
Subject: [PATCH 13/25] Refactor

---
 src/mixins/DynamicMarkerMixin.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/mixins/DynamicMarkerMixin.js b/src/mixins/DynamicMarkerMixin.js
index c6bd1186..11d27c82 100644
--- a/src/mixins/DynamicMarkerMixin.js
+++ b/src/mixins/DynamicMarkerMixin.js
@@ -56,9 +56,7 @@ export default {
     flatmapMarkerUpdate(flatmap) {
       if (!this.flatmapReady) return;
 
-      let flatmapImp = flatmap;
-      if (!flatmapImp)
-        flatmapImp = this.getFlatmapImp();
+      const flatmapImp = flatmap ?? this.getFlatmapImp();
 
       if (flatmapImp) {
         // Set the dataset markers

From a93328b717f1c0c80ed80b77b591a7806070f3b3 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Sun, 31 May 2026 16:54:25 +1200
Subject: [PATCH 14/25] Add cell types count in soma location receiver

---
 src/components/SplitFlow.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/SplitFlow.vue b/src/components/SplitFlow.vue
index 19c2002c..6dad8d37 100644
--- a/src/components/SplitFlow.vue
+++ b/src/components/SplitFlow.vue
@@ -623,6 +623,7 @@ export default {
           return {
             label: String(item?.label || '').trim(),
             curie: String(item?.curie || '').trim(),
+            count: Number(item?.count || 0),
           };
         })
         .filter((item) => item.label);

From 8311867ad148ce93ae700d991f9d3b5a4c5b4e1b Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Sun, 31 May 2026 18:21:53 +1200
Subject: [PATCH 15/25] Show cell types markers on flatmap

---
 src/mixins/DynamicMarkerMixin.js | 53 ++++++++++++++++----------------
 1 file changed, 26 insertions(+), 27 deletions(-)

diff --git a/src/mixins/DynamicMarkerMixin.js b/src/mixins/DynamicMarkerMixin.js
index 11d27c82..c50877fd 100644
--- a/src/mixins/DynamicMarkerMixin.js
+++ b/src/mixins/DynamicMarkerMixin.js
@@ -10,26 +10,14 @@ const removeDuplicates = function (arrayOfAnything) {
   )
 }
 
-const getCellTypeMarkers = function (markers, somaLocations) {
-  const somaCuries = new Set(
-    (Array.isArray(somaLocations) ? somaLocations : [])
-      .map((location) => String(location?.curie || '').trim())
-      .filter(Boolean)
-  );
-
-  if (!somaCuries.size) return [];
-
-  return markers
-    .map((marker) => {
-      const matchedTerms = (Array.isArray(marker?.terms) ? marker.terms : [])
-        .filter((term) => somaCuries.has(term));
-
-      return {
-        ...marker,
-        terms: matchedTerms,
-      };
-    })
-    .filter((marker) => marker.terms.length > 0);
+const getCellTypeSomaLocations = function (somaLocations) {
+  return (Array.isArray(somaLocations) ? somaLocations : [])
+    .map((location) => ({
+      label: String(location?.label || '').trim(),
+      curie: String(location?.curie || '').trim(),
+      count: Number(location?.count || 0),
+    }))
+    .filter((location) => location.curie && location.count > 0)
 }
 
 /* eslint-disable no-alert, no-console */
@@ -59,15 +47,26 @@ export default {
       const flatmapImp = flatmap ?? this.getFlatmapImp();
 
       if (flatmapImp) {
-        // Set the dataset markers
-        let markers = this.settingsStore.globalSettings.displayMarkers ? this.settingsStore.markers : [];
-        if (this.settingsStore.globalSettings.viewingMode === "Cell Type") {
-          markers = getCellTypeMarkers(markers, this.settingsStore.cellCardSomaLocations);
-        }
-        markers = removeDuplicates(markers);
+        const displayMarkers = this.settingsStore.globalSettings.displayMarkers;
+        const isCellTypeViewingMode = this.settingsStore.globalSettings.viewingMode === "Cell Type";
+        const markers = !displayMarkers || isCellTypeViewingMode
+          ? []
+          : removeDuplicates(this.settingsStore.markers);
+        const somaLocations = !displayMarkers || !isCellTypeViewingMode
+          ? []
+          : getCellTypeSomaLocations(this.settingsStore.cellCardSomaLocations);
+
         flatmapImp.clearMarkers();
         flatmapImp.clearDatasetMarkers();
-        flatmapImp.addDatasetMarkers(markers);
+        if (typeof flatmapImp.clearSomaLocationMarkers === "function") {
+          flatmapImp.clearSomaLocationMarkers();
+        }
+
+        if (isCellTypeViewingMode && typeof flatmapImp.addSomaLocationMarkers === "function") {
+          flatmapImp.addSomaLocationMarkers(somaLocations);
+        } else {
+          flatmapImp.addDatasetMarkers(markers);
+        }
 
         // Set the featured markers
         if (this.entry.type === "MultiFlatmap") {

From e468476bd1337d84e4d23e3c63df7743b47c8fd3 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Mon, 1 Jun 2026 11:48:40 +1200
Subject: [PATCH 16/25] Show cell types markers for cell card explorer

---
 src/components/SplitFlow.vue |  8 ++++++++
 src/mixins/ContentMixin.js   | 15 +++++++++++++++
 2 files changed, 23 insertions(+)

diff --git a/src/components/SplitFlow.vue b/src/components/SplitFlow.vue
index 6dad8d37..56c9d2a1 100644
--- a/src/components/SplitFlow.vue
+++ b/src/components/SplitFlow.vue
@@ -224,11 +224,17 @@ export default {
   },
   methods: {
     openCellCardExplorerFromToolbar: function () {
+      this.openCellCardExplorer();
+    },
+    openCellCardExplorer: function (payload = {}) {
       this.cellCardExplorerRequested = true;
 
       if (this.$refs.sideBar) {
         this.$refs.sideBar.tabClicked({ id: 4, type: 'cellCardExplorer' });
         this.$refs.sideBar.setDrawerOpen(true);
+        if (payload && (payload.filters?.length || payload.query)) {
+          this.$refs.sideBar.openCellCardExplorerSearch(payload.filters || [], payload.query || '');
+        }
       }
     },
     onFilterVisibility: function (state) {
@@ -340,6 +346,8 @@ export default {
             });
             this.filterTriggered = true;
           }
+        } else if (action.type === "OpenCellCardExplorer") {
+          this.openCellCardExplorer(action);
         } else if (action.type == "URL") {
           window.open(action.resource, "_blank");
         } else if (action.type == "Facet") {
diff --git a/src/mixins/ContentMixin.js b/src/mixins/ContentMixin.js
index 0675abbc..646a0f20 100644
--- a/src/mixins/ContentMixin.js
+++ b/src/mixins/ContentMixin.js
@@ -184,6 +184,20 @@ export default {
         if (resource.eventType == "click") {
           result.eventType = "selected";
           if (resource.feature.type == "marker") {
+            // Cell card explorer - cell type markers
+            if (resource.feature.kind === 'proxy' && !resource.feature['dataset-terms']) {
+              returnedAction = {
+                type: "OpenCellCardExplorer",
+                label: resource.feature.label,
+                models: resource.feature.models,
+                query: resource.feature.label,
+                filters: [{
+                  facet: resource.feature.label,
+                  term: 'Soma Location',
+                }],
+              };
+              fireResourceSelected = true;
+            } else {
             let label = result.internalName;
             // `resource.feature.id` is the marker identifier (not featureId or models)
             if (this.settingsStore.isFeaturedMarkerIdentifier(resource.feature.id)) {
@@ -236,6 +250,7 @@ export default {
               const flatmap = this.$refs.multiflatmap.getCurrentFlatmap().mapImp;
               flatmap.clearSearchResults();
             }
+            }
           }
         } else if (resource.eventType == "mouseenter") {
           result.eventType = "highlighted";

From ba230edc71625a41e23d08eabc8406d47db1336e Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Mon, 1 Jun 2026 16:47:37 +1200
Subject: [PATCH 17/25] Fix soma location marker click

---
 src/mixins/ContentMixin.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/mixins/ContentMixin.js b/src/mixins/ContentMixin.js
index 646a0f20..7701eaa2 100644
--- a/src/mixins/ContentMixin.js
+++ b/src/mixins/ContentMixin.js
@@ -185,7 +185,7 @@ export default {
           result.eventType = "selected";
           if (resource.feature.type == "marker") {
             // Cell card explorer - cell type markers
-            if (resource.feature.kind === 'proxy' && !resource.feature['dataset-terms']) {
+            if (!resource.feature['dataset-terms']) {
               returnedAction = {
                 type: "OpenCellCardExplorer",
                 label: resource.feature.label,

From e8ea9bf1162427b6c5f19f74748ee46fddbc5396 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Mon, 1 Jun 2026 17:40:18 +1200
Subject: [PATCH 18/25] Remove query from cell card filters

---
 src/mixins/ContentMixin.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/mixins/ContentMixin.js b/src/mixins/ContentMixin.js
index 7701eaa2..efc8e050 100644
--- a/src/mixins/ContentMixin.js
+++ b/src/mixins/ContentMixin.js
@@ -190,7 +190,7 @@ export default {
                 type: "OpenCellCardExplorer",
                 label: resource.feature.label,
                 models: resource.feature.models,
-                query: resource.feature.label,
+                query: '',
                 filters: [{
                   facet: resource.feature.label,
                   term: 'Soma Location',

From c3812c3934b64a3759f361f0e65148f3f0c469e4 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Tue, 2 Jun 2026 10:52:27 +1200
Subject: [PATCH 19/25] Fix cell card soma location cascader isssue

---
 src/mixins/ContentMixin.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/mixins/ContentMixin.js b/src/mixins/ContentMixin.js
index efc8e050..a654ffe6 100644
--- a/src/mixins/ContentMixin.js
+++ b/src/mixins/ContentMixin.js
@@ -193,7 +193,7 @@ export default {
                 query: '',
                 filters: [{
                   facet: resource.feature.label,
-                  term: 'Soma Location',
+                  term: 'Soma location',
                 }],
               };
               fireResourceSelected = true;

From e7e74d697e1bcf87b71d3fa7d2c144224d464cc1 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Mon, 8 Jun 2026 17:52:02 +1200
Subject: [PATCH 20/25] Fix switching viewing mode between exploration and cell
 type

---
 src/components/DialogToolbarContent.vue | 2 +-
 src/mixins/DynamicMarkerMixin.js        | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/DialogToolbarContent.vue b/src/components/DialogToolbarContent.vue
index 5a818e1e..26ab9aa8 100644
--- a/src/components/DialogToolbarContent.vue
+++ b/src/components/DialogToolbarContent.vue
@@ -574,7 +574,7 @@ export default {
       this.settingsStore.updateGlobalSettings(this.globalSettings);
 
       // display marker update
-      if (updatedSettings.includes('displayMarkers')) {
+      if (updatedSettings.includes('displayMarkers') || updatedSettings.includes('interactiveMode')) {
         EventBus.emit('markerUpdate');
       }
       if (updatedSettings.includes('interactiveMode')) {
diff --git a/src/mixins/DynamicMarkerMixin.js b/src/mixins/DynamicMarkerMixin.js
index c50877fd..880f7caf 100644
--- a/src/mixins/DynamicMarkerMixin.js
+++ b/src/mixins/DynamicMarkerMixin.js
@@ -58,6 +58,7 @@ export default {
 
         flatmapImp.clearMarkers();
         flatmapImp.clearDatasetMarkers();
+
         if (typeof flatmapImp.clearSomaLocationMarkers === "function") {
           flatmapImp.clearSomaLocationMarkers();
         }

From 074674dce9edfc621ca445c49155d0ab60d2d9a0 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Thu, 11 Jun 2026 13:04:37 +1200
Subject: [PATCH 21/25] Refactor cell card soma location markers emit

---
 src/components/SplitFlow.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/SplitFlow.vue b/src/components/SplitFlow.vue
index 56c9d2a1..20be24a2 100644
--- a/src/components/SplitFlow.vue
+++ b/src/components/SplitFlow.vue
@@ -639,8 +639,7 @@ export default {
       this.cellCardSomaLocations = [...new Map(
         normalizedSomaLocations.map((item) => [item.label.toLowerCase(), item])
       ).values()];
-      this.settingsStore.updateCellCardSomaLocations(this.cellCardSomaLocations);
-      EventBus.emit("markerUpdate");
+      this.updateSomaLocationMarkers(this.cellCardSomaLocations);
     },
     onConnectivitySourceChange: function (data) {
       this.connectivityExplorerClicked.push(true);
@@ -776,6 +775,10 @@ export default {
         }
       }
     },
+    updateSomaLocationMarkers: function (data) {
+      this.settingsStore.updateCellCardSomaLocations(data);
+      EventBus.emit("markerUpdate");
+    },
     updateMarkers: function (data) {
       this.settingsStore.updateMarkers(data);
       EventBus.emit("markerUpdate");

From 3827ded2e1f684f65c54a4aa3d3f91059584c9c7 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Fri, 19 Jun 2026 15:45:51 +1200
Subject: [PATCH 22/25] Clean spaces

---
 src/App.vue                             | 1 -
 src/components/DialogToolbarContent.vue | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 72662849..b7da4086 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -258,7 +258,6 @@ export default {
         }
         getShareLink(1)
       });
-
     },
     setFlatmap: function() {
       this.$refs.map.setCurrentEntry(
diff --git a/src/components/DialogToolbarContent.vue b/src/components/DialogToolbarContent.vue
index 26ab9aa8..ce9ed18a 100644
--- a/src/components/DialogToolbarContent.vue
+++ b/src/components/DialogToolbarContent.vue
@@ -274,7 +274,7 @@
           </el-row>
         </template>
       </el-popover>
-      <el-popover class="tooltip"  content="Get permalink" placement="bottom-end"
+      <el-popover class="tooltip" content="Get permalink" placement="bottom-end"
         :show-after="helpDelay" :teleported=false trigger="hover"
         popper-class="header-popper"
         >

From f7e99bec3ae355c8265a68ec325a7cc247d519f9 Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Fri, 19 Jun 2026 15:46:49 +1200
Subject: [PATCH 23/25] Restore cell card explorer tab if available

---
 src/components/SplitFlow.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/SplitFlow.vue b/src/components/SplitFlow.vue
index 20be24a2..1051fd2b 100644
--- a/src/components/SplitFlow.vue
+++ b/src/components/SplitFlow.vue
@@ -868,6 +868,10 @@ export default {
       // - connectivity knowledge is loaded
       // - if sidebar state is not restored yet
       const sidebarState = state?.sidebar;
+      // Restore Cell Card Explorer
+      if (sidebarState?.activeTabId === 4) {
+        this.cellCardExplorerRequested = true;
+      }
       if (!this.sidebarStateRestored && sidebarState && this.$refs.sideBar && this.connectivityKnowledge?.length) {
         if (sidebarState.connectivityEntries?.length) {
           this.restoreConnectivityEntries(sidebarState.connectivityEntries);

From 3b97b17645ddc0cba4d74d70703df616e35c47ea Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Fri, 19 Jun 2026 15:56:01 +1200
Subject: [PATCH 24/25] Remove show cell card explorer option from demo app

---
 src/App.vue                   | 16 ----------------
 src/components.d.ts           |  2 ++
 src/components/MapContent.vue |  8 --------
 src/components/SplitFlow.vue  | 15 ++++-----------
 4 files changed, 6 insertions(+), 35 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index b7da4086..0fa4c9ab 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -25,9 +25,6 @@
                 <el-button @click="setFlatmap()" size="small">Set Flatmap</el-button>
                 <el-button @click="setSearch()" size="small">Set Search</el-button>
                 <el-button @click="toggleLongLabel()" size="small">Toggle Long Label</el-button>
-                <el-button @click="showCellCardExplorer()" size="small" :disabled="!isMapLoaded">
-                  Show Cell Card Explorer
-                </el-button>
               </div>
             </div>
             <template #reference>
@@ -45,7 +42,6 @@
         :options="options"
         :state="state"
         :showLongLabel="showLongLabel"
-        :showCellCards="showCellCards"
         :shareLink="shareLink"
         :useHelpModeDialog="true"
         :connectivityInfoSidebar="true"
@@ -165,7 +161,6 @@ export default {
       ElIconSetting: shallowRef(ElIconSetting),
       routerIsReady: false,
       showLongLabel: true,
-      showCellCards: false,
       isMapLoaded: false,
     }
   },
@@ -321,17 +316,6 @@ export default {
     toggleLongLabel: function() {
       this.showLongLabel = !this.showLongLabel;
     },
-    showCellCardExplorer: function() {
-      this.showCellCards = true;
-      // Open the cell card explorer tab only after the map is loaded.
-      // It can be opened before the map is loaded,
-      // but the tab will switch back to dataset explorer after the map is loaded.
-      const splitFlow = this.$refs.map.$refs.flow;
-      if (splitFlow.$refs.sideBar && this.isMapLoaded) {
-        splitFlow.$refs.sideBar.tabClicked({ id: 4, type: 'cellCardExplorer' });
-        splitFlow.$refs.sideBar.setDrawerOpen(true);
-      }
-    },
     mapIsLoaded: function(map) {
       console.log("map is loaded", map)
       this.isMapLoaded = true;
diff --git a/src/components.d.ts b/src/components.d.ts
index a52a63e7..0ebd6d22 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -19,6 +19,8 @@ declare module 'vue' {
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCol: typeof import('element-plus/es')['ElCol']
+    ElCollapse: typeof import('element-plus/es')['ElCollapse']
+    ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
     ElContainer: typeof import('element-plus/es')['ElContainer']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
diff --git a/src/components/MapContent.vue b/src/components/MapContent.vue
index a01e22eb..f326a55b 100644
--- a/src/components/MapContent.vue
+++ b/src/components/MapContent.vue
@@ -12,7 +12,6 @@
         @onFullscreen="onFullscreen"
         :state="stateToSet"
         :showLongLabel="showLongLabel"
-        :showCellCards="showCellCards"
         ref="flow"
         @vue:mounted="flowMounted"
       />
@@ -65,13 +64,6 @@ export default {
       type: Boolean,
       default: true,
     },
-    /**
-     * The option to show cell cards explorer in the sidebar.
-     */
-    showCellCards: {
-      type: Boolean,
-      default: false,
-    },
     /**
      * The options include APIs and Keys.
      */
diff --git a/src/components/SplitFlow.vue b/src/components/SplitFlow.vue
index 1051fd2b..14ac0b2b 100644
--- a/src/components/SplitFlow.vue
+++ b/src/components/SplitFlow.vue
@@ -32,7 +32,7 @@
           :filterOptions="filterOptions"
           :showVisibilityFilter="showVisibilityFilter"
           :showLongLabel="showLongLabel"
-          :showCellCards="resolvedShowCellCards"
+          :showCellCards="showCellCards"
           @tabClicked="onSidebarTabClicked"
           @tabClosed="onSidebarTabClosed"
           @actionClick="actionClick"
@@ -163,10 +163,6 @@ export default {
       type: Boolean,
       default: true,
     },
-    showCellCards: {
-      type: Boolean,
-      default: false,
-    },
   },
   data: function () {
     return {
@@ -195,7 +191,7 @@ export default {
       filterVisibility: true,
       filterOptions: [],
       annotationHighlight: [],
-      cellCardExplorerRequested: false,
+      showCellCards: false,
       cellCardSomaLocations: [],
     }
   },
@@ -227,7 +223,7 @@ export default {
       this.openCellCardExplorer();
     },
     openCellCardExplorer: function (payload = {}) {
-      this.cellCardExplorerRequested = true;
+      this.showCellCards = true;
 
       if (this.$refs.sideBar) {
         this.$refs.sideBar.tabClicked({ id: 4, type: 'cellCardExplorer' });
@@ -870,7 +866,7 @@ export default {
       const sidebarState = state?.sidebar;
       // Restore Cell Card Explorer
       if (sidebarState?.activeTabId === 4) {
-        this.cellCardExplorerRequested = true;
+        this.showCellCards = true;
       }
       if (!this.sidebarStateRestored && sidebarState && this.$refs.sideBar && this.connectivityKnowledge?.length) {
         if (sidebarState.connectivityEntries?.length) {
@@ -1139,9 +1135,6 @@ export default {
   },
   computed: {
     ...mapStores(useEntriesStore, useSettingsStore, useSplitFlowStore, useConnectivitiesStore),
-    resolvedShowCellCards: function () {
-      return this.showCellCards || this.cellCardExplorerRequested;
-    },
     envVars: function () {
       return {
         API_LOCATION: this.settingsStore.sparcApi,

From 61ab40b914826018da869bcec048ccf8d1e5159b Mon Sep 17 00:00:00 2001
From: akhuoa <aung.kyaw.hein@auckland.ac.nz>
Date: Fri, 19 Jun 2026 16:28:00 +1200
Subject: [PATCH 25/25] Add event tracking for cell card explorer fitlers and
 search

---
 src/components/SplitFlow.vue | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/src/components/SplitFlow.vue b/src/components/SplitFlow.vue
index 14ac0b2b..50ed6375 100644
--- a/src/components/SplitFlow.vue
+++ b/src/components/SplitFlow.vue
@@ -769,6 +769,29 @@ export default {
             });
           }
         }
+      } else if (data.tabType === 'cellType') {
+        const filterValues = data.filter.filter(f => (f.facet && f.facet.toLowerCase() !== 'show all'))
+          .map((f) => f.tagLabel)
+          .join(', ');
+        const searchValue = data.query;
+
+        if (filterValues) {
+          Tagging.sendEvent({
+            'event': 'interaction_event',
+            'event_name': 'portal_maps_action_filter',
+            'category': filterValues,
+            'location': 'map_sidebar_cell_card_filter'
+          });
+        }
+
+        if (searchValue) {
+          Tagging.sendEvent({
+            'event': 'interaction_event',
+            'event_name': 'portal_maps_action_search',
+            'category': searchValue,
+            'location': 'map_sidebar_cell_card_search'
+          });
+        }
       }
     },
     updateSomaLocationMarkers: function (data) {