Filterbare legende
Een kleurgecodeerde grafiek heeft een sleutel nodig - en als die er eenmaal is, is de sleutel de snelste filteren in de gebruikersinterface. UI.legend plaatst er één in een canvashoek: een staal, een label en een aantal knooppunten per categorie, en klikken op een rij verbergt die categorie. Wijzend naar een rij verlicht eerst de knooppunten op het canvas en dimt de rest, zodat er een categorie kan zijn gevonden voordat deze wordt uitgeschakeld.
Eén regel configureert het: legend: { key: 'type' }. De bibliotheek verzamelt het onderscheidende waarden van data.type, leest elk staal van de kleur die de renderer al heeft opgelost, en telt de knooppunten erachter. Vaak heb je helemaal geen lijn nodig — met a render.nodeTypeAccessor verklaard, verschijnt er vanzelf een legenda zodra die dimensie is bereikt getoond om de kleuren uit te leggen (zie Legenda); deze kaart declareert dat het blok de knoppen toont. De legende is puur beschrijvend – de kleuren komen hier van een ColorPaletteMapper in de opties, precies zoals in Kleur per categorie en de legenda wijst er nooit een toe. Verander het palet en de legenda volgt.
Als u op een rij klikt, filtert u door graph.queryEngine, dus het is de filtering same het paneel Grafiekfilters van de koptekst doet dat wel. Deze kaart declareert een facet type onder de eigen sleutel van de legende, waardoor de twee één controle hebben: schakel api uit in de legende, open het paneel (trechter, of Shift+K) en zijn Servicetype multiselect heeft het al laten vallen. resetFilters() — of de Reset van het paneel — gaat opnieuw aan elke rij.
Knooppunten zonder type krijgen helemaal geen rij, en de legenda verbergt ze nooit: dat kan alleen handelen op basis van de categorieën die erin worden vermeld.
Eén sleutel is zelden het hele verhaal. Twee sleutels tegelijk stapelt een sectie met een titel per dimensie in dezelfde gekoppelde kaart — druk hieronder op type + zone: type blijft rijden het facet van het paneel, zone krijgt een eigen sectie, en de twee filters en samen, dus als je api en dmz verbergt, blijft wat geen van beide is. zone verklaart zijn eigen kleurenstaal, omdat het canvas type codeert in zijn kleuren en een voorbeeldstaal want zone zou louter toeval zijn.
Een sectie kan ook edges intoetsen in plaats van knooppunten — scope: 'edge' geeft een overzicht van de relatietypes met een lijnstaal en verbergt een hele laag wanneer u erop klikt. Dat heeft nodig randen die in soorten voorkomen, dus het leeft op de Randlagen kaart.
In een sectiekop: alles weergeven, omkeren, en een chevron die vouwt dat gedeelte naar de titel — alt-klik de punthaak om elke sectie. Hover een rij om de categorie ervan op het canvas te verlichten; alt-klik één om alleen die categorie weer te geven. Wissels zijn ingelogd op de console via legendToggle, wat de sectie een naam geeft.
// import { ColorPaletteMapper } from 'pivotick'
// The consumer owns the colours — here a palette mapper over `type`, exactly as in
// the "Color by category" card. The legend never assigns a colour.
const palette = new ColorPaletteMapper('okabe-ito')
// `key` is all a legend needs: it collects the distinct values of `data.type`,
// reads each swatch out of the colour the renderer resolved, counts the nodes
// behind it, and makes every row a filter toggle.
//
// You can also leave `UI.legend` out entirely: with a `render.nodeTypeAccessor`
// declared, a legend appears by itself as soon as that dimension is shown to
// explain the colours. `UI.legend: false` opts out.
const legend = {
key: 'type',
title: 'Service type',
// Every one of these is a default — spelled out here to show the knobs.
position: 'bottom-left',
showCounts: true,
collapsible: true,
filterable: true,
maxVisibleEntries: 12
}const options = {
UI: {
// The legend is chrome: `full` and `light` modes have it, `viewer` and
// `static` don't. Full mode also ships the Graph Filters panel, which the
// legend below shares a filter with.
mode: 'full',
// Off: `full` mode brings a minimap and the data dock, and this card is about
// neither (see the Minimap and Data table cards for those).
minimap: false,
table: false,
legend,
// Declaring a facet under the *same key* the legend uses makes the two one
// control: toggle a swatch and the panel's multiselect follows, and the
// other way round. (The trade-off: an empty multiselect means "no
// constraint" to the panel, so the legend won't let you switch off the last
// remaining category.)
filter: {
facets: [
{
key: 'type', label: 'Service type', type: 'multiselect',
options: (graph) => [...new Set(graph.getNodes().map((node) => node.getData().type))]
.sort().map((value) => ({ label: value, value }))
}
]
}
},
render: {
defaultNodeStyle: {
size: 15,
strokeColor: '#ffffff',
textColor: '#334155',
text: (node) => node.getData()?.name,
textVerticalShift: -1.8,
color: (node) => palette.getColor(node.getData()?.type)
}
}
}// The legend announces every toggle on the data bus, so the choice can be
// persisted, mirrored elsewhere, or logged.
function watchLegend(graph) {
graph.on('legendToggle', ({ section, hidden, visible }) => {
console.log(`legend [${section}]: showing ${visible.join(', ') || '(none)'} — hiding ${hidden.join(', ') || '(none)'}`)
})
}
// Swap the legend at runtime — a graph that started without one gets it built on
// the spot, and `undefined` removes it (clearing its filter with it).
function legendByType(graph) {
graph.setLegend({ key: 'type', title: 'Service type' })
}
function removeLegend(graph) {
graph.setLegend(false)
}
// Declared entries, for when the categories aren't a plain data key: supply the
// label, the colour and the predicate yourself. An array works too; a function is
// re-resolved whenever the data changes.
function legendByTier(graph) {
graph.setLegend({
title: 'Tier',
entries: [
{
id: 'edge', label: 'Edge', color: '#0072B2',
predicate: (node) => node.getData().type === 'web'
},
{
id: 'service', label: 'Services', color: '#E69F00',
predicate: (node) => node.getData().type === 'api'
},
{
id: 'storage', label: 'Storage', color: '#009E73',
predicate: (node) => ['database', 'cache'].includes(node.getData().type)
}
]
})
}
// Two keys at once: `sections` stacks one titled block per dimension in a single
// docked card. Each section filters on its own, and the filters *and* together —
// hide `api` above and `dmz` below and what is left is neither.
function legendByTypeAndZone(graph) {
graph.setLegend({
// `position` belongs to the card, not to a section. Top-left, because a
// two-section card is tall enough to reach the mode rail in the corner the
// single-key legend uses.
position: 'top-left',
sections: [
// Still adopts the declared `type` facet, so this section and the filter
// panel remain one control.
{ key: 'type', title: 'Service type' },
{
key: 'zone',
title: 'Network zone',
// The colours encode `type`, not `zone`, and the legend can only
// sample colours — so this section declares swatches of its own
// rather than showing one that would be a coincidence. `key` still
// supplies the predicate.
entries: [
{ id: 'dmz', label: 'DMZ', color: '#CC79A7' },
{ id: 'internal', label: 'Internal', color: '#56B4E9' }
]
}
]
})
}// A service graph whose `type` drives both the colours and the legend. The counts
// differ per type on purpose — the legend reports them. `zone` is a second
// dimension the colours say nothing about — see the stacked legend below.
const data = {
nodes: [
{ id: 'web-1', data: { name: 'Web app', type: 'web', zone: 'dmz' } },
{ id: 'web-2', data: { name: 'Mobile web', type: 'web', zone: 'dmz' } },
{ id: 'api-1', data: { name: 'Auth API', type: 'api', zone: 'internal' } },
{ id: 'api-2', data: { name: 'Orders API', type: 'api', zone: 'internal' } },
{ id: 'api-3', data: { name: 'Billing API', type: 'api', zone: 'internal' } },
{ id: 'db-1', data: { name: 'Postgres', type: 'database', zone: 'internal' } },
{ id: 'db-2', data: { name: 'Replica', type: 'database', zone: 'internal' } },
{ id: 'cache-1', data: { name: 'Redis', type: 'cache', zone: 'internal' } }
],
edges: [
{ from: 'web-1', to: 'api-1' },
{ from: 'web-1', to: 'api-2' },
{ from: 'web-2', to: 'api-1' },
{ from: 'api-2', to: 'api-3' },
{ from: 'api-1', to: 'cache-1' },
{ from: 'api-2', to: 'db-1' },
{ from: 'api-3', to: 'db-1' },
{ from: 'db-1', to: 'db-2' }
]
}