error when using addElementLines

[uelton22]

Hi, I need help using addElementLines and clearElementLines, when I use addElementLines I always get an error

Can not found from HTMLElement: #100.76.129.255 Error Component Stack
at DiagramView (DiagramView.js:30:1)
at div ()
at div ()
at Layout (index.js:33:1)
at ComponentWithRouterProp (withRouter.js:9:1)
at AuthProtected (AuthProtected.js:10:1)
at RenderedRoute (index.js:521:1)
at RenderedRoute (index.js:521:1)
at Routes (index.js:1223:1)
at Index ()
at App ()
at Router (index.js:1157:1)
at BrowserRouter (index.js:615:1)
at SocketProvider (SocketProvider.js:15:1)
at SettingsProvider (SettingsContext.js:7:1)
at Provider (react-redux.mjs :961:1)

I tried several alternatives when I use addLines I can create the links correctly, but I can't remove these links because we only have removeLine and we don't have clearLines, only clearElementLines, but in this case I can't use addElementLines because I get an error. from html, I'm using ip as id, 100.76.129.255 I've tried using node-100_76_129_255 and it didn't work either, I keep getting the error

I'll give you the code

const updateGraphLinks = useCallback(() => {
    if (!graphRef?.current) return;

    const graphInstance = graphRef.current.getInstance();
    const diagramNodes = graphInstance.getNodes();


console.log('=== Verificação de métodos comuns ===');
commonMethods.forEach(method => {
    console.log(`${method}: ${typeof graphInstance[method] === 'function' ? 'Available' : 'Not available'}`);
});

// Método 5: Debug específico das propriedades importantes
console.log('=== Propriedades Importantes ===', {
    options: graphInstance.options,
    graphData: graphInstance.graphData,
    layouter: graphInstance.layouter,
    listeners: graphInstance.listeners
});

   
    graphInstance.clearElementLines();
    
    // Debug dos nodes disponíveis
    console.log('[useTraceroute] Atualizando links:', {
        totalTraceLinks: links.length,
        diagramNodes: diagramNodes.length,
        nodeExample: diagramNodes[0]
    });

    // Filtra links que correspondem a nodes existentes
    const validLinks = links.reduce((acc, link) => {
        // Procura os nodes usando os IPs originais
        const sourceNode = diagramNodes.find(n => n.id === link.from);
        const targetNode = diagramNodes.find(n => n.id === link.to);

        if (sourceNode && targetNode) {
            acc.push({
                from: link.from,           // Mantém o IP original
                to: link.to,               // Mantém o IP original
                text: link.text,
                color: link.color,
                lineShape: 5,
                lineWidth: 2,
                animation: 2,
                id: link.id               // Usa o ID original
            });
        } else {
            console.log('[useTraceroute] Node não encontrado:', {
                from: link.from,
                to: link.to,
                sourceFound: !!sourceNode,
                targetFound: !!targetNode
            });
        }
        return acc;
    }, []);

    if (validLinks.length > 0) {
        try {
            // Tenta adicionar apenas os novos links
            const currentLines = graphInstance.getLines() || [];
            
            const newLinks = validLinks.filter(link => 
                !currentLines.some(existing => existing.id === link.id)
            );

            if (newLinks.length > 0) {
                console.log('[useTraceroute] Adicionando novos links:', newLinks);
                
                
                graphInstance.addElementLines(newLinks);  // Usa addLines em vez de addElementLines
                console.log('novas linha adicionada', newLinks);

                
                console.log('debug para verificar opcoes do ', graphInstance);
            }
        } catch (error) {
            console.error('[useTraceroute] Erro ao atualizar links:', error);
        }
    }
}, [links]);


structure of the created link

0: 

animation
:
2
color
:
"#0000FF"
from
:
"100.76.129.255"
id
:
"trace-100.76.129.255-100.76.129.254"
lineShape
:
5
lineWidth
:
2
text
:
"SWP: 98 → 169\nl3-vlan 815"
to
:
"100.76.129.254"
[[Prototype]]
:
Object

I have tried all the approaches but I was unable to use addElementLines and clearElementLines

I need help with this issue, as this is the only thing missing from my project

Do I need to add new links to the chart and remove these links?

Can you help me?

[uelton22]

fixed the problem was that in the dom the html id was incorrect, the html generated data-id

data-id="100.75.9.240

I made the correction by adding the id in the node id={node.id}

const NodeSlot = ({ node }) => (

{node.text}

{node.id}

);

so we have
id="100.75.9.240\

it worked perfectly