Información sobre herramientas

Las opciones del menú de información sobre herramientas configuran información sobre herramientas predeterminada y personalizada para nodos y bordes.

Por defecto:

• La información sobre herramientas está habilitada.
• Los títulos/subtítulos de nodos y bordes provienen de sus respectivos mapas de encabezado.
• Las propiedades provienen de los mapas de propiedades de nodo/borde.

Deshabilitar información sobre herramientas

Bastante sencillo estableciendo la propiedad enabled en false.

const options = {
    UI: {
        tooltip: { 
            enabled: false
        }
    }
}

Elegir qué muestra una información sobre herramientas

enabled también toma un mapa de tipos o una función, para un gráfico que quiere información sobre herramientas sobre algunos se cierne solamente. Los tipos son nodes, edges y groups, los grupos Simplificar dibuja. Una clave que falta es true, por lo que { edges: false } mantiene los nodos y los grupos.

Un gráfico cuyos nodos ya se convierten en una tarjeta detallada al pasar el mouse no tiene uso para información sobre herramientas de nodo, pero un grupo sólo se explica en su información sobre herramientas antes de abrirlo:

const options = {
    UI: {
        tooltip: { 
            enabled: { nodes: false, edges: false, groups: true }
        }
    }
}

Se solicita una función en cada desplazamiento, con el elemento y su tipo ('node', 'edge' o 'group'). Una función que arroja cuenta como false y el error se registra una vez por elemento.

const options = {
    UI: {
        tooltip: { 
            enabled: (element, kind) => kind === 'node' && element.getData().important === true
        }
    }
}

La información sobre herramientas en sí se omite solo cuando enabled es false, o un mapa con todo tipo desactivado.

Mapeo de encabezado

De manera similar al mapeo realizado en el encabezado principal de la barra lateral, puede proporcionar un mapeo para el encabezado de la información sobre herramientas tanto para los nodos como para los bordes.

Mapping for node and edge

const options = {
    UI: {
        tooltip: {  
            nodeHeaderMap: {
                title: node => `Node ${node.id}`,
                subtitle: node => node.data.description ?? ''
            },
            edgeHeaderMap: {
                title: edge => `Edge ${edge.from} → ${edge.to}`,
                subtitle: edge => edge.data.label ?? ''
            }
        }
    }
}

Contenido adicional

De manera similar al contenido adicional de la barra lateral, puede definir contenido adicional que se agregará al final de la información sobre herramientas.

Extra content

const options = {
    UI: {
        tooltip: { 
            renderNodeExtra: (node) => {
                const div = document.createElement('div')
                div.textContent = `Type: ${node.data.type ?? 'Unknown'}`
                return div
            },
            renderEdgeExtra: (edge) => `Weight: ${edge.data.weight ?? '0'}`
        }
    }
}

Representación personalizada

Finalmente, puede anular completamente el contenido de la información sobre herramientas usando la función render.

Custom tooltip

const options = {
    UI: {
        tooltip: {
            render: (element) => {
                const div = document.createElement('div')
                div.textContent = `Element ID: ${element.id}`
                div.style.fontWeight = 'bold'
                return div
            }
        }
    }
}

Obteniendo contenido de información sobre herramientas

render, renderNodeExtra, renderEdgeExtra, nodePropertiesMap y edgePropertiesMap pueden ser todos async. La información sobre herramientas muestra un marcador de posición mientras la promesa está pendiente, intercambia el contenido cuando se resuelve y reposiciona en sí mismo para que la información sobre herramientas aumentada permanezca en la pantalla.

const options = {
    UI: {
        tooltip: {
            renderNodeExtra: async (node, { signal }) => { 
                const res = await fetch(`/enrich/${node.getData().uuid}`, { signal })
                return renderChips(await res.json())
            },
        },
    },
}

La información sobre herramientas es la superficie donde esto más importa, porque es un único contenedor reutilizado abierto con un retraso de 400 ms: se inició una búsqueda para un nodo de lo contrario, aparecería en una información sobre herramientas que ya describe otra. No puede aquí... Al pasar el cursor sobre un segundo nodo, se cancela el primer renderizado signal y se elimina su resultado. incluso si se resuelve al final. Consulte contenido asincrónico para conocer contrato completo y para UI.asyncContent, que personaliza el marcador de posición.

Fijar una información sobre herramientas pendiente

Fijar mientras el contenido aún se está cargando está bien: la copia se completa sola cuando la búsqueda se resuelve, siempre y cuando no haya sido reemplazada primero por otro desplazamiento.