@abi-software/map-side-bar 2.4.0 → 2.4.2-beta.0

package/src/components/SideBar.vue

@@ -22,9 +22,11 @@
         </div>
         <div class="sidebar-container">
           <Tabs
-            v-if="tabs.length > 1 && connectivityInfo"
+            v-if="tabs.length > 1 && (connectivityInfo || imageThumbnails.length)"
             :tabTitles="tabs"
             :activeId="activeTabId"
+            :hasConnectivityInfo="!!connectivityInfo"
+            :hasImageThumbnails="!!imageThumbnails.length"
             @titleClicked="tabClicked"
             @tab-close="tabClose"
           />
@@ -39,6 +41,13 @@
                 @show-connectivity="showConnectivity"
               />
             </template>
+            <template v-else-if="tab.type === 'images'">
+              <ImageThumbnails
+                v-if="imageThumbnails.length"
+                v-show="tab.id === activeTabId"
+                :imageThumbnails="imageThumbnails"
+              />
+            </template>
             <template v-else>
             <SidebarContent
               class="sidebar-content-container"
@@ -68,6 +77,7 @@ import SidebarContent from './SidebarContent.vue'
 import EventBus from './EventBus.js'
 import Tabs from './Tabs.vue'
 import ConnectivityInfo from './ConnectivityInfo.vue'
+import ImageThumbnails from './ImageThumbnails.vue'
 
 /**
  * Aims to provide a sidebar for searching capability for SPARC portal.
@@ -81,6 +91,7 @@ export default {
     Drawer,
     Icon,
     ConnectivityInfo,
+    ImageThumbnails,
   },
   name: 'SideBar',
   props: {
@@ -108,7 +119,8 @@ export default {
       type: Array,
       default: () => [
         { id: 1, title: 'Search', type: 'search' },
-        { id: 2, title: 'Connectivity', type: 'connectivity' }
+        { id: 2, title: 'Connectivity', type: 'connectivity' },
+        { id: 3, title: 'Images', type: 'images' }, // Temporary
       ],
     },
     /**
@@ -132,6 +144,13 @@ export default {
       type: Object,
       default: null,
     },
+    /**
+     * The image thumbnails data to show in sidebar.
+     */
+     imageThumbnails: {
+      type: Array,
+      default: [],
+    },
   },
   data: function () {
     return {
@@ -260,7 +279,12 @@ export default {
       this.$emit('tabClicked', {id, type});
     },
     tabClose: function (id) {
-      this.$emit('connectivity-info-close');
+      const closedTab = this.tabs.find((tab) => tab.id === id);
+      if (closedTab.type === 'connectivity') {
+        this.$emit('connectivity-info-close');
+      } else if (closedTab.type === 'images') {
+        this.$emit('image-thumbnail-close');
+      }
     },
   },
   created: function () {

package/src/components/Tabs.vue

@@ -2,7 +2,7 @@
   <div class="tab-container">
     <div
       class="title"
-      v-for="title in tabTitles"
+      v-for="title in titles"
       :key="title.id"
       :class="{ 'active-tab': title.id == activeId }"
     >
@@ -16,7 +16,7 @@
         </div>
       </div>
       <el-button
-        v-if="title.id === 2"
+        v-if="title.type === 'connectivity' || title.type === 'images'"
         @click="tabClose(title.id)"
         class="button-tab-close"
         aria-label="Close"
@@ -42,6 +42,25 @@ export default {
       type: Number,
       default: 1,
     },
+    hasConnectivityInfo: {
+      type: Boolean,
+      default: true,
+    },
+    hasImageThumbnails: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  computed: {
+    titles: function() {
+      if (!this.hasConnectivityInfo) {
+        return this.tabTitles.filter((tab) => tab.type !== 'connectivity');
+      }
+      else if (!this.hasImageThumbnails) {
+        return this.tabTitles.filter((tab) => tab.type !== 'images');
+      }
+      return this.tabTitles;
+    },
   },
   methods: {
     titleClicked: function (id, type) {
@@ -73,6 +92,7 @@ $tab-height: 30px;
   align-items: center;
   position: relative;
   cursor: pointer;
+  z-index: 2;
 }
 
 .title-text {

package/src/components.d.ts

@@ -19,6 +19,8 @@ declare module 'vue' {
     ElIconArrowRight: typeof import('@element-plus/icons-vue')['ArrowRight']
     ElIconLocation: typeof import('@element-plus/icons-vue')['Location']
     ElIconWarning: typeof import('@element-plus/icons-vue')['Warning']
+    ElIconWarnTriangleFilled: typeof import('@element-plus/icons-vue')['WarnTriangleFilled']
+    ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
@@ -27,6 +29,7 @@ declare module 'vue' {
     ElTag: typeof import('element-plus/es')['ElTag']
     ExternalResourceCard: typeof import('./components/ExternalResourceCard.vue')['default']
     ImageGallery: typeof import('./components/ImageGallery.vue')['default']
+    ImageThumbnails: typeof import('./components/ImageThumbnails.vue')['default']
     SearchFilters: typeof import('./components/SearchFilters.vue')['default']
     SearchHistory: typeof import('./components/SearchHistory.vue')['default']
     SideBar: typeof import('./components/SideBar.vue')['default']

package/src/data/images.json

@@ -0,0 +1,41 @@
+[
+  {
+      "thumbnail": "http://localhost:8000//thumbnail/21567",
+      "resource": "derivative/sub-Pirt-1A/sam-7/2020-01-06_11.26.19_ AAV DRG inj.- Pirt Cre 1A_DRG T2b.jpx",
+      "id": "353",
+      "title": "2020-01-06_11.26.19_ AAV DRG inj.- Pirt Cre 1A_DRG T2b.jpx",
+      "type": "Image",
+      "link": "http://localhost:8000//thumbnail/21567",
+      "mimetype": "image/jpx",
+      "species": [
+          "Mouse"
+      ],
+      "version": "1"
+  },
+  {
+      "thumbnail": "http://localhost:8000//thumbnail/21568",
+      "resource": "derivative/sub-Pirt-1A/sam-7/2020-01-06_11.36.02_FusionStitcher AAV DRG inj.- Pirt Cre 1A_DRG T4ab.jpx",
+      "id": "353",
+      "title": "2020-01-06_11.36.02_FusionStitcher AAV DRG inj.- Pirt Cre 1A_DRG T4ab.jpx",
+      "type": "Image",
+      "link": "http://localhost:8000//thumbnail/21568",
+      "mimetype": "image/jpx",
+      "species": [
+          "Mouse"
+      ],
+      "version": "1"
+  },
+  {
+      "thumbnail": "http://localhost:8000//thumbnail/21569",
+      "resource": "derivative/sub-Pirt-2A/2020-01-13_11.16.35_ssxxs_Kim_FusionStitcher vagal ganglia.jpx",
+      "id": "353",
+      "title": "2020-01-13_11.16.35_ssxxs_Kim_FusionStitcher vagal ganglia.jpx",
+      "type": "Image",
+      "link": "http://localhost:8000//thumbnail/21569",
+      "mimetype": "image/jpx",
+      "species": [
+          "Mouse"
+      ],
+      "version": "1"
+  }
+]