@opentripplanner/map-popup 6.1.0-alpha.2 → 6.1.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) => (
@@ -18,7 +18,7 @@ export default {
   decorators: [withIntl]
 } as Meta;
 
-const STOP = {
+const STOP_NO_CODE = {
   flex: false,
   gtfsId: "9526",
   id: "9526",
@@ -27,6 +27,47 @@ const STOP = {
   name: "W Burnside & SW 2nd"
 };
 
+const STOP_WITH_CODE = {
+  flex: false,
+  code: "9526",
+  gtfsId: "9526",
+  id: "9526",
+  lat: 45.523009,
+  lon: -122.672529,
+  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,
@@ -91,14 +132,25 @@ const getEntityPrefixExample = (entity: Stop | Station) => {
 
 export const StopEntity = (): JSX.Element => (
   <MapPopupContents
-    entity={STOP}
+    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")}
   />
 );
-export const StopEntitywithEntityPrefix = (): JSX.Element => (
+
+export const StopEntityWithEntityPrefix = (): JSX.Element => (
   <MapPopupContents
-    entity={STOP}
+    entity={STOP_WITH_CODE}
     getEntityPrefix={getEntityPrefixExample}
     setLocation={action("setLocation")}
     setViewedStop={action("setViewedStop")}
@@ -106,7 +158,15 @@ export const StopEntitywithEntityPrefix = (): JSX.Element => (
 );
 
 export const StopEntityNoHandlers = (): JSX.Element => (
-  <MapPopupContents entity={STOP} />
+  <MapPopupContents entity={STOP_WITH_CODE} />
+);
+
+export const StopEntityNoStopCode = (): JSX.Element => (
+  <MapPopupContents
+    entity={STOP_NO_CODE}
+    setLocation={action("setLocation")}
+    setViewedStop={action("setViewedStop")}
+  />
 );
 
 export const StationEntity = (): JSX.Element => (

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

@@ -191,7 +191,7 @@ exports[`Map Popup StopEntity smoke-test 1`] = `
       <strong>
         Stop ID: 9526
       </strong>
-      <button class="styled__ViewStopButton-sc-12v7ov3-0 fRdwNC">
+      <button class="styled__ViewStopButton-sc-12v7ov3-0 hXaHvR">
         Stop Viewer
       </button>
     </p>
@@ -256,7 +256,69 @@ exports[`Map Popup StopEntityNoHandlers smoke-test 1`] = `
 </div>
 `;
 
-exports[`Map Popup StopEntitywithEntityPrefix smoke-test 1`] = `
+exports[`Map Popup StopEntityNoStopCode smoke-test 1`] = `
+<div class="styled__MapOverlayPopup-sc-12kjso7-1 cPqJxe">
+  <div id="focus-9526-popup-focus-trap"
+       role="presentation"
+  >
+    <header class="styled__PopupTitle-sc-12kjso7-3 jRNaQh">
+      W Burnside &amp; SW 2nd
+    </header>
+    <p class="styled__PopupRow-sc-12kjso7-2 ckOOWr">
+      <button class="styled__ViewStopButton-sc-12v7ov3-0 bbtcwi">
+        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>
+`;
+
+exports[`Map Popup StopEntityWithEntityPrefix smoke-test 1`] = `
 <div class="styled__MapOverlayPopup-sc-12kjso7-1 cPqJxe">
   <div id="focus-9526-popup-focus-trap"
        role="presentation"
@@ -271,7 +333,72 @@ exports[`Map Popup StopEntitywithEntityPrefix smoke-test 1`] = `
       <strong>
         Stop ID: 9526
       </strong>
-      <button class="styled__ViewStopButton-sc-12v7ov3-0 fRdwNC">
+      <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>
+`;
+
+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>

package/src/index.tsx

@@ -14,7 +14,7 @@ import { ViewStopButton } from "./styled";
 
 // Load the default messages.
 import defaultEnglishMessages from "../i18n/en-US.yml";
-import { makeDefaultGetEntityName } from "./util";
+import { makeDefaultGetEntityName, type StopIdAgencyMap } 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 +22,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
@@ -63,17 +71,18 @@ const StationHubDetails = ({ station }: { station: Station }) => {
 const StopDetails = ({ id, setViewedStop }: { id: string, setViewedStop: () => void; }) => {
   return (
     <Styled.PopupRow>
-      <strong>
-        <FormattedMessage
-          defaultMessage={defaultMessages["otpUi.MapPopup.stopId"]}
-          description="Displays the stop id"
-          id="otpUi.MapPopup.stopId"
-          values={{
-            stopId: id
-          }}
-        />
-      </strong>
-      <ViewStopButton onClick={setViewedStop}>
+      {id &&
+        <strong>
+          <FormattedMessage
+            defaultMessage={defaultMessages["otpUi.MapPopup.stopId"]}
+            description="Displays the stop id"
+            id="otpUi.MapPopup.stopId"
+            values={{
+              stopId: id
+            }}
+          />
+        </strong>}
+      <ViewStopButton onClick={setViewedStop} stopId={id}> 
         <FormattedMessage
           defaultMessage={defaultMessages["otpUi.MapPopup.stopViewer"]}
           description="Text for link that opens the stop viewer"
@@ -89,8 +98,9 @@ type Props = {
   closePopup?: (arg?: any) => 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;
 };
@@ -102,21 +112,37 @@ function entityIsStation(entity: Entity): entity is Station {
 /**
  * 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);
+  
+  // 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 = "networks" in entity && (coreUtils.itinerary.getCompaniesLabelFromNetworks(entity?.networks || [], configCompanies) || entity?.networks?.[0]);
 
   const bikesAvailablePresent = entityIsStation(entity)
   const entityIsStationHub = bikesAvailablePresent && entity?.bikesAvailable !== undefined && !entity?.isFloatingBike;
-  const stopId = !bikesAvailablePresent && entity?.code || entity.id.split(":")[1] || entity.id
-
-  // Double quotes make the query invalid, so remove them from the id just in case
+  const stopId = !bikesAvailablePresent && entity?.code;
   const id = `focus-${encodeURIComponent(entity.id).replace(/%/g, "")}-popup`
 
   return (
@@ -158,4 +184,5 @@ export function MapPopup({ closePopup = () => {}, configCompanies, entity, getEn
   );
 }
 
-export default MapPopup;
+export default MapPopup;
+export { type StopIdAgencyMap };

package/src/styled.ts

@@ -1,14 +1,16 @@
 import styled from "styled-components";
 
 /* eslint-disable-next-line import/prefer-default-export */
-export const ViewStopButton = styled.button`
+export const ViewStopButton = styled.button<{ stopId?: string }>`
   background: none;
   border-bottom: none;
-  border-left: 1px solid #000;
+  ${props =>
+    props.stopId != null
+      ? "border-left: 1px solid #000; margin-left: 5px;"
+      : "border-left: none; padding-left: 0;"};
   border-right: none;
   border-top: none;
   color: #008;
   font-family: inherit;
-  margin-left: 5px;
   padding-top: 0;
 `;

package/src/util.ts

@@ -1,7 +1,9 @@
-import { Company, Station, Stop } from "@opentripplanner/types";
+import { Agency, Company, Station, Stop } from "@opentripplanner/types";
 import { IntlShape } from "react-intl";
 import coreUtils from "@opentripplanner/core-utils";
 
+export type StopIdAgencyMap = Record<string, Agency>;
+
 // eslint-disable-next-line import/prefer-default-export
 export function makeDefaultGetEntityName(
   intl: IntlShape,
@@ -9,7 +11,8 @@ export function makeDefaultGetEntityName(
 ) {
   return function defaultGetEntityName(
     entity: Station | Stop,
-    configCompanies: Company[]
+    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
@@ -63,6 +66,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",