@abi-software/map-side-bar 2.7.0 → 2.7.1-isan.1

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
@@ -99,21 +115,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,
@@ -123,6 +145,7 @@ export default {
     Pagination
   },
   name: 'SideBarContent',
+  mixins: [mixedPageCalculation],
   props: {
     visible: {
       type: Boolean,
@@ -136,6 +159,13 @@ export default {
       type: Object,
       default: () => initial_state,
     },
+    initFilters: {
+      type: Object,
+      default: {
+        filter: [],
+        searchInput: '',
+      }
+    },
     envVars: {
       type: Object,
       default: () => {},
@@ -144,6 +174,7 @@ export default {
   data: function () {
     return {
       ...this.entry,
+      ...this.initFilters,
       algoliaClient: undefined,
       bodyStyle: {
         flex: '1 1 auto',
@@ -161,21 +192,54 @@ 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
     },
+    // openPMRSearch: Resets the results, populates dataset cards and filters with PMR data.
+    openPMRSearch: function (filter, search = '') {
+      this.resetSearch()
+      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;
+      })
+    },
     openSearch: function (filter, search = '', option = { withSearch: true }) {
       this.searchInput = search
-      this.resetPageNavigation()
       //Proceed normally if cascader is ready
       if (this.cascaderIsReady) {
         this.filter =
@@ -193,7 +257,14 @@ export default {
           this.resetSearch()
         } else if (this.filter) {
           if (option.withSearch) {
-            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)
         }
@@ -202,13 +273,20 @@ export default {
         //otherwise waith for cascader to be ready
         this.filter = filter
         if ((!filter || filter.length == 0) && option.withSearch) {
-          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()
@@ -226,18 +304,52 @@ export default {
       this.openSearch(this.filter, this.searchInput)
     },
     clearSearchClicked: function () {
-      this.searchInput = '';
-      this.searchAndFilterUpdate();
+      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.searchInput = this.searchInput.trim();
-        this.searchAndFilterUpdate();
+        this.openSearch(this.filter, this.searchInput)
+        this.$refs.searchHistory.selectValue = 'Full search history'
+        this.$refs.searchHistory.addSearchToHistory(
+          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.filter = [...filters]
       this.searchAndFilterUpdate();
+      // 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',
@@ -270,6 +382,13 @@ export default {
       }
     },
     searchAlgolia(filters, query = '') {
+
+      // Remove loading if we dont expect any results
+      if (this.SPARCLimit() === 0) {
+        this.loadingCards = false
+        return
+      }
+
       // Algolia search
 
       this.loadingCards = true
@@ -281,12 +400,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', {
@@ -308,14 +432,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)
@@ -357,7 +477,6 @@ export default {
       }
     },
     resetPageNavigation: function () {
-      this.start = 0
       this.page = 1
     },
     resultsProcessing: function (data) {
@@ -473,7 +592,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
@@ -515,6 +640,17 @@ export default {
   border-bottom-right-radius: 0;
 }
 
+.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

@@ -9,8 +9,6 @@ declare module 'vue' {
   export interface GlobalComponents {
     AnnotationTool: typeof import('./components/AnnotationTool.vue')['default']
     BadgesGroup: typeof import('./components/BadgesGroup.vue')['default']
-    ConnectivityCard: typeof import('./components/ConnectivityCard.vue')['default']
-    ConnectivityExplorer: typeof import('./components/ConnectivityExplorer.vue')['default']
     ConnectivityInfo: typeof import('./components/ConnectivityInfo.vue')['default']
     DatasetCard: typeof import('./components/DatasetCard.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
@@ -37,6 +35,7 @@ declare module 'vue' {
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElTag: typeof import('element-plus/es')['ElTag']
     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,227 @@
+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 params = []
+    let validFilter = false
+
+
+    if (terms && terms.length > 0) {
+      sql += 'and '
+      terms.forEach((t, i) => {
+        if (i == 0) {
+          sql += '('
+        }
+        if (t !== '') {
+          params.push(terms)
+          sql += `m.term=?`
+          validFilter = true
+          if (i < terms.length - 1) {
+            sql += ' or '
+          }
+        }
+        if (i == terms.length - 1) {
+          sql += ') '
+        }
+      })
+    }
+    if (!validFilter) {
+      sql = ''
+      params = []
+    }
+    return {sql, params}
+  }
+
+
+  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 requestDetails = this.createTermSQL(terms)
+    sql += requestDetails.sql
+    const params = [...requestDetails.params]
+
+    // Add the text search
+    if (search && search !== '') {
+      sql += `and (t.pmr_text match ?)`
+      params.push(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, params}
+  }
+
+  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, params = [] ) {
+    const data = { sql, params }
+    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) => {
+      const {sql, params} = this.pmrSQL(featureIds, search)
+      this.flatmapQuery(sql, params)
+        .then(data => {
+          const pd = this.processPMRData(data, featureIds)
+          this.setAvailableFeatures(pd)
+
+          // get the number of hits for pagination
+          this.flatmapQuery(this.countSQL(this.sqlPreOffset), params).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)
+    console.log(dataObj)
+    // 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