Tsk4.04.01 highlight indoor poi (#205)

* make some POI metadata consistent

* added missing ',' in H map data that cause it to malfunction

* adding indoor  markers in png and svg format in asset folder

* adjusting nodes for POI markers in indoor map

* togglable highlights for indoor POIs

* bruh forgot to change a test

* linter bruh

* adjusted some map data to stop it from hiding some room numbers in H

* [REFACTOR] Extracted the highlight logic and separated into helper methods to reduce complexity and improve readibility

* Changing colors, hopefully better for my colorblind brothers and sisters out there

* forgot to change color for dark mode as well

* fixed mislabeled bathroom in LB + increased opacity of highlights to make them more visible

* renamed folder to a better and more accurate name

* adjusting colors

* changed some icons + changed some colors

* changed some highlight colors

* changed icons

* changing VL map data due to icon hiding room number

* changed icons in settings to use icons that are displayed on map

* Made highlights larger to make them more visible

Author: YehJordan

__tests__/building-floor.test.tsx

@@ -2,6 +2,14 @@ import BuildingFloor from "@/components/map/building-floor";
 import { render } from "@testing-library/react-native";
 
 describe("building floor", () => {
+  const basePoiFilters = {
+    bathrooms: false,
+    elevators: false,
+    waterFountains: false,
+    stairs: false,
+    escalators: false,
+  };
+
   const baseInfo = {
     buildingCode: "H" as const,
     graphData: {
@@ -34,6 +42,57 @@ describe("building floor", () => {
           y: 100,
           accessible: true,
         },
+        H_BATHROOM: {
+          id: "H_BATHROOM",
+          type: "point_of_interest",
+          buildingId: "H",
+          floor: 1,
+          x: 350,
+          y: 100,
+          accessible: true,
+          metadata: {
+            POI: "Bathroom",
+          },
+        },
+        H_WATER_FOUNTAIN: {
+          id: "H_WATER_FOUNTAIN",
+          type: "point_of_interest",
+          buildingId: "H",
+          floor: 1,
+          x: 380,
+          y: 100,
+          accessible: true,
+          metadata: {
+            POI: "Water fountain",
+          },
+        },
+        H_ELEVATOR_DOOR: {
+          id: "H_ELEVATOR_DOOR",
+          type: "elevator_door",
+          buildingId: "H",
+          floor: 1,
+          x: 410,
+          y: 100,
+          accessible: true,
+        },
+        H_STAIR_LANDING: {
+          id: "H_STAIR_LANDING",
+          type: "stair_landing",
+          buildingId: "H",
+          floor: 1,
+          x: 440,
+          y: 100,
+          accessible: false,
+        },
+        H_ESCALATOR: {
+          id: "H_ESCALATOR",
+          type: "escalator",
+          buildingId: "H",
+          floor: 1,
+          x: 470,
+          y: 100,
+          accessible: true,
+        },
       },
     },
     images: {
@@ -42,14 +101,15 @@ describe("building floor", () => {
   };
 
   it("Should render", () => {
-    render(<BuildingFloor floor={1} info={baseInfo} />);
+    render(<BuildingFloor floor={1} info={baseInfo} poiFilters={basePoiFilters} />);
   });
 
   it("highlights the active edge while dimming other edges in step mode", () => {
     const { getByTestId } = render(
       <BuildingFloor
         floor={1}
         info={baseInfo}
+        poiFilters={basePoiFilters}
         navigationPath={["H110", "H111", "H112"]}
         isStepMode
         activeStepIndex={1}
@@ -64,4 +124,127 @@ describe("building floor", () => {
     expect(edge1.props.strokeOpacity).toBe(1);
     expect(edge1.props.strokeWidth).toBe(22);
   });
+
+  it("renders bathroom icons for bathroom POI nodes", () => {
+    const { queryByTestId } = render(
+      <BuildingFloor floor={1} info={baseInfo} poiFilters={basePoiFilters} />,
+    );
+
+    expect(queryByTestId("bathroom-icon-H_BATHROOM")).toBeTruthy();
+  });
+
+  it("renders water fountain icons for water fountain POI nodes", () => {
+    const { queryByTestId } = render(
+      <BuildingFloor floor={1} info={baseInfo} poiFilters={basePoiFilters} />,
+    );
+
+    expect(queryByTestId("water-fountain-icon-H_WATER_FOUNTAIN")).toBeTruthy();
+  });
+
+  it("renders elevator icons for elevator door nodes", () => {
+    const { queryByTestId } = render(
+      <BuildingFloor floor={1} info={baseInfo} poiFilters={basePoiFilters} />,
+    );
+
+    expect(queryByTestId("elevator-icon-H_ELEVATOR_DOOR")).toBeTruthy();
+  });
+
+  it("renders stair icons for stair landing nodes", () => {
+    const { queryByTestId } = render(
+      <BuildingFloor floor={1} info={baseInfo} poiFilters={basePoiFilters} />,
+    );
+
+    expect(queryByTestId("stair-icon-H_STAIR_LANDING")).toBeTruthy();
+  });
+
+  it("renders escalator icons for escalator nodes", () => {
+    const { queryByTestId } = render(
+      <BuildingFloor floor={1} info={baseInfo} poiFilters={basePoiFilters} />,
+    );
+
+    expect(queryByTestId("escalator-icon-H_ESCALATOR")).toBeTruthy();
+  });
+
+  it("highlights water fountain nodes when the water fountains toggle is enabled", () => {
+    const { queryByTestId } = render(
+      <BuildingFloor
+        floor={1}
+        info={baseInfo}
+        poiFilters={{
+          ...basePoiFilters,
+          waterFountains: true,
+        }}
+      />,
+    );
+
+    expect(queryByTestId("water-fountain-highlight-H_WATER_FOUNTAIN")).toBeTruthy();
+  });
+
+  it("does not highlight water fountain nodes when the water fountains toggle is disabled", () => {
+    const { queryByTestId } = render(
+      <BuildingFloor floor={1} info={baseInfo} poiFilters={basePoiFilters} />,
+    );
+
+    expect(queryByTestId("water-fountain-highlight-H_WATER_FOUNTAIN")).toBeNull();
+  });
+
+  it("highlights bathroom nodes when the bathrooms toggle is enabled", () => {
+    const { queryByTestId } = render(
+      <BuildingFloor
+        floor={1}
+        info={baseInfo}
+        poiFilters={{
+          ...basePoiFilters,
+          bathrooms: true,
+        }}
+      />,
+    );
+
+    expect(queryByTestId("bathroom-highlight-H_BATHROOM")).toBeTruthy();
+  });
+
+  it("highlights elevator nodes when the elevators toggle is enabled", () => {
+    const { queryByTestId } = render(
+      <BuildingFloor
+        floor={1}
+        info={baseInfo}
+        poiFilters={{
+          ...basePoiFilters,
+          elevators: true,
+        }}
+      />,
+    );
+
+    expect(queryByTestId("elevator-highlight-H_ELEVATOR_DOOR")).toBeTruthy();
+  });
+
+  it("highlights stair nodes when the stairs toggle is enabled", () => {
+    const { queryByTestId } = render(
+      <BuildingFloor
+        floor={1}
+        info={baseInfo}
+        poiFilters={{
+          ...basePoiFilters,
+          stairs: true,
+        }}
+      />,
+    );
+
+    expect(queryByTestId("stair-highlight-H_STAIR_LANDING")).toBeTruthy();
+  });
+
+  it("highlights escalator nodes when the escalators toggle is enabled", () => {
+    const { queryByTestId } = render(
+      <BuildingFloor
+        floor={1}
+        info={baseInfo}
+        poiFilters={{
+          ...basePoiFilters,
+          escalators: true,
+        }}
+      />,
+    );
+
+    expect(queryByTestId("escalator-highlight-H_ESCALATOR")).toBeTruthy();
+  });
 });

__tests__/components/map/map-settings.test.tsx

@@ -39,7 +39,9 @@ describe("MapSettings Component", () => {
     poiFilters: {
       bathrooms: true,
       elevators: false,
-      washrooms: true,
+      waterFountains: true,
+      stairs: false,
+      escalators: false,
     },
     setPoiFilters: jest.fn(),
   };
@@ -62,7 +64,7 @@ describe("MapSettings Component", () => {
     fireEvent.press(icon.parent);
 
     expect(getByText("Settings")).toBeTruthy();
-    expect(getByText("Points of Interest")).toBeTruthy();
+    expect(getByText("Highlight Points of Interest")).toBeTruthy();
   });
 
   it("should toggle the wheelchair accessibility switch", () => {
@@ -118,8 +120,12 @@ describe("MapSettings Component", () => {
     fireEvent.press(icon.parent);
 
     const checkboxes = getAllByText("checkbox");
+    const uncheckedBoxes = getAllByText("square-outline");
 
     expect(checkboxes.length).toBe(2);
-    expect(getByText("square-outline")).toBeTruthy();
+    expect(uncheckedBoxes.length).toBe(3);
+    expect(getByText("Water Fountains")).toBeTruthy();
+    expect(getByText("Stairs")).toBeTruthy();
+    expect(getByText("Escalators")).toBeTruthy();
   });
 });

app/(tabs)/(map)/[buildingCode].tsx

@@ -78,7 +78,9 @@ export default function IndoorMap() {
   const [poiFilters, setPoiFilters] = useState({
     bathrooms: false,
     elevators: false,
-    washrooms: false,
+    waterFountains: false,
+    stairs: false,
+    escalators: false,
   });
   const previousWheelchairOnly = useRef(wheelchairOnly);
 
@@ -641,10 +643,10 @@ export default function IndoorMap() {
             routeError={inputValidationError ?? routeError}
           />
           <MapSettings
-            wheelchairOnly={wheelchairOnly} //TODO temp
-            setWheelchairOnly={handleSetWheelchairOnly} //TODO temp
-            poiFilters={poiFilters} //TODO temp
-            setPoiFilters={setPoiFilters} //TODO temp
+            wheelchairOnly={wheelchairOnly}
+            setWheelchairOnly={handleSetWheelchairOnly}
+            poiFilters={poiFilters}
+            setPoiFilters={setPoiFilters}
           />
           <IndoorNavigationControls
             onNext={() => {
@@ -671,6 +673,7 @@ export default function IndoorMap() {
           />
           <BuildingFloor
             info={floorInfo}
+            poiFilters={poiFilters}
             navigationPath={navigationPath}
             floor={defaultFloor}
             isStepMode={hasStepNavigation}