diff --git a/flatfront-astro/src/lib/components/CatalogCell.tsx b/flatfront-astro/src/lib/components/CatalogCell.tsx index d315c31..a4359d3 100644 --- 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 ( - - - + + + + + + + + + + + ); } diff --git a/flatfront-astro/src/lib/components/Table.tsx b/flatfront-astro/src/lib/components/Table.tsx index 44af42c..cc66b0e 100644 --- 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 index 59a3593..23984da 100644 --- 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( undefined ); -const MatchingRowsContext = React.createContext(undefined); - export function CatalogProvider({ children, value: catalog_cell_id @@ -23,42 +16,8 @@ export function CatalogProvider({ }) { return ( - - - - {children} - - - - - ); -} - -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( - `/${catalog_id}/count`, - request_body, - { signal } - ); - return response; - }, - enabled: !!catalog_id - }); - const result = query?.data ?? null; - return ( - {children} - + ); } @@ -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 new file mode 100644 index 0000000..3bdef99 --- /dev/null +++ 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(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( + `/${catalog_id}/count`, + request_body, + { signal } + ); + return response; + }, + enabled: !!catalog_id + }); + const result = query?.data ?? null; + return ( + + {children} + + ); +} + +export function useMatchingRows(): number | undefined { + const matching_rows = React.useContext(MatchingRowsContext); + return matching_rows; +}