Improve network data display #298
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# Conflicts: # flixopt/network_app.py
Contributor
WalkthroughRenamed the info-panel callback function to display_element_data and introduced two inner helpers (display_node_info, display_edge_info) to render structured HTML for node/edge details. The callback’s trigger behavior for taps is unchanged; rendering now delegates to the helpers for consistent formatting across parameter types. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant U as User
participant NG as Network Graph
participant CB as display_element_data()
participant NI as display_node_info()
participant EI as display_edge_info()
participant IP as Info Panel
U->>NG: Tap node or edge
NG->>CB: Callback with node_data / edge_data
alt Node tapped
CB->>NI: Build node details HTML
NI-->>CB: Node HTML
CB-->>IP: Render node info
else Edge tapped
CB->>EI: Build edge details HTML
EI-->>CB: Edge HTML
CB-->>IP: Render edge info
else No selection
CB-->>IP: Placeholder/empty output
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Member
Author
|
Not sure what this does atm |
FBumann
added
the
Not in Focus
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
flixopt/network_app.py (1)
736-783: Extract shared parameter rendering logic.The parameter rendering code (lines 736-783 and 831-878) is nearly identical between
display_node_infoanddisplay_edge_info, differing only in the accent color. Extract this into a shared helper to reduce duplication and improve maintainability.Add a new helper function within the callback:
def render_parameters(parameters, accent_color): """Render parameters section with consistent formatting""" if not parameters: return [] components = [ html.Div([ html.Strong( 'Parameters:', style={'color': accent_color, '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 componentsThen update both helpers to use it:
def display_node_info(data): # ... existing code for header and label ... - # Add parameters section - if parameters: - components.append(...) # old parameter rendering code + # Add parameters section + components.extend(render_parameters(parameters, '#3498DB')) return components def display_edge_info(data): # ... existing code for header and label ... - # Add parameters section - if parameters: - components.append(...) # old parameter rendering code + # Add parameters section + components.extend(render_parameters(parameters, '#E67E22')) return componentsAlso applies to: 831-878
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
flixopt/network_app.py(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: test (3.10)
- GitHub Check: test (3.11)
- GitHub Check: test (3.13)
- GitHub Check: test (3.12)
🔇 Additional comments (1)
flixopt/network_app.py (1)
690-692: Function rename looks good.The rename from
display_element_infotodisplay_element_datais clear and the signature remains compatible with the callback inputs.
Comment on lines
+693
to
+785
| 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 |
Contributor
There was a problem hiding this comment.
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.
Comment on lines
+787
to
+880
| 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 |
Contributor
There was a problem hiding this comment.
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.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Brief description of the changes in this PR.
Type of Change
Related Issues
Closes #(issue number)
Testing
Checklist
Summary by CodeRabbit
New Features
Refactor