Mostly refactoring1

client-next/src/components/ItineraryListContainer.tsx

@@ -3,7 +3,7 @@ import { Card } from 'react-bootstrap';
 
 export function ItineraryListContainer({ tripQueryResult }: { tripQueryResult: TripQuery | null }) {
   return (
-    <section className="itinterary-list-container">
+    <section className="itinerary-list-container">
       <h2>Itineraries</h2>
       {tripQueryResult &&
         tripQueryResult.trip.tripPatterns.map((tripPattern) => (

client-next/src/components/MapView/LegLines.tsx

@@ -0,0 +1,41 @@
+import { TripQuery } from '../../gql/graphql.ts';
+import { Layer, Source } from 'react-map-gl';
+import { decode } from '@googlemaps/polyline-codec';
+import { getColorForMode } from '../../util/getColorForMode.ts';
+
+export function LegLines({ tripQueryResult }: { tripQueryResult: TripQuery | null }) {
+  return (
+    <>
+      {tripQueryResult?.trip.tripPatterns.length &&
+        tripQueryResult.trip.tripPatterns[0].legs.map(
+          (leg) =>
+            leg.pointsOnLink && (
+              <Source
+                key={leg.id}
+                type="geojson"
+                data={{
+                  type: 'Feature',
+                  properties: {},
+                  geometry: {
+                    type: 'LineString',
+                    coordinates: decode(leg.pointsOnLink.points as string, 5).map((value) => value.reverse()),
+                  },
+                }}
+              >
+                <Layer
+                  type="line"
+                  layout={{
+                    'line-join': 'round',
+                    'line-cap': 'round',
+                  }}
+                  paint={{
+                    'line-color': getColorForMode(leg.mode),
+                    'line-width': 5,
+                  }}
+                />
+              </Source>
+            ),
+        )}
+    </>
+  );
+}

client-next/src/components/MapView/MapView.tsx

@@ -0,0 +1,42 @@
+import { Map, NavigationControl } from 'react-map-gl';
+import 'maplibre-gl/dist/maplibre-gl.css';
+import { TripQuery, TripQueryVariables } from '../../gql/graphql.ts';
+import { NavigationMarkers } from './NavigationMarkers.tsx';
+import { LegLines } from './LegLines.tsx';
+import { useMapDoubleClick } from './useMapDoubleClick.ts';
+import { mapStyle } from './mapStyle.ts';
+
+// TODO: this should be configurable
+const initialViewState = {
+  latitude: 60.7554885,
+  longitude: 10.2332855,
+  zoom: 4,
+};
+
+export function MapView({
+  tripQueryVariables,
+  setTripQueryVariables,
+  tripQueryResult,
+}: {
+  tripQueryVariables?: TripQueryVariables;
+  setTripQueryVariables: (variables: TripQueryVariables) => void;
+  tripQueryResult: TripQuery | null;
+}) {
+  const onMapDoubleClick = useMapDoubleClick({ tripQueryVariables, setTripQueryVariables });
+
+  return (
+    <Map
+      // @ts-ignore
+      mapLib={import('maplibre-gl')}
+      // @ts-ignore
+      mapStyle={mapStyle}
+      initialViewState={initialViewState}
+      style={{ width: '100%', height: 'calc(100vh - 200px)' }}
+      onDblClick={onMapDoubleClick}
+    >
+      <NavigationControl position="top-left" />
+      <NavigationMarkers tripQueryVariables={tripQueryVariables} setTripQueryVariables={setTripQueryVariables} />
+      <LegLines tripQueryResult={tripQueryResult} />
+    </Map>
+  );
+}

client-next/src/components/MapView/NavigationMarkers.tsx

@@ -0,0 +1,47 @@
+import { TripQueryVariables } from '../../gql/graphql.ts';
+import { Marker } from 'react-map-gl';
+
+export function NavigationMarkers({
+  tripQueryVariables,
+  setTripQueryVariables,
+}: {
+  tripQueryVariables?: TripQueryVariables;
+  setTripQueryVariables: (variables: TripQueryVariables) => void;
+}) {
+  return (
+    <>
+      {tripQueryVariables?.from.coordinates && (
+        <Marker
+          draggable
+          latitude={tripQueryVariables.from.coordinates?.latitude}
+          longitude={tripQueryVariables.from.coordinates?.longitude}
+          onDragEnd={(e) => {
+            setTripQueryVariables({
+              ...tripQueryVariables,
+              from: { coordinates: { latitude: e.lngLat.lat, longitude: e.lngLat.lng } },
+            });
+          }}
+          anchor="bottom-right"
+        >
+          <img alt="" src="/img/marker-flag-start-shadowed.png" height={48} width={49} />
+        </Marker>
+      )}
+      {tripQueryVariables?.to.coordinates && (
+        <Marker
+          draggable
+          latitude={tripQueryVariables.to.coordinates?.latitude}
+          longitude={tripQueryVariables.to.coordinates?.longitude}
+          onDragEnd={(e) => {
+            setTripQueryVariables({
+              ...tripQueryVariables,
+              to: { coordinates: { latitude: e.lngLat.lat, longitude: e.lngLat.lng } },
+            });
+          }}
+          anchor="bottom-right"
+        >
+          <img alt="" src="/img/marker-flag-end-shadowed.png" height={48} width={49} />
+        </Marker>
+      )}
+    </>
+  );
+}

client-next/src/components/MapView/mapStyle.ts

@@ -0,0 +1,19 @@
+export const mapStyle = {
+  version: 8,
+  sources: {
+    osm: {
+      type: 'raster',
+      tiles: ['https://a.tile.openstreetmap.org/{z}/{x}/{y}.png'],
+      tileSize: 256,
+      attribution: '© OpenStreetMap Contributors',
+      maxzoom: 19,
+    },
+  },
+  layers: [
+    {
+      id: 'osm',
+      type: 'raster',
+      source: 'osm', // This must match the source key above
+    },
+  ],
+};

client-next/src/components/MapView/useMapDoubleClick.ts

@@ -0,0 +1,49 @@
+import { useCallback } from 'react';
+import { TripQueryVariables } from '../../gql/graphql.ts';
+import { LngLat, MapLayerMouseEvent } from 'react-map-gl';
+
+const setFromCoordinates = (tripQueryVariables: TripQueryVariables, lngLat: LngLat) => ({
+  ...tripQueryVariables,
+  from: {
+    coordinates: {
+      latitude: lngLat.lat,
+      longitude: lngLat.lng,
+    },
+  },
+  to: {
+    coordinates: {
+      latitude: 0.0,
+      longitude: 0.0,
+    },
+  },
+});
+
+const setToCoordinates = (tripQueryVariables: TripQueryVariables, lngLat: LngLat) => ({
+  ...tripQueryVariables,
+  to: {
+    coordinates: {
+      latitude: lngLat.lat,
+      longitude: lngLat.lng,
+    },
+  },
+});
+
+export function useMapDoubleClick({
+  tripQueryVariables,
+  setTripQueryVariables,
+}: {
+  tripQueryVariables?: TripQueryVariables;
+  setTripQueryVariables: (variables: TripQueryVariables) => void;
+}) {
+  return useCallback(
+    (event: MapLayerMouseEvent) => {
+      event.preventDefault();
+      if (!tripQueryVariables?.from.coordinates) {
+        setTripQueryVariables(setFromCoordinates(tripQueryVariables!, event.lngLat));
+      } else {
+        setTripQueryVariables(setToCoordinates(tripQueryVariables!, event.lngLat));
+      }
+    },
+    [tripQueryVariables, setTripQueryVariables],
+  );
+}

client-next/src/components/NavBarContainer.tsx

@@ -1,14 +1,13 @@
-import Container from 'react-bootstrap/Container';
 import Navbar from 'react-bootstrap/Navbar';
 export function NavBarContainer() {
   return (
     <Navbar expand="lg" data-bs-theme="light">
-      <Container>
+      <div className="navbar-container">
         <Navbar.Brand>
           <img alt="" src="/img/otp-logo.svg" width="30" height="30" className="d-inline-block align-top" /> OTP Debug
           Client
         </Navbar.Brand>
-      </Container>
+      </div>
     </Navbar>
   );
 }

client-next/src/components/SearchBarContainer.tsx

@@ -50,7 +50,6 @@ export function SearchBarContainer({
             }
           />
         </Form.Group>
-
         <Button variant="primary" onClick={onRoute}>
           Route
         </Button>