metacell / meta-diagram Goto Github PK

• implement MetaDiagram class
• implement MetaLink class
• implement CustomNodeModel
• implement CustomLinkModel
• Link the abstract node factory to meta-diagram
• Link the abstract link factory to meta-diagram
• dynamic population of the factories based on the componentsMap given in input

Currently the example application is broken

Please fix and add an example for each component type

Just add the Mechmetadata.ts from the psyneulink repo

• initialize the yarn package
• prepare library entry point
• ensure this can be imported locally from another project as a depedency
• prepare this for being published on npm
• compile the README.

Meta-Diagrams has no concept of Graph but still MetaNodeModel contains attributes (graphPath and localPosition) that are related with it

Right now we are installing the packaged directly from github and not from npm registry. Because it's a typescript package we need to compile it first. Instead of having to do that on our own at the application level we decided to have it on the library for now

As per last call, the composition will be visualised as a square that contains all the nodes inside.
We need to prototype this component, keeping in mind that:

when we drag and drop the compositions all the content will move with it.
I can still drag and drop any single node inside
if a node gets dropped outside the composition then it's not part of that anymore.
The focus of this card is more on the functional side rather than the concept of composition itself within psyneulink, so the 3 key points above are the things that we should focus implementation wise.

Currently the interface of MetaDiagram uses the ReactDiagram options to pass values from and to nodes/links
Please refactor this to use a more readable/self explaining interface to interact with the node and link classes/objects

As discussed here we should export the class names used in the default meta-diagram theme to allow applications (like psyneulink) to use those (instead of having to hardcode those names in the application)

As per title, we need to ensure that the default are available for the library:

if the user does not specify a componentsMap ensure there is one available that uses the react-diagram default nodes and links.
if the user specify a type that does not exists in the components map, report the error in console but as a fallback use the default type for visualization.

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