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

package/package.json

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

package/src/App.vue

@@ -14,6 +14,7 @@
       <el-button @click="neuronSearch">open neuron search</el-button>
       <el-button @click="keywordSearch">keyword search</el-button>
       <el-button @click="getFacets">Get facets</el-button>
+      <el-button @click="showImages">Show Images</el-button>
     </div>
     <SideBar
       :envVars="envVars"
@@ -23,10 +24,13 @@
       :tabs="tabs"
       :activeTabId="activeId"
       :connectivityInfo="connectivityInput"
+      :imageThumbnails="imageThumbnails"
       @tabClicked="tabClicked"
       @search-changed="searchChanged($event)"
       @hover-changed="hoverChanged($event)"
       @actionClick="action"
+      @connectivity-info-close="onConnectivityInfoClose"
+      @image-thumbnail-close="onImageThumbnailClose"
     />
   </div>
 </template>
@@ -37,6 +41,7 @@
 import SideBar from './components/SideBar.vue'
 import EventBus from './components/EventBus.js'
 import exampleConnectivityInput from './exampleConnectivityInput.js'
+import imageThumbnails from './data/images.json';
 
 const capitalise = (str) => str.charAt(0).toUpperCase() + str.slice(1);
 
@@ -101,7 +106,11 @@ export default {
   data: function () {
     return {
       contextArray: [null, null],
-      tabArray: [{ title: 'Flatmap', id: 1, type: 'search'}, { title: 'Connectivity', id: 2, type: 'connectivity' }],
+      tabArray: [
+        { title: 'Flatmap', id: 1, type: 'search'},
+        { title: 'Connectivity', id: 2, type: 'connectivity' },
+        { title: 'Images', id: 3, type: 'images' },
+      ],
       sideBarVisibility: true,
       envVars: {
         API_LOCATION: import.meta.env.VITE_APP_API_LOCATION,
@@ -114,6 +123,7 @@ export default {
         ROOT_URL: import.meta.env.VITE_APP_ROOT_URL,
       },
       connectivityInput: exampleConnectivityInput,
+      imageThumbnails: imageThumbnails,
       activeId: 1,
     }
   },
@@ -224,6 +234,18 @@ export default {
       let facets = await this.$refs.sideBar.getAlgoliaFacets()
       console.log('Algolia facets:', facets)
     },
+    showImages: function () {
+      if (this.$refs.sideBar) {
+        this.tabClicked({id: 3, type: 'images'});
+        this.$refs.sideBar.setDrawerOpen(true);
+      }
+    },
+    onConnectivityInfoClose: function () {
+      console.log('connectivity-info-close');
+    },
+    onImageThumbnailClose: function () {
+      console.log('image-thumbnail-close');
+    },
   },
   mounted: function () {
     console.log('mounted app')

package/src/components/ImageThumbnails.vue

@@ -0,0 +1,497 @@
+<template>
+  <div class="image-thumbnails-container">
+    <div class="toolbar">
+      <div class="filters">
+        <el-tag
+          v-for="(species, index) in speciesFilterTags"
+          :key="index"
+          type="info"
+          class="tag"
+          :class="{ 'active-tag': species.name === activeSpecies.name }"
+          :closable="species.name === activeSpecies.name"
+          @close="removeSpeciesFilterTag"
+          @click="filterBySpecies(species)"
+        >
+          {{ species.name }} ({{ species.count }})
+        </el-tag>
+      </div>
+      <div class="view-selector">
+        <el-select
+          v-model="viewOption"
+          placeholder="Select view"
+          popper-class="view-selector-select-popper"
+        >
+          <el-option
+            v-for="item in viewOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </div>
+    </div>
+    <div class="gallery-container" v-if="viewOption === 'gallery'">
+      <Gallery :items="imageItems" :imageStyle="imageStyle" />
+    </div>
+    <div class="dataset-card-container" v-if="viewOption === 'list'">
+      <div class="dataset-card" v-for="imageThumbnail in imageItems">
+        <div class="card" :key="imageThumbnail.link">
+          <div class="card-left">
+            <a :href="imageThumbnail.link" class="card-image card-button-link" target="_blank">
+              <el-image :src="imageThumbnail.imgSrc" loading="lazy">
+                <template #error>
+                  <div class="image-slot">Loading...</div>
+                </template>
+              </el-image>
+            </a>
+          </div>
+          <div class="card-right">
+            <div class="details">
+              <div class="title">
+                <strong>{{ imageThumbnail.type }}</strong>
+              </div>
+            </div>
+            <div class="details">
+              <div>
+                {{ formattedTitle(imageThumbnail) }}
+              </div>
+            </div>
+            <div class="details">
+              <a class="button el-button el-button--large card-button-link" :href="imageThumbnail.link" target="_blank">
+                View {{ imageThumbnail.type }}
+              </a>
+            </div>
+            <!-- Copy to clipboard button container -->
+            <div class="float-button-container">
+              <CopyToClipboard :content="getCopyContent(imageThumbnail)" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  ElImage,
+  ElTag as Tag,
+  ElOption as Option,
+  ElSelect as Select,
+} from 'element-plus';
+import { CopyToClipboard } from '@abi-software/map-utilities';
+import '@abi-software/map-utilities/dist/style.css';
+import Gallery from "@abi-software/gallery";
+import "@abi-software/gallery/dist/style.css";
+
+const BASE64PREFIX = 'data:image/png;base64,';
+const VIEW_OPTIONS = [
+  {
+    value: 'list',
+    label: 'List'
+  },
+  {
+    value: 'gallery',
+    label: 'Gallery'
+  }
+];
+
+  export default {
+    name: 'ImageThumbnails',
+    components: {
+      Tag,
+      Option,
+      Select,
+      ElImage,
+      Gallery,
+      CopyToClipboard,
+    },
+    props: {
+      /**
+       * The image thumbnails data to show in sidebar.
+       */
+       imageThumbnails: {
+        type: Array,
+        default: [],
+      },
+    },
+    data: function () {
+      return {
+        activeSpecies: { name: "" },
+        speciesFilterTags: [],
+        imageItems: [],
+        showImageGallery: false,
+        viewOption: 'list',
+        viewOptions: VIEW_OPTIONS,
+      };
+    },
+    computed: {
+      imageStyle() {
+        return {
+          width: "180px",
+          height: "135px",
+        };
+      },
+    },
+    mounted: function () {
+      this.injectImgSrc();
+      this.populateFilterTags();
+      this.imageItems = this.imageThumbnails;
+    },
+    watch: {
+      imageThumbnails: {
+        handler: function (value) {
+          if (value) {
+            this.injectImgSrc();
+            this.populateFilterTags();
+            this.imageItems = this.imageThumbnails;
+          }
+        },
+        deep: true,
+      },
+    },
+    methods: {
+      injectImgSrc: function() {
+        this.imageThumbnails.forEach((imageThumbnail) => {
+          return this.mapImage(imageThumbnail);
+        });
+      },
+      formattedTitle: function(imageThumbnail) {
+        const type = imageThumbnail.mimetype?.split('/')[1];
+        const title = imageThumbnail.title;
+        let formattedTitle = '';
+        if (type !== 'jpg') {
+          formattedTitle = title.replace('.' + type, '');
+        }
+        formattedTitle = formattedTitle.replaceAll('_', ' ');
+        return formattedTitle;
+      },
+      datasetURL: function(id) {
+        return `https://sparc.science/datasets/${id}?type=dataset`;
+      },
+      mapImage: async function (image) {
+        const imgSrc = await this.transformedImage(image.thumbnail);
+        if (imgSrc) {
+          image.imgSrc = imgSrc;
+        }
+      },
+      transformedImage: async function(imgUrl) {
+        try {
+          const response = await fetch(imgUrl);
+          if (!response.ok) {
+            return null;
+          }
+          const data = await response.text();
+          return BASE64PREFIX + data;
+        } catch (error) {
+          return null;
+        }
+      },
+      removeSpeciesFilterTag: function () {
+        this.activeSpecies = { name: "" };
+        this.imageItems = this.imageThumbnails;
+      },
+      filterBySpecies: function (tagInfo) {
+        this.activeSpecies = tagInfo;
+        let filteredImageItems = [];
+        this.imageThumbnails.forEach((image) => {
+          if (image.species && image.species.length) {
+            image.species.forEach((species) => {
+              if (species === tagInfo.name) {
+                filteredImageItems.push(image);
+              }
+            });
+          }
+        });
+        this.imageItems = filteredImageItems;
+      },
+      populateFilterTags: function () {
+        let imageObjects = {};
+        this.imageThumbnails.forEach((image) => {
+          if (image.species && image.species.length) {
+            image.species.forEach((species) => {
+              if (!(species in imageObjects)) {
+                imageObjects[species] = {
+                  name: species,
+                  count: 0,
+                };
+              }
+              imageObjects[species].count++;
+            });
+          }
+        });
+        this.speciesFilterTags = Object.values(imageObjects);
+      },
+      getCopyContent: function (imageThumbnail) {
+        const contentArray = [];
+
+        // Use <div> instead of <h1>..<h6> or <p>
+        // to avoid default formatting on font size and margin
+
+        // Title
+        if (imageThumbnail.title) {
+          contentArray.push(`<div><strong>${this.formattedTitle(imageThumbnail)}</strong></div>`);
+        }
+
+        // Type
+        if (imageThumbnail.type) {
+          let imageType = `<div><strong>Type:</strong></div>`;
+          imageType += `\n`;
+          imageType += `${imageThumbnail.type}`;
+          contentArray.push(`<div>${imageType}</div>`);
+        }
+
+        // Species
+        if (imageThumbnail.species?.length) {
+          let species = `<div><strong>Species:</strong></div>`;
+          species += `\n`;
+          species += imageThumbnail.species.join(', ');
+          contentArray.push(`<div>${species}</div>`);
+        }
+
+        // Image URL
+        if (imageThumbnail.link) {
+          let thumbnailLink = `<div><strong>Link:</strong></div>`;
+          thumbnailLink += `\n`;
+          thumbnailLink += `<a href="${imageThumbnail.link}">${imageThumbnail.link}</a>`;
+          contentArray.push(`<div>${thumbnailLink}</div>`);
+        }
+
+        // Dataset ID
+        if (imageThumbnail.id) {
+          let datasetIdContent = `<div><strong>Dataset ID:</strong></div>`;
+          datasetIdContent += `\n`;
+          datasetIdContent += `${imageThumbnail.id}`;
+          contentArray.push(`<div>${datasetIdContent}</div>`);
+        }
+
+        // Dataset URL
+        if (imageThumbnail.id) {
+          const datasetURL = this.datasetURL(imageThumbnail.id);
+          let dataLocationContent = `<div><strong>Dataset URL:</strong></div>`;
+          dataLocationContent += `\n`;
+          dataLocationContent += `<a href="${datasetURL}">${datasetURL}</a>`;
+          contentArray.push(`<div>${dataLocationContent}</div>`);
+        }
+
+        // Dataset version
+        if (imageThumbnail.version) {
+          let versionContent = `<div><strong>Dataset version:</strong></div>`;
+          versionContent += `\n`;
+          versionContent += `${imageThumbnail.version}`;
+          contentArray.push(`<div>${versionContent}</div>`);
+        }
+
+        const copyContent = contentArray.join('\n\n<br>');
+        return copyContent;
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+.image-thumbnails-container {
+  font-size: 14px;
+  text-align: left;
+  line-height: 1.5em;
+  font-family: $font-family;
+  font-weight: 400;
+  background-color: #f7faff;
+  border-left: 1px solid var(--el-border-color);
+  border-top: 1px solid var(--el-border-color);
+  display: flex;
+  flex-direction: column;
+  height: calc(100% - 30px); // minus tabs height
+  z-index: 1;
+}
+
+.toolbar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem;
+  gap: 1rem;
+  background-color: #f7faff;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.filters {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 5px;
+
+  .tag {
+    cursor: pointer;
+  }
+}
+
+.view-selector .el-select {
+  width: 100px;
+  font-family: $font-family;
+}
+
+.gallery-container,
+.dataset-card-container {
+  margin: 1rem;
+  margin-top: 0;
+  padding: 1rem;
+  flex-grow: 1;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
+  border: solid 1px #e4e7ed;
+  background-color: #ffffff;
+  border-radius: var(--el-border-radius-base);
+}
+
+.gallery-container {
+  :deep(.gallery) {
+    .gallery-strip {
+      padding: 1rem 0;
+    }
+
+    > div {
+      min-height: max-content !important;
+    }
+  }
+}
+
+.dataset-card-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.dataset-card {
+  position: relative;
+
+  + .dataset-card {
+    padding-top: 1.5rem;
+    border-top: 1px solid var(--el-border-color);
+  }
+}
+
+.card {
+  position: relative;
+  display: flex;
+  gap: 1.5rem;
+}
+
+.card-left {
+  flex: 1;
+}
+
+.card-right {
+  flex: 1.3;
+  padding-left: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.card-image {
+  display: block;
+  text-decoration: none;
+  outline: none;
+
+  .el-image {
+    display: block;
+    width: 200px;
+    height: 150px;
+
+    :deep(img) {
+      aspect-ratio: 4/3;
+      object-fit: cover;
+    }
+  }
+
+  .image-slot {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    background: var(--el-fill-color-light);
+    color: var(--el-text-color-secondary);
+    font-size: 14px;
+  }
+}
+
+.title {
+  font-family: $font-family;
+  font-size: 14px;
+  font-weight: bold;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.5;
+  letter-spacing: 1.05px;
+  color: #484848;
+}
+
+.details {
+  font-family: $font-family;
+  font-size: 14px;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.5;
+  letter-spacing: 1.05px;
+  color: #484848;
+}
+
+.active-tag {
+  background-color: $app-primary-color;
+  color: #fff;
+}
+
+.button {
+  margin-left: 0px !important;
+  margin-top: 0px !important;
+  font-size: 14px !important;
+  letter-spacing: initial;
+  background-color: $app-primary-color;
+  color: #fff;
+
+  & + .button {
+    margin-top: 10px !important;
+  }
+  &:hover {
+    color: #fff !important;
+    background: #ac76c5 !important;
+    border: 1px solid #ac76c5 !important;
+  }
+}
+
+.card-button-link {
+  text-decoration: none;
+}
+
+.float-button-container {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  opacity: 0;
+  visibility: hidden;
+
+  .dataset-card:hover & {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+</style>
+
+<style lang="scss">
+  .view-selector-select-popper {
+    font-family: $font-family;
+    font-size: 14px;
+    color: #292b66;
+
+    .el-select-dropdown__item.is-selected {
+      color: $app-primary-color;
+    }
+  }
+</style>

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 {