"Cannot read properties of undefined (reading 'label')" error blocks Google Auth

[doraby]

We are using the cytoscape.js and cytoscape-cise npm package on our project and have encountered a problem with Google authentication that this package causes. The following error appears in the console when the Google authentication popup appears, the popup is empty, and authentication is blocked:

Uncaught TypeError: Cannot read properties of undefined (reading 'label')
at Function.CiSEOnCircleNodePair.toString (cytoscape-cise.js:3155:1)
at RegExp.test ()

Step to reproduce:

1. Load this page https://unschooler.me/skills
2. Press the login button in header.
3. Empty auth popup and error in console.

Desired behavior:
Authentication through Google is working; the popup contains functionality for authorization, and there is no error in the console.

The code:

import React, {useEffect, useRef} from 'react';
export const GraphComponent = ({tags, edges, subjects}) => {
const cyRef = useRef();
const clusters = [];
const nodes = [];

tags &&
subjects.forEach((subject) => {
    let clusterArray = tags
        .filter((tag) => tag.subject.id === subject.id)
        .map((tag) => tag.id);
    if (clusterArray.length > 0) clusters.push(clusterArray);
});

tags.forEach((tag) =>
    nodes.push({
        data: {
            id: tag.id,
            label: tag.title || '',
            counter: tag.countResults * 10,
            subjectColor: tag?.subject.color,
            subjectTitle: tag?.subject.title,
        },
        classes: 'theme',
    })
);

const checkedNodes = nodes || [];
const checkedEdges = edges || [];

const ciseOptions = {
    // -------- Mandatory parameters --------
    name: 'cise',
    clusters: clusters,
    animate: 'end',
    refresh: 10,
    animationDuration: undefined,
    animationEasing: undefined,
    fit: true,
    padding: 20,
    nodeSeparation: 12,
    idealInterClusterEdgeLengthCoefficient: 2.0,
    allowNodesInsideCircle: false,
    maxRatioOfNodesInsideCircle: 0.1,
    springCoeff: 0.45,
    nodeRepulsion: 4500,
    gravity: 0.25,
    gravityRange: 3.8
};

useEffect(() => {
    const cytoscape = require('cytoscape');
    const cise = require('cytoscape-cise');
    cytoscape.use(cise); // register extension

    let cy = cytoscape({
        style: [
            {
                selector: 'node',
                style: {
                    shape: 'circle',
                    'background-color': 'data(subjectColor)',
                    'border-color': '#0A0E16',
                    'border-width': '1',
                    label: 'data(label)',
                    height: 'data(counter)',
                    width: 'data(counter)',
                },
            },
            {
                selector: 'edge',
                style: {
                    width: 1,
                    'background-color': '#FFFFFF99',
                },
            },
            {
                selector: 'label',
                style: {
                    color: '#fff',
                    'font-size': 24,
                    margin: "12",
                },
            },
        ],
    });
    cy.mount(cyRef.current);

    const graphElements = [...checkedNodes, ...checkedEdges];
    cy.add(graphElements);
    const layout = cy.layout(ciseOptions);
    layout.run();

    return () => {
        cy.destroy();
    };
}, []);

return <div ref={cyRef}></div>;
};

The code works fine apart from this authorization block. We tried to use authorization both in the popup and in a separate window - in both cases the same error appears in the console.

We also tried to connect the cytoscape and cytoscape-cise libraries via import - authorization blocking occurs in all cases.

Authorization is blocked on any page if the user has previously visited the page where the component with cytoscape was loaded. It seems that cytoscape-cise reacts to a new window created during authorization. Also, bug is reproduced even if we don't use the cise layout but import the cytoscape-cise library.

How to restrict the library cytoscape to the component in which it should run and prevent running during authentication?

[hasanbalci]

@doraby It's seems interesting. I couldn't understand the relation between cise and the authorization block. I can reproduce it in Chrome (I get the error in console and empty auth popup), however auth popup isn't blocked in Firefox even I get the same error. I'll further investigate it.

[semgoSE]

[doraby]

@hasanbalci We explored this case more and found out that in Firefox window authentication is also blocked, it just looks different.

As soon as auth is processing in the new window, cytoscape cise is trying to launch in this new window, doesn’t find necessary elements, maybe related to cytoscape and blocks all functionality in this new window. We tried to remove the import cytoscape cise and the problem disappeared, but the cise layout is amazing; other layouts don't bring such a visualization value.

Is it possible to restrict to running in a new window?

[AlexDovgalenok]

 I didn't find the cause why the method toString is called but some changes in library code can fix our problem. On the left side is the current code - in the red box code that doesn't block the google authorization window

[hasanbalci]

I applied the fix suggested by @AlexDovgalenok to the develop branch where our implementations are done first before merging it to the master. @doraby @AlexDovgalenok If you approve it works, we can merge it to the master.

[hasanbalci]

I assume this is resolved.