@sqlrooms/mosaic 0.29.0-rc.1 → 0.29.0-rc.3

package/dist/dashboard/MosaicDashboardSlice.js

@@ -0,0 +1,615 @@
+import { createId } from '@paralleldrive/cuid2';
+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';
+import { destroyRetainedVgPlotChart, } from '../VgPlotChart';
+import { VgPlotChartConfig } from '../chart-types';
+/**
+ * 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_VGPLOT_PANEL_TYPE = 'vgplot';
+export const MOSAIC_DASHBOARD_PROFILER_PANEL_TYPE = 'profiler';
+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(),
+});
+// Panel configs discriminated by type
+export const VgPlotPanelConfig = z.object({
+    id: z.string(),
+    type: z.literal(MOSAIC_DASHBOARD_VGPLOT_PANEL_TYPE),
+    title: z.string().default('Panel'),
+    source: MosaicDashboardPanelSource.optional(),
+    config: VgPlotChartConfig,
+});
+export const ProfilerPanel = z.object({
+    id: z.string(),
+    type: z.literal(MOSAIC_DASHBOARD_PROFILER_PANEL_TYPE),
+    title: z.string().default('Panel'),
+    source: MosaicDashboardPanelSource.optional(),
+    config: ProfilerPanelConfig,
+});
+// 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', [VgPlotPanelConfig, ProfilerPanel])
+    .or(LegacyPanelConfig);
+export function createMosaicDashboardVgPlotPanelConfig(title, config, source) {
+    return VgPlotPanelConfig.parse({
+        id: createId(),
+        type: MOSAIC_DASHBOARD_VGPLOT_PANEL_TYPE,
+        title,
+        source,
+        config,
+    });
+}
+export function createMosaicDashboardProfilerPanelConfig(options = {}) {
+    return {
+        id: createId(),
+        type: MOSAIC_DASHBOARD_PROFILER_PANEL_TYPE,
+        title: options.title ?? 'Profiler',
+        source: options.source,
+        config: {
+            pageSize: options.pageSize ?? 10,
+        },
+    };
+}
+export const MosaicDashboardEntry = z.object({
+    id: z.string(),
+    title: z.string().default('Dashboard'),
+    layoutType: MosaicDashboardLayoutType.default('dock'),
+    selectedTable: z.string().optional(),
+    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({}),
+});
+// ---------------------------------------------------------------------------
+// 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 panelNode;
+    }
+    return {
+        type: 'split',
+        id: `split-${createId()}`,
+        direction: 'row',
+        children: [layout, panelNode],
+    };
+}
+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 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;
+    }
+    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,
+        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 (isLayoutNodeKey(layout)) {
+        panelIds.add(layout);
+        return 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 ensureLayoutContainsDashboardPanels(layout, dashboardId, panelIds, layoutType = 'dock', panelTypesByLayoutId = {}) {
+    let nextLayout = 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) {
+        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 isVgPlotPanelConfig(panel) {
+    return panel.type === MOSAIC_DASHBOARD_VGPLOT_PANEL_TYPE;
+}
+export function getMosaicDashboardPanelId(dashboardId, panelId) {
+    return `dashboard:${dashboardId}:panel:${panelId}`;
+}
+export function getMosaicDashboardDockId(dashboardId) {
+    return `dashboard:${dashboardId}:dock`;
+}
+export function getMosaicDashboardGridId(dashboardId) {
+    return `dashboard:${dashboardId}:grid`;
+}
+export function getMosaicDashboardSelectionName(dashboardId) {
+    return `dashboard:${dashboardId}:brush`;
+}
+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_VGPLOT_PANEL_TYPE) {
+        return Boolean(patch.config &&
+            Object.prototype.hasOwnProperty.call(patch.config, 'vgplot'));
+    }
+    return false;
+}
+export function resolveMosaicDashboardPanelSource(dashboard, panel) {
+    if (panel.source?.sqlQuery || panel.source?.tableName) {
+        return panel.source;
+    }
+    return dashboard.selectedTable
+        ? { tableName: dashboard.selectedTable }
+        : undefined;
+}
+export function createDefaultMosaicDashboardConfig(props) {
+    return MosaicDashboardSliceConfig.parse({
+        dashboardsById: {},
+        ...props,
+    });
+}
+export function createMosaicDashboardSlice(props = {}) {
+    return createSlice((set, get) => ({
+        mosaicDashboard: {
+            config: createDefaultMosaicDashboardConfig(props.config),
+            runtime: {
+                retainedChartsByPanelId: {},
+            },
+            chartBuilders: props.chartBuilders,
+            chartTypes: props.chartTypes,
+            addPanelActions: props.addPanelActions ?? [],
+            panelRenderers: props.panelRenderers ?? {},
+            createDashboard(title, layoutType) {
+                const dashboardId = createId();
+                get().mosaicDashboard.ensureDashboard(dashboardId, title, layoutType);
+                return dashboardId;
+            },
+            ensureDashboard(dashboardId, title, layoutType) {
+                set((state) => produce(state, (draft) => {
+                    const existing = draft.mosaicDashboard.config.dashboardsById[dashboardId];
+                    if (existing) {
+                        if (title && existing.title !== title) {
+                            existing.title = title;
+                            existing.updatedAt = Date.now();
+                        }
+                        return;
+                    }
+                    draft.mosaicDashboard.config.dashboardsById[dashboardId] = {
+                        id: dashboardId,
+                        title: title ?? 'Dashboard',
+                        layoutType: layoutType ?? 'dock',
+                        selectedTable: undefined,
+                        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];
+                }));
+            },
+            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) => {
+                    const dashboard = draft.mosaicDashboard.config.dashboardsById[dashboardId];
+                    if (!dashboard)
+                        return;
+                    dashboard.selectedTable = tableName;
+                    dashboard.updatedAt = Date.now();
+                }));
+            },
+            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.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 panel.id;
+            },
+            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 panel = dashboard.panels.find((candidate) => candidate.id === panelId);
+                    if (!panel)
+                        return;
+                    Object.assign(panel, patch);
+                    dashboard.updatedAt = Date.now();
+                }));
+                if (shouldEvict) {
+                    get().mosaicDashboard.evictPanelRuntime(dashboardId, panelId);
+                }
+            },
+            removePanel(dashboardId, panelId) {
+                get().mosaicDashboard.evictPanelRuntime(dashboardId, panelId);
+                set((state) => produce(state, (draft) => {
+                    const dashboard = draft.mosaicDashboard.config.dashboardsById[dashboardId];
+                    if (!dashboard)
+                        return;
+                    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 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();
+                }));
+            },
+        },
+    }));
+}
+export function useStoreWithMosaicDashboard(selector) {
+    return useBaseRoomStore((state) => selector(state));
+}
+//# sourceMappingURL=MosaicDashboardSlice.js.map