From a9d2b1c721ff2733627b19791db12bb59926af6f Mon Sep 17 00:00:00 2001 From: sehilyi Date: Wed, 23 Nov 2022 16:36:00 -0500 Subject: [PATCH 1/2] fix: fix errors when displaying vcf files --- src/core/mark/area.ts | 11 +++++------ src/core/mark/bar.ts | 21 ++++++++++++--------- src/core/mark/point.ts | 4 ++-- 3 files changed, 19 insertions(+), 17 deletions(-) diff --git a/src/core/mark/area.ts b/src/core/mark/area.ts index e6a411b43..fe07ac5a5 100644 --- a/src/core/mark/area.ts +++ b/src/core/mark/area.ts @@ -9,7 +9,7 @@ import type { Tile } from '../../gosling-track/gosling-track'; /** * Draw area marks */ -export function drawArea(HGC: import('@higlass/types').HGC, trackInfo: any, tile: Tile, model: GoslingTrackModel) { +export function drawArea(HGC: import('@higlass/types').HGC, track: any, tile: Tile, model: GoslingTrackModel) { /* track spec */ const spec = model.spec(); @@ -17,9 +17,7 @@ export function drawArea(HGC: import('@higlass/types').HGC, trackInfo: any, tile const data = model.data(); /* track size */ - const [trackWidth, trackHeight] = trackInfo.dimensions; - const tileSize = trackInfo.tilesetInfo.tile_size; - const { tileX } = trackInfo.getTilePosAndDimensions(tile.tileData.zoomLevel, tile.tileData.tilePos, tileSize); + const [trackWidth, trackHeight] = track.dimensions; /* circular parameters */ const circular = spec.layout === 'circular'; @@ -32,7 +30,7 @@ export function drawArea(HGC: import('@higlass/types').HGC, trackInfo: any, tile const trackCenterY = trackHeight / 2.0; /* genomic scale */ - const xScale = trackInfo._xScale; + const xScale = track._xScale; /* row separation */ const rowCategories = (model.getChannelDomainArray('row') as string[]) ?? ['___SINGLE_ROW___']; @@ -202,6 +200,7 @@ export function drawArea(HGC: import('@higlass/types').HGC, trackInfo: any, tile const baselinePoints: number[][] = []; const areaPoints: number[] = []; const baselineR = trackOuterRadius - ((rowPosition + rowHeight) / trackHeight) * trackRingSize; + let startX = 0; data.filter( d => @@ -273,13 +272,13 @@ export function drawArea(HGC: import('@higlass/types').HGC, trackInfo: any, tile if (i === 0) { // start position of the polygon areaPoints.push(cx, rowPosition + rowHeight); + startX = cx; } areaPoints.push(cx, rowPosition + rowHeight - cy); if (i === array.length - 1) { // close the polygon with a point at the start - const startX = xScale(tileX); areaPoints.push(cx, rowPosition + rowHeight); areaPoints.push(startX, rowPosition + rowHeight); } diff --git a/src/core/mark/bar.ts b/src/core/mark/bar.ts index d61663164..f90050b1c 100644 --- a/src/core/mark/bar.ts +++ b/src/core/mark/bar.ts @@ -7,7 +7,7 @@ import { cartesianToPolar, valueToRadian } from '../utils/polar'; import colorToHex from '../utils/color-to-hex'; import type { Tile } from '../../gosling-track/gosling-track'; -export function drawBar(trackInfo: any, tile: Tile, model: GoslingTrackModel) { +export function drawBar(track: any, tile: Tile, model: GoslingTrackModel) { /* track spec */ const spec = model.spec(); @@ -20,13 +20,8 @@ export function drawBar(trackInfo: any, tile: Tile, model: GoslingTrackModel) { const data = model.data(); /* track size */ - const [trackWidth, trackHeight] = trackInfo.dimensions; - const tileSize = trackInfo.tilesetInfo.tile_size; - const { tileX, tileWidth } = trackInfo.getTilePosAndDimensions( - tile.tileData.zoomLevel, - tile.tileData.tilePos, - tileSize - ); + const [trackWidth, trackHeight] = track.dimensions; + const tileSize = track.tilesetInfo.tile_size; const zoomLevel = (model.getChannelScale('x') as any).invert(trackWidth) - (model.getChannelScale('x') as any).invert(0); @@ -42,7 +37,15 @@ export function drawBar(trackInfo: any, tile: Tile, model: GoslingTrackModel) { /* genomic scale */ const xScale = model.getChannelScale('x'); - const tileUnitWidth = xScale(tileX + tileWidth / tileSize) - xScale(tileX); + let tileUnitWidth: number; + if (tile.tileData.tilePos) { + const { tileX, tileWidth } = track.getTilePosAndDimensions( + tile.tileData.zoomLevel, + tile.tileData.tilePos, + tileSize + ); + tileUnitWidth = xScale(tileX + tileWidth / tileSize) - xScale(tileX); + } /* row separation */ const rowCategories = (model.getChannelDomainArray('row') as string[]) ?? ['___SINGLE_ROW___']; diff --git a/src/core/mark/point.ts b/src/core/mark/point.ts index 0be480ebc..cbca3f334 100644 --- a/src/core/mark/point.ts +++ b/src/core/mark/point.ts @@ -6,7 +6,7 @@ import colorToHex from '../utils/color-to-hex'; import { cartesianToPolar } from '../utils/polar'; import type { PIXIVisualProperty } from '../visual-property.schema'; -export function drawPoint(trackInfo: any, g: PIXI.Graphics, model: GoslingTrackModel) { +export function drawPoint(track: any, g: PIXI.Graphics, model: GoslingTrackModel) { /* track spec */ const spec = model.spec(); @@ -19,7 +19,7 @@ export function drawPoint(trackInfo: any, g: PIXI.Graphics, model: GoslingTrackM const data = model.data(); /* track size */ - const [trackWidth, trackHeight] = trackInfo.dimensions; + const [trackWidth, trackHeight] = track.dimensions; const zoomLevel = (model.getChannelScale('x') as any).invert(trackWidth) - (model.getChannelScale('x') as any).invert(0); From 0c857b50016388f9f8e98763cfd13b7806afca24 Mon Sep 17 00:00:00 2001 From: sehilyi Date: Sat, 26 Nov 2022 18:21:28 -0500 Subject: [PATCH 2/2] fix: improve within link performance by reducing the number of event points --- src/core/mark/withinLink.ts | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/src/core/mark/withinLink.ts b/src/core/mark/withinLink.ts index 87bac1507..51c732565 100644 --- a/src/core/mark/withinLink.ts +++ b/src/core/mark/withinLink.ts @@ -37,7 +37,7 @@ export function drawWithinLink(g: PIXI.Graphics, trackInfo: any, model: GoslingT /* defaults */ const MIN_HEIGHT = spec.style?.linkMinHeight ?? 0.5; - const NUM_STEPS = spec.experimental?.performanceMode ? 200 : 1000; // https://github.com/gosling-lang/gosling.js/issues/634 + const NUM_STEPS = spec.experimental?.performanceMode ? 10 : 50; // https://github.com/gosling-lang/gosling.js/issues/634 // TODO: Can row be actually used for circular layouts? /* render */ @@ -324,13 +324,10 @@ export function drawWithinLink(g: PIXI.Graphics, trackInfo: any, model: GoslingT : Math.min(xe - x + trackWidth * MIN_HEIGHT, trackWidth) / trackWidth) * (flipY ? -1 : 1); - if (step % 20 === 0 || step === NUM_STEPS) { - // we draw less points than the hidden points that captures mouse events - if (step === 0) { - g.moveTo(mx, my); - } else { - g.lineTo(mx, my); - } + if (step === 0) { + g.moveTo(mx, my); + } else { + g.lineTo(mx, my); } morePoints.push({ x: mx, y: my }); }