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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.14.8-demo.2",
+  "version": "2.14.8-demo.4",
   "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,
@@ -741,6 +749,11 @@ export default {
     margin: 0;
     padding-left: 1rem;
 
+    &.related-cell-list {
+      list-style-type: none;
+      padding-left: 0;
+    }
+
     li {
       color: #606266;
     }
@@ -955,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"
@@ -608,8 +609,8 @@ export default {
       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) => {
+      const filteredCellTypes = this.getFilteredCellTypes(this.activeFilters, this.searchInput);
+      const somaLocationCounts = filteredCellTypes.reduce((counts, cellType) => {
         (Array.isArray(cellType?.somaLocations) ? cellType.somaLocations : []).forEach((location) => {
           const normalizedLocation = String(location || '').trim().toLowerCase();
           if (!normalizedLocation) return;
@@ -703,8 +704,8 @@ export default {
 
       return false;
     },
-    applyFilters: function(filters) {
-      const searchTerms = this.normalizeSearchTerms(this.searchInput);
+    getFilteredCellTypes: function(filters = this.activeFilters, searchInput = this.searchInput) {
+      const searchTerms = this.normalizeSearchTerms(searchInput);
       const activeFilters = (filters || []).filter((filter) => {
         return filter?.term && filter?.facet && this.normalizeFacetValue(filter.facet) !== 'show all';
       });
@@ -720,11 +721,16 @@ export default {
 
       const filterGroups = Object.values(filtersByTerm);
 
-      const filtered = this.allCellTypes.filter((cellType) => {
-        return filterGroups.every((termGroup) => {
-          return termGroup.some((filter) => this.matchFieldFilter(cellType, filter));
-        });
-      }).filter((cellType) => this.matchSearchQuery(cellType, searchTerms));
+      return this.allCellTypes
+        .filter((cellType) => {
+          return filterGroups.every((termGroup) => {
+            return termGroup.some((filter) => this.matchFieldFilter(cellType, filter));
+          });
+        })
+        .filter((cellType) => this.matchSearchQuery(cellType, searchTerms));
+    },
+    applyFilters: function(filters) {
+      const filtered = this.getFilteredCellTypes(filters, this.searchInput);
 
       this.totalFilteredCount = filtered.length;
       this.cellTypes = filtered.slice(this.start, this.start + this.numberPerPage);
@@ -739,6 +745,52 @@ export default {
         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);
     },