Tsk4.04.01 highlight indoor poi

[YehJordan]

Summary

Adds new feature to highlight indoor POIs

Indoor POIs include:

• Bathrooms
• Elevators
• Escalators
• Stairs
• Water fountains

Adds new toggle buttons in the indoor settings:

• Elevator button
• Escalator button
• Stairs button
• Water fountain button
• Removes washroom button (due to it being similar to bathrooms)

When POIs are toggled in the settings, they become highlighted. Types of POIs are highlighted differently

Related Issues

Closes: TSK #issue
#156 TSK4.04.01 – Display and highlight Points of interest on each floor

Changes Made

Shows toggle feature
https://github.com/user-attachments/assets/0ba6ac89-3f5b-455e-a628-e352a69bf88c

Images instead:

Testing

• Manual testing performed (describe briefly)
• Unit tests added or updated (if applicable)
• All tests pass locally / in CI

Checklist (Author & Reviewer)

• Code follows project conventions
• The change was run locally and works as expected
• Acceptance criteria met
• No breaking changes

[Copilot]

Pull request overview

This PR adds indoor “highlight points of interest” support by standardizing POI metadata in indoor graph data and rendering category-specific icons + highlight overlays on indoor floor maps, controlled via new toggles in the indoor map settings.

Changes:

• Extend indoor checkpoint typing to support optional POI metadata used for categorization.
• Add indoor POI highlight toggles (bathrooms, elevators, water fountains, stairs, escalators) and pass them into floor rendering.
• Render POI icons/highlight rectangles on indoor floors and update indoor graph JSON + theme colors to support the feature.

Reviewed changes

Copilot reviewed 13 out of 18 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
types/mapTypes.ts	Adds optional metadata.POI to FloorCheckpoint to classify indoor POIs.
constants/theme.ts	Introduces highlight colors for indoor POI categories (light + dark).
components/map/indoor-map-settings.tsx	Updates settings UI to toggle highlighting for multiple indoor POI categories.
components/map/building-floor.tsx	Renders POI icons and optional highlight overlays based on poiFilters.
app/(tabs)/(map)/[buildingCode].tsx	Adds new poiFilters state shape and passes it to MapSettings and BuildingFloor.
__tests__/components/map/map-settings.test.tsx	Updates tests for new POI filter shape (but needs one expectation updated to match new header text).
__tests__/building-floor.test.tsx	Adds coverage for rendering/highlighting POI icons and highlights.
data/indoorMapData/jsonGraphs/*.json.txt	Normalizes POI metadata/positions and adjusts some edges to support consistent POI highlighting.
assets/svg/*.png	Adds new PNG assets used as indoor POI icons.

Comments suppressed due to low confidence (1)

components/map/building-floor.tsx:71

• viewContainerRef is a ref object and is always truthy, so the if (!viewContainerRef) { return null; } guard is effectively dead code. If the intent is to gate rendering on the native view being mounted, check viewContainerRef.current (and include it in deps via state), otherwise remove the guard to avoid confusion.

  const nodes = useMemo(() => {
    if (!viewContainerRef) {
      return null;
    }

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

[JenLys]

Icons match UI artifacts and the overall design Great work, approved

[Marian-Hristov]

It is kind of hard to see the icons on certain floors, I think it would be better to either change the colors to more brighter ones or, it might be easier to just add a white-ish background behind the color hightlight in order to make it more visible. Maybe making the highlight border thicker would also help?

[YehJordan]

It is kind of hard to see the icons on certain floors, I think it would be better to either change the colors to more brighter ones or, it might be easier to just add a white-ish background behind the color hightlight in order to make it more visible. Maybe making the highlight border thicker would also help?

I made the colors more opaque to make them more noticeable. I don't really like the idea of adding a whiteish background behind the highlight, because

1: unlike the other floor plans, the LB building has a white background
2: I'm trying to make the back still visible because some icons would possibly hide the room number they are located at

If its too opaque in your opinion, or if you just don't like how it looks (😭) let me know.

[JenLys]

Please consider using the requested universal White on Black icons:

Also try to refrain from using redish and greenish tones, as they would offer low contrast (both appear brown for the most common types of colorblindness).

[YehJordan]

Please consider using the requested universal White on Black icons

Changed some of the colors and put some of the icons available on the figma. I have avoided using green and all the reddish color tones. (ended up being 5 shades of blue 😭)

[benjaminsunliu]

The settings do not seem to be saved. Should we have them be saved so the user does not need to re-set them everytime they go in and out of the indoor view? I did it for the wheelchair accessible toggle, it could be done the same way.

[benjaminsunliu]

Honestly, I don't see much of a difference between highlight on and highlight off. The POI's do not pop more then without it (except the elevator one). To make it more noticeable, should we switch to black icons with transparent background, or would there be a better way to make the POI's more noticeable with the settings checked?

[YehJordan]

The settings do not seem to be saved. Should we have them be saved so the user does not need to re-set them everytime they go in and out of the indoor view? I did it for the wheelchair accessible toggle, it could be done the same way.

The way i see it is that the user will highlight the idoor POIs if they wish to see them more clearly within a building. They might not want to see them once they go in another building. Unlike the accessibility mode, where the user will always need accessibility pathing, a user might not always need to have the highlight of an indoor POI.

If you think its absolutely necessary, i can try to implement it.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
100.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[YehJordan]

Honestly, I don't see much of a difference between highlight on and highlight off. The POI's do not pop more then without it (except the elevator one). To make it more noticeable, should we switch to black icons with transparent background, or would there be a better way to make the POI's more noticeable with the settings checked?

Made the highlights larger to be more noticeable. Hope it helps.

While your proposal sounds good, I think keeping the icons like this is good considering that the LB building is black and white. Having the icons be all black or white with transparent background will make icons hard to see. With these designs, theres some visible contrast without the highlights and they stay consistent in each building.