@sqlrooms/mosaic 0.29.0-rc.2 → 0.29.0-rc.4

package/dist/dashboard/MosaicDashboardSlice.js

@@ -1,127 +1,435 @@
 import { createId } from '@paralleldrive/cuid2';
-import { LayoutMosaicSubNode as LayoutMosaicSubNodeSchema } from '@sqlrooms/layout-config';
+import { DEFAULT_GRID_COLS, getGridColsForBreakpoint, } from '@sqlrooms/layout';
+import { isLayoutGridNode, isLayoutNodeKey, isLayoutPanelNode, isLayoutSplitNode, LayoutNode as LayoutNodeSchema, } from '@sqlrooms/layout-config';
 import { createSlice, useBaseRoomStore, } from '@sqlrooms/room-store';
 import { produce } from 'immer';
 import { z } from 'zod';
-export const DEFAULT_MOSAIC_DASHBOARD_CHART_VGPLOT = JSON.stringify({
-    $schema: 'https://idl.uw.edu/mosaic/schema/latest.json',
-    meta: {
-        title: 'New Chart',
-        description: 'Use the chart builder or edit the spec directly to visualize DuckDB tables.',
-    },
-    data: {
-        sample: {
-            type: 'table',
-            query: `
-          SELECT * FROM (
-            VALUES
-              ('A', 12),
-              ('B', 26),
-              ('C', 18),
-              ('D', 9)
-          ) AS t(category, amount)
-        `,
-        },
-    },
-    plot: [
-        {
-            mark: 'barY',
-            data: { from: 'sample' },
-            x: 'category',
-            y: 'amount',
-            fill: 'category',
-        },
-    ],
-    xLabel: 'Category',
-    yLabel: 'Amount',
-    width: 560,
-    height: 320,
-}, null, 2);
-export const DEFAULT_MOSAIC_DASHBOARD_CHART_SPEC = JSON.parse(DEFAULT_MOSAIC_DASHBOARD_CHART_VGPLOT);
-export const MosaicDashboardChartConfig = z.object({
+import { destroyRetainedVgPlotChart, } from '../VgPlotChart';
+import { ChartConfig } from '../chart-types/chart-config';
+/**
+ * Panel key used for function-form panel definitions registered by
+ * `MosaicDashboardPanels`. Individual dashboard panels are represented as
+ * `LayoutPanelNode` entries whose `panel` property carries
+ * `{ key: MOSAIC_DASHBOARD_PANEL, meta: { dashboardId, panelId } }`.
+ */
+export const MOSAIC_DASHBOARD_PANEL = 'mosaic-dashboard-panel';
+export const MOSAIC_DASHBOARD_CHART_PANEL_TYPE = 'vgplot';
+export const MOSAIC_DASHBOARD_PROFILER_PANEL_TYPE = 'profiler';
+export const MOSAIC_DASHBOARD_TEXT_PANEL_TYPE = 'text';
+export const MosaicDashboardLayoutType = z.enum(['dock', 'grid']);
+export const MosaicDashboardPanelSource = z.object({
+    tableName: z.string().optional(),
+    sqlQuery: z.string().optional(),
+});
+// Profiler panel config
+export const ProfilerPanelConfig = z.object({
+    pageSize: z.number().optional(),
+});
+// Text panel config
+export const TextPanelConfig = z.object({
+    content: z.string().default(''),
+    toolbarOpen: z.boolean().default(true),
+    sourcePanelOpen: z.boolean().default(false),
+});
+// Panel configs discriminated by type
+export const ChartPanelConfig = z.object({
+    id: z.string(),
+    type: z.literal(MOSAIC_DASHBOARD_CHART_PANEL_TYPE),
+    title: z.string().default('Panel'),
+    source: MosaicDashboardPanelSource.optional(),
+    config: ChartConfig,
+});
+export const ProfilerPanel = z.object({
     id: z.string(),
-    title: z.string().default('Chart'),
-    vgplot: z
-        .object({})
-        .passthrough()
-        .default(DEFAULT_MOSAIC_DASHBOARD_CHART_SPEC),
+    type: z.literal(MOSAIC_DASHBOARD_PROFILER_PANEL_TYPE),
+    title: z.string().default('Panel'),
+    source: MosaicDashboardPanelSource.optional(),
+    config: ProfilerPanelConfig,
 });
+export const TextPanel = z.object({
+    id: z.string(),
+    type: z.literal(MOSAIC_DASHBOARD_TEXT_PANEL_TYPE),
+    title: z.string().default('Text'),
+    source: MosaicDashboardPanelSource.optional(),
+    config: TextPanelConfig,
+});
+// Legacy panel for backward compatibility
+export const LegacyPanelConfig = z.object({
+    id: z.string(),
+    type: z.string(),
+    title: z.string().default('Panel'),
+    source: MosaicDashboardPanelSource.optional(),
+    config: z.record(z.string(), z.unknown()).default({}),
+});
+// Discriminated union of all panel types
+export const MosaicDashboardPanelConfig = z
+    .discriminatedUnion('type', [ChartPanelConfig, ProfilerPanel, TextPanel])
+    .or(LegacyPanelConfig);
+export function createMosaicDashboardPanelConfig(options) {
+    return {
+        id: createId(),
+        type: options.type,
+        title: options.title,
+        source: options.source,
+        config: options.config ?? {},
+    };
+}
+export function createMosaicDashboardChartPanelConfig(title, config, source) {
+    return {
+        id: createId(),
+        type: MOSAIC_DASHBOARD_CHART_PANEL_TYPE,
+        title,
+        source,
+        config,
+    };
+}
+export function createMosaicDashboardProfilerPanelConfig(options = {}) {
+    return createMosaicDashboardPanelConfig({
+        type: MOSAIC_DASHBOARD_PROFILER_PANEL_TYPE,
+        title: options.title ?? 'Profiler',
+        source: options.source,
+        config: {
+            pageSize: options.pageSize ?? 10,
+        },
+    });
+}
+export function createMosaicDashboardTextPanelConfig(options = {}) {
+    return {
+        id: createId(),
+        type: MOSAIC_DASHBOARD_TEXT_PANEL_TYPE,
+        title: options.title ?? 'Text',
+        source: options.source,
+        config: {
+            content: options.content ?? '',
+        },
+    };
+}
 export const MosaicDashboardEntry = z.object({
     id: z.string(),
     title: z.string().default('Dashboard'),
+    layoutType: MosaicDashboardLayoutType.default('dock'),
     selectedTable: z.string().optional(),
-    charts: z.array(MosaicDashboardChartConfig).default([]),
-    layout: LayoutMosaicSubNodeSchema.nullable().default(null),
+    panels: z.array(MosaicDashboardPanelConfig).default([]),
+    layout: LayoutNodeSchema.nullable().default(null),
     updatedAt: z.number().default(0),
 });
 export const MosaicDashboardSliceConfig = z.object({
     dashboardsById: z.record(z.string(), MosaicDashboardEntry).default({}),
 });
-function appendPanelToLayout(layout, panelId) {
+// ---------------------------------------------------------------------------
+// Layout tree helpers (operate on the new LayoutNode types)
+// ---------------------------------------------------------------------------
+function createDashboardPanelNode(dashboardId, panelId) {
+    return {
+        type: 'panel',
+        id: getMosaicDashboardPanelId(dashboardId, panelId),
+        minSize: 200,
+        panel: {
+            key: MOSAIC_DASHBOARD_PANEL,
+            meta: { dashboardId, panelId },
+        },
+    };
+}
+function getDashboardPanelTypesByLayoutId(dashboardId, panels) {
+    return Object.fromEntries(panels.map((panel) => [
+        getMosaicDashboardPanelId(dashboardId, panel.id),
+        panel.type,
+    ]));
+}
+function appendPanelToLayout(layout, panelNode) {
     if (!layout) {
-        return panelId;
+        return panelNode;
     }
     return {
         type: 'split',
+        id: `split-${createId()}`,
         direction: 'row',
-        children: [layout, panelId],
+        children: [layout, panelNode],
     };
 }
-function removePanelFromLayout(layout, panelId) {
+function createDashboardGridLayout(dashboardId, panelNode) {
+    const children = panelNode ? [panelNode] : [];
+    const layouts = createDashboardGridLayoutsForChildren(children);
+    return {
+        type: 'grid',
+        id: getMosaicDashboardGridId(dashboardId),
+        children,
+        rowHeight: 150,
+        margin: [12, 12],
+        containerPadding: [0, 0],
+        compactType: 'vertical',
+        preventCollision: false,
+        resizeHandles: ['e', 's', 'w', 'se', 'sw'],
+        layouts,
+    };
+}
+function getLayoutChildId(node) {
+    return isLayoutNodeKey(node) ? node : node.id;
+}
+function createDashboardGridItem(panelId, layout, cols = 12, panelType) {
+    const effectiveCols = Math.max(1, cols);
+    const w = panelType === MOSAIC_DASHBOARD_PROFILER_PANEL_TYPE
+        ? effectiveCols
+        : Math.max(1, Math.ceil(effectiveCols / 2));
+    const h = 2;
+    const bottom = layout.reduce((max, item) => Math.max(max, item.y + item.h), 0);
+    for (let y = 0; y <= bottom; y += 1) {
+        for (let x = 0; x <= effectiveCols - w; x += 1) {
+            const overlaps = layout.some((item) => x < item.x + item.w &&
+                x + w > item.x &&
+                y < item.y + item.h &&
+                y + h > item.y);
+            if (!overlaps) {
+                return {
+                    i: panelId,
+                    x,
+                    y,
+                    w,
+                    h,
+                };
+            }
+        }
+    }
+    return {
+        i: panelId,
+        x: 0,
+        y: bottom,
+        w,
+        h,
+    };
+}
+function createDashboardGridLayoutsForChildren(children, sourceLayouts, cols, panelTypesByLayoutId = {}) {
+    const childIds = new Set(children.map((child) => getLayoutChildId(child)));
+    const sourceEntries = new Map(Object.keys(DEFAULT_GRID_COLS).map((breakpoint) => [breakpoint, []]));
+    for (const [breakpoint, breakpointLayout] of Object.entries(sourceLayouts ?? {})) {
+        sourceEntries.set(breakpoint, breakpointLayout);
+    }
+    return Object.fromEntries([...sourceEntries.entries()].map(([breakpoint, breakpointLayout]) => {
+        const nextLayout = breakpointLayout.filter((item) => childIds.has(item.i));
+        const layoutItemIds = new Set(nextLayout.map((item) => item.i));
+        for (const child of children) {
+            const childId = getLayoutChildId(child);
+            if (!layoutItemIds.has(childId)) {
+                const item = createDashboardGridItem(childId, nextLayout, getGridColsForBreakpoint(cols, breakpoint), panelTypesByLayoutId[childId]);
+                nextLayout.push(item);
+                layoutItemIds.add(childId);
+            }
+        }
+        return [breakpoint, nextLayout];
+    }));
+}
+function isExpectedDashboardPanelNode(node, expectedPanelIds) {
+    return expectedPanelIds.has(getLayoutChildId(node));
+}
+function collectDashboardPanelNodes(layout, expectedPanelIds, nodes = [], seen = new Set()) {
     if (!layout)
-        return null;
-    if (typeof layout === 'string') {
-        return layout === panelId ? null : layout;
+        return nodes;
+    if (isLayoutNodeKey(layout) || isLayoutPanelNode(layout)) {
+        if (isExpectedDashboardPanelNode(layout, expectedPanelIds)) {
+            const id = getLayoutChildId(layout);
+            if (!seen.has(id)) {
+                nodes.push(layout);
+                seen.add(id);
+            }
+        }
+        return nodes;
     }
-    const nextChildren = layout.children
-        .map((child) => removePanelFromLayout(child, panelId))
-        .filter((child) => child !== null);
-    if (nextChildren.length === 0)
-        return null;
-    if (nextChildren.length === 1) {
-        const onlyChild = nextChildren[0];
-        return onlyChild ?? null;
+    if (isLayoutSplitNode(layout) || isLayoutGridNode(layout)) {
+        for (const child of layout.children) {
+            collectDashboardPanelNodes(child, expectedPanelIds, nodes, seen);
+        }
+    }
+    return nodes;
+}
+function normalizeDashboardGridLayout(layout, dashboardId, expectedPanelIds, panelTypesByLayoutId = {}) {
+    const collectedPanelIds = collectPanelIds(layout);
+    const existingExpectedPanelIds = new Set([...expectedPanelIds].filter((panelId) => collectedPanelIds.has(panelId)));
+    const children = collectDashboardPanelNodes(layout, existingExpectedPanelIds);
+    const layouts = createDashboardGridLayoutsForChildren(children, isLayoutGridNode(layout) ? layout.layouts : undefined, isLayoutGridNode(layout) ? layout.cols : undefined, panelTypesByLayoutId);
+    if (isLayoutGridNode(layout)) {
+        return {
+            ...layout,
+            children,
+            layouts,
+        };
     }
+    return {
+        ...createDashboardGridLayout(dashboardId),
+        children,
+        layouts,
+    };
+}
+function appendPanelToGridLayout(layout, dashboardId, panelNode, panelType, panelTypesByLayoutId = {}) {
+    const nextPanelTypesByLayoutId = {
+        ...panelTypesByLayoutId,
+        [panelNode.id]: panelType ?? panelTypesByLayoutId[panelNode.id],
+    };
+    if (!isLayoutGridNode(layout)) {
+        const dashboardPanelPrefix = `dashboard:${dashboardId}:panel:`;
+        const expectedPanelIds = new Set([...collectPanelIds(layout)].filter((panelId) => panelId.startsWith(dashboardPanelPrefix)));
+        expectedPanelIds.add(panelNode.id);
+        const normalizedLayout = normalizeDashboardGridLayout(layout, dashboardId, expectedPanelIds, nextPanelTypesByLayoutId);
+        return appendPanelToGridLayout(normalizedLayout, dashboardId, panelNode, panelType, nextPanelTypesByLayoutId);
+    }
+    const hasChild = layout.children.some((child) => {
+        if (isLayoutNodeKey(child))
+            return child === panelNode.id;
+        return child.id === panelNode.id;
+    });
+    const children = hasChild ? layout.children : [...layout.children, panelNode];
+    const layouts = Object.fromEntries(Object.entries(createDashboardGridLayoutsForChildren(children, layout.layouts, layout.cols, nextPanelTypesByLayoutId) ?? {}).map(([breakpoint, breakpointLayout]) => {
+        if (breakpointLayout.some((item) => item.i === panelNode.id)) {
+            return [breakpoint, breakpointLayout];
+        }
+        return [
+            breakpoint,
+            [
+                ...breakpointLayout,
+                createDashboardGridItem(panelNode.id, breakpointLayout, getGridColsForBreakpoint(layout.cols, breakpoint), nextPanelTypesByLayoutId[panelNode.id]),
+            ],
+        ];
+    }));
     return {
         ...layout,
-        children: nextChildren,
+        children,
+        layouts,
     };
 }
+function removePanelFromLayout(layout, panelId) {
+    if (!layout)
+        return null;
+    if (isLayoutNodeKey(layout)) {
+        return layout === panelId ? null : layout;
+    }
+    if (isLayoutPanelNode(layout)) {
+        return layout.id === panelId ? null : layout;
+    }
+    if (isLayoutSplitNode(layout)) {
+        const nextChildren = layout.children
+            .map((child) => removePanelFromLayout(child, panelId))
+            .filter((child) => child !== null);
+        if (nextChildren.length === 0)
+            return null;
+        if (nextChildren.length === 1)
+            return nextChildren[0] ?? null;
+        return { ...layout, children: nextChildren };
+    }
+    if (isLayoutGridNode(layout)) {
+        const nextChildren = layout.children.filter((child) => {
+            if (isLayoutNodeKey(child))
+                return child !== panelId;
+            return child.id !== panelId;
+        });
+        const nextLayouts = layout.layouts
+            ? Object.fromEntries(Object.entries(layout.layouts).map(([breakpoint, breakpointLayout]) => [
+                breakpoint,
+                breakpointLayout.filter((item) => item.i !== panelId),
+            ]))
+            : layout.layouts;
+        if (nextChildren.length === 0)
+            return null;
+        return { ...layout, children: nextChildren, layouts: nextLayouts };
+    }
+    return layout;
+}
 function collectPanelIds(layout, panelIds = new Set()) {
     if (!layout)
         return panelIds;
-    if (typeof layout === 'string') {
+    if (isLayoutNodeKey(layout)) {
         panelIds.add(layout);
         return panelIds;
     }
-    for (const child of layout.children) {
-        collectPanelIds(child, panelIds);
+    if (isLayoutPanelNode(layout)) {
+        panelIds.add(layout.id);
+        return panelIds;
+    }
+    if (isLayoutSplitNode(layout)) {
+        for (const child of layout.children) {
+            collectPanelIds(child, panelIds);
+        }
+    }
+    if (isLayoutGridNode(layout)) {
+        for (const child of layout.children) {
+            collectPanelIds(child, panelIds);
+        }
     }
     return panelIds;
 }
-function ensureLayoutContainsPanels(layout, panelIds) {
+function ensureLayoutContainsDashboardPanels(layout, dashboardId, panelIds, layoutType = 'dock', panelTypesByLayoutId = {}) {
     let nextLayout = layout;
-    const existing = collectPanelIds(layout);
+    if (layoutType === 'grid') {
+        const expectedPanelIds = new Set(panelIds.map((panelId) => getMosaicDashboardPanelId(dashboardId, panelId)));
+        nextLayout = normalizeDashboardGridLayout(nextLayout, dashboardId, expectedPanelIds, panelTypesByLayoutId);
+    }
+    const existing = collectPanelIds(nextLayout);
     for (const panelId of panelIds) {
-        if (!existing.has(panelId)) {
-            nextLayout = appendPanelToLayout(nextLayout, panelId);
-            existing.add(panelId);
+        const layoutPanelId = getMosaicDashboardPanelId(dashboardId, panelId);
+        if (!existing.has(layoutPanelId)) {
+            const panelNode = createDashboardPanelNode(dashboardId, panelId);
+            nextLayout =
+                layoutType === 'grid'
+                    ? appendPanelToGridLayout(nextLayout, dashboardId, panelNode, panelTypesByLayoutId[layoutPanelId], panelTypesByLayoutId)
+                    : appendPanelToLayout(nextLayout, panelNode);
+            existing.add(layoutPanelId);
         }
     }
     return nextLayout;
 }
-export function getMosaicDashboardPanelId(dashboardId, chartId) {
-    return `dashboard:${dashboardId}:chart:${chartId}`;
+export function isChartPanelConfig(panel) {
+    return panel.type === MOSAIC_DASHBOARD_CHART_PANEL_TYPE;
+}
+export function getMosaicDashboardPanelId(dashboardId, panelId) {
+    return `dashboard:${dashboardId}:panel:${panelId}`;
 }
-export function getMosaicDashboardMosaicId(dashboardId) {
-    return `dashboard:${dashboardId}:mosaic`;
+export function getMosaicDashboardDockId(dashboardId) {
+    return `dashboard:${dashboardId}:dock`;
+}
+export function getMosaicDashboardGridId(dashboardId) {
+    return `dashboard:${dashboardId}:grid`;
 }
 export function getMosaicDashboardSelectionName(dashboardId) {
     return `dashboard:${dashboardId}:brush`;
 }
-export function parseMosaicDashboardChartId(dashboardId, panelId) {
-    const prefix = `dashboard:${dashboardId}:chart:`;
-    return panelId.startsWith(prefix) ? panelId.slice(prefix.length) : undefined;
+function destroyDashboardRuntimeChart(chart) {
+    if (!chart)
+        return;
+    destroyRetainedVgPlotChart(chart);
+}
+function evictDashboardSelection(state, dashboardId) {
+    state.mosaic.selections[getMosaicDashboardSelectionName(dashboardId)]?.reset();
+}
+function shouldEvictPanelRuntimeForPatch(panel, patch) {
+    if (patch.type && patch.type !== panel.type) {
+        return true;
+    }
+    if (panel.type === MOSAIC_DASHBOARD_CHART_PANEL_TYPE) {
+        return Boolean('config' in patch && patch.config);
+    }
+    return false;
+}
+/**
+ * Type guard to check if a panel config has a source property.
+ * All standard panel types (Chart, Profiler, Text) have optional sources.
+ */
+export function panelHasSource(panel) {
+    return (panel.type === MOSAIC_DASHBOARD_CHART_PANEL_TYPE ||
+        panel.type === MOSAIC_DASHBOARD_PROFILER_PANEL_TYPE ||
+        panel.type === MOSAIC_DASHBOARD_TEXT_PANEL_TYPE);
+}
+export function resolveMosaicDashboardPanelSource(dashboard, panel) {
+    if (!panelHasSource(panel)) {
+        return undefined;
+    }
+    if (panel.source?.sqlQuery || panel.source?.tableName) {
+        return panel.source;
+    }
+    // Text panels typically don't need a table source
+    if (panel.type === MOSAIC_DASHBOARD_TEXT_PANEL_TYPE) {
+        return undefined;
+    }
+    return dashboard.selectedTable
+        ? { tableName: dashboard.selectedTable }
+        : undefined;
 }
 export function createDefaultMosaicDashboardConfig(props) {
     return MosaicDashboardSliceConfig.parse({
@@ -133,12 +441,18 @@ export function createMosaicDashboardSlice(props = {}) {
     return createSlice((set, get) => ({
         mosaicDashboard: {
             config: createDefaultMosaicDashboardConfig(props.config),
-            createDashboard(title) {
+            runtime: {
+                retainedChartsByPanelId: {},
+            },
+            chartTypes: props.chartTypes,
+            addPanelActions: props.addPanelActions ?? [],
+            panelRenderers: props.panelRenderers ?? {},
+            createDashboard(title, layoutType) {
                 const dashboardId = createId();
-                get().mosaicDashboard.ensureDashboard(dashboardId, title);
+                get().mosaicDashboard.ensureDashboard(dashboardId, title, layoutType);
                 return dashboardId;
             },
-            ensureDashboard(dashboardId, title) {
+            ensureDashboard(dashboardId, title, layoutType) {
                 set((state) => produce(state, (draft) => {
                     const existing = draft.mosaicDashboard.config.dashboardsById[dashboardId];
                     if (existing) {
@@ -151,14 +465,20 @@ export function createMosaicDashboardSlice(props = {}) {
                     draft.mosaicDashboard.config.dashboardsById[dashboardId] = {
                         id: dashboardId,
                         title: title ?? 'Dashboard',
+                        layoutType: layoutType ?? 'dock',
                         selectedTable: undefined,
-                        charts: [],
-                        layout: null,
+                        panels: [],
+                        layout: layoutType === 'grid'
+                            ? createDashboardGridLayout(dashboardId)
+                            : null,
                         updatedAt: Date.now(),
                     };
                 }));
             },
             removeDashboard(dashboardId) {
+                get().mosaicDashboard.evictDashboardRuntime(dashboardId, {
+                    resetSelection: true,
+                });
                 set((state) => produce(state, (draft) => {
                     delete draft.mosaicDashboard.config.dashboardsById[dashboardId];
                 }));
@@ -166,6 +486,11 @@ export function createMosaicDashboardSlice(props = {}) {
             getDashboard(dashboardId) {
                 return get().mosaicDashboard.config.dashboardsById[dashboardId];
             },
+            setConfig(config) {
+                set((state) => produce(state, (draft) => {
+                    draft.mosaicDashboard.config = config;
+                }));
+            },
             setSelectedTable(dashboardId, tableName) {
                 get().mosaicDashboard.ensureDashboard(dashboardId);
                 set((state) => produce(state, (draft) => {
@@ -176,48 +501,155 @@ export function createMosaicDashboardSlice(props = {}) {
                     dashboard.updatedAt = Date.now();
                 }));
             },
-            addChart(dashboardId, chart) {
+            registerPanelRenderer(type, renderer) {
+                set((state) => produce(state, (draft) => {
+                    draft.mosaicDashboard.panelRenderers[type] = renderer;
+                }));
+            },
+            unregisterPanelRenderer(type) {
+                set((state) => produce(state, (draft) => {
+                    delete draft.mosaicDashboard.panelRenderers[type];
+                }));
+            },
+            addPanel(dashboardId, panel) {
                 get().mosaicDashboard.ensureDashboard(dashboardId);
                 set((state) => produce(state, (draft) => {
                     const dashboard = draft.mosaicDashboard.config.dashboardsById[dashboardId];
                     if (!dashboard)
                         return;
-                    dashboard.charts.push(chart);
-                    dashboard.layout = appendPanelToLayout(dashboard.layout, getMosaicDashboardPanelId(dashboardId, chart.id));
+                    dashboard.panels.push(panel);
+                    const panelNode = createDashboardPanelNode(dashboardId, panel.id);
+                    const panelTypesByLayoutId = getDashboardPanelTypesByLayoutId(dashboardId, dashboard.panels);
+                    dashboard.layout =
+                        dashboard.layoutType === 'grid'
+                            ? appendPanelToGridLayout(dashboard.layout, dashboardId, panelNode, panel.type, panelTypesByLayoutId)
+                            : appendPanelToLayout(dashboard.layout, panelNode);
                     dashboard.updatedAt = Date.now();
                 }));
-                return chart.id;
+                return panel.id;
             },
-            updateChart(dashboardId, chartId, patch) {
+            updatePanel(dashboardId, panelId, patch) {
+                const existing = get().mosaicDashboard.config.dashboardsById[dashboardId]?.panels.find((candidate) => candidate.id === panelId);
+                const shouldEvict = existing
+                    ? shouldEvictPanelRuntimeForPatch(existing, patch)
+                    : false;
                 set((state) => produce(state, (draft) => {
                     const dashboard = draft.mosaicDashboard.config.dashboardsById[dashboardId];
                     if (!dashboard)
                         return;
-                    const chart = dashboard.charts.find((item) => item.id === chartId);
-                    if (!chart)
+                    const panel = dashboard.panels.find((candidate) => candidate.id === panelId);
+                    if (!panel)
                         return;
-                    Object.assign(chart, patch);
+                    Object.assign(panel, patch);
                     dashboard.updatedAt = Date.now();
                 }));
+                if (shouldEvict) {
+                    get().mosaicDashboard.evictPanelRuntime(dashboardId, panelId);
+                }
             },
-            removeChart(dashboardId, chartId) {
+            removePanel(dashboardId, panelId) {
+                get().mosaicDashboard.evictPanelRuntime(dashboardId, panelId);
                 set((state) => produce(state, (draft) => {
                     const dashboard = draft.mosaicDashboard.config.dashboardsById[dashboardId];
                     if (!dashboard)
                         return;
-                    dashboard.charts = dashboard.charts.filter((chart) => chart.id !== chartId);
-                    dashboard.layout = removePanelFromLayout(dashboard.layout, getMosaicDashboardPanelId(dashboardId, chartId));
+                    dashboard.panels = dashboard.panels.filter((panel) => panel.id !== panelId);
+                    dashboard.layout = removePanelFromLayout(dashboard.layout, getMosaicDashboardPanelId(dashboardId, panelId));
                     dashboard.updatedAt = Date.now();
                 }));
             },
+            getRetainedChart(dashboardId, panelId) {
+                return get().mosaicDashboard.runtime.retainedChartsByPanelId[getMosaicDashboardPanelId(dashboardId, panelId)];
+            },
+            setRetainedChart(dashboardId, panelId, chart) {
+                const runtimePanelId = getMosaicDashboardPanelId(dashboardId, panelId);
+                const previous = get().mosaicDashboard.runtime.retainedChartsByPanelId[runtimePanelId];
+                if (previous && previous !== chart) {
+                    destroyDashboardRuntimeChart(previous);
+                }
+                set((state) => ({
+                    mosaicDashboard: {
+                        ...state.mosaicDashboard,
+                        runtime: {
+                            ...state.mosaicDashboard.runtime,
+                            retainedChartsByPanelId: {
+                                ...state.mosaicDashboard.runtime.retainedChartsByPanelId,
+                                [runtimePanelId]: chart,
+                            },
+                        },
+                    },
+                }));
+            },
+            evictPanelRuntime(dashboardId, panelId) {
+                const runtimePanelId = getMosaicDashboardPanelId(dashboardId, panelId);
+                const existing = get().mosaicDashboard.runtime.retainedChartsByPanelId[runtimePanelId];
+                destroyDashboardRuntimeChart(existing);
+                set((state) => {
+                    const nextRetainedChartsByPanelId = {
+                        ...state.mosaicDashboard.runtime.retainedChartsByPanelId,
+                    };
+                    delete nextRetainedChartsByPanelId[runtimePanelId];
+                    return {
+                        mosaicDashboard: {
+                            ...state.mosaicDashboard,
+                            runtime: {
+                                ...state.mosaicDashboard.runtime,
+                                retainedChartsByPanelId: nextRetainedChartsByPanelId,
+                            },
+                        },
+                    };
+                });
+            },
+            evictDashboardRuntime(dashboardId, options) {
+                const runtimePrefix = `dashboard:${dashboardId}:panel:`;
+                const existingEntries = Object.entries(get().mosaicDashboard.runtime.retainedChartsByPanelId).filter(([runtimePanelId]) => runtimePanelId.startsWith(runtimePrefix));
+                existingEntries.forEach(([, chart]) => {
+                    destroyDashboardRuntimeChart(chart);
+                });
+                if (options?.resetSelection) {
+                    evictDashboardSelection(get(), dashboardId);
+                }
+                set((state) => {
+                    const nextRetainedChartsByPanelId = {
+                        ...state.mosaicDashboard.runtime.retainedChartsByPanelId,
+                    };
+                    for (const [runtimePanelId] of existingEntries) {
+                        delete nextRetainedChartsByPanelId[runtimePanelId];
+                    }
+                    return {
+                        mosaicDashboard: {
+                            ...state.mosaicDashboard,
+                            runtime: {
+                                ...state.mosaicDashboard.runtime,
+                                retainedChartsByPanelId: nextRetainedChartsByPanelId,
+                            },
+                        },
+                    };
+                });
+            },
+            clearAllDashboardRuntime() {
+                Object.values(get().mosaicDashboard.runtime.retainedChartsByPanelId).forEach((chart) => {
+                    destroyDashboardRuntimeChart(chart);
+                });
+                set((state) => ({
+                    mosaicDashboard: {
+                        ...state.mosaicDashboard,
+                        runtime: {
+                            ...state.mosaicDashboard.runtime,
+                            retainedChartsByPanelId: {},
+                        },
+                    },
+                }));
+            },
             setLayout(dashboardId, layout) {
                 get().mosaicDashboard.ensureDashboard(dashboardId);
                 set((state) => produce(state, (draft) => {
                     const dashboard = draft.mosaicDashboard.config.dashboardsById[dashboardId];
                     if (!dashboard)
                         return;
-                    const chartPanelIds = dashboard.charts.map((chart) => getMosaicDashboardPanelId(dashboardId, chart.id));
-                    dashboard.layout = ensureLayoutContainsPanels(layout, chartPanelIds);
+                    const panelIds = dashboard.panels.map((panel) => panel.id);
+                    const panelTypesByLayoutId = getDashboardPanelTypesByLayoutId(dashboardId, dashboard.panels);
+                    dashboard.layout = ensureLayoutContainsDashboardPanels(layout, dashboardId, panelIds, dashboard.layoutType, panelTypesByLayoutId);
                     dashboard.updatedAt = Date.now();
                 }));
             },