Function chooseBestColumnLayout

src/views/DataThread.tsx:2804–2847

* Choose the best column layout that balances scroll burden vs whitespace. * * 1. If a single column fits within SCROLL_TOLERANCE × viewportHeight, * use one column — the small scroll is preferable to the whitespace * of an extra column (e.g. one long thread + one tiny thread). * 2. Other

(
    heights: number[],
    maxColumns: number,
    viewportHeight: number,
    flexOrder: boolean = false,
    minColumns: number = 1,
)

 */

function chooseBestColumnLayout(
    heights: number[],
    maxColumns: number,
    viewportHeight: number,
    flexOrder: boolean = false,
    minColumns: number = 1,
): number[][] {
    if (heights.length === 0) return [];

    const cap = Math.min(maxColumns, heights.length);
    const start = Math.min(Math.max(minColumns, 1), cap);
    const tolerantHeight = viewportHeight * SCROLL_TOLERANCE;

    // Compute effective column height including gaps between threads
    const columnEffectiveHeight = (col: number[]) => {
        const contentH = col.reduce((sum, idx) => sum + heights[idx], 0);
        const gapH = Math.max(0, col.length - 1) * LAYOUT_THREAD_GAP;
        return contentH + gapH;
    };

    // Evaluate every candidate column count (start … cap).
    // Pick the smallest n whose tallest column fits within tolerance.
    // If none fits, pick the one with the shortest tallest column.
    let bestLayout: number[][] = [];
    let bestMaxH = Infinity;

    for (let n = start; n <= cap; n++) {
        const layout = computeThreadColumnLayout(heights, n, flexOrder);
        const maxH = Math.max(...layout.map(columnEffectiveHeight));

        // Smallest n that fits within tolerance → least whitespace
        if (maxH <= tolerantHeight) {
            return layout;
        }

        // Otherwise track the layout with the shortest tallest column
        if (maxH < bestMaxH) {
            bestMaxH = maxH;
            bestLayout = layout;
        }
    }

    return bestLayout;
}

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