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

package/package.json

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

package/src/App.vue

@@ -19,7 +19,6 @@
       <el-button @click="getFacets">Get facets</el-button>
       <el-button @click="toggleCreateData">Create Data/Annotation</el-button>
       <el-button @click="openConnectivitySearch()">Connectivity Search</el-button>
-      <el-button @click="showCellCardExplorer()">Show Cell Card Explorer</el-button>
     </div>
     <SideBar
       :envVars="envVars"
@@ -31,7 +30,6 @@
       :connectivityEntry="connectivityEntry"
       :connectivityKnowledge="connectivityKnowledge"
       :showVisibilityFilter="true"
-      :showCellCards="showCellCards"
       @search-changed="searchChanged($event)"
       @hover-changed="hoverChanged($event)"
       @connectivity-hovered="onConnectivityHovered"
@@ -47,7 +45,9 @@
 import SideBar from './components/SideBar.vue'
 import EventBus from './components/EventBus.js'
 import exampleConnectivityInput from './exampleConnectivityInput.js'
-import { capitalise } from './utils/common.js'
+
+
+const capitalise = (str) => str.charAt(0).toUpperCase() + str.slice(1);
 
 const flatmapQuery = (flatmapApi, sql) => {
   const data = { sql: sql };
@@ -136,7 +136,6 @@ export default {
         BL_SERVER_URL: import.meta.env.VITE_APP_BL_SERVER_URL,
         ROOT_URL: import.meta.env.VITE_APP_ROOT_URL,
         FLATMAPAPI_LOCATION: import.meta.env.VITE_FLATMAPAPI_LOCATION,
-        CELL_CARDS_API: import.meta.env.VITE_APP_CELL_CARDS_API,
       },
       connectivityEntry: [],
       createData: {
@@ -153,7 +152,6 @@ export default {
       query: '',
       filter: [],
       target: [],
-      showCellCards: false,
     }
   },
   methods: {
@@ -368,12 +366,7 @@ export default {
     },
     onConnectivityCollapseChange: function () {
       this.connectivityEntry = [...exampleConnectivityInput]
-    },
-    showCellCardExplorer: function () {
-      this.showCellCards = true;
-      this.$refs.sideBar.tabClicked({ id: 4, type: 'cellCardExplorer' });
-      this.$refs.sideBar.setDrawerOpen(true);
-    },
+    }
   },
   mounted: async function () {
     console.log('mounted app')

package/src/assets/connectivity-explorer.scss

@@ -2,14 +2,10 @@
  * Common styles for connectivity explorer components
  */
 
-.id-tag,
-.icon-tag {
-  color: #555;
-  padding: 2px 4px;
-  font-size: .75rem !important;
-}
-
 .id-tag {
+  color: #555;
   background: #e0e0e0;
+  padding: 2px 4px;
   border-radius: 4px;
+  font-size: .75rem !important;
 }

package/src/components/ConnectivityCard.vue

@@ -21,11 +21,6 @@
             <span class="id-tag" v-else>{{ entry[field] }}</span>
           </div>
         </template>
-        <div v-if="uniqueSpecies.length" class="card-details">
-          <span class="icon-tag" v-for="species in uniqueSpecies" :key="species.iconClass">
-            <i :class="species.iconClass"></i>
-          </span>
-        </div>
       </div>
     </div>
   </div>
@@ -33,7 +28,6 @@
 
 <script>
 import EventBus from './EventBus';
-import { capitalise as capitaliseText } from '../utils/common.js';
 
 export default {
   name: "ConnectivityCard",
@@ -81,29 +75,11 @@ export default {
       }
       return false;
     },
-    // Get unique species based on iconClass to avoid duplicates in display,
-    // mainly used for human.
-    uniqueSpecies: function () {
-      if (!Array.isArray(this.entry?.species)) {
-        return [];
-      }
-
-      const seenIconClasses = new Set();
-      return this.entry.species.filter((species) => {
-        if (!species?.iconClass) {
-          return false;
-        }
-        if (seenIconClasses.has(species.iconClass)) {
-          return false;
-        }
-        seenIconClasses.add(species.iconClass);
-        return true;
-      });
-    },
   },
   methods: {
     capitalise: function (text) {
-      return capitaliseText(text);
+      if (text) return text.charAt(0).toUpperCase() + text.slice(1);
+      return "";
     },
     cardClicked: function (data) {
       if (!this.loading) {

package/src/components/ConnectivityInfo.vue

@@ -330,7 +330,6 @@ 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) => {
@@ -338,6 +337,11 @@ const titleCase = (str) => {
   })
 }
 
+const capitalise = function (str) {
+  if (str) return str.charAt(0).toUpperCase() + str.slice(1)
+  return ''
+}
+
 export default {
   name: 'ConnectivityInfo',
   components: {
@@ -929,10 +933,49 @@ export default {
       EventBus.emit('trackEvent', data);
     },
     showAlertMessage: function () {
-      scrollToRef(this, 'alertElement');
+      // scroll to alert message
+      this.$nextTick(() => {
+        const alertElement = this.$refs.alertElement;
+        if (alertElement) {
+          alertElement.scrollIntoView({
+            behavior: 'smooth',
+            block: 'start',
+            inline: 'nearest',
+          });
+        }
+      });
     },
     formatAlertText: function (text) {
-      return formatAlertTextUtil(text, { formatLines: true });
+      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');
     },
   },
   mounted: function () {

package/src/components/SearchFilters.vue

@@ -157,7 +157,10 @@ 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'
-import { capitalise } from '../utils/common.js'
+
+const capitalise = function (txt) {
+  return txt.charAt(0).toUpperCase() + txt.slice(1)
+}
 
 const convertReadableLabel = function (original) {
   const name = original.toLowerCase()
@@ -285,22 +288,18 @@ 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') {
-            // `sourceNomenclatureLabel` is from cell card explorer filters
-            if (parentKey === 'sourceNomenclatureLabel') {
-              children[i].label = facetItem.label;
-            } else {
-              children[i].label = convertReadableLabel(facetItem.label);
-            }
+            children[i].label = convertReadableLabel(
+              facetItem.label
+            )
           }
-          if (facetItem.key && parentKey.includes('flatmap.connectivity.source.')) {
+          if (facetItem.key && facet.key.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 {

package/src/components/SearchHistory.vue

@@ -147,10 +147,23 @@ 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: {

package/src/components/SideBar.vue

@@ -65,19 +65,6 @@
                 @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"
-                @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"
@@ -108,7 +95,6 @@ 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'
 
 /**
@@ -124,7 +110,6 @@ export default {
     Icon,
     AnnotationTool,
     ConnectivityExplorer,
-    CellCardExplorer,
   },
   name: 'SideBar',
   props: {
@@ -134,7 +119,6 @@ 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 },
       ],
     },
     /**
@@ -200,10 +184,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    showCellCards: {
-      type: Boolean,
-      default: false,
-    },
   },
   data: function () {
     return {
@@ -212,7 +192,6 @@ export default {
       activeTabId: 1,
       activeAnnotationData: { tabType: "annotation" },
       activeConnectivityData: { tabType: "connectivity" },
-      activeSpeciesForEntries: [],
       state: {
         dataset: {
           search: '',
@@ -256,16 +235,6 @@ 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
@@ -330,42 +299,6 @@ 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.
      */
@@ -568,17 +501,7 @@ 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
@@ -590,10 +513,6 @@ 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, 'closable-tab': tab.closable }"
+      :class="{ 'active-tab': tab.id == activeId }"
       @click="tabClicked(tab)"
     >
       <span class="tab-title">{{ tab.title }} </span>
@@ -103,23 +103,14 @@ export default {
 .tab-title {
   text-align: center;
   font-size: 14px;
-  padding: 0 0.75rem;
-
-  .closable-tab & {
-    padding-right: 0.25rem;
-  }
+  padding: 0 1rem;
 }
 
 .tab-close-icon {
-  width: 18px !important;
-  height: 18px !important;
-  font-size: 18px !important;
-  margin-right: 4px !important;
+  width: 20px !important;
+  height: 20px !important;
+  font-size: 20px !important;
+  padding-right: 4px !important;
   color: $app-primary-color !important;
-  border-radius: 2px;
-
-  &:hover {
-    background-color: rgba($app-primary-color, 0.15) !important;
-  }
 }
 </style>

package/src/components.d.ts

@@ -9,8 +9,6 @@ declare module 'vue' {
   export interface GlobalComponents {
     AnnotationTool: typeof import('./components/AnnotationTool.vue')['default']
     BadgesGroup: typeof import('./components/BadgesGroup.vue')['default']
-    CellCard: typeof import('./components/CellCard.vue')['default']
-    CellCardExplorer: typeof import('./components/CellCardExplorer.vue')['default']
     ConnectivityCard: typeof import('./components/ConnectivityCard.vue')['default']
     ConnectivityExplorer: typeof import('./components/ConnectivityExplorer.vue')['default']
     ConnectivityInfo: typeof import('./components/ConnectivityInfo.vue')['default']
@@ -45,7 +43,6 @@ declare module 'vue' {
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElTag: typeof import('element-plus/es')['ElTag']
-    IconOpenExternal: typeof import('./components/icons/IconOpenExternal.vue')['default']
     ImageGallery: typeof import('./components/ImageGallery.vue')['default']
     SearchFilters: typeof import('./components/SearchFilters.vue')['default']
     SearchHistory: typeof import('./components/SearchHistory.vue')['default']