updates to component

[biskit]

i have code that gets data and refreshes this component

    doMore = (cy) => {
        console.log(cy.nodes());
        // cy.contextMenus(options);
        cy.on('tap', 'node', e => {
            console.log('tap', e.target.id());
        });
    }
    comp = () => {
        if (!this.rrr.current)
            return null;
        let cw = this.rrr.current.clientWidth;
        let ch = this.rrr.current.clientHeight;
        return (
            <CytoscapeComponent
              elements={data.elements}
              layout={{name:"preset"}}
              cy={(cy) => { this.cy = cy; this.doMore(cy);}}
              style={{width:`${cw}px`, height:`${ch}px`}}
              stylesheet={[
                  {
                      selector: "edge",
                      style: {
                          width: 2,
                          "curve-style": "taxi",
                          "taxi-direction": "rightward",
                      },
                  },
                  {
                      selector: "node",
                      style: {
                          shape: "rectangle",
                          width: 50,
                          "border-width": 2,
                          "border-color": "blue",
                          "background-color": "white",
                      },
                  },
                  {
                      selector: "node#aEnd",
                      style: {
                          shape: "ellipse",
                          height: 4,
                          width: 4,
                          "border-color": "red",
                      },
                  },
              ]}
            />
        );
    }
    render = () => {
        return (
            <Grid columns={2} style={{height:"100vh"}}>
              <Grid.Column width={4} style={{height:"100vh"}}>
                <p>Test</p>
              </Grid.Column>
              <Ref innerRef={this.rrr}>
                <Grid.Column width={12} style={{height:"100vh"}}>
                  {this.comp()}
                </Grid.Column>
              </Ref>
            </Grid>
        );
    }

after every refresh the number of events per node increases by 1

who should handle the componentDidUpdate case here?

[dcsan]

@biskit did you solve this? I have exactly this problem. when a graph is updated, I'm not sure how to add events to only the new nodes.

is there a way to clear all events?

I also tried cy.one( .. ) to try and just add once, but then none of the events work after a data update.

not sure if this is a bug in the react wrapper library or there is some workaround. either way it makes it very hard to have a graph with updating data :(

I might have to go back to raw cytoscape JS library and just force it to work with react myself.

[dcsan]

ok this seems to work:

    cy.removeAllListeners()
    cy.on("mousedown", "node", tapStart)