feat: support an inline legend and 'unknown' type assembly (#252)

schema/gosling.schema.json

@@ -20,7 +20,8 @@
  "hg17",
  "hg16",
  "mm10",
- "mm9"
+ "mm9",
+ "unknown"
  ],
  "type": "string"
  },
@@ -425,7 +426,7 @@
  }
  ]
  },
- "xLinkID": {
+ "xLinkingId": {
  "type": "string"
  }
  },
@@ -1237,7 +1238,7 @@
  }
  ]
  },
- "xLinkID": {
+ "xLinkingId": {
  "type": "string"
  }
  },
@@ -1348,6 +1349,9 @@
  "endAngle": {
  "type": "number"
  },
+ "flipY": {
+ "type": "boolean"
+ },
  "height": {
  "type": "number"
  },
@@ -1392,6 +1396,9 @@
  "endAngle": {
  "type": "number"
  },
+ "flipY": {
+ "type": "boolean"
+ },
  "innerRadius": {
  "type": "number"
  },
@@ -1496,7 +1503,7 @@
  }
  ]
  },
- "xLinkID": {
+ "xLinkingId": {
  "type": "string"
  },
  "xe": {
@@ -1620,7 +1627,7 @@
  }
  ]
  },
- "xLinkID": {
+ "xLinkingId": {
  "type": "string"
  },
  "xe": {
@@ -1749,7 +1756,7 @@
  }
  ]
  },
- "xLinkID": {
+ "xLinkingId": {
  "type": "string"
  }
  },
@@ -1824,7 +1831,7 @@
  }
  ]
  },
- "xLinkID": {
+ "xLinkingId": {
  "type": "string"
  }
  },
@@ -1858,6 +1865,9 @@
  "endAngle": {
  "type": "number"
  },
+ "flipY": {
+ "type": "boolean"
+ },
  "height": {
  "type": "number"
  },
@@ -1977,7 +1987,7 @@
  }
  ]
  },
- "xLinkID": {
+ "xLinkingId": {
  "type": "string"
  },
  "xe": {
@@ -2045,7 +2055,7 @@
  }
  ]
  },
- "xLinkID": {
+ "xLinkingId": {
  "type": "string"
  }
  },
@@ -2157,6 +2167,9 @@
  "dy": {
  "type": "number"
  },
+ "inlineLegend": {
+ "type": "boolean"
+ },
  "linePattern": {
  "additionalProperties": false,
  "properties": {
@@ -2189,6 +2202,14 @@
  "strokeWidth": {
  "type": "number"
  },
+ "textAnchor": {
+ "enum": [
+ "start",
+ "middle",
+ "end"
+ ],
+ "type": "string"
+ },
  "textFontSize": {
  "type": "number"
  },

src/core/gosling-to-higlass.test.ts

@@ -1,14 +1,14 @@
 import { goslingToHiGlass } from './gosling-to-higlass';
 import { SingleTrack } from './gosling.schema';
 import { HiGlassModel } from './higlass-model';
-import { EXAMPLE_TRACK_SEMANTIC_ZOOM } from '../editor/example/semantic-zoom';
+import { EX_TRACK_SEMANTIC_ZOOM } from '../editor/example/semantic-zoom';
 
 describe('Should convert gosling spec to higlass view config.', () => {
  it('Should return a generated higlass view config correctly', () => {
  const model = new HiGlassModel();
  const higlass = goslingToHiGlass(
  model,
- EXAMPLE_TRACK_SEMANTIC_ZOOM.cytoband,
+ EX_TRACK_SEMANTIC_ZOOM.cytoband,
  {
  width: 1000,
  height: 100,

src/core/gosling.schema.ts

@@ -31,7 +31,7 @@ export interface MultipleViews extends CommonViewDef {
 }
 
 export type Layout = 'linear' | 'circular';
-export type Assembly = 'hg38' | 'hg19' | 'hg18' | 'hg17' | 'hg16' | 'mm10' | 'mm9';
+export type Assembly = 'hg38' | 'hg19' | 'hg18' | 'hg17' | 'hg16' | 'mm10' | 'mm9' | 'unknown';
 
 export interface CommonViewDef {
  layout?: Layout;
@@ -42,7 +42,7 @@ export interface CommonViewDef {
  assembly?: Assembly;
 
  xDomain?: DomainInterval | DomainChrInterval | DomainChr; // We can support `DomainGene` as well later.
- xLinkID?: string;
+ xLinkingId?: string;
  xAxis?: AxisPosition; // not supported currently
 
  /**
@@ -138,6 +138,7 @@ export interface SingleTrack extends CommonTrackDef {
 
  // Experimental
  stackY?: boolean; // Eventually, will be added to y's `Channel` w/ gap
+ flipY?: boolean;
 
  // Stretch the size to the given range? (e.g., [x, xe])
  stretch?: boolean;
@@ -173,11 +174,13 @@ export interface TrackStyle {
  outline?: string;
  outlineWidth?: number;
  circularLink?: boolean; // draw arc instead of bazier curve?
+ inlineLegend?: boolean; // show legend in a single horizontal line?
  // below options could instead be used with channel options (e.g., size, stroke, strokeWidth)
  textFontSize?: number;
  textStroke?: string;
  textStrokeWidth?: number;
  textFontWeight?: 'bold' | 'normal';
+ textAnchor?: 'start' | 'middle' | 'end';
  //
  stroke?: string; // deprecated
  strokeWidth?: number; // deprecated
@@ -295,6 +298,10 @@ export type Aggregate = 'max' | 'min' | 'mean' | 'bin' | 'count';
 /* ----------------------------- DATA ----------------------------- */
 export type DataDeep = JSONData | CSVData | BIGWIGData | MultivecData | BEDDBData | VectorData;
 
+export interface Datum {
+ [k: string]: number | string;
+}
+
 export interface JSONData {
  type: 'json';
  values: Datum[];
@@ -310,10 +317,6 @@ export interface JSONData {
  }[];
 }
 
-export interface Datum {
- [k: string]: number | string;
-}
-
 export interface CSVData {
  type: 'csv';
  url: string;
@@ -322,11 +325,11 @@ export interface CSVData {
  chromosomeField?: string;
  genomicFields?: string[];
  sampleLength?: number; // This limit the total number of rows fetched (default: 1000)
- // experimental
+
+ // !!! below is experimental
  headerNames?: string[];
  chromosomePrefix?: string;
  longToWideId?: string;
- // !!! experimental
  genomicFieldsToConvert?: {
  chromosomeField: string;
  genomicFields: string[];

src/core/mark/legend.ts

@@ -9,6 +9,7 @@ export const LEGEND_LABEL_STYLE = {
  fill: 'black',
  background: 'white',
  lineJoin: 'round'
+ // Other possible options:
  // stroke: '#ffffff',
  // strokeThickness: 2
 };
@@ -39,37 +40,78 @@ export function drawColorLegend(HGC: any, trackInfo: any, tile: any, tm: Gosling
 
  const recipe: { x: number; y: number; color: string }[] = [];
 
- colorCategories.forEach(category => {
- if (cumY > trackInfo.dimensions[1]) {
- // We do not draw labels overflow
- return;
- }
-
- const color = tm.encodedValue('color', category);
-
- const textGraphic = new HGC.libraries.PIXI.Text(category, { ...LEGEND_LABEL_STYLE });
- textGraphic.anchor.x = 1;
- textGraphic.anchor.y = 0;
- textGraphic.position.x = trackInfo.position[0] + trackInfo.dimensions[0] - paddingX;
- textGraphic.position.y = trackInfo.position[1] + cumY;
-
- graphics.addChild(textGraphic);
-
- const textStyleObj = new HGC.libraries.PIXI.TextStyle(LEGEND_LABEL_STYLE);
- const textMetrics = HGC.libraries.PIXI.TextMetrics.measureText(category, textStyleObj);
-
- if (maxWidth < textMetrics.width + paddingX * 3) {
- maxWidth = textMetrics.width + paddingX * 3;
- }
-
- recipe.push({
- x: trackInfo.position[0] + trackInfo.dimensions[0] - textMetrics.width - paddingX * 2,
- y: trackInfo.position[1] + cumY + textMetrics.height / 2.0,
- color
+ if (spec.style?.inlineLegend) {
+ // Show legend in a single horizontal line
+
+ // !! reversed to add the last category first from the right side
+ colorCategories
+ .map(d => d)
+ .reverse()
+ .forEach(category => {
+ if (maxWidth > trackInfo.dimensions[0]) {
+ // We do not draw labels overflow
+ return;
+ }
+
+ const color = tm.encodedValue('color', category);
+ const textGraphic = new HGC.libraries.PIXI.Text(category, { ...LEGEND_LABEL_STYLE });
+ textGraphic.anchor.x = 1;
+ textGraphic.anchor.y = 0;
+ textGraphic.position.x = trackInfo.position[0] + trackInfo.dimensions[0] - maxWidth - paddingX;
+ textGraphic.position.y = trackInfo.position[1] + paddingY;
+
+ graphics.addChild(textGraphic);
+
+ const textStyleObj = new HGC.libraries.PIXI.TextStyle(LEGEND_LABEL_STYLE);
+ const textMetrics = HGC.libraries.PIXI.TextMetrics.measureText(category, textStyleObj);
+
+ if (cumY < textMetrics.height + paddingY * 3) {
+ cumY = textMetrics.height + paddingY * 3;
+ }
+
+ recipe.push({
+ x: trackInfo.position[0] + trackInfo.dimensions[0] - textMetrics.width - maxWidth - paddingX * 2,
+ y: trackInfo.position[1] + paddingY + textMetrics.height / 2.0,
+ color
+ });
+
+ maxWidth += textMetrics.width + paddingX * 3;
+ });
+ } else {
+ // Show legend vertically
+
+ colorCategories.forEach(category => {
+ if (cumY > trackInfo.dimensions[1]) {
+ // We do not draw labels overflow
+ return;
+ }
+
+ const color = tm.encodedValue('color', category);
+
+ const textGraphic = new HGC.libraries.PIXI.Text(category, { ...LEGEND_LABEL_STYLE });
+ textGraphic.anchor.x = 1;
+ textGraphic.anchor.y = 0;
+ textGraphic.position.x = trackInfo.position[0] + trackInfo.dimensions[0] - paddingX;
+ textGraphic.position.y = trackInfo.position[1] + cumY;
+
+ graphics.addChild(textGraphic);
+
+ const textStyleObj = new HGC.libraries.PIXI.TextStyle(LEGEND_LABEL_STYLE);
+ const textMetrics = HGC.libraries.PIXI.TextMetrics.measureText(category, textStyleObj);
+
+ if (maxWidth < textMetrics.width + paddingX * 3) {
+ maxWidth = textMetrics.width + paddingX * 3;
+ }
+
+ recipe.push({
+ x: trackInfo.position[0] + trackInfo.dimensions[0] - textMetrics.width - paddingX * 2,
+ y: trackInfo.position[1] + cumY + textMetrics.height / 2.0,
+ color
+ });
+
+ cumY += textMetrics.height + paddingY * 2;
  });
-
- cumY += textMetrics.height + paddingY * 2;
- });
+ }
 
  graphics.beginFill(colorToHex('white'), 0.7);
  graphics.lineStyle(

src/core/mark/link.ts

@@ -83,7 +83,7 @@ export function drawLink(g: PIXI.Graphics, model: GoslingTrackModel) {
  0.5 // alignment of the line to draw, (0 = inner, 0.5 = middle, 1 = outter)
  );
 
- const flipY = IsChannelDeep(spec.y) && spec.y.flip;
+ const flipY = (IsChannelDeep(spec.y) && spec.y.flip) || spec.flipY;
  const baseY = rowPosition + (flipY ? 0 : rowHeight);
 
  if (isBand) {

src/core/mark/text.ts

@@ -197,7 +197,12 @@ export function drawText(HGC: any, trackInfo: any, tile: any, tm: GoslingTrackMo
  }
 
  textGraphic.alpha = actualOpacity;
- textGraphic.anchor.x = 0.5;
+ textGraphic.anchor.x =
+ !spec.style?.textAnchor || spec.style?.textAnchor === 'middle'
+ ? 0.5
+ : spec.style.textAnchor === 'start'
+ ? 0
+ : 1;
  textGraphic.anchor.y = 0.5;
 
  if (circular) {

src/core/utils/json-crush.test.ts

@@ -1,11 +1,11 @@
 // @ts-ignore
 import { JSONCrush, JSONUncrush } from './json-crush';
 import stringify from 'json-stringify-pretty-compact';
-import { EXAMPLE_TRACK_SEMANTIC_ZOOM } from '../../editor/example/semantic-zoom';
+import { EX_TRACK_SEMANTIC_ZOOM } from '../../editor/example/semantic-zoom';
 
 describe('JSONCrush', () => {
  it('Should not loss information', () => {
- const specStr = stringify({ tracks: [{ ...EXAMPLE_TRACK_SEMANTIC_ZOOM.cytoband }] });
+ const specStr = stringify({ tracks: [{ ...EX_TRACK_SEMANTIC_ZOOM.cytoband }] });
  expect(JSONUncrush(decodeURIComponent(JSONCrush(specStr)))).toEqual(specStr);
  });
 });