eCharts React Graph Demo with FastAPI Backend

This project demonstrates an advanced React application using Apache eCharts to create an interactive force-directed graph, with a FastAPI backend for data persistence.

Project Structure

project-root/
│
├── frontend/
│   ├── src/
│   │   ├── components/
│   │   │   ├── EChartsGraph.js
│   │   │   ├── EditNodeModal.js
│   │   │   └── EditLinkModal.js
│   │   ├── data/
│   │   │   └── graphData.js
│   │   ├── styles/
│   │   │   └── App.css
│   │   └── App.js
│   ├── public/
│   ├── package.json
│   └── package-lock.json
│
├── backend/
│   ├── main.py
│   └── pyproject.toml
│
├── README.md
└── LICENSE

Prerequisites

Before you begin, ensure you have met the following requirements:

Node.js (v12 or higher)
pnpm (v9 or higher)
Python (v3.8 to 3.11) NB Currently 3.12 will break the backend for an incompatibility of the js2py library)
Poetry (for managing Python dependencies)

Installation

Clone the repository:

git clone https://github.com/your-username/echarts-react-graph-demo.git
cd echarts-react-graph-demo

Set up the frontend:
```
cd frontend
pnpm install
```
Set up the backend:
```
cd ../backend
poetry install
```

Usage

Start the backend server:
```
cd backend
poetry run uvicorn main:app --reload --log-level debug
```
This will start the FastAPI server at http://localhost:8000
In a new terminal, start the frontend development server:
```
cd frontend
pnpm start
```
Open your web browser and visit:
```
http://localhost:3000
```

You should now see the interactive graph demo displayed in your browser.

Features

Force-directed graph layout representing an office ecosystem
Dynamic node coloring based on group categories (employee, resource, event)
Interactive draggable nodes
Zoom and pan functionality
Legend for filtering nodes by group, with hover and click functions
Group names are dynamically built when reading the input data
Hover effects to highlight connected nodes and edges
Double-click functionality to edit node and link properties
Modal dialogs for editing node and link details
Automatic color updates when changing a node's group
Smooth animations for graph updates
Responsive design
Data persistence through FastAPI backend

Customization

Modifying Graph Data

Initial graph data is stored in frontend/src/data/graphData.js. For persistent changes, use the edit functionality in the UI, which communicates with the backend.

Changing Node Colors

Node colors are defined in the groupColors object in frontend/src/components/EChartsGraph.js. To change a group's color, modify the corresponding color value.

Component Details

EChartsGraph

The main component that renders the graph and handles most of the interactivity.

EditNodeModal

A modal component for editing node properties (name and group).

EditLinkModal

A modal component for editing link properties (value/label).

Backend Integration

The application communicates with a FastAPI backend for data retrieval and persistence:

GET /api/graph: Fetches the graph data (currently mocked by reading the JS data file)
handleSaveNode: Saves updated node data using POST /api/nodeSave
handleSaveLink: Saves updated link data using POST /api/edgeSave

Ensure your backend provides these API endpoints.

Contributing

Contributions to this project are welcome. Please follow these steps:

Fork the repository
Create a new branch: git checkout -b feature/your-feature-name
Make your changes and commit them: git commit -m 'Add some feature'
Push to the branch: git push origin feature/your-feature-name
Submit a pull request

License

This project is licensed under the MIT License. See the LICENSE file for details.

Acknowledgments

Apache eCharts for providing the powerful charting library
React for the frontend framework
FastAPI for the backend framework
Poetry for Python dependency management

Contact

If you have any questions or feedback, please open an issue in the GitHub repository.

cesarnml/react-echarts-graph