@abi-software/map-side-bar 2.3.1 → 2.4.0-isan-0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.3.1",
+  "version": "2.4.0-isan-0",
   "files": [
     "dist/*",
     "src/*",

package/src/App.vue

@@ -112,6 +112,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,
+        FLATMAP_API_LOCATION: import.meta.env.VITE_APP_FLATMAP_API_LOCATION,
       },
       connectivityInput: exampleConnectivityInput,
       activeId: 1,
@@ -119,7 +120,7 @@ export default {
   },
   methods: {
     hoverChanged: function (data) {
-      console.log('hoverChanged', data)
+      // console.log('hoverChanged', data)
     },
     searchChanged: function (data) {
       console.log(data)
@@ -131,16 +132,18 @@ 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, "");
+        }
       }
     },
     openSearch: function () {

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

@@ -60,8 +60,13 @@ export function getFilters(selectedFacetArray=undefined) {
     return 'NOT item.published.status:embargo'
   }
 
-  // Switch the 'term' attribute to 'label' if 'label' does not exist 
-  selectedFacetArray.forEach(f=>f.label=f.facet)
+  // Switch the 'term' attribute to 'label' if 'label' does not exist. Use facet2 if available
+  selectedFacetArray.forEach(f=>{
+    f.label=f.facet
+    if (f.facet2) {
+      f.label = f.facet2
+    }
+  })
   
 
   let facets = removeShowAllFacets(selectedFacetArray)

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})` : '' }}
@@ -282,6 +283,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,303 @@
+<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"
+            >
+              OMEX 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
+ * ---------------------------------------
+ */
+
+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 (payload) {
+      this.$emit('flatmap-clicked', payload)
+    },
+    onSimulationClick: function (payload) {
+      const simulationData = {
+        title: this.entry.title,
+        description: this.entry.description,
+        resource: payload,
+      };
+      this.$emit('simulation-clicked', simulationData)
+    },
+  }
+};
+</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

@@ -261,12 +261,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
      */
@@ -468,7 +485,7 @@ export default {
               facetSubPropPath: facetSubPropPath, // will be used for filters if we are at the third level of the cascader
             }
           })
-        
+
         this.$emit('loading', true) // let sidebarcontent wait for the requests
         this.$emit('filterResults', filters) // emit filters for apps above sidebar
         this.setCascader(filterKeys) //update our cascader v-model if we modified the event
@@ -630,7 +647,7 @@ export default {
           let filters = createFilter(e)
           return filters
         })
-        
+
         // Unforttunately the cascader is very particular about it's v-model
         //   to get around this we create a clone of it and use this clone for adding our boolean information
         this.cascadeSelectedWithBoolean = filterFacets.map((e) => {

package/src/components/SideBar.vue

@@ -46,6 +46,8 @@
               :contextCardEntry="tab.contextCard"
               :envVars="envVars"
               :ref="'searchTab_' + tab.id"
+              @flatmap-clicked="onFlatmapClicked"
+              @simulation-clicked="onSimulationClicked"
               @search-changed="searchChanged(tab.id, $event)"
               @hover-changed="hoverChanged($event)"
             />
@@ -246,6 +248,24 @@ export default {
     setDrawerOpen: function (value = true) {
       this.drawerOpen = value
     },
+    onFlatmapClicked: function (data) {
+      const payload = {
+        type: 'Flatmap',
+        data: data
+      };
+      this.$emit('actionClick', payload);
+    },
+    onSimulationClicked: function (data) {
+      const payload = {
+        type: 'Simulation',
+        title: 'View simulation',
+        apiLocation: this.envVars.API_LOCATION,
+        name: data.title,
+        description: data.description,
+        resource: data.resource,
+      };
+      this.$emit('actionClick', payload);
+    },
     /**
      * @vuese
      * The function to emit 'tabClicked' event with tab's `id` and tab's `type`