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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.4.0-isan-0",
+  "version": "2.4.0-isan-2",
   "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</el-button>
       <el-button @click="addStomach">Add stomach to Filter</el-button>
@@ -146,6 +147,18 @@ export default {
         }
       }
     },
+    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/components/PMRDatasetCard.vue

@@ -110,6 +110,10 @@ import {
 "flatmap"
     type: String
     descriptin: (Optional) to link to flatmap
+
+"simulation"
+    type: String
+    descriptin: (Optional) simulation resource
  * ---------------------------------------
  */
 
@@ -143,16 +147,26 @@ export default {
     };
   },
   methods: {
-    onFlatmapClick: function (payload) {
-      this.$emit('flatmap-clicked', payload)
+    onFlatmapClick: function (data) {
+      this.emitPMRActionClick({
+        type: 'Flatmap',
+        resource: data
+      });
+    },
+    onSimulationClick: function (data) {
+      this.emitPMRActionClick({
+        type: 'Simulation',
+        resource: data,
+      });
     },
-    onSimulationClick: function (payload) {
-      const simulationData = {
-        title: this.entry.title,
+    emitPMRActionClick: function (data) {
+      const payload = {
+        ...data,
+        name: this.entry.title,
         description: this.entry.description,
-        resource: payload,
+        apiLocation: this.envVars.API_LOCATION,
       };
-      this.$emit('simulation-clicked', simulationData)
+      this.$emit('pmr-action-click', payload);
     },
   }
 };

package/src/components/SideBar.vue

@@ -45,9 +45,9 @@
               v-show="tab.id === activeTabId"
               :contextCardEntry="tab.contextCard"
               :envVars="envVars"
+              :initFilters="initFilters"
               :ref="'searchTab_' + tab.id"
-              @flatmap-clicked="onFlatmapClicked"
-              @simulation-clicked="onSimulationClicked"
+              @pmr-action-click="onPmrActionClick"
               @search-changed="searchChanged(tab.id, $event)"
               @hover-changed="hoverChanged($event)"
             />
@@ -138,6 +138,7 @@ export default {
   data: function () {
     return {
       drawerOpen: false,
+      initFilters: { filter: [], searchInput: '' },
       availableAnatomyFacets: []
     }
   },
@@ -178,7 +179,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);
@@ -248,22 +251,7 @@ 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,
-      };
+    onPmrActionClick: function (payload) {
       this.$emit('actionClick', payload);
     },
     /**

package/src/components/SidebarContent.vue

@@ -53,8 +53,7 @@
           class="dataset-card"
           :entry="result"
           :envVars="envVars"
-          @flatmap-clicked="onFlatmapClicked"
-          @simulation-clicked="onSimulationClicked"
+          @pmr-action-click="onPmrActionClick"
           @mouseenter="hoverChanged(result)"
           @mouseleave="hoverChanged(undefined)"
         ></PMRDatasetCard>
@@ -122,6 +121,7 @@ var initial_state = {
   numberPerPage: 10,
   page: 1,
   pmrResultsOnlyFlag: false,
+  noPMRResultsFlag: false,
   hasSearched: false,
   contextCardEnabled: false,
   pmrResults: [],
@@ -158,6 +158,13 @@ export default {
       type: Object,
       default: () => initial_state,
     },
+    initFilters: {
+      type: Object,
+      default: {
+        filter: [],
+        searchInput: '',
+      }
+    },
     envVars: {
       type: Object,
       default: () => {},
@@ -166,6 +173,7 @@ export default {
   data: function () {
     return {
       ...this.entry,
+      ...this.initFilters,
       bodyStyle: {
         flex: '1 1 auto',
         'flex-flow': 'column',
@@ -199,11 +207,8 @@ export default {
     hoverChanged: function (data) {
       this.$emit('hover-changed', data)
     },
-    onFlatmapClicked: function (data) {
-      this.$emit('flatmap-clicked', data);
-    },
-    onSimulationClicked: function (payload) {
-      this.$emit('simulation-clicked', payload)
+    onPmrActionClick: function (data) {
+      this.$emit('pmr-action-click', data);
     },
     // resetSearch: Resets the results, and page, and variable results ratio
     //     Does not: reset filters, search input, or search history
@@ -219,17 +224,20 @@ export default {
     },
     // openSearch: Resets the results, populates dataset cards and filters. Will use Algolia and SciCrunch data uness pmr mode is set
     openSearch: function(filter, search = '', resetSearch = true) {
+      this.updatePMROnlyFlag(filter);
+
       if (resetSearch) {
         this.resetSearch();
-        this.openAlgoliaSearch(filter, search);
+        this.openFilterSearch(filter, search);
       } else {
         this.searchAlgolia(filter, search);
+        this.openPMRSearch(filter, search);
       }
-      this.openPMRSearch(filter, search)
     },
 
     // openPMRSearch: Resets the results, populates dataset cards and filters with PMR data.
     openPMRSearch: function (filter, search = '') {
+      this.loadingCards = true;
       this.flatmapQueries.updateOffset(this.calculatePMROffest())
       this.flatmapQueries.updateLimit(this.PMRLimit(this.pmrResultsOnlyFlag))
       this.flatmapQueries.pmrSearch(filter, search).then((data) => {
@@ -237,11 +245,13 @@ export default {
           this.results.push(result)
         })
         this.pmrNumberOfHits = this.flatmapQueries.numberOfHits
+        this.loadingCards = false;
       })
     },
 
-    // openAlgoliaSearch: Resets the results, populates dataset cards and filters with Algloia and SciCrunch data.
-    openAlgoliaSearch: function (filter, search = '') {
+    // previously openAlgoliaSearch:
+    // Resets the results, populates dataset cards and filters with Algloia and SciCrunch data.
+    openFilterSearch: function (filter, search = '') {
       this.searchInput = search
       //Proceed normally if cascader is ready
       if (this.cascaderIsReady) {
@@ -259,7 +269,14 @@ export default {
           this.$refs.filtersRef.checkShowAllBoxes()
           this.resetSearch()
         } else if (this.filter) {
-          this.searchAlgolia(this.filter, search)
+          if (this.pmrResultsOnlyFlag) {
+            this.openPMRSearch(this.filter, search);
+          } else if (this.noPMRResultsFlag) {
+            this.searchAlgolia(this.filter, search);
+          } else {
+            this.searchAlgolia(this.filter, search);
+            this.openPMRSearch(this.filter, search);
+          }
           this.$refs.filtersRef.setCascader(this.filter)
         }
       } else {
@@ -267,7 +284,14 @@ export default {
         //otherwise waith for cascader to be ready
         this.filter = filter
         if (!filter || filter.length == 0) {
-          this.searchAlgolia(this.filter, search)
+          if (this.pmrResultsOnlyFlag) {
+            this.openPMRSearch(this.filter, search);
+          } else if (this.noPMRResultsFlag) {
+            this.searchAlgolia(this.filter, search);
+          } else {
+            this.searchAlgolia(this.filter, search);
+            this.openPMRSearch(this.filter, search);
+          }
         }
       }
     },
@@ -307,11 +331,19 @@ export default {
       }
     },
     updatePMROnlyFlag: function (filters) {
-      const pmrSearchObject = filters.find((tmp) => tmp.facet === 'PMR');
-      if (pmrSearchObject) {
-        this.pmrResultsOnlyFlag = true
-      } else {
-        this.pmrResultsOnlyFlag = false
+      const dataTypeFilters = filters.filter((item) => item.facetPropPath === 'item.types.name');
+      const pmrFilter = dataTypeFilters.filter((item) => item.facet === 'PMR');
+      const showAllFilter = dataTypeFilters.filter((item) => item.facet === 'Show all');
+
+      this.pmrResultsOnlyFlag = false;
+      this.noPMRResultsFlag = false;
+
+      if (dataTypeFilters.length === 1 && pmrFilter.length === 1) {
+        this.pmrResultsOnlyFlag = true;
+      }
+
+      if (dataTypeFilters.length > 0 && pmrFilter.length === 0 && showAllFilter.length === 0) {
+        this.noPMRResultsFlag = true;
       }
     },
     filterUpdate: function (filters) {
@@ -322,8 +354,15 @@ export default {
 
       // Note that we cannot use the openSearch function as that modifies filters
       this.resetSearch()
-      this.searchAlgolia(filters, this.searchInput)
-      this.openPMRSearch(filters, this.searchInput)
+      if (this.pmrResultsOnlyFlag) {
+        this.openPMRSearch(filters, this.searchInput)
+      } else if (this.noPMRResultsFlag) {
+        this.searchAlgolia(filters, this.searchInput)
+      } else {
+        this.searchAlgolia(filters, this.searchInput)
+        this.openPMRSearch(filters, this.searchInput)
+      }
+
       this.$emit('search-changed', {
         value: filters,
         type: 'filter-update',

package/src/flatmapQueries/flatmapQueries.js

@@ -1,13 +1,13 @@
 function transformKeyValueArrayToObject(data) {
   try {
-    let result = data.values.map(valueArray => 
+    let result = data.values.map(valueArray =>
       data.keys.reduce((acc, key, index) => {
         acc[key] = valueArray[index];
         return acc;
       }, {})
     )
     return result
-  } catch (error) { 
+  } catch (error) {
     console.error(`Error occured during conversion of Key Value Array to Object: ${error}`)
     return {}
   }
@@ -49,8 +49,8 @@ let FlatmapQueries = function () {
   this.createTermSQL = function (terms) {
     let sql = ''
     let validFilter = false
-    
-    
+
+
     if (terms && terms.length > 0) {
       sql += 'and '
       terms.forEach((t, i) => {
@@ -84,7 +84,7 @@ let FlatmapQueries = function () {
     // add filters for the terms
     const termsSql = this.createTermSQL(terms)
     sql += termsSql
-    
+
     // Add the text search
     if (search && search !== '') {
       sql += `and (t.pmr_text match '${search}')`
@@ -108,7 +108,7 @@ let FlatmapQueries = function () {
   }
 
   this.convertTermsToIds = function (terms) {
-    return terms.map(t => this.lookUpId(t))
+    return terms.filter(t => this.lookUpId(t))
   }
 
   this.labelSQL = function (){
@@ -137,12 +137,12 @@ let FlatmapQueries = function () {
   }
 
   this.processFilters = function (filters) {
-    let featureLabels = []
+    let featureFacets = []
     filters.forEach((f) => {
-      if (f.label !== 'Show all' && f.label !== 'PMR')
-        featureLabels.push(f.facet)
+      if (f.facet !== 'Show all' && f.facet !== 'PMR')
+        featureFacets.push(f.facet)
     })
-    return featureLabels
+    return featureFacets
   }