From 375282cd13116c902beabcd1d2ac1e9247692360 Mon Sep 17 00:00:00 2001 From: Dhanush Kannan Date: Thu, 25 Jun 2026 15:37:07 +0530 Subject: [PATCH 1/5] fix: scale colorbar tick font size --- src/features/transforms/coloring/ColorBar.tsx | 32 +++++++++++++++---- 1 file changed, 26 insertions(+), 6 deletions(-) diff --git a/src/features/transforms/coloring/ColorBar.tsx b/src/features/transforms/coloring/ColorBar.tsx index ddaea92e8..d6ca08723 100644 --- a/src/features/transforms/coloring/ColorBar.tsx +++ b/src/features/transforms/coloring/ColorBar.tsx @@ -1,4 +1,4 @@ -import React, { useMemo } from 'react'; +import React, { useEffect, useMemo, useRef, useState } from 'react'; import usePageParams from '@features/params/usePageParams'; import { getFieldValueType } from '@features/table/getValueType'; @@ -37,10 +37,19 @@ type Props = { const ColorBar: React.FC = ({ coloringFunctions }) => { const { minValue, maxValue } = coloringFunctions; const { colorGradient } = usePageParams(); + const containerRef = useRef(null); + const [containerWidth, setContainerWidth] = useState(800); - if (minValue === undefined || maxValue === undefined) { - return null; - } + useEffect(() => { + const el = containerRef.current; + if (!el) return; + const observer = new ResizeObserver((entries) => { + const width = entries[0]?.contentRect.width; + if (width) setContainerWidth(width); + }); + observer.observe(el); + return () => observer.disconnect(); + }, []); const ticks = useMemo(() => getTicks(coloringFunctions), [coloringFunctions]); const renormalize = isFieldWholeNumbersOnly(coloringFunctions.colorBy) @@ -50,12 +59,23 @@ const ColorBar: React.FC = ({ coloringFunctions }) => { ) : undefined; + if (minValue === undefined || maxValue === undefined) { + return null; + } + return ( -
+
-
+
{ticks.map(({ position, label }, index) => (
Date: Thu, 25 Jun 2026 16:15:09 +0530 Subject: [PATCH 2/5] fix: zoom control icon size and color bar number format. --- src/features/map/EntityMap.tsx | 18 ++++++++++++-- src/features/map/ZoomControls.tsx | 24 ++++++++++--------- src/features/transforms/coloring/ColorBar.tsx | 12 +++++++--- 3 files changed, 38 insertions(+), 16 deletions(-) diff --git a/src/features/map/EntityMap.tsx b/src/features/map/EntityMap.tsx index bf4453bdf..f755abc03 100644 --- a/src/features/map/EntityMap.tsx +++ b/src/features/map/EntityMap.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { ObjectType } from '@features/params/PageParamTypes'; import usePageParams from '@features/params/usePageParams'; @@ -53,6 +53,19 @@ const EntityMap: React.FC = ({ entities, maxWidth = 2000 }) => { const { colorBy, objectType, pinned, updatePageParams } = usePageParams(); const [mapScale, setMapScale] = useState(1); + const outerRef = useRef(null); + const [containerWidth, setContainerWidth] = useState(800); + + useEffect(() => { + const el = outerRef.current; + if (!el) return; + const observer = new ResizeObserver((entries) => { + const width = entries[0]?.contentRect.width; + if (width) setContainerWidth(width); + }); + observer.observe(el); + return () => observer.disconnect(); + }, []); const updateMapScale = useCallback(() => { const rect = contentRef.current?.getBoundingClientRect(); @@ -140,11 +153,12 @@ const EntityMap: React.FC = ({ entities, maxWidth = 2000 }) => { }, [updateMapScale]); return ( -
+
void; zoomOut: () => void; resetTransform: () => void; + containerWidth?: number; }; -const ZoomControls: React.FC = ({ zoomIn, zoomOut, resetTransform }) => { +const ZoomControls: React.FC = ({ zoomIn, zoomOut, resetTransform, containerWidth = 800 }) => { + const iconSize = containerWidth < 500 ? 16 : containerWidth < 700 ? 20 : 24; + const padding = containerWidth < 500 ? '0.25em' : containerWidth < 700 ? '0.35em' : '0.5em'; + const buttonStyle: React.CSSProperties = { + padding, + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + }; return (
- + - + - +
); @@ -38,11 +47,4 @@ const containerStyle: React.CSSProperties = { gap: '0.5em', }; -const buttonStyle: React.CSSProperties = { - padding: '0.5em', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', -}; - export default ZoomControls; diff --git a/src/features/transforms/coloring/ColorBar.tsx b/src/features/transforms/coloring/ColorBar.tsx index d6ca08723..a521e5429 100644 --- a/src/features/transforms/coloring/ColorBar.tsx +++ b/src/features/transforms/coloring/ColorBar.tsx @@ -51,7 +51,10 @@ const ColorBar: React.FC = ({ coloringFunctions }) => { return () => observer.disconnect(); }, []); - const ticks = useMemo(() => getTicks(coloringFunctions), [coloringFunctions]); + const ticks = useMemo( + () => getTicks(coloringFunctions, containerWidth), + [coloringFunctions, containerWidth], + ); const renormalize = isFieldWholeNumbersOnly(coloringFunctions.colorBy) ? (value: number) => coloringFunctions.getNormalizedValue( @@ -103,7 +106,10 @@ const ColorBar: React.FC = ({ coloringFunctions }) => { * * @returns An array of tuples where each tuple contains a normalized position (0 to 1) and its corresponding label. */ -function getTicks(coloringFunctions: ColoringFunctions): { position: number; label: string }[] { +function getTicks( + coloringFunctions: ColoringFunctions, + widthPx: number, +): { position: number; label: string }[] { const { colorBy, minValue, maxValue, getDenormalizedValue, getNormalizedValue } = coloringFunctions; if (colorBy === Field.None) return []; @@ -193,7 +199,7 @@ function getTicks(coloringFunctions: ColoringFunctions): { position: number; lab const formatter = new Intl.NumberFormat(undefined, { notation: 'compact', - compactDisplay: 'long', // or 'long' for “thousand”, “million” + compactDisplay: widthPx < 700 ? 'short' : 'long', maximumFractionDigits: 1, }); From 50b496f432c5d5f98a47e80118da3d8b6993156d Mon Sep 17 00:00:00 2001 From: Dhanush Kannan Date: Thu, 25 Jun 2026 16:43:24 +0530 Subject: [PATCH 3/5] Linting and test fix --- src/features/map/ZoomControls.tsx | 7 ++++++- .../table/__tests__/InteractiveEntityTable.test.tsx | 2 +- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/features/map/ZoomControls.tsx b/src/features/map/ZoomControls.tsx index 9a632779c..1d76ba075 100644 --- a/src/features/map/ZoomControls.tsx +++ b/src/features/map/ZoomControls.tsx @@ -11,7 +11,12 @@ type Props = { containerWidth?: number; }; -const ZoomControls: React.FC = ({ zoomIn, zoomOut, resetTransform, containerWidth = 800 }) => { +const ZoomControls: React.FC = ({ + zoomIn, + zoomOut, + resetTransform, + containerWidth = 800, +}) => { const iconSize = containerWidth < 500 ? 16 : containerWidth < 700 ? 20 : 24; const padding = containerWidth < 500 ? '0.25em' : containerWidth < 700 ? '0.35em' : '0.5em'; const buttonStyle: React.CSSProperties = { diff --git a/src/features/table/__tests__/InteractiveEntityTable.test.tsx b/src/features/table/__tests__/InteractiveEntityTable.test.tsx index e8811251a..0f9ad1b4b 100644 --- a/src/features/table/__tests__/InteractiveEntityTable.test.tsx +++ b/src/features/table/__tests__/InteractiveEntityTable.test.tsx @@ -205,7 +205,7 @@ describe('InteractiveEntityTable', () => { renderEntityTable({ entities: [numericObject] }); - expect(screen.getByRole('cell', { name: '1,234,567' })).toBeInTheDocument(); + expect(screen.getByRole('cell', { name: (1234567).toLocaleString() })).toBeInTheDocument(); }); it('disables search bar filter when shouldFilterUsingSearchBar is false', () => { From a916fc0c4321ae5ab0d45a13e3c0e1b9f2c7e25f Mon Sep 17 00:00:00 2001 From: Dhanush Kannan Date: Sun, 28 Jun 2026 21:24:29 +0530 Subject: [PATCH 4/5] fix: address PR review - rename colorbar vars and simplify zoom controls sizing MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Renamed containerRef/containerWidth to colorBarRef/colorBarWidth in ColorBar.tsx for clarity. Simplified ZoomControls scaling by setting fontSize on the container div instead of computing separate iconSize and padding values — since all units are em-based, one variable now controls everything. --- src/features/map/ZoomControls.tsx | 26 ++++++++++--------- src/features/transforms/coloring/ColorBar.tsx | 16 ++++++------ 2 files changed, 22 insertions(+), 20 deletions(-) diff --git a/src/features/map/ZoomControls.tsx b/src/features/map/ZoomControls.tsx index 1d76ba075..ded804b00 100644 --- a/src/features/map/ZoomControls.tsx +++ b/src/features/map/ZoomControls.tsx @@ -17,31 +17,33 @@ const ZoomControls: React.FC = ({ resetTransform, containerWidth = 800, }) => { - const iconSize = containerWidth < 500 ? 16 : containerWidth < 700 ? 20 : 24; - const padding = containerWidth < 500 ? '0.25em' : containerWidth < 700 ? '0.35em' : '0.5em'; - const buttonStyle: React.CSSProperties = { - padding, - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - }; + const fontSize = containerWidth < 500 ? '0.7em' : containerWidth < 700 ? '0.85em' : '1em'; return ( -
+
- + - + - +
); }; +const iconStyle: React.CSSProperties = { width: '1em', height: '1em' }; + +const buttonStyle: React.CSSProperties = { + padding: '0.5em', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', +}; + const containerStyle: React.CSSProperties = { position: 'absolute', top: '0.5em', diff --git a/src/features/transforms/coloring/ColorBar.tsx b/src/features/transforms/coloring/ColorBar.tsx index a521e5429..4ed09170a 100644 --- a/src/features/transforms/coloring/ColorBar.tsx +++ b/src/features/transforms/coloring/ColorBar.tsx @@ -37,23 +37,23 @@ type Props = { const ColorBar: React.FC = ({ coloringFunctions }) => { const { minValue, maxValue } = coloringFunctions; const { colorGradient } = usePageParams(); - const containerRef = useRef(null); - const [containerWidth, setContainerWidth] = useState(800); + const colorBarRef = useRef(null); + const [colorBarWidth, setColorBarWidth] = useState(800); useEffect(() => { - const el = containerRef.current; + const el = colorBarRef.current; if (!el) return; const observer = new ResizeObserver((entries) => { const width = entries[0]?.contentRect.width; - if (width) setContainerWidth(width); + if (width) setColorBarWidth(width); }); observer.observe(el); return () => observer.disconnect(); }, []); const ticks = useMemo( - () => getTicks(coloringFunctions, containerWidth), - [coloringFunctions, containerWidth], + () => getTicks(coloringFunctions, colorBarWidth), + [coloringFunctions, colorBarWidth], ); const renormalize = isFieldWholeNumbersOnly(coloringFunctions.colorBy) ? (value: number) => @@ -67,7 +67,7 @@ const ColorBar: React.FC = ({ coloringFunctions }) => { } return ( -
+
@@ -76,7 +76,7 @@ const ColorBar: React.FC = ({ coloringFunctions }) => { position: 'relative', height: '2.5em', width: '100%', - fontSize: `${Math.max(0.5, Math.min(1, containerWidth / 900))}em`, + fontSize: `${Math.max(0.5, Math.min(1, colorBarWidth / 900))}em`, }} > {ticks.map(({ position, label }, index) => ( From b683c8591999a7b8016f4704bb65ac74d16cc228 Mon Sep 17 00:00:00 2001 From: Dhanush Kannan Date: Sun, 28 Jun 2026 22:01:45 +0530 Subject: [PATCH 5/5] fix: undo ZoomControls sizing changes --- src/features/map/EntityMap.tsx | 18 ++--------------- src/features/map/ZoomControls.tsx | 33 +++++++++++-------------------- 2 files changed, 14 insertions(+), 37 deletions(-) diff --git a/src/features/map/EntityMap.tsx b/src/features/map/EntityMap.tsx index f755abc03..bf4453bdf 100644 --- a/src/features/map/EntityMap.tsx +++ b/src/features/map/EntityMap.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; +import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { ObjectType } from '@features/params/PageParamTypes'; import usePageParams from '@features/params/usePageParams'; @@ -53,19 +53,6 @@ const EntityMap: React.FC = ({ entities, maxWidth = 2000 }) => { const { colorBy, objectType, pinned, updatePageParams } = usePageParams(); const [mapScale, setMapScale] = useState(1); - const outerRef = useRef(null); - const [containerWidth, setContainerWidth] = useState(800); - - useEffect(() => { - const el = outerRef.current; - if (!el) return; - const observer = new ResizeObserver((entries) => { - const width = entries[0]?.contentRect.width; - if (width) setContainerWidth(width); - }); - observer.observe(el); - return () => observer.disconnect(); - }, []); const updateMapScale = useCallback(() => { const rect = contentRef.current?.getBoundingClientRect(); @@ -153,12 +140,11 @@ const EntityMap: React.FC = ({ entities, maxWidth = 2000 }) => { }, [updateMapScale]); return ( -
+
void; zoomOut: () => void; resetTransform: () => void; - containerWidth?: number; }; -const ZoomControls: React.FC = ({ - zoomIn, - zoomOut, - resetTransform, - containerWidth = 800, -}) => { - const fontSize = containerWidth < 500 ? '0.7em' : containerWidth < 700 ? '0.85em' : '1em'; +const ZoomControls: React.FC = ({ zoomIn, zoomOut, resetTransform }) => { return ( -
+
- + - + - +
); }; -const iconStyle: React.CSSProperties = { width: '1em', height: '1em' }; - -const buttonStyle: React.CSSProperties = { - padding: '0.5em', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', -}; - const containerStyle: React.CSSProperties = { position: 'absolute', top: '0.5em', @@ -54,4 +38,11 @@ const containerStyle: React.CSSProperties = { gap: '0.5em', }; +const buttonStyle: React.CSSProperties = { + padding: '0.5em', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', +}; + export default ZoomControls;