@abi-software/map-side-bar 2.14.8-demo.6 → 2.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.14.8-demo.6",
+  "version": "2.15.0",
   "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/components/ConnectivityCard.vue

@@ -28,7 +28,6 @@
 
 <script>
 import EventBus from './EventBus';
-import { capitalise as capitaliseText } from '../utils/common.js';
 
 export default {
   name: "ConnectivityCard",
@@ -79,7 +78,8 @@ export default {
   },
   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/ConnectivityExplorer.vue

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

package/src/components/ConnectivityInfo.vue

@@ -310,12 +310,21 @@
       </div>
       <ul class="block consultant-block">
         <li v-for="consultant in expertConsultants" :key="consultant.url">
-          <template v-if="consultant.name">
-            <contributor-item :contributor="consultant" />
-          </template>
-          <div class="consultant-loading" v-else>
+          <contributor-item :contributor="consultant" v-if="consultant.name" />
+          <div class="consultant-loading" v-else-if="!consultant.error">
             <span>Loading {{ consultant.url }}</span>
           </div>
+          <div class="consultant-error" v-if="consultant.error">
+            <span v-if="consultant.errorMessage">{{ consultant.errorMessage }}</span>
+            <span v-else>Sorry, something went wrong.</span>
+            <template v-if="consultant.refreshable">
+              <br />
+              Please try again.
+              <span class="reload-button" @click="reloadConsultant(consultant)">
+                Reload
+              </span>
+            </template>
+          </div>
         </li>
       </ul>
     </div>
@@ -346,7 +355,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) => {
@@ -354,6 +362,11 @@ const titleCase = (str) => {
   })
 }
 
+const capitalise = function (str) {
+  if (str) return str.charAt(0).toUpperCase() + str.slice(1)
+  return ''
+}
+
 export default {
   name: 'ConnectivityInfo',
   components: {
@@ -896,69 +909,148 @@ export default {
       return data
     },
     fetchExpertConsultants: async function () {
-      this.expertConsultants = this.expertConsultantURLs.map(url => ({ name: '', url }));
+      this.expertConsultants = this.expertConsultantURLs.map((url) => ({
+        name: '',
+        url,
+        error: false,
+        errorMessage: '',
+        refreshable: false,
+      }));
 
       for (const url of this.expertConsultantURLs) {
-        const scicrunchBase = 'https://scicrunch.org';
-        const orcidBase = 'https://orcid.org';
-        const orcidAPIBase = 'https://pub.orcid.org/v2.1';
-        const apiLocationBase = (this.envVars.API_LOCATION ?? '').replace(/\/?$/, '/');
-        const isScicrunchURL = url.startsWith(scicrunchBase);
-        const isOrcidURL = url.startsWith(orcidBase);
-
-        if (!isScicrunchURL && !isOrcidURL) {
-          console.warn(`Unsupported expert consultant URL: ${url}`);
-          continue;
+        await this.fetchSingleExpertConsultant(url);
+      }
+
+      this.updatedCopyContent = this.getUpdateCopyContent(this.storedReferences);
+    },
+    buildExpertConsultantRequestInfo: function (url) {
+      const scicrunchBase = 'https://scicrunch.org';
+      const orcidBase = 'https://orcid.org';
+      const orcidAPIBase = 'https://pub.orcid.org/v2.1';
+      const apiLocationBase = (this.envVars.API_LOCATION ?? '').replace(/\/?$/, '/');
+      const isScicrunchURL = url.startsWith(scicrunchBase);
+      const isOrcidURL = url.startsWith(orcidBase);
+
+      if (!isScicrunchURL && !isOrcidURL) {
+        return null;
+      }
+
+      const APIURL = isScicrunchURL
+        ? url.replace(scicrunchBase, `${apiLocationBase}scicrunch`)
+        : url.replace(orcidBase, orcidAPIBase);
+
+      return {
+        APIURL,
+        isScicrunchURL,
+      };
+    },
+    fetchSingleExpertConsultant: async function (url) {
+      const requestInfo = this.buildExpertConsultantRequestInfo(url);
+      if (!requestInfo) {
+        console.warn(`Unsupported expert consultant URL: ${url}`);
+        this.updateExpertConsultantByURL(url, {
+          name: '',
+          error: true,
+          errorMessage: 'Unsupported expert consultant URL.',
+          refreshable: false,
+          orcidId: '',
+          organization: '',
+          role: '',
+        });
+        return;
+      }
+
+      const { APIURL, isScicrunchURL } = requestInfo;
+
+      // Reset the consultant data before fetching
+      this.updateExpertConsultantByURL(url, {
+        name: '',
+        error: false,
+        errorMessage: '',
+        refreshable: false,
+        orcidId: '',
+        organization: '',
+        role: '',
+      });
+
+      try {
+        const response = await fetch(APIURL, {
+          headers: {
+            Accept: 'application/json',
+          },
+        });
+
+        if (!response.ok) {
+          throw new Error(`Response status: ${response.status}`);
         }
 
-        const scicrunchAPIURL = (targetURL) => targetURL.replace(scicrunchBase, `${apiLocationBase}scicrunch`);
-        const orcidAPIURL = (targetURL) => targetURL.replace(orcidBase, orcidAPIBase);
-        const APIURL = isScicrunchURL ? scicrunchAPIURL(url) : orcidAPIURL(url);
+        const data = await response.json();
 
-        try {
-          const response = await fetch(APIURL, {
-            headers: {
-              'Accept': 'application/json'
-            }
+        if (isScicrunchURL) {
+          const { hits } = data?.hits || {};
+          const name = hits?.[0]?._source?.item?.name || '';
+
+          if (!name) {
+            throw new Error('No consultant data returned from SciCrunch.');
+          }
+
+          this.updateExpertConsultantByURL(url, {
+            name,
+            error: false,
+            errorMessage: '',
+            refreshable: false,
           });
-          const data = await response.json();
-          if (isScicrunchURL) {
-            const { hits } = data?.hits || {};
-            if (hits?.length) {
-              const name = hits[0]?._source?.item?.name;
-              if (name) {
-                const consultantIndex = this.expertConsultants.findIndex((consultant) => consultant.url === url);
-                if (consultantIndex !== -1) {
-                  this.expertConsultants[consultantIndex].name = name;
-                }
-              }
-            }
-          } else {
-            const nameInfo = data?.person?.name;
-            if (nameInfo) {
-              const givenName = nameInfo['given-names']?.value || '';
-              const familyName = nameInfo['family-name']?.value || '';
-              const creditName = nameInfo['credit-name']?.value || '';
-              const fullName = creditName || `${givenName} ${familyName}`.trim();
-              if (fullName) {
-                const consultantIndex = this.expertConsultants.findIndex((consultant) => consultant.url === url);
-                if (consultantIndex !== -1) {
-                  this.expertConsultants[consultantIndex].name = fullName;
-                  const orcidId = data['orcid-identifier']?.path || '';
-                  this.expertConsultants[consultantIndex].orcidId = orcidId;
-                  const employmentSummary = data?.['activities-summary']?.['employments']?.['employment-summary'] || [];
-                  const latestEmployment = employmentSummary[0] || {};
-                  this.expertConsultants[consultantIndex].organization = latestEmployment?.organization?.name || '';
-                  this.expertConsultants[consultantIndex].role = latestEmployment?.['role-title'] || '';
-                }
-              }
-            }
+        } else {
+          const nameInfo = data?.person?.name;
+          const givenName = nameInfo?.['given-names']?.value || '';
+          const familyName = nameInfo?.['family-name']?.value || '';
+          const creditName = nameInfo?.['credit-name']?.value || '';
+          const fullName = creditName || `${givenName} ${familyName}`.trim();
+
+          if (!fullName) {
+            throw new Error('No consultant data returned from ORCID.');
           }
-        } catch (error) {
-          console.error('Error fetching expert consultant:', error);
+
+          const orcidId = data?.['orcid-identifier']?.path || '';
+          const employmentSummary = data?.['activities-summary']?.['employments']?.['employment-summary'] || [];
+          const latestEmployment = employmentSummary[0] || {};
+
+          this.updateExpertConsultantByURL(url, {
+            name: fullName,
+            error: false,
+            errorMessage: '',
+            refreshable: false,
+            orcidId,
+            organization: latestEmployment?.organization?.name || '',
+            role: latestEmployment?.['role-title'] || '',
+          });
         }
+      } catch (error) {
+        console.error('Error fetching expert consultant:', error);
+        this.updateExpertConsultantByURL(url, {
+          name: '',
+          error: true,
+          errorMessage: 'Failed to fetch expert consultant data.',
+          refreshable: true,
+          orcidId: '',
+          organization: '',
+          role: '',
+        });
+      }
+    },
+    updateExpertConsultantByURL: function (url, fields = {}) {
+      const consultantIndex = this.expertConsultants.findIndex((consultant) => consultant.url === url);
+      if (consultantIndex === -1) {
+        return;
       }
 
+      this.expertConsultants.splice(consultantIndex, 1, {
+        ...this.expertConsultants[consultantIndex],
+        ...fields,
+      });
+    },
+    reloadConsultant: async function (consultant) {
+      await this.fetchSingleExpertConsultant(consultant.url);
       this.updatedCopyContent = this.getUpdateCopyContent(this.storedReferences);
     },
     onConnectivityHovered: function (label) {
@@ -1065,10 +1157,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, '&amp;')
+        .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 () {
@@ -1684,6 +1815,14 @@ export default {
   }
 }
 
+.consultant-error {
+  padding: 0.25rem 0.5rem;
+  font-style: italic;
+  color: var(--el-color-info);
+  border: 1px dotted red;
+  border-radius: 4px;
+}
+
 .alert-chip {
   margin-left: 5px;
   background-color: $app-primary-color;
@@ -1718,6 +1857,12 @@ export default {
   width: 1px;
 }
 
+.reload-button {
+  color: $app-primary-color;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
 @keyframes loadingAnimation {
   0% {
     background-position: -30vw 0;

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