Store attr/regs setAttrs in cy nodes

src/components/GraphEditor/DefaultStyles.jsx

@@ -12,7 +12,7 @@ const DEFAULT_STYLES = [
     {
         selector: 'node.gme-node[hasChildren]',
         style: {
-            content: 'data(label)',
+            content: 'data(attributes.name)',
             // http://js.cytoscape.org/#style/background-image
             'background-width': '20%',
             'background-height': '20%',
@@ -21,7 +21,7 @@ const DEFAULT_STYLES = [
     {
         selector: 'node.gme-node[^hasChildren]',
         style: {
-            content: 'data(label)',
+            content: 'data(attributes.name)',
             // http://js.cytoscape.org/#style/background-image
             'background-width': '80%',
             'background-height': '80%',

src/components/GraphEditor/GraphEditor.jsx

@@ -232,11 +232,12 @@ export default class GraphEditor extends Component {
                     const edgeData = {
                         data: {
                             id,
-                            label: childData.attributes.name,
+                            attributes: childData.attributes,
+                            registries: childData.registries,
                             source: childData.pointers.src,
                             target: childData.pointers.dst,
                         },
-                        classes: `gme-connection ${childData.attributes.name}-gme-connection\
+                        classes: `gme-connection ${childData.metaType}-gme-connection\
 ${activeSelection.includes(id) ? ' in-active-selection' : ''}`,
                     };
 
@@ -255,16 +256,15 @@ ${activeSelection.includes(id) ? ' in-active-selection' : ''}`,
                     const cytoData = {
                         data: {
                             id,
-                            name: childData.attributes.name,
-                            label: childData.attributes.label
-                                ? `${childData.attributes.name}::${childData.attributes.label}`
-                                : childData.attributes.name,
+                            attributes: childData.attributes,
+                            registries: childData.registries,
                             parent: childData.parent,
                             metaType: childData.metaType,
                         },
                         position: getPosition(id),
                         grabbable: !readOnly,
-                        classes: `gme-node${activeSelection.includes(id) ? ' in-active-selection' : ''}`,
+                        classes: `gme-node ${childData.metaType}-gme-node \
+${activeSelection.includes(id) ? 'in-active-selection' : ''}`,
                     };
 
                     result.elements.nodes.push(cytoData);
@@ -308,7 +308,7 @@ ${activeSelection.includes(id) ? ' in-active-selection' : ''}`,
                                     source: id,
                                     target: setMemberData.id,
                                     label: setName,
-                                    memberAttrs: setMemberData.memberAttrs,
+                                    setMemberAttributes: setMemberData.setMemberAttributes,
                                 },
                                 classes: `set-member ${setName}-set-member ${activeSelection.includes(edgeId)
                                     ? 'in-active-selection' : ''}`,

src/components/SubTreeWatcher/SubTreeWatcher.jsx

@@ -43,7 +43,7 @@ const DEFAULT_OPTIONS = {
     setNames: null,
     // Mapping from set name to set attribute name
     setMemberAttributes: {},
-    // The depth of the territory, i.e. the number of levels of containment-hierarchy to display.
+    // The depth of the territory, i.e. the number of levels of containment-hierarchy to load.
     depth: 10,
 };
 
@@ -112,17 +112,13 @@ export default class SubTreeWatcher extends Component {
                 result = nodeObj.getMemberIds(setName).map((id) => {
                     const entry = {
                         id,
-                        memberAttrs: [],
+                        setMemberAttributes: {},
                     };
 
                     if (options.setMemberAttributes[setName]) {
                         options.setMemberAttributes[setName]
-                            .forEach((attrEntry) => {
-                                const value = nodeObj.getMemberAttribute(setName, id, attrEntry.name);
-                                entry.memberAttrs.push({
-                                    name: attrEntry.name,
-                                    value,
-                                });
+                            .forEach((name) => {
+                                entry.setMemberAttributes[name] = nodeObj.getMemberAttribute(setName, id, name) || '';
                             });
                     }