New debug client

.github/workflows/cibuild.yml

@@ -39,6 +39,12 @@ jobs:
           distribution: temurin
           cache: maven
 
+      - name: Build debug client
+        working-directory: ./client-next
+        run: |
+          npm install
+          npm run build
+
       - name: Prepare coverage agent, build and test
         # these are split into two steps because otherwise maven keeps long-running HTTP connections
         # to Maven Central open which then hang during the package phase because the Azure (Github Actions)
@@ -208,6 +214,14 @@ jobs:
           java-version: 17
           distribution: temurin
           cache: maven
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - name: Build debug client
+        working-directory: ./client-next
+        run: |
+          npm install
+          npm run build
       - name: Build container image with Jib, push to Dockerhub
         env:
           CONTAINER_REPO: docker.io/opentripplanner/opentripplanner

.gitignore

@@ -37,6 +37,7 @@ gen-py/
 node_modules/
 target/
 /graphs
+/src/client/debug-client-preview/
 
 # for local dev only
 /src/test/resources/speedtest/travelSearch-results-*.csv

client-next/.env

@@ -0,0 +1 @@
+VITE_API_URL=/otp/routers/default/transmodel/index/graphql

client-next/.env.development

@@ -0,0 +1 @@
+VITE_API_URL=http://localhost:8080/otp/routers/default/transmodel/index/graphql

client-next/.eslintrc.cjs

@@ -0,0 +1,42 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:import/recommended',
+    'plugin:jsx-a11y/recommended',
+    'plugin:@typescript-eslint/recommended',
+    'eslint-config-prettier',
+  ],
+  ignorePatterns: ['node_modules', 'dist', '.prettierrc.js', '.eslintrc.cjs', 'src/gql/**/*'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  settings: {
+    react: {
+      // Tells eslint-plugin-react to automatically detect the version of React to use.
+      version: 'detect',
+    },
+    // Tells eslint how to resolve imports
+    'import/resolver': {
+      node: {
+        paths: ['src'],
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      },
+    },
+  },
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off",
+    '@typescript-eslint/ban-ts-comment': "off",
+
+    // TODO: this is a temporary fix for
+    //  https://github.com/typescript-eslint/typescript-eslint/issues/154
+    "import/named": "off"
+  },
+}

client-next/.gitignore

@@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# generated code
+src/gql/
+
+# Vite cache folder
+.vite/

client-next/.prettierignore

@@ -0,0 +1,3 @@
+node_modules/
+dist/
+src/gql/

client-next/.prettierrc.cjs

@@ -0,0 +1,8 @@
+module.exports = {
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "printWidth": 120,
+  "bracketSpacing": true
+}

client-next/README-vite.md

@@ -0,0 +1,27 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+   parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json', './tsconfig.node.json'],
+    tsconfigRootDir: __dirname,
+   },
+```
+
+- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

client-next/README.md

@@ -0,0 +1,65 @@
+# OTP debug client (next)
+
+This is the next version of the debug client, intended to replace `../src/client`.
+
+It is designed to work with the Transmodel GraphQL API.
+
+## Stack notes
+
+This is a true Single Page Application (SPA) written in TypeScript on the React framework. It uses `vite` to run
+(locally) and for building static assets. It requires no server runtime, and can be served from a CDN and run entirely
+in the browser.
+
+The design framework is Bootstrap with React support from `react-bootstrap`.
+
+The map framework is MapLibre, using `MapLibre GL JS` with React support from `react-map-gl`.
+
+GraphQL integration is provided by `graphql-request`, with type support added with `@graphql-codegen`. Types are
+generated during build and are not checked into the repository.
+
+## Prerequisites
+
+Use latest LTS version of Node/npm (currently v18). Recommend using av version manager such as `nvm`.
+
+The dev and production builds require graphql schema to be present at
+`../src/ext/graphql/transmodelapi/schema.graphql`.
+
+## Getting started (development)
+
+Change directory to `client-next` (current) if you haven't already.
+
+    npm install
+
+Then
+
+    npm run dev
+
+The debug client will now be available at `http://localhost:5173/debug-client-preview`. It has
+hot reloading enabled, so you don't have to restart it when you save files.
+
+If you change graphql code during development you can issue the following command:
+
+    npm run codegen
+
+You don't have to restart the development server for the changes to take effect.
+
+## Build for production
+
+Change directory to `client-next` (current) if you haven't already.
+
+    npm install
+
+Then
+
+    npm run build
+
+## Which OTP instance do I use?
+
+In development mode, the debug client by default assumes you are running an OTP instance locally at
+port 8080 (see `.env.development`). If you wish to point to a different OTP instance
+(like a remote server), use the environment variable`VITE_API_URL`, either at the command line,
+or add it to a new `.env.development.local` file (this file will be ignored by git).
+
+In production mode, the default is to access OTP via the same origin as the client (see `.env`).
+This behavior can also be modified by changing the previously mentioned environment variable at
+build-time.

client-next/codegen.ts

@@ -0,0 +1,15 @@
+import type { CodegenConfig } from '@graphql-codegen/cli';
+
+const config: CodegenConfig = {
+  overwrite: true,
+  schema: '../src/ext/graphql/transmodelapi/schema.graphql',
+  documents: 'src/**/*.{ts,tsx}',
+  generates: {
+    'src/gql/': {
+      preset: 'client',
+      plugins: [],
+    },
+  },
+};
+
+export default config;

client-next/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/img/otp-logo.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>OTP Debug Client</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>