group-provider

Tag

<group-provider>

Category

Provider

Must be placed inside

<manager-provider>, <registry-provider>

Coordinates cursor position between nested files. See the provider hierarchy.

Available controls

These webcomponents read the context of the enclosing group-provider and are intended for direct use in your markup. Place them inside the group provider, outside its file providers; file-level controls belong inside the corresponding file-provider.

Webcomponent	Preview
<group-timeline>
<group-analysis-sync-button>
<group-range-propagator>
<group-download-dropdown>
<group-download-buttons>
<group-chart>

Attributes

group-slug

Type: stringDefault: generated UUID

Names the group within its registry. If omitted, a UUID is generated. Group providers with the same slug under the same registry share a ThermalGroup; use a stable slug when those nested files should share a group.

Examples

One group with multiple files

The group holds both files. Group-level consumers, such as the timeline and analysis synchronisation control, operate on the files in this group.

<div class="hierarchy">
    <manager-provider>
        <registry-provider>
            <group-provider group-slug="inspection-series">
                <group-timeline></group-timeline>
                <group-analysis-sync-button></group-analysis-sync-button>
                <div class="stack">
                    <file-provider thermal="/files/makak.lrc">
                        <file-canvas></file-canvas>
                    </file-provider>
                    <file-provider thermal="/files/klokan.lrc">
                        <file-canvas></file-canvas>
                    </file-provider>
                </div>
            </group-provider>
        </registry-provider>
    </manager-provider>
</div>

Sharing a group context

Two groups with the same group-slug under the same registry reuse one group. Files in either branch belong to that group, so group-level consumers in both branches act on the same collection.

<div class="hierarchy">
    <manager-provider>
        <registry-provider>
            <group-provider group-slug="shared-files">
                <group-timeline></group-timeline>
                <file-provider thermal="/files/makak.lrc">
                    <file-canvas></file-canvas>
                </file-provider>
            </group-provider>
            <group-provider group-slug="shared-files">
                <group-analysis-sync-button></group-analysis-sync-button>
                <div class="stack">
                    <file-provider thermal="/files/klokan.lrc">
                        <file-canvas></file-canvas>
                    </file-provider>
                    <file-provider thermal="/files/husy.lrc">
                        <file-canvas></file-canvas>
                    </file-provider>
                </div>
            </group-provider>
        </registry-provider>
    </manager-provider>
</div>