From 8959f3cfa448eb39ada257e884d11e1393b188b2 Mon Sep 17 00:00:00 2001 From: ianhi Date: Tue, 30 Jun 2020 22:14:00 -0400 Subject: [PATCH] create graph from viewLists --- ipycytoscape/cytoscape.py | 7 ++++--- src/graph.ts | 35 +++++++++++++++++++++++++++-------- src/widget.ts | 29 +++++++++++++++++++---------- tsconfig.json | 3 ++- 4 files changed, 52 insertions(+), 22 deletions(-) diff --git a/ipycytoscape/cytoscape.py b/ipycytoscape/cytoscape.py index 98166bd3..a0285806 100644 --- 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 index 2f0afd2e..364bc946 100644 --- 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 index 1c750499..74d3be28 100644 --- 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 index b1811573..a7188819 100644 --- 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"