Varendo

QualityPanel

Source, freshness, completeness, provenance and unsupported claims displayed honestly.

FamilycompoundLicenseApache-2.0
StandaloneAvailable

Use the web element directly without the semantic runtime.

Semantic bindingNo built-in binding

Use this component directly or compose it in application code.

Automatic adaptationNo standard recipe

The standard recipe resolver does not select this component automatically.

Import and live example

A quality panel reporting source, freshness, completeness, provenance, and one unsupported claim.

Interactive preview requires JavaScript.

View the complete example source
import {registerAeliqoElements} from "@varendo/web";
import {
  AeliqoBreakdownElement,
  AeliqoComparisonElement,
  AeliqoExplorerElement,
  AeliqoFormFlowElement,
  AeliqoInvestigationElement,
  AeliqoQualityPanelElement,
  AeliqoRecordEditorElement,
  AeliqoSearchResultsElement,
  } from "@varendo/web/compound";

import {AeliqoDateRangeElement, AeliqoTextFieldElement} from "@varendo/web/inputs";
import type {ResultRef, Scalar} from "@varendo/core";
import type {VisualizationBindingContext, VisualizationSpec} from "@varendo/core/visualization";
import type {AeliqoDataColumn, AeliqoDataScope, AeliqoFieldOption} from "@varendo/web/data";
import type {VisualizationDataset} from "@varendo/web/visualization";

const catalogRef: ResultRef = {
  id: "aeliqo-catalog-example",
  revision: "1",
  outputId: "people",
  queryDigest: "catalog-query",
  scopeDigest: "catalog-scope",
};
const catalogRows: readonly Readonly<Record<string, Scalar>>[] = [
  {id: "ada", name: "Ada Lovelace", team: "Research", date: "2026-09-08", amount: 120},
  {id: "lin", name: "Lin Chen", team: "Product", date: "2026-09-09", amount: 96},
  {id: "grace", name: "Grace Hopper", team: "Research", date: "2026-09-10", amount: 144},
];
const catalogColumns: readonly AeliqoDataColumn[] = [
  {key: "id", label: "ID", type: "text", sortable: true},
  {key: "name", label: "Name", type: "text", sortable: true},
  {key: "team", label: "Team", type: "text"},
  {key: "date", label: "Date", type: "date", sortable: true},
  {key: "amount", label: "Amount", type: "integer", align: "end"},
];
const catalogFields: readonly AeliqoFieldOption[] = [
  {id: "name", label: "Name", type: "text"},
  {id: "team", label: "Team", type: "text"},
  {id: "amount", label: "Amount", type: "integer"},
];
const catalogScope: AeliqoDataScope = {loaded: catalogRows.length, filteredTotal: catalogRows.length, populationDigest: catalogRef.scopeDigest, kind: "filtered", label: "Authorized people"};
const catalogVisualizationContext: VisualizationBindingContext = {results: []};
const catalogVisualizationDataset: VisualizationDataset = {result: catalogRef, rows: catalogRows};
const catalogVisualizationSpecs: Readonly<Record<"trend", VisualizationSpec>> = {trend: {version: "1", view: "trend", plot: {version: "1", root: {kind: "unit", mark: "line", result: catalogRef, missing: "gap", encoding: {x: {field: "date", scale: "temporal"}, y: {field: "amount", scale: "linear"}}}}}};

registerAeliqoElements();

const host = document.querySelector<HTMLElement>("#aeliqo-example") ?? (() => {
  const created = document.createElement("div");
  created.id = "aeliqo-example";
  (document.body ?? document.documentElement).append(created);
  return created;
})();

function createCatalogRoot(container: HTMLElement): HTMLElement {
  const root = document.createElement("div");
  root.dataset.catalogSourceRoot = "true";
  root.style.display = "grid";
  root.style.gap = "12px";
  container.append(root);
  return root;
}

function createCatalogElement<T extends HTMLElement>(tagName: string, container: HTMLElement): T {
  const element = document.createElement(tagName) as T;
  element.setAttribute("data-aeliqo-theme", "light");
  container.append(element);
  return element;
}

function appendSlottedText(root: HTMLElement, slot: string, textContent: string): void {
  const content = document.createElement("span");
  content.slot = slot;
  content.textContent = textContent;
  root.append(content);
}

const root = createCatalogRoot(host);
(((root) => {
		const element = createCatalogElement<AeliqoQualityPanelElement>("aeliqo-quality-panel", root);
		element.source = "People registry";
		element.freshness = "2026-09-09 09:00 UTC";
		element.completeness = "3 of 3 rows loaded";
		element.provenance = ["Authorized local snapshot", "Query: catalog-query"];
		element.unsupportedClaims = ["This view does not establish causation."];
		element.state = {
			source: element.source,
			freshness: element.freshness,
			completeness: element.completeness,
			provenance: element.provenance,
			unsupportedClaims: element.unsupportedClaims
		};
	}))(root);

Purpose

QualityPanel reports a view's source, freshness, completeness, provenance, and unsupported claims. Use it when people must judge how much to trust the data.

When to use it

When to use a different component

Properties and defaults

Quality metadata is host evidence; unsupported claims remain visible as cautions and are never presented as facts.

Properties, ownership, and initial values
PropertyUse and ownershipDeclared typeInitial value
sourceProvides the source label shown with quality evidence.string''
freshnessDescribes when the evidence was observed and whether it may be stale.string''
completenessDescribes the known completeness of the evidence shown in the quality panel.string''
provenanceSupplies evidence about where the displayed result came from.readonly string[][]
unsupportedClaimsLists claims that available evidence cannot support so they remain visibly qualified.readonly string[][]
statusSupplies the explicit ready, loading, empty, partial, stale, or error state.AeliqoCompoundStatus'ready'
messageProvides the user-facing status, error, or recovery message.string''
titleProvides the visible title for the current data or compound surface.string'Data quality'
stateSupplies the overall quality state summarized by the panel.AeliqoQualityState | undefinedundefined

Events

States and failure handling

Relevant states:

Expected result: The panel makes freshness, completeness, provenance, and unsupported claims explicit.

Keyboard, focus, and accessibility

Keyboard behavior:

Exposed semantics:

Responsive behavior

Let provenance and unsupported claims wrap inside the panel. Keep freshness and completeness labels visible before the evidence.

Style hooks

Generated TypeScript declaration

View generated declaration
export declare class AeliqoQualityPanelElement extends AeliqoCompoundElement {
    static readonly properties: {
        source: {
            type: StringConstructor;
        };
        freshness: {
            type: StringConstructor;
        };
        completeness: {
            type: StringConstructor;
        };
        provenance: {
            attribute: boolean;
        };
        unsupportedClaims: {
            attribute: boolean;
        };
        status: {
            type: StringConstructor;
        };
        message: {
            type: StringConstructor;
        };
        title: {
            type: StringConstructor;
        };
        state: {
            attribute: boolean;
        };
    };
    static readonly styles: import("lit").CSSResult[];
    source: string;
    freshness: string;
    completeness: string;
    provenance: readonly string[];
    unsupportedClaims: readonly string[];
    status: AeliqoCompoundStatus;
    message: string;
    title: string;
    state: AeliqoQualityState | undefined;
    protected render(): import("lit").TemplateResult<1>;
    private qualityValues;
    private statusLabel;
    private renderProvenance;
    private renderStatus;
    private renderUnsupported;
}

Version

This page documents the Varendo 0.6 component contract.