@sqlrooms/mosaic 0.29.0-rc.6 → 0.29.0-rc.8

package/dist/dashboard/MosaicDashboardSlice.js

@@ -4,7 +4,7 @@ import { LayoutNode, isLayoutGridNode, isLayoutNodeKey, isLayoutPanelNode, isLay
 import { createSlice, useBaseRoomStore, } from '@sqlrooms/room-store';
 import { produce } from 'immer';
 import { z } from 'zod';
-import { ChartConfig } from '../chart-types/chart-config';
+import { ChartConfig } from '../charts/chart-types/chart-config';
 import { destroyRetainedVgPlotChart, } from '../VgPlotChart';
 /**
  * Panel key used for function-form panel definitions registered by
@@ -14,19 +14,12 @@ import { destroyRetainedVgPlotChart, } from '../VgPlotChart';
  */
 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 MOSAIC_DASHBOARD_DATA_TABLE_EXPLORER_PANEL_TYPE = 'data-table-explorer';
 export const MosaicDashboardLayoutType = z.enum(['dock', 'grid']);
-// Profiler panel config
-export const ProfilerPanelConfig = z.object({
+// DataTableExplorer panel config
+export const DataTableExplorerPanelConfig = z.object({
     pageSize: z.number().optional(),
 });
-// Text panel config
-export const TextPanelConfig = z.object({
-    content: z.string().default(''),
-    toolbarOpen: z.boolean().default(false),
-    sourcePanelOpen: z.boolean().default(false),
-});
 // Panel configs discriminated by type
 export const ChartPanelConfig = z.object({
     id: z.string(),
@@ -34,17 +27,11 @@ export const ChartPanelConfig = z.object({
     title: z.string().default('Panel'),
     config: ChartConfig,
 });
-export const ProfilerPanel = z.object({
+export const DataTableExplorerPanel = z.object({
     id: z.string(),
-    type: z.literal(MOSAIC_DASHBOARD_PROFILER_PANEL_TYPE),
+    type: z.literal(MOSAIC_DASHBOARD_DATA_TABLE_EXPLORER_PANEL_TYPE),
     title: z.string().default('Panel'),
-    config: ProfilerPanelConfig,
-});
-export const TextPanel = z.object({
-    id: z.string(),
-    type: z.literal(MOSAIC_DASHBOARD_TEXT_PANEL_TYPE),
-    title: z.string().default('Text'),
-    config: TextPanelConfig,
+    config: DataTableExplorerPanelConfig,
 });
 // Legacy panel for backward compatibility
 export const LegacyPanelConfig = z.object({
@@ -55,7 +42,7 @@ export const LegacyPanelConfig = z.object({
 });
 // Discriminated union of all panel types
 export const MosaicDashboardPanelConfig = z
-    .discriminatedUnion('type', [ChartPanelConfig, ProfilerPanel, TextPanel])
+    .discriminatedUnion('type', [ChartPanelConfig, DataTableExplorerPanel])
     .or(LegacyPanelConfig);
 export function createMosaicDashboardChartPanelConfig(title, config) {
     return {
@@ -65,26 +52,14 @@ export function createMosaicDashboardChartPanelConfig(title, config) {
         config,
     };
 }
-export function createMosaicDashboardProfilerPanelConfig(options = {}) {
+export function createMosaicDashboardDataTableExplorerPanelConfig(options = {}) {
     return {
         id: createId(),
-        type: MOSAIC_DASHBOARD_PROFILER_PANEL_TYPE,
-        title: options.title ?? 'Profiler',
+        type: MOSAIC_DASHBOARD_DATA_TABLE_EXPLORER_PANEL_TYPE,
+        title: options.title ?? 'Data Table Explorer',
         config: options.config ?? {},
     };
 }
-export function createMosaicDashboardTextPanelConfig(options = {}) {
-    return {
-        id: createId(),
-        type: MOSAIC_DASHBOARD_TEXT_PANEL_TYPE,
-        title: options.title ?? 'Text',
-        config: options.config ?? {
-            toolbarOpen: false,
-            sourcePanelOpen: false,
-            content: '',
-        },
-    };
-}
 export const MosaicDashboardEntry = z.object({
     id: z.string(),
     title: z.string().default('Dashboard'),
@@ -150,8 +125,7 @@ function getLayoutChildId(node) {
 }
 function createDashboardGridItem(panelId, layout, cols = 12, panelType) {
     const effectiveCols = Math.max(1, cols);
-    const w = panelType === MOSAIC_DASHBOARD_PROFILER_PANEL_TYPE ||
-        panelType === MOSAIC_DASHBOARD_TEXT_PANEL_TYPE
+    const w = panelType === MOSAIC_DASHBOARD_DATA_TABLE_EXPLORER_PANEL_TYPE
         ? effectiveCols
         : Math.max(1, Math.ceil(effectiveCols / 2));
     const h = 2;
@@ -403,6 +377,7 @@ export function createMosaicDashboardSlice(props = {}) {
             runtime: {
                 retainedChartsByPanelId: {},
                 panelIssuesByPanelId: {},
+                panelClients: {},
             },
             chartTypes: props.chartTypes,
             addPanelActions: props.addPanelActions ?? [],
@@ -420,6 +395,13 @@ export function createMosaicDashboardSlice(props = {}) {
                             existing.title = title;
                             existing.updatedAt = Date.now();
                         }
+                        if (layoutType === 'grid' &&
+                            existing.layoutType === 'dock' &&
+                            existing.panels.length === 0) {
+                            existing.layoutType = 'grid';
+                            existing.layout = createDashboardGridLayout(dashboardId);
+                            existing.updatedAt = Date.now();
+                        }
                         return;
                     }
                     draft.mosaicDashboard.config.dashboardsById[dashboardId] = {
@@ -451,6 +433,16 @@ export function createMosaicDashboardSlice(props = {}) {
                     draft.mosaicDashboard.config = config;
                 }));
             },
+            setDashboardTitle(dashboardId, title) {
+                get().mosaicDashboard.ensureDashboard(dashboardId);
+                set((state) => produce(state, (draft) => {
+                    const dashboard = draft.mosaicDashboard.config.dashboardsById[dashboardId];
+                    if (!dashboard)
+                        return;
+                    dashboard.title = title;
+                    dashboard.updatedAt = Date.now();
+                }));
+            },
             setSelectedTable(dashboardId, tableName) {
                 get().mosaicDashboard.ensureDashboard(dashboardId);
                 set((state) => produce(state, (draft) => {
@@ -518,6 +510,11 @@ export function createMosaicDashboardSlice(props = {}) {
                 }
             },
             removePanel(dashboardId, panelId) {
+                // Clean up panel clients
+                const key = getMosaicDashboardPanelId(dashboardId, panelId);
+                set(produce((state) => {
+                    delete state.mosaicDashboard.runtime.panelClients[key];
+                }));
                 get().mosaicDashboard.evictPanelRuntime(dashboardId, panelId);
                 set((state) => produce(state, (draft) => {
                     const dashboard = draft.mosaicDashboard.config.dashboardsById[dashboardId];
@@ -529,11 +526,16 @@ export function createMosaicDashboardSlice(props = {}) {
                 }));
             },
             getRetainedChart(dashboardId, panelId) {
-                return get().mosaicDashboard.runtime.retainedChartsByPanelId[getMosaicDashboardPanelId(dashboardId, panelId)];
+                return get().mosaicDashboard.getRetainedChartByKey(getMosaicDashboardPanelId(dashboardId, panelId));
+            },
+            getRetainedChartByKey(runtimeKey) {
+                return get().mosaicDashboard.runtime.retainedChartsByPanelId[runtimeKey];
             },
             setRetainedChart(dashboardId, panelId, chart) {
-                const runtimePanelId = getMosaicDashboardPanelId(dashboardId, panelId);
-                const previous = get().mosaicDashboard.runtime.retainedChartsByPanelId[runtimePanelId];
+                get().mosaicDashboard.setRetainedChartByKey(getMosaicDashboardPanelId(dashboardId, panelId), chart);
+            },
+            setRetainedChartByKey(runtimeKey, chart) {
+                const previous = get().mosaicDashboard.runtime.retainedChartsByPanelId[runtimeKey];
                 if (previous && previous !== chart) {
                     destroyDashboardRuntimeChart(previous);
                 }
@@ -544,17 +546,22 @@ export function createMosaicDashboardSlice(props = {}) {
                             ...state.mosaicDashboard.runtime,
                             retainedChartsByPanelId: {
                                 ...state.mosaicDashboard.runtime.retainedChartsByPanelId,
-                                [runtimePanelId]: chart,
+                                [runtimeKey]: chart,
                             },
                         },
                     },
                 }));
             },
             getPanelIssue(dashboardId, panelId) {
-                return get().mosaicDashboard.runtime.panelIssuesByPanelId[getMosaicDashboardPanelId(dashboardId, panelId)];
+                return get().mosaicDashboard.getPanelIssueByKey(getMosaicDashboardPanelId(dashboardId, panelId));
+            },
+            getPanelIssueByKey(runtimeKey) {
+                return get().mosaicDashboard.runtime.panelIssuesByPanelId[runtimeKey];
             },
             reportPanelIssue(dashboardId, panelId, issue) {
-                const runtimePanelId = getMosaicDashboardPanelId(dashboardId, panelId);
+                get().mosaicDashboard.reportPanelIssueByKey(getMosaicDashboardPanelId(dashboardId, panelId), issue);
+            },
+            reportPanelIssueByKey(runtimeKey, issue) {
                 set((state) => ({
                     mosaicDashboard: {
                         ...state.mosaicDashboard,
@@ -562,22 +569,24 @@ export function createMosaicDashboardSlice(props = {}) {
                             ...state.mosaicDashboard.runtime,
                             panelIssuesByPanelId: {
                                 ...state.mosaicDashboard.runtime.panelIssuesByPanelId,
-                                [runtimePanelId]: issue,
+                                [runtimeKey]: issue,
                             },
                         },
                     },
                 }));
             },
             clearPanelIssue(dashboardId, panelId) {
-                const runtimePanelId = getMosaicDashboardPanelId(dashboardId, panelId);
-                if (!get().mosaicDashboard.runtime.panelIssuesByPanelId[runtimePanelId]) {
+                get().mosaicDashboard.clearPanelIssueByKey(getMosaicDashboardPanelId(dashboardId, panelId));
+            },
+            clearPanelIssueByKey(runtimeKey) {
+                if (!get().mosaicDashboard.runtime.panelIssuesByPanelId[runtimeKey]) {
                     return;
                 }
                 set((state) => {
                     const nextPanelIssuesByPanelId = {
                         ...state.mosaicDashboard.runtime.panelIssuesByPanelId,
                     };
-                    delete nextPanelIssuesByPanelId[runtimePanelId];
+                    delete nextPanelIssuesByPanelId[runtimeKey];
                     return {
                         mosaicDashboard: {
                             ...state.mosaicDashboard,
@@ -590,8 +599,10 @@ export function createMosaicDashboardSlice(props = {}) {
                 });
             },
             evictPanelRuntime(dashboardId, panelId) {
-                const runtimePanelId = getMosaicDashboardPanelId(dashboardId, panelId);
-                const existing = get().mosaicDashboard.runtime.retainedChartsByPanelId[runtimePanelId];
+                get().mosaicDashboard.evictPanelRuntimeByKey(getMosaicDashboardPanelId(dashboardId, panelId));
+            },
+            evictPanelRuntimeByKey(runtimeKey) {
+                const existing = get().mosaicDashboard.runtime.retainedChartsByPanelId[runtimeKey];
                 destroyDashboardRuntimeChart(existing);
                 set((state) => {
                     const nextRetainedChartsByPanelId = {
@@ -600,8 +611,8 @@ export function createMosaicDashboardSlice(props = {}) {
                     const nextPanelIssuesByPanelId = {
                         ...state.mosaicDashboard.runtime.panelIssuesByPanelId,
                     };
-                    delete nextRetainedChartsByPanelId[runtimePanelId];
-                    delete nextPanelIssuesByPanelId[runtimePanelId];
+                    delete nextRetainedChartsByPanelId[runtimeKey];
+                    delete nextPanelIssuesByPanelId[runtimeKey];
                     return {
                         mosaicDashboard: {
                             ...state.mosaicDashboard,
@@ -618,6 +629,7 @@ export function createMosaicDashboardSlice(props = {}) {
                 const runtimePrefix = `dashboard:${dashboardId}:panel:`;
                 const existingEntries = Object.entries(get().mosaicDashboard.runtime.retainedChartsByPanelId).filter(([runtimePanelId]) => runtimePanelId.startsWith(runtimePrefix));
                 const existingIssueEntries = Object.keys(get().mosaicDashboard.runtime.panelIssuesByPanelId).filter((runtimePanelId) => runtimePanelId.startsWith(runtimePrefix));
+                const existingClientEntries = Object.keys(get().mosaicDashboard.runtime.panelClients).filter((runtimePanelId) => runtimePanelId.startsWith(runtimePrefix));
                 existingEntries.forEach(([, chart]) => {
                     destroyDashboardRuntimeChart(chart);
                 });
@@ -631,12 +643,18 @@ export function createMosaicDashboardSlice(props = {}) {
                     const nextPanelIssuesByPanelId = {
                         ...state.mosaicDashboard.runtime.panelIssuesByPanelId,
                     };
+                    const nextPanelClients = {
+                        ...state.mosaicDashboard.runtime.panelClients,
+                    };
                     for (const [runtimePanelId] of existingEntries) {
                         delete nextRetainedChartsByPanelId[runtimePanelId];
                     }
                     for (const runtimePanelId of existingIssueEntries) {
                         delete nextPanelIssuesByPanelId[runtimePanelId];
                     }
+                    for (const runtimePanelId of existingClientEntries) {
+                        delete nextPanelClients[runtimePanelId];
+                    }
                     return {
                         mosaicDashboard: {
                             ...state.mosaicDashboard,
@@ -644,6 +662,7 @@ export function createMosaicDashboardSlice(props = {}) {
                                 ...state.mosaicDashboard.runtime,
                                 retainedChartsByPanelId: nextRetainedChartsByPanelId,
                                 panelIssuesByPanelId: nextPanelIssuesByPanelId,
+                                panelClients: nextPanelClients,
                             },
                         },
                     };
@@ -660,6 +679,7 @@ export function createMosaicDashboardSlice(props = {}) {
                             ...state.mosaicDashboard.runtime,
                             retainedChartsByPanelId: {},
                             panelIssuesByPanelId: {},
+                            panelClients: {},
                         },
                     },
                 }));
@@ -676,6 +696,36 @@ export function createMosaicDashboardSlice(props = {}) {
                     dashboard.updatedAt = Date.now();
                 }));
             },
+            registerPanelClient: (dashboardId, panelId, client) => {
+                set(produce((state) => {
+                    const key = getMosaicDashboardPanelId(dashboardId, panelId);
+                    if (!state.mosaicDashboard.runtime.panelClients[key]) {
+                        state.mosaicDashboard.runtime.panelClients[key] = [];
+                    }
+                    if (!state.mosaicDashboard.runtime.panelClients[key].includes(client)) {
+                        state.mosaicDashboard.runtime.panelClients[key].push(client);
+                    }
+                }));
+            },
+            unregisterPanelClient: (dashboardId, panelId, client) => {
+                set(produce((state) => {
+                    const key = getMosaicDashboardPanelId(dashboardId, panelId);
+                    const clients = state.mosaicDashboard.runtime.panelClients[key];
+                    if (clients) {
+                        const index = clients.indexOf(client);
+                        if (index > -1) {
+                            clients.splice(index, 1);
+                        }
+                        if (clients.length === 0) {
+                            delete state.mosaicDashboard.runtime.panelClients[key];
+                        }
+                    }
+                }));
+            },
+            getPanelClients: (dashboardId, panelId) => {
+                const key = getMosaicDashboardPanelId(dashboardId, panelId);
+                return get().mosaicDashboard.runtime.panelClients[key] ?? [];
+            },
         },
     }));
 }