2D cut pattern visualization

Mostly handle #10

rocolib/api/components/Component.py

@@ -14,7 +14,7 @@ from rocolib.utils.utils import prefix as prefixString
 from rocolib.utils.utils import tryImport
 from rocolib.utils.io import load_yaml
 from rocolib.utils.nx2go import GraphVisualization as gv
-from dash import Dash, html
+from dash import html, dcc
 
 
 log = logging.getLogger(__name__)
@@ -531,19 +531,23 @@ class Component(Parameterized):
 
     def visualize(self, outputs=True, **ka):
         widgets = self.makeOutput(outputs, widgets=True, **ka)
-        app = Dash(__name__)
-        elts = [
-            html.H2('RoCo component visualizer'),
-            html.H1(f"Component: {self.getName()}"),
-        ]
+        elts = [ html.H1(f"RoCo component visualizer: {self.getName()}") ]
+        tabs = []
+
         for c, w in widgets.items():
-            elts.append(html.H3(f"Composable: {c}"))
+            widgets = []
             for k, v in w.items():
-                elts.append(html.H4(f"Widget: {k}"))
-                elts.append(html.P(v['desc']))
-                elts.append(v['widget'])
-        app.layout = html.Div(elts)
-        app.run_server(debug=True)
+                widgets.append(html.Div([
+                    html.H3(v['desc']),
+                    html.P(f"Widget: {k}"),
+                    v['widget'],
+                ], style={'padding': 10, 'flex': 1}))
+            tabs.append(dcc.Tab(label = f"Composable: {c}",
+                                children = html.Div(widgets, style={'display': 'flex', 'flex-direction': 'row'})
+            ))
+
+        elts.append(html.Div(dcc.Tabs(tabs)))
+        return html.Div(elts)
 
     def makeOutput(self, outputs=(), filedir=None, widgets=False, **ka):
         if filedir: