Layout - FlatLayoutBuilder

Layout.FlatLayoutBuilder

A

LayoutBuilder to display in the UI from a TableBuilder.

Layout

calendar

▸ calendar(name, def):

FlatLayoutFinalizer

Create a

LayoutBuilder to display in the UI from a CalendarBuilder.

Parameters

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

Returns

FlatLayoutFinalizer

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")
      .calendar("calendar", builder => builder
          .fromStream(stream.outputStream())
          .event({
              label: (fields) => fields.label,
              start: (fields) => fields.start,
              end: (fields) => fields.end,
          })
      )
      .toTemplate()

---

form

▸ form(name, def):

FlatLayoutFinalizer<FormFinalizer<Record, StructType, Record>>

Create a

LayoutBuilder to display in the UI from a FormBuilder.

Parameters

Name	Type	Description
name	string	-
def	(panel: FormBuilder) => FormFinalizer<Record, StructType, Record>	the FormBuilder to embed.

Returns

FlatLayoutFinalizer<FormFinalizer<Record, StructType, Record>>

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",
      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()

---

grid

▸ grid(def):

FlatLayoutFinalizer

Create a

LayoutBuilder to display in the UI from a GridBuilder.

Parameters

Name	Type	Description
def	(panel: GridBuilder) => GridBuilder	the PanelBuilder to embed.

Returns

FlatLayoutFinalizer

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
          .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()

---

layout

▸ layout(def):

FlatLayoutFinalizer

Create a

LayoutBuilder to display in the UI from the contents of a LayoutBuilder.

Type parameters

Name	Type
P	extends FlatLayoutBuilderType

Parameters

Name	Type	Description
def	FlatLayoutFinalizer	the LayoutBuilder to embed.

Returns

FlatLayoutFinalizer

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")
      .layout(layout)
      .toTemplate()

---

panel

▸ panel(orientation, def):

FlatLayoutFinalizer

Create a

LayoutBuilder to display in the UI from a PanelBuilder.

Parameters

Name	Type	Description
orientation	"row" | "column"	-
def	(panel: PanelBuilder) => PanelBuilder	the PanelBuilder to embed.

Returns

FlatLayoutFinalizer

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('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(name, def):

FlatLayoutFinalizer

Create a

LayoutBuilder to display in the UI from a PivotBuilder.

Parameters

Name	Type	Description
name	string	-
def	(panel: PivotBuilder) => PivotFinalizer	the PivotBuilder to embed.

Returns

FlatLayoutFinalizer

Example

  const stream = Stream(
      "My Stream",
      DictType(
          StringType,
          StructType({
              date: DateTimeType,
          })
      )
  );
  
  // create a upload in a layout
  const layout = new LayoutBuilder("My Layout")
      .pivot("My Pivot", builder => builder
          .fromStream(stream)
      )
      .toTemplate()

---

tab

▸ tab(def):

FlatLayoutFinalizer

Create a

LayoutBuilder to display in the UI from a TabBuilder.

Parameters

Name	Type	Description
def	(panel: TabBuilder) => TabBuilder	the TabBuilder to embed.

Returns

FlatLayoutFinalizer

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(name, def):

FlatLayoutFinalizer

Create a

LayoutBuilder to display in the UI from a TableBuilder.

Parameters

Name	Type	Description
name	string	-
def	(panel: TableBuilder) => TableFinalizer	the TableBuilder to embed.

Returns

FlatLayoutFinalizer

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")
      .table("My Table", builder => builder
          .fromStream(stream)
          .date("Date", fields => fields.date)
          .string("String", fields => fields.string)
          .showKey(false)
      )
      .toTemplate()

---

timeline

▸ timeline(name, def):

FlatLayoutFinalizer

Create a

LayoutBuilder to display in the UI from a TimelineBuilder.

Parameters

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

Returns

FlatLayoutFinalizer

Example

  // use a StructType stream
  const stream = Stream(
      "My Stream",
      DictType(
          StringType,
          StructType({
              id: StringType,
              label: StringType,
              start: DateTimeType,
              end: DateTimeType,
              dependencies: SetType(StringType)
          })
      )
  );
  
  // create a form in a layout
  const layout = new LayoutBuilder("My Layout")
      .timeline("timeline", builder => builder
          .fromStream(stream.outputStream())
          .tasks((fields) => Struct({
             id: fields.id,
             label: fields.label,
             start: fields.start,
             end: fields.end,
             dependencies: fields.dependencies
          }))
          .string("label", fields => fields.label)
      )
      .toTemplate()

---

upload

▸ upload(name, def):

FlatLayoutFinalizer<UploadFinalizer>

Create a

LayoutBuilder to display in the UI from a UploadBuilder.

Parameters

Name	Type	Description
name	string	-
def	(panel: UploadBuilder) => UploadFinalizer	the UploadBuilder to embed.

Returns

FlatLayoutFinalizer<UploadFinalizer>

Example

  // use a BlobType stream
  const stream = Stream(
      "My Stream",
      BlobType,
  );
  
  // create a upload in a layout
  const layout = new LayoutBuilder("My Layout")
      .upload("My Upload", builder => builder
          .fromStream(stream)
          .inputs()
      )
      .toTemplate()

---

vega

▸ vega(name, def):

FlatLayoutFinalizer

Create a

LayoutBuilder to display in the UI from a VegaBuilder.

Parameters

Name	Type	Description
name	string	-
def	(panel: VegaBuilder) => VegaVisualFinalizer	the VegaBuilder to embed.

Returns

FlatLayoutFinalizer

Remarks

See

Vega-Lite for more information about specifications.

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