Redesigned victims section with unit cards, contributing factors, and charges #1917

roseeichelmann · 2025-12-17T21:57:24Z

Associated issues

Closes cityofaustin/atd-data-tech#25958

Testing

URL to test:
Local

Steps to test:

Start up local database, apply migrations and metadata
Open up a few fatality details pages. With the redesigned units cards section you should see:

A unit card when a unit has a fatality and/or
Has any contributing factors and/or
Has any charges

Check out crashes with multiple fatalities to see how multiple victims in a unit are formatting, such as http://localhost:3002/editor/fatalities/19704670
Resize your view port to see how things are formatting at diff breakpoints

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

roseeichelmann · 2025-12-18T20:20:37Z

editor/app/fatalities/[record_locator]/page.tsx

 import { MapRef } from "react-map-gl";
 import { PointMap } from "@/components/PointMap";
-import FatalityVictimsCard from "@/components/FatalityVictimsCard";
+import FatalityUnitsCards from "@/components/FatalityUnitsCards";


renamed for clarity

roseeichelmann · 2025-12-18T20:22:01Z

editor/components/FatalityUnitsCards.tsx

+                        <Image
+                          alt="placeholder"
+                          className="me-3"
+                          src={`${BASE_PATH}/assets/img/avatars/placeholder.png`}


is this placeholder image fine? it was already in our assets

it looks good to me!

Me too—thanks for this!

roseeichelmann · 2025-12-18T20:23:28Z

editor/tsconfig.json

this was just some linting of some sort

roseeichelmann · 2025-12-18T20:37:07Z

editor/components/FatalityUnitsCards.tsx

+                  <h5 className="mb-1 me-2">
+                    <span className="fw-bold"> Unit {unit.unit_nbr}</span>
+                  </h5>
+                  <div className="d-flex flex-grow-1 justify-content-start">


original mockups have this unit year make & model in the text-secondary class, but i found that the contrast was way below accessibility standards, especially for dark mode:

In light mode its not as bad:

and you can compare with what i have now in this PR for light/dark mode just using the primary text color. thoughts? i recognize the DRIVER is still in that secondary color but the contrast isnt as bad w the background color

Using the primary text color is great—thanks for that!

And, yes, rendering our secondary color over white background should be fine for color contrast.

chiaberry

I left a few comments about duplicate key and the person experiencing homelessness section, but overall this looks great!

chiaberry · 2025-12-22T16:53:29Z

editor/components/FatalityUnitsCards.tsx

+                          {victim.prsn_exp_homelessness && (
+                            <span>{victim.prsn_exp_homelessness}</span>


This is not rendering anything because its just resolving to an empty span when True

thank you for catching this

chiaberry · 2025-12-22T18:08:34Z

editor/components/FatalityUnitsCards.tsx

+                    <div className="pb-1">
+                      <div className="fw-bold">Charges</div>
+                      {unitCharges.map((charge) => (
+                        <div className="ms-2" key={charge.citation_nbr}>


I got a "same key error" in the console when viewing the crash you linked in the summary, the same citation_nbr was on two charges

chiaberry · 2025-12-22T18:14:49Z

editor/components/FatalityUnitsCards.tsx

+                        <Image
+                          alt="placeholder"
+                          className="me-3"
+                          src={`${BASE_PATH}/assets/img/avatars/placeholder.png`}


it looks good to me!

johnclary

Rose—this looks really good. I've dropped in a few comments and suggestions but this is looking pretty much ready to ship 🙌

johnclary · 2025-12-23T16:06:36Z

editor/components/FatalityUnitsCards.tsx

+
+  const charges = crash.charges_cris;
+
+  const BASE_PATH = process.env.NEXT_PUBLIC_BASE_PATH || "";


This can be declared outside the component

johnclary · 2025-12-23T16:10:38Z

editor/components/FatalityUnitsCards.tsx

+        // Show a card for units with fatalities, charges, or contrib factors
+        if (hasVictim || hasCharges || hasContribFactors) {
+          const unitYearMakeModel =
+            `${unit.veh_mod_year || ""} ${unit.veh_make?.label || ""} ${unit.veh_mod?.label || ""}`.trim();


For readability, it might be nice to move all this data munging into a helper function

johnclary · 2025-12-23T16:13:13Z

editor/components/FatalityUnitsCards.tsx

+        // Get the list of fatalities in the unit
+        const unitVictims = victims?.filter(
+          (victim) => victim.unit_nbr === unit.unit_nbr
+        );


It would be cool if this unit-person hierarchy came through from the graphql API. any reason not to pull the people records via the unit-person relationship instead?

johnclary · 2025-12-23T16:18:44Z

editor/components/FatalityUnitsCards.tsx

+                        <Image
+                          alt="placeholder"
+                          className="me-3"
+                          src={`${BASE_PATH}/assets/img/avatars/placeholder.png`}


Me too—thanks for this!

johnclary · 2025-12-23T16:20:28Z

editor/components/FatalityUnitsCards.tsx

+                              <span className="pb-1">
+                                Restraint used: {victim.rest.label}
+                              </span>
+                            )}


It would be cool to have helper functions to trim down all this render code

johnclary · 2025-12-23T16:21:44Z

editor/components/FatalityUnitsCards.tsx

+                </Card.Body>
+              )}
+              {(hasCharges || hasContribFactors) && (
+                <Card.Footer


maybe spin this off into a UnitCardFooter component?

johnclary · 2025-12-23T16:27:02Z

editor/configs/peopleColumns.tsx

    valueRenderer: (record) => {
      const value = record.injry_sev?.label || "";
-      const className = `${getInjuryColorClass(value)} px-2 py-1 rounded`;
+      const className = `${getInjuryColorClass(value)} px-2 py-1 rounded text-center`;


i'm not seeing this text-center having any effect across any of the places where we render this—am i missing something 👀

while we're looking at this. what do you think about adding text-nowrap so that this doesn't break lines in tables?

johnclary · 2025-12-23T16:28:26Z

editor/styles/global.scss

+[data-bs-theme="light"] .fatality-units-card-header-footer {
+  background-color: $light !important;
+}
+


johnclary · 2025-12-23T16:32:21Z

editor/components/FatalityUnitsCards.tsx

+                  <h5 className="mb-1 me-2">
+                    <span className="fw-bold"> Unit {unit.unit_nbr}</span>
+                  </h5>
+                  <div className="d-flex flex-grow-1 justify-content-start">


Using the primary text color is great—thanks for that!

And, yes, rendering our secondary color over white background should be fine for color contrast.

johnclary · 2025-12-23T16:39:41Z

editor/app/fatalities/[record_locator]/page.tsx

        <Col className="mb-3" sm={12} md={6}>
-          <FatalityVictimsCard crash={crash} />
+          <FatalityUnitsCards crash={crash} />
        </Col>


What do folks think about how to handle when the unit cards vertically overflow the height of the map card? I initially thought we should set a max-height on this column and add vertical scroll so that height of both rows of cards is consistent. But I assume Mary would probably prefer to have all victims visible without scrolling. It is very rare to have a crash more than two fatalities—just three crashes in the last five years.

Good question! 🤔 TLDR: I think it's cool as is, but I say that without strong conviction.

In Rose's testing instructions, she asks for the viewport to be resized to see how it reacts under different widths, and I happened to be using the crash with four fatalities. It didn't seem unnatural to me the way it is now with the whitespace below the map to give the full-height list of the 4 fatalities.

I think works as is, and if I were to change anything, I'd see if the map could be made to expand to fill the available height but only up to the height of the units + fatality cards. That might not be a great idea as I say it, but something to try?

frankhereford

This works great Rose. I spun it up and I think it's 💯 . Thank you for this work! 🙏

roseeichelmann added 10 commits December 16, 2025 15:39

reconfigured typescript file

9bf9d21

refactor the units card

1f6eed8

styling updates to card header

f49d2e6

rename

7613a26

add charges and contrib factors

f4cde76

update name to FatalityUnitsCards

b04cb07

Adjust padding

e2d5b9c

adjust padding

5144077

padding

160b035

pixel pushing

844cb35

roseeichelmann commented Dec 18, 2025

View reviewed changes

editor/tsconfig.json

Copy link

Contributor Author

roseeichelmann Dec 18, 2025

Choose a reason for hiding this comment

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

this was just some linting of some sort

updates to classname

6c001b4

roseeichelmann commented Dec 18, 2025

View reviewed changes

roseeichelmann added 6 commits December 18, 2025 15:11

fix padding

280d90a

remove text-secondary

7bbb772

remove extra divs, add padding between elements of card body

e1c07a8

reformat motorcycle driver label

8ebdc28

undo this change

e4fd46f

update names to be more clear

7e7914f

roseeichelmann requested review from chiaberry, frankhereford, johnclary, mateoclarke, mddilley and tillyw December 18, 2025 22:12

chiaberry approved these changes Dec 22, 2025

View reviewed changes

roseeichelmann added 2 commits December 23, 2025 10:31

update to render suspected unhoused

7bd4adf

add charge.id for mapping key

8a54243

johnclary reviewed Dec 23, 2025

View reviewed changes

frankhereford approved these changes Dec 29, 2025

View reviewed changes

		{victim.prsn_exp_homelessness && (
		<span>{victim.prsn_exp_homelessness}</span>


		const charges = crash.charges_cris;

		const BASE_PATH = process.env.NEXT_PUBLIC_BASE_PATH \|\| "";

Redesigned victims section with unit cards, contributing factors, and charges #1917

Are you sure you want to change the base?

Redesigned victims section with unit cards, contributing factors, and charges #1917

Uh oh!

Conversation

roseeichelmann commented Dec 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Associated issues

Testing

Ship list

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!

chiaberry left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

roseeichelmann Dec 22, 2025 • 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!

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!

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!

frankhereford Dec 29, 2025 • 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!

frankhereford left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

roseeichelmann commented Dec 17, 2025 •

edited

Loading

roseeichelmann Dec 22, 2025 •

edited

Loading

frankhereford Dec 29, 2025 •

edited

Loading