"Cannot read properties of undefined (reading 'label')" 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 ()

Desired behavior:
Authentication through Google is working; the popup contains functionality for authorization.

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.

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

[maxkfranz]

If you have a reproducible case for your issue, then you should post it to the specific layout's issue tracker so the people who work on that layout can take a look at it:

https://github.com/iVis-at-Bilkent/cytoscape.js-cise