Skip to main content

Layout Manager

The layout manager generates a UI layout dynamically from a YAML file defined server-side.

A simple layout definition is shown below:

simple-layout.yml
name: Simple Layout
description: A simple layout
children:
  - type: row
    children:
      - type: col
        children:
          - type: scantable
            title: Scans

  - type: row
    children:
      - type: col
        children:
          - type: hardwaregroup
            title: Diffractometer2
            ids:
              - id: omega
                step: 90
                steps: [45, 90, 180]

To include a layout in the sidebar navigation, set insidebar: true. To use a meaningful icon for the link, also set icon to either:

name: Simple Layout
description: A simple layout
insidebar: true
icon: fa-picture-o
children: ...

Children​

The actual layout is defined in the children property. The general structure of each item is as follows:

- type: row # the type of object
  children: # its children
    ...

These can be nested as deeply as needed. For layout consistency, the root items should be rows (row) and their direct children should be columns (col). See Wrappers for more details.

The layout manager can load a number of wrappers and display components to allow defining complex user interfaces:

Wrappers​

Display components​

Component options​

Options defined in YAML are passed through to loaded components. For example in the case of a motor:

- type: hardwaregroup
  title: Diffractometer2
  ids:
    - id: omega
      step: 90
      steps: [45, 90, 180]

See Customising for more information. The options defined for each component are detailed on each component's page, under UI Components.

Restricting access​

Layouts can be restricted by setting the require_staff flag. This will restrict this particular layout to staff members only:

name: Simple Layout
description: A simple layout
require_staff: true
children: ...

Partials, templating, and variables​

Layouts can also be constructed via composition. Daiquiri provides some common partial layouts that can be reused between beamlines in the daiquiri/resources/layout/partials folder.

A partial can be included as follows:

name: include
description: Include test
children:
  - !include partials/2dview.yml

The include tag will first search the local directory, so it is also possible to build local partials and include files to build layouts from smaller components.

Some partials contain variables that can be modified in the resulting layout. To override those variables, provide a variables property as a child of the include tag:

name: include
description: Include test
children:
  - !include
    file: partials/2dview.yml
    variables:
      rows: 1
  - !include partials/single_row.yml