<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Render Members</title>
    <!-- Include D3.js -->
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <style>
        /* Optional: Add some basic styling */
        #chart {
            border: 1px solid black;
            margin: 20px auto;
            display: block;
        }
        text {
            dominant-baseline: middle;
            text-anchor: middle;
        }
    </style>
</head>
<body>
    <div id="chart"></div>

    <script type="text/javascript">
        // Fetch data from the Flask endpoint for Person nodes
        d3.json('/nodes?type=Person').then(function(data) {
            console.log("Fetched Data:", data);

            var svg = d3.select("#chart")
                .append("svg")
                .attr("width", 1000)
                .attr("height", 1000);

            // Function to generate random position within the SVG canvas
            function getRandomPosition() {
                return Math.random() * 950 + 25; // Random x or y between 25 and 975 to keep nodes inside the border
            }

            // Render circles for each node with green color and random positions
            svg.selectAll("circle")
                .data(data.nodes)
                .enter()
                .append("circle")
                .attr("cx", getRandomPosition) // Random x position
                .attr("cy", getRandomPosition) // Random y position
                .attr("r", 10)
                .style("fill", "green"); // Set node color to green

            // Add labels for each node using the 'name' and 'bioguideId' properties
            svg.selectAll("text.label")
                .data(data.nodes)
                .enter()
                .append("text")
                .attr("class", "label")
                .attr("x", function(d) { return d3.select(this.previousSibling).attr("cx"); }) // Position slightly to the right of the circle
                .attr("y", function(d) { return d3.select(this.previousSibling).attr("cy") + 15; }) // Position below the circle
                .text(function(d) {
                    return `${d.name || 'Person'}\nID: ${d.bioguideId || 'N/A'}`; // Single line with both name and ID
                })
                .style("fill", "black")
                .style("font-size", "12px");
        }).catch(function(error) {
            console.error("Error fetching data:", error);
        });
    </script>
</body>
</html>