Truned into ocp-wg-backend module

wrapper.py

@@ -14,6 +14,7 @@ import dash
 import dash_cytoscape as cyto
 from dash import Dash, dcc, html
 from dash.dependencies import Input, Output
+import dash_bootstrap_components as dbc
 
 cyto.load_extra_layouts()
 external_script = ["https://tailwindcss.com/", {"src": "https://cdn.tailwindcss.com"}]
@@ -108,6 +109,7 @@ def line_process():
     with open(os.path.join(path, log_file)) as p_lines:
 
         for line in p_lines:
+            if line.strip():
                 #print(line)
                 parser_arg = line.encode('utf-8')
                 call_lib = clibrary.line_parse(parser_arg)
@@ -163,11 +165,11 @@ def line_process():
     nodes = get_uniq(nodes)
     edges = get_uniq(edges)
 
-    plot_group_graph(nodes, edges)
+    #plot_group_graph(nodes, edges)
 
     json_data = json.dumps(json_dump, indent=2)
 
-    return json_data
+    return nodes, edges
 
 def get_uniq(list):
     
@@ -191,8 +193,9 @@ def get_uniq(list):
 # file_pointer()
 # struct_process()
 
-def plot_group_graph(nodes, edges):
+def plot_group_graph():
     
+    nodes, edges = line_process()
     # Create a graph
     G = nx.Graph()
     G.add_nodes_from(nodes)
@@ -202,44 +205,57 @@ def plot_group_graph(nodes, edges):
     random_words = [random.choice(["Apple", "Banana", "Cherry", "Date", "Fig", "Grape", "Lemon", "Mango", "Orange", "Peach"]) for _ in nodes]
     
     # Define node colors based on conditions
-    node_colors = {node: 'red' if node not in ['192.168.20.2', '192.168.100.62', '192.168.100.28', '192.168.101.112'] else ('#176069' if node == '192.168.20.2' else 'blue') for node in nodes}
+    node_name = {node: "Johan:"+" "+node if node == "192.168.101.113" else node for node in nodes }
+    node_colors = {node: 'turqoise' if node == '192.168.20.2' else ('teal' if node.startswith('192.168') else ('orange' if node.startswith('10.30.') else 'beige')) for node in nodes}
     
     # Create a Dash app
     #app = dash.Dash(__name__)
+    #app =  DjangoDash(name='dash_app', external_stylesheets=[dbc.themes.LUX])
+
+    #layout={'name': 'cose', 'avoidOverlap': True,  'nodeDimensionsIncludeLabels': True},
+    layout={
+                "name": "cose",
+                "idealEdgeLength": 20,
+                "nodeOverlap": 20,
+                "refresh": 30,
+                "fit": True,
+                "padding": 3,
+                "randomize": False,
+                "componentSpacing": 100,
+                "nodeRepulsion": 400000,
+                "edgeElasticity": 100,
+                "nestingFactor": 5,
+                "gravity": 80,
+                "numIter": 1000,
+                "initialTemp": 200,
+                "coolingFactor": 0.95,
+                "minTemp": 1.0,
+            },
     app = dash.Dash(
         __name__,
         external_scripts=external_script,
+        external_stylesheets=[dbc.themes.FLATLY] 
     )
     app.scripts.config.serve_locally = True
 
-    positions  = [ {"x":random.randint(1,1000), "y":random.randint(1,30000)} for _ in nodes ]
+    #positions  = [ {"x":random.randint(1000,5000), "y":random.randint(1,100)} for _ in nodes ]
 
-    # Define the app layout
-    app.layout = html.Div([
-        html.Div(children=[
-        html.Div(children=[
-            html.Div(f'Edge Details: ', style={'font-weight': 'bold', 'background':'#dfdfdf'}),
-            html.Div(id='hover-data', className='bg-gray-500'),
-        ], className="w-96 flex-none bg-amber-500"),
-        html.Div([
-        cyto.Cytoscape(
-            id='network-graph',
-            layout={'name': 'cose', 'avoidOverlap': True,  'nodeDimensionsIncludeLabels': True},
     elements=[
-                {'data': {'id': node, 'label': node, 'random_word': random_word, 'color': node_colors[node], 'position':pos}} for node, random_word, pos in zip(nodes, random_words, positions)
+                {'data': {'id': node, 'label': node_name[node], 'random_word': random_word, 'color': node_colors[node]}} for node, random_word in zip(nodes, random_words)
-            ] + [{'data': {'source': source, 'target': target}} for source, target in edges],  # Include the edges
+                ] + [{'data': {'source': source, 'target': target, 'color':'crimson'}} for source, target in edges],  # Include the edges
-            style={'width': '100%', 'height': '94vh'},
+
     stylesheet=[
                         {
                             'selector': 'node',
                             'style': {
                                 'background-color': 'data(color)',
+                                "width": "mapData(weight, 40, 80, 20, 60)",
                                 'label': 'data(label)',
                                 'font-size': '12px',
                                 'text-halign': 'center',
                                 'text-valign': 'top',  # Adjust the text position to 'top'
-                        'border-width': '1px',
+                                'border-width': '2px',
-                        'border-color': 'gray',
+                                'border-color': 'seagreen',
                                 'shadow-box': '2px',
                                 'content': 'data(label)',
                             }
@@ -248,7 +264,18 @@ def plot_group_graph(nodes, edges):
                             'selector': 'edge',
                             'style': {
                                 'width': 2,
-                        'line-color': 'gray',
+                                'background-opacity': 0.2,  # Set the opacity for the parent node
+                                'line-color': 'teal',
+                            }
+                        },
+                        {
+                            'selector': 'edge:selected',
+                            'style': {
+                                'border': 'crimson',
+                                'border-opacity': 0.2,
+                                'width': 4,
+                                'background-opacity': 0.2,  # Set the opacity for the parent node
+                                'line-color': 'crimson',
                             }
                         },
                         {
@@ -266,19 +293,109 @@ def plot_group_graph(nodes, edges):
                         {
                             'selector': ':selected',
                             'style': {
-                        'border-width': 2,  # Set the border width for selected nodes
+                                'border-width': 4,  # Set the border width for selected nodes
-                        'border-color': 'aqua',  # Set the border color for selected nodes
+                                'border-color': 'crimson',  # Set the border color for selected nodes
                             }
                         },
                     ],
-            className="bg-surface-200 flex-none",
+    
+    # Define the app layout
+    app.layout = html.Div([
+        html.Div(children=[
+            html.Div(children=[
+                dcc.Tabs([
+                    dcc.Tab(label='Tab 1',children=[
+                        html.Div(children=[
+                            html.Div(f'Node Details: ', className='p-2'),
+                            dcc.Slider(id='slider', min=1, max=500, step=20),
+                            html.Button('Reset', id='bt-reset', className='btn bg-teal-500 p-2 text-white hover:bg-teal-600'),
+                            dcc.Dropdown(['cose', 'cola', 'random', 'circle'], 'cose', id='graph-mode-dropdown'),
+                            dcc.Input(
+                                id="input_{}".format("text"),
+                                type="text",
+                                placeholder="input type {}"
                                 ),
-        ]),], className="flex w-full h-full"),
+                            html.Div(id='out-all-types', className=''),
+                        ], className='p-2 space-y-2'),
+                    ]),
+                    dcc.Tab(label='Tab 2', children=[
+                        html.Div(children=[
+                            html.Div(f'Edge Details: '),
+                            html.Div(id='hover-data', className=''),
+                        ], className='space-y-2 p-2'),
+                    ]),
+                ]),
+            ], className="w-96 flex-none"),
+            html.Div(children=[
+                dcc.Tabs([
+                    dcc.Tab(label='OAM',children=[
+                        html.Div(children=[
+                            cyto.Cytoscape(
+                                id='network-graph',
+                                layout=layout[0],
+                                zoomingEnabled=True,
+                                zoom=0.9,
+                                responsive=True,
+                                elements=elements[0],
+                                style={'width': '100%', 'height': '88vh', 'background':'#dfdfdf'},
+                                stylesheet=stylesheet[0],
+                            )
+                        ], className="bg-amber-50 p-4 flex"),
+                    ]),
+                    dcc.Tab(label='VPN Registration',children=[
+                        html.Div(children=[
+                            cyto.Cytoscape(
+                                id='network-graph',
+                                layout=layout[0],
+                                zoomingEnabled=True,
+                                zoom=0.9,
+                                responsive=True,
+                                elements=elements[0],
+                                style={'width': '100%', 'height': '88vh', 'background':'#efefef'},
+                                stylesheet=stylesheet[0],
+                            )
+                        ], className="bg-amber-50 p-4"),
+                    ]),
+                ]),
+            ], className="w-[calc(100%-24rem)] h-[calc(100%-16rem)]"), ], 
+        className="flex w-full h-full"),
     ])
 
+    @app.callback(
+        [Output('network-graph', 'zoom'),
+         Output('network-graph', 'elements')],
+        [Input('bt-reset', 'n_clicks')]
+    )
+    def reset_layout(n_clicks):
+        print(n_clicks, 'click')
+        return [0.5, elements[0]]
+
+    @app.callback(
+            Output('network-graph', 'layout'),
+            [Input('graph-mode-dropdown', 'value')]
+    )
+    def graph_mode(value):
+        print(value)
+        tmp_layout = layout[0]
+        tmp_layout['name'] = value
+
+        return tmp_layout
+
+    # @app.callback(
+    #         Output('network-graph', 'layout'),
+    #         [Input('slider', 'value')]
+    # )
+    # def update_zoom(value):
+    #     print(value)
+    #     tmp_layout = layout[0]
+    #     tmp_layout['idealEdgeLength'] = value
+
+    #     return tmp_layout
+
+    
     @app.callback(
         Output('hover-data', 'children'),
-        Input('network-graph', 'mouseoverNodeData')
+        Input('network-graph', 'tapNodeData')
     )
     def display_hover_data(data):
         if data:
@@ -289,8 +406,18 @@ def plot_group_graph(nodes, edges):
         else:
             return ''
 
+    @app.callback(
+        Output("out-all-types", "children"),
+        Input("input_{}".format('text'), "value"),
+    )
+    def cb_render(*vals):
+        return html.Div([
+            html.Div(f'Input: {vals}', style={'font-weight': 'bold', 'background':'#dfdfdf'}),
+        ])
+
+    
     if __name__ == '__main__':
-        app.run_server(debug=False)
+        app.run_server(debug=True, use_reloader=True)
 
 
 def plot_net_graph(nodes, edges):
@@ -486,6 +613,4 @@ def plot_graph(in_nodes, in_edges):
                     )
     fig.show()
 
-# Push Config
+#plot_group_graph()
-line_process()
-#plot_graph()