Configures pop-ups for sign locations added to work order by mateoclarke · Pull Request #343 · cityofaustin/atd-knack-signs-markings

mateoclarke · 2026-04-20T17:44:35Z

Associated issue

Closes cityofaustin/atd-data-tech#26881

Summary

Two related pieces of work shipped together on this branch:

1. Pop-up enhancements for sign locations added to a work order

Popups now prefer Location ID (from AGOL ASSET_LOCATION_ID / Knack field_4461) and fall back to Spatial ID only when no Location ID is present.
Lat/lng is no longer shown in the popup.
When a Knack sign-location pin shares a lat/lng with an AGOL sign (within ~5 m), the AGOL marker is hidden and its attributes (including sign messages) are merged into the Knack pin's popup.
The ID row in the popup is now a link that opens the Location Details page in Knack.

2. Symbology + default mode + "Add Location" button styling

Knack sign locations now render as circular points (not pins) with state-based styling:
- Yellow — existing Knack sign location
- Green with a "NEW" label — newly-created location (no AGOL ASSET_LOCATION_ID)
- Red — the location currently being viewed on a Location Details page
Map defaults to Select Existing mode on first load; user's last choice is still persisted in sessionStorage.
The "Add Location" button in Create Location mode is restyled to match the popup's Bootstrap btn-primary and is centered at the bottom of the map.

Testing

Use the test Knack app test-30-may-2024-signs-and-markings-operations and GIS QA credentials (from 1Password).

Steps to test:

1. Default mode is "Select Existing"

If necessary, clear sessionStorage for the Knack app origin (DevTools > Application > Storage > Clear site data), then load the Add Sign Location view on an existing work order.
Expected: The Select Existing toggle is active by default (not Create Location).
Switch to Create Location, reload the page.
Expected: The map restores Create Location — the last-used mode is still persisted across reloads.

2. Pop-ups prefer Location ID and link to details & No lat/lng in popups

In Select Existing mode, click an AGOL sign that is not already added to the work order.
Expected popup shows: sign message(s), no lat/lng row, no Spatial ID.
Add the location to the work order, then click the newly-created pin.
Expected: The pin is yellow (indicating it was created from an existing sign location). Also, the popup shows Location ID, and the ID is a link to that location's details page.
From Create Location mode, drop a new pin by dragging the red pin in place and clicking "Add Location" button.
Expected: The new pin is green (new), popup shows Spatial ID (not Location ID since it creates a new value instead of inheriting one from AGOL), and the ID links to the location's details page.
Click any sign popup (AGOL-only, existing Knack, newly-created Knack).
Expected: No Lat / Lng rows in any popup variant.

3. Co-located AGOL + Knack sign de-dup

Find a work order with at least one Knack sign location that was originally added from AGOL (ex: link this one).
Load the map and zoom in until AGOL features appear.
Expected: At that Knack pin's location, only the yellow Knack point is visible — the AGOL marker at the same lat/lng should be hidden.
Click the Knack point. Expected: The popup shows the Location ID and the sign messages merged in from AGOL (proves the AGOL attributes were merged rather than dropped).
Zoom out past the AGOL display threshold and back in. Expected: Blue dots disappear outside zoom threshold, yellow dots stay visible.
From "Select Existing" mode, click a blue dot to open the popup and "Add this Location". Expected: When the map reloads, only a yellow dot appears in the place of the blue dot that was there.

4. Symbology

On a work order with mixed signs, visually confirm:
- Existing Knack locations → yellow circle, no label
- Newly-created (from "Create Location" mode) → green circle with NEW label
- If you navigate into a Location Details page, the sign for the current location renders as a red circle.

5. "Add Location" button update in "Create Location" mode

Switch to Create Location mode on a work order map.
Expected: The Add Location button is styled like the blue popup primary button (matching btn-primary), and is centered at the bottom of the map, not tucked into the form layout.
Click the button. Expected: A new location is created at the center of the map and handed off to Knack as before.

netlify · 2026-04-20T17:44:41Z

✅ Deploy Preview for nextjs-knack-signs-markings canceled.

Name	Link
🔨 Latest commit	`e8cbce4`
🔍 Latest deploy log	https://app.netlify.com/projects/nextjs-knack-signs-markings/deploys/69f502764b53190008454c55

…ial IDs

mateoclarke · 2026-04-22T19:08:51Z

 }
 /* END #233 */
+
+#view_3207 > div.kn-records-nav > div.js-filter-menu.tabs.is-toggle.is-flush > ul > li:nth-child(2) > a{


All of this to the bottom of the page was in the test environment but not committed, and I didn't want to overwrite it without knowing why it was added.

mateoclarke · 2026-04-22T19:20:14Z

  );
-  const signPins = useCreateSignPins(knackSigns, setPopupInfo);
+
+  // Merge AGOL attributes into co-located Knack signs and filter those


This logic is essentially to dedupe and merge data so we don't have the problem of Knack signs and AGOL locations overlapping.

mateoclarke · 2026-04-22T19:21:36Z

+  // Merge AGOL attributes into co-located Knack signs and filter those
+  // AGOL features out of the layer so they don't render on top of Knack pins.
+  const { enrichedSigns, filteredAgolGeoJSON } = useMemo(() => {
+    if (!isZoomedInEnough || agolSignsGeoJSON.features.length === 0) {


This is the fast path short circuit if the user isn't zoomed to see AGOL layer. Or if there's no features in the AGOL geojson layer.

mateoclarke · 2026-04-22T19:55:52Z

  };
 }

+const COLOCATION_THRESHOLD_METERS = 5;


Open to feedback on this threshold should be smaller.

my feeling is this is something to refine with user feedback, I have no idea if this is too big of a threshold in areas where there are a ton of signs close to each other.

mateoclarke · 2026-04-29T19:57:49Z

Note from @ChristinaTremel after review on 4/23:

Mateeeeoooo! 🙌 Testing steps were 10/10. And the changes look SO goood! I love the switch up to the points that are added to the work order and how transparently someone can see the new locations they're adding. Also the changes to the add location button feels way more natural to click around on the map. I'm out of office this afternoon through Monday so I ran through everything quickly this morning. Early next week I can get a tablet and test on that as well!

Upon initial testing the only thing I'm noticing is when a location is added, the map zooms out further than I would expect it to and I have to zoom back in every time. I think if it could zoom out less when the map reloads that would be helpful!

roseeichelmann

followed all the test steps and they worked as expected!

whenever you switch to Create Location, would it be possible to automatically close out of any pin popups you had selected? Bc its kind of confusing when you have a popup open and you click Create Location and the red marker is covered by the popup.

chiaberry · 2026-05-04T18:17:26Z

what do you think about adding some comments that alert the app team to not touch these styles without checking with the dev team, or a comment saying that these specific styles are used in the react map integration. Something to let them know where the styles are being applied

chiaberry · 2026-05-04T18:30:12Z

    const raw = sessionStorage.getItem(STORAGE_KEY);
    if (isLocationMode(raw)) return raw;
  } catch {
    // private mode / quota


just curious, what does "quota" mean?

chiaberry

🚀
this looks so slick Mateo, I missed the last PR so this is a huge jump in user experience for me.

It could be because I am on VPN, but I noticed some delay between clicking to select an existing location and getting feedback (the map reloading). I am guessing it is knack slowness, maybe some visual feedback before the map reloads, like a loading icon or something while knack is trying to process the data?

I added locations, zoomed in and out, deleted locations and checked the location details pages. all looks so good!

pop-up enhancements when signs locations are added to work order

192448a

mateoclarke changed the base branch from staging to 21517-app-next April 20, 2026 17:44

mateoclarke marked this pull request as draft April 20, 2026 17:45

mateoclarke added 4 commits April 20, 2026 22:33

adds “new” label

0932e31

sets default state to “Select Exisiting”

3e85f47

update popups to link to details page and prioritize location vs spat…

ba897bb

…ial IDs

centers “add location” button

0725645

mateoclarke commented Apr 22, 2026

View reviewed changes

replace haversine algo with turf/distance

b8bae1d

mateoclarke requested a review from ChristinaTremel April 22, 2026 22:24

mateoclarke marked this pull request as ready for review April 22, 2026 22:25

mateoclarke requested review from Charlie-Henry, chiaberry, frankhereford, johnclary, mddilley, roseeichelmann and tillyw April 29, 2026 19:58

try to renew deploy preview

e8cbce4

roseeichelmann approved these changes May 1, 2026

View reviewed changes

chiaberry reviewed May 4, 2026

View reviewed changes

chiaberry approved these changes May 4, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Configures pop-ups for sign locations added to work order#343

Configures pop-ups for sign locations added to work order#343
mateoclarke wants to merge 7 commits into21517-app-nextfrom
mateo/26881_pop_ups

mateoclarke commented Apr 20, 2026 •

edited

Loading

Uh oh!

netlify Bot commented Apr 20, 2026 •

edited

Loading

Uh oh!

mateoclarke Apr 22, 2026

Uh oh!

mateoclarke Apr 22, 2026

Uh oh!

mateoclarke Apr 22, 2026

Uh oh!

mateoclarke Apr 22, 2026

Uh oh!

chiaberry May 4, 2026

Uh oh!

mateoclarke commented Apr 29, 2026

Uh oh!

roseeichelmann left a comment

Uh oh!

chiaberry May 4, 2026

Uh oh!

chiaberry May 4, 2026

Uh oh!

chiaberry left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

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

Uh oh!

Associated issue

Summary

1. Pop-up enhancements for sign locations added to a work order

2. Symbology + default mode + "Add Location" button styling

Testing

1. Default mode is "Select Existing"

2. Pop-ups prefer Location ID and link to details & No lat/lng in popups

3. Co-located AGOL + Knack sign de-dup

4. Symbology

5. "Add Location" button update in "Create Location" mode

Uh oh!

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

Uh oh!

✅ Deploy Preview for nextjs-knack-signs-markings canceled.

Uh oh!

mateoclarke Apr 22, 2026

Choose a reason for hiding this comment

Uh oh!

mateoclarke Apr 22, 2026

Choose a reason for hiding this comment

Uh oh!

mateoclarke Apr 22, 2026

Choose a reason for hiding this comment

Uh oh!

mateoclarke Apr 22, 2026

Choose a reason for hiding this comment

Uh oh!

chiaberry May 4, 2026

Choose a reason for hiding this comment

Uh oh!

mateoclarke commented Apr 29, 2026

Uh oh!

roseeichelmann left a comment

Choose a reason for hiding this comment

Uh oh!

chiaberry May 4, 2026

Choose a reason for hiding this comment

Uh oh!

chiaberry May 4, 2026

Choose a reason for hiding this comment

Uh oh!

chiaberry left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

mateoclarke commented Apr 20, 2026 •

edited

Loading

netlify Bot commented Apr 20, 2026 •

edited

Loading