How can I set a a state variable from two UI elements? - javascript

So, apologies if this is too much of an open and beginner-like question.
I am trying to build a single page app, in which one can control a variable in two ways:
by dragging the corresponding datapoint on a D3 scatterplot chart
by setting its value with a slider
I would like the chart to update when the slider gets moved, and the slider to move when the chart is updated by dragging the data on the chart.
I have thought of handling this through:
a spaghetti tangle of events
a proxy object mediating the changes
However I'm asking myself (and the illustrious SO community) is there a better way to handle this?

The keyword for solving this is 'data binding'. There are several frameworks out there, which are able to solve this. That means, that you have a javascript model, which holds the value, you want to work with and something like a proxy, which handles changes and stuff and applies the changes to the view or respectively to the mode..
In case you might need this more often, which usually applies to single page apps, I would recommend you to use some framework, which does the work for you instead of reinventing the wheel.
If you want to stay with client based Javascript, you might take a look into Angular.js (never used it, but maaaany people do and really do like it) or Knockout.js (I work with it, but there are no more further developments).
Within the last years and now many peoply switched to Node.js and Angular2 (a further development of Angular.js) or React.js or Vue.js. You might also take a look into it, but going into detail would blow up the answer. Moreover I only know some basics right now and other people can do better and already did better.

Related

Reduce watches created by ui-grid or alternative grid solutions

Apologies if this is a repeated question about ui-grid but I could do with being clear on the options for my particular use case. Other similar questions don't conclusively answer my problem.
We are attempting to use ui-grid in a fairly unusual web application where the number of tables on the page is effectively limitless. They get added the more activity the user does. Not ideal but that is what is required.
When using ui-grid, even with a fairly small simple table, it is adding around 1000 watches for each table. And the digest cycle increases significantly with each table being added too. This leads to poor performance when the number of tables increases, as you might expect.
My question is then, is there anything that can be done with ui-grid to reduce these number of watches? i.e. without delving in to the source code to make changes. We are passing our data in to the ui-grid directive using one-time binding notation, but that makes no difference. From looking at other similar questions, it would seem to me that there is nothing else that can be done, which might well imply that ui-grid is not suitable for us.
Alternatively, is there a way within AngularJs to prevent two way binding within a directive? I'm not aware of such a method, but perhaps someone knows a trick to make this happen?!
Finally, can anyone suggest an alternative grid that would be a better fit for our use case? We are trialling ui-grid due to the functionality it provides, such as column selection, cell formatting, ordering, filtering and so on. Are there better performing AngularJS or other JS grids out there that would cover this functionality? Preferably free to use? Others we've considered checking out are Kendo UI, jqxGrid, ag-grid (though perhaps this needs to be paid for).
Any help is massively appreciated.
My company has run into similar issues though not with ui-grid specifically. You've probably already considered this but the fix for us was horizontal and vertical paging. I don't know much about your use case, but we realized that horizontal and vertical scrolling with a huge grid had the same issues you are running into, but it wasn't really any more functional for the user to use a scroll bar than to use page controls to move between blocks of the grid. At most 500 cells would fit on a single screen at a time and it was very easy to lose your place trying to use a scroll bar.
By doing this we're able to use 1 way bindings (probably with bind-once but I would have to dig into the code to be sure). Even with two way binding the same technique should work for you too if it works with your use case.
if you us ag-Grid, there will be no watches. ag-Grid doesn't use Angular at it's core, so doesn't have watches internally.
ag-Grid has two versions, free and enterprise. if you don't need the enterprise features, then use the free versions.

three.js and depthFunc

From looking at the code, it seems that three does not give much control over the depthFunc. I would like to confirm that it's only set once as the default GL state, and not available say, in the material?
I'm not familiar with all examples, and was wondering if this is happening somewhere?
If not, what would be the best approach to set the depthFunc to gl.EQUAL for example, when a specific draw call is being made i.e. a mesh with a material?
Is something like toggling between scenes i.e. use one to render stuff, then use another one to render stuff on top of the first one a good solution for this? That's the only example that i've seen of tweaking the otherwise sorted objects.
It's currently in the dev branch of three.js: the pull request.

Bootstrap Tooltip Following Animated Element

I have a D3.js chart similar to this. As the user drills down into the chart I utilize the bootstrap tooltip to display the nodes name. I am currently tracking the node by call the tooltip show method over and over which cause the tooltip to re-render at the new location.
setInterval(function(){
$(node).tooltip('show');
}, 100)
My concern is that calling this function like this will cause performance issues. Can anyone suggest a better way to accomplish this or give me some insights on to performance issues when using the setInterval function this way?
From your description it sounds like what you are trying to do would be better accomplished by listening for discrete changes in state rather than time. I haven't worked with D3.js, but even something as simple as listening for clicks on <circle> elements would be a ton more efficient.
JS
$('svg').on('click', 'circle', function () {
$(node).tooltip('show')
})
It looks like D3.js has it's own event framework, but I'm not sure if it supports delegation. Someone more familiar could probably provide a better suggestion to that end.
Finally, depending on how many nodes you show at once, calling tooltip show on all of them could itself generate a performance hit. Tracking which ones open and close each time by storing references could be more efficient. Again, there might be something already in D3.js to handle this, but it's not something I know.

Javascript Library to dynamically create graphs?

Here is my requirement:
I need to create a visualization of links between different representations of a person. The image below I think indicates that fairly clearly.
Additionally, those rectangles would also contain some data about that representation of a person (such as demographics and the place). I also need to be able to handle events when clicking on the boxes or the links between them, as a sort of management tool (so, for example, double clicking a link to delete it, or something along those lines). Just as importantly, since the number of people and links will varies, I need it to be displayed by spacing out the people in a roughly equidistant fashion like the image shows.
What would be a javascript library that could accomplish this? I have done some research and have yet not found something that can cleanly do this but I'm hardly an expert in those libraries.
Here are the ones I've looked at:
Arbor js: Can dynamically create the spacing and links of the graph but I'm responsible for rendering all the visuals and there's really no hooks for things like clicking the links.
jsPlumb: Easily create connections between elements and draws them nicely enough but doesn't seem to address any layout issues. Since I don't know how many people will be on the screen, I have to be able to space them out equidistant and that doesn't seem to be a concern of jsPlumb.
D3.js: This creates a good visualization with the spacing I need but I don't see how I can show the data inside each node or do things like like mouse events on the links or box.
I'm feeling a bit lost so I'm hoping someone could point me to something that could help me or maybe point me to an example from one of these libraries that shows me that what I want is possible.
I ended up using Arbor with Raphael as my rendering library and it's worked out very well.
Take a look at Dracula Graph Library. It's a simple library that seems to do both layout as well as rendering graphs (using Raphael under the hood). It's a bit underdeveloped however.

BackboneJS and JQuery plugins architecture playing together in a MiniPhotoshop project

I'm rather new with BackboneJS.
it is exciting stuff for somebody who worked with plain JSONs until now. :)
I am used to design JQuery Widgets and plugins to encapsulate logic / presentation.
Backbone seems much more flexible with its MV* approach.
I am redesigning a "mini-photoshop" project for work. a javascript/html page which you can add elements like labels, images, buttons, change their properties, drag&drop them around and change their z-index, etc.
I took an approach of having a Backbone collection of elements that represents the drawing.
I thought of using a jquery plugin to be able to create this workspace in everypage i'd like.
so i could do something like:
$('.wrapper').miniPhotoshop({
elements:elements, // BB collection
painter:painter // an object that knows how to draw
});
the painter is seperated from plugin so i could easily change the way the collection is drawn.
So the objects here are:
miniPhotoshop - a jquery plugin that gets a BB collection
painter - an object consisting of methods that know how to draw the elements.
propertyBox - a jquery widget that when an element is clicked on shows its properties.
My question is does this jquery-backbone salad make any sence?
Apologies if this is an open-ended question, just hoping someone tried something similar before and be able to point me in the right direction.
Thanks!
I don't about others, but I wouldn't take jQuery for the structure of your app. I think Backbone is really good for structuring code, and jQuery is great for playing around with the dom.
My approach would be to use Backbone views to control the flow of your App and jQuery to play with/manipulate the dom inside Backbone views.

Categories