Dicas de ferramentas

As opções do menu tooltip configuram dicas de ferramentas padrão e personalizadas para nós e arestas.

Por padrão:

• As dicas de ferramentas estão habilitadas.
• Os títulos/legendas de nós e bordas vêm de seus respectivos mapas de cabeçalho.
• As propriedades vêm dos mapas de propriedades de nó/borda.

Desativando dicas de ferramentas

Bastante simples, definindo a propriedade enabled como false.

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

Escolhendo o que mostra uma dica de ferramenta

enabled também usa um mapa de tipos ou uma função, para um gráfico que deseja dicas de ferramentas apenas em alguns momentos de foco. Os tipos são nodes, edges e groups, os grupos Simplificar empatam. Uma chave ausente é true, então { edges: false } mantém nós e grupos.

Um gráfico cujos nós já se transformam em um cartão detalhado ao passar o mouse não tem utilidade para uma dica de ferramenta de nó, mas um grupo apenas se explica em sua dica de ferramenta antes de ser aberto:

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

Uma função é solicitada a cada foco, com o elemento e seu tipo ('node', 'edge' ou 'group'). Uma função lançada conta como false e o erro é registrado uma vez por elemento.

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

A dica de ferramenta em si é omitida apenas quando enabled é false, ou um mapa com todos os tipos desativados.

Mapeamento de cabeçalho

Semelhante ao mapeamento feito no cabeçalho principal da barra lateral, você pode fornecer mapeamento para o cabeçalho da dica de ferramenta para nós e arestas.

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 ?? ''
            }
        }
    }
}

Conteúdo extra

Semelhante ao conteúdo extra da barra lateral, você pode definir conteúdo adicional a ser anexado no final da dica de ferramenta.

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'}`
        }
    }
}

Renderização personalizada

Finalmente, você pode substituir completamente o conteúdo de uma dica de ferramenta usando a função 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
            }
        }
    }
}

Buscando conteúdo da dica de ferramenta

render, renderNodeExtra, renderEdgeExtra, nodePropertiesMap e edgePropertiesMap podem ser async. A dica de ferramenta mostra um espaço reservado enquanto a promessa está pendente, troca o conteúdo quando ela é resolvida e se reposiciona para que a dica de ferramenta aumentada permaneça na tela.

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

A dica de ferramenta é a superfície onde isso mais importa, porque é um único contêiner reutilizado aberto com um atraso de 400 ms: uma busca iniciada para um nó, caso contrário, chegaria a uma dica de ferramenta que já descreve outro. Não pode aqui - passar o mouse sobre um segundo nó aborta o signal da primeira renderização e descarta seu resultado, mesmo que seja resolvido por último. Consulte conteúdo assíncrono para o contrato completo e para UI.asyncContent, que personaliza o espaço reservado.

Fixando uma dica de ferramenta pendente

Fixar enquanto o conteúdo ainda está sendo carregado é adequado: a cópia é preenchida automaticamente quando a busca é resolvida, desde que não tenha sido substituída por outro foco primeiro.