Generate an element without adding it to the graph

[Alexithemia]

Is there any way to generate a full Cytoscape node or edge without it being added to the graph? Like have it exist in a removed state or something?

I have a weird use case for this with the Expand-Collapse extension. I want to create these and add them to the collapsedChildren data point of their parent collapsed node, which will then add them to the graph if the parent node is ever expanded.

I have already confirmed I can add the nodes to this data point after they have been removed and everything works as expected, I am just hoping to skip the step of them being added and rendered in the graph first in order to be more optimized.

[maxkfranz]

It sounds like this isn't supported by an existing function. Are you interested in making a PR for this feature?

[maxkfranz]

It sounds like a good idea. It ought to be possible, since you can have removed elements -- as you mentioned. It probably makes sense to start with the constructor by adding support for creating a collection that starts off in the removed state:

cytoscape.js/src/collection/index.js

Lines 25 to 121 in 56fdab6

	let Collection = function( cy, elements, unique = false ){
	if( cy === undefined ){
	util.error( 'A collection must have a reference to the core' );
	return;
	}
	let map = new Map();
	let createdElements = false;
	if( !elements ){
	elements = [];
	} else if( elements.length > 0 && is.plainObject( elements[0] ) && !is.element( elements[0] ) ){
	createdElements = true;
	// make elements from json and restore all at once later
	let eles = [];
	let elesIds = new Set();
	for( let i = 0, l = elements.length; i < l; i++ ){
	let json = elements[ i ];
	if( json.data == null ){
	json.data = {};
	}
	let data = json.data;
	// make sure newly created elements have valid ids
	if( data.id == null ){
	data.id = util.uuid();
	} else if( cy.hasElementWithId( data.id ) || elesIds.has( data.id ) ){
	continue; // can't create element if prior id already exists
	}
	let ele = new Element( cy, json, false );
	eles.push( ele );
	elesIds.add( data.id );
	}
	elements = eles;
	}
	this.length = 0;
	for( let i = 0, l = elements.length; i < l; i++ ){
	let element = elements[i][0]; // [0] in case elements is an array of collections, rather than array of elements
	if( element == null ){ continue; }
	let id = element._private.data.id;
	if( !unique || !map.has(id) ){
	if( unique ){
	map.set( id, {
	index: this.length,
	ele: element
	} );
	}
	this[ this.length ] = element;
	this.length++;
	}
	}
	this._private = {
	eles: this,
	cy: cy,
	get map(){
	if( this.lazyMap == null ){
	this.rebuildMap();
	}
	return this.lazyMap;
	},
	set map(m){
	this.lazyMap = m;
	},
	rebuildMap(){
	const m = this.lazyMap = new Map();
	const eles = this.eles;
	for( let i = 0; i < eles.length; i++ ){
	const ele = eles[i];
	m.set(ele.id(), { index: i, ele });
	}
	}
	};
	if( unique ){
	this._private.map = map;
	}
	// restore the elements if we created them from json
	if( createdElements ){
	this.restore();
	}
	};

Then you could create a higher level function that uses your new feature. Maybe you could reuse the cy.collection() function name and allow for passing JSON in like you can with cy.add(). Or maybe there's a better, new name for a function like that.

What do you think?

[Alexithemia]

Another small related question, would there be any way to make a removed node a parent of a node? (it would also be a removed node in this case)

It doesn't seem to currently let me make a node that has been collapsed (I.E. removed) by the expand collapse library the parent of a node in the graph using the move functionality.

The use case I want to achieve is:

1. Create a node without adding it to the graph
2. Assign it's parent (that may or may not exist currently in the graph)
3. Add it to the collapsedChildren collection data point of the parent node that the extension uses to re-add them to the graph when the parent is expanded.

[Alexithemia]

Sure, that all makes sense, I'll start fiddling around with it.

[maxkfranz]

Maybe you could allow (2) as a part of (1). Unit tests would be useful to verify. (3) sounds like it's up to the extension to manage.

[Alexithemia]

Yeah, I have already confirmed (3) works and I will do it externally.

Looking at your element constructor it seems you might already have this functionality. What happens when you don't run restore after creating it? Or at the end of the collection constructor?

cytoscape.js/src/collection/element.js

Lines 6 to 128 in 56fdab6

	let Element = function( cy, params, restore = true ){
	if( cy === undefined || params === undefined || !is.core( cy ) ){
	util.error( 'An element must have a core reference and parameters set' );
	return;
	}
	let group = params.group;
	// try to automatically infer the group if unspecified
	if( group == null ){
	if( params.data && params.data.source != null && params.data.target != null ){
	group = 'edges';
	} else {
	group = 'nodes';
	}
	}
	// validate group
	if( group !== 'nodes' && group !== 'edges' ){
	util.error( 'An element must be of type `nodes` or `edges`; you specified `' + group + '`' );
	return;
	}
	// make the element array-like, just like a collection
	this.length = 1;
	this[0] = this;
	// NOTE: when something is added here, add also to ele.json()
	let _p = this._private = {
	cy: cy,
	single: true, // indicates this is an element
	data: params.data || {}, // data object
	position: params.position || { x: 0, y: 0 }, // (x, y) position pair
	autoWidth: undefined, // width and height of nodes calculated by the renderer when set to special 'auto' value
	autoHeight: undefined,
	autoPadding: undefined,
	compoundBoundsClean: false, // whether the compound dimensions need to be recalculated the next time dimensions are read
	listeners: [], // array of bound listeners
	group: group, // string; 'nodes' or 'edges'
	style: {}, // properties as set by the style
	rstyle: {}, // properties for style sent from the renderer to the core
	styleCxts: [], // applied style contexts from the styler
	styleKeys: {}, // per-group keys of style property values
	removed: true, // whether it's inside the vis; true if removed (set true here since we call restore)
	selected: params.selected ? true : false, // whether it's selected
	selectable: params.selectable === undefined ? true : ( params.selectable ? true : false ), // whether it's selectable
	locked: params.locked ? true : false, // whether the element is locked (cannot be moved)
	grabbed: false, // whether the element is grabbed by the mouse; renderer sets this privately
	grabbable: params.grabbable === undefined ? true : ( params.grabbable ? true : false ), // whether the element can be grabbed
	pannable: params.pannable === undefined ? (group === 'edges' ? true : false) : ( params.pannable ? true : false ), // whether the element has passthrough panning enabled
	active: false, // whether the element is active from user interaction
	classes: new Set(), // map ( className => true )
	animation: { // object for currently-running animations
	current: [],
	queue: []
	},
	rscratch: {}, // object in which the renderer can store information
	scratch: params.scratch || {}, // scratch objects
	edges: [], // array of connected edges
	children: [], // array of children
	parent: null, // parent ref
	traversalCache: {}, // cache of output of traversal functions
	backgrounding: false, // whether background images are loading
	bbCache: null, // cache of the current bounding box
	bbCacheShift: { x: 0, y: 0 }, // shift applied to cached bb to be applied on next get
	bodyBounds: null, // bounds cache of element body, w/o overlay
	overlayBounds: null, // bounds cache of element body, including overlay
	labelBounds: { // bounds cache of labels
	all: null,
	source: null,
	target: null,
	main: null
	},
	arrowBounds: { // bounds cache of edge arrows
	source: null,
	target: null,
	'mid-source': null,
	'mid-target': null
	}
	};
	if( _p.position.x == null ){ _p.position.x = 0; }
	if( _p.position.y == null ){ _p.position.y = 0; }
	// renderedPosition overrides if specified
	if( params.renderedPosition ){
	let rpos = params.renderedPosition;
	let pan = cy.pan();
	let zoom = cy.zoom();
	_p.position = {
	x: (rpos.x - pan.x) / zoom,
	y: (rpos.y - pan.y) / zoom
	};
	}
	let classes = [];
	if( is.array( params.classes ) ){
	classes = params.classes;
	} else if( is.string( params.classes ) ){
	classes = params.classes.split( /\s+/ );
	}
	for( let i = 0, l = classes.length; i < l; i++ ){
	let cls = classes[ i ];
	if( !cls || cls === '' ){ continue; }
	_p.classes.add(cls);
	}
	this.createEmitter();
	let bypass = params.style || params.css;
	if( bypass ){
	util.warn('Setting a `style` bypass at element creation should be done only when absolutely necessary. Try to use the stylesheet instead.');
	this.style(bypass);
	}
	if( restore === undefined || restore ){
	this.restore();
	}
	};