⚡️ Speed up function getNonDraggedWidgets by 521%

[codeflash-ai]

📄 521% (5.21x) speedup for getNonDraggedWidgets in app/client/src/layoutSystems/anvil/utils/layouts/highlights/highlightUtils.ts

⏱️ Runtime : 1.08 milliseconds → 174 microseconds (best of 250 runs)

📝 Explanation and details

The optimized code achieves a 520% speedup (1.08ms → 174μs) by replacing an O(n*m) algorithm with an O(n+m) algorithm through a single strategic data structure change.

Key Optimization

Set-based lookup instead of Array.includes()

The original code used Array.includes() inside a filter() callback, creating nested iteration:

• For each widget in layout (n items), it checked if its ID exists in draggedWidgetIds array (m items)
• This results in O(n*m) complexity with repeated linear scans

The optimized version creates a Set from dragged widget IDs upfront and uses Set.has() for lookups:

• Building the Set: O(m)
• Filtering with Set lookups: O(n) × O(1) = O(n)
• Total complexity: O(n+m)

Why This Matters

Performance scales dramatically with input size:

• Small inputs (3-4 widgets): 6-35% slower due to Set construction overhead
• Medium inputs (50+ widgets): Break-even point where Set overhead is offset
• Large inputs (300-800 widgets): 117-1295% faster, with the speedup increasing as data grows

The test results show this pattern clearly:

• Basic tests with 2-4 widgets: ~15-25% slower (Set overhead dominates)
• Performance tests with 300-800 widgets: 117-1295% faster (algorithm efficiency dominates)

Trade-offs

The optimization introduces a small fixed cost for Set construction, making it slightly slower for trivial inputs (2-4 items). However, for realistic workloads with dozens or hundreds of widgets—which is typical in a layout system's drag-and-drop operations—the algorithmic improvement delivers substantial gains.

The refactored code maintains functional style (map + filter) rather than imperative loops, keeping it readable and maintainable while preserving the core performance benefit.

✅ Correctness verification report:

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

🌀 Click to see Generated Regression Tests

// @ts-nocheck
// imports
import { getNonDraggedWidgets } from '../src/layoutSystems/anvil/utils/layouts/highlights/highlightUtils';

// unit tests
describe('getNonDraggedWidgets', () => {
    // Basic Test Cases
    describe('Basic functionality', () => {
        test('should handle normal input', () => {
            // Basic scenario: layout contains three widgets, one is being dragged.
            const layout = [
                { widgetId: 'a', meta: 1 },
                { widgetId: 'b', meta: 2 },
                { widgetId: 'c', meta: 3 },
            ];

            const draggedWidgets = [{ widgetId: 'b' }];

            const result = getNonDraggedWidgets(layout, draggedWidgets);

            // Expect the dragged widget ('b') to be removed.
            expect(result).toHaveLength(2);  // 1.43μs -> 2.18μs (34.5% slower)
            // Order should be preserved and object references should be the same for non-dragged items.
            expect(result[0]).toBe(layout[0]);
            expect(result[1]).toBe(layout[2]);
        });

        test('should return new array and not mutate original layout', () => {
            // Ensure original layout is not mutated and a new array is returned.
            const layout = [{ widgetId: 'x' }, { widgetId: 'y' }];
            const draggedWidgets = [{ widgetId: 'x' }];

            const result = getNonDraggedWidgets(layout, draggedWidgets);

            // New array instance
            expect(result).not.toBe(layout);  // 968ns -> 1.02μs (5.38% slower)
            // Only the non-dragged widget remains
            expect(result).toEqual([layout[1]]);
            // Original layout still intact
            expect(layout).toEqual([{ widgetId: 'x' }, { widgetId: 'y' }]);
        });
    });

    // Edge Test Cases
    describe('Edge cases', () => {
        test('should handle empty layout', () => {
            // Edge: no widgets in layout => should return empty array regardless of draggedWidgets
            const layout = [];
            const draggedWidgets = [{ widgetId: 'some-id' }];

            const result = getNonDraggedWidgets(layout, draggedWidgets);

            expect(Array.isArray(result)).toBe(true);  // 756ns -> 832ns (9.13% slower)
            expect(result).toHaveLength(0);
        });

        test('should handle empty draggedWidgets (no one being dragged)', () => {
            // Edge: nothing is dragged => should return all layout items (preserving references),
            // but as a new array instance.
            const layout = [{ widgetId: 'one' }, { widgetId: 'two' }];
            const draggedWidgets = [];

            const result = getNonDraggedWidgets(layout, draggedWidgets);

            expect(result).toHaveLength(2);  // 774ns -> 927ns (16.5% slower)
            expect(result).not.toBe(layout);
            expect(result[0]).toBe(layout[0]);
            expect(result[1]).toBe(layout[1]);
        });

        test('should handle dragged widget ids that are not present in layout', () => {
            // Edge: draggedWidgets contains ids not present in layout => layout unchanged
            const layout = [{ widgetId: 'alpha' }, { widgetId: 'beta' }];
            const draggedWidgets = [{ widgetId: 'gamma' }, { widgetId: 'delta' }];

            const result = getNonDraggedWidgets(layout, draggedWidgets);

            expect(result).toEqual(layout);  // 872ns -> 1.00μs (13.2% slower)
            // result should be a new array instance, not the exact same reference
            expect(result).not.toBe(layout);
        });

        test('should handle duplicate widgetIds in draggedWidgets gracefully', () => {
            // Edge: draggedWidgets contains duplicate ids; function should still remove matching layout items
            const layout = [{ widgetId: 'dup' }, { widgetId: 'keep' }];
            const draggedWidgets = [{ widgetId: 'dup' }, { widgetId: 'dup' }];

            const result = getNonDraggedWidgets(layout, draggedWidgets);

            expect(result).toEqual([layout[1]]);  // 779ns -> 994ns (21.6% slower)
        });

        test('should remove all layout entries that match a dragged widget id even when layout has duplicates', () => {
            // Edge: layout contains multiple entries with same widgetId; all should be removed if that id is dragged.
            const duplicateItem = { widgetId: 'same' };
            const layout = [duplicateItem, { widgetId: 'other' }, { widgetId: 'same' }];
            const draggedWidgets = [{ widgetId: 'same' }];

            const result = getNonDraggedWidgets(layout, draggedWidgets);

            // Both items with widgetId 'same' should be removed
            expect(result).toHaveLength(1);  // 855ns -> 910ns (6.04% slower)
            expect(result[0]).toBe(layout[1]);
        });

        test('should handle undefined widgetId values correctly', () => {
            // Edge: layout contains an item with widgetId undefined.
            // If draggedWidgets includes an entry with widgetId undefined, that item should be removed.
            const itemWithUndefined = { widgetId: undefined, meta: 'u' };
            const layout = [itemWithUndefined, { widgetId: 'present' }];
            const draggedWidgets = [{ widgetId: undefined }];

            const result = getNonDraggedWidgets(layout, draggedWidgets);

            expect(result).toEqual([layout[1]]);  // 885ns -> 1.04μs (14.8% slower)
        });

        test('should not coerce types when comparing ids (strict equality)', () => {
            // Edge: strict equality - a numeric id in layout should NOT match a string id in draggedWidgets.
            const layout = [{ widgetId: 1 }, { widgetId: 2 }, { widgetId: '1' }];
            const draggedWidgets = [{ widgetId: '1' }];

            const result = getNonDraggedWidgets(layout, draggedWidgets);

            // Only the string '1' should be removed; numeric 1 and 2 remain.
            expect(result).toHaveLength(2);  // 831ns -> 915ns (9.18% slower)
            // Ensure numeric 1 (layout[0]) remains
            expect(result).toEqual([layout[0], layout[1]]);
        });
    });

    // Large Scale Test Cases
    describe('Performance tests', () => {
        test('should handle large inputs efficiently', () => {
            // Large-scale scenario: create 800 layout items and remove every 3rd via draggedWidgets.
            const SIZE = 800; // kept under 1000 per instructions
            const layout = Array.from({ length: SIZE }, (_, i) => ({
                widgetId: `w-${i}`,
                index: i,
            }));

            // Drag every 3rd widget: indices 0,3,6,... (approx SIZE/3 items)
            const draggedWidgets = [];
            for (let i = 0; i < SIZE; i += 3) {
                draggedWidgets.push({ widgetId: `w-${i}` });
            }

            // Build expected result without calling the function under test
            const draggedSet = new Set(draggedWidgets.map((d) => d.widgetId));
            const expected = layout.filter((item) => !draggedSet.has(item.widgetId));

            const start = Date.now();
            const result = getNonDraggedWidgets(layout, draggedWidgets);
            const duration = Date.now() - start;

            // Validate correctness
            expect(result).toHaveLength(expected.length);  // 602μs -> 43.2μs (1295% faster)
            expect(result).toEqual(expected);

            // Performance expectation: should complete quickly. We allow a reasonably generous threshold.
            // This is not a strict microbenchmark; it catches pathological implementations.
            expect(duration).toBeLessThan(200); // milliseconds
        });
    });
});

// @ts-nocheck
import { getNonDraggedWidgets } from '../src/layoutSystems/anvil/utils/layouts/highlights/highlightUtils';

describe('getNonDraggedWidgets', () => {
  // Basic Test Cases
  describe('Basic functionality', () => {
    test('should return all widgets when no widgets are being dragged', () => {
      // Arrange
      const layout = [
        { widgetId: 'widget1', key: 'value1' },
        { widgetId: 'widget2', key: 'value2' },
        { widgetId: 'widget3', key: 'value3' },
      ];
      const draggedWidgets = [];

      // Act
      const result = getNonDraggedWidgets(layout, draggedWidgets);

      // Assert
      expect(result).toEqual(layout);  // 1.35μs -> 1.64μs (17.4% slower)
      expect(result).toHaveLength(3);
    });

    test('should exclude a single dragged widget from the layout', () => {
      // Arrange
      const layout = [
        { widgetId: 'widget1', key: 'value1' },
        { widgetId: 'widget2', key: 'value2' },
        { widgetId: 'widget3', key: 'value3' },
      ];
      const draggedWidgets = [{ widgetId: 'widget2' }];

      // Act
      const result = getNonDraggedWidgets(layout, draggedWidgets);

      // Assert
      expect(result).toEqual([  // 981ns -> 1.33μs (26.5% slower)
        { widgetId: 'widget1', key: 'value1' },
        { widgetId: 'widget3', key: 'value3' },
      ]);
      expect(result).toHaveLength(2);
    });

    test('should exclude multiple dragged widgets from the layout', () => {
      // Arrange
      const layout = [
        { widgetId: 'widget1', key: 'value1' },
        { widgetId: 'widget2', key: 'value2' },
        { widgetId: 'widget3', key: 'value3' },
        { widgetId: 'widget4', key: 'value4' },
      ];
      const draggedWidgets = [
        { widgetId: 'widget1' },
        { widgetId: 'widget3' },
      ];

      // Act
      const result = getNonDraggedWidgets(layout, draggedWidgets);

      // Assert
      expect(result).toEqual([  // 961ns -> 1.03μs (6.88% slower)
        { widgetId: 'widget2', key: 'value2' },
        { widgetId: 'widget4', key: 'value4' },
      ]);
      expect(result).toHaveLength(2);
    });

    test('should return an empty array when all widgets are dragged', () => {
      // Arrange
      const layout = [
        { widgetId: 'widget1', key: 'value1' },
        { widgetId: 'widget2', key: 'value2' },
      ];
      const draggedWidgets = [
        { widgetId: 'widget1' },
        { widgetId: 'widget2' },
      ];

      // Act
      const result = getNonDraggedWidgets(layout, draggedWidgets);

      // Assert
      expect(result).toEqual([]);  // 756ns -> 988ns (23.5% slower)
      expect(result).toHaveLength(0);
    });

    test('should preserve widget object structure and properties', () => {
      // Arrange
      const layout = [
        { widgetId: 'widget1', type: 'text', position: { x: 0, y: 0 } },
        { widgetId: 'widget2', type: 'button', position: { x: 10, y: 10 } },
      ];
      const draggedWidgets = [{ widgetId: 'widget1' }];

      // Act
      const result = getNonDraggedWidgets(layout, draggedWidgets);

      // Assert
      expect(result).toHaveLength(1);  // 759ns -> 893ns (15.0% slower)
      expect(result[0]).toEqual({
        widgetId: 'widget2',
        type: 'button',
        position: { x: 10, y: 10 },
      });
    });

    test('should maintain the order of non-dragged widgets', () => {
      // Arrange
      const layout = [
        { widgetId: 'a', order: 1 },
        { widgetId: 'b', order: 2 },
        { widgetId: 'c', order: 3 },
        { widgetId: 'd', order: 4 },
      ];
      const draggedWidgets = [{ widgetId: 'b' }, { widgetId: 'd' }];

      // Act
      const result = getNonDraggedWidgets(layout, draggedWidgets);

      // Assert
      expect(result).toEqual([  // 919ns -> 1.11μs (17.4% slower)
        { widgetId: 'a', order: 1 },
        { widgetId: 'c', order: 3 },
      ]);
      expect(result[0].order).toBe(1);
      expect(result[1].order).toBe(3);
    });
  });

  // Edge Test Cases
  describe('Edge cases', () => {
    test('should handle an empty layout array', () => {
      // Arrange
      const layout = [];
      const draggedWidgets = [{ widgetId: 'widget1' }];

      // Act
      const result = getNonDraggedWidgets(layout, draggedWidgets);

      // Assert
      expect(result).toEqual([]);  // 684ns -> 852ns (19.7% slower)
      expect(result).toHaveLength(0);
    });

    test('should handle dragged widgets with IDs not in the layout', () => {
      // Arrange
      const layout = [
        { widgetId: 'widget1', key: 'value1' },
        { widgetId: 'widget2', key: 'value2' },
      ];
      const draggedWidgets = [
        { widgetId: 'widget3' },
        { widgetId: 'widget4' },
      ];

      // Act
      const result = getNonDraggedWidgets(layout, draggedWidgets);

      // Assert
      expect(result).toEqual(layout);  // 785ns -> 1.00μs (21.7% slower)
      expect(result).toHaveLength(2);
    });

    test('should handle widgets with special characters in IDs', () => {
      // Arrange
      const layout = [
        { widgetId: 'widget-1-special_chars, key: 'value1' },
        { widgetId: 'widget.2.with.dots', key: 'value2' },
        { widgetId: 'widget@3#with#symbols', key: 'value3' },
      ];
      const draggedWidgets = [{ widgetId: 'widget.2.with.dots' }];

      // Act
      const result = getNonDraggedWidgets(layout, draggedWidgets);

      // Assert
      expect(result).toEqual([  // 782ns -> 935ns (16.4% slower)
        { widgetId: 'widget-1-special_chars, key: 'value1' },
        { widgetId: 'widget@3#with#symbols', key: 'value3' },
      ]);
      expect(result).toHaveLength(2);
    });

    test('should handle duplicate widget IDs in dragged widgets array', () => {
      // Arrange
      const layout = [
        { widgetId: 'widget1', key: 'value1' },
        { widgetId: 'widget2', key: 'value2' },
        { widgetId: 'widget3', key: 'value3' },
      ];
      const draggedWidgets = [
        { widgetId: 'widget1' },
        { widgetId: 'widget1' },
      ];

      // Act
      const result = getNonDraggedWidgets(layout, draggedWidgets);

      // Assert
      expect(result).toEqual([  // 854ns -> 1.02μs (16.5% slower)
        { widgetId: 'widget2', key: 'value2' },
        { widgetId: 'widget3', key: 'value3' },
      ]);
      expect(result).toHaveLength(2);
    });

    test('should handle widgets with empty widgetId string', () => {
      // Arrange
      const layout = [
        { widgetId: '', key: 'value1' },
        { widgetId: 'widget2', key: 'value2' },
      ];
      const draggedWidgets = [{ widgetId: '' }];

      // Act
      const result = getNonDraggedWidgets(layout, draggedWidgets);

      // Assert
      expect(result).toEqual([{ widgetId: 'widget2', key: 'value2' }]);  // 775ns -> 956ns (18.9% slower)
      expect(result).toHaveLength(1);
    });

    test('should handle widgets with null or undefined additional properties', () => {
      // Arrange
      const layout = [
        { widgetId: 'widget1', prop: null, other: undefined },
        { widgetId: 'widget2', prop: 'value' },
      ];
      const draggedWidgets = [{ widgetId: 'widget1' }];

      // Act
      const result = getNonDraggedWidgets(layout, draggedWidgets);

      // Assert
      expect(result).toEqual([{ widgetId: 'widget2', prop: 'value' }]);  // 740ns -> 916ns (19.2% slower)
      expect(result).toHaveLength(1);
    });

    test('should be case-sensitive when matching widget IDs', () => {
      // Arrange
      const layout = [
        { widgetId: 'Widget1', key: 'value1' },
        { widgetId: 'widget1', key: 'value2' },
        { widgetId: 'WIDGET1', key: 'value3' },
      ];
      const draggedWidgets = [{ widgetId: 'widget1' }];

      // Act
      const result = getNonDraggedWidgets(layout, draggedWidgets);

      // Assert
      expect(result).toEqual([  // 801ns -> 988ns (18.9% slower)
        { widgetId: 'Widget1', key: 'value1' },
        { widgetId: 'WIDGET1', key: 'value3' },
      ]);
      expect(result).toHaveLength(2);
    });

    test('should not mutate the original layout array', () => {
      // Arrange
      const layout = [
        { widgetId: 'widget1', key: 'value1' },
        { widgetId: 'widget2', key: 'value2' },
      ];
      const layoutCopy = JSON.parse(JSON.stringify(layout));
      const draggedWidgets = [{ widgetId: 'widget1' }];

      // Act
      getNonDraggedWidgets(layout, draggedWidgets);

      // Assert
      expect(layout).toEqual(layoutCopy);  // 809ns -> 967ns (16.3% slower)
    });

    test('should not mutate the dragged widgets array', () => {
      // Arrange
      const layout = [
        { widgetId: 'widget1', key: 'value1' },
        { widgetId: 'widget2', key: 'value2' },
      ];
      const draggedWidgets = [{ widgetId: 'widget1' }];
      const draggedWidgetsCopy = JSON.parse(JSON.stringify(draggedWidgets));

      // Act
      getNonDraggedWidgets(layout, draggedWidgets);

      // Assert
      expect(draggedWidgets).toEqual(draggedWidgetsCopy);  // 777ns -> 1.01μs (23.2% slower)
    });

    test('should return a new array instance, not the same reference', () => {
      // Arrange
      const layout = [
        { widgetId: 'widget1', key: 'value1' },
        { widgetId: 'widget2', key: 'value2' },
      ];
      const draggedWidgets = [];

      // Act
      const result = getNonDraggedWidgets(layout, draggedWidgets);

      // Assert
      expect(result).not.toBe(layout);  // 1.60μs -> 1.82μs (12.0% slower)
      expect(Array.isArray(result)).toBe(true);
    });
  });

  // Large Scale Test Cases
  describe('Performance tests', () => {
    test('should efficiently handle a moderately large layout with no dragged widgets', () => {
      // Arrange: Create 500 widgets
      const layout = Array.from({ length: 500 }, (_, i) => ({
        widgetId: `widget_${i}`,
        data: `data_${i}`,
      }));
      const draggedWidgets = [];

      // Act
      const result = getNonDraggedWidgets(layout, draggedWidgets);

      // Assert
      expect(result).toHaveLength(500);  // 16.7μs -> 15.0μs (12.0% faster)
      expect(result).toEqual(layout);
    });

    test('should efficiently handle a large layout with multiple dragged widgets', () => {
      // Arrange: Create 500 widgets and drag 50 of them
      const layout = Array.from({ length: 500 }, (_, i) => ({
        widgetId: `widget_${i}`,
        data: `data_${i}`,
      }));
      const draggedWidgets = Array.from({ length: 50 }, (_, i) => ({
        widgetId: `widget_${i * 10}`,
      }));

      // Act
      const result = getNonDraggedWidgets(layout, draggedWidgets);

      // Assert
      expect(result).toHaveLength(450);  // 141μs -> 26.7μs (428% faster)
      expect(result.every((w) => !draggedWidgets.some((d) => d.widgetId === w.widgetId))).toBe(true);
    });

    test('should efficiently handle a layout where most widgets are dragged', () => {
      // Arrange: Create 300 widgets and drag 290 of them
      const layout = Array.from({ length: 300 }, (_, i) => ({
        widgetId: `widget_${i}`,
        data: `data_${i}`,
      }));
      const draggedWidgets = Array.from({ length: 290 }, (_, i) => ({
        widgetId: `widget_${i}`,
      }));

      // Act
      const result = getNonDraggedWidgets(layout, draggedWidgets);

      // Assert
      expect(result).toHaveLength(10);  // 206μs -> 26.4μs (682% faster)
      expect(result.every((w) => w.widgetId.startsWith('widget_29'))).toBe(true);
    });

    test('should handle layout with complex widget objects efficiently', () => {
      // Arrange: Create 300 widgets with complex nested structures
      const layout = Array.from({ length: 300 }, (_, i) => ({
        widgetId: `widget_${i}`,
        type: 'component',
        position: { x: i * 10, y: i * 20 },
        size: { width: 100, height: 100 },
        properties: {
          color: '#fff',
          padding: { top: 10, bottom: 10, left: 5, right: 5 },
          nested: {
            deep: {
              value: i,
            },
          },
        },
      }));
      const draggedWidgets = Array.from({ length: 30 }, (_, i) => ({
        widgetId: `widget_${i * 10}`,
      }));

      // Act
      const result = getNonDraggedWidgets(layout, draggedWidgets);

      // Assert
      expect(result).toHaveLength(270);  // 49.1μs -> 16.5μs (198% faster)
      expect(result[0]).toHaveProperty('position');
      expect(result[0]).toHaveProperty('properties.nested.deep.value');
    });

    test('should handle edge case of dragging non-existent widgets in a large layout', () => {
      // Arrange: Create 400 widgets and try to drag 100 non-existent ones
      const layout = Array.from({ length: 400 }, (_, i) => ({
        widgetId: `widget_${i}`,
        data: `data_${i}`,
      }));
      const draggedWidgets = Array.from({ length: 100 }, (_, i) => ({
        widgetId: `nonexistent_widget_${i}`,
      }));

      // Act
      const result = getNonDraggedWidgets(layout, draggedWidgets);

      // Assert
      expect(result).toHaveLength(400);  // 40.9μs -> 18.8μs (117% faster)
      expect(result).toEqual(layout);
    });
  });
});

📊 Performance Profile

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