lint: fix more missing hook dependencies

src/components/SiteHeader.js

@@ -60,7 +60,7 @@ const SiteHeader = () => {
 
   const { unreadItems: unreadNotifications } = useNotifications();
 
-  const { idTokenContents, isHandingOffCodeForToken, hasAttempted: authHasAttempted } = useAuthState();
+  const { idTokenContents, isHandingOffCodeForToken } = useAuthState();
   const isAuthenticated = useIsAuthenticated();
 
   const [modalVisible, setModalVisible] = useState(false);

src/components/datasets/DatasetDataTypes.js

@@ -121,7 +121,7 @@ const DatasetDataTypes = React.memo(({ isPrivate, project, dataset }) => {
           ]
         : null),
     ],
-    [isPrivate, project, dataset, ingestionWorkflows, startIngestionFlow],
+    [isPrivate, project, dataset, handleClearDataType, ingestionWorkflows, startIngestionFlow, showDataTypeSummary],
   );
 
   const onDataTypeSummaryModalCancel = useCallback(() => setDatatypeSummaryVisible(false), []);

src/components/datasets/DatasetFormModal.js

@@ -30,7 +30,7 @@ const DatasetFormModal = ({ project, mode, initialValue, onCancel, onOk, open })
       await (onOk || nop)({ ...(initialValue || {}), values });
       if (formRef.current && mode === FORM_MODE_ADD) formRef.current.resetFields();
     },
-    [dispatch],
+    [dispatch, initialValue, mode, onOk],
   );
 
   const handleCancel = useCallback(() => (onCancel || nop)(), [onCancel]);

src/components/datasets/linked_field_set/LinkedFieldSetForm.js

@@ -30,7 +30,7 @@ const LinkedFieldSetForm = ({ form, dataTypes, initialValue, mode }) => {
 
   useEffect(() => {
     form.resetFields();
-  }, [initialValue]);
+  }, [form, initialValue]); // Reset form values when initial value changes
 
   const initialListValue = useMemo(
     () =>

src/components/datasets/linked_field_set/LinkedFieldSetModal.js

@@ -26,9 +26,9 @@ const LinkedFieldSetModal = ({ dataset, linkedFieldSetIndex, linkedFieldSet, mod
   );
 
   const saveLinkedFieldSet = useCallback(
-    (linkedFieldSet, onSuccess) =>
-      dispatch(saveDatasetLinkedFieldSetIfPossible(dataset, linkedFieldSetIndex, linkedFieldSet, onSuccess)),
-    [dispatch, dataset, linkedFieldSetIndex, linkedFieldSet],
+    (newLinkedFieldSet, onSuccess) =>
+      dispatch(saveDatasetLinkedFieldSetIfPossible(dataset, linkedFieldSetIndex, newLinkedFieldSet, onSuccess)),
+    [dispatch, dataset, linkedFieldSetIndex],
   );
 
   const handleSubmit = useCallback(() => {

src/components/discovery/DiscoverySearchCondition.js

@@ -75,7 +75,7 @@ const DiscoverySearchCondition = ({ dataType, value, onChange, onFieldChange, is
       if (value === undefined) setFieldState(newState);
       if (onChange) onChange(newState);
     },
-    [fieldState, onChange],
+    [fieldState, onChange, value],
   );
 
   const { field, fieldSchema, operation, negated, searchValue } = fieldState;

src/components/discovery/DiscoverySearchForm.js

@@ -176,7 +176,7 @@ const DiscoverySearchForm = ({ onChange, dataType, setFormRef, handleVariantHidd
         conditions: [...existingConditions, fieldInitialValue],
       });
     },
-    [form, conditionsHelp, getConditionsArray, getDataTypeFieldSchema, getInitialOperator, updateHelpFromFieldChange],
+    [form, getConditionsArray, getDataTypeFieldSchema, getInitialOperator, updateHelpFromFieldChange],
   );
 
   const removeCondition = useCallback(
@@ -328,7 +328,7 @@ const DiscoverySearchForm = ({ onChange, dataType, setFormRef, handleVariantHidd
         },
       ],
     };
-  }, [getDataTypeFieldSchema]);
+  }, [addConditionFromDropdown, getDataTypeFieldSchema]);
 
   const existingUniqueFields = useMemo(
     () =>

src/components/explorer/ExplorerSearchResultsTable.js

@@ -84,7 +84,7 @@ const ExplorerSearchResultsTable = ({
       setActiveFilters(filters);
       dispatch(setTableSortOrder(dataset, sorter.field, sorter.order, activeTab, newPage));
     },
-    [dispatch, dataset, activeTab],
+    [dispatch, dataset, activeTab, activeFilters],
   );
 
   const tableStyle = useMemo(

src/components/explorer/IndividualBiosamples.js

@@ -123,7 +123,7 @@ const Biosamples = ({ individual, handleBiosampleClick, handleExperimentClick })
   const { selectedBiosample } = useParams();
 
   useEffect(() => {
-    // If, on first load, there's a selected biosample:
+    // If there's a selected biosample:
     //  - find the biosample-${id} element (a span in the table row)
     //  - scroll it into view
     setTimeout(() => {
@@ -133,7 +133,7 @@ const Biosamples = ({ individual, handleBiosampleClick, handleExperimentClick })
         el.scrollIntoView();
       }
     }, 100);
-  }, []);
+  }, [selectedBiosample]);
 
   const biosamples = useDeduplicatedIndividualBiosamples(individual);
 

src/components/explorer/IndividualExperiments.js

@@ -243,13 +243,37 @@ ExperimentDetail.propTypes = {
 
 const expandedExperimentRowRender = (experiment) => <ExperimentDetail experiment={experiment} />;
 
+const EXPERIMENT_COLUMNS = [
+  {
+    title: "Experiment Type",
+    dataIndex: "experiment_type",
+    render: (type, { id }) => <span id={`experiment-${id}`}>{type}</span>, // scroll anchor wrapper
+  },
+  {
+    title: "Biosample",
+    dataIndex: "biosample",
+    render: (biosample) => <BiosampleLink biosample={biosample} />,
+  },
+  {
+    title: "Molecule",
+    dataIndex: "molecule_ontology",
+    render: (mo) => <OntologyTerm term={mo?.[0] ?? mo} />,
+  },
+  {
+    title: "Experiment Results",
+    key: "experiment_results",
+    // experiment_results can be undefined if no experiment results exist
+    render: (exp) => <span>{exp.experiment_results?.length ?? 0} files</span>,
+  },
+];
+
 const Experiments = ({ individual, handleExperimentClick }) => {
   const dispatch = useDispatch();
 
   const { selectedExperiment } = useParams();
 
   useEffect(() => {
-    // If, on first load, there's a selected experiment:
+    // If there's a selected experiment:
     //  - find the experiment-${id} element (a span in the table row)
     //  - scroll it into view
     setTimeout(() => {
@@ -259,7 +283,7 @@ const Experiments = ({ individual, handleExperimentClick }) => {
         el.scrollIntoView();
       }
     }, 100);
-  }, []);
+  }, [selectedExperiment]);
 
   const biosamplesData = useDeduplicatedIndividualBiosamples(individual);
   const experimentsData = useMemo(() => biosamplesData.flatMap((b) => b?.experiments ?? []), [biosamplesData]);
@@ -276,40 +300,13 @@ const Experiments = ({ individual, handleExperimentClick }) => {
       }));
 
     dispatch(getFileDownloadUrlsFromDrs(downloadableFiles)).catch(console.error);
-  }, [experimentsData]);
-
-  const columns = useMemo(
-    () => [
-      {
-        title: "Experiment Type",
-        dataIndex: "experiment_type",
-        render: (type, { id }) => <span id={`experiment-${id}`}>{type}</span>, // scroll anchor wrapper
-      },
-      {
-        title: "Biosample",
-        dataIndex: "biosample",
-        render: (biosample) => <BiosampleLink biosample={biosample} />,
-      },
-      {
-        title: "Molecule",
-        dataIndex: "molecule_ontology",
-        render: (mo) => <OntologyTerm term={mo?.[0] ?? mo} />,
-      },
-      {
-        title: "Experiment Results",
-        key: "experiment_results",
-        // experiment_results can be undefined if no experiment results exist
-        render: (exp) => <span>{exp.experiment_results?.length ?? 0} files</span>,
-      },
-    ],
-    [handleExperimentClick],
-  );
+  }, [dispatch, experimentsData]);
 
   return (
     <RoutedIndividualContentTable
       data={experimentsData}
       urlParam="selectedExperiment"
-      columns={columns}
+      columns={EXPERIMENT_COLUMNS}
       rowKey="id"
       handleRowSelect={handleExperimentClick}
       expandedRowRender={expandedExperimentRowRender}

src/components/explorer/IndividualPhenopackets.js

@@ -24,7 +24,7 @@ const IndividualPhenopackets = ({ individual }) => {
 
   useEffect(() => {
     dispatch(fetchIndividualPhenopacketsIfNecessary(individualId));
-  }, [individualId]);
+  }, [dispatch, individualId]);
 
   return (
     <>

src/components/explorer/IndividualTracks.js

@@ -278,7 +278,7 @@ const IndividualTracks = ({ individual }) => {
         igvBrowserRef.current.loadTrack(buildIgvTrack(igvUrls, track)).catch(console.error);
       }
     },
-    [allTracks],
+    [allTracks, igvUrls],
   );
 
   const storeIgvPosition = useCallback(
@@ -299,7 +299,7 @@ const IndividualTracks = ({ individual }) => {
       }
       dispatch(getIgvUrlsFromDrs(allTracks)).catch(console.error);
     }
-  }, [allTracks]);
+  }, [dispatch, allTracks, igvUrls]);
 
   // update access token whenever necessary
   useEffect(() => {

src/components/explorer/OntologyTerm.js

@@ -25,17 +25,14 @@ const OntologyTerm = memo(({ term, renderLabel, br }) => {
   // TODO: perf: might be slow to generate this over and over
   const [resourcesByNamespacePrefix, isFetchingResources] = useResourcesByNamespacePrefix(resourcesTuple);
 
-  if (!term) {
-    return <>{EM_DASH}</>;
-  }
-
   useEffect(() => {
+    if (!term) return;
     if (!term.id || !term.label) {
       console.error("Invalid term provided to OntologyTerm component:", term);
     }
   }, [term]);
 
-  if (!term.id || !term.label) {
+  if (!term || !term.id || !term.label) {
     return <>{EM_DASH}</>;
   }
 

src/components/explorer/RoutedIndividualContent.js

@@ -63,7 +63,10 @@ export const RoutedIndividualContent = ({ renderContent, urlParam }) => {
     [navigate],
   );
 
-  const contentNode = useMemo(() => renderContent({ onContentSelect: handleRoutedSelection }), [handleRoutedSelection]);
+  const contentNode = useMemo(
+    () => renderContent({ onContentSelect: handleRoutedSelection }),
+    [renderContent, handleRoutedSelection],
+  );
 
   return (
     <Routes>

src/components/explorer/SearchSummaryModal.js

@@ -42,6 +42,8 @@ const SearchSummaryModal = ({ searchResults, ...props }) => {
   const authorizationHeader = useAuthorizationHeader();
 
   useEffect(() => {
+    if (!katsuUrl) return;
+
     const ids = searchResults.searchFormattedResults.map(({ key }) => key);
 
     const raw = JSON.stringify({
@@ -61,7 +63,7 @@ const SearchSummaryModal = ({ searchResults, ...props }) => {
         setData(result);
       })
       .catch((error) => console.error("error", error));
-  }, [searchResults]);
+  }, [katsuUrl, searchResults, authorizationHeader]);
 
   const phenopacketData = data?.phenopacket?.data_type_specific;
   const experimentData = data?.experiment?.data_type_specific;

src/components/explorer/hooks/explorerHooks.js

@@ -1,41 +1,46 @@
-import { useMemo } from "react";
+import { useCallback, useMemo } from "react";
 
 export const useSortedColumns = (data, tableSortOrder, columnsDefinition) => {
   const sortColumnKey = tableSortOrder?.sortColumnKey;
   const sortOrder = tableSortOrder?.sortOrder;
 
-  const sortData = (dataToSort, sortKey, order) => {
-    const column = columnsDefinition.find((col) => col.dataIndex === sortKey);
-    if (column && column.sorter) {
-      return [...dataToSort].sort((a, b) => {
-        return order === "ascend" ? column.sorter(a, b) : column.sorter(b, a);
-      });
-    }
-    return dataToSort;
-  };
+  const sortData = useCallback(
+    (dataToSort, sortKey, order) => {
+      const column = columnsDefinition.find((col) => col.dataIndex === sortKey);
+      if (column && column.sorter) {
+        return [...dataToSort].sort((a, b) => {
+          return order === "ascend" ? column.sorter(a, b) : column.sorter(b, a);
+        });
+      }
+      return dataToSort;
+    },
+    [columnsDefinition],
+  );
 
-  const sortedData = useMemo(() => {
-    return sortData(data, sortColumnKey, sortOrder);
-  }, [data, sortColumnKey, sortOrder, columnsDefinition]);
+  const sortedData = useMemo(
+    () => sortData(data, sortColumnKey, sortOrder),
+    [data, sortData, sortColumnKey, sortOrder],
+  );
 
-  const columnsWithSortOrder = useMemo(() => {
-    return columnsDefinition.map((column) => {
-      if (column.dataIndex === sortColumnKey) {
-        return { ...column, sortOrder };
-      }
-      return column;
-    });
-  }, [sortColumnKey, sortOrder, columnsDefinition]);
+  const columnsWithSortOrder = useMemo(
+    () =>
+      columnsDefinition.map((column) => {
+        if (column.dataIndex === sortColumnKey) {
+          return { ...column, sortOrder };
+        }
+        return column;
+      }),
+    [sortColumnKey, sortOrder, columnsDefinition],
+  );
 
   return { sortedData, columnsWithSortOrder };
 };
 
-export const useDynamicTableFilterOptions = (data, key) => {
-  return useMemo(() => {
+export const useDynamicTableFilterOptions = (data, key) =>
+  useMemo(() => {
     const uniqueValues = new Set(data.map((item) => item[key]));
     return Array.from(uniqueValues).map((value) => ({
       text: value,
       value: value,
     }));
   }, [data, key]);
-};

src/components/explorer/utils.js

@@ -24,7 +24,7 @@ export const useIndividualInterpretations = (individual, withDiagnosis = false)
             .map((i) => [i.id, i]),
         ),
       ),
-    [individual],
+    [individual, withDiagnosis],
   );
 
 /**
@@ -125,7 +125,7 @@ export const useIndividualPhenopacketDataIndex = (individual, fieldName) => {
       (individual?.phenopackets ?? [])
         .flatMap((p) => p?.[fieldName] ?? [])
         .map((element, index) => ({ ...element, idx: `${index}` })),
-    [individual],
+    [individual, fieldName],
   );
 };
 

src/components/manager/DatasetTreeSelect.js

@@ -25,7 +25,7 @@ const DatasetTreeSelect = forwardRef(({ value, onChange, style, idFormat }, ref)
         onChange(newSelected);
       }
     },
-    [value, onChange, selected],
+    [value, onChange],
   );
 
   const selectTreeData = useMemo(