@opentripplanner/map-popup 0.0.1 → 1.0.0-alpha.1

package/lib/util.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../src/util.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAIvC,wBAAgB,wBAAwB,CACtC,IAAI,EAAE,SAAS,EACf,sBAAsB,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,YAGvC,OAAO,GAAG,IAAI,mBACL,OAAO,EAAE,KACzB,MAAM,CAkDV"}
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../src/util.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAIvC,wBAAgB,wBAAwB,CACtC,IAAI,EAAE,SAAS,EACf,sBAAsB,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,YAGvC,OAAO,GAAG,IAAI,mBACL,OAAO,EAAE,KACzB,MAAM,GAAG,IAAI,CAkDjB"}

package/lib/util.js

@@ -1,50 +1,56 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.makeDefaultGetEntityName = void 0;
-const core_utils_1 = __importDefault(require("@opentripplanner/core-utils"));
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.makeDefaultGetEntityName = makeDefaultGetEntityName;
+
+var _coreUtils = _interopRequireDefault(require("@opentripplanner/core-utils"));
+
 // eslint-disable-next-line import/prefer-default-export
 function makeDefaultGetEntityName(intl, defaultEnglishMessages) {
-    return function defaultGetEntityName(entity, configCompanies) {
-        var _a;
-        const stationNetworks = "networks" in entity &&
-            (core_utils_1.default.itinerary.getCompaniesLabelFromNetworks((entity === null || entity === void 0 ? void 0 : entity.networks) || [], configCompanies) ||
-                ((_a = entity === null || entity === void 0 ? void 0 : entity.networks) === null || _a === void 0 ? void 0 : _a[0]));
-        let stationName = 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.
-        if ((stationName.match(/-/g) || []).length > 3) {
-            stationName = null;
-        }
-        if ("isFloatingBike" in entity && entity.isFloatingBike) {
-            stationName = intl.formatMessage({
-                defaultMessage: defaultEnglishMessages["otpUi.MapPopup.floatingBike"],
-                description: "Popup title for a free-floating bike",
-                id: "otpUi.MapPopup.floatingBike"
-            }, { name: stationName || stationNetworks });
-        }
-        else if ("isFloatingCar" in entity && entity.isFloatingCar) {
-            stationName = intl.formatMessage({
-                defaultMessage: defaultEnglishMessages["otpUi.MapPopup.floatingCar"],
-                description: "Popup title for a free-floating car",
-                id: "otpUi.MapPopup.floatingCar"
-            }, {
-                company: stationNetworks,
-                name: stationName
-            });
-        }
-        else if ("isFloatingVehicle" in entity && entity.isFloatingVehicle) {
-            // assumes that all floating vehicles are E-scooters
-            stationName = intl.formatMessage({
-                defaultMessage: defaultEnglishMessages["otpUi.MapPopup.floatingEScooter"],
-                description: "Popup title for a free-floating e-scooter",
-                id: "otpUi.MapPopup.floatingEScooter"
-            }, { name: stationName || stationNetworks });
-        }
-        return stationName;
-    };
+  return function defaultGetEntityName(entity, configCompanies) {
+    var _entity$networks;
+
+    const stationNetworks = "networks" in entity && (_coreUtils.default.itinerary.getCompaniesLabelFromNetworks((entity === null || entity === void 0 ? void 0 : entity.networks) || [], configCompanies) || (entity === null || entity === void 0 ? void 0 : (_entity$networks = entity.networks) === null || _entity$networks === void 0 ? void 0 : _entity$networks[0]));
+    let stationName = 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.
+
+    if ((stationName.match(/-/g) || []).length > 3) {
+      stationName = null;
+    }
+
+    if ("isFloatingBike" in entity && entity.isFloatingBike) {
+      stationName = intl.formatMessage({
+        defaultMessage: defaultEnglishMessages["otpUi.MapPopup.floatingBike"],
+        description: "Popup title for a free-floating bike",
+        id: "otpUi.MapPopup.floatingBike"
+      }, {
+        name: stationName || stationNetworks
+      });
+    } else if ("isFloatingCar" in entity && entity.isFloatingCar) {
+      stationName = intl.formatMessage({
+        defaultMessage: defaultEnglishMessages["otpUi.MapPopup.floatingCar"],
+        description: "Popup title for a free-floating car",
+        id: "otpUi.MapPopup.floatingCar"
+      }, {
+        company: stationNetworks,
+        name: stationName
+      });
+    } else if ("isFloatingVehicle" in entity && entity.isFloatingVehicle) {
+      // assumes that all floating vehicles are E-scooters
+      stationName = intl.formatMessage({
+        defaultMessage: defaultEnglishMessages["otpUi.MapPopup.floatingEScooter"],
+        description: "Popup title for a free-floating e-scooter",
+        id: "otpUi.MapPopup.floatingEScooter"
+      }, {
+        name: stationName || stationNetworks
+      });
+    }
+
+    return stationName;
+  };
 }
-exports.makeDefaultGetEntityName = makeDefaultGetEntityName;
 //# sourceMappingURL=util.js.map

package/lib/util.js.map

@@ -1 +1 @@
-{"version":3,"file":"util.js","sourceRoot":"","sources":["../src/util.ts"],"names":[],"mappings":";;;;;;AAEA,6EAAoD;AAEpD,wDAAwD;AACxD,SAAgB,wBAAwB,CACtC,IAAe,EACf,sBAAiD;IAEjD,OAAO,SAAS,oBAAoB,CAClC,MAAsB,EACtB,eAA0B;;QAE1B,MAAM,eAAe,GACnB,UAAU,IAAI,MAAM;YACpB,CAAC,oBAAS,CAAC,SAAS,CAAC,6BAA6B,CAChD,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,KAAI,EAAE,EACtB,eAAe,CAChB;iBACC,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,0CAAG,CAAC,CAAC,CAAA,CAAC,CAAC;QAC3B,IAAI,WAAW,GAAG,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,EAAE,CAAC;QAC3C,8EAA8E;QAC9E,sEAAsE;QACtE,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE;YAC9C,WAAW,GAAG,IAAI,CAAC;SACpB;QAED,IAAI,gBAAgB,IAAI,MAAM,IAAI,MAAM,CAAC,cAAc,EAAE;YACvD,WAAW,GAAG,IAAI,CAAC,aAAa,CAC9B;gBACE,cAAc,EAAE,sBAAsB,CAAC,6BAA6B,CAAC;gBACrE,WAAW,EAAE,sCAAsC;gBACnD,EAAE,EAAE,6BAA6B;aAClC,EACD,EAAE,IAAI,EAAE,WAAW,IAAI,eAAe,EAAE,CACzC,CAAC;SACH;aAAM,IAAI,eAAe,IAAI,MAAM,IAAI,MAAM,CAAC,aAAa,EAAE;YAC5D,WAAW,GAAG,IAAI,CAAC,aAAa,CAC9B;gBACE,cAAc,EAAE,sBAAsB,CAAC,4BAA4B,CAAC;gBACpE,WAAW,EAAE,qCAAqC;gBAClD,EAAE,EAAE,4BAA4B;aACjC,EACD;gBACE,OAAO,EAAE,eAAe;gBACxB,IAAI,EAAE,WAAW;aAClB,CACF,CAAC;SACH;aAAM,IAAI,mBAAmB,IAAI,MAAM,IAAI,MAAM,CAAC,iBAAiB,EAAE;YACpE,oDAAoD;YACpD,WAAW,GAAG,IAAI,CAAC,aAAa,CAC9B;gBACE,cAAc,EACZ,sBAAsB,CAAC,iCAAiC,CAAC;gBAC3D,WAAW,EAAE,2CAA2C;gBACxD,EAAE,EAAE,iCAAiC;aACtC,EACD,EAAE,IAAI,EAAE,WAAW,IAAI,eAAe,EAAE,CACzC,CAAC;SACH;QACD,OAAO,WAAW,CAAC;IACrB,CAAC,CAAC;AACJ,CAAC;AAzDD,4DAyDC"}
+{"version":3,"sources":["../src/util.ts"],"names":["makeDefaultGetEntityName","intl","defaultEnglishMessages","defaultGetEntityName","entity","configCompanies","stationNetworks","coreUtils","itinerary","getCompaniesLabelFromNetworks","networks","stationName","name","id","match","length","isFloatingBike","formatMessage","defaultMessage","description","isFloatingCar","company","isFloatingVehicle"],"mappings":";;;;;;;;;AAEA;;AAEA;AACO,SAASA,wBAAT,CACLC,IADK,EAELC,sBAFK,EAGL;AACA,SAAO,SAASC,oBAAT,CACLC,MADK,EAELC,eAFK,EAGU;AAAA;;AACf,UAAMC,eAAe,GACnB,cAAcF,MAAd,KACCG,mBAAUC,SAAV,CAAoBC,6BAApB,CACC,CAAAL,MAAM,SAAN,IAAAA,MAAM,WAAN,YAAAA,MAAM,CAAEM,QAAR,KAAoB,EADrB,EAECL,eAFD,MAICD,MAJD,aAICA,MAJD,2CAICA,MAAM,CAAEM,QAJT,qDAIC,iBAAmB,CAAnB,CAJD,CADD,CADF;AAOA,QAAIC,WAA0B,GAAGP,MAAM,CAACQ,IAAP,IAAeR,MAAM,CAACS,EAAvD,CARe,CASf;AACA;;AACA,QAAI,CAACF,WAAW,CAACG,KAAZ,CAAkB,IAAlB,KAA2B,EAA5B,EAAgCC,MAAhC,GAAyC,CAA7C,EAAgD;AAC9CJ,MAAAA,WAAW,GAAG,IAAd;AACD;;AAED,QAAI,oBAAoBP,MAApB,IAA8BA,MAAM,CAACY,cAAzC,EAAyD;AACvDL,MAAAA,WAAW,GAAGV,IAAI,CAACgB,aAAL,CACZ;AACEC,QAAAA,cAAc,EAAEhB,sBAAsB,CAAC,6BAAD,CADxC;AAEEiB,QAAAA,WAAW,EAAE,sCAFf;AAGEN,QAAAA,EAAE,EAAE;AAHN,OADY,EAMZ;AAAED,QAAAA,IAAI,EAAED,WAAW,IAAIL;AAAvB,OANY,CAAd;AAQD,KATD,MASO,IAAI,mBAAmBF,MAAnB,IAA6BA,MAAM,CAACgB,aAAxC,EAAuD;AAC5DT,MAAAA,WAAW,GAAGV,IAAI,CAACgB,aAAL,CACZ;AACEC,QAAAA,cAAc,EAAEhB,sBAAsB,CAAC,4BAAD,CADxC;AAEEiB,QAAAA,WAAW,EAAE,qCAFf;AAGEN,QAAAA,EAAE,EAAE;AAHN,OADY,EAMZ;AACEQ,QAAAA,OAAO,EAAEf,eADX;AAEEM,QAAAA,IAAI,EAAED;AAFR,OANY,CAAd;AAWD,KAZM,MAYA,IAAI,uBAAuBP,MAAvB,IAAiCA,MAAM,CAACkB,iBAA5C,EAA+D;AACpE;AACAX,MAAAA,WAAW,GAAGV,IAAI,CAACgB,aAAL,CACZ;AACEC,QAAAA,cAAc,EACZhB,sBAAsB,CAAC,iCAAD,CAF1B;AAGEiB,QAAAA,WAAW,EAAE,2CAHf;AAIEN,QAAAA,EAAE,EAAE;AAJN,OADY,EAOZ;AAAED,QAAAA,IAAI,EAAED,WAAW,IAAIL;AAAvB,OAPY,CAAd;AASD;;AACD,WAAOK,WAAP;AACD,GApDD;AAqDD","sourcesContent":["import { Company, Station, Stop } from \"@opentripplanner/types\";\nimport { IntlShape } from \"react-intl\";\nimport coreUtils from \"@opentripplanner/core-utils\";\n\n// eslint-disable-next-line import/prefer-default-export\nexport function makeDefaultGetEntityName(\n  intl: IntlShape,\n  defaultEnglishMessages: { [key: string]: string }\n) {\n  return function defaultGetEntityName(\n    entity: Station | Stop,\n    configCompanies: Company[]\n  ): string | null {\n    const stationNetworks =\n      \"networks\" in entity &&\n      (coreUtils.itinerary.getCompaniesLabelFromNetworks(\n        entity?.networks || [],\n        configCompanies\n      ) ||\n        entity?.networks?.[0]);\n    let stationName: string | null = entity.name || entity.id;\n    // If the station name or id is a giant UUID (with more than 3 \"-\" characters)\n    // best not to show that at all. The company name will still be shown.\n    if ((stationName.match(/-/g) || []).length > 3) {\n      stationName = null;\n    }\n\n    if (\"isFloatingBike\" in entity && entity.isFloatingBike) {\n      stationName = intl.formatMessage(\n        {\n          defaultMessage: defaultEnglishMessages[\"otpUi.MapPopup.floatingBike\"],\n          description: \"Popup title for a free-floating bike\",\n          id: \"otpUi.MapPopup.floatingBike\"\n        },\n        { name: stationName || stationNetworks }\n      );\n    } else if (\"isFloatingCar\" in entity && entity.isFloatingCar) {\n      stationName = intl.formatMessage(\n        {\n          defaultMessage: defaultEnglishMessages[\"otpUi.MapPopup.floatingCar\"],\n          description: \"Popup title for a free-floating car\",\n          id: \"otpUi.MapPopup.floatingCar\"\n        },\n        {\n          company: stationNetworks,\n          name: stationName\n        }\n      );\n    } else if (\"isFloatingVehicle\" in entity && entity.isFloatingVehicle) {\n      // assumes that all floating vehicles are E-scooters\n      stationName = intl.formatMessage(\n        {\n          defaultMessage:\n            defaultEnglishMessages[\"otpUi.MapPopup.floatingEScooter\"],\n          description: \"Popup title for a free-floating e-scooter\",\n          id: \"otpUi.MapPopup.floatingEScooter\"\n        },\n        { name: stationName || stationNetworks }\n      );\n    }\n    return stationName;\n  };\n}\n"],"file":"util.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentripplanner/map-popup",
-  "version": "0.0.1",
+  "version": "1.0.0-alpha.1",
   "description": "A component for displaying map popup contents",
   "main": "lib/index.js",
   "module": "esm/index.js",
@@ -11,8 +11,8 @@
   "license": "MIT",
   "private": false,
   "dependencies": {
-    "@opentripplanner/base-map": "^3.0.6",
-    "@opentripplanner/core-utils": "^7.0.9",
+    "@opentripplanner/base-map": "^3.0.7",
+    "@opentripplanner/core-utils": "^8.0.0",
     "@opentripplanner/from-to-location-picker": "^2.1.5",
     "flat": "^5.0.2"
   },

package/src/MapPopup.story.tsx

@@ -7,45 +7,45 @@ export default {
 };
 
 const STOP = {
+  flex: false,
   id: "9526",
-  name: "W Burnside & SW 2nd",
   lat: 45.523009,
   lon: -122.672529,
-  flex: false
+  name: "W Burnside & SW 2nd"
 };
 
 const STATION = {
-  id: '"hub_1580"',
-  name: "SW Morrison at 18th",
-  x: -122.6896771788597,
-  y: 45.5219604810172,
+  "stroke-width": 2,
   allowDropoff: true,
   allowPickup: true,
-  networks: ["BIKETOWN"],
   bikesAvailable: 6,
-  spacesAvailable: 11,
-  isFloatingBike: false,
+  color: "#f00",
+  id: '"hub_1580"',
   isCarStation: false,
+  isFloatingBike: false,
+  name: "SW Morrison at 18th",
+  networks: ["BIKETOWN"],
   realTimeData: true,
-  "stroke-width": 2,
-  color: "#f00"
+  spacesAvailable: 11,
+  x: -122.6896771788597,
+  y: 45.5219604810172
 };
 
-const SCOOTER = {
-  id: '"bike_6861"',
-  name: "0541 BIKETOWN",
-  x: -122.70486,
-  y: 45.525486666666666,
+const FLOATING_VEHICLE = {
+  "stroke-width": 1,
   allowDropoff: false,
   allowPickup: true,
-  networks: ["BIKETOWN"],
   bikesAvailable: 1,
-  spacesAvailable: 0,
-  isFloatingBike: true,
+  color: "#f00",
+  id: '"bike_6861"',
   isCarStation: false,
+  isFloatingBike: true,
+  name: "0541 BIKETOWN",
+  networks: ["BIKETOWN"],
   realTimeData: true,
-  "stroke-width": 1,
-  color: "#f00"
+  spacesAvailable: 0,
+  x: -122.70486,
+  y: 45.525486666666666
 };
 
 export const StopEntity = (): JSX.Element => {
@@ -58,6 +58,10 @@ export const StopEntity = (): JSX.Element => {
   );
 };
 
+export const StopEntityNoHandlers = (): JSX.Element => {
+  return <MapPopupContents entity={STOP} />;
+};
+
 export const StationEntity = (): JSX.Element => {
   return (
     <MapPopupContents
@@ -68,10 +72,10 @@ export const StationEntity = (): JSX.Element => {
   );
 };
 
-export const ScooterEntity = (): JSX.Element => {
+export const FloatingVehicleEntity = (): JSX.Element => {
   return (
     <MapPopupContents
-      entity={SCOOTER}
+      entity={FLOATING_VEHICLE}
       setLocation={action("setLocation")}
       setViewedStop={action("setViewedStop")}
     />

package/src/__unpublished__/messages.d.ts

@@ -0,0 +1,2 @@
+// Generic module definition for all YAML file imports.
+declare module "*.yml";

package/src/index.tsx

@@ -10,7 +10,6 @@ import { flatten } from "flat";
 import * as S from "./styled";
 
 // Load the default messages.
-// @ts-expect-error TODO: why is this failing?
 import defaultEnglishMessages from "../i18n/en-US.yml";
 import { makeDefaultGetEntityName } from "./util";
 
@@ -18,103 +17,111 @@ import { makeDefaultGetEntityName } from "./util";
 // the YAML loaders behave differently between webpack and our version of jest:
 // - the yaml loader for webpack returns a nested object,
 // - the yaml loader for jest returns messages with flattened ids.
-export const defaultMessages = flatten(defaultEnglishMessages);
+export const defaultMessages: { [key: string]: string } = flatten(defaultEnglishMessages);
+
+
+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
+
+  const lat = entityLat || x
+  const lon = entityLon || y
+  if (!lat || !lon) return null
+
+  return { lat, lon, name };
+}
+
+const StationHubDetails = ({ station }: { station: Station }) => {
+  return (
+    <BaseMapStyled.PopupRow>
+      <div>
+        <FormattedMessage
+          defaultMessage={
+            defaultMessages["otpUi.MapPopup.availableBikes"]
+          }
+          description="Label text for the number of bikes available"
+          id="otpUi.MapPopup.availableBikes"
+          values={{ value: station.bikesAvailable }}
+        />
+      </div>
+      <div>
+        <FormattedMessage
+          defaultMessage={
+            defaultMessages["otpUi.MapPopup.availableDocks"]
+          }
+          description="Label text for the number of docks available"
+          id="otpUi.MapPopup.availableDocks"
+          values={{ value: station.spacesAvailable }}
+        />
+      </div>
+    </BaseMapStyled.PopupRow>
+  )
+}
+
+const StopDetails = ({ id, setViewedStop }: { id: string, setViewedStop: ({ stopId }: { stopId: string }) => void; }) => {
+  return (
+    <BaseMapStyled.PopupRow>
+        <strong>
+          <FormattedMessage
+            defaultMessage={defaultMessages["otpUi.MapPopup.stopId"]}
+            description="Displays the stop id"
+            id="otpUi.MapPopup.stopId"
+            values={{
+              stopId: id
+            }}
+          />
+        </strong>
+      <S.ViewStopButton onClick={() => setViewedStop({ stopId: id })}>
+        <FormattedMessage
+          defaultMessage={defaultMessages["otpUi.MapPopup.stopViewer"]}
+          description="Text for link that opens the stop viewer"
+          id="otpUi.MapPopup.stopViewer"
+        />
+      </S.ViewStopButton>
+    </BaseMapStyled.PopupRow>
+  )
+}
 
 type Entity = Stop | Station
 type Props = {
   configCompanies?: ConfiguredCompany[];
+  entity: Entity
   getEntityName?: (entity: Entity, configCompanies: Company[],) => string;
-
   setLocation?: ({ location, locationType }: { location: Location, locationType: string }) => void;
   setViewedStop?: ({ stopId }: { stopId: string }) => void;
-
-  entity: Entity
 };
 
 /**
  * Renders a map popup for a stop, scooter, or shared bike
  */
 export function MapPopup({ configCompanies, entity, getEntityName, setLocation, setViewedStop, }: Props): JSX.Element {
-  if (!entity) return null
   const intl = useIntl()
+  if (!entity) return <></>
 
-  const getNameFunc = getEntityName || makeDefaultGetEntityName(intl, defaultEnglishMessages);
+  const getNameFunc = getEntityName || makeDefaultGetEntityName(intl, defaultMessages);
   const name = getNameFunc(entity, configCompanies);
 
-  const generateLocation = () => {
-    // @ts-expect-error some of these values may be null, but that's ok
-    const { lon: entityLon, lat: entityLat, x, y } = entity
-
-    const lat = entityLat || x
-    const lon = entityLon || y
-    if (!lat || !lon) return null
 
-    return { lat, lon, name };
-  }
-
-  const entityIsStationHub = "bikesAvailable" in entity && entity?.bikesAvailable !== undefined && !entity?.isFloatingBike;
-  const entityIsStop = !("bikesAvailable" in entity)
+  const bikesAvailablePresent = "bikesAvailable" in entity
+  const entityIsStationHub = bikesAvailablePresent && entity?.bikesAvailable !== undefined && !entity?.isFloatingBike;
   // @ts-expect-error ts doesn't understand entityIsStop
-  const stopId = entityIsStop && entity?.code || entity.id.split(":")[1] || entity.id
+  const stopId = !bikesAvailablePresent && entity?.code || entity.id.split(":")[1] || entity.id
 
   return (
     <BaseMapStyled.MapOverlayPopup>
       <BaseMapStyled.PopupTitle>{name}</BaseMapStyled.PopupTitle>
       {/* render dock info if it is available */}
-      {entityIsStationHub && (
-        <BaseMapStyled.PopupRow>
-          <div>
-            <FormattedMessage
-              defaultMessage={
-                defaultMessages["otpUi.MapPopup.availableBikes"]
-              }
-              description="Label text for the number of bikes available"
-              id="otpUi.MapPopup.availableBikes"
-              values={{ value: entity.bikesAvailable }}
-            />
-          </div>
-          <div>
-            <FormattedMessage
-              defaultMessage={
-                defaultMessages["otpUi.MapPopup.availableDocks"]
-              }
-              description="Label text for the number of docks available"
-              id="otpUi.MapPopup.availableDocks"
-              values={{ value: entity.spacesAvailable }}
-            />
-          </div>
-        </BaseMapStyled.PopupRow>
-      )}
+      {entityIsStationHub && <StationHubDetails station={entity} />}
 
       {/* render stop viewer link if available */}
-      {setViewedStop && entityIsStop && <BaseMapStyled.PopupRow>
-        <span>
-          <strong>
-            <FormattedMessage
-              defaultMessage={defaultMessages["otpUi.MapPopup.stopId"]}
-              description="Displays the stop id"
-              id="otpUi.MapPopup.stopId"
-              values={{
-                stopId
-              }}
-            />
-          </strong>
-        </span>
-        <S.ViewStopButton onClick={() => setViewedStop(stopId)}>
-          <FormattedMessage
-            defaultMessage={defaultMessages["otpUi.MapPopup.stopViewer"]}
-            description="Text for link that opens the stop viewer"
-            id="otpUi.MapPopup.stopViewer"
-          />
-        </S.ViewStopButton>
-      </BaseMapStyled.PopupRow>}
+      {setViewedStop && !bikesAvailablePresent && <StopDetails id={stopId} setViewedStop={setViewedStop} />}
 
       {/* The "Set as [from/to]" ButtonGroup */}
       {setLocation && (
         <BaseMapStyled.PopupRow>
           <FromToLocationPicker
             label
-            location={generateLocation()}
+            location={generateLocation(entity, name)}
             setLocation={setLocation}
           />
         </BaseMapStyled.PopupRow>

package/src/styled.ts

@@ -5,13 +5,10 @@ export const ViewStopButton = styled.button`
   background: none;
   border-bottom: none;
   border-left: 1px solid #000;
-  border-radius: 0;
   border-right: none;
   border-top: none;
   color: #008;
-  height: 14px;
-  line-height: 1;
+  font-family: inherit;
   margin-left: 5px;
-  outline: none;
   padding-top: 0;
 `;

package/src/util.ts

@@ -10,7 +10,7 @@ export function makeDefaultGetEntityName(
   return function defaultGetEntityName(
     entity: Station | Stop,
     configCompanies: Company[]
-  ): string {
+  ): string | null {
     const stationNetworks =
       "networks" in entity &&
       (coreUtils.itinerary.getCompaniesLabelFromNetworks(
@@ -18,7 +18,7 @@ export function makeDefaultGetEntityName(
         configCompanies
       ) ||
         entity?.networks?.[0]);
-    let stationName = entity.name || entity.id;
+    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.
     if ((stationName.match(/-/g) || []).length > 3) {