feat(frontend): add online monitoring to editor#119
Open
q-soriarty wants to merge 22 commits intodevelopfrom
Open
feat(frontend): add online monitoring to editor#119q-soriarty wants to merge 22 commits intodevelopfrom
q-soriarty wants to merge 22 commits intodevelopfrom
Conversation
Integrate PLC online mode directly into the editor canvas: - Add toolbar with Go Online/Offline controls and connection status indicator - Show live variable values on node ports and edges - Node execution state overlay (active/idle/error glow) - Active edges glow green with drop-shadow - Watch panel with fixed-column table, pushes canvas up instead of overlapping minimap - Node headers clip to rounded corners (overflow:hidden) - Remove standalone monitoring module (replaced) - Add demo page with mock PLC cycle for testing - Hide React Flow attribution badge Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Dark charcoal nodes with muted colored headers, data-type colored handles (BOOL=green, INT=blue, TIME=cyan) and edges colored by source port type. Neutral dark grey background without blue tint. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add EntryNode (PRG/method entry point with ENO exec output), IfNode (conditional with TRUE branch), ForNode (loop with DO exec output), and execution order computation utility. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add centralized design tokens (colors, fonts, shadows) with category color/label maps and port color resolver. Update port color utility with EXEC and expanded type support. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
MethodCallNode represents calling a method with VAR_INPUT params (Cycles, Temp) and RET return value. MethodEntryNode is the method body entry point with parameter outputs for downstream processing. Add variable mappings for both types. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Draggable comment-box style group node for visual organization. Header acts as drag handle, bottom-right corner for resize. Body area blocks node drag and selection propagation. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Register all new node types in nodeRegistry. Update FlowCanvas with group node support, port data types, and execution state on edges. Update NodeInspector with method node ports and labels. Add method items to NodePalette. Pass sourceExecState to edges so EXEC wires reflect execution state. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add header gradients for all node types including MethodCall, MethodEntry, and Entry (red/burgundy). Change active execution state border from green to white glow matching EXEC wire color. Force group nodes to z-index -1 to stay behind content nodes. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add MethodCall node to main exec chain with IF TRUE branch wiring and counter CV data connection. Add MethodEntry node for method body with Cycles output wired to FOR loop. Add visual group boxes for MAIN PRG and CleanupCycle METHOD scopes. Execution state logic: main chain always active, method branch active only when IF condition is true. Update supporting components (toolbar, watch panel, resize divider, I/O and FB nodes) for the restyled editor theme. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
EXEC port handles (EN/ENO/DO) now turn white when their node is actively executing, matching the white glow on EXEC edge lines. Data edges no longer glow — only EXEC wires reflect execution state. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
IF node now has both TRUE and FALSE output ports. Each branch port and its EXEC edge only glow white when the COND value matches (TRUE port when COND=true, FALSE port when COND=false). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Polling interval changed from 800ms to 100ms for realistic PLC simulation timing. Added TODO comments for planned features: status bar, variable declarations, watch panel tabs, debug console. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace InputNode/OutputNode with VarReadNode/VarWriteNode for clearer IEC 61131-3 semantics. Add ReturnNode for method/property return values with configurable data type. Add PropertyEntryNode for GET/SET accessor entry points with conditional VALUE output. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
VS Code-style thin bar at page bottom showing save status, PLC runtime state, ADS connection, cycle time (online mode), build server status, last build result, and deploy lock. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Rename Properties panel to Inspector. Add collapsible sections matching node palette style. Show POU info when no node selected (General, Methods, Properties). Add method detail view with breadcrumb navigation, visibility dropdown, searchable TypePicker popup, and REFERENCE TO toggle. Add property detail with GET/SET accessor views. Consistent key-value row layout throughout. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add propertyEntry to entry types in both computeExecutionOrder and computeExecutionChains. Entry nodes (entry, methodEntry, propertyEntry) are excluded from numbering as virtual nodes. Each chain is numbered independently starting from 1. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Register VarRead/VarWrite, Return, PropertyEntry in node registry and design tokens. Update Entry/MethodEntry subtitles to show type path. Rename MethodCall RET port to RETURN. Allow pan/zoom over group nodes via pointer-events passthrough. Add header gradients and styles for all new node types, StatusBar, Inspector sections, TypePicker popup, and toggle switches. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add Return, PropertyEntry port types to FlowCanvas PORT_DATA_TYPES for proper edge animation. Include group positions in debug dump. Move save indicator from toolbar to StatusBar. Update edge, watch, palette, and divider components for improved styling. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add AxisRef (GET), IsRunning (GET), BatchSize (GET+SET) property groups with PropertyEntry nodes, Return nodes, and data flows. Add parent Properties group. Include Return node in CleanupCycle method connected to Wash Pulse Q. Add StatusBar integration and mock online data for all property accessor chains. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Design notes for inferring node execution state in online mode. Two approaches: graph-based condition propagation for PRG/FB/method chains (no extra PLC code), and generated _ff_execCount counter for property GET/SET accessors (injected by code generator). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Summary
Test plan
npm run dev, open http://localhost:5173/🤖 Generated with Claude Code