Conversation
|
Thanks for taking this over @mcnuttandrew! Apologies for slacking 😛 |
|
Modulo some tweaks to the docs, this PR is no longer a WIP, so it's ready for a full review from anyone who might be available |
src/plot/highlight.js
Outdated
| const plotWidth = innerWidth + marginLeft + marginRight; | ||
|
|
||
| return { | ||
| bottom: allow.includes('y') ? Math.max(startLocY, yLoc) : plotHeight, |
There was a problem hiding this comment.
I don't like the api of using an array of strings. Can this use booleans for horizontal and vertical or x and y?
| const {dragArea} = this.state; | ||
| const {xLoc, yLoc} = getLocs(e.nativeEvent); | ||
|
|
||
| const startArea = (dragging, resetDrag) => { |
There was a problem hiding this comment.
d3 calls this brushing. Why are we introducing a new variable name and concept of dragging?
There was a problem hiding this comment.
Huh. I had thought of the action of creating a selection rectangle as the brushing step and the moving the box around as a dragging. These feel like independent behaviors to me, and browsing the d3 docs it appears that they are kinda lumped under a single term. Would an appropriate rotation of terms see
brushing -> drawing
dragging -> brushing
?
Or are you suggesting a larger change?
There was a problem hiding this comment.
If you want to split them out that's fine with me. I have definitely gotten bitten in the past by infinite loops in d3.brush :)
docs/highlight.md
Outdated
| Defaults to `false` | ||
| Disable brushing and dragging in the x direction | ||
|
|
||
| ### disableT (optional) |
There was a problem hiding this comment.
Also typically I prefer boolean option names to be positive, with the default behavior as true, so you need to explicitly pass false to disable
|
As i was preparing to wrap up this PR i wanted to make sure that the API made sense for my target application, brushing on parallel coordinates. In order to make it work I had to change a number of aspects about the architecture of the highlight component, most notably how the listeners are triggered. Rather than preparing a stacked PR which might have merge lag, I ended up just pulling the branches together into a single super PR |
ca1eca0 to
dcc8997
Compare
akindr
left a comment
There was a problem hiding this comment.
overall LGTM, pumped to see this finally merged in to the core repo
src/plot/highlight.js
Outdated
| color: 'rgb(77, 182, 172)', | ||
| className: '', | ||
| enableX: false, | ||
| enableY: false, |
There was a problem hiding this comment.
minor nit - this is probably going to create a bunch of GitHub issues where people are like "I added Highlight but nothing happens??" because by default, the component doesn't do anything. My .02 would be to default these values to true, so someone can just drop this in and get highlighting in all directions.
There was a problem hiding this comment.
You are 100% correct, updating
|
Would some mind cutting a new version? I think for something big like this we should do a minor |
|
@mcnuttandrew yep! I will bump a minor version |
* initial reorganization * basic brushing functionality * dragging * add some initial useless tests * add last of examples, address some commentary, start flushing out tests * make examples use seeded random, start writing docs * get click to clear done, finish writing tests * ensure that only allowed axes are returned on bruhs * switch to boolean opt out props for selecting axes of operation * trying to work out how parallel coordinates with brushing work * finish parallel brush coords * Finish respond to krebs commentary * address commentary and address bug that was preventing dragging on pc * lint
* initial reorganization * basic brushing functionality * dragging * add some initial useless tests * add last of examples, address some commentary, start flushing out tests * make examples use seeded random, start writing docs * get click to clear done, finish writing tests * ensure that only allowed axes are returned on bruhs * switch to boolean opt out props for selecting axes of operation * trying to work out how parallel coordinates with brushing work * finish parallel brush coords * Finish respond to krebs commentary * address commentary and address bug that was preventing dragging on pc * lint
This is an progress PR that at long last adds brushing functionality to react-vis. Specifically it does this by evolving the highlight component from the showcase examples into a full fledged deal.
Still to do
I would love any input on the API or anything else anyone might have. Big thanks to @ Domino987 whose recent work on the showcase pushed me to finish this saga up.