Info-bulles

Les options du menu tooltip configurent les info-bulles par défaut et personnalisées pour les nœuds et les arêtes.

Par défaut :

• Les info-bulles sont activées.
• Les titres/sous-titres des nœuds et des bords proviennent de leurs cartes d'en-tête respectives.
• Les propriétés proviennent des mappages de propriétés nœud/arête.

Désactiver les info-bulles

Assez simple en définissant la propriété enabled sur false.

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

Choisir ce qui affiche une info-bulle

enabled prend également une carte de types ou une fonction, pour un graphique qui souhaite des info-bulles sur certains survols uniquement. Les types sont nodes, edges et groups, les groupes Simplify dessinent. Une clé manquante est true, donc { edges: false } conserve les nœuds et les groupes.

Un graphe dont les nœuds se transforment déjà en une carte détaillée au survol n'a aucune utilité pour une info-bulle de nœud, mais un groupe ne s'explique que dans son info-bulle avant d'être ouvert :

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

Une fonction est demandée à chaque survol, avec l'élément et son genre ('node', 'edge' ou 'group'). Une fonction qui lance compte pour false et l'erreur est enregistrée une fois par élément.

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

L'info-bulle elle-même est laissée de côté uniquement lorsque enabled est false, ou une carte dont tous les types sont désactivés.

Mappage d'en-tête

Semblable au mappage effectué dans l'en-tête principal de la barre latérale, vous pouvez fournir un mappage pour l'en-tête de l'info-bulle pour les nœuds et les bords.

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

Contenu supplémentaire

Semblable au contenu supplémentaire de la barre latérale, vous pouvez définir du contenu supplémentaire à ajouter à la fin de l'info-bulle.

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

Rendu personnalisé

Enfin, vous pouvez remplacer complètement le contenu d'une info-bulle à l'aide de la fonction 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
            }
        }
    }
}

Récupération du contenu de l'info-bulle

render, renderNodeExtra, renderEdgeExtra, nodePropertiesMap et edgePropertiesMap peuvent tous être async. L'info-bulle affiche un espace réservé pendant que la promesse est en attente, échange le contenu lorsqu'elle est résolue et se repositionne pour que l'info-bulle développée reste à l'écran.

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

L'info-bulle est la surface où cela compte le plus, car il s'agit d'un unique conteneur réutilisé ouvert après un délai de 400 ms : une récupération démarrée pour un nœud atterrirait autrement dans une info-bulle en décrivant déjà un autre. Ce n'est pas possible ici : le survol d'un deuxième nœud annule le signal du premier rendu et supprime son résultat, même s'il se résout en dernier. Voir contenu asynchrone pour le contrat complet et pour UI.asyncContent, qui personnalise l'espace réservé.

Épingler une info-bulle en attente

L'épinglage pendant que le contenu est encore en cours de chargement est une bonne chose : la copie se remplit d'elle-même lorsque la récupération est résolue, tant qu'elle n'a pas été remplacée par un autre survol au préalable.