Gegevens tabel

UI.table splitst een datadock van de onderkant van het canvas: de knooppunten en randen als een sorteerbaar, selecteerbaar raster. Het bestaat omdat een krachtenindeling structureel is slecht in drie dingen die mensen voortdurend doen: exacte waarden lezen, op schaal selecteren, en uitzoeken waar te beginnen.

De beoogde lus is tabel om te vinden, canvas om te begrijpen, zijbalk om te lezen: sorteer op graad om de hubs te zien, klik met de Shift-klik op de top twintig en handel ernaar met de zijbalken bulkacties.

const options = {
    UI: { mode: 'full' },
}

Dat is alles wat nodig is. In de modus full bevindt het dock zich onderaan gevouwen naar de koptekst balk; klik op de punthaak — of druk op Shift+T — om de tabel weer te geven. UI.table: false verwijdert het geheel.

Er is bewust geen werkbalkknop voor. De balk is de controle: de pillen in de bovenste balk openen allemaal iets over het canvas, terwijl het dock een gesplitst gebied is dat al toont je zijn eigen chevron.

Het dock is alleen in de modus full: het is een rasterrij naast de zijbalk en de andere modi beloven een canvas zonder zoveel chroom.

De tabel verandert niets waar u niet om hebt gevraagd

Het dock muteert niets. Het weerspiegelt de grafiek en stuurt de selectie aan; verbergen en verblijf vastzetten met de bulkacties van de zijbalk, en een verborgen knooppunt herstellen blijft bij het filterpaneel. Wat het dok toevoegt, is een veel beter instrument voor gebouw de selectie waarop deze reageren.

Het enige wat het kan veranderen is wat het canvas laat zien, en alleen op verzoek: de De knop Toepassen op grafiek verbergt de elementen die uw kolomfilters weglaten. Totdat u erop drukt, is het verkleinen van een kolom lezen en niet filteren.

Het toont de hele grafiek

De tabel weerspiegelt niet het canvas. Het vermeldt elk knooppunt – en op het tabblad Randen elk knooppunt rand — inclusief degenen die momenteel verborgen zijn, en de leidende kolom Visibility geeft aan waar ieder staat:

Waarde	Styling	Betekenis
visible	stil, ongekleurd	Nu op het doek
filtered	amberkleurige chip	Verborgen door een filter — een knooppuntfilter, of voor een rand is de laag uitgeschakeld. Vervang het filter om het terug te krijgen
excluded	rode chip	Een knooppunt dat met de hand verborgen is; herstel het vanuit de lijst met verborgen knooppunten van het filterpaneel
nested	gestippelde omtrek	Een knooppunt binnen een cluster dat door het canvas is gesloten, of een rand met een uiteinde in één: de lijn wordt naar het cluster getrokken. Niets filterde het; open het cluster om het te zien
endpoint	neutrale schets	Een rand waarvan het uiteinde is uitgefilterd. Aan de rand zelf is niets gedaan

Elke staat verschilt qua gewicht, rand en kleur, dus de kolom luidt zonder vertrouwend op tint. De hele rij van een verborgen element trekt zich ook terug, waarbij in de gaten wordt gehouden wat er is daadwerkelijk getekend.

Een rand geeft de voorkeur aan endpoint boven filtered, omdat dat de reden is dat je eerst repareren: terwijl een knooppunt dat het aanraakt verdwenen is, kan het niet opnieuw worden ingeschakeld als de laag ervan wordt ingeschakeld de rand terug.

Dat is opzettelijk. "23 knooppunten verborgen" is een claim die u zou moeten kunnen inspecteren, en a Een tafel die stilletjes de rijen laat vallen waarnaar u op zoek bent, is erger dan geen tafel. Sorteer op Visibility om precies te zien wat een filter heeft weggenomen.

Knooppunten binnen clusters

De inhoud van een cluster krijgt ook rijen, zoals peers van de eigen knooppunten van de grafiek, met een kolom Cluster met het pad waar ze vandaan kwamen (Team B / Squad, buitenste eerst) en een kolom Kinderen waarin staat hoe groot elk cluster is. Beide kolommen verschijnen wanneer de grafiek bevat clusters. De schakelaar Geneste knooppunten van de header verwijdert die rijen weer als u wil alleen het hoogste niveau, en UI.table.nested: false biedt deze helemaal niet aan.

Ze worden plat weergegeven in plaats van expres ingesprongen onder hun cluster: de tabel bestaat om vragen te beantwoorden die het canvas niet kan beantwoorden: welke knooppunten zijn de hubs, welke bevinden zich boven a drempel — en dat blijft alleen werken als een sortering of een filter elke rij in gelijke mate bereikt. EEN boom kan alleen broers en zussen sorteren.

Het is de moeite waard om te weten dat een genest knooppunt niet door deze grafiek wordt getekend. Een open cluster geeft een eigen afzonderlijke subgraaf weer, dus:

• Visibility luidt nested terwijl een cluster boven het knooppunt gesloten is, en visible één keer ze zijn allemaal geopend. Het is nooit filtered — geen filter heeft het daar geplaatst.
• Degree telt de echte randen van het knooppunt. Terwijl het cluster gesloten is, tekent het canvas ze in plaats daarvan naar het cluster, dus dit is de eigen telling van het knooppunt in plaats van een beschrijving ervan de foto.
• Als u op de rij klikt, wordt het knooppunt geselecteerd, zodat de zijbalk dit kan weergeven – vaak de enige manier om dat te doen het bereiken. Het canvas omringt de gesloten cluster die ervoor staat. Dubbelklikken opent dat cluster, één niveau per druk op de knop. Met render.enableNodeExpansion: false de cluster blijft gesloten en de weergave wordt daarop gecentreerd.

Sorteren en verkleinen

Klik op een kolomkop om te sorteren; klik nogmaals om terug te keren. Filterbare kolommen groeien a controle in de kop die de rijen vernauwt — elke kolom in de afgeleide set heeft er één, en een kolom die u zelf aangeeft, krijgt er één door te vragen naar filterable: true.

Welk besturingselement u krijgt, volgt de type van de kolom, zodat u aan een kolom kunt vragen wat het is eigenlijk kunnen beantwoorden:

type	Controle	Wedstrijden
numberRange	een Min / Max paar	binnen het interval; beide uiteinden mogen leeg worden gelaten
select · multiselect · boolean	een dropdown van de waarden die de kolom bevat	die waarde precies, of lidmaatschap als de cel een lijst is
text · regex · ongetypeerd	een tekstvak	hoofdletterongevoelige subtekenreeks

De vervolgkeuzelijst is opgebouwd uit de eigen waarden van de kolom in plaats van uit een gedeclareerde optielijst het biedt nooit een keuze die leeg terug zou komen. Boven de 50 verschillende waarden stapt het opzij voor het tekstvak: een vervolgkeuzelijst die zo lang is, is geen besturingselement dat iemand kan gebruiken.

Een rijfilter is niet het filter van de grafiek. Het verandert wat je leest: het canvas is onaangeroerd en de kolom Visibility blijft de waarheid ernaast vermelden, zodat de twee dat kunnen ben het er niet mee eens, zonder dat een van beide ongelijk heeft. Het duwen van je vernauwing op het canvas is een apart proces en expliciete handeling – zie hieronder.

De telling van het dok weerspiegelt beide: 40 nodes wordt 12 of 40 nodes zodra je smaller wordt.

De filters toepassen op de grafiek

Toepassen op grafiek, in de werkbalk van het dock, verbergt de elementen die uw kolomfilters achterlaten uit. Het is de brug tussen de twee soorten filtering: verklein de rijen tot aan de tabel vermeldt waar u om geeft, druk er één keer op en het canvas laat hetzelfde zien.

Het is een eenmalige druk, geen live link, en de knop geeft aan in welke van de drie staten u zich bevindt in:

Knop	Betekenis
Apply to graph, onverlicht	Er wordt niets geduwd. Uitgeschakeld totdat een kolomfilter daadwerkelijk iets verkleint.
Clear, lit	De grafiek is gefilterd en komt overeen met uw filters. Druk op om het te herstellen.
Apply to graph, lit	De grafiek wordt gefilterd door een druk op eerder en uw filters zijn verder gegaan. Druk op om het up-to-date te brengen.

Twee eigenschappen die de moeite waard zijn om te weten, omdat ze de push voorspelbaar houden:

• Het verbergt precies de rijen die de filters hebben weggelaten — laat nooit alleen deze zien. Een knooppunt dus toegevoegd nadat de push op het canvas blijft. Wat je hebt geduwd is een verklaring over een moment, geen staande vraag. Het interieur van een open cluster wordt alleen smaller voor zover zijn eigen rijen behoorden tot degenen die werden weggelaten; met geneste rijen uitgeschakeld, geen namen en het interieur is onaangetast.
• De kolom Visibility maakt nooit deel uit van een push, hoewel deze de rijen nog steeds vernauwt, zoals een ander. De waarden zijnde filterstatus van de grafiek, dus als je erop drukt, wordt alles verborgen staat momenteel op het doek en is het dan niet met zichzelf eens.

Terwijl een push live is, rapporteert de telling beide helften — 12 of 40 nodes · 28 hidden — en de filterpaneel laat een rij Uit de tabel groeien die deze een naam geeft en deze kan wissen, dus een duwtje is nooit een filter dat je niet meer kunt vinden als het dock eenmaal is ingeklapt.

De push komt terecht als een enkel filter onder een gereserveerde sleutel, wat betekent dat hij samenstelt met de filterpaneel in plaats van ermee te concurreren: niets dat u ooit in de eigen vorm van dat paneel instelt een duwtje in de rug, en een duwtje wist nooit de filters van het paneel. De twee worden gecombineerd, dus a knooppunt moet beide overleven.

Geef filterGraph: false door voor een dock waarvan de bedieningselementen het canvas helemaal nooit kunnen raken:

const options = {
    UI: { mode: 'full', table: { filterGraph: false } },
}

{#selecting} selecteren

Gebaar	Effect
Klik op een rij	Selecteer dat element
Ctrl/Cmd-klik	Voeg één rij toe of verwijder deze
Shift-klik	Neem een bereik, in de volgorde die momenteel wordt weergegeven
Selecteer alles	Elke rij die momenteel wordt vermeld: nasorteren, nafilteren
Dubbelklik	Selecteer en centreer het canvas erop
Beweeg	Markeer het element op het canvas
Klik met de rechtermuisknop	Het contextmenu van het element; een rij van een meervoudige selectie opent de selectie

Het werkt in beide richtingen: met elastiek een groep op het canvas leggen en de bijpassende rijen vormen gemarkeerd en gescrolld naar. De selectie is dezelfde als die in de bulkacties in de zijbalk staat, dus de lus sluit zonder extra bedrading.

Verborgen rijen selecteren zoals alle andere – dat is het punt om ze op te sommen.

Kolommen

Als er geen columns is opgegeven, rekent het dock het voor u uit, in drie niveaus:

1. Declared — UI.table.columns wint regelrecht.
2. Van uw facetten — anders, als u dit heeft aangegeven UI.filter.facets, kolommen worden daaruit opgebouwd. Beschrijf jouw gegevens één keer en het filterpaneel en de tabel zijn het erover eens.
3. Gescand — anders worden de gegevens gelezen, gerangschikt op coverage zodat de goed bevolkte toetsen komen eerst en de schaarse staart zit uiterst rechts.

Hoe dan ook, de grafiekbewuste kolommen omsluiten de gegevens. Voor knooppunten, Visibility en Label lead — een statusgoot en de naam, de twee dingen die u naar beneden scant om een rij — vergezeld door Cluster in een grafiek met clusters, aangezien geneste rij heeft het nodig om aan te geven waar het vandaan komt. De tellingen sluiten het af: Degree, plus Children in een grafiek met clusters. De tellingen staan aan het einde omdat ze de rekenkunde van de grafiek zijn in plaats van de eigen gegevens van het element, en het zijn smalle kolommen met een vaste breedte, dus een paar cijfers neem nooit het deel van de rij dat een naam nodig heeft. Randen behouden dezelfde Visibility goot en lees dan als een zin: Source / Label / Target.

De standaard sortering is de kolom Label, niet de leidende kolom: sorteren op Visibility op open vertelt je niets terwijl elke rij nog steeds visible luidt.

Standaard wordt alles weergegeven en het raster schuift zijwaarts in plaats van te laten vallen wat dan ook. Op knooppunten met veel eigenschappen gebruikt u de kiezer Columns om uit te schakelen wat u niet doet need — die ook de filtercontrole van de header meeneemt.

Afgeleide kolommen zijn filterbaar. Hun labels, typen en uitlijning zijn allemaal afgeleid al, en het rijfilter is afgeleid van datzelfde type — dus een tabel die u nooit geconfigureerd is er een die u nog kunt beperken. Aangegeven kolommen zijn het tegenovergestelde: je krijgt precies de set die je hebt geschreven, filterable: false tenzij je anders zegt.

De ingebouwde kolommen

tableColumns bevat de kolommen die geen generiek raster kan berekenen, omdat ze ongeveer een zijn de plaats van het element in de grafiek in plaats van de gegevens ervan:

import { Pivotick, tableColumns } from 'pivotick'

new Pivotick(el, data, {
    UI: {
        mode: 'full',
        table: {
            open: true,
            // Reference a built-in's key through the object rather than typing it —
            // the key itself is namespaced so it can never clash with a data key.
            sort: { key: tableColumns.degree.key, direction: 'desc' },
            columns: [
                tableColumns.visibility,
                { ...tableColumns.degree, label: 'Links' },
                tableColumns.label,
                { key: 'severity', label: 'Severity', type: 'numberRange', filterable: true },
            ],
        },
    },
})

label · degree · degreeIn · degreeOut · visibility · pinned · children · cluster, plus source en target voor randen. Kloon er één om deze aan te passen, zoals hierboven.

Een TableColumn is een FilterFacet met een paar presentatie-extra's (width, align, sortable, filterable, hidden, format), daarom kan een facet ongewijzigd als kolom worden gebruikt.

Exporteren

De knoppen CSV en JSON geven precies weer waar u naar kijkt: dit tabblad, deze zichtbare kolommen in deze volgorde, deze soort, dit rijfilter. Ruwe waarden, nooit een kolom format uitvoer, zodat het bestand machinaal leesbaar blijft.

Niet de hele grafiek — dat is graph.getNodes() verwijderd voor iedereen met code. Pass export: false om de knoppen weg te laten.

Downloads op een ingesloten pagina

Een iframe in een sandbox kan een download regelrecht blokkeren. Als dat gebeurt, zegt het dok dat in plaats van een knop achter te laten die niets lijkt te doen.

Schaal

Boven virtualizeAbove rijen (standaard 200) zijn de rijen windowed: alleen wat past de viewport plus een marge bevindt zich in de DOM, terwijl de schuifbalk nog steeds het geheel meet gegevensset. Door te sorteren wordt de onderliggende array opnieuw geordend, nooit de DOM, en bij het opnieuw opbouwen blijven beide behouden uw scrollpositie en uw selectie.

Onder de drempelwaarde wordt elke rij weergegeven, waardoor het gewone geval eenvoudig blijft inspecteren.

Opties

Optie	Standaard	Wat het doet
enabled	true	false (of UI.table: false) verwijdert het dock volledig
tabs	['nodes', 'edges']	De eigen weergaven van de tabel. Men maakt geen binnenstrook
columns / edgeColumns	afgeleid	Zie Kolommen
open	uitgeschakeld	Uitgeschakeld begint naar de balk gevouwen; true begint uitgevouwen; false laat helemaal geen dock achter (Shift+T brengt het nog steeds binnen)
collapsed	gevouwen	Opgevouwen tot aan de kopbalk. Met open: true volgt 'auto' de beschikbare kamer totdat je zelf kiest
height	0.35	Een aantal pixels, of een fractie van het canvas. Geklemd zodat het doek een bruikbaar minimum behoudt
sort	de kolom Label	{ key, direction }
rowActivate	'select'	'selectAndCenter' verplaatst ook het canvas; 'none' maakt rijen inert
filterGraph	true	Aanbieding Toepassen op grafiek. false voor een dock dat het canvas nooit kan filteren
nested	true	Geef de inhoud van een cluster weer als eigen rijen. Zie Nodes binnen clusters
export	['csv', 'json']	false verbergt de knoppen
virtualizeAbove	200	Aantal rijen waarboven rijen in een venster worden weergegeven

Het dock bevat meer dan de tafel

De tabel is één paneel in het dock, en al het andere dat u registreert is een ander:

const dispose = graph.UIManager.addDockTab({
    label: 'Audit',
    render: () => myAuditPane(),        // called once, the first time the pane is opened
    toolbar: () => [clearButton],       // rebuilt on every activation
})

Op de strip van het dok staat dan Table │ Audit. Als u overschakelt, wordt de hoofdtekst en de koptekst verwisseld controleert, aangezien Select all, de exporten en Columns behoren tot de tabel en betekenen niets boven een ander paneel. Eén ruit geeft helemaal geen strook weer; niets mag naar a wijzen schakelaar met één instelling.

De tabel is geen speciaal geval: deze komt via dezelfde addDockTab, dus een paneel jij register is zijn gelijke in plaats van zijn gast. order plaatst het (gelijke bestellingen behouden registratievolgorde, en een paneel dat later wordt geregistreerd (zoals dat altijd het geval is bij een plug-in) komt daarna terecht de ingebouwde). De geretourneerde ontdoener verwijdert het.

Er is één gebied, dus er is één hoogte en één vouw, hoeveel ruiten er ook in zitten. Twee ruiten kunnen niet elk een aanpasbare strook opstaan ​​en over het canvas vechten.

Een ruit kan dus toegevoegd worden zonder dat deze wordt getoond: deze sluit aan op de strip, de gevouwen staaf opgenomen en wacht om te worden aangeklikt. activateDockTab is de afzonderlijke handeling waarbij er één wordt gebracht naar voren, en het enige dat het dock uitvouwt.

Twee schakelniveaus, en waarom ze er anders uitzien

Nodes en Edges zijn de eigen tabbladen van de tabel, niet die van het dock. Het zijn twee weergaven van a enkel venster, dus ze staan niet naast Audit — dat zou een weergave van de tafel en een apart venster zijn hetzelfde.

De twee niveaus zijn anders getekend, zodat ze naast elkaar kunnen zitten en toch kunnen lezen een buitenste en een binnenste:

	Lijkt erop	Klasse
Table │ Audit	tabbladen op volledige hoogte, onderstreept indien actief, afgesloten door een regel	pvt-dock-tabs / pvt-dock-tab
Nodes │ Edges	een kleine gesegmenteerde pillengroep	pvt-dock-views / pvt-dock-view

Een paneel met zijn eigen weergaven doet wat de tabel doet: teken de schakelaar in zijn toolbar, en roep refresh() op het handvat om van lichaam te veranderen. De binnenklassen zijn openbaar, dus jouw schakelaar is de ingebouwde in plaats van een herformulering ervan:

function viewSwitch(current, pick) {
    const strip = document.createElement('div')
    strip.className = 'pvt-dock-views'
    for (const view of VIEWS) {
        const button = document.createElement('button')
        button.className = 'pvt-dock-view'
        button.textContent = view.label
        button.classList.toggle('active', view.key === current)
        button.addEventListener('click', () => pick(view.key))
        strip.appendChild(button)
    }
    return strip
}

graph.UIManager.addDockTab({
    label: 'Audit',
    toolbar: (pane) => [viewSwitch(current, (key) => { current = key; pane.refresh() })],
    render: () => renderCurrentView(),
})

Beide niveaus ontlenen hun actieve accent aan --pvt-theme-primary, dus een consument dat kleurt het thema opnieuw kleurt het dock mee; overschrijf een van beide klassen om verder te gaan.

refresh() is geen optionele beleefdheid — de dock houdt het element render overhandigd, dus een paneel dat zijn eigen DOM verwisselde, zou het dock verlaten en de volgende keer een oud knooppunt opnieuw verbinden keer dat het naar voren kwam.

Zie de galerijkaart Een dockvenster toevoegen voor een live één, en Plugins voor de plug-inroute.

UI.dock — de eigen instellingen van de regio

open, collapsed en height beschrijven de regio, niet de tabel, en UI.dock is waar ze thuishoren:

// A dock holding only a plugin's pane, open on load
UI: { mode: 'full', table: false, dock: { open: true, height: 0.3 } }

UI.table heeft nog steeds dezelfde drie instellingen en heeft dat altijd gedaan; die worden geëerd, en UI.dock wint waarbij beide zijn ingesteld. Reik naar UI.dock wanneer de tafel is uitgeschakeld — dat is de enige deur naar een dock dat een tabblad van een plug-in met zich meebrengt.

Programmatische controle

graph.openTable()
graph.closeTable()
graph.toggleTable()

Elke modus is een no-op als er geen dock is (elke modus behalve full of UI.table: false). openTable() brengt ook het tabelvenster naar voren, dus een oproep die naar de tabel is vernoemd laat je er een zien. Om de regio zonder dat te besturen:

graph.UIManager.dock?.setOpen(true)        // the region
graph.UIManager.activateDockTab('table')   // a pane, unfolding the dock if need be
graph.UIManager.getDockTabs()              // what is registered, in strip order

Het dock stuurt de gewone selectie-API aan, zodat alles wat een selectie leest, wat ziet de tafel gebouwd:

graph.selectElements([nodeA, nodeB])   // replaces the selection
graph.addToSelection([nodeC])          // nodes only
graph.removeFromSelection([nodeA])

Formaat wijzigen en vouwen

Sleep de scheidingslijn langs de bovenrand van het dok om het formaat te wijzigen. Het canvas houdt een vloer wat je ook vraagt: een canvas zonder hoogte is geen grafiek.

De instortende chevron vouwt het dok naar de kopbalk. Alleen gelaten, collapsed: 'auto' neemt die beslissing voor u en vouwt het dock weg op een lay-out die te kort is voor zowel de dock als de dock een bruikbaar canvas; de eerste keer dat u het met de hand in- of uitvouwt, of de scheidingslijn versleept, het stopt met beslissen en laat het aan jou over.

De gevouwen balk geeft nog steeds een naam aan de vensters, en de bedieningselementen van de actieve blijven erin: de rijtelling van de tabel, een pivot-review die zegt dat deze wordt opgehaald. Dat is wat een ruit laat aankomen terwijl het dock is opgevouwen en opgemerkt wordt zonder het scherm te pakken om dat te zeggen. Klikken op een paneel daar opent het dock erop.

Een ruit die het dok uitvouwde om zichzelf te laten zien, geeft het gebied terug als het wordt verwijderd, dus een ruit die komt en gaat, laat een gesloten dok gesloten. Vouw het, vergroot of verklein het of Als u naar een ander venster overschakelt, betekent dit dat: elk een eigen beslissing is over de regio, en niets maakt dit namens u ongedaan.

Als u het dock opent, wordt de grafiek nooit verplaatst

De simulatie stemt zichzelf af op de container, niet op het canvas, dus chromen opening en sluiten kan een lay-out niet veranderen. Pas het formaat van het dock zo vaak aan als u wilt: de grafiek blijft staan put, en een nieuwe lay-out geeft hetzelfde resultaat met het dock open of dicht.