Cytoscape with expand collapse in react no expandable

[celine3d]

Hi, here is my implementation. The graph works fine, cytoscape expand collapse is also working at first render(at first all nodes are collapsed, as I am doing collapseAll when ready) but then there is no icon on parent node with nested children, hence expand is not possible. Is there something wrong with my implementation. Can someone please take a look at it?

import React, { useEffect, useState, useRef } from 'react'; import cytoscape from 'cytoscape'; import expandCollapse from 'cytoscape-expand-collapse';

import styling from './styling'; import elements from './data';

expandCollapse(cytoscape);

const Test = () => { const ref = useRef(null); useEffect(() => { ref.current && renderCytoscapeElement(); }, []);

const renderCytoscapeElement = () => { console.log('* Cytoscape.js is rendering the graph..');

const cyt = cytoscape({
  container: ref.current,
  ready: function() {
    var api = this.expandCollapse({
      layoutBy: {
        name: 'preset',
        animate: 'end',
        randomize: false,
        fit: true
      },
      fisheye: true,
      animate: false,
      undoable: false
    });
    api.collapseAll();//all subnodes are collapsed which is great but later no expand operation can be performed
  },

  boxSelectionEnabled: false,
  autounselectify: true,
  style: styling,
  elements: elements,
  layout: {
    name: 'preset'
  }
});

};

return ( <div ref={ref} style={{ height: '700px', width: '900px' }} /> ); };

[hasanbalci]

In the current version of the extension, expand/collapse cues are shown when parent nodes with nested children are selected. You can see this in the demos. However, since you use autounselectify: true,, you disable the node selection and therefore cannot activate expand/collapse cues. If disabling node selection is necessary for your application, you can use the previous release (v3.2.1) of the extension where expand/collapse cues are shown when you mouse over a node.

[celine3d]

You are the best- thank you so much!!!