Layout - PanelBuilder

Layout.PanelBuilder

Define a UI Flex container from a

Stream within a LayoutBuilder, to display multiple other visuals in a nested flex layout.

Example

  // use a StructType stream
  const stream = Stream(
      "My Stream",
      StructType({
         string: StringType,
         date: DateTimeType,
         float: FloatType,
         integer: IntegerType,
         boolean: BooleanType,
      }),
  );
  
  // create a tab in a layout containing a form and a table
  const layout = new LayoutBuilder("My Layout")
      .panel('column', builder => builder
         .form(50, "My Form", builder => builder
             .fromStream(stream)
             .date("Date", fields => fields.date)
             .string("String", fields => fields.string)
             .integer("Integer", fields => fields.integer)
             .boolean("Boolean", fields => fields.boolean)
             .float("Float", fields => fields.float)
         )
         .table(50, "My Table", builder => builder
             .fromStream(stream)
             .date("Date", fields => fields.date)
             .string("String", fields => fields.string)
             .integer("Integer", fields => fields.integer)
             .boolean("Boolean", fields => fields.boolean)
             .float("Float", fields => fields.float)
         )
      )
      .toTemplate()

Layout

calendar

▸ calendar(percentage, name, def):

PanelBuilder

Create a

LayoutBuilder to display in the UI from a CalendarBuilder.

Parameters

Name	Type	Description
`percentage`	`number`	-
`name`	`string`	-
`def`	(`panel`: `CalendarBuilder`) => `CalendarFinalizer`<`Record`, `DictType`>	the CalendarBuilder to embed.

Returns

PanelBuilder

Remarks

A Form is editable when defined from a writable

Stream, such as produced by a SourceBuilder

Example

  // use a StructType stream
  const stream = Stream(
      "My Stream",
      DictType(
          StringType,
          StructType({
              label: StringType,
              start: DateTimeType,
              end: DateTimeType,
          })
      )
  );
  
  // create a form in a layout
  const layout = new LayoutBuilder("My Layout")
      .panel('row', builder => builder
          .planner(100, "calendar", builder => builder
              .fromStream(stream.outputStream())
              .calendar({
                  label: (fields) => fields.label,
                  start: (fields) => fields.start,
                  end: (fields) => fields.end,
              })
          )
      )

      .toTemplate()

form

▸ form(percentage, name, def):

PanelBuilder

Add a

FormBuilder to a PanelBuilder within a LayoutBuilder.

Parameters

Name	Type	Description
`percentage`	`number`	the percentage of the parent for the FormBuilder
`name`	`string`	the name for the FormBuilder
`def`	(`panel`: `FormBuilder`) => `FormFinalizer`<`Record`, `StructType`, `Record`>	the FormBuilder

Returns

PanelBuilder

Example

  // use a StructType stream
  const stream = Stream(
      "My Stream",
      StructType({
          string: StringType,
          date: DateTimeType,
      })
  );
  
  // add a form to a tab
  const layout = new LayoutBuilder("My Layout")
      .panel('row', builder => builder
         .form(100, "My Form", builder => builder
             .fromStream(stream)
             .date("Date", fields => fields.date)
             .string("String", fields => fields.string)
         )
      )
      .toTemplate()

layout

▸ layout(percentage, def):

PanelBuilder

Add a

LayoutBuilder to a PanelBuilder within a LayoutBuilder.

Parameters

Name	Type	Description
`percentage`	`number`	the percentage of the parent for the LayoutBuilder
`def`	`FlatLayoutFinalizer`	the LayoutBuilder

Returns

PanelBuilder

Example

  // use a DictType stream
  const stream = Stream(
      "My Stream",
      DictType(
          StringType,
          StructType({
              string: StringType,
              date: DateTimeType,
          })
      )
  );
  
  // create a layout containing a form
  const layout = new LayoutBuilder("My Layout")
      .form("My Form", builder => builder
          .fromStream(stream)
          .date("Date", fields => fields.date)
          .string("String", fields => fields.string)
      )
      .toTemplate()

  // create a layout with a panel, containing the layout
  const layout = new LayoutBuilder("My Layout")
      .panel('column', builder => builder
         .layout(100, layout)
      )
      .toTemplate()

panel

▸ panel(percentage, orientation, def):

PanelBuilder

Add a nested

PanelBuilder to a PanelBuilder within a LayoutBuilder.

Parameters

Name	Type	Description
`percentage`	`number`	the percentage of the parent for the PanelBuilder
`orientation`	`"row"` \| `"column"`	-
`def`	(`panel`: `PanelBuilder`) => `PanelBuilder`	the PanelBuilder

Returns

PanelBuilder

Example

  // use a DictType stream
  const stream = Stream(
      "My Stream",
      DictType(
          StringType,
          StructType({
              string: StringType,
              date: DateTimeType,
          })
      )
  );
  
  // add a form to a tab
  const layout = new LayoutBuilder("My Layout")
      .panel('column', builder => builder
         .panel(100, 'row', builder => builder
             .table(100, "My Table", builder => builder
                 .fromStream(stream)
                 .date("Date", fields => fields.date)
                 .string("String", fields => fields.string)
                 .showKey(false)
             )
         )
      )
      .toTemplate()

pivot

▸ pivot(percentage, name, def):

PanelBuilder

Add a

UploadBuilder to a PanelBuilder within a LayoutBuilder.

Parameters

Name	Type	Description
`percentage`	`number`	the percentage of the parent for the UploadBuilder
`name`	`string`	the name for the UploadBuilder
`def`	(`panel`: `PivotBuilder`) => `PivotFinalizer`	the UploadBuilder

Returns

PanelBuilder

Example

  // use a DictType stream
  const stream = Stream(
      "My Stream",
      BlobType,
  );
  
  // add a form to a tab
  const layout = new LayoutBuilder("My Layout")
      .panel('column', builder => builder
          .upload(100, "My Upload", builder => builder
             .fromStream(stream)
             .inputs()
          )
      )
      .toTemplate()

tab

▸ tab(percentage, def):

PanelBuilder

Add a

TabBuilder to a PanelBuilder within a LayoutBuilder.

Parameters

Name	Type	Description
`percentage`	`number`	the percentage of the parent for the TabBuilder
`def`	(`panel`: `TabBuilder`) => `TabBuilder`	the TabBuilder

Returns

PanelBuilder

Example

  // use a DictType stream
  const stream = Stream(
      "My Stream",
      DictType(
          StringType,
          StructType({
              string: StringType,
              date: DateTimeType,
          })
      )
  );
  
  // add a form to a tab
  const layout = new LayoutBuilder("My Layout")
      .panel('column', builder => builder
         .tab(100, 'row', builder => builder
             .table("My Table", builder => builder
                 .fromStream(stream)
                 .date("Date", fields => fields.date)
                 .string("String", fields => fields.string)
                 .showKey(false)
             )
            .table("My Other Table", builder => builder
                 .fromStream(stream)
                 .columns()
             )
         )
      )
      .toTemplate()

table

▸ table(percentage, name, def):

PanelBuilder

Add a

TableBuilder to a PanelBuilder within a LayoutBuilder.

Parameters

Name	Type	Description
`percentage`	`number`	the percentage of the parent for the TableBuilder
`name`	`string`	the name for the TableBuilder
`def`	(`panel`: `TableBuilder`) => `TableFinalizer`	the TableBuilder

Returns

PanelBuilder

Example

  // use a DictType stream
  const stream = Stream(
      "My Stream",
      DictType(
          StringType,
          StructType({
              string: StringType,
              date: DateTimeType,
          })
      )
  );
  
  // add a table to a tab
  const layout = new LayoutBuilder("My Layout")
      .panel('row', builder => builder
         .table(100, "My Table", builder => builder
             .fromStream(stream)
             .date("Date", fields => fields.date)
             .string("String", fields => fields.string)
             .showKey(false)
         )
      )
      .toTemplate()

timeline

▸ timeline(percentage, name, def):

PanelBuilder

Create a

LayoutBuilder to display in the UI from a TimelineBuilder.

Parameters

Name	Type	Description
`percentage`	`number`	-
`name`	`string`	-
`def`	(`panel`: `TimelineBuilder`) => `TimelineFinalizer`<`Record`, `DictType`, `Record`>	the TimelineBuilder to embed.

Returns

PanelBuilder

Remarks

A Form is editable when defined from a writable

Stream, such as produced by a SourceBuilder

Example

  // use a StructType stream
  const stream = Stream(
      "My Stream",
      DictType(
          StringType,
          StructType({
              label: StringType,
              start: DateTimeType,
              end: DateTimeType,
          })
      )
  );
  
  // create a form in a layout
  const layout = new LayoutBuilder("My Layout")
      .panel('row', builder => builder
          .planner(100, "calendar", builder => builder
              .fromStream(stream.outputStream())
              .calendar({
                  label: (fields) => fields.label,
                  start: (fields) => fields.start,
                  end: (fields) => fields.end,
              })
          )
      )

      .toTemplate()

upload

▸ upload(percentage, name, def):

PanelBuilder

Add a

UploadBuilder to a PanelBuilder within a LayoutBuilder.

Parameters

Name	Type	Description
`percentage`	`number`	the percentage of the parent for the UploadBuilder
`name`	`string`	the name for the UploadBuilder
`def`	(`panel`: `UploadBuilder`) => `UploadFinalizer`	the UploadBuilder

Returns

PanelBuilder

Example

  // use a DictType stream
  const stream = Stream(
      "My Stream",
      BlobType,
  );
  
  // add a form to a tab
  const layout = new LayoutBuilder("My Layout")
      .panel('column', builder => builder
          .upload(100, "My Upload", builder => builder
             .fromStream(stream)
             .inputs()
          )
      )
      .toTemplate()

vega

▸ vega(percentage, name, def):

PanelBuilder

Add a

VegaBuilder to a PanelBuilder within a LayoutBuilder.

Parameters

Name	Type	Description
`percentage`	`number`	the percentage of the parent for the VegaBuilder
`name`	`string`	the name for the VegaBuilder
`def`	(`panel`: `VegaBuilder`) => `VegaVisualFinalizer`	the VegaBuilder

Returns

PanelBuilder

Example

  // use a DictType stream
  const stream = Stream(
      "My Stream",
      DictType(
          StringType,
          StructType({
              string: StringType,
              date: DateTimeType,
          })
      )
  );
  
  // add a vega to a tab
  const layout = new LayoutBuilder("My Layout")
      .panel('row', builder => builder
         .vega(100, "My Scatter", builder => builder
             .fromStream(stream)
             .scatter({
                 x: (fields) => fields.date,
                 y: (fields) => fields.integer,
                 color: (fields) => fields.string,
                 size: (fields) => fields.float,
             })
         )
      )
      .toTemplate()