Implementation:Truera Trulens Otel RecordInfo Component

Knowledge Sources	Truera_Trulens
Domains	Dashboard, Observability, OpenTelemetry
Last Updated	2026-02-14 08:00 GMT

Overview

RecordInfo is the main entry-point React component for the OTEL record viewer, orchestrating tree and timeline views for OpenTelemetry span data along with associated detail panels.

Description

The RecordInfo component serves as the top-level orchestrator for viewing OpenTelemetry span records in the TruLens dashboard. It manages two primary layout concerns:

1. Span navigation (left panel): The user can switch between a Tree view (rendered by RecordTree) and a Timeline view (rendered by RecordTable) using tabs. The Tree view presents spans in a collapsible hierarchical tree, while the Timeline view presents them in a tabular format.
2. Content display (right panel): The user can switch between three content tabs:
   • Details -- rendered by NodeDetails, which shows structured details for the currently selected span node.
   • Raw Attributes -- rendered by JSONViewer, which displays the raw OTEL attribute dictionary for the selected node.
   • Record Information -- rendered by TracePanel, which shows trace-level summary information for the entire root record.

The component maintains three pieces of local state: the currently selected node ID, the active span view (Tree or Timeline), and the active content tab. When no node has been explicitly selected, the root node is used as the default. The layout uses MUI Grid2 for responsive sizing: in Timeline mode the left panel takes the full width, while in Tree mode it splits into a 4-5 / 8-7 column ratio depending on breakpoint.

Usage

Use RecordInfo as the top-level component when you need to render an OTEL record viewer within the TruLens Streamlit dashboard. It expects a pre-built tree of StackTreeNode objects and a flat map of those nodes keyed by ID. Typically, the parent component calls createTreeFromCalls to produce the root tree, then builds the nodeMap lookup and passes both as props.

Code Reference

Source Location

• Repository: Truera_Trulens
• File: src/dashboard/react_components/record_viewer_otel/src/RecordInfo.tsx
• Lines: 1-111

Signature

enum RECORD_CONTENT_TABS {
  DETAILS = 'Details',
  RAW_ATTRIBUTES = 'Raw Attributes',
  RECORD_INFORMATION = 'Record Information',
}

enum SPAN_VIEW {
  TREE = 'Tree',
  TIMELINE = 'Timeline',
}

type RecordTreeProps = {
  nodeMap: Record<string, StackTreeNode>;
  root: StackTreeNode;
};

export default function RecordInfo({ nodeMap, root }: RecordTreeProps): JSX.Element;

Import

import RecordInfo from '@/RecordInfo';

I/O Contract

Inputs

Name	Type	Required	Description
nodeMap	Record<string, StackTreeNode>	yes	A flat lookup map of all span tree nodes keyed by their unique span ID. Used to resolve the currently selected node by ID.
root	StackTreeNode	yes	The root node of the pre-built span tree. Serves as the default selected node and is passed to child view components.

Outputs

Name	Type	Description
JSX.Element	React.ReactElement	A responsive two-panel layout containing the span navigation view (Tree or Timeline) on the left and the content detail view (Details, Raw Attributes, or Record Information) on the right.

Internal State

State Variable	Type	Default	Description
selectedNodeId	null	null	The span ID of the currently selected node. When null, the root node is used.
selectedSpanView	SPAN_VIEW	SPAN_VIEW.TREE	Which navigation view is active (Tree or Timeline).
selectedTab	RECORD_CONTENT_TABS	RECORD_CONTENT_TABS.DETAILS	Which content tab is active in the right panel.

Usage Examples

import RecordInfo from '@/RecordInfo';
import { createTreeFromCalls } from '@/functions/createTreeFromCalls';
import { StackTreeNode } from '@/types/StackTreeNode';
import { Span } from '@/types/Span';

// Given an array of OTEL spans fetched from the backend:
const spans: Span[] = fetchedSpans;

// Build the tree and create a flat node map
const root = createTreeFromCalls(spans);

const nodeMap: Record<string, StackTreeNode> = {};
function collectNodes(node: StackTreeNode) {
  nodeMap[node.id] = node;
  node.children.forEach(collectNodes);
}
collectNodes(root);

// Render the component
<RecordInfo nodeMap={nodeMap} root={root} />

Related Pages

• Environment:Truera_Trulens_Streamlit_Dashboard_Environment
• Truera_Trulens_Otel_StackTreeNode -- The core data structure class passed as props to this component.
• Truera_Trulens_Otel_CreateTreeFromCalls -- The tree-building algorithm that produces the root and nodeMap consumed by this component.
• Truera_Trulens_Otel_Span_Constants -- Constants used to classify span types and attributes within the viewer.