@abi-software/map-side-bar 2.14.8-demo.1 → 2.14.8-demo.3

package/package.json

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

package/src/components/CellCard.vue

@@ -152,8 +152,16 @@
         </div>
         <div v-if="cellType.relatedCells?.length" class="card-section">
           <div class="card-section-title">Related Species Variants</div>
-          <ul v-for="relatedCell in cellType.relatedCells" :key="relatedCell">
-            <li>{{ relatedCell.label }}</li>
+          <ul class="related-cell-list">
+            <li v-for="relatedCell in cellType.relatedCells" :key="relatedCell">
+              <button
+                class="related-cell-item"
+                @click.stop="$emit('related-cell-click', relatedCell)"
+                title="Click to view this cell type"
+              >
+                {{ relatedCell.label }}
+              </button>
+            </li>
           </ul>
         </div>
         <div v-if="cellType.sourceNomenclature" class="card-section source-publication-section">
@@ -236,7 +244,7 @@ export default {
       default: false,
     },
   },
-  emits: ['open', 'close', 'soma-location-hovered', 'dataset-search', 'connectivity-search'],
+  emits: ['open', 'close', 'soma-location-hovered', 'dataset-search', 'connectivity-search', 'related-cell-click'],
   data() {
     return {
       cardElement: null,
@@ -395,9 +403,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);
@@ -729,6 +749,11 @@ export default {
     margin: 0;
     padding-left: 1rem;
 
+    &.related-cell-list {
+      list-style-type: none;
+      padding-left: 0;
+    }
+
     li {
       color: #606266;
     }
@@ -800,7 +825,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 +832,8 @@ export default {
 }
 
 .source-publication-chip {
-  padding: 2px 6px;
+  padding: 2px 8px;
+  font-size: 13px;
 }
 
 .alert-chip {
@@ -943,4 +968,27 @@ export default {
     }
   }
 }
+
+.related-cell-list {
+  li + li {
+    margin-top: 0.5rem;
+  }
+}
+
+.related-cell-item {
+  cursor: pointer;
+  color: $app-primary-color;
+  background: none;
+  border: 1px solid $app-primary-color;
+  border-radius: 4px;
+  padding: 2px 4px;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  transition: background-color 0.2s ease, border-color 0.2s ease, text-decoration-color 0.2s ease;
+
+  &:hover {
+    background-color: rgba($app-primary-color, 0.08);
+  }
+}
 </style>

package/src/components/CellCardExplorer.vue

@@ -92,6 +92,7 @@
         @dataset-search="onDatasetSearch"
         @connectivity-search="onConnectivitySearch"
         @soma-location-hovered="showSomaLocation"
+        @related-cell-click="onRelatedCellClick"
       />
       <el-pagination
         class="pagination"
@@ -341,6 +342,12 @@ export default {
       }
       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;
@@ -354,18 +361,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) {
@@ -399,6 +423,8 @@ export default {
           this.$refs.filtersRef.checkShowAllBoxes();
         }
       }
+
+      this.emitSomaLocations(this.filterOptions);
     },
     cascaderReady: function() {
       this.cascaderIsReady = true;
@@ -410,7 +436,10 @@ export default {
     getSelectedSomaLocationFilters: function() {
       return (this.activeFilters || [])
         .filter((filter) => {
-          return this.normalizeFacetValue(filter?.term) === 'soma location';
+          return (
+            this.normalizeFacetValue(filter?.term) === 'soma location' &&
+            this.normalizeFacetValue(filter?.facet) !== 'show all'
+          );
         })
         .map((filter) => this.normalizeFacetValue(filter?.facet))
         .filter(Boolean);
@@ -561,6 +590,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);
@@ -658,6 +695,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) {
@@ -689,6 +733,58 @@ 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",
+      });
+    },
+    onRelatedCellClick: function(relatedCell) {
+      const species = relatedCell.species;
+      const label = relatedCell.label;
+
+      // Normalize species (e.g., "human male" -> "human")
+      const normalizedSpecies = this.normalizeActiveSpeciesFilterTerm(species);
+
+      // Check if this species filter already exists
+      const speciesFilterExists = this.activeFilters.some(function(filter) {
+        return this.normalizeFacetValue(filter.term) === 'species'
+          && this.normalizeFacetValue(filter.facet) === this.normalizeFacetValue(normalizedSpecies);
+      }, this);
+
+      // Add species filter if not already present
+      if (!speciesFilterExists && normalizedSpecies) {
+        this.activeFilters.push({
+          facetPropPath: 'species',
+          facet: capitalise(normalizedSpecies),
+          term: 'Species',
+          tagLabel: capitalise(normalizedSpecies),
+        });
+      }
+
+      // Clear search input to avoid text search interfering
+      this.searchInput = '';
+      this.page = 1;
+      this.start = 0;
+
+      // Apply filters and sync cascader UI
+      this.applyFilters(this.activeFilters);
+      this.syncCascaderFromActiveFilters();
+      this.emitSomaLocations(this.filterOptions);
+
+      // Find the matching cell type by preferredLabel and open its card
+      const matchingCellType = this.allCellTypes.find(function(ct) {
+        return (ct.preferredLabel || '').toLowerCase() === (label || '').toLowerCase();
+      });
+
+      if (matchingCellType) {
+        this.activeCardId = matchingCellType.id;
+      }
+
+      this.$nextTick(function() {
+        this.scrollToTop();
+      });
     },
     showSomaLocation: function (name) {
       this.$emit('soma-location-hovered', name);
@@ -699,6 +795,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);