refractored the code

Author: liferoad

Makefile

@@ -47,6 +47,7 @@ init: init-venv ## Init virtual environment
 	@./venv/bin/python3 -m pip install -r requirements.dev.txt
 	@./venv/bin/python3 -m pre_commit install --install-hooks --overwrite
 	@echo "use 'source venv/bin/activate' to activate venv "
+	@./venv/bin/python3 -m pip install -e .
 
 format: ## Run formatter on source code
 	@./venv/bin/python3 -m black --config=pyproject.toml .
@@ -68,4 +69,4 @@ clean: clean-lite ## Remove virtual environment, downloaded models, etc
 	@echo "run 'make init'"
 
 run: ## Run the application
-	@./venv/bin/python3 main.py
+	@./venv/bin/python3 beamforge/app.py

beamforge/__init__.py

@@ -0,0 +1,23 @@
+# third party libraries
+import dash
+import dash_cytoscape as cyto
+
+from beamforge.callbacks.graph_callbacks import register_graph_callbacks
+from beamforge.callbacks.yaml_callbacks import register_yaml_callbacks
+from beamforge.layouts.main_layout import create_layout
+
+# Register the dagre layout
+cyto.load_extra_layouts()
+
+# Initialize the Dash app
+app = dash.Dash(__name__)
+
+# Set the layout
+app.layout = create_layout()
+
+# Register callbacks
+register_graph_callbacks(app)
+register_yaml_callbacks(app)
+
+if __name__ == "__main__":
+    app.run_server(debug=True)

beamforge/app.py

@@ -0,0 +1 @@
+# Empty file to make the directory a Python package

assets/style.css renamed to beamforge/assets/style.css

@@ -0,0 +1,91 @@
+# standard libraries
+import base64
+import io
+
+# third party libraries
+from dash import Input, Output, State, html
+from utils.yaml_parser import parse_beam_yaml
+
+
+def register_graph_callbacks(app):
+    # Clientside callback for fitting the graph
+    app.clientside_callback(
+        """
+        function(elements) {
+            if (elements && elements.length > 0) {
+                const cy = document.getElementById('network-graph')._cyreg.cy;
+                setTimeout(() => cy.fit(), 100);
+            }
+            return elements;
+        }
+        """,
+        Output("network-graph", "elements"),
+        Input("network-graph", "elements"),
+    )
+
+    @app.callback(
+        Output("network-graph", "elements", allow_duplicate=True),
+        Input("upload-data", "contents"),
+        State("upload-data", "filename"),
+        prevent_initial_call=True,
+    )
+    def update_graph(contents, filename):
+        if contents is None:
+            return []
+
+        content_type, content_string = contents.split(",")
+        decoded = base64.b64decode(content_string)
+
+        try:
+            # Parse YAML and create NetworkX graph
+            G = parse_beam_yaml(io.StringIO(decoded.decode("utf-8")))
+
+            # Convert NetworkX graph to Cytoscape format
+            elements = []
+
+            # Add nodes
+            for node in G.nodes(data=True):
+                node_id = node[0]
+                node_data = node[1]
+                elements.append(
+                    {
+                        "data": {
+                            "id": node_id,
+                            "type": node_data.get("type", "Unknown"),
+                            "config": node_data.get("config", {}),
+                        }
+                    }
+                )
+
+            # Add edges
+            for edge in G.edges():
+                elements.append({"data": {"source": edge[0], "target": edge[1]}})
+
+            return elements
+        except Exception as e:
+            print(e)
+            return []
+
+    @app.callback(Output("node-data", "children"), Input("network-graph", "tapNodeData"))
+    def display_node_data(node_data):
+        if not node_data:
+            return "Click a node to see its details"
+
+        # Create a formatted display of node data
+        details = [
+            html.H4(f"Transform: {node_data['id']}"),
+            html.P(f"Type: {node_data['type']}"),
+            html.H5("Configuration:"),
+            html.Pre(
+                str(node_data["config"]),
+                style={
+                    "whiteSpace": "pre-wrap",
+                    "wordBreak": "break-all",
+                    "backgroundColor": "#f5f5f5",
+                    "padding": "10px",
+                    "borderRadius": "4px",
+                },
+            ),
+        ]
+
+        return html.Div(details)

beamforge/callbacks/__init__.py

@@ -0,0 +1,26 @@
+# standard libraries
+import base64
+
+# third party libraries
+import yaml
+from dash import Input, Output
+
+
+def register_yaml_callbacks(app):
+    @app.callback(
+        Output("yaml-content", "children"),
+        Input("upload-data", "contents"),
+    )
+    def update_yaml_content(contents):
+        if contents is None:
+            return "YAML content will appear here..."
+
+        content_type, content_string = contents.split(",")
+        decoded = base64.b64decode(content_string)
+
+        try:
+            yaml_dict = yaml.safe_load(decoded)
+            formatted_yaml = yaml.dump(yaml_dict, default_flow_style=False, sort_keys=False)
+            return formatted_yaml
+        except Exception as e:
+            return f"Error processing YAML file: {str(e)}"

beamforge/callbacks/graph_callbacks.py

@@ -0,0 +1 @@
+# Empty file to make the directory a Python package

beamforge/callbacks/yaml_callbacks.py

@@ -0,0 +1,51 @@
+# third party libraries
+import dash_resizable_panels as drp
+from dash import dcc, html
+
+
+def create_left_panel():
+    return drp.Panel(
+        html.Div(
+            [
+                html.H3("Upload Beam YAML"),
+                dcc.Upload(
+                    id="upload-data",
+                    children=html.Div(["Drag and Drop or ", html.A("Select Beam YAML File")]),
+                    style={
+                        "width": "80%",
+                        "height": "60px",
+                        "lineHeight": "60px",
+                        "borderWidth": "1px",
+                        "borderStyle": "dashed",
+                        "borderRadius": "5px",
+                        "textAlign": "center",
+                        "margin": "10px",
+                    },
+                    multiple=False,
+                    accept=".yaml,.yml",
+                ),
+                html.Div(
+                    [
+                        html.Pre(
+                            id="yaml-content",
+                            style={
+                                "width": "95%",
+                                "margin": "10px",
+                                "fontFamily": "monospace",
+                                "whiteSpace": "pre-wrap",
+                                "wordWrap": "break-word",
+                                "backgroundColor": "#f5f5f5",
+                                "padding": "10px",
+                                "border": "1px solid #ddd",
+                                "borderRadius": "4px",
+                                "overflow": "auto",
+                                "maxHeight": "calc(100vh - 150px)",
+                            },
+                        ),
+                    ],
+                    style={"height": "calc(100% - 100px)", "overflow": "auto"},
+                ),
+            ]
+        ),
+        defaultSizePercentage=20,
+    )

beamforge/layouts/__init__.py

@@ -0,0 +1,26 @@
+# third party libraries
+import dash_resizable_panels as drp
+from dash import html
+
+from beamforge.layouts.left_panel import create_left_panel
+from beamforge.layouts.middle_panel import create_middle_panel
+from beamforge.layouts.right_panel import create_right_panel
+
+
+def create_layout():
+    return html.Div(
+        [
+            drp.PanelGroup(
+                [
+                    create_left_panel(),
+                    drp.PanelResizeHandle(className="panel-resize-handle"),
+                    create_middle_panel(),
+                    drp.PanelResizeHandle(className="panel-resize-handle"),
+                    create_right_panel(),
+                ],
+                direction="horizontal",
+            ),
+            html.Div(id="reset-trigger", style={"display": "none"}),
+        ],
+        style={"height": "100vh"},
+    )

beamforge/layouts/left_panel.py

@@ -0,0 +1,76 @@
+# third party libraries
+import dash_cytoscape as cyto
+import dash_resizable_panels as drp
+from dash import html
+
+
+def get_stylesheet():
+    return [
+        {
+            "selector": "node",
+            "style": {
+                "shape": "rectangle",
+                "content": "data(id)",
+                "text-valign": "center",
+                "text-halign": "center",
+                "width": "150px",
+                "height": "40px",
+                "background-color": "#e3f2fd",
+                "border-color": "#1976d2",
+                "border-width": "2px",
+                "padding": "8px",
+                "font-family": "Roboto, Arial, sans-serif",
+                "font-size": "12px",
+                "font-weight": "500",
+                "text-wrap": "wrap",
+                "color": "#1565c0",
+            },
+        },
+        {
+            "selector": "edge",
+            "style": {
+                "curve-style": "bezier",
+                "target-arrow-shape": "triangle",
+                "line-color": "#90caf9",
+                "target-arrow-color": "#90caf9",
+                "width": 1.5,
+                "arrow-scale": 1.2,
+            },
+        },
+        {
+            "selector": "node:selected",
+            "style": {
+                "background-color": "#bbdefb",
+                "border-color": "#0d47a1",
+                "border-width": "3px",
+            },
+        },
+    ]
+
+
+def create_middle_panel():
+    return drp.Panel(
+        html.Div(
+            [
+                html.H3("Pipeline Graph"),
+                cyto.Cytoscape(
+                    id="network-graph",
+                    layout={"name": "dagre", "rankDir": "TB", "rankSep": 30, "nodeSep": 50, "padding": 10},
+                    style={
+                        "width": "100%",
+                        "height": "calc(100vh - 100px)",
+                        "position": "absolute",
+                    },
+                    stylesheet=get_stylesheet(),
+                    elements=[],
+                ),
+            ],
+            style={
+                "height": "100%",
+                "position": "relative",
+                "display": "flex",
+                "flexDirection": "column",
+            },
+        ),
+        defaultSizePercentage=60,
+    )

beamforge/layouts/main_layout.py

@@ -0,0 +1,18 @@
+# third party libraries
+import dash_resizable_panels as drp
+from dash import html
+
+
+def create_right_panel():
+    return drp.Panel(
+        html.Div(
+            [
+                html.H3("Transform Details"),
+                html.Div(
+                    id="node-info",
+                    children=[html.P("Click a transform to see its details"), html.Div(id="node-data")],
+                ),
+            ]
+        ),
+        defaultSizePercentage=20,
+    )

beamforge/layouts/middle_panel.py

@@ -0,0 +1 @@
+# Empty file to make the directory a Python package

beamforge/layouts/right_panel.py

@@ -0,0 +1,28 @@
+# third party libraries
+import networkx as nx
+import yaml
+
+
+def parse_beam_yaml(yaml_content):
+    """Parse Beam YAML and create a NetworkX graph."""
+    G = nx.DiGraph()
+    data = yaml.safe_load(yaml_content)
+
+    if "pipeline" not in data:
+        raise ValueError("No pipeline section found in YAML")
+
+    pipeline = data["pipeline"]
+    transforms = pipeline.get("transforms", [])
+    pipeline_type = pipeline.get("type", None)
+
+    if pipeline_type == "chain" or pipeline_type is None:
+        prev_node = None
+        for idx, transform in enumerate(transforms):
+            node_id = transform.get("name", f"transform_{idx}")
+            transform_type = transform.get("type", "Unknown")
+            G.add_node(node_id, type=transform_type, config=transform.get("config", {}))
+            if prev_node is not None:
+                G.add_edge(prev_node, node_id)
+            prev_node = node_id
+
+    return G