Cell card explorer

.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

src/App.vue

@@ -161,6 +161,7 @@ export default {
       ElIconSetting: shallowRef(ElIconSetting),
       routerIsReady: false,
       showLongLabel: true,
+      isMapLoaded: false,
     }
   },
   computed: {
@@ -177,6 +178,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,
       }
     }
@@ -251,7 +253,6 @@ export default {
         }
         getShareLink(1)
       });
-
     },
     setFlatmap: function() {
       this.$refs.map.setCurrentEntry(
@@ -317,6 +318,7 @@ export default {
     },
     mapIsLoaded: function(map) {
       console.log("map is loaded", map)
+      this.isMapLoaded = true;
       // map.changeViewingMode('Annotation')
     },
     viewerIsReady: function() {

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']
@@ -28,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']

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);
     },

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">
@@ -268,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"
         >
@@ -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,
@@ -546,20 +554,27 @@ 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';
         }
 
         this.updateGlobalSettings('viewingMode');
+
+        if (value === 'Cell Type') {
+          this.$emit('open-cell-card-explorer');
+        }
       }
     },
     updateGlobalSettings: function(changedKey) {
       const updatedSettings = this.settingsStore.getUpdatedGlobalSettingsKey(this.globalSettings);
       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')) {

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);

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
@@ -639,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

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,6 +32,7 @@
           :filterOptions="filterOptions"
           :showVisibilityFilter="showVisibilityFilter"
           :showLongLabel="showLongLabel"
+          :showCellCards="showCellCards"
           @tabClicked="onSidebarTabClicked"
           @tabClosed="onSidebarTabClosed"
           @actionClick="actionClick"
@@ -52,13 +54,16 @@
           @show-connectivity-graph="onShowConnectivityGraph"
           @filter-visibility="onFilterVisibility"
           @connectivity-item-close="onConnectivityItemClose"
+          @soma-location-hovered="showSomaLocation"
+          @soma-locations-ready="onSomaLocationsReady"
           @trackEvent="trackEvent"
         />
         <SplitDialog
           :entries="entries"
           ref="splitdialog"
           @resource-selected="resourceSelected"
           @species-changed="speciesChanged"
+          @update-active-species="updateActiveSpeciesForEntries"
         />
       </div>
     </el-main>
@@ -186,6 +191,8 @@ export default {
       filterVisibility: true,
       filterOptions: [],
       annotationHighlight: [],
+      showCellCards: false,
+      cellCardSomaLocations: [],
     }
   },
   watch: {
@@ -212,6 +219,20 @@ export default {
     },
   },
   methods: {
+    openCellCardExplorerFromToolbar: function () {
+      this.openCellCardExplorer();
+    },
+    openCellCardExplorer: function (payload = {}) {
+      this.showCellCards = 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) {
       this.filterVisibility = state;
       const filterExpression = {
@@ -321,6 +342,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") {
@@ -595,6 +618,25 @@ export default {
     onConnectivityHovered: function (data) {
       EventBus.emit('connectivity-hovered', data);
     },
+    showSomaLocation: function (name) {
+      EventBus.emit('soma-location-hovered', name);
+    },
+    onSomaLocationsReady: function (somaLocations) {
+      const normalizedSomaLocations = (Array.isArray(somaLocations) ? somaLocations : [])
+        .map((item) => {
+          return {
+            label: String(item?.label || '').trim(),
+            curie: String(item?.curie || '').trim(),
+            count: Number(item?.count || 0),
+          };
+        })
+        .filter((item) => item.label);
+
+      this.cellCardSomaLocations = [...new Map(
+        normalizedSomaLocations.map((item) => [item.label.toLowerCase(), item])
+      ).values()];
+      this.updateSomaLocationMarkers(this.cellCardSomaLocations);
+    },
     onConnectivitySourceChange: function (data) {
       this.connectivityExplorerClicked.push(true);
       EventBus.emit('connectivity-source-change', data);
@@ -727,8 +769,35 @@ 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) {
+      this.settingsStore.updateCellCardSomaLocations(data);
+      EventBus.emit("markerUpdate");
+    },
     updateMarkers: function (data) {
       this.settingsStore.updateMarkers(data);
       EventBus.emit("markerUpdate");
@@ -818,6 +887,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.showCellCards = true;
+      }
       if (!this.sidebarStateRestored && sidebarState && this.$refs.sideBar && this.connectivityKnowledge?.length) {
         if (sidebarState.connectivityEntries?.length) {
           this.restoreConnectivityEntries(sidebarState.connectivityEntries);
@@ -890,6 +963,11 @@ export default {
         })
       }
     },
+    updateActiveSpeciesForEntries: function (activeSpecies) {
+      if (this.$refs.sideBar) {
+        this.$refs.sideBar.updateActiveSpeciesForEntries(activeSpecies);
+      }
+    },
     contextUpdate: function (payload) {
       EventBus.emit("contextUpdate", payload);
     },
@@ -1089,6 +1167,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() {

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;