gosling.js 0.14.0 → 0.16.0

package/dist/gosling.js

@@ -34,7 +34,7 @@ import "bezier-js";
 import { scaleLinear, scaleSequential, scaleOrdinal, scaleBand } from "d3-scale";
 import { sampleSize, isEqual, uniqBy, cloneDeepWith } from "lodash-es";
 import { interpolateViridis } from "d3-scale-chromatic";
-import { A as Ajv, I as IsChannelDeep, r as resolveSuperposedTracks, t as traverseTracks, a as IsTemplateTrack, g as getTextStyle, c as computeChromSizes, b as cartesianToPolar, u as uuid, R as RADIAN_GAP, v as valueToRadian, p as pointsToDegree, d as commonjsGlobal, e as RemoteFile, f as IsOneOfFilter, h as IsRangeFilter, i as IsIncludeFilter, j as getChannelKeysByAggregateFnc, k as getChannelKeysByType, s as sanitizeChrName, l as filterUsingGenoPos, m as IsDataDeepTileset, n as IsDomainChr, o as IsDomainInterval, q as IsDomainChrInterval, S as SUPPORTED_CHANNELS, w as insertItemToArray, x as getAutoCompleteId, y as IsChannelValue, z as getValueUsingChannel, B as rectProperty, C as pointProperty, D as barProperty, E as IsStackedChannel, F as IsDomainArray, P as PREDEFINED_COLOR_STR_MAP, G as IsRangeArray, H as Is2DTrack, J as isTabularDataFetcher, K as drawPreEmbellishment, L as drawMark, M as drawPostEmbellishment, N as getRelativeGenomicPosition, O as hasDataTransform, Q as IsXAxis, T as IsMouseEventsDeep, U as colorToHex, V as flatArrayToPairArray, W as DEWFAULT_TITLE_PADDING_ON_TOP_AND_BOTTOM, X as traverseTracksAndViews, Y as traverseViewArrangements, Z as DEFAULT_VIEW_SPACING, _ as DEFAULT_INNER_RADIUS_PROP, $ as IsDummyTrack, a0 as IsOverlaidTrack, a1 as IsYAxis, a2 as DEFAULT_CIRCULAR_VIEW_PADDING, a3 as IsDataDeep, a4 as IsHiGlassMatrix, a5 as getHiGlassColorRange, a6 as DEFAULT_TEXT_STYLE, a7 as overrideDataTemplates, a8 as traverseToFixSpecDownstream, a9 as GenomicPositionHelper, aa as isObject } from "./exported-utils-d4f1abea.js";
+import { A as Ajv, I as IsChannelDeep, r as resolveSuperposedTracks, t as traverseTracks, a as IsTemplateTrack, g as getTextStyle, c as computeChromSizes, b as cartesianToPolar, u as uuid, R as RADIAN_GAP, v as valueToRadian, p as pointsToDegree, d as commonjsGlobal, e as RemoteFile, f as IsOneOfFilter, h as IsRangeFilter, i as IsIncludeFilter, j as getChannelKeysByAggregateFnc, k as getChannelKeysByType, s as sanitizeChrName, l as filterUsingGenoPos, m as IsDataDeepTileset, n as IsDomainChr, o as IsDomainInterval, q as IsDomainChrInterval, S as SUPPORTED_CHANNELS, w as insertItemToArray, x as getAutoCompleteId, y as IsChannelValue, z as getValueUsingChannel, B as rectProperty, C as pointProperty, D as barProperty, E as IsStackedChannel, F as IsDomainArray, P as PREDEFINED_COLOR_STR_MAP, G as IsRangeArray, H as Is2DTrack, J as isTabularDataFetcher, K as drawPreEmbellishment, L as drawMark, M as drawPostEmbellishment, N as getRelativeGenomicPosition, O as hasDataTransform, Q as IsXAxis, T as IsMouseEventsDeep, U as colorToHex, V as flatArrayToPairArray, W as DEWFAULT_TITLE_PADDING_ON_TOP_AND_BOTTOM, X as traverseTracksAndViews, Y as traverseViewArrangements, Z as DEFAULT_VIEW_SPACING, _ as DEFAULT_INNER_RADIUS_PROP, $ as IsDummyTrack, a0 as IsOverlaidTrack, a1 as IsYAxis, a2 as DEFAULT_CIRCULAR_VIEW_PADDING, a3 as IsDataDeep, a4 as IsHiGlassMatrix, a5 as getHiGlassColorRange, a6 as DEFAULT_TEXT_STYLE, a7 as overrideDataTemplates, a8 as traverseToFixSpecDownstream, a9 as GenomicPositionHelper, aa as isObject } from "./exported-utils-ac60e3c5.js";
 import higlassRegister from "higlass-register";
 import { TextTrack } from "higlass-text";
 import RBush from "rbush";
@@ -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.14.0";
+const version = "0.16.0";
 const $ref$2 = "#/definitions/GoslingSpec";
 const $schema$2 = "http://json-schema.org/draft-07/schema#";
 const definitions$2 = {
@@ -23764,7 +23764,7 @@ class GoslingTrackModel {
     this.theme = theme != null ? theme : getTheme();
     this.dataAggregated = data;
     this.specOriginal = spec;
-    this.specComplete = structuredClone(spec);
+    this.specComplete = JSON.parse(JSON.stringify(spec));
     this.channelScales = {};
     this.mouseEventModel = new MouseEventModel();
     const validity = this.validateSpec();
@@ -24432,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, _hasStretchableGraphics, hasStretchableGraphics_fn, _isTooStretched, isTooStretched_fn;
+  var _assembly2, _processedTileInfo, _mouseDownX, _mouseDownY, _isRangeBrushActivated, _gBrush, _loadingTextStyleObj, _loadingTextBg, _loadingText, _processedTileMap, _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 });
@@ -24523,6 +24523,8 @@ const factory$1 = (HGC, context, options) => {
       __privateAdd(this, _loadingText, new HGC.libraries.PIXI.Text("", loadingTextStyle));
       __publicField(this, "prevVisibleAndFetchedTiles");
       __publicField(this, "resolvedTracks");
+      // This is used to persist processed tile data across draw() calls.
+      __privateAdd(this, _processedTileMap, /* @__PURE__ */ new WeakMap());
       __publicField(this, "hideMousePosition");
       context.dataFetcher.track = this;
       __privateSet(this, _processedTileInfo, {});
@@ -24679,6 +24681,7 @@ const factory$1 = (HGC, context, options) => {
       this.getResolvedTracks(true);
       this.clearMouseEventData();
       this.textsBeingUsed = 0;
+      __privateSet(this, _processedTileMap, /* @__PURE__ */ new WeakMap());
       this.processAllTiles(true);
       this.draw();
       this.forceDraw();
@@ -24764,7 +24767,7 @@ const factory$1 = (HGC, context, options) => {
     setMask(position, dimensions) {
       this.pMask.clear();
       this.pMask.beginFill();
-      if (this.options.spec.layout === "circular") {
+      if (this.options.spec.layout === "circular" && this.options.spec.overlayOnPreviousTrack) {
         const [x, y] = this.position;
         const [width, height] = this.dimensions;
         const cx = x + width / 2;
@@ -24790,6 +24793,9 @@ const factory$1 = (HGC, context, options) => {
       var _a, _b;
       this.tileSize = (_b = (_a = this.tilesetInfo) == null ? void 0 : _a.tile_size) != null ? _b : 1024;
       const tiles = this.visibleAndFetchedTiles();
+      if (tiles.every((tile) => __privateGet(this, _processedTileMap).get(tile) !== void 0)) {
+        return;
+      }
       tiles.forEach((tile) => __privateMethod(this, _generateTabularData, generateTabularData_fn).call(this, tile, force));
       this.combineAllTilesIfNeeded();
       const models = tiles.flatMap((tile) => this.transformDataAndCreateModels(tile));
@@ -24798,6 +24804,9 @@ const factory$1 = (HGC, context, options) => {
       if (flatTileData.length !== 0) {
         this.options.siblingIds.forEach((id) => publish("rawData", { id, data: flatTileData }));
       }
+      tiles.forEach((tile) => {
+        __privateGet(this, _processedTileMap).set(tile, true);
+      });
     }
     /**
      * This is currently for testing the new way of rendering visual elements. Called by this.draw()
@@ -25076,7 +25085,7 @@ const factory$1 = (HGC, context, options) => {
         } catch (e) {
         }
         const [trackWidth, trackHeight] = this.dimensions;
-        const axisSize = IsXAxis(resolvedSpec) ? HIGLASS_AXIS_SIZE : 0;
+        const axisSize = IsXAxis(resolvedSpec) && this.options.spec.layout === "linear" ? HIGLASS_AXIS_SIZE : 0;
         const [w, h] = [trackWidth, trackHeight + axisSize];
         const circularFactor = Math.min(w, h) / Math.min(resolvedSpec.width, resolvedSpec.height);
         if (resolvedSpec.innerRadius) {
@@ -25248,6 +25257,7 @@ const factory$1 = (HGC, context, options) => {
   _loadingTextStyleObj = new WeakMap();
   _loadingTextBg = new WeakMap();
   _loadingText = new WeakMap();
+  _processedTileMap = new WeakMap();
   _tilesToId = new WeakSet();
   tilesToId_fn = function(xTiles, yTiles, zoomLevel) {
     if (!yTiles) {
@@ -26535,6 +26545,7 @@ const DELAY_FOR_CONTAINER_RESIZE_BEFORE_RERENDER = 300;
 const GoslingComponent = forwardRef((props, ref) => {
   var _a, _b, _c;
   const [viewConfig, setViewConfig] = useState();
+  const [isInitialRender, setIsInitialRender] = useState(true);
   const [size, setSize] = useState({ width: 200, height: 200 });
   const wrapperSize = useRef();
   const wrapperParentSize = useRef();
@@ -26563,51 +26574,55 @@ const GoslingComponent = forwardRef((props, ref) => {
     },
     [viewConfig, theme]
   );
-  const compile$1 = useCallback(() => {
-    if (props.spec) {
-      const valid = validateGoslingSpec(props.spec);
-      if (valid.state === "error") {
-        console.warn("Gosling spec is not valid. Please refer to the console message.");
-        return;
+  const compile$1 = useCallback(
+    (altSpec) => {
+      const spec = altSpec != null ? altSpec : props.spec;
+      if (spec) {
+        const valid = validateGoslingSpec(spec);
+        if (valid.state === "error") {
+          console.warn("Gosling spec is not valid. Please refer to the console message.");
+          return;
+        }
+        compile(
+          spec,
+          (newHiGlassSpec, newSize, newGoslingSpec, newTracksAndViews, newIdTable) => {
+            var _a2, _b2;
+            if (prevSpec.current && isEqual(omitDeep(prevSpec.current, ["linkingId"]), omitDeep(newGoslingSpec, ["linkingId"]))) {
+              return;
+            }
+            (_a2 = props.compiled) == null ? void 0 : _a2.call(props, spec, newHiGlassSpec, { _processedSpec: newGoslingSpec });
+            setSize(newSize);
+            const isMountedOnce = typeof viewConfig !== "undefined";
+            if (((_b2 = props.experimental) == null ? void 0 : _b2.reactive) && isMountedOnce) {
+              setTimeout(() => {
+                var _a3, _b3;
+                preverseZoomStatus(
+                  newHiGlassSpec,
+                  (_a3 = hgRef.current) == null ? void 0 : _a3.api.getViewConfig()
+                );
+                (_b3 = hgRef.current) == null ? void 0 : _b3.api.setViewConfig(newHiGlassSpec);
+              }, DELAY_FOR_CONTAINER_RESIZE_BEFORE_RERENDER);
+            } else {
+              setViewConfig(newHiGlassSpec);
+            }
+            publishOnNewView(newTracksAndViews);
+            prevSpec.current = newGoslingSpec;
+            tracksAndViews.current = newTracksAndViews;
+            idTable.current = newIdTable;
+          },
+          [...GoslingTemplates],
+          // TODO: allow user definitions
+          theme,
+          {
+            containerSize: wrapperSize.current,
+            containerParentSize: wrapperParentSize.current
+          },
+          props.urlToFetchOptions
+        );
       }
-      compile(
-        props.spec,
-        (newHiGlassSpec, newSize, newGoslingSpec, newTracksAndViews, newIdTable) => {
-          var _a2, _b2;
-          if (prevSpec.current && isEqual(omitDeep(prevSpec.current, ["linkingId"]), omitDeep(newGoslingSpec, ["linkingId"]))) {
-            return;
-          }
-          (_a2 = props.compiled) == null ? void 0 : _a2.call(props, props.spec, newHiGlassSpec, { _processedSpec: newGoslingSpec });
-          setSize(newSize);
-          const isMountedOnce = typeof viewConfig !== "undefined";
-          if (((_b2 = props.experimental) == null ? void 0 : _b2.reactive) && isMountedOnce) {
-            setTimeout(() => {
-              var _a3, _b3;
-              preverseZoomStatus(
-                newHiGlassSpec,
-                (_a3 = hgRef.current) == null ? void 0 : _a3.api.getViewConfig()
-              );
-              (_b3 = hgRef.current) == null ? void 0 : _b3.api.setViewConfig(newHiGlassSpec);
-            }, DELAY_FOR_CONTAINER_RESIZE_BEFORE_RERENDER);
-          } else {
-            setViewConfig(newHiGlassSpec);
-          }
-          publishOnNewView(newTracksAndViews);
-          prevSpec.current = newGoslingSpec;
-          tracksAndViews.current = newTracksAndViews;
-          idTable.current = newIdTable;
-        },
-        [...GoslingTemplates],
-        // TODO: allow user definitions
-        theme,
-        {
-          containerSize: wrapperSize.current,
-          containerParentSize: wrapperParentSize.current
-        },
-        props.urlToFetchOptions
-      );
-    }
-  }, [props.spec, theme]);
+    },
+    [props.spec, theme]
+  );
   useEffect(() => {
     var _a2;
     if (!((_a2 = props.spec) == null ? void 0 : _a2.responsiveSize))
@@ -26636,8 +26651,16 @@ const GoslingComponent = forwardRef((props, ref) => {
     };
   });
   useEffect(() => {
-    compile$1();
-  }, [props.spec, theme]);
+    if (isInitialRender) {
+      compile$1({
+        title: " ",
+        tracks: [{}]
+      });
+      setIsInitialRender(false);
+    } else {
+      compile$1();
+    }
+  }, [props.spec, theme, isInitialRender]);
   const responsiveHeight = typeof ((_b = props.spec) == null ? void 0 : _b.responsiveSize) !== "object" ? (_c = props.spec) == null ? void 0 : _c.responsiveSize : props.spec.responsiveSize.height;
   const higlassComponent = useMemo(
     () => {