Graph improvements

[jtomeck]

@waxlamp

I've set up the new layout to allow for the visualization area. Here are some things that will be needed:

• Figure out columns in the "Nodes List" so that no scrolling is required and that only pagination is needed.
• Allow for hiding the "bottom tray" with the small arrow icon. (this could be javascript onClick that sets the height of .node-cols to 13px and the height of .graph-viz to calc(100vh - 76px) and switching the arrow to an up arrow. Then resetting if you click it again. I'm just not sure how to handle all of that.
• And finally, adding the viz.

I know we talked about having tabs in the "ways to visualize" sidebar for external apps and internal viz modes. I say we cross that bridge when we get there.

Let me know what you think!

[jtomeck]

@waxlamp @AlmightyYakob

One more thing. I pulled back from using vuetify's grid and just settled on using their helper classes for flex items to make this layout. Jake mentioned he might want to spend some time figuring out how to do it using the vuetify grid.

[waxlamp]

@waxlamp @AlmightyYakob

One more thing. I pulled back from using vuetify's grid and just settled on using their helper classes for flex items to make this layout. Jake mentioned he might want to spend some time figuring out how to do it using the vuetify grid.

@AlmightyYakob, feel free to spend a few hours looking into Vuetify grid issues.

[waxlamp]

@waxlamp

I've set up the new layout to allow for the visualization area. Here are some things that will be needed:

• Figure out columns in the "Nodes List" so that no scrolling is required and that only pagination is needed.

Do you have a general strategy in mind for this? If it's a matter of recomputing "columns" by re-ordering the "rows" of data, I can probably help with that bit.

• Allow for hiding the "bottom tray" with the small arrow icon. (this could be javascript onClick that sets the height of .node-cols to 13px and the height of .graph-viz to calc(100vh - 76px) and switching the arrow to an up arrow. Then resetting if you click it again. I'm just not sure how to handle all of that.

I assume we can do this with a method in the component that toggles the tray by doing something like this. I will try to add a simple version that demonstrates the idea, and then we can worry about things like animation, etc., later. Sound good?

• And finally, adding the viz.

This part is a bit of a juggling act, so I will probably work up a simple "vis" component that simply displays some information about the graph as a stand-in or as a default option before the user selects a real vis to show in its place.

I know we talked about having tabs in the "ways to visualize" sidebar for external apps and internal viz modes. I say we cross that bridge when we get there.

Agreed. Even tabs may not be the right idea, but perhaps a dropdown instead. As you say, let's worry about that later.

Let me know what you think!

Overall I think it looks great! We'll have to play around some more to really figure it out. Thanks for working on this!

[jtomeck]

Do you have a general strategy in mind for this? If it's a matter of recomputing "columns" by re-ordering the "rows" of data, I can probably help with that bit.

That is the strategy I had planned, I just wasn't sure how to implement it. Your help would be great!

Agreed. Even tabs may not be the right idea, but perhaps a dropdown instead. As you say, let's worry about that later.

I added a sample select to the sidebar. What do you think we should label it? @waxlamp

[jtomeck]

.node-list will be able to be removed once we implement columns for the nodes column.

[waxlamp]

Do you have a general strategy in mind for this? If it's a matter of recomputing "columns" by re-ordering the "rows" of data, I can probably help with that bit.

That is the strategy I had planned, I just wasn't sure how to implement it. Your help would be great!

Ok I'll come and talk to you about the problem and then figure out how I can help.

Agreed. Even tabs may not be the right idea, but perhaps a dropdown instead. As you say, let's worry about that later.

I added a sample select to the sidebar. What do you think we should label it? @waxlamp

"Visualization".

It's sort of in the wrong spot though--right now it's under the "more ways to visualize" heading, which lumps it in with the "external" vis links that are supposed to be there.

[waxlamp]

• Allow for hiding the "bottom tray" with the small arrow icon. (this could be javascript onClick that sets the height of .node-cols to 13px and the height of .graph-viz to calc(100vh - 76px) and switching the arrow to an up arrow. Then resetting if you click it again. I'm just not sure how to handle all of that.

I added logic to handle this in 30e7bcf but:

• There's no animation. Not really convinced there needs to be.
• It doesn't seem to actually "hide" the drawer, it just shoves it below the visible part of the page (and causes a scrollbar to show up). Not sure if the height: 100% needs to change to height: 0px or something.

[waxlamp]

Not a big fan of the transition--feels too slow (and is sort of choppy, at least on my computer). If it were faster (100-200ms) then maybe, but I also think if it snaps open/shut instantaneously that's actually a pretty good interaction.

The scrollbar appearing when the panel is closed still seems to be a problem.

[jtomeck]

The scrollbar appearing when the panel is closed still seems to be a problem.

@waxlamp can you give me a screenshot where this is happening? Mac doesn't show scrollbars until you actually scroll.

[jtomeck]

@waxlamp nevermind I figured it out. Let me know if this transition speed works for you or if it's still choppy. It seems fine to me, but if there's a chance of it working poorly on everyone else's machine, we can just remove the transition.

[waxlamp]

@waxlamp nevermind I figured it out. Let me know if this transition speed works for you or if it's still choppy. It seems fine to me, but if there's a chance of it working poorly on everyone else's machine, we can just remove the transition.

The transition still feels choppy, but I'm also still getting the scrollbar issue, so maybe it's easier for me to show you in person.

[waxlamp]

The transitionless drawer looks/feels great.

[waxlamp]

Just FYI, the ball is now in my court to create something to go into the "VISUALIZATION GOES HERE" slot.

[waxlamp]

This is not perfect but I think it looks great and we can easily build off of this. Thanks for the hard work @jtomeck and @AlmightyYakob!

[jtomeck]

@waxlamp @AlmightyYakob - We should probably hide the dropdown that says "foo" and "bar" in it for now before merging.