Layout - TabBuilder

Layout.TabBuilder

Define a UI Tabbed container from a

Stream within a LayoutBuilder, to display one of multiple other visuals.

Example

  // use a StructType stream
  const stream = Stream(
      "My Stream",
      StructType({
         date: DateTimeType,
      }),
      true
  );
  
  // create a tab in a layout containing a form and a table
  const layout = new LayoutBuilder("My Layout")
      .tab(builder => builder
         .form("My Form", builder => builder
             .fromStream(stream)
             .date("Date", fields => fields.date)
         )
         .table("My Table", builder => builder
             .fromStream(stream)
             .date("Date", fields => fields.date)
         )
      )
      .toTemplate()

Layout

calendar

▸ calendar(name, def):

TabBuilder

Add a

CalendarBuilder to a TabBuilder within a LayoutBuilder.

Parameters

Name	Type	Description
name	string	the name for the VegaBuilder
def	(panel: CalendarBuilder) => CalendarFinalizer<Record, DictType>	the VegaBuilder

Returns

TabBuilder

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")
      .tab(builder => builder
         .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()

---

form

▸ form(name, def):

TabBuilder

Add a

FormBuilder to a TabBuilder within a LayoutBuilder.

Parameters

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

Returns

TabBuilder

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")
      .tab(builder => builder
         .form("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)
         )
      )
      .toTemplate()

---

layout

▸ layout(def):

TabBuilder

Add the contents of a

LayoutBuilder to a TabBuilder within a LayoutBuilder.

Parameters

Name	Type	Description
def	FlatLayoutFinalizer	the LayoutBuilder

Returns

TabBuilder

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)
          .integer("Integer", fields => fields.integer)
          .boolean("Boolean", fields => fields.boolean)
          .float(
              "Float",
              {
                  value: fields => fields.float,
                  min: fields => fields.min_float,
                  max: fields => fields.max_float,
              }
          )
      )
      .toTemplate()

  // add the other layout into a tab
  const other_layout = new LayoutBuilder("My Layout")
      .tab(builder => builder
         .layout(layout)
      )
      .toTemplate()

---

table

▸ table(name, def):

TabBuilder

Add a

TableBuilder to a TabBuilder within a LayoutBuilder.

Parameters

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

Returns

TabBuilder

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

---

timeline

▸ timeline(name, def):

TabBuilder

Add a

TimelineBuilder to a TabBuilder within a LayoutBuilder.

Parameters

Name	Type	Description
name	string	the name for the VegaBuilder
def	(panel: TimelineBuilder) => TimelineFinalizer<Record, DictType, Record>	the VegaBuilder

Returns

TabBuilder

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")
      .tab(builder => builder
         .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()

---

upload

▸ upload(name, def):

TabBuilder

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

TabBuilder

Example

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

---

vega

▸ vega(name, def):

TabBuilder

Add a

VegaBuilder to a TabBuilder within a LayoutBuilder.

Parameters

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

Returns

TabBuilder

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")
      .tab(builder => builder
         .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()