Skip to content

Improve network data display #298

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
FBumann wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Improve network data display #298

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b8b9506
Improve network data display
FBumann Sep 3, 2025
f4d3cb1
Merge remote-tracking branch 'origin/main' into feature/network
FBumann Oct 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
193 changes: 192 additions & 1 deletion flixopt/network_app.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -687,8 +687,199 @@ def update_visualization(
@app.callback(
Output('info-panel', 'children'), [Input('cytoscape', 'tapNodeData'), Input('cytoscape', 'tapEdgeData')]
)
def display_element_info(node_data, edge_data):
def display_element_data(node_data, edge_data):
ctx = callback_context

def display_node_info(data):
"""Display node information"""
node_id = data['id']
label = data.get('label', node_id) # Use label if available
parameters = data.get('parameters', '')

components = [
html.H4(
f'Node: {node_id}',
style={
'color': 'white',
'margin-bottom': '10px',
'margin-top': '5px',
'border-bottom': '1px solid #3498DB',
'padding-bottom': '5px',
},
)
]

# Add label if it's different from the ID
if label and label != node_id:
components.append(
html.Div(
[
html.Strong('Label: ', style={'color': '#3498DB'}),
html.Span(label, style={'color': '#BDC3C7'}),
],
style={'margin': '8px 0', 'line-height': '1.4'},
)
)

# Add parameters section
if parameters:
components.append(
html.Div(
[
html.Strong(
'Parameters:', style={'color': '#3498DB', 'display': 'block', 'margin-bottom': '5px'}
)
]
)
)

if isinstance(parameters, str):
lines = parameters.split('\n')
for line in lines:
if line.strip():
components.append(
html.Div(
line,
style={
'color': '#BDC3C7',
'margin': '3px 0',
'font-family': 'monospace',
'font-size': '12px',
'line-height': '1.3',
'white-space': 'pre-wrap',
'padding-left': '10px',
},
)
)
else:
components.append(html.Div(style={'height': '8px'}))
elif isinstance(parameters, dict):
for k, v in parameters.items():
components.append(
html.Div(
f'{k}: {v}',
style={
'color': '#BDC3C7',
'margin': '3px 0',
'font-family': 'monospace',
'font-size': '12px',
'line-height': '1.3',
'padding-left': '10px',
},
)
)
else:
components.append(
html.Div(
str(parameters),
style={
'color': '#BDC3C7',
'font-family': 'monospace',
'font-size': '12px',
'white-space': 'pre-wrap',
'padding-left': '10px',
},
)
)

return components
Comment on lines +693 to +785
Copy link
Contributor

@coderabbitai coderabbitai bot Oct 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

Critical: Helper function defined but never called.

The display_node_info helper is defined but never invoked. The callback at lines 889-899 still uses the old simple rendering logic instead of calling this new helper. This means the structured HTML rendering introduced by this PR is not actually active.

To activate the new helper, replace lines 889-899 with:

         if ctx.triggered[0]['prop_id'] == 'cytoscape.tapNodeData' and node_data:
-            return [
-                html.H5(
-                    f'Node: {node_data.get("label", "Unknown")}', style={'color': 'white', 'margin-bottom': '10px'}
-                ),
-                html.P(f'Type: {node_data.get("element_type", "Unknown")}', style={'color': '#BDC3C7'}),
-                html.Pre(
-                    node_data.get('parameters', 'No parameters'),
-                    style={'color': '#BDC3C7', 'font-size': '11px', 'white-space': 'pre-wrap'},
-                ),
-            ]
+            return display_node_info(node_data)
🤖 Prompt for AI Agents 
In flixopt/network_app.py around lines 693-785 the display_node_info(data)
helper is defined but never used; replace the old simple rendering logic in the
callback at lines 889-899 with a call to this helper so the structured HTML is
actually returned—specifically, call display_node_info(data) where the callback
currently creates the simple list/divs, and ensure you wrap or assign its
returned list as the callback output (e.g., set the component children to the
list returned by display_node_info or return
html.Div(children=display_node_info(data))) so the new formatted node info is
rendered.


def display_edge_info(data):
"""Display edge information"""
source = data.get('source', '')
target = data.get('target', '')
label = data.get('label', '')
parameters = data.get('parameters', '')

components = [
html.H4(
f'Edge: {source} → {target}',
style={
'color': 'white',
'margin-bottom': '10px',
'margin-top': '5px',
'border-bottom': '1px solid #E67E22',
'padding-bottom': '5px',
},
)
]

# Add label section (same formatting as nodes)
if label:
components.append(
html.Div(
[
html.Strong('Label: ', style={'color': '#E67E22'}),
html.Span(label, style={'color': '#BDC3C7'}),
],
style={'margin': '8px 0', 'line-height': '1.4'},
)
)

# Add parameters section (same formatting as nodes)
if parameters:
components.append(
html.Div(
[
html.Strong(
'Parameters:', style={'color': '#E67E22', 'display': 'block', 'margin-bottom': '5px'}
)
]
)
)

if isinstance(parameters, str):
lines = parameters.split('\n')
for line in lines:
if line.strip():
components.append(
html.Div(
line,
style={
'color': '#BDC3C7',
'margin': '3px 0',
'font-family': 'monospace',
'font-size': '12px',
'line-height': '1.3',
'white-space': 'pre-wrap',
'padding-left': '10px',
},
)
)
else:
components.append(html.Div(style={'height': '8px'}))
elif isinstance(parameters, dict):
for k, v in parameters.items():
components.append(
html.Div(
f'{k}: {v}',
style={
'color': '#BDC3C7',
'margin': '3px 0',
'font-family': 'monospace',
'font-size': '12px',
'line-height': '1.3',
'padding-left': '10px',
},
)
)
else:
components.append(
html.Div(
str(parameters),
style={
'color': '#BDC3C7',
'font-family': 'monospace',
'font-size': '12px',
'white-space': 'pre-wrap',
'padding-left': '10px',
},
)
)

return components
Comment on lines +787 to +880
Copy link
Contributor

@coderabbitai coderabbitai bot Oct 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

Critical: Helper function defined but never called.

Like display_node_info, this helper is defined but never invoked. The callback at lines 900-910 still uses the old simple rendering instead of calling this helper.

To activate the new helper, replace lines 900-910 with:

         elif ctx.triggered[0]['prop_id'] == 'cytoscape.tapEdgeData' and edge_data:
-            return [
-                html.H5(
-                    f'Edge: {edge_data.get("label", "Unknown")}', style={'color': 'white', 'margin-bottom': '10px'}
-                ),
-                html.P(f'{edge_data.get("source", "")} → {edge_data.get("target", "")}', style={'color': '#E67E22'}),
-                html.Pre(
-                    edge_data.get('parameters', 'No parameters'),
-                    style={'color': '#BDC3C7', 'font-size': '11px', 'white-space': 'pre-wrap'},
-                ),
-            ]
+            return display_edge_info(edge_data)
🤖 Prompt for AI Agents 
In flixopt/network_app.py around lines 787-880 a new helper function
display_edge_info is defined but never used; update the callback that renders
edge details (currently at lines ~900-910) to call display_edge_info(data)
instead of the old simple rendering so the detailed edge UI is used;
specifically replace the current rendering lines with a call to
display_edge_info(edge_data) (or the existing variable name for the edge's data)
and return its components (or wrap them in the same container the callback
expects) so the helper's output is displayed.


# Check which input triggered the callback
if not ctx.triggered:
return [
html.P('Click on a node or edge to see details.', style={'color': '#95A5A6', 'font-style': 'italic'})
Expand Down