gosling.js 2.0.0-alpha.2 → 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-b3ea2b1e.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.2";
+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 = {
@@ -846,6 +846,10 @@ const definitions$1 = {
         description: "Specify the track width in pixels.",
         type: "number"
       },
+      x: {
+        $ref: "#/definitions/X",
+        description: "For showing axis"
+      },
       zoomLimits: {
         description: "Unused property for DummyTrack",
         items: {
@@ -5604,6 +5608,10 @@ const definitions$1 = {
           },
           {
             $ref: "#/definitions/ChannelValue"
+          },
+          {
+            $ref: "#/definitions/X",
+            description: "For showing axis"
           }
         ]
       },
@@ -11483,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;
@@ -11611,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,
@@ -11763,6 +11766,7 @@ function compile(spec, templates, theme, containerStatus) {
     trackInfos = getRelativeTrackInfo(specCopy, theme).trackInfos;
   }
   const compileResult = collectViewsAndTracks(specCopy, trackInfos, theme);
+  console.warn(compileResult);
   return compileResult;
 }
 class PixiManager {
@@ -16660,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);
@@ -16671,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);
@@ -16678,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) {
@@ -17711,16 +17756,23 @@ function getAxisTrackCircularOptions(track, boundingBox, position, theme) {
   return options;
 }
 function getAxisPositions(track) {
-  var _a, _b;
-  if (IsTemplateTrack(track) || IsDummyTrack(track)) {
+  var _a, _b, _c;
+  if (IsTemplateTrack(track)) {
     return { xAxisPosition: void 0, yAxisPosition: void 0 };
   }
+  if (IsDummyTrack(track)) {
+    if ((_a = track.x) == null ? void 0 : _a.axis) {
+      return { xAxisPosition: track.x.axis, yAxisPosition: void 0 };
+    } else {
+      return { xAxisPosition: void 0, yAxisPosition: void 0 };
+    }
+  }
   const resolvedSpecs = resolveSuperposedTracks(track);
   const firstResolvedSpec = resolvedSpecs[0];
   const hasXAxis = "x" in firstResolvedSpec && firstResolvedSpec.x && "axis" in firstResolvedSpec.x && firstResolvedSpec.x.axis !== "none" && firstResolvedSpec.x.type === "genomic" || false;
   const hasYAxis = "y" in firstResolvedSpec && firstResolvedSpec.y && "axis" in firstResolvedSpec.y && firstResolvedSpec.y.axis !== "none" && firstResolvedSpec.y.type === "genomic" || false;
-  const xAxisPosition = hasXAxis && IsChannelDeep(firstResolvedSpec.x) ? (_a = firstResolvedSpec.x) == null ? void 0 : _a.axis : void 0;
-  const yAxisPosition = hasYAxis && IsChannelDeep(firstResolvedSpec.y) ? (_b = firstResolvedSpec.y) == null ? void 0 : _b.axis : void 0;
+  const xAxisPosition = hasXAxis && IsChannelDeep(firstResolvedSpec.x) ? (_b = firstResolvedSpec.x) == null ? void 0 : _b.axis : void 0;
+  const yAxisPosition = hasYAxis && IsChannelDeep(firstResolvedSpec.y) ? (_c = firstResolvedSpec.y) == null ? void 0 : _c.axis : void 0;
   return {
     xAxisPosition,
     yAxisPosition
@@ -18186,8 +18238,15 @@ class BrushCircularTrack extends CircularBrushTrackClass {
     return this;
   }
 }
-function processDummyTrack(track, boundingBox) {
+function processDummyTrack(track, boundingBox, theme) {
   var _a;
+  const trackDefs = [];
+  const [newTrackBbox, axisTrackDefs] = getAxisTrackDef(track, boundingBox, theme);
+  if (axisTrackDefs) {
+    if (!track.overlayOnPreviousTrack)
+      trackDefs.push(...axisTrackDefs);
+    boundingBox = newTrackBbox;
+  }
   const trackDef = {
     type: TrackType.Dummy,
     trackId: track.id,
@@ -18195,11 +18254,15 @@ function processDummyTrack(track, boundingBox) {
     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 : ""
     }
   };
-  return [trackDef];
+  trackDefs.push(trackDef);
+  return trackDefs;
 }
 var TrackType = /* @__PURE__ */ ((TrackType2) => {
   TrackType2[TrackType2["Text"] = 0] = "Text";
@@ -18213,7 +18276,6 @@ var TrackType = /* @__PURE__ */ ((TrackType2) => {
 })(TrackType || {});
 function createTrackDefs(trackInfos, theme) {
   const trackDefs = [];
-  console.warn("trackinfos", trackInfos);
   trackInfos.forEach((trackInfo2) => {
     const { track, boundingBox } = trackInfo2;
     if (track.mark === "_header") {
@@ -18223,7 +18285,7 @@ function createTrackDefs(trackInfos, theme) {
       const heatmapTrackDefs = processHeatmapTrack(track, boundingBox, theme);
       trackDefs.push(...heatmapTrackDefs);
     } else if (IsDummyTrack(track)) {
-      const dummyTrackDefs = processDummyTrack(track, boundingBox);
+      const dummyTrackDefs = processDummyTrack(track, boundingBox, theme);
       trackDefs.push(...dummyTrackDefs);
     } else {
       const goslingAxisDefs = processGoslingTrack(track, boundingBox, theme);
@@ -30104,7 +30166,7 @@ function getSingleViewLinks(gs) {
     };
     tracks2.forEach((track) => {
       var _a;
-      if (hasDiffXDomainThanView(gs, track, assembly2, viewXDomain2) || IsDummyTrack(track))
+      if (hasDiffXDomainThanView(gs, track, assembly2, viewXDomain2))
         return;
       const hasOverlaidTracks = "_overlay" in track;
       if (hasOverlaidTracks) {
@@ -30225,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")];
@@ -30362,6 +30424,8 @@ function GoslingComponent(props) {
     theme = "light",
     ref,
     visualized = () => {
+    },
+    resized = () => {
     }
   } = props;
   const [compiledResults, setCompiledResults] = useState();
@@ -30385,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]);
@@ -30403,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,
@@ -30425,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);
@@ -30438,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;