Panel API methods

For full details on the PanelExtensionContext and RenderState types, check out @foxglove/studio.

In the example panel component code (ExamplePanel.tsx), you'll notice some attributes and methods attached to your context.

For one, the panel is rendered to context.panelElement, which stands for the panel's root element. You should attach your component to this root element.

export function initExamplePanel(context: PanelExtensionContext) {
  ReactDOM.render(<ExamplePanel context={context} />, context.panelElement);
}

Let's cover some of the most relevant API methods attached to your context.

onRender(renderState, done)

Studio will run context.onRender whenever your panel needs to re-render during playback.

The function accepts renderState and a done callback as its arguments.

Note: Your onRender function must call done after rendering to indicate that the panel is ready to render the next set of data. The exact placement of this done invocation will vary between frameworks and different extensions' logic.

context.onRender = (renderState: RenderState, done) => {
  setRenderDone(done);
  setTopics(renderState.topics);
  setMessages(renderState.currentFrame);
};

watch(fieldName)

Use context.watch to indicate which fields in renderState (e.g. currentFrame, allFrames, topics, previewTime) should trigger panel re-renders when their contained values change.

context.watch("topics");
context.watch("currentFrame");

subscribe(topicName)

Use context.subscribe to indicate the topics that your panel should subscribe to when populating renderState.currentFrame.

context.subscribe(["/some/topic"]);