Location details: crashes list #1640

johnclary · 2024-12-23T19:17:25Z

Associated issues

This PR adds the crashes list to the location details page. I decided to combine the CR3 and non-cr3 crashes into a single table. This feels like a nice improvement over the dual table experience in the old VZE. What do you think?

Testing

URL to test: Local

Steps to test:

Start your local stack - you'll need to apply migrations and metadata for this one

# from /database
hasura migrate apply
hasura metadata apply

Navigation to a location details page and check out that new crashes list. try searching and sorting. Nice!

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

… noncr3s

johnclary · 2024-12-23T20:22:37Z

app/app/locations/[location_id]/page.tsx

+                columns={locationCrashesColumns}
+                initialQueryConfig={locationCrashesQueryConfig}
+                localStorageKey="locationCrashesQueryConfig"
+                contextFilters={locationIdFilter}


new contextFilters prop that let's us pass in this location ID filter . The main challenge here is that the primary queryConfig gets saved in local storage, and we don't want to include the location_id filter in the local storage config, because it's a dynamic value.

I thought about a few a different ways to approach, but this seemed simple enough for now. I believe this is the only place in the app where we'll need to use this new feature.

it took me a second to wrap my head it, but, when I thought about the filter being about crashes in the context of a location, it clicked. I like the name, and I feel like it is straightforward to tie what I see in the network request to the code. 👍

can you mention in your comment the need for the location_id filter to be dynamic unlike the query config thats saved in local storage? i feel like reading your comment here was super helpful but i might have been confused if i just was looking at the code

johnclary · 2024-12-23T20:23:15Z

app/components/TableAdvancedSearchFilterMenu.tsx

@@ -53,7 +53,7 @@ export default function TableAdvancedSearchFilterMenu({
    <Row className="p-2 bg-light">
      {queryConfig.filterCards.map((filterCard) => {
        return (
-          <Col key={filterCard.id}>
+          <Col key={filterCard.id} xs={12} md={3}>


keeps those filter cards from growing too wide

Probably not a huge concern, but, in the Crashes list view, I noticed that some of the filter switches become hidden behind the list below when they go full-width at smaller widths. I don't think anyone is using that small of a screen but wanted to mention if it was relevant.

ah yes—there's some questionable CSS working on this filter menu that i hoped you wouldn't notice. here's another short thread about this menu, too. i will open a follow-up issue to get this UI straightened out 🙏

edit:

[Bug] Filter cards hidden on small screen widths atd-data-tech#20424

johnclary · 2024-12-23T20:24:32Z

app/configs/locationCrashesTable.ts

+
+const columns = locationCrashesColumns.map((col) => String(col.path));
+
+const locationCrashesFiltercards: FilterGroup[] = [


the old VZE has a lot of advanced filters on the cr3 crashes table. i'm a bit skeptical we need all of them. i will check with Xavier.

i'd also like to check in with some of our non-VZ users who access this page. we have a few power users identified from the ACC research.

johnclary · 2024-12-23T20:27:06Z

database/migrations/default/1734981892414_location_crashes_record_locator/up.sql

Adding a few columns to this view:

record_locator - so that we can link to the crash details page

crash_timestamp - so that we have a UTC timestamp to operate on

mddilley

I tested this and everything worked as expected, and I like the combined table! I think the filters cover any case where someone would want to see only CR3 on non-CR3. I often used to forget to scroll all the way down, and I remember that causing a regression or two in the past. Feels like an upgrade to me! 🙌 🚀

mddilley · 2024-12-27T17:47:10Z

app/app/locations/[location_id]/page.tsx

+                columns={locationCrashesColumns}
+                initialQueryConfig={locationCrashesQueryConfig}
+                localStorageKey="locationCrashesQueryConfig"
+                contextFilters={locationIdFilter}


it took me a second to wrap my head it, but, when I thought about the filter being about crashes in the context of a location, it clicked. I like the name, and I feel like it is straightforward to tie what I see in the network request to the code. 👍

mddilley · 2024-12-27T17:57:55Z

app/components/TableAdvancedSearchFilterMenu.tsx

@@ -53,7 +53,7 @@ export default function TableAdvancedSearchFilterMenu({
    <Row className="p-2 bg-light">
      {queryConfig.filterCards.map((filterCard) => {
        return (
-          <Col key={filterCard.id}>
+          <Col key={filterCard.id} xs={12} md={3}>


Probably not a huge concern, but, in the Crashes list view, I noticed that some of the filter switches become hidden behind the list below when they go full-width at smaller widths. I don't think anyone is using that small of a screen but wanted to mention if it was relevant.

mddilley · 2024-12-27T18:12:24Z

database/migrations/default/1734981892414_location_crashes_record_locator/up.sql

i tested the down migration, saw the expected error in the graphql response from the missing record location and timestamp columns, and then ran the up again to restore the UI functionality. All of this works! 💯

roseeichelmann · 2024-12-31T20:15:29Z

app/app/locations/[location_id]/page.tsx


 const typename = "atd_txdot_locations";

+/**
+ * Hook which returns builds a Filter array with the `location_id` param.


typo here, maybe just "Hook which returns a filter array.."

roseeichelmann · 2024-12-31T20:54:04Z

app/components/TableWrapper.tsx

@@ -20,6 +20,7 @@ interface TableProps<T extends Record<string, unknown>> {
  columns: ColDataCardDef<T>[];
  initialQueryConfig: QueryConfig;
  localStorageKey: string;
+  contextFilters?: Filter[] 
 }

 /**


what is the general opinion of docstrings in our new VZ typescript codebase? i think it would be helpful to have descriptions for these params here. here are the official typescript doc specifications. seems like the main difference from JSDoc is that it doesn't use type annotations bc that would be repetitive

roseeichelmann · 2024-12-31T21:04:18Z

app/utils/queryBuilder.ts

  useMemo(() => {
-    return buildQuery(queryConfig);
+    return buildQuery(queryConfig, contextFilters);
  }, [queryConfig]);


i see the eslint error here about contextFilters being missing in the dependency array

roseeichelmann

I reallyyyy like how you combined the two tables and simplified the filters for now. Looks and works so good!

johnclary added 3 commits December 23, 2024 14:10

add contextFilters

50bc377

add contextFilters to TableWrapper

ad5a72f

add location crashes to location details page

579102a

johnclary added the WIP Work in progress label Dec 23, 2024

johnclary changed the base branch from main to john/20316-nested-object-support December 23, 2024 19:17

johnclary added 4 commits December 23, 2024 14:32

add record_locator to location crashes view

f27e25e

docstring

f23bdd5

add crash_timestamp to location_crashes and nullify cris_crash_id for…

dec6d2d

… noncr3s

add more cols plus date filters

a24ab74

johnclary commented Dec 23, 2024

View reviewed changes

typo

5333278

johnclary commented Dec 23, 2024

View reviewed changes

johnclary requested review from mateoclarke, chiaberry, tillyw, frankhereford, mddilley and roseeichelmann December 23, 2024 20:28

johnclary removed the WIP Work in progress label Dec 23, 2024

johnclary added 2 commits December 23, 2024 15:43

update todos

518a105

fix default sort col name

c4ddb9c

mddilley approved these changes Dec 27, 2024

View reviewed changes

This was referenced Dec 27, 2024

Create crash records #1643

Open

[Bug] Filter cards hidden on small screen widths cityofaustin/atd-data-tech#20424

Open

roseeichelmann reviewed Dec 31, 2024

View reviewed changes

roseeichelmann approved these changes Dec 31, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Location details: crashes list #1640

Location details: crashes list #1640

johnclary commented Dec 23, 2024 •

edited

Loading

johnclary Dec 23, 2024 •

edited

Loading

mddilley Dec 27, 2024

roseeichelmann Dec 31, 2024

johnclary Dec 23, 2024

mddilley Dec 27, 2024

johnclary Dec 31, 2024 •

edited

Loading

johnclary Dec 23, 2024

johnclary Dec 23, 2024

mddilley left a comment

mddilley Dec 27, 2024

mddilley Dec 27, 2024

mddilley Dec 27, 2024 •

edited

Loading

roseeichelmann Dec 31, 2024

roseeichelmann Dec 31, 2024 •

edited

Loading

roseeichelmann Dec 31, 2024

roseeichelmann left a comment


		const columns = locationCrashesColumns.map((col) => String(col.path));

		const locationCrashesFiltercards: FilterGroup[] = [

Location details: crashes list #1640

Are you sure you want to change the base?

Location details: crashes list #1640

Conversation

johnclary commented Dec 23, 2024 • edited Loading

Associated issues

Testing

Ship list

johnclary Dec 23, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

johnclary Dec 31, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mddilley left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mddilley Dec 27, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

roseeichelmann Dec 31, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

roseeichelmann left a comment

Choose a reason for hiding this comment

johnclary commented Dec 23, 2024 •

edited

Loading

johnclary Dec 23, 2024 •

edited

Loading

johnclary Dec 31, 2024 •

edited

Loading

mddilley Dec 27, 2024 •

edited

Loading

roseeichelmann Dec 31, 2024 •

edited

Loading