Zijbalkopties

De zijbalk kan standaard worden samengevouwen, afhankelijk van de schermgrootte of gebruikersvoorkeur.

Bepaalt of de zijbalk standaard is samengevouwen.

• 'auto' standaard: Houdt de zijbalk open, tenzij er niet genoeg schermruimte is. In dat geval klapt deze automatisch samen.
• true Zijbalk begint samengevouwen.
• false Zijbalk begint uitgevouwen.

De zijbalk toont contextuele informatie voor grafiekelementen. Het heeft drie aanpasbare componenten:

• Hoofdkoptekst als mainHeader
• Eigenschappenpaneel als propertiesPanel
• Extra panelen als extraPanels

UI.sidebar.enabled: false laat de hele kolom vallen en geeft de breedte terug aan het canvas. De eigenschappen- en burenpanelen hebben elk een schakelaar — UI.propertiesPanel.enabled, UI.neighborsPanel.enabled — waarmee dat paneel en zijn scheidingsteken worden verwijderd terwijl de rest wordt verwijderd de zijbalk blijft. Zie Functies uitschakelen.

Klik om de code te zien

UI: {
    mode: 'full',
    sidebar: {
        collapsed: false,
    },
    mainHeader: {
        render: (element) => {
            const div = document.createElement('div')
            div.textContent = 'Main Header'
            div.style.fontWeight = 'bold'
            div.style.color = 'darkred'
            div.style.background = 'var(--pvt-bg-color-8)'
            div.style.padding = '4px 8px'
            div.style.borderRadius = '4px'
            return div
        }
    },
    propertiesPanel: {
        render: (element) => {
            const div = document.createElement('div')
            div.textContent = 'Properties Panel'
            div.style.fontWeight = 'bold'
            div.style.color = 'darkred'
            div.style.background = 'var(--pvt-bg-color-8)'
            div.style.padding = '4px 8px'
            div.style.borderRadius = '4px'
            return div
        }
    },
    extraPanels: [
        {
            title: 'Extra panel #1',
            render: (node) => {
                const div = document.createElement('div')
                div.textContent = 'Extra Panel #1'
                div.style.fontWeight = 'bold'
                div.style.color = 'darkred'
                div.style.background = 'var(--pvt-bg-color-8)'
                div.style.padding = '4px 8px'
                div.style.borderRadius = '4px'
                return div
            },
        },
        {
            title: 'Extra panel #2',
            render: (node) => {
                const div = document.createElement('div')
                div.textContent = 'Extra Panel #2'
                div.style.fontWeight = 'bold'
                div.style.color = 'darkred'
                div.style.background = 'var(--pvt-bg-color-8)'
                div.style.padding = '4px 8px'
                div.style.borderRadius = '4px'
                return div
            },
        },
    ],
    tooltip: {
        enabled: false,
    },
    contextMenu: {
        enabled: false,
    },
},

Hoofdkop ^interface

Toont een beknopte samenvatting van het geselecteerde knooppunt of de geselecteerde rand, zoals titel en ondertitel. Het helpt gebruikers snel het huidige geselecteerde element te identificeren.

Het hoofdkoppaneel kan worden aangepast via kaartfuncties. De standaardtoewijzing voor een knooppunt is

{
    title:    node => node.data.label ?? "Could not resolve title"
    subtitle: node => node.data.description ?? ""
}

U kunt deze toewijzing wijzigen door de benodigde onderdelen te overschrijven:

Mapping for nodes

const options = {
    UI: {
        mainHeader: {
            nodeHeaderMap: {
                title: node => `Node ${node.id}`,
                subtitle: node => node.data.type ?? "",
            }
        }
    }
}

Mapping for edges

const options = {
    UI: {
        mainHeader: {
            edgeHeaderMap: {
                title: node => `Node ${node.id}`,
                subtitle: node => node.data.type ?? "",
            }
        }
    }
}

Custom rendering

const options = {
    UI: {
        mainHeader: {
            render: (element) => {
                const div = document.createElement('div')
                div.textContent = 'Main Header'
                return div 
            }
        }
    }
}

waarschuwing

Wanneer render() wordt opgegeven, slaat Pivotick alle standaard toewijzingslogica over, tenzij undefined wordt geretourneerd. Een undefined resultaat (of een belofte die naar undefined leidt) tekent de standaardkoptekst voor die selectie: de nodeHeaderMap / edgeHeaderMap titel voor één element, het aantal selecties voor meerdere en het canvastotaal als er niets is geselecteerd. Geef null terug om de koptekst leeg te laten.

mainHeader: {
    // A custom header for a lone element, the default counts for everything else.
    render: (element) => (element && !Array.isArray(element)) ? myHeader(element) : undefined,
}

Paneel Eigenschappen ^interface

Toont gedetailleerde eigenschappen van het geselecteerde knooppunt of de geselecteerde rand in de zijbalk. Elke eigenschap heeft een naam en waarde die statisch of dynamisch kunnen worden berekend.

Het standaardgedrag is om alle sleutel/waarde-paren van getData() van het knooppunt of de rand weer te geven.

U kunt aanpassen welke eigenschappen worden weergegeven en hoe ze worden weergegeven met behulp van toewijzingsfuncties (nodePropertiesMap en edgePropertiesMap) of een volledig aangepaste renderer.

Mapping for node

const options = {
    UI: {
        propertiesPanel: {
            nodePropertiesMap: (node: Node) => {
                return [
                    {
                        name: 'Node ID',
                        value: node.id,
                    },
                    {
                        name: (node) => `Type of node`,
                        value: (node) => el ? el.type : 'Unknown'
                    },
                    {
                        name: 'Custom HTML',
                        value: document.createElement('div')
                    }
                ]
            }
        }
    }
}

Mapping for edge

const options = {
    UI: {
        propertiesPanel: {
            edgePropertiesMap: (node: Node) => {
                return [
                    {
                        name: 'Edge ID',
                        value: node.id,
                    },
                    {
                        name: (node) => `Type of edge`,
                        value: (node) => el ? el.type : 'Unknown'
                    },
                    {
                        name: 'Custom HTML',
                        value: document.createElement('div')
                    }
                ]
            }
        }
    }
}

Custom rendering for node

const options = {
    UI: {
        propertiesPanel: {
            render: (element: Node | Edge | Node[] | Edge[] | null) => {
                const div = document.createElement('div')
                div.textContent = `Element ID: ${element?.id}`
                div.style.fontWeight = 'bold'
                return div
            }
        }
    }
}

(default for node)

const options = {
    UI: {
        propertiesPanel: {
            nodePropertiesMap: (node: Node) => {
                return Object.entries(node.getData())
                    .filter(([key, value]) => key && value)
                    .map(([key, value]) => ({ name: key, value }))
            }
        }
    }
}

Een eigenschappenkaart kan meerdere vermeldingen met dezelfde naam retourneren, zoals één Tag vermelding per tag. In een meervoudige selectie telt elke waarde vervolgens de knooppunten die deze dragen, keep/exclude komt overeen met alle vermeldingen van een knooppunt, en elke waarde krijgt zijn eigen balk, omdat de waarden elkaar overlappen.

nodePropertiesMap: (node) => node.getData().tags.map((tag) => ({ name: 'Tag', value: tag }))

fooi

Wanneer render() wordt opgegeven, slaat Pivotick alle standaard toewijzingslogica over, tenzij undefined wordt geretourneerd. Een resultaat van undefined (of een belofte die naar undefined leidt) tekent het standaardpaneel voor die selectie: de rijen nodePropertiesMap / edgePropertiesMap voor één element, en de geaggregeerde tabel, met zijn filters voor behouden/uitsluiten, voor meerdere. Geef null terug om het paneel leeg te laten.

const options = {
    UI: {
        propertiesPanel: {
            // A custom view for a lone node, the default aggregated table for everything else.
            render: (element) => (element instanceof Node) ? myNodeView(element) : undefined,
        }
    }
}

Burenpaneel ^interface

Toont de verbindingen van het geselecteerde knooppunt: een kleine grafiek van de buren, verbindingsstatistieken en een lijst.

De aangrenzende grafiek tekent standaard met de renderopties van de hoofdgrafiek. Stijlen die geschikt zijn voor een volledig canvas, zoals knooppuntdetaillagen of een focuskaart, kunnen een paneel van dit formaat overbelasten, dus graph neemt zijn eigen overschrijvingen:

• graph.render wordt samengevoegd over de renderopties van de hoofdgrafiek. De eigen instellingen van het paneel (geen slepen, geen zoom, geen uitbreiding van knooppunten) zijn nog steeds van toepassing. Een maxZoom geeft hier ook aan hoe ver de grafiek inzoomt om te passen, zodat een knooppunt met één buur niet wordt opgeblazen.
• graph.layout wordt samengevoegd over de radiale lay-out van het paneel. De wortel is altijd het geselecteerde knooppunt.

const options = {
    UI: {
        neighborsPanel: {
            graph: {
                render: {
                    // Plain small nodes: no tiers, no focus card.
                    nodeStyleMap: { event: { shape: 'circle', size: 10 } },
                    maxZoom: 1,
                },
                layout: { radialGap: 80 },
            },
        },
    },
}

Extra panelen ^interface

Maakt het mogelijk om volledig aangepaste panelen toe te voegen met dynamische of statische inhoud. Deze panelen zijn ideaal voor het tonen van aanvullende contextuele informatie, aangepaste besturingselementen of interactieve widgets gerelateerd aan het geselecteerde element.

Elk extra paneel heeft een optionele title en een render(), die beide statisch kunnen zijn (string/HTMLElement) of een functie van de huidige selectie. Een geretourneerde string wordt weergegeven als tekst; retourneer een HTMLElement om uw eigen opmaak weer te geven. Geef null terug om de paneelbody leeg te laten.

Static content

const options = {
    UI: {
        extraPanels: [
            {
                title: "Info",
                render: "This is a static extra panel content"
            }
        ]
    }
}

Dynamic content

// The selection is a Node, an Edge, an array of either, or null — this example
// only cares about a single element:
const single = (element) => (element && !Array.isArray(element)) ? element : null

const options = {
    UI: {
        extraPanels: [
            {
                // Both are called with the live selection, on every selection change.
                title: (element) => single(element) ? `Node #${single(element).id}` : 'Nothing selected',
                render: (element) => {
                    const div = document.createElement('div')
                    div.textContent = single(element)?.getData().description ?? 'No description'
                    return div
                }
            }
        ]
    }
}

De selectie waarmee een paneel wordt weergegeven

title en render worden opnieuw aangeroepen bij elke selectiewijziging, met wat momenteel is geselecteerd:

Selectie	Argument
Eén knooppunt / één rand	de Node of Edge
Verschillende knooppunten / randen	a Node[] / Edge[]
Niets geselecteerd	null

Een paneel wordt alleen weergegeven terwijl er iets is geselecteerd, tenzij het alwaysVisible: true instelt — maar een reactief paneel wordt hoe dan ook opnieuw weergegeven, zodat het nooit inhoud bevat die een verouderde selectie beschrijft.

Stel reactive: false in voor een paneel dat de selectie niet beschrijft en duur is om te bouwen: het wordt dan één keer weergegeven, en alleen een expliciete refreshPanel() bouwt het opnieuw op.

Panelen registreren tijdens runtime

UI.extraPanels is de declaratieve vorm van hetzelfde register. Alles wat u daar kunt aangeven, kunt u op elk moment in de levensduur van de grafiek ook registreren (en verwijderen) via UIManager:

const graph = new Pivotick(container, data, options)

// Register a panel that depends on the graph itself. Returns a disposer.
const dispose = graph.UIManager.addPanel({
    id: 'unlinked-items',
    title: 'Unlinked items',
    alwaysVisible: true,
    order: -1,                              // sorts above the option-declared panels
    render: (selection) => tray.render(selection),
})

// Your own data changed (a save landed) rather than the selection —
// ask for a re-render instead of hand-patching the panel's DOM.
graph.UIManager.refreshPanel('unlinked-items')

// Gone for good (equivalent to calling `dispose()`):
graph.UIManager.removePanel('unlinked-items')

Methode
addPanel(panel)	Meld een paneel aan; geeft een ontdoener terug. id wordt automatisch gegenereerd als deze wordt weggelaten. Werkt voor en nadat de grafiek gereed is, en vanaf de install van een plug-in (als ctx.addPanel).
removePanel(id)	Verwijder het paneel en zijn DOM.
refreshPanel(id?)	Render één paneel opnieuw, of alle panelen. Vernieuwt ook reactive: false-panelen.
getPanels()	De geregistreerde panelen, in weergavevolgorde.

Panelen sorteren op order (oplopend, standaard 0) en houden de registratievolgorde binnen dezelfde waarde, zodat UI.extraPanels van boven naar beneden leest en runtime-panelen erna worden toegevoegd.

De eigen title / render van een paneel ontvangt een tweede argument – een handvat op zichzelf – zodat het zijn eigen updates kan aansturen zonder naar de grafiek te hoeven grijpen:

render: (selection, panel) => {
    const button = document.createElement('button')
    button.textContent = 'Reload'
    button.onclick = () => panel.refresh()   // …or panel.remove()
    return button
}

Alleen zijbalk

Panelen worden weergegeven in de zijbalk, die bestaat in de modus full. Registratie lukt in elke modus; het paneel kan eenvoudigweg nergens worden weergegeven totdat een zijbalk dat doet.

Een paneel asynchroon vullen

title en render kunnen beide async zijn, evenals de render / nodePropertiesMap / edgePropertiesMap en de hoofdkopteksten render. Het paneel toont een tijdelijke aanduiding terwijl de belofte in behandeling is:

graph.UIManager.addPanel({
    id: 'sightings',
    title: 'Sightings',
    render: async (selection, panel, { signal }) => {
        if (!(selection instanceof Node)) return 'Select a node'
        const res = await fetch(`/sightings/${selection.id}`, { signal })
        return renderSightings(await res.json())
    },
})

Let op de volgorde van de argumenten: de paneelhandgreep blijft op de tweede plaats, en de RenderContext is altijd laatste.

Omdat een paneel bij elke selectiewijziging opnieuw wordt weergegeven, vindt er routinematig een ophaalactie plaats vervangen voordat het wordt opgelost. Dat regelt de bibliotheek voor je: het oude render's signal wordt afgebroken en er verschijnt een resultaat nadat de selectie verder is gegaan wordt neergezet in plaats van geschilderd in een paneel dat een ander knooppunt beschrijft. De hetzelfde geldt voor refreshPanel() en voor het verwijderen van het paneel. Zie asynchrone inhoud voor het volledige contract.