Open graphQL trip. quay and line query in graphiQL

client/.env

@@ -1,3 +1,3 @@
 VITE_API_URL=/otp/transmodel/v3
 VITE_DEBUG_STYLE_URL=/otp/routers/default/inspector/vectortile/style.json
-
+VITE_GRAPHIQL_URL=/graphiql?flavor=transmodel

client/.env.development

@@ -1,2 +1,3 @@
 VITE_API_URL=http://localhost:8080/otp/transmodel/v3
-VITE_DEBUG_STYLE_URL=http://localhost:8080/otp/routers/default/inspector/vectortile/style.json
+VITE_DEBUG_STYLE_URL=http://localhost:8080/otp/routers/default/inspector/vectortile/style.json
+VITE_GRAPHIQL_URL=http://localhost:8080/graphiql?flavor=transmodel

client/src/components/ItineraryList/ItineraryLegDetails.tsx

@@ -3,8 +3,20 @@ import { LegTime } from './LegTime.tsx';
 import { formatDistance } from '../../util/formatDistance.ts';
 import { formatDuration } from '../../util/formatDuration.ts';
 import { InterchangeInfo } from './InterchangeInfo.tsx';
+import { quayQueryAsString } from '../../static/query/quayQuery.tsx';
+import { lineQueryAsString } from '../../static/query/lineQuery.tsx';
+const graphiQLUrl = import.meta.env.VITE_GRAPHIQL_URL;
 
 export function ItineraryLegDetails({ leg, isLast }: { leg: Leg; isLast: boolean }) {
+  const lineID = { id: leg.line?.id };
+  const fromPlaceID = { id: leg.fromPlace.quay?.id };
+  const toPlaceID = { id: leg.toPlace.quay?.id };
+  const formattedQuayQuery = encodeURIComponent(quayQueryAsString);
+  const formattedLineQuery = encodeURIComponent(lineQueryAsString);
+  const formattedLineID = encodeURIComponent(JSON.stringify(lineID));
+  const formattedFromPlaceID = encodeURIComponent(JSON.stringify(fromPlaceID));
+  const formattedToPlaceID = encodeURIComponent(JSON.stringify(toPlaceID));
+
   return (
     <div className="itinerary-leg-details">
       <div className="times">
@@ -17,19 +29,40 @@ export function ItineraryLegDetails({ leg, isLast }: { leg: Leg; isLast: boolean
         <b>{leg.mode}</b>{' '}
         {leg.line && (
           <>
-            <u>
+            <a
+              title={leg.line?.id}
+              target={'_blank'}
+              href={graphiQLUrl + '&query=' + formattedLineQuery + '&variables=' + formattedLineID}
+            >
               {leg.line.publicCode} {leg.toEstimatedCall?.destinationDisplay?.frontText}
-            </u>
+            </a>
             , {leg.authority?.name}
           </>
         )}{' '}
         {leg.mode !== Mode.Foot && (
           <>
             <br />
-            <u title={leg.fromPlace.quay?.id}>{leg.fromPlace.name}</u> →{' '}
+            <a
+              title={leg.fromPlace.quay?.id}
+              target={'_blank'}
+              href={
+                graphiQLUrl + '&query=' + formattedQuayQuery + '&variables=' + formattedFromPlaceID
+              }
+            >
+              {leg.fromPlace.name}
+            </a>{' '}
+            →{' '}
           </>
         )}{' '}
-        {!isLast && <u title={leg.toPlace.quay?.id}>{leg.toPlace.name}</u>}
+        {!isLast && (
+          <a
+            title={leg.toPlace.quay?.id}
+            target={'_blank'}
+            href={graphiQLUrl + '&query=' + formattedQuayQuery + '&variables=' + formattedToPlaceID}
+          >
+            {leg.toPlace.name}
+          </a>
+        )}
       </div>
     </div>
   );

client/src/components/SearchBar/GraphiQLRouteButton.tsx

@@ -1,6 +1,7 @@
 import { Button } from 'react-bootstrap';
 import { TripQueryVariables } from '../../gql/graphql.ts';
 import { queryAsString } from '../../static/query/tripQuery.tsx';
+const graphiQLUrl = import.meta.env.VITE_GRAPHIQL_URL;
 
 function GraphiQLRouteButton({ tripQueryVariables }: { tripQueryVariables: TripQueryVariables }) {
   const formattedVariables = encodeURIComponent(JSON.stringify(tripQueryVariables));
@@ -9,12 +10,7 @@ function GraphiQLRouteButton({ tripQueryVariables }: { tripQueryVariables: TripQ
   return (
     <div className="search-bar-route-button-wrapper">
       <Button
-        href={
-          'https://otp2debug.dev.entur.org/graphiql?flavor=transmodel&query=' +
-          formattedQuery +
-          '&variables=' +
-          formattedVariables
-        }
+        href={graphiQLUrl + '&query=' + formattedQuery + '&variables=' + formattedVariables}
         target={'_blank'}
       >
         GraphQL

client/src/static/query/lineQuery.tsx

@@ -0,0 +1,13 @@
+import { graphql } from '../../gql';
+import { print } from 'graphql/index';
+
+export const query = graphql(`
+  query line($id: ID!) {
+    line(id: $id) {
+      name
+      publicCode
+    }
+  }
+`);
+
+export const lineQueryAsString = print(query);

client/src/static/query/quayQuery.tsx

@@ -0,0 +1,15 @@
+import { graphql } from '../../gql';
+import { print } from 'graphql/index';
+
+export const query = graphql(`
+  query quay($id: String!) {
+    quay(id: $id) {
+      stopPlace {
+        id
+        name
+      }
+    }
+  }
+`);
+
+export const quayQueryAsString = print(query);

client/src/static/query/tripQuery.tsx

@@ -63,6 +63,7 @@ export const query = graphql(`
           line {
             publicCode
             name
+            id
           }
           authority {
             name