feat: limit zoom level for hires (#1026)

.infra/rdev/values.yaml

@@ -2,7 +2,7 @@ stack:
   services:
     explorer:
       image:
-        tag: sha-ad1cd6da
+        tag: sha-51349b9c
       replicaCount: 1
       env:
         # env vars common to all deployment stages

client/__tests__/e2e/e2e.test.ts

@@ -69,7 +69,7 @@ import {
   skipIfSidePanel,
   toggleSidePanel,
 } from "../util/helpers";
-import { SCALE_MAX } from "../../src/util/constants";
+import { SCALE_MAX_HIRES } from "../../src/util/constants";
 import { PANEL_EMBEDDING_MINIMIZE_TOGGLE_TEST_ID } from "../../src/components/PanelEmbedding/constants";
 
 const { describe, skip } = test;
@@ -759,7 +759,7 @@ for (const testDataset of testDatasets) {
               const newGraph = page.getByTestId("graph-wrapper");
               const newDistance =
                 (await newGraph.getAttribute("data-camera-distance")) ?? "-1";
-              expect(parseFloat(newDistance)).toBe(SCALE_MAX);
+              expect(parseFloat(newDistance)).toBe(SCALE_MAX_HIRES);
             },
             { page }
           );

client/src/components/graph/graph.tsx

@@ -94,7 +94,10 @@ const mapStateToProps = (state: RootState, ownProps: OwnProps): StateProps => ({
 });
 
 class Graph extends React.Component<GraphProps, GraphState> {
-  static createReglState(canvas: HTMLCanvasElement): {
+  static createReglState(
+    canvas: HTMLCanvasElement,
+    resolution: string
+  ): {
     camera: Camera;
     regl: Regl;
     drawPoints: DrawCommand;
@@ -106,7 +109,7 @@ class Graph extends React.Component<GraphProps, GraphState> {
         Must be created for each canvas
         */
     // setup canvas, webgl draw function and camera
-    const camera = _camera(canvas);
+    const camera = _camera(canvas, resolution);
     const regl = _regl(canvas);
     const drawPoints = _drawPoints(regl);
 
@@ -710,8 +713,10 @@ class Graph extends React.Component<GraphProps, GraphState> {
       return;
     }
     this.reglCanvas = canvas;
+    const { unsMetadata } = this.props;
+    const { resolution } = unsMetadata;
     this.setState({
-      ...Graph.createReglState(canvas),
+      ...Graph.createReglState(canvas, resolution),
     });
   };
 

client/src/util/camera.ts

@@ -3,7 +3,7 @@ import { MouseEvent } from "react";
 import { Point, Viewer } from "openseadragon";
 import { debounce } from "lodash";
 import clamp from "./clamp";
-import { THROTTLE_MS, SCALE_MAX } from "./constants";
+import { THROTTLE_MS, SCALE_MAX, SCALE_MAX_HIRES } from "./constants";
 import { EVENTS } from "../analytics/events";
 import { track } from "../analytics";
 
@@ -24,6 +24,8 @@ const scratch3 = new Float32Array(16);
 export class Camera {
   canvas: HTMLCanvasElement;
 
+  resolution: string;
+
   prevEvent: {
     clientX: number;
     clientY: number;
@@ -34,13 +36,14 @@ export class Camera {
 
   viewMatrixInv: mat3;
 
-  constructor(canvas: HTMLCanvasElement) {
+  constructor(canvas: HTMLCanvasElement, resolution: string) {
     this.prevEvent = {
       clientX: 0,
       clientY: 0,
       type: "",
     };
     this.canvas = canvas;
+    this.resolution = resolution;
     this.viewMatrix = mat3.create();
     this.viewMatrixInv = mat3.create();
   }
@@ -180,7 +183,12 @@ export class Camera {
     const xClamped = clamp(x, bounds);
     const yClamped = clamp(y, bounds);
 
-    const dClamped = clamp(d * m[0], [scaleMin, SCALE_MAX]) / m[0];
+    const scaleMax =
+      this.resolution === "hires" || this.resolution === ""
+        ? SCALE_MAX_HIRES
+        : SCALE_MAX;
+
+    const dClamped = clamp(d * m[0], [scaleMin, scaleMax]) / m[0];
 
     if (Math.abs(1 - dClamped) <= EPSILON) return; // noop request
 
@@ -372,8 +380,8 @@ export class Camera {
   }
 }
 
-function attachCamera(canvas: HTMLCanvasElement): Camera {
-  return new Camera(canvas);
+function attachCamera(canvas: HTMLCanvasElement, resolution: string): Camera {
+  return new Camera(canvas, resolution);
 }
 
 function openseadragonPan({

client/src/util/constants.ts

@@ -6,6 +6,8 @@ export const THROTTLE_MS = 16;
 
 export const SCALE_MAX = 80.0;
 
+export const SCALE_MAX_HIRES = 12.0;
+
 export const LAYOUT_CHOICE_TEST_ID = "layout-choice";
 
 export const GRAPH_AS_IMAGE_TEST_ID = "capture-and-display-graph";