Skip to content

Commit

Permalink
-feat: remove duplicated tooltips
Browse files Browse the repository at this point in the history 
-chore: update coverage image and text
-feat: add navigation buttons to normal mode
  • Loading branch information
@crfmc
crfmc committed Aug 5, 2024
1 parent ec87244 commit 23537dd
Show file tree
Hide file tree
Showing 4 changed files with 128 additions and 144 deletions.
113 changes: 59 additions & 54 deletions src/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -854,6 +854,65 @@ a:hover {
cursor: pointer;
}

.navigation-buttons {
box-sizing: border-box;
position: fixed;
z-index: 998;
display: flex;
flex-direction: column;
top: 63px;
left: 63px;
}

.navigation-button-container {
display: flex;
height: auto;
padding: 0px;
}
.navigation-button-container.split {
display: flex;
height: auto;
padding: 0px;

.split-left {
border-radius: 8px 0px 0px 8px;
border-right: none;
}
.split-right {
width: 40px;
border-radius: 0px 8px 8px 0px;
border-left: none;

.button.question-mark {
width: 15px;
margin: auto;
color: black;
}
}
}
.navigation-button {
box-sizing: border-box !important;
background-color: #f6f6f6;
cursor: pointer;
font-size: 1rem;
font-family: Inter;
height: 40px;
width: 160px;
padding: 2px 10px;
border: 1px solid #d3d3d3;
}

.navigation-button:focus-visible {
outline-offset: -1px;
}

.navigation-button:hover:not(:disabled) {
background-color: #ebebeb;
}
.navigation-button:active:not(:disabled) {
background-color: #e6e4e4;
}

/* Minimal Mode styles */
.minimal_mode {
.gosling-panel {
Expand All @@ -867,64 +926,10 @@ a:hover {
}

.navigation-buttons {
box-sizing: border-box;
position: fixed;
z-index: 997;
display: flex;
flex-direction: column;
top: 3px;
left: 3px;
}

.navigation-button-container {
display: flex;
height: auto;
padding: 0px;
}
.navigation-button-container.split {
display: flex;
height: auto;
padding: 0px;

.split-left {
border-radius: 8px 0px 0px 8px;
border-right: none;
}
.split-right {
width: 40px;
border-radius: 0px 8px 8px 0px;
border-left: none;

.button.question-mark {
width: 15px;
margin: auto;
color: black;
}
}
}
.navigation-button {
box-sizing: border-box !important;
background-color: #f6f6f6;
cursor: pointer;
font-size: 1rem;
font-family: Inter;
height: 40px;
width: 160px;
padding: 2px 10px;
border: 1px solid #d3d3d3;
}

.navigation-button:focus-visible {
outline-offset: -1px;
}

.navigation-button:hover:not(:disabled) {
background-color: #ebebeb;
}
.navigation-button:active:not(:disabled) {
background-color: #e6e4e4;
}

/* Force scrollbar to show */
::-webkit-scrollbar {
-webkit-appearance: none;
Expand Down
146 changes: 67 additions & 79 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ import { VariantViewModal } from './ui/VariantViewModal';
import 'bootstrap/dist/css/bootstrap.min.css';
import * as bootstrap from 'bootstrap/dist/js/bootstrap.bundle.min';

import { Track, getTrackDocData } from './ui/trackData.js';
import { Track, getTrackDocData } from './ui/getTrackDocData.js';

const db = new Database();
const log = new BrowserDatabase();
Expand Down Expand Up @@ -565,7 +565,7 @@ function App(props: RouteComponentProps) {
const HEIGHTS_OF_TRACKS_SHOWN = TRACK_DATA.filter(d => tracksShown.includes(d.type));

// Calculate the positions of the tracks
const trackPositions = tracksShown.flatMap((t, i) => {
const trackPositions = tracksShown.map((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 = {
Expand All @@ -574,11 +574,7 @@ function App(props: RouteComponentProps) {
title: HEIGHTS_OF_TRACKS_SHOWN[indexOfTrack].title,
popover_content: HEIGHTS_OF_TRACKS_SHOWN[indexOfTrack].popover_content
};
if (t === 'alignment' || t === 'coverage' || t === 'sequence') {
return [position, { ...position, x: visPanelWidth / 2 + 10 }];
} else {
return [position];
}
return position;
});

return (
Expand Down Expand Up @@ -608,8 +604,8 @@ function App(props: RouteComponentProps) {
data-bs-content={d.popover_content}
style={{
position: 'absolute',
top: d.y + (d.type === 'ideogram' ? 32 : 0),
left: ('x' in d && d.x ? d.x : 0) + 10
top: d.y + (d.type === 'ideogram' ? 32 : 0) - 1,
left: 10
}}
>
<svg className="button question-mark" viewBox={ICONS.QUESTION_CIRCLE_FILL.viewBox}>
Expand Down Expand Up @@ -1139,77 +1135,69 @@ function App(props: RouteComponentProps) {
}}
/>
)}
{isMinimalMode ? (
<div className="navigation-buttons">
<div className="navigation-button-container split navigation-button-genome">
<button
className="navigation-button split-left"
tabIndex={1}
onClick={() => {
setTimeout(
() =>
document
.getElementById('gosling-panel')
?.scrollTo({ top: 0, behavior: 'smooth' }),
0
);
}}
>
Genome View
</button>
<button
className="navigation-button split-right"
tabIndex={1}
data-bs-toggle="modal"
data-bs-target="#genome-view-modal"
>
<svg
className="button question-mark"
viewBox={ICONS.QUESTION_CIRCLE_FILL.viewBox}
>
<title>Question Mark</title>
{ICONS.QUESTION_CIRCLE_FILL.path.map(p => (
<path fill="currentColor" key={p} d={p} />
))}
</svg>
</button>
</div>
<div className="navigation-button-container split navigation-button-variant">
<button
className="navigation-button split-left"
tabIndex={1}
onClick={() => {
setTimeout(() => {
document.getElementById('variant-view')?.scrollIntoView({
block: 'start',
inline: 'nearest',
behavior: 'smooth'
}),
0;
});
}}
>
Variant View
</button>
<button
className="navigation-button split-right"
tabIndex={1}
data-bs-toggle="modal"
data-bs-target="#variant-view-modal"
>
<svg
className="button question-mark"
viewBox={ICONS.QUESTION_CIRCLE_FILL.viewBox}
>
<title>Question Mark</title>
{ICONS.QUESTION_CIRCLE_FILL.path.map(p => (
<path fill="currentColor" key={p} d={p} />
))}
</svg>
</button>
</div>
<div className="navigation-buttons">
<div className="navigation-button-container split navigation-button-genome">
<button
className="navigation-button split-left"
tabIndex={1}
onClick={() => {
setTimeout(
() =>
document
.getElementById('gosling-panel')
?.scrollTo({ top: 0, behavior: 'smooth' }),
0
);
}}
>
Genome View
</button>
<button
className="navigation-button split-right"
tabIndex={1}
data-bs-toggle="modal"
data-bs-target="#genome-view-modal"
>
<svg className="button question-mark" viewBox={ICONS.QUESTION_CIRCLE_FILL.viewBox}>
<title>Question Mark</title>
{ICONS.QUESTION_CIRCLE_FILL.path.map(p => (
<path fill="currentColor" key={p} d={p} />
))}
</svg>
</button>
</div>
) : null}
<div className="navigation-button-container split navigation-button-variant">
<button
className="navigation-button split-left"
tabIndex={1}
onClick={() => {
setTimeout(() => {
document.getElementById('variant-view')?.scrollIntoView({
block: 'start',
inline: 'nearest',
behavior: 'smooth'
}),
0;
});
}}
>
Variant View
</button>
<button
className="navigation-button split-right"
tabIndex={1}
data-bs-toggle="modal"
data-bs-target="#variant-view-modal"
>
<svg className="button question-mark" viewBox={ICONS.QUESTION_CIRCLE_FILL.viewBox}>
<title>Question Mark</title>
{ICONS.QUESTION_CIRCLE_FILL.path.map(p => (
<path fill="currentColor" key={p} d={p} />
))}
</svg>
</button>
</div>
</div>
{
// External links and export buttons
isMinimalMode ? (
Expand Down
Binary file modified src/script/img/popover-images/coverage/interpretation_1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 2 additions & 11 deletions src/ui/trackData.ts → src/ui/getTrackDocData.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -392,28 +392,19 @@ export const getTrackDocData = (
<div class="block with-image">
<img src="${coverage_interpretation_1}" alt="Coverage track." />
<div class="text">
<p><b>Black vertical dashed line</b> - denotes the selected breakpoint.</p>
<p><b>Black vertical dashed line</b> - denotes the selected breakpoint (if selected).</p>
</div>
</div>
<hr />
<div class="block with-image">
<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>
<br />
<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="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>
</div>
</div>
</div>
`
},
Expand Down

0 comments on commit 23537dd

Please sign in to comment.