Table of Contents

Strip Charts

The strip charts visualise a windowed, downsampled view of the full mission timeline for physics / quality aspects that are computed per step across the whole NC program. They are rendered as min/max banded series over the ClStrip.GetDispBegin() .. AbsDispEnd window. Operators use them to spot which segments of the mission are loading the spindle, degrading surface quality, or hitting thermal limits.

They occupy the Strip Charts column of the Execution Page. The anatomy covers three, all sharing BaseStripChart.vue:

Chart Source Aspect Items
Availability Chart Availability Yielding-stress / max-spindle-torque / max-spindle-power / spindle-working-temperature / thermal-yield ratios (5 series).
Surface Roughness Chart SurfaceRoughness Re-cut depth + program-side cusp + Δ tip deflection X / Y / Z in µm (5 series).
Color Index Time Chart Individual One series of a user-picked StepPropertyAccessDictionary key (≈90 keys).

Key Model: MachiningProject via LocalProjectService.ClStrip + LocalProjectService.StepPropertyAccessDictionary.

Layout

One group bar drives all three charts, and each chart is a collapsible panel below it.

  • Group Bar
    • Range chip — [{dispBegin}..{absDispEnd}] / {count}, with Showing steps {begin}..{end} of {count} total as its tool-tip.
    • Cursor x readout — the hovered x value, shared by all three charts and reserving a fixed width so hovering never reflows the bar. It is the one place the hovered value is printed; the charts themselves carry no per-chart cursor row.
    • X-axis mode — IndexByTime (default) / IndexByStep, applied to every strip chart at once.
    • Fit View — fits the 3D canvas to the tool path / home position. Disabled without a rendering connection id, and the only control here that acts on something other than the charts.
    • Stick disp-end to live end — keeps the window pinned to the running end of the mission. The state is dispEnd === -1, so a pan or a wheel turns it off by writing a concrete end, and Reset re-arms it.
    • Reset display range — returns the window to the whole mission.
    • Reload all strip charts.
  • Each chart panel
    • Header — title label; the aspect picker on the Color Index chart, a dropdown listing every StepPropertyAccessDictionary key with a GetQuantityFunc, sorted by PresentAttribute.Name and filtered by a type-to-search field; the Y-axis range editor (Fit / Lock / Symmetric with a ± bound); and, on the Color Index chart only, a Colors dropdown editing the colour guide's floor / ceiling / tone function. That editor drives the 3D workpiece colouring and the colour-scale bar, not the chart's own line.
    • Body — UplotChart.vue rendering one min/max band pair per item (two stroked series of the same colour plus a filled band at 15% opacity), with uPlot's own legend panel in a splitter pane beside the plot. The legend carries the swatches, labels and live values; its width is shared by all three charts, so dragging one divider moves them together.
    • Empty-state overlay — in order: “No project loaded”; “Pick a property to inspect” (Color Index with no key chosen); “No mission data” when the fetch returned none; “No physics data” when every item's min / max arrays are all NaN, which is what Availability looks like without a physics licence.

Behavior

  • Windowed fetch. Only the ClStrip.GetDispBegin() .. AbsDispEnd window is fetched, at a bucket count matching the chart's pixel width. The server-side ClStrip.GetMinMaxList(threshold, itemCount) handles down-sampling.
  • Pointer interactions — every one of them writes the shared ClStrip, so a gesture on one chart moves all three:
    • wheel over the plot area → POST /api/execution/cl-strip/wheel with scale = Math.pow(1.05, deltaY * 1/166) + xPositionPercentage.
    • Right / middle-button drag → POST /api/execution/cl-strip/pan with accumulated xOffsetPercentage. Frame-batched via requestAnimationFrame. Pen drags also pan without a button modifier.
    • Left-button drag → a rubber-band x-range zoom: a translucent band tracks the drag over the plot area and the release POSTs the swept fractions to /api/execution/cl-strip/zoom-range. A drag under 6 px, or under half a percent of the plot width, is discarded so the trailing click selects a step instead — which is what makes click-to-select survive an unsteady hand. The gesture is mouse-only.
    • Left click → POST /api/execution/cl-strip/select-step with the nearest bucket's original step index (via chart.valToPos reverse lookup). A click that ended a pan or a zoom drag is ignored.
    • Touch → one finger pans, a second finger converts the pan into an x-axis pinch-zoom; the trailing synthetic click is swallowed so panning past a step never selects it.
    • Mouse move (debounced 80 ms) → POST /api/execution/cl-strip/enter-step for hover, which is also what fills the group bar's cursor readout.
  • Live refresh. useClStripHub subscribes to DispRangeChanged (re-fetch when anyone else zooms / pans) and Updated (coalesced re-broadcast while a mission is running). A rising edge on the execution status hub's hasProject also triggers a refetch.
  • Client-side debounce. BaseStripChart.load() is debounced 50 ms on the client so a burst of Updated events during a fast-running mission coalesces into one fetch.

Source Code Path

See HiNC App Anatomy for git repository links.

HiNC-2025-webservice (Quasar CLI SPA):

  • wwwroot-src/src/components/execution/charts/StripChartGroupBar.vue — the group bar over the three charts.
  • wwwroot-src/src/components/execution/charts/BaseStripChart.vue — shared strip-chart skeleton.
  • wwwroot-src/src/components/execution/charts/UplotChart.vue — uplot wrapper.
  • wwwroot-src/src/components/execution/charts/PluralStripAvailabilityChart.vue — availability chart.
  • wwwroot-src/src/components/execution/charts/PluralStripRoughnessChart.vue — surface-roughness chart.
  • wwwroot-src/src/components/execution/charts/StripIndividualChart.vue — aspect-picker individual chart.
  • wwwroot-src/src/api/clStrip.ts — typed REST wrappers for the range calls.
  • wwwroot-src/src/composables/useClStripHub.ts — singleton hub wrapper (the same ref-counting pattern as the other execution hubs).
  • Execution/ExecutionChartsController.cs — strip-chart data:
    • GET /api/execution/strip-chart?aspect=Availability|SurfaceRoughness|Individual&xValueCategory=IndexByTime|IndexByStep&widthHint=…&dispBegin=…&dispEnd=…&inspectingKey=… → { xs, indexes, items:[{ key, label, unit, min, max }], isXTicksRangeMode, dispBegin, absDispEnd, count }. The Color Index chart's picked key rides the inspectingKey query parameter of that same call.
    • GET /api/execution/strip-chart-item-config and GET /api/execution/color-guide — the per-item display config and the colour legend.
  • Execution/ClStripController.cs — range manipulation at /api/execution/cl-strip/* (the server-side counterparts of the pointer handlers above):
    • GET range — snapshot { dispBegin, absDispEnd, count, selectedIndex, enteredIndex }.
    • POST disp-range body { dispBegin, dispEnd }, and POST zoom-range.
    • POST wheel body { scale, xPositionPercentage, xValueCategory }.
    • POST pan body { xOffsetPercentage, xValueCategory }. Legacy feelingRatio=2.
    • POST select-step body { stepIndex } → ClStrip.SetSelectedPos(...).
    • POST enter-step body { stepIndex } (nullable) → ClStrip.SetEnteredPos(...).
  • Execution/ClStripHub.cs + Execution/ClStripBroadcastService.cs — SignalR at /clStripHub. Broadcasts DispRangeChanged(snapshot), StepSelected({ stepIndex }), StepEntered({ stepIndex }), Updated(snapshot). A single-flight Interlocked mutex coalesces re-broadcasts; the client debounce handles the rest of the rate-limiting.

See Also