Tesserae - Live Progress

LiveProgress

Description

LiveProgress is a single ellipsized line of progress text ("Reading documents · Encoding 57%") meant to be updated many times a second. The line element and its tooltip are created once and an update only rewrites their text, so nothing fades in, re-mounts or re-animates. An empty text hides the line with display: none instead of removing it, and the hover tooltip shows the untruncated text. A ToolCall carries one on its header row through SetProgress(...).

Usage

Create the line with LiveProgress() and write into it with .SetText(...), or follow an observable with .Stream(...); the subscription is released when the line leaves the DOM. .Clear() hides the line and keeps the element for the next update.

live-progress-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 status   = new SettableObservable<string>(string.Empty);
            var progress = LiveProgress().Stream(status);
            double timer = 0;

            var start = Button("Stream progress").Primary().OnClick(() =>
            {
                window.clearInterval(timer);
                var step = 0;
                status.Value = "Reading documents · 0%";

                timer = window.setInterval(_ =>
                {
                    step += 5;

                    if (step > 100)
                    {
                        window.clearInterval(timer);
                        status.Value = string.Empty; // hides the line
                        return;
                    }

                    status.Value = step < 50 ? "Reading documents · " + step + "%" : "Encoding chunks · " + step + "%";
                }, 150);
            });

            var component = VStack().W(320.px()).Children(start.MB(16), progress);

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

API reference

class

LiveProgress

public sealed class LiveProgress : ComponentBase<LiveProgress, HTMLElement>

A single quiet line of live progress text ("Reading documents · Encoding 57%") meant to be updated many times a second while a long-running task streams its progress. The line, and the tooltip carrying its untruncated text, are built once and never rebuilt: an update writes the new text into the elements already on screen. Nothing fades in or out, so a stream of updates reads as one line changing rather than a component being replaced. It also survives a host that refreshes itself by diffing a freshly built layout onto the DOM already on screen (DeltaComponent, and so ChatMessage): the line element the reader sees is then the one an earlier layout built and the diff keeps patching, so the tooltip follows the text of the element rather than the text a given instance was told to show, and the line opts its subtree out of the fade the diff puts on patched content.

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

Constructors

Name	Description
LiveProgress	Initializes a new instance of this class.

Constructor

LiveProgress

public LiveProgress(string text = null)

Initializes a new instance of this class.

Properties

Name	Description
Text	Gets the text currently shown by the component. Read from the element rather than remembered, so it stays true under a host that patches the line's text itself.
IsEmpty	Returns a value indicating whether the component currently shows any progress.

Property

LiveProgress.Text

public string Text

Gets the text currently shown by the component. Read from the element rather than remembered, so it stays true under a host that patches the line's text itself.

Property

LiveProgress.IsEmpty

public bool IsEmpty

Returns a value indicating whether the component currently shows any progress.

Methods

Name	Description
SetText	Writes the given progress into the line already on screen. An empty text hides the line without removing it, so the next update brings back the same element.
Clear	Clears the progress, hiding the line until the next update.
Stream	Streams the progress from the given observable: every value it publishes is written into the line. The subscription is released when the component leaves the DOM, and a second call replaces the source this component follows.
StopStreaming	Stops following the observable passed to `Stream`, keeping the text it last wrote.
WithTooltip	Configures whether hovering the line shows its full text as a tooltip. On by default, as the line is ellipsized to the width it is given.
NoTooltip	Configures the component to show no tooltip when hovered.
Render	Renders the component's root HTML element.

Method

LiveProgress.SetText

public LiveProgress SetText(string text)

Writes the given progress into the line already on screen. An empty text hides the line without removing it, so the next update brings back the same element.

Method

LiveProgress.Clear

public LiveProgress Clear()

Clears the progress, hiding the line until the next update.

Method

LiveProgress.Stream

public LiveProgress Stream(IObservable<string> source)

Streams the progress from the given observable: every value it publishes is written into the line. The subscription is released when the component leaves the DOM, and a second call replaces the source this component follows.

Method

LiveProgress.StopStreaming

public LiveProgress StopStreaming()

Stops following the observable passed to Stream, keeping the text it last wrote.

Method

LiveProgress.WithTooltip

public LiveProgress WithTooltip(bool value = true)

Configures whether hovering the line shows its full text as a tooltip. On by default, as the line is ellipsized to the width it is given.

Method

LiveProgress.NoTooltip

public LiveProgress NoTooltip()

Configures the component to show no tooltip when hovered.

Method

LiveProgress.Render

public override HTMLElement Render()

Renders the component's root HTML element.

LiveProgress

Description

Usage

API reference

Constructors

LiveProgress

Properties

LiveProgress.Text

LiveProgress.IsEmpty

Methods

LiveProgress.SetText

LiveProgress.Clear

LiveProgress.Stream

LiveProgress.StopStreaming

LiveProgress.WithTooltip

LiveProgress.NoTooltip

LiveProgress.Render

See also