Skip to content

refactor(algorithm-panel): split into algorithm-selection and experiment-result sections - #63

Open
KFilippopolitis wants to merge 8 commits into
masterfrom
refactor/algorithm-panel-split
Open

KFilippopolitis wants to merge 8 commits into
masterfrom
refactor/algorithm-panel-split

Conversation

@KFilippopolitis

@KFilippopolitis KFilippopolitis commented Oct 29, 2026 •

Copy link
Copy Markdown
Contributor

Splits the algorithm panel the way Data Handling was split in #56: a thin app-algorithm-panel shell, attribute-selector sections, and services that the panel provides to its sections. Nothing should look or behave differently.

Structure

  • algorithm-panel (shell, 64 lines): same selector, same wiring, and the same API the studio calls (canRun, runDisabledReason, onClickRunExp, setStudioSubstep, studioSubstepChange, onExportResult, onExportResultZip). It provides the services and lays out the card, the readiness bar and the tooltip.
  • algorithm-selection/
    • section[app-algorithm-selection]: the card, which hosts role assignment and the details/documentation
    • aside[app-algorithm-catalog]: #algo-search, groups and Runnable/All
    • section[app-algorithm-parameters]
    • div[app-algorithm-config-field]: replaces the untyped ng-template with a typed field input
    • section[app-outlier-report-editor]
    • div[app-algorithm-availability-tooltip]
  • experiment-result/
    • div[app-experiment-result]: the readiness bar and error
    • ul[app-algorithm-run-requirements]
  • Services (provided by the panel):
    • AlgorithmCatalogService
    • AlgorithmConfigFormService: the form, cross-validation, positive_class and the outlier_report rules
    • AlgorithmRunService: run needs, the run, the error and the PDF/ZIP export
    • AlgorithmStudioSubstepService
  • Utils and types: pure helpers are in utils/ with specs, and shared types are in algorithm-panel.models.ts.
  • Unchanged: algorithm-result/ (shared).

Cleanup

  • Types: 28 lines using any → 0.
  • Signals instead of mutable fields:
    • The outlier rules and errors, the built-form signature and the last run algorithm are now signals.
    • Category collapse is a linkedSignal.
    • outlierReportRuleFor is now a pure read. It used to write during render.
  • Removed: the unused formKey, yVar, xVar, selectedVariables, isAlgorithmAvailable and the SessionStorage injection.
  • Deduplicated: the outlier handlers share one helper.
  • CSS: each rule moved to the sheet of the template its element lives in. Shared rules are in styles/*.shared.css. The panel sheet went from 33.2 kB of source (it tripped the budget warning) to 3.3 kB. Every sheet is now under the 20 kB warning, and the warning is gone.

Unchanged

  • data-guide anchors (experiment-workspace, algorithm-selection, algorithm-settings)
  • #algo-search and all other e2e selectors
  • sessionStorage keys
  • request payloads

Verification

  • npm run verify: passes (no dead code; the only warning is the existing jszip one).
  • Vitest: 87 files / 1180 tests pass.
  • Playwright: 43/43 pass.
  • Visual comparison against master (two runs each, Playwright on separate ports), 6 scenarios:
    • the catalog: search, filters, toggling groups, and an unavailable method selected
    • linear regression with docs, Advanced and cross-validation
    • outlier_report: rules, an invalid fold, the blocked run and the fixed run
    • Cox: select, multi-select and positive_class
    • running, then ZIP and PDF export
    • 900 px and 600 px widths
  • Results: all 50 DOM and computed-style dumps, the CTA states, the run request payloads, the session JSON and the ZIP contents are identical. The 24 screenshots are pixel-identical, except one search-field screenshot that also differs between two master runs.

Follow-ups and open questions

  1. Form edits can stop persisting (existing bug, kept as is). When a role change leaves the form signature unchanged, the form-build effect returns early. Its cleanup has already unsubscribed the previous form's valueChanges/statusChanges, so later edits are not persisted and formInvalid goes stale.
  2. Unreachable tooltip. Nothing calls showTooltip, so the availability tooltip can't be reached from the UI. Remove it or wire it up?
  3. outlier_report is excluded from the picker. It is in ALGORITHM_PANEL_EXCLUDED, so its editor only shows for a restored session or edit flow.
  4. Share the outlier rule editor with Data Handling once refactor(data-handling): rename the statistics panel to Data Handling and split it into step components and feature services #56 lands (not done here on purpose).

KFilippopolitis and others added 8 commits October 29, 2026 18:04
Needs and readiness text, availability tooltip text, catalog filtering and
group collapsing, tooltip placement, parameter schema enrichment, form
building and value normalization, and run naming for cross-validation are
plain functions now, each with a spec. The panel calls them; behavior is
unchanged. One number-step rule (allowsDecimal) replaces the copy in the
template and the copy in the integer validator.
The panel's 28 any are gone: parameters are AlgorithmParameterField /
EnrichedParameterField, studio variables StudioVariable, outlier rows
OutlierReportVariable, the tooltip holds an AlgorithmConfig and the export
run info is ExperimentRunInfo. Option labels go through optionLabel instead
of an untyped template expression, and the outlier enable checkbox reads a
template reference instead of $any($event.target).

experimentInfo no longer builds a preprocessingSteps list nothing read.
Outlier rules and errors, the built-form signature and the last run
algorithm become signals; category collapse becomes a linkedSignal;
outlierReportRuleFor is a pure read; unused formKey removed.
AlgorithmCatalogService owns search, filter, group collapse and availability;
AlgorithmConfigFormService the parameter form, cross-validation and outlier
rules; AlgorithmRunService run requirements, the run and the exports;
AlgorithmStudioSubstepService the sub-step behind studioSubstepChange.
The panel delegates its public API to them. Unused yVar, xVar,
selectedVariables, isAlgorithmAvailable and SessionStorage removed.
Service-level spec cases move to service specs.
section[app-algorithm-selection] holds the card; aside[app-algorithm-catalog],
section[app-algorithm-parameters], section[app-outlier-report-editor],
div[app-algorithm-config-field] (typed field input, replaces the untyped
ng-template) and div[app-algorithm-availability-tooltip] attach to the
elements they render into, so the DOM, anchors and selectors are unchanged.
Each rule moves to the sheet of the template its element lives in; rules
several sheets share move to styles/*.shared.css partials. The panel sheet
drops from 22.1 kB (over budget) to 3.7 kB.
div[app-experiment-result] renders the readiness bar the panel projects into
the card (is-ready as a host binding); ul[app-algorithm-run-requirements]
renders the run needs and resolves their actions. Both read
AlgorithmRunService, which owns the run, its error and the exports.
…p and tidy the run flow

- showTooltip had no caller, so the tooltip component, its position helper,
  catalog tooltip state, .tooltip CSS, availabilityRequirementText and
  formatInputCountRange are removed with their specs
- runExperiment checks the algorithm before touching run state and no longer
  clears the error three times
- the requirements action scrolls inline instead of through a one-use helper
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant