|
|
import gradio as gr |
|
|
|
|
|
from engine_03.flow.graph_models import table_to_flowgraph |
|
|
from engine_03.flow.mermaid_renderer import build_mermaid |
|
|
from engine_03.flow.simulator import simulate_flowgraph |
|
|
from engine_03.flow.sql_adapter import apply_command |
|
|
|
|
|
|
|
|
def build_flowstudio_tab(): |
|
|
gr.Markdown( |
|
|
""" |
|
|
## 🧩 MindsEye Flow Studio |
|
|
|
|
|
- Define **nodes** (id, label, type, style). |
|
|
- Define **edges** (source, target, label, style). |
|
|
- Click **Update Diagram** to generate a Mermaid-style graph. |
|
|
- Click **Simulate Flow** to walk the graph and see an execution log. |
|
|
- Use the **Flow Command** box to modify the graph with a tiny SQL-like syntax. |
|
|
""" |
|
|
) |
|
|
|
|
|
sample_nodes = [ |
|
|
["event_in", "Incoming Event", "event", ""], |
|
|
["handler", "Handle Event / Transform", "function", ""], |
|
|
["log", "Log to Ledger (conceptual)", "function", ""], |
|
|
["out", "Emit Output", "output", ""], |
|
|
] |
|
|
sample_edges = [ |
|
|
["event_in", "handler", "", ""], |
|
|
["handler", "log", "", ""], |
|
|
["log", "out", "", ""], |
|
|
] |
|
|
|
|
|
with gr.Row(): |
|
|
with gr.Column(scale=2): |
|
|
gr.Markdown("### Nodes") |
|
|
nodes_df = gr.Dataframe( |
|
|
headers=["id", "label", "type", "style"], |
|
|
datatype=["str", "str", "str", "str"], |
|
|
value=sample_nodes, |
|
|
row_count=(4, "dynamic"), |
|
|
col_count=4, |
|
|
interactive=True, |
|
|
label="Nodes Table", |
|
|
) |
|
|
|
|
|
with gr.Column(scale=2): |
|
|
gr.Markdown("### Edges") |
|
|
edges_df = gr.Dataframe( |
|
|
headers=["source", "target", "label", "style"], |
|
|
datatype=["str", "str", "str", "str"], |
|
|
value=sample_edges, |
|
|
row_count=(3, "dynamic"), |
|
|
col_count=4, |
|
|
interactive=True, |
|
|
label="Edges Table", |
|
|
) |
|
|
|
|
|
with gr.Row(): |
|
|
update_btn = gr.Button("🔄 Update Diagram") |
|
|
simulate_btn = gr.Button("▶️ Simulate Flow") |
|
|
|
|
|
diagram_md = gr.Markdown( |
|
|
value=build_mermaid(table_to_flowgraph(sample_nodes, sample_edges)), |
|
|
label="Flow Diagram (Mermaid)", |
|
|
) |
|
|
sim_log = gr.Markdown( |
|
|
value="Click **Simulate Flow** to see a run log.", |
|
|
label="Execution Log", |
|
|
) |
|
|
|
|
|
gr.Markdown("### Flow Command (SQL-ish)") |
|
|
|
|
|
command_box = gr.Textbox( |
|
|
label="Command", |
|
|
placeholder=( |
|
|
'Examples:\n' |
|
|
' ADD NODE id=event_in label="Incoming Event" type=event\n' |
|
|
' ADD EDGE source=event_in target=handler label="to handler"\n' |
|
|
' DELETE NODE id=log\n' |
|
|
' DELETE EDGE source=handler target=log\n' |
|
|
' STYLE NODE id=handler style="fill:#0ea5e9,stroke:#0369a1"\n' |
|
|
' STYLE EDGE source=handler target=log style="stroke:#f97316,stroke-width:2px"' |
|
|
), |
|
|
lines=4, |
|
|
) |
|
|
|
|
|
run_cmd_btn = gr.Button("⚙️ Run Command") |
|
|
|
|
|
command_output = gr.Markdown( |
|
|
value="Command output will appear here.", |
|
|
label="Command Output", |
|
|
) |
|
|
|
|
|
|
|
|
|
|
|
def update_diagram(nodes, edges): |
|
|
flow = table_to_flowgraph(nodes, edges) |
|
|
return build_mermaid(flow) |
|
|
|
|
|
def simulate(nodes, edges): |
|
|
flow = table_to_flowgraph(nodes, edges) |
|
|
return simulate_flowgraph(flow) |
|
|
|
|
|
def run_command(cmd, nodes, edges): |
|
|
new_nodes, new_edges, msg = apply_command(cmd, nodes, edges) |
|
|
flow = table_to_flowgraph(new_nodes, new_edges) |
|
|
new_diagram = build_mermaid(flow) |
|
|
|
|
|
return "", new_nodes, new_edges, msg, new_diagram |
|
|
|
|
|
update_btn.click(update_diagram, [nodes_df, edges_df], [diagram_md]) |
|
|
simulate_btn.click(simulate, [nodes_df, edges_df], [sim_log]) |
|
|
|
|
|
run_cmd_btn.click( |
|
|
run_command, |
|
|
[command_box, nodes_df, edges_df], |
|
|
[command_box, nodes_df, edges_df, command_output, diagram_md], |
|
|
) |
