@abi-software/map-side-bar 2.6.4-beta.4 → 2.6.4-beta.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.6.4-beta.4",
+  "version": "2.6.4-beta.6",
   "files": [
     "dist/*",
     "src/*",
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@abi-software/gallery": "^1.1.2",
-    "@abi-software/map-utilities": "^1.3.3-beta.2",
+    "@abi-software/map-utilities": "^1.3.3-beta.5",
     "@abi-software/svg-sprite": "^1.0.1",
     "@element-plus/icons-vue": "^2.3.1",
     "algoliasearch": "^4.10.5",

package/src/components/ConnectivityInfo.vue

@@ -219,7 +219,11 @@
     </div>
 
     <div class="content-container content-container-references" v-if="resources.length">
-      <external-resource-card :resources="resources" :useDOIFormatter="useDOIFormatter" @references-loaded="onReferencesLoaded"></external-resource-card>
+      <external-resource-card
+        :resources="resources"
+        @references-loaded="onReferencesLoaded"
+        @show-reference-connectivities="onShowReferenceConnectivities"
+      ></external-resource-card>
     </div>
   </div>
 </template>
@@ -430,6 +434,9 @@ export default {
       const name = data.map(t => t.label).join(', ');
       this.toggleConnectivityTooltip(name, {show: true});
     },
+    onShowReferenceConnectivities: function (refSource) {
+      this.$emit('show-reference-connectivities', refSource);
+    },
     onReferencesLoaded: function (references) {
       this.updatedCopyContent = this.getUpdateCopyContent(references);
     },
@@ -444,12 +451,24 @@ export default {
       // to avoid default formatting on font size and margin
 
       // Title
-      if (this.entry.title) {
-        contentArray.push(`<div><strong>${capitalise(this.entry.title)}</strong></div>`);
-      } else {
-        contentArray.push(`<div><strong>${this.entry.featureId}</strong></div>`);
+      let title = this.entry.title;
+      let featureId = this.entry.featureId;
+      const titleContent = [];
+
+      if (title) {
+        titleContent.push(`<strong>${capitalise(this.entry.title)}</strong>`);
+      }
+
+      if (featureId?.length) {
+        if (typeof featureId === 'object') {
+          titleContent.push(`(${featureId[0]})`);
+        } else {
+          titleContent.push(`(${featureId})`);
+        }
       }
 
+      contentArray.push(`<div>${titleContent.join(' ')}</div>`);
+
       // Description
       if (this.entry.provenanceTaxonomyLabel?.length) {
         contentArray.push(`<div>${this.provSpeciesDescription}</div>`);

package/src/components/SideBar.vue

@@ -39,6 +39,7 @@
                 :ref="'connectivityTab_' + tab.id"
                 :useDOIFormatter="useDOIFormatter"
                 @show-connectivity="showConnectivity"
+                @show-reference-connectivities="onShowReferenceConnectivities"
                 @connectivity-component-click="onConnectivityComponentClick"
               />
             </template>
@@ -198,6 +199,13 @@ export default {
     showConnectivity: function (featureIds) {
       this.$emit('show-connectivity', featureIds);
     },
+    /**
+     * This event is emitted when the show related connectivities button in reference is clicked.
+     * @param refSource
+     */
+    onShowReferenceConnectivities: function (refSource) {
+      this.$emit('show-reference-connectivities', refSource);
+    },
     /**
      * This function is triggered after a connectivity component is clicked.
      * @arg data

package/src/components/Tabs.vue

@@ -58,7 +58,7 @@ export default {
 $tab-height: 30px;
 
 .tab-container {
-  height: $tab-height;
+  height: $tab-height + 2;
   display: flex;
   flex-direction: row;
   position: relative;

package/src/exampleConnectivityInput.js

@@ -287,4 +287,4 @@ export default {
         "Domestic Pig"
     ],
     "knowledge-source": "sckan-2024-03-26-npo",
-}
+}