Add in-app network editor#3
Conversation
Allow users to create new networks and edit traffic types, nodes, profiles, and edges directly in the WPF application.
There was a problem hiding this comment.
Code Review
This pull request introduces comprehensive in-app network editing capabilities to the MedW Network Simulator. Key changes include replacing static text displays with editable text boxes for network metadata, adding a 'Network Editor' tab with data grids for managing traffic types, nodes, and edges, and refactoring ViewModels to support two-way data binding and dynamic updates. The feedback focuses on improving the user experience by using combo boxes for ID selection, centralizing hardcoded colors into resources, and optimizing performance during bulk updates to prevent redundant UI refreshes.
| Padding="10,8" | ||
| FontSize="28" | ||
| FontWeight="SemiBold" | ||
| Background="#FFFDF9F3" |
There was a problem hiding this comment.
| SelectionMode="Single" | ||
| SelectionUnit="FullRow"> | ||
| <DataGrid.Columns> | ||
| <DataGridTextColumn Binding="{Binding TrafficType, Mode=TwoWay}" Header="Traffic Type" Width="*" /> |
There was a problem hiding this comment.
Using a DataGridTextColumn for the traffic type requires users to manually type the name, which is error-prone. Since TrafficTypeNameOptions is available in the ViewModel, using a DataGridComboBoxColumn would provide a much better user experience.
<DataGridComboBoxColumn Header="Traffic Type" Width="*" SelectedItemBinding="{Binding TrafficType, Mode=TwoWay}" ItemsSource="{Binding DataContext.TrafficTypeNameOptions, RelativeSource={RelativeSource AncestorType=Window}}" />
| <DataGridTextColumn Binding="{Binding FromNodeId, Mode=TwoWay}" Header="From" Width="82" /> | ||
| <DataGridTextColumn Binding="{Binding ToNodeId, Mode=TwoWay}" Header="To" Width="82" /> |
There was a problem hiding this comment.
The From and To node identifiers are currently editable via text boxes. It is highly recommended to use DataGridComboBoxColumn bound to NodeIdOptions to allow users to select existing nodes from a dropdown, preventing invalid references.
<DataGridComboBoxColumn Header="From" Width="82" SelectedItemBinding="{Binding FromNodeId, Mode=TwoWay}" ItemsSource="{Binding DataContext.NodeIdOptions, RelativeSource={RelativeSource AncestorType=Window}}" />
<DataGridComboBoxColumn Header="To" Width="82" SelectedItemBinding="{Binding ToNodeId, Mode=TwoWay}" ItemsSource="{Binding DataContext.NodeIdOptions, RelativeSource={RelativeSource AncestorType=Window}}" />
|
|
||
| private void RefreshTrafficSummariesFromCurrentState() | ||
| { | ||
| TrafficTypes.Clear(); |
There was a problem hiding this comment.
| private void HandleNodeIdChanged(object? sender, ValueChangedEventArgs<string> e) | ||
| { | ||
| foreach (var edge in Edges) | ||
| { | ||
| if (Comparer.Equals(edge.FromNodeId, e.OldValue)) | ||
| { | ||
| edge.FromNodeId = e.NewValue; | ||
| } | ||
|
|
||
| if (Comparer.Equals(edge.ToNodeId, e.OldValue)) | ||
| { | ||
| edge.ToNodeId = e.NewValue; | ||
| } | ||
| } | ||
|
|
||
| Edges.Add(new EdgeViewModel(edgeModel, sourceNode, targetNode)); | ||
| RefreshDerivedStateAfterStructureChange("Updated node identifiers and any connected edges."); | ||
| } |
There was a problem hiding this comment.
Updating node identifiers or traffic type names triggers a full RefreshDerivedStateAfterStructureChange for every connected edge or profile updated in the loop. For networks with many connections, this redundant processing (clearing collections, recalculating workspace, etc.) could lead to UI performance issues. Consider suppressing refreshes until the bulk update is complete.
Allow users to create new networks and edit traffic types, nodes, profiles, and edges directly in the WPF application.