This repository contains fl-platform, the Angular 22 standalone frontend for the Medical Informatics Platform (MIP). The app lets authenticated users compose and run experiments, configure algorithms, integrate with JupyterHub when enabled, and review/export experiment results from a backend exposed under /services.
src/main.ts: Angular bootstrap entrypoint.src/app/app.component.*,src/app/app.routes.ts,src/app/app.config.ts: app shell, routing, providers, HTTP, XSRF, zoneless change detection, and ECharts setup.src/app/guards/: route guards for authentication, terms/NDA acceptance, and studio guide onboarding.src/app/services/: auth/session, experiment orchestration, dashboard data access, algorithm rules, labeling, runtime env, theme, errors, and PDF/CSV exports.src/app/models/: frontend and backend DTOs/interfaces for users, algorithms, experiments, filters, and data models.src/app/core/: algorithm mapping, result enum mapping, constants, and result utility logic.src/app/pages/experiment-studio/: step views switched via a sticky horizontal stepper —experiment-studio.componentshows one step view at a time (Datasets & Variables · Data review & preprocessing · Algorithm); all views stay mounted (hidden via CSS) so state is preserved. On the Data review step the stepper expands a sub-step row (Filtering, Raw Summary, Preprocessing, Processed Summary, Transformation) that drives thestatistic-analysis-panelsections (goToSection). In-panel section targets usescroll-margin-topsoscrollIntoViewclears sticky chrome. Also contains variable/filter selection, QueryBuilder filter UI, algorithm configuration with variable role assignment (outcome y / covariates x on the algorithm panel), run/edit flows, statistics, visualizations, and result rendering.src/app/pages/experiments-dashboard/: experiment list/search/pagination, detail view, compare mode, sharing, delete/edit/name updates, and result export.src/app/pages/terms-page/: NDA/TOS display and acceptance flow.src/app/pages/account-page/: account/profile view and logout entry.src/app/pages/notebook/: optional notebook route gated by runtime env.src/app/pages/shared/: header, footer, spinner, and shared form-control utilities.src/assets/: runtimeenv.js, logos/icons, footer assets, and terms markdown.public/: static files copied to the Angular build output.src/styles.css: global styling and QueryBuilder theming.DESIGN.md: MIP visual/brand guidance and app tokens; consult before UI styling changes.Dockerfile,docker-entrypoint.sh,nginx.conf.template: container build and nginx/runtime environment injection..github/workflows/: image publishing and EBRAINS mirror workflows.docs/: the durable context system underdocs/context/, plusdocs/llm-wiki/.
- Language/runtime: TypeScript, HTML templates, CSS, Node 22+, npm 10+.
- Framework: Angular 22 standalone application, Angular Router, Angular Material/CDK, Angular Signals, zoneless change detection.
- Data/async: Angular
HttpClient, RxJS, browser localStorage/sessionStorage. - Visualization/export: ECharts via
ngx-echarts, D3, html2canvas, jsPDF, jsPDF AutoTable. - Test framework: Jasmine/Karma through Angular CLI.
- Package manager: npm with
package-lock.json; usenpm cifor clean installs. - Container/runtime: Docker multi-stage Node 22 build served by nginx alpine; runtime config injected into
assets/env.js.
npm ciRequirements:
- Node 22+ and npm 10+.
- Backend reachable at
http://localhost:8080/servicesfor local development unlesssrc/proxy.conf.jsonis changed. - Keycloak/OAuth2 endpoints available through the backend proxy for authenticated flows.
npm startRuns ng serve with src/proxy.conf.json from angular.json. The app is served at http://localhost:4200/.
npm run watchRuns a development build in watch mode.
npm run buildRuns the production Angular build. Output is dist/fl-platform.
Docker:
docker build -t fl-platform .
docker run -e PLATFORM_BACKEND_SERVER=platform-backend-service:8080 -e PLATFORM_BACKEND_CONTEXT=services -p 80:80 fl-platformnpm testRuns Jasmine/Karma unit tests through Angular CLI.
Manual browser QA is required for authenticated experiment workflows and backend-dependent chart/result rendering. The checklist lives in docs/context/testing.md (Frontend Manual QA).
No ESLint/Prettier setup; npm run build remains the template/type check that matters. Static checks that need no browser:
npm run verify # typecheck + dead-code scan + build
npm test # Jasmine/Karma (needs a browser; see docs/context/testing.md)scripts/check-dead-code.mjs is a plain Node script, so a finding is a bug in the code or in its allowlist (RUNTIME_CLASS_PREFIXES) — never a reason to delete a runtime class Angular applies. Its header explains how emulated encapsulation, @import and @keyframes scoping are decided; the individual commands are listed in docs/context/testing.md.
.nvmrc and scripts/check-node-version.mjs both require Node 22; nvm use must land on 22 or every npm script fails its pre-hook.
Agents must not run high-output or long-running commands on their own unless the user explicitly asked for that validation, or the agent first states the expected runtime/token cost and gets confirmation. Prefer targeted, bounded commands.
Require explicit confirmation before running:
- Long-running app/watch commands:
npm start,npm run watch,ng serve,ng build --watch, persistent browser automation, or any command expected to keep running. - Full interactive test/watch commands:
npm test,ng test, or Karma watch mode. Prefer a non-watch/focused test command when available; if not verified, ask first. - Container-heavy commands:
docker build,docker run,docker compose ..., and unboundeddocker logs. - Dependency/network audits:
npm ci,npm install,npm audit,npm audit --json,npm outdated, unless dependency setup/update is the explicit task. - Broad output commands:
find .,ls -R,tree, recursivegrep, unrestrictedrg,cat package-lock.json,cat dist/*,cat coverage/*,git diffwithout path/stat limits,git log -p, orgit showon large commits.
Allowed without confirmation when relevant:
- Targeted file reads with line limits, such as
sed -non specific files. - Targeted searches with exclusions, such as
rg "pattern" src docs -g "!node_modules" -g "!dist" -g "!coverage". - Summary commands such as
git status --short,git diff --stat,git diff --name-only, and path-limited diffs. npm run buildwhen required by repo instructions or when validating code changes, because it is bounded and currently moderate-output.
When a high-output command is justified, announce why it is needed, say it may consume substantial tokens/runtime, and cap output with --tail, path filters, --stat, --name-only, or explicit line ranges wherever possible.
- Keep feature UI under the owning page directory in
src/app/pages/.... - Keep cross-feature orchestration and backend calls in Angular services under
src/app/services/. - Keep backend DTOs and frontend-facing interfaces in
src/app/models/; map backend shapes before rendering when needed. - Keep algorithm/result schema mapping in
src/app/core/algorithm-mappers.tsand result enum label logic insrc/app/core/algorithm-result-enum-mapper.ts. - Keep chart and table rendering logic in the existing visualization registries under
src/app/pages/experiment-studio/visualisations/. - Keep route protection in guards; do not duplicate auth or NDA checks inside unrelated components.
- Read runtime configuration through the existing runtime env pattern (
window.__envandRuntimeEnvService) rather than scattered direct environment reads. - Use the
/servicessame-origin API boundary; the credentials interceptor addswithCredentialsto same-origin API calls. - Preserve the session/local storage keys used for auth redirects, terms redirects, and experiment studio state unless a migration is explicitly planned.
- Prefer standalone Angular components and
importsarrays over NgModules. - Prefer Angular Signals for component and feature state where the surrounding code already uses Signals.
- Use
inject()consistently with nearby services/components. - Keep TypeScript strictness intact;
tsconfig.jsonenables strict templates, no unused locals/parameters, no implicit returns, and related checks. - Use CSS component styles (
styleLanguage: css) and global styles only for app-wide concerns. - Follow
DESIGN.mdfor UI aesthetics, brand colors, logo usage, typography, spacing, and visual hierarchy. - Keep backend API paths relative (
/services/...) so proxy/nginx routing continues to work. - Handle backend errors explicitly through local state or
ErrorService; avoid hiding failures. - Use existing mapper, label, and registry helpers before adding new presentation logic.
- Add or update Jasmine specs near the changed code when behavior changes.
- Do not silently swallow exceptions or failed HTTP calls.
- Do not introduce global mutable state outside established Angular services or runtime env bootstrapping.
- Do not read or write runtime environment values outside the existing config/runtime env layer without a documented reason.
- Do not bypass
AuthGuard,TermsGuard, or the credentials interceptor for authenticated flows. - Do not change
/servicesAPI contracts, experiment payload shapes, or algorithm result mappings without documenting compatibility impact. - Do not remove legacy algorithm aliases unless stored historical experiment compatibility has been reviewed.
- Do not introduce new dependencies without explaining why the existing stack is insufficient.
- Do not reformat unrelated files or rewrite unrelated feature structure.
- Do not modify Docker, nginx, CI, auth, sharing, deletion, or runtime env behavior without focused validation and human review.
- Never commit secrets, tokens, cookies, credentials, or private environment values.
- Never print secrets or sensitive experiment/user data in logs.
- Treat authentication, authorization, terms/NDA gating, experiment sharing, experiment deletion, Docker/CI secrets, runtime proxying, and notebook access as human-review areas.
- Preserve same-origin credential and XSRF behavior unless the backend contract is being intentionally changed.
- Validate redirect, share, delete, and notebook behavior carefully because they affect access boundaries.
Every agent change should include:
- Summary of behavior/documentation changed.
- Files changed.
- Tests/checks run and results.
- Risk assessment, including auth/API/data/deployment impact if relevant.
- Rollback notes when changes affect runtime behavior, deployment, migrations, data deletion, or public contracts.
- The diff is minimal and directly tied to the request.
- Relevant files and existing patterns were read before editing.
- Public API, route, runtime env, and backend contract changes are documented when made.
- Relevant unit tests, build, or manual QA steps passed, or skipped checks are explicitly reported with reasons.
- No unrelated user work, generated artifacts, lockfiles, or formatting churn were introduced.
- For UI changes,
DESIGN.mdwas consulted and responsive/authenticated flows were considered.