diff --git a/apps/web/src/app/test/chart-playground/page.tsx b/apps/web/src/app/test/chart-playground/page.tsx index 55daa96b8..c6c24d1f1 100644 --- a/apps/web/src/app/test/chart-playground/page.tsx +++ b/apps/web/src/app/test/chart-playground/page.tsx @@ -16,6 +16,7 @@ import type { RunSQLResponse } from '@/api/asset_interfaces'; import { useMemoizedFn } from '@/hooks'; import { Button } from '@/components/ui/buttons'; import { Input } from '@/components/ui/inputs'; +import { AppSplitter } from '@/components/ui/layouts/AppSplitter'; type YamlifiedConfig = { sql: string; @@ -108,133 +109,152 @@ export default function ChartPlayground() { } ); - return ( -
-
-
- -
-
-
- - setDataSourceId(e.target.value)} /> -
- -
+ // Define the left panel content (code editor and controls) + const leftPanelContent = ( +
+
+
- - {/* Second column - 40% width */} -
- {/* Header */} -
-

Chart Preview

-
- - {/* Content Area */} -
- {/* Error States */} - {chartConfigError && ( -
-
-
-

Chart Configuration Error

-
-
-                {JSON.stringify(chartConfigError as Object, null, 2)}
-              
-
- )} - - {runSQLError && ( -
-
-
-

SQL Execution Error

-
-
-                {JSON.stringify(runSQLError as Object, null, 2)}
-              
-
- )} - - {/* Loading State */} - {isRunningSQL && ( -
-
-
-
-

Executing SQL Query

-

- Please wait while we process your query... -

-
-
-
- )} - - {/* Checklist */} - {!(chartConfig && data && hasRunSQL && dataSourceId) && ( -
-
-
-

Setup Checklist

-
-
    -
  • -
    - - Chart configuration is {chartConfig ? 'ready' : 'missing'} - -
  • -
  • -
    0 ? 'bg-green-400' : 'bg-yellow-300'}`}>
    - 0 ? 'text-green-700 line-through' : 'text-amber-700'}`}> - Data is {data.length > 0 ? 'available' : 'not available'} - -
  • -
  • -
    - - SQL has {hasRunSQL ? 'been executed' : 'not been run'} - -
  • -
  • -
    - - Data Source ID is {dataSourceId ? 'set' : 'not set'} - -
  • -
-
- )} - - {/* Chart Display */} - {chartConfig && data && hasRunSQL && dataSourceId && ( -
-
-
-

Chart Ready

-
-
- -
-
- )} +
+
+ + setDataSourceId(e.target.value)} />
+
); + + // Define the right panel content (chart preview) + const rightPanelContent = ( +
+ {/* Header */} +
+

Chart Preview

+
+ + {/* Content Area */} +
+ {/* Error States */} + {chartConfigError && ( +
+
+
+

Chart Configuration Error

+
+
+              {JSON.stringify(chartConfigError || {}, null, 2)}
+            
+
+ )} + + {runSQLError && ( +
+
+
+

SQL Execution Error

+
+
+              {JSON.stringify(runSQLError || {}, null, 2)}
+            
+
+ )} + + {/* Loading State */} + {isRunningSQL && ( +
+
+
+
+

Executing SQL Query

+

+ Please wait while we process your query... +

+
+
+
+ )} + + {/* Checklist */} + {!(chartConfig && data && hasRunSQL && dataSourceId) && ( +
+
+
+

Setup Checklist

+
+
    +
  • +
    + + Chart configuration is {chartConfig ? 'ready' : 'missing'} + +
  • +
  • +
    0 ? 'bg-green-400' : 'bg-yellow-300'}`}>
    + 0 ? 'text-green-700 line-through' : 'text-amber-700'}`}> + Data is {data.length > 0 ? 'available' : 'not available'} + +
  • +
  • +
    + + SQL has {hasRunSQL ? 'been executed' : 'not been run'} + +
  • +
  • +
    + + Data Source ID is {dataSourceId ? 'set' : 'not set'} + +
  • +
+
+ )} + + {/* Chart Display */} + {chartConfig && data && hasRunSQL && dataSourceId && ( +
+
+
+

Chart Ready

+
+
+ +
+
+ )} +
+
+ ); + + return ( +
+ +
+ ); } + +const DEFAULT_LAYOUT = ['40%', 'auto'];