Mutation over time grid doesn't show numbers when switching tabs

[chaoran-chen]

In my PR for the wastewater mutations over time plot (#504), I'm reusing the existing mutations over time grid and am observing a bug where the proportion numbers don't display initially when switching the tab but become visible if we change the size of the window:

https://dashboard-components-git-wastewater-mutations-cov-spectrum.vercel.app/?path=/story/visualization-wastewater-mutations-over-time--default

Screen.Recording.2024-11-15.at.16.52.18.mov

[fengelniederhammer]

The problem is the following:

We use this function to compute whether to show the proportion number or not:

dashboard-components/components/src/preact/mutationsOverTime/mutations-over-time-grid.tsx

Lines 90 to 113 in 8132797

	function useShowProportion(
	gridRef: RefObject<HTMLDivElement>,
	girdColumns: number,
	setShowProportionText: (value: ((prevState: boolean) => boolean) | boolean) => void,
	) {
	useEffect(() => {
	const checkWidth = () => {
	if (gridRef.current) {
	const width = gridRef.current.getBoundingClientRect().width;
	const widthPerDate = (width - remToPx(MUTATION_CELL_WIDTH_REM)) / girdColumns;
	const maxWidthProportionText = 28;
	setShowProportionText(widthPerDate > maxWidthProportionText);
	}
	};
	checkWidth();
	window.addEventListener('resize', checkWidth);
	return () => {
	window.removeEventListener('resize', checkWidth);
	};
	}, [girdColumns, gridRef, setShowProportionText]);
	}

When the tab is not visible, then checkWidth will execute gridRef.current.getBoundingClientRect().width, which evaluates to 0 (since that grid is currently not visible). Thus, the proportions are not shown.
The component does not receive an update when switching tabs.