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: Readonly<RenderState>, done: () => void)

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(field: keyof RenderState)

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(topics: string[])

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

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

advertise(topic: string, datatype: string, options?: Record<string, unknown>)

Use context.advertise to indicate an intent to publish a specific datatype on a topic. A panel must call context.advertise before being able to publish on the topic (context.publish). Options are specific to the data source – some make use of options; others do not.

context.advertise("/my_image_topic", "sensor_msgs/Image");

unadvertise(topic: string)

Use context.unadvertise to remove advertising for a topic.

context.unadvertise("/my_image_topic");

publish(topic: string, message: Record<string, unknown>)

Use context.publish to publish a message on a previously advertised topic. If the topic is not advertised or otherwise malformed, the function will throw an error.

context.advertise("/my_color_topic", "std_msgs/ColorRGBA");
context.publish("/my_color_topic", { r: 0, g: 1, b: 0, a: 1 });