From d305306ae606d8de72a581c1649fcd72f92564b3 Mon Sep 17 00:00:00 2001
From: Leonard Ehrenfried <mail@leonard.io>
Date: Mon, 16 Dec 2024 12:32:12 +0100
Subject: [PATCH 1/3] Show generalized cost in debug UI

---
 .../ItineraryList/ItineraryDetails.tsx         |  4 ++++
 .../ItineraryList/ItineraryLegDetails.tsx      |  2 +-
 client/src/static/query/tripQuery.tsx          |  2 ++
 client/src/style.css                           |  6 ++++++
 client/src/util/formatDuration.ts              | 18 ++++++------------
 5 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/client/src/components/ItineraryList/ItineraryDetails.tsx b/client/src/components/ItineraryList/ItineraryDetails.tsx
index 11fe14c73fb..58b705abf52 100644
--- a/client/src/components/ItineraryList/ItineraryDetails.tsx
+++ b/client/src/components/ItineraryList/ItineraryDetails.tsx
@@ -10,6 +10,10 @@ export function ItineraryDetails({ tripPattern }: { tripPattern: TripPattern })
       {tripPattern.legs.map((leg, i) => (
         <ItineraryLegDetails key={leg.id ? leg.id : `noid_${i}`} leg={leg} isLast={i === tripPattern.legs.length - 1} />
       ))}
+
+      <div className="generalized-cost">
+        Generalized cost: ${tripPattern.generalizedCost}
+      </div>
     </div>
   );
 }
diff --git a/client/src/components/ItineraryList/ItineraryLegDetails.tsx b/client/src/components/ItineraryList/ItineraryLegDetails.tsx
index 65d790902a8..2239fd8d8bf 100644
--- a/client/src/components/ItineraryList/ItineraryLegDetails.tsx
+++ b/client/src/components/ItineraryList/ItineraryLegDetails.tsx
@@ -21,7 +21,7 @@ export function ItineraryLegDetails({ leg, isLast }: { leg: Leg; isLast: boolean
   return (
     <div className="itinerary-leg-details">
       <div className="times">
-        {formatDistance(leg.distance)}, {formatDuration(leg.duration)}
+        {formatDistance(leg.distance)}, {formatDuration(leg.duration)}, ${leg.generalizedCost}
       </div>
       <InterchangeInfo leg={leg} />
       <LegTime
diff --git a/client/src/static/query/tripQuery.tsx b/client/src/static/query/tripQuery.tsx
index 57cca5d4056..f435c56e4d6 100644
--- a/client/src/static/query/tripQuery.tsx
+++ b/client/src/static/query/tripQuery.tsx
@@ -35,6 +35,7 @@ export const query = graphql(`
         expectedStartTime
         duration
         distance
+        generalizedCost
         legs {
           id
           mode
@@ -45,6 +46,7 @@ export const query = graphql(`
           realtime
           distance
           duration
+          generalizedCost
           fromPlace {
             name
             quay {
diff --git a/client/src/style.css b/client/src/style.css
index f838dce2c7b..eb5cbadf93b 100644
--- a/client/src/style.css
+++ b/client/src/style.css
@@ -113,6 +113,12 @@
   font-size: 11px;
 }
 
+.accordion-body .generalized-cost {
+  font-size: 11px;
+  text-align: end;
+  margin-right: 9px;
+}
+
 .itinerary-leg-details .mode {
   margin-top: 2px;
 }
diff --git a/client/src/util/formatDuration.ts b/client/src/util/formatDuration.ts
index 94e51ad9d47..8f77a29302e 100644
--- a/client/src/util/formatDuration.ts
+++ b/client/src/util/formatDuration.ts
@@ -10,22 +10,16 @@ export function formatDuration(seconds: number) {
 
   let formatted = '';
 
-  if (hrs === 1) {
-    formatted = `${formatted}${hrs} hr `;
-  } else if (hrs > 1) {
-    formatted = `${formatted}${hrs} hrs `;
+  if (hrs > 0) {
+    formatted = `${formatted}${hrs}h `;
   }
 
-  if (mins === 1) {
-    formatted = `${formatted}${mins} min `;
-  } else if (mins > 1) {
-    formatted = `${formatted}${mins} mins `;
+  if (mins > 0) {
+    formatted = `${formatted}${mins}min `;
   }
 
-  if (secs === 1) {
-    formatted = `${formatted}${secs} sec `;
-  } else if (secs > 1) {
-    formatted = `${formatted}${secs} secs `;
+  if (secs > 1) {
+    formatted = `${formatted}${secs}s`;
   }
 
   return formatted;

From 8d321e7f1884f18e9214067dc3e4175d886e0c9c Mon Sep 17 00:00:00 2001
From: Leonard Ehrenfried <mail@leonard.io>
Date: Mon, 16 Dec 2024 12:36:07 +0100
Subject: [PATCH 2/3] Add tooltip

---
 client/src/components/ItineraryList/ItineraryDetails.tsx    | 4 +---
 client/src/components/ItineraryList/ItineraryLegDetails.tsx | 3 ++-
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/client/src/components/ItineraryList/ItineraryDetails.tsx b/client/src/components/ItineraryList/ItineraryDetails.tsx
index 58b705abf52..ba2caf4d15d 100644
--- a/client/src/components/ItineraryList/ItineraryDetails.tsx
+++ b/client/src/components/ItineraryList/ItineraryDetails.tsx
@@ -11,9 +11,7 @@ export function ItineraryDetails({ tripPattern }: { tripPattern: TripPattern })
         <ItineraryLegDetails key={leg.id ? leg.id : `noid_${i}`} leg={leg} isLast={i === tripPattern.legs.length - 1} />
       ))}
 
-      <div className="generalized-cost">
-        Generalized cost: ${tripPattern.generalizedCost}
-      </div>
+      <div className="generalized-cost">Generalized cost: ${tripPattern.generalizedCost}</div>
     </div>
   );
 }
diff --git a/client/src/components/ItineraryList/ItineraryLegDetails.tsx b/client/src/components/ItineraryList/ItineraryLegDetails.tsx
index 2239fd8d8bf..86d2d4db7a4 100644
--- a/client/src/components/ItineraryList/ItineraryLegDetails.tsx
+++ b/client/src/components/ItineraryList/ItineraryLegDetails.tsx
@@ -21,7 +21,8 @@ export function ItineraryLegDetails({ leg, isLast }: { leg: Leg; isLast: boolean
   return (
     <div className="itinerary-leg-details">
       <div className="times">
-        {formatDistance(leg.distance)}, {formatDuration(leg.duration)}, ${leg.generalizedCost}
+        {formatDistance(leg.distance)}, {formatDuration(leg.duration)},{' '}
+        <span title={'Generalized cost: $' + leg.generalizedCost}>${leg.generalizedCost}</span>
       </div>
       <InterchangeInfo leg={leg} />
       <LegTime

From edcba5a2aa1f9175780d6da3c606cc95cd5176fc Mon Sep 17 00:00:00 2001
From: Leonard Ehrenfried <mail@leonard.io>
Date: Tue, 17 Dec 2024 10:45:41 +0100
Subject: [PATCH 3/3] Use cent sign for generalized cost

---
 client/src/components/ItineraryList/ItineraryDetails.tsx    | 2 +-
 client/src/components/ItineraryList/ItineraryLegDetails.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/ItineraryList/ItineraryDetails.tsx b/client/src/components/ItineraryList/ItineraryDetails.tsx
index ba2caf4d15d..23e67ce9a95 100644
--- a/client/src/components/ItineraryList/ItineraryDetails.tsx
+++ b/client/src/components/ItineraryList/ItineraryDetails.tsx
@@ -11,7 +11,7 @@ export function ItineraryDetails({ tripPattern }: { tripPattern: TripPattern })
         <ItineraryLegDetails key={leg.id ? leg.id : `noid_${i}`} leg={leg} isLast={i === tripPattern.legs.length - 1} />
       ))}
 
-      <div className="generalized-cost">Generalized cost: ${tripPattern.generalizedCost}</div>
+      <div className="generalized-cost">Generalized cost: ¢{tripPattern.generalizedCost}</div>
     </div>
   );
 }
diff --git a/client/src/components/ItineraryList/ItineraryLegDetails.tsx b/client/src/components/ItineraryList/ItineraryLegDetails.tsx
index 86d2d4db7a4..04ddc55c574 100644
--- a/client/src/components/ItineraryList/ItineraryLegDetails.tsx
+++ b/client/src/components/ItineraryList/ItineraryLegDetails.tsx
@@ -22,7 +22,7 @@ export function ItineraryLegDetails({ leg, isLast }: { leg: Leg; isLast: boolean
     <div className="itinerary-leg-details">
       <div className="times">
         {formatDistance(leg.distance)}, {formatDuration(leg.duration)},{' '}
-        <span title={'Generalized cost: $' + leg.generalizedCost}>${leg.generalizedCost}</span>
+        <span title={'Generalized cost: ¢' + leg.generalizedCost}>¢{leg.generalizedCost}</span>
       </div>
       <InterchangeInfo leg={leg} />
       <LegTime