Render live charts without server hydration

Author: Sg312

apps/sim/app/api/files/public/[token]/content/route.ts

@@ -12,7 +12,7 @@ import { enforcePublicFileRateLimit } from '@/lib/public-shares/rate-limit'
 import { resolveActiveShareByToken } from '@/lib/public-shares/share-manager'
 import { downloadFile } from '@/lib/uploads/core/storage-service'
 import { resolveServableImageBytes } from '@/lib/uploads/server/image-derivative'
-import { isSimPageSource } from '@/lib/workspace-files/page-compile'
+import { isSimPageSource, SIM_PAGE_CONTENT_TYPE } from '@/lib/workspace-files/page-compile'
 import { renderSimPageDocumentWithAssets } from '@/lib/workspace-files/page-document.server'
 import {
   createErrorResponse,
@@ -92,7 +92,10 @@ export const GET = withRouteHandler(
         buffer = servable.buffer
         contentType = servable.contentType
       } else if (
-        file.originalName.toLowerCase().endsWith('.html') &&
+        // Sim pages store an extensionless name — the record type marks them;
+        // legacy pages still carry .html.
+        (file.contentType === SIM_PAGE_CONTENT_TYPE ||
+          file.originalName.toLowerCase().endsWith('.html')) &&
         isSimPageSource(raw.toString('utf8'))
       ) {
         // The pdf model for pages: the stored .html is source; a share serves

apps/sim/app/api/files/serve/[...path]/route.ts

@@ -22,7 +22,7 @@ import { resolveStoredFileContext } from '@/lib/uploads/server/metadata'
 import { inferContextFromKey } from '@/lib/uploads/utils/file-utils'
 import { internalWorkspaceFileServeAuth } from '@/lib/workspace-files/api'
 import { readWorkspaceFileContentByKey } from '@/lib/workspace-files/application/read-workspace-file-content-by-key'
-import { isSimPageSource } from '@/lib/workspace-files/page-compile'
+import { isSimPageSource, SIM_PAGE_CONTENT_TYPE } from '@/lib/workspace-files/page-compile'
 import { renderSimPageDocumentWithAssets } from '@/lib/workspace-files/page-document.server'
 import { verifyFileAccess } from '@/app/api/files/authorization'
 import {
@@ -78,27 +78,34 @@ async function resolveServableBytes(params: {
   options: ServeOptions
   ownerKey: string | undefined
   filePrincipal?: Principal
+  /** The stored record's content type, where the caller has the record. */
+  fileType?: string
   signal: AbortSignal | undefined
 }): Promise<{ buffer: Buffer; contentType: string }> {
-  const { buffer, filename, storageKey, workspaceId, options, ownerKey, filePrincipal, signal } =
-    params
+  const {
+    buffer,
+    filename,
+    storageKey,
+    workspaceId,
+    options,
+    ownerKey,
+    filePrincipal,
+    fileType,
+    signal,
+  } = params
   if (options.raw) return { buffer, contentType: getContentType(filename) }
 
-  // The pdf model for pages: a `.html` file stores its SOURCE (frontmatter +
+  // The pdf model for pages: a page file stores its SOURCE (frontmatter +
   // markdown + sim: fences) and serving compiles it to the rendered document,
   // the same way a .pdf key stores its script and serves the binary. Raw
   // requests above still return the source; bespoke/legacy HTML falls through
-  // untouched.
-  if (filename.toLowerCase().endsWith('.html')) {
+  // untouched. Sim pages store an EXTENSIONLESS name — the record type marks
+  // them; legacy pages still carry .html.
+  if (fileType === SIM_PAGE_CONTENT_TYPE || filename.toLowerCase().endsWith('.html')) {
     const text = buffer.toString('utf8')
     if (isSimPageSource(text)) {
       return {
-        buffer: Buffer.from(
-          // The principal lets referenced table-backed charts read CURRENT
-          // rows under the viewer's own authorization on every serve.
-          await renderSimPageDocumentWithAssets(text, { workspaceId, principal: filePrincipal }),
-          'utf8'
-        ),
+        buffer: Buffer.from(await renderSimPageDocumentWithAssets(text, { workspaceId }), 'utf8'),
         contentType: 'text/html',
       }
     }
@@ -293,6 +300,7 @@ async function handleWorkspaceFile(
     options,
     ownerKey,
     filePrincipal: principal,
+    fileType: file.type,
     signal: request.signal,
   })
 

apps/sim/app/api/files/utils.ts

@@ -237,15 +237,18 @@ export function encodeFilenameForHeader(storageKey: string): string {
 }
 
 export function createFileResponse(file: FileResponse): NextResponse {
-  const { contentType, disposition } = getSecureFileHeaders(file.filename, file.contentType)
-
   // Sim pages store an extensionless name and serve/download as compiled
   // HTML — re-append the extension so the saved file opens in a browser.
+  // Decided from the CALLER's content type (getSecureFileHeaders downgrades
+  // text/html), and BEFORE the header decision, so the .html name gets the
+  // same forced-attachment treatment a legacy .html file gets.
   const servedFilename =
-    contentType === 'text/html' && !/\.[A-Za-z0-9]{1,8}$/.test(file.filename)
+    file.contentType === 'text/html' && !/\.[A-Za-z0-9]{1,8}$/.test(file.filename)
       ? `${file.filename}.html`
       : file.filename
 
+  const { contentType, disposition } = getSecureFileHeaders(servedFilename, file.contentType)
+
   const headers: Record<string, string> = {
     'Content-Type': contentType,
     'Content-Disposition': `${disposition}; ${encodeFilenameForHeader(servedFilename)}`,

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

@@ -5,33 +5,41 @@ import { getErrorMessage } from '@sim/utils/errors'
 import type { EChartsOption } from 'echarts'
 import { useTheme } from 'next-themes'
 import { buildChartRenderOption } from '@/lib/charts/option'
-import { type ChartSpec, parseChartSpec, shapeTableRows } from '@/lib/charts/spec'
-import { getColumnId } from '@/lib/table/column-keys'
+import {
+  CHART_ROWS_DEFAULT,
+  CHART_ROWS_MAX,
+  type ChartSpec,
+  mapRowsToColumnNames,
+  parseChartSpec,
+  shapeTableRows,
+} from '@/lib/charts/spec'
 import { useTable, useTableRowsSample } from '@/hooks/queries/tables'
 import { PreviewLoadingFrame } from './preview-shared'
 
-/** Hard cap on rows a table-backed chart pulls; the spec's `limit` clamps under it. */
-const CHART_ROWS_MAX = 5000
-const CHART_ROWS_DEFAULT = 1000
-
 function buildOption(spec: ChartSpec, rows: Array<Record<string, unknown>> | null): EChartsOption {
   return buildChartRenderOption({ title: spec.title, option: spec.option, rows }) as EChartsOption
 }
 
+function ChartErrorCard({ message, content }: { message: string; content: string }) {
+  return (
+    <div className='overflow-hidden rounded-lg border border-[var(--border)]'>
+      <div className='flex items-center justify-between border-[var(--border)] border-b bg-[var(--surface-3)] px-3 py-1.5'>
+        <span className='text-[11px] text-[var(--text-tertiary)]'>chart</span>
+        <span className='text-[11px] text-[var(--text-muted)]'>{message}</span>
+      </div>
+      <div className='code-editor-theme bg-[var(--surface-5)]'>
+        <pre className='m-0 overflow-x-auto whitespace-pre p-4 font-mono text-[13px] text-[var(--text-primary)] leading-[1.6]'>
+          <code>{content}</code>
+        </pre>
+      </div>
+    </div>
+  )
+}
+
 function ChartErrorPanel({ message, content }: { message: string; content: string }) {
   return (
     <div className='min-h-0 flex-1 overflow-auto p-6'>
-      <div className='overflow-hidden rounded-lg border border-[var(--border)]'>
-        <div className='flex items-center justify-between border-[var(--border)] border-b bg-[var(--surface-3)] px-3 py-1.5'>
-          <span className='text-[11px] text-[var(--text-tertiary)]'>chart</span>
-          <span className='text-[11px] text-[var(--text-muted)]'>{message}</span>
-        </div>
-        <div className='code-editor-theme bg-[var(--surface-5)]'>
-          <pre className='m-0 overflow-x-auto whitespace-pre p-4 font-mono text-[13px] text-[var(--text-primary)] leading-[1.6]'>
-            <code>{content}</code>
-          </pre>
-        </div>
-      </div>
+      <ChartErrorCard message={message} content={content} />
     </div>
   )
 }
@@ -92,20 +100,7 @@ export const ChartPreview = memo(function ChartPreview({
     const fetched = rowsQuery.data?.rows
     const columns = tableQuery.data?.schema.columns
     if (!fetched || !columns) return null
-    // Row data is stored keyed by column ID (an opaque uuid); chart specs —
-    // like the mothership table tool and the public API — speak column NAMES.
-    // Remap so `encode`/dimension references in the option match what the
-    // author sees in the table UI.
-    const nameByStorageKey = new Map<string, string>()
-    for (const col of columns) nameByStorageKey.set(getColumnId(col), col.name)
-    const named = fetched.map((row) => {
-      const out: Record<string, unknown> = {}
-      for (const [key, value] of Object.entries(row.data)) {
-        out[nameByStorageKey.get(key) ?? key] = value
-      }
-      return out
-    })
-    return shapeTableRows(named, tableSource)
+    return shapeTableRows(mapRowsToColumnNames(fetched, columns), tableSource)
   }, [spec, tableSource, rowsQuery.data, tableQuery.data])
 
   const option = useMemo(() => (spec ? buildOption(spec, rows) : null), [spec, rows])
@@ -141,7 +136,6 @@ export const ChartPreview = memo(function ChartPreview({
     return <ChartErrorPanel message={parseError} content={content} />
   }
   if (loadError) return <ChartErrorPanel message={loadError} content={content} />
-  if (renderError) return <ChartErrorPanel message={renderError} content={content} />
   if (tableSource && rowsQuery.isError) {
     return (
       <ChartErrorPanel
@@ -164,9 +158,16 @@ export const ChartPreview = memo(function ChartPreview({
   // Width-driven aspect box, not full-bleed: a chart stretched to the whole
   // panel height is unreadable in a tall resource pane. ECharts follows the
   // box through the ResizeObserver above.
+  //
+  // A render error (setOption threw) HIDES the chart box rather than
+  // unmounting it: the render effect only re-runs when the option changes,
+  // and it needs the container mounted at that moment to re-initialize —
+  // an unmounted container would leave the fixed chart blank until a
+  // second edit.
   return (
     <div className='min-h-0 flex-1 overflow-auto p-6'>
-      <div className='relative mx-auto w-full max-w-[1024px]'>
+      {renderError !== null && <ChartErrorCard message={renderError} content={content} />}
+      <div className={renderError !== null ? 'hidden' : 'relative mx-auto w-full max-w-[1024px]'}>
         {(!echartsLib || waitingOnRows) && (
           <PreviewLoadingFrame className='absolute inset-0 z-10' />
         )}

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

@@ -24,9 +24,12 @@ import { ZoomablePreview } from './zoomable-preview'
 type PreviewType = 'markdown' | 'html' | 'csv' | 'svg' | 'mermaid' | 'chart' | null
 
 const PREVIEWABLE_MIME_TYPES: Record<string, PreviewType> = {
+  // Sim pages store an EXTENSIONLESS name — without this mapping the record
+  // type resolves to no preview at all and the viewer renders a blank pane
+  // (including the live compile-as-it-streams view).
+  'text/x-sim-page': 'html',
   'text/markdown': 'markdown',
   'text/html': 'html',
-  'text/x-sim-page': 'html',
   'text/csv': 'csv',
   'image/svg+xml': 'svg',
   'text/x-mermaid': 'mermaid',
@@ -187,7 +190,7 @@ export function buildHtmlPreviewDocument(
     // token overrides follow the sheet so the app's live values beat its
     // fallbacks, and the shell follows both.
     usesSimArtifactStyles(content)
-      ? `<style>${SIM_ARTIFACT_STYLESHEET}</style><style>${simTokenOverrides()}</style>${SIM_ARTIFACT_SHELL}`
+      ? `<style>${SIM_ARTIFACT_STYLESHEET}</style><style>${simTokenOverrides(theme)}</style>${SIM_ARTIFACT_SHELL}`
       : '',
     HTML_PREVIEW_BOOTSTRAP,
   ].join('')
@@ -347,6 +350,16 @@ const HtmlPreview = memo(function HtmlPreview({
       if (href.startsWith('/workspace/')) {
         router.push(href)
       } else if (/^https?:\/\//i.test(href)) {
+        // The server-compiled document absolutizes workspace links (so a
+        // DOWNLOADED copy reaches Sim) — recognize our own origin and route
+        // in-app rather than spawning a new tab of the whole app.
+        try {
+          const url = new URL(href)
+          if (url.origin === window.location.origin && url.pathname.startsWith('/workspace/')) {
+            router.push(`${url.pathname}${url.search}${url.hash}`)
+            return
+          }
+        } catch {}
         window.open(href, '_blank', 'noopener,noreferrer')
       }
     }

apps/sim/lib/charts/fence.ts

@@ -1,7 +1,6 @@
 /**
- * Shared ECharts option assembly for Sim chart surfaces — the `.chart` file
- * viewer (client) and the sim-page `sim:chart` SSR renderer (server). Pure:
- * no React, no echarts import, JSON-in/JSON-out.
+ * ECharts option assembly for the `.chart` file viewer. Pure: no React, no
+ * echarts import, JSON-in/JSON-out.
  *
  * Chrome layout is Sim-owned, content is spec-owned. Models reliably produce
  * colliding title/legend placements, so the renderer pins the title top-left