Update app.py

app.py

@@ -31,35 +31,58 @@ if sidebar_option == "Introductory Tutorial":
     
     # Add content descriptions
     descriptions = [
-        ("Basic: Properties", "Explore fundamental properties of graphs, such as node count, edge count, and degree distribution."),
-        ("Basic: Read and Write Graphs", "Load graphs from files or save current graphs for later use."),
-        ("Basic: Simple Graph", "Generate undirected graphs for basic visualization."),
-        ("Basic: Simple Graph Directed", "Create directed graphs to analyze workflows or dependencies."),
-        ("Drawing: Custom Node Position", "Manually set node positions for custom layouts."),
-        ("Drawing: Cluster Layout", "Visualize clusters to identify tightly connected groups."),
-        ("Drawing: Degree Analysis", "Highlight node connections and identify hubs or influencers."),
-        ("Drawing: Ego Graph", "Focus on a single node and its immediate connections."),
-        ("Drawing: Eigenvalues", "Analyze graph structure using Laplacian eigenvalues."),
-        ("Drawing: House With Colors", "Display a simple 'house graph' with colored nodes and edges."),
-        ("Drawing: Labels and Colors", "Customize graph appearance with labels and colors."),
-        ("Drawing: Multipartite Layout", "Visualize graphs with nodes divided into distinct layers."),
-        ("Drawing: Node Colormap", "Apply gradient colors based on node properties."),
-        ("Drawing: Rainbow Coloring", "Differentiate edges with colorful patterns."),
-        ("Drawing: Random Geometric Graph", "Generate graphs based on spatial proximity."),
-        ("Drawing: Self-loops", "Visualize and highlight self-loops in graphs."),
-        ("Drawing: Simple Path", "Display linear connections or sequences."),
-        ("Drawing: Spectral Embedding", "Visualize nodes in reduced-dimensional space."),
-        ("Drawing: Traveling Salesman Problem", "Visualize optimized paths for visiting all nodes."),
-        ("Drawing: Weighted Graph", "Show graphs with weighted edges."),
-        ("3D Drawing: Animations of 3D Rotation", "Create rotating 3D graph visualizations."),
-        ("3D Drawing: Basic Matplotlib", "Generate basic 3D graph plots."),
-        ("Graph: DAG - Topological Layout", "Analyze directed acyclic graphs in topological order."),
-        ("Graph: Erdos Renyi", "Generate random graphs with probabilistic connections."),
-        ("Graph: Karate Club", "Visualize the classic 'Karate Club' benchmark graph."),
-        ("Graph: Minimum Spanning Tree", "Find and display a graph's minimum spanning tree."),
-        ("Graph: Triads", "Analyze three-node structures for relationships."),
-        ("Algorithms: Cycle Detection", "Detect and highlight cycles in a graph."),
-        ("Algorithms: Greedy Coloring", "Color nodes to prevent adjacent nodes from sharing colors.")
+        ("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: