UI configurator enhancements

app/components/chart-panel.tsx

@@ -6,7 +6,6 @@ import Flex from "@/components/flex";
 import {
   ChartType,
   ConfiguratorStateConfiguringChart,
-  ConfiguratorStateDescribingChart,
   ConfiguratorStatePublishing,
 } from "@/configurator";
 import { useConfiguratorState } from "@/src";
@@ -18,9 +17,7 @@ type ChartPanelProps = { children: ReactNode } & BoxProps;
 export const ChartPanelConfigurator = (props: ChartPanelProps) => {
   // This type of chart panel can only appear for below steps.
   const [state] = useConfiguratorState() as unknown as [
-    | ConfiguratorStateConfiguringChart
-    | ConfiguratorStateDescribingChart
-    | ConfiguratorStatePublishing
+    ConfiguratorStateConfiguringChart | ConfiguratorStatePublishing
   ];
 
   return (

app/components/chart-preview.tsx

@@ -109,7 +109,6 @@ export const ChartPreviewInner = ({
           </Box>
         )}
         {(state.state === "CONFIGURING_CHART" ||
-          state.state === "DESCRIBING_CHART" ||
           state.state === "PUBLISHING") && (
           <>
             <>

app/components/chart-selection-tabs.tsx

@@ -13,7 +13,6 @@ import React, {
 import {
   ChartType,
   ConfiguratorStateConfiguringChart,
-  ConfiguratorStateDescribingChart,
   ConfiguratorStatePublishing,
   useConfiguratorState,
 } from "@/configurator";
@@ -97,9 +96,7 @@ const useStyles = makeStyles<Theme, { editable: boolean }>((theme) => ({
 
 const TabsEditable = ({ chartType }: { chartType: ChartType }) => {
   const [configuratorState] = useConfiguratorState() as unknown as [
-    | ConfiguratorStateConfiguringChart
-    | ConfiguratorStateDescribingChart
-    | ConfiguratorStatePublishing
+    ConfiguratorStateConfiguringChart | ConfiguratorStatePublishing
   ];
   const [tabsState, setTabsState] = useTabsState();
   const [popoverAnchorEl, setPopoverAnchorEl] = useState<HTMLElement | null>(

app/configurator/components/chart-configurator.tsx

@@ -27,7 +27,6 @@ import { chartConfigOptionsUISpec } from "@/charts/chart-config-ui-options";
 import {
   ChartConfig,
   ConfiguratorStateConfiguringChart,
-  ConfiguratorStateDescribingChart,
   ConfiguratorStatePublishing,
   isMapConfig,
   OptionGroup,
@@ -189,10 +188,7 @@ const orderedIsEqual = (
 const useEnsurePossibleFilters = ({
   state,
 }: {
-  state:
-    | ConfiguratorStateConfiguringChart
-    | ConfiguratorStateDescribingChart
-    | ConfiguratorStatePublishing;
+  state: ConfiguratorStateConfiguringChart | ConfiguratorStatePublishing;
 }) => {
   const [, dispatch] = useConfiguratorState();
   const [fetching, setFetching] = useState(false);

app/configurator/components/chart-type-selector.tsx

@@ -18,7 +18,6 @@ import { useLocale } from "@/locales/use-locale";
 import {
   ChartType,
   ConfiguratorStateConfiguringChart,
-  ConfiguratorStateDescribingChart,
   ConfiguratorStatePublishing,
 } from "../config-types";
 
@@ -104,10 +103,7 @@ export const ChartTypeSelector = ({
   sx,
   ...props
 }: {
-  state:
-    | ConfiguratorStateConfiguringChart
-    | ConfiguratorStateDescribingChart
-    | ConfiguratorStatePublishing;
+  state: ConfiguratorStateConfiguringChart | ConfiguratorStatePublishing;
   showHelp?: boolean;
   sx?: BoxProps["sx"];
 } & BoxProps) => {

app/configurator/components/empty-right-panel.tsx

@@ -2,15 +2,12 @@ import { Trans } from "@lingui/macro";
 import { Typography } from "@mui/material";
 import { ReactNode } from "react";
 
-import {
-  ConfiguratorStateConfiguringChart,
-  ConfiguratorStateDescribingChart,
-} from "@/configurator";
+import { ConfiguratorStateConfiguringChart } from "@/configurator";
 
 export const EmptyRightPanel = ({
   state,
 }: {
-  state: ConfiguratorStateConfiguringChart | ConfiguratorStateDescribingChart;
+  state: ConfiguratorStateConfiguringChart;
 }) => (
   <Typography component="div" variant="body2" sx={{ m: 4 }}>
     {getRightPanelHint(state.state)}
@@ -26,12 +23,6 @@ const getRightPanelHint = (state: string): ReactNode => {
           its options.
         </Trans>
       );
-    case "DESCRIBING_CHART":
-      return (
-        <Trans id="controls.hint.describing.chart">
-          Select an annotation field in the left panel.
-        </Trans>
-      );
     default:
       return "blabla";
   }

app/configurator/config-form.tsx

@@ -376,7 +376,7 @@ export const useChartType = (): {
   });
 
   const value =
-    state.state === "CONFIGURING_CHART" || state.state === "DESCRIBING_CHART"
+    state.state === "CONFIGURING_CHART"
       ? get(state, "chartConfig.chartType")
       : "";
 

app/configurator/config-types.ts

@@ -832,12 +832,6 @@ const ConfiguratorStateConfiguringChart = t.intersection([
   }),
   Config,
 ]);
-const ConfiguratorStateDescribingChart = t.intersection([
-  t.type({
-    state: t.literal("DESCRIBING_CHART"),
-  }),
-  Config,
-]);
 const ConfiguratorStatePublishing = t.intersection([
   t.type({
     state: t.literal("PUBLISHING"),
@@ -851,17 +845,13 @@ export type ConfiguratorStateSelectingDataSet = t.TypeOf<
 export type ConfiguratorStateConfiguringChart = t.TypeOf<
   typeof ConfiguratorStateConfiguringChart
 >;
-export type ConfiguratorStateDescribingChart = t.TypeOf<
-  typeof ConfiguratorStateDescribingChart
->;
 export type ConfiguratorStatePublishing = t.TypeOf<
   typeof ConfiguratorStatePublishing
 >;
 const ConfiguratorState = t.union([
   ConfiguratorStateInitial,
   ConfiguratorStateSelectingDataSet,
   ConfiguratorStateConfiguringChart,
-  ConfiguratorStateDescribingChart,
   ConfiguratorStatePublishing,
 ]);
 

app/configurator/configurator-state.tsx

@@ -32,7 +32,6 @@ import { DEFAULT_FIXED_COLOR_FIELD } from "@/charts/map/constants";
 import { mapValueIrisToColor } from "@/configurator/components/ui-helpers";
 import {
   ConfiguratorStateConfiguringChart,
-  ConfiguratorStateDescribingChart,
   DataSource,
   GenericField,
   ImputationType,
@@ -295,7 +294,7 @@ const emptyState: ConfiguratorStateSelectingDataSet = {
 };
 
 const getCachedCubeMetadataWithComponentValues = (
-  draft: ConfiguratorStateConfiguringChart | ConfiguratorStateDescribingChart,
+  draft: ConfiguratorStateConfiguringChart,
   locale: Locale
 ) => {
   const query = client.readQuery<
@@ -576,17 +575,12 @@ const transitionStepNext = (
       }
       break;
     case "CONFIGURING_CHART":
-      return {
-        ...draft,
-        activeField: undefined,
-        state: "DESCRIBING_CHART",
-      };
-    case "DESCRIBING_CHART":
       return {
         ...draft,
         activeField: undefined,
         state: "PUBLISHING",
       };
+
     case "INITIAL":
     case "PUBLISHING":
       break;
@@ -612,8 +606,6 @@ export const canTransitionToNextStep = (
     case "SELECTING_DATASET":
       return state.dataSet !== undefined;
     case "CONFIGURING_CHART":
-    case "DESCRIBING_CHART":
-      // These are all interchangeable in terms of validity
       return true;
   }
 
@@ -628,10 +620,8 @@ const getPreviousState = (
       return state;
     case "CONFIGURING_CHART":
       return "SELECTING_DATASET";
-    case "DESCRIBING_CHART":
-      return "CONFIGURING_CHART";
     case "PUBLISHING":
-      return "DESCRIBING_CHART";
+      return "CONFIGURING_CHART";
     default:
       return "SELECTING_DATASET";
   }
@@ -662,12 +652,6 @@ const transitionStepPrevious = (
         activeField: undefined,
         state: stepTo,
       };
-    case "DESCRIBING_CHART":
-      return {
-        ...draft,
-        activeField: undefined,
-        state: stepTo,
-      };
     default:
       return draft;
   }
@@ -1066,10 +1050,7 @@ export const handleInteractiveFilterChanged = (
     { type: "INTERACTIVE_FILTER_CHANGED" }
   >
 ) => {
-  if (
-    draft.state === "CONFIGURING_CHART" ||
-    draft.state === "DESCRIBING_CHART"
-  ) {
+  if (draft.state === "CONFIGURING_CHART") {
     setWith(
       draft,
       "chartConfig.interactiveFiltersConfig",
@@ -1084,10 +1065,7 @@ export const handleInteractiveFilterChanged = (
 export const handleInteractiveFilterTimeSliderReset = (
   draft: ConfiguratorState
 ) => {
-  if (
-    draft.state === "CONFIGURING_CHART" ||
-    draft.state === "DESCRIBING_CHART"
-  ) {
+  if (draft.state === "CONFIGURING_CHART") {
     if (draft.chartConfig.interactiveFiltersConfig) {
       draft.chartConfig.interactiveFiltersConfig.timeSlider.componentIri = "";
     }
@@ -1115,10 +1093,7 @@ const reducer: Reducer<ConfiguratorState, ConfiguratorStateAction> = (
       draft.dataSource = action.value;
       return draft;
     case "CHART_TYPE_CHANGED":
-      if (
-        draft.state === "CONFIGURING_CHART" ||
-        draft.state === "DESCRIBING_CHART"
-      ) {
+      if (draft.state === "CONFIGURING_CHART") {
         const { locale, chartType } = action.value;
         const metadata = getCachedCubeMetadataWithComponentValues(
           draft,
@@ -1145,11 +1120,9 @@ const reducer: Reducer<ConfiguratorState, ConfiguratorStateAction> = (
       return draft;
 
     case "ACTIVE_FIELD_CHANGED":
-      if (
-        draft.state === "CONFIGURING_CHART" ||
-        draft.state === "DESCRIBING_CHART"
-      )
+      if (draft.state === "CONFIGURING_CHART") {
         draft.activeField = action.value;
+      }
       return draft;
 
     case "CHART_FIELD_CHANGED":
@@ -1568,7 +1541,6 @@ const ConfiguratorStateProviderInternal = ({
     try {
       switch (state.state) {
         case "CONFIGURING_CHART":
-        case "DESCRIBING_CHART":
           if (chartId === "new") {
             const newChartId = createChartId();
             window.localStorage.setItem(
@@ -1724,9 +1696,3 @@ export const isConfiguring = (
 ): s is ConfiguratorStateConfiguringChart => {
   return s.state === "CONFIGURING_CHART";
 };
-
-export const isDescribing = (
-  s: ConfiguratorState
-): s is ConfiguratorStateDescribingChart => {
-  return s.state === "DESCRIBING_CHART";
-};

app/configurator/interactive-filters/editor-time-brush.tsx

@@ -6,8 +6,10 @@ import React, { useCallback, useEffect, useRef } from "react";
 import Flex from "@/components/flex";
 import { Label } from "@/components/form";
 import { parseDate } from "@/configurator/components/ui-helpers";
-import { ConfiguratorStateDescribingChart } from "@/configurator/config-types";
-import { useConfiguratorState } from "@/configurator/configurator-state";
+import {
+  isConfiguring,
+  useConfiguratorState,
+} from "@/configurator/configurator-state";
 import { updateInteractiveTimeRangeFilter } from "@/configurator/interactive-filters/interactive-filters-config-state";
 import { useFormatFullDateAuto } from "@/formatters";
 import { useTheme } from "@/themes";
@@ -42,8 +44,8 @@ export const EditorBrush = ({
   // FIXME: make component responsive (currently triggers infinite loop)
   const brushWidth = 267; //width - MARGINS.left - MARGINS.right;
 
-  const [state, dispatch] = useConfiguratorState();
-  const { chartConfig } = state as ConfiguratorStateDescribingChart;
+  const [state, dispatch] = useConfiguratorState(isConfiguring);
+  const { chartConfig } = state;
 
   const timeScale = scaleTime().domain(timeExtent).range([0, brushWidth]);