Highlighting clinical-related info in Gosling

[sehilyi]

Refer to this online diff that shows what I changed in the Gosling spec to test highlighting SV and point mutations:

https://www.diffchecker.com/QhkJWny9/

You can find a demo visualization of the updated Spec here.

Highlighting a Selected SV

There already is a React State that stores the selected SV ID (code):

const [selectedSvId, setSelectedSvId] = useState<string>('');

It points to a value of the sv_id column in a BEDPE file (doc).

If we just set a new value (setSelectedSvId('new-id')), Chromoscope will display the given SV with a thicker edge, as implemented in track/sv.ts:

...(selected ? { opacity: { value: 1 }, strokeWidth: { value: 2 } } : {}), // 2px for selected SV, others are 1px

Highlighting a Selected Point Mutation

You will need to create a React State that stores the selected point mutation. Since our data for point mutations does not have any IDs (like sv_id for SVs), we will need to have that information in the data. In my prototype, I used an (absolute) position of a point mutation (i.e., a numeric position without chr names) to select a specific point mutation in the Gosling spec:

{
  "field": "POS",
  "type": "filter",
  "oneOf": [
    117997039 // select a mutation with this exact position
  ]
}

To highlight the point mutation, small changes are needed in track/mutation.ts. These changes basically select a specific mutation and overlay a larger circle behind the original one.

+  alignment: 'overlay',
-  dataTransform: [{ field: 'DISTPREV', type: 'filter', oneOf: [0], not: true }],
+ tracks: [
+ {  dataTransform: [{ field: 'DISTPREV', type: 'filter', oneOf: [0], not: true }] },
+ {  
+ dataTransform: [{ field: 'POS', type: 'filter', oneOf: [117997039] }], // 'POS' (data column) and 117997039 (value) select a specific point mutation
+ "stroke": { "value": "#63BAEC" }, // determines how to draw the background circle underneath the original circle
+ "strokeWidth": { "value": 6 },
+ "opacity": { "value": 0.3 }
+ },
  mark: 'point',
  x: { field: 'POS', type: 'genomic' },
  color: { field: 'SUBTYPE', type: 'nominal', legend: true, domain: ['C>A', 'C>G', 'C>T', 'T>A', 'T>C', 'T>G'] },
  y: { field: 'DISTPREVLOGE', type: 'quantitative', axis: 'right', range: [10, height - 10] },
  opacity: { value: 0.9 },

Highlighting Break Points of a Selected SV

We want to draw dashed vertical lines that represent the breakpoints of a selected SV across linear tracks (specifically, genes, indels, CNVs, Point Mutations, Gain, and LOH tracks). This can be done by adding rule tracks to those tracks.

Similar to how we add chromosome "boundaries" (i.e., vertical grey lines that represent the ends of chromosomes)

chromoscope/src/mid-spec.ts

Lines 132 to 143 in 01f6807

	...(!vcf
	? []
	: [tracks.mutation(id, vcf, vcfIndex, width, 60, 'mid'), tracks.boundary('mutation', 'mid')]),
	...(!vcf2
	? []
	: [tracks.indel(id, vcf2, vcf2Index, width, 40, 'mid'), tracks.boundary('indel', 'mid')]),
	tracks.cnv(id, cnv, width, 60, 'mid', cnFields),
	tracks.boundary('cnv', 'mid'),
	tracks.gain(id, cnv, width, 20, 'mid', cnFields),
	tracks.boundary('gain', 'mid'),
	tracks.loh(id, cnv, width, 20, 'mid', cnFields),
	tracks.boundary('loh', 'mid'),

chromoscope/src/track/boundary.ts

Lines 6 to 44 in 01f6807

	export default function boundary(parent: string, mode: TrackMode): Partial<SingleTrack> {
	return {
	id: `${parent}-${mode}-boundary`,
	data: {
	type: 'json',
	chromosomeField: 'c',
	genomicFields: ['p'],
	values: [
	{ c: 'chr2', p: 0 },
	{ c: 'chr3', p: 0 },
	{ c: 'chr4', p: 0 },
	{ c: 'chr5', p: 0 },
	{ c: 'chr6', p: 0 },
	{ c: 'chr7', p: 0 },
	{ c: 'chr8', p: 0 },
	{ c: 'chr9', p: 0 },
	{ c: 'chr10', p: 0 },
	{ c: 'chr11', p: 0 },
	{ c: 'chr12', p: 0 },
	{ c: 'chr13', p: 0 },
	{ c: 'chr14', p: 0 },
	{ c: 'chr15', p: 0 },
	{ c: 'chr16', p: 0 },
	{ c: 'chr17', p: 0 },
	{ c: 'chr18', p: 0 },
	{ c: 'chr19', p: 0 },
	{ c: 'chr20', p: 0 },
	{ c: 'chr21', p: 0 },
	{ c: 'chrX', p: 0 },
	{ c: 'chrY', p: 0 }
	]
	},
	mark: mode === 'mid' ? 'rule' : 'rect',
	x: { field: 'p', type: 'genomic' },
	color: { value: hex },
	opacity: { value: 0.5 },
	overlayOnPreviousTrack: true
	};
	}

You can create a function that returns the spec to draw dashed vertical line for the breakpoints.

export default function breakpoints(parent: string, mode: TrackMode, breakpoints: [number, number]): Partial<SingleTrack> {
    return {
        id: `${parent}-${mode}-boundary`,
        data: {
            type: 'json',
            chromosomeField: 'c',
            genomicFields: ['p'],
            values: [
                { c: 'chr1', p: breakpoints[0] },
                { c: 'chr1', p: breakpoints[1] }
            ]
        },
        "mark": "rule",
        "x": { "field": "p", "type": "genomic" },
        "color": { "value": "black" },
        "opacity": { "value": 0.5 },
        "style": { "dashed": [2, 2] },
        "overlayOnPreviousTrack": true
    };
}

And call this function right after another function that draws a track that you want to draw dashed lines. E.g., to draw vertical lines on a CNV track,

tracks.cnv(id, cnv, width, 60, 'mid', cnFields), 
tracks.boundary('cnv', 'mid'), 
tracks.breakpoints('cnv', 'mid', breakpoints), 

We have a React State that stores the breakpoint positions

chromoscope/src/App.tsx

Line 131 in 01f6807

const [breakpoints, setBreakpoints] = useState<[number, number, number, number]>([1, 100, 1, 100]);

So, we can probably use this state as the parameter of the tracks.breakpoints function to know where to draw vertical lines.