Merge branch 'dev-2.x' into gql-mode-weight

Jnction · Sep 30, 2024 · a7e2f08 · a7e2f08
2 parents bdbeef8 + b174c25
commit a7e2f08
Show file tree

Hide file tree

Showing 151 changed files with 3,582 additions and 1,535 deletions.
diff --git a/client/.env.development b/client/.env.development
@@ -1,3 +1,3 @@
 VITE_API_URL=http://localhost:8080/otp/transmodel/v3
 VITE_DEBUG_STYLE_URL=http://localhost:8080/otp/routers/default/inspector/vectortile/style.json
-VITE_GRAPHIQL_URL=http://localhost:8080/graphiql?flavor=transmodel
+VITE_GRAPHIQL_URL=http://localhost:8080/graphiql?flavor=transmodel
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -18,10 +18,11 @@
   },
   "dependencies": {
     "@googlemaps/polyline-codec": "1.0.28",
+    "@js-temporal/polyfill": "0.4.4",
     "bootstrap": "5.3.3",
     "graphql": "16.9.0",
     "graphql-request": "7.1.0",
-    "maplibre-gl": "4.6.0",
+    "maplibre-gl": "4.7.0",
     "react": "18.3.1",
     "react-bootstrap": "2.10.4",
     "react-dom": "18.3.1",
@@ -33,23 +34,23 @@
     "@graphql-codegen/introspection": "4.0.3",
     "@parcel/watcher": "2.4.1",
     "@testing-library/react": "16.0.1",
-    "@types/react": "18.3.5",
+    "@types/react": "18.3.7",
     "@types/react-dom": "18.3.0",
     "@typescript-eslint/eslint-plugin": "7.18.0",
     "@typescript-eslint/parser": "7.18.0",
     "@vitejs/plugin-react": "4.3.1",
-    "@vitest/coverage-v8": "2.0.5",
-    "eslint": "8.57.0",
+    "@vitest/coverage-v8": "2.1.1",
+    "eslint": "8.57.1",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-import": "2.30.0",
-    "eslint-plugin-jsx-a11y": "6.9.0",
-    "eslint-plugin-react": "7.35.1",
+    "eslint-plugin-jsx-a11y": "6.10.0",
+    "eslint-plugin-react": "7.36.1",
     "eslint-plugin-react-hooks": "4.6.2",
-    "eslint-plugin-react-refresh": "0.4.11",
+    "eslint-plugin-react-refresh": "0.4.12",
     "jsdom": "25.0.0",
     "prettier": "3.3.3",
-    "typescript": "5.5.4",
-    "vite": "5.4.2",
-    "vitest": "2.0.5"
+    "typescript": "5.6.2",
+    "vite": "5.4.6",
+    "vitest": "2.1.1"
   }
 }
diff --git a/client/src/components/ItineraryList/ItineraryHeaderContent.tsx b/client/src/components/ItineraryList/ItineraryHeaderContent.tsx
@@ -1,8 +1,9 @@
 import { TripPattern } from '../../gql/graphql.ts';
 import { TIME_BOX_WIDTH, useHeaderContentStyleCalculations } from './useHeaderContentStyleCalculations.ts';
 import { ItineraryHeaderLegContent } from './ItineraryHeaderLegContent.tsx';
-import { useMemo } from 'react';
+import { useContext, useMemo } from 'react';
 import { formatTime } from '../../util/formatTime.ts';
+import { TimeZoneContext } from '../../hooks/TimeZoneContext.ts';
 
 export function ItineraryHeaderContent({
   tripPattern,
@@ -24,14 +25,16 @@ export function ItineraryHeaderContent({
     latestEndTime,
   );
 
+  const timeZone = useContext(TimeZoneContext);
+
   const formattedStartTime = useMemo(
-    () => formatTime(tripPattern.expectedStartTime, 'short'),
-    [tripPattern.expectedStartTime],
+    () => formatTime(tripPattern.expectedStartTime, timeZone, 'short'),
+    [tripPattern.expectedStartTime, timeZone],
   );
 
   const formattedEndTime = useMemo(
-    () => formatTime(tripPattern.expectedEndTime, 'short'),
-    [tripPattern.expectedEndTime],
+    () => formatTime(tripPattern.expectedEndTime, timeZone, 'short'),
+    [tripPattern.expectedEndTime, timeZone],
   );
 
   return (
@@ -45,6 +48,7 @@ export function ItineraryHeaderContent({
         }}
       />
       <div
+        title={tripPattern.expectedStartTime}
         className="itinerary-header-itinerary-time"
         style={{
           left: `${leftPx - TIME_BOX_WIDTH}px`,
@@ -65,6 +69,7 @@ export function ItineraryHeaderContent({
       ))}
 
       <div
+        title={tripPattern.expectedEndTime}
         className="itinerary-header-itinerary-time"
         style={{
           left: `${leftPx + widthPx + 2}px`,

diff --git a/client/src/components/ItineraryList/ItineraryListContainer.tsx b/client/src/components/ItineraryList/ItineraryListContainer.tsx
@@ -5,6 +5,8 @@ import { ItineraryHeaderContent } from './ItineraryHeaderContent.tsx';
 import { useEarliestAndLatestTimes } from './useEarliestAndLatestTimes.ts';
 import { ItineraryDetails } from './ItineraryDetails.tsx';
 import { ItineraryPaginationControl } from './ItineraryPaginationControl.tsx';
+import { useContext } from 'react';
+import { TimeZoneContext } from '../../hooks/TimeZoneContext.ts';
 
 export function ItineraryListContainer({
   tripQueryResult,
@@ -21,6 +23,7 @@ export function ItineraryListContainer({
 }) {
   const [earliestStartTime, latestEndTime] = useEarliestAndLatestTimes(tripQueryResult);
   const { containerRef, containerWidth } = useContainerWidth();
+  const timeZone = useContext(TimeZoneContext);
 
   return (
     <section className="itinerary-list-container below-content" ref={containerRef}>
@@ -56,6 +59,9 @@ export function ItineraryListContainer({
             </Accordion.Item>
           ))}
       </Accordion>
+      <div className="time-zone-info">
+        All times in <code>{timeZone}</code>
+      </div>
     </section>
   );
 }
diff --git a/client/src/components/ItineraryList/ItineraryPaginationControl.tsx b/client/src/components/ItineraryList/ItineraryPaginationControl.tsx
@@ -14,6 +14,8 @@ export function ItineraryPaginationControl({
   return (
     <div style={{ display: 'flex', justifyContent: 'space-evenly', margin: '1rem 0 ' }}>
       <Button
+        variant="outline-primary"
+        size="sm"
         disabled={!previousPageCursor || loading}
         onClick={() => {
           previousPageCursor && onPagination(previousPageCursor);
@@ -22,6 +24,8 @@ export function ItineraryPaginationControl({
         Previous page
       </Button>{' '}
       <Button
+        variant="outline-primary"
+        size="sm"
         disabled={!nextPageCursor || loading}
         onClick={() => {
           nextPageCursor && onPagination(nextPageCursor);

diff --git a/client/src/components/ItineraryList/LegTime.tsx b/client/src/components/ItineraryList/LegTime.tsx
@@ -1,4 +1,6 @@
 import { formatTime } from '../../util/formatTime.ts';
+import { useContext } from 'react';
+import { TimeZoneContext } from '../../hooks/TimeZoneContext.ts';
 
 export function LegTime({
   aimedTime,
@@ -9,14 +11,19 @@ export function LegTime({
   expectedTime: string;
   hasRealtime: boolean;
 }) {
+  const timeZone = useContext(TimeZoneContext);
   return aimedTime !== expectedTime ? (
     <>
-      <span style={{ color: 'red' }}>{formatTime(expectedTime, 'short')}</span>
-      <span style={{ textDecoration: 'line-through' }}>{formatTime(aimedTime, 'short')}</span>
+      <span title={expectedTime} style={{ color: 'red' }}>
+        {formatTime(expectedTime, timeZone, 'short')}
+      </span>
+      <span title={aimedTime} style={{ textDecoration: 'line-through' }}>
+        {formatTime(aimedTime, timeZone, 'short')}
+      </span>
     </>
   ) : (
-    <span>
-      {formatTime(expectedTime, 'short')}
+    <span title={expectedTime}>
+      {formatTime(expectedTime, timeZone, 'short')}
       {hasRealtime && <span> (on time)</span>}
     </span>
   );

diff --git a/client/src/components/ItineraryList/useHeaderLegContentStyleCalculations.ts b/client/src/components/ItineraryList/useHeaderLegContentStyleCalculations.ts
@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { isTransitMode } from '../../util/isTransitMode.ts';
-import { getColorForMode } from '../../util/getColorForMode.ts';
+import { getColorForLeg } from '../../util/getColorForLeg.ts';
 import { generateTextColor } from '../../util/generateTextColor.ts';
 import { Leg } from '../../gql/graphql.ts';
 
@@ -27,7 +27,7 @@ export function useHeaderLegContentStyleCalculations(
   const showPublicCode =
     widthPx > 40 && isTransitMode(leg.mode) && leg.line?.publicCode && leg.line.publicCode.length <= 6;
 
-  const modeColor = getColorForMode(leg.mode);
+  const modeColor = getColorForLeg(leg);
   const legTextColor = useMemo(() => generateTextColor(modeColor), [modeColor]);
 
   return { widthPx, leftPx, legTextColor, modeColor, showPublicCode };

diff --git a/client/src/components/MapView/LegLines.tsx b/client/src/components/MapView/LegLines.tsx
@@ -1,7 +1,7 @@
 import { TripPattern } from '../../gql/graphql.ts';
 import { Layer, Source } from 'react-map-gl';
 import { decode } from '@googlemaps/polyline-codec';
-import { getColorForMode } from '../../util/getColorForMode.ts';
+import { getColorForLeg } from '../../util/getColorForLeg.ts';
 
 export function LegLines({ tripPattern }: { tripPattern?: TripPattern }) {
   return (
@@ -28,7 +28,7 @@ export function LegLines({ tripPattern }: { tripPattern?: TripPattern }) {
                   'line-cap': 'round',
                 }}
                 paint={{
-                  'line-color': getColorForMode(leg.mode),
+                  'line-color': getColorForLeg(leg),
                   'line-width': 5,
                 }}
               />

diff --git a/client/src/components/SearchBar/DateInputField.tsx b/client/src/components/SearchBar/DateInputField.tsx
diff --git a/client/src/components/SearchBar/DateTimeInputField.tsx b/client/src/components/SearchBar/DateTimeInputField.tsx
@@ -0,0 +1,42 @@
+import { Form } from 'react-bootstrap';
+import { TripQueryVariables } from '../../gql/graphql.ts';
+import { ChangeEvent, useCallback, useContext } from 'react';
+import { Temporal } from '@js-temporal/polyfill';
+import { TimeZoneContext } from '../../hooks/TimeZoneContext.ts';
+
+export function DateTimeInputField({
+  tripQueryVariables,
+  setTripQueryVariables,
+}: {
+  tripQueryVariables: TripQueryVariables;
+  setTripQueryVariables: (tripQueryVariables: TripQueryVariables) => void;
+}) {
+  const timeZone = useContext(TimeZoneContext);
+  const current = Temporal.Instant.from(tripQueryVariables.dateTime)
+    .toZonedDateTimeISO(timeZone)
+    .toPlainDateTime()
+    .toString({ smallestUnit: 'minute', calendarName: 'never' });
+
+  const onChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      const dateTime = Temporal.PlainDateTime.from(event.target.value)
+        .toZonedDateTime(timeZone)
+        .toString({ calendarName: 'never', timeZoneName: 'never' });
+
+      setTripQueryVariables({
+        ...tripQueryVariables,
+        dateTime: dateTime,
+      });
+    },
+    [tripQueryVariables, setTripQueryVariables, timeZone],
+  );
+
+  return (
+    <Form.Group>
+      <Form.Label column="sm" htmlFor="timePicker" title={'Time zone: ' + timeZone}>
+        Time
+      </Form.Label>
+      <Form.Control type="datetime-local" id="timePicker" size="sm" onChange={onChange} value={current} />
+    </Form.Group>
+  );
+}
diff --git a/client/src/components/SearchBar/GraphiQLRouteButton.tsx b/client/src/components/SearchBar/GraphiQLRouteButton.tsx
@@ -1,18 +1,25 @@
 import { Button } from 'react-bootstrap';
 import { TripQueryVariables } from '../../gql/graphql.ts';
 import { queryAsString } from '../../static/query/tripQuery.tsx';
+import graphqlIcon from '../../static/img/graphql-solid.svg';
+
 const graphiQLUrl = import.meta.env.VITE_GRAPHIQL_URL;
 
 function GraphiQLRouteButton({ tripQueryVariables }: { tripQueryVariables: TripQueryVariables }) {
   const formattedVariables = encodeURIComponent(JSON.stringify(tripQueryVariables));
   const formattedQuery = encodeURIComponent(queryAsString);
 
+  const hint = 'Open in GraphiQL';
+
   return (
-    <div className="search-bar-route-button-wrapper">
-      <Button href={graphiQLUrl + '&query=' + formattedQuery + '&variables=' + formattedVariables} target={'_blank'}>
-        GraphiQL
-      </Button>
-    </div>
+    <Button
+      title={hint}
+      href={graphiQLUrl + '&query=' + formattedQuery + '&variables=' + formattedVariables}
+      target={'_blank'}
+    >
+      <img alt={hint} title={hint} src={graphqlIcon} width="20" height="20" className="d-inline-block align-middle" />
+    </Button>
   );
 }
+
 export default GraphiQLRouteButton;
diff --git a/client/src/components/SearchBar/ItineraryFilterDebugSelect.tsx b/client/src/components/SearchBar/ItineraryFilterDebugSelect.tsx
@@ -11,11 +11,12 @@ export function ItineraryFilterDebugSelect({
   return (
     <Form.Group>
       <Form.Label column="sm" htmlFor="itineraryDebugFilterSelect">
-        Itinerary filter debug
+        Filter debug
       </Form.Label>
       <Form.Select
         id="itineraryDebugFilterSelect"
         size="sm"
+        className="input-medium"
         onChange={(e) => {
           setTripQueryVariables({
             ...tripQueryVariables,

diff --git a/client/src/components/SearchBar/LocationInputField.tsx b/client/src/components/SearchBar/LocationInputField.tsx
@@ -13,6 +13,7 @@ export function LocationInputField({ location, id, label }: { location: Location
         id={id}
         size="sm"
         placeholder="[Click in map]"
+        className="input-medium"
         // Intentionally empty for now, but needed because of
         // https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable
         onChange={() => {}}

diff --git a/client/src/components/SearchBar/NumTripPatternsInput.tsx b/client/src/components/SearchBar/NumTripPatternsInput.tsx
@@ -11,14 +11,15 @@ export function NumTripPatternsInput({
   return (
     <Form.Group>
       <Form.Label column="sm" htmlFor="numTripPatternsInput">
-        Number of trip patterns
+        Num. results
       </Form.Label>
       <Form.Control
         type="number"
         id="numTripPatternsInput"
         size="sm"
         placeholder="12"
         min={1}
+        className="input-small"
         value={tripQueryVariables.numTripPatterns || ''}
         onChange={(event) =>
           setTripQueryVariables({