feat: add placeholder icons for each track in breakpoint and alignmen…

…t views
hms-dbmi · Jun 12, 2024 · da23214 · da23214
1 parent d1c1969
commit da23214
Show file tree

Hide file tree

Showing 12 changed files with 114 additions and 13 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -533,6 +533,101 @@ function App(props: RouteComponentProps) {
         // !! Removed `demo` not to update twice since `drivers` are updated right after a demo update.
     }, [ready, xDomain, visPanelWidth, drivers, showOverview, showPutativeDriver, selectedSvId, breakpoints, svReads]);
 
+    const trackTooltips = useMemo(() => {
+        type Track =
+            | 'ideogram'
+            | 'gene'
+            | 'mutation'
+            | 'cnv'
+            | 'sv'
+            | 'indel'
+            | 'driver'
+            | 'gain'
+            | 'loh'
+            | 'coverage'
+            | 'sequence'
+            | 'alignment';
+        // calculate the offset by the Genome View
+        const genomeViewHeight = Math.min(600, visPanelWidth);
+        const gap = isMinimalMode ? 100 : 40;
+        const offset = genomeViewHeight + gap - 2;
+
+        // TODO: Not ideal to hard coded!
+        // The heights of each track
+        const TRACK_HEIGHTS: { height: number; type: Track }[] = [
+            { height: 50, type: 'ideogram' },
+            { height: 40, type: 'driver' },
+            { height: 60, type: 'gene' },
+            { height: 60, type: 'mutation' },
+            { height: 40, type: 'indel' },
+            { height: 60, type: 'cnv' },
+            { height: 20, type: 'gain' },
+            { height: 20, type: 'loh' },
+            { height: 250 + gap + 30, type: 'sv' },
+            { height: 80, type: 'coverage' },
+            { height: 40, type: 'sequence' },
+            { height: 500, type: 'alignment' }
+        ];
+
+        // Infer the tracks shown
+        const tracksShown: Track[] = ['driver', 'ideogram', 'gene', 'sv'];
+        if (demo.cnv) tracksShown.push('cnv', 'gain', 'loh');
+        if (demo.vcf && demo.vcfIndex) tracksShown.push('mutation');
+        if (demo.vcf2 && demo.vcf2Index) tracksShown.push('indel');
+        if (selectedSvId !== '') tracksShown.push('sequence');
+        if (demo.bam && demo.bai && selectedSvId !== '') tracksShown.push('coverage', 'alignment');
+        const HEIGHTS_OF_TRACKS_SHOWN = TRACK_HEIGHTS.filter(d => tracksShown.includes(d.type));
+
+        // Calculate the positions of the tracks
+        const trackPositions = tracksShown.flatMap((t, i) => {
+            const indexOfTrack = HEIGHTS_OF_TRACKS_SHOWN.findIndex(d => d.type === t);
+            const cumHeight = HEIGHTS_OF_TRACKS_SHOWN.slice(0, indexOfTrack).reduce((acc, d) => acc + d.height, 0);
+            const position = { y: offset + cumHeight, type: t };
+            if (t === 'alignment' || t === 'coverage' || t === 'sequence') {
+                return [position, { ...position, x: visPanelWidth / 2 + 10 }];
+            } else {
+                return [position];
+            }
+        });
+
+        return (
+            <div
+                style={{
+                    pointerEvents: 'none',
+                    width: '100%',
+                    height: '100%',
+                    position: 'relative',
+                    zIndex: 998
+                }}
+            >
+                {trackPositions?.map((d, i) => (
+                    <div
+                        key={i}
+                        style={{
+                            position: 'absolute',
+                            top: d.y + (d.type === 'ideogram' ? 32 : 0),
+                            left: ('x' in d && d.x ? d.x : 0) + 10
+                        }}
+                    >
+                        <span
+                            style={{
+                                color: 'white',
+                                background: 'black',
+                                opacity: 0.8,
+                                fontSize: 10,
+                                paddingLeft: '5px',
+                                paddingRight: '5px',
+                                borderRadius: '30px'
+                            }}
+                        >
+                            i
+                        </span>
+                    </div>
+                ))}
+            </div>
+        );
+    }, [demo, visPanelWidth, selectedSvId]);
+
     useLayoutEffect(() => {
         if (!gosRef.current) return;
 
@@ -1009,6 +1104,7 @@ function App(props: RouteComponentProps) {
                         }}
                     >
                         {goslingComponent}
+                        {trackTooltips}
                         {jumpButtonInfo ? (
                             <button
                                 className="jump-to-bp-btn"

diff --git a/src/alignment.ts b/src/alignment.ts
@@ -98,7 +98,7 @@ export function alignment(option: SpecOption, isLeft: boolean): GoslingSpec {
     return {
         id: `${id}-bottom-${isLeft ? 'left' : 'right'}-bam`,
         alignment: 'overlay',
-        title: 'Alignment',
+        title: '  Alignment',
         data: { type: 'bam', url: bam, indexUrl: bai, loadMates: false },
         mark: 'rect',
         experimental: {

diff --git a/src/main-spec.ts b/src/main-spec.ts
@@ -87,7 +87,7 @@ function generateSpec(opt: SpecOption): GoslingSpec {
                                           : []),
                                       {
                                           id: `${id}-bottom-left-sequence`,
-                                          title: 'Sequence',
+                                          title: '  Sequence',
                                           alignment: 'overlay',
                                           data: {
                                               url: 'https://server.gosling-lang.org/api/v1/tileset_info/?d=sequence-multivec',
@@ -180,7 +180,7 @@ function generateSpec(opt: SpecOption): GoslingSpec {
                                           : []),
                                       {
                                           id: `${id}-bottom-right-sequence`,
-                                          title: 'Sequence',
+                                          title: '  Sequence',
                                           alignment: 'overlay',
                                           data: {
                                               url: 'https://server.gosling-lang.org/api/v1/tileset_info/?d=sequence-multivec',
@@ -279,6 +279,7 @@ function getOverviewSpec(option: SpecOption): View[] {
             },
             tracks: [
                 {
+                    name: 'Ideogram',
                     id: `${id}-top-ideogram`,
                     alignment: 'overlay',
                     data: {

diff --git a/src/mid-spec.ts b/src/mid-spec.ts
@@ -29,6 +29,7 @@ export default function getMidView(option: SpecOption): View[] {
             layout: 'linear',
             tracks: [
                 {
+                    title: '  Ideogram',
                     id: `${id}-mid-ideogram`,
                     alignment: 'overlay',
                     data: {
@@ -84,6 +85,7 @@ export default function getMidView(option: SpecOption): View[] {
                 tracks.boundary('driver', 'mid'),
                 {
                     id: `${id}-mid-gene`,
+                    title: '  Gene Annotation',
                     template: 'gene',
                     data: {
                         url:

diff --git a/src/track/cnv.ts b/src/track/cnv.ts
@@ -12,7 +12,7 @@ export default function cnv(
     const [total_cn, major_cn, minor_cn] = cnFields;
     return {
         id: `${sampleId}-${mode}-cnv`,
-        title: mode === 'small' ? '' : 'Copy Number Variants',
+        title: mode === 'small' ? '' : '  Copy Number Variants',
         style: { background: '#FFFFFF' },
         data: {
             separator: '\t',

diff --git a/src/track/coverage.ts b/src/track/coverage.ts
@@ -5,7 +5,7 @@ export default function coverage(option: SpecOption, isLeft: boolean): Partial<S
     const { id, bam, bai, width, svReads, crossChr, bpIntervals } = option;
     return {
         id: `${id}-bottom-${isLeft ? 'left' : 'right'}-coverage`,
-        title: 'Coverage',
+        title: '  Coverage',
         data: {
             type: 'bam',
             url: bam,

diff --git a/src/track/driver.ts b/src/track/driver.ts
@@ -10,7 +10,7 @@ export default function driver(
 ): SingleTrack {
     return {
         id: `${sampleId}-${mode}-driver`,
-        title: 'Putative Driver',
+        title: '  Putative Driver',
         // TODO: click events are not supported for layered tracks
         // experimental: {
         //     mouseEvents: {

diff --git a/src/track/gain.ts b/src/track/gain.ts
@@ -12,7 +12,7 @@ export default function gain(
     const [total_cn, major_cn, minor_cn] = cnFields;
     return {
         id: `${sampleId}-${mode}-gain`,
-        title: mode === 'small' ? '' : 'Gain',
+        title: mode === 'small' ? '' : '  Gain',
         style: { background: '#F6F6F6' },
         data: {
             separator: '\t',

diff --git a/src/track/indel.ts b/src/track/indel.ts
@@ -11,7 +11,8 @@ export default function indel(
 ): OverlaidTracks {
     return {
         id: `${sampleId}-${mode}-indel`,
-        style: { background: '#F6F6F6' },
+        title: '  Indel',
+        style: { background: '#F6F6F6', inlineLegend: true },
         data: {
             url,
             indexUrl,
@@ -89,13 +90,13 @@ export default function indel(
         color: {
             field: 'MUTTYPE',
             type: 'nominal',
-            legend: false,
+            legend: true,
             domain: ['Insertion', 'Deletion']
         },
         row: {
             field: 'MUTTYPE',
             type: 'nominal',
-            legend: true,
+            legend: false,
             domain: ['Insertion', 'Deletion']
         },
         tooltip: [

diff --git a/src/track/loh.ts b/src/track/loh.ts
@@ -12,7 +12,7 @@ export default function loh(
     const [total_cn, major_cn, minor_cn] = cnFields;
     return {
         id: `${sampleId}-${mode}-loh`,
-        title: mode !== 'small' ? 'Loss of Heterozygosity (LOH)' : '',
+        title: mode !== 'small' ? '  Loss of Heterozygosity (LOH)' : '',
         style: { background: '#F6F6F6' },
         data: {
             separator: '\t',

diff --git a/src/track/mutation.ts b/src/track/mutation.ts
@@ -11,7 +11,7 @@ export default function mutation(
 ): SingleTrack {
     return {
         id: `${sampleId}-${mode}-mutation`,
-        title: 'Point Mutation',
+        title: '  Point Mutation',
         style: { background: '#FFFFFF', inlineLegend: true },
         data: {
             type: 'vcf',
@@ -23,7 +23,7 @@ export default function mutation(
         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: 'left', range: [10, height - 10] },
+        y: { field: 'DISTPREVLOGE', type: 'quantitative', axis: 'right', range: [10, height - 10] },
         opacity: { value: 0.9 },
         tooltip: [
             { field: 'DISTPREV', type: 'nominal', format: 's1', alt: 'Distance To Previous Mutation (BP)' },

diff --git a/src/track/sv.ts b/src/track/sv.ts
@@ -89,6 +89,7 @@ export default function sv(
     const svs = [...defaults.color.svclass.domain];
     return {
         id: `${sampleId}-${mode}-sv`,
+        title: mode === 'mid' ? '  Structural Variants' : '',
         alignment: 'overlay',
         experimental: {
             mouseEvents: {