layouts

The layouts: how the one set of panels is arranged over the stream. A layout is a component that decides where each panel is painted and the stats it lays over the stream; the panels themselves know nothing of it. What a layout places is decided for all of them: the panels and their order by panels/catalog.ts (PANELS, each with its gate and body), the other controls by useActions and the events its chrome answers by useChromeEvents (./actions). Its look is its own stylesheet plus the size tokens index.css names on :root (--control-h, --stack-gap and the rest), which it may set again on its root.

Adding a layout is a component over those, one entry here, its value in the server's ui_layout enum (settings.py), and its name in the dictionary (layout.<id>).

Which layout a page shows: the pick stored under the prefixed ui_layout key, else what the server names in ui_layout (its /api/status probe before the stream connects, its settings payload after), else the first entry. A single allowed value locks it and hides the toggle.

Every layout is imported statically, never split into a lazy chunk. Every page paints a layout at once, so splitting saves nothing, and a split chunk imports the entry back: under a page URL carrying user:pass@, Chrome evaluates that entry a second time, which starts a second core that evicts the first as the same tab, and a failed chunk fetch unmounts the dashboard.

InterfacesCopy Anchor Link

LayoutSpecCopy Anchor Link

Defined in: layouts/index.ts:43

One layout of the registry.

PropertiesCopy Anchor Link

idCopy Anchor Link

id: string;

Defined in: layouts/index.ts:45

The value ui_layout names it by.

labelKeyCopy Anchor Link

labelKey: string;

Defined in: layouts/index.ts:47

The dictionary key of its name.

iconCopy Anchor Link

icon: ComponentType<{
  className?: string;
}>;

Defined in: layouts/index.ts:49

The mark the layout toggle draws for it.

componentCopy Anchor Link

component: ComponentType;

Defined in: layouts/index.ts:51

The component that arranges the panels.

statsCopy Anchor Link

stats: ComponentType;

Defined in: layouts/index.ts:53

What the stats switch lays over the stream.

VariablesCopy Anchor Link

LAYOUTSCopy Anchor Link

const LAYOUTS: LayoutSpec[];

Defined in: layouts/index.ts:57

Every layout, in the order the toggle cycles them.

FunctionsCopy Anchor Link

layoutById()Copy Anchor Link

function layoutById(id): LayoutSpec;

Defined in: layouts/index.ts:77

The spec of id, else the first layout.

ParametersCopy Anchor Link

ReturnsCopy Anchor Link

LayoutSpec

resolveLayout()Copy Anchor Link

function resolveLayout(serverValue, allowed): LayoutSpec;

Defined in: layouts/index.ts:87

The layout the page shows: the stored pick where the server allows it, else the server's value, else the first layout.

ParametersCopy Anchor Link

ReturnsCopy Anchor Link

LayoutSpec

storeLayout()Copy Anchor Link

function storeLayout(id): void;

Defined in: layouts/index.ts:96

Stores a pick, which outranks the server's default on this browser.

ParametersCopy Anchor Link

ReturnsCopy Anchor Link

void