Implementation:Truera Trulens RecordInfo Component
| Knowledge Sources | |
|---|---|
| Domains | Dashboard, Visualization, Frontend |
| Last Updated | 2026-02-14 08:00 GMT |
Overview
RecordInfo is the main layout component that orchestrates the record viewer UI, providing tabbed tree and timeline views for spans alongside detail, JSON, and metadata panels.
Description
The RecordInfo component serves as the primary entrypoint for presenting record information within the TruLens dashboard. It manages three pieces of local state: the currently selected node ID, the active span view mode (Tree or Timeline), and the active content tab. The component renders a two-column responsive grid layout using Material UI's Grid2 system. The left column displays either a hierarchical RecordTree or a flat RecordTable depending on the selected span view. The right column provides tabbed panels for viewing node details, span JSON, full record JSON, app JSON, and record metadata.
The component defines two enums: RECORD_CONTENT_TABS (with values Details, Span JSON, Record JSON, App JSON, and Metadata) and SPAN_VIEW (with values Tree and Timeline). When the Timeline view is selected, the layout expands the left panel to full width. The right-panel content is determined by the getSelectedView internal function, which conditionally renders a JSONViewer for JSON tabs, a Details component for the Details tab, or a metadata display for the Metadata tab.
Usage
Use RecordInfo as the top-level component for rendering a single record's call stack and associated data in the TruLens Streamlit dashboard. It requires a pre-built StackTreeNode root, a node map for O(1) lookup, and the raw record and app JSON objects.
Code Reference
Source Location
- Repository: Truera_Trulens
- File: src/dashboard/react_components/record_viewer/src/RecordInfo.tsx
- Lines: 1-139
Signature
enum RECORD_CONTENT_TABS {
DETAILS = 'Details',
SPAN_JSON = 'Span JSON',
RECORD_JSON = 'Record JSON',
APP_JSON = 'App JSON',
RECORD_METADATA = 'Metadata',
}
enum SPAN_VIEW {
TREE = 'Tree',
TIMELINE = 'Timeline',
}
type RecordTreeProps = {
appJSON: AppJSONRaw;
nodeMap: Record<string, StackTreeNode>;
recordJSON: RecordJSONRaw;
root: StackTreeNode;
};
export default function RecordInfo({ appJSON, nodeMap, recordJSON, root }: RecordTreeProps): JSX.Element
Import
import RecordInfo from '@/RecordInfo';
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| appJSON | AppJSONRaw | yes | The raw application JSON containing app_id, feedback_definitions, feedback_mode, root_class, and app configuration. |
| nodeMap | Record<string, StackTreeNode> | yes | A flat dictionary mapping node IDs to their corresponding StackTreeNode instances for O(1) lookup of selected nodes. |
| recordJSON | RecordJSONRaw | yes | The raw record JSON object containing record_id, cost, perf, calls, main_input, main_output, meta, and other fields. |
| root | StackTreeNode | yes | The root node of the call stack tree built from the record's calls array. |
Outputs
| Name | Type | Description |
|---|---|---|
| JSX.Element | React element | A responsive Material UI Grid2 layout containing the span view selector (Tree/Timeline), the span display panel (RecordTree or RecordTable), the content tab selector, and the corresponding detail/JSON panel. |
Usage Examples
import RecordInfo from '@/RecordInfo';
import { createTreeFromCalls, createNodeMap } from '@/utils/utils';
import { AppJSONRaw, RecordJSONRaw } from '@/utils/types';
// Build the tree and node map from raw data
const root = createTreeFromCalls(recordJSON, appJSON.root_class.name);
const nodeMap = createNodeMap(root);
// Render the RecordInfo component
<RecordInfo
appJSON={appJSON}
nodeMap={nodeMap}
recordJSON={recordJSON}
root={root}
/>