> ## Documentation Index
> Fetch the complete documentation index at: https://docs.stratumn.com/llms.txt
> Use this file to discover all available pages before exploring further.

# UI Configuration

Each workflow has a set of customizable views that are used
to display informations about the workflow and its traces.

## Workflow overview

The worfklow overview is a table that displays informations about the workflow's traces.\
Each row represents a trace and its columns are composed of [widgets](/configuration/ui/widgets).

<Frame>
  <img src="https://mintcdn.com/stratumn/_7ghGbILOYM4ffi0/images/configuration/ui/overview.webp?fit=max&auto=format&n=_7ghGbILOYM4ffi0&q=85&s=03089f23d0e7dc5abcffac40e01854a6" loading="lazy" width="3810" height="961" data-path="images/configuration/ui/overview.webp" />
</Frame>

<Expandable title="code example" defaultOpen={false}>
  ```ts Example based on the above screenshot theme={null}
  const overview = {
    tableWidthBuffer: 15,
    minColumnsWidth: 'small',
    minRowsHeight: 30,
    selectBoxWidth: 34,
    overscanRowCount: 1,
    rowsHeight: 42,
    columnsWidth: 'medium',
    dataSelectorPath: 'meta.traceId',
    defaultDisplay: {
      columns: [
        'name',
        'clientName',
        'dueDate',
        'status',
        'progress',
        'order'
      ]
    },
    fixedColumns: [
      {
        key: 'name',
        header: 'Trace',
        width: 'small',
        cell: {
          view: {
            type: 'text',
            path: 'meta.traceName'
          },
          link: {
            rootUrl: '/trace/',
            urlPath: 'meta.traceId',
            openInNewTab: true
          }
        },
        sort: { type: 'text', path: 'meta.traceCreatedAt' }
      }
    ],
    columns: [
      {
        key: 'clientName',
        header: 'Client name',
        width: 'medium',
        cell: {
          view: {
            type: 'text',
            path: `data.clientName`
          }
        }
      },
      {
        key: 'dueDate',
        header: 'Due Date',
        width: 125,
        cell: {
          view: {
            type: 'date',
            path: `data.dueDate`,
            isDeadline: true,
            deadlineWarningBuffer: 10,
            donePath: `data.isPrepared`
          }
        }
      },
      {
        key: 'status',
        header: 'Status',
        width: 'medium',
        cell: {
          view: {
            type: 'status',
            path: `data.status.value`,
            progressPath: `data.status.progress`
          }
        }
      },
      {
        key: 'progress',
        header: 'Progress',
        width: 'medium',
        cell: {
          view: {
            type: 'progress',
            path: `data.status.progress`
          }
        }
      },
      {
        key: 'order',
        header: 'Order',
        width: 'medium',
        cell: {
          view: {
            type: 'labels',
            path: `data.order`
          },
          tooltip: {
            conditionPath: `data.order`,
            delay: 200,
            body: {
              view: {
                key: 'Order',
                type: 'keyValue',
                value: {
                  view: {
                    path: `data.order`,
                    type: 'list'
                  }
                }
              }
            }
          }
        }
      }
    ]
  };
  ```
</Expandable>

## Trace infos

The trace infos is displayed within the trace and consist of multiple expandable and configurable blocks.
These blocks are composed of [widgets](/configuration/ui/widgets) that showcase relevant details about the current state of the trace.

<Frame>
  <img src="https://mintcdn.com/stratumn/_7ghGbILOYM4ffi0/images/configuration/ui/trace-infos.webp?fit=max&auto=format&n=_7ghGbILOYM4ffi0&q=85&s=e4349e8822355716852ca7492e5311e7" loading="lazy" width="1902" height="692" data-path="images/configuration/ui/trace-infos.webp" />
</Frame>

<Note>
  A *Comments* window is usually placed at the bottom of the trace infos.
</Note>

<Expandable title="code example" defaultOpen={false}>
  ```ts Example based on the above screenshot theme={null}
  const traceInfos = {
    view: {
      type: 'box',
      sections: [
        {
          view: {
            title: 'Order details',
            type: 'window',
            collapsable: true,
            displayItemCount: false,
            items: [
              {
                view: {
                  type: 'keyValue',
                  key: 'Order',
                  value: {
                    view: {
                      type: 'text',
                      path: `data.order`
                    }
                  }
                }
              },
              {
                view: {
                  key: 'Sauce',
                  type: 'keyValue',
                  value: {
                    view: {
                      path: `data.sauce`,
                      type: 'text'
                    }
                  }
                }
              },
              {
                view: {
                  key: 'Status',
                  type: 'keyValue',
                  value: {
                    view: {
                      type: 'text',
                      path: `data.status.value`
                    }
                  }
                }
              },
              {
                view: {
                  key: 'Progress',
                  type: 'keyValue',
                  value: {
                    view: {
                      path: `data.status.progress`,
                      type: 'number',
                      format: {
                        options: { style: 'percent', maximumFractionDigits: 0 }
                      }
                    }
                  }
                }
              }
            ]
          }
        },
        {
          view: {
            type: 'window',
            title: 'comments',
            collapsable: true,
            displayItemCount: true,
            items: [
              {
                view: {
                  type: 'array',
                  itemsPath: 'data.comments',
                  itemsWidget: { view: { type: 'comment' } },
                  defaultSort: { direction: 'desc' }
                }
              }
            ]
          }
        }
      ]
    }
  };
  ```
</Expandable>