Dashboard: Improve UI for Inputs #855

proy30 · 2025-02-20T22:44:10Z

This PR improves the existing dashboard Inputs UI by:

Improving Flexibility
- Moves away from a fixed layout structure to a more responsive UI that adapts to different screen sizes (both large and small).
Establishing Consistency with UI Elements
- Introduces UIDefaults class that centralizes key component styles. While the current UI is mostly consistent in terms of its look, this PR unifies any mismatched styles and also improves code readability.
- Converting icons to actual buttons
- Updating input_header component to allow the flexibility of positioning header buttons
Updating the lattice configuration look

src/python/impactx/dashboard/Input/latticeConfiguration/helper.py

proy30 · 2025-02-20T23:05:22Z

The input section prior to PR (on a laptop-sized screen):

The sizes of each section are fixed, so while the inputs look fine on a decently sized screen, the dashboard gives some difficult to utilize on a smaller screen size.

The input section after the PR (on a laptop-sized screen):

The inputs are strictly set to take 50% of the page, regardless of screen size, while the remaining 50% is left for pre-sim visualizations when added.

proy30 · 2025-02-20T23:10:29Z

Lattice Config Before	Lattice Config After

Lattice Config Expanded Before	Lattice Config Expanded After

proy30 · 2025-02-20T23:17:01Z

Space Charge Before	Space Charge After

The bolded headings in the before are not consistent with other UI input labels.

ax3l · 2025-02-21T17:18:41Z

The scrolling that is now default for most screen sizes inside boxes is a bit cumbersome in terms of UI/UX, I think. What about this: adding the option to collapse a box by clicking on its title to save space? That would be more natural, because some boxes one sets once while one works with other boxes repeatedly.

proy30 · 2025-02-22T05:55:16Z

Demo with no scroll bars, expandable and collapsible sections.

chrome_9XngD2zFsE.mp4

proy30 · 2025-02-22T06:22:29Z

And add "collapse all" in toolbar

chrome_dwLXHBxk8f.mp4

This is part of the goal of having the Inputs take up 50% of the page only, leaving the right 50% for future visualization additions.

It does not look like it is needed

… card name

So that the line of code is not hidden deeply and can easily read from the 'outside'

Need to assign 'auto' instead as we want checkboxes to be next to each other.. this is primarily making space for future PR to allow space for 'select mode' select field

This is to ensure that the input section can function on a smaller screen

…card

Does not require to 'show_details' as there it is not expected for a dropdown to have validation

Making it not expand past the toolbar

To improve responsiveness and user expectations

Alter input_header function to allow more flexibility on button placement, update space_charge header because of this. Additionally, the lattice config is inside one vcard rather than two separate, and the icons are treated as actual buttons with an icon.

for more information, see https://pre-commit.ci

ax3l

Excellent work! Love it! 🚀 ✨

github-advanced-security bot found potential problems Feb 20, 2025

View reviewed changes

proy30 changed the title ~~[WIP] Dashboard: Improve UI for Inputs~~ Dashboard: Improve UI for Inputs Feb 21, 2025

proy30 added the component: dashboard our browser based trame dashboard label Feb 21, 2025

proy30 requested review from ax3l, cemitch99 and EZoni February 21, 2025 00:43

proy30 mentioned this pull request Feb 21, 2025

Dashboard: Add track_envelop and track_reference #856

Open

cemitch99 approved these changes Feb 21, 2025

View reviewed changes

ax3l self-assigned this Feb 21, 2025

proy30 changed the title ~~Dashboard: Improve UI for Inputs~~ [WIP] Dashboard: Improve UI for Inputs Feb 21, 2025

proy30 changed the title ~~[WIP] Dashboard: Improve UI for Inputs~~ Dashboard: Improve UI for Inputs Feb 22, 2025

proy30 added 13 commits February 24, 2025 10:00

use dictionary for consistent padding

b53b0f9

Add card sizing to __main__ rather than in individual cards

06b88cf

This is part of the goal of having the Inputs take up 50% of the page only, leaving the right 50% for future visualization additions.

Remove 'no_gutters=True' in __main__

9284081

It does not look like it is needed

style fixup

d0b2faf

Re-order sections and fix reference to padding dictionary and lattice…

9bcbbbc

… card name

Place v_show in __main__

04e1a2c

So that the line of code is not hidden deeply and can easily read from the 'outside'

Strip all hard-coded styles from input parameters section

1eb694f

Add standardized style to rows in input parameters section

ebcf05e

Adjust style for checkboxes

f51494f

Need to assign 'auto' instead as we want checkboxes to be next to each other.. this is primarily making space for future PR to allow space for 'select mode' select field

Add UIDefaults class, and standardized styles for the section cards

6525920

This is to ensure that the input section can function on a smaller screen

Update distribution section with similar styling as input parameters …

03d7064

…card

Update styling for custom select components

140cc81

Does not require to 'show_details' as there it is not expected for a dropdown to have validation

Update csr section with similar styling

fb797da

proy30 and others added 19 commits February 24, 2025 10:00

Update space_charge section with similar styling

ed6e5e7

update Input __init__

8c2280a

Update Input/components.py

036a74b

update lattice config ui

33a58a8

Add ToolbarDefaults to defaults.py

612b462

Update UIdefaults and refactor styling to inherit form UIdefaults

26e8228

Give cards dynamic sizing based on viewport height

08f5752

Improve v_alert's responsiveness

1da898d

Making it not expand past the toolbar

add breakpoints for cards/inputs section

fabefe0

Add custom css for scrollbars

eadaaf9

Make icons into buttons

b926212

To improve responsiveness and user expectations

Update lattice config section

38a095a

Alter input_header function to allow more flexibility on button placement, update space_charge header because of this. Additionally, the lattice config is inside one vcard rather than two separate, and the icons are treated as actual buttons with an icon.

remove unused style

d6110bf

[pre-commit.ci] auto fixes from pre-commit.com hooks

97d3124

for more information, see https://pre-commit.ci

Add staticmethod tag

e7f672e

Remove scrollbars on inputs

47a25bd

Add expand button to all sections by default

1f8d7ba

Add collapsable sections

7a01bf2

Add collapse all button in toolbar

d902679

proy30 force-pushed the dashboard/improve_ui branch from e653351 to d902679 Compare February 24, 2025 18:04

[pre-commit.ci] auto fixes from pre-commit.com hooks

ca963d0

for more information, see https://pre-commit.ci

ax3l approved these changes Feb 24, 2025

View reviewed changes

ax3l merged commit 23b543b into BLAST-ImpactX:development Feb 24, 2025
15 of 16 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Dashboard: Improve UI for Inputs #855

Dashboard: Improve UI for Inputs #855

proy30 commented Feb 20, 2025

proy30 commented Feb 20, 2025

proy30 commented Feb 20, 2025

proy30 commented Feb 20, 2025

ax3l commented Feb 21, 2025 •

edited

Loading

proy30 commented Feb 22, 2025

proy30 commented Feb 22, 2025

ax3l left a comment

Dashboard: Improve UI for Inputs #855

Dashboard: Improve UI for Inputs #855

Conversation

proy30 commented Feb 20, 2025

proy30 commented Feb 20, 2025

proy30 commented Feb 20, 2025

proy30 commented Feb 20, 2025

ax3l commented Feb 21, 2025 • edited Loading

proy30 commented Feb 22, 2025

proy30 commented Feb 22, 2025

ax3l left a comment

Choose a reason for hiding this comment

ax3l commented Feb 21, 2025 •

edited

Loading