Merge remote-tracking branch 'origin/main' into improved-labels-rende…

…ring-logic

README.md

@@ -81,6 +81,16 @@ plot.setViewOptions({
 
 By setting the argument to true, the unidirectional selection will be enabled. Setting it to false will disable this feature.
 
+### Graph Zoom Control
+
+The enhanced graph visualization tool now offers refined zoom controls, ensuring a precise and adaptable data representation. You can now set max zoom level allowed in the graph using the `setViewOptions` function.
+
+```javascript
+setViewOptions({
+  maxZoomLevel: 0,
+});
+```
+
 # Specifications
 
 Documentation for specifications can be found in [docs/specification_doc.md](https://github.com/epiviz/epiviz.gl/blob/main/docs/specification_doc.md). Documentation for the specifications can be generated with [json-schema-for-humans](https://pypi.org/project/json-schema-for-humans/):

src/epiviz.gl/mouse-reader.js

@@ -5,6 +5,7 @@ import {
   cloneMouseEvent,
   getPointsBySelectMode,
   throttleWithRAF,
+  calculateZoomLevel,
 } from "./utilities";
 import SVGInteractor from "./svg-interactor";
 
@@ -291,8 +292,11 @@ class MouseReader {
    */
   _onWheel(event) {
     event.preventDefault();
+
+    let previousX = null;
+    let previousY = null;
     if (!this.lockedX) {
-      const previousX = [...this.currentXRange]; // ... to avoid aliasing
+      previousX = [...this.currentXRange]; // ... to avoid aliasing
       const t = -event.wheelDelta / 1000;
       const inDataSpace = this._calculateViewportSpot(
         ...getLayerXandYFromEvent(event)
@@ -305,15 +309,10 @@ class MouseReader {
 
       this.currentXRange[0] = Math.max(this.currentXRange[0], this.minX);
       this.currentXRange[1] = Math.min(this.currentXRange[1], this.maxX);
-
-      if (!this._validateXRange()) {
-        // Zoom in limit
-        this.currentXRange = previousX;
-      }
     }
 
     if (!this.lockedY) {
-      const previousY = [...this.currentYRange];
+      previousY = [...this.currentYRange];
       const t = -event.wheelDelta / 1000;
       const inDataSpace = this._calculateViewportSpot(
         ...getLayerXandYFromEvent(event)
@@ -325,14 +324,32 @@ class MouseReader {
         t * inDataSpace[1] + (1 - t) * this.currentYRange[1];
       this.currentYRange[0] = Math.max(this.currentYRange[0], this.minY);
       this.currentYRange[1] = Math.min(this.currentYRange[1], this.maxY);
+    }
 
-      if (!this._validateYRange()) {
+    if (!this.lockedX || !this.lockedY) {
+      const { xZoomLevel, yZoomLevel } = calculateZoomLevel(this.getViewport());
+      if (
+        !this.lockedX &&
+        (!this._validateXRange() ||
+          (this.maxZoomLevel && this.maxZoomLevel < xZoomLevel))
+      ) {
+        // Zoom in limit
+        this.currentXRange = previousX;
+      }
+
+      if (
+        !this.lockedY &&
+        (!this._validateYRange() ||
+          (this.maxZoomLevel && this.maxZoomLevel < yZoomLevel))
+      ) {
         // Zoom in limit
         this.currentYRange = previousY;
       }
     }
+
     this.handler.dispatchEvent(event.wheelDelta < 0 ? "zoomIn" : "zoomOut", {
       viewport: this.getViewport(),
+      zoomLevel: calculateZoomLevel(this.getViewport()),
       type: this.tool,
       event: cloneMouseEvent(event),
     });

src/epiviz.gl/utilities.js

@@ -305,6 +305,26 @@ const cloneMouseEvent = (e) => {
   };
 };
 
+const calculateZoomLevel = (viewport) => {
+  const { minX, minY, maxX, maxY, xRange, yRange } = viewport;
+  // Calculate the full range for content
+  const fullXRange = maxX - minX;
+  const fullYRange = maxY - minY;
+
+  // Calculate the range of the visible viewport
+  const viewportWidth = xRange[1] - xRange[0];
+  const viewportHeight = yRange[1] - yRange[0];
+
+  // Determine the zoom levels for X and Y
+  const xZoomLevel = fullXRange / viewportWidth;
+  const yZoomLevel = fullYRange / viewportHeight;
+
+  return {
+    xZoomLevel,
+    yZoomLevel,
+  };
+};
+
 /**
  * Adjusts the given points based on the selected mode.
  *
@@ -355,9 +375,10 @@ const throttleWithRAF = (callback) => {
 
 export {
   cloneMouseEvent,
+  calculateZoomLevel,
+  colorSpecifierToHex,
   getPointsBySelectMode,
   getViewportForSpecification,
-  colorSpecifierToHex,
   getScaleForSpecification,
   getDimAndMarginStyleForSpecification,
   getQuadraticBezierCurveForPoints,

src/epiviz.gl/webgl-vis.js

@@ -32,6 +32,7 @@ class WebGLVis {
       "currentXRange",
       "currentYRange",
       "uniDirectionalSelectionEnabled",
+      "maxZoomLevel",
     ]);
   }
 
@@ -143,6 +144,7 @@ class WebGLVis {
    *   currentYRange: [y1, y2] (Numbers that should be within the viewport minY and maxY)
    *   uniDirectionalSelectionEnabled: boolean
    *   tool: one of ["pan", "box", "lasso"]
+   *   maxZoomLevel: Number
    *
    * @param {Object} options with keys under WebGLVis.POSSIBLE_MOUSE_READER_OPTIONS
    */