@abi-software/map-side-bar 2.7.0 → 2.7.1-isan.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.7.0",
+  "version": "2.7.1-isan.1",
   "files": [
     "dist/*",
     "src/*",

package/src/App.vue

@@ -6,6 +6,7 @@
     />
     <div class="options-container">
       <div>Click arrow to open sidebar</div>
+      <el-button @click="openPMRSearch">PMR Search</el-button>
       <el-button @click="openSearch">search Uberon from refs</el-button>
       <el-button @click="singleFacets">Add heart to Filter (facet2 set)</el-button>
       <el-button @click="addStomach">Add stomach to Filter</el-button>
@@ -114,7 +115,6 @@ export default {
         { title: 'Flatmap', id: 1, type: 'search'},
         { title: 'Connectivity', id: 2, type: 'connectivity' },
         { title: 'Annotation', id: 3, type: 'annotation' },
-        { title: 'Connectivity Explorer', id: 4, type: 'connectivityExplorer' }
       ],
       sideBarVisibility: true,
       envVars: {
@@ -126,7 +126,7 @@ export default {
         BL_SERVER_URL: import.meta.env.VITE_APP_BL_SERVER_URL,
         NL_LINK_PREFIX: import.meta.env.VITE_APP_NL_LINK_PREFIX,
         ROOT_URL: import.meta.env.VITE_APP_ROOT_URL,
-        FLATMAPAPI_LOCATION: import.meta.env.VITE_FLATMAPAPI_LOCATION,
+        FLATMAP_API_LOCATION: import.meta.env.VITE_APP_FLATMAP_API_LOCATION,
       },
       connectivityInput: exampleConnectivityInput,
       activeId: 1,
@@ -142,7 +142,7 @@ export default {
   },
   methods: {
     hoverChanged: function (data) {
-      console.log('hoverChanged', data)
+      // console.log('hoverChanged', data)
     },
     searchChanged: function (data) {
       console.log(data)
@@ -154,18 +154,32 @@ export default {
     action: function (action) {
       console.log('action fired: ', action)
       let facets = [];
-      facets.push(
-        ...action.labels.map(val => ({
-          facet: capitalise(val),
-          term: "Anatomical structure",
-          facetPropPath: "anatomy.organ.category.name",
-        }))
-      );
-      if (this.$refs.sideBar) {
-        console.log('openSearch', facets)
-        this.$refs.sideBar.openSearch(facets, "");
+      if (action.labels) {
+        facets.push(
+          ...action.labels.map(val => ({
+            facet: capitalise(val),
+            term: "Anatomical structure",
+            facetPropPath: "anatomy.organ.category.name",
+          }))
+        );
+        if (this.$refs.sideBar) {
+          console.log('openSearch', facets)
+          this.$refs.sideBar.openSearch(facets, "");
+        }
       }
     },
+    openPMRSearch: function () {
+      this.$refs.sideBar.openSearch(
+        [
+          {
+            facet: "PMR",
+            term: "Data type",
+            facetPropPath: "item.types.name",
+          }
+        ],
+        'cardiovascular multiscale model'
+      );
+    },
     openSearch: function () {
       this.$refs.sideBar.openSearch(
         [],

package/src/algolia/algolia.js

@@ -100,6 +100,7 @@ export class AlgoliaClient {
     for (let res of results) {
       newResult = { ...res }
       newResult = {
+        dataSource: 'SPARC',
         anatomy: res.anatomy ? res.anatomy.organ.map((organ => organ.curie)) : undefined,
         doi: res.item.curie.split(':')[1],
         name: res.item.name,
@@ -152,35 +153,48 @@ export class AlgoliaClient {
    * Get Search results
    * This is using fetch from the Algolia API
    */
-  search(filter, query = '', hitsperPage = 10, page = 1) {
-    return new Promise(resolve => {
-      this.index
-        .search(query, {
-          facets: ['*'],
-          hitsPerPage: hitsperPage,
-          page: page - 1,
-          filters: filter,
-          attributesToHighlight: [],
-          attributesToRetrieve: [
-            'pennsieve.publishDate',
-            'pennsieve.updatedAt',
-            'item.curie',
-            'item.name',
-            'item.description',
-            'objectID',
-            'anatomy.organ.curie'
-          ],
-        })
-        .then(response => {
-          let searchData = {
-            items: this._processResultsForCards(response.hits),
-            total: response.nbHits,
-            discoverIds: response.hits.map(r => r.pennsieve ? r.pennsieve.identifier : r.objectID),
-            dois: response.hits.map(r => r.item.curie.split(':')[1])
-          }
-          resolve(searchData)
+  search(filter, query = '', offset = 0, length = 8) {
+    console.log('searching', filter, query, offset, length)
+    // If the length is 0, return an empty result
+    if (length === 0) {
+      return new Promise(resolve => {
+        resolve({
+          items: [],
+          total: 0,
+          discoverIds: [],
+          dois: []
         })
-    })
+      })
+    } else {
+      return new Promise(resolve => {
+        this.index
+          .search(query, {
+            facets: ['*'],
+            offset: offset,
+            length: length,
+            filters: filter,
+            attributesToHighlight: [],
+            attributesToRetrieve: [
+              'pennsieve.publishDate',
+              'pennsieve.updatedAt',
+              'item.curie',
+              'item.name',
+              'item.description',
+              'objectID',
+              'anatomy.organ.curie'
+            ],
+          })
+          .then(response => {
+            let searchData = {
+              items: this._processResultsForCards(response.hits),
+              total: response.nbHits,
+              discoverIds: response.hits.map(r => r.pennsieve ? r.pennsieve.identifier : r.objectID),
+              dois: response.hits.map(r => r.item.curie.split(':')[1])
+            }
+            resolve(searchData)
+          })
+      })
+    }
   }
 
   /**

package/src/algolia/utils.js

@@ -70,7 +70,6 @@ export function getFilters(selectedFacetArray=undefined) {
   // Switch the 'term' attribute to 'label' if 'label' does not exist
   selectedFacetArray.forEach(f=>f.label=f.facet)
 
-
   let facets = removeShowAllFacets(selectedFacetArray)
 
   let filters = "NOT item.published.status:embargo";

package/src/components/DatasetCard.vue

@@ -19,6 +19,7 @@
           />
         </span>
         <div class="card-right">
+          <el-tag type="primary" class="source-tag">SPARC Dataset</el-tag>
           <div class="title" @click="cardClicked">{{ entry.name }}</div>
           <div class="details">
             {{ contributors }} {{ entry.publishDate ? `(${publishYear})` : '' }}
@@ -371,6 +372,15 @@ export default {
   color: #484848;
   cursor: pointer;
 }
+
+.source-tag {
+  margin-bottom: 0.75rem;
+  margin-right: 2rem;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+
 .card {
   padding-top: 18px;
   position: relative;

package/src/components/PMRDatasetCard.vue

@@ -0,0 +1,317 @@
+<template>
+  <div class="dataset-card-container"  ref="container">
+    <div class="dataset-card"  ref="card">
+      <div class="seperator-path"></div>
+      <div v-loading="loading" class="card" >
+        <span class="card-left">
+          <a class="card-image-container" :href="entry.exposure" target="_blank">
+            <img
+              class="card-image"
+              :src="thumbnail"
+              width="210"
+              height="210"
+              :alt="entry.title"
+              loading="lazy"
+            />
+          </a>
+        </span>
+        <div class="card-right">
+          <el-tag type="primary" class="source-tag">PMR</el-tag>
+          <div>
+            <h4 class="title">{{ entry.title }}</h4>
+            <div class="details">
+              {{ entry.authors }}
+            </div>
+          </div>
+          <div class="details" v-if="entry.description">
+            {{ entry.description }}
+          </div>
+          <div class="buttons-group">
+            <a
+              :href="entry.exposure"
+              target="_blank"
+              class="el-button el-button--small button"
+            >
+              Exposure
+            </a>
+            <a
+              v-if="entry.omex"
+              :href="entry.omex"
+              target="_blank"
+              class="el-button el-button--small button"
+            >
+              COMBINE archive
+            </a>
+            <el-button v-if="entry.flatmap"
+              size="small"
+              class="button"
+              @click="onFlatmapClick(entry.flatmap)"
+            >
+              Flatmap
+            </el-button>
+            <el-button v-if="entry.simulation"
+              size="small"
+              class="button"
+              @click="onSimulationClick(entry.simulation)"
+            >
+              Simulation
+            </el-button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<script>
+/* eslint-disable no-alert, no-console */
+import {
+  ElButton,
+  ElIcon,
+  ElTag
+} from 'element-plus'
+
+/**
+ * Entry Object - Data types
+ * ---------------------------------------
+"exposure"
+    type: String
+    description: The exposure URL
+
+"title"
+    type: String
+    description: The title
+
+"sha"
+    type: String
+    description:
+
+"workspace"
+    type: String
+    description: The workspace URL
+
+"omex"
+    type: String
+    description:
+
+"image"
+    type: String
+    description: The image URL
+
+"authors"
+    type: String
+    description: Comma separated values if more than one
+
+"description"
+    type: String
+    description: The description
+
+"flatmap"
+    type: String
+    descriptin: (Optional) to link to flatmap
+
+"simulation"
+    type: String
+    descriptin: (Optional) simulation resource
+ * ---------------------------------------
+ */
+
+const placeholderThumbnail = 'assets/missing-image.svg';
+
+export default {
+  name: "PMRDatasetCard",
+  components: {
+    ElButton,
+    ElIcon,
+    ElTag
+  },
+  props: {
+    /**
+     * Object containing information for
+     * the required viewing.
+     */
+    entry: {
+      type: Object,
+      default: () => {}
+    },
+    envVars: {
+      type: Object,
+      default: () => {}
+    },
+  },
+  data: function () {
+    return {
+      thumbnail: this.entry.image || placeholderThumbnail,
+      loading: false,
+    };
+  },
+  methods: {
+    onFlatmapClick: function (data) {
+      this.emitPMRActionClick({
+        type: 'Flatmap',
+        resource: data
+      });
+    },
+    onSimulationClick: function (data) {
+      this.emitPMRActionClick({
+        type: 'Simulation',
+        resource: data,
+      });
+    },
+    emitPMRActionClick: function (data) {
+      const payload = {
+        ...data,
+        name: this.entry.title,
+        description: this.entry.description,
+        apiLocation: this.envVars.API_LOCATION,
+      };
+      this.$emit('pmr-action-click', payload);
+    },
+  }
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+
+.dataset-card-container {
+  padding: 0 1rem;
+}
+
+.dataset-card {
+  position: relative;
+  min-height:17rem;
+}
+
+.title {
+  padding-bottom: 0.75rem;
+  font-family: Asap;
+  font-size: 14px;
+  font-weight: bold;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.5;
+  letter-spacing: 1.05px;
+  color: #484848;
+}
+.card {
+  font-family: Asap;
+  padding-top: 18px;
+  position: relative;
+  display: flex;
+
+  h4,
+  p {
+    margin: 0;
+  }
+}
+
+.card-left{
+  flex: 1;
+}
+
+.card-right {
+  flex: 1.3;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  min-height: 17rem;
+}
+
+.details {
+  font-family: Asap;
+  font-size: 14px;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.5;
+  letter-spacing: 1.05px;
+  color: #484848;
+}
+
+.el-button {
+  font-family: Asap;
+  font-size: 14px;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: normal;
+  text-decoration: none;
+}
+
+.button {
+  background-color: $app-primary-color;
+  border: $app-primary-color;
+  color: white;
+  transition: all 0.3s ease;
+
+  &:hover,
+  &:focus {
+    color: white;
+    background-color: $app-primary-color;
+    outline: none;
+  }
+}
+
+.card-image-container {
+  display: block;
+  width: 244px; // gallery image full-size width
+}
+
+.card-image {
+  max-width: 100%;
+  height: auto;
+  object-fit: cover;
+}
+
+.buttons-group {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+
+  .el-button {
+    border-radius: 4px!important;
+    font-size: 0.75rem!important;
+    padding: 0.2rem 0.2rem!important;
+    background: #f9f2fc!important;
+    border: 1px solid $app-primary-color!important;
+    color: $app-primary-color!important;
+
+    &.active {
+      background: $app-primary-color!important;
+      border: 1px solid $app-primary-color!important;
+      color: #fff!important;
+    }
+  }
+
+  .el-button + .el-button {
+    margin: 0;
+  }
+}
+
+.source-tag {
+  margin-bottom: 0.75rem;
+  margin-right: 2rem;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+
+.loading-icon {
+  z-index: 20;
+  width: 40px;
+  height: 40px;
+  left: 80px;
+}
+
+.loading-icon ::v-deep(.el-loading-mask) {
+  background-color: rgba(117, 190, 218, 0.0) !important;
+}
+
+.loading-icon ::v-deep(.el-loading-spinner .path) {
+  stroke: $app-primary-color;
+}
+</style>

package/src/components/SearchFilters.vue

@@ -266,12 +266,29 @@ export default {
                 }
               })
             })
+
+            this.populatePMRinCascader();
           })
           .finally(() => {
             resolve()
           })
       })
     },
+    /**
+     * Add PMR checkbox in filters (cascader)
+     */
+    populatePMRinCascader: function () {
+      for (let i = 0; i < this.options.length; i += 1) {
+        const option = this.options[i];
+        // match with "Data type"'s' key
+        if (option.key === 'item.types.name') {
+          option.children.push({
+            label: 'PMR',
+            value: this.createCascaderItemValue("Data type", "PMR"),
+          });
+        }
+      }
+    },
     /**
      * Create manual events when cascader tag is closed
      */

package/src/components/SideBar.vue

@@ -54,13 +54,6 @@
                 @confirm-delete="$emit('confirm-delete', $event)"
               />
             </template>
-            <template v-else-if="tab.type === 'connectivityExplorer'">
-              <connectivity-explorer
-                :ref="'connectivityExplorerTab_' + tab.id"
-                v-show="tab.id === activeTabId"
-                :envVars="envVars"
-              />
-            </template>
             <template v-else>
               <SidebarContent
                 class="sidebar-content-container"
@@ -70,6 +63,7 @@
                 :ref="'searchTab_' + tab.id"
                 @search-changed="searchChanged(tab.id, $event)"
                 @hover-changed="hoverChanged($event)"
+                @pmr-action-click="onPmrActionClick"
               />
             </template>
           </template>
@@ -91,7 +85,6 @@ import EventBus from './EventBus.js'
 import Tabs from './Tabs.vue'
 import AnnotationTool from './AnnotationTool.vue'
 import ConnectivityInfo from './ConnectivityInfo.vue'
-import ConnectivityExplorer from './ConnectivityExplorer.vue'
 
 /**
  * Aims to provide a sidebar for searching capability for SPARC portal.
@@ -106,7 +99,6 @@ export default {
     Icon,
     ConnectivityInfo,
     AnnotationTool,
-    ConnectivityExplorer,
   },
   name: 'SideBar',
   props: {
@@ -135,8 +127,7 @@ export default {
       default: () => [
         { id: 1, title: 'Search', type: 'search' },
         { id: 2, title: 'Connectivity', type: 'connectivity' },
-        { id: 3, title: 'Annotation', type: 'annotation' },
-        { id: 4, title: 'Connectivity Explorer', type: 'connectivityExplorer' }
+        { id: 3, title: 'Annotation', type: 'annotation' }
       ],
     },
     /**
@@ -181,6 +172,7 @@ export default {
   data: function () {
     return {
       drawerOpen: false,
+      initFilters: { filter: [], searchInput: '' },
       availableAnatomyFacets: []
     }
   },
@@ -235,7 +227,9 @@ export default {
       this.drawerOpen = !this.drawerOpen
     },
     openSearch: function (facets, query) {
-      this.drawerOpen = true
+      this.initFilters.filter = facets;
+      this.initFilters.searchInput = query;
+      this.drawerOpen = true;
       // Because refs are in v-for, nextTick is needed here
       this.$nextTick(() => {
         const searchTabRef = this.getSearchTabRefById(1);
@@ -262,8 +256,6 @@ export default {
         refIdPrefix = 'connectivityTab_';
       } else if (type === 'annotation') {
         refIdPrefix = 'annotationTab_';
-      } else if (type === 'connectivityExplorer') {
-        refIdPrefix = 'connectivityExplorerTab_';
       }
       const tabObj = this.getTabByIdAndType(id, type);
       const tabRefId = refIdPrefix + tabObj.id;
@@ -310,6 +302,9 @@ export default {
     setDrawerOpen: function (value = true) {
       this.drawerOpen = value
     },
+    onPmrActionClick: function (payload) {
+      this.$emit('actionClick', payload);
+    },
     /**
      * The function to emit 'tabClicked' event with tab's `id` and tab's `type`
      * when user clicks the sidebar tab.
@@ -339,7 +334,7 @@ export default {
     activeTabs: function() {
       const tabs = []
       this.tabs.forEach((tab) => {
-        if (tab.type === "search" || tab.type === "connectivityExplorer") {
+        if (tab.type === "search") {
           tabs.push(tab)
         } else if (tab.type === "connectivity") {
           if (this.connectivityInfo) {