Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 23537dd

Browse files
crfmccrfmc
committedAug 5, 2024·
-feat: remove duplicated tooltips
-chore: update coverage image and text -feat: add navigation buttons to normal mode
1 parent ec87244 commit 23537dd

File tree

4 files changed

+128
-144
lines changed

4 files changed

+128
-144
lines changed
 

‎src/App.css

+59-54
Original file line numberDiff line numberDiff line change
@@ -854,6 +854,65 @@ a:hover {
854854
cursor: pointer;
855855
}
856856

857+
.navigation-buttons {
858+
box-sizing: border-box;
859+
position: fixed;
860+
z-index: 998;
861+
display: flex;
862+
flex-direction: column;
863+
top: 63px;
864+
left: 63px;
865+
}
866+
867+
.navigation-button-container {
868+
display: flex;
869+
height: auto;
870+
padding: 0px;
871+
}
872+
.navigation-button-container.split {
873+
display: flex;
874+
height: auto;
875+
padding: 0px;
876+
877+
.split-left {
878+
border-radius: 8px 0px 0px 8px;
879+
border-right: none;
880+
}
881+
.split-right {
882+
width: 40px;
883+
border-radius: 0px 8px 8px 0px;
884+
border-left: none;
885+
886+
.button.question-mark {
887+
width: 15px;
888+
margin: auto;
889+
color: black;
890+
}
891+
}
892+
}
893+
.navigation-button {
894+
box-sizing: border-box !important;
895+
background-color: #f6f6f6;
896+
cursor: pointer;
897+
font-size: 1rem;
898+
font-family: Inter;
899+
height: 40px;
900+
width: 160px;
901+
padding: 2px 10px;
902+
border: 1px solid #d3d3d3;
903+
}
904+
905+
.navigation-button:focus-visible {
906+
outline-offset: -1px;
907+
}
908+
909+
.navigation-button:hover:not(:disabled) {
910+
background-color: #ebebeb;
911+
}
912+
.navigation-button:active:not(:disabled) {
913+
background-color: #e6e4e4;
914+
}
915+
857916
/* Minimal Mode styles */
858917
.minimal_mode {
859918
.gosling-panel {
@@ -867,64 +926,10 @@ a:hover {
867926
}
868927

869928
.navigation-buttons {
870-
box-sizing: border-box;
871-
position: fixed;
872-
z-index: 997;
873-
display: flex;
874-
flex-direction: column;
875929
top: 3px;
876930
left: 3px;
877931
}
878932

879-
.navigation-button-container {
880-
display: flex;
881-
height: auto;
882-
padding: 0px;
883-
}
884-
.navigation-button-container.split {
885-
display: flex;
886-
height: auto;
887-
padding: 0px;
888-
889-
.split-left {
890-
border-radius: 8px 0px 0px 8px;
891-
border-right: none;
892-
}
893-
.split-right {
894-
width: 40px;
895-
border-radius: 0px 8px 8px 0px;
896-
border-left: none;
897-
898-
.button.question-mark {
899-
width: 15px;
900-
margin: auto;
901-
color: black;
902-
}
903-
}
904-
}
905-
.navigation-button {
906-
box-sizing: border-box !important;
907-
background-color: #f6f6f6;
908-
cursor: pointer;
909-
font-size: 1rem;
910-
font-family: Inter;
911-
height: 40px;
912-
width: 160px;
913-
padding: 2px 10px;
914-
border: 1px solid #d3d3d3;
915-
}
916-
917-
.navigation-button:focus-visible {
918-
outline-offset: -1px;
919-
}
920-
921-
.navigation-button:hover:not(:disabled) {
922-
background-color: #ebebeb;
923-
}
924-
.navigation-button:active:not(:disabled) {
925-
background-color: #e6e4e4;
926-
}
927-
928933
/* Force scrollbar to show */
929934
::-webkit-scrollbar {
930935
-webkit-appearance: none;

‎src/App.tsx

+67-79
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ import { VariantViewModal } from './ui/VariantViewModal';
2929
import 'bootstrap/dist/css/bootstrap.min.css';
3030
import * as bootstrap from 'bootstrap/dist/js/bootstrap.bundle.min';
3131

32-
import { Track, getTrackDocData } from './ui/trackData.js';
32+
import { Track, getTrackDocData } from './ui/getTrackDocData.js';
3333

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

567567
// Calculate the positions of the tracks
568-
const trackPositions = tracksShown.flatMap((t, i) => {
568+
const trackPositions = tracksShown.map((t, i) => {
569569
const indexOfTrack = HEIGHTS_OF_TRACKS_SHOWN.findIndex(d => d.type === t);
570570
const cumHeight = HEIGHTS_OF_TRACKS_SHOWN.slice(0, indexOfTrack).reduce((acc, d) => acc + d.height, 0);
571571
const position = {
@@ -574,11 +574,7 @@ function App(props: RouteComponentProps) {
574574
title: HEIGHTS_OF_TRACKS_SHOWN[indexOfTrack].title,
575575
popover_content: HEIGHTS_OF_TRACKS_SHOWN[indexOfTrack].popover_content
576576
};
577-
if (t === 'alignment' || t === 'coverage' || t === 'sequence') {
578-
return [position, { ...position, x: visPanelWidth / 2 + 10 }];
579-
} else {
580-
return [position];
581-
}
577+
return position;
582578
});
583579

584580
return (
@@ -608,8 +604,8 @@ function App(props: RouteComponentProps) {
608604
data-bs-content={d.popover_content}
609605
style={{
610606
position: 'absolute',
611-
top: d.y + (d.type === 'ideogram' ? 32 : 0),
612-
left: ('x' in d && d.x ? d.x : 0) + 10
607+
top: d.y + (d.type === 'ideogram' ? 32 : 0) - 1,
608+
left: 10
613609
}}
614610
>
615611
<svg className="button question-mark" viewBox={ICONS.QUESTION_CIRCLE_FILL.viewBox}>
@@ -1139,77 +1135,69 @@ function App(props: RouteComponentProps) {
11391135
}}
11401136
/>
11411137
)}
1142-
{isMinimalMode ? (
1143-
<div className="navigation-buttons">
1144-
<div className="navigation-button-container split navigation-button-genome">
1145-
<button
1146-
className="navigation-button split-left"
1147-
tabIndex={1}
1148-
onClick={() => {
1149-
setTimeout(
1150-
() =>
1151-
document
1152-
.getElementById('gosling-panel')
1153-
?.scrollTo({ top: 0, behavior: 'smooth' }),
1154-
0
1155-
);
1156-
}}
1157-
>
1158-
Genome View
1159-
</button>
1160-
<button
1161-
className="navigation-button split-right"
1162-
tabIndex={1}
1163-
data-bs-toggle="modal"
1164-
data-bs-target="#genome-view-modal"
1165-
>
1166-
<svg
1167-
className="button question-mark"
1168-
viewBox={ICONS.QUESTION_CIRCLE_FILL.viewBox}
1169-
>
1170-
<title>Question Mark</title>
1171-
{ICONS.QUESTION_CIRCLE_FILL.path.map(p => (
1172-
<path fill="currentColor" key={p} d={p} />
1173-
))}
1174-
</svg>
1175-
</button>
1176-
</div>
1177-
<div className="navigation-button-container split navigation-button-variant">
1178-
<button
1179-
className="navigation-button split-left"
1180-
tabIndex={1}
1181-
onClick={() => {
1182-
setTimeout(() => {
1183-
document.getElementById('variant-view')?.scrollIntoView({
1184-
block: 'start',
1185-
inline: 'nearest',
1186-
behavior: 'smooth'
1187-
}),
1188-
0;
1189-
});
1190-
}}
1191-
>
1192-
Variant View
1193-
</button>
1194-
<button
1195-
className="navigation-button split-right"
1196-
tabIndex={1}
1197-
data-bs-toggle="modal"
1198-
data-bs-target="#variant-view-modal"
1199-
>
1200-
<svg
1201-
className="button question-mark"
1202-
viewBox={ICONS.QUESTION_CIRCLE_FILL.viewBox}
1203-
>
1204-
<title>Question Mark</title>
1205-
{ICONS.QUESTION_CIRCLE_FILL.path.map(p => (
1206-
<path fill="currentColor" key={p} d={p} />
1207-
))}
1208-
</svg>
1209-
</button>
1210-
</div>
1138+
<div className="navigation-buttons">
1139+
<div className="navigation-button-container split navigation-button-genome">
1140+
<button
1141+
className="navigation-button split-left"
1142+
tabIndex={1}
1143+
onClick={() => {
1144+
setTimeout(
1145+
() =>
1146+
document
1147+
.getElementById('gosling-panel')
1148+
?.scrollTo({ top: 0, behavior: 'smooth' }),
1149+
0
1150+
);
1151+
}}
1152+
>
1153+
Genome View
1154+
</button>
1155+
<button
1156+
className="navigation-button split-right"
1157+
tabIndex={1}
1158+
data-bs-toggle="modal"
1159+
data-bs-target="#genome-view-modal"
1160+
>
1161+
<svg className="button question-mark" viewBox={ICONS.QUESTION_CIRCLE_FILL.viewBox}>
1162+
<title>Question Mark</title>
1163+
{ICONS.QUESTION_CIRCLE_FILL.path.map(p => (
1164+
<path fill="currentColor" key={p} d={p} />
1165+
))}
1166+
</svg>
1167+
</button>
12111168
</div>
1212-
) : null}
1169+
<div className="navigation-button-container split navigation-button-variant">
1170+
<button
1171+
className="navigation-button split-left"
1172+
tabIndex={1}
1173+
onClick={() => {
1174+
setTimeout(() => {
1175+
document.getElementById('variant-view')?.scrollIntoView({
1176+
block: 'start',
1177+
inline: 'nearest',
1178+
behavior: 'smooth'
1179+
}),
1180+
0;
1181+
});
1182+
}}
1183+
>
1184+
Variant View
1185+
</button>
1186+
<button
1187+
className="navigation-button split-right"
1188+
tabIndex={1}
1189+
data-bs-toggle="modal"
1190+
data-bs-target="#variant-view-modal"
1191+
>
1192+
<svg className="button question-mark" viewBox={ICONS.QUESTION_CIRCLE_FILL.viewBox}>
1193+
<title>Question Mark</title>
1194+
{ICONS.QUESTION_CIRCLE_FILL.path.map(p => (
1195+
<path fill="currentColor" key={p} d={p} />
1196+
))}
1197+
</svg>
1198+
</button>
1199+
</div>
1200+
</div>
12131201
{
12141202
// External links and export buttons
12151203
isMinimalMode ? (

‎src/script/img/popover-images/coverage/interpretation_1.png

-1.33 KB
Loading

‎src/ui/trackData.ts ‎src/ui/getTrackDocData.ts

+2-11
Original file line numberDiff line numberDiff line change
@@ -392,28 +392,19 @@ export const getTrackDocData = (
392392
<div class="block with-image">
393393
<img src="${coverage_interpretation_1}" alt="Coverage track." />
394394
<div class="text">
395-
<p><b>Black vertical dashed line</b> - denotes the selected breakpoint.</p>
395+
<p><b>Black vertical dashed line</b> - denotes the selected breakpoint (if selected).</p>
396396
</div>
397397
</div>
398398
<hr />
399399
<div class="block with-image">
400400
<img src="${coverage_interpretation_2}" alt="Coverage, Sequence, and Alignment tracks." />
401401
<div class="text">
402402
<p>Sequencing coverage is derived from the data on sequencing reads aligning to each position.</p>
403+
<br />
403404
<p><b>Black reads</b> - (those parts of reads that were split) do not contribute to the coverage sum.</p>
404405
</div>
405406
</div>
406407
</div>
407-
<div class='section interactions'>
408-
<h3>Interactions</h3>
409-
<hr class="header" />
410-
<div class="block with-image">
411-
<img src="${coverage_interpretation_2}" alt="Coverage, Sequence, and Alignment tracks." />
412-
<div class="text">
413-
<p><b>Click</b> - on an SV to show its breakpoints in the read view.</p>
414-
</div>
415-
</div>
416-
</div>
417408
</div>
418409
`
419410
},

0 commit comments

Comments
 (0)
Please sign in to comment.