Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
b7be629
1 Initialize vite-react typescript project
austindang67 Sep 10, 2025
cd770f8
Merge branch 'main' into 1-create-vite-react-project
austindang67 Sep 24, 2025
a58016f
Installed d3.js
austindang67 Sep 25, 2025
59b3b8a
Established page with working network graph.
austindang67 Sep 26, 2025
cb04560
Slight tweaks for presentation purposes
austindang67 Sep 26, 2025
74aa340
Added more networks. Improved project structure. Created app router.
austindang67 Oct 3, 2025
5e7bb9d
Implemented drag functionality for nodes
austindang67 Oct 3, 2025
a5b8436
Added more data. Groups now spawn in pre-defined quadrants. Physics s…
austindang67 Oct 13, 2025
8ee9935
Black nodes now have white text, while other nodes have black text.
austindang67 Oct 13, 2025
1364eb4
Added IDE files to .gitignore
austindang67 Oct 16, 2025
6a602df
Refactored project structure to better follow the guidelines of Bulle…
austindang67 Oct 16, 2025
90bf5d3
Moved .gitignore into root, deleted .idea folder
austindang67 Oct 16, 2025
8b33f97
Moved .gitignore into root, deleted .idea folder
austindang67 Oct 16, 2025
b4d776f
Massive refactor of Network Graph feature
austindang67 Oct 22, 2025
efe50d1
Matched node colors to kaiaulu API examples
austindang67 Oct 22, 2025
7f7a2b5
Added double-click interaction for nodes
austindang67 Oct 23, 2025
7194e53
Updated README.md
austindang67 Oct 23, 2025
3288b7c
Added a simple highlight functionality
austindang67 Oct 23, 2025
03e0324
Split data into separate jsons by group, implemented related highligh…
austindang67 Nov 5, 2025
52f7c5d
Added file picker and loading json from local
austindang67 Nov 14, 2025
27bbf7e
Added json files to data
austindang67 Nov 14, 2025
1ab6932
Ungodded the NetworkGraph component!
austindang67 Nov 19, 2025
f2d08f2
JSON loading hook added to NetworkGraphContext
austindang67 Nov 21, 2025
d2be717
Added unhighlight feature for all subgraph nodes
austindang67 Nov 27, 2025
66b0418
Implemented moveable Subgraph Overlay
austindang67 Nov 27, 2025
8687bc6
Updated readme and made some structure changes
austindang67 Dec 3, 2025
1955d6c
Documentation, separation of concerns, and more
austindang67 Dec 3, 2025
2efff64
Implemented search highlight capability.
austindang67 Dec 13, 2025
1d6f840
Changes to highlight, structure, style, and more.
austindang67 Dec 15, 2025
e304fe9
Documented everything, changed navbar.
austindang67 Dec 15, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
# --- JetBrains / IntelliJ ---
.idea/
.idea/*

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

client/node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
/kaiaulu_react.iml
14 changes: 14 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
## Requires Node.js and NPM
https://docs.npmjs.com/downloading-and-installing-node-js-and-npm

## Requires PNPM
https://pnpm.io/installation


## Starting the Application:

1. Navigate into 'client' directory via terminal.

2. Once inside, run the following command: pnpm install

3. After installation has completed run the following command: pnpm run dev
69 changes: 69 additions & 0 deletions client/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
# 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) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@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

## Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

```js
export default tseslint.config([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...

// Remove tseslint.configs.recommended and replace with this
...tseslint.configs.recommendedTypeChecked,
// Alternatively, use this for stricter rules
...tseslint.configs.strictTypeChecked,
// Optionally, add this for stylistic rules
...tseslint.configs.stylisticTypeChecked,

// Other configs...
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])
```

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:

```js
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default tseslint.config([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Enable lint rules for React
reactX.configs['recommended-typescript'],
// Enable lint rules for React DOM
reactDom.configs.recommended,
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])
```
30 changes: 30 additions & 0 deletions client/eslint.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'
import { globalIgnores } from 'eslint/config'

export default tseslint.config([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
js.configs.recommended,
tseslint.configs.recommended,
reactHooks.configs['recommended-latest'],
reactRefresh.configs.vite,
],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
},
rules: {
'react-refresh/only-export-components': [
'warn',
{ allowExportNames: ['useNetworkGraph'] },
],
},
},

])
14 changes: 14 additions & 0 deletions client/index.html
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm.. I am not familiar with a client folder. Does this follow bullet proof react?

Copy link
Collaborator Author

@austindang67 austindang67 Oct 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi Carlos. The client folder is not a guideline of bulletproof react specifically.

I figured if a back-end were to be developed in the future, it would be developed within the same repository in a server folder. Doing so would make it easier for developers to see how their changes impact the front-end and change front-end code as needed without having to keep track of two repositories.

Let me know if this is something you would like to continue with or not.

Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Kaiaulu React</title>
</head>
<body>
<div id="root"></div>

<!--suppress HtmlUnknownTarget -->
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
43 changes: 43 additions & 0 deletions client/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
{
"name": "client",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"@dnd-kit/core": "^6.3.1",
"@dnd-kit/utilities": "^3.2.2",
"@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.1",
"@fontsource/roboto": "^5.2.9",
"@mui/material": "^7.3.5",
"@tailwindcss/vite": "^4.1.17",
"@tanstack/react-query": "^5.90.3",
"d3": "^7.9.0",
"react": "^19.1.1",
"react-dom": "^19.1.1",
"react-router-dom": "^7.9.3",
"tailwindcss": "^4.1.17",
"yaml": "^2.8.1"
},
"devDependencies": {
"@eslint/js": "^9.33.0",
"@types/d3": "^7.4.3",
"@types/node": "^24.10.1",
"@types/react": "^19.1.10",
"@types/react-dom": "^19.1.7",
"@vitejs/plugin-react": "^5.0.0",
"eslint": "^9.33.0",
"eslint-plugin-react-hooks": "^5.2.0",
"eslint-plugin-react-refresh": "^0.4.20",
"globals": "^16.3.0",
"typescript": "~5.8.3",
"typescript-eslint": "^8.39.1",
"vite": "7.1.11"
}
}
Loading