Adding Feature: Data Viewer

[ydlamba]

First Draft

Status: Work in Progress
Fixes #85.

[domoritz]

https://medium.com/mission-log/design-better-data-tables-430a30a00d8c for some advice.

[domoritz]

Somehow I cannot brush in http://localhost:8080/#/examples/vega-lite/selection_layer_bar_month.

• Broken hover
• Not pixel perfect (notice offset to the right)

• make tabs look like in VSCode or remove the line between tab and content.
• dropdown too large
• Too much white space
• It's not just error logs. Rename!

• Resize should be above the tabs

Other

• Don't use (...)
• How do I access data that's too large?
• Only show the first 100 rows. Then provide a way to jump to next batch.

[ydlamba]

@domoritz I have updated a bunch of things. To proceed further, PR needs your feedback.

[ydlamba]

The only thing left is How do I access data that's too large?, which will be done in a followup PR.

[domoritz]

Performance is awesome and it looks great. Well done! Below are some bugs I found and comments for improvements.

What about Don't use (...)? I see the this very often and don't think it's necessary in many cases.

For example, why doesn't this table adjust so that the first column fits?

• I've also noticed that the panel at the bottom resizes when I switch from warnings to data viewer when I resized the panel before. The state should be saved.

• reduce whitespace above selector

• Don't show pagination if there is only one page

• Add up down icon like the one we use for Vega code

• Table does not update when I switch example
• Make root the last dataset, not the first one
• If the table is very wide, there is a lot of whitespace. Can we make it more narrow in this case? (not high priority)
• There is a double line at the right side of the table.

[ydlamba]

PR has been updated.

[domoritz]

When the table is narrow, the pager is oddly placed. Do you want to center it?

[domoritz]

Before we can merge this, we need to deal with .... At least we should show a tooltip that says that the field is too large to be displayed. Please use the view API (see JS console).

[domoritz]

Sometimes headers are not fully visible

[domoritz]

• Data table does not update when the data changes. Doe example, when I brush in a chart, the brush store should update.

Check data_1 in http://localhost:8080/#/examples/vega-lite/selection_layer_bar_month

[domoritz]

• The state of the data viewer is not saved. When I refresh, the arrow is pointing the wrong way.

[domoritz]

• I think the header of the table should not scroll.

[domoritz]

• Large table names overflow the dropdown.

[domoritz]

Two things and then we can merge

• horizontal scrolling when the table is too wide
• use the full height for the table instead of fixing the height

[invokesus]

🎉