Graph Visualization with Clojure + Svelte + cytoscape.js

A full-stack graph visualization application with persistent storage.

Features

• Create Nodes: Add nodes with custom names
• Create Links: Connect nodes by clicking on source and target nodes
• Zoom Controls: Zoom in, zoom out, and fit to view
• Styling: Change colors and sizes of nodes and links
• Force Layout: Intelligent force-directed layout that considers node size and link strength
  • Bigger nodes attract more and cluster toward the center
  • Stronger (wider) links pull connected nodes closer together
  • Smaller nodes and weaker links maintain more distance
• Graph Editor Sidebar:
  • View graph as editable JSON text representation
  • Edit graph structure directly in JSON format
  • Apply changes to update the graph
  • Reset to restore current graph state
• Status Bar: Shows node count, link count, and selected element information
• Persistence: All nodes and links are stored in SQLite database
• Auto-scaling Text: Node labels automatically scale with node size for better readability

Project Structure

clojure-graph/
├── src/
│   └── graph/
│       ├── core.clj      # Main entry point
│       ├── handler.clj   # HTTP handlers and routes
│       └── db.clj        # Database operations
├── frontend/
│   ├── src/
│   │   ├── components/
│   │   │   ├── GraphCanvas.svelte
│   │   │   ├── GraphSidebar.svelte
│   │   │   ├── TopBar.svelte
│   │   │   └── StatusBar.svelte
│   │   ├── App.svelte
│   │   └── main.js
│   ├── index.html
│   ├── package.json
│   └── vite.config.js
├── deps.edn
├── package.json          # Root package.json with dev scripts
└── dev.sh                # Bash script to run both servers

Setup

Quick Start (Recommended)

Run both backend and frontend simultaneously:

Option 1: Using npm (cross-platform)

# Install root dependencies (concurrently)
npm install

# Install frontend dependencies
npm run install:frontend

# Start both servers
npm run dev

Option 2: Using bash script (Linux/Mac)

# Make script executable (first time only)
chmod +x dev.sh

# Run both servers
./dev.sh

Both servers will start:

• Backend: http://localhost:3000
• Frontend: http://localhost:5173

Manual Setup

Backend (Clojure)

1. Install Clojure CLI tools if not already installed
2. Run the server:

   clj -M -m graph.core
   

   The server will start on http://localhost:3000

Frontend (Svelte)

1. Navigate to the frontend directory:

   cd frontend
   

2. Install dependencies:

   npm install
   

3. Start the development server:

   npm run dev
   

   The frontend will be available at http://localhost:5173

Usage

Basic Operations

1. Create Node: Click "Create Node" button and enter a name
2. Create Link: Click "Create Link" button, then click on source node and target node
3. Zoom: Use Zoom In, Zoom Out, or Fit buttons
4. Force Layout: Click "Force Layout" to automatically arrange nodes using a force-directed algorithm
   • Bigger nodes will cluster more centrally
   • Stronger links will pull their connected nodes closer
   • Layout animates and saves positions automatically

Styling

5. Style Nodes:
   • Click on a node to select it
   • Adjust node color and size using the controls in the topbar
   • Changes are saved automatically
6. Style Links:
   • Click on a link to select it
   • Adjust link color and width using the controls in the topbar
   • Changes are saved automatically
7. Drag Nodes: Click and drag nodes to reposition them (positions are saved automatically)

Graph Editor Sidebar

8. View Graph as JSON: The right sidebar displays the current graph as formatted JSON
9. Edit Graph:
   • Modify the JSON text directly in the sidebar
   • Click "Apply" to update the graph with your changes
   • Click "Reset" to restore the current graph state
   • Invalid JSON will show an error message
10. Graph Structure: The JSON format includes:
    • nodes: Array of node objects with id, name, x, y, color, size
    • links: Array of link objects with id, source, target, color, width

Database

The SQLite database (graph.db) is automatically created when the server starts. It contains two tables:

• nodes: Stores node data (id, name, x, y, color, size)
• links: Stores link data (id, source, target, color, width)