Development

Dockerfile

@@ -1,8 +1,8 @@
-FROM node:18-alpine as builder
+FROM node:20-alpine as builder
 
 ENV WORK /opt/driver-instructions
 
-RUN apk add git
+RUN apk add --no-cache git openssh-client
 
 # Create app directory
 RUN mkdir -p ${WORK}
@@ -40,4 +40,3 @@ RUN yarn global add serve@^14.2.0
 COPY --from=builder /opt/driver-instructions/build build/
 
 CMD ["serve", "-s", "-l", "3000", "build/"]
-

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hsl-driver-instructions",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "private": true,
   "homepage": "/kuljettaja",
   "dependencies": {
@@ -9,10 +9,12 @@
     "@emotion/styled": "^11.11.0",
     "@mui/material": "^5.13.7",
     "@turf/turf": "^6.5.0",
+    "bfj": "8.0.0",
     "classnames": "^2.2.6",
     "dayjs": "^1.10.7",
     "graphql": "^16.7.1",
     "hsl-map-style": "https://github.com/HSLdevcom/hsl-map-style",
+    "jsonpath-plus": "^10.0.0",
     "leaflet": "^1.9.4",
     "leaflet-path-drag": "^1.8.0-beta.3",
     "lodash": "^4.17.11",
@@ -24,10 +26,21 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.1.0",
-    "react-router-dom": "^5.0.1",
+    "react-router-dom": "5.3.4",
     "react-scripts": "5.0.1",
     "react-tabs": "^6.0.1"
   },
+  "resolutions": {
+    "minimatch": "^3.1.3",
+    "path-to-regexp": "^1.9.0",
+    "serialize-javascript": "^7.0.3",
+    "svgo": "^2.8.1",
+    "nth-check": "^2.0.1",
+    "rollup": "^2.80.0",
+    "underscore": "^1.13.8",
+    "jsonpath": "npm:jsonpath-plus@^10.0.0",
+    "flatted": "^3.4.0"
+  },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
@@ -49,10 +62,10 @@
     ]
   },
   "devDependencies": {
-    "eslint": "^8.44.0",
+    "eslint": "8.57.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-prettier": "^5.0.0",
     "prettier": "^3.0.0"
   }
-}
+}

src/components/MapillaryViewer.js

@@ -46,10 +46,13 @@ const MapillaryViewer = observer(
       resizeListener.current = currentResizeListener;
       currentMly.setFilter(["==", "organizationKey", "227572519135262"]);
       currentMly.on("image", (evt) => {
-        onNavigation({latlng: evt.image.lngLat, computedCompassAngle: evt.image.computedCompassAngle})
+        onNavigation({
+          latlng: evt.image.lngLat,
+          computedCompassAngle: evt.image.computedCompassAngle,
+        });
       });
       mly.current = currentMly;
-    }, [mly.current, resizeListener.current]);
+    }, [createResizeListener, elementId, onNavigation]);
 
     const showLocation = useCallback(
       async (location) => {
@@ -58,26 +61,29 @@ const MapillaryViewer = observer(
             const closest = await getClosestMapillaryImage({
               lat: location.lat,
               lng: location.lng,
-              selectedRoutes
+              selectedRoutes,
             });
             if (closest && closest.id) {
               mly.current
                 .moveTo(closest.id)
                 .then((image) => {
-                  onNavigation({latlng: image.lngLat, computedCompassAngle: image.computedCompassAngle});
+                  onNavigation({
+                    latlng: image.lngLat,
+                    computedCompassAngle: image.computedCompassAngle,
+                  });
                 })
                 .catch((error) => console.warn(error));
               setError(null);
             } else {
               setError("Katukuvia ei löytynyt.");
             }
           } catch (e) {
-            console.log(e)
+            console.log(e);
             setError("Katunäkymän haku epäonnistui.");
           }
         }
       },
-      [mly.current, mly.current && mly.current.isNavigable]
+      [onNavigation, selectedRoutes]
     );
 
     // Clean up separately from other effects
@@ -90,7 +96,7 @@ const MapillaryViewer = observer(
         mly.current = null;
         window.removeEventListener("resize", resizeListener.current);
       };
-    }, []);
+    }, [initMapillary]);
 
     const locationEquals = (location, prevLocation) => {
       if (!prevLocation) {
@@ -107,7 +113,7 @@ const MapillaryViewer = observer(
         showLocation(location);
         prevLocation.current = location;
       }
-    }, [location, prevLocation.current, showLocation]);
+    }, [location, showLocation]);
     return (
       <div className={styles.viewerWrapper}>
         {error && <div className={styles.errorMessage}>{error}</div>}

src/components/home.module.css

@@ -70,19 +70,19 @@
 }
 
 .bus {
-  color: var(--busBlue)
+  color: var(--busBlue);
 }
 
 .tram {
-  color: var(--tramGreen)
+  color: var(--tramGreen);
 }
 
 .lrail {
-  color: var(--lrailAzure)
+  color: var(--lrailAzure);
 }
 
 .trunk {
-  color: var(--trunkOrange)
+  color: var(--trunkOrange);
 }
 
 .row {

src/components/lineAlert.module.css

@@ -1,16 +1,16 @@
 .outline {
-    padding: 1rem 0 1rem 0;
-    border-bottom: 1px solid lightgray;
+  padding: 1rem 0 1rem 0;
+  border-bottom: 1px solid lightgray;
 }
 
 .dateText {
-    font-size: .8rem;
-    font-weight: 700;
+  font-size: 0.8rem;
+  font-weight: 700;
 }
 
 .link {
-    font-size: .8rem;
-    word-wrap: break-word;
-    cursor: pointer;
-    color: var(--busBlue);
-}
+  font-size: 0.8rem;
+  word-wrap: break-word;
+  cursor: pointer;
+  color: var(--busBlue);
+}

src/components/lineAlertList.module.css

@@ -1,19 +1,19 @@
 .alertListContainer {
-    padding: var(--contentContainerPadding);
+  padding: var(--contentContainerPadding);
 }
 
 .noAlertsContainer {
-    margin: 1rem;
-    padding: 1rem;
-    border: 1px solid #ccccdf;
-    border-radius: 10px;
-    text-align: center;
+  margin: 1rem;
+  padding: 1rem;
+  border: 1px solid #ccccdf;
+  border-radius: 10px;
+  text-align: center;
 }
-  
+
 .noAlertsIcon {
-    overflow: visible;
-    transform: scale(.2);
-    width: 200px;
-    height: 150px;
-    margin-left: -2rem;
-}
+  overflow: visible;
+  transform: scale(0.2);
+  width: 200px;
+  height: 150px;
+  margin-left: -2rem;
+}

src/components/lineList.js

@@ -55,7 +55,7 @@ const LineList = (props) => {
   const [query, setQuery] = useState("");
   const [selectedLines, setSelectedLines] = useState([]);
 
-  const { loading, error, data } = useQuery(allLinesQuery);
+  const { loading, data } = useQuery(allLinesQuery);
 
   const updateQuery = useCallback((e) => {
     setQuery(e.target.value);

src/components/mapLeaflet.js

@@ -25,7 +25,6 @@ import styles from "./mapLeaflet.module.css";
 import MapillaryViewer from "./MapillaryViewer.js";
 import { isMobile } from "../utils/browser";
 import MapPrinter from "./mapPrinter";
-import { generateStyle } from "hsl-map-style";
 
 const MAX_DISTANCE_TO_RESTROOM = 500;
 

src/components/mapPrinter.module.css

@@ -82,7 +82,9 @@
 
 input:-webkit-autofill,
 input:-webkit-autofill:focus {
-  transition: background-color 600000s 0s, color 600000s 0s;
+  transition:
+    background-color 600000s 0s,
+    color 600000s 0s;
 }
 
 .customSlider {

src/icons/mapillaryImageMargerIcon.js

@@ -1,7 +1,8 @@
-
 export function mapillaryImageMargerIcon(angle) {
   const correctedAngle = angle - 90;
-  return `<svg fill="red" width="15px" height="15px" viewBox="-96 0 512 512" xmlns="http://www.w3.org/2000/svg" style="transform: rotate(${correctedAngle}deg); transform-origin: center;">` +
-            `<path d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"/>` +
-          `</svg>`;
+  return (
+    `<svg fill="red" width="15px" height="15px" viewBox="-96 0 512 512" xmlns="http://www.w3.org/2000/svg" style="transform: rotate(${correctedAngle}deg); transform-origin: center;">` +
+    `<path d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"/>` +
+    `</svg>`
+  );
 }

src/styles/common.css

@@ -11,7 +11,7 @@
   --fontColor: rgb(20, 20, 20);
   --busBlue: rgb(0, 122, 201);
   --tramGreen: rgb(0, 152, 95);
-  --lrailAzure: #0098A1;
+  --lrailAzure: #0098a1;
   --trunkOrange: #ff6319;
   --lightGray: rgb(221, 222, 220);
   --mediumGray: rgb(102, 102, 102);

src/utils/mapUtils.js

@@ -20,7 +20,6 @@ const fetchRetry = async (url, delay, tries, fetchOptions = {}) => {
   return res;
 };
 
-
 const bearingToCompassAngle = (bearing) => {
   const compassAngle = (bearing + 360) % 360;
   return compassAngle;
@@ -38,7 +37,6 @@ export async function getCompassAngle({ closestCoordinate, nextCoordinate }) {
 }
 
 export async function getClosestMapillaryImage({ lat, lng, selectedRoutes }) {
-
   const p = turf.point([lng, lat]);
   const buffer = turf.buffer(p, 0.05, { units: "kilometers" });
   const bbox = turf.bbox(buffer);
@@ -47,26 +45,30 @@ export async function getClosestMapillaryImage({ lat, lng, selectedRoutes }) {
 
   selectedRoutes.forEach((route) => {
     route.geometries.nodes[0].geometry.coordinates.forEach((coord) => {
-        pointsWithGeometry.push({
-          point: turf.point(coord),
-          geometry: route.geometries.nodes[0].geometry.coordinates,
-        });
+      pointsWithGeometry.push({
+        point: turf.point(coord),
+        geometry: route.geometries.nodes[0].geometry.coordinates,
+      });
     });
   });
 
-  const pointsCollection = turf.featureCollection(pointsWithGeometry.map(pg => pg.point));
+  const pointsCollection = turf.featureCollection(
+    pointsWithGeometry.map((pg) => pg.point)
+  );
 
   const nearest = turf.nearestPoint(p, pointsCollection);
 
-  const nearestGeometry = pointsWithGeometry.find(pg => 
-    pg.point.geometry.coordinates[0] === nearest.geometry.coordinates[0] &&
-    pg.point.geometry.coordinates[1] === nearest.geometry.coordinates[1]
+  const nearestGeometry = pointsWithGeometry.find(
+    (pg) =>
+      pg.point.geometry.coordinates[0] === nearest.geometry.coordinates[0] &&
+      pg.point.geometry.coordinates[1] === nearest.geometry.coordinates[1]
   ).geometry;
 
   let nextCoordinate;
-  const nearestCoordIndex = nearestGeometry.findIndex(coord =>
-    coord[0] === nearest.geometry.coordinates[0] &&
-    coord[1] === nearest.geometry.coordinates[1]
+  const nearestCoordIndex = nearestGeometry.findIndex(
+    (coord) =>
+      coord[0] === nearest.geometry.coordinates[0] &&
+      coord[1] === nearest.geometry.coordinates[1]
   );
 
   if (nearestCoordIndex >= 0 && nearestCoordIndex < nearestGeometry.length - 5) {
@@ -75,7 +77,10 @@ export async function getClosestMapillaryImage({ lat, lng, selectedRoutes }) {
     nextCoordinate = nearest.geometry.coordinates;
   }
 
-  const closestCoordinateCompassAngle = await getCompassAngle({closestCoordinate: nearest.geometry.coordinates, nextCoordinate})
+  const closestCoordinateCompassAngle = await getCompassAngle({
+    closestCoordinate: nearest.geometry.coordinates,
+    nextCoordinate,
+  });
   const url = `https://graph.mapillary.com/images?fields=id,geometry,compass_angle,detection&bbox=${bbox}&limit=100`;
   const delay = 500;
   const tries = 3;
@@ -113,9 +118,14 @@ export async function getClosestMapillaryImage({ lat, lng, selectedRoutes }) {
       Math.abs(lat - coordinates[1]),
       Math.abs(lng - coordinates[0])
     );
-    const angleDifference = Math.abs(feature.compass_angle - closestCoordinateCompassAngle);
+    const angleDifference = Math.abs(
+      feature.compass_angle - closestCoordinateCompassAngle
+    );
     const angleOffBy = Math.min(angleDifference, 360 - angleDifference);
-    if ((!closest || distance < closest.distance) && angleOffBy <= IMAGE_COMPASS_ANGLE_THRESHOLD) {
+    if (
+      (!closest || distance < closest.distance) &&
+      angleOffBy <= IMAGE_COMPASS_ANGLE_THRESHOLD
+    ) {
       closest = feature;
       closest.distance = distance;
     }