MetaCell / MetaCell/meta-diagram
Performance optimisation for Links
- Dominant language
- TypeScript
- Stars
- 1
- Forks
- 0
- PR merge metrics
- No merged PRs in 30d
Description
Right now we get in console some warning about the key of the react object being already present in the DOM, this is due to the factory that re-create these components all the time.
This happens even without using the DefaultLinkWidget.generateLink, and also if I don't extend anymore the class DefaultLinkWidget.
My guess is that the cloneElement in the DefaultLinkSegmentWidget that creates top and bottom is not receiving the ref of the previous instance and then it's recreating all the time a brand new component.
Looking at the code it's not trivial where to fit this and it will possibly require a fork of react-diagram where we can do the fix since this should happen within their codebase in order to consume the ref correctly when the segment is cloned.
```
Warning: Encountered two children with the same key, `link-factory-link2`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
at g
at DefaultLinkSegmentWidget (http://localhost:3000/static/js/bundle.js:44192:1)
at g
at DefaultLinkWidget (http://localhost:3000/static/js/bundle.js:44251:5)
at g
at PeformanceWidget (http://localhost:3000/static/js/bundle.js:41450:1)
at LinkWidget (http://localhost:3000/static/js/bundle.js:42427:5)
at LinkLayerWidget (http://localhost:3000/static/js/bundle.js:42064:1)
at SmartLayerWidget (http://localhost:3000/static/js/bundle.js:40703:1)
at svg
at http://localhost:3000/static/js/bundle.js:4394:66
at TransformLayerWidget (http://localhost:3000/static/js/bundle.js:40765:5)
at div
at http://localhost:3000/static/js/bundle.js:4394:66
at CanvasWidget (http://localhost:3000/static/js/bundle.js:40473:5)
at div
at MetaDiagram (http://localhost:3000/static/js/bundle.js:96502:5)
at div
at Main (http://localhost:3000/static/js/bundle.js:578:5)
at WithStyles (http://localhost:3000/static/js/bundle.js:30846:23)
at div
at http://localhost:3000/static/js/bundle.js:4394:66
at Box (http://localhost:3000/static/js/bundle.js:31764:72)
at Layout (http://localhost:3000/static/js/bundle.js:1108:5)
at InnerThemeProvider (http://localhost:3000/static/js/bundle.js:30976:70)
at ThemeProvider (http://localhost:3000/static/js/bundle.js:29593:5)
at ThemeProvider (http://localhost:3000/static/js/bundle.js:30996:5)
at App
```
Contributor guide
No contributing guide indexed for this repository
Research direction
Reproduce the duplicate-key warning while inspecting DefaultLinkWidget and DefaultLinkSegmentWidget, including DefaultLinkWidget.generateLink and the cloneElement call. Determine whether the segment instances are recreated without the prior ref, and verify that the warning no longer appears and component identity is preserved.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend, performance
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100