Comments (5)
It is possible to rerun it, using the cy
handler. Here's what I'm using for Dash Cytoscape:
handleCy(cy) {
...
SELECT_THRESHOLD = 100;
// Refresh Layout if needed
const refreshLayout = _.debounce(() => {
const {
autoRefreshLayout,
layout
} = this.props;
if (autoRefreshLayout) {
cy.layout(layout).run()
}
}, SELECT_THRESHOLD);
cy.on('add remove', () => {
refreshLayout();
});
}
where autoRefreshLayout
is a prop indicating whether to refresh the layout or not when a new element is added. The function handleCy()
is used specifically to handle the cy, which is passed in the render()
method, which would look something like that:
render() {
const {
...
} = this.props;
return (
<CytoscapeComponent
cy={this.handleCy}
elements={...}
stylesheet={...}
/>
)
}
from react-cytoscapejs.
@xhlulu
Thank you sir! Your comment was a lifesaver.
from react-cytoscapejs.
Note here I'm using lodash for the debounce method. Please check out the official docs, or the react component for Dash Cytoscape
from react-cytoscapejs.
This isn't possible to do declaratively, because each layout has a different set of options: The diff would be handled differently in each case. I suppose it could be supported for the simple ===
case, though that would have some caveats.
from react-cytoscapejs.
Another option, if you don't want to use debounce
, is using useEffect
to re-run the layouts when elements change:
const elements = [ /* ... */ ]
const layout = { /* ... */ }
const [cy, setCy] = useState<Cytoscape.Core | null>(null)
useEffect(() => {
cy?.layout(layout).run()
}, [cy, elements]) // make sure to add elements here
return <CytoscapeComponent cy={setCy} elements={elements} />
from react-cytoscapejs.
Related Issues (20)
- ReferenceError: window is not defined when refresshing the page.
- Maximum call stack size exceeded HOT 1
- How to use ctxmenu in this component?
- Issues with React 18 StrictMode HOT 4
- Next.js uses cjs module loader resulting in SyntaxError: Cannot use import statement outside a module HOT 2
- TS: cannot find module error
- nodes selction is not working
- Canvas elements moved by 50% to the right of the CytoscapeComponent HOT 2
- v2.0 has demo target missing HOT 7
- resize CytoscapeComponent
- updates to component HOT 2
- Createportal / react-cytoscape HOT 1
- Microbundle Compile Error Next.js HOT 1
- Support automatically check/uncheck link between two nodes
- Question: Could the nodes be interactive? HOT 2
- Question: Update to React 18? HOT 2
- Question: Styling & Layout HOT 1
- Infinite render graph force-directed on parameter "randomize": false
- Module not found: Can't resolve 'react-cytoscapejs' in Nextjs
- TypeError: renderer is null HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-cytoscapejs.