MetaCell / MetaCell/meta-diagram

Performance optimisation for Links

Open
#19 0 comments 1 reaction 0 assignees View on GitHub
bug optimisation
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.