VV - UI + Styles

[kieftrav]

Package

• lib-subject-viewers

Describe your changes

• Add 4, 8, 16, 32, and 64 example to Storybook
• Add Histogram range slider
• Fix scroll bug
• Inline OrbitControls import
• Incorporate Figma Styles

How to Review

• Run lib-subject-viewers Storybook locally
• Inspect styles in the deployed project-branch
• Alternatively, you can run the local app-project

Please Review

• Are layout and color styles implemented correctly?
• Does resizing the window still enable full annotating?
• Planes
  • Does the toggle to expand/collapse work?
  • Does the "forward 10" move forward 10 frames?
  • Does adjusting the slider work?
  • Does clicking anywhere on the cube create+add to an the annotation?
  • Does holding shift+click on the cube create a new annotation?
• Cube
  • Can you rotate the cube?
  • Can you see annotations?
  • Does clicking anywhere on the cube create+add to an the annotation?
  • Does holding shift+click on the cube create a new annotation?
• Histogram
  • Do both the plane and the cube remove pixels/voxels when the histogram range is narrowed?
  • Does the Histogram drawing re-normalize when adjusting the sliders?

Future PR / Not Implemented

• Ability to delete an Annotation in the cube
• Ability to "undo" in the Toolbar
• Medium / Mobile styles

Checklist

PR Creator - Please cater the checklist to fit the review needed for your code changes.
PR Reviewer - Use the checklist during your review. Each point should be checkmarked or discussed before PR approval.

General

• Tests are passing locally and on Github
• Documentation is up to date and changelog has been updated if appropriate
• You can yarn panic && yarn bootstrap or docker-compose up --build and FEM works as expected
• FEM works in all major desktop browsers: Firefox, Chrome, Edge, Safari (Use Browserstack account as needed)
• FEM works in a mobile browser

General UX

Example Staging Project: i-fancy-cats

• All pages of a FEM project load: Home Page, Classify Page, and About Pages
• Can submit a classification
• Can sign-in and sign-out
• The component is accessible
  • Can be used with a screen reader BBC guide to VoiceOver
  • Can be used from the keyboard WebAIM guide to keyboard testing
  • It is passing accessibility checks in the storybook

[coveralls]

coverage: 75.621% (-1.7%) from 77.338%
when pulling 396402a on vv-styles
into c9ecdc9 on master.