We are using cytoscape.js to render graphs in an Angular JS app and it seems to be leaking DOM nodes. A snapshot comparison in Chrome Dev Tools shows Detached DOM Trees being retained by the "instances" array in the global cytoscape object.
The cytoscape instance is created in the link function of the directive and I would like to clear these objects on the scope $destroy event. Even if I manually nullify the references to these instances, there are other global objects like the CanvasRenderer.data.container or CanvasRenderer.bindings[].target which still hold on to these elements which prevents them from being garbage collected.
My questions is: does cytoscape have a destroy() method that would free up references to these DOM elements that I could call on the angular $destroy event? OR what is the right way to get rid of these global references?
Screenshots from the Chrome Dev Tools profiler are here: https://drive.google.com/folderview?id=0B6OGkJMuELQHeC01U1FBYkd4NVU&usp=drive_web
(Lack sufficient reputation for attaching images here)
Options:
(1) You can reuse your Cytoscape.js instances and associated DOM elements instead of destroying them. You'll have better performance that way (esp. w.r.t. the DOM), and this is probably the approach you should be using anyway. Though perhaps your choice of frameworks has limited your options in this regard.
(2) You can call the private cytoscape.removeRegistrationForInstance(cy).
This issue stems from some old code that uses registrations for some compatibility as a jQuery plugin. I'll remove it, but you can work around this for now.
Finally, please create issues on Github for feature requests or bug reports. Stackoverflow should only be used for help questions (e.g. "I don't understand this function in the API" etc.).
Related
In the Godot Engine, I am wondering what happens when objects/scenes leave the viewport? For example: I am trying to make a large map with lots of scenes/entities (such as multiple moving enemies, as well as resource nodes). I am trying to figure out the best way to handle the entities that no longer need to be loaded in memory.
My initial thought was that every tile that is moved to, check the "map" array that holds all the tiles and load the new ones off the screen a little, and vice versa for the ones that will disappear. I assume this is horrible practice. I also thought of having "regions" that once entered, could load upcoming sections - but that also gets super complicated.
I noticed that Godot is already handling part of this problem. As an example, when an object emitting particles leaves the viewport, it stops emitting particles.
Globally performancewise, having multiple instances shouldn't be a problem, but if you have a lot of entities, you may want to execute code only when they are in viewport.
For instance :
if(isInViewport):
Do everything
Else:
Do nothing but exist
To that purpose the VisibilityNotifier2D class may be usefull.
I have read almost everything that google gave me to this topic and haven't been able to reach a satisfactory conclusion. It's essentially a follow up question to this one:
Moving image layouts with barrier or renderpasses
Assume I have a color attachment which is written to in one render pass and sampled from in a second one. Let there be only one subpass in both render passes. One way to handle the layout transition and dependencies is to add a barrier between the two render passes, which changes the layout from VK_IMAGE_LAYOUT_COLOR_ATTACHMENT_OPTIMAL to VK_IMAGE_LAYOUT_SHADER_READ_ONLY_OPTIMAL.
But Vulkan also offers implicit layout transitions (vkAttachmentDescription, initialLayout and finalLayout). I guess that there is a performance advantage of using them, so let's simply try to get rid of our barrier. We set the initialLayout and finalLayout field in the vkAttachmentDescription structure and remove the barrier. The problem is, we lost the synchronisation provided by the barrier, so we need to get the synchronisation back by other means. And this is the point where the confusion starts, leading to my questions:
1) What's the recommended way to synchronize the attachment between the two render passes? Obviously I could simply re-add the barrier and not change the layout, but wouldn't that defeat the purpose of the whole exercise, which was to get better performance by using implicit layout transitions and getting rid of the barrier? Or should I add a subpass dependency from the single sub pass of render pass 1 to VK_SUBPASS_EXTERNAL? Are there any caveats of using VK_SUBPASS_EXTERNAL performance-wise?
2) What about synchronizing the attachment backwards? It is the application's responsibility to transition the attachment to the correct initial layout, which can be done with a barrier, obviously. Can this barrier be replaced to get a performance advantage? The only way I can think of would be to do the dependency part with a sub pass dependency from VK_SUBPASS_EXTERNAL to the single sub pass of render pass 1 and to use a 'fast' barrier (one that doesn't sync) which only does the layout change. Does this make sense? How would that barrier look like? Or is the 'full' barrier unavoidable in this case?
The short version of my questions is simply: how do other people do attachment synchronisation in conjunction with implicit layout transitions?
Generally speaking, when Vulkan or similar low-level APIs offers you multiple tools that can achieve what you want, you should give preference to the most specific tool that can solve your problem (without having to radically re-architect your code or fundamentally impact your design).
In your case, you have 2 options: barriers or render pass mechanisms (subpass dependencies and layout transitions). Barriers work with anything; they don't care where the image comes from, was used for, or where it is going. Render pass mechanisms only work for stuff that happens in a render pass and primarily deal with images attached to render passes (implicit layout transitions only work on attachments).
Render pass mechanisms are more specific, so you should prefer to use those tools if they meet your needs.
This is also why, if you have two "separate" rendering operations that could be in the same render pass (if you're reading from an attachment in a way that can live within the limitations of input attachments), you should prefer to put them in the same render pass.
The short version of my questions is simply: how do other people do attachment synchronisation in conjunction with implicit layout transitions?
Render pass dependencies is what You are looking for. In case of two render passes You need to use the mentioned VK_SUBPASS_EXTERNAL value.
It is the application's responsibility to transition the attachment to the correct initial layout, which can be done with a barrier, obviously. Can this barrier be replaced to get a performance advantage?
However You perform layout transition, it doesn't matter. It is Your responsibility to transfer image's layout to the one specified as the initial layout. But I think the best way would be to once again use implicit layout transitions provided by render passes. If You are using them already, it should be possible to setup them in such a way so the first render pass transitions image to a layout which is the same as the initial layout of the second render pass, and the final layout of the second render pass is the same as the initial layout of the first render pass.
I have just started using React JS and I am currently working on getting the google maps "google-maps-react" package up and running.
From my basic understanding of React JS, any change causes a whole component hierarchy to re-render.
From my understanding of the Google usage information via this link; any re-render constitutes as a usage.
Question
So with that, how do React JS developers handle\deal with this problem? 25,000 free map renders pre-React is fairly substantial but it seems like a fairly simple cap to burst with frameworks like React that cause a re-render for any change in your hierarchy.
Option 1
Is the best way to ensure the map component is not nested in a hierarchy that is updatable by other components? I wrote a sample application and confirmed that only the components in the hierarchy that invoked the change are re-rendered.
If this is the best way, that is fine but I am hoping to hear from more experienced React developers.
Thanks,
I think the 25k limit refers to you requesting the google maps js sdk, not how often you instantiate a google.maps.Map object.
And yes, it would be good practice to not re-render the component encapsulating the map all the time.
Check this simple map component:
https://github.com/Scarysize/react-maps-popup/blob/master/src/map.js
It initializes the map once and propagates the map instance up using a function as a child approach (ofc you could simply pass a callback as a prop).
After some digging I found that the "google-map-react" NPM package is doing something interesting behind the scenes. It is actually sending an update to your markers with the latest map state.
Once I found this, I tied into that behaviour and now my map only renders once and I dynamically handle marker changes based on this behaviour.
I was not able to find this behaviour documented anywhere but happened to stumble upon it via a console.log(JSON.stringify(this.props)) within my marker.
UI Control such as LISTVIEW or Tree or ... comes with model that is observable.
When one make a change to that model, I suppose JavaFX knows how to refresh it automatically in the display.
However my question here is as follows:
Is it the intent way, that someone who wants to update and not replace this model, do so in a background thread with a platform.runlater.
In other words, one has some serious computation to do, and needs to to update an ObservableList as a result. Is it the intended way, to do the heavy work in a background thread and at the end of it, run the update in a platform run later?
I'm asking this because this is what I have been doing so far without problem. But from my reading here and there, in particular in
http://docs.oracle.com/javase/8/javafx/api/javafx/concurrent/Task.html
It seems that some other mechanism shall be used. One should rather return a full list instead of updating the observable list.
But this works only if things comes from the GUI. In case the update is triggered from the back end, there is no way to do so.
The solution that I have used so far, was always to hold a reference to the observable list and updating it by means of platform.Runlater.
Is there any other way ?
The link you give has an example (the PartialResultsTask) that does as you describe: it updates an existing ObservableList as it progresses via a call to Platform.runLater(). So this is clearly a supported way of doing things.
For updating from the back end (i.e. from a class unaware that the data are being used in a UI), you'd really have to post some code for anyone to be able to help. But you might have a look at the techniques used in this article. While he doesn't actually update lists from the backend in the examples there, the same strategy could be used to do so.
I'd like to use MvcSiteMapProvider for building breadcrumbs for an MVC3 project.
My problem is that certain dynamic nodes could have hundreds of dynamic child nodes, each of which could have hundreds of subnodes itself - so reading the whole sitemap is not an option. Instead, I'd like to lazy-load subnodes for a given node when a user lands on the page.
As far as I can see, this is not possible with MvcSiteMapProvider, but maybe I'm missing something? Is there a recommended way to address that?
Ok - I haven't got any answers and, unfortunately, it seems the correct answer is that lazy loading is not supported by MVCSiteMapProvider.
So I created a quick prototype of a very leightweight MVC breadcrumbs generator, which would request nodes only when you actually visit the corresponding page.