Skip to main content

Cell Type Reference

Cells are the fundamental building blocks for displaying data in Michelangelo AI UI. They define how individual fields are rendered across all view types: list views (table columns), detail views (metadata headers), and forms.

Cell types are powered by the same rendering code in components/cell/, with extensions registered in components/table/components/table-cell/.

Available Cell Types​

All cell types are defined in CellType enum. Here are the standard types you can use in your configurations:

TEXT​

{
  id: 'metadata.name',
  label: 'Name',
  type: CellType.TEXT
}

Description: Standard non-formatted text
Use for: Names, IDs, simple string values

DATE​

{
  id: 'metadata.creationTimestamp.seconds',
  label: 'Created',
  type: CellType.DATE
}

Description: Formatted timestamp
Example output: 2024/01/09 17:53:49
Use for: Any timestamp

STATE​

{
  id: 'status.state',
  label: 'State',
  type: CellType.STATE,
  stateTextMap: {
    0: 'Queued',
    2: 'Running',
    3: 'Succeeded',
    5: 'Failed',
  },
  stateColorMap: {
    0: 'gray',
    2: 'blue',
    3: 'green',
    5: 'red',
  },
}

Description: Colored tag with state-specific styling (green for success, red for error, etc.)
Use for: Any status field
Required config: stateTextMap, stateColorMap

TYPE​

{
  id: 'spec.type',
  label: 'Type',
  type: CellType.TYPE,
  typeTextMap: {
    1: 'Train',
    2: 'Evaluation',
    3: 'Performance Evaluation',
  },
}

Description: Badge with formatted text (sentence case, stripped prefixes/suffixes)
Use for: Entity types, enum values
Required config: typeTextMap

{
  id: 'metadata.name',
  label: 'Name',
  type: CellType.LINK,
  url: '/${studio.projectId}/${studio.phase}/runs/${data.metadata.name}'
}

Description: Clickable link
Use for: Navigation to entity detail views, external links
Note: Implicitly used when url property is provided

DESCRIPTION​

{
  id: 'spec.revision.name',
  label: 'Revision',
  type: CellType.DESCRIPTION
}

Description: Text rendered slightly smaller and more opaque than standard text
Use for: Secondary information, subtitles, descriptions

BOOLEAN​

{
  id: 'spec.enabled',
  label: 'Enabled',
  type: CellType.BOOLEAN
}

Description: Checkmark icon with formatted text
Use for: Boolean flags, true/false values

TAG​

{
  id: 'metadata.label',
  label: 'Label',
  type: CellType.TAG
}

Description: Gray tag with formatted text
Use for: Labels, tags, categories

MULTI​

{
  id: 'spec.pipeline.name',
  label: 'Pipeline',
  items: [
    { id: 'spec.pipeline.name', type: CellType.TEXT },
    { id: 'spec.revision.name', type: CellType.DESCRIPTION },
  ],
}

Description: Renders column items in a vertical list
Use for: Composite fields showing multiple related values
Required config: items array

Shared Cell Properties​

All cell types support these common properties (from SharedCell interface):

PropertyTypeDescriptionRequired
idstringUnique identifier for the column. Used to access data if no accessor provided✅ Yes
labelstringDisplay label in table header or form fieldNo
typeCellTypeCell renderer type (TEXT, DATE, STATE, etc.)No (defaults to TEXT)
accessorstring | functionCustom JSON path or function to access cell valueNo
iconstringIcon to display before the cell valueNo
tooltipCellTooltipTooltip configuration (content + optional action)No
endEnhancerobjectContent to display after the cell valueNo
CellCellRendererCustom cell renderer componentNo
styleStyleObject | functionCustom styles for the cellNo

Property Details​

accessor​

More flexible control over cell value extraction:

// JSON path string
{ id: 'name', accessor: 'spec.content.metadata.name' }

// Function
{
  id: 'revision',
  accessor: (row) => `Revision ${row?.spec?.revisionId}`
}

// Computed value example
{
  id: 'duration',
  label: 'Duration',
  accessor: (record) => {
    const start = parseInt(record.startTime.seconds) * 1000;
    const end = parseInt(record.endTime.seconds) * 1000;
    return `${Math.round((end - start) / 1000)}s`;
  },
}

tooltip​

Interactive tooltips with optional actions.

Important: Tooltip behavior differs between table cells and metadata cells:

In table columns (list views):

  • Supports action: 'filter' - Clicking tooltip filters table by that value
  • Supports action: 'custom' - Custom click handler
  • Tooltip content function receives row data: ({ row, value, record }) => ReactNode
  • Filter action automatically wired to table filtering
// Simple filter tooltip (table only)
{
  id: 'status',
  label: 'Status',
  tooltip: {
    content: 'Click to filter by this status',
    action: 'filter'
  }
}

// Custom tooltip with row access (table only)
{
  id: 'name',
  label: 'Name',
  tooltip: {
    content: ({ row, value }) => (
      <div>Current: {value}, Row has {row.cells.length} columns</div>
    ),
    action: 'custom'
  }
}

In metadata cells (detail view headers):

  • Tooltips are display-only (no actions)
  • Content can be string or function: (props) => ReactNode
  • No row context available (single entity, not table)
// Metadata tooltip (detail view)
{
  id: 'metadata.creationTimestamp.seconds',
  label: 'Created',
  type: CellType.DATE,
  tooltip: {
    content: 'When this pipeline run was created'
    // No action property - metadata tooltips are display-only
  }
}

style​

Custom styling per cell:

// Static style object
{ id: 'name', style: { color: 'red', fontWeight: 'bold' } }

// Dynamic style function
{
  id: 'status',
  style: ({ record, theme }) => ({
    color: record.failed ? theme.colors.negative : theme.colors.positive
  })
}

Type-Specific Configuration​

StateCellConfig​

For CellType.STATE, you can configure state text and color mappings:

export type StateCellConfig = SharedCell<string> & {
  stateTextMap?: Record<string, string>;
  stateColorMap?: Record<string, TagColor>;
};

Example from codebase:

{
  id: 'status.state',
  label: 'State',
  type: CellType.STATE,
  stateTextMap: {
    0: 'Queued',
    1: 'Pending',
    2: 'Running',
    3: 'Succeeded',
    4: 'Killed',
    5: 'Failed',
    6: 'Skipped',
  },
  stateColorMap: {
    0: 'gray',
    1: 'blue',
    2: 'blue',
    3: 'green',
    4: 'red',
    5: 'red',
    6: 'gray',
  },
}

See config/entities/run/shared.ts for complete example.

TypeCellConfig​

For CellType.TYPE, you can configure type text mappings:

export type TypeCellConfig = SharedCell<string> & {
  typeTextMap?: Record<string, string>;
};

Example:

{
  id: 'spec.type',
  label: 'Type',
  type: CellType.TYPE,
  typeTextMap: {
    1: 'Train',
    2: 'Evaluation',
    3: 'Performance Evaluation',
    4: 'Experiment',
    5: 'Retrain',
    6: 'Prediction',
  },
}

See config/entities/pipeline/list.ts for complete example.

Custom Cell Renderers​

For unique rendering needs beyond the standard cell types, you can provide a custom renderer:

{
  id: 'metrics',
  label: 'Metrics',
  Cell: CustomMetricsCell
}

function CustomMetricsCell({ value, record }: CellRendererProps) {
  return (
    <div>
      {/* Your custom rendering logic */}
    </div>
  );
}

Note: Custom renderers bypass default functionality (styling, hyperlinking, tooltips). Ensure your custom renderer:

  • Doesn't need this functionality, OR
  • Applies its own copy of this functionality

Where Cells Are Used​

Cells are used for displaying data in configuration:

List Views (Table Columns)​

export const PIPELINE_LIST_CONFIG: ListViewConfig = {
  type: 'list',
  tableConfig: {
    columns: [
      { id: 'metadata.name', label: 'Name' },
      { id: 'status.state', label: 'State', type: CellType.STATE, ... },
    ],
  },
};

Detail Views (Metadata Headers)​

export const RUN_DETAIL_CONFIG: DetailViewConfig = {
  type: 'detail',
  metadata: [
    { id: 'metadata.creationTimestamp.seconds', label: 'Created', type: CellType.DATE },
    { id: 'status.state', label: 'State', type: CellType.STATE, ... },
  ],
  pages: [...],
};

Source Files​

Type definitions:

Cell renderers:

Table extensions: