I have a graph of molecular interactions that takes nodes and edges from a query to my database. I also have two buttons as node labels: "Remove" and "Add" (where "remove" should remove the selected node, while "add" should expand to first neighbors).
I would like to add a function that removes the selected node (on click) without reloading the web page, but just reloading the graph (I want the selected node to disappear from the graph). So, the problem is not the function cy.remove but rather the graph reloading.
I am new to cytoscape.js (let's say to javascript), so I have no idea on how to reload a graph and where to put the remove and reload functions. To date I am only able to pass the ID of the node I want to remove and/or expand via GET method using php. This actually works, but it reloads the web page making a new query to my database, and it becomes tricky when one wants to add and remove a lot of nodes.
Could anyone provide me some simple example code that explains how to reload a graph after a button click, keeping all nodes except the removed one?
Sorry if it is a stupid question
Thanks
$('#button_deleteNode').click(function(){
cy.remove(nodeID);
});
Related
I have a Vue 2 app that I'm working on and it kind of works like a search engine - I have a search bar where I can look up any term and when the search runs, results containing that specific term will be displayed.
Now, every result behaves like a link - if I click on it, I will be redirected to a totally different app, which is made in Angular (not sure if this is relevant, I guess you could think only that I navigate to a whole different domain and leave my Vue app).
The issue is that if I click the "back" button in my browser, I will not have the results that I left from, because once I leave my Vue app, its data is deleted.
I was thinking of storing the url containing the search term in local storage and get it when I open the Vue app again, but I don't think this is an option, as it would also behave like this if I refresh the page - moment when I want to have no search query at all.
Please ask for any clarifications needed.
Any suggestions on what could be done are appreciated.
Is there a way by which I can duplicate or clone dijit widgets?
Basically, idea is to improve page rendering performance by minimizing widget creation time.
We have a single page web application and we do not reload the entire page whenever the user performs any action.
The flow of events is as follows,
The main page is loaded by the browser. It contains a dijit ContentPane which acts as a master container and displays the entire page using various other dijit widgets like textboxes, tabs, datefield, Enhanced grid etc.
The user performs an action (e.g. click on a dijit button)
The application sends an ajax call to server which processes the button click event and generates UI of the next page.
Browser receives successful response from ajax call and calls refresh method of dijit ContentPane. Which triggers destruction of existing widgets and new set of widgets are created and placed at appropriate position. (instead of refreshing the entire page)
The user again performs some action and again the refresh method is called which triggers destruction of existing widgets and new set of widgets are created and placed at appropriate position.
Because of such architecture the browser has to destroy existing widgets and recreate them again and again. Which results in slow performance.
The idea is to have a set of widgets always readily available on the browser clone them and place at appropriate position and update them instead of recreating each time.
Yes this is possible with something called _AttachMixin.
Basically there is no getting around the fact that your widgets would need to attach event listeners to the HTML Document. What can be cut out though is the time in the Dijit Widget's lifecycle to generate the DOM. As we well know, simple Dijit widgets like a dijit/form/Button has a div inside a div inside a div etc.
This is explained in detail here http://dojotoolkit.org/reference-guide/1.9/dijit/_AttachMixin.html
Here is an example using Node.JS as a backend. http://jamesthom.as/blog/2013/01/15/server-side-dijit
This is a tough problem and this concept isn't explained very thoroughly. If you have a backend that is not Node.JS you have to manually make the widget string and pass it as a response to your AJAX and an follow the example from the 1st link (Ref Doc)
We have had lots of widgets of our app render nicely within the client side. A far less complicated approach would be to simply show / hide (instead of render and destroy) widgets as and when they are needed. I assume that you app's access policy would focus on data and not which person has access to which widget.
I've just installed Flags module and it looks awful when on the bottom I see "Flag this item" link. The only thing I've found in configuration is enabling it to show as normal link. Still I haven't found how to change position of this link. Is it even possible to change link's place? I have installed CCK Blocks but it doesn't give me any option to get rid of it. If someone know or suspect what's possible - please help me.
Try the Display Suite module, this module is integrated with many modules like flag, title etc...
Display Suite allows you to take full control over how your content is displayed using a drag and drop interface. Arrange your
nodes, views, comments, user data etc. the way you want without having
to work your way through dozens of template files. A predefined list
of layouts (D7 only) is available for even more drag and drop fun!
https://drupal.org/project/ds
You can move and generate custom layouts for the fields/properties on the entity display formatter: teaser, full...
I have an issue with a list/detail pattern. I have an Article class, inheriting from QObject, defining some properties (title, updated and content being the ones that matters for now). To populate my (QML) ListView, I have a C++ GroupDataModel, filled with some Article*. Here's my list's onTriggered:
onTriggered: {
if (indexPath.length > 1) {
currentArticle = dataModel.data(indexPath);
var page = articlePageDefinition.createObject();
nav.push(page)
}
}
As you can guess, the articlePageDefinition defines a page using the upper currentArticle property.
Now, when I display the articlePage once, it's working fine. I can go back, click on the same list item, display the same Article details, works great. But when I pick a second article, the app kind of freezes. I can go back in my navigation pane, but I can't click on list items anymore. I tried to add some logs, the onTriggered is stuck on currentArticle = dataModel.data(indexPath);. At this point, I can log every property of dataModel.data(indexPath) without any issue. I tried to not create/push the page, simply affect currentArticle and display some of its properties, it's working fine too. I really don't understand what I am doing wrong here, any help appreciated.
In case you need to see more code, everything is here: https://github.com/Kernald/tt-rss-bb10/tree/e29e3b616aa179dd42f66804ecc20a6a45b6bb22
Here what can cause the problem your are having:
You create the articlePage and bind it's data to the "currentArticle" global variable
When you go back the articlePage is not deleted.
You open an other instance of this same articlePage. The last one still bind its data to the same currentArticle instance.
When you go back and click another item: the previous articlePage still exists in memory. It binds to "currentArticle". The problem is, it's not the data of "currentArticle" that has changed but the object referenced by "currentArticle". The Qml binder just fails then.
I had a similar behavior of my app, but I did not inspect your github code if the reason can be the same. I think you can verify that more quickly than me.
When removing and adding a list item with the same index, the code gets stucked. I removed an entry on user action and added a new one at that place, and it got stuck. This is a known issue to BB10, I found here: https://developer.blackberry.com/cascades/download/releasenotes/#known
I have a two column css layout. Left container holds the dynatree. It's pulling from a local json file. The right side will be the content, populated by clicking on a node on the dynatree.
What I saw on the dynatree examples was the usage of an iframe with urls in the tree.
Is using the iframe the "best" way to do things? Is this the only way to populate the content?
I'm probably being silly, but iFrames don't usually seem like a good way to go on things. Is there a better way? Should I be using ajax (can I?)?
http://wwwendt.de/tech/dynatree/doc/samples.html
"Example: URL navigation and iframes"
Thanks.
i use Div containers, with a 2 columns layout.
The tree uses ajax to load initially and the later expanded content.
When a node is activated, i reload page content and the right part is updated with data associated to the node. tree is still loaded from ajax.
You can do it this way, or load right content with ajax.
I was able to get this to work by placing my ajax in the onactivate event of dynatree:
$("#response").load("myname.php?name=Johnny&dummy=" + new Date().getTime());
the date gettime was to defeat the ie caching problem.