Add all routing parameters to debug UI

[a-limyr]

Summary

This PR does one main thing, and also has a side-effect.

The main feature is to dynamically create UI for all arguments in the trip query schema.

The side-effect, but also a feature, is a redesign of the layout of the client.

Issue

Links to issue #6258.

The process for generating UI for all arguments works like this:
When the tool is built a code-gen script is run to create a json structure of the arguments and a trip query. This will make sure that both the trip query and the arguments are based on the current schema.

The json structure is then read by a React component (TripQueryArguments) that generates UI for setting arguments for the trip query. There is a file excluded-arguments.ts that is used to exclude any arguments from being generated. This file is to ensure the main input fields (in the search bar) don't have duplicate inputs.

The generated trip query file is the file used for performing queries in the tool and when opening the query in GraphiQL.

When it comes to the changes in layout there are three main changes:

1. Left sidebar: contains itinerary results, filters (input arguments) and a view of the input variables in json format.
2. Right sidebar: Refactored this to use React and not raw DOM manipulation. Added also a hide/show function.
3. Top bar: Made bit more stable and contained, so that the main inputs do not overflow into the itinerary results.

[leonardehrenfried]

I would love to see a screenshot.

[a-limyr]

Hi, here are some screenshots.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 69.77%. Comparing base (5ab75af) to head (131f301).
Report is 67 commits behind head on dev-2.x.

Additional details and impacted files

@@              Coverage Diff              @@
##             dev-2.x    #6370      +/-   ##
=============================================
+ Coverage      69.73%   69.77%   +0.04%     
- Complexity     18023    18051      +28     
=============================================
  Files           2057     2060       +3     
  Lines          76978    77122     +144     
  Branches        7845     7856      +11     
=============================================
+ Hits           53678    53812     +134     
- Misses         20550    20556       +6     
- Partials        2750     2754       +4     

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

[leonardehrenfried]

From the screenshots it looks like this is no longer possible:

Screencast.From.2025-01-23.12-53-07.mp4

Am I right in thinking this?

[leonardehrenfried]

If you're not fetching the schema file from a running OTP instance, do you still need the endpoint that @t2gran added to the Transmodel API?

[a-limyr]

From the screenshots it looks like this is no longer possible:

Screencast.From.2025-01-23.12-53-07.mp4
Am I right in thinking this?

I see now this disappeared in refactoring. The refactoring of the debug layer menu, was meant to move from raw DOM manipulation and to React. I missed this. Would appreciate if you could have a look at the debug layer menu and see if there are other issues.

It should be possible to recreate this function. I can have a look.

[a-limyr]

If you're not fetching the schema file from a running OTP instance, do you still need the endpoint that @t2gran added to the Transmodel API?

No, that was a misunderstanding from my part. The schema is now read twice. Once during build, to generate the trip query file used by the client for queries. And once via introspection at runtime, to get the actual schema for the running OTP instance, to generate the complete list of the arguments.

Just to be clear. The endpoint is not used/needed.

[testower]

Just to be clear on why we both need to read the static schema on compile-time, AND do introspection in the runtime: The former is also needed to generate typescript types (and to generate the query code, which also needs to be present on compile-time for type-checking to work) - whereas the runtime introspection step is there to correctly generate the form components based on the actual schema running on the server.

[a-limyr]

I have added the debug layer group toggle functionality requested.

[leonardehrenfried]

Screencast.From.2025-01-23.17-44-37.mp4

Thanks it works beautifully!

[leonardehrenfried]

We spoke about this in today's dev meeting and some people - including myself - had some requests for how the screen is laid out. However, everybody agreed that we don't want to prevent this great improvement from being merged in order to move elements around the screen.

Thanks for this great work!