Add context providers for CatalogMetadata,

Filters, Random, Columns, and MatchingRows in CatalogCell component. Refactor imports in Table component. Add MatchingRowsContext for counting rows in CatalogContext.
flatironinstitute · Nov 7, 2023 · 7bd1230 · 7bd1230
1 parent e8f29eb
commit 7bd1230
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 61 deletions.
diff --git a/flatfront-astro/src/lib/components/CatalogCell.tsx b/flatfront-astro/src/lib/components/CatalogCell.tsx
@@ -9,16 +9,30 @@ import type {
 import React from "react";
 import * as d3 from "d3";
 import { useQuery } from "@tanstack/react-query";
+import { useDebounce } from "@uidotdev/usehooks";
 import { fetch_api_get, format, get_field_titles } from "../shared";
-import { useAddPlot, usePlotIDs } from "../contexts/PlotContext";
-import { useFilters } from "../contexts/FiltersContext";
-import { useCatalogMetadata } from "../contexts/CatalogMetadataContext";
 import {
   CatalogProvider,
   useCatalogCellID,
-  useCatalogID,
-  useMatchingRows
+  useCatalogID
 } from "../contexts/CatalogContext";
+import { useAddPlot, usePlotIDs } from "../contexts/PlotContext";
+import { FiltersProvider, useFilters } from "../contexts/FiltersContext";
+import {
+  CatalogMetadataProvider,
+  useCatalogMetadata
+} from "../contexts/CatalogMetadataContext";
+import {
+  RandomProvider,
+  useRandomConfig,
+  useSetRandomConfig
+} from "../contexts/RandomContext";
+import { useMergeState } from "../contexts/AppStateContext";
+import { ColumnsProvider } from "../contexts/ColumnsContext";
+import {
+  MatchingRowsProvider,
+  useMatchingRows
+} from "../contexts/MatchingRowsContext";
 import {
   BigButton,
   CellWrapper,
@@ -38,10 +52,6 @@ import PlotSection from "./PlotSection";
 import FieldCard from "./FieldCard";
 import BrowseFieldsDialog from "./BrowseFieldsDialog";
 import Katex from "./Katex";
-import { useRandomConfig, useSetRandomConfig } from "../contexts/RandomContext";
-import { useMergeState } from "../contexts/AppStateContext";
-import { useDebounce } from "@uidotdev/usehooks";
-import { ColumnsProvider } from "../contexts/ColumnsContext";
 
 export default function CatalogCell({
   id: catalog_cell_id
@@ -50,9 +60,17 @@ export default function CatalogCell({
 }) {
   return (
     <CatalogProvider value={catalog_cell_id}>
-      <ColumnsProvider>
-        <CatalogCellContents />
-      </ColumnsProvider>
+      <CatalogMetadataProvider>
+        <FiltersProvider>
+          <RandomProvider>
+            <MatchingRowsProvider>
+              <ColumnsProvider>
+                <CatalogCellContents />
+              </ColumnsProvider>
+            </MatchingRowsProvider>
+          </RandomProvider>
+        </FiltersProvider>
+      </CatalogMetadataProvider>
     </CatalogProvider>
   );
 }

diff --git a/flatfront-astro/src/lib/components/Table.tsx b/flatfront-astro/src/lib/components/Table.tsx
@@ -25,7 +25,8 @@ import {
   is_root_node,
   log
 } from "../shared";
-import { useCatalogID, useMatchingRows } from "../contexts/CatalogContext";
+import { useMatchingRows } from "../contexts/MatchingRowsContext";
+import { useCatalogID } from "../contexts/CatalogContext";
 import { useFilters } from "../contexts/FiltersContext";
 import { useCatalogMetadata } from "../contexts/CatalogMetadataContext";
 import { useColumns } from "../contexts/ColumnsContext";

diff --git a/flatfront-astro/src/lib/contexts/CatalogContext.tsx b/flatfront-astro/src/lib/contexts/CatalogContext.tsx
@@ -1,19 +1,12 @@
-import type { CellID, CountRequestBody, CountResponse } from "../types";
+import type { CellID } from "../types";
 
 import React from "react";
-import { useQuery } from "@tanstack/react-query";
-import { fetch_api_post } from "../shared";
-import { FiltersProvider, useFilters } from "./FiltersContext";
-import { CatalogMetadataProvider } from "./CatalogMetadataContext";
-import { RandomProvider, useRandomConfig } from "./RandomContext";
 import { useAppState } from "./AppStateContext";
 
 const CatalogCellIDContext = React.createContext<CellID.Catalog | undefined>(
   undefined
 );
 
-const MatchingRowsContext = React.createContext<number | undefined>(undefined);
-
 export function CatalogProvider({
   children,
   value: catalog_cell_id
@@ -23,42 +16,8 @@ export function CatalogProvider({
 }) {
   return (
     <CatalogCellIDContext.Provider value={catalog_cell_id}>
-      <CatalogMetadataProvider>
-        <FiltersProvider>
-          <RandomProvider>
-            <MatchingRowsProvider>{children}</MatchingRowsProvider>
-          </RandomProvider>
-        </FiltersProvider>
-      </CatalogMetadataProvider>
-    </CatalogCellIDContext.Provider>
-  );
-}
-
-function MatchingRowsProvider({ children }: { children: React.ReactNode }) {
-  const catalog_id = useCatalogID();
-  const filters = useFilters();
-  const random_config = useRandomConfig();
-  const request_body: CountRequestBody = {
-    ...filters,
-    ...random_config
-  };
-  const query = useQuery({
-    queryKey: [`count`, request_body],
-    queryFn: async ({ signal }) => {
-      const response = await fetch_api_post<CountRequestBody, CountResponse>(
-        `/${catalog_id}/count`,
-        request_body,
-        { signal }
-      );
-      return response;
-    },
-    enabled: !!catalog_id
-  });
-  const result = query?.data ?? null;
-  return (
-    <MatchingRowsContext.Provider value={result}>
       {children}
-    </MatchingRowsContext.Provider>
+    </CatalogCellIDContext.Provider>
   );
 }
 
@@ -72,8 +31,3 @@ export function useCatalogID(): string {
   const catalog_id = useAppState()?.set_catalog?.[catalog_cell_id];
   return catalog_id;
 }
-
-export function useMatchingRows(): number | undefined {
-  const matching_rows = React.useContext(MatchingRowsContext);
-  return matching_rows;
-}
diff --git a/flatfront-astro/src/lib/contexts/MatchingRowsContext.tsx b/flatfront-astro/src/lib/contexts/MatchingRowsContext.tsx
@@ -0,0 +1,47 @@
+import type { CountRequestBody, CountResponse } from "../types";
+
+import React from "react";
+import { useQuery } from "@tanstack/react-query";
+import { fetch_api_post } from "../shared";
+import { useCatalogID } from "./CatalogContext";
+import { useFilters } from "./FiltersContext";
+import { useRandomConfig } from "./RandomContext";
+
+const MatchingRowsContext = React.createContext<number | undefined>(undefined);
+
+export function MatchingRowsProvider({
+  children
+}: {
+  children: React.ReactNode;
+}) {
+  const catalog_id = useCatalogID();
+  const filters = useFilters();
+  const random_config = useRandomConfig();
+  const request_body: CountRequestBody = {
+    ...filters,
+    ...random_config
+  };
+  const query = useQuery({
+    queryKey: [`count`, request_body],
+    queryFn: async ({ signal }) => {
+      const response = await fetch_api_post<CountRequestBody, CountResponse>(
+        `/${catalog_id}/count`,
+        request_body,
+        { signal }
+      );
+      return response;
+    },
+    enabled: !!catalog_id
+  });
+  const result = query?.data ?? null;
+  return (
+    <MatchingRowsContext.Provider value={result}>
+      {children}
+    </MatchingRowsContext.Provider>
+  );
+}
+
+export function useMatchingRows(): number | undefined {
+  const matching_rows = React.useContext(MatchingRowsContext);
+  return matching_rows;
+}