Map: Handle TrunkLine, SpeedTram & multimodal stops

Author: Huulivoide

ui/src/components/map/markers/StopMarker.tsx

@@ -19,6 +19,7 @@ type StopMarkerBaseProps = {
   readonly size?: number;
   readonly borderWidth?: number;
   readonly fillColor?: string;
+  readonly secondaryFillColor?: string | null;
   readonly borderColor?: string;
   readonly strokeDashArray?: number;
   readonly centerDot?: boolean;
@@ -47,6 +48,7 @@ type StopMarkerProps = PlaceholderStopMarkerProps | ExistingStopMarkerProps;
 export const StopMarker: FC<StopMarkerProps> = ({
   testId,
   fillColor = 'white',
+  secondaryFillColor = null,
   borderColor = 'black',
   strokeDashArray = 0,
   centerDot = false,
@@ -122,6 +124,11 @@ export const StopMarker: FC<StopMarkerProps> = ({
           strokeWidth={1}
           fill={fillColor}
         />
+
+        {secondaryFillColor && (
+          <path fill={secondaryFillColor} d="M 7 1 A 6 6 0 0 1 7 13 Z" />
+        )}
+
         {!inSelection && (centerDot || isMouseHovering) && (
           <circle cx={7} cy={7} r={3} fill={borderColor} />
         )}

ui/src/components/map/queries/useGetMapStops.ts

@@ -11,7 +11,7 @@ import { Viewport } from '../../../redux/types';
 import { parseDate } from '../../../time';
 import { Priority } from '../../../types/enums';
 import { StopPlaceState } from '../../../types/stop-registry';
-import { parseVehicleMode } from '../../../utils';
+import { parseStopRegistryTransportModeJsonArray } from '../../../utils';
 import { useMapDataLayerSimpleQueryLoader } from '../../common/hooks/useLoader';
 import { filtersAndResultSelectionToQueryVariables } from '../../stop-registry/search/by-stop/filtersToQueryVariables';
 import { mapCompactOrNull } from '../../stop-registry/utils';
@@ -43,10 +43,10 @@ const GQL_GET_MAP_STOPS = gql`
     centroid
     functional_area
 
-    stop_place {
-      id
-      transport_mode
-    }
+    transport_modes
+    active_transport_modes
+    trunk_line_stop
+    speed_tram_stop
   }
 `;
 
@@ -115,9 +115,6 @@ function mapRawStopToMapStop(
     return null;
   }
 
-  const vehicleMode =
-    parseVehicleMode(rawStop.stop_place?.transport_mode) ?? undefined;
-
   return {
     label: rawStop.label,
     location: rawStop.centroid,
@@ -127,8 +124,15 @@ function mapRawStopToMapStop(
     validity_start: parseDate(rawStop.validity_start),
     validity_end: parseDate(rawStop.validity_end),
     functional_area: parseValidNumber(rawStop.functional_area),
-    vehicle_mode: vehicleMode,
     stop_state: rawStop.stop_state as StopPlaceState,
+    transport_modes: parseStopRegistryTransportModeJsonArray(
+      rawStop.transport_modes,
+    ),
+    active_transport_modes: parseStopRegistryTransportModeJsonArray(
+      rawStop.active_transport_modes,
+    ),
+    trunk_line_stop: !!rawStop.trunk_line_stop,
+    speed_tram_stop: !!rawStop.speed_tram_stop,
   };
 }
 

ui/src/components/map/stops/EditStopLayer.tsx

@@ -21,7 +21,11 @@ import {
   toggleStopSelectionAction,
 } from '../../../redux';
 import { EnrichedStopPlace, Point } from '../../../types';
-import { parseVehicleMode, showSuccessToast } from '../../../utils';
+import {
+  mapVehicleModeToTransportMode,
+  parseVehicleMode,
+  showSuccessToast,
+} from '../../../utils';
 import { useMapDataLayerLoader } from '../../common/hooks';
 import {
   StopFormState,
@@ -279,7 +283,9 @@ export const EditStopLayer = forwardRef<EditStoplayerRef, EditStopLayerProps>(
             latitude={draftLocation.latitude}
             mapStopViewState={mapStopViewState}
             selected
-            vehicleMode={draftVehicleMode}
+            activeTransportModes={[
+              mapVehicleModeToTransportMode(draftVehicleMode),
+            ]}
           />
         )}
 

ui/src/components/map/stops/Stop.tsx

@@ -1,7 +1,7 @@
 import type { PointLike } from 'maplibre-gl';
 import { FC } from 'react';
 import { Marker } from 'react-map-gl/maplibre';
-import { ReusableComponentsVehicleModeEnum } from '../../../generated/graphql';
+import { StopRegistryTransportModeType } from '../../../generated/graphql';
 import { theme } from '../../../generated/theme';
 import { MapEntityEditorViewState } from '../../../redux';
 import { StopMarker } from '../markers';
@@ -13,6 +13,38 @@ const { colors } = theme;
 // Needed to align the stop correctly, when the stop label is or isn't shown.
 const offset: PointLike = [-13, 0];
 
+function determineTransportModeColor(
+  mode: StopRegistryTransportModeType,
+  isTrunkLineStop: boolean,
+  isSpeedTramStop: boolean,
+) {
+  if (mode === StopRegistryTransportModeType.Bus) {
+    return isTrunkLineStop ? colors.hslTrunkLineOrange : colors.tweakedBrand;
+  }
+
+  if (mode === StopRegistryTransportModeType.Tram) {
+    return isSpeedTramStop
+      ? colors.hslSpeedTramTurquoise
+      : colors.hslTramDarkGreen;
+  }
+
+  if (mode === StopRegistryTransportModeType.Metro) {
+    return colors.hslMetroOrange;
+  }
+
+  if (mode === StopRegistryTransportModeType.Water) {
+    return colors.hslFerryBlue;
+  }
+
+  if (mode === StopRegistryTransportModeType.Rail) {
+    return colors.hslFerryBlue;
+  }
+
+  throw new Error(
+    `No color specified for StopRegistryTransportModeType(${mode})!`,
+  );
+}
+
 /** Stop map markers border color is determined in this function. There are
  * different aspects which are affecting this determination. These are
  * * isPlaceholder: when moving a stop we have a placeholder for the stop's
@@ -28,7 +60,9 @@ function determineBorderColor(
   asMemberStop: boolean,
   isSelected: boolean,
   isPlaceholder: boolean,
-  stopVehicleMode: ReusableComponentsVehicleModeEnum | undefined,
+  activeTransportModes: ReadonlyArray<StopRegistryTransportModeType>,
+  isTrunkLineStop: boolean,
+  isSpeedTramStop: boolean,
   inSelection: boolean,
 ) {
   if (inSelection) {
@@ -51,8 +85,13 @@ function determineBorderColor(
     return colors.selectedMapItem;
   }
 
-  if (stopVehicleMode) {
-    return colors.stops[stopVehicleMode] ?? colors.hslDark80;
+  const primaryMode = activeTransportModes.at(0);
+  if (primaryMode) {
+    return determineTransportModeColor(
+      primaryMode,
+      isTrunkLineStop,
+      isSpeedTramStop,
+    );
   }
 
   return colors.hslDark80;
@@ -63,18 +102,43 @@ function determineFillColor(
   isSelected: boolean,
   inSelection: boolean,
   shouldBeGray: boolean,
+  activeTransportModes: ReadonlyArray<StopRegistryTransportModeType>,
 ) {
   if (isSelected || asMemberStop || inSelection) {
     return 'white';
   }
 
-  if (shouldBeGray) {
+  if (shouldBeGray || activeTransportModes.length === 0) {
     return colors.lightGrey;
   }
 
   return 'white';
 }
 
+function determineSecondaryFillColor(
+  asMemberStop: boolean,
+  isSelected: boolean,
+  inSelection: boolean,
+  activeTransportModes: ReadonlyArray<StopRegistryTransportModeType>,
+  isTrunkLineStop: boolean,
+  isSpeedTramStop: boolean,
+) {
+  if (isSelected || asMemberStop || inSelection) {
+    return null;
+  }
+
+  if (activeTransportModes.length >= 2) {
+    const secondaryMode = activeTransportModes[1];
+    return determineTransportModeColor(
+      secondaryMode,
+      isTrunkLineStop,
+      isSpeedTramStop,
+    );
+  }
+
+  return null;
+}
+
 type BaseStopProps = {
   readonly longitude: number;
   readonly latitude: number;
@@ -84,7 +148,9 @@ type BaseStopProps = {
   readonly mapStopViewState: MapEntityEditorViewState;
   readonly selected?: boolean;
   readonly testId?: string;
-  readonly vehicleMode?: ReusableComponentsVehicleModeEnum;
+  readonly activeTransportModes: ReadonlyArray<StopRegistryTransportModeType>;
+  readonly isTrunkLineStop?: boolean;
+  readonly isSpeedTramStop?: boolean;
   readonly shouldBeGray?: boolean;
   readonly showLabel?: boolean;
 };
@@ -114,7 +180,9 @@ export const Stop: FC<StopProps> = ({
   mapStopViewState,
   selected = false,
   testId,
-  vehicleMode,
+  activeTransportModes,
+  isTrunkLineStop = false,
+  isSpeedTramStop = false,
   shouldBeGray = false,
   onClick,
   onResolveTitle,
@@ -130,7 +198,9 @@ export const Stop: FC<StopProps> = ({
     asMemberStop,
     selected,
     isPlaceholder,
-    vehicleMode,
+    activeTransportModes,
+    isTrunkLineStop,
+    isSpeedTramStop,
     inSelection,
   );
 
@@ -139,6 +209,16 @@ export const Stop: FC<StopProps> = ({
     selected,
     inSelection,
     shouldBeGray,
+    activeTransportModes,
+  );
+
+  const secondaryFillColor = determineSecondaryFillColor(
+    asMemberStop,
+    selected,
+    inSelection,
+    activeTransportModes,
+    isTrunkLineStop,
+    isSpeedTramStop,
   );
 
   return (
@@ -153,6 +233,7 @@ export const Stop: FC<StopProps> = ({
         testId={testId}
         borderColor={iconBorderColor}
         fillColor={iconFillColor}
+        secondaryFillColor={secondaryFillColor}
         borderWidth={3}
         strokeDashArray={isPlaceholder ? 2 : 0}
         centerDot={selected}

ui/src/components/map/stops/Stops.tsx

@@ -116,12 +116,9 @@ export const StopsImpl: ForwardRefRenderFunction<StopsRef, StopsProps> = (
 
   const { setIsLoading: setIsLoadingSaveStop } = useLoader(Operation.SaveStop);
 
-  const { getStopVehicleMode, getStopHighlighted, getStopShouldBeGray } =
+  const { getStopHighlighted, getStopShouldBeGray } =
     useMapStops(displayedRouteIds);
-  const filterStopsByVehicleMode = useFilterStopsByVehicleMode(
-    getStopVehicleMode,
-    showRoute,
-  );
+  const filterStopsByVehicleMode = useFilterStopsByVehicleMode(showRoute);
 
   const { setLoadingState: setFetchStopsLoadingState } = useLoader(
     Operation.FetchStops,
@@ -253,7 +250,9 @@ export const StopsImpl: ForwardRefRenderFunction<StopsRef, StopsProps> = (
                 ? testIds.memberStop(item.label)
                 : testIds.stopMarker(item.label, item.priority)
             }
-            vehicleMode={getStopVehicleMode(item)}
+            activeTransportModes={item.active_transport_modes}
+            isTrunkLineStop={item.trunk_line_stop}
+            isSpeedTramStop={item.speed_tram_stop}
             shouldBeGray={getStopShouldBeGray(item)}
           />
         );

ui/src/components/map/stops/hooks/useFilterStopsByVehicleMode.ts

@@ -1,45 +1,40 @@
 import { useCallback } from 'react';
-import { ReusableComponentsVehicleModeEnum } from '../../../../generated/graphql';
+import { StopRegistryTransportModeType } from '../../../../generated/graphql';
 import { useAppSelector } from '../../../../hooks';
 import { FilterType, selectMapFilter } from '../../../../redux';
-import { parseVehicleMode } from '../../../../utils';
 import { MapStop } from '../../types';
 import { useVisibleRouteStops } from './useVisibleRouteStops';
 
-export function useFilterStopsByVehicleMode(
-  getStopVehicleMode: (
-    stop: MapStop,
-  ) => ReusableComponentsVehicleModeEnum | undefined,
-  showRoute: boolean,
-) {
+export function useFilterStopsByVehicleMode(showRoute: boolean) {
   const { stopFilters } = useAppSelector(selectMapFilter);
   const { visibleRouteStopLabels } = useVisibleRouteStops();
 
   return useCallback(
     (stops: ReadonlyArray<MapStop>): ReadonlyArray<MapStop> =>
       stops.filter((stop) => {
-        const vehicleMode = parseVehicleMode(getStopVehicleMode(stop));
         const isStopInVisibleRoutes =
           showRoute && visibleRouteStopLabels.includes(stop.label);
 
-        if (vehicleMode === ReusableComponentsVehicleModeEnum.Bus) {
-          return (
-            stopFilters[FilterType.ShowAllBusStops] || isStopInVisibleRoutes
-          );
+        if (isStopInVisibleRoutes) {
+          return true;
         }
 
-        if (vehicleMode === ReusableComponentsVehicleModeEnum.Tram) {
-          return (
-            stopFilters[FilterType.ShowAllTramStops] || isStopInVisibleRoutes
-          );
+        if (
+          stop.transport_modes.includes(StopRegistryTransportModeType.Bus) &&
+          stopFilters[FilterType.ShowAllBusStops]
+        ) {
+          return true;
         }
 
-        return (
-          stopFilters[FilterType.ShowAllBusStops] ||
-          stopFilters[FilterType.ShowAllTramStops] ||
-          isStopInVisibleRoutes
-        );
+        if (
+          stop.transport_modes.includes(StopRegistryTransportModeType.Tram) &&
+          stopFilters[FilterType.ShowAllTramStops]
+        ) {
+          return true;
+        }
+
+        return false;
       }),
-    [getStopVehicleMode, showRoute, stopFilters, visibleRouteStopLabels],
+    [showRoute, stopFilters, visibleRouteStopLabels],
   );
 }

ui/src/components/map/stops/hooks/useMapStops.ts

@@ -103,17 +103,9 @@ export const useMapStops = (displayedRouteIds: ReadonlyArray<string>) => {
     [editedRouteIncludedStops, stopLabelToVehicleMode],
   );
 
-  const getStopVehicleMode = useCallback(
-    (stop: MapStop): ReusableComponentsVehicleModeEnum | undefined =>
-      stop.vehicle_mode ?? stopLabelToVehicleMode[stop.label],
-    [stopLabelToVehicleMode],
-  );
-
   const getStopShouldBeGray = useCallback(
     (stop: MapStop): boolean =>
       (!!selectedRouteId && !usedStopLabels.includes(stop.label)) ||
-      (stop.stop_state !== null &&
-        stop.stop_state !== StopPlaceState.InOperation) ||
       !isCurrentEntity(observationDate, stop),
     [selectedRouteId, observationDate, usedStopLabels],
   );
@@ -133,5 +125,5 @@ export const useMapStops = (displayedRouteIds: ReadonlyArray<string>) => {
     [highlightedStopIds, selectedStopId, selectedStopAreaId],
   );
 
-  return { getStopVehicleMode, getStopHighlighted, getStopShouldBeGray };
+  return { getStopHighlighted, getStopShouldBeGray };
 };