Table of Contents

Execution Page

The Execution page is the run cockpit: the simulation plays here, and every panel on it reads the run. It is the app's landing route — / redirects to /execution — and its Control Tree, the Execution root with Mission and Program beneath it, rides the ?tree= query, so /execution?tree=execution/mission deep-links the Mission editor.

Note

The app says Execution throughout: the route /execution, the REST endpoints (/api/Execution/*), the status hub (/executionStatusHub) and the stored layout (UserConfig.ExecutionDivConfig). The HiAPI engine keeps its own library vocabulary — PlayerCommand (API) and PacePlayer (API) — which is a different codebase's naming, not an inconsistency here.

Key Models

  • LocalProjectService — the project data service the whole page reads.
  • MachiningProject — reached through the displayee bound to the canvas.
  • UserService — per-user configuration, including the stored panel layout.

Layout

Four columns, left to right. The two dock dividers are pixel-sized, so dragging one moves only that dock's edge while the flexible middle absorbs the change.

  • Left dock — the Control Tree over the primary editor panel for the selected tree node. The Execution Tool Bar — the transport buttons — sits atop that panel and is shown for the Execution root and every node under it.
  • Main — the RenderingCanvas over the Session Message Panel, stacked as collapsible panels with a draggable divider between them. The canvas panel's header adopts the RenderingCanvas Tool Bar and the Execution Extended RenderingCanvas Tool Bar.
  • Strip Charts — the strip-chart group bar over the three Strip Charts: Availability Chart, Surface Roughness Chart and Color Index Time Chart.
  • Step Info — Sentence Syntax as its own region (an NC sentence need not map to any machining step, so it is not a member of the step-based panels), then the Step Info group bar, then Step Properties, CWE (cutter–workpiece engagement) and the four Cycle-Line Charts.

The four columns are toggled from the app menu bar; the panels inside them collapse in place from their own expansion headers. The canvas stays mounted while collapsed so its rendering connection survives, and its engine is paused rather than torn down. The page itself also stays mounted while the user is on another route: the shell wraps the router view in a keep-alive keyed on the project epoch, so navigating away pauses the canvas but keeps the page — and its connection — alive until the loaded project changes.

Control Tree

The page hosts an execution-scoped Control Tree: an Execution root with the Mission branch above the Program branch. Selecting a node fills the primary editor pane below the tree, and the Execution Tool Bar is mounted on top of that pane whenever the selected id is execution or starts with execution/ — so the transport stays reachable from every node of this tree.

Execution root is the cockpit's home: a short orientation panel, because the controls it would otherwise hold live where they act — the transport on the primary pane's header, the panel switches on each panel's own expansion header, the column switches on the nav bar. The live run state rides the tree itself: the Execution tree item carries a status badge fed by /executionStatusHub.

Mission (execution/mission) is the editable command list a run executes — the project's PlayerCommand (API), always a list, with nested lists read as sub-trees. Its ItemType registry supplies the tree checkbox that decides whether a command runs. The branch root is the entry-list editor — Add Command over a drag-reorderable row list with up / down / duplicate / delete — each command entry gets a control bar over that kind's own editor, and each of the kind's remaining setting groups becomes a section child of the command node. Every command type has its own page under Mission.

Program (execution/program) is the read-only inspection twin of Mission: one node per NC source file the session read, its passes and execution marks filled in from run data rather than typed in. Its nodes, its per-pass line and mark views, and the status changes that rebuild it are on Program Branch.

Selection and URL are synced two ways through the tree query argument: the URL's ?tree= is adopted once the tree is built, and every selection change replaces it. A ?tree= id belonging to another page's tree redirects to that page (routeForTreeId), and /mission lands on /execution?tree=execution/mission.

RenderingCanvas Behavior

The canvas is split across the two sides: the browser component owns a canvas element and its connection, the server owns the displayee.

  1. The browser component opens a SignalR connection to /renderingHub and streams frames. It holds no displayee of its own.
  2. POST /api/Execution/initialize/{connectionId} resolves that connection's engine on the server, binds ProjectDisplayeeService.ExecutionDisplayee to the engine's DispEngine.Displayee unless one is already bound there, and snaps the camera to the home view through SetViewToHomeView().
  3. The displayee receives project data from LocalProjectService.
  4. The connection is per rendering session, so a collapsed canvas keeps its connection and only stops drawing; the engine is paused while the panel is collapsed or the page is off-screen.

Isometric is one of the view presets the user picks from the RenderingCanvas Tool Bar — alongside front, back, right, left, top and bottom — not the load-time view.

Source Code Path

See HiNC App Anatomy for git repository links.

HiNC-2025-webservice (Quasar CLI SPA):

Page, routing and Control Tree:

  • wwwroot-src/src/pages/ExecutionPage.vue — the routed page at /execution: the four columns, their pixel / ratio splitters, the panel-expansion stacks, and the execution-scoped Control Tree host it provides.
  • wwwroot-src/src/router/routes.ts — the / → execution redirect, the execution route, and the /mission redirect to /execution?tree=execution/mission.
  • wwwroot-src/src/router/treeRoutes.ts — routeForTreeId, which lands a ?tree= id on the page that owns that branch.
  • wwwroot-src/src/components/controlTree/useControlTreeHost.ts — the Control Tree state machine: buildExecutionRoot() builds the execution root holding execution/mission above execution/program, syncs ?tree=, and re-reads the Program branch whenever the broadcast execution status changes.
  • wwwroot-src/src/components/controlTree/ControlTreeDock.vue — the left dock: the Control Tree row over the primary editor row.
  • wwwroot-src/src/components/controlTree/ControlTreePanel.vue — the tree pane; carries the live execution-status badge on the Execution tree item.
  • wwwroot-src/src/components/controlTree/PrimarySlavePanel.vue — the primary editor pane for the selected node; mounts the Execution Tool Bar on top whenever the selection is execution or a descendant.
  • wwwroot-src/src/components/controlTree/ExecutionRootPanel.vue — the editor panel of the Execution root node.

Mission branch:

  • wwwroot-src/src/components/controlTree/missionItemTypes.ts — the branch's ItemType registry and the per-command enable ticks.
  • wwwroot-src/src/components/controlTree/MissionRootPanel.vue — the entry-list editor of a list command, serving the branch root and every nested list.
  • wwwroot-src/src/components/controlTree/MissionCommandSlavePanel.vue — the per-command editor host.
  • wwwroot-src/src/components/controlTree/MissionSectionPanel.vue — one setting section of a command.

Program branch (see the dedicated anatomy page for details):

  • Program Branch — the branch's ItemType registry, its root, file and conversion panels, and the read-only endpoints behind them.

Panels and canvas:

  • wwwroot-src/src/components/RenderingCanvas.vue — the browser canvas and its /renderingHub connection.
  • wwwroot-src/src/components/execution/ExecutionToolBar.vue — the transport controls.
  • wwwroot-src/src/components/execution/ExecutionExtendedToolBar.vue — the view and rendering-flag controls adopted onto the canvas panel's header.
  • wwwroot-src/src/components/execution/SelectedStepInfoPanel.vue — Step Properties.
  • wwwroot-src/src/components/execution/StepVolumePanel.vue — the CWE panel.
  • wwwroot-src/src/components/execution/SyntaxPiecePanel.vue — Sentence Syntax.
  • wwwroot-src/src/components/execution/SessionMessagePanel.vue — the message panel and its four sink tabs.
  • wwwroot-src/src/components/panels/PanelExpansion.vue and wwwroot-src/src/components/panels/ResizablePanelStack.vue — the collapse-in-place panels and their draggable heights.
  • wwwroot-src/src/layouts/MainLayout.vue — the shell whose keep-alive wrapper, keyed on the project epoch, holds this page mounted across navigation.

Charts (see the dedicated anatomy pages for details):

Shared chart primitives under wwwroot-src/src/components/execution/charts/:

  • wwwroot-src/src/components/execution/charts/UplotChart.vue — thin uplot wrapper with ResizeObserver and reactive data / series / bands bindings.
  • wwwroot-src/src/components/execution/charts/BaseStripChart.vue — strip-chart skeleton: min / max banded series, header aspect picker, wheel / drag / click pointer handlers.
  • wwwroot-src/src/components/execution/charts/BaseCycleLineChart.vue — cycle-line skeleton that takes a fetcher prop and re-fetches when the step selection changes.

Backends:

  • Execution/ExecutionController.cs — POST /api/Execution/start | pause | resume | run-line | run-step | stop | reset; GET status, status/{connectionId}, project-status, selected-step-info and cl-strip-dots; the canvas actions initialize/{connectionId} (binds the displayee and calls SetViewToHomeView) and fit-view/{connectionId}; and the step-volume/{connectionId} family behind the CWE panel.
  • Execution/ExecutionStatusHub.cs + Execution/ExecutionStatusService.cs — /executionStatusHub, the run-state broadcast that drives the transport and the tree badge.
  • Execution/SessionSinkHub.cs + Execution/SessionSinkBroadcastService.cs — one hub per message sink (/shellMessageHub, /ncDiagnosticHub, /stepDiagnosticHub, /ncManipulationDiagnosticHub), so a client subscribes to exactly the sink it wants.
  • Execution/SelectedStepInfoService.cs — the selected-step payload. It has no hub of its own: the “selection changed” push rides /clStripHub.
  • Execution/ClStripController.cs + Execution/ClStripHub.cs + Execution/ClStripBroadcastService.cs — CL-strip range state and the zoom / pan / select / enter broadcasts.
  • Execution/ExecutionChartsController.cs — the strip-chart and cycle-line-chart data endpoints under /api/execution.
  • Disp/RenderingHub.cs + Disp/RenderingService.cs — the shared /renderingHub every page's RenderingCanvas connects to, keyed per rendering connection id.
  • Disp/ExecutionDisplayee.cs — the server-side displayee bound to the connection's engine.
  • Common/ProjectDisplayeeService.cs — owns the ExecutionDisplayee instance handed to the engine on initialize.

Building an Equivalent Page

Tip

When building an execution cockpit on top of HiAPI:

  1. Create the layout with a RenderingCanvas.
  2. Set up the canvas behavior.
  3. Add the Execution Tool Bar.
  4. Add the Execution Extended RenderingCanvas Tool Bar with the CL-strip, fit-view and rendering-items behaviors.
  5. Reach the page from the navigation menu on Main Panel.
  6. Make it the landing page, with its tool bars.
  7. Build the Session Message Panel and the Selected-Step Info Panel, and put the button that opens the Step Present Dialog on the latter's title bar.

Pages

Ordered as the cockpit reads: the two tool bars across the top, the step column and the charts down the side, the menus and dialogs they open, then the Control-Tree branch the page hosts.

See Also