CDE: Vis App

[LibbyUX]

CDE MVP1: Vis App

User Stories

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

Resources

• Design File: Vis App 1920px
• Prototype Presentation: Vis App
• HRA Design System: Component Library
• HRA Design System: Style Guide

Main Components

• CDE App header
• Tooltip hover cards
• Metadata Information module
• Cell Types module
  • Cell Types listings
• Visualization module
• Histogram module
• Color picker
  • Color format
  • This color picker is modeled after the NXG color picker. I have styled it and made it more simple. I do not want default colors. Users should just simply see the color they've clicked when they click a color swatch.
• Snackbar
• Resolution notice modal

Vis App Design Notes

General Design & Interaction Notes

• Use the Figma prototype tab in the design file to better understand interaction details.
• Please interact with the prototype preview to experience the expected behavior and states.
  • Sometimes Figma prototypes glitch out, so just ask if you have any questions.
• The app needs to be both beautifully and intuitively responsive to many varying screen sizes.
  • Use horizontal and vertical scrollbars on the entire page as needed for anything smaller than a 1279px screen size. This app is best viewed with a breakpoint of 1280px and above.
• Sometimes design work moves quickly: Inconsistencies, copy-pasta, or errors may be found during development. Please just reach out to me if you have questions!

  Visualization module

• Study participants wanted a pure, pitch-black, #00000 background. Please use this color instead of what is currently in the concept build.
• Future versions note: Users need options eventually to change the background color.
• Starting in the 1012px breakpoint, either the histogram or the visualization module can be opened at one time. Clicking the expand icon on either will collapse the other to make room for the expanded component.

  Module behavior

  Users can expand and collapse certain modules with the expected behavior:

• Metadata: When collapsed, the Cell Types list expands.
• Histogram: When collapsed, the Visualization module expands.
• Breakpoints to note:
  • 1440px: Metadata is collapse by default.
  • 1280px: Metadata is collapsed by default & the histogram has a smaller fixed height.

    Metadata module variations

• The sample metadata module is used for our example visualizations. Users will click on the sample links and see a Google Sheet of the visualized data in a new tab.
• The metadata module is used for user-generated visualizations.

Download buttons

• All files downloaded will trigger a snack bar notifying the user that the download has been completed.
• Sample data will need to be provided for sample downloads/visualization downloads. I speculate we can rely on Yash and Katy to tell us more about these details. Reach out to me if you have questions and I will get a group conversation going on it.

Open in New

• Every link on the visualization page should open in a new tab, including those within the app itself. This is so that the visualization that users have created is preserved until they close their browser.

Exit Notice

• I will design an exit notice for user-generated visualization app pages. This will be similar to the RUI's. I don't have that design right now, but please plan for this functionality.

Breakpoints & Responsiveness

On breakpoints larger than 1920px by 1080px, both the vis module and histogram should expand. All other components have fixed heights/widths.

• 1920px
• 1440px
• 1280px
  • Responsive Notes:
  • Any width smaller than 1280px, starting at 1279px, will receive a resolution notice modal before viewing or creating a visualization.
  • This app should be full screen without horizontal and vertical scroll bars through 1280x832 resolutions. Starting at widths of 1279px and heights of 831px: Horizontal and vertical scrollbars are needed.
• 1012px

1920px on 4.5.2024

[LibbyUX]

@bherr2 @edlu77 @axdanbol @bhushankhope

Is it possible to use the same exit notice functionality from the RUI after people:

• try to close the vis app after they have altered the colors of an example visualization
• try to close the vis app after they have created a visualization

RUI exit notice on Google Chrome + MacBook Pro:

[LibbyUX]

@bherr2, @axdanbol, @edlu77, & @bhushankhope -

Is it possible to lock the scale bar at the bottom right of the visualization module? It will still rotate in 3D, but having a fixed location for it will provide an improved user experience. Let me know! Thank you!

[bherr2]

Not for this release. The module we're using was really only designed for 2D. To do it properly in 3D will require much more development time than we have left. Please put on the roadmap for a future MVP.

[LibbyUX]

Perfect, I will add to future versions. Thank you, @bherr2!