Adjust columns to fit the space

coder · BrunoQuaresma · Oct 23, 2024 · Sep 19, 2024 · Sep 19, 2024 · Sep 19, 2024
commit 647635d7c0aa257eba4951e63005cb60358b0990
diff --git a/site/src/modules/workspaces/WorkspaceTiming/Chart/Bar.tsx b/site/src/modules/workspaces/WorkspaceTiming/Chart/Bar.tsx
@@ -1,5 +1,6 @@
 import type { Interpolation, Theme } from "@emotion/react";
 import { type ButtonHTMLAttributes, forwardRef, type HTMLProps } from "react";
+import { CSSVars } from "./constants";
 
 export type BarColors = {
 	stroke: string;
@@ -8,9 +9,10 @@ export type BarColors = {
 
 type BaseBarProps<T> = Omit<T, "size" | "color"> & {
 	/**
-	 * The width of the bar component.
+	 * Scale used to determine the width based on the given value.
 	 */
-	size: number;
+	scale: number;
+	value: number;
 	/**
 	 * The X position of the bar component.
 	 */
@@ -25,36 +27,45 @@ type BaseBarProps<T> = Omit<T, "size" | "color"> & {
 type BarProps = BaseBarProps<HTMLProps<HTMLDivElement>>;
 
 export const Bar = forwardRef<HTMLDivElement, BarProps>(
-	({ colors, size, children, offset, ...htmlProps }, ref) => {
+	({ colors, scale, value, offset, ...htmlProps }, ref) => {
 		return (
-			<div css={barCss({ colors, size, offset })} {...htmlProps} ref={ref} />
+			<div
+				css={barCss({ colors, scale, value, offset })}
+				{...htmlProps}
+				ref={ref}
+			/>
 		);
 	},
 );
 
 type ClickableBarProps = BaseBarProps<ButtonHTMLAttributes<HTMLButtonElement>>;
 
 export const ClickableBar = forwardRef<HTMLButtonElement, ClickableBarProps>(
-	({ colors, size, offset, ...htmlProps }, ref) => {
+	({ colors, scale, value, offset, ...htmlProps }, ref) => {
 		return (
 			<button
 				type="button"
-				css={[...barCss({ colors, size, offset }), styles.clickable]}
+				css={[...barCss({ colors, scale, value, offset }), styles.clickable]}
 				{...htmlProps}
 				ref={ref}
 			/>
 		);
 	},
 );
 
-export const barCss = ({ size, colors, offset }: BaseBarProps<unknown>) => {
+export const barCss = ({
+	scale,
+	value,
+	colors,
+	offset,
+}: BaseBarProps<unknown>) => {
 	return [
 		styles.bar,
 		{
-			width: size,
+			width: `calc((var(${CSSVars.xAxisWidth}) * ${value}) / ${scale})`,
 			backgroundColor: colors?.fill,
 			borderColor: colors?.stroke,
-			marginLeft: offset,
+			marginLeft: `calc((var(${CSSVars.xAxisWidth}) * ${offset}) / ${scale})`,
 		},
 	];
 };

diff --git a/site/src/modules/workspaces/WorkspaceTiming/Chart/BarBlocks.tsx b/site/src/modules/workspaces/WorkspaceTiming/Chart/BarBlocks.tsx
@@ -1,6 +1,6 @@
 import type { Interpolation, Theme } from "@emotion/react";
 import { MoreHorizOutlined } from "@mui/icons-material";
-import type { FC } from "react";
+import { useLayoutEffect, useRef, useState, type FC } from "react";
 
 const sidePadding = 8;
 const spaceBetweenBlocks = 4;
@@ -9,21 +9,35 @@ const blockSize = 20;
 
 type BarBlocksProps = {
 	count: number;
-	barSize: number;
 };
 
-export const BarBlocks: FC<BarBlocksProps> = ({ count, barSize }) => {
+export const BarBlocks: FC<BarBlocksProps> = ({ count }) => {
+	const [parentWidth, setParentWidth] = useState<number>();
+	const blocksRef = useRef<HTMLDivElement>(null);
+
+	useLayoutEffect(() => {
+		if (!blocksRef.current || parentWidth) {
+			return;
+		}
+		const parentEl = blocksRef.current.parentElement;
+		if (!parentEl) {
+			throw new Error("BarBlocks must be a child of a Bar");
+		}
+		setParentWidth(parentEl.clientWidth);
+	}, [parentWidth]);
+
 	const totalSpaceBetweenBlocks = (count - 1) * spaceBetweenBlocks;
-	const freeSize = barSize - sidePadding * 2;
+	const freeSize = parentWidth ? parentWidth - sidePadding * 2 : 0;
 	const necessarySize = blockSize * count + totalSpaceBetweenBlocks;
 	const hasSpacing = necessarySize <= freeSize;
 	const nOfPossibleBlocks = Math.floor(
-		(freeSize - moreIconSize - totalSpaceBetweenBlocks) / blockSize,
+		(freeSize - moreIconSize) / (blockSize + spaceBetweenBlocks),
 	);
 	const nOfBlocks = hasSpacing ? count : nOfPossibleBlocks;
+	console.log("POSSIBLE ->", count, nOfPossibleBlocks);
 
 	return (
-		<div css={styles.blocks}>
+		<div ref={blocksRef} css={styles.blocks}>
 			{Array.from({ length: nOfBlocks }).map((_, i) => (
 				// biome-ignore lint/suspicious/noArrayIndexKey: we are using the index as a key here because the blocks are not expected to be reordered
 				<div key={i} css={styles.block} style={{ minWidth: blockSize }} />

diff --git a/site/src/modules/workspaces/WorkspaceTiming/Chart/Chart.tsx b/site/src/modules/workspaces/WorkspaceTiming/Chart/Chart.tsx
@@ -9,14 +9,14 @@ import React from "react";
 import type { BarColors } from "./Bar";
 import { YAxisSidePadding, YAxisWidth } from "./YAxis";
 
-export const ChartContent: FC<HTMLProps<HTMLDivElement>> = (props) => {
-	return <div css={styles.content} {...props} />;
-};
-
 export const Chart = (props: HTMLProps<HTMLDivElement>) => {
 	return <div css={styles.chart} {...props} />;
 };
 
+export const ChartContent: FC<HTMLProps<HTMLDivElement>> = (props) => {
+	return <div css={styles.content} {...props} />;
+};
+
 export const ChartToolbar = (props: HTMLProps<HTMLDivElement>) => {
 	return <div css={styles.toolbar} {...props} />;
 };

diff --git a/site/src/modules/workspaces/WorkspaceTiming/Chart/XAxis.tsx b/site/src/modules/workspaces/WorkspaceTiming/Chart/XAxis.tsx
@@ -1,10 +1,16 @@
-import type { FC, HTMLProps } from "react";
+import {
+	useLayoutEffect,
+	useRef,
+	useState,
+	type FC,
+	type HTMLProps,
+} from "react";
 import type { Interpolation, Theme } from "@emotion/react";
 import { YAxisCaptionHeight } from "./YAxis";
 import { formatTime } from "./utils";
-import { XAxisLabelsHeight, XAxisRowsGap } from "./constants";
+import { CSSVars, XAxisLabelsHeight, XAxisRowsGap } from "./constants";
 
-export const XAxisWidth = 130;
+export const XAxisMinWidth = 130;
 export const XAxisSidePadding = 16;
 
 type XAxisProps = HTMLProps<HTMLDivElement> & {
@@ -13,13 +19,28 @@ type XAxisProps = HTMLProps<HTMLDivElement> & {
 };
 
 export const XAxis: FC<XAxisProps> = ({ ticks, scale, ...htmlProps }) => {
+	const rootRef = useRef<HTMLDivElement>(null);
+
+	// 	The X axis should occupy all available space. If there is extra space,
+	// 	increase the column width accordingly. Use a CSS variable to propagate the
+	// 	value to the child components.
+	useLayoutEffect(() => {
+		const rootEl = rootRef.current;
+		if (!rootEl) {
+			return;
+		}
+		// We always add one extra column to the grid to ensure that the last column
+		// is fully visible.
+		const avgWidth = rootEl.clientWidth / (ticks.length + 1);
+		avgWidth > XAxisMinWidth ? avgWidth : XAxisMinWidth;
+		rootEl.style.setProperty(CSSVars.xAxisWidth, `${avgWidth}px`);
+	}, [ticks]);
+
 	return (
-		<div css={styles.root} {...htmlProps}>
+		<div css={styles.root} {...htmlProps} ref={rootRef}>
 			<XAxisLabels>
 				{ticks.map((tick) => (
-					<XAxisLabel key={tick} width={XAxisWidth}>
-						{formatTime(tick, scale)}
-					</XAxisLabel>
+					<XAxisLabel key={tick}>{formatTime(tick, scale)}</XAxisLabel>
 				))}
 			</XAxisLabels>
 			{htmlProps.children}
@@ -32,11 +53,7 @@ export const XAxisLabels: FC<HTMLProps<HTMLUListElement>> = (props) => {
 	return <ul css={styles.labels} {...props} />;
 };
 
-type XAxisLabelProps = HTMLProps<HTMLLIElement> & {
-	width: number;
-};
-
-export const XAxisLabel: FC<XAxisLabelProps> = ({ width, ...htmlProps }) => {
+export const XAxisLabel: FC<HTMLProps<HTMLLIElement>> = (props) => {
 	return (
 		<li
 			css={[
@@ -47,13 +64,13 @@ export const XAxisLabel: FC<XAxisLabelProps> = ({ width, ...htmlProps }) => {
 					// 2. Shift the label to the left by half of the column width.
 					// Note: This adjustment is not applied to the first element,
 					// as the 0 label/value is not displayed in the chart.
-					width: width * 2,
+					width: `calc(var(${CSSVars.xAxisWidth}) * 2)`,
 					"&:not(:first-child)": {
-						marginLeft: -width,
+						marginLeft: `calc(-1 * var(${CSSVars.xAxisWidth}))`,
 					},
 				},
 			]}
-			{...htmlProps}
+			{...props}
 		/>
 	);
 };
@@ -108,7 +125,10 @@ export const XGrid: FC<XGridProps> = ({ columns, ...htmlProps }) => {
 	return (
 		<div css={styles.grid} role="presentation" {...htmlProps}>
 			{[...Array(columns).keys()].map((key) => (
-				<div key={key} css={[styles.column, { width: XAxisWidth }]} />
+				<div
+					key={key}
+					css={[styles.column, { width: `var(${CSSVars.xAxisWidth})` }]}
+				/>
 			))}
 		</div>
 	);
@@ -138,7 +158,7 @@ const styles = {
 		alignItems: "center",
 		borderBottom: `1px solid ${theme.palette.divider}`,
 		height: XAxisLabelsHeight,
-		padding: `0px ${XAxisSidePadding}px`,
+		padding: 0,
 		minWidth: "100%",
 		flexShrink: 0,
 		position: "sticky",

diff --git a/site/src/modules/workspaces/WorkspaceTiming/Chart/constants.ts b/site/src/modules/workspaces/WorkspaceTiming/Chart/constants.ts
@@ -1,3 +1,6 @@
 // Constants that are used across the Chart components
 export const XAxisLabelsHeight = 40;
 export const XAxisRowsGap = 20;
+export const CSSVars = {
+	xAxisWidth: "--x-axis-width",
+};
diff --git a/site/src/modules/workspaces/WorkspaceTiming/Chart/utils.ts b/site/src/modules/workspaces/WorkspaceTiming/Chart/utils.ts
@@ -60,30 +60,9 @@ export const formatTime = (time: number, scale: number): string => {
 	})}s`;
 };
 
-// Helper function to convert the tick spacing into pixel size. This is used
-// for setting the bar width and offset.
-export const calcSize = (
-	time: number,
-	scale: number,
-	columnWidth: number,
-): number => {
-	return (columnWidth * time) / scale;
-};
-
-export const calcBarSizeAndOffset = (
+export const calcOffset = (
 	timing: BaseTiming,
 	generalTiming: BaseTiming,
-	scale: number,
-	columnWidth: number,
-) => {
-	const offset = calcSize(
-		timing.startedAt.getTime() - generalTiming.startedAt.getTime(),
-		scale,
-		columnWidth,
-	);
-	const size = calcSize(calcDuration(timing), scale, columnWidth);
-	return {
-		size,
-		offset,
-	};
+): number => {
+	return timing.startedAt.getTime() - generalTiming.startedAt.getTime();
 };
diff --git a/site/src/modules/workspaces/WorkspaceTiming/ResourcesChart.tsx b/site/src/modules/workspaces/WorkspaceTiming/ResourcesChart.tsx
@@ -3,7 +3,7 @@ import {
 	XAxisRow,
 	XAxisRows,
 	XAxisSections,
-	XAxisWidth,
+	XAxisMinWidth,
 } from "./Chart/XAxis";
 import { useState, type FC } from "react";
 import {
@@ -15,8 +15,8 @@ import {
 } from "./Chart/YAxis";
 import { Bar } from "./Chart/Bar";
 import {
-	calcBarSizeAndOffset,
 	calcDuration,
+	calcOffset,
 	combineTimings,
 	formatTime,
 	makeTicks,
@@ -137,12 +137,9 @@ export const ResourcesChart: FC<ResourcesChartProps> = ({
 									<XAxisRow key={t.name} yAxisLabelId={t.name}>
 										<ResourceTooltip timing={t}>
 											<Bar
-												{...calcBarSizeAndOffset(
-													t,
-													generalTiming,
-													scale,
-													XAxisWidth,
-												)}
+												value={calcDuration(t)}
+												offset={calcOffset(t, generalTiming)}
+												scale={scale}
 												colors={legendsByAction[t.action].colors}
 											/>
 										</ResourceTooltip>

diff --git a/site/src/modules/workspaces/WorkspaceTiming/StagesChart.tsx b/site/src/modules/workspaces/WorkspaceTiming/StagesChart.tsx
@@ -3,7 +3,7 @@ import {
 	XAxisRow,
 	XAxisRows,
 	XAxisSections,
-	XAxisWidth,
+	XAxisMinWidth,
 } from "./Chart/XAxis";
 import type { FC } from "react";
 import {
@@ -15,8 +15,8 @@ import {
 } from "./Chart/YAxis";
 import { Bar, ClickableBar } from "./Chart/Bar";
 import {
-	calcBarSizeAndOffset,
 	calcDuration,
+	calcOffset,
 	combineTimings,
 	formatTime,
 	makeTicks,
@@ -112,29 +112,25 @@ export const StagesChart: FC<StagesChartProps> = ({
 							return (
 								<XAxisRows key={category}>
 									{timingsInCategory.map((t) => {
-										const barSizeAndOffset = calcBarSizeAndOffset(
-											t,
-											generalTiming,
-											scale,
-											XAxisWidth,
-										);
+										const value = calcDuration(t);
+										const offset = calcOffset(t, generalTiming);
+
 										return (
 											<XAxisRow key={t.name} yAxisLabelId={t.name}>
 												{/** We only want to expand stages with more than one resource */}
 												{t.resources > 1 ? (
 													<ClickableBar
-														{...barSizeAndOffset}
+														scale={scale}
+														value={value}
+														offset={offset}
 														onClick={() => {
 															onSelectStage(t, category);
 														}}
 													>
-														<BarBlocks
-															count={t.resources}
-															barSize={barSizeAndOffset.size}
-														/>
+														<BarBlocks count={t.resources} />
 													</ClickableBar>
 												) : (
-													<Bar {...barSizeAndOffset} />
+													<Bar scale={scale} value={value} offset={offset} />
 												)}
 												{formatTime(calcDuration(t), scale)}
 											</XAxisRow>