|
| 1 | +import { connect } from 'react-redux' |
| 2 | +import { Itinerary } from '@opentripplanner/types' |
| 3 | +import { Layer, Source } from 'react-map-gl' |
| 4 | +import polyline from '@mapbox/polyline' |
| 5 | +import React from 'react' |
| 6 | + |
| 7 | +import { |
| 8 | + getActiveItinerary, |
| 9 | + getActiveSearch, |
| 10 | + getVisibleItineraryIndex |
| 11 | +} from '../../util/state' |
| 12 | + |
| 13 | +type Props = { |
| 14 | + geometries: string[] |
| 15 | + visible?: boolean |
| 16 | +} |
| 17 | +/** |
| 18 | + * This overlay will display thin gray lines for a set of geometries. It's to be used |
| 19 | + * as a stopgap until we make full use of Transitive! |
| 20 | + */ |
| 21 | +const GeometryPreviewOverlay = ({ geometries, visible }: Props) => { |
| 22 | + if (!geometries || !visible) return <></> |
| 23 | + |
| 24 | + const uniqueGeometries = Array.from(new Set(geometries)) |
| 25 | + try { |
| 26 | + const geojson: GeoJSON.FeatureCollection = { |
| 27 | + features: uniqueGeometries |
| 28 | + .filter((s) => !!s) |
| 29 | + .map((segment) => { |
| 30 | + const pts = polyline.decode(segment) |
| 31 | + return { |
| 32 | + geometry: { |
| 33 | + coordinates: pts.map((pt: [number, number]) => [pt[1], pt[0]]), |
| 34 | + type: 'LineString' |
| 35 | + }, |
| 36 | + properties: [], |
| 37 | + type: 'Feature' |
| 38 | + } |
| 39 | + }), |
| 40 | + type: 'FeatureCollection' |
| 41 | + } |
| 42 | + return ( |
| 43 | + <> |
| 44 | + <Source data={geojson} id="route" type="geojson"> |
| 45 | + <Layer |
| 46 | + id="route-preview" |
| 47 | + layout={{ |
| 48 | + 'line-cap': 'round', |
| 49 | + 'line-join': 'round' |
| 50 | + }} |
| 51 | + paint={{ |
| 52 | + 'line-blur': 4, |
| 53 | + 'line-color': '#333', |
| 54 | + 'line-dasharray': [1, 2], |
| 55 | + 'line-opacity': 0.6, |
| 56 | + 'line-width': 4 |
| 57 | + }} |
| 58 | + type="line" |
| 59 | + /> |
| 60 | + </Source> |
| 61 | + </> |
| 62 | + ) |
| 63 | + } catch (error) { |
| 64 | + console.warn(`Can't create geojson from route ${geometries}: ${error}`) |
| 65 | + return <></> |
| 66 | + } |
| 67 | +} |
| 68 | + |
| 69 | +// TODO: Typescript state |
| 70 | +const mapStateToProps = (state: any) => { |
| 71 | + const { activeSearchId, config } = state.otp |
| 72 | + // Only show this overlay if the metro UI is explicitly enabled |
| 73 | + if (config.itinerary?.showFirstResultByDefault !== false) { |
| 74 | + return {} |
| 75 | + } |
| 76 | + if (!activeSearchId) return {} |
| 77 | + |
| 78 | + const visibleItinerary = getVisibleItineraryIndex(state) |
| 79 | + const activeItinerary = getActiveItinerary(state) |
| 80 | + |
| 81 | + // @ts-expect-error state is not typed |
| 82 | + const geometries = getActiveSearch(state)?.response.flatMap( |
| 83 | + (serverResponse: { plan?: { itineraries?: Itinerary[] } }) => |
| 84 | + serverResponse?.plan?.itineraries?.flatMap((itinerary) => { |
| 85 | + return itinerary.legs?.map((leg) => leg.legGeometry.points) |
| 86 | + }) |
| 87 | + ) |
| 88 | + |
| 89 | + return { |
| 90 | + geometries, |
| 91 | + |
| 92 | + visible: |
| 93 | + // We need an explicit check for undefined and null because 0 |
| 94 | + // is for us true |
| 95 | + (visibleItinerary === undefined || visibleItinerary === null) && |
| 96 | + (activeItinerary === undefined || activeItinerary === null) |
| 97 | + } |
| 98 | +} |
| 99 | + |
| 100 | +const mapDispatchToProps = {} |
| 101 | + |
| 102 | +export default connect( |
| 103 | + mapStateToProps, |
| 104 | + mapDispatchToProps |
| 105 | +)(GeometryPreviewOverlay) |
0 commit comments