Skip to content

feat: add highlight action-request that forwards ids to NMRium's highlightedIds - #317

Merged
vcnainala merged 5 commits into
developmentfrom
feat/highlight-peak-controllable
Oct 9, 2026
Merged

vcnainala merged 5 commits into
developmentfrom
feat/highlight-peak-controllable

Conversation

@vcnainala

@vcnainala vcnainala commented Oct 4, 2026 •

Copy link
Copy Markdown
Member

Summary

  • Adds host-driven highlighting on the nmr-wrapper:action-request channel using NMRium's highlightedIds prop (feat: support externally controlled highlights cheminfo/nmrium#4405, released in NMRium 3.1).
  • New actions:
    • highlight with params: { ids: string[] }: passes the ids to highlightedIds and replaces the previous host highlight.
    • clearHighlight: clears the host highlight.
  • The wrapper does not store NMRium's state or look anything up. The host finds the peak, range and signal ids in its own data and sends them. NMRium keeps the ids it is given in the loaded data, so ids from the host's payload match.
  • To highlight on another nucleus, the host sends selectTab and then highlight.
  • highlightedIds is additive: NMRium's own hover/click highlighting keeps working, and Delete/Backspace cannot remove a host-highlighted peak or range.
  • Invalid params.ids and unknown action types emit nmr-wrapper:error instead of throwing.
  • Demo: Test load QM signals, Test highlight signal and Clear highlight buttons, using a fixture generated by qm-nmr-calc's payload builder.

Example:

iframe.postMessage(
  {
    type: 'nmr-wrapper:action-request',
    data: {
      type: 'highlight',
      params: { ids: ['qm-signal-1H-7-8', 'qm-range-1H-7-8', 'qm-1H-7-8'] },
    },
  },
  origin,
);

Rebased on development (NMRium 3.1, React 19).

Test plan

  • npm run check-types, eslint, prettier
  • npx playwright test --project chromium: all 11 pass, including highlight a peak by id, highlight a signal with its range and peak, selectTab followed by highlight on another nucleus, and invalid ids emitting nmr-wrapper:error
  • Demo: Test load QM signals, then Test highlight signal highlights the 3.69 ppm range and peak; Clear highlight clears it

@vcnainala
vcnainala force-pushed the feat/highlight-peak-controllable branch 2 times, most recently from a076b40 to e6c826d Compare October 4, 2026 09:58
@vcnainala vcnainala changed the title feat: highlight peaks and signals via NMRium's controllable highlight API feat: highlight peaks and signals via NMRium's highlightedIds prop Oct 6, 2026
Base automatically changed from revert/highlight-peak-bridge to development October 6, 2026 11:48
@vcnainala
vcnainala marked this pull request as ready for review October 7, 2026 11:37
@hamed-musallam

Copy link
Copy Markdown
Collaborator

@vcnainala

I’ve taken a look at the code, and I’m not convinced that saving the last NMRium state in the wrapper is the right approach. All the logic for finding peak IDs or range IDs should be handled entirely on your side and should not be part of the RW. The wrapper’s only responsibility should be to take the IDs and pass them down to NMRium, nothing more.

… API

Add highlightPeak, highlightSignal and clearHighlight action requests on
top of NMRium's public highlight / onHighlightChange props instead of
aliasing its private highlight module.

highlightSignal resolves a 1D signal by id or nucleus + delta and also
highlights its parent range and the peaks inside that range. Host-driven
highlights use an UNKNOWN source so NMRium's Delete/Backspace handler
cannot delete the highlighted peak or signal.
Switch from the controlled highlight / onHighlightChange API (#4402) to
the additive highlightedIds prop from cheminfo/nmrium#4405. Host
highlights no longer touch NMRium's internal highlight state, so the
sourceData workaround and the permanent option are gone.

Drop the embedding settings from the QM demo fixture: they hide NMRium's
panels, which the demo and e2e tests rely on.
Per review, the wrapper no longer stores NMRium's state or resolves
peaks, ranges or signals. Hosts look up the ids in their own data and
send them; the wrapper forwards them to NMRium's highlightedIds prop.

Replace highlightPeak and highlightSignal with a single
highlight { ids: string[] } action and drop the automatic tab switch;
hosts send selectTab first. Invalid ids emit nmr-wrapper:error.
@vcnainala
vcnainala force-pushed the feat/highlight-peak-controllable branch from 8020998 to 2997bcb Compare October 9, 2026 12:10
@vcnainala vcnainala changed the title feat: highlight peaks and signals via NMRium's highlightedIds prop feat: add highlight action-request that forwards ids to NMRium's highlightedIds Oct 9, 2026
Firefox opens the QM fixture on the 13C tab and Chromium on 1H, so the
1H highlight tests found nothing to highlight in Firefox. Select 1H
first, and start the selectTab test on 1H so it switches tabs in every
browser.
@vcnainala
vcnainala merged commit d140a46 into development Oct 9, 2026
4 checks passed
@vcnainala
vcnainala deleted the feat/highlight-peak-controllable branch October 9, 2026 12:47
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.

2 participants