changed zoom altogether and updated tests

packages/nimble-components/src/wafer-map/index.ts

@@ -11,7 +11,6 @@ import { styles } from './styles';
 import { DataManager } from './modules/data-manager';
 import { RenderingModule } from './modules/rendering';
 import { EventCoordinator } from './modules/event-coordinator';
-import { EventCoordinator as ExperimentalEventCoordinator } from './modules/experimental/event-coordinator';
 import {
     HoverDie,
     HoverDieOpacity,
@@ -24,7 +23,7 @@ import {
 } from './types';
 import { WaferMapUpdateTracker } from './modules/wafer-map-update-tracker';
 import { WaferMapValidator } from './modules/wafer-map-validator';
-import { WorkerRenderer } from './modules/worker-renderer';
+import { WorkerRenderer } from './modules/experimental/worker-renderer';
 
 declare global {
     interface HTMLElementTagNameMap {
@@ -157,12 +156,7 @@ export class WaferMap extends FoundationElement {
         values: []
     };
 
-    private readonly stableEventCoordinator = new ExperimentalEventCoordinator(
-        this
-    );
-
-    private readonly experimentalEventCoordinator = new EventCoordinator(this);
-    private eventCoordinator: EventCoordinator | ExperimentalEventCoordinator = this.stableEventCoordinator;
+    private readonly eventCoordinator = new EventCoordinator(this);
 
     private readonly resizeObserver = this.createResizeObserver();
     private readonly waferMapValidator = new WaferMapValidator(this);
@@ -198,8 +192,12 @@ export class WaferMap extends FoundationElement {
         if (this.validity.invalidDiesTableSchema) {
             return;
         }
+        this.renderer = this.diesTable === undefined
+            ? this.mainRenderer
+            : this.workerRenderer;
         if (this.waferMapUpdateTracker.requiresEventsUpdate) {
             this.eventCoordinator.detachEvents();
+            this.eventCoordinator.setStrategy();
             if (this.waferMapUpdateTracker.requiresContainerDimensionsUpdate) {
                 this.dataManager.updateContainerDimensions();
                 this.renderer.updateSortedDiesAndDrawWafer();
@@ -299,25 +297,11 @@ export class WaferMap extends FoundationElement {
 
     private diesChanged(): void {
         this.waferMapUpdateTracker.track('dies');
-        this.renderer = this.diesTable === undefined
-            ? this.mainRenderer
-            : this.workerRenderer;
-        this.eventCoordinator?.detachEvents();
-        this.eventCoordinator = this.diesTable === undefined
-            ? this.stableEventCoordinator
-            : this.experimentalEventCoordinator;
         this.waferMapUpdateTracker.queueUpdate();
     }
 
     private diesTableChanged(): void {
         this.waferMapUpdateTracker.track('dies');
-        this.renderer = this.diesTable === undefined
-            ? this.mainRenderer
-            : this.workerRenderer;
-        this.eventCoordinator?.detachEvents();
-        this.eventCoordinator = this.diesTable === undefined
-            ? this.stableEventCoordinator
-            : this.experimentalEventCoordinator;
         this.waferMapUpdateTracker.queueUpdate();
     }
 

packages/nimble-components/src/wafer-map/modules/event-coordinator.ts

@@ -2,6 +2,7 @@ import type { WaferMapDie } from '../types';
 import { ZoomHandler } from './zoom-handler';
 import type { WaferMap } from '..';
 import { HoverHandler } from './hover-handler';
+import { HoverHandler as ExpHoverHandler } from './experimental/hover-handler';
 
 export interface EventCoordinatorCallbacks {
     dieSelected: (die: WaferMapDie) => void;
@@ -12,26 +13,35 @@ export interface EventCoordinatorCallbacks {
  */
 export class EventCoordinator {
     private readonly zoomHandler;
-    private readonly hoverHandler;
+    private readonly stableHoverHandler;
+    private readonly expHoverHandler;
+    private hoverHandler: HoverHandler | ExpHoverHandler;
     public constructor(private readonly wafermap: WaferMap) {
         this.zoomHandler = new ZoomHandler(wafermap);
-        this.hoverHandler = new HoverHandler(wafermap);
+        this.stableHoverHandler = new HoverHandler(wafermap);
+        this.expHoverHandler = new ExpHoverHandler(wafermap);
+        this.hoverHandler = this.stableHoverHandler;
+    }
+
+    public setStrategy(): void {
+        this.hoverHandler = this.wafermap.diesTable === undefined
+            ? this.stableHoverHandler
+            : this.expHoverHandler;
     }
 
     public attachEvents(): void {
         this.zoomHandler.createZoomBehavior();
         this.wafermap.addEventListener('mousemove', this.onMouseMove);
         this.wafermap.addEventListener('mouseout', this.onMouseOut);
-        this.wafermap.canvas.addEventListener('wheel', this.onWheelMove, {
+        this.wafermap.addEventListener('wheel', this.onWheelMove, {
             passive: false
         });
     }
 
     public detachEvents(): void {
-        this.zoomHandler.removeZoomBehavior();
         this.wafermap.removeEventListener('mousemove', this.onMouseMove);
         this.wafermap.removeEventListener('mouseout', this.onMouseOut);
-        this.wafermap.canvas.removeEventListener('wheel', this.onWheelMove);
+        this.wafermap.removeEventListener('wheel', this.onWheelMove);
     }
 
     private readonly onWheelMove = (event: Event): void => {

packages/nimble-components/src/wafer-map/modules/experimental/hover-handler.ts

@@ -1,4 +1,5 @@
 import { fromArrow } from 'arquero';
+import type ColumnTable from 'arquero/dist/types/table/column-table';
 import type { WaferMap } from '../..';
 import { PointCoordinates, WaferMapOriginLocation } from '../../types';
 
@@ -24,12 +25,17 @@ export class HoverHandler {
             x: invertedPoint[0],
             y: invertedPoint[1]
         });
-        const table = fromArrow(this.wafermap.diesTable);
+        const table = fromArrow(this.wafermap.diesTable).params({
+            dieCoordinates
+        }) as ColumnTable;
 
         const indices = table
             .filter(
-                (row: { colIndex: number, rowIndex: number }) => row.colIndex === dieCoordinates.x
-                    && row.rowIndex === dieCoordinates.y
+                (
+                    row: { colIndex: number, rowIndex: number },
+                    params: { dieCoordinates: { x: number, y: number } }
+                ) => row.colIndex === params.dieCoordinates.x
+                    && row.rowIndex === params.dieCoordinates.y
             )
             .indices();
 

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

@@ -1,5 +1,5 @@
-import type { WaferMap } from '..';
-import { HoverDieOpacity } from '../types';
+import type { WaferMap } from '../..';
+import { HoverDieOpacity } from '../../types';
 
 /**
  * Responsible for drawing the dies inside the wafer map, adding dieText and scaling the canvas

packages/nimble-components/src/wafer-map/modules/zoom-handler.ts

@@ -1,11 +1,5 @@
 import { select } from 'd3-selection';
-import {
-    zoom,
-    ZoomBehavior,
-    zoomIdentity,
-    ZoomTransform,
-    zoomTransform
-} from 'd3-zoom';
+import { zoom, ZoomTransform } from 'd3-zoom';
 import type { WaferMap } from '..';
 
 interface ZoomEvent {
@@ -16,65 +10,22 @@ interface ZoomEvent {
  * ZoomHandler deals with user interactions and events like zooming
  */
 export class ZoomHandler {
-    private zoomTransform: ZoomTransform = zoomIdentity;
-    private readonly minScale = 1.1;
-    private readonly minExtentPoint: [number, number] = [-100, -100];
-    private readonly extentPadding = 100;
-    private zoomBehavior!: ZoomBehavior<Element, unknown>;
+    private readonly scaleExtent: [number, number] = [1, 100];
+    private readonly minExtentPoint: [number, number] = [0, 0];
 
     public constructor(private readonly wafermap: WaferMap) {}
 
     public createZoomBehavior(): void {
-        this.zoomBehavior = zoom()
-            .scaleExtent([
-                1.1,
-                this.getZoomMax(
-                    this.wafermap.canvasWidth * this.wafermap.canvasHeight,
-                    this.wafermap.dataManager.containerDimensions.width
-                        * this.wafermap.dataManager.containerDimensions.height
-                )
-            ])
+        zoom()
+            .scaleExtent(this.scaleExtent)
             .translateExtent([
                 this.minExtentPoint,
-                [
-                    this.wafermap.canvasWidth + this.extentPadding,
-                    this.wafermap.canvasHeight + this.extentPadding
-                ]
+                [this.wafermap.canvasWidth, this.wafermap.canvasHeight]
             ])
-            .filter((event: Event) => {
-                const transform = zoomTransform(this.wafermap.canvas);
-                const filterEval = transform.k >= this.minScale || event.type === 'wheel';
-                return filterEval;
-            })
             .on('zoom', (event: ZoomEvent) => {
                 // D3 will automatically remove existing handlers when adding new ones
                 // See: https://github.com/d3/d3-zoom/blob/v3.0.0/README.md#zoom_on
-                this.rescale(event);
-            });
-
-        this.zoomBehavior(select(this.wafermap.canvas as Element));
-    }
-
-    public removeZoomBehavior(): void {
-        zoom().on('zoom', null)(select(this.wafermap.canvas as Element));
-    }
-
-    private rescale(event: ZoomEvent): void {
-        const transform = event.transform;
-        if (transform.k === this.minScale) {
-            this.zoomTransform = zoomIdentity;
-            this.zoomBehavior.transform(
-                select(this.wafermap.canvas as Element),
-                zoomIdentity
-            );
-        } else {
-            this.zoomTransform = transform;
-        }
-
-        this.wafermap.transform = this.zoomTransform;
-    }
-
-    private getZoomMax(canvasArea: number, dataArea: number): number {
-        return Math.ceil((dataArea / canvasArea) * 100);
+                this.wafermap.transform = event.transform;
+            })(select(this.wafermap as Element));
     }
 }