<commit_before>// Create a class for the element
class ForceDirectedGraph extends HTMLElement {

    // Before the element is attached to the DOM
    constructor() {
        // If you define a ctor, always call super() first!
        // This is specific to CE and required by the spec.
        super();

        // Create a shadow root
        const shadow = this.attachShadow({
            mode: "closed"
        });

        // Get properties
        this.width = this.getAttribute("svg-width");
        this.height = this.getAttribute("svg-height");
        this.endpoint = this.getAttribute("endpoint");
        this.resourceId = this.getAttribute("resource-id");

        // Add the svg element to the shadow root.
        this.svg = d3.select(shadow).append("svg");

        // Set svg dimension attributes
        this.svg
            .attr("width", this.width)
            .attr("height", this.height);

        this.svg
            .call(d3.zoom()
                .on("zoom", this.zoom.bind(this)));

        this.simulation = d3.forceSimulation()
            .force("link", d3.forceLink().id(d => d.id))
            .force("charge", d3.forceManyBody()
                .strength(-200)
                .distanceMax(this.width / 2))
            .force("center", d3.forceCenter(this.width / 2, this.height / 2));

        this.color = d3.scaleOrdinal(d3.schemeCategory20);
    }

    // After the element is attached to the DOM
    // Get the graph nodes and edges from the endoint and init the FDG
    connectedCallback() {
        d3.json(`${this.endpoint}?id=${this.resourceId}`, (error, graph) => {
            if (error !== null) {
                console.error("Something went wrong while getting the data", error);
            } else {
                this.initGraph(graph);
            }
        });
    }

    initGraph(graph) {
        this.link = this.svg
            .selectAll(".line")
            .data(graph.links)
            .enter().append("line")
            .attr("stroke", "#ccc")
            .attr("stroke-width", "1px");

        this.nodes = this.svg
            .selectAll(".node")
            .data(graph.nodes)
            .enter().append("g")
            .call(d3.drag()
                .on("start", this.dragstarted.bind(this))
                .on("drag", this.dragged.bind(this))
                .on("end", this.dragended.bind(this)));

        this.circles = this.nodes
            .append("circle")
            .attr("r", 6)
            .attr("fill", d => this.color(d.group));

        this.labels = this.nodes
            .append("text")<commit_msg>FDG added onClick handler WIP<commit_after>// Create a class for the element
class ForceDirectedGraph extends HTMLElement {

    // Before the element is attached to the DOM
    constructor() {
        // If you define a ctor, always call super() first!
        // This is specific to CE and required by the spec.
        super();

        // Create a shadow root
        const shadow = this.attachShadow({
            mode: "closed"
        });

        // Get properties
        this.width = this.getAttribute("svg-width");
        this.height = this.getAttribute("svg-height");
        this.endpoint = this.getAttribute("endpoint");
        this.resourceId = this.getAttribute("resource-id");

        // Add the svg element to the shadow root.
        this.svg = d3.select(shadow).append("svg");

        // Set svg dimension attributes
        this.svg
            .attr("width", this.width)
            .attr("height", this.height);

        this.svg
            .call(d3.zoom()
                .on("zoom", this.zoom.bind(this)));

        this.simulation = d3.forceSimulation()
            .force("link", d3.forceLink().id(d => d.id))
            .force("charge", d3.forceManyBody()
                .strength(-200)
                .distanceMax(this.width / 2))
            .force("center", d3.forceCenter(this.width / 2, this.height / 2));

        this.color = d3.scaleOrdinal(d3.schemeCategory20);
    }

    // After the element is attached to the DOM
    // Get the graph nodes and edges from the endoint and init the FDG
    connectedCallback() {
        d3.json(`${this.endpoint}?id=${this.resourceId}`, (error, graph) => {
            if (error !== null) {
                console.error("Something went wrong while getting the data", error);
            } else {
                this.initGraph(graph);
            }
        });
    }

    initGraph(graph) {
        this.link = this.svg
            .selectAll(".line")
            .data(graph.links)
            .enter().append("line")
            .attr("stroke", "#ccc")
            .attr("stroke-width", "1px");

        this.nodes = this.svg
            .selectAll(".node")
            .data(graph.nodes)
            .enter().append("g")
            .call(d3.drag()
                .on("start", this.dragstarted.bind(this))
                .on("drag", this.dragged.bind(this))
                .on("end", this.dragended.bind(this)))
                .on('click', selectNode);

        this.circles = this.nodes
            .append("circle")
            .attr("r", 8)
            .attr("fill", d => this.color(d.group));

        this.labels = this.nodes
            .append("text")
{'fraction_non_alphanumeric': 0.1428844317096466, 'fraction_numerical': 0.007640878701050621, 'mean_word_length': 1.6768916155419222, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 9, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7151609', 'n_tokens_mistral': 1488, 'n_tokens_neox': 1430, 'n_words': 345}