⚡️ Speed up function getBoundUpdateRelativeRowsMethod by 17%

[codeflash-ai]

📄 17% (0.17x) speedup for getBoundUpdateRelativeRowsMethod in app/client/src/layoutSystems/common/utils/canvasDraggingUtils.ts

⏱️ Runtime : 9.86 microseconds → 8.45 microseconds (best of 10 runs)

📝 Explanation and details

This optimization achieves a 16% runtime improvement (from 9.86μs to 8.45μs) by replacing the functional .map() call with a pre-allocated array and an imperative for-loop when extracting widget IDs from drawing blocks.

Key Changes:

1. Pre-allocated Array Construction: Instead of drawingBlocks.map((a) => a.widgetId), the code now pre-allocates an array with new Array<string>(len) and fills it with a for-loop. This eliminates the iterator overhead and intermediate function calls that .map() incurs.

2. Preserved Mutation Semantics: The in-place sort on drawingBlocks is maintained (removing the intermediate sortedByTopBlocks variable), ensuring the original array mutation behavior is preserved while reducing one variable allocation.

Why This Is Faster:

In TypeScript/JavaScript, the .map() method creates an internal iterator and invokes a callback function for each element, which adds per-element function call overhead. The optimized version uses a simple indexed for-loop that:

• Avoids callback invocation overhead (no function calls per iteration)
• Reduces memory allocations by pre-sizing the target array
• Enables better V8 optimization through predictable array access patterns

The line profiler confirms the impact: the for-loop body (widgetIdsToExclude[i] = drawingBlocks[i].widgetId) takes 78.1% of the total time but is still faster overall than the .map() approach due to eliminated overhead.

Test Results Indicate:

The optimization benefits all test scenarios consistently:

• Empty arrays: ~0.4% faster (negligible, early return path)
• Single block: 23-34% faster (reduced overhead shows clearly)
• Multiple blocks: 10-39% faster (scales well with block count)
• Large scale (500 blocks): ~10% faster, demonstrating the optimization maintains its advantage even as array size increases

This optimization is particularly valuable for canvas dragging operations where the function may be called frequently during user interactions, making even microsecond improvements meaningful for UI responsiveness.

✅ Correctness verification report:

Test	Status
⚙️ Existing Unit Tests	🔘 None Found
🌀 Generated Regression Tests	✅ 7 Passed
⏪ Replay Tests	🔘 None Found
🔎 Concolic Coverage Tests	🔘 None Found
📊 Tests Coverage	81.9%

🌀 Click to see Generated Regression Tests

// @ts-nocheck
// imports & mocks
jest.mock('utils/WidgetPropsUtils', () => ({
  // We'll control this mock per test via mockImplementation/mockReturnValue
  getDropZoneOffsets: jest.fn(),
  // Not used by these tests, but provided to mirror the real module shape
  getDraggingSpacesFromBlocks: jest.fn(),
  noCollision: jest.fn(),
}));

import WidgetPropsUtils from 'utils/WidgetPropsUtils';
const { getDropZoneOffsets } = WidgetPropsUtils;

import { getBoundUpdateRelativeRowsMethod, } from '../src/layoutSystems/common/utils/canvasDraggingUtils';

// unit tests
describe('getBoundUpdateRelativeRowsMethod', () => {
  beforeEach(() => {
    // reset mock calls and implementations between tests
    getDropZoneOffsets.mockReset();
  });

  // Basic Test Cases
  describe('Basic functionality', () => {
    test('should return undefined and not call updateDropTargetRows when drawingBlocks is empty', () => {
      // Setup: empty drawing blocks, any snap spaces, and a spy for updateDropTargetRows
      const updateDropTargetRows = jest.fn();
      const snapColumnSpace = 10;
      const snapRowSpace = 10;

      const updater = getBoundUpdateRelativeRowsMethod(
        updateDropTargetRows,
        snapColumnSpace,
        snapRowSpace,
      );

      // Act: call with empty array
      const result = updater([], 100);

      // Assert: nothing should happen, return undefined and mocks not called
      expect(result).toBeUndefined();  // 2.27μs -> 2.25μs (0.443% faster)
      expect(updateDropTargetRows).not.toHaveBeenCalled();
      expect(getDropZoneOffsets).not.toHaveBeenCalled();
    });

    test('should call getDropZoneOffsets with expected coordinates and forward result from updateDropTargetRows', () => {
      // This test verifies:
      // - getDropZoneOffsets receives the bottom-most block's left and top+height
      // - updateDropTargetRows gets called with the array of widgetIds and the computed top
      // - the returned value from updateDropTargetRows is propagated

      // Arrange
      const updateDropTargetRows = jest.fn().mockReturnValue(999);
      const snapColumnSpace = 5;
      const snapRowSpace = 7;

      // Single block: left: 12, top: 20, height: 8 => y passed to getDropZoneOffsets should be 28
      const block = {
        left: 12,
        top: 20,
        height: 8,
        widgetId: 'widget-1',
      };

      // Mock getDropZoneOffsets to return a known top value (second item)
      // The real function returns [xOffset, top], this mock mirrors that shape.
      getDropZoneOffsets.mockReturnValue([0, 42]);

      const updater = getBoundUpdateRelativeRowsMethod(
        updateDropTargetRows,
        snapColumnSpace,
        snapRowSpace,
      );

      // Act
      const returned = updater([block], 42); // rows equals bottom so condition bottom > rows - offset should be true for positive offset

      // Assert getDropZoneOffsets called with the expected coordinate and offsets
      expect(getDropZoneOffsets).toHaveBeenCalledTimes(1);  // 1.48μs -> 1.10μs (33.7% faster)
      expect(getDropZoneOffsets).toHaveBeenCalledWith(
        snapColumnSpace,
        snapRowSpace,
        { x: block.left, y: block.top + block.height },
        { x: 0, y: 0 },
      );

      // Assert updateDropTargetRows forwarded widget ids and the mocked top (42)
      expect(updateDropTargetRows).toHaveBeenCalledTimes(1);
      expect(updateDropTargetRows).toHaveBeenCalledWith(['widget-1'], 42);

      // And the returned value is what's returned from updateDropTargetRows
      expect(returned).toBe(999);
    });

    test('should propagate false return value from updateDropTargetRows', () => {
      // If updateDropTargetRows returns false, the whole chain should return false
      const updateDropTargetRows = jest.fn().mockReturnValue(false);
      const snapColumnSpace = 1;
      const snapRowSpace = 1;

      const block = {
        left: 0,
        top: 0,
        height: 1,
        widgetId: 'w-false',
      };

      getDropZoneOffsets.mockReturnValue([0, 2]);

      const updater = getBoundUpdateRelativeRowsMethod(
        updateDropTargetRows,
        snapColumnSpace,
        snapRowSpace,
      );

      const result = updater([block], 2);

      expect(updateDropTargetRows).toHaveBeenCalledWith(['w-false'], 2);  // 1.30μs -> 1.05μs (23.6% faster)
      expect(result).toBe(false);
    });
  });

  // Edge Test Cases
  describe('Edge cases', () => {
    test('should not call updateDropTargetRows when updateDropTargetRows is undefined', () => {
      // If the provided updateDropTargetRows is undefined, the returned function should simply do nothing
      const updateDropTargetRows = undefined;
      const snapColumnSpace = 2;
      const snapRowSpace = 2;

      const block = {
        left: 5,
        top: 5,
        height: 5,
        widgetId: 'no-op',
      };

      // Return some top that would ordinarily trigger updateBottomRow logic
      getDropZoneOffsets.mockReturnValue([0, 20]);

      const updater = getBoundUpdateRelativeRowsMethod(
        updateDropTargetRows,
        snapColumnSpace,
        snapRowSpace,
      );

      // Use small rows to make bottom > rows - offset effectively true for any positive offset
      const result = updater([block], 20);

      // Nothing to return and nothing to call
      expect(result).toBeUndefined();  // 1.00μs -> 912ns (10.2% faster)
      // getDropZoneOffsets should still be invoked because drawingBlocks is non-empty
      expect(getDropZoneOffsets).toHaveBeenCalled();
    });

    test('should not call updateDropTargetRows when bottom is not beyond extension threshold', () => {
      // This tests the branch where updateBottomRow decides NOT to call updateDropTargetRows,
      // namely when bottom <= rows - GridDefaults.CANVAS_EXTENSION_OFFSET.
      // We don't know the exact constant, but making rows very large guarantees the condition.

      const updateDropTargetRows = jest.fn();
      const snapColumnSpace = 3;
      const snapRowSpace = 3;

      const block = {
        left: 1,
        top: 1,
        height: 1,
        widgetId: 'too-high-rows',
      };

      // Suppose the computed top would be small (e.g., 2)
      getDropZoneOffsets.mockReturnValue([0, 2]);

      const updater = getBoundUpdateRelativeRowsMethod(
        updateDropTargetRows,
        snapColumnSpace,
        snapRowSpace,
      );

      // Use a very large rows value to ensure bottom <= rows - offset
      const result = updater([block], 100000);

      // updateDropTargetRows should not be called and result should be undefined
      expect(updateDropTargetRows).not.toHaveBeenCalled();  // 1.22μs -> 1.02μs (20.1% faster)
      expect(result).toBeUndefined();
    });

    test('should correctly select bottom-most block when input is unsorted', () => {
      // Create three blocks with different top+height sums in unsorted order and ensure the bottom-most is chosen.
      const updateDropTargetRows = jest.fn().mockReturnValue(7);
      const snapColumnSpace = 4;
      const snapRowSpace = 4;

      const b1 = { left: 0, top: 0, height: 1, widgetId: 'b1' }; // sum = 1
      const b2 = { left: 0, top: 10, height: 2, widgetId: 'b2' }; // sum = 12 (bottom-most)
      const b3 = { left: 0, top: 5, height: 1, widgetId: 'b3' }; // sum = 6

      // Provide a mocked top that depends on the bottom-most block's coords.
      // We'll inspect the arguments of the getDropZoneOffsets mock to ensure the right block is passed.
      getDropZoneOffsets.mockReturnValue([0, 123]);

      const updater = getBoundUpdateRelativeRowsMethod(
        updateDropTargetRows,
        snapColumnSpace,
        snapRowSpace,
      );

      // Provide blocks in a shuffled order:
      const result = updater([b3, b1, b2], 123);

      // getDropZoneOffsets should be called with the coords of b2 (the bottom-most)
      expect(getDropZoneOffsets).toHaveBeenCalledWith(  // 1.34μs -> 969ns (38.7% faster)
        snapColumnSpace,
        snapRowSpace,
        { x: b2.left, y: b2.top + b2.height },
        { x: 0, y: 0 },
      );

      // updateDropTargetRows should be called with all widgetIds in the drawing group
      expect(updateDropTargetRows).toHaveBeenCalledWith(
        expect.arrayContaining(['b1', 'b2', 'b3']),
        123,
      );

      expect(result).toBe(7);
    });
  });

  // Large Scale Test Cases
  describe('Performance tests', () => {
    test('should handle a large number of drawing blocks and call updateDropTargetRows once with all widgetIds', () => {
      // Build a sizable collection under the given constraint (< 1000)
      const COUNT = 500;
      const blocks = [];

      // We'll set one block to be clearly the bottom-most (highest top+height)
      const bottomIndex = 312;
      for (let i = 0; i < COUNT; i++) {
        if (i === bottomIndex) {
          // bottom-most block with large top and height
          blocks.push({
            left: i,
            top: 10000,
            height: 250,
            widgetId: `w${i}`,
          });
        } else {
          blocks.push({
            left: i,
            top: i, // much smaller top
            height: 1,
            widgetId: `w${i}`,
          });
        }
      }

      // Shuffle the blocks to ensure sorting is happening inside the function
      for (let i = blocks.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [blocks[i], blocks[j]] = [blocks[j], blocks[i]];
      }

      const updateDropTargetRows = jest.fn().mockReturnValue('large-done');

      // Mock getDropZoneOffsets to return the bottom computed from the bottom-most block
      // Find that block to compute expected y
      const bottomBlock = blocks.find((b) => b.widgetId === `w${bottomIndex}`);
      const expectedBottom = bottomBlock.top + bottomBlock.height;
      getDropZoneOffsets.mockReturnValue([0, expectedBottom]);

      const snapColumnSpace = 6;
      const snapRowSpace = 6;

      const updater = getBoundUpdateRelativeRowsMethod(
        updateDropTargetRows,
        snapColumnSpace,
        snapRowSpace,
      );

      // Run the method - this is the main "large" test; we assert behavior and that it completes.
      const returned = updater(blocks, expectedBottom);

      // updateDropTargetRows should be called exactly once with all widget ids (order of ids is not asserted)
      expect(updateDropTargetRows).toHaveBeenCalledTimes(1);  // 1.25μs -> 1.14μs (9.55% faster)
      const passedWidgetIds = updateDropTargetRows.mock.calls[0][0];
      expect(Array.isArray(passedWidgetIds)).toBe(true);
      expect(passedWidgetIds).toHaveLength(COUNT);
      // spot check: ensure key widget ids are present
      expect(passedWidgetIds).toEqual(expect.arrayContaining([`w0`, `w${bottomIndex}`, `w${COUNT - 1}`]));

      // second argument should be the expected bottom value
      expect(updateDropTargetRows.mock.calls[0][1]).toBe(expectedBottom);

      // and the returned value should be the return from updateDropTargetRows
      expect(returned).toBe('large-done');
    }, 2000); // give an upper bound on test runtime (ms)
  });
});

📊 Performance Profile

View detailed line-by-line performance analysis
To edit these changes git checkout codeflash/optimize-getBoundUpdateRelativeRowsMethod-ml250yyc and push.