gosling.js 2.0.0-alpha.3 → 2.0.0-alpha.4

package/dist/gosling.js

@@ -35,7 +35,7 @@ import { scaleLinear, scaleLog, scaleQuantile, scaleSequential, scaleOrdinal, sc
 import { drag } from "d3-drag";
 import { sampleSize, isEqual, uniqBy } from "lodash-es";
 import { interpolateViridis } from "d3-scale-chromatic";
-import { A as Ajv, r as resolveSuperposedTracks, I as IsChannelDeep, t as traverseTracks, a as IsTemplateTrack, D as DEWFAULT_TITLE_PADDING_ON_TOP_AND_BOTTOM, b as traverseTracksAndViews, c as traverseViewArrangements, d as DEFAULT_AXIS_SIZE, e as Is2DTrack, f as DEFAULT_VIEW_SPACING, g as DEFAULT_INNER_RADIUS_PROP, h as IsDummyTrack, i as IsOverlaidTrack, j as IsXAxis, k as IsYAxis, l as DEFAULT_CIRCULAR_VIEW_PADDING, u as uuid, m as traverseToFixSpecDownstream, n as absToChr, o as colorToHex, p as getTextStyle, q as computeChromSizes, s as cartesianToPolar, v as getHiGlassColorRange, R as RADIAN_GAP, w as valueToRadian, x as pointsToDegree, y as commonjsGlobal, z as RemoteFile, B as chrToAbs, C as IsOneOfFilter, E as IsRangeFilter, F as IsIncludeFilter, G as getChannelKeysByAggregateFnc, H as getChannelKeysByType, J as sanitizeChrName, K as filterUsingGenoPos, L as IsDataDeepTileset, M as IsDomainChr, N as IsDomainInterval, O as IsDomainChrInterval, S as SUPPORTED_CHANNELS, P as IsChannelValue, Q as getValueUsingChannel, T as rectProperty, U as pointProperty, V as barProperty, W as IsStackedChannel, X as IsDomainArray, Y as PREDEFINED_COLOR_STR_MAP, Z as IsRangeArray, _ as isTabularDataFetcher, $ as drawPreEmbellishment, a0 as drawMark, a1 as drawPostEmbellishment, a2 as getRelativeGenomicPosition, a3 as hasDataTransform, a4 as IsMouseEventsDeep, a5 as flatArrayToPairArray, a6 as IsSingleView, a7 as IsMultipleViews, a8 as GenomicPositionHelper } from "./exported-utils-bd94e9c8.js";
+import { A as Ajv, r as resolveSuperposedTracks, I as IsChannelDeep, t as traverseTracks, a as IsTemplateTrack, D as DEWFAULT_TITLE_PADDING_ON_TOP_AND_BOTTOM, b as traverseTracksAndViews, c as traverseViewArrangements, d as DEFAULT_AXIS_SIZE, e as Is2DTrack, f as DEFAULT_VIEW_SPACING, g as DEFAULT_INNER_RADIUS_PROP, h as IsOverlaidTrack, i as IsXAxis, j as IsYAxis, k as DEFAULT_CIRCULAR_VIEW_PADDING, u as uuid, l as traverseToFixSpecDownstream, m as absToChr, n as colorToHex, o as getTextStyle, p as computeChromSizes, q as cartesianToPolar, s as IsDummyTrack, v as getHiGlassColorRange, R as RADIAN_GAP, w as valueToRadian, x as pointsToDegree, y as commonjsGlobal, z as RemoteFile, B as chrToAbs, C as IsOneOfFilter, E as IsRangeFilter, F as IsIncludeFilter, G as getChannelKeysByAggregateFnc, H as getChannelKeysByType, J as sanitizeChrName, K as filterUsingGenoPos, L as IsDataDeepTileset, M as IsDomainChr, N as IsDomainInterval, O as IsDomainChrInterval, S as SUPPORTED_CHANNELS, P as IsChannelValue, Q as getValueUsingChannel, T as rectProperty, U as pointProperty, V as barProperty, W as IsStackedChannel, X as IsDomainArray, Y as PREDEFINED_COLOR_STR_MAP, Z as IsRangeArray, _ as isTabularDataFetcher, $ as drawPreEmbellishment, a0 as drawMark, a1 as drawPostEmbellishment, a2 as getRelativeGenomicPosition, a3 as hasDataTransform, a4 as IsMouseEventsDeep, a5 as flatArrayToPairArray, a6 as IsSingleView, a7 as IsMultipleViews, a8 as GenomicPositionHelper } from "./exported-utils-b3cf08ff.js";
 import React, { useState, useImperativeHandle, useEffect } from "react";
 import { format, precisionPrefix, formatPrefix } from "d3-format";
 import slugid from "slugid";
@@ -55,7 +55,7 @@ import { createNanoEvents } from "nanoevents";
 import PubSub$1 from "pubsub-js";
 import { zoom, ZoomTransform } from "d3-zoom";
 const name = "gosling.js";
-const version = "2.0.0-alpha.3";
+const version = "2.0.0-alpha.4";
 const $ref$1 = "#/definitions/GoslingSpec";
 const $schema$1 = "http://json-schema.org/draft-07/schema#";
 const definitions$1 = {
@@ -11491,9 +11491,6 @@ function traverseAndCollectTrackInfo(spec, output, dx = 0, dy = 0, circularRootN
     const TOTAL_RING_SIZE = TOTAL_RADIUS * (1 - INNER_RADIUS);
     cTracks.forEach((t, i) => {
       var _a, _b;
-      if (IsDummyTrack(t.track)) {
-        return;
-      }
       const circularTrack = t.track;
       circularTrack.layout = "circular";
       circularTrack.outerRadius = TOTAL_RADIUS - PADDING - (t.boundingBox.y - dy) / cumHeight * TOTAL_RING_SIZE;
@@ -11619,8 +11616,6 @@ function collectViewsAndTracks(spec, trackInfos, theme) {
     let isLinear = false;
     if ("layout" in d.track && d.track.layout === "linear") {
       isLinear = true;
-    } else if (IsDummyTrack(d.track)) {
-      isLinear = true;
     }
     return {
       id: d.track.id,
@@ -16669,8 +16664,35 @@ const defaultOptions$2 = {
   textFontWeight: "normal",
   textStroke: "#000",
   textStrokeWidth: 0.1,
-  outline: "#fff"
+  outline: "#fff",
+  layout: "linear",
+  outerRadius: 0,
+  innerRadius: 0
 };
+function makeArc(width, height, innerRadius, outerRadius) {
+  const startAngle = -Math.PI / 2;
+  const endAngle = -Math.PI / 2 + 2 * Math.PI - 1e-6;
+  const startX = width / 2 + outerRadius * Math.cos(startAngle);
+  const startY = height / 2 + outerRadius * Math.sin(startAngle);
+  const endX = width / 2 + outerRadius * Math.cos(endAngle);
+  const endY = height / 2 + outerRadius * Math.sin(endAngle);
+  const innerStartX = width / 2 + innerRadius * Math.cos(startAngle);
+  const innerStartY = height / 2 + innerRadius * Math.sin(startAngle);
+  const innerEndX = width / 2 + innerRadius * Math.cos(endAngle);
+  const innerEndY = height / 2 + innerRadius * Math.sin(endAngle);
+  const pathData = [
+    `M ${startX} ${startY}`,
+    `A ${outerRadius} ${outerRadius} 0 1 1 ${endX} ${endY}`,
+    // Draw outer arc
+    `L ${innerEndX} ${innerEndY}`,
+    // Draw a line to the ending point of the inner arc
+    `A ${innerRadius} ${innerRadius} 0 1 0 ${innerStartX} ${innerStartY}`,
+    // Draw inner arc
+    "Z"
+    // Close the path
+  ].join(" ");
+  return pathData;
+}
 class DummyTrackClass extends SVGTrack {
   constructor(context, options) {
     super(context, options);
@@ -16680,6 +16702,7 @@ class DummyTrackClass extends SVGTrack {
      */
     __privateAdd(this, _drawText);
     this.options = { ...defaultOptions$2, ...options };
+    console.warn(this.options);
     this.clipRect.attr("width", this.options.width).attr("height", this.options.height);
     __privateMethod(this, _drawBackground, drawBackground_fn).call(this);
     __privateMethod(this, _drawText, drawText_fn).call(this);
@@ -16687,11 +16710,24 @@ class DummyTrackClass extends SVGTrack {
 }
 _drawBackground = new WeakSet();
 drawBackground_fn = function() {
-  this.gMain.append("rect").attr("fill", this.options.background).attr("x", 0).attr("y", 0).attr("width", this.options.width).attr("height", this.options.height).style("stroke", this.options.outline);
+  if (this.options.layout === "linear") {
+    this.gMain.append("rect").attr("fill", this.options.background).attr("x", 0).attr("y", 0).attr("width", this.options.width).attr("height", this.options.height).style("stroke", this.options.outline);
+  } else {
+    this.gMain.append("path").attr(
+      "d",
+      makeArc(
+        this.options.width,
+        this.options.height,
+        this.options.innerRadius,
+        this.options.outerRadius
+      )
+    ).attr("fill", this.options.background).attr("stroke", this.options.outline).attr("x", 0).attr("y", 0);
+  }
 };
 _drawText = new WeakSet();
 drawText_fn = function() {
-  this.gMain.append("text").attr("x", this.options.width / 2).attr("y", (this.options.height + this.options.textFontSize) / 2).style("text-anchor", "middle").style("font-size", `${this.options.textFontSize}px`).style("font-weight", this.options.textFontWeight).style("stroke", this.options.textStroke).style("stroke-width", this.options.textStrokeWidth).text(this.options.title);
+  const height = this.options.layout === "linear" ? (this.options.height + this.options.textFontSize) / 2 : this.options.height / 2 - this.options.innerRadius - this.options.textFontSize;
+  this.gMain.append("text").attr("x", this.options.width / 2).attr("y", height).style("text-anchor", "middle").style("font-size", `${this.options.textFontSize}px`).style("font-weight", this.options.textFontWeight).style("stroke", this.options.textStroke).style("stroke-width", this.options.textStrokeWidth).text(this.options.title);
 };
 class DummyTrack extends DummyTrackClass {
   constructor(options, overlayDiv) {
@@ -18218,6 +18254,9 @@ function processDummyTrack(track, boundingBox, theme) {
     options: {
       width: boundingBox.width,
       height: boundingBox.height,
+      layout: track.layout,
+      outerRadius: "outerRadius" in track ? track.outerRadius : void 0,
+      innerRadius: "innerRadius" in track ? track.innerRadius : void 0,
       ...track.style,
       title: (_a = track.title) != null ? _a : ""
     }
@@ -30248,9 +30287,9 @@ function createApiV2(compileResult) {
   if (!compileResult) {
     return createEmptyApi();
   }
-  const { tracksAndViews, theme, pixiManager, plots } = compileResult;
+  const { theme, pixiManager, plots } = compileResult;
   const getTracksAndViews = () => {
-    return [...tracksAndViews];
+    return [...compileResult.tracksAndViews];
   };
   const getTracks = () => {
     return [...getTracksAndViews().filter((d) => d.type === "track")];
@@ -30385,6 +30424,8 @@ function GoslingComponent(props) {
     theme = "light",
     ref,
     visualized = () => {
+    },
+    resized = () => {
     }
   } = props;
   const [compiledResults, setCompiledResults] = useState();
@@ -30408,12 +30449,12 @@ function GoslingComponent(props) {
         padding,
         background: getTheme(theme).root.background
       });
-      const compileResult = renderGosling(spec, plotElement, pixiManager2, theme, urlToFetchOptions);
+      const compileResult = renderGosling(spec, plotElement, pixiManager2, theme, urlToFetchOptions, resized);
       setCompiledResults(compileResult);
       setPixiManager(pixiManager2);
     } else {
       pixiManager.clearAll();
-      const compileResult = renderGosling(spec, plotElement, pixiManager, theme, urlToFetchOptions);
+      const compileResult = renderGosling(spec, plotElement, pixiManager, theme, urlToFetchOptions, resized);
       setCompiledResults(compileResult);
     }
   }, [spec]);
@@ -30426,18 +30467,18 @@ function GoslingComponent(props) {
     }
   );
 }
-function renderGosling(gs, container, pixiManager, theme, urlToFetchOptions) {
+function renderGosling(gs, container, pixiManager, theme, urlToFetchOptions, resized) {
   const themeDeep = getTheme(theme);
   let plots = {};
   const compileResult = compile(gs, [], themeDeep, {});
-  const { trackInfos, gs: processedSpec } = compileResult;
+  const { trackInfos, gs: processedSpec, theme: themeComplete } = compileResult;
   const linkedEncodings = getLinkedEncodings(processedSpec);
+  const result = { ...compileResult, plots, pixiManager };
   const { isResponsiveWidth, isResponsiveHeight } = checkResponsiveSpec(processedSpec);
   if (isResponsiveWidth || isResponsiveHeight) {
     const resizeObserver = new ResizeObserver(
       debounce((entries) => {
         const { width: containerWidth, height: containerHeight } = entries[0].contentRect;
-        console.warn("Resizing to", containerWidth, containerHeight);
         pixiManager.clearAll();
         const rescaledTracks = rescaleTrackInfos(
           trackInfos,
@@ -30448,10 +30489,14 @@ function renderGosling(gs, container, pixiManager, theme, urlToFetchOptions) {
           isResponsiveWidth,
           isResponsiveHeight
         );
+        const updatedResult = collectViewsAndTracks(processedSpec, rescaledTracks, themeComplete);
+        result.tracksAndViews = updatedResult.tracksAndViews;
+        result.size = updatedResult.size;
         const trackDefs = createTrackDefs(rescaledTracks, themeDeep);
         plots = renderTrackDefs(trackDefs, linkedEncodings, pixiManager, urlToFetchOptions);
         const { width, height } = calculateWidthHeight(rescaledTracks);
         pixiManager.resize(width, height);
+        resized == null ? void 0 : resized();
       }, 300)
     );
     resizeObserver.observe(container);
@@ -30461,7 +30506,7 @@ function renderGosling(gs, container, pixiManager, theme, urlToFetchOptions) {
     const { width, height } = calculateWidthHeight(trackInfos);
     pixiManager.resize(width, height);
   }
-  return { ...compileResult, plots, pixiManager };
+  return result;
 }
 function debounce(f, delay) {
   let timer = 0;