- {!selectedDataSource ? (
+ {!selectedTable ? (
-
-
Select a data source to begin
+
+
Select a table to begin
- ) : !hasVisualizationData ? (
+ ) : !hasVisualizationData && !isExecuting ? (
-
Select columns to visualize
+
+ Configure your chart in the panel
+
) : (
@@ -375,4 +302,4 @@ const VisualizationTab: React.FC = () => {
);
};
-export default VisualizationTab;
+export default VisualizationTab;
\ No newline at end of file
diff --git a/frontend/src/components/tabs/visualization/ChartCanvas.tsx b/frontend/src/components/tabs/visualization/ChartCanvas.tsx
index 3652176..9b3e96a 100644
--- a/frontend/src/components/tabs/visualization/ChartCanvas.tsx
+++ b/frontend/src/components/tabs/visualization/ChartCanvas.tsx
@@ -1,6 +1,16 @@
-import React from "react";
+import React, { useState, useCallback } from "react";
import { useChartsStore, ChartType } from "@/store/chartsStore";
+import { analyzeDataPerformance } from "@/utils/chartPerformance";
+import { useChartDimensions } from "@/hooks/useResizeObserver";
+import CanvasChart from "./canvas/CanvasChart";
+import ObservablePlotChart from "./observable/ObservablePlotChart";
+import MosaicChart from "./mosaic/MosaicChart";
+import MosaicChartSQL from "./mosaic/MosaicChartSQL";
+import MosaicChartVgplot from "./mosaic/MosaicChartVgplot";
+import MosaicChartSimple from "./mosaic/MosaicChartSimple";
+import MosaicChartCanvas from "./mosaic/MosaicChartCanvas";
+import MosaicChartCanvasSimple from "./mosaic/MosaicChartCanvasSimple";
import {
ResponsiveContainer,
@@ -22,6 +32,8 @@ import {
Legend,
Label,
ReferenceLine,
+ Brush,
+ ReferenceArea,
} from "recharts";
/**
@@ -29,10 +41,110 @@ import {
*/
const ChartCanvas: React.FC = () => {
const { currentChart, colorPalettes } = useChartsStore();
+
+ // Get responsive chart dimensions (must be called before any conditional returns)
+ const { ref: chartRef, width: chartWidth, height: chartHeight, isReady } = useChartDimensions(600, 400);
+
+ // Zoom state management
+ const [zoomState, setZoomState] = useState<{
+ left?: string | number;
+ right?: string | number;
+ refAreaLeft?: string | number;
+ refAreaRight?: string | number;
+ top?: string | number;
+ bottom?: string | number;
+ animation?: boolean;
+ }>({
+ left: 'dataMin',
+ right: 'dataMax',
+ refAreaLeft: '',
+ refAreaRight: '',
+ top: 'dataMax+1',
+ bottom: 'dataMin-1',
+ animation: true,
+ });
+
+ // Zoom handler functions
+ const getAxisYDomain = useCallback((from: number, to: number, ref: string, offset: number) => {
+ const refData = currentChart?.data?.slice(from - 1, to);
+ if (!refData || refData.length === 0) return [0, 0];
+
+ let [bottom, top] = [refData[0][ref], refData[0][ref]];
+ refData.forEach((d) => {
+ if (d[ref] > top) top = d[ref];
+ if (d[ref] < bottom) bottom = d[ref];
+ });
+
+ return [(bottom | 0) - offset, (top | 0) + offset];
+ }, [currentChart?.data]);
+
+ const zoom = useCallback(() => {
+ let { refAreaLeft, refAreaRight } = zoomState;
+ const { data } = currentChart || {};
+
+ if (!data || refAreaLeft === refAreaRight || refAreaRight === '') {
+ setZoomState(prev => ({
+ ...prev,
+ refAreaLeft: '',
+ refAreaRight: '',
+ }));
+ return;
+ }
+
+ // xAxis domain
+ if (refAreaLeft && refAreaRight && refAreaLeft > refAreaRight)
+ [refAreaLeft, refAreaRight] = [refAreaRight, refAreaLeft];
+
+ // yAxis domain
+ const yAxisField = currentChart?.yAxis?.field || currentChart?.yAxis?.dataKey;
+ if (!yAxisField) return;
+
+ const from = data.findIndex(d => d[currentChart.xAxis.field] === refAreaLeft);
+ const to = data.findIndex(d => d[currentChart.xAxis.field] === refAreaRight);
+ const [bottom, top] = getAxisYDomain(from, to, yAxisField, 1);
+
+ setZoomState(prev => ({
+ ...prev,
+ refAreaLeft: '',
+ refAreaRight: '',
+ left: refAreaLeft,
+ right: refAreaRight,
+ bottom,
+ top,
+ }));
+ }, [zoomState, currentChart, getAxisYDomain]);
+
+ const zoomOut = useCallback(() => {
+ setZoomState({
+ left: 'dataMin',
+ right: 'dataMax',
+ refAreaLeft: '',
+ refAreaRight: '',
+ top: 'dataMax+1',
+ bottom: 'dataMin-1',
+ animation: true,
+ });
+ }, []);
+
+ // Analyze performance to determine rendering strategy (must be done with hooks)
+ const performanceAnalysis = currentChart?.data ? analyzeDataPerformance(currentChart.data.length, 2) : null;
+ const shouldUseMosaic = performanceAnalysis?.renderingStrategy === 'mosaic_plot';
+ const shouldUseCanvas = performanceAnalysis?.renderingStrategy === 'canvas';
+ const shouldUseObservablePlot = performanceAnalysis?.renderingStrategy === 'observable_plot';
+
+ // Debug logging (MUST be called every render to maintain hooks order)
+ React.useEffect(() => {
+ if (currentChart?.data && performanceAnalysis) {
+ console.log(`[ChartCanvas] Data size: ${currentChart.data.length} rows`);
+ console.log(`[ChartCanvas] Strategy: ${performanceAnalysis.renderingStrategy}`);
+ console.log(`[ChartCanvas] Using: ${shouldUseCanvas ? 'Canvas' : shouldUseMosaic ? 'Mosaic' : shouldUseObservablePlot ? 'Observable Plot' : 'Recharts'}`);
+ }
+ }, [currentChart?.data?.length, performanceAnalysis?.renderingStrategy, shouldUseCanvas, shouldUseMosaic, shouldUseObservablePlot]);
+ // Early returns after ALL hooks are called
if (!currentChart || !currentChart.data || currentChart.data.length === 0) {
return (
-
+
No Chart Data
@@ -45,6 +157,15 @@ const ChartCanvas: React.FC = () => {
);
}
+ // Don't render chart until dimensions are ready
+ if (!isReady) {
+ return (
+
+ );
+ }
+
// Get color palette
const palette = colorPalettes[currentChart.palette] || colorPalettes.primary;
@@ -56,20 +177,125 @@ const ChartCanvas: React.FC = () => {
// Render the appropriate chart based on type
return (
-
-
- {currentChart.title}
-
- {currentChart.description && (
-
- {currentChart.description}
-
+
+ {/* Header with title and zoom controls */}
+
+
+
+ {currentChart.title}
+
+ {currentChart.description && (
+
+ {currentChart.description}
+
+ )}
+
+
+ {/* Zoom Controls - only show for charts that support zoom */}
+ {currentChart.type !== 'pie' && (
+
+
+
+ Drag to zoom
+
+
+ )}
+
+
+ {/* Sampling Info */}
+ {currentChart.samplingInfo && (
+
+
+ 📊 {currentChart.samplingInfo.mode === 'fixed' ? 'Fixed' : 'Custom'} sampling:
+ {' '}{currentChart.samplingInfo.sampleSize?.toLocaleString()} of {currentChart.samplingInfo.totalRows?.toLocaleString()} rows
+ ({((currentChart.samplingInfo.samplingRatio || 0) * 100).toFixed(1)}%)
+
+
)}
-
-
- {renderChart(currentChart.type, palette)}
-
+
+ {shouldUseCanvas && currentChart.type !== 'pie' ? (
+ /* High-performance Canvas renderer for massive datasets (1M+) */
+
+ {
+ // Auto-detect actual field names from data structure
+ const sampleRow = currentChart.data[0] || {};
+ const aggregation = currentChart.query?.includes('SUM') ? 'sum' :
+ currentChart.query?.includes('AVG') ? 'avg' :
+ currentChart.query?.includes('COUNT') ? 'count' : 'sum';
+ return sampleRow.hasOwnProperty('dimension') ? 'dimension' : currentChart.xAxis.field;
+ })()}
+ yField={(() => {
+ const sampleRow = currentChart.data[0] || {};
+ const aggregation = currentChart.query?.includes('SUM') ? 'sum' :
+ currentChart.query?.includes('AVG') ? 'avg' :
+ currentChart.query?.includes('COUNT') ? 'count' : 'sum';
+ return sampleRow.hasOwnProperty(`${aggregation}_value`) ? `${aggregation}_value` : currentChart.yAxis.field;
+ })()}
+ xLabel={currentChart.xAxis.label}
+ yLabel={currentChart.yAxis.label}
+ width={chartWidth - 32}
+ height={chartHeight - 120}
+ colors={palette}
+ showGrid={currentChart.showGrid}
+ onZoom={(zoomBounds) => {
+ console.log('Canvas zoom:', zoomBounds);
+ // Could trigger new query for zoomed data in the future
+ }}
+ />
+
+ ) : shouldUseMosaic && currentChart.type !== 'pie' ? (
+ /* Canvas-based vgplot implementation optimized for large datasets */
+
+
+
+ ) : shouldUseObservablePlot && currentChart.type !== 'pie' ? (
+ /* Observable Plot for medium datasets (5K-50K) */
+
+
+
+ ) : (
+ /* Traditional Recharts renderer for smaller datasets (<5K) */
+
+ {renderChart(currentChart.type, palette)}
+
+ )}
);
@@ -86,8 +312,8 @@ const ChartCanvas: React.FC = () => {
name={xAxis.label}
stroke="#ffffff60"
scale={xAxis.scale || "auto"}
- domain={xAxis.domain || ["auto", "auto"]}
- allowDataOverflow={!!xAxis.domain}
+ domain={xAxis.domain || [zoomState.left, zoomState.right]}
+ allowDataOverflow={true}
>