Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/oussa29-dev/tpro_tp


https://github.com/oussa29-dev/tpro_tp

Last synced: about 1 month ago
JSON representation

Awesome Lists containing this project

README 

        
Script Explanation :



Let's break down the provided JavaScript code in detail, focusing on its purpose, structure, and functionality. This code appears to implement a graph visualization tool using the Vis.js library, specifically for calculating and displaying articulation points in a graph.

Code Breakdown



1. Initialization



javascript



const graph = {};

const nodes = new vis.DataSet();

const edges = new vis.DataSet();

const container = document.getElementById("network");



    const graph = {}: This initializes an empty object called graph, which will serve as an adjacency list to store the graph structure (nodes and their connections).



    const nodes = new vis.DataSet();: This creates a new Vis.js DataSet for the nodes of the graph. The DataSet will hold node objects, allowing easy addition, update, and deletion of nodes.



    const edges = new vis.DataSet();: Similar to nodes, this initializes a DataSet for the edges (connections) between the nodes.



    const container = document.getElementById("network");: This selects the HTML element with the ID "network", which will be used as the container for the graph visualization.



2. Network Configuration



javascript



const data = { nodes, edges };

const options = { 

    nodes: { shape: "dot", size: 15, color: "skyblue" }, 

    edges: { color: "gray" },

    physics: { enabled: true },

    interaction: { hover: true, dragNodes: true },

    manipulation: { enabled: true }

};

const network = new vis.Network(container, data, options);



    const data = { nodes, edges };: This creates an object containing the nodes and edges datasets for the graph.



    const options = { ... }: This object contains various configuration options for the graph visualization:

        nodes: Defines the visual properties of the nodes (shape, size, and color).

        edges: Sets the color of the edges.

        physics: Enables physics simulation, allowing nodes to be dragged and to repel or attract each other.

        interaction: Enables user interactions such as hovering and dragging nodes.

        manipulation: Allows users to manipulate the graph (add/remove nodes/edges).



    const network = new vis.Network(container, data, options);: This creates a new network visualization within the specified container using the defined data and options.



3. Adding Edges



javascript



function addEdge() {

    const u = document.getElementById("node1").value.trim();

    const v = document.getElementById("node2").value.trim();



    if (u && v) {

        if (!graph[u]) graph[u] = [];

        if (!graph[v]) graph[v] = [];

        graph[u].push(v);

        graph[v].push(u);



        nodes.update({ id: u, label: u });

        nodes.update({ id: v, label: v });

        edges.add({ from: u, to: v });



        document.getElementById("node1").value = "";

        document.getElementById("node2").value = "";

    } else {

        alert("Veuillez entrer les deux sommets.");

    }

}



    function addEdge(): This function is triggered to add an edge between two nodes.



    const u and const v: Retrieves and trims the input values for the two nodes from the HTML input fields (assumed to have IDs "node1" and "node2").



    Check for valid input: If both nodes are provided:

        It initializes the adjacency list for each node if it doesn’t exist.

        It adds an edge between the two nodes in the graph structure.



    Update Vis.js datasets:

        Updates the nodes dataset with the new nodes (creates if they don't exist).

        Adds the new edge to the edges dataset.



    Clear input fields: Resets the input fields for the next entry.



    Error handling: Alerts the user if either node is not provided.



4. Clearing the Graph



javascript



function clearGraph() {

    nodes.clear();

    edges.clear();

    Object.keys(graph).forEach(key => delete graph[key]);

    document.getElementById("articulationPointsList").innerHTML = "";

}



    function clearGraph(): Clears the entire graph, removing all nodes and edges.



    Clear datasets: Calls clear() on both the nodes and edges datasets.



    Reset the graph structure: Deletes all entries from the graph object.



    Clear displayed articulation points: Resets the list that shows articulation points (assumed to have the ID "articulationPointsList").



5. Finding Articulation Points



javascript



function findArticulationPoints() {

    const visited = {};

    const depth = {};

    const low = {};

    const parent = {};

    const articulationPoints = new Set();

    let time = 0;



    function dfs(u) {

        visited[u] = true;

        depth[u] = low[u] = ++time;

        let children = 0;



        for (const v of graph[u] || []) {

            if (!visited[v]) {

                parent[v] = u;

                children++;

                dfs(v);



                low[u] = Math.min(low[u], low[v]);

                if (parent[u] === undefined && children > 1) {

                    articulationPoints.add(u);

                }

                if (parent[u] !== undefined && low[v] >= depth[u]) {

                    articulationPoints.add(u);

                }

            } else if (v !== parent[u]) {

                low[u] = Math.min(low[u], depth[v]);

            }

        }

    }



    for (const node in graph) {

        if (!visited[node]) {

            dfs(node);

        }

    }



    displayArticulationPoints(articulationPoints);

    nodes.update(nodes.map(node => ({

        id: node.id,

        color: articulationPoints.has(node.id) ? "red" : "skyblue"

    })));

}



    function findArticulationPoints(): This function is responsible for calculating articulation points in the graph.



    Variable Initialization:

        visited: Tracks which nodes have been visited during DFS.

        depth: Stores the depth of each node during DFS.

        low: Helps find the lowest reachable node from a subtree.

        parent: Tracks the parent of each node in the DFS tree.

        articulationPoints: A set to store identified articulation points.

        let time = 0: A timer to assign depths to nodes.



    Depth-First Search (DFS):

        The inner dfs(u) function recursively visits nodes to identify articulation points.

        It updates the visited, depth, and low arrays.

        The function checks two conditions for articulation points:

            If the node is the root and has two or more children.

            If the lowest reachable vertex from the subtree is at least as deep as the node's depth.



    Running DFS: Iterates over all nodes in the graph, running DFS on unvisited nodes.



    Display Results: Calls displayArticulationPoints to show the found articulation points and updates node colors accordingly (red for articulation points, sky blue otherwise).



6. Displaying Articulation Points



javascript



function displayArticulationPoints(articulationPoints) {

    const list = document.getElementById("articulationPointsList");

    list.innerHTML = "";

    if (articulationPoints.size > 0) {

        articulationPoints.forEach(point => {

            const listItem = document.createElement("li");

            listItem.textContent = point;

            listItem.classList.add("result-item");

            list.appendChild(listItem);

        });

    } else {

        list.innerHTML = "
  • Aucun point d'articulation trouvé.
    • ";

        }

    }
    


        function displayArticulationPoints(articulationPoints): This function takes a set of articulation points and displays them in a list.
    


        Clearing the list: Resets the content of the articulationPointsList.
    


        Populating the list: If articulation points exist, it creates a list item for each point and appends it to the list.
    


        No articulation points: Displays a message if no articulation points were found.
    


    Summary
    


    This code provides a complete implementation for a graph visualization tool that allows users to add edges between nodes, clear the graph, and find and display articulation points. It leverages the Vis.js library for the visualization and includes user-friendly interaction features. The DFS-based algorithm is implemented to efficiently find articulation points, and the results are dynamically displayed to the user.