create graph from viewLists

cytoscape · Oct 1, 2020 · 8959f3c · 8959f3c
1 parent 7cc777a
commit 8959f3c
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 22 deletions.
diff --git a/ipycytoscape/cytoscape.py b/ipycytoscape/cytoscape.py
@@ -147,7 +147,6 @@ class Element(Widget):
     _view_module = Unicode(module_name).tag(sync=True)
     _view_module_version = Unicode(module_version).tag(sync=True)
 
-    group = Unicode().tag(sync=True)
     removed = Bool().tag(sync=True)
     selected = Bool().tag(sync=True)
     selectable = Bool().tag(sync=True)
@@ -163,6 +162,8 @@ class Edge(Element):
     _view_module = Unicode(module_name).tag(sync=True)
     _view_module_version = Unicode(module_version).tag(sync=True)
 
+    group = Unicode('edges').tag(sync=True)
+
 
 class Node(Element):
     """ Node Widget """
@@ -173,10 +174,10 @@ class Node(Element):
     _view_module = Unicode(module_name).tag(sync=True)
     _view_module_version = Unicode(module_version).tag(sync=True)
 
+    group = Unicode('nodes').tag(sync=True)
     position = MutableDict().tag(sync=True)
     locked = Bool().tag(sync=True)
-    grabbed = Bool().tag(sync=True)
-    grabbable = Bool().tag(sync=True)
+
 
 def _set_attributes(instance, data):
     cyto_attrs = ['group', 'removed', 'selected', 'selectable',

diff --git a/src/graph.ts b/src/graph.ts
@@ -12,15 +12,20 @@ export class ElementModel extends WidgetModel {
   defaults() {
     return {
       ...super.defaults(),
-      group: '',
       removed: false,
       selected: false,
       selectable: false,
-      locked: false,
       classes: '',
       data: {},
     };
   }
+  asCyObj() {
+    return {
+      data: this.get('data'),
+      selectable: this.get('selectable'),
+      classes: this.get('classes'),
+    };
+  }
 }
 
 export class NodeModel extends ElementModel {
@@ -34,9 +39,19 @@ export class NodeModel extends ElementModel {
       _view_module: NodeModel.view_module,
       _view_module_version: NodeModel.view_module_version,
 
+      group: 'nodes',
       position: {},
       grabbed: false,
       grabbable: false,
+      locked: false,
+    };
+  }
+
+  asCyObj() {
+    return {
+      ...super.asCyObj(),
+      group: this.get('group'),
+      position: this.get('position'),
     };
   }
 
@@ -58,6 +73,16 @@ export class EdgeModel extends ElementModel {
       _view_name: EdgeModel.view_name,
       _view_module: EdgeModel.view_module,
       _view_module_version: EdgeModel.view_module_version,
+
+      group: 'edges',
+    };
+  }
+
+  asCyObj() {
+    return {
+      ...super.asCyObj(),
+      group: this.get('group'),
+      position: this.get('position'),
     };
   }
 
@@ -139,7 +164,6 @@ export class ElementView extends WidgetView {
 
     this.model.on('change:group', this.valueChanged, this);
     this.model.on('change:removed', this.valueChanged, this);
-    // this.model.on('change:selected', this.valueChanged, this);
     this.model.on('change:locked', this.valueChanged, this);
     this.model.on('change:classes', () => {
       this.elem.classes(this.model.get('classes'));
@@ -161,11 +185,6 @@ export class NodeView extends ElementView {
       options: params.options,
     });
     this.node = this.elem as NodeSingular;
-    // this.model.on('change:grabbed', () => {
-    //   this.node.grabbed();
-    // });
-    // this.model.on('change:grabbed', this.valueChanged, this);
-    // this.model.on('change:grabbable', this.valueChanged, this);
     this.model.on('change:position', () => {
       this.node.position(this.model.get('position'));
     });

diff --git a/src/widget.ts b/src/widget.ts
@@ -18,7 +18,7 @@ import { MODULE_NAME, MODULE_VERSION } from './version';
 // Import the CSS
 import '../css/widget.css';
 
-import cytoscape from 'cytoscape';
+import cytoscape, { Core } from 'cytoscape';
 // @ts-ignore
 import cola from 'cytoscape-cola';
 // @ts-ignore
@@ -33,6 +33,9 @@ import klay from 'cytoscape-klay';
 
 import 'tippy.js/themes/material.css';
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { NodeModel, EdgeModel } from './graph';
+
 cytoscape.use(popper);
 cytoscape.use(dagre);
 cytoscape.use(klay);
@@ -76,7 +79,7 @@ export class CytoscapeModel extends DOMWidgetModel {
 }
 
 export class CytoscapeView extends DOMWidgetView {
-  cytoscape_obj: any;
+  cytoscape_obj: Core;
   is_rendered = false;
   nodeViews: any = [];
   edgeViews: any = [];
@@ -87,6 +90,7 @@ export class CytoscapeView extends DOMWidgetView {
 
     this.displayed.then(() => {
       this.init_render();
+      this.cytoscape_obj.startBatch();
       this.nodeViews = new widgets.ViewList(
         this.addNodeModel,
         this.removeNodeView,
@@ -100,6 +104,11 @@ export class CytoscapeView extends DOMWidgetView {
         this
       );
       this.edgeViews.update(this.model.get('graph').get('edges'));
+      this.cytoscape_obj.endBatch();
+      this.cytoscape_obj
+        .elements()
+        .layout(this.model.get('cytoscape_layout'))
+        .run();
     });
 
     this.model.get('graph').on('change:nodes', this.value_changed, this);
@@ -190,9 +199,7 @@ export class CytoscapeView extends DOMWidgetView {
   }
 
   init_render() {
-    console.log('in init render');
     if (this.model.get('graph') !== null) {
-      console.log('in if in init_render');
       this.is_rendered = true;
       this.cytoscape_obj = cytoscape({
         container: this.el,
@@ -216,9 +223,8 @@ export class CytoscapeView extends DOMWidgetView {
         motionBlurOpacity: this.model.get('motion_blur_opacity'),
         wheelSensitivity: this.model.get('wheel_sensitivity'),
         pixelRatio: this.model.get('pixel_ratio'),
-        layout: this.model.get('cytoscape_layout'),
         style: this.model.get('cytoscape_style'),
-        elements: this.model.get('graph').converts_dict(),
+        elements: [], // this.model.get('graph').converts_dict(),
       });
 
       // we need to set listeners at initial render in case interaction was
@@ -276,7 +282,7 @@ export class CytoscapeView extends DOMWidgetView {
     this.cytoscape_obj.panningEnabled(this.model.get('panning_enabled'));
   }
   private _updateUserPanningEnabled() {
-    this.cytoscape_obj.UserPanningEnabled(
+    this.cytoscape_obj.userPanningEnabled(
       this.model.get('user_panning_enabled')
     );
   }
@@ -286,7 +292,8 @@ export class CytoscapeView extends DOMWidgetView {
     );
   }
   private _updateSelectionType() {
-    this.cytoscape_obj.selectionType(this.model.get('selection_type'));
+    // I think that @types may have gotten this wrong?
+    (this.cytoscape_obj as any).selectionType(this.model.get('selection_type'));
   }
   private _updateAutolock() {
     this.cytoscape_obj.autolock(this.model.get('autolock'));
@@ -311,7 +318,8 @@ export class CytoscapeView extends DOMWidgetView {
     }
   }
 
-  addNodeModel(NodeModel: any) {
+  addNodeModel(NodeModel: NodeModel) {
+    this.cytoscape_obj.add(NodeModel.asCyObj());
     return this.create_child_view(NodeModel, {
       cytoscapeView: this,
     });
@@ -321,7 +329,8 @@ export class CytoscapeView extends DOMWidgetView {
     nodeView.remove();
   }
 
-  addEdgeModel(EdgeModel: any) {
+  addEdgeModel(EdgeModel: EdgeModel) {
+    this.cytoscape_obj.add(EdgeModel.asCyObj());
     return this.create_child_view(EdgeModel, {
       cytoscapeView: this,
     });

diff --git a/tsconfig.json b/tsconfig.json
@@ -13,7 +13,8 @@
     "skipLibCheck": true,
     "sourceMap": true,
     "strict": true,
-    "target": "es2015"
+    "target": "es2015",
+    "strictPropertyInitialization": false,
   },
   "include": [
     "src/**/*.ts"