Function ChartRenderService

src/views/ChartRenderService.tsx:115–326

()

}

export const ChartRenderService: FC = () => {
    const dispatch = useDispatch();

    const charts = useSelector(dfSelectors.getAllCharts);
    const tables = useSelector((state: DataFormulatorState) => state.tables);
    const conceptShelfItems = useSelector((state: DataFormulatorState) => state.conceptShelfItems);
    const chartSynthesisInProgress = useSelector((state: DataFormulatorState) => state.chartSynthesisInProgress);
    const maxStretchFactor = useSelector((state: DataFormulatorState) => state.config.maxStretchFactor);
    // Re-run when the focused canvas caches a fresh display-row sample so
    // thumbnails can use the same richer data the main chart is rendering.
    const displayRowsTick = useSelector((state: DataFormulatorState) => state.displayRowsTick);
    // Read the thumbnails map via a ref so we can check current values inside
    // the effect without adding the map to the dep list (the dispatch we
    // issue below mutates it, and including it would re-enter the effect).
    const chartThumbnailsRef = useRef<Record<string, string>>({});
    chartThumbnailsRef.current = useSelector((state: DataFormulatorState) => state.chartThumbnails) || {};

    // Track which charts are currently being rendered to avoid duplicates
    const renderingRef = useRef<Set<string>>(new Set());

    // Track previous chart count for cleanup
    const prevChartIdsRef = useRef<Set<string>>(new Set());

    const processChart = useCallback(async (job: RenderJob) => {
        const { chart, table, conceptShelfItems: items, cacheKey } = job;

        // Skip if already rendering this chart
        if (renderingRef.current.has(chart.id)) return;
        renderingRef.current.add(chart.id);

        try {
            // --- Prepare data (mirror MemoizedChartObject's pipeline) ---
            // Prefer the same sample VisualizationView fetched for the
            // focused canvas — for virtual tables `table.rows` is only a
            // small preview slice, so rendering from it produces a
            // thumbnail that doesn't match the main chart. The canvas
            // populates `displayRowsCache` with up to 1000 server-sampled
            // rows; reuse that when present.
            const dispKey = computeDisplayRowsCacheKey(table, chart, items);
            const cachedDisplay = displayRowsCache.get(dispKey);
            let visTableRows: any[] = cachedDisplay
                ? structuredClone(cachedDisplay.rows)
                : structuredClone(table.rows);

            // Pre-aggregate for the encoding map
            visTableRows = prepVisTable(visTableRows, items, chart.encodingMap);

            // --- Resolve the spec to render ---
            // If a style variant is active, render its stored Vega-Lite spec so
            // the thumbnail matches what the user sees in the focused canvas.
            // Otherwise assemble the default spec from the encoding map.
            // (See design-docs/28-chart-style-refinement-agent.md.)
            const activeVariant = chart.activeVariantId
                ? chart.styleVariants?.find(v => v.id === chart.activeVariantId)
                : undefined;

            let fullSpec: any;
            if (activeVariant) {