Comments (4)
motin
commented on May 25, 2024
Looks like this has been asked and answered previously: #12
from react-cytoscapejs.
jdebr
commented on May 25, 2024
I am doing something similar in my component with the cy reference (except only rerunning layout when the number of elements change, which works well for my use case). I was just thinking that it seems like a useful enough feature that it would be nice to have it wrapped in the component rather than having to do it imperatively outside the component, although I suspect it should be optional behavior as for large graphs it might cause performance issues.
In any case, this isn't an issue for me, so if there's no interest in adding this (or reasons it shouldn't be that I haven't considered) it can be closed. I just wanted to gauge interest in a PR to help out if it sounded useful.
from react-cytoscapejs.
maxkfranz
commented on May 25, 2024
I think you'd often have to specify a custom diff implementation for
`options.layout`. The default one doesn't fit, since it's a shallow
equality comparison. Further, you may want to define a different diff
operation for layouts than for elements.
Maybe `props.diff(obj1, obj2)` could take on an extra field parameter like
`props.diff(obj1, obj2, fieldName)` where `fieldName` would specify the
top-level Cytoscape `options` field. For example, you could have
`diff(layout1, layout2, 'layout')` or `diff(ele1, ele2, 'elements')`.
In this way, you could use different diff implementations for different
fields. For typical object equality, you would probably only need shallow
equality checks for elements whereas you may need deep equality checks for
layouts. If you use something like Immutable.js, then you can always just
use referential equality (`===` or `!==`) for `diff()`, regardless of the
field.
…On Thu, Oct 17, 2019 at 9:28 AM Fredrik Wollsén ***@***.***> wrote:
Looks like this has been asked and answered previously: #12
<#12>
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
<#38?email_source=notifications&email_token=AAHRO436QTLMDNVD5DWYIALQPBR7DA5CNFSM4JBDEQU2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEBQDBMQ#issuecomment-543174834>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAHRO4ZUG7XZ6JLT7RAIGKDQPBR7DANCNFSM4JBDEQUQ>
.
from react-cytoscapejs.
jdebr
commented on May 25, 2024
I think that could be useful; however I was thinking of applying and running the layout regardless of whether options.layout has changed.
In the current implementation, the layout is only applied and run if the layout.options has changed according to either the provided diff, or the default shallow diff, which is obviously true the first time the layout prop is passed in. However, at least for synchronous layouts, any new elements added after this initial run will not have the layout applied and will be placed at (0,0). I believe this will be true for asynchronous layouts as well since cy.layout() is only applied to the elements currently in the graph when it is called, but I haven't tested it to be sure.
I would think a frequent use case would be wanting to apply a layout whose options would never change, but would re-apply on any new nodes when they are added after the component is mounted.
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.