Tesserae - Metadata Panel

MetadataPanel

Description

MetadataPanel is the narrow column of facts shown beside an issue conversation: a stack of MetadataSections divided by hairlines. Each section has a small title, an optional gear button added by .OnEdit(...), and either its content or a muted empty text such as "No one assigned" ("None yet" by default). Sections have helpers for people, tinted labels, icon items with a subtitle, and avatar rows with a +N overflow; .Content(...) takes any component. The panel is usually about 256px wide.

Usage

Create the panel with MetadataPanel() and pass its sections to .Children(...). OnEdit hands the gear button to the callback, so a ContextMenu can be anchored to it.

metadata-panel-sample.cs

using System;
using System.Collections.Generic;
using System.Linq;
using Transpose.Core;
using Tesserae;
using static Transpose.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var labels = MetadataSection("Labels", "No labels")
               .Labels(Tag("bug").Pill().Tint("#d73a4a"), Tag("dark mode").Pill().Tint("#5319e7"));

            labels.OnEdit(anchor => ContextMenu().Items(
                    ContextMenuItem("good first issue").OnClick(() => labels.SetContent().Labels(Tag("good first issue").Pill().Tint("#7057ff"))),
                    ContextMenuItem().Divider(),
                    ContextMenuItem("Clear labels").OnClick(() => labels.Clear()))
               .ShowFor(anchor));

            var component = MetadataPanel().Children(
                MetadataSection("Assignees", "No one assigned")
                   .Person("Marco Ricci", Avatar(initials: "MR"), "marcor"),
                labels,
                MetadataSection("Milestone", "No milestone")
                   .Item(UIcons.Flag, "v2026.6", "Due by June 30 · 82% complete")
                   .Content(ProgressIndicator().Progress(82).Height(4.px())),
                MetadataSection("Development", "No branches or pull requests")
                   .Item(UIcons.CodePullRequest, "Keep the rail above highlighted comments", "org/repo#1490", Theme.Success.Background),
                MetadataSection("Participants")
                   .Avatars(new[] { Avatar(initials: "AS"), Avatar(initials: "MR"), Avatar(initials: "LP"), Avatar(initials: "JK"), Avatar(initials: "TO") }, max: 5, total: 12))
               .W(256.px());

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}

Sections with no content show their empty text. .Compact() reduces the spacing and avatar size:

metadata-panel-2-sample.cs

using System;
using System.Collections.Generic;
using System.Linq;
using Transpose.Core;
using Tesserae;
using static Transpose.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = MetadataPanel().Compact().Children(
                MetadataSection("Assignees", "No one assigned").OnEdit(_ => Toast().Information("Assignees", "Open a picker here")),
                MetadataSection("Labels", "No labels").OnEdit(_ => { }),
                MetadataSection("Milestone", "No milestone").OnEdit(_ => { }),
                MetadataSection("Relationships"))
               .W(256.px());

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}

API reference

class

MetadataPanel

public sealed class MetadataPanel : IComponent, IHasMarginPadding

The column of facts that sits beside a Conversation in an issue tracker - assignees, labels, milestone, participants - as a stack of MetadataSections divided by hairlines. Each section has a small title, an optional edit (gear) button, and either its content or a muted "None yet" line.

Namespace: Tesserae
Implements: IComponent, IHasMarginPadding

Constructors

Name	Description
MetadataPanel	Initializes a new, empty panel.

Constructor

MetadataPanel

public MetadataPanel()

Initializes a new, empty panel.

Properties

Name	Description
Margin
Padding
Sections	The sections in the panel, top to bottom.
IsCompact	Whether the panel is drawn in its dense form (see `Compact`).

Property

MetadataPanel.Margin

public string Margin { get ; set ; }

Property

MetadataPanel.Padding

public string Padding { get ; set ; }

Property

MetadataPanel.Sections

public IReadOnlyList<MetadataSection> Sections

The sections in the panel, top to bottom.

Property

MetadataPanel.IsCompact

public bool IsCompact { get ; set ; }

Whether the panel is drawn in its dense form (see Compact).

Methods

Name	Description
Add	Appends a section.
Children	Appends several sections.
Remove	Removes a section.
Compact	Draws the panel densely: less space between and inside sections, a shorter header row and smaller avatars.
AriaLabel	Sets the accessible name of the panel (`"Details"` by default).
Render	Renders the component.

Method

MetadataPanel.Add

public MetadataPanel Add(MetadataSection section)

Appends a section.

Method

MetadataPanel.Children

public MetadataPanel Children(params MetadataSection[] sections)

Appends several sections.

Method

MetadataPanel.Remove

public MetadataPanel Remove(MetadataSection section)

Removes a section.

Method

MetadataPanel.Compact

public MetadataPanel Compact(bool value = true)

Draws the panel densely: less space between and inside sections, a shorter header row and smaller avatars.

Method

MetadataPanel.AriaLabel

public MetadataPanel AriaLabel(string label)

Sets the accessible name of the panel ("Details" by default).

Method

MetadataPanel.Render

public HTMLElement Render()

Renders the component.

class

MetadataSection

public sealed class MetadataSection : ComponentBase<MetadataSection, HTMLElement>

One section of a MetadataPanel: a small title, an optional edit button, and its content - people, label tags, a list of linked items, a row of avatars, or any component. While it has no content it shows its empty text instead.

Namespace: Tesserae
Inheritance: ComponentBase<MetadataSection, HTMLElement> → MetadataSection

Constructors

Name	Description
MetadataSection	Initializes a new section.

Constructor

MetadataSection

public MetadataSection(string title, string emptyText = null)

Initializes a new section.

Parameters

title: The section's title, e.g. "Assignees".
emptyText: What it says while it has no content, e.g. "No one assigned". Defaults to "None yet".

Properties

Name	Description
Title	The section's title.
IsEmpty	Whether the section has no content (and shows its empty text).

Property

MetadataSection.Title

public string Title

The section's title.

Property

MetadataSection.IsEmpty

public bool IsEmpty

Whether the section has no content (and shows its empty text).

Methods

Name	Description
Empty	Sets the text shown while the section has no content.
Content	Appends components to the section's content.
SetContent	Replaces the section's content with these components (none leaves it empty).
Text	Appends a line of plain text.
Person	Appends a person - their `Avatar` and name on one line, like an assignee or a reviewer.
Labels	Appends a wrapping row of tags - typically `Tag`s tinted with `Tint(color)`, the way an issue's labels look.
Item	Appends a linked item: an icon, a title and an optional muted line under it - a milestone and its progress, a linked pull request and its repository, a project and its column.
Avatars	Appends a row of avatars, like an issue's participants. At most `max` are drawn; the rest are counted in a trailing "+N", where N is `total` (when given) less the avatars drawn.
Clear	Removes the section's content, so it shows its empty text.
OnEdit	Shows a gear button in the section's header and calls `onEdit` when it (or the title) is clicked. The argument is the button, to anchor a `ContextMenu` or a `Popover` to: `.OnEdit(anchor => menu.ShowFor(anchor))`.
Render	Renders the component.

Method

MetadataSection.Empty

public MetadataSection Empty(string emptyText)

Sets the text shown while the section has no content.

Method

MetadataSection.Content

public MetadataSection Content(params IComponent[] components)

Appends components to the section's content.

Method

MetadataSection.SetContent

public MetadataSection SetContent(params IComponent[] components)

Replaces the section's content with these components (none leaves it empty).

Method

MetadataSection.Text

public MetadataSection Text(string text)

Appends a line of plain text.

Method

MetadataSection.Person

public MetadataSection Person(string name, Avatar avatar = null, string secondary = null)

Appends a person - their Avatar and name on one line, like an assignee or a reviewer.

Parameters

name: The name shown.
avatar: Their avatar; defaults to one made from the name's initials.
secondary: Muted text after the name, e.g. a login or a review state.

Method

MetadataSection.Labels

public MetadataSection Labels(params IComponent[] labels)

Appends a wrapping row of tags - typically Tags tinted with Tint(color), the way an issue's labels look.

Method

MetadataSection.Item

public MetadataSection Item(UIcons icon, string title, string subtitle = null, string iconColor = null, Action onClick = null)

Appends a linked item: an icon, a title and an optional muted line under it - a milestone and its progress, a linked pull request and its repository, a project and its column.

Parameters

icon: The icon before the title.
title: The item's title.
subtitle: The muted line under the title.
iconColor: A CSS colour for the icon (e.g. Theme.Success.Background for an open pull request).
onClick: Called when the title is clicked; makes the title a link-styled button.

Method

MetadataSection.Avatars

public MetadataSection Avatars(IEnumerable<Avatar> avatars, int max = 10, int? total = null)

Appends a row of avatars, like an issue's participants. At most max are drawn; the rest are counted in a trailing "+N", where N is total (when given) less the avatars drawn.

Method

MetadataSection.Clear

public MetadataSection Clear()

Removes the section's content, so it shows its empty text.

Method

MetadataSection.OnEdit

public MetadataSection OnEdit(Action<IComponent> onEdit)

Shows a gear button in the section's header and calls onEdit when it (or the title) is clicked. The argument is the button, to anchor a ContextMenu or a Popover to: .OnEdit(anchor => menu.ShowFor(anchor)).

Method

MetadataSection.Render

public override HTMLElement Render()

Renders the component.

MetadataPanel

Description

Usage

API reference

Constructors

MetadataPanel

Properties

MetadataPanel.Margin

MetadataPanel.Padding

MetadataPanel.Sections

MetadataPanel.IsCompact

Methods

MetadataPanel.Add

MetadataPanel.Children

MetadataPanel.Remove

MetadataPanel.Compact

MetadataPanel.AriaLabel

MetadataPanel.Render

Constructors

MetadataSection

Parameters

Properties

MetadataSection.Title

MetadataSection.IsEmpty

Methods

MetadataSection.Empty

MetadataSection.Content

MetadataSection.SetContent

MetadataSection.Text

MetadataSection.Person

Parameters

MetadataSection.Labels

MetadataSection.Item

Parameters

MetadataSection.Avatars

MetadataSection.Clear

MetadataSection.OnEdit

MetadataSection.Render

See also