@abi-software/map-side-bar 2.5.1 → 2.5.2-isan.0

package/src/components/SidebarContent.vue

@@ -34,18 +34,29 @@
       ref="searchHistory"
       @search="searchHistorySearch"
     ></SearchHistory>
+      pmr hits: {{ pmrNumberOfHits }}
     <div class="content scrollbar" v-loading="loadingCards" ref="content">
       <div class="error-feedback" v-if="results.length === 0 && !loadingCards">
         No results found - Please change your search / filter criteria.
       </div>
-      <div v-for="result in results" :key="result.doi" class="step-item">
+      <div v-for="(result, i) in results" :key="result.doi || i" class="step-item">
         <DatasetCard
+          v-if="result.dataSource === 'SPARC'"
           class="dataset-card"
           :entry="result"
           :envVars="envVars"
           @mouseenter="hoverChanged(result)"
           @mouseleave="hoverChanged(undefined)"
-        />
+        ></DatasetCard>
+        <PMRDatasetCard
+          v-else-if="result.dataSource === 'PMR'"
+          class="dataset-card"
+          :entry="result"
+          :envVars="envVars"
+          @pmr-action-click="onPmrActionClick"
+          @mouseenter="hoverChanged(result)"
+          @mouseleave="hoverChanged(undefined)"
+        ></PMRDatasetCard>
       </div>
       <el-pagination
         class="pagination"
@@ -73,12 +84,17 @@ import {
 } from 'element-plus'
 import SearchFilters from './SearchFilters.vue'
 import SearchHistory from './SearchHistory.vue'
-import DatasetCard from './DatasetCard.vue'
 import EventBus from './EventBus.js'
 
+import DatasetCard from "./DatasetCard.vue";
+import PMRDatasetCard from "./PMRDatasetCard.vue";
+
 import { AlgoliaClient } from '../algolia/algolia.js'
 import { getFilters, facetPropPathMapping } from '../algolia/utils.js'
+import FlatmapQueries from '../flatmapQueries/flatmapQueries.js'
+import mixedPageCalculation from '../mixins/mixedPageCalculation.vue'
 import { markRaw } from 'vue'
+const RatioOfPMRResults = 0.2; // Ratio of PMR results to Sparc results
 
 // handleErrors: A custom fetch error handler to recieve messages from the server
 //    even when an error is found
@@ -98,21 +114,27 @@ var initial_state = {
   searchInput: '',
   lastSearch: '',
   results: [],
-  numberOfHits: 0,
+  pmrNumberOfHits: 0,
+  sparcNumberOfHits: 0,
   filter: [],
   loadingCards: false,
   numberPerPage: 10,
   page: 1,
-  pageModel: 1,
-  start: 0,
+  pmrResultsOnlyFlag: false,
+  noPMRResultsFlag: false,
   hasSearched: false,
   contextCardEnabled: false,
-}
+  pmrResults: [],
+  RatioOfPMRResults: RatioOfPMRResults,
+};
+
+
 
 export default {
   components: {
     SearchFilters,
     DatasetCard,
+    PMRDatasetCard,
     SearchHistory,
     Button,
     Card,
@@ -122,6 +144,7 @@ export default {
     Pagination
   },
   name: 'SideBarContent',
+  mixins: [mixedPageCalculation],
   props: {
     visible: {
       type: Boolean,
@@ -135,6 +158,13 @@ export default {
       type: Object,
       default: () => initial_state,
     },
+    initFilters: {
+      type: Object,
+      default: {
+        filter: [],
+        searchInput: '',
+      }
+    },
     envVars: {
       type: Object,
       default: () => {},
@@ -143,6 +173,7 @@ export default {
   data: function () {
     return {
       ...this.entry,
+      ...this.initFilters,
       algoliaClient: undefined,
       bodyStyle: {
         flex: '1 1 auto',
@@ -160,21 +191,69 @@ export default {
         filterFacets: this.filter,
       }
     },
+    // npp_SPARC: Number per page for SPARC datasets
+    npp_SPARC: function () {
+      return Math.round(this.numberPerPage * (1 - RatioOfPMRResults))
+    },
+    // npp_PMR: Number per page for PMR datasets
+    npp_PMR: function () {
+      return Math.round(this.numberPerPage * RatioOfPMRResults)
+    },
+    numberOfHits: function () {
+      return this.sparcNumberOfHits + this.pmrNumberOfHits
+    },
+
   },
   methods: {
     hoverChanged: function (data) {
       this.$emit('hover-changed', data)
     },
+    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
     resetSearch: function () {
-      this.numberOfHits = 0
+      this.pmrNumberOfHits = 0
+      this.sparcNumberOfHits = 0
+      this.page = 1
+      this.calculateVariableRatio()
       this.discoverIds = []
       this._dois = []
       this.results = []
       this.loadingCards = false
     },
-    openSearch: function (filter, search = '') {
+    // 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.openFilterSearch(filter, search);
+      } else {
+        this.searchAlgolia(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) => {
+        data.forEach((result) => {
+          this.results.push(result)
+        })
+        this.pmrNumberOfHits = this.flatmapQueries.numberOfHits
+        this.loadingCards = false;
+      })
+    },
+
+    // previously openAlgoliaSearch:
+    // Resets the results, populates dataset cards and filters with Algloia and SciCrunch data.
+    openFilterSearch: function (filter, search = '') {
       this.searchInput = search
-      this.resetPageNavigation()
       //Proceed normally if cascader is ready
       if (this.cascaderIsReady) {
         this.filter =
@@ -191,7 +270,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 {
@@ -199,13 +285,20 @@ 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);
+          }
         }
       }
     },
     addFilter: function (filter) {
       if (this.cascaderIsReady) {
-        this.resetPageNavigation()
+        this.resetSearch()
         if (filter) {
           if (this.$refs.filtersRef.addFilter(filter))
             this.$refs.filtersRef.initiateSearch()
@@ -224,31 +317,66 @@ export default {
     },
     clearSearchClicked: function () {
       this.searchInput = ''
-      this.resetPageNavigation()
-      this.searchAlgolia(this.filters, this.searchInput)
+      this.resetSearch()
+      this.openSearch(this.filter, this.searchInput)
       this.$refs.searchHistory.selectValue = 'Full search history'
     },
     searchEvent: function (event = false) {
       if (event.keyCode === 13 || event instanceof MouseEvent) {
-        this.resetPageNavigation()
-        this.searchAlgolia(this.filters, this.searchInput)
+        this.openSearch(this.filter, this.searchInput)
         this.$refs.searchHistory.selectValue = 'Full search history'
         this.$refs.searchHistory.addSearchToHistory(
-          this.filters,
+          this.filter,
           this.searchInput
         )
       }
     },
+    updatePMROnlyFlag: function (filters) {
+      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) {
-      this.filters = [...filters]
-      this.resetPageNavigation()
-      this.searchAlgolia(filters, this.searchInput)
+      this.filter = [...filters]
+
+      // Check if PMR is in the filters
+      this.updatePMROnlyFlag(filters)
+
+      // Note that we cannot use the openSearch function as that modifies filters
+      this.resetSearch()
+      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',
       })
     },
     searchAlgolia(filters, query = '') {
+
+      // Remove loading if we dont expect any results
+      if (this.SPARCLimit() === 0) {
+        this.loadingCards = false
+        return
+      }
+
       // Algolia search
 
       this.loadingCards = true
@@ -260,12 +388,17 @@ export default {
           EventBus.emit('number-of-datasets-for-anatomies', r.forScaffold)
         })
       this.algoliaClient
-        .search(getFilters(filters), query, this.numberPerPage, this.page)
+        .search(getFilters(filters), query, this.calculateSPARCOffest(), this.SPARCLimit(this.pmrResultsOnlyFlag) )
         .then((searchData) => {
-          this.numberOfHits = searchData.total
+          this.sparcNumberOfHits = searchData.total
           this.discoverIds = searchData.discoverIds
           this._dois = searchData.dois
-          this.results = searchData.items
+          searchData.items.forEach((item) => {
+            item.detailsReady = false
+            this.results.push(item)
+          })
+          // add the items to the results
+          this.results.concat(searchData.items)
           this.loadingCards = false
           this.scrollToTop()
           this.$emit('search-changed', {
@@ -287,14 +420,10 @@ export default {
       this.pageChange(1)
     },
     pageChange: function (page) {
-      this.start = (page - 1) * this.numberPerPage
       this.page = page
-      this.searchAlgolia(
-        this.filters,
-        this.searchInput,
-        this.numberPerPage,
-        this.page
-      )
+      this.results = []
+      this.calculateVariableRatio()
+      this.openSearch(this.filter, this.searchInput, false)
     },
     handleMissingData: function (doi) {
       let i = this.results.findIndex((res) => res.doi === doi)
@@ -336,7 +465,6 @@ export default {
       }
     },
     resetPageNavigation: function () {
-      this.start = 0
       this.page = 1
     },
     resultsProcessing: function (data) {
@@ -450,7 +578,13 @@ export default {
       this.envVars.PENNSIEVE_API_LOCATION
     ))
     this.algoliaClient.initIndex(this.envVars.ALGOLIA_INDEX)
-    this.openSearch(this.filter, this.searchInput)
+
+    // initialise flatmap queries
+    this.flatmapQueries = new FlatmapQueries()
+    this.flatmapQueries.initialise(this.envVars.FLATMAP_API_LOCATION)
+
+    // open search
+    this.openSearch(this.filter, this.searchInput, this.mode )
   },
   created: function () {
     //Create non-reactive local variables
@@ -489,6 +623,17 @@ export default {
   display: flex;
 }
 
+.data-type-select {
+  width: 90px;
+  margin-left: 10px;
+}
+
+.button {
+  background-color: $app-primary-color;
+  border: $app-primary-color;
+  color: white;
+}
+
 .step-item {
   font-size: 14px;
   margin-bottom: 18px;

package/src/components.d.ts

@@ -31,6 +31,7 @@ declare module 'vue' {
     ElTag: typeof import('element-plus/es')['ElTag']
     ExternalResourceCard: typeof import('./components/ExternalResourceCard.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']

package/src/flatmapQueries/flatmapQueries.js

@@ -0,0 +1,221 @@
+function transformKeyValueArrayToObject(data) {
+  try {
+    let result = data.values.map(valueArray =>
+      data.keys.reduce((acc, key, index) => {
+        acc[key] = valueArray[index];
+        return acc;
+      }, {})
+    )
+    return result
+  } catch (error) {
+    console.error(`Error occured during conversion of Key Value Array to Object: ${error}`)
+    return {}
+  }
+
+}
+
+// remove duplicates by stringifying the objects
+const removeDuplicates = function (arrayOfAnything) {
+  if (!arrayOfAnything) return []
+  return [...new Set(arrayOfAnything.map((e) => JSON.stringify(e)))].map((e) =>
+    JSON.parse(e)
+  )
+}
+
+
+let FlatmapQueries = function () {
+  this.initialise = function (flatmapApi) {
+    this.flatmapApi = flatmapApi
+    this.features = []
+    this.limit = 10
+    this.offset = 0
+    this.numberOfHits = 0
+    this.sqlPreOffset = ''
+    this.lookup = {}
+    this.createLookup()
+  }
+
+  this.updateOffset = function (offset) {
+    this.offset = offset
+  }
+  this.updateLimit = function (limit) {
+    this.limit = limit
+  }
+
+  this.offsetText = function () {
+    return 'limit ' + this.limit + ' offset ' + this.offset
+  }
+
+  this.createTermSQL = function (terms) {
+    let sql = ''
+    let validFilter = false
+
+
+    if (terms && terms.length > 0) {
+      sql += 'and '
+      terms.forEach((t, i) => {
+        if (i == 0) {
+          sql += '('
+        }
+        if (t !== '') {
+          sql += `m.term='${t}'`
+          validFilter = true
+          if (i < terms.length - 1) {
+            sql += ' or '
+          }
+        }
+        if (i == terms.length - 1) {
+          sql += ') '
+        }
+      })
+    }
+    if (!validFilter) {
+      sql = ''
+    }
+    return sql
+  }
+
+
+  this.pmrSQL = function (terms=[], search='') {
+    let sql = 'select distinct m.term, m.exposure, m.score, m.workspace, d.metadata from pmr_text '
+    sql += 'as t left join pmr_metadata as d on t.entity=d.entity left join pmr_models as m on m.exposure=t.entity '
+    sql += 'where d.metadata is not null '
+
+    // 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}')`
+    }
+
+    // Add exposure and score filters if we aren't text searching
+    if (!search || search === '') {
+      sql += 'and m.exposure is not null and score > 0.69'
+    }
+
+    // group by exposure
+    sql += ' group by m.exposure'
+
+    this.sqlPreOffset = sql
+
+    // add the limit and offset for pagination
+    sql += ' ' + this.offsetText() + ';'
+
+    console.log(sql)
+    return sql
+  }
+
+  this.convertTermsToIds = function (terms) {
+    return terms.filter(t => this.lookUpId(t))
+  }
+
+  this.labelSQL = function (){
+    return "select entity, label from labels"
+  }
+
+  this.countSQL = function (sql) {
+    sql = `select count(*) from (${sql})`
+    return sql
+  }
+
+
+  this.flatmapQuery = function (sql) {
+    const data = { sql: sql }
+    return fetch(`${this.flatmapApi}knowledge/query/`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(data),
+    })
+    .then((response) => response.json())
+    .catch((error) => {
+      console.error('Error:', error)
+    })
+  }
+
+  this.processFilters = function (filters) {
+    let featureFacets = []
+    filters.forEach((f) => {
+      if (f.facet !== 'Show all' && f.facet !== 'PMR')
+        featureFacets.push(f.facet)
+    })
+    return featureFacets
+  }
+
+
+
+  this.pmrSearch = function (filters=[], search='') {
+    let features = this.processFilters(filters)
+    let featureIds = this.convertTermsToIds(features)
+    return new Promise((resolve, reject) => {
+      this.flatmapQuery(this.pmrSQL(featureIds, search))
+        .then(data => {
+          const pd = this.processPMRData(data, featureIds)
+          this.setAvailableFeatures(pd)
+
+          // get the number of hits for pagination
+          this.flatmapQuery(this.countSQL(this.sqlPreOffset)).then(data => {
+            this.numberOfHits = data.values[0][0]
+            resolve(pd);
+          })
+        })
+        .catch(reject);
+    });
+  }
+
+  // setAvailableFeatures returns the available features in the flatmap for filtering
+  // pd is the processed data from the flatmap
+  this.setAvailableFeatures = function (pd) {
+    pd.forEach((d) => {
+      Object.keys(d).forEach((key) => {
+        if (!this.features.includes(key)) {
+          this.features.push(key)
+        }
+      })
+    })
+  }
+
+
+  this.processPMRData = function (data, featureIds=[]) {
+    // Convert the flatmap data into an array of objects
+    let dataObj = transformKeyValueArrayToObject(data)
+
+    // Only use the results with metadata
+    let metadataResults = dataObj.filter(d => d.metadata)
+    let metadataOnly = metadataResults.map(d => {
+      let md = JSON.parse(d.metadata)
+      md.dataSource = 'PMR'
+      return md
+    })
+
+    // If there are featureIds, filter the results
+    if (featureIds.length > 0) {
+      metadataOnly = metadataOnly.filter(d => featureIds.includes(d.term))
+    }
+
+    // Remove duplicates
+    let uniqueResults = removeDuplicates(metadataOnly)
+    return uniqueResults
+  }
+
+  this.createLookup = function () {
+    this.flatmapQuery(this.labelSQL())
+      .then(data => {
+        data.values.forEach(d => {
+          if (d[1] && (typeof d[1] === 'string' || d[1] instanceof String)) {
+            this.lookup[d[1].toLowerCase()] = d[0]
+          }
+        })
+      })
+  }
+
+  this.lookUpId = function (label) {
+    return this.lookup[label.toLowerCase()]
+  }
+
+}
+
+export default FlatmapQueries