WIP 2 (chartConfig getter / setter)

visualize-admin · Sep 4, 2023 · 6e5ef95 · 6e5ef95
1 parent 3bd7977
commit 6e5ef95
Show file tree

Hide file tree

Showing 31 changed files with 227 additions and 239 deletions.
diff --git a/app/charts/column/columns-stacked-state.tsx b/app/charts/column/columns-stacked-state.tsx
@@ -85,7 +85,6 @@ const useColumnsStackedState = (
   data: ColumnsStackedStateData
 ): StackedColumnsState => {
   const { aspectRatio, chartConfig } = chartProps;
-  console.log(chartConfig);
   const {
     xDimension,
     getX,

diff --git a/app/charts/line/lines-state.tsx b/app/charts/line/lines-state.tsx
@@ -70,7 +70,6 @@ const useLinesState = (
   data: ChartStateData
 ): LinesState => {
   const { chartConfig, aspectRatio } = chartProps;
-  console.log(chartConfig);
   const {
     xDimension,
     getX,

diff --git a/app/charts/shared/legend-color.tsx b/app/charts/shared/legend-color.tsx
@@ -14,7 +14,6 @@ import {
   DataSource,
   GenericSegmentField,
   MapConfig,
-  getChartConfig,
   isSegmentInConfig,
   useReadOnlyConfiguratorState,
 } from "@/configurator";
@@ -149,15 +148,16 @@ const useLegendGroups = ({
   }
 
   const locale = useLocale();
-  const chartConfig = getChartConfig(configState);
 
   // FIXME: should color field also be included here?
   const segmentField = (
-    isSegmentInConfig(chartConfig) ? chartConfig.fields.segment : null
+    isSegmentInConfig(configState.chartConfig)
+      ? configState.chartConfig.fields.segment
+      : null
   ) as GenericSegmentField | null | undefined;
 
   const segmentFilters = segmentField?.componentIri
-    ? chartConfig.filters[segmentField.componentIri]
+    ? configState.chartConfig.filters[segmentField.componentIri]
     : null;
   const segmentValues =
     segmentFilters?.type === "multi" ? segmentFilters.values : emptyObj;

diff --git a/app/components/chart-panel.tsx b/app/components/chart-panel.tsx
@@ -7,7 +7,6 @@ import {
   ChartType,
   ConfiguratorStateConfiguringChart,
   ConfiguratorStatePublishing,
-  getChartConfig,
 } from "@/configurator";
 import { useConfiguratorState } from "@/src";
 
@@ -20,11 +19,10 @@ export const ChartPanelConfigurator = (props: ChartPanelProps) => {
   const [state] = useConfiguratorState() as unknown as [
     ConfiguratorStateConfiguringChart | ConfiguratorStatePublishing
   ];
-  const chartConfig = getChartConfig(state);
 
   return (
     <>
-      <ChartSelectionTabs editable chartType={chartConfig.chartType} />
+      <ChartSelectionTabs editable chartType={state.chartConfig.chartType} />
       <ChartPanelInner showTabs {...props} />
     </>
   );

diff --git a/app/components/chart-preview.tsx b/app/components/chart-preview.tsx
@@ -16,11 +16,7 @@ import DebugPanel from "@/components/debug-panel";
 import Flex from "@/components/flex";
 import { HintYellow } from "@/components/hint";
 import { MetadataPanel } from "@/components/metadata-panel";
-import {
-  DataSource,
-  getChartConfig,
-  useConfiguratorState,
-} from "@/configurator";
+import { DataSource, useConfiguratorState } from "@/configurator";
 import {
   useComponentsQuery,
   useDataCubeMetadataQuery,
@@ -64,8 +60,6 @@ const useStyles = makeStyles<Theme>({
 export const ChartPreviewInner = (props: ChartPreviewProps) => {
   const { dataSetIri, dataSource } = props;
   const [state, dispatch] = useConfiguratorState();
-  const chartConfig = getChartConfig(state);
-  console.log(state.activeChartKey, chartConfig);
   const locale = useLocale();
   const classes = useStyles();
   const [{ data: metadata }] = useDataCubeMetadataQuery({
@@ -205,22 +199,22 @@ export const ChartPreviewInner = (props: ChartPreviewProps) => {
                   }}
                   dataSetIri={dataSetIri}
                   dataSource={dataSource}
-                  chartConfig={chartConfig}
+                  chartConfig={state.chartConfig}
                 />
               ) : (
                 <ChartWithFilters
                   dataSet={dataSetIri}
                   dataSource={dataSource}
-                  chartConfig={chartConfig}
+                  chartConfig={state.chartConfig}
                   published={false}
                 />
               )}
             </Box>
-            {chartConfig && (
+            {state.chartConfig && (
               <ChartFootnotes
                 dataSetIri={dataSetIri}
                 dataSource={dataSource}
-                chartConfig={chartConfig}
+                chartConfig={state.chartConfig}
                 onToggleTableView={handleToggleTableView}
               />
             )}

diff --git a/app/components/chart-published.tsx b/app/components/chart-published.tsx
@@ -156,6 +156,10 @@ export const ChartPublishedInner = (props: ChartPublishInnerProps) => {
       dataSet,
       dataSource,
       chartConfigs: [chartConfig],
+      // FIXME
+      get chartConfig() {
+        return chartConfig;
+      },
     } as ConfiguratorStatePublishing;
   }, [dataSet, dataSource, chartConfig]);
   const handleToggleTableView = useEvent(() => setIsTablePreview((c) => !c));

diff --git a/app/components/chart-selection-tabs.tsx b/app/components/chart-selection-tabs.tsx
@@ -14,7 +14,6 @@ import {
   ChartType,
   ConfiguratorStateConfiguringChart,
   ConfiguratorStatePublishing,
-  getChartConfig,
   isConfiguring,
   useConfiguratorState,
 } from "@/configurator";
@@ -71,11 +70,7 @@ export const ChartSelectionTabs = ({
 }) => {
   return (
     <TabsStateProvider>
-      {editable ? (
-        <TabsEditable chartType={chartType} />
-      ) : (
-        <TabsFixed chartType={chartType} />
-      )}
+      {editable ? <TabsEditable /> : <TabsFixed chartType={chartType} />}
     </TabsStateProvider>
   );
 };
@@ -101,9 +96,8 @@ const useStyles = makeStyles<Theme, { editable: boolean }>((theme) => ({
   },
 }));
 
-const TabsEditable = ({ chartType }: { chartType: ChartType }) => {
+const TabsEditable = () => {
   const [state, dispatch] = useConfiguratorState(isConfiguring);
-  const chartConfig = getChartConfig(state);
   const [tabsState, setTabsState] = useTabsState();
   const [popoverAnchorEl, setPopoverAnchorEl] = useState<HTMLElement | null>(
     null
@@ -119,7 +113,7 @@ const TabsEditable = ({ chartType }: { chartType: ChartType }) => {
   useEffect(() => {
     handleClose();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [chartConfig.chartType]);
+  }, [state.chartConfig.chartType]);
 
   return (
     <>
@@ -147,7 +141,7 @@ const TabsEditable = ({ chartType }: { chartType: ChartType }) => {
             type: "CHART_CONFIG_ADD",
             value: {
               chartConfig: {
-                ...chartConfig,
+                ...state.chartConfig,
                 key: createChartId(),
               },
             },

diff --git a/app/config-types.ts b/app/config-types.ts
@@ -919,6 +919,7 @@ const Config = t.type(
     dataSource: DataSource,
     meta: Meta,
     chartConfigs: t.array(ChartConfig),
+    chartConfig: ChartConfig,
     activeChartKey: t.union([t.string, t.undefined]),
   },
   "Config"
@@ -950,6 +951,7 @@ const ConfiguratorStateSelectingDataSet = t.type({
   dataSource: DataSource,
   meta: Meta,
   chartConfigs: t.undefined,
+  chartConfig: t.undefined,
   activeChartKey: t.undefined,
 });
 export type ConfiguratorStateSelectingDataSet = t.TypeOf<
@@ -998,16 +1000,3 @@ export const decodeConfiguratorState = (
     )
   );
 };
-
-export const getChartConfig = (state: ConfiguratorState, chartKey?: string) => {
-  if (state.state === "INITIAL" || state.state === "SELECTING_DATASET") {
-    throw new Error("No chart config available");
-  }
-
-  return (
-    state.chartConfigs.find(
-      (d) => d.key === (chartKey ?? state.activeChartKey)
-      // FIXME: color legend currently is scoped to the chart config, it shouldn't
-    ) ?? (state.chartConfigs[0] as ChartConfig)
-  );
-};
diff --git a/app/configurator/components/chart-annotations-selector.tsx b/app/configurator/components/chart-annotations-selector.tsx
@@ -11,17 +11,14 @@ import { getFieldLabel } from "@/configurator/components/field-i18n";
 import { locales } from "@/locales/locales";
 import { useLocale } from "@/locales/use-locale";
 
-import {
-  ConfiguratorStateConfiguringChart,
-  getChartConfig,
-} from "../../config-types";
+import { ConfiguratorStateConfiguringChart } from "../../config-types";
 
 const TitleAndDescriptionOptions = ({
   state,
 }: {
   state: ConfiguratorStateConfiguringChart;
 }) => {
-  const chartConfig = getChartConfig(state);
+  const { chartConfig } = state;
   const { activeField, meta } = chartConfig;
 
   const locale = useLocale();
@@ -60,7 +57,7 @@ export const ChartAnnotationsSelector = ({
 }: {
   state: ConfiguratorStateConfiguringChart;
 }) => {
-  const chartConfig = getChartConfig(state);
+  const { chartConfig } = state;
   const { activeField } = chartConfig;
   const panelRef = useRef<HTMLDivElement>(null);
 

diff --git a/app/configurator/components/chart-annotator.tsx b/app/configurator/components/chart-annotator.tsx
@@ -14,7 +14,8 @@ import { isConfiguring } from "../configurator-state";
 
 export const TitleAndDescriptionConfigurator = () => {
   const [state] = useConfiguratorState(isConfiguring);
-  const { title, description } = state.meta;
+  const { title, description } = state.chartConfig.meta;
+  console.log(state);
   const locale = useLocale();
   const disabled = React.useMemo(() => {
     return !(title[locale] !== "" && description[locale] !== "");

diff --git a/app/configurator/components/chart-configurator.tsx b/app/configurator/components/chart-configurator.tsx
@@ -38,7 +38,6 @@ import {
   ConfiguratorStateConfiguringChart,
   ConfiguratorStatePublishing,
   DataSource,
-  getChartConfig,
   isMapConfig,
 } from "@/configurator";
 import { TitleAndDescriptionConfigurator } from "@/configurator/components/chart-annotator";
@@ -167,7 +166,7 @@ const useEnsurePossibleFilters = ({
   state: ConfiguratorStateConfiguringChart | ConfiguratorStatePublishing;
 }) => {
   const [, dispatch] = useConfiguratorState();
-  const chartConfig = getChartConfig(state);
+  const { chartConfig } = state;
   const [fetching, setFetching] = useState(false);
   const [error, setError] = useState<Error>();
   const lastFilters = useRef<ChartConfig["filters"]>();
@@ -252,10 +251,9 @@ const useFilterReorder = ({
   onAddDimensionFilter?: () => void;
 }) => {
   const [state, dispatch] = useConfiguratorState(isConfiguring);
-  const chartConfig = getChartConfig(state);
-  const locale = useLocale();
-
+  const { chartConfig } = state;
   const { filters } = chartConfig;
+  const locale = useLocale();
   const { unmappedFilters, mappedFiltersIris } = useMemo(() => {
     return getFiltersByMappingStatus(chartConfig);
   }, [chartConfig]);
@@ -514,7 +512,7 @@ const InteractiveDataFilterCheckbox = ({
 const FiltersBadge = ({ sx }: { sx?: BadgeProps["sx"] }) => {
   const ctx = useControlSectionContext();
   const [state] = useConfiguratorState(isConfiguring);
-  const chartConfig = getChartConfig(state);
+  const { chartConfig } = state;
 
   return (
     <Badge
@@ -534,7 +532,7 @@ export const ChartConfigurator = ({
 }: {
   state: ConfiguratorStateConfiguringChart;
 }) => {
-  const chartConfig = getChartConfig(state);
+  const { chartConfig } = state;
   const {
     isOpen: isFilterMenuOpen,
     open: openFilterMenu,

diff --git a/app/configurator/components/chart-controls/color-palette.tsx b/app/configurator/components/chart-controls/color-palette.tsx
@@ -17,7 +17,6 @@ import Flex from "@/components/flex";
 import { Label } from "@/components/form";
 import {
   ConfiguratorStateConfiguringChart,
-  getChartConfig,
   isConfiguring,
   useConfiguratorState,
 } from "@/configurator";
@@ -61,7 +60,6 @@ export const ColorPalette = ({
   component,
 }: Props) => {
   const [state, dispatch] = useConfiguratorState(isConfiguring);
-  const chartConfig = getChartConfig(state);
   const classes = useStyles();
   const hasColors = hasDimensionColors(component);
   const defaultPalette =
@@ -78,8 +76,8 @@ export const ColorPalette = ({
     : categoricalPalettes;
 
   const currentPaletteName = get(
-    chartConfig,
-    `fields["${chartConfig.activeField}"].${
+    state.chartConfig,
+    `fields["${state.chartConfig.activeField}"].${
       colorConfigPath ? `${colorConfigPath}.` : ""
     }palette`
   );
@@ -209,16 +207,14 @@ const ColorPaletteReset = ({
   state: ConfiguratorStateConfiguringChart;
 }) => {
   const [, dispatch] = useConfiguratorState();
-  const chartConfig = getChartConfig(state);
-
   const palette = get(
-    chartConfig,
+    state.chartConfig,
     `fields["${field}"].${colorConfigPath ? `${colorConfigPath}.` : ""}palette`,
     DEFAULT_CATEGORICAL_PALETTE_NAME
   ) as string;
 
   const colorMapping = get(
-    chartConfig,
+    state.chartConfig,
     `fields["${field}"].${
       colorConfigPath ? `${colorConfigPath}.` : ""
     }colorMapping`

diff --git a/app/configurator/components/chart-controls/color-ramp.tsx b/app/configurator/components/chart-controls/color-ramp.tsx
@@ -14,7 +14,6 @@ import { Label } from "@/components/form";
 import {
   DivergingPaletteType,
   SequentialPaletteType,
-  getChartConfig,
   isConfiguring,
   useConfiguratorState,
 } from "@/configurator";
@@ -78,8 +77,6 @@ export const ColorRampField = ({
 }: ColorRampFieldProps) => {
   const locale = useLocale();
   const [state, dispatch] = useConfiguratorState(isConfiguring);
-  const chartConfig = getChartConfig(state);
-
   const { palettes, defaultPalette } = useMemo(() => {
     const palettes = [...sequentialPalettes, ...divergingPalettes];
     const defaultPalette = sequentialPalettes.find(
@@ -89,9 +86,10 @@ export const ColorRampField = ({
     return { palettes, defaultPalette };
   }, []);
 
-  const currentPaletteName = get(chartConfig, `fields.${field}.${path}`) as
-    | DivergingPaletteType
-    | SequentialPaletteType;
+  const currentPaletteName = get(
+    state.chartConfig,
+    `fields.${field}.${path}`
+  ) as DivergingPaletteType | SequentialPaletteType;
 
   const currentPalette =
     palettes.find((d) => d.value === currentPaletteName) || defaultPalette;

diff --git a/app/configurator/components/chart-options-selector.tsx b/app/configurator/components/chart-options-selector.tsx
@@ -23,7 +23,6 @@ import {
   ColorScaleType,
   ComponentType,
   ConfiguratorStateConfiguringChart,
-  getChartConfig,
   ImputationType,
   imputationTypes,
   isAnimationInConfig,
@@ -81,7 +80,7 @@ export const ChartOptionsSelector = ({
 }: {
   state: ConfiguratorStateConfiguringChart;
 }) => {
-  const chartConfig = getChartConfig(state);
+  const { chartConfig } = state;
   const { dataSet, dataSource } = state;
   const { activeField } = chartConfig;
   const locale = useLocale();