Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

4404 crash narrative crash diagram UI #956

Merged
merged 22 commits into from
Dec 22, 2020

Conversation

tillyw
Copy link
Contributor

@tillyw tillyw commented Dec 8, 2020

Fixes cityofaustin/atd-data-tech#4404

Screen Shot 2020-12-11 at 6 27 27 PM

Please test with:
https://deploy-preview-956--atd-vze-staging.netlify.app/#/crashes/16876263
See other records to see those with missing diagrams and narratives

Just need to resolve one issue to check the NODE_ENV to set the s3 folder for downloading the image.

Does this:

  • Remove the Crash Report component
  • Add a Crash Diagram component to top right of Crash Details pages, aligned with and same dimensions as the Crash Location map component
  • The header for the Crash Diagram should have the same styling as the Crash Location map component
  • Crash Diagram component should include Crash Diagram header, a Download CR-3 PDF button (that was previously on the Crash Report component), and the image of the crash diagram that is produced via #4303
  • The crash diagram will need to have set height parameters via CSS on the crash diagram that is displayed so that the size of the image remains consistent across crashes as well as consistent with the height of the map box component
  • Crash diagram component to include Download CR-3 PDF button within the gray header (same style as edit coordinated button)
  • Crash narrative in full width component above Related Records component
  • May need to move "CR3 not available" alert message to an information icon with a modal
  • Let's look into solution for out-of-the-box zoom in/out feature for images in react
  • Add ability to rotate image as needed

Copy link
Contributor

@mddilley mddilley left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is super cool, Tilly! Seeing the crash map right next to the diagram is a great experience, and it is really nice to see the product of all the work around the diagrams and narrative. I was able to get a side by side of the map and diagram with ease using the controls. 🙌

Screen Shot 2020-12-14 at 10 24 12 AM

atd-vze/src/views/Crashes/Crash.js Outdated Show resolved Hide resolved
atd-vze/src/views/Crashes/CrashDiagram.js Outdated Show resolved Hide resolved
atd-vze/src/views/Crashes/CrashDiagram.js Outdated Show resolved Hide resolved
Copy link
Contributor

@mateoclarke mateoclarke left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added a few suggestions here for you to review. I'm good with this being merged on we can get the deploy preview working without the hardcoding and confirm that the narrative text empty state works as intended.

atd-vze/src/views/Crashes/Crash.js Outdated Show resolved Hide resolved
atd-vze/src/views/Crashes/Crash.js Outdated Show resolved Hide resolved
atd-vze/src/views/Crashes/Crash.js Outdated Show resolved Hide resolved
atd-vze/src/views/Crashes/Crash.js Outdated Show resolved Hide resolved
atd-vze/src/views/Crashes/Crash.js Show resolved Hide resolved
atd-vze/src/views/Crashes/CrashDiagram.js Outdated Show resolved Hide resolved
atd-vze/src/views/Crashes/CrashDiagram.js Outdated Show resolved Hide resolved
atd-vze/src/views/Crashes/CrashDiagram.js Outdated Show resolved Hide resolved
atd-vze/src/views/Crashes/CrashDiagram.js Outdated Show resolved Hide resolved
atd-vze/src/views/Crashes/CrashDiagram.js Outdated Show resolved Hide resolved
@tillyw tillyw merged commit 1657896 into master Dec 22, 2020
@tillyw tillyw deleted the 4404_crash_narrative_crash_diagram_ui branch December 22, 2020 21:31
@tillyw tillyw restored the 4404_crash_narrative_crash_diagram_ui branch December 23, 2020 16:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Implement Crash Narrative and Crash Diagram UI
3 participants