Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add placeholder icons for each track in breakpoint and alignment views #145

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: add placeholder icons for each track in breakpoint and alignment views #145

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
96 changes: 96 additions & 0 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -1009,6 +1104,7 @@ function App(props: RouteComponentProps) {
}}
>
{goslingComponent}
{trackTooltips}
{jumpButtonInfo ? (
<button
className="jump-to-bp-btn"
Expand Down
2 changes: 1 addition & 1 deletion src/alignment.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
5 changes: 3 additions & 2 deletions src/main-spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -279,6 +279,7 @@ function getOverviewSpec(option: SpecOption): View[] {
},
tracks: [
{
name: 'Ideogram',
id: `${id}-top-ideogram`,
alignment: 'overlay',
data: {
Expand Down
2 changes: 2 additions & 0 deletions src/mid-spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ export default function getMidView(option: SpecOption): View[] {
layout: 'linear',
tracks: [
{
title: '  Ideogram',
id: `${id}-mid-ideogram`,
alignment: 'overlay',
data: {
Expand Down Expand Up @@ -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:
Expand Down
2 changes: 1 addition & 1 deletion src/track/cnv.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
2 changes: 1 addition & 1 deletion src/track/coverage.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion src/track/driver.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
2 changes: 1 addition & 1 deletion src/track/gain.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
7 changes: 4 additions & 3 deletions src/track/indel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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: [
Expand Down
2 changes: 1 addition & 1 deletion src/track/loh.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
4 changes: 2 additions & 2 deletions src/track/mutation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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)' },
Expand Down
1 change: 1 addition & 0 deletions src/track/sv.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
Loading