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

package/src/components/SidebarContent.vue

@@ -34,18 +34,30 @@
       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"
+          @flatmap-clicked="onFlatmapClicked"
+          @simulation-clicked="onSimulationClicked"
+          @mouseenter="hoverChanged(result)"
+          @mouseleave="hoverChanged(undefined)"
+        ></PMRDatasetCard>
       </div>
       <el-pagination
         class="pagination"
@@ -73,11 +85,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'
+
+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
@@ -97,21 +115,26 @@ 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,
   hasSearched: false,
   contextCardEnabled: false,
-}
+  pmrResults: [],
+  RatioOfPMRResults: RatioOfPMRResults,
+};
+
+
 
 export default {
   components: {
     SearchFilters,
     DatasetCard,
+    PMRDatasetCard,
     SearchHistory,
     Button,
     Card,
@@ -121,6 +144,7 @@ export default {
     Pagination
   },
   name: 'SideBarContent',
+  mixins: [mixedPageCalculation],
   props: {
     visible: {
       type: Boolean,
@@ -158,21 +182,67 @@ 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)
     },
+    onFlatmapClicked: function (data) {
+      this.$emit('flatmap-clicked', data);
+    },
+    onSimulationClicked: function (payload) {
+      this.$emit('simulation-clicked', payload)
+    },
+    // 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) {
+      if (resetSearch) {
+        this.resetSearch();
+        this.openAlgoliaSearch(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.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
+      })
+    },
+
+    // openAlgoliaSearch: Resets the results, populates dataset cards and filters with Algloia and SciCrunch data.
+    openAlgoliaSearch: function (filter, search = '') {
       this.searchInput = search
-      this.resetPageNavigation()
       //Proceed normally if cascader is ready
       if (this.cascaderIsReady) {
         this.filter =
@@ -203,7 +273,7 @@ export default {
     },
     addFilter: function (filter) {
       if (this.cascaderIsReady) {
-        this.resetPageNavigation()
+        this.resetSearch()
         if (filter) {
           if (this.$refs.filtersRef.addFilter(filter))
             this.$refs.filtersRef.initiateSearch()
@@ -222,33 +292,53 @@ 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 pmrSearchObject = filters.find((tmp) => tmp.facet === 'PMR');
+      if (pmrSearchObject) {
+        this.pmrResultsOnlyFlag = true
+      } else {
+        this.pmrResultsOnlyFlag = false
+      }
+    },
     filterUpdate: function (filters) {
-      this.filters = [...filters]
-      this.resetPageNavigation()
+      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()
       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
       this.algoliaClient
         .anatomyInSearch(getFilters(filters), query)
@@ -258,12 +348,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', {
@@ -285,14 +380,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)
@@ -334,7 +425,6 @@ export default {
       }
     },
     resetPageNavigation: function () {
-      this.start = 0
       this.page = 1
     },
     resultsProcessing: function (data) {
@@ -448,7 +538,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
@@ -487,6 +583,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

@@ -27,6 +27,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.map(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 featureLabels = []
+    filters.forEach((f) => {
+      if (f.label !== 'Show all' && f.label !== 'PMR')
+        featureLabels.push(f.facet)
+    })
+    return featureLabels
+  }
+
+
+
+  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

package/src/mixins/mixedPageCalculation.vue

@@ -0,0 +1,102 @@
+<script>
+// The functions below are needed because the number of results shown on the page is dependent what is available from each index.
+// We fix this by calcuting how many results we have shown before the requested page and then calculating the offset based on that.
+
+// Note that this.RatioOfPMRResults is a number that determines how many PMR results are shown compared to SPARC results. It is grabbed from a constant in 
+//  SidebarContent.vue.
+
+export default {
+  methods: {
+    
+    // Calculate Variable Ratio is used as a number to determine how the ratio of PMR results to SPARC results
+    //   will be shown on the page. 1 means only PMR results, 0 means only SPARC results. 
+    calculateVariableRatio: function () {
+      if (this.page === 1) {
+        this.variableRatio = this.RatioOfPMRResults
+
+      // Check if we have run out of Sparc results
+      } else if( this.npp_SPARC * (this.page -1) >= this.sparcNumberOfHits) {
+        this.variableRatio = 1
+      
+      // Check if we have run out of PMR results
+      } else if(this.npp_PMR * (this.page - 1) >= this.pmrNumberOfHits) {
+        this.variableRatio = 0
+      } else {
+
+        // Set the ratio to the same as the previous page if both indeces have results
+        this.variableRatio = this.RatioOfPMRResults
+      }
+    },
+
+    // calculatePMROffest is used to calculate how many PMR results we have shown before the requested page
+    calculatePMROffest: function() {
+
+      // If variable ratio has not changed, we have not run out of results.
+      //   we can use the the number per page PMR to calculate the offset
+      if (this.variableRatio === this.RatioOfPMRResults) {
+        return (this.page-1)*this.npp_PMR
+
+      // If we have run out of SPARC results, we need to calculate how many PMR results we have shown before the requested page
+      } else if (this.variableRatio === 1) {
+
+        // calculate how many results we showed before the requested page
+        // We want our offset to be the number of PMR results shown before the requested page
+        //  This can be though of as numberOfPMRResultsShownInMixed + numberOfPMRResultsShownInPMROnly = offset
+        let pageWhereSPARCResultsRanOut = Math.ceil(this.sparcNumberOfHits / this.npp_SPARC)
+        let numberOfPMRResultsShownInMixed = this.npp_PMR * pageWhereSPARCResultsRanOut
+        let numberOfPMRResultsShownInPMROnly = (this.page - 1 - pageWhereSPARCResultsRanOut) * this.numberPerPage
+        return numberOfPMRResultsShownInMixed + numberOfPMRResultsShownInPMROnly
+      }
+    },
+    
+    // calculateSPARCOffest is used to calculate how many SPARC results we have shown before the requested page. See above for details
+    calculateSPARCOffest: function() {
+      if(this.variableRatio === this.RatioOfPMRResults) {
+        return (this.page-1)*this.npp_SPARC
+      } else if (this.variableRatio === 0) {
+        
+        // calculate how many results we showed before the requested page
+        let pageWherePMRResultsRanOut = Math.ceil(this.pmrNumberOfHits / this.npp_PMR)
+        let numberOfSPARCResultsShownInMixed = this.npp_SPARC * pageWherePMRResultsRanOut
+        let numberOfSPARCResultsShownInSPARCOnly = (this.page - 1 - pageWherePMRResultsRanOut) * this.numberPerPage
+        let offset = numberOfSPARCResultsShownInMixed + numberOfSPARCResultsShownInSPARCOnly
+        return offset
+      }
+    },
+
+    // PMRLimit is used to calculate how many PMR results we can show on the page.
+    PMRLimit: function(pmrResultsOnlyFlag=false) {
+      // If we only want PMR results, return the number per page  
+      if (pmrResultsOnlyFlag) {
+        return this.numberPerPage
+      }
+      // If the variable ratio is the same as the ratio of PMR results, return the number per page set for PMR
+      if (this.variableRatio === this.RatioOfPMRResults) {
+        return this.npp_PMR
+
+      // if we have run out of sparc results, we want to show pmr results equal to the total number of results per page
+      } else if (this.variableRatio === 1) {
+        return this.numberPerPage
+
+      // if we have run out of pmr results, we want to show 0 pmr results
+      } else if (this.variableRatio === 0) {
+        return 0
+      }
+    },
+    SPARCLimit: function(pmrResultsOnlyFlag=false) {
+      if(pmrResultsOnlyFlag) {
+        return 0
+      }
+      if (this.variableRatio === this.RatioOfPMRResults) {
+        return this.npp_SPARC
+      } else if (this.variableRatio === 0) {
+        return this.numberPerPage
+      } else if (this.variableRatio === 1) {
+        return 0
+      }
+    },
+  }
+};
+</script>
+
+