@carto/ps-react-ui 4.4.0-chat-ui.6 → 4.4.0-chat-ui.7

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

@@ -1,8 +1,13 @@
 import { describe, test, expect, beforeEach } from 'vitest'
 import { render, screen, fireEvent, waitFor } from '@testing-library/react'
-import { RelativeData, RELATIVE_DATA_TOOL_ID } from './relative-data'
+import {
+  RelativeData,
+  RELATIVE_DATA_TOOL_ID,
+  RELATIVE_DATA_CONFIG_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'
@@ -223,6 +228,276 @@ describe('RelativeData', () => {
     expect(button.hasAttribute('disabled')).toBeTruthy()
   })
 
+  test('registers both data and config tools on mount', async () => {
+    render(<RelativeData id={widgetId} />)
+
+    await waitFor(() => {
+      const widget = useWidgetStore.getState().getWidget(widgetId)
+      const dataTool = widget?.registeredTools?.find(
+        (t) => t.id === RELATIVE_DATA_TOOL_ID,
+      )
+      const configTool = widget?.registeredTools?.find(
+        (t) => t.id === RELATIVE_DATA_CONFIG_TOOL_ID,
+      )
+      expect(dataTool).toBeTruthy()
+      expect(configTool).toBeTruthy()
+      expect(configTool?.type).toBe('config')
+      // Data tool disabled by default (isRelative=false)
+      expect(dataTool?.enabled).toBe(false)
+      // Config tool always enabled — it reads isRelative from store internally
+      expect(configTool?.enabled).toBe(true)
+    })
+  })
+
+  test('data tool enabled when toggled to relative mode', async () => {
+    render(<RelativeData id={widgetId} />)
+
+    const button = screen.getByRole('button')
+    fireEvent.click(button)
+
+    await waitFor(() => {
+      const widget = useWidgetStore.getState().getWidget(widgetId)
+      const dataTool = widget?.registeredTools?.find(
+        (t) => t.id === RELATIVE_DATA_TOOL_ID,
+      )
+      expect(dataTool?.enabled).toBe(true)
+    })
+  })
+
+  test('stores isRelative in widget root state', () => {
+    render(<RelativeData id={widgetId} />)
+
+    // Default: isRelative=false in store
+    let widget = useWidgetStore.getState().getWidget(widgetId)
+    expect((widget as RelativeDataState | undefined)?.isRelative).toBe(false)
+
+    // Toggle to relative
+    const button = screen.getByRole('button')
+    fireEvent.click(button)
+
+    widget = useWidgetStore.getState().getWidget(widgetId)
+    expect((widget as RelativeDataState | undefined)?.isRelative).toBe(true)
+
+    // Toggle back
+    fireEvent.click(button)
+
+    widget = useWidgetStore.getState().getWidget(widgetId)
+    expect((widget as RelativeDataState | undefined)?.isRelative).toBe(false)
+  })
+
+  test('config tool does not apply formatter when sourceData is empty', async () => {
+    const customFormatter = (value: number) => `$${value}`
+    useWidgetStore
+      .getState()
+      .setWidget(widgetId, { formatter: customFormatter, sourceData: [] })
+
+    render(<RelativeData id={widgetId} />)
+
+    const button = screen.getByRole('button')
+    fireEvent.click(button)
+
+    // Execute config pipeline — sourceData is empty, so formatter should pass through
+    await useWidgetStore
+      .getState()
+      .executeConfigPipeline(widgetId, { formatter: customFormatter, max: 200 })
+
+    const widget = useWidgetStore.getState().getWidget(widgetId)
+    expect(widget?.formatter).toBe(customFormatter)
+    expect((widget as unknown as Record<string, unknown>)?.max).toBe(200)
+  })
+
+  test('config pipeline applies percentage formatter when in relative mode', async () => {
+    useWidgetStore
+      .getState()
+      .setWidget(widgetId, { max: 500, sourceData: mockData })
+
+    render(<RelativeData id={widgetId} />)
+
+    const button = screen.getByRole('button')
+    fireEvent.click(button)
+
+    // Execute config pipeline
+    await useWidgetStore
+      .getState()
+      .executeConfigPipeline(widgetId, { max: 500 })
+
+    const widget = useWidgetStore.getState().getWidget(widgetId)
+    expect((widget as unknown as Record<string, unknown>)?.max).toBe(100)
+    expect(widget?.formatter).toBeDefined()
+    expect(typeof widget?.formatter).toBe('function')
+  })
+
+  test('config tool passes config through unchanged when not in relative mode', async () => {
+    const customFormatter = (value: number) => `$${value}`
+    useWidgetStore
+      .getState()
+      .setWidget(widgetId, { formatter: customFormatter, max: 200 })
+
+    render(<RelativeData id={widgetId} />)
+
+    // Execute config pipeline — config tool is enabled but isRelative=false in store,
+    // so it passes through the config unchanged
+    await useWidgetStore
+      .getState()
+      .executeConfigPipeline(widgetId, { formatter: customFormatter, max: 200 })
+
+    const widget = useWidgetStore.getState().getWidget(widgetId)
+    expect(widget?.formatter).toBe(customFormatter)
+    expect((widget as unknown as Record<string, unknown>)?.max).toBe(200)
+  })
+
+  test('restores original formatter/max when toggling back to absolute', async () => {
+    const customFormatter = (value: number) => `$${value}`
+    useWidgetStore.getState().setWidget(widgetId, {
+      formatter: customFormatter,
+      max: 200,
+      sourceData: mockData,
+    })
+
+    render(<RelativeData id={widgetId} />)
+
+    const button = screen.getByRole('button')
+
+    // Toggle to relative — captures originalFormatter/originalMax in store
+    fireEvent.click(button)
+
+    await useWidgetStore
+      .getState()
+      .executeConfigPipeline(widgetId, { max: 200 })
+
+    let widget = useWidgetStore.getState().getWidget(widgetId)
+    expect((widget as unknown as Record<string, unknown>)?.max).toBe(100)
+
+    // Toggle back to absolute — config tool restores originals from store
+    fireEvent.click(button)
+
+    await useWidgetStore
+      .getState()
+      .executeConfigPipeline(widgetId, { max: 200 })
+
+    widget = useWidgetStore.getState().getWidget(widgetId)
+    expect(widget?.formatter).toBe(customFormatter)
+    expect((widget as unknown as Record<string, unknown>)?.max).toBe(200)
+  })
+
+  test('removes percentage formatter when toggling back with no original formatter', async () => {
+    // Widget has no formatter — originalFormatter will be captured as undefined
+    useWidgetStore.getState().setWidget(widgetId, { sourceData: mockData })
+
+    render(<RelativeData id={widgetId} />)
+
+    const button = screen.getByRole('button')
+
+    // Toggle to relative — captures originalFormatter=undefined
+    fireEvent.click(button)
+
+    await useWidgetStore.getState().executeConfigPipeline(widgetId, {})
+
+    let widget = useWidgetStore.getState().getWidget(widgetId)
+    expect(widget?.formatter).toBeDefined()
+    expect(typeof widget?.formatter).toBe('function')
+
+    // Toggle back to absolute — should remove percentage formatter
+    fireEvent.click(button)
+
+    await useWidgetStore.getState().executeConfigPipeline(widgetId, {})
+
+    widget = useWidgetStore.getState().getWidget(widgetId)
+    expect(widget?.formatter).toBeUndefined()
+  })
+
+  test('removes percentage formatter when defaultIsRelative=true and toggling to absolute', async () => {
+    // Widget starts with defaultIsRelative=true and no formatter
+    useWidgetStore.getState().setWidget(widgetId, { sourceData: mockData })
+
+    render(<RelativeData id={widgetId} defaultIsRelative />)
+
+    // Pipeline runs with isRelative=true — applies percentage formatter
+    await useWidgetStore.getState().executeConfigPipeline(widgetId, {})
+
+    let widget = useWidgetStore.getState().getWidget(widgetId)
+    expect(widget?.formatter).toBeDefined()
+    expect(typeof widget?.formatter).toBe('function')
+
+    // Toggle to absolute (first toggle is OFF when defaultIsRelative=true)
+    const button = screen.getByRole('button')
+    fireEvent.click(button)
+
+    await useWidgetStore.getState().executeConfigPipeline(widgetId, {})
+
+    widget = useWidgetStore.getState().getWidget(widgetId)
+    expect(widget?.formatter).toBeUndefined()
+  })
+
+  test('stores originalFormatter/originalMax in widget root on toggle', () => {
+    const customFormatter = (value: number) => `$${value}`
+    useWidgetStore
+      .getState()
+      .setWidget(widgetId, { formatter: customFormatter, max: 200 })
+
+    render(<RelativeData id={widgetId} />)
+
+    const button = screen.getByRole('button')
+    fireEvent.click(button)
+
+    const widget = useWidgetStore
+      .getState()
+      .getWidget<RelativeDataState>(widgetId)
+    expect(widget?.originalFormatter).toBe(customFormatter)
+    expect(widget?.originalMax).toBe(200)
+  })
+
+  test('restores original formatter/max when unmounting while in relative mode', async () => {
+    const customFormatter = (value: number) => `$${value}`
+    useWidgetStore
+      .getState()
+      .setWidget(widgetId, { formatter: customFormatter, max: 200 })
+
+    const { unmount } = render(<RelativeData id={widgetId} />)
+
+    const button = screen.getByRole('button')
+
+    // Toggle to relative — captures originalFormatter/originalMax in store
+    fireEvent.click(button)
+
+    await waitFor(() => {
+      const widget = useWidgetStore
+        .getState()
+        .getWidget<RelativeDataState>(widgetId)
+      expect(widget?.isRelative).toBe(true)
+      expect(widget?.originalFormatter).toBe(customFormatter)
+      expect(widget?.originalMax).toBe(200)
+    })
+
+    // Unmount while still in relative mode
+    unmount()
+
+    const widget = useWidgetStore.getState().getWidget(widgetId)
+    expect(widget?.formatter).toBe(customFormatter)
+    expect((widget as unknown as Record<string, unknown>)?.max).toBe(200)
+  })
+
+  test('unregisters tools on unmount', async () => {
+    const { unmount } = render(<RelativeData id={widgetId} />)
+
+    await waitFor(() => {
+      const widget = useWidgetStore.getState().getWidget(widgetId)
+      expect(widget?.registeredTools?.length).toBeGreaterThan(0)
+    })
+
+    unmount()
+
+    const widget = useWidgetStore.getState().getWidget(widgetId)
+    const dataTool = widget?.registeredTools?.find(
+      (t) => t.id === RELATIVE_DATA_TOOL_ID,
+    )
+    const configTool = widget?.registeredTools?.find(
+      (t) => t.id === RELATIVE_DATA_CONFIG_TOOL_ID,
+    )
+    expect(dataTool).toBeUndefined()
+    expect(configTool).toBeUndefined()
+  })
+
   test('recalculates relative values when store data changes externally while in relative mode', async () => {
     const initialData: EchartWidgetData = [
       [

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

@@ -1,7 +1,8 @@
 import { IconButton } from '@mui/material'
 import { PercentOutlined } from '@mui/icons-material'
 import { useCallback, useEffect, useRef } from 'react'
-import { useWidgetStore } from '../../stores/widget-store'
+import { widgetStoreActions } from '../../stores/widget-store'
+import { useWidgetSelector } from '../../stores/use-widget-selector'
 import type { RelativeDataProps, RelativeDataState } from './types'
 import { actionButtonStyles } from '../shared/styles'
 import { Tooltip } from '../../../components'
@@ -9,12 +10,18 @@ import { calculateTotal, toRelativeData } from './utils'
 import type { EchartWidgetData } from '../../../widgets/echart'
 
 export const RELATIVE_DATA_TOOL_ID = 'relative-data'
+export const RELATIVE_DATA_CONFIG_TOOL_ID = 'relative-data-config'
 
 /**
  * Widget action to toggle between relative (percentage) and absolute data display.
  *
- * Registers a transformation tool in the widget pipeline when mounted.
- * When relative mode is active, transforms data to percentages via the pipeline.
+ * Registers two transformation tools in the widget pipeline when mounted:
+ * - A data tool that converts values to percentages (enabled/disabled via store)
+ * - A config tool that is **always enabled** and reads `isRelative` from the store
+ *   to decide whether to apply the percentage formatter or restore the original one.
+ *   The config tool must always participate because the original formatter may have
+ *   been set via `setWidget` (not in the base config), so disabling the tool would
+ *   leave the percentage formatter stuck on the widget.
  *
  * @example
  * ```tsx
@@ -33,36 +40,39 @@ export function RelativeData({
   Icon,
   IconButtonProps,
 }: RelativeDataProps) {
-  const previousMaxValue = useRef<number | undefined>(undefined)
-  const originalFormatter = useRef<((value: number) => string) | undefined>(
+  const percentFormatterRef = useRef<((value: number) => string) | undefined>(
     undefined,
   )
-  const setWidget = useWidgetStore((state) => state.setWidget)
-  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 storeIsRelative = useWidgetStore(
-    (state) => state.getWidget<RelativeDataState>(id)?.isRelative,
-  )
 
-  const isRelative = storeIsRelative ?? defaultIsRelative
+  // Read isRelative from widget store root — single source of truth
+  const { isRelative } = useWidgetSelector(id, (w) => ({
+    isRelative:
+      (w as RelativeDataState | undefined)?.isRelative ?? defaultIsRelative,
+  }))
 
-  // Initialize store with default value on mount
+  // Initialize store with default value on mount.
+  // When defaultIsRelative=true, capture originals so toggling OFF can restore them.
   useEffect(() => {
-    const currentValue = getWidget<RelativeDataState>(id)?.isRelative
-    if (currentValue === undefined) {
-      setWidget(id, { isRelative: defaultIsRelative })
+    const current = widgetStoreActions.getWidget<RelativeDataState>(id)
+    if (current?.isRelative === undefined) {
+      if (defaultIsRelative) {
+        widgetStoreActions.setWidget(id, {
+          isRelative: true,
+          originalFormatter: current?.formatter,
+          originalMax: (current as unknown as Record<string, number>)?.max,
+        })
+      } else {
+        widgetStoreActions.setWidget(id, { isRelative: defaultIsRelative })
+      }
     }
-  }, [defaultIsRelative, getWidget, id, setWidget])
+  }, [id, defaultIsRelative])
 
-  // Register tool on mount
+  // Register data tool once — fn has no closure deps
   useEffect(() => {
-    registerTool(id, {
+    widgetStoreActions.registerTool(id, {
       id: RELATIVE_DATA_TOOL_ID,
       order,
-      enabled: isRelative,
+      enabled: defaultIsRelative,
       fn: (data) => {
         const echartData = data as EchartWidgetData
         const total = calculateTotal(echartData)
@@ -70,43 +80,92 @@ export function RelativeData({
       },
     })
 
-    return () => unregisterTool(id, RELATIVE_DATA_TOOL_ID)
-  }, [id, order, registerTool, unregisterTool, isRelative])
+    return () => widgetStoreActions.unregisterTool(id, RELATIVE_DATA_TOOL_ID)
+  }, [id, order, defaultIsRelative])
 
-  const handleToggle = useCallback(() => {
-    const newIsRelative = !isRelative
-    setToolEnabled(id, RELATIVE_DATA_TOOL_ID, newIsRelative)
-    let max = previousMaxValue.current
+  // Sync data tool enabled — lightweight, no re-registration
+  useEffect(() => {
+    widgetStoreActions.setToolEnabled(id, RELATIVE_DATA_TOOL_ID, isRelative)
+  }, [id, isRelative])
 
-    if (newIsRelative) {
-      // Backup current formatter to ref
-      const widget = getWidget(id) as {
-        formatter?: (value: number) => string
-        locale?: string
-      }
-      originalFormatter.current = widget?.formatter
+  // Register config tool — ALWAYS enabled.
+  // Reads isRelative, originalFormatter, originalMax from the store at execution time:
+  // - isRelative=true  → applies percentage formatter and max=100
+  // - isRelative=false → restores original formatter/max from store
+  useEffect(() => {
+    widgetStoreActions.registerTool(id, {
+      id: RELATIVE_DATA_CONFIG_TOOL_ID,
+      type: 'config',
+      order,
+      enabled: true,
+      fn: (currentConfig: unknown) => {
+        const config = currentConfig as Record<string, unknown>
+        const widget = widgetStoreActions.getWidget<RelativeDataState>(id)
 
-      // Save current max value before setting to 100
-      const currentMax = (getWidget(id) as { max?: number })?.max
-      previousMaxValue.current = currentMax
-      max = 100
-    }
+        const hasSourceData =
+          widget?.sourceData != null &&
+          !(Array.isArray(widget.sourceData) && widget.sourceData.length === 0)
+
+        if (widget?.isRelative) {
+          // Don't apply percentage formatter when there's no source data
+          if (!hasSourceData) return config
 
-    setWidget(id, {
-      isRelative: newIsRelative,
-      max,
-      formatter: newIsRelative
-        ? (value: number) => {
-            const widget = getWidget(id) as { locale?: string }
-            return new Intl.NumberFormat(widget?.locale, {
-              style: 'percent',
-              minimumFractionDigits: 1,
-              maximumFractionDigits: 1,
-            }).format(value / 100)
+          if (!percentFormatterRef.current) {
+            const locale = widget?.locale
+            percentFormatterRef.current = (value: number) =>
+              new Intl.NumberFormat(locale, {
+                style: 'percent',
+                minimumFractionDigits: 1,
+                maximumFractionDigits: 1,
+              }).format(value / 100)
           }
-        : originalFormatter.current,
+          return { ...config, formatter: percentFormatterRef.current, max: 100 }
+        }
+
+        // Not in relative mode — restore originals from store if captured.
+        // Use `in` because originalFormatter may have been captured as undefined
+        // (widget had no formatter before toggling relative on).
+        percentFormatterRef.current = undefined
+        if (widget != null && 'originalFormatter' in widget) {
+          return {
+            ...config,
+            formatter: widget.originalFormatter,
+            max: widget.originalMax,
+          }
+        }
+        return config
+      },
     })
-  }, [isRelative, setWidget, id, getWidget, setToolEnabled])
+    return () => {
+      // Restore original formatter/max if unmounting while in relative mode
+      const widget = widgetStoreActions.getWidget<RelativeDataState>(id)
+      if (widget?.isRelative && 'originalFormatter' in widget) {
+        widgetStoreActions.setWidget(id, {
+          formatter: widget.originalFormatter,
+          max: widget.originalMax,
+        })
+      }
+      percentFormatterRef.current = undefined
+      widgetStoreActions.unregisterTool(id, RELATIVE_DATA_CONFIG_TOOL_ID)
+    }
+  }, [id, order, defaultIsRelative])
+
+  const handleToggle = useCallback(() => {
+    const newIsRelative = !isRelative
+    percentFormatterRef.current = undefined
+
+    if (newIsRelative) {
+      // Capture current formatter/max in store before switching to relative
+      const widget = widgetStoreActions.getWidget(id)
+      widgetStoreActions.setWidget(id, {
+        isRelative: true,
+        originalFormatter: widget?.formatter,
+        originalMax: (widget as unknown as Record<string, unknown>)?.max,
+      })
+    } else {
+      widgetStoreActions.setWidget(id, { isRelative: false })
+    }
+  }, [isRelative, id])
 
   const tooltipLabel = isRelative
     ? (labels?.absolute ?? 'Show absolute values')

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

@@ -27,5 +27,7 @@ export interface RelativeDataProps {
 export type RelativeDataState<T = unknown> = BaseWidgetState<
   T & {
     isRelative?: boolean
+    originalFormatter?: (value: number) => string
+    originalMax?: number
   }
 >

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

@@ -4,8 +4,8 @@ import { useCallback, useEffect } from 'react'
 import type { SearcherToggleProps, SearcherState } from './types'
 import { actionButtonStyles } from '../shared/styles'
 import { Tooltip } from '../../../components'
-import { useWidgetStore } from '../../stores/widget-store'
-import { useShallow } from 'zustand/shallow'
+import { widgetStoreActions } from '../../stores/widget-store'
+import { useWidgetSelector } from '../../stores/use-widget-selector'
 
 /**
  * Widget action button to toggle search functionality.
@@ -30,25 +30,24 @@ export function SearcherToggle({
   Icon,
   IconButtonProps,
 }: SearcherToggleProps) {
-  const setWidget = useWidgetStore((state) => state.setWidget)
-  const getWidget = useWidgetStore((state) => state.getWidget)
-  const storeIsEnabled = useWidgetStore(
-    useShallow((state) => state.getWidget<SearcherState>(id)?.isSearchEnabled),
-  )
+  const { storeIsEnabled } = useWidgetSelector(id, (w) => ({
+    storeIsEnabled: (w as SearcherState | undefined)?.isSearchEnabled,
+  }))
 
   const isEnabled = storeIsEnabled ?? defaultEnabled
 
   // Initialize store with default value on mount
   useEffect(() => {
-    const currentValue = getWidget<SearcherState>(id)?.isSearchEnabled
+    const currentValue =
+      widgetStoreActions.getWidget<SearcherState>(id)?.isSearchEnabled
     if (currentValue === undefined) {
-      setWidget(id, { isSearchEnabled: defaultEnabled })
+      widgetStoreActions.setWidget(id, { isSearchEnabled: defaultEnabled })
     }
-  }, [defaultEnabled, getWidget, id, setWidget])
+  }, [defaultEnabled, id])
 
   const handleToggle = useCallback(() => {
-    setWidget(id, { isSearchEnabled: !isEnabled })
-  }, [id, isEnabled, setWidget])
+    widgetStoreActions.setWidget(id, { isSearchEnabled: !isEnabled })
+  }, [id, isEnabled])
 
   const tooltipLabel = isEnabled
     ? (labels?.disable ?? 'Disable search')