|
1 |
| -# React + TypeScript + Vite |
| 1 | +# EGraph Visualizer |
2 | 2 |
|
3 |
| -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. |
| 3 | +Interactive visualizer for e-graphs in [the serialized JSON format](https://github.com/egraphs-good/egraph-serialize/) |
| 4 | +using Cytoscape JS and Eclipse Layout Kernel. |
4 | 5 |
|
5 |
| -Currently, two official plugins are available: |
| 6 | +## Development |
6 | 7 |
|
7 |
| -- [@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 |
8 |
| -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh |
| 8 | +First install [Yarn](https://yarnpkg.com/getting-started/install), then run: |
9 | 9 |
|
10 |
| -## Expanding the ESLint configuration |
| 10 | +```sh |
| 11 | +yarn install |
| 12 | +yarn run [build|start|lint] |
| 13 | +``` |
11 | 14 |
|
12 |
| -If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: |
| 15 | +## Packaging |
13 | 16 |
|
14 |
| -- Configure the top-level `parserOptions` property like this: |
| 17 | +Currently, this visualizer is packaged as an [AnyWidget JS ESM file](https://anywidget.dev/) with all dependencies included. |
| 18 | +On every Git tag, a new verison is bundled and published as a Github release. |
15 | 19 |
|
16 |
| -```js |
17 |
| -export default tseslint.config({ |
18 |
| - languageOptions: { |
19 |
| - // other options... |
20 |
| - parserOptions: { |
21 |
| - project: ['./tsconfig.node.json', './tsconfig.app.json'], |
22 |
| - tsconfigRootDir: import.meta.dirname, |
23 |
| - }, |
24 |
| - }, |
25 |
| -}) |
26 |
| -``` |
| 20 | +In the future, if others want to use it, it could be published as an NPM package. |
27 | 21 |
|
28 |
| -- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked` |
29 |
| -- Optionally add `...tseslint.configs.stylisticTypeChecked` |
30 |
| -- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config: |
31 |
| - |
32 |
| -```js |
33 |
| -// eslint.config.js |
34 |
| -import react from 'eslint-plugin-react' |
35 |
| - |
36 |
| -export default tseslint.config({ |
37 |
| - // Set the react version |
38 |
| - settings: { react: { version: '18.3' } }, |
39 |
| - plugins: { |
40 |
| - // Add the react plugin |
41 |
| - react, |
42 |
| - }, |
43 |
| - rules: { |
44 |
| - // other rules... |
45 |
| - // Enable its recommended rules |
46 |
| - ...react.configs.recommended.rules, |
47 |
| - ...react.configs['jsx-runtime'].rules, |
48 |
| - }, |
49 |
| -}) |
50 |
| -``` |
| 22 | +There is also a demo site published on Github Pages, which allows you to upload and edit a serialized e-graph and see |
| 23 | +the visualization. |
0 commit comments