feat: updates to the minimal mode version #146

crfmc · 2024-06-25T17:27:38Z

(Sehi) Implement tooltips for each track
Implement popovers with instructions for interaction/interpretation
Upload images to show in the documentation
Relocate the chromosome search bar to the center
(Non-minimal-mode) add navigation buttons and modals/popover

…t views

…inimal_mode_updates

-refactor: move modals into new components

-chore: implement popover content -refactor: reference new modal components

-style: style content

-style: modal styles -feat: popover contents

-refactor: correct popover/modal headers for accessibility

-chore: update overlapping driver image

-feat: update indel blocks/images

-refactor/accessibility: order tabIndex -fix: gosling panel padding bug

sehilyi · 2024-07-19T17:08:13Z

src/ui/trackData.ts

+
+// TODO: Not ideal to hard coded!
+// The heights of each track
+export const getTrackData = (


Now that this contains the documents, we can clarify this better with the name

Suggested change

export const getTrackData = (

export const getTrackDocData = (

sehilyi · 2024-07-19T17:08:58Z

src/App.tsx

+import 'bootstrap/dist/css/bootstrap.min.css';
+import * as bootstrap from 'bootstrap/dist/js/bootstrap.bundle.min';
+
+import { Track, getTrackData } from './ui/trackData.js';


Suggested change

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

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

sehilyi · 2024-07-19T17:09:08Z

src/App.tsx

+    const trackTooltips = useMemo(() => {
+        // calculate the offset by the Genome View
+        const genomeViewHeight = Math.min(600, visPanelWidth);
+        const TRACK_DATA = getTrackData(isMinimalMode);


Suggested change

const TRACK_DATA = getTrackData(isMinimalMode);

const TRACK_DATA = getTrackDocData(isMinimalMode);

sehilyi

Looks great to me! Thanks a lot for the changes you made.

I was wondering how you addressed the styling issue (the potential conflict with Bootstrap). I am wondering this since this may happen to any other projects using Gosling.

sehilyi · 2024-07-19T17:30:55Z

A very minor thing – I see now there is a long padding (longer than the padding in the non-minamal-mode Chromoscope) at the bottom (i.e., between the bottom edge of the browser and the alignment views). I think this makes it look like it is a bit off.

Also, another tiny thing – there is now a grey rectangle overlayed underneath the "jump to the top" button which might be due to the conflict with Bootstrap.

-style: decrease padding -style: correct navigation button text

-feat: update text, reformat

-chore: update coverage image and text -feat: add navigation buttons to normal mode

sehilyi · 2024-08-05T21:03:06Z

src/App.tsx

@@ -52,7 +59,7 @@ function App(props: RouteComponentProps) {
    const VIS_PADDING = {
        top: isMinimalMode ? 0 : 60,
        right: isMinimalMode ? 0 : 60,
-        bottom: isMinimalMode ? 0 : 60,
+        bottom: 0,


It looks like now there is no 'dotted' texture on the bottom of the Chromoscope that we used to see before. Would this be due to the change made to this line? I wasn't sure why the conditional operation with the isMinimalMode had to be removed here.

sehilyi · 2024-08-05T21:07:42Z

src/App.tsx

+                                    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}


Should the modal view be shown when a user clicks on the question mark of either genome view or variant view in the normal mode? It seems like the modal view is only shown in the minimal mode, and clicking on the question marks does not do anything on the normal mode.

sehilyi

I see labels of the Alignment view on the right side have unnecessary padding now that question marks are not displayed.

Could we remove such spaces, e.g., in coverage.ts:

-        title: '  Coverage',
+        title: isLeft ? '  Coverage' : 'Coverage',

We can remove the space for Sequence and Alignment tracks as well at:

chromoscope/src/main-spec.ts

Line 183 in 23537dd

title: ' Sequence',

chromoscope/src/alignment.ts

Line 101 in 23537dd

title: ' Alignment',

-style: add padding between navigation buttons

-fix: render modals in normal mode -style: make modal styles global

crfmc and others added 16 commits June 3, 2024 11:46

chore: add boostrap

59e4e91

feat: add placeholder icons for each track in breakpoint and alignmen…

da23214

…t views

Merge remote-tracking branch 'origin/sehilyi/info-icons' into crfmc/m…

e45b712

…inimal_mode_updates

-chore: import images

13df5a5

-refactor: move modals into new components

-chore: import popover images

1dc412c

-chore: implement popover content -refactor: reference new modal components

-chore: add genome and variant view images/content

68ca9c9

-style: style content

-chore: update images

5576da9

-style: modal styles -feat: popover contents

-chore: update variant view images

415c52b

-refactor: correct popover/modal headers for accessibility

chore: update SV screenshot

c972a03

-refactor: move track data into separate file

fa71ef1

-chore: update overlapping driver image

-feat: update cnv block

ca8ba6c

-feat: update indel blocks/images

fix: bootstrap boz-sizing issue

8380012

fix: page header style issue

47e84b5

chore: add coverage alignment and sequence images

dcbe5ef

chore: update images and indel copy

94826ce

-refactor/accessibility: add alt text for images

15262c7

-refactor/accessibility: order tabIndex -fix: gosling panel padding bug

crfmc marked this pull request as ready for review July 18, 2024 21:41

crfmc requested a review from sehilyi July 18, 2024 21:41

sehilyi reviewed Jul 19, 2024

View reviewed changes

sehilyi approved these changes Jul 19, 2024

View reviewed changes

crfmc added 4 commits July 19, 2024 14:25

fix: bootstrap adding padding to move-to-top button

f251d69

-feat: global tooltip

57470cc

-style: decrease padding -style: correct navigation button text

-fix: re-run bootstrap related JS when Sv selected

ec87244

-feat: update text, reformat

-feat: remove duplicated tooltips

23537dd

-chore: update coverage image and text -feat: add navigation buttons to normal mode

sehilyi reviewed Aug 5, 2024

View reviewed changes

crfmc added 5 commits August 6, 2024 14:23

chore: remove padding from right track titiles

77c1620

fix: restore padding under normal chromoscopemode

baafc2d

-style: adjust variant view scroll margin

df792b4

-style: add padding between navigation buttons

-refactor: new file for navigation buttons

4074e98

-fix: render modals in normal mode -style: make modal styles global

chore: update cnv image

a9d6cb2

crfmc merged commit 4025551 into main Aug 9, 2024
14 checks passed

crfmc deleted the crfmc/minimal_mode_updates branch August 9, 2024 15:08

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: updates to the minimal mode version #146

feat: updates to the minimal mode version #146

crfmc commented Jun 25, 2024 •

edited

Loading

sehilyi Jul 19, 2024

sehilyi Jul 19, 2024

sehilyi Jul 19, 2024

sehilyi left a comment

sehilyi commented Jul 19, 2024 •

edited

Loading

sehilyi Aug 5, 2024

sehilyi Aug 5, 2024

sehilyi left a comment

	export const getTrackData = (
	export const getTrackDocData = (

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

	const TRACK_DATA = getTrackData(isMinimalMode);
	const TRACK_DATA = getTrackDocData(isMinimalMode);

feat: updates to the minimal mode version #146

feat: updates to the minimal mode version #146

Conversation

crfmc commented Jun 25, 2024 • edited Loading

sehilyi Jul 19, 2024

Choose a reason for hiding this comment

sehilyi Jul 19, 2024

Choose a reason for hiding this comment

sehilyi Jul 19, 2024

Choose a reason for hiding this comment

sehilyi left a comment

Choose a reason for hiding this comment

sehilyi commented Jul 19, 2024 • edited Loading

sehilyi Aug 5, 2024

Choose a reason for hiding this comment

sehilyi Aug 5, 2024

Choose a reason for hiding this comment

sehilyi left a comment

Choose a reason for hiding this comment

crfmc commented Jun 25, 2024 •

edited

Loading

sehilyi commented Jul 19, 2024 •

edited

Loading