OpenConceptLab/ocl_issues#2481 | caching facets

src/components/map-projects/MapProject.jsx

@@ -123,6 +123,8 @@ const MapProject = () => {
  const params = useParams()
  const history = useHistory()
  const bridgeRef = React.useRef()
+ const facetsRequestsRef = React.useRef({})
+ const latestFacetRequestRef = React.useRef({})
  // project state
  const [project, setProject] = React.useState(null)
  const [name, setName] = React.useState('')
@@ -141,7 +143,8 @@ const MapProject = () => {
  const [allCandidates, setAllCandidates] = React.useState({}); // ocl-scispacy-loinc
 
  const [searchedConcepts, setSearchedConcepts] = React.useState({});
- const [facets, setFacets] = React.useState({});
+ const [fetchedFacets, setFetchedFacets] = React.useState({});
+ const [rowFacetKeys, setRowFacetKeys] = React.useState({});
  const [appliedFacets, setAppliedFacets] = React.useState({});
  const [searchResponse, setSearchResponse] = React.useState({});
  const [algosSelected, setAlgosSelected] = React.useState([])
@@ -586,14 +589,17 @@ const MapProject = () => {
  }
 
  const resetState = () => {
+ facetsRequestsRef.current = {}
+ latestFacetRequestRef.current = {}
  setRowStatuses({reviewed: [], readyForReview: [], unmapped: []})
  setDecisions({})
  setDecisionFilters([])
  setMatchTypes({very_high: 0, high: 0, medium: 0, low: 0, no_match: 0})
  setMatchedConcepts([])
  setAllCandidates({})
  setSearchedConcepts({})
- setFacets({})
+ setFetchedFacets({})
+ setRowFacetKeys({})
  setSearchResponse({})
  setNotes({})
  setMapTypes({})
@@ -1814,7 +1820,7 @@ const MapProject = () => {
  setAppliedFacets({...appliedFacets, [csvRow.__index]: getAppliedFacetFromQueryParam(_filters)})
  }
  fetchAllCandidatesForRow(null, csvRow, 0, undefined, undefined, getAppliedFacetFromQueryParam(_filters))
- if(isEmpty(facets[csvRow.__index]))
+ if(isEmpty(getFacetsForRow(csvRow.__index)))
  getFacets(true, csvRow.__index)
 
  }
@@ -1935,7 +1941,7 @@ const MapProject = () => {
  if(newValue === 'candidates' && repo?.id && !find(allCandidatesRef.current[firstAlgo?.id], c => c.row.__index === rowIndex)?.results?.length) {
  fetchAllCandidatesForRow(firstAlgo.id)
  }
- if(['candidates', 'search'].includes(newValue) && isEmpty(facets[rowIndex]))
+ if(['candidates', 'search'].includes(newValue) && isEmpty(getFacetsForRow(rowIndex)))
  getFacets(true)
  }
 
@@ -2406,15 +2412,52 @@ const MapProject = () => {
  }
 
  const getFacets = (firstLoad, rowIndex) => {
- getLookupService().get(lookupConfig?.token, null, {
+ const targetRowIndex = isNumber(rowIndex) ? rowIndex : row?.__index
+ if(!isNumber(targetRowIndex))
+ return Promise.resolve()
+
+ const query = {
  q: firstLoad ? '' : searchStr,
  includeRetired: retired,
  facetsOnly: true
- }).then(response => {
- setFacets({...facets, [isNumber(rowIndex) ? rowIndex : row.__index]: response?.data?.facets?.fields || {}})
+ }
+ const requestKey = JSON.stringify({
+ repoVersion: repoVersion?.version_url || '',
+ lookupURL: lookupConfig?.url || '',
+ query
  })
+
+ latestFacetRequestRef.current[targetRowIndex] = requestKey
+
+ if(fetchedFacets[requestKey]) {
+ setRowFacetKeys(prev => ({...prev, [targetRowIndex]: requestKey}))
+ return Promise.resolve(fetchedFacets[requestKey])
+ }
+
+ if(facetsRequestsRef.current[requestKey]) {
+ return facetsRequestsRef.current[requestKey].then(response => {
+ if(latestFacetRequestRef.current[targetRowIndex] === requestKey)
+ setRowFacetKeys(prev => ({...prev, [targetRowIndex]: requestKey}))
+ return response
+ })
+ }
+
+ const request = getLookupService().get(lookupConfig?.token, null, query).then(response => {
+ const fields = response?.data?.facets?.fields || {}
+ setFetchedFacets(prev => ({...prev, [requestKey]: fields}))
+ if(latestFacetRequestRef.current[targetRowIndex] === requestKey)
+ setRowFacetKeys(prev => ({...prev, [targetRowIndex]: requestKey}))
+ return response
+ }).finally(() => {
+ delete facetsRequestsRef.current[requestKey]
+ })
+
+ facetsRequestsRef.current[requestKey] = request
+ return request
  }
 
+ const getFacetsForRow = index => fetchedFacets[rowFacetKeys[index]] || {}
+
  const getFacetQueryParam = filters => {
  const queryParam = {}
  forEach(
@@ -3157,7 +3200,7 @@ const MapProject = () => {
  onFetchRecommendation={fetchRecommendation}
  analysis={analysis[rowIndex]}
  columns={getValidColumns()}
- facets={facets[rowIndex]}
+ facets={getFacetsForRow(rowIndex)}
  appliedFacets={appliedFacets[rowIndex]}
  defaultFilters={getAppliedFacetFromQueryParam(getFilters())}
  filters={getFilters(rowIndex)}
@@ -3193,7 +3236,7 @@ const MapProject = () => {
  setSearchStr={setSearchStr}
  isLoading={isLoadingInDecisionView}
  columns={getValidColumns()}
- facets={facets[rowIndex]}
+ facets={getFacetsForRow(rowIndex)}
  appliedFacets={appliedFacets[rowIndex]}
  defaultFilters={getAppliedFacetFromQueryParam(getFilters())}
  filters={getFilters()}