Improved Labels Rendering Logic

package.json

@@ -1,6 +1,6 @@
 {
   "name": "epiviz.gl",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "repository": "https://github.com/epiviz/epiviz.gl",
   "homepage": "https://github.com/epiviz/epiviz.gl",
   "author": {

src/epiviz.gl/mouse-reader.js

@@ -4,6 +4,7 @@ import {
   getDimAndMarginStyleForSpecification,
   cloneMouseEvent,
   getPointsBySelectMode,
+  throttleWithRAF,
   calculateZoomLevel,
 } from "./utilities";
 import SVGInteractor from "./svg-interactor";
@@ -54,6 +55,7 @@ class MouseReader {
       handler.dispatchEvent.bind(handler, "labelHovered"),
       handler.dispatchEvent.bind(handler, "labelUnhovered")
     );
+    this.throttledUpdateSVG = throttleWithRAF(this._updateSVG.bind(this));
     this.uniDirectionalSelectionEnabled = true;
   }
 
@@ -353,7 +355,7 @@ class MouseReader {
     });
 
     this.handler.sendDrawerState(this.getViewport());
-    this._updateSVG();
+    this.throttledUpdateSVG();
   }
 
   /**

src/epiviz.gl/svg-interactor.js

@@ -137,6 +137,11 @@ class SVGInteractor {
       );
     }
 
+    const svgNode = this.d3SVG.node();
+    const svgRect = svgNode.getBoundingClientRect();
+    const svgWidth = svgRect.width;
+    const svgHeight = svgRect.height;
+
     const labels = select(this._labelMarker)
       .selectAll("text")
       .data(this.specification.labels);
@@ -189,34 +194,26 @@ class SVGInteractor {
         });
       })
       .attr("x", (d, i, nodes) => {
-        const svgNode = this.d3SVG.node();
-        const rect = svgNode.getBoundingClientRect();
-        const width = rect.width;
-
         if (d.fixedX) {
           return this.initialX[i];
         }
 
         const xPos = this._calculateViewportSpotInverse(d.x, d.y)[0];
 
-        if (xPos < 0 || xPos > width) {
+        if (xPos < 0 || xPos > svgWidth) {
           select(nodes[i]).remove();
         } else {
           return xPos;
         }
       })
       .attr("y", (d, i, nodes) => {
-        const svgNode = this.d3SVG.node();
-        const rect = svgNode.getBoundingClientRect();
-        const height = rect.height;
-
         if (d.fixedY) {
           return this.initialY[i];
         }
 
         const yPos = this._calculateViewportSpotInverse(d.x, d.y)[1];
 
-        if (yPos < 0 || yPos > height) {
+        if (yPos < 0 || yPos > svgHeight) {
           select(nodes[i]).remove();
         } else {
           return yPos;

src/epiviz.gl/utilities.js

@@ -264,8 +264,15 @@ const getQuadraticBezierCurveForPoints = (P0, P1, P2) => {
   return (t) => [x(t), y(t)];
 };
 
+/**
+ * Clones the relevant properties of a MouseEvent.
+ *
+ * @param {MouseEvent} e - The original mouse event to clone.
+ * @returns {Object} - An object containing the relevant properties of the mouse event.
+ */
 const cloneMouseEvent = (e) => {
   return {
+    // Basic mouse properties
     altKey: e.altKey,
     button: e.button,
     buttons: e.buttons,
@@ -284,6 +291,8 @@ const cloneMouseEvent = (e) => {
     shiftKey: e.shiftKey,
     x: e.x,
     y: e.y,
+
+    // Other event properties
     detail: e.detail,
     bubbles: e.bubbles,
     cancelable: e.cancelable,
@@ -316,6 +325,15 @@ const calculateZoomLevel = (viewport) => {
   };
 };
 
+/**
+ * Adjusts the given points based on the selected mode.
+ *
+ * @param {string} selectMode - The mode of selection ("boxh" or "boxv").
+ * @param {Array<number>} originalPoints - The original set of points.
+ * @param {Array<number>} xRange - The range for the x-axis.
+ * @param {Array<number>} yRange - The range for the y-axis.
+ * @returns {Array<number>} - The adjusted points based on the selected mode.
+ */
 const getPointsBySelectMode = (selectMode, originalPoints, xRange, yRange) => {
   const points = [...originalPoints];
   switch (selectMode) {
@@ -331,10 +349,34 @@ const getPointsBySelectMode = (selectMode, originalPoints, xRange, yRange) => {
   return points;
 };
 
+/**
+ * Throttles a callback function using the requestAnimationFrame method.
+ *
+ * This ensures that the callback function is not called too often,
+ * and instead, is called only once per frame, providing a smoother experience.
+ *
+ * @param {Function} callback - The callback function to be throttled.
+ * @returns {Function} - A throttled version of the provided callback.
+ */
+const throttleWithRAF = (callback) => {
+  let scheduledFrame;
+
+  return function (...args) {
+    if (!scheduledFrame) {
+      scheduledFrame = true;
+
+      requestAnimationFrame(() => {
+        scheduledFrame = false;
+        callback(...args);
+      });
+    }
+  };
+};
+
 export {
   cloneMouseEvent,
-  colorSpecifierToHex,
   calculateZoomLevel,
+  colorSpecifierToHex,
   getPointsBySelectMode,
   getViewportForSpecification,
   getScaleForSpecification,
@@ -343,6 +385,7 @@ export {
   rgbToHex,
   rgbStringToHex,
   scale,
+  throttleWithRAF,
   DEFAULT_WIDTH,
   DEFAULT_HEIGHT,
 };