Fix perf and issues with load and save

src/DataRequests/DataRequestsTable.jsx

@@ -25,7 +25,7 @@ const tableHeader = [
 
 /** @param {ResearcherInfo} researcher */
 function parseResearcherInfo(researcher) {
-  return researcher ? (
+  return researcher.first_name && researcher.last_name && researcher.institution  ? (
     <span>
       {researcher.first_name} {researcher.last_name}
       <br /> ({researcher.institution})

src/GuppyComponents/ConnectedFilter/index.jsx

@@ -33,7 +33,6 @@ import {
  * @property {SimpleAggsData} tabsOptions
  * @property {Array} dictionaryEntries
  * @property {Object} filterUIState
- * @property {( uiState: object) => void} setFilterUIState
  */
 
 /** @param {ConnectedFilterProps} props */
@@ -54,7 +53,6 @@ function ConnectedFilter({
   tabsOptions,
   dictionaryEntries,
   filterUIState,
-  setFilterUIState
 }) {
   if (
     hidden ||
@@ -110,7 +108,6 @@ function ConnectedFilter({
       hideZero={hideZero}
       tabs={filterTabs}
       filterUIState={filterUIState}
-      setFilterUIState={setFilterUIState}
     />
   );
 }
@@ -161,7 +158,6 @@ ConnectedFilter.propTypes = {
   tabsOptions: PropTypes.object.isRequired,
   dictionaryEntries: PropTypes.array.isRequired,
   filterUIState: PropTypes.object.isRequired,
-  setFilterUIState: PropTypes.func.isRequired
 };
 
 export default ConnectedFilter;

src/GuppyComponents/GuppyWrapper/index.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import {
   queryGuppyForAggregationChartData,
@@ -450,7 +450,7 @@ function GuppyWrapper({
   /**
    * @param {string} anchorValue
    */
-  function handleAnchorValueChange(anchorValue) {
+  function handleAnchorValueChange(anchorValue, currentFilterState) {
     if (anchorValue in anchoredTabsOptionsCache) {
       setState((prevState) => ({
         ...prevState,
@@ -466,7 +466,7 @@ function GuppyWrapper({
       setState((prevState) => ({ ...prevState, anchorValue }));
       fetchAggsOptionsDataFromGuppy({
         anchorValue,
-        filter: filterState,
+        filter: mergeFilters(currentFilterState, adminAppliedPreFilters),
         filterTabs: filterConfig.tabs.filter(({ title }) =>
           filterConfig.anchor.tabs.includes(title)
         ),
@@ -498,8 +498,8 @@ function GuppyWrapper({
     downloadRawDataByTypeAndFilter,
     fetchAndUpdateRawData,
     getTotalCountsByTypeAndFilter,
-    onAnchorValueChange: handleAnchorValueChange,
-    onFilterChange: handleFilterChange,
+    onAnchorValueChange: useCallback(handleAnchorValueChange, [adminAppliedPreFilters]),
+    onFilterChange: useCallback(handleFilterChange, []),
   });
 }
 

src/GuppyComponents/types.d.ts

@@ -51,7 +51,7 @@ export interface ComposedFilterStateWithRef extends ComposedFilterState {
   value?: (ComposedFilterStateWithRef | StandardFilterState | RefFilterState)[];
 }
 
-export type FilterState = ComposedFilterState | StandardFilterState | ComposedFilterStateWithRef;
+export type FilterState = ComposedFilterState | StandardFilterState | ComposedFilterStateWithRef | EmptyFilter;
 
 
 export type GqlInFilter = {
@@ -231,6 +231,6 @@ export type GuppyData = {
     size: number;
     sort: GqlSort;
   }) => Promise<any>;
-  onAnchorValueChange: (anchorValue: string) => void;
+  onAnchorValueChange: (anchorValue: string, currentFilterState: FilterState) => void;
   onFilterChange: FilterChangeHandler;
 };

src/GuppyDataExplorer/ExplorerFilter/index.jsx

@@ -25,7 +25,6 @@ import { Popover, Dialog, DialogTrigger, Button } from 'react-aria-components';
 /** @typedef {import('../types').ComposedFilterStateWithRef} ComposedFilterStateWithRef */
 /** @typedef {import('../types').RefFilterState} RefFilterState */
 /** @typedef {import('../../components/Select').SelectItem} SelectItem */
-
 function getSelectedFilterSets(combinedFilter) {
   return (
     combinedFilter.refIds.length < 2 ?
@@ -220,7 +219,6 @@ export const CombinedExplorerFilter = React.memo(_CombinedExplorerFilter);
  * @property {GuppyData['tabsOptions']} tabsOptions
  * @property {Object} dictionaryEntries
  * @property {Object} filterUIState
- * @property {(uiState: Object) => void} setFilterUIState
  */
 
 /** @param {ExplorerFilterProps} props */
@@ -246,7 +244,6 @@ function ExplorerFilter({ className = '', title = 'Filters', ...filterProps }) {
   };
   const hasExplorerFilter = !checkIfFilterEmpty(filter);
   const [showQuery, setShowQuery] = useState(false);
-  const [expandQuery, setExpandQuery] = useState(false);
 
     /** @type {import('../../components/FilterDisplay').ClickCombineModeHandler} */
     function handleClickCombineMode(payload) {  
@@ -269,7 +266,6 @@ function ExplorerFilter({ className = '', title = 'Filters', ...filterProps }) {
       onFilterChange(newFitler);
     }
     setShowQuery(!checkIfFilterEmpty(newFitler));
-    setExpandQuery(!checkIfFilterEmpty(newFitler));
   }
 
   return (
@@ -315,7 +311,6 @@ ExplorerFilter.propTypes = {
   tabsOptions: PropTypes.object.isRequired, // from GuppWrapper
   dictionaryEntries: PropTypes.array,
   filterUIState: PropTypes.object.isRequired,
-  setFilterUIState: PropTypes.func.isRequired
 };
 
 export default React.memo(ExplorerFilter);

src/GuppyDataExplorer/ExplorerFilterDisplay/ExplorerFilterDisplay.test.jsx

@@ -3,7 +3,7 @@ import { render } from '@testing-library/react';
 import { Provider } from 'react-redux';
 import explorerReducer from '../../redux/explorer/slice';
 import ExplorerFilterDisplay from './index';
-import { FILTER_TYPE } from '../ExplorerFilterSetWorkspace/utils';
+import { FILTER_TYPE } from '../ExplorerFilter/utilse/utils';
 
 /** @typedef {import('../../redux/types').RootState} RootState */
 /** @typedef {import('../../GuppyComponents/types').AnchoredFilterState} AnchoredFilterState */

src/GuppyDataExplorer/ExplorerFilterSetForms/FilterSetCreateForm.jsx

@@ -77,8 +77,9 @@ function FilterSetCreateForm({
               value={filterSet.description}
               onChange={(e) => {
                 e.persist();
-                if (isFilterSetSaved(filterSet)) {
-                  setFilterSet({ ...filterSet, description: e.target.value });
+                const newFilterSet = { ...filterSet, description: e.target.value };
+                if (isFilterSetSaved(newFilterSet)) {
+                  setFilterSet(newFilterSet);
                 }
               }}
             />

src/GuppyDataExplorer/ExplorerFilterSetForms/FilterSetUpdateForm.jsx

@@ -88,8 +88,9 @@ function FilterSetUpdateForm({
                   value={filterSet.description}
                   onChange={(e) => {
                     e.persist();
-                    if (isFilterSetSaved(filterSet)) {
-                      setFilterSet({ ...filterSet, description: e.target.value });
+                    const newFilterSet = { ...filterSet, description: e.target.value };
+                    if (isFilterSetSaved(newFilterSet)) {
+                      setFilterSet(newFilterSet);
                     }
                   }}
                 />

src/GuppyDataExplorer/ExplorerFilterSetForms/testData.js

@@ -1,6 +1,6 @@
 import { configureStore } from '@reduxjs/toolkit';
 import explorerReducer from '../../redux/explorer/slice';
-import { FILTER_TYPE } from '../ExplorerFilterSetWorkspace/utils';
+import { FILTER_TYPE } from '../ExplorerFilter/utilse/utils';
 
 export const testReduxStore = configureStore({
   reducer: { explorer: explorerReducer },