Vertical tabs

package.json

@@ -94,6 +94,7 @@
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
     "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "babel-jest": "^29.7.0",
     "eslint": "^8.57.0",
     "eslint-config-airbnb": "^19.0.4",

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

@@ -14,6 +14,7 @@ import {
 /** @typedef {import('../types').GuppyConfig} GuppyConfig */
 /** @typedef {import('../types').SimpleAggsData} SimpleAggsData */
 /** @typedef {import('../types').StandardFilterState} StandardFilterState */
+/** @typedef {import('../types').FilterState} FilterState */
 
 /**
  * @typedef {Object} ConnectedFilterProps
@@ -26,12 +27,13 @@ import {
  * @property {boolean} [hidden]
  * @property {boolean} [hideZero]
  * @property {SimpleAggsData} [initialTabsOptions]
- * @property {(anchorValue: string) => void} onAnchorValueChange
+ * @property {(anchorValue: string, currentFilterState: FilterState) => void} onAnchorValueChange
  * @property {FilterChangeHandler} onFilterChange
  * @property {(x: string[]) => void} [onPatientIdsChange]
  * @property {string[]} [patientIds]
  * @property {SimpleAggsData} tabsOptions
  * @property {Array} dictionaryEntries
+ * @property {Object} filterUIState
  */
 
 /** @param {ConnectedFilterProps} props */
@@ -50,14 +52,16 @@ function ConnectedFilter({
   onPatientIdsChange,
   patientIds,
   tabsOptions,
-  dictionaryEntries
+  dictionaryEntries,
+  filterUIState,
 }) {
   if (
     hidden ||
     filterConfig.tabs === undefined ||
     filterConfig.tabs.length === 0
-  )
+  ) {
     return null;
+  }
 
   const processedTabsOptions = sortTabsOptions(
     updateCountsInInitialTabsOptions(initialTabsOptions, tabsOptions, filter)
@@ -104,6 +108,7 @@ function ConnectedFilter({
       patientIds={patientIds}
       hideZero={hideZero}
       tabs={filterTabs}
+      filterUIState={filterUIState}
     />
   );
 }
@@ -152,7 +157,8 @@ ConnectedFilter.propTypes = {
   onPatientIdsChange: PropTypes.func,
   patientIds: PropTypes.arrayOf(PropTypes.string),
   tabsOptions: PropTypes.object.isRequired,
-  dictionaryEntries: PropTypes.array.isRequired
+  dictionaryEntries: PropTypes.array.isRequired,
+  filterUIState: PropTypes.object.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,
@@ -27,6 +27,7 @@ import {
 /** @typedef {import('../types').GuppyData} GuppyData */
 /** @typedef {import('../types').OptionFilter} OptionFilter */
 /** @typedef {import('../types').SimpleAggsData} SimpleAggsData */
+/** @typedef {import('../types').FilterChangeHandler} FilterChangeHandler */
 
 /**
  * @typedef {Object} GuppyWrapperProps
@@ -36,9 +37,9 @@ import {
  * @property {FilterState} explorerFilter
  * @property {FilterConfig} filterConfig
  * @property {GuppyConfig} guppyConfig
- * @property {(x: FilterState) => void} onFilterChange
  * @property {string[]} patientIds
  * @property {string[]} rawDataFields
+ * @property {boolean} isInitialQuery
  */
 
 /**
@@ -64,9 +65,9 @@ function GuppyWrapper({
   explorerFilter = {},
   filterConfig,
   guppyConfig,
-  onFilterChange = () => {},
   patientIds,
   rawDataFields: rawDataFieldsConfig = [],
+  isInitialQuery,
 }) {
   /** @type {[GuppyWrapperState, React.Dispatch<React.SetStateAction<GuppyWrapperState>>]} */
   const [state, setState] = useState({
@@ -185,7 +186,7 @@ function GuppyWrapper({
       anchorValue,
       filterTabs,
       gqlFilter: getGQLFilter(augmentFilter(filter)),
-      isInitialQuery: state.initialTabsOptions === undefined,
+      isInitialQuery,
       signal: controller.current.signal,
     }).then(({ data, errors }) => {
       if (data === undefined)
@@ -449,7 +450,7 @@ function GuppyWrapper({
   /**
    * @param {string} anchorValue
    */
-  function handleAnchorValueChange(anchorValue) {
+  function handleAnchorValueChange(anchorValue, currentFilterState) {
     if (anchorValue in anchoredTabsOptionsCache) {
       setState((prevState) => ({
         ...prevState,
@@ -465,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)
         ),
@@ -484,11 +485,6 @@ function GuppyWrapper({
     }
   }
 
-  /** @param {FilterState} filter */
-  function handleFilterChange(filter) {
-    onFilterChange?.(mergeFilters(filter, adminAppliedPreFilters));
-  }
-
   return children({
     ...state,
     filter: filterState,
@@ -497,8 +493,7 @@ function GuppyWrapper({
     downloadRawDataByTypeAndFilter,
     fetchAndUpdateRawData,
     getTotalCountsByTypeAndFilter,
-    onAnchorValueChange: handleAnchorValueChange,
-    onFilterChange: handleFilterChange,
+    onAnchorValueChange: useCallback(handleAnchorValueChange, [adminAppliedPreFilters]),
   });
 }
 
@@ -527,9 +522,9 @@ GuppyWrapper.propTypes = {
     aggFields: PropTypes.array,
     dataType: PropTypes.string.isRequired,
   }).isRequired,
-  onFilterChange: PropTypes.func,
   patientIds: PropTypes.arrayOf(PropTypes.string),
   rawDataFields: PropTypes.arrayOf(PropTypes.string),
+  isInitialQuery: PropTypes.bool
 };
 
 export default GuppyWrapper;

src/GuppyComponents/Utils/filters.js

@@ -6,6 +6,7 @@ import { queryGuppyForRawData } from './queries';
 /** @typedef {import('../types').AggsCount} AggsCount */
 /** @typedef {import('../types').AggsData} AggsData */
 /** @typedef {import('../types').ComposedFilterState} ComposedFilterState */
+/** @typedef {import('../types').ComposedFilterStateWithRef} ComposedFilterStateWithRef */
 /** @typedef {import('../types').FilterState} FilterState */
 /** @typedef {import('../types').FilterConfig} FilterConfig */
 /** @typedef {import('../types').GqlFilter} GqlFilter */
@@ -16,7 +17,7 @@ import { queryGuppyForRawData } from './queries';
 /** @typedef {{ [x: string]: { selectedValues?: string[] } }} AdminAppliedPreFilter */
 
 /**
- * @param {ComposedFilterState} userFilter
+ * @param {ComposedFilterState | ComposedFilterStateWithRef} userFilter
  * @param {AdminAppliedPreFilter} adminAppliedPreFilter
  */
 function mergeToComposedFilterState(userFilter, adminAppliedPreFilter) {

src/GuppyComponents/Utils/queries.js

@@ -3,6 +3,7 @@ import flat from 'flat';
 import papaparse from 'papaparse';
 import { FILE_DELIMITERS, FILTER_TYPE, GUPPY_URL } from './const';
 import { headers } from '../../localconf';
+import { fetchWithClientCache } from '../../utils.fetch';
 
 /** @typedef {import("../types").AnchorConfig} AnchorConfig */
 /** @typedef {import("../types").AnchoredFilterState} AnchoredFilterState */
@@ -21,6 +22,7 @@ const graphqlEndpoint = `${GUPPY_URL}/graphql`;
 const downloadEndpoint = `${GUPPY_URL}/download`;
 const statusEndpoint = `${GUPPY_URL}/_status`;
 
+
 /**
  * Converts JSON to a specified file format.
  * Defaultes to JSON if file format is not supported.
@@ -123,7 +125,7 @@ export function queryGuppyForAggregationChartData({
       }`
   ).replace(/\s+/g, ' ');
 
-  return fetch(graphqlEndpoint, {
+  return fetchWithClientCache(graphqlEndpoint, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
@@ -165,7 +167,7 @@ export function queryGuppyForAggregationCountData({ type, gqlFilter, signal }) {
       }`
   ).replace(/\s+/g, ' ');
 
-  return fetch(graphqlEndpoint, {
+  return fetchWithClientCache(graphqlEndpoint, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
@@ -348,7 +350,7 @@ export function queryGuppyForAggregationOptionsData({
   });
   const variables = { ...gqlFilterByGroup };
 
-  return fetch(graphqlEndpoint, {
+  return fetchWithClientCache(graphqlEndpoint, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
@@ -360,7 +362,7 @@ export function queryGuppyForAggregationOptionsData({
 }
 
 export function queryGuppyForStatus() {
-  return fetch(statusEndpoint, {
+  return fetchWithClientCache(statusEndpoint, {
     method: 'GET',
     headers: {
       'Content-Type': 'application/json',
@@ -434,7 +436,7 @@ export function queryGuppyForSubAggregationData({
       }`
   ).replace(/\s+/g, ' ');
 
-  return fetch(graphqlEndpoint, {
+  return fetchWithClientCache(graphqlEndpoint, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
@@ -533,7 +535,7 @@ export function queryGuppyForRawData({
     ${aggregationFragment}
   }`.replace(/\s+/g, ' ');
 
-  return fetch(graphqlEndpoint, {
+  return fetchWithClientCache(graphqlEndpoint, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
@@ -803,7 +805,7 @@ export function queryGuppyForTotalCounts({ type, filter }) {
       }`
   ).replace(/\s+/g, ' ');
 
-  return fetch(graphqlEndpoint, {
+  return fetchWithClientCache(graphqlEndpoint, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
@@ -826,7 +828,7 @@ export function queryGuppyForTotalCounts({ type, filter }) {
  * @param {string} args.type
  */
 export function getAllFieldsFromGuppy({ type }) {
-  return fetch(graphqlEndpoint, {
+  return fetchWithClientCache(graphqlEndpoint, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',

src/GuppyComponents/types.d.ts

@@ -38,7 +38,21 @@ export type ComposedFilterState = {
   value?: (ComposedFilterState | StandardFilterState)[];
 };
 
-export type FilterState = ComposedFilterState | StandardFilterState;
+export type RefFilterState = {
+  __type: 'REF';
+  value: {
+    id: string;
+    label: string;
+  };
+};
+
+export interface ComposedFilterStateWithRef extends ComposedFilterState {
+  refIds?: string[];
+  value?: (ComposedFilterStateWithRef | StandardFilterState | RefFilterState)[];
+}
+
+export type FilterState = ComposedFilterState | StandardFilterState | ComposedFilterStateWithRef | EmptyFilter;
+
 
 export type GqlInFilter = {
   IN: {
@@ -183,7 +197,7 @@ export type AggsData = {
     | SimpleAggsData;
 };
 
-export type FilterChangeHandler = (filter: FilterState) => void;
+export type FilterChangeHandler = (filter: FilterState, skipExplorerUpdate?: boolean) => void;
 
 export type GuppyData = {
   accessibleCount: number;
@@ -217,6 +231,5 @@ export type GuppyData = {
     size: number;
     sort: GqlSort;
   }) => Promise<any>;
-  onAnchorValueChange: (anchorValue: string) => void;
-  onFilterChange: FilterChangeHandler;
+  onAnchorValueChange: (anchorValue: string, currentFilterState: FilterState) => void;
 };