|
1 | | -# React + TypeScript + Vite |
2 | | - |
3 | | -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. |
4 | | - |
5 | | -Currently, two official plugins are available: |
6 | | - |
7 | | -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh |
8 | | -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh |
9 | | - |
10 | | -## React Compiler |
11 | | - |
12 | | -The React Compiler is currently not compatible with SWC. See [this issue](https://github.com/vitejs/vite-plugin-react/issues/428) for tracking the progress. |
13 | | - |
14 | | -## Expanding the ESLint configuration |
15 | | - |
16 | | -If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules: |
17 | | - |
18 | | -```js |
19 | | -export default defineConfig([ |
20 | | - globalIgnores(["dist"]), |
21 | | - { |
22 | | - files: ["**/*.{ts,tsx}"], |
23 | | - extends: [ |
24 | | - // Other configs... |
25 | | - |
26 | | - // Remove tseslint.configs.recommended and replace with this |
27 | | - tseslint.configs.recommendedTypeChecked, |
28 | | - // Alternatively, use this for stricter rules |
29 | | - tseslint.configs.strictTypeChecked, |
30 | | - // Optionally, add this for stylistic rules |
31 | | - tseslint.configs.stylisticTypeChecked, |
32 | | - |
33 | | - // Other configs... |
34 | | - ], |
35 | | - languageOptions: { |
36 | | - parserOptions: { |
37 | | - project: ["./tsconfig.node.json", "./tsconfig.app.json"], |
38 | | - tsconfigRootDir: import.meta.dirname, |
39 | | - }, |
40 | | - // other options... |
41 | | - }, |
42 | | - }, |
43 | | -]); |
44 | | -``` |
45 | | - |
46 | | -You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules: |
47 | | - |
48 | | -```js |
49 | | -// eslint.config.js |
50 | | -import reactX from "eslint-plugin-react-x"; |
51 | | -import reactDom from "eslint-plugin-react-dom"; |
52 | | - |
53 | | -export default defineConfig([ |
54 | | - globalIgnores(["dist"]), |
55 | | - { |
56 | | - files: ["**/*.{ts,tsx}"], |
57 | | - extends: [ |
58 | | - // Other configs... |
59 | | - // Enable lint rules for React |
60 | | - reactX.configs["recommended-typescript"], |
61 | | - // Enable lint rules for React DOM |
62 | | - reactDom.configs.recommended, |
63 | | - ], |
64 | | - languageOptions: { |
65 | | - parserOptions: { |
66 | | - project: ["./tsconfig.node.json", "./tsconfig.app.json"], |
67 | | - tsconfigRootDir: import.meta.dirname, |
68 | | - }, |
69 | | - // other options... |
70 | | - }, |
71 | | - }, |
72 | | -]); |
73 | | -``` |
| 1 | +# Testing View |
| 2 | + |
| 3 | +The Testing View is the web interface used during vehicle testing sessions. It provides real-time telemetry charts and a filtering system for monitoring packet data from the pod. |
| 4 | + |
| 5 | +It is built with **React**, **TypeScript**, and **Vite**, and runs embedded inside the Hyperloop Control Station Electron app. |
| 6 | + |
| 7 | +--- |
| 8 | + |
| 9 | +## Features |
| 10 | + |
| 11 | +### Workspaces |
| 12 | + |
| 13 | +Workspaces are named tabs that each hold their own independent set of charts. You can create, rename, and delete workspaces, and switch between them at any time. The active workspace and its charts are persisted across sessions. |
| 14 | + |
| 15 | +### Charts |
| 16 | + |
| 17 | +The charts panel displays live telemetry data as line charts within the active workspace. You can add, remove, and reorder charts via drag and drop. Each chart supports multiple data series and a configurable history limit that controls how many data points are kept in memory. |
| 18 | + |
| 19 | +### Filtering |
| 20 | + |
| 21 | +The filtering system lets you select which telemetry packets and commands are visible. Filters are organized in a tree matching the packet catalog structure, with search, select all, and clear all controls. |
| 22 | + |
| 23 | +### Settings |
| 24 | + |
| 25 | +A settings dialog exposes runtime configuration for the vehicle connection, including vehicle board selection, ADJ branch, TCP/TFTP connection parameters, BLCU addresses, and logging options (time unit and output path). |
| 26 | + |
| 27 | +### Key Bindings |
| 28 | + |
| 29 | +The key bindings system lets you assign keyboard shortcuts to commands sent to the vehicle, as well as special built-in actions like starting, stopping, or toggling the logger. |
| 30 | + |
| 31 | +--- |
| 32 | + |
| 33 | +## Scripts |
| 34 | + |
| 35 | +| Script | Description | |
| 36 | +| :---------------- | :---------------------------------------------- | |
| 37 | +| `pnpm dev` | Start the Vite dev server | |
| 38 | +| `pnpm build` | Type-check and build for production | |
| 39 | +| `pnpm build:e2e` | Build in e2e mode (used by the `e2e` workspace) | |
| 40 | +| `pnpm preview` | Preview the production build | |
| 41 | +| `pnpm lint` | Run ESLint | |
| 42 | +| `pnpm test` | Run unit tests once (Vitest) | |
| 43 | +| `pnpm test:watch` | Run unit tests in watch mode | |
| 44 | + |
| 45 | +--- |
| 46 | + |
| 47 | +## Tests |
| 48 | + |
| 49 | +Unit tests are written with **Vitest**. The charts store, filtering store, and utility functions are covered. |
0 commit comments