Merge pull request #196 from ibi-group/upstream-merge-2023-12-13

Upstream merge 2023-12-13

.github/workflows/cibuild.yml

@@ -33,6 +33,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)
@@ -250,6 +256,14 @@ jobs:
           java-version: 21
           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

.github/workflows/prune-container-images.yml

@@ -0,0 +1,22 @@
+name: 'Prune container images'
+
+on:
+  schedule:
+    - cron: '0 12 * * 1'
+  workflow_dispatch:
+
+jobs:
+  container-image:
+    if: github.repository_owner == 'opentripplanner'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Delete unused container images
+        env:
+          CONTAINER_REPO: opentripplanner/opentripplanner
+          CONTAINER_REGISTRY_USER: otpbot
+          CONTAINER_REGISTRY_PASSWORD: ${{ secrets.DOCKERHUB_PASSWORD }}
+        run: |
+          # remove all snapshot container images that have not been pulled for over a year
+          # --keep-semver makes sure that any image with a x.y.z version scheme is unaffected by this
+          pip install prune-container-repo==0.0.4
+          prune-container-repo -u ${CONTAINER_REGISTRY_USER} -r ${CONTAINER_REPO} --days=365 --keep-semver --activate

.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

ARCHITECTURE.md

@@ -24,7 +24,7 @@ examples. The Transit model is more complex than the VehiclePosition model.
    a use-case or set of features. It may have an api with request/response classes. These are 
    usually stateless; Hence the `Use Case Service` does normally not have a model. The implementing
    class has the same name as the interface with prefix `Default`.
- - `Domain Model` A model witch encapsulate a business area. In the drawing two examples are shown,
+ - `Domain Model` A model which encapsulate a business area. In the drawing two examples are shown,
    the `transit` and `vhicleposition` domain model. The transit model is more complex so the 
    implementation have a separate `Service` and `Repository`. Almost all http endpoints are , 
    read-only so the `Service` can focus on serving the http API endpoints, while the repository

CODE_CONVENTIONS.md

@@ -30,6 +30,12 @@ Builder initStop(Stop stop) {
 
 ## Naming Conventions
 
+In general, we use American English. We use the GTFS terminology inside OTP as the transit domain
+specific language. In cases where GTFS does not provide an alternative we use NeTEx. The naming
+should follow the Java standard naming conventions. For example a "real-time updater" class
+is named `RealTimeUpdater`. If in doubt check the Oxford Dictionary(American).
+
+
 ### Packages
 
 Try to arrange code by domain functionality, not technology. The main structure of a package should
@@ -38,7 +44,7 @@ be `org.opentripplanner.<domain>.<component>.<sub-component>`.
 | Package                         | Description                                                                                                                                                                                              |
 | ------------------------------- |----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
 | `o.o.<domain>`                  | At the top level we should divide OTP into "domain"s like `apis`, `framework`, `transit`, `street`, `astar`, `raptor`, `feeds`, `updaters`, and `application`.                                           |
-| `component` and `sub-component` | A group of packages/classes witch naturally belong together, think aggregate as in Domain Driven Design.                                                                                                 |
+| `component` and `sub-component` | A group of packages/classes which naturally belong together, think aggregate as in Domain Driven Design.                                                                                                 |
 | `component.api`                 | Used for components to define the programing interface for the component. If present, (see Raptor) all outside dependencies to the component should be through the `api`.                                |
 | `component.model`               | Used to create a model of a Entites, ValueObjects, ++. If exposed outside the component you should include an entry point like `xyz.model.XyzModel` and/or a Service (in api or component root package). |
 | `component.service`             | Implementation of the service like `DefaultTransitService`, may also contain use-case specific code. Note, the Service interface goes into the component root or `api`, not in the service package.      |

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 a version manager such as `nvm`.
+
+The dev and production builds require graphql schema to be present at
+`../src/main/resources/org/opentripplanner/apis/transmodel/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/main/resources/org/opentripplanner/apis/transmodel/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>