Chart and navigation panel architecture

Header layer#

Each chart header exposes the action cluster:

• Take screenshot
• Expand chart
• Restore chart

The second chart also exposes the center-aligned collapse toggle for Analysis Board.

Toolbar layer#

The toolbar directly below the header contains:

• Model ID with a copy button
• Min/max price inputs
• the rectangle selection button for quick vertical range capture
• Fix scale
• Levels / Levels & Associates
• Range

On narrower chart widths, the inline Levels and Range clusters collapse into compact dropdown menus controlled by the React-shell CSS container query.

Model ID and copy actions#

The visible model id containers and copy buttons are declared in board.php and updated from runtime logic in main.js.

Important buttons include:

• #copy-model-id-btn
• #copy-model-id-btn-2
• #copy-selected-model-id-btn-2

Min/max range management#

The text inputs are direct price-range controls, while the rectangle icon activates quick visual selection mode.

The delegated range-selection logic starts from:

• getRangeSelectDom()
• updateRangeSelectUi()
• updateRangeSelectRect()
• ensureRangeSelectDelegation()

On mouse up, the selected vertical area is converted back into prices and written into the corresponding minprice / maxprice inputs before forcing a redraw.

Fix scale#

Fix scale is still part of the legacy toolbar contract. It is declared in board.php and consumed by the chart draw flow when the visible scale should stay locked.

Levels control#

Levels exists in two synchronized representations:

• inline checkbox cluster for wide chart widths
• compact dropdown for smaller widths

The visible options are the associated structural branches P6, P6", auxP6, and auxP6'.

Range control#

Range follows the same UI pattern as Levels: inline controls for wide layouts and a dropdown for compact layouts.

The current runtime implementation is centered around:

• mpNormalizeChartRangePercent()
• mpGetChartRangeCollections()
• mpSyncChartRangeFromElement()
• mpDrawModelRangeMarkers()

The control stores one shared percent value per chart and one toggle per model branch.

The dashed vertical marker is drawn relative to node 6 and projects forward to the right of the model structure.

Hover and candle readout#

The transparent interaction layer #graph-cover / #graph-cover-2 handles pointer movement above the canvas.

Hover updates the current candle information and drives crosshair-style helpers such as price and bar readouts.

Wheel zoom#

The primary chart uses wheel() and the secondary chart uses wheel2().

Both functions adjust the horizontal scale only when the pointer is inside the active plotting area boundaries.

Horizontal panning#

Drag behavior is implemented on the graph-cover layer.

Once the pointer is pressed and moved, the runtime calculates dx, updates the current bar pointer, and redraws the chart.

Active bar selection#

A click on the graph-cover without drag movement changes the active bar.

If multiple models belong to the same bar, repeated clicks can cycle through the available models for that bar slot.

Touch support#

The primary chart touch path is handled on #graph-cover:

• one finger - horizontal move
• two fingers - zoom

The second chart currently has wheel support and pointer drag handling as part of its dedicated runtime path.

Primary chart actions#

The primary chart expand/restore flow is centered around toggleChartExpand().

The chart header buttons are wired so the runtime can switch between the compact card layout and the fullscreen-style expanded layout without rebuilding the entire page.

Secondary chart actions#

The secondary chart has its own dedicated action flow:

• toggleChart2Expand()
• takeChart2Screenshot()
• syncChart2HeaderActionButtons()
• ensureSecondChartCanvas()

When expanded, the second chart can be moved into document.body temporarily so it is no longer constrained by the normal analysis layout.