Merge remote-tracking branch 'origin/master' into fix/data-type-summa…

…ry-fetch

src/components/ReferenceGenomesContent.js

@@ -1,5 +1,4 @@
 import { useCallback, useMemo } from "react";
-import { useDispatch } from "react-redux";
 
 import { Button, Descriptions, Dropdown, Layout, Modal, Popover, Space, Table } from "antd";
 import { BarsOutlined, DeleteOutlined, ImportOutlined } from "@ant-design/icons";
@@ -13,6 +12,7 @@ import { useResourcePermissionsWrapper } from "@/hooks";
 import { deleteReferenceGenomeIfPossible } from "@/modules/reference/actions";
 import { useReferenceGenomes } from "@/modules/reference/hooks";
 import { useService, useServices, useWorkflows } from "@/modules/services/hooks";
+import { useAppDispatch } from "@/store";
 import { LAYOUT_CONTENT_STYLE } from "@/styles/layoutContent";
 
 import SitePageHeader from "./SitePageHeader";
@@ -21,7 +21,7 @@ import { useStartIngestionFlow } from "./manager/workflowCommon";
 const DEFAULT_REF_INGEST_WORKFLOW_ID = "fasta_ref";
 
 const ReferenceGenomesContent = () => {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
 
   const { hasAttempted: hasAttemptedServiceFetch } = useServices();
   const { permissions } = useResourcePermissionsWrapper(RESOURCE_EVERYTHING);

src/components/ServiceContent.js

@@ -1,5 +1,4 @@
 import { useEffect } from "react";
-import { useSelector } from "react-redux";
 
 import { Col, Layout, Row, Spin, Statistic, Typography } from "antd";
 
@@ -10,14 +9,15 @@ import { SITE_NAME } from "@/constants";
 import { EM_DASH } from "@/constants";
 import { BENTO_URL } from "@/config";
 import { useProjects } from "@/modules/metadata/hooks";
+import { useAppSelector } from "@/store";
 
 const ServiceContent = () => {
   useEffect(() => {
     document.title = `${SITE_NAME}: Admin / Services`;
   }, []);
 
   const { items: projects, isFetching: isFetchingProjects } = useProjects();
-  const isFetching = useSelector((state) => state.user.isFetchingDependentData) || isFetchingProjects;
+  const isFetching = useAppSelector((state) => state.user.isFetchingDependentData) || isFetchingProjects;
 
   return (
     <>

src/components/SiteHeader.js

@@ -1,5 +1,4 @@
 import { memo, useCallback, useMemo, useState } from "react";
-import { useDispatch } from "react-redux";
 import { Link } from "react-router-dom";
 import {
   viewNotifications,
@@ -30,16 +29,17 @@ import {
 
 import { BENTO_CBIOPORTAL_ENABLED, BENTO_GRAFANA_URL, BENTO_MONITORING_ENABLED, CUSTOM_HEADER } from "@/config";
 import { useEverythingPermissions } from "@/hooks";
-import { showNotificationDrawer } from "@/modules/notifications/actions";
-import { useNotifications } from "@/modules/notifications/hooks";
-import { matchingMenuKeys, transformMenuItem } from "@/utils/menu";
-
-import OverviewSettingsControl from "./overview/OverviewSettingsControl";
 import {
   useCanQueryAtLeastOneProjectOrDataset,
   useHasValidGrafanaRole,
   useManagerPermissions,
 } from "@/modules/authz/hooks";
+import { showNotificationDrawer } from "@/modules/notifications/actions";
+import { useNotifications } from "@/modules/notifications/hooks";
+import { useAppDispatch } from "@/store";
+import { matchingMenuKeys, transformMenuItem } from "@/utils/menu";
+
+import OverviewSettingsControl from "./overview/OverviewSettingsControl";
 
 const LinkedLogo = memo(() => (
   <Link to="/">
@@ -62,7 +62,7 @@ const openGrafanaInNewTab = () => {
 };
 
 const SiteHeader = () => {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
 
   const performAuth = usePerformAuth();
 

src/components/charts/PieChart.js

@@ -1,11 +1,12 @@
 import { useCallback, useMemo } from "react";
-import { useDispatch } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import PropTypes from "prop-types";
 
 import { PieChart as BentoPie } from "bento-charts";
 
 import { setAutoQueryPageTransition } from "@/modules/explorer/actions";
+import { useAppDispatch } from "@/store";
+
 import ChartContainer from "./ChartContainer";
 
 const PieChart = ({
@@ -18,7 +19,7 @@ const PieChart = ({
   clickable = false,
   sortData = true,
 }) => {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const navigate = useNavigate();
 
   const onAutoQueryTransition = useCallback(

src/components/datasets/linked_field_set/LinkedFieldSetModal.js

@@ -1,5 +1,4 @@
 import { useCallback } from "react";
-import { useDispatch } from "react-redux";
 import PropTypes from "prop-types";
 
 import { Form, Modal } from "antd";
@@ -8,13 +7,14 @@ import LinkedFieldSetForm from "./LinkedFieldSetForm";
 
 import { FORM_MODE_ADD } from "@/constants";
 import { addDatasetLinkedFieldSetIfPossible, saveDatasetLinkedFieldSetIfPossible } from "@/modules/metadata/actions";
+import { useProjects } from "@/modules/metadata/hooks";
 import { useDataTypes } from "@/modules/services/hooks";
 import { datasetPropTypesShape, linkedFieldSetPropTypesShape, propTypesFormMode } from "@/propTypes";
+import { useAppDispatch } from "@/store";
 import { nop } from "@/utils/misc";
-import { useProjects } from "@/modules/metadata/hooks";
 
 const LinkedFieldSetModal = ({ dataset, linkedFieldSetIndex, linkedFieldSet, mode, open, onCancel, onSubmit }) => {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
 
   const [form] = Form.useForm();
 

src/components/discovery/DiscoveryQueryBuilder.js

@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { useSelector } from "react-redux";
 import PropTypes from "prop-types";
 
 import { Button, Card, Dropdown, Empty, Tabs, Typography } from "antd";
@@ -15,7 +14,7 @@ import {
   removeDataTypeQueryForm,
 } from "@/modules/explorer/actions";
 import { useDataTypes, useServices } from "@/modules/services/hooks";
-import { useAppDispatch } from "@/store";
+import { useAppDispatch, useAppSelector } from "@/store";
 import { nop } from "@/utils/misc";
 import { OP_EQUALS } from "@/utils/search";
 import { getFieldSchema } from "@/utils/schema";
@@ -28,18 +27,16 @@ const DiscoveryQueryBuilder = ({ activeDataset, dataTypeForms, requiredDataTypes
 
   const { isFetching: isFetchingServiceDataTypes, itemsByID: dataTypesByID } = useDataTypes();
   const dataTypesByDataset = useDatasetDataTypes();
+  const { isFetching: isFetchingServices } = useServices();
+
+  const { autoQuery, fetchingTextSearch } = useAppSelector((state) => state.explorer);
 
-  const autoQuery = useSelector((state) => state.explorer.autoQuery);
   // Mini state machine: when auto query is set:
   //  1. clear form(s) and set this to true;
   //  2. re-create forms and wait to receive ref;
   //  3. if this is true, and we have refs, execute part two of auto-query.
   const [shouldExecAutoQueryPt2, setShouldExecAutoQueryPt2] = useState(false);
 
-  const isFetchingTextSearch = useSelector((state) => state.explorer.fetchingTextSearch);
-
-  const { isFetching: isFetchingServices } = useServices();
-
   const dataTypesLoading = isFetchingServices || isFetchingServiceDataTypes || dataTypesByDataset.isFetchingAll;
 
   const [schemasModalShown, setSchemasModalShown] = useState(false);
@@ -274,7 +271,7 @@ const DiscoveryQueryBuilder = ({ activeDataset, dataTypeForms, requiredDataTypes
         type="primary"
         icon={<SearchOutlined />}
         loading={searchLoading}
-        disabled={dataTypeForms.length === 0 || isFetchingTextSearch}
+        disabled={dataTypeForms.length === 0 || fetchingTextSearch}
         onClick={handleSubmit}
       >
         Search

src/components/discovery/VariantSearchHeader.js

@@ -1,5 +1,4 @@
 import { useState, useEffect, useCallback, useMemo } from "react";
-import { useSelector } from "react-redux";
 import PropTypes from "prop-types";
 
 import { Form, Input, Select } from "antd";
@@ -8,6 +7,7 @@ import LocusSearch from "./LocusSearch";
 
 import { notAlleleCharactersRegex } from "@/utils/misc";
 import { useGohanVariantsOverview } from "@/modules/explorer/hooks";
+import { useAppSelector } from "@/store";
 
 const isValidLocus = (locus) => locus.chrom !== null && locus.start !== null && locus.end !== null;
 const normalizeAlleleText = (text) => text.toUpperCase().replaceAll(notAlleleCharactersRegex, "");
@@ -44,7 +44,7 @@ const VariantSearchHeader = ({ dataType, addVariantSearchValues }) => {
   const [activeAltValue, setActiveAltValue] = useState(null);
   const [assemblyId, setAssemblyId] = useState(overviewAssemblyIds.length === 1 ? overviewAssemblyIds[0] : null);
   const [locus, setLocus] = useState({ chrom: null, start: null, end: null });
-  const isSubmitting = useSelector((state) => state.explorer.isSubmittingSearch);
+  const { isSubmittingSearch: isSubmitting } = useAppSelector((state) => state.explorer);
 
   // begin with required fields considered valid, so user isn't assaulted with error messages
   const [fieldsValidity, setFieldsValidity] = useState(INITIAL_FIELDS_VALIDITY);

src/components/explorer/ExplorerDatasetSearch.js

@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useMemo } from "react";
-import { useSelector, useDispatch } from "react-redux";
 import { useParams } from "react-router-dom";
 
 import { Typography, Tabs } from "antd";
@@ -17,6 +16,7 @@ import {
   setActiveTab,
 } from "@/modules/explorer/actions";
 import { useProjects } from "@/modules/metadata/hooks";
+import { useAppDispatch, useAppSelector } from "@/store";
 
 import IndividualsTable from "./searchResultsTables/IndividualsTable";
 import BiosamplesTable from "./searchResultsTables/BiosamplesTable";
@@ -36,15 +36,15 @@ const EMPTY_ARRAY = [];
 
 const ExplorerDatasetSearch = () => {
   const { dataset: datasetID } = useParams();
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
 
   const datasetsByID = useProjects().datasetsByID;
 
-  const activeKey = useSelector((state) => state.explorer.activeTabByDatasetID[datasetID]) || TAB_KEYS.INDIVIDUAL;
-  const dataTypeForms = useSelector((state) => state.explorer.dataTypeFormsByDatasetID[datasetID]) ?? EMPTY_ARRAY;
-  const fetchingSearch = useSelector((state) => state.explorer.fetchingSearchByDatasetID[datasetID] || false);
-  const fetchingTextSearch = useSelector((state) => state.explorer.fetchingTextSearch || false);
-  const searchResults = useSelector((state) => state.explorer.searchResultsByDatasetID[datasetID] || null);
+  const activeKey = useAppSelector((state) => state.explorer.activeTabByDatasetID[datasetID]) || TAB_KEYS.INDIVIDUAL;
+  const dataTypeForms = useAppSelector((state) => state.explorer.dataTypeFormsByDatasetID[datasetID]) ?? EMPTY_ARRAY;
+  const fetchingSearch = useAppSelector((state) => state.explorer.fetchingSearchByDatasetID[datasetID] || false);
+  const fetchingTextSearch = useAppSelector((state) => state.explorer.fetchingTextSearch || false);
+  const searchResults = useAppSelector((state) => state.explorer.searchResultsByDatasetID[datasetID] || null);
 
   useEffect(() => {
     console.debug("search results: ", searchResults);

src/components/explorer/ExplorerSearchContent.js

@@ -1,10 +1,10 @@
 import { useMemo } from "react";
-import { useSelector } from "react-redux";
 import { Navigate, Route, Routes } from "react-router-dom";
 
 import { Layout, Menu, Skeleton } from "antd";
 
 import { useDatasetsArray, useProjectsArray } from "@/modules/metadata/hooks";
+import { useAppSelector } from "@/store";
 import { LAYOUT_CONTENT_STYLE } from "@/styles/layoutContent";
 import { matchingMenuKeys, transformMenuItem } from "@/utils/menu";
 
@@ -13,7 +13,7 @@ import SitePageHeader from "../SitePageHeader";
 
 const ExplorerSearchContent = () => {
   const projects = useProjectsArray();
-  const isFetchingDependentData = useSelector((state) => state.user.isFetchingDependentData);
+  const { isFetchingDependentData } = useAppSelector((state) => state.user);
 
   const menuItems = useMemo(
     () =>

src/components/explorer/ExplorerSearchResultsTable.js

@@ -1,7 +1,6 @@
 import { useState, useMemo, useCallback } from "react";
 import PropTypes from "prop-types";
 import { useParams } from "react-router-dom";
-import { useSelector, useDispatch } from "react-redux";
 
 import { Table, Typography, Button, Spin } from "antd";
 import { BarChartOutlined, ExportOutlined } from "@ant-design/icons";
@@ -16,6 +15,7 @@ import {
   performExperimentsDownloadCSVIfPossible,
   setTableSortOrder,
 } from "@/modules/explorer/actions";
+import { useAppDispatch, useAppSelector } from "@/store";
 
 const PAGE_SIZE = 25;
 
@@ -51,11 +51,11 @@ const ExplorerSearchResultsTable = ({
     return `Showing results ${start}-${end} of ${filteredData.length}`;
   }, [currentPage, filteredData]);
 
-  const searchResults = useSelector((state) => state.explorer.searchResultsByDatasetID[dataset] || null);
-  const selectedRows = useSelector((state) => state.explorer.selectedRowsByDatasetID[dataset]);
-  const isFetchingDownload = useSelector((state) => state.explorer.isFetchingDownload || false);
-  const fetchingSearch = useSelector((state) => state.explorer.fetchingSearchByDatasetID[dataset] || false);
-  const dispatch = useDispatch();
+  const searchResults = useAppSelector((state) => state.explorer.searchResultsByDatasetID[dataset] || null);
+  const selectedRows = useAppSelector((state) => state.explorer.selectedRowsByDatasetID[dataset]);
+  const isFetchingDownload = useAppSelector((state) => state.explorer.isFetchingDownload || false);
+  const fetchingSearch = useAppSelector((state) => state.explorer.fetchingSearchByDatasetID[dataset] || false);
+  const dispatch = useAppDispatch();
 
   const handleSetSelectedRows = useCallback(
     (...args) => dispatch(setSelectedRows(dataset, ...args)),

src/components/explorer/IndividualExperiments.js

@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
 import { Link, useParams } from "react-router-dom";
 import PropTypes from "prop-types";
 
@@ -9,6 +8,7 @@ import { BarsOutlined, EyeOutlined, FileTextOutlined, ProfileOutlined } from "@a
 import { EM_DASH } from "@/constants";
 import { experimentPropTypesShape, experimentResultPropTypesShape, individualPropTypesShape } from "@/propTypes";
 import { getFileDownloadUrlsFromDrs } from "@/modules/drs/actions";
+import { useAppDispatch, useAppSelector } from "@/store";
 import { guessFileType } from "@/utils/files";
 
 import { useDeduplicatedIndividualBiosamples } from "./utils";
@@ -32,7 +32,7 @@ const VIEWABLE_FILE_FORMATS = ["PDF", "CSV", "TSV"];
 const ExperimentResultActions = ({ result }) => {
   const { filename } = result;
 
-  const downloadUrls = useSelector((state) => state.drs.downloadUrlsByFilename);
+  const downloadUrls = useAppSelector((state) => state.drs.downloadUrlsByFilename);
   const url = downloadUrls[filename]?.url;
 
   const [viewModalVisible, setViewModalVisible] = useState(false);
@@ -268,7 +268,7 @@ const EXPERIMENT_COLUMNS = [
 ];
 
 const Experiments = ({ individual, handleExperimentClick }) => {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
 
   const { selectedExperiment } = useParams();
 

src/components/explorer/IndividualGenes.js

@@ -1,13 +1,13 @@
 import { memo, useContext, useMemo } from "react";
 import { Link } from "react-router-dom";
-import { useDispatch } from "react-redux";
 import PropTypes from "prop-types";
 
 import { Button, Descriptions, List, Table, Typography } from "antd";
 
 import { ExplorerIndividualContext } from "./contexts/individual";
 import { setIgvPosition } from "@/modules/explorer/actions";
 import { individualPropTypesShape } from "@/propTypes";
+import { useAppDispatch } from "@/store";
 
 import { explorerIndividualUrl } from "./utils";
 
@@ -32,7 +32,7 @@ StringList.propTypes = {
 };
 
 export const GeneDescriptor = ({ geneDescriptor }) => {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const { individualID } = useContext(ExplorerIndividualContext);
   const tracksUrl = useMemo(() => {
     if (individualID) {
@@ -66,7 +66,7 @@ GeneDescriptor.propTypes = {
 };
 
 const GeneIGVLink = memo(({ symbol, tracksUrl }) => {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   return (
     <Link onClick={() => dispatch(setIgvPosition(symbol))} to={tracksUrl}>
       <Button>{symbol}</Button>

src/components/explorer/IndividualPhenopackets.js

@@ -1,5 +1,4 @@
 import { useEffect } from "react";
-import { useDispatch, useSelector } from "react-redux";
 
 import { Divider, Skeleton } from "antd";
 
@@ -9,16 +8,17 @@ import { individualPropTypesShape } from "@/propTypes";
 import DownloadButton from "@/components/common/DownloadButton";
 import JsonView from "@/components/common/JsonView";
 import { useService } from "@/modules/services/hooks";
+import { useAppDispatch, useAppSelector } from "@/store";
 
 const IndividualPhenopackets = ({ individual }) => {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
 
   const { id: individualId } = individual;
 
   const katsuUrl = useService("metadata")?.url ?? "";
   const downloadUrl = `${katsuUrl}/api/individuals/${individualId}/phenopackets?attachment=1&format=json`;
 
-  const phenopacketsByIndividualID = useSelector((state) => state.individuals.phenopacketsByIndividualID);
+  const { phenopacketsByIndividualID } = useAppSelector((state) => state.individuals);
 
   const { isFetching, data } = phenopacketsByIndividualID[individualId] ?? {};