quick-view: Pages register components with a service that the app-shell quick view renders

Aperta
  • Qualcosa non va?
#934 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Questa issue non è ancora stata valutata.

Descrizione

by: ai frontend spike
Exploring

The page registers components, with their inputs, with a quick-view service, and one quick view in the app shell renders each one using Angular's component outlet. The quick view:

  • renders next to page content on desktop and at phone width, without covering it
  • appears only on pages that register content, and elsewhere renders nothing and takes no space
  • shows only what the current page registered, with nothing carried over after you leave a page
  • can be opened and collapsed
flowchart LR
  scylla["scylla-server"]

  subgraph browser["Browser: angular-client"]
    direction LR
    socket["SocketService"] --> storage[("Storage")]
    storage --> page["Page that opts in"]
    page -- "register component + inputs" --> svc["Quick-view service"]
    svc --> shell["App shell quick view<br/>renders each component"]
    otherPages["Every other page"] --> off["Quick view off"]
  end

  scylla -- "socket" --> socket
Hypothesis

Pages can register any component with a service, and the app-shell quick view renders exactly those components and clears them when the page is destroyed.

Context transfer
SUMMARY
Part of idea #933. One of three sibling spikes, each trying one way for pages to fill a single app-shell quick view: a CDK portal (#935), a service that renders registered components (#934), and a service that renders registered readout data (#937). Earlier spikes #898 (app-wide) and #899 (per page) are closed.

CONTEXT
- develop has no dynamic component rendering (no component outlet, createComponent or ViewContainerRef). Angular is 21.2, whose component outlet accepts inputs.
- Branch 898-app-wide-quick-view (draft PR #900): QuickViewService.register(readouts, destroyRef) returns a withdraw function and drops a page's claims when the page is destroyed. QuickViewComponent renders StatusBarComponent once above router-outlet and nothing when empty. Nothing ties a claim to the current route.
- Multi-topic readouts on that branch (cell spread, located cells, fault roll-ups) are signals built in factories in quick-view.readouts.ts that must run in the page's injection context.
- develop: StatusBarComponent (angular-client/src/components/status-bar/) is a reusable pop-out panel: docked top-right, sticky while scrolling, auto-opens, with a handle to reopen it after collapse; title input defaults to "Quick view".
- develop: only eFuses uses it, projecting LvBatteryChipComponent with voltage and faulted inputs read from Storage (VCU/LV/voltage, VCU/LV/LowVoltageFault).
- develop: app-context.component.html renders p-toast, app-nav-bar and router-outlet; no quick view in the app shell.
- Storage is filled by SocketService from scylla-server and uses plain subjects, so a value shows a dash until its topic publishes again.
- Value-display primitives on develop (angular-client/src/components/): stat-display, info-value-display, gauge-stat, stat-summary, sidebar-chip, battery-level-indicator.
- Unpublished topics: BMS/Pack/Voltage, BMS/Pack/SoC, BMS/Status/Balancing; BMS critical faults point mostly at unpublished topics (#902).
- #898 findings: the open panel covers Charging's Faults tile and BMS's segment overview; at 390px it takes about 55% of the width; collapse state carries across pages. https://github.com/Northeastern-Electric-Racing/Argos/issues/898#issuecomment-6260017218
Lingua principale
TypeScript
Stelle
5
Fork
1
Merge medio
1g 17h
PR unite (30g)
46

Preparare l'ambiente

  • Nessun Dockerfile né file Docker Compose
  • Ha un modello di pull request
  • Nessuna guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di Northeastern-Electric-Racing/Argos

Tutte le issue di Northeastern-Electric-Racing/Argos

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.