Range selection tool #272

Closed
wants to merge 24 commits into
from

Conversation

Projects
None yet
7 participants

I made this range selection tool, the example is on rangeSelector.html
It pretty much covers the mouse selection behavior and zooming yet it still could use some improvement.

Contributor

dchester commented Jul 1, 2013

Thanks -- here are some changes we'd need to make in order to get this merged in:

  • Is there any way to zoom back out? Maybe a single click should zoom back out?
  • Can we lower that z-index to just as high as it needs to be? This would be in order to mitigate z-index arms races
  • How about some mouse cursor treatment?
  • Let's not use jQuery if we can help it
  • Don't worry about rebuilding rickshaw.js and rickshaw.min.js

Sure! I could take care of that in a while. Ill tackle those issues one by
one and keep you updated. Also sorry about rebuilding rickshaw ... I
figured I should do it since it also runs the jshint test.

Thanks for the feedback!

On Mon, Jul 1, 2013 at 2:20 PM, David Chester notifications@github.comwrote:

Thanks -- here are some changes we'd need to make in order to get this
merged in:

  • Is there any way to zoom back out? Maybe a single click should zoom
    back out?
  • Can we lower that z-index to just as high as it needs to be? This
    would be in order to mitigate z-index arms races
  • How about some mouse cursor treatment?
  • Let's not use jQuery if we can help it
  • Don't worry about rebuilding rickshaw.js and rickshaw.min.js


Reply to this email directly or view it on GitHubhttps://github.com/shutterstock/rickshaw/pull/272#issuecomment-20296503
.

@dchester I pushed the code with the changes you suggested.

Regards!

Awesome. Any ideas when this will be part of core?

Is there an event I can get access to that tells me the start x and end x values change. I see that the RangeSelector has a position property but I'm not sure how to get the value when you mouse up reliably

@niemyjski Im not sure I understand your question, if you need the the plain values you can get them from the position object at any time. The position object stores the timestamps of the selection as well. When you "mouse up" the event get the current coordinates and turns them into the kind of timestamp rickshaw uses. What do you need to get from the selection? Maybe I could help with it :)

@Andertech I want a callback that gets triggered when the grid selection is complete (I added one in quickly, thanks for saving me a ton of time). I don't want to have to constantly look at the position property for changes. I added a callback that gets passed in via the options. I added it in the mouse up event, but it gets triggered any time the page is clicked (E.G., clicking on a button or input element or web page itself). I think this needs some tweaking to finish the completion only when your mousing up inside of the graph, but other than that great job.

I'm working on improving the css a bit as I'm seeing issues the selection box is selecting the annotations timeline as well as my bootstrap widget header.

Thanks @niemyjski ! I got it now, if you hand me a gist I might get what you did working only for the graph.

@Andertech No problem, I quickly threw together as more of a hack as I knew a final solution would be needed before including in rickshaw.

https://gist.github.com/niemyjski/5aca85ec5517d9bad176

I'm using typescript in the following code:

return new Rickshaw.Graph.RangeSelector({
graph: graph,
selectionCallback: (position: any) => {
return false;
}
});

Please note that I had to make the callback global as it complained when I tried to create a local variable during runtime.

This is what I'm currently trying to fix.

image

I'm running into another issue. When I get the callback for selection, I'm updating my apps filters (knockout observables), which causes a request to take place to get detailed data and new chart data.. I'm using pushstate to keep track of my history. The problem is when I navigate back, it's like the chart is somehow zoomed in, and I can't get it to reset without refreshing the page.

Just to know you have the latest code for this? I pushed some changes (removed jquery, added a crosshair cursor and added a reset function with the right click) I've been quite busy but I'll try to get the callback thing integrated this week. Thanks for the feedback!

@Andertech This smooths out the selection problem I talked about before. Not sure if thats the same issue.
http://screencast.com/t/Q3EiSCdn0txb

@niemyjski @dchester I think this is a good release candidate for the feature, I covered most of the things you guys pointed out. I'll be more than happy if you give it a try.

@niemyjski btw sorry for the wait, I've had this on hold for a long time.

srlm-io commented Apr 26, 2014

For some reason, when I tried the RangeSelection tool on my graphs it would not display the overlay box, even though it worked on the example graph. The following change fixed that for me:

                     selectionBox.style.transition = 'none';
                      selectionBox.style.opacity = '1';
 -                    selectionBox.style.width = position.deltaX;
 +                    selectionBox.style.width = position.deltaX + 'px';
                      selectionBox.style.height = '100%';
 -                    selectionBox.style.left = position.minX;
 +                    selectionBox.style.left = position.minX + 'px';

srlm-io/rickshaw@35216d8#diff-6e04512d632be5c20154459de35a2f9d

Any updates on this being pulled into core? Please note that we also made some improvements here: https://github.com/exceptionless/Exceptionless/blob/master/Source/App/Scripts/rickshaw.custom.js

We added the ability to press escape while selecting to deselect and added the ability to select to the max/min values (edges of the graph) as it could give you an x value that's invalid.

@niemyjski I abandoned this for a long time, might check it out after work hours but I'm afraid this is not making it into the core for a while. So I recommend that you work with this as a separate file and include it to your Rickshaw asset in the build.

@srlmproductions that's weird thanks for pointing it out.

mkhq commented Aug 12, 2014

+1, this would be a very nice feature

ngo commented Jan 27, 2015

@Andertech What is the recommended way to use your selection tool alongside with mainline code? Is it sufficient to just include Rickshaw.Graph.RangeSelector.js file from your repository?

btw I'm closing this, I might revisit or not.

Andertech closed this Jan 27, 2015

It would be really nice if this was officially supported. I've made a bunch of fixes to it here: https://github.com/exceptionless/Exceptionless.UI/blob/master/src/components/rickshaw/rickshaw-custom.js

I know, but we can also use it as a module, so it's no biggie.
I don't plan to keep track on this for the time being, but feel free to make a new PR if you feel like it.
Also @niemyjski feel free to check my previous answer to @ngo where i showed him a more developed code than what's on this PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment