fix: correct size of rect in circular layouts

src/core/mark/rect.ts

@@ -62,6 +62,8 @@ export function drawRect(HGC: any, trackInfo: any, tile: any, model: GeminidTrac
  const pixiProps: {
  xs: number;
  xe: number;
+ y: number;
+ absoluteHeight?: number;
  ys: number;
  ye: number;
  color: string;
@@ -130,6 +132,9 @@ export function drawRect(HGC: any, trackInfo: any, tile: any, model: GeminidTrac
  pixiProps.push({
  xs: x,
  xe: x + rectWidth,
+ y: y - rectHeight,
+ // this is making it complicated, way to simplify this?
+ absoluteHeight: model.visualPropertyByChannel('size', d) ?? undefined,
  ys: y,
  ye: y + rectHeight,
  color,
@@ -144,7 +149,7 @@ export function drawRect(HGC: any, trackInfo: any, tile: any, model: GeminidTrac
  const yScaleFactor = stackY ? Math.max(...pixiProps.map(d => d.ye)) / rowHeight : 1;
 
  pixiProps.forEach(prop => {
- const { xs, xe, ys, ye, color, stroke, strokeWidth, opacity, datum } = prop;
+ const { xs, xe, y, absoluteHeight, ys, ye, color, stroke, strokeWidth, opacity, datum } = prop;
 
  // stroke
  g.lineStyle(
@@ -161,8 +166,15 @@ export function drawRect(HGC: any, trackInfo: any, tile: any, model: GeminidTrac
  }
 
  // TODO: Does a `row` channel affect here?
- const farR = trackOuterRadius - ((rowPosition + ys / yScaleFactor) / trackHeight) * trackRingSize;
- const nearR = trackOuterRadius - ((rowPosition + ye / yScaleFactor) / trackHeight) * trackRingSize;
+ let farR = trackOuterRadius - ((rowPosition + ys / yScaleFactor) / trackHeight) * trackRingSize;
+ let nearR = trackOuterRadius - ((rowPosition + ye / yScaleFactor) / trackHeight) * trackRingSize;
+
+ if (absoluteHeight) {
+ const midR = trackOuterRadius - ((rowPosition + y / yScaleFactor) / trackHeight) * trackRingSize;
+ farR = midR - absoluteHeight / 2.0;
+ nearR = midR + absoluteHeight / 2.0;
+ }
+
  const sPos = cartesianToPolar(xs, trackWidth, nearR, cx, cy, startAngle, endAngle);
  const startRad = valueToRadian(xs, trackWidth, startAngle, endAngle);
  const endRad = valueToRadian(xe, trackWidth, startAngle, endAngle);

src/editor/example/basic/circos.ts

@@ -292,7 +292,7 @@ export const EXAMPLE_CIRCOS: GeminidSpec = {
  outerRadius,
  innerRadius: 80
  }
- // { ...HIGLASS_GENE_ANNOTATION, outerRadius, innerRadius: 80 }
+ // { ...HIGLASS_GENE_ANNOTATION, outerRadius, innerRadius: 80 },
  // {
  // outerRadius, innerRadius: 30,
  // data: {
@@ -351,7 +351,8 @@ export const EXAMPLE_CIRCOS: GeminidSpec = {
  // x: {
  // field: 'start',
  // type: 'genomic',
- // domain: { chromosome: '3' },
+ // domain: { chromosome: '1' },
+ // linkingID: 'link-1'
  // },
  // xe: {
  // field: 'end',
@@ -389,5 +390,5 @@ export const EXAMPLE_CIRCOS: GeminidSpec = {
  // },
  // opacity: { value: 0.6 }
  // },
- ] //.slice(1)
+ ]
 } as GeminidSpec;

src/editor/example/basic/links.ts

@@ -59,27 +59,11 @@ export const EXAMPLE_LINKS: GeminidSpec = {
  ]
  },
  superpose: [
- // {
- // mark: 'rect',
- // x: {
- // field: 'start',
- // type: 'genomic',
- // domain: { chromosome: '1', interval: [19590000, 19630000] },
- // axis: 'top'
- // },
- // xe: {
- // field: 'end',
- // type: 'genomic'
- // },
- // color: { value: '#F0F0F0' },
- // opacity: { value: 0.1 },
- // },
  {
  mark: 'link',
  x: {
  field: 'start',
  type: 'genomic',
- // domain: { chromosome: '4', interval: [132600000, 132900000] },
  linkingID: '1',
  axis: 'top'
  },
@@ -113,8 +97,7 @@ export const EXAMPLE_LINKS: GeminidSpec = {
  x: {
  field: 'start',
  type: 'genomic',
- // domain: { chromosome: '4', interval: [132600000, 132900000] },
- domain: { chromosome: '4', interval: [144650000, 145100000] },
+ domain: { chromosome: '4', interval: [145750000, 146100000] },
  linkingID: '1'
  },
  xe: {

src/editor/example/genocat-circos.ts

@@ -67,7 +67,6 @@ export const GENOCAT_CIRCOS: GeminidSpec = {
  },
  x: { field: 'chromStart', type: 'genomic' },
  xe: { field: 'chromEnd', type: 'genomic' },
- size: { value: 620 },
  stroke: { value: 'lightgray' },
  strokeWidth: { value: 0.5 },
  outerRadius: 294,

src/editor/example/genocat-mizbee.ts

@@ -110,9 +110,8 @@ export const GENOCAT_MIZBEE: GeminidSpec = {
  },
  strokeWidth: { value: 1 },
  stroke: { value: '#E1E2E3' },
- size: { value: 400 },
- outerRadius: 325,
- innerRadius: 225,
+ outerRadius: 300,
+ innerRadius: 250,
  superposeOnPreviousTrack: true
  },
  {
@@ -141,9 +140,8 @@ export const GENOCAT_MIZBEE: GeminidSpec = {
  type: 'genomic'
  },
  strokeWidth: { value: 0 },
- size: { value: 400 },
- outerRadius: 325,
- innerRadius: 225,
+ outerRadius: 300,
+ innerRadius: 250,
  superposeOnPreviousTrack: true
  },
  {
@@ -215,9 +213,8 @@ export const GENOCAT_MIZBEE: GeminidSpec = {
  },
  strokeWidth: { value: 2 },
  stroke: { value: 'black' },
- size: { value: 400 },
- outerRadius: 325,
- innerRadius: 225,
+ outerRadius: 300,
+ innerRadius: 250,
  superposeOnPreviousTrack: true
  },
  {
@@ -246,9 +243,8 @@ export const GENOCAT_MIZBEE: GeminidSpec = {
  },
  strokeWidth: { value: 1 },
  stroke: { value: '#E1E2E3' },
- size: { value: 400 },
- // outerRadius: 325,
- // innerRadius: 225,
+ outerRadius: 380,
+ innerRadius: 340,
  superposeOnPreviousTrack: true
  },
  {
@@ -263,10 +259,6 @@ export const GENOCAT_MIZBEE: GeminidSpec = {
  longToWideId: 'id',
  sampleLength: 1000
  },
- // dataTransform: { filter: [
- // // { field: 'chr', oneOf: ['hs1'], not: false },
- // // { field: 'chr_2', oneOf: ['hs3', 'hs10', 'hs12', 'hs16'], not: false }
- // ] },
  mark: 'rect',
  superpose: [
  {
@@ -286,7 +278,6 @@ export const GENOCAT_MIZBEE: GeminidSpec = {
  },
  strokeWidth: { value: 1.5 },
  opacity: { value: 0.4 },
- style: { circularLink: true },
  outerRadius: 380,
  innerRadius: 340,
  superposeOnPreviousTrack: true
@@ -317,9 +308,8 @@ export const GENOCAT_MIZBEE: GeminidSpec = {
  },
  strokeWidth: { value: 3 },
  stroke: { value: '#CCCECF' },
- size: { value: 400 },
- // outerRadius: 380,
- // innerRadius: 340,
+ outerRadius: 380,
+ innerRadius: 340,
  superposeOnPreviousTrack: true
  }
  ]

src/editor/example/index.ts

@@ -19,7 +19,6 @@ import { EXAMPLE_CIRCOS } from './basic/circos';
 import { EXAMPLE_CIRCOS_MANY } from './basic/circos-many-rows';
 import { EXAMPLE_CIRCOS_STACKING } from './basic/circos-stacking';
 import { EXAMPLE_SUPERPOSED_CIRCULAR_TRACKS } from './basic/superposed-circular';
-import { EXAMPLE_LOGO } from './basic/logo';
 import { EXAMPLE_OF_EXPERIMENT } from './experimental';
 import { EXAMPLE_CYTOAND_HG38 } from './cytoband-hg38';
 import { EXAMPLE_2019_WENGER } from './wenger-2019';
@@ -59,7 +58,8 @@ export const examples: ReadonlyArray<{
  {
  name: '[GenoCAT] Gremlin',
  spec: GENOCAT_GREMLIN,
- underDevelopment: true
+ underDevelopment: true,
+ forceShow: true
  },
  {
  name: '[GenoCAT] MizBee',
@@ -78,64 +78,43 @@ export const examples: ReadonlyArray<{
  },
  {
  name: 'UCSC Cyto band (hg38)',
- spec: EXAMPLE_CYTOAND_HG38,
- underDevelopment: false,
- hidden: false
+ spec: EXAMPLE_CYTOAND_HG38
  },
  {
  name: 'Wenger et al. 2019 (SV)',
- spec: EXAMPLE_2019_WENGER,
- underDevelopment: false,
- hidden: false
+ spec: EXAMPLE_2019_WENGER
  },
  {
  name: 'Corces et al. 2020 (Nature Genetics)',
- spec: CORCES_2020_NATURE_GENETICS,
- underDevelopment: false,
- hidden: false
- },
- {
- name: 'Geminid Logo',
- spec: EXAMPLE_LOGO,
- underDevelopment: false,
- hidden: true
+ spec: CORCES_2020_NATURE_GENETICS
  },
  {
  name: 'Simplest Spec',
- spec: EXAMPLE_SIMPLEST,
- underDevelopment: false,
- hidden: false,
- forceShow: true
+ spec: EXAMPLE_SIMPLEST
  },
  {
  name: 'Basic Marks',
- spec: EXMAPLE_BASIC_MARKS,
- underDevelopment: false,
- hidden: false,
- forceShow: true
+ spec: EXMAPLE_BASIC_MARKS
  },
  {
  name: 'Text Marks',
  spec: EXAMPLE_LOGO_LIKE
  },
  {
  name: 'Superposed Tracks',
- spec: EXAMPLE_SUPERPOSE,
- forceShow: false
+ spec: EXAMPLE_SUPERPOSE
  },
  {
  name: 'Ideograms (Static)',
  spec: EXAMPLE_IDEOGRAM
  },
  {
  name: 'Custom Gene Annotation Tracks',
- spec: EXAMPLE_GENE_ANNOTATION,
- forceShow: false
+ spec: EXAMPLE_GENE_ANNOTATION
  },
  {
  name: 'Band and Line Connections',
- spec: EXAMPLE_LINKS,
- underDevelopment: true
+ spec: EXAMPLE_LINKS
  },
  {
  name: 'Semantic Zooming',
@@ -157,32 +136,26 @@ export const examples: ReadonlyArray<{
  {
  name: 'Basic Circular Marks',
  spec: EXAMPLE_CIRCOS,
- underDevelopment: true,
- forceShow: false
+ underDevelopment: true
  },
  {
  name: 'Basic Circular Marks 2',
  spec: EXAMPLE_CIRCOS_MANY,
- underDevelopment: true,
- forceShow: false
+ underDevelopment: true
  },
  {
  name: 'Superposed Circular Tracks',
  spec: EXAMPLE_SUPERPOSED_CIRCULAR_TRACKS,
- underDevelopment: true,
- forceShow: true
+ underDevelopment: true
  },
  {
  name: 'Stacking Circular Tracks',
  spec: EXAMPLE_CIRCOS_STACKING,
- underDevelopment: true,
- forceShow: false
+ underDevelopment: true
  },
  {
  name: 'UpSet-like Plot',
  spec: EXAMPLE_UPSET,
- hidden: true,
- underDevelopment: true,
- forceShow: false
+ hidden: true
  }
 ].filter(d => !d.hidden);

src/editor/example/wenger-2019.ts

@@ -27,7 +27,6 @@ export const EXAMPLE_2019_WENGER_TRACK: Track = {
  legend: true
  },
  stackY: true,
- size: { value: 10 },
  stroke: {
  field: 'Variant Region type',
  type: 'nominal',