package main

import (
	"os"

	github.com/go-echarts/go-echarts/v2/charts"
	github.com/go-echarts/go-echarts/v2/event"
	github.com/go-echarts/go-echarts/v2/opts"
)

func main() {
	// Initialize a new graph chart
	g := charts.NewGraph()

	// Define JavaScript handler for click events
	clickHandler := opts.FuncOpts(`(params) => {
		if (params && params.name) {
			navigator.clipboard.writeText(params.name).catch(err => 
				console.warn('Copy failed:', err)
			);
		}
	}`)

	// Configure global options
	g.SetGlobalOptions(
		charts.WithTitleOpts(opts.Title{
			Title:    "Interactive Network Graph",
			Subtitle: "Click any node to copy its name to clipboard",
		}),
		charts.WithEventListeners(event.Listener{
			EventName: "click",
			Handler:   clickHandler,
		}),
	)

	// Define nodes and edges
	nodes := []opts.GraphNode{
		{Name: "Service A", SymbolSize: 25},
		{Name: "Database", SymbolSize: 35},
		{Name: "Cache Layer", SymbolSize: 28},
	}

	links := []opts.GraphLink{
		{Source: "Service A", Target: "Database"},
		{Source: "Service A", Target: "Cache Layer"},
		{Source: "Database", Target: "Cache Layer"},
	}

	// Add data series with styling options
	g.AddSeries("Infrastructure",
		nodes,
		links,
		charts.WithGraphChartOpts(opts.GraphChart{
			EdgeSymbol:         []string{"none", "arrow"},
			Force:              &opts.GraphForce{Repulsion: 12000, Gravity: 0.05},
			Layout:             "force",
			Roam:               true,
			FocusNodeAdjacency: true,
		}),
		charts.WithLabelOpts(opts.Label{
			Show:     true,
			Position: "top",
			Color:    "#333",
		}),
		charts.WithLineStyleOpts(opts.LineStyle{
			Curveness: 0.25,
			Width:     2,
			Color:     "#5470C6",
		}),
		charts.WithEmphasisOpts(opts.Emphasis{
			Label: &opts.Label{
				Show:     true,
				Color:    "#fff",
				FontSize: 14,
			},
		}),
	)

	// Render to HTML file
	file, err := os.Create("network-graph.html")
	if err != nil {
		panic(err)
	}
	defer file.Close()

	g.Render(file)
}

This example demonstrates how too render an interactive force-directed graph using go-echarts. The chart visualizes infrastructure components as nodes and their dependencies as directed edges.

The AddSeries method accepts three primary arguments: a series identifier ("Infrastructure"), a slice of opts.GraphNode, and a slice of opts.GraphLink. Each node includes display properties like Name and SymbolSize, while each link defines directional relationships via Source and Target.

Styling is applied through chained option setters:

• WithGraphChartOpts configures layout behavior: "force" enables physics-based positioning; Repulsion controls node separation strength; Roam allows panning and zooming; FocusNodeAdjacency highlights neighboring nodes on hover.

• WithLabelOpts makes node names visible above each symbol and sets text color.

• WithLineStyleOpts aplies subtle curvature and stroke properties to edges.

• WithEmphasisOpts defines appearance changes during interaction — specifically, enlarged white labels appear on hover.

The embedded JavaScript handler responds to clicks by copying the clicked node’s name to the system clipboard, enhancing usability without requiring external DOM manipulation scripts.