Merge pull request #5211 from HSLdevcom/add-configurable-routenumber-…

…text-limit-in-itinerary-list

DT-6603 Add configurable RouteNumber text limit in itinerary list

app/component/RouteNumber.js

@@ -12,15 +12,43 @@ const LONG_ROUTE_NUMBER_LENGTH = 6;
 
 function RouteNumber(props, context) {
   const mode = props.mode.toLowerCase();
-  const { alertSeverityLevel, color, withBicycle, withCar, text } = props;
+  const { alertSeverityLevel, color, withBicycle, withCar } = props;
   const isScooter = mode === TransportMode.Scooter.toLowerCase();
-  const textIsText = typeof text === 'string'; // can be also react node
+
+  // Perform text-related processing
+  let filteredText = props.text;
+  if (
+    props.shortenLongText &&
+    context.config.disabledLegTextModes?.includes(mode) &&
+    props.className.includes('line')
+  ) {
+    filteredText = '';
+  }
+  const textFieldIsText = typeof filteredText === 'string'; // can be also react node
+  if (
+    props.shortenLongText &&
+    context.config.shortenLongTextThreshold &&
+    filteredText &&
+    textFieldIsText &&
+    filteredText.length > context.config.shortenLongTextThreshold
+  ) {
+    filteredText = `${filteredText.substring(
+      0,
+      context.config.shortenLongTextThreshold - 3,
+    )}...`;
+  }
   const longText =
-    text && textIsText && text.length >= LONG_ROUTE_NUMBER_LENGTH;
+    filteredText &&
+    textFieldIsText &&
+    filteredText.length >= LONG_ROUTE_NUMBER_LENGTH;
   // Checks if route only has letters without identifying numbers and
   // length doesn't fit in the tab view
   const hasNoShortName =
-    text && textIsText && /^([^0-9]*)$/.test(text) && text.length > 3;
+    filteredText &&
+    textFieldIsText &&
+    /^([^0-9]*)$/.test(filteredText) &&
+    filteredText.length > 3;
+
   const getColor = () => color || (props.isTransitLeg ? 'currentColor' : null);
 
   const getIcon = (
@@ -140,7 +168,7 @@ function RouteNumber(props, context) {
             )}
           </div>
         )}
-        {text && (
+        {filteredText && (
           <div
             className={cx(
               'vehicle-number-container-v'.concat(props.card ? '-map' : ''),
@@ -158,10 +186,10 @@ function RouteNumber(props, context) {
               )}
               style={{ color: !props.withBar && getColor() }}
             >
-              {props.text}
+              {filteredText}
             </span>
-            {textIsText && (
-              <span className="sr-only">{text?.toLowerCase()}</span>
+            {textFieldIsText && (
+              <span className="sr-only">{filteredText?.toLowerCase()}</span>
             )}
           </div>
         )}
@@ -222,6 +250,7 @@ RouteNumber.propTypes = {
   card: PropTypes.bool,
   appendClass: PropTypes.string,
   occupancyStatus: PropTypes.string,
+  shortenLongText: PropTypes.bool,
 };
 
 RouteNumber.defaultProps = {
@@ -245,12 +274,12 @@ RouteNumber.defaultProps = {
   color: undefined,
   duration: undefined,
   occupancyStatus: undefined,
+  shortenLongText: false,
 };
 
 RouteNumber.contextTypes = {
   intl: intlShape.isRequired,
   config: configShape.isRequired,
 };
 
-RouteNumber.displayName = 'RouteNumber';
 export default RouteNumber;

app/component/RouteNumberContainer.js

@@ -1,66 +1,35 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { routeShape, configShape } from '../util/shapes';
-import { getLegText } from '../util/legUtils';
+import { getRouteText } from '../util/legUtils';
 import RouteNumber from './RouteNumber';
 
 const RouteNumberContainer = (
-  {
-    alertSeverityLevel,
-    interliningWithRoute,
-    className,
-    route,
-    isCallAgency,
-    occupancyStatus,
-    mode,
-    ...props
-  },
+  { interliningWithRoute, route, mode, ...props },
   { config },
 ) =>
   route && (
     <RouteNumber
-      alertSeverityLevel={alertSeverityLevel}
-      className={className}
-      isCallAgency={isCallAgency}
       color={route.color ? `#${route.color}` : null}
       mode={mode !== undefined ? mode : route.mode}
-      text={
-        config.disabledLegTextModes?.includes(route.mode) &&
-        className.includes('line')
-          ? ''
-          : getLegText(route, config, interliningWithRoute)
-      }
-      occupancyStatus={occupancyStatus}
+      text={getRouteText(route, config, interliningWithRoute)}
       {...props}
     />
   );
 
 RouteNumberContainer.propTypes = {
-  alertSeverityLevel: PropTypes.string,
   route: routeShape.isRequired,
   interliningWithRoute: PropTypes.string,
-  isCallAgency: PropTypes.bool,
-  vertical: PropTypes.bool,
-  className: PropTypes.string,
-  fadeLong: PropTypes.bool,
-  occupancyStatus: PropTypes.string,
   mode: PropTypes.string,
 };
 
 RouteNumberContainer.defaultProps = {
   interliningWithRoute: undefined,
-  alertSeverityLevel: undefined,
-  isCallAgency: false,
-  vertical: false,
-  fadeLong: false,
-  className: '',
-  occupancyStatus: undefined,
   mode: undefined,
 };
 
 RouteNumberContainer.contextTypes = {
   config: configShape.isRequired,
 };
 
-RouteNumberContainer.displayName = 'RouteNumberContainer';
 export default RouteNumberContainer;

app/component/itinerary/Itinerary.js

@@ -22,6 +22,7 @@ import {
   isCallAgencyLeg,
   getInterliningLegs,
   getTotalDistance,
+  getRouteText,
   legTime,
   legTimeStr,
   LegMode,
@@ -39,6 +40,8 @@ import { getRouteMode } from '../../util/modeUtils';
 import { getCapacityForLeg } from '../../util/occupancyUtil';
 import getCo2Value from '../../util/emissions';
 
+const NAME_LENGTH_THRESHOLD = 65; // for truncating long short names
+
 const Leg = ({
   mode,
   routeNumber,
@@ -86,6 +89,7 @@ export function RouteLeg(
     withBicycle,
     withCar,
     hasOneTransitLeg,
+    shortenLabels,
   },
   { config },
 ) {
@@ -130,6 +134,7 @@ export function RouteLeg(
         withBicycle={withBicycle}
         withCar={withCar}
         occupancyStatus={getOccupancyStatus()}
+        shortenLongText={shortenLabels}
       />
     );
   }
@@ -155,6 +160,7 @@ RouteLeg.propTypes = {
   withBicycle: PropTypes.bool.isRequired,
   withCar: PropTypes.bool.isRequired,
   hasOneTransitLeg: PropTypes.bool,
+  shortenLabels: PropTypes.bool,
 };
 
 RouteLeg.contextTypes = {
@@ -165,6 +171,7 @@ RouteLeg.defaultProps = {
   isTransitLeg: true,
   interliningWithRoute: undefined,
   hasOneTransitLeg: false,
+  shortenLabels: false,
 };
 
 export const ModeLeg = (
@@ -302,11 +309,14 @@ const Itinerary = (
   let intermediateSlack = 0;
   let transitLegCount = 0;
   let containsScooterLeg = false;
+  let nameLengthSum = 0; // approximate space required for route labels
   compressedLegs.forEach((leg, i) => {
     if (isTransitLeg(leg)) {
       noTransitLegs = false;
       transitLegCount += 1;
+      nameLengthSum += getRouteText(leg.route, config).length;
     }
+    nameLengthSum += 10; // every leg requires some minimum space
     if (
       leg.intermediatePlace ||
       connectsFromViaPoint(leg, intermediatePlaces)
@@ -316,6 +326,7 @@ const Itinerary = (
     }
     containsScooterLeg = leg.mode === 'SCOOTER' || containsScooterLeg;
   });
+  const shortenLabels = nameLengthSum > NAME_LENGTH_THRESHOLD;
   const durationWithoutSlack = duration - intermediateSlack; // don't include time spent at intermediate places in calculations for bar lengths
   const relativeLength = durationMs =>
     (100 * durationMs) / durationWithoutSlack; // as %
@@ -596,6 +607,7 @@ const Itinerary = (
             withBicycle={withBicycle}
             withCar={withCar}
             hasOneTransitLeg={hasOneTransitLeg(itinerary)}
+            shortenLabels={shortenLabels}
           />,
         );
       }

app/component/map/ItineraryLine.js

@@ -7,7 +7,7 @@ import { isBrowser } from '../../util/browser';
 import { getMiddleOf } from '../../util/geo-utils';
 import {
   getInterliningLegs,
-  getLegText,
+  getRouteText,
   isCallAgencyLeg,
   LegMode,
 } from '../../util/legUtils';
@@ -176,7 +176,7 @@ class ItineraryLine extends React.Component {
             />,
           );
         } else if (leg.transitLeg) {
-          const name = getLegText(
+          const name = getRouteText(
             leg.route,
             this.context.config,
             interliningWithRoute,

app/configurations/config.default.js

@@ -857,4 +857,5 @@ export default {
   ],
   navigation: false,
   sendAnalyticsCustomEventGoals: false,
+  shortenLongTextThreshold: 10, // for route number in itinerary summary
 };

app/configurations/config.matka.js

@@ -403,7 +403,7 @@ export default {
     FERRY: { showNotification: true },
   },
 
-  disabledLegTextModes: ['FERRY'],
+  disabledLegTextModes: ['ferry'],
 
   // Include both bike and park and bike and public, if bike is enabled
   includePublicWithBikePlan: true,

app/util/legUtils.js

@@ -186,7 +186,7 @@ function continueWithBicycle(leg1, leg2) {
   return isBicycle1 && isBicycle2 && !leg1.to.vehicleParking;
 }
 
-export function getLegText(route, config, interliningWithRoute) {
+export function getRouteText(route, config, interliningWithRoute) {
   const showAgency = get(config, 'agency.show', false);
   if (interliningWithRoute && interliningWithRoute !== route.shortName) {
     return `${route.shortName} / ${interliningWithRoute}`;