notebooks/en/vnet-topology-visualization-d3js.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "> NOTE: To try this, you MUST be logged to Azure using PowerShell"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Install necessary modules"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "dotnet_interactive": {
     "language": "pwsh"
    },
    "polyglot_notebook": {
     "kernelName": "pwsh"
    },
    "vscode": {
     "languageId": "polyglot-notebook"
    }
   },
   "outputs": [],
   "source": [
    "Install-Module -Name PSQuickGraph -AllowPrerelease -RequiredVersion \"2.0.2-alpha\"\n",
    "Install-Module -Name ipmgmt\n",
    "Install-Module -Name Az -Scope CurrentUser -Repository PSGallery"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Load modules"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "dotnet_interactive": {
     "language": "pwsh"
    },
    "polyglot_notebook": {
     "kernelName": "pwsh"
    },
    "vscode": {
     "languageId": "polyglot-notebook"
    }
   },
   "outputs": [],
   "source": [
    "Import-Module ipmgmt\n",
    "Import-Module PSQuickGraph -RequiredVersion \"2.0.2\""
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Load some JS modules for visualization"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "dotnet_interactive": {
     "language": "javascript"
    },
    "polyglot_notebook": {
     "kernelName": "javascript"
    },
    "vscode": {
     "languageId": "polyglot-notebook"
    }
   },
   "outputs": [],
   "source": [
    "d3 = await import(\"https://cdn.jsdelivr.net/npm/d3@7/+esm\");\n",
    "d3c = await import(\"https://cdn.jsdelivr.net/npm/d3-color@3.1.0/+esm\");\n",
    "d3f = await import(\"https://cdn.jsdelivr.net/npm/d3-fetch@3.0.1/+esm\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Create a graph object"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "dotnet_interactive": {
     "language": "pwsh"
    },
    "polyglot_notebook": {
     "kernelName": "pwsh"
    },
    "vscode": {
     "languageId": "polyglot-notebook"
    }
   },
   "outputs": [],
   "source": [
    "$g = New-Graph"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Populate VNET and NIC information"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "dotnet_interactive": {
     "language": "pwsh"
    },
    "polyglot_notebook": {
     "kernelName": "pwsh"
    },
    "vscode": {
     "languageId": "polyglot-notebook"
    }
   },
   "outputs": [],
   "source": [
    "$vnets = Get-AzVirtualNetwork\n",
    "$nics = Get-AzNetworkInterface"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Add VNETs and Subnets to the graph"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "dotnet_interactive": {
     "language": "pwsh"
    },
    "polyglot_notebook": {
     "kernelName": "pwsh"
    },
    "vscode": {
     "languageId": "polyglot-notebook"
    }
   },
   "outputs": [],
   "source": [
    "# add vnets and peerings to the graph\n",
    "$vnets | ForEach-Object {\n",
    "    $currentVnet = $_\n",
    "    $vnetVertex = [PSGraph.Model.PSVertex]::new($currentVnet.Id, $currentVnet)\n",
    "    Add-Vertex -Graph $g -Vertex $vnetVertex\n",
    "    $currentVnet.Subnets | % {\n",
    "        $currentSubnet = $_\n",
    "        $subnetVertex = [PSGraph.Model.PSVertex]::new($currentSubnet.Id, $currentSubnet)\n",
    "        Add-Edge -Graph $g -From $vnetVertex -To $subnetVertex\n",
    "    }\n",
    "}\n",
    "\n",
    "foreach ($v in $g.Vertices){\n",
    "    foreach($p in $v.OriginalObject.VirtualNetworkPeerings) {\n",
    "        foreach ($rvn in $p.RemoteVirtualNetwork) {\n",
    "            $targetVertex = $g.Vertices.Where({$_.Label -eq $rvn.id})[0]\n",
    "            Add-Edge -From $v -To $targetVertex -Graph $g\n",
    "        }\n",
    "    }\n",
    "}\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Add NICs to the graph"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "dotnet_interactive": {
     "language": "pwsh"
    },
    "polyglot_notebook": {
     "kernelName": "pwsh"
    },
    "vscode": {
     "languageId": "polyglot-notebook"
    }
   },
   "outputs": [],
   "source": [
    "# add NICs to the graph\n",
    "$nics | ForEach-Object {\n",
    "    $vnetID = $_.IpConfigurations[0].Subnet.Id #-replace \"/subnets/.+\", \"\"\n",
    "    $targetVertex = $g.Vertices.Where({$_.Label -eq $vnetID})[0]\n",
    "    Add-Edge -Graph $g -From ([PSGraph.Model.PSVertex]::new($_.name, $_)) -To $targetVertex\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Perform some calculations."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "This prepares a list of nodes for d3js library. \n",
    "\n",
    "- Calculates a node radius, depending on number of incoming and outgoing links.\n",
    "- Adds color to each node type\n",
    "- Adds some additional metadata"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "dotnet_interactive": {
     "language": "pwsh"
    },
    "polyglot_notebook": {
     "kernelName": "pwsh"
    },
    "vscode": {
     "languageId": "polyglot-notebook"
    }
   },
   "outputs": [],
   "source": [
    "# perform calculations on nodes, prepare a list of nodes for d3js\n",
    "$baseRadius = 5\n",
    "$maxRadius = 14\n",
    "$inWeight = 1\n",
    "$outWeight = 15\n",
    "\n",
    "$degrees = $g.Vertices | % {\n",
    "    $inDegree = $g.InDegree($_)\n",
    "    $outDegree = $g.OutDegree($_)\n",
    "    $inDegree * $inWeight + $outDegree * $outWeight\n",
    "} | Sort-Object\n",
    "\n",
    "$minWeighted = $degrees[0]\n",
    "$maxWeighted = $degrees[-1]\n",
    "\n",
    "$idList = $g.Vertices | % {\n",
    "    $inDegree = $g.InDegree($_)\n",
    "    $outDegree = $g.OutDegree($_)\n",
    "    $weightedDegree = $inDegree * $inWeight + $outDegree * $outWeight\n",
    "    \n",
    "    $normalizedLinkWeight = ($weightedDegree - $minWeighted)/($maxWeighted - $minWeighted)\n",
    "    \n",
    "    $result = @{}\n",
    "    $result.id = $_.Label\n",
    "    $result.displayName = \"\"\n",
    "    $result.radius = $baseRadius + $normalizedLinkWeight * ($maxRadius - $baseRadius)\n",
    "    $result.inDegree = $inDegree\n",
    "    $result.outDegree = $outDegree\n",
    "    \n",
    "    switch ($_.OriginalObject.GetType().ToString()){\n",
    "        \"Microsoft.Azure.Commands.Network.Models.PSVirtualNetwork\" {\n",
    "            $result.displayName = ($result.id -split \"/\")[-1]\n",
    "            $result.color = \"#ff6942\"\n",
    "            break;\n",
    "        }\n",
    "        \"Microsoft.Azure.Commands.Network.Models.PSNetworkInterface\" {\n",
    "            $result.displayName = $result.id -like \"*.nic.*\" ? ($result.id -split \"\\.nic\\.\")[0] : $result.id\n",
    "            $result.color = \"#ba150d\"\n",
    "            break;\n",
    "        }\n",
    "        \"Microsoft.Azure.Commands.Network.Models.PSSubnet\" {\n",
    "            $result.displayName = ($result.id -split \"/\")[-1]\n",
    "            $result.color = \"#ffc500\"\n",
    "            break;\n",
    "        }\n",
    "        default {\n",
    "            $result.color = \"#41051f\"\n",
    "            break;\n",
    "        }\n",
    "    }\n",
    "    $result\n",
    "}\n",
    "\n",
    "#$idList[0..5]\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Now prepare a list of links"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "dotnet_interactive": {
     "language": "pwsh"
    },
    "polyglot_notebook": {
     "kernelName": "pwsh"
    },
    "vscode": {
     "languageId": "polyglot-notebook"
    }
   },
   "outputs": [],
   "source": [
    "# perform calculations on links, prepare a list of links for d3js\n",
    "$linksList = $g.Edges | % {\n",
    "    $result = @{}\n",
    "    $result.source = $_.Source.Label\n",
    "    $result.target = $_.Target.Label\n",
    "    $result\n",
    "}\n",
    "\n",
    "#$linksList[0]\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Visualization canvas"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "dotnet_interactive": {
     "language": "html"
    },
    "polyglot_notebook": {
     "kernelName": "html"
    },
    "vscode": {
     "languageId": "polyglot-notebook"
    }
   },
   "outputs": [],
   "source": [
    "<style>\n",
    "#side-card {\n",
    "    width: 20%;\n",
    "    overflow-y: auto;\n",
    "    background: #fff; /* Background color */\n",
    "    padding: 10px;\n",
    "    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Shadow for raised effect */\n",
    "    border-radius: 5px; /* Optional: adds rounded corners */\n",
    "}\n",
    "\n",
    "#node-list {\n",
    "    display: grid;\n",
    "    grid-template-columns: repeat(2, 1fr); /* Creates two columns */\n",
    "    gap: 5px; /* Space between items */\n",
    "    list-style: none; /* Removes default list styling */\n",
    "    padding: 0;\n",
    "}\n",
    "\n",
    "#node-list li {\n",
    "    background: #f8f8f8; /* Light background for each item */\n",
    "    padding: 5px;\n",
    "    border-radius: 3px; /* Rounded corners for list items */\n",
    "    cursor: pointer; /* Indicates interactivity */\n",
    "}\n",
    "\n",
    "#filter-input {\n",
    "    margin-bottom: 10px; /* Spacing between input and list */\n",
    "    padding: 8px;\n",
    "    width: calc(100% - 16px); /* Full width taking padding into account */\n",
    "    box-sizing: border-box; /* Includes padding and border in width */\n",
    "    border-radius: 5px; /* Rounded corners for input */\n",
    "    border: 1px solid #ccc; /* Subtle border for the input */\n",
    "}\n",
    "\n",
    "#node-list li:hover {\n",
    "    background-color: lightgray;  // Highlight list item on hover\n",
    "    cursor: pointer;\n",
    "}\n",
    "\n",
    "circle {\n",
    "    transition: all 0.3s ease;  // Smooth transition for changes in size and color\n",
    "}\n",
    "</style>\n",
    "\n",
    "\n",
    "<div style=\"display: flex; justify-content: space-between;\">\n",
    "<div id=\"graph-container\" style=\"flex-grow: 1;\"></div>\n",
    "<div id=\"side-card\">\n",
    "    <input type=\"text\" id=\"filter-input\" placeholder=\"Filter nodes...\">\n",
    "    <ul id=\"node-list\"></ul>\n",
    "    <div id=\"pagination\"></div>\n",
    "</div>\n",
    "</div>\n",
    "\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "and visualize!"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "This create a graph, which includes VNETs, VNET Peerings, Subnets and NICs attached to corresponding subnets. It also adds a \"side card\", which has a list of object names, so you can easily find the object you are interested in, on the graph."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "dotnet_interactive": {
     "language": "javascript"
    },
    "polyglot_notebook": {
     "kernelName": "javascript"
    },
    "vscode": {
     "languageId": "polyglot-notebook"
    }
   },
   "outputs": [],
   "source": [
    "// build visualization\n",
    "\n",
    "const height = 800;\n",
    "const width = 1000;\n",
    "\n",
    "let currentPage = 1;\n",
    "const itemsPerPage = 30;  // You can adjust the number of items per page\n",
    "\n",
    "let currentFilter = \"\";\n",
    "\n",
    "// Specify the color scale.\n",
    "//const color = d3.scaleOrdinal(d3.schemeCategory10);\n",
    "\n",
    "const psNodes = await d3f.json(\"vnet-topology-d3js-demo-data/idList.json\");\n",
    "const psLinks = await d3f.json(\"vnet-topology-d3js-demo-data/linkList.json\");\n",
    "\n",
    "\n",
    "// The force simulation mutates links and nodes, so create a copy\n",
    "// so that re-evaluating this cell produces the same result.\n",
    "const links = psLinks.map(d => ({ ...d }));\n",
    "const nodes = psNodes.map(d => ({ ...d }));\n",
    "\n",
    "renderNodeList();\n",
    "\n",
    "// Create a simulation for the nodes with several forces.\n",
    "const linkForce = d3.forceLink(links).id(d => d.id).distance(50).strength(1);\n",
    "const chargeForce = d3.forceManyBody().strength(-100);\n",
    "const centerForce = d3.forceCenter(width / 2, height / 2);\n",
    "const collideForce = d3.forceCollide().radius(d => d.radius).iterations(2);\n",
    "\n",
    "const simulation = d3.forceSimulation(nodes)\n",
    "    .force(\"link\", linkForce)\n",
    "    .force(\"charge\", chargeForce)\n",
    "    .force(\"center\", centerForce)\n",
    "    .force(\"collide\", collideForce)\n",
    "    .on(\"tick\", ticked)\n",
    "    .on(\"end\", () => console.log(\"Simulation ended.\"));\n",
    "\n",
    "\n",
    "// Create the SVG container.\n",
    "const svg = d3.select('#graph-container')\n",
    "    .append('svg')\n",
    "    .attr(\"width\", width)\n",
    "    .attr(\"height\", height)\n",
    "    .call(d3.zoom().on(\"zoom\", (event) => {\n",
    "        svg.attr(\"transform\", event.transform);\n",
    "    }))\n",
    "    .append(\"g\");\n",
    "\n",
    "// Add a line for each link.\n",
    "const link = svg.append(\"g\")\n",
    "    .attr(\"stroke\", \"#999\")\n",
    "    .attr(\"stroke-opacity\", 0.6)\n",
    "    .selectAll(\"line\")\n",
    "    .data(links)\n",
    "    .join(\"line\")\n",
    "    .attr(\"stroke-width\", d => Math.sqrt(d.value));\n",
    "\n",
    "// Append a group for each node which will contain the circle and text\n",
    "// Keep track of the currently selected node\n",
    "let selectedNode = null;\n",
    "\n",
    "// Append a group for each node which will contain the circle and text\n",
    "const node = svg.append(\"g\")\n",
    "    .attr(\"stroke\", \"#fff\")\n",
    "    .attr(\"stroke-width\", 1.5)\n",
    "    .selectAll(\"g\")\n",
    "    .data(nodes)\n",
    "    .join(\"g\")\n",
    "    .call(d3.drag()\n",
    "        .on(\"start\", dragstarted)\n",
    "        .on(\"drag\", dragged)\n",
    "        .on(\"end\", dragended))\n",
    "    .on(\"click\", nodeClicked);  // Add the click event listener\n",
    "\n",
    "// Append circles for each node\n",
    "node.append(\"circle\")\n",
    "    .attr(\"r\", d => d.radius)\n",
    "    .attr(\"fill\", d => d.color)\n",
    "    .attr(\"data-node-id\", d => d.id);  // Ensure this attribute is set;\n",
    "\n",
    "\n",
    "// Append the text labels\n",
    "// Since we want to add the background rectangles before the text, we need to insert them first\n",
    "node.each(function (d) {\n",
    "    const node = d3.select(this);\n",
    "    const rect = node.append(\"rect\")\n",
    "        .style(\"fill\", \"white\")\n",
    "        .style(\"opacity\", 0.7); // The opacity makes the label background semi-transparent\n",
    "\n",
    "    const text = node.append(\"text\")\n",
    "        .style(\"display\", \"none\")\n",
    "        .attr(\"x\", d.radius + 3)\n",
    "        .attr(\"y\", \".35em\")\n",
    "        .style(\"font-size\", \"12px\")\n",
    "        .style(\"font-family\", \"Arial, sans-serif\")\n",
    "        .text(d.displayName)\n",
    "        .style(\"pointer-events\", \"none\")\n",
    "        .style(\"fill\", \"black\")\n",
    "        .style(\"stroke\", \"black\") // Ensuring the fill is set to black\n",
    "        .attr(\"data-node-id\", d => d.id);\n",
    "\n",
    "    // Now, set the attributes for the rectangle to properly surround the text\n",
    "    rect.attr(\"x\", -8)\n",
    "        .attr(\"y\", -text.node().getBBox().height / 2)\n",
    "        .attr(\"width\", text.node().getBBox().width + 16) // Adding padding around the text\n",
    "        .attr(\"height\", text.node().getBBox().height);\n",
    "});\n",
    "\n",
    "// Set the position attributes of links and nodes each time the simulation ticks.\n",
    "function ticked() {\n",
    "    // Update the link positions\n",
    "    link\n",
    "        .attr(\"x1\", d => d.source.x)\n",
    "        .attr(\"y1\", d => d.source.y)\n",
    "        .attr(\"x2\", d => d.target.x)\n",
    "        .attr(\"y2\", d => d.target.y);\n",
    "\n",
    "    // Update the node positions\n",
    "    node\n",
    "        .attr(\"transform\", d => `translate(${d.x},${d.y})`);\n",
    "}\n",
    "\n",
    "// Reheat the simulation when drag starts, and fix the subject position.\n",
    "function dragstarted(event) {\n",
    "    if (!event.active) simulation.alphaTarget(0.3).restart();\n",
    "    event.subject.fx = event.subject.x;\n",
    "    event.subject.fy = event.subject.y;\n",
    "}\n",
    "\n",
    "// Update the subject (dragged node) position during drag.\n",
    "function dragged(event) {\n",
    "    event.subject.fx = event.x;\n",
    "    event.subject.fy = event.y;\n",
    "}\n",
    "\n",
    "// Restore the target alpha so the simulation cools after dragging ends.\n",
    "// Unfix the subject position now that it's no longer being dragged.\n",
    "function dragended(event) {\n",
    "    if (!event.active) simulation.alphaTarget(0);\n",
    "    event.subject.fx = null;\n",
    "    event.subject.fy = null;\n",
    "}\n",
    "\n",
    "function nodeClicked(event, d) {\n",
    "    // If the same node is clicked again, hide the labels and clear the selection\n",
    "    if (selectedNode === d) {\n",
    "        node.selectAll(\"text\").style(\"display\", \"none\");\n",
    "        selectedNode = null;\n",
    "    } else {\n",
    "        // Hide all labels\n",
    "        node.selectAll(\"text\").style(\"display\", \"none\");\n",
    "\n",
    "        // Update the selection to the new node\n",
    "        selectedNode = d;\n",
    "\n",
    "        // Show the label for the selected node\n",
    "        d3.select(event.currentTarget).select(\"text\").style(\"display\", \"block\");\n",
    "\n",
    "        // Show labels for all adjacent nodes\n",
    "        links.forEach(link => {\n",
    "            if (link.source === d || link.target === d) {\n",
    "                let targetNode = link.source === d ? link.target : link.source;\n",
    "                d3.select(node.nodes()[targetNode.index]).select(\"text\").style(\"display\", \"block\");\n",
    "            }\n",
    "        });\n",
    "    }\n",
    "}\n",
    "\n",
    "function showLabelsForSelectedNode(d) {\n",
    "    // Find and display labels for all adjacent nodes\n",
    "    links.forEach(link => {\n",
    "        if (link.source === d) {\n",
    "            d3.select(node.nodes()[link.target.index]).select(\"text\").style(\"display\", \"block\");\n",
    "        } else if (link.target === d) {\n",
    "            d3.select(node.nodes()[link.source.index]).select(\"text\").style(\"display\", \"block\");\n",
    "        }\n",
    "    });\n",
    "}\n",
    "\n",
    "function highlightNode(node) {\n",
    "    // Increase the node's radius and show the label\n",
    "    svg.selectAll(\"circle\")\n",
    "        .filter(d => d.id === node.id)\n",
    "        .attr(\"r\", node.radius * 1.5); // Increase radius by 50%\n",
    "\n",
    "    svg.selectAll(\"text\")\n",
    "        .filter(d => d.id === node.id)\n",
    "        .style(\"display\", \"block\");\n",
    "}\n",
    "\n",
    "function unhighlightNode(node) {\n",
    "    // Reset the node's radius and hide the label\n",
    "    svg.selectAll(\"circle\")\n",
    "        .filter(d => d.id === node.id)\n",
    "        .attr(\"r\", node.radius);\n",
    "\n",
    "    svg.selectAll(\"text\")\n",
    "        .filter(d => d.id === node.id)\n",
    "        .style(\"display\", \"none\");\n",
    "}\n",
    "\n",
    "// Function to update the list based on the filter\n",
    "function updateList() {\n",
    "    const searchTerm = d3.select(\"#filter-input\").property(\"value\").toLowerCase();\n",
    "    d3.selectAll(\"#node-list li\")\n",
    "        .style(\"display\", function (d) {\n",
    "            // Display the list item only if it includes the search term\n",
    "            return d.displayName.toLowerCase().includes(searchTerm) ? \"\" : \"none\";\n",
    "        });\n",
    "}\n",
    "\n",
    "function highlightNodeAndAdjacents(d) {\n",
    "    // Reset all nodes to default appearance\n",
    "    d3.selectAll(\"circle\")\n",
    "        .style(\"stroke\", null)\n",
    "        .style(\"fill\", d => d.color)\n",
    "        .attr(\"r\", d => d.radius);\n",
    "\n",
    "    d3.selectAll(\"text\").style(\"display\", \"none\");  // Hide all labels\n",
    "\n",
    "    // Highlight the hovered node by changing its color and size\n",
    "    d3.select(`circle[data-node-id=\"${d.id}\"]`)\n",
    "        .style(\"fill\", \"red\")  // Change color to red\n",
    "        .style(\"stroke\", \"orange\")\n",
    "        .attr(\"r\", d.radius * 1.5);  // Increase the radius\n",
    "    d3.select(`text[data-node-id=\"${d.id}\"]`).style(\"display\", \"block\");\n",
    "\n",
    "    // Highlight and show labels for adjacent nodes\n",
    "    links.forEach(link => {\n",
    "        if (link.source.id === d.id || link.target.id === d.id) {\n",
    "            let targetNode = link.source.id === d.id ? link.target : link.source;\n",
    "            d3.select(`circle[data-node-id=\"${targetNode.id}\"]`)\n",
    "                .style(\"stroke\", \"orange\")\n",
    "                .attr(\"r\", targetNode.radius * 1.2);  // Slightly increase the radius\n",
    "            d3.select(`text[data-node-id=\"${targetNode.id}\"]`).style(\"display\", \"block\");\n",
    "        }\n",
    "    });\n",
    "}\n",
    "\n",
    "\n",
    "function unhighlightAllNodes() {\n",
    "    // Reset all nodes to their default appearance\n",
    "    d3.selectAll(\"circle\")\n",
    "        .style(\"stroke\", null)\n",
    "        .attr(\"r\", d => d.radius);\n",
    "    d3.selectAll(\"text\").style(\"display\", \"none\");\n",
    "}\n",
    "\n",
    "// Function to update the page\n",
    "function updatePage(page) {\n",
    "    currentPage = page;\n",
    "    renderNodeList();\n",
    "}\n",
    "\n",
    "// Function to calculate total pages\n",
    "function totalPages() {\n",
    "    return Math.ceil(nodes.length / itemsPerPage);\n",
    "}\n",
    "\n",
    "// Binding the hover events in the renderNodeList function\n",
    "function renderNodeList() {\n",
    "    const filteredNodes = nodes.filter(d => d.displayName.toLowerCase().includes(currentFilter));\n",
    "    const totalPages = Math.ceil(filteredNodes.length / itemsPerPage);\n",
    "    const start = (currentPage - 1) * itemsPerPage;\n",
    "    const end = start + itemsPerPage;\n",
    "\n",
    "    const nodeList = d3.select(\"#node-list\").selectAll(\"li\")\n",
    "        .data(filteredNodes.slice(start, end), d => d.id);\n",
    "\n",
    "    nodeList.enter()\n",
    "        .append(\"li\")\n",
    "        .merge(nodeList)\n",
    "        .text(d => d.displayName)\n",
    "        .on(\"mouseover\", (event, d) => highlightNodeAndAdjacents(d))\n",
    "        .on(\"mouseout\", unhighlightAllNodes);\n",
    "\n",
    "    nodeList.exit().remove();\n",
    "\n",
    "    renderPagination(totalPages);\n",
    "}\n",
    "\n",
    "\n",
    "\n",
    "function renderPagination(totalPages) {\n",
    "    const pagination = d3.select(\"#pagination\");\n",
    "\n",
    "    pagination.selectAll(\"*\").remove();  // Clear existing elements\n",
    "\n",
    "    pagination.append(\"button\")\n",
    "        .text(\"Previous\")\n",
    "        .attr(\"disabled\", currentPage === 1 ? \"disabled\" : null)\n",
    "        .on(\"click\", () => updatePage(Math.max(1, currentPage - 1)));\n",
    "\n",
    "    pagination.append(\"span\")\n",
    "        .text(`Page ${currentPage} of ${totalPages}`);\n",
    "\n",
    "    pagination.append(\"button\")\n",
    "        .text(\"Next\")\n",
    "        .attr(\"disabled\", currentPage === totalPages ? \"disabled\" : null)\n",
    "        .on(\"click\", () => updatePage(Math.min(totalPages, currentPage + 1)));\n",
    "}\n",
    "\n",
    "\n",
    "// Function to handle filter changes\n",
    "function updateFilter(newFilter) {\n",
    "    currentFilter = newFilter.toLowerCase();  // Convert to lower case for case-insensitive comparison\n",
    "    currentPage = 1;  // Reset to the first page after filter update\n",
    "    renderNodeList();\n",
    "}\n",
    "\n",
    "\n",
    "// Event listener for the input field\n",
    "// d3.select(\"#filter-input\").on(\"input\", updateList);\n",
    "d3.select(\"#filter-input\").on(\"input\", function() {\n",
    "    updateFilter(this.value);\n",
    "});\n"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": ".NET (C#)",
   "language": "C#",
   "name": ".net-csharp"
  },
  "language_info": {
   "name": "python"
  },
  "polyglot_notebook": {
   "kernelInfo": {
    "defaultKernelName": "csharp",
    "items": [
     {
      "aliases": [],
      "name": "csharp"
     }
    ]
   }
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}