Ability to upload and delete crash diagrams for temporary records by roseeichelmann · Pull Request #1971 · cityofaustin/vision-zero

roseeichelmann · 2026-02-20T22:00:57Z

Associated issues

Closes cityofaustin/atd-data-tech#26662

Testing

URL to test:
Local

Steps to test:

Start up your local VZ including the image API using
./vision-zero local-stack-up
Go to a temp record
You should see a button to upload a crash diagram, click on it and first try to upload something thats not a jpg or png, make sure you get an error. Also test throttling your network off to see the error
Make sure that when you close and reopen the values have been reset
Now actually upload an image for the crash diagram, see that there is a preview image, now click save and the diagram should immediately refetch on modal close
The Edit diagram button should appear when a temp record has a diagram saved, use it to save a different image
Test all the rotate/save controls to make sure they still work
Test the delete button (Edit diagram -> Delete)
Test that read only users cant see any of these buttons
Test that the fatality image upload still works as expected

Ship list

Check migrations for any conflicts with latest migrations in main branch
Confirm Hasura role permissions for necessary access
Code reviewed
Product manager approved

netlify · 2026-02-20T22:01:02Z

✅ Deploy Preview for atd-vze-staging ready!

Name	Link
🔨 Latest commit	`9bc23fb`
🔍 Latest deploy log	https://app.netlify.com/projects/atd-vze-staging/deploys/69a9cc2f5e3bc300071224fe
😎 Deploy Preview	https://deploy-preview-1971--atd-vze-staging.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

roseeichelmann · 2026-03-05T18:30:45Z

editor/components/ImageUploadModal.tsx

I ended up DRYing it up and making this into a reuseable/interchangeable component for both image upload modals (fatalities and crash diagrams)

roseeichelmann · 2026-03-05T18:32:53Z

editor/components/ImageUploadModal.tsx

-                </Form.Control.Feedback>
-              </Form.Group>
-            </Col>
+            {needsImageSource && (


this whole change is just checking if this modal needs the image source field (such as in the fatality upload modal)

roseeichelmann · 2026-03-05T18:35:34Z

editor/components/FatalityVictimListItem.tsx

-
-    fetchImage();
-  }, [personId, getToken, imageVersion]);
+  const { imageUrl, refetch, isLoading } = useImage({


wow i did not know about this useImage hook @johnclary made 🤦 got to really DRY up all this code by deleting my useEffect above that is basically an exact replica of this useImage hook thats already being used for the crash diagrams

oh nice! i forgot about it even though it was just a few weeks ago: #1959 (comment)

roseeichelmann · 2026-03-05T18:36:52Z

editor/components/CrashDiagramCard.tsx

+          setShowModal={setShowModal}
+          storedUrl={imageUrl}
+          title={`Upload crash diagram`}
+          url={`${process.env.NEXT_PUBLIC_CR3_API_DOMAIN}/images/crash_diagram/${crash.record_locator}`}


if you fudge up this URL in your code editor you can test the error message in the modal

Looks good!

roseeichelmann · 2026-03-05T18:38:33Z

editor/components/ImageUploadModal.tsx

      const token = await getToken();
      const response = await fetch(url, {
        headers: {
          Authorization: `Bearer ${token}`,


remove this line in your code editor to test error displayed when token is missing

johnclary

Wow—works great and looks great. And coming at at just +13 lines of code 🙌

I left really minor feedback. I tested this quite a lot and everything is super smooth 🚀

johnclary · 2026-03-06T16:43:11Z

editor/components/CrashDiagramCard.tsx

 import Image from "react-bootstrap/Image";
+import Button from "react-bootstrap/Button";
 import { FaRotate } from "react-icons/fa6";
+import { FaRegPenToSquare } from "react-icons/fa6";


Would you switch this to

import { LuSquarePen } from "react-icons/lu";

😇

johnclary · 2026-03-06T16:59:03Z

editor/components/CrashDiagramCard.tsx

+          setShowModal={setShowModal}
+          storedUrl={imageUrl}
+          title={`Upload crash diagram`}
+          url={`${process.env.NEXT_PUBLIC_CR3_API_DOMAIN}/images/crash_diagram/${crash.record_locator}`}


Looks good!

johnclary · 2026-03-06T17:00:45Z

editor/components/FatalityVictimListItem.tsx

-
-    fetchImage();
-  }, [personId, getToken, imageVersion]);
+  const { imageUrl, refetch, isLoading } = useImage({


oh nice! i forgot about it even though it was just a few weeks ago: #1959 (comment)

johnclary · 2026-03-06T17:15:42Z

editor/components/ImageUploadModal.tsx

  const file = watch("file");

-  const url = `${process.env.NEXT_PUBLIC_CR3_API_DOMAIN}/images/person/${personId}`;
+  const needsImageSource = defaultValues.hasOwnProperty("image_source");


Love that you are making this component reusable!

This is working fine, but I think it could be more obvious from the component API that there is a switch that toggles the image source requirement.

Even thought it makes the component less abstract, it might be be better to remove the url and defaultValues props and instead use an explicit prop like imageType that indicates if the image is a crash diagram or person image. And then inside the component you can supply the correct url and defaultValues based on this prop value.

That way the dev doesn't have to know the right combination of URL and default values because the component handles it for you.

chiaberry

Tested uploading and deleting!

I kind of want a "Is temp crash" filter, but I just searched by T in the search bar and they came up.

What do you think about rewording the message "Crash diagrams are not available for temporary crash records". Seems a little contradictory saying that when theres a button immediately below it to add one.

I see John's comment that you are going to rework some of the component, so I'll do a quick retest after that and approve then.

johnclary · 2026-03-06T20:37:53Z

What do you think about rewording the message "Crash diagrams are not available for temporary crash records".

Yes. Maybe "This temporary crash record does not have a diagram" - ?

I kind of want a "Is temp crash" filter

So did Xavier!

chiaberry · 2026-03-06T20:39:17Z

@johnclary ill learn to scroll someday

add button to crash diagram alert

aff4dd3

roseeichelmann added the WIP Work in progress label Feb 20, 2026

roseeichelmann added this to DTS Dev Team Feb 20, 2026

github-project-automation bot moved this to New in DTS Dev Team Feb 20, 2026

roseeichelmann moved this from New to In Progress in DTS Dev Team Feb 20, 2026

roseeichelmann removed this from DTS Dev Team Feb 20, 2026

roseeichelmann added 2 commits February 23, 2026 12:26

add crash diagram upload modal

b302e77

reset on close

77d40a3

johnclary added WIP Work in progress and removed WIP Work in progress labels Mar 4, 2026

roseeichelmann added 2 commits March 5, 2026 11:24

add edit diagram button

2d68ccb

use refetch

9a1ac28

roseeichelmann removed the WIP Work in progress label Mar 5, 2026

roseeichelmann added 3 commits March 5, 2026 12:25

delete this we are DRYing it up

639d56f

DRYing it up to use interchangeable image upload component

d26c8a1

rename component to be reuseable

64f125b

roseeichelmann commented Mar 5, 2026

View reviewed changes

roseeichelmann added 2 commits March 5, 2026 12:31

fix this

3efe496

remove this console.log

9bc23fb

roseeichelmann commented Mar 5, 2026

View reviewed changes

roseeichelmann requested review from chiaberry, frankhereford, johnclary, mateoclarke, mddilley and tillyw March 5, 2026 18:35

roseeichelmann commented Mar 5, 2026

View reviewed changes

roseeichelmann changed the title ~~Ability to upload crash diagrams for temporary records~~ Ability to upload and delete crash diagrams for temporary records Mar 5, 2026

johnclary reviewed Mar 6, 2026

View reviewed changes

chiaberry reviewed Mar 6, 2026

View reviewed changes

Conversation

roseeichelmann commented Feb 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Associated issues

Testing

Ship list

Uh oh!

netlify bot commented Feb 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for atd-vze-staging ready!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

johnclary left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

johnclary Mar 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

chiaberry left a comment

Choose a reason for hiding this comment

Uh oh!

johnclary commented Mar 6, 2026

Uh oh!

chiaberry commented Mar 6, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

roseeichelmann commented Feb 20, 2026 •

edited

Loading

netlify bot commented Feb 20, 2026 •

edited

Loading

johnclary Mar 6, 2026 •

edited

Loading