feat(remote): expose iframe selection to host pages

Assisted-by: Claude Opus 4.7

Author: PierreRaybaut

doc/examples/angular/datalab-web-demo.component.ts

@@ -71,25 +71,16 @@ interface LogLine {
         </button>
 
         <div class="row">
-          <button
-            [disabled]="!dlw.ready() || lastId() === null"
-            (click)="onFft()"
-          >
-            calc(fft) on last
+          <button [disabled]="!dlw.ready()" (click)="onFft()">
+            calc(fft) on selection
           </button>
-          <button
-            [disabled]="!dlw.ready() || lastId() === null"
-            (click)="onGet()"
-          >
-            get_signal_xy(last)
+          <button [disabled]="!dlw.ready()" (click)="onGet()">
+            get_signal_xy(current)
           </button>
         </div>
 
-        <button
-          [disabled]="!dlw.ready() || lastId() === null"
-          (click)="onRemove()"
-        >
-          delete_object(last)
+        <button [disabled]="!dlw.ready()" (click)="onRemove()">
+          delete_object(current)
         </button>
         <button [disabled]="!dlw.ready()" (click)="onReset()">reset_all</button>
 
@@ -180,7 +171,6 @@ interface LogLine {
 export class DataLabWebDemoComponent {
   protected readonly dlw = inject(DataLabWebService);
 
-  protected readonly lastId = signal<string | null>(null);
   private readonly lines = signal<LogLine[]>([]);
 
   protected readonly logText = () =>
@@ -222,10 +212,9 @@ export class DataLabWebDemoComponent {
       xs[i] = i / N;
       ys[i] = Math.sin(2 * Math.PI * 5 * xs[i]);
     }
-    const id = await this.wrap('add_signal', () =>
+    await this.wrap('add_signal', () =>
       this.dlw.addSignal('Sine 5 Hz', xs, ys),
     );
-    if (id) this.lastId.set(id);
   }
 
   async onAddImage(): Promise<void> {
@@ -236,34 +225,33 @@ export class DataLabWebDemoComponent {
         data[i * N + j] = i + j;
       }
     }
-    const id = await this.wrap('add_image', () =>
+    await this.wrap('add_image', () =>
       this.dlw.addImage('Gradient', { width: N, height: N, data }),
     );
-    if (id) this.lastId.set(id);
   }
 
+  // Operate on whatever the user has selected inside the iframe.
+  // ``calc(...)`` with ``sources=null`` already defaults to the
+  // current selection on the DataLab-Web side; the other handlers
+  // ask the bridge for the focused id explicitly.
   onFft(): void {
-    const id = this.lastId();
-    if (!id) return this.note('no lastId — add a signal first');
-    void this.wrap('calc(fft)', () => this.dlw.calc('fft', null, [id]));
+    void this.wrap('calc(fft)', () => this.dlw.calc('fft'));
   }
 
-  onGet(): void {
-    const id = this.lastId();
-    if (!id) return this.note('no lastId');
-    void this.wrap('get_signal_xy', () => this.dlw.getSignalXY(id));
+  async onGet(): Promise<void> {
+    const sel = await this.dlw.getSelection();
+    if (sel.length === 0) return this.note('no current selection');
+    void this.wrap('get_signal_xy', () => this.dlw.getSignalXY(sel[0]));
   }
 
   async onRemove(): Promise<void> {
-    const id = this.lastId();
-    if (!id) return this.note('no lastId');
-    await this.wrap('delete_object', () => this.dlw.deleteObject(id));
-    this.lastId.set(null);
+    const sel = await this.dlw.getSelection();
+    if (sel.length === 0) return this.note('no current selection');
+    await this.wrap('delete_object', () => this.dlw.deleteObject(sel[0]));
   }
 
   onReset(): void {
     void this.wrap('reset_all', () => this.dlw.resetAll());
-    this.lastId.set(null);
   }
 
   // -----------------------------------------------------------------

doc/examples/angular/datalab-web.service.ts

@@ -175,6 +175,12 @@ export class DataLabWebService implements OnDestroy {
     return this.guard((c) => c.deleteObject(oid));
   }
 
+  /** Return the ids currently selected on the active panel inside
+   *  the iframe. Empty array when nothing is selected. */
+  getSelection(): Promise<string[]> {
+    return this.guard((c) => c.getSelection());
+  }
+
   resetAll(): Promise<null> {
     return this.guard((c) => c.resetAll());
   }

packages/sdk/src/DataLabWebClient.ts

@@ -462,6 +462,12 @@ export class DataLabWebClient {
     return this.call("select_objects", { oids, panel }) as Promise<null>;
   }
 
+  /** Return the ids currently selected on the active panel.
+   *  Empty array when nothing is selected. */
+  getSelection(): Promise<string[]> {
+    return this.call("get_selection") as Promise<string[]>;
+  }
+
   setCurrentPanel(panel: "signal" | "image" | "macro"): Promise<null> {
     return this.call("set_current_panel", { panel }) as Promise<null>;
   }

public/remote-host-example.html

@@ -30,10 +30,10 @@ <h1>Remote control demo</h1>
       <button id="btn-add-signal" disabled>add_signal (sine)</button>
       <button id="btn-add-image" disabled>add_image (gradient)</button>
       <div class="row">
-        <button id="btn-fft" disabled>calc(fft) on last</button>
-        <button id="btn-get" disabled>get_signal_xy(last)</button>
+        <button id="btn-fft" disabled>calc(fft) on selection</button>
+        <button id="btn-get" disabled>get_signal_xy(current)</button>
       </div>
-      <button id="btn-remove" disabled>delete_object(last)</button>
+      <button id="btn-remove" disabled>delete_object(current)</button>
       <button id="btn-reset" disabled>reset_all</button>
       <div id="log" aria-live="polite"></div>
     </div>
@@ -76,9 +76,6 @@ <h1>Remote control demo</h1>
       // Expose for Playwright (`page.evaluate(() => window.__client.…)`).
       window.__client = client;
 
-      let lastSignalId = null;
-      let lastImageId = null;
-
       const buttons = {
         version: document.getElementById("btn-version"),
         list: document.getElementById("btn-list"),
@@ -112,35 +109,31 @@ <h1>Remote control demo</h1>
         const N = 256;
         const xs = Array.from({ length: N }, (_, i) => i / N);
         const ys = xs.map((x) => Math.sin(2 * Math.PI * 5 * x));
-        lastSignalId = await wrap("add_signal", () => client.addSignal("Sine 5 Hz", xs, ys));
+        await wrap("add_signal", () => client.addSignal("Sine 5 Hz", xs, ys));
       };
       buttons.addImage.onclick = async () => {
         const N = 32;
         const data = Array.from({ length: N }, (_, i) =>
           Array.from({ length: N }, (_, j) => i + j),
         );
-        lastImageId = await wrap("add_image", () => client.addImage("Gradient", data));
-      };
-      buttons.fft.onclick = () => {
-        if (!lastSignalId) return logLine("!", "no signal yet — add a signal first");
-        return wrap("calc(fft)", () => client.calc("fft", null, [lastSignalId]));
+        await wrap("add_image", () => client.addImage("Gradient", data));
       };
-      buttons.get.onclick = () => {
-        if (!lastSignalId) return logLine("!", "no signal yet");
-        return wrap("get_signal_xy", () => client.getSignalXY(lastSignalId));
+      // Operate on whatever the user has selected inside the iframe.
+      // ``client.calc(...)`` with ``sources=null`` already defaults to
+      // the current selection on the DataLab-Web side.
+      buttons.fft.onclick = () =>
+        wrap("calc(fft)", () => client.calc("fft"));
+      buttons.get.onclick = async () => {
+        const sel = await client.getSelection();
+        if (sel.length === 0) return logLine("!", "no current selection");
+        return wrap("get_signal_xy", () => client.getSignalXY(sel[0]));
       };
       buttons.remove.onclick = async () => {
-        const id = lastSignalId ?? lastImageId;
-        if (!id) return logLine("!", "no object to delete");
-        await wrap("delete_object", () => client.deleteObject(id));
-        if (id === lastSignalId) lastSignalId = null;
-        else lastImageId = null;
-      };
-      buttons.reset.onclick = async () => {
-        await wrap("reset_all", () => client.resetAll());
-        lastSignalId = null;
-        lastImageId = null;
+        const sel = await client.getSelection();
+        if (sel.length === 0) return logLine("!", "no current selection");
+        return wrap("delete_object", () => client.deleteObject(sel[0]));
       };
+      buttons.reset.onclick = () => wrap("reset_all", () => client.resetAll());
 
       (async () => {
         try {

src/App.tsx

@@ -4,6 +4,7 @@ import { useWorkspace } from "./runtime/WorkspaceContext";
 import { useBeforeUnloadGuard } from "./runtime/useBeforeUnloadGuard";
 import { useDocumentTitle } from "./runtime/useDocumentTitle";
 import { REMOTE_MODEL_CHANGED_EVENT } from "./runtime/remoteBridge";
+import { registerSelectionSource } from "./runtime/selectionState";
 import type {
   FeatureDescriptor,
   H5BrowserFile,
@@ -713,6 +714,18 @@ export default function App() {
     [],
   );
 
+  // Publish selection / panel snapshots to non-React consumers (the
+  // iframe-embedded remote bridge in particular, so host pages can
+  // call ``client.getSelection()`` / target the *current* object).
+  useEffect(() => {
+    registerSelectionSource(() => ({
+      ids: selectedIds,
+      currentId,
+      panel: activePanel,
+    }));
+    return () => registerSelectionSource(null);
+  }, [selectedIds, currentId, activePanel]);
+
   const handleSwitchPanel = useCallback(
     (kind: PanelKind) => {
       if (kind === activePanel) return;

src/runtime/RuntimeContext.tsx

@@ -2,6 +2,7 @@ import { createContext, useContext, useEffect, useMemo, useState } from "react";
 import type { ReactNode } from "react";
 import { DataLabRuntime } from "./runtime";
 import { activateRemoteBridge, type RemoteBridgeHandle } from "./remoteBridge";
+import { getCurrentPanel, getSelection } from "./selectionState";
 
 interface RuntimeContextValue {
   runtime: DataLabRuntime | null;
@@ -36,6 +37,8 @@ export function RuntimeProvider({ children }: { children: ReactNode }) {
         try {
           remoteBridgeHandle = activateRemoteBridge(rt, {
             version: import.meta.env.VITE_APP_VERSION,
+            getSelection,
+            getCurrentPanel,
           });
           if (remoteBridgeHandle && import.meta.env.DEV) {
             console.info(

src/runtime/proxyBridge.ts

@@ -236,6 +236,9 @@ _e = _MODEL._objects[${JSON.stringify(oid)}]
       ext.selectObjects?.(a.oids, a.panel);
       return null;
     },
+    /** Return the id list currently selected on the active panel.
+     *  Empty when nothing is selected (or no host is wired). */
+    get_selection: async () => ext.getSelection?.() ?? [],
     call_method: async (p: unknown) => {
       const a = p as {
         name: string;

src/runtime/selectionState.ts

@@ -0,0 +1,55 @@
+/**
+ * Tiny module-level registry that lets the React app publish its
+ * current selection / panel state to non-React consumers (the
+ * iframe-embedded remote bridge in particular).
+ *
+ * The host app calls :func:`registerSelectionSource` once with a
+ * snapshot getter; every subsequent reader (``remoteBridge`` /
+ * ``proxyBridge``) goes through :func:`getSelection` /
+ * :func:`getCurrentPanel`.
+ *
+ * Kept intentionally minimal — this is *not* a state container, just a
+ * forwarding hook for callbacks that already live in the React tree.
+ */
+
+export interface SelectionSnapshot {
+  /** Currently selected object ids on the active panel. May be empty. */
+  ids: string[];
+  /** The "current" object id (last clicked / single-selection focus). */
+  currentId: string | null;
+  /** Active panel name (``"signal"``, ``"image"``, ``"macro"``, …). */
+  panel: string;
+}
+
+export type SelectionSource = () => SelectionSnapshot;
+
+let source: SelectionSource | null = null;
+
+/** Publish the selection snapshot getter (idempotent — last writer wins). */
+export function registerSelectionSource(getter: SelectionSource | null): void {
+  source = getter;
+}
+
+/** Return the current selection ids, or ``[]`` when no source is wired.
+ *
+ *  When the selection list is empty but a *current* object is set
+ *  (single-row focus without an explicit multi-select), the current id
+ *  is returned as a one-element list. This mirrors DataLab desktop's
+ *  action semantics where commands run on the current object whenever
+ *  no broader selection exists. */
+export function getSelection(): string[] {
+  if (!source) return [];
+  const snap = source();
+  if (snap.ids.length > 0) return snap.ids;
+  return snap.currentId ? [snap.currentId] : [];
+}
+
+/** Return the current panel name, or ``"signal"`` as a sane default. */
+export function getCurrentPanel(): string {
+  return source ? source().panel : "signal";
+}
+
+/** Return the focused object id (``null`` when nothing is current). */
+export function getCurrentObjectId(): string | null {
+  return source ? source().currentId : null;
+}