traversal app for 0.5.0 (#229)

* make a radix version of traversal app for 0.5.0

* loosen requirements.txt

* use experimental toast

traversal/.gitignore

@@ -0,0 +1,4 @@
+*.db
+*.py[cod]
+.web
+__pycache__/

traversal/requirements.txt

@@ -0,0 +1 @@
+reflex>=0.5.0

traversal/rxconfig.py

@@ -0,0 +1,5 @@
+import reflex as rx
+
+config = rx.Config(
+    app_name="traversal",
+)

traversal/traversal/traversal.py

@@ -0,0 +1,218 @@
+"""Welcome to Reflex! This file outlines the steps to create a basic app."""
+
+import asyncio
+import random
+from collections import deque
+from copy import deepcopy
+
+import reflex as rx
+from reflex.utils.serializers import serializer
+
+GRID_SIZE = 7
+
+theme_border = f"1px solid {rx.color('gray', 12)}"
+
+box_style = {
+    "border": theme_border,
+    "box-shadow": f"0px 0px 10px 0px {rx.color('gray', 11)}",
+    "border-radius": "5px",
+    "padding": "2em",
+}
+
+page_background = rx.color("gray", 3)
+
+
+def generate_graph(walls, size) -> list[list[int]]:
+    """Generate a 2D grid of size x size with walls number of walls."""
+    colors = [0] * (size**2)
+
+    def assign_color(color):
+        while colors[r := random.randint(0, size**2 - 1)] != 0:
+            ...
+        colors[r] = color
+
+    while walls > 0:
+        assign_color("blue")
+        walls -= 1
+
+    assign_color("red")
+    assign_color("green")
+
+    def to_matrix(line, n):
+        return [line[i : i + n] for i in range(0, len(line), n)]
+
+    return to_matrix(colors, GRID_SIZE)
+
+
+@serializer
+def serialize_deque(q: deque):
+    return list(q)
+
+
+class GraphState(rx.State):
+    """The app state."""
+
+    option: str = ""
+    walls: int = 3
+    initial_graph: list[list[int]] = generate_graph(walls, GRID_SIZE)
+    colored_graph: list[list[int]] = deepcopy(initial_graph)
+    _directions: list[tuple[int, int]] = [(1, 0), (-1, 0), (0, 1), (0, -1)]
+    initial: bool = True
+    s: list = []
+    q: deque = deque()
+
+    def set_walls(self, value):
+        if value != "" and int(value[0]) >= 0:
+            self.walls = int(value[0])
+
+    def new_graph(self):
+        """Create a new graph then call clear_graph()."""
+        self.initial_graph = generate_graph(self.walls, GRID_SIZE)
+        self.clear_graph()
+
+    def clear_graph(self):
+        """Reset the state."""
+        self.colored_graph = deepcopy(self.initial_graph)
+        self.initial = True
+        self.s = []
+        self.q = deque()
+
+    def run(self):
+        """Run the selected algorithm."""
+        self.clear_graph()
+        self.set_initial_values()
+        if self.option == "DFS":
+            return GraphState.run_dfs
+        elif self.option == "BFS":
+            return GraphState.run_bfs
+
+    def set_initial_values(self):
+        colors = self.colored_graph
+        for i in range(len(colors)):
+            for j in range(len(colors[i])):
+                if self.colored_graph[i][j] == "red":
+                    self.s.append((i, j))
+                    self.q.append((i, j))
+                    self.initial = False
+                    break
+
+    def path_found(self, i, j):
+        if self.colored_graph[i][j] == "green":
+            return rx._x.toast.success(f"Path found to [{i},{j}]", position="top-center")
+
+    def path_not_found(self):
+        return rx._x.toast.error("No path found", position="top-center")
+
+    def explore_neighbors(self, i, j, mode=None):
+        if self.colored_graph[i][j] != "red":
+            self.colored_graph[i][j] = "yellow"
+
+        for di, dj in self._directions:
+            i2, j2 = i + di, j + dj
+            if (
+                0 <= i2 < len(self.colored_graph)
+                and 0 <= j2 < len(self.colored_graph[i2])
+                and self.colored_graph[i2][j2] != "yellow"
+                and self.colored_graph[i2][j2] != "blue"
+            ):
+                if mode == "DFS":
+                    self.s.append((i2, j2))
+                elif mode == "BFS":
+                    self.q.append((i2, j2))
+
+    async def run_dfs(self):
+        """DFS algorithm on a 1d array."""
+        await asyncio.sleep(1)
+
+        if self.s:
+            i, j = self.s.pop()
+
+            if found := self.path_found(i, j):
+                return found
+
+            self.explore_neighbors(i, j, mode="DFS")
+
+            return GraphState.run_dfs
+
+        return self.path_not_found()
+
+    async def run_bfs(self):
+        await asyncio.sleep(1)
+
+        if self.q:
+            i, j = self.q.popleft()
+
+            if found := self.path_found(i, j):
+                return found
+
+            self.explore_neighbors(i, j, mode="BFS")
+            return GraphState.run_bfs
+
+        return self.path_not_found()
+
+
+def render_box(color):
+    """Return a colored box."""
+    return rx.box(bg=color, width="50px", height="50px", border=theme_border)
+
+
+def walls_selector():
+    return rx.hstack(
+        rx.slider(
+            min=0,
+            max=20,
+            on_change=GraphState.set_walls,
+            width="40%",
+            default_value=3,
+        ),
+        rx.text(GraphState.walls, " walls", width="120px"),
+        rx.button("Generate Graph", on_click=GraphState.new_graph, width="130px"),
+        width="100%",
+        height="50px",
+        align="center",
+    )
+
+
+def display_graph():
+    return rx.grid(
+        rx.foreach(
+            GraphState.colored_graph,
+            lambda x: rx.foreach(x, render_box),
+        ),
+        columns=str(GRID_SIZE),
+        border=theme_border,
+        justify="center",
+    )
+
+
+def algorithm_selector():
+    return rx.hstack(
+        rx.select(
+            ["DFS", "BFS"],
+            on_change=GraphState.set_option,
+            placeholder="Select an algorithm...",
+        ),
+        rx.button("Run", on_click=GraphState.run),
+        rx.button("Clear", on_click=GraphState.clear_graph),
+        align="center",
+    )
+
+
+@rx.page(route="/", title="Graph Traversal - Reflex")
+def index() -> rx.Component:
+    return rx.color_mode.button(), rx._x.toast.provider(rich_colors=True), rx.center(
+        rx.vstack(
+            rx.heading("Graph Traversal", size="8"),
+            rx.divider(),
+            walls_selector(),
+            display_graph(),
+            algorithm_selector(),
+            align="center",
+            style=box_style,
+        ),
+        bg=page_background,
+        height="100vh",
+    )
+
+
+app = rx.App()