@carto/ps-react-ui 4.3.6 → 4.3.8

package/src/widgets/_shared/chart-config/option-builders.test.ts

@@ -0,0 +1,40 @@
+import { describe, it, expect } from 'vitest'
+import { niceNum } from './option-builders'
+
+describe('niceNum', () => {
+  it('should return 0 for 0', () => {
+    expect(niceNum(0)).toBe(0)
+  })
+
+  it('should return 0 for negative values', () => {
+    expect(niceNum(-5)).toBe(0)
+  })
+
+  it('should round 547 to 600', () => {
+    expect(niceNum(547)).toBe(600)
+  })
+
+  it('should keep 200 as 200', () => {
+    expect(niceNum(200)).toBe(200)
+  })
+
+  it('should round 1200 to 2000', () => {
+    expect(niceNum(1200)).toBe(2000)
+  })
+
+  it('should round 18 to 20', () => {
+    expect(niceNum(18)).toBe(20)
+  })
+
+  it('should keep 5 as 5', () => {
+    expect(niceNum(5)).toBe(5)
+  })
+
+  it('should round 350 to 400', () => {
+    expect(niceNum(350)).toBe(400)
+  })
+
+  it('should keep 1 as 1', () => {
+    expect(niceNum(1)).toBe(1)
+  })
+})

package/src/widgets/_shared/chart-config/option-builders.ts

@@ -9,6 +9,18 @@ import type {
  * Shared EChart configuration builders for chart widgets
  */
 
+/**
+ * Rounds a value up to the nearest "nice" number.
+ * A nice number is a multiple of 10^floor(log10(value)).
+ *
+ * Examples: 547 → 600, 200 → 200, 1200 → 2000, 18 → 20, 5 → 5
+ */
+export function niceNum(value: number): number {
+  if (value <= 0) return 0
+  const base = Math.pow(10, Math.floor(Math.log10(value)))
+  return Math.ceil(value / base) * base
+}
+
 /**
  * Builds standard legend configuration for chart widgets
  *

package/src/widgets/actions/change-column/change-column.test.tsx

@@ -1,6 +1,6 @@
 import { describe, test, expect, beforeEach, vi } from 'vitest'
-import { render, screen, fireEvent } from '@testing-library/react'
-import { ChangeColumn } from './change-column'
+import { render, screen, fireEvent, cleanup } from '@testing-library/react'
+import { ChangeColumn, CHANGE_COLUMN_TOOL_ID } from './change-column'
 import { useWidgetStore } from '../../stores/widget-store'
 import type { TableColumn } from '../../table/types'
 
@@ -160,4 +160,131 @@ describe('ChangeColumn', () => {
       expect(item.getAttribute('tabindex')).toBe('0')
     })
   })
+
+  describe('config tool registration', () => {
+    test('registers config tool on mount', () => {
+      useWidgetStore.getState().setWidget(widgetId, {
+        columns: mockColumns,
+      })
+
+      render(<ChangeColumn id={widgetId} />)
+
+      const widget = useWidgetStore.getState().getWidget(widgetId)
+      const tool = widget?.registeredTools?.find(
+        (t) => t.id === CHANGE_COLUMN_TOOL_ID,
+      )
+
+      expect(tool).toBeDefined()
+      expect(tool?.type).toBe('config')
+      expect(tool?.order).toBe(100)
+      expect(tool?.enabled).toBe(true)
+    })
+
+    test('unregisters config tool on unmount', () => {
+      useWidgetStore.getState().setWidget(widgetId, {
+        columns: mockColumns,
+      })
+
+      render(<ChangeColumn id={widgetId} />)
+
+      // Verify tool is registered
+      let widget = useWidgetStore.getState().getWidget(widgetId)
+      expect(
+        widget?.registeredTools?.find((t) => t.id === CHANGE_COLUMN_TOOL_ID),
+      ).toBeDefined()
+
+      // Unmount
+      cleanup()
+
+      // Verify tool is unregistered
+      widget = useWidgetStore.getState().getWidget(widgetId)
+      expect(
+        widget?.registeredTools?.find((t) => t.id === CHANGE_COLUMN_TOOL_ID),
+      ).toBeUndefined()
+    })
+
+    test('config tool returns currentConfig unchanged when columns match widget state', () => {
+      useWidgetStore.getState().setWidget(widgetId, {
+        columns: mockColumns,
+      })
+
+      render(<ChangeColumn id={widgetId} />)
+
+      const widget = useWidgetStore.getState().getWidget(widgetId)
+      const tool = widget?.registeredTools?.find(
+        (t) => t.id === CHANGE_COLUMN_TOOL_ID,
+      )
+
+      // When config columns match widget columns, fn returns the same reference
+      const input = { columns: mockColumns }
+      const result = tool?.fn(input, tool.config)
+      expect(result).toBe(input)
+    })
+
+    test('column order persists when config pipeline re-runs with original config', async () => {
+      useWidgetStore.getState().setWidget(widgetId, {
+        columns: mockColumns,
+      })
+
+      render(<ChangeColumn id={widgetId} />)
+
+      // Simulate a drag that reorders columns via setWidget
+      const reorderedColumns: TableColumn[] = [
+        { id: 'population', label: 'Population' },
+        { id: 'name', label: 'Name' },
+        { id: 'country', label: 'Country' },
+      ]
+      useWidgetStore.getState().setWidget(widgetId, {
+        columns: reorderedColumns,
+      })
+
+      // Simulate config pipeline re-running with original column order
+      const originalConfig = { columns: mockColumns }
+      await useWidgetStore
+        .getState()
+        .executeConfigPipeline(widgetId, originalConfig)
+
+      // Verify the columns are in the reordered order
+      const widget = useWidgetStore.getState().getWidget(widgetId)
+      const resultColumns = (widget as unknown as Record<string, unknown>)
+        ?.columns as TableColumn[] | undefined
+      expect(resultColumns?.map((c) => c.id)).toEqual([
+        'population',
+        'name',
+        'country',
+      ])
+    })
+
+    test('new columns appended at the end when not in widget order', async () => {
+      useWidgetStore.getState().setWidget(widgetId, {
+        columns: mockColumns,
+      })
+
+      render(<ChangeColumn id={widgetId} />)
+
+      // Simulate widget columns having only a partial order (e.g., user dragged 2 of 3)
+      const partialOrder: TableColumn[] = [
+        { id: 'country', label: 'Country' },
+        { id: 'name', label: 'Name' },
+      ]
+      useWidgetStore.getState().setWidget(widgetId, {
+        columns: partialOrder,
+      })
+
+      // Config pipeline runs with all columns (includes 'population' not in widget order)
+      const originalConfig = { columns: mockColumns }
+      await useWidgetStore
+        .getState()
+        .executeConfigPipeline(widgetId, originalConfig)
+
+      const widget = useWidgetStore.getState().getWidget(widgetId)
+      const resultColumns = (widget as unknown as Record<string, unknown>)
+        ?.columns as TableColumn[] | undefined
+      expect(resultColumns?.map((c) => c.id)).toEqual([
+        'country',
+        'name',
+        'population',
+      ])
+    })
+  })
 })

package/src/widgets/actions/change-column/change-column.tsx

@@ -14,16 +14,24 @@ import {
   verticalListSortingStrategy,
 } from '@dnd-kit/sortable'
 import { IconButton, Menu, SvgIcon } from '@mui/material'
-import { useCallback, useMemo, useState, type MouseEvent } from 'react'
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  type MouseEvent,
+} from 'react'
 import { useWidgetStore } from '../../stores/widget-store'
 import type { ChangeColumnProps } from './types'
 import { actionButtonStyles } from '../shared/styles'
 import { Tooltip } from '../../../components'
-import type { TableWidgetState } from '../../table/types'
+import type { TableColumn, TableWidgetState } from '../../table/types'
 import { ChangeColumnIcon } from './change-column-icon'
 import { SortableColumnItem } from './sortable-column-item'
 import { useShallow } from 'zustand/shallow'
 
+export const CHANGE_COLUMN_TOOL_ID = 'change-column'
+
 /**
  * Widget action to reorder columns in a table widget via drag-and-drop.
  *
@@ -31,6 +39,9 @@ import { useShallow } from 'zustand/shallow'
  * drag and drop columns to reorder them. All columns are displayed and
  * can be reordered.
  *
+ * Registers as a config pipeline tool so that column order is automatically
+ * re-applied when the base config is updated (e.g., by WidgetLoader).
+ *
  * Returns null if there are fewer than 2 columns.
  *
  * @example
@@ -47,10 +58,64 @@ export function ChangeColumn({
 }: ChangeColumnProps) {
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
   const setWidget = useWidgetStore((state) => state.setWidget)
+  const registerTool = useWidgetStore((state) => state.registerTool)
+  const unregisterTool = useWidgetStore((state) => state.unregisterTool)
   const columns = useWidgetStore(
     useShallow((state) => state.getWidget<TableWidgetState>(id)?.columns),
   )
 
+  /**
+   * Config tool function that reorders columns to match the current widget state.
+   * Reads desired order from the widget store (set by handleDragEnd via setWidget).
+   * Preserves referential identity when the order already matches to prevent
+   * re-render loops in the config pipeline.
+   */
+  const reorderFn = useCallback(
+    (currentConfig: unknown): unknown => {
+      const widgetState = useWidgetStore
+        .getState()
+        .getWidget<TableWidgetState>(id)
+      const currentColumns = widgetState?.columns
+      if (!currentColumns || currentColumns.length === 0) return currentConfig
+
+      const config = currentConfig as Record<string, unknown>
+      const configColumns = config.columns as TableColumn[] | undefined
+      if (!configColumns || configColumns.length === 0) return currentConfig
+
+      // Check if config columns are already in the same order as widget columns
+      const alreadyMatches =
+        configColumns.length === currentColumns.length &&
+        configColumns.every((col, i) => col.id === currentColumns[i]?.id)
+      if (alreadyMatches) return currentConfig
+
+      // Reorder config columns to match widget column order
+      const columnMap = new Map(configColumns.map((col) => [col.id, col]))
+      const reordered: TableColumn[] = []
+
+      for (const widgetCol of currentColumns) {
+        const col = columnMap.get(widgetCol.id)
+        if (col) {
+          reordered.push(col)
+          columnMap.delete(widgetCol.id)
+        }
+      }
+
+      // Append any new columns not in the widget order
+      for (const col of columnMap.values()) {
+        reordered.push(col)
+      }
+
+      // If result matches current widget columns, reuse the same array reference
+      // to prevent downstream subscribers from detecting a change
+      const matchesWidget =
+        reordered.length === currentColumns.length &&
+        reordered.every((col, i) => col.id === currentColumns[i]?.id)
+
+      return { ...config, columns: matchesWidget ? currentColumns : reordered }
+    },
+    [id],
+  )
+
   const sensors = useSensors(
     useSensor(PointerSensor),
     useSensor(KeyboardSensor, {
@@ -63,6 +128,18 @@ export function ChangeColumn({
     [columns],
   )
 
+  // Register config tool on mount
+  useEffect(() => {
+    registerTool(id, {
+      id: CHANGE_COLUMN_TOOL_ID,
+      type: 'config',
+      order: 100,
+      enabled: true,
+      fn: reorderFn,
+    })
+    return () => unregisterTool(id, CHANGE_COLUMN_TOOL_ID)
+  }, [id, registerTool, unregisterTool, reorderFn])
+
   const handleToggle = useCallback((event: MouseEvent<HTMLElement>) => {
     event.stopPropagation()
     setAnchorEl(event.currentTarget)

package/src/widgets/actions/fullscreen/fullscreen.tsx

@@ -22,15 +22,13 @@ export function FullScreen({
   Icon,
   IconButtonProps,
   DialogContentProps: { sx, ...DialogContentProps } = {},
+  DialogProps,
 }: FullScreenProps) {
-  const { isFullScreen, title } = useWidgetStore(
-    useShallow((state) => {
-      const widget = state.getWidget<FullScreenState>(id)
-      return {
-        isFullScreen: widget?.isFullScreen,
-        title: widget?.title,
-      }
-    }),
+  const isFullScreen = useWidgetStore(
+    useShallow((state) => state.getWidget<FullScreenState>(id)?.isFullScreen),
+  )
+  const title = useWidgetStore(
+    useShallow((state) => state.getWidget<FullScreenState>(id)?.title),
   )
   const setWidget = useWidgetStore((state) => state.setWidget)
 
@@ -51,7 +49,9 @@ export function FullScreen({
       <Dialog
         maxWidth={false}
         open={!!isFullScreen}
+        keepMounted
         aria-labelledby={labels?.ariaLabel ?? `fullscreen-dialog-title-${id}`}
+        {...DialogProps}
         onClose={() => updateFullScreenConfig({ isFullScreen: false })}
       >
         <DialogTitle

package/src/widgets/actions/fullscreen/types.ts

@@ -1,4 +1,8 @@
-import type { DialogContentProps, IconButtonProps } from '@mui/material'
+import type {
+  DialogContentProps,
+  IconButtonProps,
+  DialogProps,
+} from '@mui/material'
 import type { ReactNode } from 'react'
 import type { BaseWidgetState } from '../../../widgets/stores/types'
 
@@ -22,6 +26,7 @@ export interface FullScreenProps {
   }
   children: ReactNode
   DialogContentProps?: DialogContentProps
+  DialogProps?: DialogProps
   IconButtonProps?: IconButtonProps
   Icon?: ReactNode
 }

package/src/widgets/actions/index.ts

@@ -37,7 +37,10 @@ export type {
 } from './searcher/types'
 
 /* Change Column Widget */
-export { ChangeColumn } from './change-column/change-column'
+export {
+  ChangeColumn,
+  CHANGE_COLUMN_TOOL_ID,
+} from './change-column/change-column'
 export type { ChangeColumnProps } from './change-column/types'
 
 /* Lock Selection Widget */

package/src/widgets/actions/lock-selection/lock-selection.test.tsx

@@ -1,9 +1,8 @@
 import { describe, test, expect, beforeEach } from 'vitest'
 import { render, screen, fireEvent } from '@testing-library/react'
-import { LockSelection } from './lock-selection'
+import { LockSelection, LOCK_SELECTION_TOOL_ID } from './lock-selection'
 import { useWidgetStore } from '../../stores/widget-store'
 import type { EchartWidgetData } from '../../echart/types'
-import type { LockSelectionState } from './types'
 import { WidgetLoader } from '../../loader/loader'
 
 // Test data
@@ -45,25 +44,29 @@ describe('LockSelection', () => {
   })
 
   test('shows unlock tooltip when locked', () => {
-    // Pre-set the store to locked state
-    useWidgetStore.getState().setWidget(widgetId, { isLocked: true })
-
     render(<LockSelection id={widgetId} selectedItems={['Electronics']} />)
 
-    const button = screen.getByRole('button', { name: 'Unlock selection' })
-    expect(button).toBeTruthy()
+    // Lock by clicking the button
+    const button = screen.getByRole('button')
+    fireEvent.click(button)
+
+    const unlockedButton = screen.getByRole('button', {
+      name: 'Unlock selection',
+    })
+    expect(unlockedButton).toBeTruthy()
   })
 
-  test('toggles isLocked in store when clicked', () => {
+  test('toggles isLocked in tool state when clicked', () => {
     render(<LockSelection id={widgetId} selectedItems={['Electronics']} />)
 
     const button = screen.getByRole('button')
     fireEvent.click(button)
 
-    const widget = useWidgetStore
-      .getState()
-      .getWidget<LockSelectionState>(widgetId)
-    expect(widget?.isLocked).toBe(true)
+    const widget = useWidgetStore.getState().getWidget(widgetId)
+    const tool = widget?.registeredTools?.find(
+      (t) => t.id === LOCK_SELECTION_TOOL_ID,
+    )
+    expect(tool?.enabled).toBe(true)
   })
 
   test('filters data in store when locking', async () => {
@@ -86,36 +89,33 @@ describe('LockSelection', () => {
 
     await useWidgetStore.getState().executeToolPipeline(widgetId, mockData)
 
-    const widget = useWidgetStore
-      .getState()
-      .getWidget<LockSelectionState>(widgetId)
+    const widget = useWidgetStore.getState().getWidget(widgetId)
     expect(widget?.data).toEqual([[{ name: 'Electronics', value: 440 }]])
   })
 
   test('clears locked items when unlocking', () => {
-    // Pre-set the store to locked state
-    useWidgetStore.getState().setWidget(widgetId, {
-      isLocked: true,
-      lockedItems: ['Electronics'],
-    })
-
     render(<LockSelection id={widgetId} selectedItems={['Electronics']} />)
 
+    // Lock first
     const button = screen.getByRole('button')
     fireEvent.click(button)
 
-    const widget = useWidgetStore
-      .getState()
-      .getWidget<LockSelectionState>(widgetId)
-    expect(widget?.isLocked).toBe(false)
+    // Then unlock
+    fireEvent.click(button)
+
+    const widget = useWidgetStore.getState().getWidget(widgetId)
+    const tool = widget?.registeredTools?.find(
+      (t) => t.id === LOCK_SELECTION_TOOL_ID,
+    )
+    expect(tool?.enabled).toBe(false)
   })
 
   test('has active state when locked', () => {
-    useWidgetStore.getState().setWidget(widgetId, { isLocked: true })
-
     render(<LockSelection id={widgetId} selectedItems={['Electronics']} />)
 
     const button = screen.getByRole('button')
+    fireEvent.click(button)
+
     expect(button.getAttribute('data-active')).toBe('true')
   })
 
@@ -175,9 +175,7 @@ describe('LockSelection', () => {
       .getState()
       .executeToolPipeline(widgetId, multiSeriesData)
 
-    const widget = useWidgetStore
-      .getState()
-      .getWidget<LockSelectionState>(widgetId)
+    const widget = useWidgetStore.getState().getWidget(widgetId)
     expect(widget?.data).toEqual([
       [{ name: 'Electronics', value: 440 }],
       [{ name: 'Electronics', value: 520 }],

package/src/widgets/actions/lock-selection/types.ts

@@ -2,14 +2,6 @@ import type { IconButtonProps } from '@mui/material'
 import type { ReactNode } from 'react'
 import type { BaseWidgetState } from '../../stores/types'
 
-/**
- * Lock selection specific state properties.
- */
-export interface LockSelectionStateProps {
-  /** Whether the selection is currently locked */
-  isLocked?: boolean
-}
-
 /**
  * Widget state extension for lock selection functionality.
  * Extends the base widget state with lock-specific properties.
@@ -39,3 +31,11 @@ export interface LockSelectionProps {
   /** Custom icon to display */
   Icon?: ReactNode
 }
+
+/**
+ * Lock selection specific state properties.
+ */
+export interface LockSelectionStateProps {
+  /** Whether the selection is currently locked */
+  isLocked?: boolean
+}

package/src/widgets/actions/relative-data/relative-data.test.tsx

@@ -1,9 +1,8 @@
 import { describe, test, expect, beforeEach } from 'vitest'
 import { render, screen, fireEvent, waitFor } from '@testing-library/react'
-import { RelativeData } from './relative-data'
+import { RelativeData, RELATIVE_DATA_TOOL_ID } from './relative-data'
 import { useWidgetStore } from '../../stores/widget-store'
 import type { EchartWidgetData } from '../../echart/types'
-import type { RelativeDataState } from './types'
 
 describe('RelativeData', () => {
   const widgetId = 'test-relative-widget'
@@ -94,25 +93,27 @@ describe('RelativeData', () => {
     expect(button.getAttribute('aria-label')).toBe('Show absolute values')
   })
 
-  test('initializes widget store with defaultIsRelative on mount', async () => {
+  test('initializes tool state with defaultIsRelative on mount', async () => {
     render(<RelativeData id={widgetId} defaultIsRelative />)
 
     await waitFor(() => {
-      const widget = useWidgetStore
-        .getState()
-        .getWidget<RelativeDataState>(widgetId)
-      expect(widget?.isRelative).toBe(true)
+      const widget = useWidgetStore.getState().getWidget(widgetId)
+      const tool = widget?.registeredTools?.find(
+        (t) => t.id === RELATIVE_DATA_TOOL_ID,
+      )
+      expect(tool?.enabled).toBe(true)
     })
   })
 
-  test('initializes widget store with false when defaultIsRelative is false', async () => {
+  test('initializes tool state with false when defaultIsRelative is false', async () => {
     render(<RelativeData id={widgetId} defaultIsRelative={false} />)
 
     await waitFor(() => {
-      const widget = useWidgetStore
-        .getState()
-        .getWidget<RelativeDataState>(widgetId)
-      expect(widget?.isRelative).toBe(false)
+      const widget = useWidgetStore.getState().getWidget(widgetId)
+      const tool = widget?.registeredTools?.find(
+        (t) => t.id === RELATIVE_DATA_TOOL_ID,
+      )
+      expect(tool?.enabled).toBe(false)
     })
   })
 
@@ -233,7 +234,6 @@ describe('RelativeData', () => {
     // Pre-populate the widget in the store with relative data
     useWidgetStore.getState().setWidget(widgetId, {
       data: initialData,
-      isRelative: true,
     })
 
     render(<RelativeData id={widgetId} defaultIsRelative />)

package/src/widgets/actions/relative-data/types.ts

@@ -1,6 +1,6 @@
 import type { IconButtonProps } from '@mui/material'
 import type { ReactNode } from 'react'
-import type { BaseWidgetState } from '../../stores/types'
+import type { BaseWidgetState } from '../../../widgets/stores'
 
 export interface RelativeDataProps {
   /** Widget ID to update data in the widget store */

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

@@ -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,18 +105,24 @@ 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('applies stack to EChart series via config pipeline when toggling to stacked', async () => {
@@ -279,7 +291,6 @@ describe('StackToggle', () => {
   test('config tool re-applies stack when config pipeline re-runs', async () => {
     // Start with stacked widget
     useWidgetStore.getState().setWidget(widgetId, {
-      isStacked: true,
       option: {
         series: [
           { name: 'Series 1', type: 'bar', stack: DEFAULT_STACK_GROUP },
@@ -313,7 +324,6 @@ describe('StackToggle', () => {
   test('config tool does not apply stack when unstacked and pipeline re-runs', async () => {
     // Start with unstacked widget
     useWidgetStore.getState().setWidget(widgetId, {
-      isStacked: false,
       option: {
         series: [
           { name: 'Series 1', type: 'bar' },