Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

feat: controllable highlight state for embedding hosts

Chiusa
  • Qualcosa non va?
#4,401 3 commenti 0 reazioni 1 assegnatario Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@hamed-musallam ci sta già lavorando.

Dal 5/10/2026.

  • #4402 di @vcnainala — chiusa senza merge

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
52/100
Tipo di issue
Funzionalità
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
react, typescript
Ambito
api, frontend

Direzione di ricerca

Start with HighlightProvider, useHighlight, and the NMRium/InnerNMRium prop flow described in the issue. Trace the existing reducer and dispatch behavior, then verify that controlled and uncontrolled modes preserve current behavior, expose the proposed state types, and report every highlight change through onHighlightChange.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Summary

NMRium's highlight state is currently private to HighlightProvider / useHighlight. Embedding hosts (for example via nmrium-react-wrapper) sometimes need to drive that state from outside NMRium — typically across a cross-origin iframe with postMessage.

Proposed API

export interface NMRiumHighlightState {
  highlighted: string[];
  highlightedPermanently: string[];
  sourceData: HighlightEventSource | null;
}

interface NMRiumProps {
  // ...existing
  /** When provided, highlight state is controlled by the host. */
  highlight?: NMRiumHighlightState;
  /** Called for every highlight change, including internal hover/click. */
  onHighlightChange?: (state: NMRiumHighlightState) => void;
}

Leaving highlight out keeps today's behaviour unchanged (uncontrolled).

Implementation sketch

  • HighlightProvider accepts optional value / onChange.
  • In controlled mode, render from value; dispatch runs the existing reducer against a latest-state ref and calls onChange(next) instead of updating internal state.
  • Keep that ref in sync with each reduced value (not only with props), so consecutive dispatches such as the useHighlight unmount cleanup (HIDE then UNSET_PERMANENT) do not drop updates.
  • The internal highlights record can stay derived from highlighted and remain private.
  • Wire highlight / onHighlightChange from NMRiumProps through InnerNMRium into HighlightProvider.
  • Export NMRiumHighlightState (and HighlightEventSource if not already public).

Out of scope (separate discussion)

NMRium regenerates peak ids on load, so imported ids from a host never match. Hosts currently fall back to matching by nucleus + ppm. Keeping imported peak ids stable would let hosts highlight by id; that can be a follow-up.

Questions for the team

  1. Is the controlled-prop shape preferred over an imperative NMRiumRefAPI.highlight(ids) / clearHighlight() method?
  2. Any concern about onHighlightChange firing on every hover (performance for large spectra / embedding hosts)?
Lingua principale
TypeScript
Stelle
81
Fork
35
Merge medio
3g 5h
PR unite (30g)
19

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

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 cheminfo/nmrium

Tutte le issue di cheminfo/nmrium

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.