feat: add tooltip to provide info about tracks

hms-dbmi · Apr 23, 2024 · fd26032 · fd26032
1 parent 83c293a
commit fd26032
Show file tree

Hide file tree

Showing 12 changed files with 88 additions and 5,728 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
         "@types/react-dom": "^17.0.11",
         "@types/react-router-dom": "^5.2.0",
         "buffer": "^6.0.3",
-        "gosling.js": "^0.11.0",
+        "gosling.js": "^0.16.0",
         "idb": "^7.0.2",
         "lodash": "^4.17.21",
         "path": "^0.12.7",

diff --git a/src/App.tsx b/src/App.tsx
@@ -110,6 +110,11 @@ function App(props: RouteComponentProps) {
     const mousePos = useRef({ x: -100, y: -100 });
     const prevJumpId = useRef('');
 
+    /** Types of tracks supported in Chromoscope */
+    type Track = 'ideogram' | 'gene' | 'mutation' | 'cnv' | 'sv' | 'indel' | 'driver' | 'gain' | 'loh';
+    /** Position of tracks to show tooltip information */
+    const [tracksPosition, setTracksPosition] = useState<{ y: number; type: Track }[]>();
+
     // SV data
     const leftReads = useRef<{ [k: string]: number | string }[]>([]);
     const rightReads = useRef<{ [k: string]: number | string }[]>([]);
@@ -500,11 +505,57 @@ function App(props: RouteComponentProps) {
                 margin={0}
                 experimental={{ reactive: true }}
                 theme={THEME}
+                compiled={() => {
+                    // This is to show tooltip information for each track
+                    const tracksInBreakpointView = gosRef.current.api
+                        .getTracks()
+                        .filter(d => d.id.indexOf('-mid-') !== -1 && d.id.indexOf('boundary') === -1);
+                    const newTracksPosition = tracksInBreakpointView.map(d => ({
+                        y: d.shape.y,
+                        type: d.id.split('-mid-')[1]
+                    }));
+                    setTracksPosition(newTracksPosition);
+                }}
             />
         );
         // !! 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(() => {
+        return (
+            <div
+                style={{
+                    pointerEvents: 'none',
+                    width: '100%',
+                    height: '100%',
+                    position: 'relative',
+                    zIndex: 998
+                }}
+            >
+                {tracksPosition?.map((d, i) => (
+                    <div
+                        key={i}
+                        style={{ position: 'absolute', top: d.y - 1 + (d.type === 'ideogram' ? 30 : 0), left: 10 }}
+                    >
+                        <span
+                            style={{
+                                color: 'white',
+                                background: 'black',
+                                opacity: 0.8,
+                                fontSize: 10,
+                                paddingLeft: '5px',
+                                paddingRight: '5px',
+                                borderRadius: '30px'
+                            }}
+                        >
+                            i
+                        </span>
+                    </div>
+                ))}
+            </div>
+        );
+    }, [tracksPosition]);
+
     useLayoutEffect(() => {
         if (!gosRef.current) return;
 
@@ -988,6 +1039,7 @@ function App(props: RouteComponentProps) {
                                 pointerEvents: interactiveMode ? 'none' : 'auto'
                             }}
                         />
+                        {trackTooltips}
                         <div
                             style={{
                                 pointerEvents: 'none',

diff --git a/src/mid-spec.ts b/src/mid-spec.ts
@@ -31,6 +31,7 @@ export default function getMidView(option: SpecOption): View[] {
                 {
                     id: `${id}-mid-ideogram`,
                     alignment: 'overlay',
+                    title: '  Ideogram',
                     data: {
                         url:
                             assembly === 'hg38'
@@ -85,11 +86,11 @@ export default function getMidView(option: SpecOption): View[] {
                 {
                     id: `${id}-mid-gene`,
                     template: 'gene',
+                    title: '  Gene Annotation',
                     data: {
                         url:
                             assembly === 'hg19'
-                                ? // TODO: change to gosling's one
-                                  'https://server.gosling-lang.org/api/v1/tileset_info/?d=gene-annotation-hg19'
+                                ? 'https://server.gosling-lang.org/api/v1/tileset_info/?d=gene-annotation-hg19'
                                 : 'https://server.gosling-lang.org/api/v1/tileset_info/?d=gene-annotation',
                         type: 'beddb',
                         genomicFields: [

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',
@@ -27,7 +27,7 @@ export default function cnv(
         alignment: 'overlay',
         tracks: [
             {
-                y: { field: total_cn, type: 'quantitative', axis: 'right', grid: true, range: [0 + 10, height - 10] },
+                y: { field: total_cn, type: 'quantitative', axis: 'left', grid: true, range: [0 + 10, height - 10] },
                 color: { value: '#808080' }
             }
             // {

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',

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: {