tabla de datos

UI.table divide un base de datos de la parte inferior del lienzo: los nodos del gráfico y bordes como una cuadrícula seleccionable y ordenable. Existe porque un diseño de fuerza es estructuralmente malo en tres cosas que la gente hace constantemente: leer valores exactos, seleccionar a escala y averiguando por dónde empezar.

El bucle previsto es tabla para buscar, lienzo para comprender, barra lateral para leer: ordenar por grados para detectar los centros, presione Mayús y haga clic en los veinte primeros y actúe sobre ellos con los botones de la barra lateral. acciones masivas.

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

Eso es todo lo que se necesita. En el modo full, el muelle se encuentra en la parte inferior plegado hasta su cabecera barra; haga clic en su galón, o presione Shift+T, para mostrar la tabla. UI.table: false lo elimina por completo.

Deliberadamente no hay ningún botón en la barra de herramientas. La barra es el control: las pastillas en el barra superior abre algo sobre el lienzo, mientras que el muelle es una región dividida que ya te muestra su propio galón.

El Dock es solo en modo full: es una fila de cuadrícula al lado de la barra lateral y los otros modos Prometo un lienzo sin tanto cromo.

La tabla no cambia nada que no le hayas pedido.

El muelle no muta nada. Refleja el gráfico e impulsa la selección; esconderse y fijar estancia con las acciones masivas de la barra lateral y restaurar un nodo oculto se queda con el panel de filtro. Lo que añade el muelle es un instrumento mucho mejor. para construcción la selección sobre la que actúan.

Lo único que puede cambiar es lo que el lienzo muestra, y solo a pedido: el El botón Aplicar al gráfico oculta los elementos que los filtros de columna omiten. Hasta que lo presiones, estrechar una columna es leer, no filtrar.

Enumera el gráfico completo

La mesa no refleja el lienzo. Enumera todos los nodos y, en la pestaña Bordes, cada borde, incluidos los que están actualmente ocultos, y la columna principal Visibility dice dónde cada uno se encuentra:

Valor	Estilo	Significado
visible	tranquilo, sin tintes	En el lienzo ahora
filtered	chip ámbar	Oculto por un filtro: un filtro de nodo o, para un borde, su capa está desactivada. Cambia el filtro para recuperarlo.
excluded	chip rojo	Un nodo escondido a mano; restaurarlo desde la lista de nodos ocultos del panel de filtro
nested	contorno discontinuo	Un nodo dentro de un grupo que el lienzo ha cerrado, o un borde con un final en uno: su línea se dibuja hasta el grupo. Nada lo filtró; abre el cluster para verlo
endpoint	contorno neutro	Un borde cuyo final fue filtrado. No se hizo nada hasta el borde mismo.

Cada estado difiere en peso y borde, así como en color, por lo que la columna se lee sin dependiendo del tono. Toda la fila de un elemento oculto también retrocede, manteniendo la vista en lo que está realmente dibujado.

Una ventaja lee endpoint con preferencia a filtered, porque esa es la razón por la que tienes arreglar primero: mientras un nodo que toca desaparece, volver a activar su capa no puede recuperarlo. el borde hacia atrás.

Eso es deliberado. "23 nodos ocultos" es una afirmación que debería poder inspeccionar, y una Una tabla que deja caer silenciosamente las filas que estás buscando es peor que ninguna tabla. Ordenar por Visibility para ver exactamente lo que eliminó un filtro.

Nodos dentro de clústeres

El contenido de un clúster también obtiene filas, como peers de los propios nodos del gráfico, con una columna Cluster que indica la ruta de donde provienen (Team B / Squad, el más externo primero) y una columna Niños que indique el tamaño de cada grupo. Ambas columnas aparecen siempre que el El gráfico tiene grupos. El interruptor Nodos anidados del encabezado elimina esas filas nuevamente si solo quiere el nivel superior y UI.table.nested: false nunca los ofrece en absoluto.

Se enumeran de forma plana en lugar de sangrar debajo de su grupo a propósito: la tabla existe para responder preguntas que el lienzo no puede: qué nodos son los centros, cuáles están sobre un umbral, y eso solo sigue funcionando si una clasificación o un filtro llega a todas las filas por igual. un El árbol solo puede clasificar hermanos.

Lo que vale la pena saber es que un nodo anidado no se dibuja en este gráfico. Un cúmulo abierto representa un subgrafo separado propio, por lo que:

• Visibility lee nested mientras cualquier clúster encima del nodo está cerrado y visible una vez todos están abiertos. Nunca es filtered: ningún filtro lo puso allí.
• Degree cuenta las aristas reales del nodo. Mientras su grupo está cerrado, el lienzo los dibuja. al clúster, por lo que este es el recuento del propio nodo en lugar de una descripción de la imagen.
• Al hacer clic en la fila, se selecciona el nodo, por lo que la barra lateral puede mostrarlo; a menudo, la única forma de alcanzarlo. El lienzo rodea el racimo cerrado que lo representa. Doble clic abre ese grupo, un nivel por pulsación. Con render.enableNodeExpansion: false el El clúster permanece cerrado y la vista se centra en él.

Ordenar y reducir

Haga clic en cualquier encabezado de columna para ordenar; haga clic nuevamente para revertir. Las columnas filtrables crecen un control en el encabezado que estrecha las filas: cada columna del conjunto derivado tiene uno, y una columna que usted declara obtiene uno al solicitar filterable: true.

El control que obtienes sigue el type de la columna, por lo que puedes preguntarle a una columna qué es realmente capaz de responder:

type	controlar	Partidos
numberRange	un par Min / Max	dentro del intervalo; cualquiera de los extremos puede quedar vacío
select · multiselect · boolean	un desplegable de los valores que contiene la columna	ese valor exactamente, o membresía cuando la celda es una lista
text · regex · sin tipo	un cuadro de texto	subcadena que no distingue entre mayúsculas y minúsculas

El menú desplegable se crea a partir de los valores propios de la columna en lugar de una lista de opciones declarada, por lo que nunca ofrece una opción que volvería vacía. Por encima de 50 valores distintos, avanza aparte del cuadro de texto: un menú desplegable tan largo no es un control que cualquiera pueda usar.

Un filtro de fila no es el filtro del gráfico. Cambia lo que estás leyendo: el lienzo es intacta y la columna Visibility continúa informando la verdad a su lado, para que los dos puedan no estar de acuerdo sin que ninguno de los dos esté equivocado. Empujar tu estrechamiento sobre el lienzo es un asunto aparte. y acto explícito (ver más abajo).

El recuento del muelle refleja ambos: 40 nodes se convierte en 12 of 40 nodes una vez que se reduce.

Aplicando los filtros al gráfico

Aplicar al gráfico, en la barra de herramientas del Dock, oculta los elementos que dejan los filtros de columna fuera. Es el puente entre los dos tipos de filtrado: estrechar las filas hasta la tabla enumera lo que le interesa, luego presiónelo una vez y el lienzo mostrará lo mismo.

Es una pulsación única, no un enlace activo, y el botón indica en cuál de los tres estados te encuentras. en:

Botón	Significado
Apply to graph, apagado	No se empuja nada. Deshabilitado hasta que un filtro de columna realmente reduzca algo.
Clear, encendido	El gráfico está filtrado y concuerda con sus filtros. Presione para restaurarlo.
Apply to graph, encendido	El gráfico se filtra mediante una pulsación anterior y sus filtros han avanzado. Presione para actualizarlo.

Dos propiedades que vale la pena conocer, porque son las que mantienen el impulso predecible:

• Oculta exactamente las filas que los filtros dejaron fuera; nunca "muestre solo estas". entonces un nodo agregado después de que el empujón permanece en el lienzo. Lo que empujaste es una declaración sobre un momento, no es una consulta permanente. El interior de un cúmulo abierto se estrecha sólo en la medida en que sus propias filas estuvieron entre los que quedaron fuera; con filas anidadas desactivadas, nada de nombres ellos y el interior está intacto.
• La columna Visibility es nunca parte de un envío, aunque todavía estrecha filas como cualquier otro. Sus valores son el estado del filtro del gráfico, por lo que presionarlos ocultaría lo que sea está actualmente en el lienzo y luego no está de acuerdo consigo mismo.

Mientras un empujón está activo, el conteo informa ambas mitades (12 of 40 nodes · 28 hidden) y el panel de filtro crece una fila De la tabla que le da nombre y puede borrarla, por lo que un empujón nunca es un filtro que no se puede encontrar una vez plegada la base.

El push aterriza como un filtro único bajo una clave reservada, lo que significa que se compone con el panel de filtro en lugar de competir con él: nada que usted establezca en el formulario de ese panel nunca golpea con un empujón, y un empujón nunca borra los filtros del panel. Los dos están combinados, por lo que un El nodo tiene que sobrevivir a ambos.

Pase filterGraph: false para un muelle cuyos controles nunca pueden tocar el lienzo en absoluto:

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

Seleccionando

gesto	Efecto
Haga clic en una fila	Selecciona ese elemento
Ctrl/Cmd-clic	Agregar o quitar una fila
Mayús-clic	Tome un rango, en el orden listado actualmente
Seleccionar todo	Cada fila listada actualmente: clasificación posterior, filtrado posterior
Haga doble clic	Seleccione y centre el lienzo en él
flotar	Resalta el elemento en el lienzo.
Haga clic derecho	El menú contextual del elemento; una fila de una selección múltiple abre la ventana de la selección

Funciona en ambas direcciones: coloque una banda elástica en un grupo en el lienzo y las filas correspondientes se marcado y desplazado hasta. La selección es la misma que leen las acciones masivas de la barra lateral, por lo que el bucle se cierra sin ningún cableado adicional.

Las filas ocultas se seleccionan como cualquier otra: ese es el objetivo de enumerarlas.

Columnas

Sin columns declarado, el muelle lo resuelve por usted, en tres niveles:

1. Declarado — UI.table.columns gana directamente.
2. De tus facetas — de lo contrario, si declaraste UI.filter.facets, a partir de ellos se construyen columnas. Describe tu datos una vez y el panel de filtro y la tabla están de acuerdo al respecto.
3. Escaneado; de lo contrario, los datos se leen, ordenados por cobertura para que Las claves bien pobladas vienen primero y la cola escasa se encuentra en el extremo derecho.

De cualquier manera, las columnas compatibles con gráficos envuelven los datos. Para nodos, Visibility y Label canal de estado y el nombre, las dos cosas que escaneas para encontrar un fila: unida por Cluster en un gráfico que tiene grupos, ya que un fila anidada necesita que diga de dónde vino. Los recuentos lo cierran: Degree, más Children en un gráfico que tiene grupos. Los condes se sientan al final. porque son la aritmética de la gráfica en lugar de los propios datos del elemento, y son columnas estrechas y de ancho fijo, por lo que un par de dígitos nunca tome la parte de la fila que necesita un nombre. Los bordes mantienen el mismo Visibility canalón y luego lea como una oración: Source / Label / Target.

La clasificación predeterminada es la columna Label, no la principal: ordenar por Visibility en open no le dice nada mientras cada fila todavía dice visible.

Todo se muestra de forma predeterminada y la cuadrícula se desplaza hacia los lados en lugar de caer. cualquier cosa. En nodos con muchas propiedades, utilice el selector Columnas para desactivar lo que no need, que también elimina el control del filtro del encabezado.

Las columnas derivadas se pueden filtrar. Sus etiquetas, tipos y alineación se infieren ya, y el filtro de fila se infiere de ese mismo tipo, por lo que una tabla que nunca configurado es uno que aún puede limitar. Las columnas declaradas son lo contrario: obtienes exactamente el conjunto que escribiste, filterable: false a menos que indiques lo contrario.

Las columnas integradas

tableColumns contiene las columnas que ninguna cuadrícula genérica podría calcular, porque se trata de una el lugar del elemento en el gráfico en lugar de sus datos:

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, más source y target para los bordes. Clona uno para ajustarlo, como se indica arriba.

Un TableColumn es un FilterFacet con algunos extras de presentación (width, align, sortable, filterable, hidden, format), razón por la cual una faceta puede utilizarse como columna sin cambios.

Exportando

Los botones CSV y JSON escriben exactamente lo que estás viendo: esta pestaña, estas columnas visibles en este orden, este tipo, este filtro de fila. Valores brutos, nunca un salida format de la columna, por lo que el archivo sigue siendo legible por máquina.

No el gráfico completo; eso está a graph.getNodes() de distancia para cualquiera que tenga código. Pase export: false para dejar los botones afuera.

Descargas en una página incrustada

Un iframe en espacio aislado puede bloquear una descarga por completo. Cuando eso sucede, el muelle lo dice. en lugar de dejar un botón que parece no hacer nada.

Escala

Por encima de virtualizeAbove filas (200 por defecto), las filas tienen ventana: solo lo que encaja la ventana gráfica más un margen está en el DOM, mientras que la barra de desplazamiento aún mide el conjunto conjunto de datos. La clasificación reordena la matriz subyacente, nunca el DOM, y una reconstrucción mantiene ambos su posición de desplazamiento y su selección.

Por debajo del umbral se representa cada fila, lo que mantiene el caso ordinario simple de entender. inspeccionar.

Opciones

Opción	Predeterminado	que hace
enabled	true	false (o UI.table: false) elimina el muelle por completo
tabs	['nodes', 'edges']	Las vistas propias de la tabla. Uno no presenta franja interior
columns / edgeColumns	derivado	Ver Columnas
open	desarmado	El desarmado comienza doblado hacia la barra; true comienza expandido; false no deja ningún muelle (Shift+T todavía lo trae)
collapsed	doblado	Doblado hasta su barra cabecera. Con open: true, 'auto' sigue la habitación disponible hasta que elijas por ti mismo
height	0.35	Un recuento de píxeles o una fracción del lienzo. Sujetado para que el lienzo mantenga un mínimo utilizable
sort	la columna Label	{ key, direction }
rowActivate	'select'	'selectAndCenter' también mueve el lienzo; 'none' hace que las filas sean inertes
filterGraph	true	Oferta Aplicar al gráfico. false para un muelle que nunca puede filtrar el lienzo
nested	true	Enumere el contenido de un clúster como filas propias. Ver Nodos dentro de clústeres
export	['csv', 'json']	false oculta los botones
virtualizeAbove	200	Recuento de filas por encima de las cuales se muestran ventanas

El muelle tiene más capacidad que la mesa

La tabla es un panel en el Dock, y cualquier otra cosa que registres es otra:

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

La franja del muelle dice entonces Table │ Audit. Al cambiar se intercambia el cuerpo y el encabezado controles, ya que Select all, las exportaciones y Columns pertenecen a la tabla y significan nada sobre otro panel. Un panel no muestra ninguna franja: nada debe apuntar a un cambiar con una configuración.

La tabla no es un caso especial: viene por el mismo addDockTab, por lo que un panel El registro es su igual y no su invitado. order lo coloca (se mantienen pedidos iguales orden de registro, y un panel registrado más tarde, como siempre ocurre con un complemento, aterriza después el incorporado). El triturador devuelto lo retira.

Hay una región, por lo que hay una altura y un pliegue, sin importar cuántos paneles haya en ella. Dos paneles no pueden sostener cada uno una franja de tamaño variable y pelear por el lienzo.

Por tanto, se puede añadir un panel sin que se muestre: une la tira, la barra plegada incluido y espera a que se haga clic en él. activateDockTab es el acto separado de traer uno al frente, y lo único que despliega el muelle.

Dos niveles de cambio y por qué se ven diferentes

Nodes y Edges son las pestañas propias de la mesa, no las del muelle. Son dos visiones de un panel único, por lo que no aparecen al lado de Audit, lo que reclamaría una vista del La tabla y un panel separado son el mismo tipo de cosas.

Los dos niveles están dibujados de manera diferente para que puedan sentarse uno al lado del otro y seguir leyendo como un exterior y un interior:

	parece	clase
Table │ Audit	pestañas de altura completa, subrayadas cuando están activas, cerradas por una regla	pvt-dock-tabs / pvt-dock-tab
Nodes │ Edges	un pequeño grupo de pastillas segmentadas	pvt-dock-views / pvt-dock-view

Un panel con sus propias vistas hace lo que hace la tabla: dibuja el interruptor en su toolbar y llame a refresh() en su manija para cambiar de cuerpo. Las clases internas son públicas, por lo que su switch es el incorporado en lugar de una reformulación del mismo:

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(),
})

Ambos niveles toman su acento activo de --pvt-theme-primary, por lo que un consumidor que retinta el tema retinta el muelle con él; anule cualquiera de las clases para ir más lejos.

refresh() no es cortesía opcional: el muelle retiene el elemento render entregado, por lo que un panel que intercambió su propio DOM abandonaría el muelle y volvería a conectar un nodo obsoleto la siguiente vez momento en que llegó al frente.

Vea la tarjeta de galería Agregar un panel de acoplamiento para ver un video en vivo uno y Plugins para la ruta del complemento.

UI.dock — la configuración propia de la región

open, collapsed y height describen la región, no la tabla, y UI.dock es donde pertenecen:

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

UI.table todavía tiene las mismas tres configuraciones y siempre las tuvo; esos son honrados, y UI.dock gana donde ambos están establecidos. Busque UI.dock cuando la mesa esté apagada. esa es la única puerta a un muelle que trae consigo la pestaña de un complemento.

Control programático

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

Cada uno de ellos es no operativo cuando no hay base (cualquier modo excepto full o UI.table: false). openTable() también trae el panel de la tabla al frente, por lo que una llamada nombrada para la tabla te muestra uno. Para conducir la región sin eso:

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

El Dock controla la API de selección ordinaria, por lo que cualquier cosa que lea una selección verá lo que la mesa construida:

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

Cambiar tamaño y plegar

Arrastre el divisor a lo largo del borde superior del muelle para cambiar su tamaño. El lienzo mantiene un piso. lo que pidas: un lienzo sin altura no es un gráfico.

El galón de colapso pliega el muelle hasta su barra de cabecera. Dejado solo, collapsed: 'auto' toma esa decisión por usted y pliega la base en un diseño demasiado corto para ella y un lienzo utilizable; la primera vez que lo colapsas o lo expandes a mano, o arrastras el divisor, deja de decidir y te lo deja a ti.

La barra plegada todavía nombra sus paneles y los controles del activo permanecen en ella: el recuento de filas de la tabla, una revisión dinámica que dice que se está recuperando. Eso es lo que deja llegar un panel. mientras el dock está plegado y hacerse notar sin necesidad de coger la pantalla para decirlo. Al hacer clic en El panel allí abre el muelle hacia él.

Un panel que desdobló el muelle para mostrarse devuelve la región cuando se retira, por lo que un cristal que va y viene deja cerrado un muelle cerrado. Doblarlo, cambiar su tamaño o cambiar a otro panel termina así: cada uno es una decisión propia sobre la región, y nada lo deshace en tu nombre.

Abrir el muelle nunca mueve el gráfico

La simulación se sintoniza con el contenedor, no con el lienzo, por lo que la apertura cromada y cerrar no puede cambiar un diseño. Cambia el tamaño del muelle tanto como quieras: el gráfico permanece poner, y un rediseño da el mismo resultado con el muelle abierto o cerrado.