Reputation: 5198
This question arises from the following context:
One has a filter with various attributes such as demo-ed here.
For the minimal working example, we will consider that all the checkboxes represent one of the classes of the node e.g.
The goal is to be able to remove / add nodes based off of this filter. Some nodes may belong to multiple classes. I can get this to work with hide/show. That code is at the bottom of this post.
In this code I have the filter implement when the mouse leaves the drop-down. Probably not ideal, but sufficient. I have an object allNodeClasses
which contains the classes as properties and whether they are to be shown via the filter as booleans e.g.
allNodeClasses = {
class1: true
class2: true,
etc
}
The code below can be broken down into two main phases, set-up and the filter (before and after cy.batch...
respectively).
First I update the boolean object as to whether or not it's respective button has been checked. Then for each node, I loop through each class, and see if it has a class which is set to false. If it does, the node is hidden. If all of that node's classes are true, then it is shown (which would recover any previous hidden nodes).
Substituting remove with hide and add/restore with show does not work (well remove works...). Namely - I believe - that the certain functions do not work on removed nodes.
Thus I have the following few questions:
1.) How can I make this work with remove and add/restore?
2.) Is there a 'getter' for node classes? because so .classes
appears to work as a setter only, and .class doesn't work either.
3.) What is toggle class... because I think it would work here, but there aren't really any useful examples on the website demonstration how would could do that.
NOTE for question 1: The ideal solution for question 1 does not involve making and up-keeping a removedElements array.
NOTE: the ideal solution - in my mind - would have the following sudo code
for elem in cyGraph \\ for every item in the graph
var keepQ = true \\ assume default
for class in elem.classes \\ for every class that
\\ element belongs to
if allClasses[class] == false\\ if that class is false
keepQ = false \\ we are not to keep it
break \\ no need to keep searching
if elem.removedQ && keepQ \\ restore only removed elements
\\ that we should now keep
elem.restore
if !keepQ \\ remove filtered out elements
elem.remove
$('#filter-wrapper').on('mouseleave',function(){
var opts =[];
for (var className in allNodeClasses) {opts.push(className)};
var numOpts = opts.length;
for (var i = 0; i < numOpts; i++) {
allNodeClasses[opts[i]] = document.getElementById('filter-checkbox-'+opts[i]).checked
};
cy.batch(function(){
cy.nodes().forEach(function(node){
var keepQ = true;
for (var i = 0; i < numOpts; i++) {
if (node.hasClass(opts[i]) && !allNodeClasses[opts[i]]) {
keepQ = false;
};
};
if (!keepQ) {
node.hide();
} else {
node.show();
}
});
});
Upvotes: 2
Views: 1600
Reputation: 12250
Just remove the elements that match the unchecked classes.
E.g. if foo and bar are unchecked, then cy.$('.foo, .bar').remove()
.
Upvotes: 2