Fixed reported bug about console errors

change/@ni-nimble-components-3292690c-d3e6-464f-922a-6782f658542e.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fixed hover die template error where width and height were NaN",
+  "packageName": "@ni/nimble-components",
+  "email": "33986780+munteannatan@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/nimble-components/src/wafer-map/modules/computations.ts

@@ -127,9 +127,11 @@ export class Computations {
             gridDimensions,
             containerDiameter
         );
+        const dieWidth = this.horizontalScale.bandwidth();
+        const dieHeight = this.verticalScale.bandwidth();
         this._dieDimensions = {
-            width: this.horizontalScale.bandwidth(),
-            height: this.verticalScale.bandwidth()
+            width: isNaN(dieWidth) ? 0 : dieWidth,
+            height: isNaN(dieHeight) ? 0 : dieHeight
         };
     }
 

packages/nimble-components/src/wafer-map/modules/experimental/worker-renderer.ts

@@ -85,6 +85,12 @@ export class WorkerRenderer {
     }
 
     public renderHover(): void {
+        if (
+            this.wafermap.experimentalDataManager.dieDimensions === undefined
+            || this.wafermap.transform === undefined
+        ) {
+            return;
+        }
         this.wafermap.hoverWidth = this.wafermap.experimentalDataManager.dieDimensions.width
             * this.wafermap.transform.k;
         this.wafermap.hoverHeight = this.wafermap.experimentalDataManager.dieDimensions.height

packages/nimble-components/src/wafer-map/modules/rendering.ts

@@ -35,6 +35,12 @@ export class RenderingModule {
     }
 
     public renderHover(): void {
+        if (
+            this.wafermap.dataManager.dieDimensions === undefined
+            || this.wafermap.transform === undefined
+        ) {
+            return;
+        }
         this.wafermap.hoverWidth = this.wafermap.dataManager.dieDimensions.width
             * this.wafermap.transform.k;
         this.wafermap.hoverHeight = this.wafermap.dataManager.dieDimensions.height

packages/nimble-components/src/wafer-map/tests/wafer-map.spec.ts

@@ -35,7 +35,7 @@ describe('WaferMap', () => {
         );
     });
 
-    describe('update flow', () => {
+    describe('update action', () => {
         let spy: jasmine.Spy;
         beforeEach(() => {
             spy = spyOn(element, 'update');
@@ -116,7 +116,7 @@ describe('WaferMap', () => {
         });
     });
 
-    describe('worker renderer draw flow', () => {
+    describe('worker renderer draw action', () => {
         let setupWaferSpy: jasmine.Spy;
         let drawWaferSpy: jasmine.Spy;
         beforeEach(() => {
@@ -151,7 +151,7 @@ describe('WaferMap', () => {
         });
     });
 
-    describe('worker renderer flow', () => {
+    describe('worker renderer action', () => {
         let renderHoverSpy: jasmine.Spy;
         let experimentalUpdateSpy: jasmine.Spy;
 
@@ -194,7 +194,7 @@ describe('WaferMap', () => {
         });
     });
 
-    describe('zoom flow', () => {
+    describe('zoom action', () => {
         let initialValue: string | undefined;
 
         beforeEach(() => {
@@ -268,7 +268,7 @@ describe('WaferMap', () => {
         return element.transform.toString();
     }
 
-    describe('hover flow', () => {
+    describe('hover action', () => {
         beforeEach(async () => {
             element.canvasWidth = 500;
             element.canvasHeight = 500;
@@ -321,4 +321,17 @@ describe('WaferMap', () => {
             expect(element.hoverTransform).not.toEqual(initialTransform);
         });
     });
+
+    describe('hover action with no canvas dimensions', () => {
+        beforeEach(async () => {
+            element.dies = [{ x: 1, y: 1, value: '1' }];
+            element.colorScale = { colors: ['red', 'red'], values: ['1', '1'] };
+            await waitForUpdatesAsync();
+        });
+
+        it('will have hover rectangle with no dimensions', () => {
+            expect(element.hoverHeight).toEqual(0);
+            expect(element.hoverWidth).toEqual(0);
+        });
+    });
 });