@abi-software/map-side-bar 2.2.1-beta.1 → 2.2.1-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.2.1-beta.1",
+  "version": "2.2.1-beta.2",
   "files": [
     "dist/*",
     "src/*",

package/src/components/{ProvenancePopup.vue → ConnectivityInfo.vue}

@@ -1,7 +1,7 @@
 <template>
   <div v-if="entry" class="main" v-loading="loading">
-    <!-- Provenance Info Title -->
-    <div class="provenance-info-title">
+    <!-- Connectivity Info Title -->
+    <div class="connectivity-info-title">
       <div>
         <div class="block" v-if="entry.title">
           <div class="title">{{ capitalise(entry.title) }}</div>
@@ -182,7 +182,7 @@ const capitalise = function (str) {
 }
 
 export default {
-  name: 'ProvenancePopup',
+  name: 'ConnectivityInfo',
   components: {
     Button,
     Container,
@@ -266,19 +266,19 @@ export default {
       window.open(url, '_blank')
     },
     openAll: function () {
-      EventBus.emit('onProvenanceActionClick', {
+      EventBus.emit('onConnectivityActionClick', {
         type: 'Facets',
         labels: this.entry.componentsWithDatasets.map((a) => a.name),
       })
     },
     openAxons: function () {
-      EventBus.emit('onProvenanceActionClick', {
+      EventBus.emit('onConnectivityActionClick', {
         type: 'Facets',
         labels: this.entry.destinationsWithDatasets.map((a) => a.name),
       })
     },
     openDendrites: function () {
-      EventBus.emit('onProvenanceActionClick', {
+      EventBus.emit('onConnectivityActionClick', {
         type: 'Facets',
         labels: this.entry.originsWithDatasets.map((a) => a.name),
       })
@@ -297,7 +297,7 @@ export default {
   word-break: normal;
 }
 
-.provenance-info-title {
+.connectivity-info-title {
   padding: 1rem;
   display: flex;
   flex-direction: row;
@@ -510,7 +510,7 @@ export default {
     padding-top: 0.5em;
   }
 
-  .provenance-info-title ~ & {
+  .connectivity-info-title ~ & {
     padding-top: 0;
   }
 }

package/src/components/SideBar.vue

@@ -22,17 +22,17 @@
         </div>
         <div class="sidebar-container">
           <Tabs
-            v-if="tabs.length > 1 && provenanceEntry"
+            v-if="tabs.length > 1 && connectivityInfo"
             :tabTitles="tabs"
             :activeId="activeId"
             @titleClicked="tabClicked"
             @tab-close="tabClose"
           />
           <template v-for="tab in tabs" key="tab.id">
-            <!-- Provenance Info -->
+            <!-- Connectivity Info -->
             <template v-if="tab.id === 2">
-              <provenance-popup
-                :entry="provenanceEntry"
+              <connectivity-info
+                :entry="connectivityInfo"
                 v-show="tab.id === activeId"
                 :ref="tab.id"
               />
@@ -65,7 +65,7 @@ import { ElDrawer as Drawer, ElIcon as Icon } from 'element-plus'
 import SidebarContent from './SidebarContent.vue'
 import EventBus from './EventBus.js'
 import Tabs from './Tabs.vue'
-import ProvenancePopup from './ProvenancePopup.vue'
+import ConnectivityInfo from './ConnectivityInfo.vue'
 
 /**
  * Aims to provide a sidebar for searching capability for SPARC portal.
@@ -78,7 +78,7 @@ export default {
     ElIconArrowRight,
     Drawer,
     Icon,
-    ProvenancePopup,
+    ConnectivityInfo,
   },
   name: 'SideBar',
   props: {
@@ -124,9 +124,9 @@ export default {
       default: false,
     },
     /**
-     * The provenance info data to show in sidebar.
+     * The connectivity info data to show in sidebar.
      */
-    provenanceEntry: {
+    connectivityInfo: {
       type: Object,
       default: null,
     },
@@ -169,6 +169,7 @@ export default {
       this.drawerOpen = true
       // Because refs are in v-for, nextTick is needed here
       this.$nextTick(() => {
+        // TODO: refs[1] is for `search` which should be renamed
         this.$refs[1][0].openSearch(facets, query)
       })
     },
@@ -217,7 +218,7 @@ export default {
       this.$emit('tabClicked', id)
     },
     tabClose: function (id) {
-      this.$emit('provenance-popup-close');
+      this.$emit('connectivity-info-close');
     },
   },
   created: function () {
@@ -263,7 +264,7 @@ export default {
        */
       this.$emit('datalink-clicked', payLoad);
     })
-    EventBus.on('onProvenanceActionClick', (payLoad) => {
+    EventBus.on('onConnectivityActionClick', (payLoad) => {
       this.tabClicked(1);
       this.$emit('actionClick', payLoad);
     })

package/src/components/Tabs.vue

@@ -119,6 +119,11 @@ $tab-height: 30px;
   outline: none;
   background-color: transparent;
 
+  :deep(> span) {
+    height: $tab-height - 2; // tab height minus border
+    font-family: Arial; // to fix font alignment on different browsers
+  }
+
   &:hover,
   &:focus {
     border: 0 none;

package/src/components.d.ts

@@ -8,6 +8,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     BadgesGroup: typeof import('./components/BadgesGroup.vue')['default']
+    ConnectivityInfo: typeof import('./components/ConnectivityInfo.vue')['default']
     DatasetCard: typeof import('./components/DatasetCard.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']
@@ -25,7 +26,6 @@ declare module 'vue' {
     ElTag: typeof import('element-plus/es')['ElTag']
     ExternalResourceCard: typeof import('./components/ExternalResourceCard.vue')['default']
     ImageGallery: typeof import('./components/ImageGallery.vue')['default']
-    ProvenancePopup: typeof import('./components/ProvenancePopup.vue')['default']
     SearchFilters: typeof import('./components/SearchFilters.vue')['default']
     SearchHistory: typeof import('./components/SearchHistory.vue')['default']
     SideBar: typeof import('./components/SideBar.vue')['default']