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

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

<script>
  import { layerBorder } from "@sigma/node-border";
  import Sigma from "sigma";

  import { getSmallGraph } from "../_data/small-graph";

  const container = document.getElementById("sigma-container") as HTMLElement;

  const graph = getSmallGraph();

  const BORDER_COLORS: Record<string, string> = {
    a: "darkgrey",
    b: "darkgrey",
    c: "darkgrey",
    d: "lightgrey",
    e: "lightgrey",
    f: "lightgrey",
  };
  graph.forEachNode((node) => {
    graph.setNodeAttribute(node, "borderColor", BORDER_COLORS[node]);
  });

  new Sigma(graph, container, {
    primitives: {
      nodes: {
        variables: {
          borderColor: { type: "color", default: "red" },
        },
        layers: [
          layerBorder({
            borders: [
              { size: 0.3, color: { attribute: "borderColor" }, mode: "relative" },
              { size: 0, color: { attribute: "color" }, fill: true },
            ],
          }),
        ],
      },
    },
  });
</script>