@abi-software/map-side-bar 2.16.0 → 2.17.1-demo.0

package/src/components/ConnectivityCard.vue

@@ -28,6 +28,7 @@
 
 <script>
 import EventBus from './EventBus';
+import { capitalise as capitaliseText } from '../utils/common.js';
 
 export default {
   name: "ConnectivityCard",
@@ -78,8 +79,7 @@ export default {
   },
   methods: {
     capitalise: function (text) {
-      if (text) return text.charAt(0).toUpperCase() + text.slice(1);
-      return "";
+      return capitaliseText(text);
     },
     cardClicked: function (data) {
       if (!this.loading) {
@@ -97,7 +97,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../assets/connectivity-explorer.scss';
+@use '../assets/connectivity-explorer.scss';
 
 .connectivity-card {
   padding-left: 5px;

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',
           })
         }
@@ -653,8 +653,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../assets/searchPopover.scss';
-@import '../assets/pagination.scss';
+@use '../assets/searchPopover.scss';
+@use '../assets/pagination.scss';
 
 .connectivity-card {
   position: relative;

package/src/components/ConnectivityInfo.vue

@@ -355,6 +355,7 @@ import {
   ExternalResourceCard,
 } from '@abi-software/map-utilities';
 import '@abi-software/map-utilities/dist/style.css';
+import { capitalise, formatAlertText as formatAlertTextUtil, scrollToRef } from '../utils/common.js'
 
 const titleCase = (str) => {
   return str.replace(/\w\S*/g, (t) => {
@@ -362,11 +363,6 @@ const titleCase = (str) => {
   })
 }
 
-const capitalise = function (str) {
-  if (str) return str.charAt(0).toUpperCase() + str.slice(1)
-  return ''
-}
-
 export default {
   name: 'ConnectivityInfo',
   components: {
@@ -1157,49 +1153,10 @@ export default {
       EventBus.emit('trackEvent', data);
     },
     showAlertMessage: function () {
-      // scroll to alert message
-      this.$nextTick(() => {
-        const alertElement = this.$refs.alertElement;
-        if (alertElement) {
-          alertElement.scrollIntoView({
-            behavior: 'smooth',
-            block: 'start',
-            inline: 'nearest',
-          });
-        }
-      });
+      scrollToRef(this, 'alertElement');
     },
     formatAlertText: function (text) {
-      if (!text) return '';
-      const escaped = text
-        .replace(/&/g, '&')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;');
-      const linkified = escaped.replace(
-        /(https?:\/\/[^\s"<>\[]+)/g,
-        (url) => {
-          const parts = url.match(/^(.*?)([\].,;:!?]*)$/);
-          const cleanUrl = parts ? parts[1] : url;
-          const suffix = parts ? parts[2] : '';
-          return `<a href="${cleanUrl}" target="_blank" rel="noopener noreferrer">${cleanUrl}</a>${suffix}`;
-        }
-      );
-
-      const normalised = linkified
-        .replace(/\\n/g, '\n')
-        .replace(/\r\n/g, '\n')
-        .replace(/\r/g, '\n');
-
-      return normalised
-        .split('\n')
-        .map((line) => {
-          const withBoldLabel = line.replace(
-            /^\s*([A-Za-z][^:<]{0,120}:)/,
-            '<strong>$1</strong>'
-          );
-          return `<div class="alert-line">${withBoldLabel}</div>`;
-        })
-        .join('\n');
+      return formatAlertTextUtil(text, { formatLines: true });
     },
   },
   mounted: function () {
@@ -1216,7 +1173,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../assets/connectivity-explorer.scss';
+@use '../assets/connectivity-explorer.scss';
 
 .connectivity-info-title {
   padding: 0;

package/src/components/ContributorItem.vue

@@ -57,7 +57,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../assets/_variables.scss';
+@use '../assets/_variables.scss';
 
 .contributor-item {
   display: inline;
@@ -67,7 +67,7 @@ export default {
 </style>
 
 <style lang="scss">
-@import '../assets/_variables.scss';
+@use '../assets/_variables.scss';
 
 .contributor-popover.el-popover {
   font-family: $font-family;

package/src/components/DatasetCard.vue

@@ -217,6 +217,7 @@ export default {
     },
     createFlatmapItems: function () {
       if (this.entry.flatmaps) {
+        const flatmaps = []
         this.entry.flatmaps.forEach((flatmap) => {
           if (flatmap.associated_flatmap?.identifier) {
             const filePath = flatmap.dataset.path
@@ -245,7 +246,7 @@ export default {
               doi: this.entry.doi,
               version: this.version,
             }
-            this.items['Flatmaps'].push({
+            flatmaps.push({
               id,
               title: baseName(filePath),
               type: 'Flatmap',
@@ -256,6 +257,7 @@ export default {
             })
           }
         })
+        this.items['Flatmaps'].push(...flatmaps.sort((a, b) => a.title.localeCompare(b.title)))
       }
     },
     createImageItems: function () {
@@ -276,6 +278,7 @@ export default {
     },
     createPlotItems: function () {
       if (this.entry.plots) {
+        const plots = []
         this.entry.plots.forEach((plot) => {
           const filePath = plot.dataset.path
           const id = plot.identifier
@@ -333,7 +336,7 @@ export default {
             discoverId: this.discoverId,
             version: this.version,
           }
-          this.items['Plots'].push({
+          plots.push({
             id,
             title: baseName(filePath),
             type: 'Plot',
@@ -343,11 +346,14 @@ export default {
             mimetype,
           })
         })
+        this.items['Plots'].push(...plots.sort((a, b) => a.title.localeCompare(b.title)))
+
       }
     },
     createScaffoldItems: function () {
       if (this.entry.scaffolds) {
         let index = 0
+        const scaffolds = []
         this.entry.scaffolds.forEach((scaffold, i) => {
           const filePath = scaffold.dataset.path
           const id = scaffold.identifier
@@ -381,7 +387,7 @@ export default {
             s3uri: this.entry.s3uri,
             contextCardUrl: this.getContextCardUrl(i),
           }
-          this.items['Scaffolds'].push({
+          scaffolds.push({
             id,
             title: baseName(filePath),
             type: 'Scaffold',
@@ -391,10 +397,12 @@ export default {
             mimetype,
           })
         })
+        this.items['Scaffolds'].push(...scaffolds.sort((a, b) => a.title.localeCompare(b.title)))
       }
     },
     createSimulationItems: function () {
       if (this.entry.simulation) {
+        const simulations = []
         this.entry.simulation.forEach((simulation) => {
           if (simulation.additional_mimetype.name === "application/x.vnd.abi.simulation+json") {
             let action = {
@@ -409,7 +417,7 @@ export default {
               discoverId: this.discoverId,
               dataset: `${this.envVars.ROOT_URL}/datasets/${this.discoverId}?type=dataset`,
             }
-            this.items['Simulations'].push({
+            simulations.push({
               id: 'simulation',
               title: ' ',
               type: 'Simulation',
@@ -448,7 +456,7 @@ export default {
               doi: this.entry.doi,
               version: this.version,
             }
-            this.items['Simulations'].push({
+            simulations.push({
               id,
               title: baseName(filePath),
               type: 'Simulation',
@@ -459,6 +467,7 @@ export default {
             })
           }
         })
+        this.items['Simulations'].push(...simulations.sort((a, b) => a.title.localeCompare(b.title)))
       }
     },
     createVideoItems: function () {

package/src/components/DatasetExplorer.vue

@@ -573,8 +573,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../assets/searchPopover.scss';
-@import '../assets/pagination.scss';
+@use '../assets/searchPopover.scss';
+@use '../assets/pagination.scss';
 
 .dataset-card {
   position: relative;

package/src/components/SearchFilters.vue

@@ -157,10 +157,7 @@ import '@abi-software/svg-sprite/dist/style.css'
 import { AlgoliaClient } from '../algolia/algolia.js'
 import { facetPropPathMapping } from '../algolia/utils.js'
 import EventBus from './EventBus.js'
-
-const capitalise = function (txt) {
-  return txt.charAt(0).toUpperCase() + txt.slice(1)
-}
+import { capitalise } from '../utils/common.js'
 
 const convertReadableLabel = function (original) {
   const name = original.toLowerCase()
@@ -208,6 +205,10 @@ export default {
       showFiltersText: true,
       cascadeSelected: [],
       cascadeSelectedWithBoolean: [],
+      // Re-entrancy lock: el-cascader can echo an extra @change
+      // after we reassign cascadeSelected in setCascader;
+      // stays locked until the filterTimeout debounce below unlocks it.
+      cascadeEventLocked: false,
       filterTimeout: null,
       numberShown: 10,
       filters: [],
@@ -258,7 +259,6 @@ export default {
             if (this.options.length) {
               this.checkShowAllBoxes()
               // this.setCascader(this.entry.filterFacets)
-              this.cssMods()
               this.$emit('cascaderReady')
             }
           })
@@ -288,18 +288,22 @@ export default {
       return value;
     },
     createChildrenCascaderValue: function(children, facet, facets) {
+      const parentKey = facet.key;
+
       if (children?.length) {
         for (let i = 0; i < children.length; i++) {
           const facetItem = children[i];
           //copy the facets into
           if (children[i].facetPropPath !== 'supportingAwards.consortium.name') {
-            children[i].label = convertReadableLabel(
-              facetItem.label
-            )
+            // `sourceNomenclatureLabel` is from cell card explorer filters
+            if (parentKey === 'sourceNomenclatureLabel') {
+              children[i].label = facetItem.label;
+            } else {
+              children[i].label = convertReadableLabel(facetItem.label);
+            }
           }
-          if (facetItem.key && facet.key.includes('flatmap.connectivity.source.')) {
+          if (facetItem.key && parentKey.includes('flatmap.connectivity.source.')) {
             const childKey = facetItem.key;
-            const parentKey = facet.key;
             const key = childKey.replace(`${parentKey}.`, '');
             children[i].value = this.createCascaderItemValue([facet.label, key]);
           } else {
@@ -570,6 +574,12 @@ export default {
     },
     // cascadeEvent: initiate searches based off cascader changes
     cascadeEvent: function (eventIn) {
+      // Ignore the echoed @change el-cascader fires
+      // after we reassign cascadeSelected in setCascader
+      if (this.cascadeEventLocked) {
+        return
+      }
+      this.cascadeEventLocked = true
       let event = [...eventIn]
       if (event) {
         // Check for show all in selected cascade options
@@ -667,7 +677,7 @@ export default {
 
         this.filterTimeout = setTimeout(() => {
           this.$emit('filterResults', filters) // emit filters for apps above sidebar
-          this.cssMods() // update css for the cascader
+          this.cascadeEventLocked = false // safe to process real cascader changes again
         }, 600);
       }
     },
@@ -775,7 +785,6 @@ export default {
         this.updateListFilters(this.__expandItem__[0])
       }
       this.updateListStyleOrder()
-      this.cssMods()
     },
     updateListStyleOrder: function () {
       this.$nextTick(() => {
@@ -954,30 +963,6 @@ export default {
         })
       )
     },
-    makeCascadeLabelsClickable: function () {
-      // Next tick allows the cascader menu to change
-      this.$nextTick(() => {
-        document
-          .querySelectorAll('.sidebar-cascader-popper .el-cascader-node__label')
-          .forEach((el) => {
-            // step through each cascade label
-            el.onclick = function () {
-              const checkbox = this.previousElementSibling
-              if (checkbox) {
-                if (!checkbox.parentElement.attributes['aria-owns']) {
-                  // check if we are at the lowest level of cascader
-                  this.previousElementSibling.click() // Click the checkbox
-                }
-              }
-            }
-          })
-      })
-    },
-
-    cssMods: function () {
-      this.makeCascadeLabelsClickable()
-    },
-
     flattenToFilters: function (filter, targetOption, previousMatched = false) {
       let filtersArray = []
 
@@ -1142,7 +1127,6 @@ export default {
       this.cascaderIsReady = true
       this.checkShowAllBoxes()
       this.setCascader(this.entry.filterFacets)
-      this.cssMods()
       this.$emit('cascaderReady')
     })
   },

package/src/components/SearchHistory.vue

@@ -147,23 +147,10 @@ import {
 } from 'element-plus'
 
 import EventBus from './EventBus.js'
+import { generateUUID } from '../utils/common.js';
 
 const MAX_SEARCH_HISTORY = 12;
 
-function generateUUID() {
-  const arr = new Uint8Array(16);
-  window.crypto.getRandomValues(arr);
-
-  arr[6] = (arr[6] & 0x0f) | 0x40;
-  arr[8] = (arr[8] & 0x3f) | 0x80;
-
-  const hex = Array.from(arr)
-    .map(byte => byte.toString(16).padStart(2, '0'))
-    .join('');
-
-  return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20)}`;
-}
-
 export default {
   name: 'SearchHistory',
   components: {
@@ -347,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

@@ -65,6 +65,20 @@
                 @connectivity-item-close="onConnectivityItemClose"
               />
             </template>
+            <template v-else-if="tab.type === 'cellCardExplorer' && showCellCards">
+              <CellCardExplorer
+                :ref="'cellCardExplorerTab_' + tab.id"
+                class="sidebar-content-container"
+                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"
+                @soma-locations-ready="onSomaLocationsReady"
+              />
+            </template>
             <template v-else>
               <DatasetExplorer
                 class="sidebar-content-container"
@@ -95,6 +109,7 @@ import EventBus from './EventBus.js'
 import Tabs from './Tabs.vue'
 import AnnotationTool from './AnnotationTool.vue'
 import ConnectivityExplorer from './ConnectivityExplorer.vue'
+import CellCardExplorer from './CellCardExplorer.vue'
 import { removeShowAllFacets } from '../algolia/utils.js'
 
 /**
@@ -110,6 +125,7 @@ export default {
     Icon,
     AnnotationTool,
     ConnectivityExplorer,
+    CellCardExplorer,
   },
   name: 'SideBar',
   props: {
@@ -119,6 +135,7 @@ export default {
         { title: 'Dataset Explorer', id: 1, type: 'datasetExplorer', closable: false },
         { title: 'Connectivity Explorer', id: 2, type: 'connectivityExplorer', closable: false },
         { title: 'Annotation', id: 3, type: 'annotation', closable: true },
+        { title: 'Cell Card Explorer', id: 4, type: 'cellCardExplorer', closable: false },
       ],
     },
     /**
@@ -184,6 +201,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    showCellCards: {
+      type: Boolean,
+      default: false,
+    },
   },
   data: function () {
     return {
@@ -192,12 +213,17 @@ export default {
       activeTabId: 1,
       activeAnnotationData: { tabType: "annotation" },
       activeConnectivityData: { tabType: "connectivity" },
+      activeSpeciesForEntries: [],
       state: {
         dataset: {
           search: '',
           filters: [],
         },
-        connectivity:  {
+        connectivity: {
+          search: '',
+          filters: [],
+        },
+        cellCards: {
           search: '',
           filters: [],
         },
@@ -235,6 +261,16 @@ export default {
         this.activeAnnotationData = data;
       }
     },
+    /**
+     * This event is emitted when the mouse hover on or off a soma location in cell card explorer.
+     * @param name Soma location
+     */
+    showSomaLocation: function (name) {
+      this.$emit('soma-location-hovered', name);
+    },
+    onSomaLocationsReady: function (somaLocations) {
+      this.$emit('soma-locations-ready', somaLocations);
+    },
     /**
      * This event is emitted when the show connectivity button is clicked.
      * @arg featureIds
@@ -299,6 +335,42 @@ export default {
         datasetExplorerTabRef.openSearch(facets, query);
       })
     },
+    openCellCardExplorerSearch: function (filters, query) {
+      this.drawerOpen = true
+      // Because refs are in v-for, nextTick is needed here
+      this.$nextTick(() => {
+        const cellCardExplorerTabRef = this.getTabRef(undefined, 'cellCardExplorer', true);
+        if (cellCardExplorerTabRef && typeof cellCardExplorerTabRef.openSearch === 'function') {
+          cellCardExplorerTabRef.openSearch(filters, query);
+        }
+      })
+    },
+    openDatasetSearchFromCellCard: function (payload) {
+      if (!payload || typeof payload !== 'object') {
+        this.openSearch([], payload);
+        return;
+      }
+
+      const facets = [];
+      if (payload.species) {
+        facets.push({
+          facet: payload.species,
+          term: 'Species',
+          facetPropPath: 'organisms.primary.species.name',
+        });
+      }
+
+      if (payload.location) {
+        facets.push({
+          facet: payload.location,
+          term: 'Anatomical structure',
+          facetPropPath: 'anatomy.organ.category.name',
+          AND: true,
+        });
+      }
+
+      this.openSearch(facets, '');
+    },
     /**
      * Get the ref id of the tab by id and type.
      */
@@ -437,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);
@@ -466,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);
@@ -480,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);
@@ -501,7 +588,17 @@ export default {
         ...data,
       };
       this.$emit('trackEvent', taggingData);
-    }
+    },
+    /**
+     * @public
+     * Update the active species to use in filters.
+     * Used by SplitFlow component.
+     * @param activeSpecies
+     */
+    updateActiveSpeciesForEntries: function (activeSpecies) {
+      const speciesEntries = Array.isArray(activeSpecies) ? activeSpecies : [activeSpecies];
+      this.activeSpeciesForEntries = [...new Set(speciesEntries.filter(Boolean))];
+    },
   },
   computed: {
     // This should respect the information provided by the property
@@ -513,6 +610,10 @@ export default {
           tab.type === "annotation" &&
           this.annotationEntry &&
           this.annotationEntry.length > 0
+        ) ||
+        (
+          tab.type === "cellCardExplorer" &&
+          this.showCellCards
         )
       );
     },

package/src/components/Tabs.vue

@@ -4,7 +4,7 @@
       class="tab"
       v-for="tab in tabs"
       :key="tab.id"
-      :class="{ 'active-tab': tab.id == activeId }"
+      :class="{ 'active-tab': tab.id == activeId, 'closable-tab': tab.closable }"
       @click="tabClicked(tab)"
     >
       <span class="tab-title">{{ tab.title }} </span>
@@ -103,14 +103,23 @@ export default {
 .tab-title {
   text-align: center;
   font-size: 14px;
-  padding: 0 1rem;
+  padding: 0 0.75rem;
+
+  .closable-tab & {
+    padding-right: 0.25rem;
+  }
 }
 
 .tab-close-icon {
-  width: 20px !important;
-  height: 20px !important;
-  font-size: 20px !important;
-  padding-right: 4px !important;
+  width: 18px !important;
+  height: 18px !important;
+  font-size: 18px !important;
+  margin-right: 4px !important;
   color: $app-primary-color !important;
+  border-radius: 2px;
+
+  &:hover {
+    background-color: rgba($app-primary-color, 0.15) !important;
+  }
 }
 </style>