<div id="sigma-container"></div>

<style>
  #sigma-container {
    width: 100%;
    height: 100%;
  }
</style>

<script>
  import Graph from "graphology";
  import Sigma from "sigma";
  import { DEFAULT_STYLES } from "sigma/types";

  interface Dataset {
    nodes: { key: string; label: string; tag: string; cluster: string; x: number; y: number; score: number }[];
    edges: [string, string][];
    clusters: { key: string; color: string; clusterLabel: string }[];
  }

  const response = await fetch("/data/wikipedia.json");
  const dataset: Dataset = await response.json();

  const graph = new Graph();

  for (const node of dataset.nodes) {
    graph.addNode(node.key, {
      label: node.label,
      x: node.x,
      y: node.y,
      cluster: node.cluster,
      score: node.score,
    });
  }

  for (const [source, target] of dataset.edges) {
    if (graph.hasNode(source) && graph.hasNode(target) && !graph.hasEdge(source, target)) {
      graph.addEdge(source, target);
    }
  }

  const clusterColors = Object.fromEntries(dataset.clusters.map((c) => [c.key, c.color]));
  const { minScore, maxScore } = dataset.nodes.reduce(
    ({ minScore, maxScore }, { score }) => ({
      minScore: Math.min(minScore, score),
      maxScore: Math.max(maxScore, score),
    }),
    { minScore: Infinity, maxScore: -Infinity },
  );

  const renderer = new Sigma(graph, document.getElementById("sigma-container") as HTMLElement, {
    styles: {
      nodes: [
        DEFAULT_STYLES.nodes,
        {
          color: {
            attribute: "cluster",
            dict: clusterColors,
            defaultValue: "#999",
          },
          size: { attribute: "score", min: 10, max: 50, minValue: minScore, maxValue: maxScore },
          label: { attribute: "label" },
        },
      ],
      edges: [DEFAULT_STYLES.edges, { color: "#ccc", size: 5 }],
    },
  });
</script>