Debug client dynamic arguments

client/.prettierignore

@@ -1,3 +1,4 @@
 node_modules/
 output/
 src/gql/
+src/static/query/tripQuery.tsx

client/codegen-preprocess.ts

@@ -0,0 +1,16 @@
+import type { CodegenConfig } from '@graphql-codegen/cli';
+
+import * as path from 'node:path';
+
+const config: CodegenConfig = {
+  overwrite: true,
+  schema: 'https://otp2debug.dev.entur.org/otp/transmodel/v3/schema.graphql',
+  documents: 'src/**/*.{ts,tsx}',
+  generates: {
+    'src/static/query/tripQuery.tsx': {
+      plugins: [path.resolve(__dirname, './src/util/generate-queries.cjs')],
+    },
+  },
+};
+
+export default config;

client/package.json

@@ -14,6 +14,8 @@
     "preview": "vite preview",
     "prebuild": "npm run codegen && npm run lint && npm run check-format",
     "predev": "npm run codegen",
+    "codegen-preprocess": "graphql-codegen --config codegen-preprocess.ts",
+    "precodegen": "npm run codegen-preprocess",
     "codegen": "graphql-codegen --config codegen.ts"
   },
   "dependencies": {
@@ -26,7 +28,8 @@
     "react": "19.0.0",
     "react-bootstrap": "2.10.7",
     "react-dom": "19.0.0",
-    "react-map-gl": "7.1.8"
+    "react-map-gl": "7.1.8",
+    "react-select": "5.9.0"
   },
   "devDependencies": {
     "@eslint/compat": "1.2.5",

client/src/components/ItineraryList/ItineraryListContainer.tsx

@@ -26,39 +26,46 @@ export function ItineraryListContainer({
   const timeZone = useContext(TimeZoneContext);
 
   return (
-    <section className="itinerary-list-container below-content" ref={containerRef}>
-      <ItineraryPaginationControl
-        onPagination={pageResults}
-        previousPageCursor={tripQueryResult?.trip.previousPageCursor}
-        nextPageCursor={tripQueryResult?.trip.nextPageCursor}
-        loading={loading}
-      />
-      <Accordion
-        activeKey={`${selectedTripPatternIndex}`}
-        onSelect={(eventKey) => setSelectedTripPatternIndex(parseInt(eventKey as string))}
-      >
-        {tripQueryResult &&
-          tripQueryResult.trip.tripPatterns.map((tripPattern, itineraryIndex) => (
-            <Accordion.Item
-              eventKey={`${itineraryIndex}`}
-              key={`${itineraryIndex}`}
-              bsPrefix={tripPattern.systemNotices.length === 0 ? '' : 'accordion-item-filtered'}
-            >
-              <Accordion.Header>
-                <ItineraryHeaderContent
-                  containerWidth={containerWidth}
-                  tripPattern={tripPattern}
-                  itineraryIndex={itineraryIndex}
-                  earliestStartTime={earliestStartTime}
-                  latestEndTime={latestEndTime}
-                />
-              </Accordion.Header>
-              <Accordion.Body>
-                <ItineraryDetails tripPattern={tripPattern} />
-              </Accordion.Body>
-            </Accordion.Item>
-          ))}
-      </Accordion>
+    <section className="left-pane-container below-content" ref={containerRef}>
+      <>
+        <div className="panel-header">Itinerary results</div>
+        <div className="pagination-controls">
+          <ItineraryPaginationControl
+            onPagination={pageResults}
+            previousPageCursor={tripQueryResult?.trip.previousPageCursor}
+            nextPageCursor={tripQueryResult?.trip.nextPageCursor}
+            loading={loading}
+          />
+        </div>
+        <Accordion
+          activeKey={`${selectedTripPatternIndex}`}
+          onSelect={(eventKey) => setSelectedTripPatternIndex(parseInt(eventKey as string))}
+        >
+          {tripQueryResult &&
+            tripQueryResult.trip.tripPatterns.map((tripPattern, itineraryIndex) => (
+              <Accordion.Item
+                eventKey={`${itineraryIndex}`}
+                key={`${itineraryIndex}`}
+                bsPrefix={tripPattern.systemNotices.length === 0 ? '' : 'accordion-item-filtered'}
+              >
+                <Accordion.Header>
+                  <ItineraryHeaderContent
+                    containerWidth={containerWidth}
+                    tripPattern={tripPattern}
+                    itineraryIndex={itineraryIndex}
+                    earliestStartTime={earliestStartTime}
+                    latestEndTime={latestEndTime}
+                  />
+                </Accordion.Header>
+                <Accordion.Body>
+                  <ItineraryDetails tripPattern={tripPattern} />
+                </Accordion.Body>
+              </Accordion.Item>
+            ))}
+        </Accordion>
+      </>
+
+      {/* Time Zone Info */}
       <div className="time-zone-info">
         All times in <code>{timeZone}</code>
       </div>

client/src/components/ItineraryList/ItineraryPaginationControl.tsx

@@ -12,7 +12,7 @@ export function ItineraryPaginationControl({
   loading: boolean;
 }) {
   return (
-    <div style={{ display: 'flex', justifyContent: 'space-evenly', margin: '1rem 0 ' }}>
+    <div style={{ display: 'flex', justifyContent: 'space-evenly' }}>
       <Button
         variant="outline-primary"
         size="sm"

client/src/components/MapView/DebugLayerButton.tsx

@@ -0,0 +1,38 @@
+import debugLayerIcon from '../../static/img/debug-layer.svg';
+
+import { useState } from 'react';
+
+type DebugLayerButtonProps = {
+  onToggle: (isExpanded: boolean) => void;
+};
+
+export default function DebugLayerButton({ onToggle }: DebugLayerButtonProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const handleClick = () => {
+    const nextState = !isExpanded;
+    setIsExpanded(nextState);
+    onToggle(nextState); // Notify parent of the state change
+  };
+
+  return (
+    <button
+      style={{
+        cursor: 'pointer',
+        border: 'none',
+        background: 'none',
+        textAlign: 'left',
+        width: '100%',
+        padding: '0',
+        margin: '0',
+      }}
+      onClick={handleClick}
+    >
+      {isExpanded ? (
+        <span style={{ fontWeight: 'bold' }}>Debug Layers</span>
+      ) : (
+        <img src={debugLayerIcon} alt="Debug layer" title="Debug layer" style={{ width: '25px', height: '25px' }} />
+      )}
+    </button>
+  );
+}