@carto/ps-react-ui 4.5.1 → 4.6.0

package/src/widgets/no-data/no-data.test.tsx

@@ -10,12 +10,12 @@ describe('WidgetNoData', () => {
     useWidgetStore.getState().clearWidgets()
   })
 
-  describe('when data is empty', () => {
+  describe('when sourceData is empty', () => {
     test('renders NoData UI with empty array', () => {
       useWidgetStore.getState().setWidget(widgetId, {
         isLoading: false,
         isFetching: false,
-        data: [],
+        sourceData: [],
       })
 
       render(
@@ -31,11 +31,11 @@ describe('WidgetNoData', () => {
       expect(screen.queryByText('Widget Content')).toBeNull()
     })
 
-    test('renders NoData UI with null data', () => {
+    test('renders NoData UI with null sourceData', () => {
       useWidgetStore.getState().setWidget(widgetId, {
         isLoading: false,
         isFetching: false,
-        data: null,
+        sourceData: null,
       })
 
       render(
@@ -48,11 +48,11 @@ describe('WidgetNoData', () => {
       expect(screen.queryByText('Widget Content')).toBeNull()
     })
 
-    test('renders NoData UI with undefined data', () => {
+    test('renders NoData UI with undefined sourceData', () => {
       useWidgetStore.getState().setWidget(widgetId, {
         isLoading: false,
         isFetching: false,
-        data: undefined,
+        sourceData: undefined,
       })
 
       render(
@@ -69,7 +69,7 @@ describe('WidgetNoData', () => {
       useWidgetStore.getState().setWidget(widgetId, {
         isLoading: false,
         isFetching: false,
-        data: [[], []],
+        sourceData: [[], []],
       })
 
       render(
@@ -86,7 +86,7 @@ describe('WidgetNoData', () => {
       useWidgetStore.getState().setWidget(widgetId, {
         isLoading: false,
         isFetching: false,
-        data: {},
+        sourceData: {},
       })
 
       render(
@@ -100,12 +100,12 @@ describe('WidgetNoData', () => {
     })
   })
 
-  describe('when data exists', () => {
-    test('renders children with array data', () => {
+  describe('when sourceData exists', () => {
+    test('renders children with array sourceData', () => {
       useWidgetStore.getState().setWidget(widgetId, {
         isLoading: false,
         isFetching: false,
-        data: [{ value: 1 }],
+        sourceData: [{ value: 1 }],
       })
 
       render(
@@ -118,11 +118,11 @@ describe('WidgetNoData', () => {
       expect(screen.queryByText('No data available')).toBeNull()
     })
 
-    test('renders children with object data', () => {
+    test('renders children with object sourceData', () => {
       useWidgetStore.getState().setWidget(widgetId, {
         isLoading: false,
         isFetching: false,
-        data: { content: 'Hello' },
+        sourceData: { content: 'Hello' },
       })
 
       render(
@@ -135,11 +135,11 @@ describe('WidgetNoData', () => {
       expect(screen.queryByText('No data available')).toBeNull()
     })
 
-    test('renders children with nested array data', () => {
+    test('renders children with nested array sourceData', () => {
       useWidgetStore.getState().setWidget(widgetId, {
         isLoading: false,
         isFetching: false,
-        data: [[{ name: 'A', value: 1 }]],
+        sourceData: [[{ name: 'A', value: 1 }]],
       })
 
       render(
@@ -152,11 +152,11 @@ describe('WidgetNoData', () => {
       expect(screen.queryByText('No data available')).toBeNull()
     })
 
-    test('renders children with primitive data (number)', () => {
+    test('renders children with primitive sourceData (number)', () => {
       useWidgetStore.getState().setWidget(widgetId, {
         isLoading: false,
         isFetching: false,
-        data: 0,
+        sourceData: 0,
       })
 
       render(
@@ -169,11 +169,11 @@ describe('WidgetNoData', () => {
       expect(screen.queryByText('No data available')).toBeNull()
     })
 
-    test('renders children with primitive data (string)', () => {
+    test('renders children with primitive sourceData (string)', () => {
       useWidgetStore.getState().setWidget(widgetId, {
         isLoading: false,
         isFetching: false,
-        data: 'test',
+        sourceData: 'test',
       })
 
       render(
@@ -186,11 +186,11 @@ describe('WidgetNoData', () => {
       expect(screen.queryByText('No data available')).toBeNull()
     })
 
-    test('renders children with primitive data (boolean)', () => {
+    test('renders children with primitive sourceData (boolean)', () => {
       useWidgetStore.getState().setWidget(widgetId, {
         isLoading: false,
         isFetching: false,
-        data: false,
+        sourceData: false,
       })
 
       render(
@@ -205,11 +205,10 @@ describe('WidgetNoData', () => {
   })
 
   describe('when loading or fetching', () => {
-    test('renders children when isLoading=true even if data is empty', () => {
+    test('renders children when isLoading=true even if sourceData is empty', () => {
       useWidgetStore.getState().setWidget(widgetId, {
         isLoading: true,
         isFetching: false,
-        data: [],
       })
 
       render(
@@ -222,11 +221,10 @@ describe('WidgetNoData', () => {
       expect(screen.queryByText('No data available')).toBeNull()
     })
 
-    test('renders children when isFetching=true even if data is empty', () => {
+    test('renders children when isFetching=true even if sourceData is empty', () => {
       useWidgetStore.getState().setWidget(widgetId, {
         isLoading: false,
         isFetching: true,
-        data: [],
       })
 
       render(
@@ -243,7 +241,6 @@ describe('WidgetNoData', () => {
       useWidgetStore.getState().setWidget(widgetId, {
         isLoading: true,
         isFetching: true,
-        data: [],
       })
 
       render(
@@ -262,7 +259,7 @@ describe('WidgetNoData', () => {
       useWidgetStore.getState().setWidget(widgetId, {
         isLoading: false,
         isFetching: false,
-        data: [],
+        sourceData: [],
       })
 
       render(
@@ -279,7 +276,7 @@ describe('WidgetNoData', () => {
       useWidgetStore.getState().setWidget(widgetId, {
         isLoading: false,
         isFetching: false,
-        data: [],
+        sourceData: [],
       })
 
       render(
@@ -298,10 +295,10 @@ describe('WidgetNoData', () => {
       useWidgetStore.getState().setWidget(widgetId, {
         isLoading: false,
         isFetching: false,
-        data: { customField: 'value' },
+        sourceData: { customField: 'value' },
       })
 
-      // Custom isEmpty that treats this object as empty
+      // Custom isEmpty that treats this sourceData as empty
       const customIsEmpty = (data: unknown) => {
         const d = data as { customField: string }
         return d?.customField === 'value'
@@ -321,7 +318,7 @@ describe('WidgetNoData', () => {
       useWidgetStore.getState().setWidget(widgetId, {
         isLoading: false,
         isFetching: false,
-        data: [],
+        sourceData: [],
       })
 
       // Custom isEmpty that treats empty array as having data
@@ -352,12 +349,66 @@ describe('WidgetNoData', () => {
     })
   })
 
+  describe('sourceData vs pipeline-transformed data', () => {
+    test('renders children when sourceData has data but pipeline data is empty', () => {
+      useWidgetStore.getState().setWidget(widgetId, {
+        isLoading: false,
+        isFetching: false,
+        sourceData: [{ value: 1 }, { value: 2 }],
+        data: [], // pipeline filtered everything out
+      })
+
+      render(
+        <WidgetNoData id={widgetId}>
+          <div>Widget Content</div>
+        </WidgetNoData>,
+      )
+
+      // Should show children because sourceData is not empty
+      expect(screen.getByText('Widget Content')).toBeTruthy()
+      expect(screen.queryByText('No data available')).toBeNull()
+    })
+
+    test('renders NoData when both sourceData and data are empty', () => {
+      useWidgetStore.getState().setWidget(widgetId, {
+        isLoading: false,
+        isFetching: false,
+        sourceData: [],
+      })
+
+      render(
+        <WidgetNoData id={widgetId}>
+          <div>Widget Content</div>
+        </WidgetNoData>,
+      )
+
+      expect(screen.getByText('No data available')).toBeTruthy()
+      expect(screen.queryByText('Widget Content')).toBeNull()
+    })
+
+    test('renders NoData when sourceData is null (API returned nothing)', () => {
+      useWidgetStore.getState().setWidget(widgetId, {
+        isLoading: false,
+        isFetching: false,
+        sourceData: null,
+      })
+
+      render(
+        <WidgetNoData id={widgetId}>
+          <div>Widget Content</div>
+        </WidgetNoData>,
+      )
+
+      expect(screen.getByText('No data available')).toBeTruthy()
+      expect(screen.queryByText('Widget Content')).toBeNull()
+    })
+  })
+
   describe('reactivity to store changes', () => {
-    test('updates from NoData to content when data arrives', () => {
+    test('updates from NoData to content when sourceData arrives', () => {
       useWidgetStore.getState().setWidget(widgetId, {
         isLoading: false,
         isFetching: false,
-        data: [],
       })
 
       const { rerender } = render(
@@ -369,9 +420,9 @@ describe('WidgetNoData', () => {
       expect(screen.getByText('No data available')).toBeTruthy()
       expect(screen.queryByText('Widget Content')).toBeNull()
 
-      // Update with data
+      // Update with sourceData
       useWidgetStore.getState().setWidget(widgetId, {
-        data: [{ value: 1 }],
+        sourceData: [{ value: 1 }],
       })
 
       // Force rerender to pick up store changes
@@ -385,11 +436,11 @@ describe('WidgetNoData', () => {
       expect(screen.queryByText('No data available')).toBeNull()
     })
 
-    test('updates from content to NoData when data becomes empty', () => {
+    test('updates from content to NoData when sourceData becomes empty', () => {
       useWidgetStore.getState().setWidget(widgetId, {
         isLoading: false,
         isFetching: false,
-        data: [{ value: 1 }],
+        sourceData: [{ value: 1 }],
       })
 
       const { rerender } = render(
@@ -401,8 +452,8 @@ describe('WidgetNoData', () => {
       expect(screen.getByText('Widget Content')).toBeTruthy()
       expect(screen.queryByText('No data available')).toBeNull()
 
-      // Clear data
-      useWidgetStore.getState().setWidget(widgetId, { data: [] })
+      // Clear sourceData
+      useWidgetStore.getState().setWidget(widgetId, { sourceData: [] })
 
       // Force rerender to pick up store changes
       rerender(
@@ -419,7 +470,6 @@ describe('WidgetNoData', () => {
       useWidgetStore.getState().setWidget(widgetId, {
         isLoading: false,
         isFetching: false,
-        data: [],
       })
 
       const { rerender } = render(

package/src/widgets/no-data/no-data.tsx

@@ -6,8 +6,9 @@ import { styles } from './style'
 /**
  * NoData wrapper component that displays empty state UI when widget has no data
  *
- * Integrates with widget store to check loading/fetching state and data availability.
- * Works in conjunction with SkeletonLoader for complete loading/empty state handling.
+ * Integrates with widget store to check loading/fetching state and source data availability.
+ * Uses `sourceData` (pre-pipeline data) instead of `data` (post-pipeline) to distinguish
+ * "API returned nothing" from "pipeline tools filtered everything out".
  *
  * @example Basic usage
  * ```tsx
@@ -44,10 +45,11 @@ export function WidgetNoData({
   isEmpty = defaultIsEmpty,
 }: WidgetNoDataProps) {
   // Single consolidated subscription instead of 3 separate ones.
-  const { isLoading, isFetching, data } = useWidgetSelector(id, (w) => ({
+  // Reads sourceData (pre-pipeline) to check emptiness, not data (post-pipeline).
+  const { isLoading, isFetching, sourceData } = useWidgetSelector(id, (w) => ({
     isLoading: w?.isLoading,
     isFetching: w?.isFetching,
-    data: w?.data,
+    sourceData: w?.sourceData,
   }))
 
   // If loading or fetching, show children
@@ -57,7 +59,7 @@ export function WidgetNoData({
   }
 
   // Check if data is empty
-  if (isEmpty(data)) {
+  if (isEmpty(sourceData)) {
     return (
       <Box sx={styles.root}>
         <Typography variant='body2' color='text.primary'>

package/src/widgets/no-data/types.ts

@@ -59,7 +59,11 @@ export interface WidgetNoDataProps {
   description?: string
 
   /**
-   * Optional custom function to determine if data is empty
+   * Optional custom function to determine if source data is empty.
+   * Receives `sourceData` (pre-pipeline data from the API), not `data`
+   * (post-pipeline). This allows distinguishing "API returned nothing"
+   * from "pipeline tools filtered everything out".
+   *
    * If not provided, uses default isEmpty logic that handles:
    * - null/undefined → empty
    * - [] (empty array) → empty

package/src/widgets/stores/index.ts

@@ -2,6 +2,8 @@ export { useWidgetStore, widgetStoreActions } from './widget-store'
 export { useWidgetSelector } from './use-widget-selector'
 export type {
   BaseWidgetState,
+  ToolRegistration,
+  ToolTransformFunction,
   ToolType,
   WidgetsStoreProps,
   WidgetState,

package/src/widgets/stores/types.ts

@@ -14,6 +14,10 @@ export interface WidgetsStoreProps {
   type: string
   /** Widget data - flexible to accommodate different widget types */
   data: unknown
+  /** Original pre-pipeline data. Used by NoData to distinguish
+   *  "no data from API" from "pipeline tools filtered everything out".
+   *  Set automatically by executeToolPipeline — not a component prop. */
+  sourceData?: unknown
   /** Loading state */
   isLoading: boolean
   /** Fetching state (e.g., for async data) */
@@ -41,11 +45,7 @@ export interface WidgetsStoreProps {
  * Tool transformation function type
  * Can be synchronous or asynchronous to support remote operations
  */
-export type ToolTransformFunction = (
-  data: unknown,
-  config?: Record<string, unknown>,
-  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
-) => Promise<unknown> | unknown
+export type ToolTransformFunction = (data: unknown) => unknown
 
 /**
  * Tool registration for widget pipeline
@@ -88,8 +88,6 @@ export interface ToolRegistration {
   enabled: boolean
   /** 'data' (default) transforms data, 'config' transforms widget config/option */
   type?: ToolType
-  /** Tool-specific configuration */
-  config?: Record<string, unknown>
   /**
    * Array of tool IDs to disable when this tool is active.
    * During pipeline execution, if this tool is enabled, any tools listed
@@ -169,24 +167,18 @@ export interface WidgetStoreActions {
   unregisterTool: (widgetId: string, toolId: string) => void
 
   /**
-   * Update tool configuration
+   * Set tool enabled state
    * @param widgetId - Widget ID
    * @param toolId - Tool ID
-   * @param config - New configuration to merge
+   * @param enabled - Whether tool should be enabled
    */
-  updateToolConfig: (
-    widgetId: string,
-    toolId: string,
-    config: Record<string, unknown>,
-  ) => void
+  setToolEnabled: (widgetId: string, toolId: string, enabled: boolean) => void
 
   /**
-   * Set tool enabled state
+   * Trigger pipeline re-execution by bumping the registeredTools reference.
    * @param widgetId - Widget ID
-   * @param toolId - Tool ID
-   * @param enabled - Whether tool should be enabled
    */
-  setToolEnabled: (widgetId: string, toolId: string, enabled: boolean) => void
+  triggerToolPipeline: (widgetId: string) => void
 
   /**
    * Execute the tool transformation pipeline