Layout - GridBuilder

Layout.GridBuilder

Define a UI Grid container from a

Stream within a LayoutBuilder, to display multiple other visuals in a editable 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")
      .grid(builder => builder
         .form("My Form", { w: 3, h: 2, x: 0, y: 0, is_static: false }, 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("My Table",  { w: 3, h: 2, x: 0, y: 3, is_static: false }, 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(name, grid, def):

GridBuilder

Create a

LayoutBuilder to display in the UI from a CalendarBuilder.

Parameters

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

Returns

GridBuilder

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")
      .grid(builder => builder
          .planner("calendar", { w: 3, h: 2, x: 0, y: 0, is_static: false }, builder => builder
              .fromStream(stream.outputStream())
              .calendar({
                  label: (fields) => fields.label,
                  start: (fields) => fields.start,
                  end: (fields) => fields.end,
              })
          )
      )

      .toTemplate()

---

form

▸ form(name, grid, def):

GridBuilder

Add a

FormBuilder to a PanelBuilder within a LayoutBuilder.

Parameters

Name	Type	Description
name	string	the name for the FormBuilder
grid	GridItem	-
def	(panel: FormBuilder) => FormFinalizer<Record, StructType, Record>	the FormBuilder

Returns

GridBuilder

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")
      .grid(builder => builder
         .form("My Form", { w: 3, h: 2, x: 0, y: 0, is_static: false }, builder => builder
             .fromStream(stream)
             .date("Date", fields => fields.date)
             .string("String", fields => fields.string)
         )
      )
      .toTemplate()

---

layout

▸ layout(grid, def):

GridBuilder

Add a

LayoutBuilder to a PanelBuilder within a LayoutBuilder.

Parameters

Name	Type	Description
grid	GridItem	-
def	FlatLayoutFinalizer	the LayoutBuilder

Returns

GridBuilder

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")
      .grid({ w: 3, h: 2, x: 0, y: 0, is_static: false }, builder => builder
         .layout(100, layout)
      )
      .toTemplate()

---

pivot

▸ pivot(name, grid, def):

GridBuilder

Add a

UploadBuilder to a PanelBuilder within a LayoutBuilder.

Parameters

Name	Type	Description
name	string	the name for the UploadBuilder
grid	GridItem	-
def	(panel: PivotBuilder) => PivotFinalizer	the UploadBuilder

Returns

GridBuilder

Example

  // use a DictType stream
  const stream = Stream(
      "My Stream",
      BlobType,
  );
  
  // add a form to a tab
  const layout = new LayoutBuilder("My Layout")
      .grid('column', builder => builder
          .upload("My Upload", { w: 3, h: 2, x: 0, y: 0, is_static: false }, builder => builder
             .fromStream(stream)
             .inputs()
          )
      )
      .toTemplate()

---

tab

▸ tab(grid, def):

GridBuilder

Add a

TabBuilder to a PanelBuilder within a LayoutBuilder.

Parameters

Name	Type	Description
grid	GridItem	-
def	(panel: TabBuilder) => TabBuilder	the TabBuilder

Returns

GridBuilder

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")
      .grid(builder => builder
         .tab('row', { w: 3, h: 2, x: 0, y: 0, is_static: false }, 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(name, grid, def):

GridBuilder

Add a

TableBuilder to a PanelBuilder within a LayoutBuilder.

Parameters

Name	Type	Description
name	string	the name for the TableBuilder
grid	GridItem	-
def	(panel: TableBuilder) => TableFinalizer	the TableBuilder

Returns

GridBuilder

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")
      .grid(builder => builder
         .table("My Table", { w: 3, h: 2, x: 0, y: 0, is_static: false }, builder => builder
             .fromStream(stream)
             .date("Date", fields => fields.date)
             .string("String", fields => fields.string)
             .showKey(false)
         )
      )
      .toTemplate()

---

timeline

▸ timeline(name, grid, def):

GridBuilder

Create a

LayoutBuilder to display in the UI from a TimelineBuilder.

Parameters

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

Returns

GridBuilder

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")
      .grid(builder => builder
          .timeline("timeline", { w: 3, h: 2, x: 0, y: 0, is_static: false }, builder => builder
              .fromStream(stream.outputStream())
              .task({
                  : (fields) => fields.label,
                  start: (fields) => fields.start,
                  end: (fields) => fields.end,
              })
          )
      )

      .toTemplate()

---

upload

▸ upload(name, grid, def):

GridBuilder

Add a

UploadBuilder to a PanelBuilder within a LayoutBuilder.

Parameters

Name	Type	Description
name	string	the name for the UploadBuilder
grid	GridItem	-
def	(panel: UploadBuilder) => UploadFinalizer	the UploadBuilder

Returns

GridBuilder

Example

  // use a DictType stream
  const stream = Stream(
      "My Stream",
      BlobType,
  );
  
  // add a form to a tab
  const layout = new LayoutBuilder("My Layout")
      .grid(builder => builder
          .upload("My Upload", { w: 3, h: 2, x: 0, y: 0, is_static: false }, builder => builder
             .fromStream(stream)
             .inputs()
          )
      )
      .toTemplate()

---

vega

▸ vega(name, grid, def):

GridBuilder

Add a

VegaBuilder to a PanelBuilder within a LayoutBuilder.

Parameters

Name	Type	Description
name	string	the name for the VegaBuilder
grid	GridItem	-
def	(panel: VegaBuilder) => VegaVisualFinalizer	the VegaBuilder

Returns

GridBuilder

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")
      .grid(builder => builder
         .vega("My Scatter", { w: 3, h: 2, x: 0, y: 0, is_static: false }, builder => builder
             .fromStream(stream)
             .scatter({
                 x: (fields) => fields.date,
                 y: (fields) => fields.integer,
                 color: (fields) => fields.string,
                 size: (fields) => fields.float,
             })
         )
      )
      .toTemplate()