diff --git a/src/App.css b/src/App.css index b714c565..4858ac9f 100644 --- a/src/App.css +++ b/src/App.css @@ -139,6 +139,7 @@ a:hover { } .title-doc-link { + color: black; display: inline-block; position: fixed; right: 20px; @@ -493,6 +494,7 @@ a:hover { z-index: 998; opacity: 0.5; border: none; + border-radius: 4px; background: none; padding: 0px; } @@ -830,6 +832,28 @@ a:hover { } } +.track-tooltips-container { + top: 100px; + width: 3%; + height: min-content; + position: relative; + z-index: 997; +} + +.track-tooltip { + padding: 0px; + border: none; + + .button.question-mark { + width: 12px; + height: 12px; + fill: black; + } +} +.track-tooltip:hover { + cursor: pointer; +} + /* Minimal Mode styles */ .minimal_mode { .gosling-panel { @@ -837,28 +861,6 @@ a:hover { overflow-x: hidden; } - .track-tooltips-container { - top: 100px; - width: 3%; - height: 100%; - position: relative; - z-index: 997; - } - - .track-tooltip { - padding: 0px; - border: none; - - .button.question-mark { - width: 12px; - height: 12px; - fill: black; - } - } - .track-tooltip:hover { - cursor: pointer; - } - .sample-label { left: 300px; top: 8px; diff --git a/src/App.tsx b/src/App.tsx index 2142ecac..776fea61 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -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, getTrackData } from './ui/trackData.js'; +import { Track, getTrackDocData } from './ui/trackData.js'; const db = new Database(); const log = new BrowserDatabase(); @@ -59,7 +59,7 @@ function App(props: RouteComponentProps) { const VIS_PADDING = { top: isMinimalMode ? 0 : 60, right: isMinimalMode ? 0 : 60, - bottom: isMinimalMode ? 0 : 60, + bottom: 0, left: isMinimalMode ? 0 : 60 }; @@ -323,6 +323,10 @@ 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('.genome-view-legend'); @@ -338,12 +342,6 @@ function App(props: RouteComponentProps) { }, options); observer.observe(legendElement); - - // Enable Bootstrap popovers for track tooltips - const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]'); - const popoverList = [...popoverTriggerList].map( - popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl) - ); } }, []); @@ -549,7 +547,7 @@ function App(props: RouteComponentProps) { const trackTooltips = useMemo(() => { // calculate the offset by the Genome View const genomeViewHeight = Math.min(600, visPanelWidth); - const TRACK_DATA = getTrackData(isMinimalMode); + const TRACK_DATA = getTrackDocData(isMinimalMode); const offset = genomeViewHeight + (isMinimalMode ? 100 : 40) - 2; // Infer the tracks shown @@ -588,19 +586,19 @@ function App(props: RouteComponentProps) { key={i} tabIndex={4} role="button" - className="track-tooltip btn btn-sm" + className="track-tooltip" data-bs-trigger="focus" data-bs-toggle="popover" data-bs-template={` - - `} + + `} data-bs-title={d.title} data-bs-custom-class={'track-tooltip-popover popover-for-' + d.type} data-bs-html="true" @@ -1100,7 +1098,7 @@ function App(props: RouteComponentProps) { }} > {goslingComponent} - {isMinimalMode && trackTooltips} + {trackTooltips} {jumpButtonInfo ? (