Add full ISO times and colours to debug UI

[leonardehrenfried]

Summary

This is a quality of life improvement for the debug UI:

• adds the full ISO date time to the title property, so it shows up on hover
• uses the line's colours when visualising legs and their geometries

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 69.78%. Comparing base (b108104) to head (1ad8d95).
Report is 7 commits behind head on dev-2.x.

Additional details and impacted files

@@              Coverage Diff              @@
##             dev-2.x    #6077      +/-   ##
=============================================
- Coverage      69.78%   69.78%   -0.01%     
+ Complexity     17357    17355       -2     
=============================================
  Files           1962     1962              
  Lines          74357    74357              
  Branches        7623     7623              
=============================================
- Hits           51893    51892       -1     
  Misses         19820    19820              
- Partials        2644     2645       +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[t2gran]

I noticed that the colors in the new Debug UI is in the same color palate as the OSM map - this is hard to "read" since it is little contrast. Should we do something about that? I think I can get a designer/UI person to look at this if intresting.

[leonardehrenfried]

Those colours are easy to change:

OpenTripPlanner/client/src/util/getColorForMode.ts

Lines 3 to 21 in 96b9004

	export const getColorForMode = function (mode: Mode) {
	if (mode === Mode.Foot) return '#191616';
	if (mode === Mode.Bicycle) return '#5076D9';
	if (mode === Mode.Scooter) return '#253664';
	if (mode === Mode.Car) return '#7e7e7e';
	if (mode === Mode.Rail) return '#86BF8B';
	if (mode === Mode.Coach) return '#25642A';
	if (mode === Mode.Metro) return '#D9B250';
	if (mode === Mode.Bus) return '#25642A';
	if (mode === Mode.Tram) return '#D9B250';
	if (mode === Mode.Trolleybus) return '#25642A';
	if (mode === Mode.Water) return '#81304C';
	if (mode === Mode.Air) return '#81304C';
	if (mode === Mode.Cableway) return '#81304C';
	if (mode === Mode.Funicular) return '#81304C';
	if (mode === Mode.Monorail) return '#81304C';
	if (mode === Mode.Taxi) return '#81304C';
	return '#aaa';
	};

[t2gran]

Her are a few examples:

I will see if I can find a person to look into doing this with some UI design skills.

[leonardehrenfried]

One solution could also be to use a low-contrast background map.

[testower]

Do you want to explore the color palette further before merging this PR? I think you'll have a hard time finding a color palette that works well on top of this background map as @leonardehrenfried pointed out.

[leonardehrenfried]

I don't want to work on the colour palette and will do it in the next PR. We are now back to reading the colours from the transit data and will have to evaluate if that is better or worse.

Another option would be to give the lines an outline.

[leonardehrenfried]

On the other hand it explains why the fallback colours in the old debug UI were so garish.