@opentripplanner/map-popup 6.1.0-alpha.3 → 7.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentripplanner/map-popup",
-  "version": "6.1.0-alpha.3",
+  "version": "7.0.0",
   "description": "A component for displaying map popup contents",
   "main": "lib/index.js",
   "module": "esm/index.js",
@@ -12,13 +12,13 @@
   "private": false,
   "dependencies": {
     "flat": "^5.0.2",
-    "@opentripplanner/base-map": "5.1.1-alpha.1",
-    "@opentripplanner/building-blocks": "3.0.1-alpha.1",
-    "@opentripplanner/core-utils": "14.0.0-alpha.2",
-    "@opentripplanner/from-to-location-picker": "4.0.1-alpha.1"
+    "@opentripplanner/base-map": "6.0.0",
+    "@opentripplanner/building-blocks": "3.0.1",
+    "@opentripplanner/core-utils": "13.0.1",
+    "@opentripplanner/from-to-location-picker": "4.0.1"
   },
   "devDependencies": {
-    "@opentripplanner/types": "7.0.0-alpha.19"
+    "@opentripplanner/types": "7.0.0"
   },
   "peerDependencies": {
     "react": "^18.2.0",

package/src/MapPopup.story.tsx

@@ -4,7 +4,7 @@ import styled from "styled-components";
 import { Station, Stop } from "@opentripplanner/types";
 import { IntlProvider } from "react-intl";
 import { Meta } from "@storybook/react";
-import MapPopupContents from "./index";
+import MapPopupContents, { Feed } from "./index";
 
 // HOC to wrap components with IntlProvider
 const withIntl = (Story: () => JSX.Element) => (
@@ -37,38 +37,69 @@ const STOP_WITH_CODE = {
   name: "W Burnside & SW 2nd"
 };
 
+const STOP_WITH_FEED_ID = {
+  flex: false,
+  code: "9526",
+  gtfsId: "trimet:9526",
+  id: "trimet:9526",
+  lat: 45.523009,
+  lon: -122.672529,
+  name: "W Burnside & SW 2nd"
+};
+
+const SAMPLE_FEEDS: Feed[] = [
+  {
+    feedId: "trimet",
+    publisher: {
+      name: "TriMet"
+    }
+  },
+  {
+    feedId: "c-tran",
+    publisher: {
+      name: "C-TRAN"
+    }
+  },
+  {
+    feedId: "portland-streetcar",
+    publisher: {
+      name: "Portland Streetcar"
+    }
+  }
+];
+
 const STATION = {
   "stroke-width": 2,
   allowDropoff: true,
   allowPickup: true,
-  bikesAvailable: 6,
   color: "#f00",
   id: '"hub_1580"',
   isCarStation: false,
   isFloatingBike: false,
+  lat: 45.5219604810172,
+  lon: -122.6896771788597,
   name: "SW Morrison at 18th",
-  networks: ["BIKETOWN"],
+  network: "BIKETOWN",
   realTimeData: true,
   spacesAvailable: 11,
-  x: -122.6896771788597,
-  y: 45.5219604810172
+  vehiclesAvailable: 6
 };
 
 const FLOATING_VEHICLE = {
   "stroke-width": 1,
   allowDropoff: false,
   allowPickup: true,
-  bikesAvailable: 1,
   color: "#f00",
   id: '"bike_6861"',
   isCarStation: false,
   isFloatingBike: true,
+  lat: 45.525486666666666,
+  lon: -122.70486,
   name: "0541",
-  networks: ["BIKETOWN"],
+  network: "BIKETOWN",
   realTimeData: true,
   spacesAvailable: 0,
-  x: -122.70486,
-  y: 45.525486666666666
+  vehiclesAvailable: 1
 };
 
 const FLOATING_CAR = {
@@ -79,12 +110,12 @@ const FLOATING_CAR = {
   id: "car_6861",
   isCarStation: false,
   isFloatingCar: true,
+  lat: 52.52,
+  lon: 13.405,
   name: "0541",
-  networks: ["MILES"], // https://miles-mobility.com
+  network: "MILES", // https://miles-mobility.com
   realTimeData: true,
-  spacesAvailable: 0,
-  x: 13.405,
-  y: 52.52
+  spacesAvailable: 0
 };
 
 const getEntityPrefixExample = (entity: Stop | Station) => {
@@ -102,6 +133,16 @@ const getEntityPrefixExample = (entity: Stop | Station) => {
 export const StopEntity = (): JSX.Element => (
   <MapPopupContents
     entity={STOP_WITH_CODE}
+    feeds={SAMPLE_FEEDS}
+    setLocation={action("setLocation")}
+    setViewedStop={action("setViewedStop")}
+  />
+);
+
+export const StopEntityWithFeedName = (): JSX.Element => (
+  <MapPopupContents
+    entity={STOP_WITH_FEED_ID}
+    feeds={SAMPLE_FEEDS}
     setLocation={action("setLocation")}
     setViewedStop={action("setViewedStop")}
   />

package/src/__snapshots__/MapPopup.story.tsx.snap

@@ -265,7 +265,7 @@ exports[`Map Popup StopEntityNoStopCode smoke-test 1`] = `
       W Burnside & SW 2nd
     </header>
     <p class="styled__PopupRow-sc-12kjso7-2 ckOOWr">
-      <button class="styled__ViewStopButton-sc-12v7ov3-0 bbtcwi">
+      <button class="styled__ViewStopButton-sc-12v7ov3-0 hXaHvR">
         Stop Viewer
       </button>
     </p>
@@ -385,3 +385,68 @@ exports[`Map Popup StopEntityWithEntityPrefix smoke-test 1`] = `
   </div>
 </div>
 `;
+
+exports[`Map Popup StopEntityWithFeedName smoke-test 1`] = `
+<div class="styled__MapOverlayPopup-sc-12kjso7-1 cPqJxe">
+  <div id="focus-trimet3A9526-popup-focus-trap"
+       role="presentation"
+  >
+    <header class="styled__PopupTitle-sc-12kjso7-3 jRNaQh">
+      W Burnside &amp; SW 2nd (TriMet 9526)
+    </header>
+    <p class="styled__PopupRow-sc-12kjso7-2 ckOOWr">
+      <strong>
+        Stop ID: 9526
+      </strong>
+      <button class="styled__ViewStopButton-sc-12v7ov3-0 hXaHvR">
+        Stop Viewer
+      </button>
+    </p>
+    <p class="styled__PopupRow-sc-12kjso7-2 ckOOWr">
+      <strong>
+        Plan a trip:
+      </strong>
+      <span class="styled__FromToPickerSpan-sc-vb4790-1 giBPod">
+        <span class="styled__LocationPickerSpan-sc-vb4790-0 gsVfXo">
+          <svg viewbox="0 0 512 512"
+               height="0.9em"
+               width="0.9em"
+               aria-hidden="true"
+               focusable="false"
+               fill="currentColor"
+               xmlns="http://www.w3.org/2000/svg"
+               class="StyledIconBase-sc-ea9ulj-0 ebjPRL styled__FromIcon-sc-n5xcvc-0 dDqEuj"
+          >
+            <path fill="currentColor"
+                  d="M160 256c0-53.9 42.1-96 96-96 53 0 96 42.1 96 96 0 53-43 96-96 96-53.9 0-96-43-96-96zm352 0c0 141.4-114.6 256-256 256S0 397.4 0 256 114.6 0 256 0s256 114.6 256 256zM256 48C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48z"
+            >
+            </path>
+          </svg>
+          <button class="styled__Button-sc-vb4790-2 ekklXB">
+            From here
+          </button>
+        </span>
+        <span class="styled__LocationPickerSpan-sc-vb4790-0 gsVfXo">
+          <svg viewbox="0 0 384 512"
+               height="0.9em"
+               width="0.9em"
+               aria-hidden="true"
+               focusable="false"
+               fill="currentColor"
+               xmlns="http://www.w3.org/2000/svg"
+               class="StyledIconBase-sc-ea9ulj-0 ebjPRL styled__ToIcon-sc-n5xcvc-2 gZxRwk"
+          >
+            <path fill="currentColor"
+                  d="M215.7 499.2C267 435 384 279.4 384 192 384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2 12.3 15.3 35.1 15.3 47.4 0zM192 256c-35.3 0-64-28.7-64-64s28.7-64 64-64 64 28.7 64 64-28.7 64-64 64z"
+            >
+            </path>
+          </svg>
+          <button class="styled__Button-sc-vb4790-2 ekklXB">
+            To here
+          </button>
+        </span>
+      </span>
+    </p>
+  </div>
+</div>
+`;

package/src/index.tsx

@@ -1,20 +1,26 @@
 import React, { useCallback } from "react";
 import FromToLocationPicker from "@opentripplanner/from-to-location-picker";
-import coreUtils from "@opentripplanner/core-utils";
 
 // eslint-disable-next-line prettier/prettier
-import type { Company, ConfiguredCompany, Location, Station, Stop, StopEventHandler } from "@opentripplanner/types";
+import type {
+  Company,
+  ConfiguredCompany,
+  Location,
+  Stop,
+  StopEventHandler,
+  TileLayerStation
+} from "@opentripplanner/types";
 
 import { FocusTrapWrapper } from "@opentripplanner/building-blocks";
 import { flatten } from "flat";
 import { FormattedMessage, useIntl } from "react-intl";
 import { Styled } from "@opentripplanner/base-map";
 
+import { Entity, getNetwork, makeDefaultGetEntityName, type StopIdAgencyMap } from "./util";
 import { ViewStopButton } from "./styled";
 
 // Load the default messages.
 import defaultEnglishMessages from "../i18n/en-US.yml";
-import { makeDefaultGetEntityName } from "./util";
 
 // HACK: We should flatten the messages loaded above because
 // the YAML loaders behave differently between webpack and our version of jest:
@@ -22,6 +28,14 @@ import { makeDefaultGetEntityName } from "./util";
 // - the yaml loader for jest returns messages with flattened ids.
 export const defaultMessages: { [key: string]: string } = flatten(defaultEnglishMessages);
 
+export type Feed = {
+  feedId: string;
+  publisher: {
+    name: string;
+  };
+};
+
+
 const generateLocation = (entity: Entity, name: string) => {
   // @ts-expect-error some of these values may be null, but that's ok
   const { lon: entityLon, lat: entityLat, x, y } = entity
@@ -33,7 +47,7 @@ const generateLocation = (entity: Entity, name: string) => {
   return { lat, lon, name };
 }
 
-const StationHubDetails = ({ station }: { station: Station }) => {
+const StationHubDetails = ({ station }: { station: TileLayerStation }) => {
   return (
     <Styled.PopupRow>
       <div>
@@ -43,7 +57,7 @@ const StationHubDetails = ({ station }: { station: Station }) => {
           }
           description="Label text for the number of bikes available"
           id="otpUi.MapPopup.availableBikes"
-          values={{ value: station.bikesAvailable }}
+          values={{ value: station.vehiclesAvailable }}
         />
       </div>
       <div>
@@ -85,37 +99,55 @@ const StopDetails = ({ id, setViewedStop }: { id: string, setViewedStop: () => v
   )
 }
 
-type Entity = Stop | Station
 type Props = {
-  closePopup?: (arg?: any) => void
+  closePopup?: (arg?: boolean) => void
   configCompanies?: ConfiguredCompany[];
   entity: Entity
-  getEntityName?: (entity: Entity, configCompanies: Company[],) => string;
+  getEntityName?: (entity: Entity, configCompanies: Company[], feedName?: string) => string;
   getEntityPrefix?: (entity: Entity) => JSX.Element
+  feeds?: Feed[]
   setLocation?: ({ location, locationType }: { location: Location, locationType: string }) => void;
   setViewedStop?: StopEventHandler;
 };
 
-function entityIsStation(entity: Entity): entity is Station {
-  return "bikesAvailable" in entity
+function entityIsStation(entity: Entity): entity is TileLayerStation {
+  return "vehiclesAvailable" in entity
 }
 
 /**
  * Renders a map popup for a stop, scooter, or shared bike
  */
-export function MapPopup({ closePopup = () => {}, configCompanies, entity, getEntityName, getEntityPrefix, setLocation, setViewedStop }: Props): JSX.Element {
+export function MapPopup({ 
+  closePopup = () => {}, 
+  configCompanies, 
+  entity, 
+  getEntityName, 
+  getEntityPrefix, 
+  setLocation, 
+  setViewedStop, 
+  feeds,
+}: Props): JSX.Element {
 
   const intl = useIntl()
   if (!entity) return <></>
 
   const getNameFunc = getEntityName || makeDefaultGetEntityName(intl, defaultMessages);
-  const name = getNameFunc(entity, configCompanies);
-
-  const stationNetwork = "networks" in entity && (coreUtils.itinerary.getCompaniesLabelFromNetworks(entity?.networks || [], configCompanies) || entity?.networks?.[0]);
+  
+  // Find the feed name using the logic from generateLabel in otp.ts
+  let feedName: string | undefined;
+  if (feeds && entity.id) {
+    const feedId = entity.id.split(":")[0];
+    const feed = feeds.find(f => f.feedId === feedId);
+    feedName = feed?.publisher?.name;
+  }
+  
+  const name = getNameFunc(entity, configCompanies, feedName);
+
+  const stationNetwork = getNetwork(entity, configCompanies);
 
   const bikesAvailablePresent = entityIsStation(entity)
-  const entityIsStationHub = bikesAvailablePresent && entity?.bikesAvailable !== undefined && !entity?.isFloatingBike;
-  const stopId = !bikesAvailablePresent && entity?.code;
+  const entityIsStationHub = bikesAvailablePresent && entity.vehiclesAvailable !== undefined && !entity.isFloatingBike;
+  const stopId = !bikesAvailablePresent && "code" in entity && entity.code;
   const id = `focus-${encodeURIComponent(entity.id).replace(/%/g, "")}-popup`
 
   return (
@@ -137,7 +169,7 @@ export function MapPopup({ closePopup = () => {}, configCompanies, entity, getEn
       {setViewedStop && !bikesAvailablePresent && (
         <StopDetails
           id={stopId}
-          setViewedStop={useCallback(() => setViewedStop(entity), [entity])}
+          setViewedStop={useCallback(() => setViewedStop(entity as Stop), [entity])}
         />
       )}
 
@@ -157,4 +189,5 @@ export function MapPopup({ closePopup = () => {}, configCompanies, entity, getEn
   );
 }
 
-export default MapPopup;
+export default MapPopup;
+export { type StopIdAgencyMap };

package/src/util.ts

@@ -1,25 +1,37 @@
-import { Company, Station, Stop } from "@opentripplanner/types";
+import {
+  Agency,
+  Company,
+  Station,
+  Stop,
+  TileLayerStation
+} from "@opentripplanner/types";
 import { IntlShape } from "react-intl";
 import coreUtils from "@opentripplanner/core-utils";
 
+export type StopIdAgencyMap = Record<string, Agency>;
+export type Entity = Station | Stop | TileLayerStation;
+
+export function getNetwork(entity: Entity, configCompanies: Company[]): string {
+  return (
+    "network" in entity &&
+    (coreUtils.itinerary.getCompaniesLabelFromNetworks(
+      [entity.network] || [],
+      configCompanies
+    ) ||
+      entity.network)
+  );
+}
+
 // eslint-disable-next-line import/prefer-default-export
 export function makeDefaultGetEntityName(
   intl: IntlShape,
   defaultEnglishMessages: { [key: string]: string }
 ) {
   return function defaultGetEntityName(
-    entity: Station | Stop,
-    configCompanies: Company[]
+    entity: Entity,
+    configCompanies: Company[],
+    feedName?: string
   ): string | null {
-    // TODO: Stop generating this / passing it to the car string? Is it needed?
-    // In English we say "Car: " instead
-    const stationNetworks =
-      "networks" in entity &&
-      (coreUtils.itinerary.getCompaniesLabelFromNetworks(
-        entity?.networks || [],
-        configCompanies
-      ) ||
-        entity?.networks?.[0]);
     let stationName: string | null = entity.name || entity.id;
     // If the station name or id is a giant UUID (with more than 3 "-" characters)
     // best not to show that at all. The company name will still be shown.
@@ -41,6 +53,9 @@ export function makeDefaultGetEntityName(
         { name: stationName }
       );
     } else if ("isFloatingCar" in entity && entity.isFloatingCar) {
+      // TODO: Stop generating this / passing it to the car string? Is it needed?
+      // In English we say "Car: " instead
+      const stationNetwork = getNetwork(entity, configCompanies);
       stationName = intl.formatMessage(
         {
           defaultMessage: defaultEnglishMessages["otpUi.MapPopup.floatingCar"],
@@ -48,7 +63,7 @@ export function makeDefaultGetEntityName(
           id: "otpUi.MapPopup.floatingCar"
         },
         {
-          company: stationNetworks,
+          company: stationNetwork,
           name: stationName
         }
       );
@@ -63,6 +78,8 @@ export function makeDefaultGetEntityName(
         },
         { name: stationName }
       );
+    } else if (feedName && "code" in entity) {
+      stationName = `${stationName} (${feedName} ${entity.code})`;
     }
     return stationName;
   };

package/tsconfig.json

@@ -1,6 +1,5 @@
 {
   "extends": "../../tsconfig.json",
-
   "compilerOptions": {
     "composite": true,
     "outDir": "./lib",