PMR results mixed

.env

@@ -5,4 +5,5 @@ VITE_APP_PENNSIEVE_API_LOCATION=https://api.pennsieve.io
 VITE_APP_ALGOLIA_INDEX=k-core_dev_published_time_desc
 VITE_APP_BL_SERVER_URL=
 VITE_APP_NL_LINK_PREFIX=
-VITE_APP_ROOT_URL=
+VITE_APP_ROOT_URL=
+VITE_APP_FLATMAP_API_LOCATION='https://mapcore-demo.org/isan/flatmap/'

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</el-button>
       <el-button @click="addStomach">Add stomach to Filter</el-button>
@@ -23,6 +24,7 @@
       :tabs="tabs"
       :activeTabId="activeId"
       :connectivityInfo="connectivityInput"
+      :withPMRData="true"
       @tabClicked="tabClicked"
       @search-changed="searchChanged($event)"
       @hover-changed="hoverChanged($event)"
@@ -112,6 +114,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,
@@ -130,6 +133,9 @@ export default {
     // For connectivity input actions
     action: function (action) {
       console.log('action fired: ', action)
+      if (action.type === 'Flatmap' || action.type === 'Simulation') {
+        return;
+      }
       let facets = [];
       facets.push(
         ...action.labels.map(val => ({
@@ -143,6 +149,18 @@ export default {
         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(
         [],

src/algolia/algolia.js

@@ -45,7 +45,7 @@ export class AlgoliaClient {
               }
               if (facet === info[0]) {
                 filtered.push({
-                  label: info[1], 
+                  label: info[1],
                   id: facetId++,
                   facetPropPath: `${parentFacet ? parentFacet.facetSubpropPath : undefined}`
                 });
@@ -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,47 @@ 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) {
+    // 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)
+          })
+      })
+    }
   }
 
   /**
@@ -219,7 +232,7 @@ export class AlgoliaClient {
       id: h.objectID,
       terms: h.anatomy? h.anatomy.organ.map(o=>o.curie) : []
     }))
-    return curieForDatsets 
+    return curieForDatsets
   }
   processResultsForScaffold(hits) {
     let numberOfDatasetsForAnatomy = {}

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)

src/components.d.ts

@@ -26,7 +26,9 @@ declare module 'vue' {
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElTag: typeof import('element-plus/es')['ElTag']
     ExternalResourceCard: typeof import('./components/ExternalResourceCard.vue')['default']
+    FlatmapDatasetCard: typeof import('./components/FlatmapDatasetCard.vue')['default']
     ImageGallery: typeof import('./components/ImageGallery.vue')['default']
+    PMRDatasetCard: typeof import('./components/PMRDatasetCard.vue')['default']
     SearchFilters: typeof import('./components/SearchFilters.vue')['default']
     SearchHistory: typeof import('./components/SearchHistory.vue')['default']
     SideBar: typeof import('./components/SideBar.vue')['default']

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})` : '' }}
@@ -355,6 +356,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;
@@ -430,8 +440,8 @@ export default {
 
 .float-button-container {
   position: absolute;
-  bottom: 8px;
-  right: 16px;
+  bottom: 0;
+  right: 4px;
   opacity: 0;
   visibility: hidden;