Intersection Dashboard UI Update #173

mwodahl · 2025-02-27T14:38:54Z

PR Details

This PR updates the intersection dashboard UI to match the following Figma prototype: https://www.figma.com/proto/QG64ugNXpXMUk2vQ1wgPdZ/CV-Manager-Prototype-January-2025?page-id=2143%3A6061&node-id=2146-7749&viewport=-595%2C-659%2C0.22&t=A1CuORABoO0Qexzk-1&scaling=scale-down&content-scaling=fixed&starting-point-node-id=2146%3A6646

Description

This PR includes the following updates:

Vertical tabs now include icons
The intersection ID and Select Intersection buttons are shared between all tabs
The tab content layout has been updated to use grid formatting

How Has This Been Tested?

This was tested locally using docker compose. Additionally, unit tests were verified to run using npm test. Please note that these changes were tested with the theme updates found in #172.

Types of changes

[ X ] Defect fix (non-breaking change that fixes an issue)
New feature (non-breaking change that adds functionality)
Breaking change (fix or feature that cause existing functionality to change)

Checklist:

My changes require new environment variables:
- I have updated the docker-compose, K8s YAML, and all dependent deployment configuration files.
My changes require updates to the documentation:
- I have updated the documentation accordingly.
My changes require updates and/or additions to the unit tests:
- I have modified/added tests to cover my changes.
[ X ] All existing tests pass.

…s, and remove header

jacob6838 · 2025-02-27T16:41:45Z

webapp/src/components/intersections/DataSelectorPage.tsx

-              </Typography>
-            </div>
-          </Box>
+        <Container maxWidth={false} sx={{ pl: '0 !important', pr: '0 !important' }}>


I don't love using !important. Is it absolutely necessary here?

Nope - this has been updated

jacob6838 · 2025-02-27T16:45:16Z

webapp/src/components/VerticalTabs.tsx

@@ -53,6 +54,19 @@ function VerticalTabs(props: VerticalTabProps) {
  const filteredTabs = tabs.filter((tab) => evaluateFeatureFlags(tab.tag))
  const defaultTabKey = filteredTabs[defaultTabIndex ?? 0]?.path

+  const getIcon = (tabName: string) => {


We should pass the icon through the tabs object (VerticalTabItem) instead of hardcoding them here. This component is intended to be generic

Updated to pass the icon through VerticalTabItem instead of hardcoding

jacob6838 · 2025-02-27T16:48:09Z

webapp/src/features/intersections/data-selector/data-selector-edit-form.tsx

        <CardContent>
+          <Typography noWrap variant={'h6'} sx={{ mt: -1, mb: 4 }}>
+            Query
+          </Typography>
          <Grid2 container spacing={3}>
            <Grid2 size={{ md: 6, xs: 12 }}>
              <FormControl fullWidth error={Boolean(formik.touched.intersectionId && formik.errors.intersectionId)}>


Let's add a backlog item for removing the additional Intersection ID selector, now that the intersection ID selector is moved into the same page

Added a backlog item for this

jacob6838 · 2025-02-27T16:49:44Z

webapp/src/features/intersections/notifications/notifications-table.tsx

+      <Container
+        maxWidth={false}
+        sx={{
+          paddingLeft: '0px !important',


Is this !important necessary? This can cause unintended side effects in the future.

Nope - this has been removed.

jacob6838 · 2025-02-27T16:51:35Z

webapp/src/features/intersections/notifications/notifications-table.tsx

-                      fullWidth
-                      inputProps={{ ref: queryRef }}
-                      InputProps={{
+                <Box


This box is quite tall and takes up a lot of visual space

@rgelmis do you have thoughts on making this scrollable?

jacob6838 · 2025-02-27T16:52:27Z

webapp/src/features/intersections/notifications/notifications-table.tsx

                  }}
-                  variant="contained"
+                  variant="outlined"


Check the contrast on this one - the outlined variant is a little hard to read against the dark background

Updated to use a lighter color for the outlined button.

jacob6838 · 2025-02-27T16:55:14Z

webapp/src/features/intersections/reports/report-list-table.tsx

-        rowsPerPage={rowsPerPage}
-        rowsPerPageOptions={[5, 10, 25]}
-      />
+      {props.reportsCount > 1 ? (


should this be >= 1?

Yes - thank you for catching this!

jacob6838 · 2025-02-27T16:56:34Z

webapp/src/pages/IntersectionDashboard.tsx

+          style={{
+            width: `fit-content`,
+            position: 'absolute',
+            top: `calc(${headerTabHeight}px + ${theme.spacing(3)})`,


I don't love using these kinds of relative offsets (line 39, 44, 45, ...) I couldn't come up with a better way, but this would be a good backlog item

Added a backlog item for this

jacob6838 · 2025-02-27T17:00:47Z

The assessments grid does not re-size super well right now - at large window sizes, there are large gaps:

And at smaller screen sizes the panels overlap each other:

jacob6838

A few comments, love the icons and re-arrangement of the vertical tabs

mwodahl · 2025-03-05T21:24:32Z

I added some additional resizing so that the assessments grid looks better on smaller screens. The gaps between these cards on larger screens are due to the cards using a specified width when data is present. @rgelmis do we have a mockup of the assessments grid cards when data is present? Or should the specific width logic be removed altogether?

jacob6838 · 2025-03-11T15:04:06Z

I added some additional resizing so that the assessments grid looks better on smaller screens. The gaps between these cards on larger screens are due to the cards using a specified width when data is present. @rgelmis do we have a mockup of the assessments grid cards when data is present? Or should the specific width logic be removed altogether?

Another option would be to let the white space around the grid grow, without growing the space between the tiles, by setting a max width of the content

mwodahl added 16 commits February 25, 2025 09:32

Add intersection dashboard icons to VerticalTabs

2ef1166

Add intersection selectors to formatted header

687d529

Update dashboard cards with typography formatting

9b0a231

Update dashboard card formatting

56c3a64

Remove query header

7d05b62

Remove filter drawer from reports page

3037343

Remove drawer, update formatting

fc2d272

Update table display to only show when reports are present

28a9088

Update notifications table to use centered tabs, format table control…

8bc005b

…s, and remove header

Add header, format checkbox items

d406ea3

Add grid component wrapper to checkbox item

211dcfb

Update spacing to use theme value

c807c81

Display tab icons correctly

4bfeee3

Update spacing to use mui theme value

5a5481b

Update Dashboard card width

c800f2c

Update persistent icon position

fa3b12b

mwodahl requested review from payneBrandon, mcook42, jacob6838 and rgelmis February 27, 2025 14:38

jacob6838 reviewed Feb 27, 2025

View reviewed changes

jacob6838 requested changes Feb 27, 2025

View reviewed changes

mwodahl changed the base branch from develop to Update/ui-theme February 27, 2025 17:08

jacob6838 requested a review from John-Wiens February 27, 2025 17:40

mwodahl added 4 commits March 4, 2025 07:31

Remove getIcon method and pass through tab directly

0336648

Update assessments grid sizing on different screen sizes

88fdbf6

Remove unnecessary css !important attributes

07b77be

Fix report count comparison

e577230

mwodahl requested a review from jacob6838 March 5, 2025 21:28

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Intersection Dashboard UI Update #173

Intersection Dashboard UI Update #173

mwodahl commented Feb 27, 2025

jacob6838 Feb 27, 2025

mwodahl Mar 5, 2025

jacob6838 Feb 27, 2025

mwodahl Mar 5, 2025

jacob6838 Feb 27, 2025

mwodahl Mar 5, 2025

jacob6838 Feb 27, 2025

mwodahl Mar 5, 2025

jacob6838 Feb 27, 2025

mwodahl Mar 5, 2025

jacob6838 Feb 27, 2025

jacob6838 Feb 27, 2025

mwodahl Mar 5, 2025

jacob6838 Feb 27, 2025

mwodahl Mar 5, 2025

jacob6838 Feb 27, 2025 •

edited

Loading

mwodahl Mar 5, 2025

jacob6838 commented Feb 27, 2025

jacob6838 left a comment

mwodahl commented Mar 5, 2025 •

edited

Loading

jacob6838 commented Mar 11, 2025 •

edited

Loading

Intersection Dashboard UI Update #173

Are you sure you want to change the base?

Intersection Dashboard UI Update #173

Conversation

mwodahl commented Feb 27, 2025

PR Details

Description

How Has This Been Tested?

Types of changes

Checklist:

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

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

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

jacob6838 Feb 27, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jacob6838 commented Feb 27, 2025

jacob6838 left a comment

Choose a reason for hiding this comment

mwodahl commented Mar 5, 2025 • edited Loading

jacob6838 commented Mar 11, 2025 • edited Loading

jacob6838 Feb 27, 2025 •

edited

Loading

mwodahl commented Mar 5, 2025 •

edited

Loading

jacob6838 commented Mar 11, 2025 •

edited

Loading