fix: ATAC optimization part 2

.infra/rdev/values.yaml

@@ -2,7 +2,7 @@ stack:
   services:
     explorer:
       image:
-        tag: sha-99bd33b
+        tag: sha-739c606
       replicaCount: 1
       env:
         # env vars common to all deployment stages

client/src/common/queries/coverage.ts

@@ -1,6 +1,6 @@
 import {
   UndefinedInitialDataOptions,
-  useQueries,
+  useQuery,
   UseQueryResult,
 } from "@tanstack/react-query";
 import { fetchJson } from "util/fetch";
@@ -17,11 +17,11 @@ export interface GeneInfo {
 }
 
 export interface FetchCoverageResponse {
-  cellType: string;
-  coveragePlot: CoveragePlotData;
   chromosome: string;
-  coverage: [number, number, number][];
   geneInfo: GeneInfo[];
+  coverageByCellType: {
+    [cellType: string]: [number, number, number][];
+  };
 }
 
 async function fetchCoverage(
@@ -54,12 +54,10 @@ export function useCoverageQuery({
   genomeVersion,
   cellTypes,
   options,
-}: UseCoverageQueryOptions): UseQueryResult<FetchCoverageResponse>[] {
-  return useQueries({
-    queries: cellTypes.map((cellType) => ({
-      queryKey: [USE_COVERAGE, geneName, genomeVersion, cellType],
-      queryFn: () => fetchCoverage(geneName, genomeVersion, cellType),
-      ...options,
-    })),
+}: UseCoverageQueryOptions): UseQueryResult<FetchCoverageResponse> {
+  return useQuery({
+    queryKey: [USE_COVERAGE, geneName, genomeVersion, cellTypes],
+    queryFn: () => fetchCoverage(geneName, genomeVersion, cellTypes.join(",")),
+    ...options,
   });
 }

client/src/common/queries/useChromatinViewerSelectedGene.tsx

@@ -0,0 +1,54 @@
+import React, { createContext, useContext, useState, ReactNode } from "react";
+
+// Define the context type
+interface ChromatinViewerContextType {
+  selectedGene: string;
+  setSelectedGene: (gene: string) => void;
+}
+
+// Create the context
+const ChromatinViewerContext = createContext<
+  ChromatinViewerContextType | undefined
+>(undefined);
+
+// Provider component props
+interface ChromatinViewerProviderProps {
+  children: ReactNode;
+  defaultGene?: string;
+}
+
+// Provider component
+export function ChromatinViewerProvider({
+  children,
+  defaultGene = "MYC",
+}: ChromatinViewerProviderProps) {
+  const [selectedGene, setSelectedGeneState] = useState<string>(defaultGene);
+
+  const setSelectedGene = (gene: string) => {
+    setSelectedGeneState(gene);
+  };
+
+  const value: ChromatinViewerContextType = {
+    selectedGene,
+    setSelectedGene,
+  };
+
+  return (
+    <ChromatinViewerContext.Provider value={value}>
+      {children}
+    </ChromatinViewerContext.Provider>
+  );
+}
+
+// Custom hook to use the context
+export function useChromatinViewerSelectedGene(): ChromatinViewerContextType {
+  const context = useContext(ChromatinViewerContext);
+
+  if (context === undefined) {
+    throw new Error(
+      "useChromatinViewerSelectedGene must be used within a ChromatinViewerProvider"
+    );
+  }
+
+  return context;
+}

client/src/components/BottomPanel/BottomPanel.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useMemo } from "react";
 import { connect, useSelector } from "react-redux";
 import { useCellTypesQuery } from "common/queries/cellType";
 import { RootState } from "reducers";
+import { ChromatinViewerProvider } from "common/queries/useChromatinViewerSelectedGene";
 import { ChromosomeMap } from "./components/ChromosomeMap/ChromosomeMap";
 import { Props, mapStateToProps } from "./types";
 import { GeneSelect } from "./components/GeneSelect/GeneSelect";
@@ -44,71 +45,72 @@ const BottomSideBar = ({
 
   return (
     <BottomPanelWrapper isHidden={bottomPanelHidden}>
-      <BottomPanelHeader>
-        <BottomPanelHeaderTitle>
-          Chromatin Accessibility Viewer
-        </BottomPanelHeaderTitle>
+      <ChromatinViewerProvider>
+        <BottomPanelHeader>
+          <BottomPanelHeaderTitle>
+            Chromatin Accessibility
+          </BottomPanelHeaderTitle>
+          <BottomPanelHeaderActions>
+            <GeneSelect />
+            <BottomPanelButton
+              active={false}
+              data-testid="add-cell-type"
+              minimal
+              text="Add Cell Type"
+              icon="plus"
+              onClick={() => {
+                const cellType = cellTypes.find(
+                  (type) => !selectedCellTypes.includes(type)
+                );
 
-        <BottomPanelHeaderActions>
-          <GeneSelect />
-          <BottomPanelButton
-            active={false}
-            data-testid="add-cell-type"
-            minimal
-            text="Add Cell Type"
-            icon="plus"
-            onClick={() => {
-              const cellType = cellTypes.find(
-                (type) => !selectedCellTypes.includes(type)
-              );
+                if (!cellType) {
+                  return;
+                }
 
-              if (!cellType) {
-                return;
+                dispatch({
+                  type: "toggle chromatin histogram",
+                  cellType,
+                });
+              }}
+              disabled={
+                cellTypesQuery.isLoading ||
+                selectedCellTypes.length === MAX_CELL_TYPES
               }
+            />
 
-              dispatch({
-                type: "toggle chromatin histogram",
-                cellType,
-              });
-            }}
-            disabled={
-              cellTypesQuery.isLoading ||
-              selectedCellTypes.length === MAX_CELL_TYPES
-            }
-          />
-
-          <BottomPanelButton
-            active={false}
-            data-testid="minimize-bottom-panel"
-            minimal
-            text=""
-            rightIcon={bottomPanelMinimized ? "maximize" : "minimize"}
-            onClick={() =>
-              dispatch({
-                type: "toggle minimize multiome viz panel",
-              })
-            }
-          />
-          <BottomPanelButton
-            active={false}
-            data-testid="close-bottom-panel"
-            minimal
-            text=""
-            rightIcon="cross"
-            onClick={() =>
-              dispatch({
-                type: "close multiome viz panel",
-              })
-            }
-          />
-        </BottomPanelHeaderActions>
-      </BottomPanelHeader>
+            <BottomPanelButton
+              active={false}
+              data-testid="minimize-bottom-panel"
+              minimal
+              text=""
+              rightIcon={bottomPanelMinimized ? "maximize" : "minimize"}
+              onClick={() =>
+                dispatch({
+                  type: "toggle minimize multiome viz panel",
+                })
+              }
+            />
+            <BottomPanelButton
+              active={false}
+              data-testid="close-bottom-panel"
+              minimal
+              text=""
+              rightIcon="cross"
+              onClick={() =>
+                dispatch({
+                  type: "close multiome viz panel",
+                })
+              }
+            />
+          </BottomPanelHeaderActions>
+        </BottomPanelHeader>
 
-      {!bottomPanelMinimized && (
-        <div>
-          <ChromosomeMap />
-        </div>
-      )}
+        {!bottomPanelMinimized && (
+          <div>
+            <ChromosomeMap />
+          </div>
+        )}
+      </ChromatinViewerProvider>
     </BottomPanelWrapper>
   );
 };