Creating a Tab

Module tabs enable a module to provide an interface to users. Tabs are written in JSX and are designed for the React based frontend.

The Tab Interface

The Frontend expects each tab to provide an export default of an object conforming to the following interface:

interface Tab {
  toSpawn: ((context: DebuggerContext) => boolean) | undefined;
  body: ((context: DebuggerContext) => JSX.Element;)
  label: string;
  iconName?: string;
}

toSpawn

If not provided, when it's corresponding bundle is loaded, the tab will also be loaded.

Otherwise, the tab will be spawned depending on the return value of the function, true to spawn the tab, false otherwise. This is where you can use module contexts to determine if the tab should be spawned.

// Will spawn the Curve tab if there are any drawn curves
const toSpawn = (context) => context.context.moduleHelpers.curve.state.drawnCurves.length > 0

body

If toSpawn returns true, this function will be called to generate the content to be displayed. You can use JSX syntax for this.

const body = (context) => <div>This is the repeat tab</div>;

Similarly, the debugger context is available here, which allows you to access module contexts.

label

A string containing the text for the tooltip to display when the user hovers over the tab's icon.

iconName