@carto/ps-react-ui 4.3.5 → 4.3.7

package/src/widgets/actions/stack-toggle/stack-toggle.test.tsx

@@ -1,6 +1,6 @@
 import { describe, test, expect, beforeEach } from 'vitest'
 import { render, screen, fireEvent, waitFor } from '@testing-library/react'
-import { StackToggle } from './stack-toggle'
+import { StackToggle, STACK_TOGGLE_TOOL_ID } from './stack-toggle'
 import { useWidgetStore } from '../../stores/widget-store'
 import { DEFAULT_STACK_GROUP } from '../../echart/const'
 
@@ -39,14 +39,17 @@ describe('StackToggle', () => {
     expect(button).toBeTruthy()
   })
 
-  test('toggles to stacked mode and updates widget store', () => {
+  test('toggles to stacked mode and updates tool config', () => {
     render(<StackToggle id={widgetId} />)
 
     const button = screen.getByRole('button')
     fireEvent.click(button)
 
     const widget = useWidgetStore.getState().getWidget(widgetId)
-    expect((widget as { isStacked?: boolean })?.isStacked).toBe(true)
+    const tool = widget?.registeredTools?.find(
+      (t) => t.id === STACK_TOGGLE_TOOL_ID,
+    )
+    expect(tool?.config?.stacked).toBe(true)
   })
 
   test('toggles back to unstacked mode', () => {
@@ -61,7 +64,10 @@ describe('StackToggle', () => {
     fireEvent.click(button)
 
     const widget = useWidgetStore.getState().getWidget(widgetId)
-    expect((widget as { isStacked?: boolean })?.isStacked).toBe(false)
+    const tool = widget?.registeredTools?.find(
+      (t) => t.id === STACK_TOGGLE_TOOL_ID,
+    )
+    expect(tool?.config?.stacked).toBe(false)
   })
 
   test('has active state when in stacked mode', () => {
@@ -99,33 +105,48 @@ describe('StackToggle', () => {
     expect(button).toBeTruthy()
   })
 
-  test('initializes store with default values on mount', () => {
+  test('initializes tool config with default values on mount', () => {
     render(<StackToggle id={widgetId} />)
 
     const widget = useWidgetStore.getState().getWidget(widgetId)
-    expect((widget as { isStacked?: boolean })?.isStacked).toBe(false)
+    const tool = widget?.registeredTools?.find(
+      (t) => t.id === STACK_TOGGLE_TOOL_ID,
+    )
+    expect(tool?.config?.stacked).toBe(false)
   })
 
-  test('initializes store with stacked values when defaultIsStacked is true', () => {
+  test('initializes tool config with stacked values when defaultIsStacked is true', () => {
     render(<StackToggle id={widgetId} defaultIsStacked />)
 
     const widget = useWidgetStore.getState().getWidget(widgetId)
-    expect((widget as { isStacked?: boolean })?.isStacked).toBe(true)
+    const tool = widget?.registeredTools?.find(
+      (t) => t.id === STACK_TOGGLE_TOOL_ID,
+    )
+    expect(tool?.config?.stacked).toBe(true)
   })
 
-  test('updates EChart series options when toggling to stacked', () => {
-    // setupMultiSeriesWidget already ran in beforeEach
+  test('applies stack to EChart series via config pipeline when toggling to stacked', async () => {
     render(<StackToggle id={widgetId} />)
     const button = screen.getByRole('button')
     fireEvent.click(button)
 
+    // Run the config pipeline to apply the stack tool's transformation
+    await useWidgetStore.getState().executeConfigPipeline(widgetId, {
+      option: {
+        series: [
+          { name: 'Series 1', type: 'bar' },
+          { name: 'Series 2', type: 'bar' },
+        ],
+      },
+    })
+
     const widget = useWidgetStore.getState().getWidget(widgetId)
     const series = (widget as { option?: { series?: { stack?: string }[] } })
       ?.option?.series?.[0]
     expect(series?.stack).toBe(DEFAULT_STACK_GROUP)
   })
 
-  test('removes stack from EChart series when toggling to unstacked', () => {
+  test('removes stack from EChart series via config pipeline when toggling to unstacked', async () => {
     useWidgetStore.getState().setWidget(widgetId, {
       option: {
         series: [
@@ -141,13 +162,23 @@ describe('StackToggle', () => {
     // First click unstacks (since series has stack, it starts stacked)
     fireEvent.click(button)
 
+    // Run the config pipeline — tool is disabled when unstacked, so stack is removed
+    await useWidgetStore.getState().executeConfigPipeline(widgetId, {
+      option: {
+        series: [
+          { name: 'Series 1', type: 'bar' },
+          { name: 'Series 2', type: 'bar' },
+        ],
+      },
+    })
+
     const widget = useWidgetStore.getState().getWidget(widgetId)
     const series = (widget as { option?: { series?: { stack?: string }[] } })
       ?.option?.series?.[0]
     expect(series?.stack).toBeUndefined()
   })
 
-  test('updates multiple series when toggling stack', () => {
+  test('applies stack to multiple series via config pipeline', async () => {
     useWidgetStore.getState().setWidget(widgetId, {
       option: {
         series: [
@@ -162,6 +193,16 @@ describe('StackToggle', () => {
     const button = screen.getByRole('button')
     fireEvent.click(button)
 
+    await useWidgetStore.getState().executeConfigPipeline(widgetId, {
+      option: {
+        series: [
+          { name: 'Series 1', type: 'bar' },
+          { name: 'Series 2', type: 'bar' },
+          { name: 'Series 3', type: 'bar' },
+        ],
+      },
+    })
+
     const widget = useWidgetStore.getState().getWidget(widgetId)
     const seriesArray = (
       widget as { option?: { series?: { stack?: string }[] } }
@@ -173,7 +214,7 @@ describe('StackToggle', () => {
     })
   })
 
-  test('uses default stack group when re-stacking after unstacking', () => {
+  test('preserves custom stack group via config pipeline', async () => {
     const customStackGroup = 'custom-group'
     useWidgetStore.getState().setWidget(widgetId, {
       option: {
@@ -187,11 +228,20 @@ describe('StackToggle', () => {
     render(<StackToggle id={widgetId} />)
     const button = screen.getByRole('button')
 
-    // Toggle off then on - re-stacking uses default stack group
+    // Toggle off then on
     fireEvent.click(button) // unstacked
     fireEvent.click(button) // stacked again
 
-    void waitFor(() => {
+    await useWidgetStore.getState().executeConfigPipeline(widgetId, {
+      option: {
+        series: [
+          { name: 'Series 1', type: 'bar', stack: customStackGroup },
+          { name: 'Series 2', type: 'bar', stack: customStackGroup },
+        ],
+      },
+    })
+
+    await waitFor(() => {
       const widget = useWidgetStore.getState().getWidget(widgetId)
       const series = (widget as { option?: { series?: { stack?: string }[] } })
         ?.option?.series?.[0]
@@ -238,7 +288,73 @@ describe('StackToggle', () => {
     expect(container.firstChild).toBeNull()
   })
 
-  test('preserves other option properties when updating series', () => {
+  test('config tool re-applies stack when config pipeline re-runs', async () => {
+    // Start with stacked widget
+    useWidgetStore.getState().setWidget(widgetId, {
+      option: {
+        series: [
+          { name: 'Series 1', type: 'bar', stack: DEFAULT_STACK_GROUP },
+          { name: 'Series 2', type: 'bar', stack: DEFAULT_STACK_GROUP },
+        ],
+      },
+    })
+
+    render(<StackToggle id={widgetId} defaultIsStacked />)
+
+    // Simulate loader running config pipeline with base config (no stack)
+    await useWidgetStore.getState().executeConfigPipeline(widgetId, {
+      option: {
+        series: [
+          { name: 'Series 1', type: 'bar' },
+          { name: 'Series 2', type: 'bar' },
+        ],
+      },
+    })
+
+    // Stack should be re-applied by the config tool
+    await waitFor(() => {
+      const widget = useWidgetStore.getState().getWidget(widgetId)
+      const series = (widget as { option?: { series?: { stack?: string }[] } })
+        ?.option?.series
+      expect(series?.[0]?.stack).toBe(DEFAULT_STACK_GROUP)
+      expect(series?.[1]?.stack).toBe(DEFAULT_STACK_GROUP)
+    })
+  })
+
+  test('config tool does not apply stack when unstacked and pipeline re-runs', async () => {
+    // Start with unstacked widget
+    useWidgetStore.getState().setWidget(widgetId, {
+      option: {
+        series: [
+          { name: 'Series 1', type: 'bar' },
+          { name: 'Series 2', type: 'bar' },
+        ],
+      },
+    })
+
+    render(<StackToggle id={widgetId} />)
+
+    // Run config pipeline with base config
+    await useWidgetStore.getState().executeConfigPipeline(widgetId, {
+      option: {
+        series: [
+          { name: 'Series 1', type: 'bar' },
+          { name: 'Series 2', type: 'bar' },
+        ],
+      },
+    })
+
+    // Stack should NOT be applied since isStacked is false (tool disabled)
+    await waitFor(() => {
+      const widget = useWidgetStore.getState().getWidget(widgetId)
+      const series = (widget as { option?: { series?: { stack?: string }[] } })
+        ?.option?.series
+      expect(series?.[0]?.stack).toBeUndefined()
+      expect(series?.[1]?.stack).toBeUndefined()
+    })
+  })
+
+  test('preserves other option properties via config pipeline', async () => {
     useWidgetStore.getState().setWidget(widgetId, {
       option: {
         title: { text: 'My Chart' },
@@ -254,6 +370,17 @@ describe('StackToggle', () => {
     const button = screen.getByRole('button')
     fireEvent.click(button)
 
+    await useWidgetStore.getState().executeConfigPipeline(widgetId, {
+      option: {
+        title: { text: 'My Chart' },
+        xAxis: { type: 'category' },
+        series: [
+          { name: 'Series 1', type: 'bar' },
+          { name: 'Series 2', type: 'bar' },
+        ],
+      },
+    })
+
     const widget = useWidgetStore.getState().getWidget(widgetId)
     const option = (
       widget as {
@@ -267,4 +394,21 @@ describe('StackToggle', () => {
     expect(option?.title?.text).toBe('My Chart')
     expect(option?.xAxis?.type).toBe('category')
   })
+
+  test('registers config tool on mount and unregisters on unmount', () => {
+    const { unmount } = render(<StackToggle id={widgetId} />)
+
+    const widget = useWidgetStore.getState().getWidget(widgetId)
+    const tools = widget?.registeredTools ?? []
+    const stackTool = tools.find((t) => t.id === STACK_TOGGLE_TOOL_ID)
+    expect(stackTool).toBeDefined()
+    expect(stackTool?.type).toBe('config')
+
+    unmount()
+
+    const widgetAfter = useWidgetStore.getState().getWidget(widgetId)
+    const toolsAfter = widgetAfter?.registeredTools ?? []
+    const stackToolAfter = toolsAfter.find((t) => t.id === STACK_TOGGLE_TOOL_ID)
+    expect(stackToolAfter).toBeUndefined()
+  })
 })

package/src/widgets/actions/stack-toggle/stack-toggle.tsx

@@ -1,20 +1,23 @@
 import { IconButton } from '@mui/material'
 import { useCallback, useEffect, useMemo } from 'react'
 import { useWidgetStore } from '../../stores/widget-store'
-import type { StackToggleProps, StackToggleState } from './types'
+import type { StackToggleProps } from './types'
 import { actionButtonStyles } from '../shared/styles'
 import { Tooltip } from '../../../components'
 import { GroupedBarChartIcon } from './grouped-bar-chart-icon'
 import { getEChartStackConfig } from '../../echart/utils'
 import { DEFAULT_STACK_GROUP } from '../../echart/const'
 import type { EchartWidgetState } from '../../echart/types'
+import type { EchartOptionsProps } from '../../echart/types'
 import { useShallow } from 'zustand/shallow'
 
+export const STACK_TOGGLE_TOOL_ID = 'stack-toggle'
+
 /**
  * Widget action to toggle stacking behavior in ECharts bar and histogram widgets.
  *
- * Stores the stack state in the widget store and updates the ECharts option
- * using getEChartStackConfig to apply stacking to all series.
+ * Registers as a config pipeline tool so that stack configuration is automatically
+ * re-applied when the base config is updated (e.g., by WidgetLoader).
  *
  * @example
  * ```tsx
@@ -31,94 +34,92 @@ export function StackToggle({
   Icon,
   IconButtonProps,
 }: StackToggleProps) {
-  const setWidget = useWidgetStore((state) => state.setWidget)
-  const storeIsStacked = useWidgetStore(
-    useShallow((state) => state.getWidget<StackToggleState>(id)?.isStacked),
-  )
-
   const getWidget = useWidgetStore((state) => state.getWidget)
+  const registerTool = useWidgetStore((state) => state.registerTool)
+  const unregisterTool = useWidgetStore((state) => state.unregisterTool)
+  const setToolEnabled = useWidgetStore((state) => state.setToolEnabled)
+  const updateToolConfig = useWidgetStore((state) => state.updateToolConfig)
+
+  const stackTool = useWidgetStore(
+    useShallow((state) => {
+      const tools = state.getWidget(id)?.registeredTools ?? []
+      return tools.find((tool) => tool.id === STACK_TOGGLE_TOOL_ID)
+    }),
+  )
 
-  /**
-   * Checks if there are multiple series in the chart
-   */
-  const hasMultiSeries = useMemo(() => {
-    const option = getWidget<EchartWidgetState>(id)?.option
-    if (!option) return false
-
-    const series = Array.isArray(option.series)
-      ? option.series
-      : [option.series]
-
-    return series.length > 1
-  }, [getWidget, id])
-
-  /**
-   * Checks if any series in the option has a stack property defined
-   */
-  const hasStackInSeries = useMemo(() => {
-    const option = getWidget<EchartWidgetState>(id)?.option
-    if (!option) return false
+  const option = useWidgetStore(
+    useShallow((state) => state.getWidget<EchartWidgetState>(id)?.option),
+  )
 
+  const { hasMultiSeries, hasStackInSeries } = useMemo(() => {
+    if (!option) return { hasMultiSeries: false, hasStackInSeries: false }
     const series = Array.isArray(option.series)
       ? option.series
       : [option.series]
-
-    return series.some((s) => (s as { stack?: string })?.stack)
-  }, [getWidget, id])
+    return {
+      hasMultiSeries: series.length > 1,
+      hasStackInSeries: series.some((s) => (s as { stack?: string })?.stack),
+    }
+  }, [option])
 
   // If series already has stack defined, default to stacked=true
   const effectiveDefaultIsStacked = hasStackInSeries || defaultIsStacked
-  const isStacked = storeIsStacked ?? effectiveDefaultIsStacked
-
-  /**
-   * Updates the ECharts option with the stack configuration
-   * Preserves existing stack group names from series, falling back to DEFAULT_STACK_GROUP
-   */
-  const updateOptions = useCallback(
-    (stacked: boolean) => {
-      const option = getWidget<EchartWidgetState>(id)?.option
-
-      if (!option) return
-
-      const series = Array.isArray(option.series)
-        ? option.series
-        : [option.series]
+  const isStacked =
+    (stackTool?.config?.stacked as boolean | undefined) ??
+    effectiveDefaultIsStacked
 
-      const updatedSeries = series.map((s) => {
-        // Extract existing stack group from series, fallback to default
-        const existingStack = (s as { stack?: string })?.stack
-        const stackGroup =
-          typeof existingStack === 'string'
-            ? existingStack
-            : DEFAULT_STACK_GROUP
-
-        return {
-          ...s,
-          ...getEChartStackConfig(stacked, stackGroup),
-        }
-      })
-
-      setWidget(id, {
-        option: {
-          ...option,
-          series: updatedSeries,
-        },
-      })
-    },
-    [getWidget, id, setWidget],
-  )
-
-  // Initialize store with default value only if not already configured
+  // Register config tool on mount
   useEffect(() => {
-    setWidget(id, { isStacked: effectiveDefaultIsStacked })
-  }, [effectiveDefaultIsStacked, id, setWidget])
+    const existingTool = getWidget(id)?.registeredTools?.find(
+      (tool) => tool.id === STACK_TOGGLE_TOOL_ID,
+    )
+
+    const initialStacked =
+      (existingTool?.config?.stacked as boolean | undefined) ??
+      effectiveDefaultIsStacked
+
+    registerTool(id, {
+      id: STACK_TOGGLE_TOOL_ID,
+      type: 'config',
+      order: 10,
+      enabled: initialStacked && hasMultiSeries,
+      fn: (currentConfig, toolConfig) => {
+        const config = currentConfig as Record<string, unknown>
+        const option = config.option as EchartOptionsProps | undefined
+        if (!option) return currentConfig
+
+        const stacked = (toolConfig?.stacked as boolean) ?? false
+        const series = Array.isArray(option.series)
+          ? option.series
+          : [option.series]
+        const updatedSeries = series.map((s) => {
+          const existingStack = (s as { stack?: string })?.stack
+          const stackGroup =
+            typeof existingStack === 'string'
+              ? existingStack
+              : DEFAULT_STACK_GROUP
+          return { ...s, ...getEChartStackConfig(stacked, stackGroup) }
+        })
+
+        return { ...config, option: { ...option, series: updatedSeries } }
+      },
+      config: { stacked: initialStacked },
+    })
+    return () => unregisterTool(id, STACK_TOGGLE_TOOL_ID)
+  }, [
+    id,
+    registerTool,
+    unregisterTool,
+    effectiveDefaultIsStacked,
+    hasMultiSeries,
+    getWidget,
+  ])
 
   const handleToggle = useCallback(() => {
-    const newIsStacked = !isStacked
-
-    setWidget(id, { isStacked: newIsStacked })
-    updateOptions(newIsStacked)
-  }, [isStacked, id, setWidget, updateOptions])
+    const newStacked = !isStacked
+    setToolEnabled(id, STACK_TOGGLE_TOOL_ID, newStacked && hasMultiSeries)
+    updateToolConfig(id, STACK_TOGGLE_TOOL_ID, { stacked: newStacked })
+  }, [isStacked, hasMultiSeries, id, setToolEnabled, updateToolConfig])
 
   const tooltipLabel = isStacked
     ? (labels?.unstacked ?? 'Disable stacking')

package/src/widgets/actions/stack-toggle/types.ts

@@ -1,7 +1,5 @@
 import type { IconButtonProps } from '@mui/material'
 import type { ReactNode } from 'react'
-import type { BaseWidgetState } from '../../stores/types'
-
 export interface StackToggleProps {
   /** Widget ID to update stack configuration in the widget store */
   id: string
@@ -21,9 +19,3 @@ export interface StackToggleProps {
   /** Custom icon to display */
   Icon?: ReactNode
 }
-
-export type StackToggleState<T = unknown> = BaseWidgetState<
-  T & {
-    isStacked?: boolean
-  }
->