no more useDispatch, or "controller"

flatironinstitute · Oct 25, 2023 · b22d262 · b22d262
1 parent 5b4ec3b
commit b22d262
Show file tree

Hide file tree

Showing 13 changed files with 191 additions and 123 deletions.
diff --git a/flatfront-astro/src/lib/columns.ts b/flatfront-astro/src/lib/columns.ts
@@ -1,4 +1,4 @@
-import { useAppState, useDispatch } from "./contexts/AppStateContext";
+import { useAppState, useMergeState } from "./contexts/AppStateContext";
 import { useCatalogCellID, useCatalogID } from "./contexts/CatalogContext";
 import { useCatalogMetadata } from "./contexts/CatalogMetadataContext";
 import type { CatalogHierarchyNode, FieldID, FieldMetadata } from "./types";
@@ -39,19 +39,35 @@ function get_column_ids(
 export function useAddColumn() {
   const catalog_cell_id = useCatalogCellID();
   const catalog_id = useCatalogID();
-  const dispatch = useDispatch();
+  const merge_state = useMergeState();
   return (node: CatalogHierarchyNode) => {
     const field_id = node.data.name;
-    dispatch([`show_columns`, catalog_cell_id, catalog_id, field_id], true);
+    merge_state({
+      show_columns: {
+        [catalog_cell_id]: {
+          [catalog_id]: {
+            [field_id]: true
+          }
+        }
+      }
+    });
   };
 }
 
 export function useRemoveColumn() {
   const catalog_cell_id = useCatalogCellID();
   const catalog_id = useCatalogID();
-  const dispatch = useDispatch();
+  const merge_state = useMergeState();
   return (node: CatalogHierarchyNode) => {
     const field_id = node.data.name;
-    dispatch([`show_columns`, catalog_cell_id, catalog_id, field_id], false);
+    merge_state({
+      show_columns: {
+        [catalog_cell_id]: {
+          [catalog_id]: {
+            [field_id]: false
+          }
+        }
+      }
+    });
   };
 }
diff --git a/flatfront-astro/src/lib/components/CatalogCell.tsx b/flatfront-astro/src/lib/components/CatalogCell.tsx
@@ -1,8 +1,6 @@
 import type {
   CatalogHierarchyNode,
   CellID,
-  CountRequestBody,
-  CountResponse,
   PlotID,
   TopResponse,
   TopResponseEntry
@@ -11,14 +9,7 @@ import type {
 import React from "react";
 import * as d3 from "d3";
 import { useQuery } from "@tanstack/react-query";
-import * as controller from "../contexts/AppStateContext";
-import {
-  fetch_api_get,
-  fetch_api_post,
-  format,
-  get_field_titles,
-  log
-} from "../shared";
+import { fetch_api_get, format, get_field_titles } from "../shared";
 import { useAddPlot, usePlotIDs } from "../plot-hooks";
 import { useFilters } from "../contexts/FiltersContext";
 import { useCatalogMetadata } from "../contexts/CatalogMetadataContext";
@@ -47,6 +38,7 @@ import FieldCard from "./FieldCard";
 import BrowseFieldsDialog from "./BrowseFieldsDialog";
 import Katex from "./Katex";
 import { useSetRandomConfig } from "../contexts/RandomContext";
+import { useMergeState } from "../contexts/AppStateContext";
 
 export default function CatalogCell({
   id: catalog_cell_id
@@ -109,7 +101,7 @@ function CatalogSelect() {
   const catalog_list = d3.sort(catalog_list_unsorted, get_title);
   const ready = catalog_list.length > 0;
   const selected = catalog_list.find((d) => d.name === catalog_id);
-  const dispatch = controller.useDispatch();
+  const merge_state = useMergeState();
   return (
     <div data-type="CatalogSelect">
       <Select
@@ -121,7 +113,11 @@ function CatalogSelect() {
         value={selected}
         onValueChange={(d) => {
           const catalog_id = d?.name;
-          dispatch([`set_catalog`, catalog_cell_id], catalog_id);
+          merge_state({
+            set_catalog: {
+              [catalog_cell_id]: catalog_id
+            }
+          });
         }}
       />
     </div>
@@ -164,7 +160,7 @@ function AboutThisCatalog() {
 
 function MatchingRows() {
   const catalog_id = useCatalogID();
-  if (!catalog_id) return <div>Select a catalog</div>
+  if (!catalog_id) return <div>Select a catalog</div>;
   const catalog_metadata = useCatalogMetadata();
   const total_rows = catalog_metadata?.response?.count;
   const matching = useMatchingRows();
@@ -202,7 +198,7 @@ function AddFilterSelect() {
   const catalog_metadata = useCatalogMetadata();
   const leaves = catalog_metadata?.hierarchy?.leaves() ?? [];
   const filters = useFilters();
-  const dispatch = controller.useDispatch();
+  const merge_state = useMergeState();
   const [value, set_value] = React.useState(undefined);
   return (
     <Combobox
@@ -219,7 +215,15 @@ function AddFilterSelect() {
       }}
       onValueChange={(d: CatalogHierarchyNode) => {
         const field_id = d.data.name;
-        dispatch([`add_filter`, catalog_cell_id, catalog_id, field_id], true);
+        merge_state({
+          add_filter: {
+            [catalog_cell_id]: {
+              [catalog_id]: {
+                [field_id]: true
+              }
+            }
+          }
+        });
         set_value(undefined);
       }}
       debug

diff --git a/flatfront-astro/src/lib/components/Cells.tsx b/flatfront-astro/src/lib/components/Cells.tsx
@@ -1,13 +1,18 @@
-import CatalogCell from "./CatalogCell";
-import * as controller from "../contexts/AppStateContext";
 import type { CellID } from "../types";
+import * as d3 from "d3";
+import CatalogCell from "./CatalogCell";
+import { useAppState } from "../contexts/AppStateContext";
 
 export default function Cells() {
-  const cells = controller.useAppState()?.add_cell ?? [];
+  const cells = useAppState()?.add_cell ?? {};
+
+  const cells_array = d3
+    .sort(Object.entries(cells), (d) => d[0])
+    .map((d) => d[1]);
 
   return (
     <>
-      {cells.map((cell) => {
+      {cells_array.map((cell) => {
         const component = (() => {
           switch (cell.type) {
             case `catalog`:

diff --git a/flatfront-astro/src/lib/components/FilterControls.tsx b/flatfront-astro/src/lib/components/FilterControls.tsx
@@ -33,10 +33,14 @@ export function RangeFilterControl() {
       low={low}
       high={high}
       onLowChange={(number) => {
-        set_filter_value([`gte`], number);
+        set_filter_value({
+          gte: number
+        });
       }}
       onHighChange={(number) => {
-        set_filter_value([`lte`], number);
+        set_filter_value({
+          lte: number
+        });
       }}
       debounce={500}
     />
@@ -66,7 +70,8 @@ export function SelectFilterControl() {
         return `${d.text} (${format.commas(d.count)} rows)`;
       }}
       onValueChange={({ value }) => {
-        set_filter_value([], value);
+        // set_filter_value([], value);
+        set_filter_value(value);
       }}
     />
   );

diff --git a/flatfront-astro/src/lib/components/GlobalControls.tsx b/flatfront-astro/src/lib/components/GlobalControls.tsx
@@ -1,20 +1,25 @@
 import type { DarkModeValue } from "../types";
 
 import React from "react";
-import * as controller from "../contexts/AppStateContext";
 import { useDarkModeValue } from "../dark-mode";
 import { CellWrapper, BigButton, RadioGroup } from "./Primitives";
+import { useAppState, useMergeState } from "../contexts/AppStateContext";
 
 export default function GlobalControls(): React.JSX.Element {
-  const number_of_cells = controller.useAppState()?.add_cell?.length ?? 0;
-  const dispatch = controller.useDispatch();
+  const cells_object = useAppState()?.add_cell ?? {};
+  const number_of_cells = Object.keys(cells_object).length ?? 0;
+  const merge_state = useMergeState();
   return (
     <CellWrapper className="grid items-center gap-y-4">
       <BigButton
         onClick={() => {
-          dispatch([`add_cell`, number_of_cells.toString()], {
-            type: `catalog`,
-            id: `catalog_cell_${number_of_cells}`
+          merge_state({
+            add_cell: {
+              [number_of_cells]: {
+                type: `catalog`,
+                id: `catalog_cell_${number_of_cells}`
+              }
+            }
           });
         }}
       >
@@ -31,10 +36,10 @@ export default function GlobalControls(): React.JSX.Element {
 function DarkModeSelect() {
   const current_value = useDarkModeValue();
 
-  const dispatch = controller.useDispatch();
+  const merge_state = useMergeState();
 
   const on_change = (value: DarkModeValue) => {
-    dispatch([`dark_mode`], value);
+    merge_state({ dark_mode: value });
   };
 
   return (

diff --git a/flatfront-astro/src/lib/components/Plot.tsx b/flatfront-astro/src/lib/components/Plot.tsx
@@ -13,7 +13,6 @@ import {
   get_field_type,
   create_context_helper
 } from "../shared";
-import * as controller from "../contexts/AppStateContext";
 import { useIsDarkMode } from "../dark-mode";
 import { useRemovePlot } from "../plot-hooks";
 import { useFilters } from "../contexts/FiltersContext";
@@ -27,12 +26,13 @@ import {
   StatusBox
 } from "./Primitives";
 import HighchartsPlot from "./HighchartsPlot";
+import { useAppState, useMergeState } from "../contexts/AppStateContext";
 
 const [usePlotID, PlotIDProvider] = create_context_helper<PlotID>(`PlotID`);
 
 function usePlotType() {
   const plot_id = usePlotID();
-  const plot_type = controller.useAppState()?.set_plot_type?.[plot_id];
+  const plot_type = useAppState()?.set_plot_type?.[plot_id];
   return plot_type;
 }
 
@@ -165,7 +165,7 @@ function PlotTypeSelect() {
     { key: `heatmap` as PlotType, label: `Heatmap` }
   ];
   const value = plot_type_options.find((d) => d.key === plot_type);
-  const dispatch = controller.useDispatch();
+  const merge_state = useMergeState();
   return (
     <Select
       placeholder="Choose plot type..."
@@ -175,7 +175,11 @@ function PlotTypeSelect() {
       value={value}
       onValueChange={(d) => {
         const plot_type = d?.key;
-        dispatch([`set_plot_type`, plot_id], plot_type);
+        merge_state({
+          set_plot_type: {
+            [plot_id]: plot_type
+          }
+        });
       }}
       size="small"
     />
@@ -201,11 +205,11 @@ function PlotControl({
     return type === `INTEGER` || type === `FLOAT`;
   });
 
-  const plot_config = controller.useAppState().set_plot_control?.[plot_id];
+  const plot_config = useAppState().set_plot_control?.[plot_id];
 
   const field_id = plot_config?.[plot_control_key];
 
-  const dispatch = controller.useDispatch();
+  const merge_state = useMergeState();
 
   const value = numeric_nodes.find((d) => d.data.name === field_id);
 
@@ -222,7 +226,13 @@ function PlotControl({
         <Checkbox
           checked={is_log_mode}
           onCheckedChange={(checked) => {
-            dispatch([`set_plot_control`, plot_id, log_mode_key], checked);
+            merge_state({
+              set_plot_control: {
+                [plot_id]: {
+                  [log_mode_key]: checked
+                }
+              }
+            });
           }}
         />
       </div>
@@ -240,7 +250,13 @@ function PlotControl({
         getDisplayName={(d) => d.data.name}
         onValueChange={(d) => {
           const value = d?.data.name;
-          dispatch([`set_plot_control`, plot_id, plot_control_key], value);
+          merge_state({
+            set_plot_control: {
+              [plot_id]: {
+                [plot_control_key]: value
+              }
+            }
+          });
         }}
         triggerClassName="overflow-hidden text-ellipsis"
         valueClassName="overflow-hidden text-ellipsis"
@@ -255,7 +271,7 @@ function Histogram() {
   const filters = useFilters();
 
   const plot_id = usePlotID();
-  const plot_state = controller.useAppState()?.set_plot_control?.[plot_id];
+  const plot_state = useAppState()?.set_plot_control?.[plot_id];
 
   const x_axis_field_id = plot_state?.x_axis;
   const x_axis_log_mode = plot_state?.x_axis_log_mode ?? false;
@@ -332,7 +348,7 @@ function Heatmap() {
   const filters = useFilters();
 
   const plot_id = usePlotID();
-  const plot_state = controller.useAppState()?.set_plot_control?.[plot_id];
+  const plot_state = useAppState()?.set_plot_control?.[plot_id];
 
   const x_axis_field_id = plot_state?.x_axis;
   const y_axis_field_id = plot_state?.y_axis;
@@ -420,7 +436,7 @@ function Scatterplot() {
   const filters = useFilters();
 
   const plot_id = usePlotID();
-  const plot_state = controller.useAppState()?.set_plot_control?.[plot_id];
+  const plot_state = useAppState()?.set_plot_control?.[plot_id];
 
   const x_axis_field_id = plot_state?.x_axis;
   const y_axis_field_id = plot_state?.y_axis;
@@ -436,8 +452,9 @@ function Scatterplot() {
     fields: [x_axis_field_id, y_axis_field_id],
     ...filters,
     count,
-    sort: sort ? [sort] : undefined
-    // sample: 0.42,
+    sort: sort ? [sort] : undefined,
+    // TODO: Make this optional
+    sample: 0.42
     // seed: 12345
     // ...query_parameters
   };