Skip to content

Commit

Permalink
-fix: re-run bootstrap related JS when Sv selected
Browse files Browse the repository at this point in the history 
-feat: update text, reformat
  • Loading branch information
@crfmc
crfmc committed Jul 30, 2024
1 parent 57470cc commit ec87244
Show file tree
Hide file tree
Showing 3 changed files with 30 additions and 18 deletions.
3 changes: 3 additions & 0 deletions src/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1245,6 +1245,9 @@ a:hover {
font-weight: 500;
color: #469c77;
}
span.text-green-alignment {
color: #5a9c7c;
}
span.text-gray {
color: #757575;
}
Expand Down
11 changes: 7 additions & 4 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -323,10 +323,6 @@ function App(props: RouteComponentProps) {
}, 500)
);

// Enable Bootstrap popovers for track tooltips
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl));

// Lower opacity of legend image as it leaves viewport
if (isMinimalMode) {
const legendElement = document.querySelector<HTMLElement>('.genome-view-legend');
Expand All @@ -345,6 +341,13 @@ function App(props: RouteComponentProps) {
}
}, []);

// Enable Bootstrap popovers for track tooltips, update for selected SV tracks
useEffect(() => {
console.log('update popovers');
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl));
}, [selectedSvId]);

const getThumbnail = (d: SampleType) => {
return (
d.thumbnail ||
Expand Down
34 changes: 20 additions & 14 deletions src/ui/trackData.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -385,26 +385,30 @@ export const getTrackDocData = (
<div class='section interpretation'>
<h3>Interpretation</h3>
<hr class="header"/>
<div class="block text-only">
<p>The sequencing coverage track quantifies the number of sequencing reads covering each position.</p>
</div>
<hr />
<div class="block with-image">
<img src="${coverage_interpretation_1}" alt="" />
<img src="${coverage_interpretation_1}" alt="Coverage track." />
<div class="text">
<p>Sequencing coverage track quantifies the number of sequencing reads covering each position.</p>
<p>A vertical line denotes the breakpoint (if selected).</p>
<p><b>Black vertical dashed line</b> - denotes the selected breakpoint.</p>
</div>
</div>
<hr />
<div class="block with-image">
<img src="${coverage_interpretation_2}" alt="" />
<img src="${coverage_interpretation_2}" alt="Coverage, Sequence, and Alignment tracks." />
<div class="text">
<p>Sequencing coverage is derived from the data on sequencing reads aligning to each position.</p>
<p>Black reads (those parts of reads that were split) do not contribute to the coverage sum.</p>
<p><b>Black reads</b> - (those parts of reads that were split) do not contribute to the coverage sum.</p>
</div>
</div>
</div>
<div class='section interactions'>
<h3>Interactions</h3>
<hr class="header" />
<div class="block with-image">
<img src="${coverage_interpretation_2}" alt="" />
<img src="${coverage_interpretation_2}" alt="Coverage, Sequence, and Alignment tracks." />
<div class="text">
<p><b>Click</b> - on an SV to show its breakpoints in the read view.</p>
</div>
Expand All @@ -423,9 +427,9 @@ export const getTrackDocData = (
<h3>Interpretation</h3>
<hr class="header"/>
<div class="block with-image">
<img src="${sequence_interpretation_1}" alt="" />
<img src="${sequence_interpretation_1}" alt="Color legend for the Sequence track." />
<div class="text">
<p>Colors represent DNA base-pairs in human reference genome.</p>
<p><b>Colors</b> - represent DNA base-pairs in human reference genome.</p>
</div>
</div>
</div>
Expand All @@ -442,30 +446,32 @@ export const getTrackDocData = (
<h3>Interpretation</h3>
<hr class="header"/>
<div class="block with-image">
<img src="${alignment_interpretation_1}" alt="" />
<img src="${alignment_interpretation_1}" alt="Coverage, Sequence, and Alignment tracks." />
<div class="text">
<p><span class="text-gray"><b>Gray rectangles</b></span> - denote normally-mapping reads.</p>
<p><span><b>Black rectangles</b></span> - denote split reads, used as evidence for structural variants.</p>
</div>
</div>
<hr />
<div class="block with-image">
<img src="${alignment_interpretation_2}" alt="" />
<img src="${alignment_interpretation_2}" alt="Green read colors in the Alignment track." />
<div class="text">
<p>Other read colors (here, green) denote aberrantly mapping reads, which are also used as evidence for structural variants <a href="https://chromoscope.bio/visualizations/breakpoint-view">(see more info)</a>.</p>
<p>Other read colors (e.g. <span class="text-green"><b>green</b></span>) denote aberrantly mapping reads, which are also used as evidence for structural variants <a href="https://chromoscope.bio/visualizations/breakpoint-view">(see more info)</a>.</p>
</div>
</div>
<hr />
<div class="block with-image">
<img src="${alignment_interpretation_3}" alt="" />
<img src="${alignment_interpretation_3}" alt="Black vertical dashed line in the Alignment track." />
<div class="text">
<p>Vertical dashed line denotes a SV breakpoint.</p>
<p><b>Black vertical dashed line</b> - denotes a SV breakpoint.</p>
</div>
</div>
</div>
<div class='section interactions'>
<h3>Interactions</h3>
<hr class="header" />
<div class="block with-image">
<img src="${alignment_interactions_1}" alt="" />
<img src="${alignment_interactions_1}" alt="ALignment track details pop up." />
<div class="text">
<p><b>Hover</b> - over a sequencing read to see more details.</p>
</div>
Expand Down

0 comments on commit ec87244

Please sign in to comment.