app.py

import streamlit as st #
import itertools as it
import matplotlib.pyplot as plt
import networkx as nx
import numpy as np
from operator import itemgetter
import math  # Import the math module
from matplotlib import animation
from mpl_toolkits.mplot3d import Axes3D
from streamlit.components.v1 import html
import matplotlib.colors as mpl
from PIL import Image

st.sidebar.markdown("""
        ### Courtesy: [NetworkX](https://networkx.org/documentation/stable/index.html)
    """)

# Sidebar for selecting an option
sidebar_option = st.sidebar.radio("Select Tutorial", 
                                 ["Introductory Tutorial", "Basic: Properties", 
                                  "Basic: Read and write graphs", "Basic: Simple graph", 
                                  "Basic: Simple graph Directed", "Drawing: Custom Node Position",
                                  "Drawing: Cluster Layout", "Drawing: Degree Analysis",
                                  "Drawing: Ego Graph", "Drawing: Eigenvalues", "Drawing: Four Grids",
                                  "Drawing: House With Colors", "Drawing: Labels And Colors", 
                                  "Drawing: Multipartite Layout", "Drawing: Node Colormap",
                                  "Drawing: Rainbow Coloring", "Drawing: Random Geometric Graph","Drawing: Self-loops",
                                  "Drawing: Simple Path", "Drawing: Spectral Embedding", "Drawing: Traveling Salesman Problem",
                                  "Drawing: Weighted Graph", "3D Drawing: Animations of 3D Rotation", "3D Drawing: Basic Matplotlib",
                                  "Graph: DAG - Topological Layout", "Graph: Erdos Renyi", "Graph: Karate Club", "Graph: Minimum Spanning Tree",
                                  "Graph: Triads", "Algorithms: Cycle Detection", "Algorithms: Greedy Coloring"])

# Add Contact information in the sidebar
st.sidebar.markdown("""
        ## Contact
    
        For any questions or issues, please contact:
    
        - **Email**: [[email protected]](mailto:[email protected])
        - **GitHub**: [Click here to access the Github Profile](https://github.com/shukdevtroy)
        - **WhatsApp**: [Click here to chat](https://wa.me/+8801719296601)
        - **HuggingFace Profile**: [Click here to access the HuggingFace Profile](https://huggingface.co/shukdevdatta123)
    """)

# st.sidebar.markdown("""
#         ### Courtesy: [NetworkX](https://networkx.org/documentation/stable/index.html)
#     """)
    

# Display content when "Select an option" is chosen
if sidebar_option == "Introductory Tutorial":
    st.title("Graph Visualization and Analysis Options")

    # Display a logo or icon
    image = Image.open("1.png")  # Path to your image file
    st.image(image, width=400)  # You can adjust the width as needed

    # Button to navigate to the external voice chat link
    if st.button("Go to Sorting Simulator"):
        st.write("Redirecting to Sorting Simulator...")  # You can customize this message
        st.markdown(f'<a href="https://shukdevdatta123-sorting-visualization.hf.space" target="_blank">Go to Sorting Simulator</a>', unsafe_allow_html=True)
    
    # Add content descriptions
    descriptions = [
        ("Basic: Properties", "This option provides insights into the foundational aspects of a graph. You can count nodes (individual points) and edges (connections between nodes). For example, in a graph representing a social network, the nodes could be people, and the edges could represent friendships. The degree distribution tells how many connections each node has, helping identify influential nodes."),
        ("Basic: Read and Write Graphs", "This feature lets you load graphs from files or save your current graph for later use. For instance, if you have a graph stored in a GML file, you can load it and analyze it in your program. Similarly, you can save graphs as adjacency lists or edge lists for portability."),
        ("Basic: Simple Graph", "This generates simple, undirected graphs where edges don’t have a direction. For example, a graph showing roads between cities where travel is possible in both directions. You can create specific structures like a star graph (one central hub) or a cycle graph (nodes connected in a loop)."),
        ("Basic: Simple Graph Directed", "Directed graphs have edges with a direction. They are useful for workflows or dependencies. For example, in a project plan, a directed graph might show tasks with arrows indicating the order in which they need to be completed."),
        ("Drawing: Custom Node Position", "This feature allows you to manually set where each node appears on the graph. For example, in a family tree, you might want to position nodes to reflect generational hierarchies rather than relying on an automatic layout."),
        ("Drawing: Cluster Layout", "Nodes are grouped into clusters based on their connections. For instance, in a network of social media users, this could highlight friend groups. Each group would appear as a tight cluster in the visualization."),
        ("Drawing: Degree Analysis", "This visualizes the connections (or degree) of nodes. For example, in a transportation network, hubs like airports can be highlighted because they have the highest degree, representing more connections to other nodes."),
        ("Drawing: Ego Graph", "Focuses on a single node and its immediate connections. For instance, if you want to see all direct friends of a specific person on a social network, this feature isolates that person and their relationships."),
        ("Drawing: Eigenvalues", "Eigenvalues come from the graph’s Laplacian matrix and reveal structural properties. For example, in community detection, eigenvalues can help identify clusters or measure the connectivity of a graph."),
        ("Drawing: House With Colors", "Displays a basic house graph, a simple structure that resembles a house. For example, you could use it for teaching graph theory basics, with color-coded nodes and edges representing different parts of the structure."),
        ("Drawing: Labels and Colors", "This lets you customize the appearance of nodes and edges by adding labels or colors. For example, in a roadmap, cities (nodes) can be color-coded by region, and roads (edges) can have labels for distance."),
        ("Drawing: Multipartite Layout", "Creates multipartite graphs where nodes are divided into layers, and edges only connect nodes from different layers. For instance, in a university, one layer could represent professors and another students, with edges indicating which professor teaches which student."),
        ("Drawing: Node Colormap", "Applies color gradients to nodes based on their properties, like degree or centrality. For example, nodes in a social network can be shaded to show influence, with darker colors for highly connected individuals."),
        ("Drawing: Rainbow Coloring", "This colorful feature assigns different colors to edges, helping differentiate them. For example, in a circular graph, this can show the relative positions of connections, making it visually appealing."),
        ("Drawing: Random Geometric Graph", "Generates graphs where nodes are connected if they’re within a specific distance. For example, in a wireless sensor network, nodes represent sensors, and edges show connectivity based on signal range."),
        ("Drawing: Self-loops", "Visualizes edges that start and end at the same node. For example, in a citation network, a self-loop could represent a researcher citing their previous work."),
        ("Drawing: Simple Path", "Displays simple linear graphs where nodes connect in a sequence. For example, it could represent a production line where each step depends on the previous one."),
        ("Drawing: Spectral Embedding", "Uses a mathematical technique to arrange nodes in a lower-dimensional space. For example, you can visualize clusters in a high-dimensional dataset in a way that preserves their relationships."),
        ("Drawing: Traveling Salesman Problem", "Visualizes solutions to the Traveling Salesman Problem (TSP), where the goal is to find the shortest route visiting every node once. For example, a delivery route optimization can use this to minimize travel costs."),
        ("Drawing: Weighted Graph", "Shows graphs with weighted edges. For example, in a flight network, edge weights can represent ticket prices or distances, with thicker edges for higher weights."),
        ("3D Drawing: Animations of 3D Rotation", "Generates 3D graphs with rotation animations. For example, you can visualize molecule structures or spatial relationships dynamically."),
        ("3D Drawing: Basic Matplotlib", "Creates 3D graph visualizations using Matplotlib, letting you explore spatial relationships. For example, you could map a city’s buildings in 3D space."),
        ("Graph: DAG - Topological Layout", "Displays Directed Acyclic Graphs (DAGs) in a topological order. For example, it can represent workflows or dependency graphs where tasks need to follow a sequence."),
        ("Graph: Erdos Renyi", "Generates random graphs where edges appear based on a probability. For example, you can model random connections in a network to study statistical properties."),
        ("Graph: Karate Club", "This graph is a classic benchmark in network science, showing relationships in a club. It’s often used for community detection and teaching graph analysis."),
        ("Graph: Minimum Spanning Tree", "Extracts a tree from the graph connecting all nodes with the minimum total edge weight. For example, this is used in network design to minimize cable or pipeline costs."),
        ("Graph: Triads", "Analyzes three-node structures (triads). For example, in social networks, closed triads (triangles) indicate strong relationships among three people."),
        ("Algorithms: Cycle Detection", "Detects cycles in graphs, useful for spotting feedback loops or circular dependencies. For example, in a dependency graph, it can help identify tasks that reference each other."),
        ("Algorithms: Greedy Coloring", "Colors nodes so that no two adjacent nodes share the same color. For example, in exam scheduling, this ensures no two overlapping exams are assigned the same room.")
    ]
    
    # for title, desc in descriptions:
    #     st.subheader(title)  # Removed the ### here
    #     st.write(desc)
    #     st.write("---")

    # Loop through the descriptions and create expanders
    for title, desc in descriptions:
        with st.expander(title):
            st.write(desc)

def plot_greedy_coloring(graph):
    # Apply greedy coloring
    graph_coloring = nx.greedy_color(graph)
    unique_colors = set(graph_coloring.values())

    # Assign colors to nodes based on the greedy coloring
    graph_color_to_mpl_color = dict(zip(unique_colors, mpl.TABLEAU_COLORS))
    node_colors = [graph_color_to_mpl_color[graph_coloring[n]] for n in graph.nodes()]

    # Layout of the graph
    pos = nx.spring_layout(graph, seed=14)

    # Draw the graph
    nx.draw(
        graph,
        pos,
        with_labels=True,
        node_size=500,
        node_color=node_colors,
        edge_color="grey",
        font_size=12,
        font_color="#333333",
        width=2,
    )

    plt.title("Greedy Coloring of Graph")
    st.pyplot(plt)

def algorithms_greedy_coloring():
    st.title("Algorithms: Greedy Coloring")

    # Option to choose between creating your own or using the default example
    graph_mode = st.radio(
        "Choose a Mode:",
        ("Default Example", "Create Your Own"),
        help="The default example shows a predefined graph, or you can create your own."
    )

    if graph_mode == "Default Example":
        # Create a predefined graph (Dodecahedral graph) for the greedy coloring example
        G = nx.dodecahedral_graph()
        st.write("Default Graph: Dodecahedral Graph with Greedy Coloring.")
        plot_greedy_coloring(G)

    elif graph_mode == "Create Your Own":
        st.write("### Create Your Own Graph")

        # Input for creating a custom graph
        nodes_input = st.text_area("Enter nodes (e.g., 1, 2, 3, 4):")
        edges_input = st.text_area("Enter edges (e.g., (1, 2), (2, 3), (3, 4)):").strip()

        if st.button("Generate Graph"):
            if nodes_input and edges_input:
                try:
                    # Clean and parse the input for nodes (strip spaces, remove empty strings)
                    nodes = [node.strip() for node in nodes_input.split(",") if node.strip()]
                    nodes = list(map(int, nodes))

                    # Clean and parse the input for edges (strip spaces and remove empty strings)
                    edges = [edge.strip() for edge in edges_input.split("),") if edge.strip()]
                    edges = [tuple(map(int, edge.strip("()").split(","))) for edge in edges]

                    G = nx.Graph()
                    G.add_nodes_from(nodes)
                    G.add_edges_from(edges)

                    st.write("Custom Graph:", G.edges())
                    plot_greedy_coloring(G)

                except Exception as e:
                    st.error(f"Error creating the graph: {e}")
            else:
                st.error("Please enter valid nodes and edges.")

if sidebar_option == "Algorithms: Greedy Coloring":
    algorithms_greedy_coloring()

# Helper function to draw and display graph
def draw_graph(G, pos=None, title="Graph Visualization"):
    plt.figure(figsize=(8, 6))
    nx.draw(G, pos=pos, with_labels=True, node_color='lightblue', node_size=500, font_size=10, font_weight='bold')
    st.pyplot(plt)

def plot_cycle_detection(graph):
    # Draw the graph
    pos = nx.spring_layout(graph, seed=8020)
    nx.draw(graph, pos, with_labels=True, node_size=2000, node_color="lightblue")

    # Find all cycles in the directed graph
    try:
        cycles = list(nx.simple_cycles(graph))
        if cycles:
            st.write("Cycles Detected:")
            for cycle in cycles:
                st.write(cycle)

            # Highlight each cycle in red
            for cycle in cycles:
                edges_in_cycle = [(cycle[i], cycle[i + 1] if i + 1 < len(cycle) else cycle[0]) for i in range(len(cycle))]
                nx.draw_networkx_edges(graph, pos, edgelist=edges_in_cycle, edge_color="r", width=2)
        else:
            st.write("No cycles detected")

    except Exception as e:
        st.error(f"Error detecting cycles: {e}")

    # Display the graph
    plt.title("Cycle Detection in Directed Graph")
    st.pyplot(plt)

def algorithms_cycle_detection():
    st.title("Algorithms: Cycle Detection")

    # Option to choose between creating your own or using the default example
    graph_mode = st.radio(
        "Choose a Mode:",
        ("Default Example", "Create Your Own"),
        help="The default example shows a predefined graph, or you can create your own."
    )

    if graph_mode == "Default Example":
        # Create a predefined graph with multiple cycles
        G = nx.DiGraph([(1, 2), (2, 3), (3, 4), (4, 2)])
        st.write("Default Graph: A simple directed graph with multiple cycles.")
        plot_cycle_detection(G)

    elif graph_mode == "Create Your Own":
        st.write("### Create Your Own Graph")

        # Input for creating custom graph
        edges_input = st.text_area("Enter directed edges (e.g., (1, 2), (2, 3), (3, 1), (3, 4)):").strip()

        if st.button("Generate Graph"):
            if edges_input:
                try:
                    edges = []
                    # Ensure correct formatting of the input string
                    edge_strings = edges_input.split("),")
                    for edge_str in edge_strings:
                        edge_str = edge_str.strip()
                        if edge_str:
                            # Handle the case where the edge might be missing a closing parenthesis
                            if edge_str[-1] != ")":
                                edge_str += ")"
                            # Remove the opening and closing parentheses
                            edge_tuple = edge_str.strip("()").split(",")
                            if len(edge_tuple) == 2:
                                try:
                                    # Safely convert to integers and add the edge
                                    edge_tuple = tuple(map(int, edge_tuple))
                                    edges.append(edge_tuple)
                                except ValueError:
                                    st.error(f"Invalid edge format: {edge_str}")
                                    return

                    if edges:
                        # Create the graph
                        G = nx.DiGraph(edges)
                        st.write("Custom Graph:", G.edges())
                        plot_cycle_detection(G)
                    else:
                        st.error("No valid edges provided.")
                except Exception as e:
                    st.error(f"Error creating the graph: {e}")
            else:
                st.error("Please enter valid directed edges.")

# Display the corresponding page based on sidebar option
if sidebar_option == "Algorithms: Cycle Detection":
    algorithms_cycle_detection()

def triads_graph():
    st.title("Graph: Triads")

    # Sidebar selection for Default Example or Custom Triads
    graph_mode = st.radio(
        "Choose a Mode:",
        ("Default Example", "Create Your Own"),
        help="Default example shows predefined triads, or you can create your own triads."
    )

    if graph_mode == "Default Example":
        # Define the triads
        triads = {
            "003": [],
            "012": [(1, 2)],
            "102": [(1, 2), (2, 1)],
            "021D": [(3, 1), (3, 2)],
            "021U": [(1, 3), (2, 3)],
            "021C": [(1, 3), (3, 2)],
            "111D": [(1, 2), (2, 1), (3, 1)],
            "111U": [(1, 2), (2, 1), (1, 3)],
            "030T": [(1, 2), (3, 2), (1, 3)],
            "030C": [(1, 3), (3, 2), (2, 1)],
            "201": [(1, 2), (2, 1), (3, 1), (1, 3)],
            "120D": [(1, 2), (2, 1), (3, 1), (3, 2)],
            "120U": [(1, 2), (2, 1), (1, 3), (2, 3)],
            "120C": [(1, 2), (2, 1), (1, 3), (3, 2)],
            "210": [(1, 2), (2, 1), (1, 3), (3, 2), (2, 3)],
            "300": [(1, 2), (2, 1), (2, 3), (3, 2), (1, 3), (3, 1)],
        }

        fig, axes = plt.subplots(4, 4, figsize=(10, 10))

        for (title, triad), ax in zip(triads.items(), axes.flatten()):
            G = nx.DiGraph()
            G.add_nodes_from([1, 2, 3])
            G.add_edges_from(triad)
            nx.draw_networkx(
                G,
                ax=ax,
                with_labels=True,  # Labels the vertices
                node_color=["green"],
                node_size=200,
                arrowsize=20,
                width=2,
                pos=nx.planar_layout(G),
            )
            ax.set_xlim(val * 1.2 for val in ax.get_xlim())
            ax.set_ylim(val * 1.2 for val in ax.get_ylim())
            ax.text(
                0,
                0,
                title,
                fontsize=15,
                fontweight="extra bold",
                horizontalalignment="center",
                bbox={"boxstyle": "square,pad=0.3", "fc": "none"},
            )
        fig.tight_layout()
        st.pyplot(fig)

    elif graph_mode == "Create Your Own":
        st.write("### Create Your Own Triads")

        # Input: Enter triads as a dictionary (e.g., {'triad_name': [(1, 2), (2, 1)]})
        triad_input = st.text_area(
            "Enter your triads in the format: {'triad_name': [(edge1), (edge2), ...]}",
            value="{'003': [], '012': [(1, 2)]}"
        )

        # Generate Button
        if st.button("Generate Graph"):
            # Try to evaluate the input as a dictionary of triads
            try:
                custom_triads = eval(triad_input)
                if isinstance(custom_triads, dict) and all(isinstance(value, list) and all(isinstance(edge, tuple) and len(edge) == 2 for edge in value) for value in custom_triads.values()):
                    fig, axes = plt.subplots(len(custom_triads), 1, figsize=(10, len(custom_triads) * 5))
                    if len(custom_triads) == 1:  # Handle case where only one triad is entered
                        axes = [axes]

                    for (title, triad), ax in zip(custom_triads.items(), axes):
                        G = nx.DiGraph()
                        G.add_nodes_from([1, 2, 3])
                        G.add_edges_from(triad)

                        nx.draw_networkx(
                            G,
                            ax=ax,
                            with_labels=True,  # Labels the vertices
                            node_color=["green"],
                            node_size=200,
                            arrowsize=20,
                            width=2,
                            pos=nx.planar_layout(G),
                        )
                        ax.set_xlim(val * 1.2 for val in ax.get_xlim())
                        ax.set_ylim(val * 1.2 for val in ax.get_ylim())
                        ax.text(
                            0,
                            0,
                            title,
                            fontsize=15,
                            fontweight="extra bold",
                            horizontalalignment="center",
                            bbox={"boxstyle": "square,pad=0.3", "fc": "none"},
                        )
                    fig.tight_layout()
                    st.pyplot(fig)
                else:
                    st.error("Invalid format. Please enter a dictionary of triads in the format {'triad_name': [(edge1), (edge2), ...]}.")
            except Exception as e:
                st.error(f"Error parsing input: {e}")

# Display the corresponding page based on sidebar option
if sidebar_option == "Graph: Triads":
    triads_graph()

def minimum_spanning_tree_graph():
    st.title("Graph: Minimum Spanning Tree")

    # Sidebar selection for Default Example or Custom Graph
    graph_mode = st.radio(
        "Choose a Mode:",
        ("Default Example", "Create Your Own"),
        help="Default example shows a graph and its minimum spanning tree, or you can create your own graph."
    )

    if graph_mode == "Default Example":
        # Create a default graph
        G = nx.Graph()
        G.add_edges_from(
            [
                (0, 1, {"weight": 4}),
                (0, 7, {"weight": 8}),
                (1, 7, {"weight": 11}),
                (1, 2, {"weight": 8}),
                (2, 8, {"weight": 2}),
                (2, 5, {"weight": 4}),
                (2, 3, {"weight": 7}),
                (3, 4, {"weight": 9}),
                (3, 5, {"weight": 14}),
                (4, 5, {"weight": 10}),
                (5, 6, {"weight": 2}),
                (6, 8, {"weight": 6}),
                (7, 8, {"weight": 7}),
            ]
        )

        # Find the minimum spanning tree
        T = nx.minimum_spanning_tree(G)

        # Visualize the graph and the minimum spanning tree
        pos = nx.spring_layout(G)
        fig, ax = plt.subplots(figsize=(8, 8))
        nx.draw_networkx_nodes(G, pos, node_color="lightblue", node_size=500, ax=ax)
        nx.draw_networkx_edges(G, pos, edge_color="grey", ax=ax)
        nx.draw_networkx_labels(G, pos, font_size=12, font_family="sans-serif", ax=ax)
        nx.draw_networkx_edge_labels(
            G, pos, edge_labels={(u, v): d["weight"] for u, v, d in G.edges(data=True)}, ax=ax
        )
        nx.draw_networkx_edges(T, pos, edge_color="green", width=2, ax=ax)
        ax.set_title("Graph and Minimum Spanning Tree")
        plt.axis("off")
        st.pyplot(fig)

    elif graph_mode == "Create Your Own":
        st.write("### Create Your Own Graph")

        # Allow user to input the number of nodes and edges for custom graph
        num_nodes = st.number_input("Number of nodes", min_value=2, value=5)
        num_edges = st.number_input("Number of edges", min_value=1, value=6)

        # Create empty graph
        G = nx.Graph()

        # Allow user to input the edges and their weights manually
        edges = []
        for i in range(num_edges):
            source = st.number_input(f"Source node for edge {i+1}", min_value=0, max_value=num_nodes-1, key=f"source_{i}")
            dest = st.number_input(f"Destination node for edge {i+1}", min_value=0, max_value=num_nodes-1, key=f"dest_{i}")
            weight = st.number_input(f"Weight for edge ({source}, {dest})", min_value=1, value=1, key=f"weight_{i}")
            edges.append((source, dest, {"weight": weight}))

        # Add edges to the graph
        G.add_edges_from(edges)

        # Add nodes to the graph (to ensure all nodes are included, even if not explicitly added by the user)
        G.add_nodes_from(range(num_nodes))

        # Button to generate the graph and calculate MST
        if st.button("Generate Graph"):
            # Find the minimum spanning tree
            T = nx.minimum_spanning_tree(G)

            # Visualize the graph and the minimum spanning tree
            pos = nx.spring_layout(G)
            fig, ax = plt.subplots(figsize=(8, 8))
            nx.draw_networkx_nodes(G, pos, node_color="lightblue", node_size=500, ax=ax)
            nx.draw_networkx_edges(G, pos, edge_color="grey", ax=ax)
            nx.draw_networkx_labels(G, pos, font_size=12, font_family="sans-serif", ax=ax)
            nx.draw_networkx_edge_labels(
                G, pos, edge_labels={(u, v): d["weight"] for u, v, d in G.edges(data=True)}, ax=ax
            )
            nx.draw_networkx_edges(T, pos, edge_color="green", width=2, ax=ax)
            ax.set_title("Custom Graph and Minimum Spanning Tree")
            plt.axis("off")
            st.pyplot(fig)

# Display the corresponding page based on sidebar option
if sidebar_option == "Graph: Minimum Spanning Tree":
    minimum_spanning_tree_graph()

def karate_club_graph():
    st.title("Graph: Karate Club")

    # Sidebar selection for Default Example or Custom Graph
    graph_mode = st.radio(
        "Choose a Mode:",
        ("Default Example", "Create Your Own"),
        help="Default example shows the Karate Club graph, or you can create your own graph."
    )

    if graph_mode == "Default Example":
        # Load the Karate Club graph
        G = nx.karate_club_graph()

        # Display node degree
        st.write("### Node Degree")
        for v in G:
            st.write(f"Node {v:4}: Degree = {G.degree(v)}")

        # Visualize the graph using circular layout
        st.write("### Graph Visualization")
        fig, ax = plt.subplots()
        nx.draw_circular(G, with_labels=True, ax=ax, node_color="skyblue", edge_color="gray")
        ax.set_title("Karate Club Graph")
        st.pyplot(fig)

    elif graph_mode == "Create Your Own":
        st.write("### Create Your Own Graph")

        # Allow user to input the number of nodes and edges for custom graph
        num_nodes = st.number_input("Number of nodes", min_value=2, value=10)
        num_edges = st.number_input("Number of edges", min_value=1, value=15)
        seed = st.number_input("Seed for Random Graph (optional)", value=20160)

        # Generate graph button
        if st.button("Generate Graph"):
            # Create random graph with user input
            G = nx.gnm_random_graph(num_nodes, num_edges, seed=seed)

            # Display node degree
            st.write("### Node Degree")
            for v in G:
                st.write(f"Node {v:4}: Degree = {G.degree(v)}")

            # Visualize the graph using circular layout
            st.write("### Graph Visualization")
            fig, ax = plt.subplots()
            nx.draw_circular(G, with_labels=True, ax=ax, node_color="lightgreen", edge_color="gray")
            ax.set_title("Custom Graph")
            st.pyplot(fig)

# Display the corresponding page based on sidebar option
if sidebar_option == "Graph: Karate Club":
    karate_club_graph()

def erdos_renyi_graph():
    st.title("Graph: Erdos Renyi")

    # Sidebar selection for Default Example or Custom Graph
    graph_mode = st.radio(
        "Choose a Mode:",
        ("Default Example", "Create Your Own"),
        help="Default example shows a random graph, or you can create your own Erdos-Renyi graph."
    )

    if graph_mode == "Default Example":
        # Default random graph parameters
        n = 10  # 10 nodes
        m = 20  # 20 edges
        seed = 20160  # seed random number generators for reproducibility

        # Create a button for generating the graph
        if st.button("Generate Graph"):
            # Create random graph
            G = nx.gnm_random_graph(n, m, seed=seed)

            # Display node properties
            st.write("### Node Degree and Clustering Coefficient")
            for v in nx.nodes(G):
                st.write(f"Node {v}: Degree = {nx.degree(G, v)}, Clustering Coefficient = {nx.clustering(G, v)}")

            # Display adjacency list
            st.write("### Adjacency List")
            adj_list = "\n".join([line for line in nx.generate_adjlist(G)])
            st.text(adj_list)

            # Visualize the graph
            pos = nx.spring_layout(G, seed=seed)  # Seed for reproducible layout
            fig, ax = plt.subplots()
            nx.draw(G, pos=pos, ax=ax, with_labels=True, node_color="skyblue", edge_color="gray")
            ax.set_title("Erdos-Renyi Random Graph")
            st.pyplot(fig)

    elif graph_mode == "Create Your Own":
        st.write("### Create Your Own Random Erdos-Renyi Graph")

        # Allow user to input the number of nodes and edges
        n = st.number_input("Number of nodes (n)", min_value=2, value=10)
        m = st.number_input("Number of edges (m)", min_value=1, value=20)

        seed = st.number_input("Seed", value=20160)

        # Create a button for generating the graph
        if st.button("Generate Graph"):
            # Create random graph
            G = nx.gnm_random_graph(n, m, seed=seed)

            # Display node properties
            st.write("### Node Degree and Clustering Coefficient")
            for v in nx.nodes(G):
                st.write(f"Node {v}: Degree = {nx.degree(G, v)}, Clustering Coefficient = {nx.clustering(G, v)}")

            # Display adjacency list
            st.write("### Adjacency List")
            adj_list = "\n".join([line for line in nx.generate_adjlist(G)])
            st.text(adj_list)

            # Visualize the graph
            pos = nx.spring_layout(G, seed=seed)  # Seed for reproducible layout
            fig, ax = plt.subplots()
            nx.draw(G, pos=pos, ax=ax, with_labels=True, node_color="skyblue", edge_color="gray")
            ax.set_title("Erdos-Renyi Random Graph")
            st.pyplot(fig)

# Display the corresponding page based on sidebar option
if sidebar_option == "Graph: Erdos Renyi":
    erdos_renyi_graph()

def dag_topological_layout():
    st.title("Graph: DAG - Topological Layout")

    # Sidebar selection for Default Example or Custom Graph
    graph_mode = st.radio(
        "Choose a Mode:",
        ("Default Example", "Create Your Own"),
        help="Default example shows DAG layout in topological order, or you can create your own DAG."
    )

    if graph_mode == "Default Example":
        # Default DAG example
        G = nx.DiGraph(
            [
                ("f", "a"),
                ("a", "b"),
                ("a", "e"),
                ("b", "c"),
                ("b", "d"),
                ("d", "e"),
                ("f", "c"),
                ("f", "g"),
                ("h", "f"),
            ]
        )

        # Add layer attribute for multipartite_layout
        for layer, nodes in enumerate(nx.topological_generations(G)):
            for node in nodes:
                G.nodes[node]["layer"] = layer

        # Compute the multipartite_layout using the "layer" node attribute
        pos = nx.multipartite_layout(G, subset_key="layer")

        # Draw the graph
        fig, ax = plt.subplots()
        nx.draw_networkx(G, pos=pos, ax=ax)
        ax.set_title("DAG layout in topological order")
        fig.tight_layout()
        st.pyplot(fig)

    elif graph_mode == "Create Your Own":
        st.write("### Custom DAG Creation")

        # Allow the user to input the number of nodes
        num_nodes = st.number_input("Enter the number of nodes", min_value=2, value=5)

        # Create node names based on the number of nodes
        nodes = [str(i) for i in range(num_nodes)]

        st.write(f"### Nodes: {nodes}")
        st.write("#### Add Edges between Nodes")

        # Allow the user to select pairs of nodes to add edges
        edges = []
        for i in range(num_nodes):
            for j in range(i + 1, num_nodes):
                edge = (nodes[i], nodes[j])
                if st.checkbox(f"Add edge from {edge[0]} to {edge[1]}", value=False):
                    edges.append(edge)

        # Create the custom DAG
        G_custom = nx.DiGraph()
        G_custom.add_edges_from(edges)

        # Add layer attribute for multipartite_layout
        for layer, nodes in enumerate(nx.topological_generations(G_custom)):
            for node in nodes:
                G_custom.nodes[node]["layer"] = layer

        # Compute the multipartite_layout using the "layer" node attribute
        pos_custom = nx.multipartite_layout(G_custom, subset_key="layer")

        # Draw the custom DAG
        fig_custom, ax_custom = plt.subplots()
        nx.draw_networkx(G_custom, pos=pos_custom, ax=ax_custom)
        ax_custom.set_title("Custom DAG layout in topological order")
        fig_custom.tight_layout()
        st.pyplot(fig_custom)

# Display the corresponding page based on sidebar option
if sidebar_option == "Graph: DAG - Topological Layout":
    dag_topological_layout()

if sidebar_option == "3D Drawing: Animations of 3D Rotation":
    st.title("3D Drawing: Animations of 3D Rotation")

    # Provide options for Default Example or Custom Graph
    graph_mode = st.radio(
        "Choose a Mode:",
        ("Default Example", "Create Your Own"),
        help="Default example shows a dodecahedral graph, or you can create your own custom graph."
    )

    # Define the function to create animation
    def generate_animation(G, pos, frames=100):
        nodes = np.array([pos[v] for v in G])
        edges = np.array([(pos[u], pos[v]) for u, v in G.edges()])

        fig = plt.figure()
        ax = fig.add_subplot(111, projection="3d")

        def init():
            ax.scatter(*nodes.T, alpha=0.2, s=100, color="blue")
            for vizedge in edges:
                ax.plot(*vizedge.T, color="gray")
            ax.grid(False)
            ax.set_axis_off()
            plt.tight_layout()
            return

        def _frame_update(index):
            ax.view_init(index * 0.2, index * 0.5)
            return

        ani = animation.FuncAnimation(
            fig,
            _frame_update,
            init_func=init,
            interval=50,
            cache_frame_data=False,
            frames=frames,
        )

        return ani

    # Default Example
    if graph_mode == "Default Example":
        G = nx.dodecahedral_graph()
        pos = nx.spectral_layout(G, dim=3)
        ani = generate_animation(G, pos)

    # Create Your Own Example
    else:
        st.write("### Customize Your Graph")
        num_nodes = st.slider("Number of Nodes", min_value=5, max_value=50, value=20)
        edge_prob = st.slider("Edge Probability", min_value=0.1, max_value=1.0, value=0.3)
        
        # Generate custom graph
        G = nx.erdos_renyi_graph(num_nodes, edge_prob)
        pos = nx.spectral_layout(G, dim=3)
        ani = generate_animation(G, pos)

    # Display animation in Streamlit
    with st.spinner("Rendering animation..."):
        ani.save("animation.gif", writer="imagemagick")
        st.image("animation.gif", caption="3D Graph Rotation", use_container_width=True)

# Default example code
def default_example():
    G = nx.cycle_graph(20)

    # 3d spring layout
    pos = nx.spring_layout(G, dim=3, seed=779)
    # Extract node and edge positions from the layout
    node_xyz = np.array([pos[v] for v in sorted(G)])
    edge_xyz = np.array([(pos[u], pos[v]) for u, v in G.edges()])

    # Create the 3D figure
    fig = plt.figure()
    ax = fig.add_subplot(111, projection="3d")

    # Plot the nodes - alpha is scaled by "depth" automatically
    ax.scatter(*node_xyz.T, s=100, ec="w")

    # Plot the edges
    for vizedge in edge_xyz:
        ax.plot(*vizedge.T, color="tab:gray")

    def _format_axes(ax):
        """Visualization options for the 3D axes."""
        # Turn gridlines off
        ax.grid(False)
        # Suppress tick labels
        for dim in (ax.xaxis, ax.yaxis, ax.zaxis):
            dim.set_ticks([]) 
        # Set axes labels
        ax.set_xlabel("x")
        ax.set_ylabel("y")
        ax.set_zlabel("z")

    _format_axes(ax)
    fig.tight_layout()
    st.pyplot(fig)

# Create your own graph option
def create_own_graph():
    # Input fields to customize the graph
    nodes = st.number_input("Number of nodes", min_value=2, max_value=50, value=20)
    seed = st.number_input("Seed for layout", value=779)
    
    # Add a button to generate the graph
    generate_button = st.button("Generate Graph")

    if generate_button:
        # Generate graph and layout
        G = nx.cycle_graph(nodes)
        pos = nx.spring_layout(G, dim=3, seed=seed)
        
        # Extract node and edge positions
        node_xyz = np.array([pos[v] for v in sorted(G)])
        edge_xyz = np.array([(pos[u], pos[v]) for u, v in G.edges()])

        # Create the 3D figure
        fig = plt.figure()
        ax = fig.add_subplot(111, projection="3d")

        # Plot the nodes
        ax.scatter(*node_xyz.T, s=100, ec="w")

        # Plot the edges
        for vizedge in edge_xyz:
            ax.plot(*vizedge.T, color="tab:gray")

        def _format_axes(ax):
            """Visualization options for the 3D axes."""
            ax.grid(False)
            for dim in (ax.xaxis, ax.yaxis, ax.zaxis):
                dim.set_ticks([])
            ax.set_xlabel("x")
            ax.set_ylabel("y")
            ax.set_zlabel("z")

        _format_axes(ax)
        fig.tight_layout()
        st.pyplot(fig)

if sidebar_option == "3D Drawing: Basic Matplotlib":
    st.title("3D Drawing: Basic Matplotlib")

    # Provide options for Default Example or Custom Graph
    graph_mode = st.radio(
        "Choose a Mode:",
        ("Default Example", "Create Your Own"),
        help="Default example shows a cycle graph, or you can create your own custom graph."
    )

    # Display the chosen option
    if graph_mode == "Default Example":
        default_example()
    elif graph_mode == "Create Your Own":
        create_own_graph()

# Function to display Weighted Graph
def display_weighted_graph():
    st.title("Drawing: Weighted Graph")

    option = st.radio("Choose a graph type:", ("Default Example", "Create your own"))

    if option == "Default Example":
        # Default weighted graph example
        G = nx.Graph()

        G.add_edge("a", "b", weight=0.6)
        G.add_edge("a", "c", weight=0.2)
        G.add_edge("c", "d", weight=0.1)
        G.add_edge("c", "e", weight=0.7)
        G.add_edge("c", "f", weight=0.9)
        G.add_edge("a", "d", weight=0.3)

        elarge = [(u, v) for (u, v, d) in G.edges(data=True) if d["weight"] > 0.5]
        esmall = [(u, v) for (u, v, d) in G.edges(data=True) if d["weight"] <= 0.5]

        pos = nx.spring_layout(G, seed=7)  # positions for all nodes - seed for reproducibility

        # nodes
        nx.draw_networkx_nodes(G, pos, node_size=700)

        # edges
        nx.draw_networkx_edges(G, pos, edgelist=elarge, width=6)
        nx.draw_networkx_edges(
            G, pos, edgelist=esmall, width=6, alpha=0.5, edge_color="b", style="dashed"
        )

        # node labels
        nx.draw_networkx_labels(G, pos, font_size=20, font_family="sans-serif")
        # edge weight labels
        edge_labels = nx.get_edge_attributes(G, "weight")
        nx.draw_networkx_edge_labels(G, pos, edge_labels)

        ax = plt.gca()
        ax.margins(0.08)
        plt.axis("off")
        plt.tight_layout()
        st.pyplot(plt)

    elif option == "Create your own":
        # User can create their own graph with edges and weights
        edge_input = st.text_area(
            "Enter edges with weights (format: node1,node2,weight;node1,node2,weight;...)",
            "a,b,0.6;a,c,0.2;c,d,0.1;c,e,0.7;c,f,0.9;a,d,0.3"
        )

        # Parse the input string
        edges = edge_input.split(";")
        edge_list = []
        for edge in edges:
            node1, node2, weight = edge.split(",")
            edge_list.append((node1.strip(), node2.strip(), float(weight.strip())))

        # Add a button to generate the graph
        generate_button = st.button("Generate Graph")

        if generate_button:
            G_custom = nx.Graph()

            # Add edges to the graph
            for node1, node2, weight in edge_list:
                G_custom.add_edge(node1, node2, weight=weight)

            # Create layout for visualization
            pos = nx.spring_layout(G_custom, seed=7)

            # Determine edges based on weight
            elarge = [(u, v) for (u, v, d) in G_custom.edges(data=True) if d["weight"] > 0.5]
            esmall = [(u, v) for (u, v, d) in G_custom.edges(data=True) if d["weight"] <= 0.5]

            # Draw the graph
            nx.draw_networkx_nodes(G_custom, pos, node_size=700)
            nx.draw_networkx_edges(G_custom, pos, edgelist=elarge, width=6)
            nx.draw_networkx_edges(
                G_custom, pos, edgelist=esmall, width=6, alpha=0.5, edge_color="b", style="dashed"
            )
            nx.draw_networkx_labels(G_custom, pos, font_size=20, font_family="sans-serif")
            edge_labels = nx.get_edge_attributes(G_custom, "weight")
            nx.draw_networkx_edge_labels(G_custom, pos, edge_labels)

            ax = plt.gca()
            ax.margins(0.08)
            plt.axis("off")
            plt.tight_layout()
            st.pyplot(plt)

# Display Drawing: Weighted Graph if selected
if sidebar_option == "Drawing: Weighted Graph":
    display_weighted_graph()

from networkx.algorithms.approximation import christofides

# Function to display Traveling Salesman Problem
def display_tsp():
    st.title("Drawing: Traveling Salesman Problem")

    option = st.radio("Choose a graph type:", ("Default Example", "Create your own"))

    if option == "Default Example":
        # Default example of random geometric graph with TSP solution
        G = nx.random_geometric_graph(20, radius=0.4, seed=3)
        pos = nx.get_node_attributes(G, "pos")

        # Depot should be at (0.5, 0.5)
        pos[0] = (0.5, 0.5)

        H = G.copy()

        # Calculating the distances between the nodes as edge's weight.
        for i in range(len(pos)):
            for j in range(i + 1, len(pos)):
                dist = math.hypot(pos[i][0] - pos[j][0], pos[i][1] - pos[j][1])
                dist = dist
                G.add_edge(i, j, weight=dist)

        # Find TSP cycle using Christofides' approximation
        cycle = christofides(G, weight="weight")
        edge_list = list(nx.utils.pairwise(cycle))

        # Draw closest edges on each node only
        nx.draw_networkx_edges(H, pos, edge_color="blue", width=0.5)

        # Draw the route
        nx.draw_networkx(
            G,
            pos,
            with_labels=True,
            edgelist=edge_list,
            edge_color="red",
            node_size=200,
            width=3,
        )

        st.pyplot(plt)
        st.write("The route of the traveler is:", cycle)

    elif option == "Create your own":
        # User can create their own graph
        num_nodes = st.slider("Number of nodes:", min_value=3, max_value=30, value=20)
        radius = st.slider("Edge radius:", min_value=0.1, max_value=1.0, value=0.4)

        # Add a button to generate a new graph
        generate_button = st.button("Generate Graph")

        if generate_button:
            # Create random geometric graph based on user input
            G_custom = nx.random_geometric_graph(num_nodes, radius, seed=3)
            pos = nx.get_node_attributes(G_custom, "pos")

            # Depot should be at (0.5, 0.5)
            pos[0] = (0.5, 0.5)

            H = G_custom.copy()

            # Calculating the distances between the nodes as edge's weight.
            for i in range(len(pos)):
                for j in range(i + 1, len(pos)):
                    dist = math.hypot(pos[i][0] - pos[j][0], pos[i][1] - pos[j][1])
                    dist = dist
                    G_custom.add_edge(i, j, weight=dist)

            # Find TSP cycle using Christofides' approximation
            cycle = christofides(G_custom, weight="weight")
            edge_list = list(nx.utils.pairwise(cycle))

            # Draw closest edges on each node only
            nx.draw_networkx_edges(H, pos, edge_color="blue", width=0.5)

            # Draw the TSP route
            nx.draw_networkx(
                G_custom,
                pos,
                with_labels=True,
                edgelist=edge_list,
                edge_color="red",
                node_size=200,
                width=3,
            )

            st.pyplot(plt)
            st.write("The route of the traveler is:", cycle)

# Display Drawing: Traveling Salesman Problem if selected
if sidebar_option == "Drawing: Traveling Salesman Problem":
    display_tsp()

# Function to display Drawing: Spectral Embedding
def display_spectral_embedding():
    st.title("Drawing: Spectral Embedding")

    option = st.radio("Choose a graph type:", ("Default Example", "Create your own"))

    if option == "Default Example":
        # Default example of spectral embedding with a grid graph
        options = {"node_color": "C0", "node_size": 100}  # No labels
        G = nx.grid_2d_graph(6, 6)

        fig, axs = plt.subplots(3, 3, figsize=(12, 12))
        axs = axs.flatten()

        for i in range(7):  # Looping over 7 images
            if i == 0:
                nx.draw_spectral(G, **options, ax=axs[i])
            elif i == 1:
                G.remove_edge((2, 2), (2, 3))
                nx.draw_spectral(G, **options, ax=axs[i])
            elif i == 2:
                G.remove_edge((3, 2), (3, 3))
                nx.draw_spectral(G, **options, ax=axs[i])
            elif i == 3:
                G.remove_edge((2, 2), (3, 2))
                nx.draw_spectral(G, **options, ax=axs[i])
            elif i == 4:
                G.remove_edge((2, 3), (3, 3))
                nx.draw_spectral(G, **options, ax=axs[i])
            elif i == 5:
                G.remove_edge((1, 2), (1, 3))
                nx.draw_spectral(G, **options, ax=axs[i])
            elif i == 6:
                G.remove_edge((4, 2), (4, 3))
                nx.draw_spectral(G, **options, ax=axs[i])

        # Hide the last two subplots (8th and 9th)
        for j in range(7, 9):
            fig.delaxes(axs[j])  # Delete the extra axes

        st.pyplot(fig)

    elif option == "Create your own":
        # User can interactively modify the grid and see the results
        grid_size = st.slider("Choose grid size (n x n):", min_value=3, max_value=10, value=6)
        G_custom = nx.grid_2d_graph(grid_size, grid_size)

        # List all edges to allow removal
        all_edges = list(G_custom.edges())

        # Collect user input for edges to remove (before showing the "Generate" button)
        selected_edges_per_graph = []
        for i in range(7):  # Loop over 7 graphs
            selected_edges = st.multiselect(f"Select edges to remove for graph {i+1}:",
                                            options=[str(edge) for edge in all_edges])
            selected_edges_per_graph.append(selected_edges)

        # Add "Generate" button after edge selection
        generate_button = st.button("Generate Graph")

        if generate_button:
            fig, axs = plt.subplots(3, 3, figsize=(12, 12))
            axs = axs.flatten()

            # Loop through each subplot and allow edge removal individually
            for i in range(7):  # Loop over 7 graphs
                edges_to_remove = [tuple(eval(edge)) for edge in selected_edges_per_graph[i]]

                # Remove the selected edges
                G_custom_copy = G_custom.copy()
                G_custom_copy.remove_edges_from(edges_to_remove)

                # Draw the graph with removed edges
                nx.draw_spectral(G_custom_copy, **{"node_color": "C0", "node_size": 100}, ax=axs[i])

            # Hide the last two subplots (8th and 9th)
            for j in range(7, 9):
                fig.delaxes(axs[j])  # Delete the extra axes

            st.pyplot(fig)

# Display Drawing: Spectral Embedding if selected
if sidebar_option == "Drawing: Spectral Embedding":
    display_spectral_embedding()

# Function to display Drawing: Simple Path
def display_simple_path():
    st.title("Drawing: Simple Path")

    option = st.radio("Choose a graph type:", ("Default Example", "Create your own"))

    if option == "Default Example":
        # Default example of a simple path graph
        G = nx.path_graph(8)
        pos = nx.spring_layout(G, seed=47)  # Seed layout for reproducibility

        # Draw the graph
        nx.draw(G, pos=pos)
        st.pyplot(plt)

    elif option == "Create your own":
        # User can create their own path graph with a custom number of nodes
        num_nodes = st.number_input("Number of nodes in the path:", min_value=2, max_value=50, value=8)

        if st.button("Generate Graph"):
            # Generate a path graph with user-specified number of nodes
            G_custom = nx.path_graph(num_nodes)
            pos = nx.spring_layout(G_custom, seed=47)  # Seed layout for reproducibility

            # Draw the graph
            nx.draw(G_custom, pos=pos)
            st.pyplot(plt)

# Display Drawing: Simple Path if selected
if sidebar_option == "Drawing: Simple Path":
    display_simple_path()

# Function to display Drawing: Self-loops
def display_self_loops():
    st.title("Drawing: Self-loops")

    option = st.radio("Choose a graph type:", ("Default Example", "Create your own"))

    if option == "Default Example":
        # Default example of a graph with self-loops
        G = nx.complete_graph(3, create_using=nx.DiGraph)
        G.add_edge(0, 0)  # Add a self-loop to node 0
        pos = nx.circular_layout(G)

        # Draw the graph
        nx.draw(G, pos, with_labels=True)

        # Add self-loops to the remaining nodes
        edgelist = [(1, 1), (2, 2)]
        G.add_edges_from(edgelist)

        # Draw the newly added self-loops with different formatting
        nx.draw_networkx_edges(G, pos, edgelist=edgelist, arrowstyle="<|-", style="dashed")
        st.pyplot(plt)

    elif option == "Create your own":
        # User can create their own graph with self-loops
        num_nodes = st.number_input("Number of nodes:", min_value=2, max_value=20, value=3)
        add_self_loops = st.checkbox("Add self-loops to all nodes?", value=True)

        if st.button("Generate Graph"):
            # Generate a complete graph
            G = nx.complete_graph(num_nodes, create_using=nx.DiGraph)
            
            # Optionally add self-loops to all nodes
            if add_self_loops:
                for node in G.nodes():
                    G.add_edge(node, node)

            pos = nx.circular_layout(G)
            
            # Draw the graph with self-loops
            nx.draw(G, pos, with_labels=True)

            # Style self-loops differently
            edgelist = [(node, node) for node in G.nodes()]
            nx.draw_networkx_edges(G, pos, edgelist=edgelist, arrowstyle="<|-", style="dashed")
            st.pyplot(plt)

# Display Drawing: Self-loops if selected
if sidebar_option == "Drawing: Self-loops":
    display_self_loops()

# Function to display Drawing: Random Geometric Graph
def display_random_geometric_graph():
    st.title("Drawing: Random Geometric Graph")

    option = st.radio("Choose a graph type:", ("Default Example", "Create your own"))

    if option == "Default Example":
        # Default random geometric graph example
        G = nx.random_geometric_graph(200, 0.125, seed=896803)
        pos = nx.get_node_attributes(G, "pos")

        # Find node near the center (0.5, 0.5)
        dmin = 1
        ncenter = 0
        for n in pos:
            x, y = pos[n]
            d = (x - 0.5) ** 2 + (y - 0.5) ** 2
            if d < dmin:
                ncenter = n
                dmin = d

        # Color by path length from node near center
        p = dict(nx.single_source_shortest_path_length(G, ncenter))

        plt.figure(figsize=(8, 8))
        nx.draw_networkx_edges(G, pos, alpha=0.4)
        nx.draw_networkx_nodes(
            G,
            pos,
            nodelist=list(p.keys()),
            node_size=80,
            node_color=list(p.values()),
            cmap=plt.cm.Reds_r,
        )

        plt.xlim(-0.05, 1.05)
        plt.ylim(-0.05, 1.05)
        plt.axis("off")
        st.pyplot(plt)

    elif option == "Create your own":
        # User can create their own random geometric graph
        num_nodes = st.number_input("Number of nodes:", min_value=2, max_value=500, value=200)
        distance = st.slider("Edge distance threshold (between 0 and 1):", 0.01, 1.0, 0.125)

        if st.button("Generate Graph"):
            # Generate the graph with user input
            G = nx.random_geometric_graph(num_nodes, distance, seed=896803)
            pos = nx.get_node_attributes(G, "pos")

            # Find node near the center (0.5, 0.5)
            dmin = 1
            ncenter = 0
            for n in pos:
                x, y = pos[n]
                d = (x - 0.5) ** 2 + (y - 0.5) ** 2
                if d < dmin:
                    ncenter = n
                    dmin = d

            # Color by path length from node near center
            p = dict(nx.single_source_shortest_path_length(G, ncenter))

            plt.figure(figsize=(8, 8))
            nx.draw_networkx_edges(G, pos, alpha=0.4)
            nx.draw_networkx_nodes(
                G,
                pos,
                nodelist=list(p.keys()),
                node_size=80,
                node_color=list(p.values()),
                cmap=plt.cm.Reds_r,
            )

            plt.xlim(-0.05, 1.05)
            plt.ylim(-0.05, 1.05)
            plt.axis("off")
            st.pyplot(plt)

# Display Drawing: Random Geometric Graph if selected
if sidebar_option == "Drawing: Random Geometric Graph":
    display_random_geometric_graph()

# Function to display Drawing: Rainbow Coloring
def display_rainbow_coloring():
    st.title("Drawing: Rainbow Coloring")

    option = st.radio("Choose a graph type:", ("Default Example", "Create your own"))

    if option == "Default Example":
        # Rainbow Coloring with default parameters
        node_dist_to_color = {
            1: "tab:red",
            2: "tab:orange",
            3: "tab:olive",
            4: "tab:green",
            5: "tab:blue",
            6: "tab:purple",
        }

        nnodes = 13
        G = nx.complete_graph(nnodes)

        n = (nnodes - 1) // 2
        ndist_iter = list(range(1, n + 1))
        ndist_iter += ndist_iter[::-1]

        def cycle(nlist, n):
            return nlist[-n:] + nlist[:-n]

        nodes = list(G.nodes())
        for i, nd in enumerate(ndist_iter):
            for u, v in zip(nodes, cycle(nodes, i + 1)):
                G[u][v]["color"] = node_dist_to_color[nd]

        pos = nx.circular_layout(G)
        # Create a figure with 1:1 aspect ratio to preserve the circle.
        fig, ax = plt.subplots(figsize=(8, 8))
        node_opts = {"node_size": 500, "node_color": "w", "edgecolors": "k", "linewidths": 2.0}
        nx.draw_networkx_nodes(G, pos, **node_opts)
        nx.draw_networkx_labels(G, pos, font_size=14)
        # Extract color from edge data
        edge_colors = [edgedata["color"] for _, _, edgedata in G.edges(data=True)]
        nx.draw_networkx_edges(G, pos, width=2.0, edge_color=edge_colors)

        ax.set_axis_off()
        fig.tight_layout()
        st.pyplot(plt)

    elif option == "Create your own":
        nnodes = st.number_input("Number of nodes (max=14):", min_value=2, max_value=50, value=13)
        
        # Allow users to create their own color map
        red = st.color_picker("Select a color for Red (1)", "#ff0000")
        orange = st.color_picker("Select a color for Orange (2)", "#ff7f00")
        olive = st.color_picker("Select a color for Olive (3)", "#808000")
        green = st.color_picker("Select a color for Green (4)", "#008000")
        blue = st.color_picker("Select a color for Blue (5)", "#0000ff")
        purple = st.color_picker("Select a color for Purple (6)", "#800080")
        
        node_dist_to_color = {
            1: red,
            2: orange,
            3: olive,
            4: green,
            5: blue,
            6: purple,
        }

        if st.button("Generate Graph"):
            G = nx.complete_graph(nnodes)

            n = (nnodes - 1) // 2
            ndist_iter = list(range(1, n + 1))
            ndist_iter += ndist_iter[::-1]

            def cycle(nlist, n):
                return nlist[-n:] + nlist[:-n]

            nodes = list(G.nodes())
            for i, nd in enumerate(ndist_iter):
                for u, v in zip(nodes, cycle(nodes, i + 1)):
                    G[u][v]["color"] = node_dist_to_color[nd]

            pos = nx.circular_layout(G)
            # Create a figure with 1:1 aspect ratio to preserve the circle.
            fig, ax = plt.subplots(figsize=(8, 8))
            node_opts = {"node_size": 500, "node_color": "w", "edgecolors": "k", "linewidths": 2.0}
            nx.draw_networkx_nodes(G, pos, **node_opts)
            nx.draw_networkx_labels(G, pos, font_size=14)
            # Extract color from edge data
            edge_colors = [edgedata["color"] for _, _, edgedata in G.edges(data=True)]
            nx.draw_networkx_edges(G, pos, width=2.0, edge_color=edge_colors)

            ax.set_axis_off()
            fig.tight_layout()
            st.pyplot(plt)

# Display Drawing: Rainbow Coloring if selected
if sidebar_option == "Drawing: Rainbow Coloring":
    display_rainbow_coloring()

# Function to display Drawing: Node Colormap
def display_node_colormap():
    st.title("Drawing: Node Colormap")

    option = st.radio("Choose a graph type:", ("Default Example", "Create your own"))

    if option == "Default Example":
        G = nx.cycle_graph(24)
        pos = nx.circular_layout(G)
        nx.draw(G, pos, node_color=range(24), node_size=800, cmap=plt.cm.Blues)
        st.pyplot(plt)

    elif option == "Create your own":
        num_nodes = st.number_input("Number of nodes:", min_value=2, max_value=100, value=24)
        color_map = st.selectbox("Select a colormap:", plt.colormaps(), index=plt.colormaps().index('Blues'))

        if st.button("Generate Graph"):
            # Create cycle graph with custom number of nodes
            G_custom = nx.cycle_graph(num_nodes)
            pos = nx.circular_layout(G_custom)
            nx.draw(G_custom, pos, node_color=range(num_nodes), node_size=800, cmap=plt.get_cmap(color_map))
            st.pyplot(plt)

# Display Drawing: Node Colormap if selected
if sidebar_option == "Drawing: Node Colormap":
    display_node_colormap()

# Function to create a multipartite graph
def multilayered_graph(*subset_sizes):
    G = nx.Graph()
    layers = len(subset_sizes)
    node_id = 0

    # Create nodes for each subset and add edges between nodes in adjacent layers
    for i, size in enumerate(subset_sizes):
        for j in range(size):
            G.add_node(node_id, layer=i)  # Assign a layer attribute
            node_id += 1

    # Add edges between nodes in adjacent layers
    node_ids = list(G.nodes())
    for i in range(layers - 1):
        layer_nodes = [node for node in node_ids if G.nodes[node]["layer"] == i]
        next_layer_nodes = [node for node in node_ids if G.nodes[node]["layer"] == i + 1]
        for node in layer_nodes:
            for next_node in next_layer_nodes:
                G.add_edge(node, next_node)

    return G

# Function to display Multipartite Layout
def display_multipartite_layout():
    st.title("Drawing: Multipartite Layout")

    option = st.radio("Choose a graph type:", ("Default Example", "Create your own"))

    if option == "Default Example":
        subset_sizes = [5, 5, 4, 3, 2, 4, 4, 3]
        subset_color = [
            "gold", "violet", "violet", "violet", "violet", 
            "limegreen", "limegreen", "darkorange"
        ]
        
        # Generate and plot multipartite graph
        G = multilayered_graph(*subset_sizes)
        color = [subset_color[data["layer"]] for v, data in G.nodes(data=True)]
        pos = nx.multipartite_layout(G, subset_key="layer")
        
        plt.figure(figsize=(8, 8))
        nx.draw(G, pos, node_color=color, with_labels=False)
        plt.axis("equal")
        st.pyplot(plt)

    elif option == "Create your own":
        # Let the user input the subset sizes and colors
        st.write("Enter the subset sizes and colors to create your own multipartite graph.")

        subset_sizes_input = st.text_area("Enter subset sizes (comma-separated, e.g., 5,5,4,3):", value="5,5,4,3,2,4,4,3")
        subset_sizes = list(map(int, subset_sizes_input.split(',')))

        subset_colors_input = st.text_area("Enter subset colors (comma-separated, e.g., gold,violet,green):", value="gold,violet,violet,violet,violet,limegreen,limegreen,darkorange")
        subset_colors = subset_colors_input.split(',')

        # Check if the number of colors matches the number of subsets
        if len(subset_sizes) != len(subset_colors):
            st.error("The number of colors should match the number of subsets.")
        else:
            # Add a button to generate the graph
            if st.button("Generate Graph"):
                # Generate and plot multipartite graph
                G = multilayered_graph(*subset_sizes)
                color = [subset_colors[data["layer"]] for v, data in G.nodes(data=True)]
                pos = nx.multipartite_layout(G, subset_key="layer")
                
                plt.figure(figsize=(8, 8))
                nx.draw(G, pos, node_color=color, with_labels=False)
                plt.axis("equal")
                st.pyplot(plt)

# Display Drawing: Multipartite Layout if selected
if sidebar_option == "Drawing: Multipartite Layout":
    display_multipartite_layout()

# Function to display Labels and Colors
def display_labels_and_colors():
    st.title("Drawing: Labels And Colors")

    option = st.radio("Choose a graph type:", ("Default Example", "Create your own"))

    if option == "Default Example":
        # Create a cubical graph
        G = nx.cubical_graph()
        pos = nx.spring_layout(G, seed=3113794652)  # positions for all nodes

        # Draw nodes with different colors
        options = {"edgecolors": "tab:gray", "node_size": 800, "alpha": 0.9}
        nx.draw_networkx_nodes(G, pos, nodelist=[0, 1, 2, 3], node_color="tab:red", **options)
        nx.draw_networkx_nodes(G, pos, nodelist=[4, 5, 6, 7], node_color="tab:blue", **options)

        # Draw edges
        nx.draw_networkx_edges(G, pos, width=1.0, alpha=0.5)
        nx.draw_networkx_edges(
            G,
            pos,
            edgelist=[(0, 1), (1, 2), (2, 3), (3, 0)],
            width=8,
            alpha=0.5,
            edge_color="tab:red",
        )
        nx.draw_networkx_edges(
            G,
            pos,
            edgelist=[(4, 5), (5, 6), (6, 7), (7, 4)],
            width=8,
            alpha=0.5,
            edge_color="tab:blue",
        )

        # Add labels for nodes
        labels = {0: r"$a$", 1: r"$b$", 2: r"$c$", 3: r"$d$", 4: r"$\alpha$", 5: r"$\beta$", 6: r"$\gamma$", 7: r"$\delta$"}
        nx.draw_networkx_labels(G, pos, labels, font_size=22, font_color="whitesmoke")

        plt.tight_layout()
        plt.axis("off")
        st.pyplot(plt)

    elif option == "Create your own":
        # Let the user input the nodes and edges of the graph
        st.write("Enter the nodes and edges to create your own labeled graph.")

        nodes = st.text_area("Enter node labels (comma-separated, e.g., a,b,c,d):", value="a,b,c,d")
        node_labels = nodes.split(',')

        edges = st.text_area("Enter edges (format: node1-node2, comma-separated, e.g., a-b,b-c):", value="a-b,b-c,c-d")
        edge_list = [tuple(edge.split('-')) for edge in edges.split(',')]

        # Let user choose colors for nodes and edges
        node_color = st.color_picker("Pick a color for nodes:", "#FF6347")
        edge_color = st.color_picker("Pick a color for edges:", "#4682B4")

        # Add a button to generate the graph
        if st.button("Generate Graph"):
            # Generate graph based on user input
            G_custom = nx.Graph()
            G_custom.add_nodes_from(node_labels)
            G_custom.add_edges_from(edge_list)

            # Generate layout for the nodes
            pos_custom = nx.spring_layout(G_custom)

            # Draw the graph
            nx.draw_networkx_nodes(G_custom, pos_custom, node_color=node_color, node_size=800, edgecolors="gray", alpha=0.9)
            nx.draw_networkx_edges(G_custom, pos_custom, edge_color=edge_color, width=2, alpha=0.7)

            # Create custom labels
            custom_labels = {node: f"${node}$" for node in node_labels}
            nx.draw_networkx_labels(G_custom, pos_custom, labels=custom_labels, font_size=22, font_color="whitesmoke")

            plt.tight_layout()
            plt.axis("off")
            st.pyplot(plt)

# Display Drawing: Labels And Colors if selected
if sidebar_option == "Drawing: Labels And Colors":
    display_labels_and_colors()

# Function to display Drawing: House With Colors
def display_house_with_colors():
    st.title("Drawing: House With Colors")

    option = st.radio("Choose a graph type:", ("Default Example", "Create your own"))

    if option == "Default Example":
        # Create the house graph and explicitly set positions
        G = nx.house_graph()
        pos = {0: (0, 0), 1: (1, 0), 2: (0, 1), 3: (1, 1), 4: (0.5, 2.0)}

        # Plot nodes with different properties for the "wall" and "roof" nodes
        nx.draw_networkx_nodes(G, pos, node_size=3000, nodelist=[0, 1, 2, 3], node_color="tab:blue")
        nx.draw_networkx_nodes(G, pos, node_size=2000, nodelist=[4], node_color="tab:orange")
        nx.draw_networkx_edges(G, pos, alpha=0.5, width=6)
        
        # Customize axes
        ax = plt.gca()
        ax.margins(0.11)
        plt.tight_layout()
        plt.axis("off")
        st.pyplot(plt)

    elif option == "Create your own":
        # Allow the user to specify node positions and colors
        st.write("Specify positions for the house graph nodes.")

        positions = {}
        for i in range(5):
            x = st.number_input(f"X-coordinate for node {i}:", min_value=-10.0, max_value=10.0, value=0.0, step=0.1)
            y = st.number_input(f"Y-coordinate for node {i}:", min_value=-10.0, max_value=10.0, value=0.0, step=0.1)
            
            positions[i] = (x, y)

        # Allow the user to specify colors for wall and roof nodes
        wall_color = st.color_picker("Wall color:", "#0000FF")
        roof_color = st.color_picker("Roof color:", "#FFA500")

        if st.button("Generate"):
            # Create the house graph with the specified positions
            G_custom = nx.house_graph()

            # Plot nodes with user-defined properties for wall and roof nodes
            nx.draw_networkx_nodes(G_custom, positions, node_size=3000, nodelist=[0, 1, 2, 3], node_color=wall_color)
            nx.draw_networkx_nodes(G_custom, positions, node_size=2000, nodelist=[4], node_color=roof_color)
            nx.draw_networkx_edges(G_custom, positions, alpha=0.5, width=6)

            # Customize axes
            ax = plt.gca()
            ax.margins(0.11)
            plt.tight_layout()
            plt.axis("off")
            st.pyplot(plt)

# Display Drawing: House With Colors if selected
if sidebar_option == "Drawing: House With Colors":
    display_house_with_colors()

# Function to display Four Grids visualization for Drawing: Four Grids
def display_four_grids():
    st.title("Drawing: Four Grids")

    option = st.radio("Choose a graph type:", ("Default Example", "Create your own"))

    if option == "Default Example":
        # Generate a 4x4 grid graph
        G = nx.grid_2d_graph(4, 4)  # 4x4 grid
        pos = nx.spring_layout(G, iterations=100, seed=39775)

        # Create a 2x2 subplot
        fig, all_axes = plt.subplots(2, 2)
        ax = all_axes.flat

        # Draw graphs in 4 different styles
        nx.draw(G, pos, ax=ax[0], font_size=8)
        nx.draw(G, pos, ax=ax[1], node_size=0, with_labels=False)
        nx.draw(
            G,
            pos,
            ax=ax[2],
            node_color="tab:green",
            edgecolors="tab:gray",  # Node surface color
            edge_color="tab:gray",  # Color of graph edges
            node_size=250,
            with_labels=False,
            width=6,
        )
        H = G.to_directed()
        nx.draw(
            H,
            pos,
            ax=ax[3],
            node_color="tab:orange",
            node_size=20,
            with_labels=False,
            arrowsize=10,
            width=2,
        )

        # Set margins for the axes so that nodes aren't clipped
        for a in ax:
            a.margins(0.10)
        fig.tight_layout()
        st.pyplot(fig)

    elif option == "Create your own":
        # Allow the user to customize the grid dimensions
        rows = st.number_input("Number of rows:", min_value=2, max_value=20, value=4)
        cols = st.number_input("Number of columns:", min_value=2, max_value=20, value=4)

        if st.button("Generate"):
            # Generate a custom grid graph
            G_custom = nx.grid_2d_graph(rows, cols)  # Create the grid graph
            pos = nx.spring_layout(G_custom, iterations=100, seed=39775)

            # Create a 2x2 subplot
            fig, all_axes = plt.subplots(2, 2)
            ax = all_axes.flat

            # Draw graphs in 4 different styles
            nx.draw(G_custom, pos, ax=ax[0], font_size=8)
            nx.draw(G_custom, pos, ax=ax[1], node_size=0, with_labels=False)
            nx.draw(
                G_custom,
                pos,
                ax=ax[2],
                node_color="tab:green",
                edgecolors="tab:gray",  # Node surface color
                edge_color="tab:gray",  # Color of graph edges
                node_size=250,
                with_labels=False,
                width=6,
            )
            H = G_custom.to_directed()
            nx.draw(
                H,
                pos,
                ax=ax[3],
                node_color="tab:orange",
                node_size=20,
                with_labels=False,
                arrowsize=10,
                width=2,
            )

            # Set margins for the axes so that nodes aren't clipped
            for a in ax:
                a.margins(0.10)
            fig.tight_layout()
            st.pyplot(fig)

# Display Drawing: Four Grids if selected
if sidebar_option == "Drawing: Four Grids":
    display_four_grids()

# Function to display Eigenvalue analysis for Drawing: Eigenvalues
def display_eigenvalue_analysis():
    st.title("Drawing: Eigenvalues")

    option = st.radio("Choose a graph type:", ("Default Example", "Create your own"))

    if option == "Default Example":
        # Generate random graph with 1000 nodes and 5000 edges
        n = 1000
        m = 5000
        G = nx.gnm_random_graph(n, m, seed=5040)  # Seed for reproducibility

        # Calculate the normalized Laplacian matrix
        L = nx.normalized_laplacian_matrix(G)
        eigenvalues = np.linalg.eigvals(L.toarray())

        # Print largest and smallest eigenvalues
        st.write(f"Largest eigenvalue: {max(eigenvalues)}")
        st.write(f"Smallest eigenvalue: {min(eigenvalues)}")

        # Display the histogram of eigenvalues
        st.write("### Eigenvalue Histogram")
        plt.hist(eigenvalues, bins=100)
        plt.xlim(0, 2)  # Eigenvalues between 0 and 2
        st.pyplot(plt)

    elif option == "Create your own":
        # Allow the user to customize the number of nodes and edges
        n_nodes = st.number_input("Number of nodes:", min_value=2, max_value=1000, value=100)
        m_edges = st.number_input("Number of edges:", min_value=1, max_value=n_nodes*(n_nodes-1)//2, value=500)

        if st.button("Generate"):
            # Generate a random graph with the custom number of nodes and edges
            G_custom = nx.gnm_random_graph(n_nodes, m_edges, seed=5040)  # Seed for reproducibility

            # Calculate the normalized Laplacian matrix
            L = nx.normalized_laplacian_matrix(G_custom)
            eigenvalues = np.linalg.eigvals(L.toarray())

            # Print largest and smallest eigenvalues
            st.write(f"Largest eigenvalue: {max(eigenvalues)}")
            st.write(f"Smallest eigenvalue: {min(eigenvalues)}")

            # Display the histogram of eigenvalues
            st.write("### Eigenvalue Histogram")
            plt.hist(eigenvalues, bins=100)
            plt.xlim(0, 2)  # Eigenvalues between 0 and 2
            st.pyplot(plt)

# Display Drawing: Eigenvalues if selected
if sidebar_option == "Drawing: Eigenvalues":
    display_eigenvalue_analysis()

# Function to display properties and graph for Basic: Properties
def display_graph_properties(G):
    pathlengths = []
    st.write("### Source vertex {target:length, }")
    for v in G.nodes():
        spl = dict(nx.single_source_shortest_path_length(G, v))
        st.write(f"Vertex {v}: {spl}")
        for p in spl:
            pathlengths.append(spl[p])

    avg_path_length = sum(pathlengths) / len(pathlengths)
    st.write(f"### Average shortest path length: {avg_path_length}")

    dist = {}
    for p in pathlengths:
        dist[p] = dist.get(p, 0) + 1
    st.write("### Length #paths")
    for d in sorted(dist.keys()):
        st.write(f"Length {d}: {dist[d]} paths")

    st.write("### Properties")
    st.write(f"Radius: {nx.radius(G)}")
    st.write(f"Diameter: {nx.diameter(G)}")
    st.write(f"Eccentricity: {nx.eccentricity(G)}")
    st.write(f"Center: {nx.center(G)}")
    st.write(f"Periphery: {nx.periphery(G)}")
    st.write(f"Density: {nx.density(G)}")

    # Visualize the graph
    st.write("### Graph Visualization")
    pos = nx.spring_layout(G, seed=3068)  # Seed layout for reproducibility
    draw_graph(G, pos)

# Function to display graph for Basic: Read and write graphs
def display_read_write_graph(G):
    st.write("### Adjacency List:")
    for line in nx.generate_adjlist(G):
        st.write(line)
    
    # Write the graph's edge list to a file
    st.write("### Writing Edge List to 'grid.edgelist' file:")
    nx.write_edgelist(G, path="grid.edgelist", delimiter=":")  # Save edge list
    st.write("Edge list written to 'grid.edgelist'")

    # Read the graph from the edge list
    st.write("### Reading Edge List from 'grid.edgelist' file:")
    H = nx.read_edgelist(path="grid.edgelist", delimiter=":")
    st.write("Edge list read into graph H")

    # Visualize the graph
    st.write("### Graph Visualization:")
    pos = nx.spring_layout(H, seed=200)  # Seed for reproducibility
    draw_graph(H, pos)

# Function to display Simple Graphs for Basic: Simple graph
def display_simple_graph(G, pos=None):
    options = {
        "font_size": 36,
        "node_size": 3000,
        "node_color": "white",
        "edgecolors": "black",
        "linewidths": 5,
        "width": 5,
    }
    
    # Draw the network
    nx.draw_networkx(G, pos, **options)

    # Set margins for the axes so that nodes aren't clipped
    ax = plt.gca()
    ax.margins(0.20)
    plt.axis("off")
    st.pyplot(plt)

# Function to display Simple Directed Graphs for Basic: Simple graph Directed
def display_simple_directed_graph(G, pos=None):
    options = {
        "node_size": 500,
        "node_color": "lightblue",
        "arrowsize": 20,
        "width": 2,
        "edge_color": "gray",
    }
    
    # Draw the directed graph with the given positions and options
    nx.draw_networkx(G, pos, **options)

    # Set margins for the axes so that nodes aren't clipped
    ax = plt.gca()
    ax.margins(0.20)
    plt.axis("off")
    st.pyplot(plt)

# Function to display Custom Node Position Graphs for Drawing: Custom Node Position
def display_custom_node_position():
    st.title("Drawing: Custom Node Position")
    
    # Default example graph (path graph with custom node position)
    G = nx.path_graph(20)
    center_node = 5
    edge_nodes = set(G) - {center_node}
    
    # Ensure the nodes around the circle are evenly distributed
    pos = nx.circular_layout(G.subgraph(edge_nodes))
    pos[center_node] = np.array([0, 0])  # Manually specify node position
    
    # Draw the graph
    draw_graph(G, pos)

# Function to display Cluster Layout for Drawing: Cluster Layout
def display_cluster_layout():
    st.title("Drawing: Cluster Layout")

    G = nx.davis_southern_women_graph()  # Example graph
    communities = nx.community.greedy_modularity_communities(G)

    # Compute positions for the node clusters as if they were themselves nodes in a supergraph using a larger scale factor
    supergraph = nx.cycle_graph(len(communities))
    superpos = nx.spring_layout(G, scale=50, seed=429)

    # Use the "supernode" positions as the center of each node cluster
    centers = list(superpos.values())
    pos = {}
    for center, comm in zip(centers, communities):
        pos.update(nx.spring_layout(nx.subgraph(G, comm), center=center, seed=1430))

        # Nodes colored by cluster
    for nodes, clr in zip(communities, ("tab:blue", "tab:orange", "tab:green")):
        nx.draw_networkx_nodes(G, pos=pos, nodelist=nodes, node_color=clr, node_size=100)
    nx.draw_networkx_edges(G, pos=pos)

    plt.tight_layout()
    st.pyplot(plt)

# Function to display Degree Analysis for Drawing: Degree Analysis
def display_degree_analysis():
    st.title("Drawing: Degree Analysis")

    option = st.radio("Choose a graph type:", ("Default Example", "Create your own"))

    if option == "Default Example":
        G = nx.gnp_random_graph(100, 0.02, seed=10374196)
        
        degree_sequence = sorted((d for n, d in G.degree()), reverse=True)
        dmax = max(degree_sequence)

        fig = plt.figure("Degree of a random graph", figsize=(8, 8))
        # Create a gridspec for adding subplots of different sizes
        axgrid = fig.add_gridspec(5, 4)

        ax0 = fig.add_subplot(axgrid[0:3, :])
        Gcc = G.subgraph(sorted(nx.connected_components(G), key=len, reverse=True)[0])
        pos = nx.spring_layout(Gcc, seed=10396953)
        nx.draw_networkx_nodes(Gcc, pos, ax=ax0, node_size=20)
        nx.draw_networkx_edges(Gcc, pos, ax=ax0, alpha=0.4)
        ax0.set_title("Connected components of G")
        ax0.set_axis_off()

        ax1 = fig.add_subplot(axgrid[3:, :2])
        ax1.plot(degree_sequence, "b-", marker="o")
        ax1.set_title("Degree Rank Plot")
        ax1.set_ylabel("Degree")
        ax1.set_xlabel("Rank")

        ax2 = fig.add_subplot(axgrid[3:, 2:])
        ax2.bar(*np.unique(degree_sequence, return_counts=True))
        ax2.set_title("Degree histogram")
        ax2.set_xlabel("Degree")
        ax2.set_ylabel("# of Nodes")

        fig.tight_layout()
        st.pyplot(fig)

    elif option == "Create your own":
        n_nodes = st.number_input("Number of nodes:", min_value=2, max_value=500, value=100)
        p_edge = st.slider("Edge probability:", min_value=0.0, max_value=1.0, value=0.02)
        
        if st.button("Generate"):
            if n_nodes >= 2:
                G_custom = nx.gnp_random_graph(n_nodes, p_edge, seed=10374196)
                degree_sequence = sorted((d for n, d in G_custom.degree()), reverse=True)
                dmax = max(degree_sequence)

                fig = plt.figure("Degree of a random graph", figsize=(8, 8))
                # Create a gridspec for adding subplots of different sizes
                axgrid = fig.add_gridspec(5, 4)

                ax0 = fig.add_subplot(axgrid[0:3, :])
                Gcc = G_custom.subgraph(sorted(nx.connected_components(G_custom), key=len, reverse=True)[0])
                pos = nx.spring_layout(Gcc, seed=10396953)
                nx.draw_networkx_nodes(Gcc, pos, ax=ax0, node_size=20)
                nx.draw_networkx_edges(Gcc, pos, ax=ax0, alpha=0.4)
                ax0.set_title("Connected components of G")
                ax0.set_axis_off()

                ax1 = fig.add_subplot(axgrid[3:, :2])
                ax1.plot(degree_sequence, "b-", marker="o")
                ax1.set_title("Degree Rank Plot")
                ax1.set_ylabel("Degree")
                ax1.set_xlabel("Rank")

                ax2 = fig.add_subplot(axgrid[3:, 2:])
                ax2.bar(*np.unique(degree_sequence, return_counts=True))
                ax2.set_title("Degree histogram")
                ax2.set_xlabel("Degree")
                ax2.set_ylabel("# of Nodes")

                fig.tight_layout()
                st.pyplot(fig)

# Function to display Ego Graph for Drawing: Ego Graph
def display_ego_graph():
    st.title("Drawing: Ego Graph")

    option = st.radio("Choose a graph type:", ("Default Example", "Create your own"))

    if option == "Default Example":
        # Create a BA model graph - use seed for reproducibility
        n = 1000
        m = 2
        seed = 20532
        G = nx.barabasi_albert_graph(n, m, seed=seed)

        # Find node with largest degree
        node_and_degree = G.degree()
        (largest_hub, degree) = sorted(node_and_degree, key=itemgetter(1))[-1]

        # Create ego graph of main hub
        hub_ego = nx.ego_graph(G, largest_hub)

        # Draw graph
        pos = nx.spring_layout(hub_ego, seed=seed)  # Seed layout for reproducibility
        nx.draw(hub_ego, pos, node_color="b", node_size=50, with_labels=False)

        # Draw ego as large and red
        options = {"node_size": 300, "node_color": "r"}
        nx.draw_networkx_nodes(hub_ego, pos, nodelist=[largest_hub], **options)
        plt.tight_layout()
        st.pyplot(plt)

    elif option == "Create your own":
        n_nodes = st.number_input("Number of nodes:", min_value=2, max_value=1000, value=100)
        m_edges = st.number_input("Edges per node:", min_value=1, max_value=10, value=2)

        if st.button("Generate"):
            if n_nodes >= 2:
                G_custom = nx.barabasi_albert_graph(n_nodes, m_edges, seed=20532)

                # Find node with largest degree
                node_and_degree = G_custom.degree()
                (largest_hub, degree) = sorted(node_and_degree, key=itemgetter(1))[-1]

                # Create ego graph of main hub
                hub_ego = nx.ego_graph(G_custom, largest_hub)

                # Draw graph
                pos = nx.spring_layout(hub_ego, seed=20532)  # Seed layout for reproducibility
                nx.draw(hub_ego, pos, node_color="b", node_size=50, with_labels=False)

                # Draw ego as large and red
                options = {"node_size": 300, "node_color": "r"}
                nx.draw_networkx_nodes(hub_ego, pos, nodelist=[largest_hub], **options)
                plt.tight_layout()
                st.pyplot(plt)

# Display Drawing: Ego Graph if selected
if sidebar_option == "Drawing: Ego Graph":
    display_ego_graph()

# Display Basic: Properties if selected
elif sidebar_option == "Basic: Properties":
    st.title("Basic: Properties")
    option = st.radio("Choose a graph type:", ("Default Example", "Create your own"))

    if option == "Default Example":
        G = nx.lollipop_graph(4, 6)
        display_graph_properties(G)

    elif option == "Create your own":
        num_nodes = st.number_input("Number of nodes:", min_value=2, max_value=50, value=5)
        num_edges = st.number_input("Number of edges per group (for lollipop graph):", min_value=1, max_value=10, value=3)

        if st.button("Generate"):
            if num_nodes >= 2 and num_edges >= 1:
                G_custom = nx.lollipop_graph(num_nodes, num_edges)
                display_graph_properties(G_custom)

# Display Basic: Read and write graphs if selected
elif sidebar_option == "Basic: Read and write graphs":
    st.title("Basic: Read and write graphs")
    option = st.radio("Choose a graph type:", ("Default Example", "Create your own"))

    if option == "Default Example":
        G = nx.grid_2d_graph(5, 5)
        display_read_write_graph(G)

    elif option == "Create your own":
        rows = st.number_input("Number of rows:", min_value=2, max_value=20, value=5)
        cols = st.number_input("Number of columns:", min_value=2, max_value=20, value=5)

        if st.button("Generate"):
            if rows >= 2 and cols >= 2:
                G_custom = nx.grid_2d_graph(rows, cols)
                display_read_write_graph(G_custom)

# Display Basic: Simple Graph if selected
elif sidebar_option == "Basic: Simple graph":
    st.title("Basic: Simple graph")
    option = st.radio("Choose a graph type:", ("Default Example", "Create your own"))

    if option == "Default Example":
        G = nx.Graph()
        G.add_edge(1, 2)
        G.add_edge(1, 3)
        G.add_edge(1, 5)
        G.add_edge(2, 3)
        G.add_edge(3, 4)
        G.add_edge(4, 5)

        pos = {1: (0, 0), 2: (-1, 0.3), 3: (2, 0.17), 4: (4, 0.255), 5: (5, 0.03)}
        display_simple_graph(G, pos)

    elif option == "Create your own":
        edges = []
        edge_input = st.text_area("Edges:", value="1,2\n1,3\n2,3")
        if edge_input:
            edge_list = edge_input.split("\n")
            for edge in edge_list:
                u, v = map(int, edge.split(","))
                edges.append((u, v))

        if st.button("Generate"):
            G_custom = nx.Graph()
            G_custom.add_edges_from(edges)
            pos = nx.spring_layout(G_custom, seed=42)
            display_simple_graph(G_custom, pos)

# Display Basic: Simple Directed Graph if selected
elif sidebar_option == "Basic: Simple graph Directed":
    st.title("Basic: Simple graph Directed")
    option = st.radio("Choose a graph type:", ("Default Example", "Create your own"))

    if option == "Default Example":
        G = nx.DiGraph([(0, 3), (1, 3), (2, 4), (3, 5), (3, 6), (4, 6), (5, 6)])

        left_nodes = [0, 1, 2]
        middle_nodes = [3, 4]
        right_nodes = [5, 6]

        pos = {n: (0, i) for i, n in enumerate(left_nodes)}
        pos.update({n: (1, i + 0.5) for i, n in enumerate(middle_nodes)})
        pos.update({n: (2, i + 0.5) for i, n in enumerate(right_nodes)})

        display_simple_directed_graph(G, pos)

    elif option == "Create your own":
        edges = []
        edge_input = st.text_area("Edges:", value="1,2\n1,3\n2,3")
        if edge_input:
            edge_list = edge_input.split("\n")
            for edge in edge_list:
                u, v = map(int, edge.split(","))
                edges.append((u, v))

        if st.button("Generate"):
            G_custom = nx.DiGraph()
            G_custom.add_edges_from(edges)
            pos = nx.spring_layout(G_custom, seed=42)
            display_simple_directed_graph(G_custom, pos)

# Display Drawing: Custom Node Position if selected
elif sidebar_option == "Drawing: Custom Node Position":
    display_custom_node_position()

# Display Drawing: Cluster Layout if selected
elif sidebar_option == "Drawing: Cluster Layout":
    display_cluster_layout()

# Display Drawing: Degree Analysis if selected
elif sidebar_option == "Drawing: Degree Analysis":
    display_degree_analysis()