Improve the Wafer Map web worker class to support offscreen rendering

change/@ni-nimble-blazor-1cbfc49b-865a-4368-ab38-15ee937d0420.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Added an additional canvas in wafer map template caused the blazor tests to fail due to missing unique identifiers for canvases, adding different ids for the canvases and explicitly telling the tests to look for one canvas id solved the issue",
+  "packageName": "@ni/nimble-blazor",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@ni-nimble-components-f866e449-14a0-410d-be26-c5570bf1006d.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Updated wafer map web worker class to support offscreen rendering",
+  "packageName": "@ni/nimble-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/nimble-blazor/Tests/NimbleBlazor.Tests.Acceptance/Tests/WaferMapTests.cs

@@ -15,7 +15,7 @@ public async Task WaferMap_WithDiesAndColorScale_RendersColorsAsync()
     {
         await using var pageWrapper = await NewPageForRouteAsync("WaferMapRenderTest");
         var page = pageWrapper.Page;
-        var canvas = page.Locator("canvas");
+        var canvas = page.Locator("#main-wafer");
 
         await Assertions.Expect(canvas).ToBeVisibleAsync();
         await Task.Delay(RenderingTimeout);
@@ -30,7 +30,7 @@ public async Task WaferMap_WithGridDimensions_IsValidAsync()
     {
         await using var pageWrapper = await NewPageForRouteAsync("WaferMapRenderTest");
         var page = pageWrapper.Page;
-        var canvas = page.Locator("canvas");
+        var canvas = page.Locator("#main-wafer");
         var validButton = page.Locator("nimble-button");
         var textField = page.Locator("nimble-text-field");
 
@@ -46,7 +46,7 @@ public async Task WaferMap_WithHoverEvent_TriggersDieChangeEventAsync()
     {
         await using var pageWrapper = await NewPageForRouteAsync("WaferMapRenderTest");
         var page = pageWrapper.Page;
-        var canvas = page.Locator("canvas");
+        var canvas = page.Locator("#main-wafer");
         var textField = page.Locator("nimble-text-field");
 
         await Assertions.Expect(canvas).ToBeVisibleAsync();

packages/nimble-components/build/generate-workers/source/matrix-renderer.ts

@@ -1,4 +1,5 @@
 import { expose } from 'comlink';
+import type { Dimensions, Transform, WaferMapMatrix, WaferMapTypedMatrix } from './types';
 
 /**
  * MatrixRenderer class is meant to be used within a Web Worker context, 
@@ -8,16 +9,179 @@ import { expose } from 'comlink';
  * This setup is used in the wafer-map component to perform heavy computational duties
  */
 export class MatrixRenderer {
-    public dieMatrix: Uint8Array = Uint8Array.from([]);
+    public columnIndexes = Int32Array.from([]);
+    public rowIndexes = Int32Array.from([]);
+    public values = Float64Array.from([]);
+    public scaledColumnIndex = Float64Array.from([]);
+    public scaledRowIndex = Float64Array.from([]);
+    public columnIndexPositions = Int32Array.from([]);
+    public canvas!: OffscreenCanvas;
+    public context!: OffscreenCanvasRenderingContext2D;
+    private scaleX: number = 1;
+    private scaleY: number = 1;
+    private baseX: number = 1;
+    private baseY: number = 1;
+    private dieDimensions: Dimensions = { width: 1, height: 1 };
+    private transform: Transform = { k: 1, x: 0, y: 0 };
+    private topLeftCanvasCorner!: { x: number; y: number; };
+    private bottomRightCanvasCorner!: { x: number; y: number; };
+    private readonly smallestMarginPossible: number = 20;
+    private margin: { top: number; right: number; bottom: number; left: number; } = { top: this.smallestMarginPossible, right: this.smallestMarginPossible, bottom: this.smallestMarginPossible, left: this.smallestMarginPossible };
+
+    public calculateXScaledIndex(columnIndex: number): number{
+        return this.scaleX * columnIndex + this.baseX + this.margin.left;
+    }
+
+    public calculateYScaledIndex(rowIndex: number): number{
+        return this.scaleY * rowIndex + this.baseY + this.margin.top;
+    }
+
+    public setColumnIndexes(columnIndexes: Int32Array): void {
+        this.columnIndexes = columnIndexes;
+        if (columnIndexes.length === 0 || this.columnIndexes[0] === undefined) { return; }
+        const scaledColumnIndex = [this.calculateXScaledIndex(this.columnIndexes[0])];
+        const columnPositions = [0];
+        let prev = this.columnIndexes[0];
+        for (let i = 1; i < this.columnIndexes.length; i++) {
+            const xIndex = this.columnIndexes[i];
+            if (xIndex && xIndex !== prev) {
+                const scaledX = this.calculateXScaledIndex(this.columnIndexes[i]!);
+                scaledColumnIndex.push(scaledX);
+                columnPositions.push(i);
+                prev = xIndex
+            }
+        }
+        this.scaledColumnIndex = Float64Array.from(scaledColumnIndex);
+        this.columnIndexPositions = Int32Array.from(columnPositions);
+    }
+
+    public setRowIndexes(rowIndexesBuffer: Int32Array): void {
+        this.rowIndexes = rowIndexesBuffer;
+        this.scaledRowIndex = new Float64Array(this.rowIndexes.length);
+        for (let i = 0; i < this.rowIndexes.length; i++) {
+            this.scaledRowIndex[i] = this.calculateYScaledIndex(this.rowIndexes[i]!);
+        }
+    }
+
+    public setMargin(margin: { top: number, right: number, bottom: number, left: number }): void {
+        this.margin = margin;
+    }
+
+    public setCanvasCorners(topLeft: { x: number, y: number }, bottomRight: { x: number, y: number }): void {
+        this.topLeftCanvasCorner = topLeft;
+        this.bottomRightCanvasCorner = bottomRight;
+    }
+
+    public setDiesDimensions(data: Dimensions): void {
+        this.dieDimensions = { width: data.width, height: data.height };
+    }
+
+    public setScaling(scaleX: number, scaleY: number): void {
+        this.scaleX = scaleX;
+        this.scaleY = scaleY;
+    }
+
+    public setBases(baseX: number, baseY: number): void {
+        this.baseX = baseX;
+        this.baseY = baseY;
+    }
+
+    public setTransform(transform: Transform): void {
+        this.transform = transform;
+    }
+
+    public setCanvas(canvas: OffscreenCanvas): void {
+        this.canvas = canvas;
+        this.context = canvas.getContext('2d')!;
+    }
+
+    public getMatrix(): WaferMapTypedMatrix {
+        return {
+            columnIndexes: this.columnIndexes,
+            rowIndexes: this.rowIndexes,
+            values: this.values
+        };
+    }
 
     public emptyMatrix(): void {
-        this.dieMatrix = Uint8Array.from([]);;
+        this.columnIndexes = Int32Array.from([]);
+        this.rowIndexes = Int32Array.from([]);
+        this.values = Float64Array.from([]);
+    }
+
+    public scaleCanvas(): void {
+        this.context.translate(
+            this.transform.x,
+            this.transform.y
+        );
+        this.context.scale(
+            this.transform.k,
+            this.transform.k
+        );
     }
 
     public updateMatrix(
-        data: Iterable<number>
+        data: WaferMapMatrix
     ): void {
-        this.dieMatrix = Uint8Array.from(data);
+        this.columnIndexes = Int32Array.from(data.columnIndexes);
+        this.rowIndexes = Int32Array.from(data.rowIndexes);
+        this.values = Float64Array.from(data.values);
+    }
+
+    public setCanvasDimensions(data: Dimensions): void {
+        this.canvas.width = data.width;
+        this.canvas.height = data.height;
+    }
+
+    public getCanvasDimensions(): Dimensions {
+        return {
+            width: this.canvas.width,
+            height: this.canvas.height
+        };
+    }
+
+    public clearCanvas(): void {
+        this.context.clearRect(
+            0,
+            0,
+            this.canvas.width,
+            this.canvas.height
+        );
+    }
+
+    public drawWafer(): void {
+        this.context.restore();
+        this.context.save();
+        this.clearCanvas();
+        this.scaleCanvas();
+        if (this.topLeftCanvasCorner === undefined || this.bottomRightCanvasCorner === undefined) { throw new Error('Canvas corners are not set');}
+        for (let i = 0; i < this.scaledColumnIndex.length; i++) {
+            const scaledX = this.scaledColumnIndex[i]!;
+            if (
+                !(scaledX >= this.topLeftCanvasCorner.x
+                    && scaledX < this.bottomRightCanvasCorner.x)
+            ) {
+                continue;
+            }
+
+            // columnIndexPositions is used to get chunks to determine the start and end index of the column, it looks something like [0, 1, 4, 9, 12]
+            // This means that the first column has a start index of 0 and an end index of 1, the second column has a start index of 1 and an end index of 4, and so on
+            // scaledRowIndex is used when we reach the end of the columnIndexPositions, when columnIndexPositions is [0, 1, 4, 9, 12], scaledRowIndex is 13
+            const columnEndIndex = this.columnIndexPositions[i + 1] !== undefined ? this.columnIndexPositions[i + 1]! : this.scaledRowIndex.length;
+            for (let columnStartIndex = this.columnIndexPositions[i]!;
+                columnStartIndex < columnEndIndex; columnStartIndex++) {
+                const scaledY = this.scaledRowIndex[columnStartIndex]!;
+                if (
+                    !(scaledY >= this.topLeftCanvasCorner.y
+                        && scaledY < this.bottomRightCanvasCorner.y)
+                ) {
+                    continue;
+                }
+                // Fill style is temporary green for all dies, will be replaced with a color based on the value of the die in a future implementation
+                this.context.fillStyle = 'Green';
+                this.context.fillRect(scaledX, scaledY, this.dieDimensions.width, this.dieDimensions.height);
+            }
+        }
     }
 }
 expose(MatrixRenderer);

packages/nimble-components/build/generate-workers/source/tests/matrix-renderer.spec.ts

@@ -1,8 +1,9 @@
-import { Remote, expose, wrap } from 'comlink';
+import { Remote, expose, transfer, wrap } from 'comlink';
 import { MatrixRenderer } from '../matrix-renderer';
 
 describe('MatrixRenderer with MessageChannel', () => {
     let matrixRenderer: Remote<MatrixRenderer>;
+    const testData = { columnIndexes: [4, 1, 2], rowIndexes: [54, 54, 62], values: [8.12, 9.0, 0.32] };
 
     beforeEach(async () => {
         const { port1, port2 } = new MessageChannel();
@@ -12,17 +13,81 @@ describe('MatrixRenderer with MessageChannel', () => {
     });
 
     it('updateMatrix should update the dieMatrix', async () => {
-        const testData = [4, 5, 6];
         await matrixRenderer.updateMatrix(testData);
 
-        const updatedMatrix = await matrixRenderer.dieMatrix;
-        expect(updatedMatrix).toEqual(Uint8Array.from(testData));
+        const updatedMatrix = await matrixRenderer.getMatrix();
+        expect(updatedMatrix).toEqual(
+            {
+                columnIndexes: Int32Array.from(testData.columnIndexes),
+                rowIndexes: Int32Array.from(testData.rowIndexes),
+                values: Float64Array.from(testData.values)
+            }
+        );
     });
 
     it('emptyMatrix should empty the dieMatrix', async () => {
         await matrixRenderer.emptyMatrix();
 
-        const updatedMatrix = await matrixRenderer.dieMatrix;
-        expect(updatedMatrix.length).toEqual(0);
+        const updatedMatrix = await matrixRenderer.getMatrix();
+        expect(updatedMatrix.columnIndexes.length
+            + updatedMatrix.rowIndexes.length
+            + updatedMatrix.values.length).toEqual(0);
+    });
+
+    it('calculateYScaledIndex should compute the scaleY index', async () => {
+        await matrixRenderer.setBases(2, 2);
+        await matrixRenderer.setScaling(0.5, 0.5);
+        expect(await matrixRenderer.calculateYScaledIndex(100)).toEqual(72);
+    });
+
+    it('calculateXScaledIndex should compute the scaleX index', async () => {
+        await matrixRenderer.setBases(3, 3);
+        await matrixRenderer.setScaling(1, 1);
+        expect(await matrixRenderer.calculateXScaledIndex(100)).toEqual(123);
     });
 });
+
+describe('MatrixRenderer with MessageChannel needing canvas context', () => {
+    let matrixRenderer: Remote<MatrixRenderer>;
+    const testData = { columnIndexes: [4, 1, 2], rowIndexes: [54, 54, 62], values: [8.12, 9.0, 0.32] };
+
+    beforeEach(async () => {
+        const { port1, port2 } = new MessageChannel();
+        const worker = new MatrixRenderer();
+        expose(worker, port1);
+        matrixRenderer = await wrap<MatrixRenderer>(port2);
+        const offscreenCanvas = new OffscreenCanvas(300, 300);
+        matrixRenderer.setCanvas(
+            transfer(offscreenCanvas, [
+                offscreenCanvas
+            ])
+        );
+    });
+
+    it('setCanvasDimensions should set the canvas dimensions', async () => {
+        await matrixRenderer.setCanvasDimensions({ width: 500, height: 500 });
+        expect(await matrixRenderer.getCanvasDimensions()).toEqual({ width: 500, height: 500 });
+    });
+
+    it('indexes should be set', async () => {
+        const typedColumnIndexes = Int32Array.from(testData.columnIndexes);
+        const typedRowIndexes = Int32Array.from(testData.rowIndexes);
+
+        await matrixRenderer.setColumnIndexes(
+            transfer(typedColumnIndexes, [typedColumnIndexes.buffer])
+        );
+        await matrixRenderer.setRowIndexes(
+            transfer(typedRowIndexes, [typedRowIndexes.buffer])
+        );
+
+        const columnIndexes = await matrixRenderer.columnIndexes;
+        const rowIndexes = await matrixRenderer.rowIndexes;
+
+        expect(columnIndexes).toEqual(Int32Array.from([4, 1, 2]));
+        expect(rowIndexes).toEqual(Int32Array.from([54, 54, 62]));
+    });
+
+    it('should throw error calling drawWafer if canvas corners are not set', async () => {
+        await expectAsync(matrixRenderer.drawWafer()).toBeRejectedWithError('Canvas corners are not set');
+    });
+});

packages/nimble-components/build/generate-workers/source/types.ts

@@ -0,0 +1,22 @@
+export interface WaferMapTypedMatrix {
+    columnIndexes: Int32Array;
+    rowIndexes: Int32Array;
+    values: Float64Array;
+}
+
+export interface WaferMapMatrix {
+    columnIndexes: number[];
+    rowIndexes: number[];
+    values: number[];
+}
+
+export interface Transform{
+    k: number;
+    x: number;
+    y: number;
+}
+
+export interface Dimensions{
+    width: number;
+    height: number;
+}

packages/nimble-components/package.json

@@ -132,6 +132,7 @@
     "@storybook/manager-api": "^8.0.4",
     "@storybook/theming": "^8.0.4",
     "@types/jasmine": "^5.1.4",
+    "@types/offscreencanvas": "^2019.7.3",
     "@types/webpack-env": "^1.15.2",
     "babel-loader": "^9.1.2",
     "circular-dependency-plugin": "^5.2.0",