Function DataThread

src/views/DataThread.tsx:2849–3488

({ sx })

}

export const DataThread: FC<{sx?: SxProps}> = function ({ sx }) {
    const { t } = useTranslation();
    const dispatch = useDispatch<AppDispatch>();

    let tables = useSelector((state: DataFormulatorState) => state.tables);
    let focusedId = useSelector((state: DataFormulatorState) => state.focusedId);
    let charts = useSelector(dfSelectors.getAllCharts);

    let generatedReports = useSelector(dfSelectors.getAllGeneratedReports);

    // Derive focusedTableId from focusedId for scroll/highlight logic
    let focusedTableId = useMemo(() => {
        if (!focusedId) return undefined;
        if (focusedId.type === 'table') return focusedId.tableId;
        if (focusedId.type === 'chart') {
            const chart = charts.find(c => c.id === focusedId.chartId);
            return chart?.tableRef;
        }
        if (focusedId.type === 'report') {
            const report = generatedReports.find(r => r.id === focusedId.reportId);
            return report?.triggerTableId;
        }
        return undefined;
    }, [focusedId, charts, generatedReports]);

    let chartSynthesisInProgress = useSelector((state: DataFormulatorState) => state.chartSynthesisInProgress);

    const conceptShelfItems = useSelector((state: DataFormulatorState) => state.conceptShelfItems);

    // Subscribe to draftNodes so the scroll-to-target effect re-runs when an
    // active clarify/explain entry appears or resolves.
    const draftNodes = useSelector((state: DataFormulatorState) => state.draftNodes);

    const containerRef = useRef<null | HTMLDivElement>(null)
    // Outer wrapper containing both the thread area and the chatbox.
    // Its height is governed by the parent Allotment pane and stays constant
    // when the chatbox grows/shrinks during clarification or explanation.
    // Used to derive a stable viewportHeight for split decisions so that
    // chatbox resizing doesn't trigger re-splitting of long threads.
    const outerRef = useRef<null | HTMLDivElement>(null)
    const [expandedColumns, setExpandedColumns] = useState(false);
    const [containerWidth, setContainerWidth] = useState(0);
    // Track container height so we can detect when the chatbox grows/shrinks
    // (which compresses/expands containerRef as a flex sibling).  Used to
    // trigger the scroll-to-target effect below.
    const [containerHeight, setContainerHeight] = useState(0);
    // Increments every time the chat input is focused.  Used to retrigger the
    // scroll-to-target effect even when neither focusedId nor containerHeight
    // changes (e.g. user just clicks into the input without typing).
    const [chatboxFocusTick, setChatboxFocusTick] = useState(0);
    const [isDragOver, setIsDragOver] = useState(false);

    // ── Drop handler for catalog table items from DataSourceSidebar ──────
    const handleDragOver = useCallback((e: React.DragEvent) => {
        if (e.dataTransfer.types.includes('application/json')) {
            e.preventDefault();
            e.dataTransfer.dropEffect = 'copy';
            setIsDragOver(true);