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 — except on the Color Index chart an ID key (ToolId, FileNo), which is drawn as IDs in the colours the 3D view paints them with, and a color tree's key, which is drawn as one lane per leaf in the same colours (see Layout). 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 positions in the window that cut (ClStrip.GetFittingView: the box of the touched steps, or of every step when none touched), or to the home view without a strip. 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, each captioned with its unit as Step Properties prints it (unitLabel), sorted by each property's name in the interface language — PresentAttribute.Name in English, the step-field catalog's translation otherwise, where it has one — under that language's collation, and filtered by a type-to-search field over the name, short name, key and unit in either spelling (mm/min or mmdmin, never a unitless row's None) that ignores letter case, diacritics and character width and finds katakana by their hiragana (Typing and Searching); the Y-axis range editor (Fit / Lock / Symmetric with a ± bound), which the Color Index chart drops while its key is an ID or a color tree's, ignoring any range stored for that key (see Body for an ID key); 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. For ToolId and FileNo the guide has no range, and the dropdown reads This guide has no editable range.; for a color tree's key it lists the tree's leaves instead (see Body for a color tree).
- 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.
- Body for an ID key — the Color Index chart inspecting a key whose isCategorical is set (IsCategorical(API): ToolId and FileNo; a color tree's key is categorical too, but its item carries a colorTree and is drawn in lanes, see Body for a color tree) draws IDs instead of a min/max band: two grey (#616161) stepped series with no fill, where bucket i holds over (x[i−1], x[i]] because x[i] is where bucket i ends; a 6 px ID band of each bucket's colour along the bottom of the plot; a Y scale over the IDs present, from the lowest less half an ID and a margin that keeps its line clear of the ID band, to the highest plus half, with ticks on the IDs only, at least 16 px apart and labelled labelPrefix + ID (T16; the file number bare); a 25 % tint of each bucket's ID colour under the grid and the lines; and an 8 px swatch beside each tick, the ID band and the swatches outlined 1 px #616161. The colours are the answer's idColors. A bucket keeps only its lowest and highest ID, so one spanning IDs paints the upper half of its tint and band in the highest and the lower half in the lowest; an ID between them shows only after a zoom. A step without an ID is a gap, drawn in no colour, and hiding the series in the legend hides the colours too. The legend reads T3, or T1 ~ T3 for a bucket spanning IDs. The Y axis keeps the width all three charts share, so the plot areas stay aligned. While one ID key is inspected no poll rebuilds the chart — a new ID only rescales it, new colours only repaint it — and picking another key, another ID key included, rebuilds it. The header follows the picked key's isCategorical at once; the chart starts drawing IDs once an ID key's own data has arrived, and stops as soon as another key is picked, showing the previous values as an ordinary banded line until the new key's data arrives.
- Body for a color tree — drawn whenever the answer's item carries a colorTree, which the server sends for a tree's key alone (the project's tree or a script's); the mode rides on that field, never on isCategorical. It keeps the ID chart's frame:
  - Lanes — the y scale holds every lane 0 … n − 1, the tree's first leaf the highest, a lane no step of the window fell into included, so nothing rescales during a play. The grey staircases are each bucket's lowest and highest lane; the tint, the 6 px band and the swatches are painted from idColors alone, keyed by lane, and hiding the tree's row in the legend hides them.
  - Names on the axis — a lane's tick reads its leaf's name (an unnamed leaf's id), cut with … to 61 px in the axis font at grapheme boundaries of its NFC form (fitCategoryLabel), inside the gutter every strip chart already has, so the three plots keep one left edge.
  - Stripes — UplotChart's laneMasks (the item's leafMask) splits a bucket's 25 % tint into one stripe per leaf present, the top lane on top, each an equal share of the plot height; a mask of 0 draws no tint, and without a mask (over 32 leaves) the tint takes the ID chart's halves. The band keeps its halves.
  - Value bands — a leaf in leafValues draws two stepped edges in its lane at lane − 0.4 + 0.8 (v − lo) / (hi − lo), lo / hi the least and greatest finite value of the leaf's minima and maxima in the window, clamped to ±0.4: hi = lo draws the lane itself, ±Infinity sits on the lane's edge, a bucket without a value is a gap. Edges in the lane's colour at width 1.25, the fill at 15 %, the series keyed by leaf id.
  - Legend — the tree's row lists the leaves in the hovered bucket, top lane first, joined by / (without a mask, the highest and lowest joined by ~), — for none; a value leaf's row, <leaf> · <value name> and (<unit>) when it has one, reads the bucket's min ~ max, off the plot the window's lo ~ hi.
  - Height — the canvas is at least min(320, max(160, ⌈16 × 1.12 × n⌉ + 97)) px (categoryMinCanvasPx: 160 for 3 lanes, 295 for 11, 320 from 13 on, where the ticks thin again). Each mounted Individual chart publishes its card height into useStripChartGroup, and ExecutionPage.vue raises the Color Index panel's fill-floor to the largest, plus its 30 px header, above the default 240 px.
  - No rebuild per poll — the series, bands, lanes, tick formatter and least height come from one spec held as a string; a colour change rebuilds once.
  - The Colors dropdown — while the selected guide is a tree's (the colour guide's tree): Color tree: {name} (the key without a name), In the display range and the leaves in tree order — the leaf's own colour, its name or id, its steps and its share of the drawn time from the chart's latest leafTotals by leaf id, — while that answer is pending or another tree's — then a No value row when steps fell into no leaf, and Edit color tree → (?tree= the editTreeId, through the host's dirty-switch gate) or, for a script's tree, Registered at run, read-only. It sends no request.
- Empty-state overlay — in order: “No project loaded”; “Pick a property to inspect” (Color Index with no key chosen); “Not ready — reading the values of this property” while the strip has positions and the Color Index answer is pending (the host is still filling the inspecting slots for the picked key, or the key is not yet the project's); “No mission data” when the fetch returned none; then, when every item's min / max arrays are all NaN, “No mapped measurement data for this property” if the Color Index chart inspects a by-mapping property — one whose values are measurements paired onto the steps, so the gap is in the measured data — and “No physics data” otherwise, which is what Availability looks like without a physics licence. A color tree's chart shows neither: a window no step of which fell into a leaf is a result, drawn as its empty lanes.

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 step of the bucket under the pointer (stepIndexAtClientX, shared with the hover): the nearest point on a chart of magnitudes, and on a staircase — an ID's or a tree's — the first bucket whose x is at or after the pointer, since a bucket holds (x[i−1], x[i]]; the legend reads the same bucket. The step is the bucket's own first step (firstStepOfBucket: downsampled indexes[i − 1], dispBegin for bucket 0; raw the point's own step), and on a tree's chart leafStepIndex[i], the first step of its highest lane, unless that is −1. A click that ended a pan or a zoom drag is ignored. Once the select has answered, the chart hands the step to the Control Tree host's revealStepInProgram (injected as CONTROL_TREE_HOST): Follow off and, with the selection in the Program branch, the Program viewer brought to the step's file node, pass and line — see Program Branch.
- 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 (throttled: the first move fires at once, continued movement every 50 ms with the latest position, and nothing while the pointer stays on the same step — in a downsampled answer, within one bucket) → POST /api/execution/cl-strip/enter-step for hover, with the step a click there selects; the bucket the legend reads gives the group bar's readout its x (hoveredXLabel).
Step to bucket. The selected step's rule (selectedX) and the entered step's cursor (the StepEntered echo, setHoverIdx) go to the bucket that holds the step (bucketOfStep), on all three charts alike, whichever chart or the 3D view set it: downsampled, bucket i holds [indexes[i − 1], indexes[i] − 1] (bucket 0 from dispBegin), and the last bucket its own last step as well, the window's last step; raw, a point is its own step (a ceil search on indexes). On a staircase the cursor sits three quarters into its bucket (STEPPED_CURSOR_AT), where both of uPlot's readings name it.
Picked key first. Picking a key on the Color Index chart POSTs it to /api/execution/inspecting-key before the local key changes and the chart fetches; a POST that fails leaves the key the server holds and notifies. A project without an inspecting key gets the picker's fallback posted as its key. While the host fills the slots for the picked key the chart shows Not ready — reading the values of this property and fetches again on the Updated broadcast the scan's end raises. A key set elsewhere is followed: Set as color index on the Step Colors Branch announces it (inspectingKeyAnnouncement) and the chart adopts it; set in another tab or over the REST, the chart's own key answers pending with no item, and the first such answer reads the step properties and adopts their currentKey (a failed read is retried at a later pending answer, 5 s on at the soonest), never while the server still serves the chart's key.
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.
Single-flight load loop. Each chart runs its fetches through one loop that never overlaps two requests: a trigger arriving while a fetch is in flight only marks one more fetch as due, so a burst of Updated events during a fast-running mission coalesces into at most one extra fetch. Consecutive fetch starts are at least 500 ms apart (MIN_LOAD_INTERVAL_MS), capping a chart at two requests a second.
Fetch deadline. A strip-chart request that has not settled after 30 s is aborted and reported in a notification carrying the chart's title — Request timed out (30 s) when no answer had arrived — so the loop is free to fetch again rather than waiting on it for good.
Superseded and abandoned requests. A newer load() — an x-axis mode switch, a new Color Index key, a group reload — aborts the request its chart is still waiting on, and a chart that unmounts (its panel collapsed) aborts its own; the aborted call ends silently. On the server the strip walk checks the request's cancellation at every chunk of steps and every 8192 steps within one, stops there, and answers the shape-preserving empty payload without writing an error to the log.

Source Code Path

See HiNC App Anatomy for git repository links.

Web Application

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/api/executionCharts.ts — the strip-chart fetch, with its 30 s deadline (STRIP_CHART_TIMEOUT_MS) and the caller's abort signal, over fetchWithTimeout in wwwroot-src/src/api/http.ts; the whitelist parses of colorTree and the colour guide's tree (anything malformed reads as none); inspectingKeyAnnouncement.
wwwroot-src/src/i18n/en/charts.ts — the empty-state strings under charts.empty, and the Colors dropdown's tree strings under charts.coloring.
wwwroot-src/src/composables/useClStripHub.ts — singleton hub wrapper (the same ref-counting pattern as the other execution hubs).
wwwroot-src/src/composables/useStripChartConfig.ts — the Y-range and colour-guide state, colorGuideTree among it, the guide's answers applied in request order.
wwwroot-src/src/composables/useStripChartGroup.ts — the reload tick, the hovered x and the Color Index charts' card heights (cardFloorPx).
wwwroot-src/src/pages/ExecutionPage.vue — the Color Index panel's fill-floor, from cardFloorPx.
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, isCategorical, labelPrefix, idColors, colorTree }], isXTicksRangeMode, dispBegin, absDispEnd, count }. indexes holds a step a bucket: raw (isXTicksRangeMode false) the point's own; downsampled the next bucket's first step, the last bucket's the window's last step. unit, the legend's suffix and the Y axis title, is display text — for the Individual aspect the unit as Step Properties prints it (SelectedStepInfoService.UnitLabel: mm/min, empty for none), not the PhysicsUnit name. The Color Index chart's picked key rides the inspectingKey query parameter of that same call. The Individual aspect answers only the project's inspecting key (LocalProjectService.InspectingKey: every step keeps that key's value in its inspecting slot, which the series reads; an MC.<axis> key of a wrap-around rotary axis — the axes RotaryReadout.ModuloAxes names, Common/RotaryReadout.cs — is served folded into [0°, 360°) as the controller's position screen shows it, rounded to 0.001° first, the fold applied to each step's value before a bucket's min / max are taken, on the slot path and the registry-getter path alike, while the slot, the step and the step file keep the continuous angle, and every other key is served as it is): another key answers the empty payload with pending: true, and a key that is not a step property of the project answers it with unresolvedKey: true. After POST /api/execution/inspecting-key { inspectingKey } (→ { success, currentKey, messages }) the host fills every step's slot for the new key, and a read that met a step not yet filled answers pending: true with NaN there, beside inspectingGeneration, the generation the values were read under; pending is true as well when that generation moved under the walk. The chart reads again on the next Updated broadcast until pending is false. A script reads a key the same way: post it, read until pending is false (items empty with pending true means the key is not the project's — another client posted its own), and when done, while the project's key is still the one posted, post back the key the project held before, which GET /api/execution/strip-chart-item-config without a key answers as inspectingKey, since the key is saved with the project. isCategorical is true on an item whose value is an ID (ToolId, FileNo, a color tree's key). For a tree's key the inspecting slot holds the step's leaf id packed with the leaf's value, and the series is the lane of that leaf (CompiledStepColorTree.Leaf.Lane: the tree's first leaf the highest lane, its last leaf 0) — the registry is asked once a request whether the key is a tree's, and for its compiled tree — with NaN, a gap, for a step in no leaf; the registry, the 3D view, Step Properties and the step file read the leaf id. Such an item's labelPrefix is its CategoryLabelPrefix(API) — T for the tool ID, empty for the file number and a tree's key — and its idColors is { colors, noValueColor }: colors maps every integer in the answer's min / max — for a tree's key every lane of the tree instead, a lane no step of the window fell into included — keyed by its decimal string, to the #RRGGBB the 3D view paints it with, the selected guide's GetIdRgb(API): for the tool ID and the file number the ID's own discrete colour, for a tree's lane the hue the tree gives the lane's leaf (IdHues(API)). noValueColor is the colour the 3D view gives a step without an ID, which the chart itself leaves as a gap. idColors is filled only while the project's selected colour guide is that key's FuncDiscreteColorGuide(API), so the chart never shows colours the 3D view is not painting; a pick, or a Colors guide change, fetches again once the server has made it. labelPrefix and idColors are null on every other item, and min / max keep their shape. colorTree is null on every item but a tree's, where it is { key, name, editTreeId, leaves, leafMask, leafStepIndex, leafValues, leafTotals, noValueTotals, notes }, each per-bucket array aligned with xs:
  - name — the tree's name, its key when it has none; editTreeId — the Control-Tree id of the project's tree under the key on the Step Colors Branch, null for a script's tree.
  - leaves — tree order, { id, lane, name, hue, color, valueKey, valueLabel, valueUnitLabel, valueHidden }: name as authored (null or empty for none), hue in degrees, color the leaf's own #RRGGBB, the value fields null for a leaf showing none (valueUnitLabel empty for a unitless key or one the registry lacks), valueHidden for a physics value key the interface hides.
  - leafMask — a uint a bucket, bit lane per leaf a step fell into (test with (mask >>> lane) & 1: lane 31 is 2147483648); null over 32 leaves.
  - leafStepIndex — a bucket's first step in its highest lane, −1 for none.
  - leafValues — per leaf that shows a value and is not hidden, { lane, min, max } over that leaf's steps (the slot's float32, NaN for none); found by lane.
  - leafTotals { lane, id, steps, seconds } per leaf and noValueTotals { steps, seconds } — over the drawn steps (the window's positions with a step and a finite x); no leaf, a read that threw and a stale slot count as no value, the seconds are StepDuration, provisional while pending.
  - notes — empty.
- GET /api/execution/step-properties → { success, currentKey, keys:[{ key, name, shortName, unit, unitLabel, source, isMapping, isCategorical }], generation } — the property picker's list. unit is the PhysicsUnit name (mmdmin, None for none), unitLabel the picker's caption, the unit as Step Properties prints it (mm/min, empty for none); source is colorTree for a tree's key, else builtIn (the step's own fields and the MC. keys), projectVariable, training or session, as the color trees' key options say it. isCategorical — true for ToolId, FileNo and a tree's key — puts the header in its ID mode as soon as the key is picked; generation, the registry generation the list was read at, makes the picker read it again when the execution status names another. A currentKey standing in for a hidden physics key is never a tree's.
- GET / POST /api/execution/strip-chart-item-config — a key's Y-range config, saved with the project; with no key, the project's inspecting key's.
- GET / POST /api/execution/color-guide — the Colors dropdown's state, one payload for both: the selected key, the guides, the tone functions, the range rule, and tree — { key, name, editTreeId, leaves, notes }, the leaves in colorTree.leaves' shape — while the selected key is a tree's, else null.
Execution/SelectedStepInfoService.cs — UnitLabel, the unit as display text that unit and unitLabel share.
Execution/StepColorTreeController.cs — SourceOf, the classification behind source.
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 to every client DispRangeChanged(snapshot), StepSelected({ stepIndex }) (not raised when the selected step is selected again), StepEntered({ stepIndex }), Updated(snapshot) and StepPhysicsRecomputed({ begin, end }), the range a step-physics recompute replaced. One LooseRunner per channel coalesces re-broadcasts — a burst collapses into the latest, and a slow Updated cannot starve a StepSelected; each chart's single-flight load loop and its 500 ms floor handle the rest of the rate-limiting. The same service relays a sixth channel over the other hub: a click on the tool path (ClStrip.PosClicked, raised on the render thread) is sent as StepClicked on /renderingHub to the clicking canvas's connection only, through a runner of its own that keeps the latest click per engine.

HiAPI Engine

HiMech/Coloring/FuncDiscreteColorGuide.cs — the one-colour-per-ID guide, with a hue table for a color tree's leaves (IdHues); its GetIdRgb gives the colours idColors carries.
HiMech/MachiningSteps/PresentAttribute.cs — IsCategorical and CategoryLabelPrefix, the fields isCategorical and labelPrefix are read from.
HiMech/MachiningSteps/MachiningStep.cs — the marks themselves: ToolId is an ID with the prefix T, FileNo an ID with none.
HiMech/NcParsers/Dependencys/RotaryReadoutUtil.cs — the fold of a wrap-around rotary axis' machine coordinate into [0°, 360°) at a display resolution, and the IsModularRotary predicate of IMachineAxisConfig that picks the axes.
HiNc/MachiningProcs/LocalProjectService.cs — SelectAndBuildColorGuide: picking an ID key gives the 3D view the one-colour-per-ID guide, the selection idColors waits for; a color tree's key gets one built with the tree's hue table, and a tree's guide left under a key that is no tree's any more gives way to the guide the entry's kind calls for.
HiNc/MachiningProcs/LocalProjectService.ProjectStepColorTrees.cs — the color trees, the project's and a script's, registered as categorical step properties with no label prefix, and TryGetStepColorTree, the compiled tree an answer reads; HiNc/MachiningProcs/StepColorTreeSlot.cs — the leaf id and the leaf's value packed into one slot value, which the series unpacks.
HiNc/MachiningProcs/CompiledStepColorTree.cs — a compiled tree's leaves in tree order, each with its lane (Leaf.Lane, the first leaf the highest) and its hue, which the lanes and leaves follow.