Widget Functionality

What it does

The Components Table widget displays a grid of Tango devices (rows) versus attributes (columns). Each cell shows the current value of a device attribute, supporting:

  • Live updates via GraphQL subscriptions (WebSocket) when enabled.

  • One-shot snapshots via GraphQL queries (HTTP) when live mode is disabled.

  • Enum label translation for numeric values, showing human-readable labels and state chips.

  • Optional hover values: for each visible column, a separate attribute can be shown in a hover card.

Expected data

  • Devices: Tango device paths such as low-tmc/central-node/0. Optionally prefix each row with an endpoint selector, for example 1://low-tmc/leaf-node/0 or TANGO_SECONDARY_HTTP_URL://low-tmc/leaf-node/0.

  • Attributes: simple attribute names such as AdminMode, State, ObsState, HealthState, Status.

The widget internally constructs fully-qualified attribute names ${device}/${attribute} for fetching. It supports a mix of default and endpoint-prefixed rows in a single table. See Endpoint Routing.

GraphQL operations

  • Live stream (subscriptions):

    • Default route: subscription tangoAttributes(fullNames: [String!]!) { device attribute value timestamp }

    • Endpoint route: subscription tangoAttributes(fullNames: [String!]!, endpoint: String) { device attribute value timestamp }

  • One-shot snapshots (queries):

    • Default route: query attributes(fullNames: [String!]!) { device name value timestamp enumLabels }

    • Endpoint route: query attributes(fullNames: [String!]!, endpoint: String) { device name value timestamp enumLabels }

  • Enum metadata (queries): used to map numbers to labels:

    • Default route: query attributes(fullNames: [String!]!) { device name enumLabels timestamp }

    • Endpoint route: query attributes(fullNames: [String!]!, endpoint: String) { device name enumLabels timestamp }

Notes:

  • Backend GraphQL response errors are surfaced by the centralized frontend widget notice system; this widget does not render a local error/notice card.

  • The widget groups rows by endpoint selector and merges the returned data into one table.

  • When useEnumLabels is enabled, numeric values are mapped to enum labels (inline or via metadata). Raw values are displayed otherwise.

  • There are no GraphQL mutations in this widget; it is read-only.

Hover mapping

Use hoverAttrs to define a positional mapping for hover values. For example, given:

  • attributes = ["State", "HealthState"]

  • hoverAttrs = ["Status", "Status"]

Hovering the value under State or HealthState shows the device’s Status value in a hover card, even if Status is not a visible column.