Granular rect memory

Author: cmdcolin

packages/core/pluggableElementTypes/renderers/BoxRendererType.ts

@@ -67,6 +67,10 @@ export default class BoxRendererType extends FeatureRendererType {
     const key = getLayoutId(props)
     if (!this.layoutSessions[key]) {
       this.layoutSessions[key] = this.createLayoutSession(props)
+      // console.log(
+      //   `[BoxRendererType.getWorkerSession] created new session: ${key}, ` +
+      //     `total sessions: ${Object.keys(this.layoutSessions).length}`,
+      // )
     }
     return this.layoutSessions[key].update(props)
   }
@@ -84,8 +88,17 @@ export default class BoxRendererType extends FeatureRendererType {
     const session = this.layoutSessions[key]
     if (session) {
       const region = args.regions[0]!
+      // console.log(
+      //   `[BoxRendererType.freeResources] key: ${key}, ` +
+      //     `region: ${region.refName}:${region.start}-${region.end}`,
+      // )
       session.layout.discardRange(region.refName, region.start, region.end)
     }
+    // else {
+    //   console.log(
+    //     `[BoxRendererType.freeResources] no session found for key: ${key}`,
+    //   )
+    // }
   }
 
   async freeResourcesInClient(rpcManager: RpcManager, args: RenderArgs) {

packages/core/util/layouts/GranularRectLayout.test.ts

@@ -96,6 +96,51 @@ test('discards regions', () => {
   expect(l.bitmap[0].intervals.length).toBe(0)
 })
 
+test('discardRange removes rectangles from the Map to prevent memory leaks', () => {
+  const l = new Layout({ pitchX: 10, pitchY: 4 })
+
+  // Add features in the range 0-100000
+  for (let i = 0; i < 10; i++) {
+    l.addRect(`feature-${i}`, i * 10000, i * 10000 + 5000, 1)
+  }
+
+  // @ts-expect-error accessing private property for testing
+  expect(l.rectangles.size).toBe(10)
+
+  // Discard the entire range - all rectangles should be removed
+  l.discardRange(0, 100000)
+
+  // @ts-expect-error accessing private property for testing
+  expect(l.rectangles.size).toBe(0)
+})
+
+test('discardRange only removes rectangles fully within range', () => {
+  const l = new Layout({ pitchX: 10, pitchY: 4 })
+
+  // Add features at different positions
+  l.addRect('inside', 5000, 6000, 1) // fully inside discard range
+  l.addRect('outside-left', 0, 1000, 1) // fully outside (left)
+  l.addRect('outside-right', 9000, 10000, 1) // fully outside (right)
+  l.addRect('spanning', 2000, 8000, 1) // spans the discard range
+
+  // @ts-expect-error accessing private property for testing
+  expect(l.rectangles.size).toBe(4)
+
+  // Discard range 3000-7000
+  l.discardRange(3000, 7000)
+
+  // @ts-expect-error accessing private property for testing
+  expect(l.rectangles.size).toBe(3)
+  // @ts-expect-error accessing private property for testing
+  expect(l.rectangles.has('inside')).toBe(false)
+  // @ts-expect-error accessing private property for testing
+  expect(l.rectangles.has('outside-left')).toBe(true)
+  // @ts-expect-error accessing private property for testing
+  expect(l.rectangles.has('outside-right')).toBe(true)
+  // @ts-expect-error accessing private property for testing
+  expect(l.rectangles.has('spanning')).toBe(true)
+})
+
 // see issue #486
 test('tests that adding +/- pitchX fixes resolution causing errors', () => {
   const l = new Layout({ pitchX: 91.21851599727707, pitchY: 3 })

packages/core/util/layouts/GranularRectLayout.ts

@@ -372,6 +372,23 @@ export default class GranularRectLayout<T> implements BaseLayout<T> {
     this.addRectToBitmap(rectangle)
     this.rectangles.set(id, rectangle)
     this.pTotalHeight = Math.max(this.pTotalHeight || 0, top + pHeight)
+
+    // // Log every 1000 rectangles to track memory growth
+    // if (this.rectangles.size % 1000 === 0) {
+    //   const memoryMB =
+    //     typeof performance !== 'undefined' &&
+    //     // @ts-expect-error
+    //     performance.memory !== undefined
+    //       ? // @ts-expect-error
+    //         (performance.memory.usedJSHeapSize / 1024 / 1024).toFixed(2)
+    //       : 'N/A'
+    //   console.log(
+    //     `[GranularRectLayout.addRect] rectangles: ${this.rectangles.size}, ` +
+    //       `bitmap rows: ${this.bitmap.filter(Boolean).length}, ` +
+    //       `heap: ${memoryMB} MB`,
+    //   )
+    // }
+
     return top * this.pitchY
   }
 
@@ -439,9 +456,38 @@ export default class GranularRectLayout<T> implements BaseLayout<T> {
     const pLeft = Math.trunc(left / this.pitchX)
     const pRight = Math.trunc(right / this.pitchX)
     const { bitmap } = this
+
+    // const rectsBefore = this.rectangles.size
+    // const bitmapRowCount = bitmap.filter(Boolean).length
+
     for (const row of bitmap) {
       row.discardRange(pLeft, pRight)
     }
+
+    // Also remove rectangles that fall completely within the discarded range
+    // let deletedCount = 0
+    for (const [id, rect] of this.rectangles) {
+      if (rect.l >= pLeft && rect.r <= pRight) {
+        this.rectangles.delete(id)
+        // deletedCount++
+      }
+    }
+
+    // const rectsAfter = this.rectangles.size
+    // const memoryMB =
+    //   typeof performance !== 'undefined' &&
+    //   // @ts-expect-error
+    //   performance.memory !== undefined
+    //     ? // @ts-expect-error
+    //       (performance.memory.usedJSHeapSize / 1024 / 1024).toFixed(2)
+    //     : 'N/A'
+
+    // console.log(
+    //   `[GranularRectLayout.discardRange] range: ${left}-${right}, ` +
+    //     `rectangles: ${rectsBefore} → ${rectsAfter} (deleted ${deletedCount}), ` +
+    //     `bitmap rows: ${bitmapRowCount}, ` +
+    //     `heap: ${memoryMB} MB`,
+    // )
   }
 
   hasSeen(id: string) {