Architecture

IIFE Build and Registration

  • The widget is built as an IIFE bundle via Vite/Rollup: see vite.config.lib.ts.

    • Library entry: src/index.ts

    • Format: iife

    • Output file: dist/index.iife.js

    • React is externalised and exposed via globals (React, ReactDOM).

  • During initialization, src/index.ts registers the widget definition with the global Octopus host:

    • It uses makeWidgetDef to create the widget descriptor, then calls O.registerWidget(...).

    • A small IIFE polls globalThis.Octopus to register as soon as the frontend host is available.

This packaging allows octopus-frontend to load the widget bundle directly and have it auto-register at runtime.

Runtime Data Flow

  • Widgets typically obtain data from the Octopus GraphQL backend via the Widget SDK.

  • Depending on the operations scaffolded, the widget may:

    • Subscribe to live streams (WebSocket) for updates.

    • Perform one-shot polling (HTTP) at the dashboard refresh cadence.

    • Execute GraphQL mutations when user actions are supported.

  • Attribute references are normalized before querying the standard Tango GraphQL endpoints in src/AttributeDisplayWidget.tsx.

  • Enum metadata and additional supporting queries can be merged in the component logic (src/AttributeDisplayWidget.tsx).

Importing in octopus-frontend

  • Publish the package (or otherwise make dist/index.iife.js available) and include it in the frontend.

  • When the script runs, it auto-registers the widget with the Octopus host; no explicit bootstrapping is needed beyond loading the bundle.