gosling.js 0.13.2 → 0.14.0

package/dist/gosling.js

@@ -52,7 +52,7 @@ import require$$0 from "react-dom";
 import { HiGlassComponent } from "higlass";
 import { ResizeSensor } from "css-element-queries";
 const name = "gosling.js";
-const version = "0.13.2";
+const version = "0.14.0";
 const $ref$2 = "#/definitions/GoslingSpec";
 const $schema$2 = "http://json-schema.org/draft-07/schema#";
 const definitions$2 = {
@@ -1326,6 +1326,15 @@ const definitions$2 = {
                 "default": false,
                 description: "Render visual marks with less smooth curves to increase rendering performance. Only supported for `elliptical` `linkStyle` `withinLink` currently.",
                 type: "boolean"
+              },
+              stretchGraphics: {
+                description: "Performance rendering option. By default, certain marks ('bar', 'line', 'rect', 'area') are stretched when zooming in/out to improve rendering performance. No marks will be stretched in circular layouts.\n\nWhen this option is set to true, all marks will be stretched when zooming in/out. When this option is set to false, all marks will be rerendered when zooming in/out.",
+                type: "boolean"
+              },
+              stretchGraphicsThreshold: {
+                "default": 1.5,
+                description: "Threshold for stretching graphics. If the graphics are scaled larger than the threshold, then the graphic will be rerendered. If the graphics are scaled smaller than 1/threshold (e.g., 1/2), then the graphic will be rerendered. This is to prevent the graphics from being stretched too much.",
+                type: "number"
               }
             },
             type: "object"
@@ -1478,6 +1487,15 @@ const definitions$2 = {
                           "default": false,
                           description: "Render visual marks with less smooth curves to increase rendering performance. Only supported for `elliptical` `linkStyle` `withinLink` currently.",
                           type: "boolean"
+                        },
+                        stretchGraphics: {
+                          description: "Performance rendering option. By default, certain marks ('bar', 'line', 'rect', 'area') are stretched when zooming in/out to improve rendering performance. No marks will be stretched in circular layouts.\n\nWhen this option is set to true, all marks will be stretched when zooming in/out. When this option is set to false, all marks will be rerendered when zooming in/out.",
+                          type: "boolean"
+                        },
+                        stretchGraphicsThreshold: {
+                          "default": 1.5,
+                          description: "Threshold for stretching graphics. If the graphics are scaled larger than the threshold, then the graphic will be rerendered. If the graphics are scaled smaller than 1/threshold (e.g., 1/2), then the graphic will be rerendered. This is to prevent the graphics from being stretched too much.",
+                          type: "number"
                         }
                       },
                       type: "object"
@@ -2094,6 +2112,15 @@ const definitions$2 = {
                 "default": false,
                 description: "Render visual marks with less smooth curves to increase rendering performance. Only supported for `elliptical` `linkStyle` `withinLink` currently.",
                 type: "boolean"
+              },
+              stretchGraphics: {
+                description: "Performance rendering option. By default, certain marks ('bar', 'line', 'rect', 'area') are stretched when zooming in/out to improve rendering performance. No marks will be stretched in circular layouts.\n\nWhen this option is set to true, all marks will be stretched when zooming in/out. When this option is set to false, all marks will be rerendered when zooming in/out.",
+                type: "boolean"
+              },
+              stretchGraphicsThreshold: {
+                "default": 1.5,
+                description: "Threshold for stretching graphics. If the graphics are scaled larger than the threshold, then the graphic will be rerendered. If the graphics are scaled smaller than 1/threshold (e.g., 1/2), then the graphic will be rerendered. This is to prevent the graphics from being stretched too much.",
+                type: "number"
               }
             },
             type: "object"
@@ -2246,6 +2273,15 @@ const definitions$2 = {
                           "default": false,
                           description: "Render visual marks with less smooth curves to increase rendering performance. Only supported for `elliptical` `linkStyle` `withinLink` currently.",
                           type: "boolean"
+                        },
+                        stretchGraphics: {
+                          description: "Performance rendering option. By default, certain marks ('bar', 'line', 'rect', 'area') are stretched when zooming in/out to improve rendering performance. No marks will be stretched in circular layouts.\n\nWhen this option is set to true, all marks will be stretched when zooming in/out. When this option is set to false, all marks will be rerendered when zooming in/out.",
+                          type: "boolean"
+                        },
+                        stretchGraphicsThreshold: {
+                          "default": 1.5,
+                          description: "Threshold for stretching graphics. If the graphics are scaled larger than the threshold, then the graphic will be rerendered. If the graphics are scaled smaller than 1/threshold (e.g., 1/2), then the graphic will be rerendered. This is to prevent the graphics from being stretched too much.",
+                          type: "number"
                         }
                       },
                       type: "object"
@@ -2919,6 +2955,15 @@ const definitions$2 = {
                           "default": false,
                           description: "Render visual marks with less smooth curves to increase rendering performance. Only supported for `elliptical` `linkStyle` `withinLink` currently.",
                           type: "boolean"
+                        },
+                        stretchGraphics: {
+                          description: "Performance rendering option. By default, certain marks ('bar', 'line', 'rect', 'area') are stretched when zooming in/out to improve rendering performance. No marks will be stretched in circular layouts.\n\nWhen this option is set to true, all marks will be stretched when zooming in/out. When this option is set to false, all marks will be rerendered when zooming in/out.",
+                          type: "boolean"
+                        },
+                        stretchGraphicsThreshold: {
+                          "default": 1.5,
+                          description: "Threshold for stretching graphics. If the graphics are scaled larger than the threshold, then the graphic will be rerendered. If the graphics are scaled smaller than 1/threshold (e.g., 1/2), then the graphic will be rerendered. This is to prevent the graphics from being stretched too much.",
+                          type: "number"
                         }
                       },
                       type: "object"
@@ -4160,6 +4205,15 @@ const definitions$2 = {
                   "default": false,
                   description: "Render visual marks with less smooth curves to increase rendering performance. Only supported for `elliptical` `linkStyle` `withinLink` currently.",
                   type: "boolean"
+                },
+                stretchGraphics: {
+                  description: "Performance rendering option. By default, certain marks ('bar', 'line', 'rect', 'area') are stretched when zooming in/out to improve rendering performance. No marks will be stretched in circular layouts.\n\nWhen this option is set to true, all marks will be stretched when zooming in/out. When this option is set to false, all marks will be rerendered when zooming in/out.",
+                  type: "boolean"
+                },
+                stretchGraphicsThreshold: {
+                  "default": 1.5,
+                  description: "Threshold for stretching graphics. If the graphics are scaled larger than the threshold, then the graphic will be rerendered. If the graphics are scaled smaller than 1/threshold (e.g., 1/2), then the graphic will be rerendered. This is to prevent the graphics from being stretched too much.",
+                  type: "number"
                 }
               },
               type: "object"
@@ -4478,6 +4532,15 @@ const definitions$2 = {
             "default": false,
             description: "Render visual marks with less smooth curves to increase rendering performance. Only supported for `elliptical` `linkStyle` `withinLink` currently.",
             type: "boolean"
+          },
+          stretchGraphics: {
+            description: "Performance rendering option. By default, certain marks ('bar', 'line', 'rect', 'area') are stretched when zooming in/out to improve rendering performance. No marks will be stretched in circular layouts.\n\nWhen this option is set to true, all marks will be stretched when zooming in/out. When this option is set to false, all marks will be rerendered when zooming in/out.",
+            type: "boolean"
+          },
+          stretchGraphicsThreshold: {
+            "default": 1.5,
+            description: "Threshold for stretching graphics. If the graphics are scaled larger than the threshold, then the graphic will be rerendered. If the graphics are scaled smaller than 1/threshold (e.g., 1/2), then the graphic will be rerendered. This is to prevent the graphics from being stretched too much.",
+            type: "number"
           }
         },
         type: "object"
@@ -4834,6 +4897,15 @@ const definitions$2 = {
             "default": false,
             description: "Render visual marks with less smooth curves to increase rendering performance. Only supported for `elliptical` `linkStyle` `withinLink` currently.",
             type: "boolean"
+          },
+          stretchGraphics: {
+            description: "Performance rendering option. By default, certain marks ('bar', 'line', 'rect', 'area') are stretched when zooming in/out to improve rendering performance. No marks will be stretched in circular layouts.\n\nWhen this option is set to true, all marks will be stretched when zooming in/out. When this option is set to false, all marks will be rerendered when zooming in/out.",
+            type: "boolean"
+          },
+          stretchGraphicsThreshold: {
+            "default": 1.5,
+            description: "Threshold for stretching graphics. If the graphics are scaled larger than the threshold, then the graphic will be rerendered. If the graphics are scaled smaller than 1/threshold (e.g., 1/2), then the graphic will be rerendered. This is to prevent the graphics from being stretched too much.",
+            type: "number"
           }
         },
         type: "object"
@@ -5208,6 +5280,15 @@ const definitions$2 = {
                   "default": false,
                   description: "Render visual marks with less smooth curves to increase rendering performance. Only supported for `elliptical` `linkStyle` `withinLink` currently.",
                   type: "boolean"
+                },
+                stretchGraphics: {
+                  description: "Performance rendering option. By default, certain marks ('bar', 'line', 'rect', 'area') are stretched when zooming in/out to improve rendering performance. No marks will be stretched in circular layouts.\n\nWhen this option is set to true, all marks will be stretched when zooming in/out. When this option is set to false, all marks will be rerendered when zooming in/out.",
+                  type: "boolean"
+                },
+                stretchGraphicsThreshold: {
+                  "default": 1.5,
+                  description: "Threshold for stretching graphics. If the graphics are scaled larger than the threshold, then the graphic will be rerendered. If the graphics are scaled smaller than 1/threshold (e.g., 1/2), then the graphic will be rerendered. This is to prevent the graphics from being stretched too much.",
+                  type: "number"
                 }
               },
               type: "object"
@@ -5542,6 +5623,15 @@ const definitions$2 = {
             "default": false,
             description: "Render visual marks with less smooth curves to increase rendering performance. Only supported for `elliptical` `linkStyle` `withinLink` currently.",
             type: "boolean"
+          },
+          stretchGraphics: {
+            description: "Performance rendering option. By default, certain marks ('bar', 'line', 'rect', 'area') are stretched when zooming in/out to improve rendering performance. No marks will be stretched in circular layouts.\n\nWhen this option is set to true, all marks will be stretched when zooming in/out. When this option is set to false, all marks will be rerendered when zooming in/out.",
+            type: "boolean"
+          },
+          stretchGraphicsThreshold: {
+            "default": 1.5,
+            description: "Threshold for stretching graphics. If the graphics are scaled larger than the threshold, then the graphic will be rerendered. If the graphics are scaled smaller than 1/threshold (e.g., 1/2), then the graphic will be rerendered. This is to prevent the graphics from being stretched too much.",
+            type: "number"
           }
         },
         type: "object"
@@ -6087,6 +6177,15 @@ const definitions$2 = {
             "default": false,
             description: "Render visual marks with less smooth curves to increase rendering performance. Only supported for `elliptical` `linkStyle` `withinLink` currently.",
             type: "boolean"
+          },
+          stretchGraphics: {
+            description: "Performance rendering option. By default, certain marks ('bar', 'line', 'rect', 'area') are stretched when zooming in/out to improve rendering performance. No marks will be stretched in circular layouts.\n\nWhen this option is set to true, all marks will be stretched when zooming in/out. When this option is set to false, all marks will be rerendered when zooming in/out.",
+            type: "boolean"
+          },
+          stretchGraphicsThreshold: {
+            "default": 1.5,
+            description: "Threshold for stretching graphics. If the graphics are scaled larger than the threshold, then the graphic will be rerendered. If the graphics are scaled smaller than 1/threshold (e.g., 1/2), then the graphic will be rerendered. This is to prevent the graphics from being stretched too much.",
+            type: "number"
           }
         },
         type: "object"
@@ -6446,6 +6545,15 @@ const definitions$2 = {
                 "default": false,
                 description: "Render visual marks with less smooth curves to increase rendering performance. Only supported for `elliptical` `linkStyle` `withinLink` currently.",
                 type: "boolean"
+              },
+              stretchGraphics: {
+                description: "Performance rendering option. By default, certain marks ('bar', 'line', 'rect', 'area') are stretched when zooming in/out to improve rendering performance. No marks will be stretched in circular layouts.\n\nWhen this option is set to true, all marks will be stretched when zooming in/out. When this option is set to false, all marks will be rerendered when zooming in/out.",
+                type: "boolean"
+              },
+              stretchGraphicsThreshold: {
+                "default": 1.5,
+                description: "Threshold for stretching graphics. If the graphics are scaled larger than the threshold, then the graphic will be rerendered. If the graphics are scaled smaller than 1/threshold (e.g., 1/2), then the graphic will be rerendered. This is to prevent the graphics from being stretched too much.",
+                type: "number"
               }
             },
             type: "object"
@@ -6594,6 +6702,15 @@ const definitions$2 = {
                           "default": false,
                           description: "Render visual marks with less smooth curves to increase rendering performance. Only supported for `elliptical` `linkStyle` `withinLink` currently.",
                           type: "boolean"
+                        },
+                        stretchGraphics: {
+                          description: "Performance rendering option. By default, certain marks ('bar', 'line', 'rect', 'area') are stretched when zooming in/out to improve rendering performance. No marks will be stretched in circular layouts.\n\nWhen this option is set to true, all marks will be stretched when zooming in/out. When this option is set to false, all marks will be rerendered when zooming in/out.",
+                          type: "boolean"
+                        },
+                        stretchGraphicsThreshold: {
+                          "default": 1.5,
+                          description: "Threshold for stretching graphics. If the graphics are scaled larger than the threshold, then the graphic will be rerendered. If the graphics are scaled smaller than 1/threshold (e.g., 1/2), then the graphic will be rerendered. This is to prevent the graphics from being stretched too much.",
+                          type: "number"
                         }
                       },
                       type: "object"
@@ -7207,6 +7324,15 @@ const definitions$2 = {
                 "default": false,
                 description: "Render visual marks with less smooth curves to increase rendering performance. Only supported for `elliptical` `linkStyle` `withinLink` currently.",
                 type: "boolean"
+              },
+              stretchGraphics: {
+                description: "Performance rendering option. By default, certain marks ('bar', 'line', 'rect', 'area') are stretched when zooming in/out to improve rendering performance. No marks will be stretched in circular layouts.\n\nWhen this option is set to true, all marks will be stretched when zooming in/out. When this option is set to false, all marks will be rerendered when zooming in/out.",
+                type: "boolean"
+              },
+              stretchGraphicsThreshold: {
+                "default": 1.5,
+                description: "Threshold for stretching graphics. If the graphics are scaled larger than the threshold, then the graphic will be rerendered. If the graphics are scaled smaller than 1/threshold (e.g., 1/2), then the graphic will be rerendered. This is to prevent the graphics from being stretched too much.",
+                type: "number"
               }
             },
             type: "object"
@@ -7355,6 +7481,15 @@ const definitions$2 = {
                           "default": false,
                           description: "Render visual marks with less smooth curves to increase rendering performance. Only supported for `elliptical` `linkStyle` `withinLink` currently.",
                           type: "boolean"
+                        },
+                        stretchGraphics: {
+                          description: "Performance rendering option. By default, certain marks ('bar', 'line', 'rect', 'area') are stretched when zooming in/out to improve rendering performance. No marks will be stretched in circular layouts.\n\nWhen this option is set to true, all marks will be stretched when zooming in/out. When this option is set to false, all marks will be rerendered when zooming in/out.",
+                          type: "boolean"
+                        },
+                        stretchGraphicsThreshold: {
+                          "default": 1.5,
+                          description: "Threshold for stretching graphics. If the graphics are scaled larger than the threshold, then the graphic will be rerendered. If the graphics are scaled smaller than 1/threshold (e.g., 1/2), then the graphic will be rerendered. This is to prevent the graphics from being stretched too much.",
+                          type: "number"
                         }
                       },
                       type: "object"
@@ -8021,6 +8156,15 @@ const definitions$2 = {
                           "default": false,
                           description: "Render visual marks with less smooth curves to increase rendering performance. Only supported for `elliptical` `linkStyle` `withinLink` currently.",
                           type: "boolean"
+                        },
+                        stretchGraphics: {
+                          description: "Performance rendering option. By default, certain marks ('bar', 'line', 'rect', 'area') are stretched when zooming in/out to improve rendering performance. No marks will be stretched in circular layouts.\n\nWhen this option is set to true, all marks will be stretched when zooming in/out. When this option is set to false, all marks will be rerendered when zooming in/out.",
+                          type: "boolean"
+                        },
+                        stretchGraphicsThreshold: {
+                          "default": 1.5,
+                          description: "Threshold for stretching graphics. If the graphics are scaled larger than the threshold, then the graphic will be rerendered. If the graphics are scaled smaller than 1/threshold (e.g., 1/2), then the graphic will be rerendered. This is to prevent the graphics from being stretched too much.",
+                          type: "number"
                         }
                       },
                       type: "object"
@@ -24288,7 +24432,7 @@ const config$1 = {
   }
 };
 const factory$1 = (HGC, context, options) => {
-  var _assembly2, _processedTileInfo, _mouseDownX, _mouseDownY, _isRangeBrushActivated, _gBrush, _loadingTextStyleObj, _loadingTextBg, _loadingText, _tilesToId, tilesToId_fn, _binsPerTile, binsPerTile_get, _generateTabularData, generateTabularData_fn, _onMouseDown, onMouseDown_fn, _onMouseMove, onMouseMove_fn, _onMouseUp, onMouseUp_fn, _onMouseOut, onMouseOut_fn, _getElementsWithinMouse, getElementsWithinMouse_fn, _publishTrackEvents, publishTrackEvents_fn, _onRangeBrush, onRangeBrush_fn, _highlightMarks, highlightMarks_fn, _publishOnNewTrack, publishOnNewTrack_fn;
+  var _assembly2, _processedTileInfo, _mouseDownX, _mouseDownY, _isRangeBrushActivated, _gBrush, _loadingTextStyleObj, _loadingTextBg, _loadingText, _tilesToId, tilesToId_fn, _binsPerTile, binsPerTile_get, _generateTabularData, generateTabularData_fn, _onMouseDown, onMouseDown_fn, _onMouseMove, onMouseMove_fn, _onMouseUp, onMouseUp_fn, _onMouseOut, onMouseOut_fn, _getElementsWithinMouse, getElementsWithinMouse_fn, _publishTrackEvents, publishTrackEvents_fn, _onRangeBrush, onRangeBrush_fn, _highlightMarks, highlightMarks_fn, _publishOnNewTrack, publishOnNewTrack_fn, _hasStretchableGraphics, hasStretchableGraphics_fn, _isTooStretched, isTooStretched_fn;
   const { tileProxy } = HGC.services;
   const { BarTrack } = HGC.tracks;
   const loadingTextStyle = getTextStyle({ color: "black", size: 12 });
@@ -24335,6 +24479,19 @@ const factory$1 = (HGC, context, options) => {
        * Publishes track information. Triggered when track gets created
        */
       __privateAdd(this, _publishOnNewTrack);
+      /**
+       * Used in drawTile()
+       * Checks if the track has marks which are stretchable. Stretching
+       * is not supported for circular layouts or 2D tracks
+       */
+      __privateAdd(this, _hasStretchableGraphics);
+      /**
+       * Used in drawTile()
+       * Checks if the tile Graphic is too stretched. If so, it returns true.
+       * @param stretchFactor The factor by which the tile is stretched
+       * @returns True if the tile is too stretched, false otherwise
+       */
+      __privateAdd(this, _isTooStretched);
       /* *
        *
        *  Properties
@@ -24477,11 +24634,21 @@ const factory$1 = (HGC, context, options) => {
      */
     drawTile(tile) {
       var _a, _b;
-      tile.drawnAtScale = this._xScale.copy();
       const tileInfo = __privateGet(this, _processedTileInfo)[tile.tileId];
       if (!tileInfo) {
         return;
       }
+      if (!tile.drawnAtScale) {
+        tile.drawnAtScale = this._xScale.copy();
+      }
+      const [graphicsXScale, graphicsXPos] = this.getXScaleAndOffset(tile.drawnAtScale);
+      const isFirstRender = graphicsXScale === 1;
+      if (!__privateMethod(this, _isTooStretched, isTooStretched_fn).call(this, graphicsXScale) && __privateMethod(this, _hasStretchableGraphics, hasStretchableGraphics_fn).call(this) && !isFirstRender) {
+        tile.graphics.scale.x = graphicsXScale;
+        tile.graphics.position.x = graphicsXPos;
+        return;
+      }
+      tile.drawnAtScale = this._xScale.copy();
       (_a = tile.graphics) == null ? void 0 : _a.clear();
       (_b = tile.graphics) == null ? void 0 : _b.removeChildren();
       this.pBackground.clear();
@@ -25317,6 +25484,32 @@ const factory$1 = (HGC, context, options) => {
       id: context.viewUid
     });
   };
+  _hasStretchableGraphics = new WeakSet();
+  hasStretchableGraphics_fn = function() {
+    var _a, _b;
+    const hasStretchOption = (_a = this.options.spec.experimental) == null ? void 0 : _a.stretchGraphics;
+    if (hasStretchOption === true) {
+      return true;
+    } else if (hasStretchOption === false) {
+      return false;
+    }
+    const isFirstTrack1D = !Is2DTrack(this.getResolvedTracks()[0]);
+    const isNotCircularLayout = this.options.spec.layout !== "circular";
+    const stretchableMarks = ["bar", "line", "rect", "area"];
+    const hasStretchableMark = this.getResolvedTracks().reduce(
+      (acc, spec) => acc && stretchableMarks.includes(spec.mark),
+      true
+    );
+    const noMouseInteractions = !((_b = this.options.spec.experimental) == null ? void 0 : _b.mouseEvents);
+    return isFirstTrack1D && isNotCircularLayout && hasStretchableMark && noMouseInteractions;
+  };
+  _isTooStretched = new WeakSet();
+  isTooStretched_fn = function(stretchFactor) {
+    var _a, _b;
+    const defaultThreshold = 1.5;
+    const threshold = (_b = (_a = this.options.spec.experimental) == null ? void 0 : _a.stretchGraphicsThreshold) != null ? _b : defaultThreshold;
+    return stretchFactor > threshold || stretchFactor < 1 / threshold;
+  };
   /**
    * Convert tile positions to tile IDs
    */