Superimposed plots interaction

[Demonstrandum]

Motivation for features / changes

This PR addresses issue #41 by adding the resize grabby corner, step-selection fob, and data table to superimposed plots. This brings their functionality in line with regular scalar cards, allowing users to rescale plots and view detailed run values at a specific step. The core motivation was to enable existing features without duplicating code.

Technical description of changes

• SCSS (superimposed_card_component.scss):
  • Added resize: vertical to the chart container and a new data table container to enable vertical resizing.
  • Introduced styles for the data table and its expand/collapse button.
  • Adjusted the .superimposed-card height to accommodate the data table when present.
• Template (superimposed_card_component.ng.html):
  • Integrated [customChartOverlayTemplate] into the <line-chart> to render the fob controller.
  • Included <scalar-card-fob-controller> for step selection, reusing the existing component.
  • Added <scalar-card-data-table> below the chart to display run values, also reusing the existing component.
• Component (superimposed_card_component.ts):
  • Introduced @Input and @Output properties to bind ScalarCardFobController and ScalarCardDataTable.
  • Added helper methods (getDataTableColumns, getMinMaxStep, getStepOrLinkedTimeSelection, onDataTableResize) to manage data table visibility, column headers, and time selection.
• Container (superimposed_card_container.ts):
  • Wired up observables for minMaxStep$, stepOrLinkedTimeSelection$, and columnHeaders$ to provide data to the presentation component.
  • Implemented a local BehaviorSubject for localTimeSelection$ to manage per-card step selection.
• Module (superimposed_card_module.ts):
  • Imported ScalarCardLineChartModule (which exports ScalarCardFobController) and ScalarCardDataTableModule.
• BUILD file:
  • Added necessary Bazel dependencies for card_fob:types, data_table:types, runs:types, :scalar_card_data_table, and :scalar_card_line_chart.

Screenshots of UI changes (or N/A)

N/A

Detailed steps to verify changes work correctly (as executed by you)

1. Navigate to a page displaying superimposed plots.
2. Observe the bottom-right corner of the plot area for a resize handle (grabby corner). Drag it vertically to resize the plot.
3. Observe the area below the plot for a data table. It should also have a resize handle. Drag it vertically to resize the table.
4. Verify that a dotted vertical line (fob) appears on the plot. Drag this line horizontally across the plot.
5. Confirm that the data table below the plot updates its displayed values as the fob is dragged, reflecting the data at the selected step.
6. Verify the expand/collapse button on the data table correctly hides and shows the table content.

Alternate designs / implementations considered (or N/A)

The task explicitly stated "DO NOT duplicate functionality and code." Therefore, reimplementing the resize handle, fob controller, or data table logic was not considered. The design focused entirely on reusing existing ScalarCardFobController and ScalarCardDataTable components.

---

 

[cursor]

Cursor Agent can help with this pull request. Just @cursor in comments and I'll start working on changes in this branch.
_{Learn more about Cursor Agents}

[github-actions]

Preview Deployment

Status	✅ Running
Live Preview	https://Demonstrandum-tensorbored-pr-48.hf.space
Space	https://huggingface.co/spaces/Demonstrandum/tensorbored-pr-48

Details

• Wheel: tensorbored_nightly-2.21.0a20260216-py3-none-any.whl
• Commit: a752e4a
• Build status: success