fix(charts): format index-encoded pie tooltips and test dashboard refresh through the UI

Pie tooltips encoded by dimension index now use the custom formatter, resolving
the measure through the encode indexes ECharts passes it. The dashboard preview
test drops the mocked controls and callback-driven cases and clicks the real
Refresh button to check which analytics queries are invalidated; the range and
timezone math stays covered by the time tests.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01S6aTRnkiu7PxYZPNPXYEMV

Author: TheodoreSpeaks

apps/sim/components/dashboards/dashboard-preview.test.tsx

@@ -4,142 +4,63 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing'
 import { createRoot, type Root } from 'react-dom/client'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { useDashboardInteractions } from '@/components/dashboards/dashboard-interactions'
 import { DashboardPreview } from '@/components/dashboards/dashboard-preview'
 import { tableAnalyticsKeys } from '@/hooks/queries/table-analytics'
 
-const mocks = vi.hoisted(() => ({
-  controls: vi.fn(),
-  layout: vi.fn(),
-  url: vi.fn(),
-  timezone: vi.fn(),
-}))
-vi.mock('@/lib/core/utils/timezone', async (importOriginal) => ({
-  ...(await importOriginal<typeof import('@/lib/core/utils/timezone')>()),
-  getBrowserTimezone: mocks.timezone,
-}))
-vi.mock('@/components/dashboards/dashboard-controls', () => ({
-  DashboardControls: (props: unknown) => {
-    mocks.controls(props)
-    return null
-  },
-}))
-vi.mock('@/components/dashboards/dashboard-layout', () => ({
-  DashboardLayout: (props: unknown) => {
-    mocks.layout(props, useDashboardInteractions())
-    return null
-  },
-}))
+/** Panels would issue analytics requests; this suite exercises the controls and query cache. */
+vi.mock('@/components/dashboards/dashboard-layout', () => ({ DashboardLayout: () => null }))
+
 const content =
   'title: Example\ntime: 7d\nsource: {tableId: table-1}\nblocks: [{stat: Total, source: {aggregate: {total: {op: count}}}}]'
-const zoom = { from: '2026-09-20T17:26:54.766Z', to: '2026-09-21T03:49:57.697Z' }
+const range = { from: '2026-09-17T00:00:00.000Z', to: '2026-09-24T00:00:00.000Z' }
 
-describe('dashboard view state', () => {
+describe('dashboard refresh', () => {
   let root: Root
+  let container: HTMLDivElement
   let client: QueryClient
   beforeEach(() => {
-    mocks.timezone.mockReturnValue('America/Los_Angeles')
     vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
     client = new QueryClient()
-    root = createRoot(document.createElement('div'))
+    container = document.createElement('div')
+    document.body.append(container)
+    root = createRoot(container)
   })
   afterEach(() => {
     act(() => root.unmount())
+    container.remove()
     client.clear()
-    vi.unstubAllGlobals()
   })
-  async function render(searchParams = '') {
-    await act(async () =>
-      root.render(
-        <QueryClientProvider client={client}>
-          <NuqsTestingAdapter hasMemory searchParams={searchParams} onUrlUpdate={mocks.url}>
-            <DashboardPreview content={content} workspaceId='workspace-1' fileId='example' />
-          </NuqsTestingAdapter>
-        </QueryClientProvider>
-      )
-    )
-  }
-  const controls = () => mocks.controls.mock.lastCall![0]
-  const layout = () => mocks.layout.mock.lastCall![0]
-  const interactions = () => mocks.layout.mock.lastCall![1]
 
-  it.each(['America/Los_Angeles', 'Asia/Tokyo'])(
-    'defaults to the viewer timezone %s and allows UTC without changing the interval',
-    async (timezone) => {
-      mocks.timezone.mockReturnValue(timezone)
-      await render()
-      expect(controls().zone).toBe('local')
-      expect(interactions().timeZone).toBe(timezone)
-      const original = layout().range
-      await act(async () => controls().onZoneChange('utc'))
-      expect(interactions().timeZone).toBe('UTC')
-      expect(layout().range).toEqual(original)
-      await vi.waitFor(() => {
-        expect(mocks.url.mock.lastCall![0].searchParams.get('dash-example-zone')).toBe('utc')
-      })
-      await act(async () => controls().onZoneChange('local'))
-      expect(interactions().timeZone).toBe(timezone)
-      await vi.waitFor(() => {
-        expect(mocks.url.mock.lastCall![0].searchParams.has('dash-example-zone')).toBe(false)
-      })
-    }
-  )
-
-  it('sets exact shared bounds without navigation and leaves zoom by choosing a preset', async () => {
-    await render()
-    await act(async () => interactions().onZoom(zoom))
-    expect(layout().range).toEqual(zoom)
-    expect(controls().period).toBe('custom')
-    await vi.waitFor(() => expect(mocks.url.mock.lastCall?.[0].options.shallow).toBe(true))
-    await act(async () => controls().onPeriodChange('7d'))
-    expect(controls().period).toBe('7d')
-    expect(Date.parse(layout().range.to) - Date.parse(layout().range.from)).toBe(7 * 86400000)
-  })
-  it('commits the calendar dates and custom mode together, preserving the view on invalid input', async () => {
-    await render('?dash-example-range=30d&dash-example-zone=utc')
-    expect(controls().zone).toBe('utc')
-    await act(async () => {
-      expect(controls().onCalendarChange('2026-09-17T00:00', '2026-09-23T23:59:59')).toBe(true)
-    })
-    expect(controls().period).toBe('custom')
-    expect(layout().range).toEqual({
-      from: '2026-09-17T00:00:00.000Z',
-      to: '2026-09-24T00:00:00.000Z',
-    })
-    const selected = layout().range
-    await act(async () => {
-      expect(controls().onCalendarChange('invalid', 'invalid')).toBe(false)
-    })
-    expect(layout().range).toEqual(selected)
-  })
-  it('keeps exact bounds through repeated zooms and timezone changes', async () => {
-    await render(
-      '?dash-example-range=custom&dash-example-from=2026-09-17T00:00:00&dash-example-to=2026-09-24T00:00:00'
-    )
-    await act(async () => interactions().onZoom(zoom))
-    const selected = { ...zoom, to: '2026-09-20T18:00:00.000Z' }
-    await act(async () => interactions().onZoom(selected))
-    expect(layout().range).toEqual(selected)
-    await act(async () => controls().onZoneChange('utc'))
-    expect(layout().range).toEqual(selected)
-    expect(controls().zone).toBe('utc')
-  })
-  it('refreshes custom-range queries only for this workspace and this dashboard tables', async () => {
+  it('refreshes only this workspace and this dashboard tables', async () => {
     const key = (workspaceId: string, tableId: string) =>
       tableAnalyticsKeys.query(tableId, {
         workspaceId,
-        query: { ...zoom, aggregate: { total: { op: 'count' } } },
+        query: { ...range, aggregate: { total: { op: 'count' } } },
       })
     const matching = key('workspace-1', 'table-1')
     const otherTable = key('workspace-1', 'other-table')
     const otherWorkspace = key('workspace-2', 'table-1')
     for (const queryKey of [matching, otherTable, otherWorkspace]) client.setQueryData(queryKey, {})
-    await render(
-      '?dash-example-range=custom&dash-example-from=2026-09-17T00:00:00&dash-example-to=2026-09-24T00:00:00'
+    await act(async () =>
+      root.render(
+        <QueryClientProvider client={client}>
+          <NuqsTestingAdapter
+            hasMemory
+            searchParams='?dash-example-range=custom&dash-example-from=2026-09-17T00:00:00&dash-example-to=2026-09-24T00:00:00&dash-example-zone=utc'
+          >
+            <DashboardPreview content={content} workspaceId='workspace-1' fileId='example' />
+          </NuqsTestingAdapter>
+        </QueryClientProvider>
+      )
     )
-    const original = layout().range
-    await act(async () => controls().onRefresh())
-    expect(layout().range).toEqual(original)
+    const refresh = await vi.waitFor(() => {
+      const button = container.querySelector<HTMLButtonElement>(
+        'button[aria-label="Refresh dashboard"]'
+      )
+      if (!button) throw new Error('Refresh button not rendered')
+      return button
+    })
+    await act(async () => refresh.click())
     expect(client.getQueryState(matching)?.isInvalidated).toBe(true)
     expect(client.getQueryState(otherTable)?.isInvalidated).toBe(false)
     expect(client.getQueryState(otherWorkspace)?.isInvalidated).toBe(false)

apps/sim/lib/charts/theme.test.ts

@@ -1,4 +1,5 @@
 /** @vitest-environment node */
+import { toRecord } from '@sim/utils/object'
 import { describe, expect, it } from 'vitest'
 import { applyChartTooltipDefaults, formatBarTooltip, formatPieTooltip } from '@/lib/charts/theme'
 
@@ -77,6 +78,24 @@ describe('pie tooltips', () => {
     ).toMatchObject({ formatter: '{b}: {d}%' })
   })
 
+  it('formats pies encoded by dimension index with the encoded measure', () => {
+    const option = applyChartTooltipDefaults({
+      series: [{ type: 'pie', encode: { itemName: 0, value: 1 } }],
+    })
+    const formatter = toRecord(option.tooltip).formatter
+    if (typeof formatter !== 'function') throw new Error('Expected the pie tooltip formatter')
+    expect(
+      formatter({
+        seriesIndex: 0,
+        name: 'Human resolved',
+        value: ['Human resolved', 437],
+        dimensionNames: ['topic', 'tickets'],
+        encode: { value: [1] },
+        percent: 25,
+      })
+    ).toBe('Human resolved: 437 (25%)')
+  })
+
   it('keeps native formatting for pies with automatic encodings', () => {
     expect(
       applyChartTooltipDefaults({

apps/sim/lib/charts/theme.ts

@@ -75,12 +75,18 @@ export function applyChartTooltipDefaults(option: Record<string, unknown>) {
       const encoded = toRecord(toRecord(entry).encode).value
       return Array.isArray(encoded) ? encoded[0] : encoded
     })
-    /** Native formatting handles automatic encodings; table charts supply named measures. */
-    if (!valueFields.every((field): field is string => typeof field === 'string')) return option
+    /**
+     * Native formatting handles automatic encodings. Table charts name their measure; indexed
+     * encodings resolve through the encode and dimension names ECharts passes the formatter.
+     */
+    if (!valueFields.every((field) => typeof field === 'string' || typeof field === 'number'))
+      return option
     option.tooltip = mapTooltipEntries(option.tooltip, (tooltip) => ({
       trigger: 'item',
-      formatter: (params: unknown) =>
-        formatPieTooltip(params, valueFields[Number(toRecord(params).seriesIndex)]),
+      formatter: (params: unknown) => {
+        const field = valueFields[Number(toRecord(params).seriesIndex)]
+        return formatPieTooltip(params, typeof field === 'string' ? field : undefined)
+      },
       ...tooltip,
     }))
   }