Visualization and custom renderers

​

Overview

• Open the viewer with fxtr view to watch an experiment and inspect its results.
• Define renderers as a TypeScript package inside your project, in its views/ directory, using the fxtr-view library.
• Build the package into a view bundle and the viewer picks it up, so your data and your steps appear the way you designed.

​

The experiment viewer

uv run fxtr view

• The tree of workflow invocations. The root workflow at the top, with each child workflow one level down. A mapped child appears once per key.
• A card for every step and child workflow a workflow scheduled, showing its docstring, how it was mapped, its progress, and its log lines. A card links to the function’s code in your editor.
• The arrays each operation received and produced, as tables you can page through and slice by dimension. A value that references an entity is a link.
• Entity details, opened from any link, in a pane you can keep alongside the trace. Hovering a link shows a preview.
• Your project’s README, linked from the side rail.

​

Customizing visualizations

• fxtr-view: the small, stable contract between a renderer and the viewer: the slot declarations, renderer(...) for registering a component, useEntity(id) and unwrap(...) for loading an entity’s data, and EntityLink for linking to another entity.
• fxtr-view-kit: a set of conveniences for building renderers: layouts, a Kind label, FieldList, message lists for conversations, singleInvocation and eachInvocation for wrapping a view of one invocation into a panel, and LoadEach for loading many entities at once.

import { EntityLink, unwrap, useEntity, type EntityID, type EntityViewProps } from "fxtr-view";
import { FieldList, Kind, layout } from "fxtr-view-kit";

interface AnswerData {
  config: EntityID;
  question: string;
  text: string;
}

export function AnswerPanel({ id }: EntityViewProps) {
  const answer = unwrap(useEntity(id as EntityID<AnswerData>));
  return (
    <div className={layout.panel}>
      <div className={layout.kindLine}><Kind>Answer</Kind></div>
      <h2 className={layout.title}>{answer.question}</h2>
      <p className={layout.prose}>{answer.text}</p>
      <FieldList fields={[["config", <EntityLink id={answer.config} />]]} />
    </div>
  );
}

import { EntityPanel, InvocationPanel, renderer, type ViewBundle } from "fxtr-view";
import { singleInvocation } from "fxtr-view-kit";
import { AnswerPanel } from "./answer";
import { Overview } from "./overview";

const bundle: ViewBundle = {
  renderers: [
    renderer(EntityPanel, "org.example.qa.Answer.v1", "my-project.AnswerPanel", AnswerPanel),
    renderer(InvocationPanel, "qa.evaluate", "my-project.Overview", singleInvocation(Overview)),
  ],
};

export default bundle;

​

Results overviews

​

Styling

​

Building and loading custom renderers

import { defineViewBundleConfig } from "fxtr-view-bundle";

export default defineViewBundleConfig({ entry: "src/bundle.ts" });