Vertical scale and test mocks updates (#1577)

# Pull Request

## 🤨 Rationale

The HTML canvas has its origin in the [top-left
corner](https://www.w3schools.com/graphics/canvas_coordinates.asp).
When rendering the dies, we need to take this into consideration and
flip the vertical scale so that the origin location will be respected.

Another improvement is the wafer mock utilities for each module.
## 👩‍💻 Implementation

switched the ends of the scale range and updated tests.
replaced individual mocks with a utility method

## 🧪 Testing

tests are passing locally

## ✅ Checklist

<!--- Review the list and put an x in the boxes that apply or ~~strike
through~~ around items that don't (along with an explanation). -->

- [x] I have updated the project documentation to reflect my changes or
determined no changes are needed.

Author: munteannatan

change/@ni-nimble-components-76784bb9-7b29-4e10-93bd-8d2ac108e8aa.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Flipped the vertical scale and created wafer map mocks for tests",
+  "packageName": "@ni/nimble-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -249,13 +249,15 @@ export class Computations {
             .paddingOuter(0)
             .align(0)
             .round(false);
+        // html canvas has top-left origin https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes#the_grid
+        // we need to flip the vertical scale
         if (
             originLocation === WaferMapOriginLocation.bottomLeft
             || originLocation === WaferMapOriginLocation.bottomRight
         ) {
-            return scale.range([0, containerHeight]);
+            return scale.range([containerHeight, 0]);
         }
-        return scale.range([containerHeight, 0]);
+        return scale.range([0, containerHeight]);
     }
 
     private createInvertedVerticalScale(
@@ -264,15 +266,17 @@ export class Computations {
         containerHeight: number
     ): ScaleQuantile<number, number> {
         const scale = scaleQuantile().domain([0, containerHeight]);
+        // html canvas has top-left origin https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes#the_grid
+        // we need to flip the inverted vertical scale
         if (
             originLocation === WaferMapOriginLocation.bottomLeft
             || originLocation === WaferMapOriginLocation.bottomRight
         ) {
-            return scale.range(range(grid.origin.y, grid.origin.y + grid.rows));
+            return scale.range(
+                range(grid.origin.y, grid.origin.y + grid.rows).reverse()
+            );
         }
-        return scale.range(
-            range(grid.origin.y, grid.origin.y + grid.rows).reverse()
-        );
+        return scale.range(range(grid.origin.y, grid.origin.y + grid.rows));
     }
 
     private calculateMarginAddition(

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

@@ -1,7 +1,7 @@
 import type { WaferMap } from '..';
 import { Computations } from '../modules/computations';
 import { Margin, WaferMapOriginLocation } from '../types';
-import { getWaferMapDies } from './utilities';
+import { getWaferMapMockComputations, getWaferMapDies } from './utilities';
 
 describe('Wafermap Computations module', () => {
     let computationsModule: Computations;
@@ -14,20 +14,12 @@ describe('Wafermap Computations module', () => {
             left: 4
         };
         beforeEach(() => {
-            const waferMock: Pick<
-            WaferMap,
-            | 'dies'
-            | 'originLocation'
-            | 'canvasWidth'
-            | 'canvasHeight'
-            | 'validity'
-            > = {
-                dies: getWaferMapDies(),
-                originLocation: WaferMapOriginLocation.topLeft,
-                canvasWidth: 100,
-                canvasHeight: 100,
-                validity: { invalidGridDimensions: false }
-            };
+            const waferMock = getWaferMapMockComputations(
+                getWaferMapDies(),
+                WaferMapOriginLocation.topLeft,
+                100,
+                100
+            );
             computationsModule = new Computations(waferMock as WaferMap);
             computationsModule.updateContainerDimensions();
         });
@@ -72,20 +64,12 @@ describe('Wafermap Computations module', () => {
 
     describe('with rectangular canvas', () => {
         beforeEach(() => {
-            const waferMock: Pick<
-            WaferMap,
-            | 'dies'
-            | 'originLocation'
-            | 'canvasWidth'
-            | 'canvasHeight'
-            | 'validity'
-            > = {
-                dies: getWaferMapDies(),
-                originLocation: WaferMapOriginLocation.topLeft,
-                canvasWidth: 200,
-                canvasHeight: 100,
-                validity: { invalidGridDimensions: false }
-            };
+            const waferMock = getWaferMapMockComputations(
+                getWaferMapDies(),
+                WaferMapOriginLocation.topLeft,
+                200,
+                100
+            );
             computationsModule = new Computations(waferMock as WaferMap);
             computationsModule.updateContainerDimensions();
         });
@@ -124,20 +108,12 @@ describe('Wafermap Computations module', () => {
 
     describe('with top left originLocation', () => {
         beforeEach(() => {
-            const waferMock: Pick<
-            WaferMap,
-            | 'dies'
-            | 'originLocation'
-            | 'canvasWidth'
-            | 'canvasHeight'
-            | 'validity'
-            > = {
-                dies: getWaferMapDies(),
-                originLocation: WaferMapOriginLocation.topLeft,
-                canvasWidth: 100,
-                canvasHeight: 100,
-                validity: { invalidGridDimensions: false }
-            };
+            const waferMock = getWaferMapMockComputations(
+                getWaferMapDies(),
+                WaferMapOriginLocation.topLeft,
+                100,
+                100
+            );
             computationsModule = new Computations(waferMock as WaferMap);
             computationsModule.updateContainerDimensions();
         });
@@ -146,27 +122,20 @@ describe('Wafermap Computations module', () => {
             expect(computationsModule.horizontalScale.range()).toEqual([0, 92]);
         });
 
-        it('should have decreasing vertical range', () => {
-            expect(computationsModule.verticalScale.range()).toEqual([92, 0]);
+        it('should have increasing vertical range', () => {
+            // because the canvas has top-left origin location we need to flip the vertical scale
+            expect(computationsModule.verticalScale.range()).toEqual([0, 92]);
         });
     });
 
     describe('with top right originLocation', () => {
         beforeEach(() => {
-            const waferMock: Pick<
-            WaferMap,
-            | 'dies'
-            | 'originLocation'
-            | 'canvasWidth'
-            | 'canvasHeight'
-            | 'validity'
-            > = {
-                dies: getWaferMapDies(),
-                originLocation: WaferMapOriginLocation.topRight,
-                canvasWidth: 100,
-                canvasHeight: 100,
-                validity: { invalidGridDimensions: false }
-            };
+            const waferMock = getWaferMapMockComputations(
+                getWaferMapDies(),
+                WaferMapOriginLocation.topRight,
+                100,
+                100
+            );
             computationsModule = new Computations(waferMock as WaferMap);
             computationsModule.updateContainerDimensions();
         });
@@ -175,27 +144,20 @@ describe('Wafermap Computations module', () => {
             expect(computationsModule.horizontalScale.range()).toEqual([92, 0]);
         });
 
-        it('should have decreasing vertical range', () => {
-            expect(computationsModule.verticalScale.range()).toEqual([92, 0]);
+        it('should have increasing vertical range', () => {
+            // because the canvas has top-left origin location we need to flip the vertical scale
+            expect(computationsModule.verticalScale.range()).toEqual([0, 92]);
         });
     });
 
     describe('with bottom left originLocation', () => {
         beforeEach(() => {
-            const waferMock: Pick<
-            WaferMap,
-            | 'dies'
-            | 'originLocation'
-            | 'canvasWidth'
-            | 'canvasHeight'
-            | 'validity'
-            > = {
-                dies: getWaferMapDies(),
-                originLocation: WaferMapOriginLocation.bottomLeft,
-                canvasWidth: 100,
-                canvasHeight: 100,
-                validity: { invalidGridDimensions: false }
-            };
+            const waferMock = getWaferMapMockComputations(
+                getWaferMapDies(),
+                WaferMapOriginLocation.bottomLeft,
+                100,
+                100
+            );
             computationsModule = new Computations(waferMock as WaferMap);
             computationsModule.updateContainerDimensions();
         });
@@ -204,27 +166,20 @@ describe('Wafermap Computations module', () => {
             expect(computationsModule.horizontalScale.range()).toEqual([0, 92]);
         });
 
-        it('should have increasing vertical range', () => {
-            expect(computationsModule.verticalScale.range()).toEqual([0, 92]);
+        it('should have decreasing vertical range', () => {
+            // because the canvas has top-left origin location we need to flip the vertical scale
+            expect(computationsModule.verticalScale.range()).toEqual([92, 0]);
         });
     });
 
     describe('with bottom right originLocation', () => {
         beforeEach(() => {
-            const waferMock: Pick<
-            WaferMap,
-            | 'dies'
-            | 'originLocation'
-            | 'canvasWidth'
-            | 'canvasHeight'
-            | 'validity'
-            > = {
-                dies: getWaferMapDies(),
-                originLocation: WaferMapOriginLocation.bottomRight,
-                canvasWidth: 100,
-                canvasHeight: 100,
-                validity: { invalidGridDimensions: false }
-            };
+            const waferMock = getWaferMapMockComputations(
+                getWaferMapDies(),
+                WaferMapOriginLocation.bottomRight,
+                100,
+                100
+            );
             computationsModule = new Computations(waferMock as WaferMap);
             computationsModule.updateContainerDimensions();
         });
@@ -233,8 +188,9 @@ describe('Wafermap Computations module', () => {
             expect(computationsModule.horizontalScale.range()).toEqual([92, 0]);
         });
 
-        it('should have increasing vertical range', () => {
-            expect(computationsModule.verticalScale.range()).toEqual([0, 92]);
+        it('should have decreasing vertical range', () => {
+            // because the canvas has top-left origin location we need to flip the vertical scale
+            expect(computationsModule.verticalScale.range()).toEqual([92, 0]);
         });
     });
 });

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

@@ -93,8 +93,9 @@ describe('Wafermap Data Manager', () => {
         expect(dataManagerModule.horizontalScale.range()).toEqual([0, 92]);
     });
 
-    it('should have increasing vertical range', () => {
-        expect(dataManagerModule.verticalScale.range()).toEqual([0, 92]);
+    it('should have decreasing vertical range', () => {
+        // because the canvas has top-left origin location we need to flip the vertical scale
+        expect(dataManagerModule.verticalScale.range()).toEqual([92, 0]);
     });
 
     it('should not have labelsFontSize larger than the die height', () => {