fix: improve within link performance by reducing the number of event points

src/core/mark/area.ts

@@ -9,17 +9,15 @@ 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();
 
  /* data */
  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);
  }

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___'];

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);
 

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:/gosling-lang/gosling.js/issues/634
+ const NUM_STEPS = spec.experimental?.performanceMode ? 10 : 50; // https:/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 });
  }