[BUG] Cannot set properties of undefined (setting 'color')

[JoieStark]

Hi, I have test the code and find a bug, it probably in the file index.html lin 97

cy.elements().remove(); // Assign colors to nodes and edges data.nodes.forEach(node => { node.data.color = colors[colorIndex % colors.length]; colorIndex++; });

the log show that

TypeError: Cannot set properties of undefined (setting 'color')
at (index):97:41
at Array.forEach ()
at (index):96:32

[mNandhu]

Try replacing index.html with this. Match first line

        document.getElementById('textbox').addEventListener('input', function(e) {
            if (e.inputType === 'insertParagraph' || (e.inputType === 'insertText' && e.data && e.data.endsWith('.'))) {
                console.log('start fetch')
                fetch('/update_graph', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({text: this.innerText})
                })
                .then(response => response.json())
                .then(data => {
                    cy.elements().remove();
                    // Assign colors to nodes and edges
                    const elements = {
                        nodes: data.nodes.map(node => ({
                            data: {
                                id: node.id,
                                label: node.label,
                                color: colors[colorIndex++ % colors.length]
                            }
                        })),
                        edges: data.edges.map(edge => ({
                            data: {
                                id: `${edge.source}-${edge.target}`,
                                source: edge.source,
                                target: edge.target,
                                label: edge.label,
                                color: colors[colorIndex++ % colors.length]
                            }
                        }))
                    };
                    cy.add(elements);
                    cy.layout({ name: 'grid' }).run();
                    highlightText(elements);
                });
            }
        });

        function highlightText(elements) {
            var textContent = document.getElementById('textbox').innerText;
            // Highlight node labels
            elements.nodes.forEach(node => {
                const label = node.data.label;
                const color = node.data.color; // get color from node data
                const regex = new RegExp(`\\b${label}\\b`, 'gi');
                textContent = textContent.replace(regex, `<span style="background-color: ${color}; color: black;">${label}</span>`);
            });
            // Highlight edge labels
            elements.edges.forEach(edge => {
                const label = edge.data.label;
                const color = edge.data.color; // get color from edge data
                const regex = new RegExp(`\\b${label}\\b`, 'gi');
                textContent = textContent.replace(regex, `<span style="background-color: ${color}; color: black;">${label}</span>`);
            });
            document.getElementById('textbox').innerHTML = textContent;