Apply objectLimit globally after filtering

site/components/InteractiveGraphics/InteractiveGraphics.tsx

@@ -1,6 +1,7 @@
 import useResizeObserver from "@react-hook/resize-observer"
 import { useCallback, useEffect, useMemo, useState } from "react"
 import { SuperGrid } from "react-supergrid"
+import { applyObjectLimit } from "site/utils/applyObjectLimit"
 import { getGraphicsBounds } from "site/utils/getGraphicsBounds"
 import { getMaxStep } from "site/utils/getMaxStep"
 import { sortRectsByArea } from "site/utils/sortRectsByArea"
@@ -421,65 +422,104 @@ export const InteractiveGraphics = ({
     filterLayerAndStep,
   })
 
-  const filterAndLimit = <T,>(
+  const filterObjects = <T,>(
     objects: T[] | undefined,
     filterFn: (obj: T) => boolean,
   ): (T & { originalIndex: number })[] => {
     if (!objects) return []
-    const filtered = objects
+    return objects
       .map((obj, index) => ({ ...obj, originalIndex: index }))
       .filter(filterFn)
-    return objectLimit ? filtered.slice(-objectLimit) : filtered
   }
 
-  const filteredLines = useMemo(
+  const preLimitLines = useMemo(
     () =>
-      filterAndLimit(graphics.lines, filterLines).sort(
+      filterObjects(graphics.lines, filterLines).sort(
         (a, b) =>
           (a.zIndex ?? 0) - (b.zIndex ?? 0) ||
           a.originalIndex - b.originalIndex,
       ),
-    [graphics.lines, filterLines, objectLimit],
+    [graphics.lines, filterLines],
   )
-  const filteredInfiniteLines = useMemo(
-    () => filterAndLimit(graphics.infiniteLines, filterLayerAndStep),
-    [graphics.infiniteLines, filterLayerAndStep, objectLimit],
+  const preLimitInfiniteLines = useMemo(
+    () => filterObjects(graphics.infiniteLines, filterLayerAndStep),
+    [graphics.infiniteLines, filterLayerAndStep],
   )
-  const filteredRects = useMemo(
-    () => sortRectsByArea(filterAndLimit(graphics.rects, filterRects)),
-    [graphics.rects, filterRects, objectLimit],
+  const preLimitRects = useMemo(
+    () => sortRectsByArea(filterObjects(graphics.rects, filterRects)),
+    [graphics.rects, filterRects],
   )
-  const filteredPolygons = useMemo(
-    () => filterAndLimit(graphics.polygons, filterPolygons),
-    [graphics.polygons, filterPolygons, objectLimit],
+  const preLimitPolygons = useMemo(
+    () => filterObjects(graphics.polygons, filterPolygons),
+    [graphics.polygons, filterPolygons],
   )
-  const filteredPoints = useMemo(
-    () => filterAndLimit(graphics.points, filterPoints),
-    [graphics.points, filterPoints, objectLimit],
+  const preLimitPoints = useMemo(
+    () => filterObjects(graphics.points, filterPoints),
+    [graphics.points, filterPoints],
   )
-  const filteredCircles = useMemo(
-    () => filterAndLimit(graphics.circles, filterCircles),
-    [graphics.circles, filterCircles, objectLimit],
+  const preLimitCircles = useMemo(
+    () => filterObjects(graphics.circles, filterCircles),
+    [graphics.circles, filterCircles],
   )
-  const filteredTexts = useMemo(
-    () => filterAndLimit(graphics.texts, filterTexts),
-    [graphics.texts, filterTexts, objectLimit],
+  const preLimitTexts = useMemo(
+    () => filterObjects(graphics.texts, filterTexts),
+    [graphics.texts, filterTexts],
   )
-  const filteredArrows = useMemo(
-    () => filterAndLimit(graphics.arrows, filterArrows),
-    [graphics.arrows, filterArrows, objectLimit],
+  const preLimitArrows = useMemo(
+    () => filterObjects(graphics.arrows, filterArrows),
+    [graphics.arrows, filterArrows],
+  )
+
+  const limitedObjects = useMemo(
+    () =>
+      applyObjectLimit(
+        {
+          arrows: preLimitArrows,
+          infiniteLines: preLimitInfiniteLines,
+          lines: preLimitLines,
+          rects: preLimitRects,
+          polygons: preLimitPolygons,
+          circles: preLimitCircles,
+          texts: preLimitTexts,
+          points: preLimitPoints,
+        },
+        objectLimit,
+      ),
+    [
+      preLimitArrows,
+      preLimitInfiniteLines,
+      preLimitLines,
+      preLimitRects,
+      preLimitPolygons,
+      preLimitCircles,
+      preLimitTexts,
+      preLimitPoints,
+      objectLimit,
+    ],
   )
 
   const totalFilteredObjects =
-    filteredInfiniteLines.length +
-    filteredLines.length +
-    filteredRects.length +
-    filteredPolygons.length +
-    filteredPoints.length +
-    filteredCircles.length +
-    filteredTexts.length +
-    filteredArrows.length
-  const isLimitReached = objectLimit && totalFilteredObjects > objectLimit
+    preLimitInfiniteLines.length +
+    preLimitLines.length +
+    preLimitRects.length +
+    preLimitPolygons.length +
+    preLimitPoints.length +
+    preLimitCircles.length +
+    preLimitTexts.length +
+    preLimitArrows.length
+  const isLimitReached =
+    objectLimit !== undefined && totalFilteredObjects > objectLimit
+
+  const {
+    arrows: filteredArrows,
+    infiniteLines: filteredInfiniteLines,
+    lines: filteredLines,
+    rects: filteredRects,
+    polygons: filteredPolygons,
+    circles: filteredCircles,
+    texts: filteredTexts,
+    points: filteredPoints,
+  } = limitedObjects
 
   return (
     <div>

site/utils/applyObjectLimit.ts

@@ -0,0 +1,29 @@
+type ObjectGroups = Record<string, readonly unknown[]>
+
+export const applyObjectLimit = <TGroups extends ObjectGroups>(
+  groups: TGroups,
+  objectLimit?: number,
+): TGroups => {
+  if (objectLimit === undefined) {
+    return groups
+  }
+
+  const limit = Math.max(0, objectLimit)
+  let remaining = limit
+  const entries = Object.entries(groups) as [
+    keyof TGroups,
+    TGroups[keyof TGroups],
+  ][]
+  const limitedGroups = {} as TGroups
+
+  for (let index = entries.length - 1; index >= 0; index--) {
+    const [key, objects] = entries[index]
+    const keepCount = Math.min(objects.length, remaining)
+    limitedGroups[key] = objects.slice(
+      objects.length - keepCount,
+    ) as unknown as TGroups[typeof key]
+    remaining -= keepCount
+  }
+
+  return limitedGroups
+}

tests/apply-object-limit.test.ts

@@ -0,0 +1,94 @@
+import { describe, expect, test } from "bun:test"
+import { applyObjectLimit } from "site/utils/applyObjectLimit"
+
+describe("applyObjectLimit", () => {
+  test("applies one shared limit across object groups", () => {
+    const limited = applyObjectLimit(
+      {
+        lines: ["line-1", "line-2"],
+        rects: ["rect-1", "rect-2"],
+        points: ["point-1", "point-2"],
+      },
+      3,
+    )
+
+    expect(limited).toEqual({
+      lines: [],
+      rects: ["rect-2"],
+      points: ["point-1", "point-2"],
+    })
+  })
+
+  test("returns filtered groups unchanged when no limit is set", () => {
+    const groups = {
+      lines: ["line-1"],
+      points: ["point-1", "point-2"],
+    }
+
+    expect(applyObjectLimit(groups)).toBe(groups)
+  })
+
+  test("supports an explicit zero-object limit", () => {
+    expect(
+      applyObjectLimit(
+        {
+          lines: ["line-1"],
+          points: ["point-1"],
+        },
+        0,
+      ),
+    ).toEqual({
+      lines: [],
+      points: [],
+    })
+  })
+
+  test("carries unused budget to earlier groups", () => {
+    const limited = applyObjectLimit(
+      {
+        lines: ["line-1", "line-2"],
+        rects: ["rect-1"],
+        points: [],
+      },
+      2,
+    )
+
+    expect(limited).toEqual({
+      lines: ["line-2"],
+      rects: ["rect-1"],
+      points: [],
+    })
+  })
+
+  test("preserves every group key after the budget is consumed", () => {
+    const limited = applyObjectLimit(
+      {
+        lines: ["line-1"],
+        rects: ["rect-1"],
+        points: ["point-1"],
+      },
+      1,
+    )
+
+    expect(limited).toEqual({
+      lines: [],
+      rects: [],
+      points: ["point-1"],
+    })
+  })
+
+  test("treats negative limits as zero", () => {
+    expect(
+      applyObjectLimit(
+        {
+          lines: ["line-1"],
+          points: ["point-1"],
+        },
+        -1,
+      ),
+    ).toEqual({
+      lines: [],
+      points: [],
+    })
+  })
+})