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

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

<script>
  import { layerPiechart } from "@sigma/node-piechart";
  import iwanthue from "iwanthue";
  import seedrandom from "seedrandom";
  import Sigma from "sigma";

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

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

  const { slices } = registerControls({
    slices: { type: "number", label: "Slices", default: 3, min: 1, max: 32, step: 1 },
  });

  const graph = getSmallGraph();

  const rng = seedrandom("sigma");
  const palette = iwanthue(slices, { seed: "sigma", colorSpace: "green-mint" });

  const sliceKeys = Array.from({ length: slices }, (_, i) => `slice${i}`);

  graph.forEachNode((node) => {
    sliceKeys.forEach((key) => {
      // Node "d" stays empty to showcase defaultColor
      graph.setNodeAttribute(node, key, node === "d" ? 0 : Math.max(rng() ** 2 - 0.01, 0));
    });
  });

  new Sigma(graph, container, {
    primitives: {
      nodes: {
        variables: Object.fromEntries(sliceKeys.map((key) => [key, { type: "number", default: 0 }])),
        layers: [
          layerPiechart({
            defaultColor: "#BCB7C4",
            slices: sliceKeys.map((key, i) => ({
              color: palette[i],
              value: { attribute: key },
            })),
          }),
        ],
      },
    },
  });
</script>