I am trying to add a large number of items (100+) to my tree via ForestStoreModel by calling newItem in a loop. This seems to be quite slow and locks up the browser. Is there any way I can do something similar to grid's beginUpdate & endUpdate? I want to basically 'turn off' my tree, add 100 items in a batch, then 'turn on' my tree. Any ideas? Thanks!
As Stephen Chung suggested, the best way would be to only add nodes that the user requires at a specific node level; but sometimes you may have a large number of nodes at the same level or other things might get in the way. In order to update the tree with a large number of items all at once, I would suggest creating a new store/updating your old store, then you need to refresh the tree rendering. So once the store has the correctly formatted array, do this (credit to Layke for the hack How to update dojo tree data dynamically):
// Completely delete every node from the dijit.Tree
myTree._itemNodesMap = {};
myTree.rootNode.state = "UNCHECKED";
myTree.model.root.children = null;
// Destroy the widget
myTree.rootNode.destroyRecursive();
// Recreate the model, (with the model again)
myTree.model.constructor(myTree.model);
// Rebuild the tree
myTree.postMixInProperties();
myTree._load();
Related
I am using vue-cytoscape to render a graph and navigate through a tree-like data structure.
My goal is to expand parent nodes and keep their position in the graph. I would like to simply add the new children nodes.
My approach is to lock current nodes, add the children and unlock the nodes.
this.cy.nodes().lock()
for(let d of data){
this.cy.add(d)
}
this.cy.elements().layout(this.config.layout).run()
setTimeout(() => {this.cy.nodes().unlock()}, 2000) // Give some time for the layout to render before unlocking nodes.
The problem is that the layouts do not consider the locked state of the nodes. Only the new nodes are moved around, which is fine. But the layout is not respected. I am under the impression that the layout calculates a new position for all nodes, but then moves only nodes that are unlocked.
According to this GitHub issue, some layout algorithm should handle locked nodes. I am using the following layouts and none seem to consider locked nodes.
Cola
Fcose
Dagre
avsdf
grid
concentric
Please try calling the layout function only on the added nodes:
var eles = cy.add(data); // refer to http://js.cytoscape.org/#cy.add for adding nodes
eles.layout(this.config.layout).run();
If you don't want nodes to move when calling the layout function, you can exclude them from the rendering. While calling cy.add(), the function returns an object with every added element inside (see var eles = ... in the code).
I have created a custom button that will allow users to select with columns to output to CSV so the button is not created as part of the table initialization. I have a modal that pops up with checkboxes created off the column headers for selection. It is worth noting I have regex search on each column header. The issue is I am using server side processing and as a result the only exported rows are those visible. As a work around I have set it up to get the page.info().recordsDisplay and set the length of the page to that and draw. The modal pops up and says it is loading data from server once table is fully populated the HTML of the modal will change to the checkboxes for export. Once exported the table is reverted back to the default length. What I need to do is capture when the rows are fully rendered so I can do the HTML switch. Right now I am setting a timeout. The data can take a while to populate as there are some 13k rows if now search is applied. What is the best way to do this and is there a more efficient way?
var tableHeaders = [];
var table = $('#example').DataTable().columns().every( function () {
tableHeaders.push( $(this.header()).text() );
});
var pageLength = table.page.info().length;
table.context['0']._iDisplayLength = table.page.info().recordsDisplay;
table.draw();
There could be an issue with server-side processing parameters start/length that define the portion of data being requested from the server upon each draw.
If your source data has huge number of rows, chances are they're not sent all at once to make use of server-side processing. So, you can try to manipulate those parameters.
Alternatively, you may try to make use of draw event fired upon each redraw.
I'm using cytoscape.js and cytoscape.js-expand-collapse to create dynamic hierarchies in my graph structure. I would like to be able to dynamically create a collapsed(merged) node that could potentially be expanded out, removed or possibly re-merged with additional nodes. I am having trouble whenever I call nodes.move({parent:null}). They become detached from the graph and I cannot re-attach them to a new parentNode. If I call restore on them I will see errors saying they already exist in the graph.
merge and unmerge by itself works fine in a simple case of no existing collapsed nodes. However calling merge on something that already contains a compound collapsed node breaks things. I would get the resulting merged node without the children of the previously collapsed merge candidate
Update #1 I've realized my problem was returning the wrong moved nodes. Calling .move on a collection returns a new set of nodes. so the unmerge should return those instead.
Update #2 cytoscape-expand-collapse utility does some internal book-keeping during the parent node collapse/expand by tucking away node data in 'originalEnds' data prop on the meta edges. so, if I'm now altering the graph dynamically by moving nodes in/out of parents these originalEnds pointers get out of sync causing infinite loops. I am doing some additional node tracking of my own as a workaround.
function merge(nodes){
//if one of the nodes is a compound itself, first uncollapse, then merge
var collapsed = nodes.filter(function(c){return typeof c.data('collapsedChildren')!=='undefined';});
if (collapsed.length>0) {
// for now just assume collapsed is a length of 1
var unmerged = unmerge(collapsed); //unmerged should be now the former collapsed children
nodes = nodes.subtract(collapsed).union(unmerged.nodes());
}
var parentNode = cy.add({group:'nodes', data: {id: parentID}});
nodes.move({parent: parentID});
collapseApi.collapse(parentNode);
return parentNode;
}
function unmerge(parentNode){
collapseApi.expand(parentNode);
var children = parentNode.children();
var moved = children.move({parent:null});
//at this point children become "detached" from the graph
// .removed() returns true, however, calling restore() logs an error and they are still technically in the graph
parentNode.remove();
return moved;
}
ele.move() has a more convenient implementation in cytoscape>=3.4: The elements are modified in-place instead of creating replacement elements.
Old code that uses the returned collection from ele.move() will still work. New code can be simplified by not having to use the returned collections at all.
I’ trying to build a Petri Net with Cytoscape.js, using Dagre.js layout and compound nodes for representing places witch in turns are subnets.
I’ using Expand-Collapse extension (Dagre layout) , starting with an overall collapsed network. As the net evolve, I need to update data on every node, including children of collapsed nodes witch users may decide to expand or not .
Here is the issue: I’ not able to select nodes inside collapsed ones nor I can test with IsParent() or any other function applying to compound nodes including slector like “node > node”. Any idea ?
Thanks.
You can't change state of elements that aren't in the graph. Modify them after you add them back (.restore()) to the graph instead.
I'm using Dojo dnd version 1.7.2 and it's generally working really well. I'm happy.
My app maintains many arrays of items, and as the user drags and drops items around, I need to ensure that my arrays are updated to reflect the contents the user is seeing.
In order to accomplish this, I think I need to run some code around the time of Source.onDndDrop
If I use dojo.connect to set up a handler on my Source for onDndDrop or onDrop, my code seems to get called too late. That is, the source that's passed to the handler doesn't actually have the item in it any more.
This is a problem because I want to call source.getItem(nodes[0].id) to get at the actual data that's being dragged around so I can find it in my arrays and update those arrays to reflect the change the user is making.
Perhaps I'm going about this wrong; and there's a better way?
Ok, I found a good way to do this. A hint was found in this answer to a different question:
https://stackoverflow.com/a/1635554/573110
My successful sequence of calls is basically:
var source = new dojo.dnd.Source( element, creationParams );
var dropHandler = function(source,nodes,copy){
var o = source.getItem(nodes[0].id); // 0 is cool here because singular:true.
// party on o.data ...
this.oldDrop(source,nodes,copy);
}
source.oldDrop = source.onDrop;
source.onDrop = dropHandler;
This ensures that the new implementation of onDrop (dropHandler) is called right before the previously installed one.
Kind'a shooting a blank i guess, there are a few different implementations of the dndSource. But there are a some things one needs to know about the events / checkfunctions that are called during the mouseover / dnddrop.
One approach would be to setup checkAcceptance(source, nodes) for any target you may have. Then keep a reference of the nodes currently dragged. Gets tricky though, with multiple containers that has dynamic contents.
Setup your Source, whilst overriding the checkAcceptance and use a known, (perhaps global) variable to keep track.
var lastReference = null;
var target = dojo.dnd.Source(node, {
checkAcceptance(source, nodes) : function() {
// this is called when 'nodes' are attempted dropped - on mouseover
lastReference = source.getItem(nodes[0].id)
// returning boolean here will either green-light or deny your drop
// use fallback (default) behavior like so:
return this.inhertied(arguments);
}
});
Best approach might just be like this - you get both target and source plus nodes at hand, however you need to find out which is the right stack to look for the node in. I believe it is published at same time as the event (onDrop) youre allready using:
dojo.subscribe("/dnd/drop", function(source, nodes, copy, target) {
// figure out your source container id and target dropzone id
// do stuff with nodes
var itemId = nodes[0].id
}
Available mechanics/topics through dojo.subscribe and events are listed here
http://dojotoolkit.org/reference-guide/1.7/dojo/dnd.html#manager