Tag Cloud
Aggregation values rendered as a wrapping list of tags sized by count — the lightweight default, with no layout algorithm and no canvas.
The simplest way to show "what's in this aggregation, roughly, at a glance": a flex list of buttons, each
sized by its count. No placement algorithm, no measurement, no canvas — reach for this before
<WordCloud>, which trades that simplicity for a denser, packed look.
Minimal example
import { Component, signal } from "@angular/core";
import { TagCloudComponent } from "@sinequa/atomic-angular";
import type { AggregationLike, TagCloudEntry } from "@sinequa/atomic-angular";
@Component({
selector: "sample-component",
imports: [TagCloudComponent],
template: `
<div class="h-40">
<TagCloud [aggregations]="[companies(), people(), locations()]" (tagSelected)="onTag($event)" />
</div>
`,
})
export class SampleComponent {
// A useful cloud mixes entity types — each is a separate Sinequa aggregation.
readonly companies = signal<AggregationLike | undefined>(undefined);
readonly people = signal<AggregationLike | undefined>(undefined);
readonly locations = signal<AggregationLike | undefined>(undefined);
protected onTag(entry: TagCloudEntry) {
console.log(`Filter ${entry.source} on`, entry.value);
}
}How it works
buildTagCloud() merges every supplied aggregation's items into one ranked list, keeping track of which
aggregation each entry came from (entry.source) so the cloud can color entity types consistently. Font size
is a direct, linear function of entry.weight — no measurement pass, which is what makes this component cheap
enough to not need its own bundle split.
Recipes
Balancing high-cardinality aggregations
Without uniformRepartition, the globally largest items win limit regardless of source — one aggregation
with many distinct values can crowd out the others entirely.
import { Component, signal } from "@angular/core";
import { TagCloudComponent } from "@sinequa/atomic-angular";
import type { AggregationLike } from "@sinequa/atomic-angular";
@Component({
selector: "balanced-cloud",
imports: [TagCloudComponent],
template: `
<div class="h-40">
<TagCloud
[aggregations]="[companies(), people()]"
[limit]="30"
[uniformRepartition]="true"
[showCount]="true"
/>
</div>
`,
})
export class BalancedCloudComponent {
readonly companies = signal<AggregationLike | undefined>(undefined);
readonly people = signal<AggregationLike | undefined>(undefined);
}Options
Prop
Type
What's next
Heatmap
Render a two-dimensional aggregation as a grid of intensity-shaded cells — no charting dependency, real clickable buttons for cells and axis labels, readable by a screen reader.
Word Cloud
Aggregation values packed into a compact spiral layout — large words centered, smaller ones tucked into the gaps, some rotated.