EntityPreview

Inspect a supplied record

EntityPreview presents the same descriptive content in a Popover, an Inspector, or a page. It displays the supplied identity, facts, condition, source, and report time together. The entity name leads the hierarchy. Condition, facts, data quality, source and update time share aligned rows: muted labels on the left and values on the right. Statuses use text-only badges. Long values wrap in their column. Names and prose preserve their authored case; exact identifiers and marked facts use OPERATOR Mono.

The rows use DescriptionList's reusable details layout, and the quality group uses OperationalStatus. Both keep wrapping 40/60 columns. An ID that exactly matches the entity name appears once in the heading; a distinct ID and any type label remain visible below it.

Condition describes the entity. Data quality describes the supplied report. A last-known healthy condition can coexist with stale data. Applying the next fixture replaces both from one complete record; EntityPreview does not infer one from the other.

Record contract

import { EntityPreview, type EntityPreviewRecord } from "@operator-ds/react";
 
const entity: EntityPreviewRecord = {
  id: "pump-07",
  name: "West pump",
  typeLabel: "Water pump",
  facts: [
    { id: "pressure", label: "Pressure", value: "0 kPa", mono: true },
    { id: "temperature", label: "Temperature", value: "Not supplied" },
  ],
  condition: { label: "Healthy", variant: "success" },
  quality: {
    state: "stale",
    source: "Maintenance report",
    updatedAt: null,
    detail: "Outside the supplied freshness threshold.",
  },
};
 
<EntityPreview entity={entity} headingLevel={3} />;

facts accepts readonly DescriptionList items. Include units in their values and supply meaningful missing-value text. Zero and boolean values remain visible. The required quality object accepts the state, source, updatedAt, and detail inputs from OperationalStatus. Timestamps are epoch milliseconds and display in UTC to the second, as in OperationalStatus; the exact instant stays in the element's dateTime. Missing or invalid timestamps stay explicitly unknown.

Incomplete records

Omit condition when it has not been supplied. An empty quality object displays unknown report state, source, and time; it does not imply an entity's health.

Media and actions

Use media for supplied images, video, or another labeled media component, with its own alternative text and sizing. EntityPreview does not fetch or play media. Use actions for named controls such as CopyButton, Link, and a button that requests pinning.

The hosting surface owns its name, selection, and focus. Choose headingLevel from 2–6 to match that surface's heading hierarchy. Each preview generates its own accessible IDs, so the same record can appear in a transient popover and a pinned inspector at once. A record's id is display content, never a DOM ID.

See the Operations Map recipe for pinning, retained last-known records, and focus restoration.

Props

The forwarded ref targets the root div. Ordinary div attributes are supported. media and actions are the content slots; the component does not accept arbitrary children.

Accessibility

• The entity name labels the preview group; condition and report quality are separate named groups.
• Condition and report state use readable text alongside semantic color.
• Facts use native description-list relationships. Long identifiers and values wrap.
• Supplied actions retain their own keyboard behavior and focus indicators.
• Ordinary record updates do not move focus or announce a live status automatically.

Manifest entry

<EntityPreview entity={{ id: "pump-07", name: "West pump", facts: [{ id: "pressure", label: "Pressure", value: "0 kPa", mono: true }], condition: { label: "Healthy", variant: "success" }, quality: { state: "stale", source: "Maintenance report", updatedAt: null } }} />

{
  "description": "Entity identity with aligned label/value rows for condition, structured facts and report quality in transient or persistent inspection.",
  "props": {
    "entity": {
      "type": "node",
      "required": true,
      "description": "EntityPreviewRecord: id, name, readonly DescriptionListItem facts, and quality (OperationalStatus state/source/updatedAt/detail); optional typeLabel, summary, and condition { label, variant }. Application identity is never used as a DOM ID. An ID identical to the name appears only in the heading. Pass a complete replacement record on update. Condition and facts use DescriptionList details; report quality uses OperationalStatus. Text-only badges, muted labels and right-aligned values share 40/60 columns with wrapping. No data fetching, health inference, or freshness calculation."
    },
    "media": {
      "type": "node",
      "description": "Optional supplied image, video, or other media content. The caller owns sizing, alternative text, transport, and controls."
    },
    "actions": {
      "type": "node",
      "description": "Optional named controls such as Link and CopyButton. The caller owns actions and selection."
    },
    "headingLevel": {
      "type": "number",
      "default": 3,
      "description": "Entity name heading level: 2, 3, 4, 5, or 6. Choose it for the hosting surface's heading hierarchy."
    },
    "className": {
      "type": "string"
    }
  },
  "slots": {
    "media": {
      "type": "ReactNode"
    },
    "actions": {
      "type": "ReactNode"
    }
  },
  "composable_with": [
    "Popover",
    "Inspector",
    "DescriptionList",
    "OperationalStatus",
    "Badge",
    "Link",
    "CopyButton",
    "Button"
  ],
  "never_inside": [
    "Button",
    "Badge",
    "Link",
    "Tooltip"
  ],
  "example": "<EntityPreview entity={{ id: \"pump-07\", name: \"West pump\", facts: [{ id: \"pressure\", label: \"Pressure\", value: \"0 kPa\", mono: true }], condition: { label: \"Healthy\", variant: \"success\" }, quality: { state: \"stale\", source: \"Maintenance report\", updatedAt: null } }} />"
}