---

Network Graph Visualizer

A React 19 single-page application built with Vite to visualize network node relationships using Cytoscape.js. The interface uses Tailwind CSS and ShadCN UI for clean, modern styling.

---

🚀 Features

• Dynamic and interactive network graph
• Fullscreen dialog for immersive viewing
• JSON-based input for nodes and edges
• Light and dark theme switching
• Fully reusable NetworkGraph component

---

🧰 Tech Stack

• React 19
• Vite
• TypeScript
• Tailwind CSS
• ShadCN UI
• Cytoscape.js

---

📸 Screenshots

🔷 Landing Page – Graph View

✍️ Edit JSON Data

🔍 Node Details Section

🌑 Dark Theme – Graph View

🌘 Midnight Theme – Graph View

🌊 Ocean Theme – Graph View

📦 Installation

git clone https://github.com/pushpak-angularminds/network-graph-visualization.git
cd network-graph-visualization
npm install
npm run dev

For production:

npm run build
npm run preview

🗂️ Project Structure

src/
├── config/
│   └── themes.ts  
├── components/
│   └── custom/
│       └── tooltip.tsx                 
├── data/
│   └── demo-data.json         
├── features/
│   └── network-graph/
│       ├── components/                        
│       │   ├── child-edge-details.tsx
│       │   ├── child-node-details.tsx
│       │   ├── detail-items.tsx
│       │   └── ... (other small subcomponents specific to network-graph feature)
│       ├── network-graph-dialog.tsx
│       ├── network-graph-theme-tabs.tsx
│       ├── network-graph-instructions.tsx
│       ├── network-graph-json-example.tsx
│       ├── network-graph-element-details.tsx
├── lib/
│   └── cytoscape/
│       └── react-cytoscapejs.d.ts
├── pages/
│   └── network-graph-page.tsx        
├── services/
│   └── graph.service.ts                 
├── shared/
│   └── network-graph.tsx         # ✅Main reusable network-graph component
├── types/
│   └── network-graph.types.ts
├── App.tsx
├── App.css
├── main.tsx
├── index.css
└── vite-env.d.ts

📖 Usage

You can update the graph in two ways:

• Edit the demo-data.json file inside the data/ folder
• Or In UI in edit data tab you can import your own JSON file or modify the input using the editor and click "Save and Visualize"

The JSON must include an array of nodes and edges in the following format:

{
  "nodes": [
    {
      "id": "circuit-1",
      "label": "Circuit 1"
    },
    {
      "id": "server-1",
      "label": "Server 1",
      "children": [
        {
          "id": "eth0-1",
          "label": "eth0",
          "parent": "server-1"
        }
      ]
    },
    {
      "id": "router-1",
      "label": "Router 1"
    }
  ],
  "edges": [
    {
      "source": "circuit-1",
      "target": "server-1",
      "label": "Link A"
    },
    {
      "source": "circuit-1",
      "target": "router-1",
      "label": "Link B"
    }
  ]
}