<div id="sigma-container"></div>
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@4.5.0/dist/maplibre-gl.css" />

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

<script>
  import bindMaplibreLayer from "@sigma/layer-maplibre";
  import Graph from "graphology";
  import { nodeExtent } from "graphology-metrics/graph";
  import type { Attributes, SerializedGraph } from "graphology-types";
  import type { StyleSpecification } from "maplibre-gl";
  import Sigma from "sigma";
  import { DEFAULT_STYLES } from "sigma/types";

  const mapStyle: StyleSpecification = {
    version: 8,
    name: "Custom styles",
    sources: {
      demotiles: {
        type: "vector",
        url: "https://demotiles.maplibre.org/tiles/tiles.json",
      },
    },
    glyphs: "https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf",
    layers: [
      {
        id: "background",
        type: "background",
        paint: { "background-color": "#f5f5f5" },
      },
      {
        id: "countries-fill",
        type: "fill",
        source: "demotiles",
        "source-layer": "countries",
        paint: { "fill-color": "#ffffff" },
      },
      {
        id: "countries-boundary",
        type: "line",
        source: "demotiles",
        "source-layer": "countries",
        paint: { "line-color": "#dee2e6", "line-width": 1 },
      },
      {
        id: "geolines",
        type: "line",
        source: "demotiles",
        "source-layer": "geolines",
        paint: { "line-color": "#dee2e6", "line-width": 1.5 },
      },
      {
        id: "country-labels",
        type: "symbol",
        source: "demotiles",
        "source-layer": "centroids",
        layout: {
          "text-field": "{NAME}",
          "text-font": ["Open Sans Semibold"],
          "text-size": 12,
        },
        paint: {
          "text-color": "#adb5bd",
          "text-halo-color": "#ffffff",
          "text-halo-width": 1.5,
        },
      },
    ],
  };

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

  const res = await fetch("/data/airports.json");
  const data = await res.json();
  const graph = Graph.from(data as SerializedGraph);
  graph.updateEachNodeAttributes((node, attributes) => ({
    ...attributes,
    label: attributes.fullName,
    degree: graph.degree(node),
    x: 0,
    y: 0,
  }));

  const [minDegree, maxDegree] = nodeExtent(graph, "degree");
  const renderer = new Sigma(graph, container, {
    settings: {
      labelRenderedSizeThreshold: 20,
      minEdgeThickness: 1,
    },
    styles: {
      edges: [DEFAULT_STYLES.edges, { color: "#ffaeaf", size: 0.0001 }],
      nodes: [
        DEFAULT_STYLES.nodes,
        {
          color: "#e22352",
          size: {
            attribute: "degree",
            min: 0.001,
            max: 0.005,
            minValue: minDegree,
            maxValue: maxDegree,
          },
        },
      ],
    },
  });

  bindMaplibreLayer(renderer, {
    mapOptions: { style: mapStyle },
    getNodeLatLng: (attrs: Attributes) => ({ lat: attrs.latitude, lng: attrs.longitude }),
  });
</script>