Function SingleThreadGroupView

src/views/DataThread.tsx:826–2331

({
    threadIdx,
    threadLabel,
    isSplitThread = false,
    hasContinuationBelow = false,
    hideLabel = false,
    leafTables,
    chartElements,
    usedIntermediateTableIds,
    globalHighlightedTableIds,
    focusedThreadLeafId,
    sx
})

    focusedThreadLeafId?: string, // The leaf table ID of the thread containing the focused table
    sx?: SxProps
}> = function ({
    threadIdx,
    threadLabel,
    isSplitThread = false,
    hasContinuationBelow = false,
    hideLabel = false,
    leafTables,
    chartElements,
    usedIntermediateTableIds,
    globalHighlightedTableIds,
    focusedThreadLeafId,
    sx
}) {

    let tables = useSelector((state: DataFormulatorState) => state.tables);
    const activeWorkspace = useSelector((state: DataFormulatorState) => state.activeWorkspace);
    const { t } = useTranslation();
    const { manualRefresh } = useDataRefresh();
    const tableById = useMemo(() => new Map(tables.map(t => [t.id, t])), [tables]);

    let leafTableIds = leafTables.map(lt => lt.id);
    // Thread is highlighted only if this thread's leaf tables include the focused thread's leaf
    const threadHighlighted = focusedThreadLeafId 
        ? leafTableIds.includes(focusedThreadLeafId) 
        : false;
    // Ancestor thread: not the focused thread, but *owns* some highlighted tables
    // (tables that only appear as used/shared references don't count)
    const isAncestorThread = !threadHighlighted && globalHighlightedTableIds.length > 0
        && leafTables.some(lt => {
            const trigs = getTriggers(lt, tables);
            const chainIds = [...trigs.map(tp => tp.tableId), lt.id];
            const ownedIds = chainIds.filter(id => !usedIntermediateTableIds.includes(id));
            return ownedIds.some(id => globalHighlightedTableIds.includes(id));
        });
    const shouldHighlightThread = threadHighlighted || isAncestorThread;
    let parentTableId = leafTables[0].derive?.trigger.tableId || undefined;
    let parentTable = (parentTableId ? tableById.get(parentTableId) : undefined) as DictTable;

    let charts = useSelector(dfSelectors.getAllCharts);
    let focusedId = useSelector((state: DataFormulatorState) => state.focusedId);
    let focusedChartId = focusedId?.type === 'chart' ? focusedId.chartId : undefined;
    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;
        }
        return undefined;
    }, [focusedId, charts]);
    let draftNodes = useSelector((state: DataFormulatorState) => state.draftNodes);
    let generatedReports = useSelector(dfSelectors.getAllGeneratedReports);

    // Build a map from tableId → reports triggered from that table
    const reportsByTriggerTable = useMemo(() => {
        const map = new Map<string, GeneratedReport[]>();
        for (const report of generatedReports) {
            const triggerId = report.triggerTableId;