Client API Context -- Hook based Graphistry embed

[exrhizo]

Modern dev ergonomics

Warning: Slop Quality level -- for demonstration purposes only

Simple App.tsx

The entire host integration fits in a provider and two panels:

<GraphistryProvider host={HOST} dataset={DATASET} params={SCENE_PARAMS} bg="#0A0814">
  <GraphistryScene className="absolute inset-0 size-full" />
  <SelectionInspector />
  <FilterBar />
</GraphistryProvider>

A panel is data + UI, nothing else:

function FilterBar() {
  const filters = useFilters();   // { filters, add, remove, reset, ready, error }
  return (
    <Panel title="Filters" collapsible>
      <Input onSubmit={() => filters.add(expr)} />
      <Button onClick={() => filters.reset()}>Reset</Button>
      {filters.filters.map((f) => (
        <Chip onRemove={() => filters.remove(f.id)}>{filterDisplay(f)}</Chip>
      ))}
    </Panel>
  );
}

No subscription wiring. No falcor paths to know. No rxjs. useFilters() returns a typed snapshot and Promise-returning mutators; everything reactive is handled by the provider.

SelectionInspector follows the same shape — useSelection() → { points, edges, pointLabels, edgeLabels, ready } — and the single-node case surfaces the full column map with { withColumns: true } opted in at the provider registry.

What's under the covers

• Host side (projects/client-api/src/)

  • rpc.js — correlation-id RPC client (call / get / set) with typed errors.
  • subscriptions.js — SubscriptionManager with init-replay (cold-load subscribes land after iframe's listener exists), per-path JSON dedupe (kills hover-driven re-render flash), options pass-through, refresh(path) for post-mutation resubscribe, and an iframe-log relay so iframe diagnostics surface in the host console.
  • externalStore.js — shallow-eq + refcount store.
  • snapshots.js — projections + canonical fragment pathSets.

• React side (projects/client-api-context/src/)

  • GraphistryProvider — handshake, rpc lifecycle, optional bg / filters / exclusions props, controlled-vs-uncontrolled domain flags.
  • GraphistryScene — the iframe element; just a stable ref-callback into the provider.
  • Hooks: useGraphistry, useGraphistryScene, useSelection, useLabels, useFilters. All typed.

Pairs with

• graphistry/graphistry#3088 — the iframe-side half (Protocol v2 wire format + whitelist entries + the iframe RPC set path + the redux-dispatch nudge that repaints pull-based viz containers after RPC writes). The two PRs are designed to land together; neither does anything useful alone.