Scale grid text (#4747)

* scale grid text bubbles

* better spacing

* update screenshots

* more screenshots

app/packages/core/src/components/Grid/Grid.tsx

@@ -17,6 +17,7 @@ import { v4 as uuid } from "uuid";
 import { gridCrop, gridSpacing, pageParameters } from "./recoil";
 import useAt from "./useAt";
 import useEscape from "./useEscape";
+import useFontSize from "./useFontSize";
 import useRecords from "./useRecords";
 import useRefreshers from "./useRefreshers";
 import useSelect from "./useSelect";
@@ -47,6 +48,7 @@ function Grid() {
   const lookerOptions = fos.useLookerOptions(false);
   const createLooker = fos.useCreateLooker(false, true, lookerOptions);
   const setSample = fos.useExpandSample(store);
+  const getFontSize = useFontSize(id);
 
   const spotlight = useMemo(() => {
     reset;
@@ -82,7 +84,14 @@ function Grid() {
         };
 
         if (!soft) {
-          init(createLooker.current?.({ ...result, symbol: id }));
+          init(
+            createLooker.current?.(
+              { ...result, symbol: id },
+              {
+                fontSize: getFontSize(),
+              }
+            )
+          );
         }
       },
       scrollbar: true,
@@ -91,6 +100,7 @@ function Grid() {
   }, [
     createLooker,
     get,
+    getFontSize,
     lookerStore,
     page,
     records,
@@ -102,7 +112,7 @@ function Grid() {
     threshold,
   ]);
   selectSample.current = useSelectSample(records);
-  useSelect(lookerOptions, lookerStore, spotlight);
+  useSelect(getFontSize, lookerOptions, lookerStore, spotlight);
 
   useLayoutEffect(() => {
     if (resizing || !spotlight) {

app/packages/core/src/components/Grid/useFontSize.ts

@@ -0,0 +1,22 @@
+import { useCallback } from "react";
+import useThreshold from "./useThreshold";
+
+const MAX = 36;
+const MIN = 10;
+const SCALE_FACTOR = 0.09;
+
+export default (id: string) => {
+  const threshold = useThreshold();
+
+  return useCallback(() => {
+    const width = document.getElementById(id)?.getBoundingClientRect().width;
+    if (!width) {
+      throw new Error("unexpected");
+    }
+
+    return Math.max(
+      Math.min((width / threshold(width)) * SCALE_FACTOR, MAX),
+      MIN
+    );
+  }, [id, threshold]);
+};

app/packages/core/src/components/Grid/useSelect.ts

@@ -5,6 +5,7 @@ import { useEffect } from "react";
 import { useRecoilValue } from "recoil";
 
 export default function useSelect(
+  getFontSize: () => number,
   options: ReturnType<typeof fos.useLookerOptions>,
   store: WeakMap<ID, fos.Lookers>,
   spotlight?: Spotlight<number, fos.Sample>
@@ -14,14 +15,16 @@ export default function useSelect(
   const selected = useRecoilValue(fos.selectedSamples);
   useEffect(() => {
     deferred(() => {
+      const fontSize = getFontSize();
       spotlight?.updateItems((id) => {
         store.get(id)?.updateOptions({
           ...options,
+          fontSize,
           selected: selected.has(id.description),
         });
       });
     });
-  }, [deferred, options, selected, spotlight, store]);
+  }, [deferred, getFontSize, options, selected, spotlight, store]);
 
   useEffect(() => {
     return spotlight ? init() : undefined;

app/packages/looker/src/elements/common/tags.module.css

@@ -4,13 +4,18 @@
 
 .lookerTags {
   position: absolute;
+  display: flex;
+  gap: 4px;
+  justify-content: left;
   bottom: 0;
-  padding: 0.5rem;
   max-height: 100%;
   overflow-y: auto;
   scrollbar-width: none;
   width: 100%;
   pointer-events: none;
+
+  font-size: 14px;
+  line-height: 12px;
 }
 
 .lookerTags::-webkit-scrollbar {
@@ -27,12 +32,8 @@
 .lookerTags > div {
   display: inline-block;
   box-sizing: content-box;
-  height: 1em;
-  margin: 0 2px 0;
-  padding: 3px;
+  padding: 2px;
   color: var(--fo-palette-text-lookerTag);
-  font-size: 14px;
-  line-height: 12px;
   border-radius: 3px;
   font-weight: bold;
   text-align: center;

app/packages/looker/src/elements/common/tags.ts

@@ -9,23 +9,23 @@ import {
   DATE_FIELD,
   DATE_TIME_FIELD,
   EMBEDDED_DOCUMENT_FIELD,
-  Field,
   FLOAT_FIELD,
-  formatDate,
-  formatDateTime,
   FRAME_NUMBER_FIELD,
   FRAME_SUPPORT_FIELD,
-  getColor,
+  Field,
   INT_FIELD,
   LABELS_PATH,
   LIST_FIELD,
   OBJECT_ID_FIELD,
   REGRESSION,
-  Schema,
   STRING_FIELD,
+  Schema,
   TEMPORAL_DETECTION,
   TEMPORAL_DETECTIONS,
   VALID_PRIMITIVE_TYPES,
+  formatDate,
+  formatDateTime,
+  getColor,
   withPath,
 } from "@fiftyone/utilities";
 import { isEqual } from "lodash";
@@ -54,15 +54,19 @@ interface TagData {
   value: string;
 }
 
+const LINE_HEIGHT_COEFFICIENT = 1.15;
+const SPACING_COEFFICIENT = 0.25;
+
 export class TagsElement<State extends BaseState> extends BaseElement<State> {
   private activePaths: string[] = [];
-  private customizedColors: CustomizeColor[] = [];
-  private labelTagColors: LabelTagColor = {};
-  private colorPool: string[];
+  private attributeVisibility: object;
   private colorBy: COLOR_BY.FIELD | COLOR_BY.VALUE | COLOR_BY.INSTANCE;
+  private colorPool: string[];
   private colorSeed: number;
+  private customizedColors: CustomizeColor[] = [];
+  private fontSize?: number;
+  private labelTagColors: LabelTagColor = {};
   private playing = false;
-  private attributeVisibility: object;
 
   createHTMLElement() {
     const container = document.createElement("div");
@@ -79,18 +83,20 @@ export class TagsElement<State extends BaseState> extends BaseElement<State> {
       config: { fieldSchema, ...r },
       options: {
         activePaths,
+        attributeVisibility,
         coloring,
-        timeZone,
         customizeColorSetting,
+        fontSize,
+        filter,
         labelTagColors,
         selectedLabelTags,
-        filter,
-        attributeVisibility,
+        timeZone,
       },
       playing,
     }: Readonly<State>,
     sample: Readonly<Sample>
   ) {
+    this.handleFont(fontSize);
     if (this.playing !== playing) {
       this.playing = playing;
       if (playing) {
@@ -479,6 +485,22 @@ export class TagsElement<State extends BaseState> extends BaseElement<State> {
 
     return this.element;
   }
+
+  private handleFont(fontSize?: number) {
+    if (this.fontSize !== fontSize) {
+      this.fontSize = fontSize;
+      this.element.style.setProperty("font-size", `${fontSize}px`);
+
+      this.element.style.setProperty(
+        "line-height",
+        `${fontSize * LINE_HEIGHT_COEFFICIENT}px`
+      );
+
+      const spacing = `${fontSize * SPACING_COEFFICIENT}px`;
+      this.element.style.setProperty("gap", spacing);
+      this.element.style.setProperty("padding", spacing);
+    }
+  }
 }
 
 export const applyTagValue = (

app/packages/looker/src/state.ts

@@ -154,6 +154,7 @@ export interface KeypointSkeleton {
 interface BaseOptions {
   highlight: boolean;
   activePaths: string[];
+  fontSize?: number;
   filter: (path: string, value: unknown) => boolean;
   coloring: Coloring;
   customizeColorSetting: CustomizeColor[];

app/packages/state/src/hooks/useCreateLooker.ts

@@ -69,7 +69,10 @@ export default <T extends AbstractLooker<BaseState>>(
 
   const create = useRecoilCallback(
     ({ snapshot }) =>
-      ({ frameNumber, frameRate, sample, urls: rawUrls, symbol }): T => {
+      (
+        { frameNumber, frameRate, sample, urls: rawUrls, symbol },
+        extra: Partial<Omit<Parameters<T["updateOptions"]>[0], "selected">> = {}
+      ): T => {
         let create:
           | typeof FrameLooker
           | typeof ImageLooker
@@ -236,6 +239,7 @@ export default <T extends AbstractLooker<BaseState>>(
           { ...config, symbol },
           {
             ...options,
+            ...extra,
             selected: selected.has(sample._id),
             highlight: highlight?.(sample),
           }