fix: scale colorbar tick font size

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', () => {

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,25 +37,48 @@ type Props = {
 const ColorBar: React.FC<Props> = ({ coloringFunctions }) => {
   const { minValue, maxValue } = coloringFunctions;
   const { colorGradient } = usePageParams();
+  const colorBarRef = useRef<HTMLDivElement>(null);
+  const [colorBarWidth, setColorBarWidth] = useState(800);
 
-  if (minValue === undefined || maxValue === undefined) {
-    return null;
-  }
+  useEffect(() => {
+    const el = colorBarRef.current;
+    if (!el) return;
+    const observer = new ResizeObserver((entries) => {
+      const width = entries[0]?.contentRect.width;
+      if (width) setColorBarWidth(width);
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
 
-  const ticks = useMemo(() => getTicks(coloringFunctions), [coloringFunctions]);
+  const ticks = useMemo(
+    () => getTicks(coloringFunctions, colorBarWidth),
+    [coloringFunctions, colorBarWidth],
+  );
   const renormalize = isFieldWholeNumbersOnly(coloringFunctions.colorBy)
     ? (value: number) =>
         coloringFunctions.getNormalizedValue(
           Math.round(coloringFunctions.getDenormalizedValue(value)),
         )
     : undefined;
 
+  if (minValue === undefined || maxValue === undefined) {
+    return null;
+  }
+
   return (
-    <div style={{ width: '100%' }}>
+    <div ref={colorBarRef} style={{ width: '100%' }}>
       <div style={{ height: '1em', width: '100%' }}>
         <BaseColorBar colorGradient={colorGradient} renormalize={renormalize} />
       </div>
-      <div style={{ position: 'relative', height: '2.5em', width: '100%' }}>
+      <div
+        style={{
+          position: 'relative',
+          height: '2.5em',
+          width: '100%',
+          fontSize: `${Math.max(0.5, Math.min(1, colorBarWidth / 900))}em`,
+        }}
+      >
         {ticks.map(({ position, label }, index) => (
           <div
             key={index}
@@ -83,7 +106,10 @@ const ColorBar: React.FC<Props> = ({ 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 [];
@@ -173,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,
   });