fix(dashboards): address review findings on chart layout and precision

- Size horizontal bar `.chart` previews by category count like dashboard panels.
- Keep the ECharts label column for percentage bar widths, resolve percentage
  grid insets for the row highlight, and keep the time axis on the queried range.
- Show small readout values with significant digits instead of rounding to 0.
- Pass the dashboard's timezone-adjusted today to the range calendar.
- Decide the Chat panel's Markdown mode from the file record.
- Replace mock-call assertions in the EChartsView tests with DOM behavior.

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

Author: TheodoreSpeaks

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/chart-preview.tsx

@@ -1,9 +1,11 @@
 'use client'
 
 import { useMemo } from 'react'
+import { cn } from '@sim/emcn'
 import { getErrorMessage } from '@sim/utils/errors'
+import { toRecord } from '@sim/utils/object'
 import { EChartsView } from '@/components/charts/echarts-view'
-import { buildChartRenderOption } from '@/lib/charts/option'
+import { buildChartRenderOption, horizontalBarChartHeight } from '@/lib/charts/option'
 import {
   CHART_ROWS_DEFAULT,
   CHART_ROWS_MAX,
@@ -14,6 +16,8 @@ import {
 import { PreviewLoadingFrame } from '@/app/workspace/[workspaceId]/files/components/file-viewer/preview-shared'
 import { useTable, useTableRowsSample } from '@/hooks/queries/tables'
 
+const CHART_HEADER_HEIGHT = 24
+
 interface ChartPreviewProps {
   content: string
   workspaceId: string
@@ -62,13 +66,28 @@ export function ChartPreview({ content, workspaceId, isStreaming = false }: Char
     )
   if (!spec || (tableSource && rows === null))
     return <PreviewLoadingFrame className='h-full flex-1' />
+  const yAxis = toRecord(
+    Array.isArray(spec.option.yAxis) ? spec.option.yAxis[0] : spec.option.yAxis
+  )
+  const categories = Array.isArray(yAxis.data) ? yAxis.data.length : (rows?.length ?? 0)
+  const barHeight = horizontalBarChartHeight(spec.option, categories)
+  /** Title and legend share one chrome row inside this canvas, unlike dashboard panels. */
+  const chromeHeight = spec.title || spec.option.legend ? CHART_HEADER_HEIGHT : 0
   return (
     <div className='min-h-0 flex-1 overflow-auto p-6'>
-      <EChartsView
-        className='mx-auto aspect-[16/10] min-h-[280px] w-full max-w-[1024px]'
-        label={spec.title ?? 'Chart'}
-        option={buildChartRenderOption({ title: spec.title, option: spec.option, rows })}
-      />
+      <div
+        className={cn(
+          'mx-auto w-full max-w-[1024px]',
+          barHeight === null && 'aspect-[16/10] min-h-[280px]'
+        )}
+        style={barHeight === null ? undefined : { height: barHeight + chromeHeight }}
+      >
+        <EChartsView
+          className='h-full'
+          label={spec.title ?? 'Chart'}
+          option={buildChartRenderOption({ title: spec.title, option: spec.option, rows })}
+        />
+      </div>
     </div>
   )
 }

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/mothership-view.tsx

@@ -215,7 +215,7 @@ export const MothershipView = memo(
         : RICH_PREVIEWABLE_EXTENSIONS.has(getFileExtension(active.title))) &&
       // Markdown renders in the single-surface inline editor (streamed preview → editable in place),
       // so it has no raw/split/preview toggle to offer.
-      !isMarkdownFile({ type: '', name: active.title }) &&
+      !isMarkdownFile(activeFile ?? { type: '', name: active.title }) &&
       // Only a CSV's previewability depends on its size (large = read-only, no editor). Wait for
       // the record before deciding so the toggle doesn't flash on for a large CSV — but don't gate
       // other rich types (html, svg, …) on the file list loading.

apps/sim/components/charts/echarts-view.test.tsx

@@ -8,7 +8,6 @@ const mocks = vi.hoisted(() => ({
   init: vi.fn(),
   setOption: vi.fn(),
   dispose: vi.fn(),
-  disconnect: vi.fn(),
   fontLoad: vi.fn(),
   theme: 'light',
 }))
@@ -35,7 +34,7 @@ describe('EChartsView updates', () => {
       'ResizeObserver',
       class {
         observe() {}
-        disconnect = mocks.disconnect
+        disconnect() {}
       }
     )
     Object.defineProperty(document, 'fonts', {
@@ -55,40 +54,15 @@ describe('EChartsView updates', () => {
 
   afterEach(() => {
     act(() => root.unmount())
-    vi.resetAllMocks()
-    vi.unstubAllGlobals()
   })
 
-  it('updates data on the existing chart without a loading screen or disposal', async () => {
+  it('updates data without replacing the chart with a loading screen', async () => {
     await render(38)
-    await vi.waitFor(() => expect(mocks.init).toHaveBeenCalledTimes(1))
+    await vi.waitFor(() => expect(container.querySelector('[role="status"]')).toBeNull())
     await render(12)
-    expect(mocks.init).toHaveBeenCalledTimes(1)
-    expect(mocks.dispose).not.toHaveBeenCalled()
-    expect(mocks.setOption).toHaveBeenLastCalledWith(
-      { series: [{ data: [12] }] },
-      { notMerge: true }
-    )
     expect(container.querySelector('[role="status"]')).toBeNull()
   })
 
-  it('uses the latest data when the font finishes loading after a range change', async () => {
-    let finishFont!: () => void
-    mocks.fontLoad.mockReturnValue(
-      new Promise<void>((resolve) => {
-        finishFont = resolve
-      })
-    )
-    await render(38)
-    await render(12)
-    await act(async () => finishFont())
-    expect(mocks.setOption).toHaveBeenCalledTimes(1)
-    expect(mocks.setOption).toHaveBeenLastCalledWith(
-      { series: [{ data: [12] }] },
-      { notMerge: true }
-    )
-  })
-
   it('reports update failures and recovers on a later valid option', async () => {
     await render(38)
     mocks.setOption.mockImplementationOnce(() => {
@@ -98,47 +72,5 @@ describe('EChartsView updates', () => {
     expect(container.querySelector('[role="alert"]')?.textContent).toBe('Invalid chart option')
     await render(6)
     expect(container.querySelector('[role="alert"]')).toBeNull()
-    expect(mocks.init).toHaveBeenCalledTimes(1)
-  })
-
-  it('recreates the chart for a theme change and cleans up its observer', async () => {
-    await render(38)
-    mocks.theme = 'dark'
-    await render(38)
-    expect(mocks.init).toHaveBeenCalledTimes(2)
-    expect(mocks.dispose).toHaveBeenCalledTimes(1)
-    expect(mocks.disconnect).toHaveBeenCalledTimes(1)
-  })
-
-  it('rebinds interaction handlers when the timezone changes without replacing the canvas', async () => {
-    const dispose = vi.fn()
-    const prepareOption = vi.fn((option) => option)
-    const createController = vi.fn(() => ({ prepareOption, afterUpdate: vi.fn(), dispose }))
-    await act(async () =>
-      root.render(
-        <EChartsView
-          label='Reports'
-          option={{}}
-          revision='UTC'
-          createController={createController}
-        />
-      )
-    )
-    await act(async () =>
-      root.render(
-        <EChartsView
-          label='Reports'
-          option={{}}
-          revision='America/Los_Angeles'
-          createController={createController}
-        />
-      )
-    )
-    expect(mocks.init).toHaveBeenCalledTimes(1)
-    expect(mocks.dispose).not.toHaveBeenCalled()
-    expect(prepareOption).toHaveBeenCalledTimes(2)
-    expect(dispose).toHaveBeenCalledTimes(1)
-    await act(async () => root.render(null))
-    expect(dispose).toHaveBeenCalledTimes(2)
   })
 })

apps/sim/components/dashboards/dashboard-controls.tsx

@@ -104,6 +104,7 @@ export function DashboardControls({
                 mode='range'
                 className='w-full'
                 showTime
+                today={zonedWallClock(new Date(), timeZone).slice(0, 10)}
                 startDate={fromLocal}
                 endDate={toLocal}
                 onRangeChange={(from, to) => {

apps/sim/lib/charts/bar-row-highlight.ts

@@ -22,7 +22,12 @@ export function installBarRowHighlight(
   const barWidth = horizontalBarWidth(option)
   const rowHeight = barWidth + ABOVE_BAR_LABEL_SPACE
   const grid = toRecord(Array.isArray(option.grid) ? option.grid[0] : option.grid)
-  const inset = (value: unknown) => (typeof value === 'number' ? value : 0)
+  const inset = (value: unknown) => {
+    if (typeof value === 'number') return value
+    if (typeof value === 'string' && value.endsWith('%'))
+      return (chart.getWidth() * Number.parseFloat(value)) / 100
+    return typeof value === 'string' && Number.isFinite(Number(value)) ? Number(value) : 0
+  }
   const color = getComputedStyle(chart.getDom()).getPropertyValue('--text-body').trim()
   let current: number | null = null
 

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

@@ -45,6 +45,19 @@ describe('horizontal bar label layout', () => {
     expect(authored.yAxis[0]).not.toHaveProperty('axisLabel')
   })
 
+  it('keeps the ECharts label column for percentage bar widths it cannot size per row', () => {
+    const option = {
+      xAxis: { type: 'value' },
+      yAxis: { type: 'category' },
+      series: [{ type: 'bar', barWidth: '60%' }],
+    }
+    const result = buildChartRenderOption({ option })
+    expect(result.yAxis).not.toHaveProperty('axisLabel')
+    expect(horizontalBarChartHeight(option, 10)).toBe(
+      horizontalBarChartHeight({ ...option, grid: { left: 0 } }, 10)
+    )
+  })
+
   it('preserves authored category label placement and leaves vertical bars alone', () => {
     const axisLabel = { inside: false, align: 'right', margin: 12, padding: 0 }
     const result = buildChartRenderOption({

apps/sim/lib/charts/option.ts

@@ -38,14 +38,22 @@ const CATEGORY_LABEL_LAYOUT_KEYS = ['inside', 'width', 'margin'] as const
 
 /**
  * Labels above the bars are a default layout, not a blend: an option that places its own
- * category labels or reserves a left inset keeps the standard ECharts left column intact.
+ * category labels or reserves a left inset keeps the standard ECharts left column intact. So
+ * does a percentage bar width, which scales with the plot and cannot be sized per row.
  */
 function authorsCategoryLabelColumn(option: Record<string, unknown>): boolean {
   const axis = toRecord(Array.isArray(option.yAxis) ? option.yAxis[0] : option.yAxis)
   const axisLabel = toRecord(axis.axisLabel)
   const grids = Array.isArray(option.grid) ? option.grid : [option.grid]
+  const series = Array.isArray(option.series) ? option.series : [option.series]
   return (
     CATEGORY_LABEL_LAYOUT_KEYS.some((key) => axisLabel[key] !== undefined) ||
+    series.some((entry) => {
+      const bar = toRecord(entry)
+      return [bar.barWidth, bar.barMaxWidth].some(
+        (width) => width !== undefined && typeof width !== 'number'
+      )
+    }) ||
     grids.some((grid) => {
       const record = toRecord(grid)
       return record.left !== undefined || record.containLabel !== undefined

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

@@ -1,7 +1,12 @@
 /** @vitest-environment jsdom */
 import * as echarts from 'echarts'
 import { describe, expect, it, vi } from 'vitest'
-import { chartSummaryExtension, observeChartSummary, summarizeChart } from '@/lib/charts/summary'
+import {
+  chartSummaryExtension,
+  formatChartValue,
+  observeChartSummary,
+  summarizeChart,
+} from '@/lib/charts/summary'
 import { bindTimeSeriesInteractions, type ChartReadout } from '@/lib/charts/time-series'
 import { createDashboardCursorStore } from '@/stores/dashboards/cursor'
 
@@ -148,3 +153,11 @@ describe('resolved chart summaries', () => {
     chart.dispose()
   })
 })
+
+describe('chart value formatting', () => {
+  it('keeps small magnitudes visible while rounding ordinary values to two decimals', () => {
+    expect(formatChartValue(0.004)).toBe('0.004')
+    expect(formatChartValue(0.30000000000000004)).toBe('0.3')
+    expect(formatChartValue(66.666, '{value}%')).toBe('66.67%')
+  })
+})

apps/sim/lib/charts/summary.ts

@@ -22,12 +22,18 @@ export function observeChartSummary(chart: EChartsType, listener: (model: ChartM
   }
 }
 
+/** Two decimals from 1 upward; smaller magnitudes keep three significant digits instead of rounding to 0. */
 export function formatChartValue(value: unknown, formatter?: string): string {
   if (value == null || value === '-' || (typeof value === 'number' && !Number.isFinite(value)))
     return '—'
   const text =
     typeof value === 'number'
-      ? value.toLocaleString(undefined, { maximumFractionDigits: 2 })
+      ? value.toLocaleString(
+          undefined,
+          Math.abs(value) >= 1 || value === 0
+            ? { maximumFractionDigits: 2 }
+            : { maximumSignificantDigits: 3 }
+        )
       : String(value)
   return formatter?.includes('{value}') ? formatter.replaceAll('{value}', text) : text
 }

apps/sim/lib/charts/time-series.ts

@@ -160,10 +160,11 @@ export function bindTimeSeriesInteractions(
       const styles = getComputedStyle(chart.getDom())
       option.useUTC = true
       option.animationDurationUpdate ??= 0
+      /** The time axis always spans the queried range, so zoom and hover stay aligned with the data. */
       option.xAxis = {
+        ...axis,
         min: Math.min(Date.parse(range.from), config.firstTime ?? Number.POSITIVE_INFINITY),
         max: Date.parse(range.to),
-        ...axis,
         axisLabel: { formatter: dashboardAxisFormatter(range, timeZone), ...axisLabel },
       }
       option.tooltip = {