Restructuring of the layout of the UI. Moved generated arguments to l…

…eft side of screen and a lot of other minor changes.
entur · Dec 16, 2024 · 0440bac · 0440bac
1 parent 62c3d7b
commit 0440bac
Show file tree

Hide file tree

Showing 32 changed files with 1,344 additions and 369 deletions.
diff --git a/client/codegen-preprocess.ts b/client/codegen-preprocess.ts
@@ -0,0 +1,21 @@
+import type { CodegenConfig } from '@graphql-codegen/cli';
+import * as path from 'node:path';
+
+const config: CodegenConfig = {
+  overwrite: true,
+  schema: '../application/src/main/resources/org/opentripplanner/apis/transmodel/schema.graphql',
+  documents: 'src/**/*.{ts,tsx}',
+  generates: {
+    'src/static/query/tripQuery.tsx': {
+      plugins: [path.resolve(__dirname, './src/util/generate-queries.cjs')],
+    },
+    'src/gql/query-arguments.json': {
+      plugins: [path.resolve(__dirname, './src/util/generate-arguments.cjs')],
+      config: {
+        excludeDeprecated: true, // Ensure this is set to true
+      },
+    },
+  },
+};
+
+export default config;
diff --git a/client/codegen.ts b/client/codegen.ts
@@ -1,4 +1,5 @@
 import type { CodegenConfig } from '@graphql-codegen/cli';
+import * as path from 'node:path';
 
 const config: CodegenConfig = {
   overwrite: true,

diff --git a/client/package.json b/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": {

diff --git a/client/src/components/ItineraryList/ItineraryListContainer.tsx b/client/src/components/ItineraryList/ItineraryListContainer.tsx
@@ -1,4 +1,4 @@
-import { QueryType } from '../../gql/graphql.ts';
+import { QueryType, TripQueryVariables } from '../../gql/graphql.ts';
 import { Accordion } from 'react-bootstrap';
 import { useContainerWidth } from './useContainerWidth.ts';
 import { ItineraryHeaderContent } from './ItineraryHeaderContent.tsx';
@@ -7,61 +7,99 @@ import { ItineraryDetails } from './ItineraryDetails.tsx';
 import { ItineraryPaginationControl } from './ItineraryPaginationControl.tsx';
 import { useContext } from 'react';
 import { TimeZoneContext } from '../../hooks/TimeZoneContext.ts';
+import { useState } from 'react';
+import ViewArgumentsRaw from '../SearchInput/ViewArgumentsRaw.tsx';
+import TripQueryArguments from '../SearchInput/TripQueryArguments.tsx';
 
 export function ItineraryListContainer({
   tripQueryResult,
   selectedTripPatternIndex,
   setSelectedTripPatternIndex,
   pageResults,
   loading,
+  tripQueryVariables,
+  setTripQueryVariables,
 }: {
   tripQueryResult: QueryType | null;
   selectedTripPatternIndex: number;
   setSelectedTripPatternIndex: (selectedTripPatterIndex: number) => void;
   pageResults: (cursor: string) => void;
   loading: boolean;
+  tripQueryVariables: TripQueryVariables;
+  setTripQueryVariables: (variables: TripQueryVariables) => void;
 }) {
   const [earliestStartTime, latestEndTime] = useEarliestAndLatestTimes(tripQueryResult);
   const { containerRef, containerWidth } = useContainerWidth();
   const timeZone = useContext(TimeZoneContext);
 
+  // State for toggling between Accordion and new element
+  const [showArguments, setShowArguments] = useState(false);
+
   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>
-      <div className="time-zone-info">
-        All times in <code>{timeZone}</code>
-      </div>
-    </section>
+      <section className="itinerary-list-container below-content" ref={containerRef}>
+          <div className="pagination-controls">
+              <ItineraryPaginationControl
+                  onPagination={pageResults}
+                  previousPageCursor={tripQueryResult?.trip.previousPageCursor}
+                  nextPageCursor={tripQueryResult?.trip.nextPageCursor}
+                  loading={loading}
+              />
+
+          </div>
+          <button className="toggle-view-button" onClick={() => setShowArguments((prev) => !prev)}>
+              {showArguments ? 'Show Accordion' : 'Show Arguments'}
+          </button>
+          {showArguments ? (
+              <div
+                  style={{
+                      display: 'flex',
+                      flexDirection: 'column',
+                      padding: '10px',
+                      fontSize: '12px',
+                      borderRadius: '4px',
+                      overflowY: 'auto',
+                  }}
+              >
+                  <h4>
+                      Trip arguments <ViewArgumentsRaw
+                      tripQueryVariables={tripQueryVariables}></ViewArgumentsRaw>
+                  </h4>
+
+                  <TripQueryArguments tripQueryVariables={tripQueryVariables}
+                                      setTripQueryVariables={setTripQueryVariables}/>
+              </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>
+          )}
+
+          <div className="time-zone-info">
+              All times in <code>{timeZone}</code>
+          </div>
+      </section>
   );
 }
diff --git a/client/src/components/ItineraryList/ItineraryPaginationControl.tsx b/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"

diff --git a/client/src/components/MapView/DebugLayerButton.tsx b/client/src/components/MapView/DebugLayerButton.tsx
@@ -0,0 +1,43 @@
+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>
+    );
+}