CDE: Create Visualization Page

[LibbyUX]

CDE: Create Visualization Page

User Stories

• As a pediatric pathologist, I want single-cell data, in order to improve disease diagnosis.

Resources

• Design File: Create Visualization page
• Prototype Presentation: Create Visualization page
• HRA Design System: Component Library
• HRA Design System: Style Guide

Components

• Website header
• Breadcrumb
  • Breadcrumb Button
• Format/Upload
• Anchor Cell Selection
• Add Metadata
  • Inputs
  • Dropdowns
• Configure Color Map
• Visualize Data
• Create Vis tooltips
• Footer
• Screensize Notice Modal

Breakpoints

• 1920px
• 1440px
• 1280px
• Note: Any width smaller than 1280px, starting at 1279px, will receive a screen size notice before viewing or creating a visualization
• 1012px
• 768px
• 544px
• 320px

UI on 3.29.2024

[LibbyUX]

Libby To Do:

• [x] Specify errors/loading state for
  • [x] Step 1
  • [x] Step 4 color map
  • [x] Step 5 no required upload
• [x] Specify open dropdown states
• [x] Provide more guidance for inputs, such as error states and number inputs:

Dev To Do:

• Try to use the determinate progress bar if possible, or, use indeterminate if not possible.

[LibbyUX]

Edited main issue markdown:

• Added Screensize Notice Modal

[LibbyUX]

@edlu77, @axdanbol, & @bherr2:

Updates to Create Vis Steps Figma component

• Separate steps components are now consolidated within one Figma component set with properties for step, state, and breakpoint variants.
• Progress indicators/uploading states added for steps 1, 4, and 5.
• Error states added for steps 1, 4, and 5.
  • Functionality note for Step 5 Visualize Cell Distance Data: When users click the Visualize button without a CSV upload in Step 1 or Step 4, the user is automatically rerouted back up to an error state of step 1 (no required upload) or step 4 (no required upload) until they fix the error in that specific step.

[LibbyUX]

mat-select + input updates!

@edlu77, @bherr2, & @axdanbol:

Hey team! Please see the new designs for text field inputs with error messages and mat-select (formerly dropdown). I will begin working to align our design system with Angular Material's component library moving forward.

I like the state behavior that Angular provides for both components. We can go with this example behavior + our design system aesthetics:

• Input with error messages
• Basic mat-select

Please ping me if anything is unclear or if you have any questions!

Step 3 Design Update

• Inputs and select states updated to align with Angular components
• Label text above selects and inputs removed
  • It would be redundant to have this with Material's input and select title functionality
• Spacing updated in between components in Step 3

Step 3

Angular Inputs in the HRA Design System