Is there any example or sample code for the find and filter feature in Cytoscape JS - cytoscape.js

I saw in cytoscape application we have features like find and filter by keywords and degree. I tried a workaround following the original docs. Here you can see the demo webdemo.intolap.com/cytoscape (view-source for the source code or snippet). The filter works well partially. Example, "apple" will display apple and it's connected nodes (1st level) just what I am looking for.
But the problem I am facing is about resetting the graph and filter again with a
different keyword. It seems the filter function does not work after the text box is cleared and then keyed in a different keyword.
I mean when I clear the text box, it resets the graph to original which is correct. I did that using an init() function which reinstates the graph. But then if I search for "Ball" filter does not work. Any help please. Thanks!

actually there is a reasonably good explanation in the official docs here, but to be honest, I too struggled with this feature at first:
Basically, you can filter the specific collection you want to search by just inserting a filter query. So if you want to filter all nodes, you can use this:
cy.nodes(filterQuery);
If you want to filter all elements, just call this:
cy.elements(filterQuery);
If you want to make it easy, you can use this short version (short for cy.filter(...)):
cy.$(filterQuery);
The filter query itself is not that hard, you can do this (assuming that you have a node with the id "first" or an attribute like nodeColor "#2763c4"):
cy.$('[id != "first"]');
cy.$('[id = "first"]');
cy.$('[nodeColor = "#2763c4"]');
cy.$('[weight > 50]');
Additionally, you can specify the target collection within your filter query like this:
cy.$('node[id != "first"]');
Lastly, if you need complex filtering, you can use a function to apply that logic to the filter, for that just do this:
cy.$(function(element, i){
return element.isNode() && element.data('weight') > 50;
});

Sounds like you are trying to cy.filter on a cytoscape instance that no longer exists at that point. That's why it works the first time, but not the second time (after you reinstate the graph, which probably means destroy & create).
You need to make sure you point your filter handlers to the active cytoscape instance.

Related

Algolia vue-instantsearch : disjunction between two distincts facets

Using algolia vue-instantsearch, i’m encountering a special case and i’m having an hard time finding a solution.
Refinement behaviors is that you get the results that matches all your refinement filters.
If i filter on a brand and a price, i’ll get the results that matches both the brand and the price.
I need to add some specific filters that work differently. I would like to be able to say “returns me the results that matches either refinementA, or refinementB, or refinementC.”
The reason is that those refinements are checking fields that are not present on all the products.
If i check a value for refinementA, i want to keep all the results that has no value for field corresponding to refinementA, but remove those that has a value for refinementA that does not match with the one i filtered one.
Im thinking about handling myself some inputs instead of ias-components, and modifying by hand each query that is send to algolia by checking the value of my own inputs when searchFunction is triggered (https://www.algolia.com/doc/api-reference/widgets/instantsearch/js/#widget-param-searchfunction).
I did not found yet how i can trigger a search from an non-vue-instantsearch input event, and i’m not sure how the above solution could affect the internal working of vue-instantsearch.
I’m looking for feedbacks about a more standard way of doing this, or for any advices !
I got the answer by exchanging with a vue-instantsearch maintainer.
vue-instantsearch does not provide any option to do it.
A workaround is to overwrite algoliasearch search method, that is used under the hood by vue-instant-search.
const client = algoliasearch('', '');
const originalSearch = client.search;
client.search = function search(queries) { ... }
More informations in this github issue : https://github.com/algolia/vue-instantsearch/issues/1102

Shopify: Filtering collections by custom filter

I'm new with liquid and ruby, but I would like to create a custom filter in a collection, to filter by metafields. I already have:
A dropdown in the collection.liquid, with the values I would like to filter for.
When selecting a filter, it goes to a link like: https://myshop.myshopify.com/collections/my-collection/my-filter . Basically it is like the tags, but with my filter instead
However, since it is a custom filter and not a tag, I get no results. I'm wondering where is the query that displays all the products (or filters) is in the code. I know that it depends on the theme, but I'm using the default theme: launchpad-star.
Not sure if I could do it this way or with a link like: https://myshop.myshopify.com/collections/my-collection?filter_by=my-filter , in which case, I would also need where should the logic go.
I've looked at the forums already and found two closed tickets with no responses: https://ecommerce.shopify.com/c/ecommerce-design/t/using-metafields-to-create-filter-drop-downs-in-collection-liquid-187513 and https://ecommerce.shopify.com/c/ecommerce-design/t/using-metafields-to-create-filter-drop-downs-in-collection-liquid-134401 .
Thanks in advance
Probably not the best solution, but this is what I did to solve the problem:
I changed to the second option of the url, so when a user selects an option in the combobox, it is sent to a URL like: myshop.myshopify.com/collections/my-collection?filter_by=my-filter
In product-grid-item.liquid, I'm getting the metafield value of the product and displaying it as a class, and hide all the products as default. In the collection.liquid I read with javascript the value of the parameter (filter_by) and remove the "hide" class of the products with the value of the filter_by as class, so it gets displayed.
I feel that it is not very clean, but it is working as expected. Problems with this solution:
* Not displaying all the products and then filtering them
* I need to display all the products to avoid pagination, which could be a big problem if I have a lot of products.
If anyone could post a better solution, welcome!.

cytoscape.js successors and predecessors

I'm looking to select the successors and the predecessors from a selected node within my graph. Essentially what I need my code to do is select the full path in and out of a note right to the end nodes.
I know how to select one or the other (successors or predecessors) but not both,
i'm currently using :
var nhood = node.successors();
cy.batch(function(){
cy.elements().not( nhood ).removeClass('highlighted').addClass('faded');
nhood.removeClass('faded').addClass('highlighted');
I'm very new to JS and I'm pretty much fumbling around in the dark just now, learning as I go, so please excuse me if this is a simple question.
Thanks.
You look like you want a BFS instead, because you want the entire connected component essentially. See http://js.cytoscape.org/#collection/algorithms/eles.breadthFirstSearch
You can keep an array and put visited nodes into them.

Elasticsearch search analyzer

I am playing with indexing an articlenumber in Elasticsearch.
Here i provide a working example:
https://found.no/play/gist/557202b3542be157d813
i dont understand why i get a different score if i change the value for "product_number.search"
if i change the value from "ak454" to "ak 454" the score changes.
i thought that if i am using a search_analyzer the value "ak 454" will be transformed to "ak454" (its mapped using the searchable_id).
you can also look at the analyses tab to see my tokenizer:
https://found.no/play/gist/557202b3542be157d813#analysis
thanks.
The term-query (and filter) does not do any text analysis.
The match-query does, and can achieve what you want.
I adapted the example: https://found.no/play/gist/2de967d844c5fbc14d2f
Setting explain to true is very useful when working with problems like this, as you see exactly what Lucene is doing when it's scoring.

Is it possible to compare 2 dimensions in a Google Analytics query filter?

I'm just starting out with the Google Analytics API and am wondering if it's possible to compare two dimensions via an operand in the filters I pass in the query. And by wondering I mean I've tried it, but have had no success.
Specifically I'm trying to compare 2 custom variable values. One holds the user who created a post (customVarValue3), the other the user who is viewing the post (customVarValue5). I want to get the pageviews only for the visitors who are not also the creator. The filter looks like this (without urlencoding applied):
ga:customVarValue3!=ga:customVarValue5
The full query (url encoded) looks like this:
https://www.google.com/analytics/feeds/data?ids=ga%3Axxxxxx&dimensions=ga%3AcustomVarValue1%2Cga%3AcustomVarValue2%2Cga%3AcustomVarValue3&metrics=ga%3Apageviews&filters=ga%3AcustomVarValue3!%3Dga%3AcustomVarValue5&sort=-ga%3Apageviews&start-date=2012-02-09&end-date=2012-02-23&max-results=50
However, it returns the same results (and I know there are results where ga:customVarValue3 == ga:customVarValue5).
Probably it isn't possible, but I just wanted to see if anyone knew how to achieve this or has a workaround or something.
No, it is not possible using the GAv3 API in its present state. You can, however, get all the results by using the specified two custom variables as the dimensions for a report, and programmatically filter out the unnecessary results.
Some simple construct like
for(var item in collatedResultsListwithDimensions) {
for(var row in item.rows) {
if(row[0]!=row[1])
newResultRows.push(row);
}
}
Now your newResultRows will have those rows where row[1]!=row[0] assuming the two custom variables you mentioned are the first two dimensions.