PyCafe - Dash - Interactive Connection Manager

app.py
requirements.txt
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
import dash
from dash import *
import dash_bootstrap_components as dbc
import pandas as pd
import time
import json

# Initialize Dash app
app = dash.Dash(
    __name__,
    external_stylesheets=[dbc.themes.BOOTSTRAP],
    suppress_callback_exceptions=True,
)

# Layout of the app
app.layout = dbc.Container(
    [
        dbc.Row(
            [
                dbc.Col(
                    html.Div(
                        [  # Sidebar
                            html.H2("Sidebar"),
                            html.Hr(),
                            dcc.Dropdown(  # Dropdown menu
                                id="connector-dropdown",
                                options=[
                                    {"label": "IP", "value": "IP_connector"},
                                    {"label": "TCP", "value": "TCP_connector"},
                                ],
                                value="IP_connector",
                            ),  # Default option on launch
                            html.Div(
                                id="input-fields", children=[]
                            ),  # Dynamic input field
                            html.Button("Connect", id="connector-button", n_clicks=0),
                        ],
                        style={
                            "padding": "20px",
                            "backgroundColor": "#f8f9fa",
                            "height": "100vh",
                        },
                    ),
                    width=2,
                ),
                dbc.Col(
                    html.Div(
                        [  # Main content area
                            html.H2("Main content"),
                            html.Hr(),
                            html.Div(id="output", children=[]),
                        ],
                        style={"padding": "20px"},
                    ),
                    width=10,
                ),
            ]
        )
    ],
    fluid=True,
)


# Callback to dynamically change input fields based on source
@app.callback(
    Output(component_id="input-fields", component_property="children"),
    Input(component_id="connector-dropdown", component_property="value"),
)
def update_input_fields(connector_type):
    if connector_type == "IP_connector":
        return html.Div(
            [
                dcc.Input(
                    id={"index": "IP_input", "type": "CustomInput"},
                    type="text",
                    placeholder="Enter IP address",
                )
            ]
        )

    elif connector_type == "TCP_connector":
        return html.Div(
            [
                dcc.Input(
                    id={"index": "TCP1_input", "type": "CustomInput"},
                    type="text",
                    placeholder="Enter TCP1 address",
                ),
                dcc.Input(
                    id={"index": "TCP2_input", "type": "CustomInput"},
                    type="text",
                    placeholder="Enter TCP2 address",
                ),
            ]
        )
    else:
        return html.Div()


# Callback to retrieve data and upate the main content
@app.callback(
    Output(component_id="output", component_property="children"),
    Input(component_id="connector-button", component_property="n_clicks"),
    State(component_id="connector-dropdown", component_property="value"),
    State({"index": ALL, "type": "CustomInput"}, "id"),
    State({"index": ALL, "type": "CustomInput"}, "value"),
    prevent_initial_call=True,
)
def retrieve_data(n_clicks, connector_type, CustomIds, CustomInputs):
    connection = ''
    if n_clicks > 0:
        if connector_type:
            print(f'{connector_type.split("_")[0]} success!')
        connection_data = {CustomIds[x]['index']: str(CustomInputs[x]) for x in range(len(CustomInputs))}
        connection = f'{connector_type.split("_")[0]} - {connection_data}'
    return connection


# Run app
if __name__ == "__main__":
    app.run_server(debug=True)
Py.Cafe

interactive-connection-manager

Interactive Connection Manager
