From 1301cbb9c4f26c22693a27318b224d07b678ea85 Mon Sep 17 00:00:00 2001 From: etowahadams Date: Fri, 16 Feb 2024 17:36:35 -0500 Subject: [PATCH 1/2] fix: flipped stacked bar in linear track --- src/core/mark/bar.ts | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/src/core/mark/bar.ts b/src/core/mark/bar.ts index bda93e4d..e61212b7 100644 --- a/src/core/mark/bar.ts +++ b/src/core/mark/bar.ts @@ -71,6 +71,7 @@ export function drawBar(track: any, tile: Tile, model: GoslingTrackModel) { const pivotedData = group(data, d => d[genomicChannel.field as string]); const xKeys = [...pivotedData.keys()]; + const isFlippedY = (IsChannelDeep(spec.y) && spec.y.flip) || spec.flipY; // TODO: users may want to align rows by values xKeys.forEach(k => { let prevYEnd = 0; @@ -89,8 +90,13 @@ export function drawBar(track: any, tile: Tile, model: GoslingTrackModel) { const alphaTransition = model.markVisibility(d, { width: barWidth, zoomLevel }); const actualOpacity = Math.min(alphaTransition, opacity); - if (actualOpacity === 0 || barWidth <= 0 || y <= 0) { - // do not draw invisible marks + if ( + actualOpacity === 0 || + barWidth <= 0 || + (isFlippedY && y - rowHeight >= 0) || + (!isFlippedY && y <= 0) + ) { + console.warn('inside', model.specOriginal.id); return; } @@ -102,6 +108,7 @@ export function drawBar(track: any, tile: Tile, model: GoslingTrackModel) { ); let polygonForMouseEvents: number[] = []; + const barHeight = isFlippedY ? rowHeight - y : y; if (circular) { const farR = trackOuterRadius - ((rowHeight - prevYEnd) / trackHeight) * trackRingSize; @@ -119,8 +126,8 @@ export function drawBar(track: any, tile: Tile, model: GoslingTrackModel) { g.closePath(); } else { g.beginFill(colorToHex(color), color === 'none' ? 0 : actualOpacity); - g.drawRect(xs, rowHeight - y - prevYEnd, barWidth, y); - const ys = rowHeight - y - prevYEnd; + const ys = isFlippedY ? prevYEnd : rowHeight - y - prevYEnd; + g.drawRect(xs, ys, barWidth, barHeight); const ye = ys + y; polygonForMouseEvents = [xs, ys, xs, ye, xe, ye, xe, ys]; } @@ -128,7 +135,7 @@ export function drawBar(track: any, tile: Tile, model: GoslingTrackModel) { /* Mouse Events */ model.getMouseEventModel().addPolygonBasedEvent(d, polygonForMouseEvents); - prevYEnd += y; + prevYEnd += barHeight; }); }); } else { From 072e6e670ac563caab5622f02b77669cb39c79e4 Mon Sep 17 00:00:00 2001 From: etowahadams Date: Tue, 20 Feb 2024 15:00:03 -0500 Subject: [PATCH 2/2] fix: circular flipped bar --- src/core/mark/bar.ts | 9 +++++---- src/tracks/gosling-track/gosling-track.ts | 2 +- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/core/mark/bar.ts b/src/core/mark/bar.ts index e61212b7..366588dd 100644 --- a/src/core/mark/bar.ts +++ b/src/core/mark/bar.ts @@ -96,7 +96,6 @@ export function drawBar(track: any, tile: Tile, model: GoslingTrackModel) { (isFlippedY && y - rowHeight >= 0) || (!isFlippedY && y <= 0) ) { - console.warn('inside', model.specOriginal.id); return; } @@ -108,11 +107,14 @@ export function drawBar(track: any, tile: Tile, model: GoslingTrackModel) { ); let polygonForMouseEvents: number[] = []; + const barHeight = isFlippedY ? rowHeight - y : y; if (circular) { - const farR = trackOuterRadius - ((rowHeight - prevYEnd) / trackHeight) * trackRingSize; - const nearR = trackOuterRadius - ((rowHeight - y - prevYEnd) / trackHeight) * trackRingSize; + const ys = isFlippedY ? prevYEnd : rowHeight - prevYEnd; + const farR = trackOuterRadius - (ys / trackHeight) * trackRingSize; + const ye = isFlippedY ? barHeight + prevYEnd : rowHeight - y - prevYEnd; + const nearR = trackOuterRadius - (ye / trackHeight) * trackRingSize; const sPos = cartesianToPolar(xs, trackWidth, nearR, cx, cy, startAngle, endAngle); const startRad = valueToRadian(xs, trackWidth, startAngle, endAngle); @@ -134,7 +136,6 @@ export function drawBar(track: any, tile: Tile, model: GoslingTrackModel) { /* Mouse Events */ model.getMouseEventModel().addPolygonBasedEvent(d, polygonForMouseEvents); - prevYEnd += barHeight; }); }); diff --git a/src/tracks/gosling-track/gosling-track.ts b/src/tracks/gosling-track/gosling-track.ts index 598903c4..9f0956dc 100644 --- a/src/tracks/gosling-track/gosling-track.ts +++ b/src/tracks/gosling-track/gosling-track.ts @@ -1011,7 +1011,7 @@ const factory: PluginTrackFactory = (HGC, context, op // Replace width and height information with the actual values for responsive encoding const [trackWidth, trackHeight] = this.dimensions; // actual size of a track - const axisSize = IsXAxis(resolvedSpec) ? HIGLASS_AXIS_SIZE : 0; // Why the axis size must be added here? + const axisSize = IsXAxis(resolvedSpec) && this.options.spec.layout === 'linear' ? HIGLASS_AXIS_SIZE : 0; // Why the axis size must be added here? const [w, h] = [trackWidth, trackHeight + axisSize]; const circularFactor = Math.min(w, h) / Math.min(resolvedSpec.width!, resolvedSpec.height!); if (resolvedSpec.innerRadius) {