Fix global objectLimit rendering cap

site/components/InteractiveGraphics/InteractiveGraphics.tsx

@@ -27,6 +27,7 @@ import { Polygon } from "./Polygon"
 import { Rect } from "./Rect"
 import { Text } from "./Text"
 import { Tooltip } from "./Tooltip"
+import { applyObjectLimit } from "./applyObjectLimit"
 import {
   useDoesLineIntersectViewport,
   useFilterArrows,
@@ -421,65 +422,101 @@ export const InteractiveGraphics = ({
     filterLayerAndStep,
   })
 
-  const filterAndLimit = <T,>(
+  const filterObjectsWithOriginalIndex = <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 filteredLinesBeforeLimit = useMemo(
     () =>
-      filterAndLimit(graphics.lines, filterLines).sort(
+      filterObjectsWithOriginalIndex(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 filteredInfiniteLinesBeforeLimit = useMemo(
+    () =>
+      filterObjectsWithOriginalIndex(
+        graphics.infiniteLines,
+        filterLayerAndStep,
+      ),
+    [graphics.infiniteLines, filterLayerAndStep],
   )
-  const filteredRects = useMemo(
-    () => sortRectsByArea(filterAndLimit(graphics.rects, filterRects)),
-    [graphics.rects, filterRects, objectLimit],
+  const filteredRectsBeforeLimit = useMemo(
+    () =>
+      sortRectsByArea(
+        filterObjectsWithOriginalIndex(graphics.rects, filterRects),
+      ),
+    [graphics.rects, filterRects],
   )
-  const filteredPolygons = useMemo(
-    () => filterAndLimit(graphics.polygons, filterPolygons),
-    [graphics.polygons, filterPolygons, objectLimit],
+  const filteredPolygonsBeforeLimit = useMemo(
+    () => filterObjectsWithOriginalIndex(graphics.polygons, filterPolygons),
+    [graphics.polygons, filterPolygons],
   )
-  const filteredPoints = useMemo(
-    () => filterAndLimit(graphics.points, filterPoints),
-    [graphics.points, filterPoints, objectLimit],
+  const filteredPointsBeforeLimit = useMemo(
+    () => filterObjectsWithOriginalIndex(graphics.points, filterPoints),
+    [graphics.points, filterPoints],
   )
-  const filteredCircles = useMemo(
-    () => filterAndLimit(graphics.circles, filterCircles),
-    [graphics.circles, filterCircles, objectLimit],
+  const filteredCirclesBeforeLimit = useMemo(
+    () => filterObjectsWithOriginalIndex(graphics.circles, filterCircles),
+    [graphics.circles, filterCircles],
   )
-  const filteredTexts = useMemo(
-    () => filterAndLimit(graphics.texts, filterTexts),
-    [graphics.texts, filterTexts, objectLimit],
+  const filteredTextsBeforeLimit = useMemo(
+    () => filterObjectsWithOriginalIndex(graphics.texts, filterTexts),
+    [graphics.texts, filterTexts],
   )
-  const filteredArrows = useMemo(
-    () => filterAndLimit(graphics.arrows, filterArrows),
-    [graphics.arrows, filterArrows, objectLimit],
+  const filteredArrowsBeforeLimit = useMemo(
+    () => filterObjectsWithOriginalIndex(graphics.arrows, filterArrows),
+    [graphics.arrows, filterArrows],
   )
 
-  const totalFilteredObjects =
-    filteredInfiniteLines.length +
-    filteredLines.length +
-    filteredRects.length +
-    filteredPolygons.length +
-    filteredPoints.length +
-    filteredCircles.length +
-    filteredTexts.length +
-    filteredArrows.length
-  const isLimitReached = objectLimit && totalFilteredObjects > objectLimit
+  const {
+    groups: [
+      filteredArrows,
+      filteredInfiniteLines,
+      filteredLines,
+      filteredRects,
+      filteredPolygons,
+      filteredCircles,
+      filteredTexts,
+      filteredPoints,
+    ],
+    totalObjectCount: totalFilteredObjects,
+    isLimitReached,
+  } = useMemo(
+    () =>
+      applyObjectLimit(
+        [
+          filteredArrowsBeforeLimit,
+          filteredInfiniteLinesBeforeLimit,
+          filteredLinesBeforeLimit,
+          filteredRectsBeforeLimit,
+          filteredPolygonsBeforeLimit,
+          filteredCirclesBeforeLimit,
+          filteredTextsBeforeLimit,
+          filteredPointsBeforeLimit,
+        ] as const,
+        objectLimit,
+      ),
+    [
+      filteredArrowsBeforeLimit,
+      filteredInfiniteLinesBeforeLimit,
+      filteredLinesBeforeLimit,
+      filteredRectsBeforeLimit,
+      filteredPolygonsBeforeLimit,
+      filteredCirclesBeforeLimit,
+      filteredTextsBeforeLimit,
+      filteredPointsBeforeLimit,
+      objectLimit,
+    ],
+  )
 
   return (
     <div>

site/components/InteractiveGraphics/applyObjectLimit.ts

@@ -0,0 +1,62 @@
+type LimitedGroups<Groups extends readonly ReadonlyArray<unknown>[]> = {
+  [Index in keyof Groups]: Groups[Index] extends ReadonlyArray<infer Item>
+    ? Item[]
+    : never
+}
+
+export const applyObjectLimit = <
+  Groups extends readonly ReadonlyArray<unknown>[],
+>(
+  groups: Groups,
+  objectLimit?: number,
+): {
+  groups: LimitedGroups<Groups>
+  totalObjectCount: number
+  isLimitReached: boolean
+} => {
+  const totalObjectCount = groups.reduce(
+    (total, group) => total + group.length,
+    0,
+  )
+
+  if (objectLimit === undefined || !Number.isFinite(objectLimit)) {
+    return {
+      groups: groups.map((group) => [...group]) as LimitedGroups<Groups>,
+      totalObjectCount,
+      isLimitReached: false,
+    }
+  }
+
+  const normalizedLimit = Math.max(0, Math.floor(objectLimit))
+
+  if (totalObjectCount <= normalizedLimit) {
+    return {
+      groups: groups.map((group) => [...group]) as LimitedGroups<Groups>,
+      totalObjectCount,
+      isLimitReached: false,
+    }
+  }
+
+  const limitedGroups = groups.map(() => []) as LimitedGroups<Groups>
+  const writableGroups = limitedGroups as unknown as unknown[][]
+  let remainingObjects = normalizedLimit
+
+  for (
+    let groupIndex = groups.length - 1;
+    groupIndex >= 0 && remainingObjects > 0;
+    groupIndex--
+  ) {
+    const group = groups[groupIndex]
+    const takeCount = Math.min(group.length, remainingObjects)
+    if (takeCount === 0) continue
+
+    writableGroups[groupIndex] = group.slice(group.length - takeCount)
+    remainingObjects -= takeCount
+  }
+
+  return {
+    groups: limitedGroups,
+    totalObjectCount,
+    isLimitReached: true,
+  }
+}

tests/applyObjectLimit.test.ts

@@ -0,0 +1,42 @@
+import { describe, expect, test } from "bun:test"
+import { applyObjectLimit } from "site/components/InteractiveGraphics/applyObjectLimit"
+
+describe("applyObjectLimit", () => {
+  test("caps objects globally across groups", () => {
+    const result = applyObjectLimit(
+      [
+        [{ id: "line-1" }, { id: "line-2" }, { id: "line-3" }],
+        [{ id: "rect-1" }, { id: "rect-2" }],
+        [{ id: "point-1" }, { id: "point-2" }],
+      ] as const,
+      3,
+    )
+
+    expect(result.totalObjectCount).toBe(7)
+    expect(result.isLimitReached).toBe(true)
+    expect(result.groups).toEqual([
+      [],
+      [{ id: "rect-2" }],
+      [{ id: "point-1" }, { id: "point-2" }],
+    ])
+  })
+
+  test("keeps all objects when the filtered count is within the limit", () => {
+    const result = applyObjectLimit(
+      [[{ id: "line-1" }], [{ id: "point-1" }]] as const,
+      2,
+    )
+
+    expect(result.totalObjectCount).toBe(2)
+    expect(result.isLimitReached).toBe(false)
+    expect(result.groups).toEqual([[{ id: "line-1" }], [{ id: "point-1" }]])
+  })
+
+  test("supports a zero limit", () => {
+    const result = applyObjectLimit([[{ id: "line-1" }]] as const, 0)
+
+    expect(result.totalObjectCount).toBe(1)
+    expect(result.isLimitReached).toBe(true)
+    expect(result.groups).toEqual([[]])
+  })
+})