@abi-software/map-side-bar 2.14.8-demo.0 → 2.14.8-demo.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.14.8-demo.0",
+  "version": "2.14.8-demo.2",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",

package/src/components/CellCard.vue

@@ -395,9 +395,21 @@ export default {
     },
     openCard: function() {
       this.$emit('open', this.cellType.id);
+
+      EventBus.emit('trackEvent', {
+        'event_name': `portal_maps_cell_card_open`,
+        'category': this.cellType.id || '',
+        'location': 'map_sidebar_cell_card',
+      });
     },
     closeCard: function() {
       this.$emit('close');
+
+      EventBus.emit('trackEvent', {
+        'event_name': `portal_maps_cell_card_close`,
+        'category': this.cellType.id || '',
+        'location': 'map_sidebar_cell_card',
+      });
     },
     showSomaLocation: function (name) {
       this.$emit('soma-location-hovered', name);
@@ -425,7 +437,7 @@ export default {
       ] : [];
       this.$emit('connectivity-search', {
         facets: facets,
-        query: query,
+        query: '',
       });
     },
     onSearchPopoverShow: function (locationId) {
@@ -800,7 +812,6 @@ export default {
 .source-publication-chip,
 .source-publication-link {
   display: inline-block;
-  border: 1px solid var(--cell-card-source-color);
   border-radius: 4px;
   color: white !important;
   text-decoration: none;
@@ -808,7 +819,8 @@ export default {
 }
 
 .source-publication-chip {
-  padding: 2px 6px;
+  padding: 2px 8px;
+  font-size: 13px;
 }
 
 .alert-chip {

package/src/components/CellCardExplorer.vue

@@ -340,11 +340,19 @@ export default {
         this.$refs.searchHistory.selectValue = 'Search history';
       }
       this.applyFilters(this.activeFilters);
+      this.emitSomaLocations(this.filterOptions);
+
+      EventBus.emit('trackEvent', {
+        'event_name': `portal_maps_action_filter`,
+        'category': `reset`,
+        'location': 'map_sidebar_cell_card_explorer',
+      });
     },
     searchAndFilterUpdate: function() {
       this.page = 1;
       this.start = 0;
       this.applyFilters(this.activeFilters);
+      this.emitSomaLocations(this.filterOptions);
       this.searchHistoryUpdate(this.activeFilters, this.searchInput);
     },
     filterUpdate: function(filters) {
@@ -352,18 +360,35 @@ export default {
       this.page = 1;
       this.start = 0;
       this.applyFilters(this.activeFilters);
+      this.emitSomaLocations(this.filterOptions);
       this.searchHistoryUpdate(this.activeFilters, this.searchInput);
       this.loadingCards = false;
     },
     numberPerPageUpdate: function(value) {
       this.numberPerPage = parseInt(value, 10) || 10;
-      this.pageChange(1);
+
+      EventBus.emit('trackEvent', {
+        'event_name': `portal_maps_cell_card_perPage`,
+        'category': value + '',
+        'location': 'map_sidebar_cell_card_explorer',
+      });
+
+      const preventPaginationTracking = this.page === 1;
+      this.pageChange(1, preventPaginationTracking);
     },
-    pageChange: function(page) {
+    pageChange: function(page, preventTracking = false) {
       this.page = page;
       this.start = (page - 1) * this.numberPerPage;
       this.applyFilters(this.activeFilters);
       this.scrollToTop();
+
+      if (!preventTracking) {
+        EventBus.emit('trackEvent', {
+          'event_name': `portal_maps_cell_card_pagination`,
+          'category': `page_${this.page}`,
+          'location': 'map_sidebar_cell_card_explorer',
+        });
+      }
     },
     scrollToTop: function() {
       if (this.$refs.content) {
@@ -397,6 +422,8 @@ export default {
           this.$refs.filtersRef.checkShowAllBoxes();
         }
       }
+
+      this.emitSomaLocations(this.filterOptions);
     },
     cascaderReady: function() {
       this.cascaderIsReady = true;
@@ -405,6 +432,17 @@ export default {
     normalizeFacetValue: function(value) {
       return String(value || '').trim().toLowerCase();
     },
+    getSelectedSomaLocationFilters: function() {
+      return (this.activeFilters || [])
+        .filter((filter) => {
+          return (
+            this.normalizeFacetValue(filter?.term) === 'soma location' &&
+            this.normalizeFacetValue(filter?.facet) !== 'show all'
+          );
+        })
+        .map((filter) => this.normalizeFacetValue(filter?.facet))
+        .filter(Boolean);
+    },
     getAvailableSpeciesSet: function() {
       const availableSpecies = new Set();
 
@@ -551,6 +589,14 @@ export default {
           label: 'Source',
           children: this.buildFacetChildren(cellTypes, 'sourceNomenclatureLabel'),
         },
+        {
+          key: 'notes',
+          label: 'Notes',
+          children: [
+            { label: 'with notes' },
+            { label: 'without notes' },
+          ],
+        },
       ];
 
       return options.filter((option) => option.children.length > 0);
@@ -559,6 +605,9 @@ export default {
       const somaLocationOption = (filterOptions || []).find((option) => option.key === 'somaLocations');
       const availableDataRaw = localStorage.getItem('available-name-curie-mapping');
       const availableData = availableDataRaw ? JSON.parse(availableDataRaw) : {};
+      const selectedSomaLocationFilters = this.getSelectedSomaLocationFilters();
+      const shouldFilterBySelectedSomaLocations = (this.activeFilters || []).length > 0 && selectedSomaLocationFilters.length > 0;
+      const selectedSomaLocationSet = new Set(selectedSomaLocationFilters);
       const scopedCellTypes = this.getCellTypesForActiveSpecies();
       const somaLocationCounts = scopedCellTypes.reduce((counts, cellType) => {
         (Array.isArray(cellType?.somaLocations) ? cellType.somaLocations : []).forEach((location) => {
@@ -571,6 +620,13 @@ export default {
       const somaLocations = (somaLocationOption?.children || [])
         .map((child) => String(child?.label || '').trim())
         .filter(Boolean)
+        .filter((label) => {
+          if (!shouldFilterBySelectedSomaLocations) {
+            return true;
+          }
+
+          return selectedSomaLocationSet.has(label.toLowerCase());
+        })
         .map((label) => {
           const curie = Object.keys(availableData).find(
             (curie) => String(availableData[curie] || '').toLowerCase() === label.toLowerCase()
@@ -638,6 +694,13 @@ export default {
         return this.normalizeFacetValue(cellType.sourceNomenclatureLabel) === filterFacet;
       }
 
+      if (filterTerm === 'notes') {
+        const hasNotes = (cellType.alertNotes?.length > 0 || cellType.curatorNotes?.length > 0);
+        if (filterFacet === 'with notes') return hasNotes;
+        if (filterFacet === 'without notes') return !hasNotes;
+        return false;
+      }
+
       return false;
     },
     applyFilters: function(filters) {
@@ -669,6 +732,12 @@ export default {
       if (!this.cellTypes.some((cellType) => cellType.id === this.activeCardId)) {
         this.activeCardId = null;
       }
+
+      this.$emit('search-changed', {
+        query: this.searchInput,
+        filter: filters,
+        tabType: "cellType",
+      });
     },
     showSomaLocation: function (name) {
       this.$emit('soma-location-hovered', name);
@@ -679,6 +748,13 @@ export default {
     onConnectivitySearch: function (query) {
       this.$emit('connectivity-search', query);
     },
+    getSearch: function () {
+      return this.searchInput;
+    },
+    getFilters: function () {
+      const hasFilters = this.activeFilters.some((f) => f.facet.toLowerCase() !== 'show all');
+      return hasFilters ? this.activeFilters : [];
+    },
   },
 }
 </script>

package/src/components/ConnectivityExplorer.vue

@@ -420,7 +420,7 @@ export default {
       this.openSearch([], '');
       this.$emit('search-changed', {
         value: [],
-        tabType: 'dataset',
+        tabType: 'connectivity',
         type: 'reset-update',
       })
 
@@ -468,7 +468,7 @@ export default {
         if (notFoundItems.length) {
           this.$emit('search-changed', {
             value: notFoundItems,
-            tabType: 'dataset',
+            tabType: 'connectivity',
             type: 'reset-update',
           })
         }

package/src/components/SearchHistory.vue

@@ -334,7 +334,8 @@ export default {
     getParentComponentName: function () {
       const isConnectivity = this.localStorageKey?.indexOf('connectivity') !== -1;
       const isDataset = this.localStorageKey?.indexOf('dataset') !== -1;
-      const location = isConnectivity ? 'connectivity' : isDataset ? 'dataset' : '';
+      const isCellCard = this.localStorageKey?.indexOf('cell-card') !== -1;
+      const location = isConnectivity ? 'connectivity' : isDataset ? 'dataset' : isCellCard ? 'cell_card' : '';
       return location;
     },
     search: function (item) {

package/src/components/SideBar.vue

@@ -72,6 +72,7 @@
                 v-show="tab.id === activeTabId"
                 :envVars="envVars"
                 :activeSpecies="activeSpeciesForEntries"
+                @search-changed="searchChanged(tab.id, $event)"
                 @dataset-search="openDatasetSearchFromCellCard($event)"
                 @connectivity-search="openConnectivitySearch($event.facets, $event.query)"
                 @soma-location-hovered="showSomaLocation"
@@ -218,7 +219,11 @@ export default {
           search: '',
           filters: [],
         },
-        connectivity:  {
+        connectivity: {
+          search: '',
+          filters: [],
+        },
+        cellCards: {
           search: '',
           filters: [],
         },
@@ -504,6 +509,13 @@ export default {
         this.state.connectivity.filters = connectivityExplorerTabRef.getFilters();
       }
 
+      // Update cell card explorer state if available
+      const cellCardExplorerTabRef = this.getTabRef(undefined, 'cellCardExplorer');
+      if (cellCardExplorerTabRef) {
+        this.state.cellCards.search = cellCardExplorerTabRef.getSearch();
+        this.state.cellCards.filters = cellCardExplorerTabRef.getFilters();
+      }
+
       // Update connectivity entries if available
       if (this.connectivityEntry && this.connectivityEntry.length > 0) {
         this.state.connectivityEntries = this.connectivityEntry.map((entry) => entry.id);
@@ -533,11 +545,15 @@ export default {
     setState: function (state) {
       // if state is not provided or formatted incorrectly, do nothing
       if (!state || !state.dataset || !state.connectivity) return;
-      this.state = JSON.parse(JSON.stringify(state)); // deep copy to avoid reference issues
-      const datasetFilters = state.dataset.filters;
-      const connectivityFilters = state.connectivity.filters;
-      const datasetSearch = state.dataset.search;
-      const connectivitySearch = state.connectivity.search;
+      // Create a deep copy while preserving the original state structure for future extensibility
+      const newState = JSON.parse(JSON.stringify(state));
+      this.state = { ...this.state, ...newState };
+      const datasetFilters = this.state.dataset.filters;
+      const connectivityFilters = this.state.connectivity.filters;
+      const datasetSearch = this.state.dataset.search;
+      const connectivitySearch = this.state.connectivity.search;
+      const cellCardFilters = this.state.cellCards.filters || [];
+      const cellCardSearch = this.state.cellCards.search || '';
 
       if (datasetFilters.length || datasetSearch) {
         this.openSearch(datasetFilters, datasetSearch);
@@ -547,6 +563,10 @@ export default {
         this.openConnectivitySearch(connectivityFilters, connectivitySearch);
       }
 
+      if (cellCardFilters.length || cellCardSearch) {
+        this.openCellCardExplorerSearch(cellCardFilters, cellCardSearch);
+      }
+
       if (state.activeTabId) {
         this.$nextTick(() => {
           const hasTab = this.tabEntries.find((t) => t.id === state.activeTabId);