EDIT: moved to [ella-frontend wiki](https://gitlab.com/alleles/ella-frontend/-/wikis/home) ## Background Simplifying the UI can make refactoring less complex, while improving the UX. ### Most important changes - Use entire screen width (no right/left margins) - Remove allele top bar and variants side bar and merge all info/functionality from these into a single bottom panel that is used for all views (some functions/buttons can be moved to top bar). This removes redundancy and simplifies refactoring. - Simplify navigation to: INFO - DETAILS - VISUAL - REPORT | SNV - CNV - Move some buttons into Action menus in top bar - Split main view into a Main panel (left) and a smaller Right panel, where the latter can contain things that should be visible at all times in the context of Main. E.g. Classification summary, track settings - Allow resizing the bottom panel vertically, default 5-10 rows, minimize to single row (single variant), maximize up to top bar (for overview) - VARIANTS mode uses same bottom panel as in ANALYSES, except only 1 variant is shown - i.e. main layout is the same in both modes - Add Report include/exclude functionality (button) to bottom panel. This allows using the same variants list (bottom panel) for Details and Report, and is more intuitive - Popups for HGVSc, HGVSp and CSQ should be the same as in current top bar, but in addition clearly mark which transcript(s) is used as default. ### Notes - We still need to separate between SNV and CNV - Evaluate if VISUAL should have CLASSIFICATION available in the Right panel - INDICATIONS comment needs to be resolved - suggest to move to popover in top bar (edit still in REPORT) ## Implementation WIP: [React_frontend_layout_25022022.pdf](/uploads/8c1150f45a2f27765d81c425863e4e8a/React_frontend_layout_25022022.pdf)