Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Query View redesign #4536

Merged
merged 26 commits into from
Feb 19, 2020
Merged

Query View redesign #4536

merged 26 commits into from
Feb 19, 2020

Conversation

gabrieldutra
Copy link
Member

@gabrieldutra gabrieldutra commented Jan 11, 2020 •
edited by arikfr
Loading

What type of PR is this? (check all applicable)

  • Refactor
  • Feature

Description

To-do:

  • Initial preview for Desktop (mostly to see how data will fit)
  • Add details
    • Parameters
    • EmptyState
    • Better placement for QueryExecutionStatus (?)
    • ...
  • Mobile version
  • Organize styling (less variables, etc)

Related Tickets & Documents

Figma

Mobile & Desktop Screenshots/Recordings (if there are UI changes)

Not yet :)

@weekly-digest weekly-digest bot mentioned this pull request Jan 13, 2020
Closed
@gabrieldutra
Copy link
Member Author

Regarding the fullscreen toggle:

  1. fa-arrows-alt looked weird imo (it's too 'bold'), so I went with zmdi-fullscreen (the same we have in the Dashboard page).
  2. I added an Alt+F shortcut (lmk if you have another idea and thoughts regarding MacOS shortcut), it makes it handy to operate with the page, it should make the experience better for more experienced users.
  3. I also tried to add a css animation for the height change, but it's not a simple thing because in this case the height is automatic. I can explore JS animation options if you think it's worth it.

I inverted the "Add tag" with "Add description" (considering Figma style) just because it was easier, LMK if it actually should be exactly as in Firgma (it seemed an ok change to me).

@gabrieldutra
Copy link
Member Author

gabrieldutra commented Jan 18, 2020 •
edited
Loading

I'm currently using a query-fixed-layout class to make the layout fixed or not (currently used for mobiles). Since it's triggered inside JS, I can make pretty much anything enable/disable it (in case we want to make a different trigger based on height, or the user's input, we can).

In my 14'' laptop (1366x768) https://deploy-preview-4536--redash-preview.netlify.com/queries/307 doesn't look that good (only one row appearing at a time), but the Toogle Fullscreen with a shortcut makes it work once you get used to it.

gabrieldutra and others added 22 commits January 22, 2020 13:15
@gabrieldutra @arikfr
Render placeholder as link in EditInPlace
099d58f
@gabrieldutra @arikfr
Add card style to QueryVisualizationTabs
b4338bf
@gabrieldutra @arikfr
Add headerExtra for Refresh button in Query header
981fd87
@gabrieldutra @arikfr
Quick preview of new query view design (Desktop)
2f10646
@gabrieldutra @arikfr
Add Parameters container
710def1
@gabrieldutra @arikfr
Small details
475bebf 
- background color slightly different
- use link for New Visualization
@gabrieldutra @arikfr
Use updated style in QuerySource as well
7132727
@gabrieldutra @arikfr
Adjust Tabs details
d7074f8
@gabrieldutra @arikfr
Rename 'Updated' and move datasource to the right
b12727e
@gabrieldutra @arikfr
Add fullscreen data toggle
6d37058
@gabrieldutra @arikfr
Keep elements in DOM and just hide them
1424bad
@gabrieldutra @arikfr
Non-fixed layout for mobiles
afa4159
@gabrieldutra @arikfr
Move add description button to TagsControl
a86ceda
@gabrieldutra @arikfr
Always show scroll and pagination in tables
872719f
@gabrieldutra @arikfr
Copy 100% height css to query pages (for tests)
a0b1a64
@gabrieldutra @arikfr
Remove margin from Query Header
e3a55bd
@gabrieldutra @arikfr
Reuse existing styles instead of copying
a4f0d29
@gabrieldutra @arikfr
Use width 100% instead of 100vw
6bc17ce
@gabrieldutra @arikfr
Add Visualization Button
dc59a0e
@gabrieldutra @arikfr
Add EmptyState
88eb1d3
@gabrieldutra @arikfr
Use EmptyState when queryResult isEmpty too
ef677c2
@arikfr
Sync with master.
d64b802
@arikfr
Copy link
Member

arikfr commented Jan 22, 2020

I rebased this with master and force pushed.

@weekly-digest weekly-digest bot mentioned this pull request Jan 27, 2020
Closed
@weekly-digest weekly-digest bot mentioned this pull request Feb 10, 2020
Closed
@arikfr
Copy link
Member

arikfr commented Feb 10, 2020

Screen Shot 2020-02-10 at 10 51 59 AM

The visualization tabs need some padding from the border.

@arikfr
Copy link
Member

arikfr commented Feb 10, 2020

Also, need to update the header on mobile to be more like the Figma design. I would skip adding "add tag"/"add description" buttons on mobile.

@gabrieldutra
Copy link
Member Author

I think I'll just handle those comments along with #4584. It doesn't make that much sense to be in there, but it will spare the rebasing.

@weekly-digest weekly-digest bot mentioned this pull request Feb 17, 2020
Closed
@arikfr arikfr added this to the v9 milestone Feb 18, 2020
@arikfr @gabrieldutra
Refactor useQueryExecution & add inline query execution status (#4584)
c6936a1 
* QueryResult: added support for getting status updates using a callback instead of polling on the query result status.

This is a step towards bigger refacotr. We should completly rewrite this class and split it into two:

1. QueryExecution -- executes a query and tracks status.
2. QueryResult -- represents the actual QueryResult and has the different utilities to use the results (although those might be moved into helpers).

* Refactor useQueryExecution.

* useQueryExecution: only consider last triggered execution

* Fix execution triggered on every query update

* Add loadedInitialResults and fix loading results issues

* Only show Add Vis button when results are done

* Don't show notification on first results load

* Remove unnecessary useEffect

* Add margin between text and cancel button

* Add Refresh button to QuerySource

* Update ExecutionStatus positioning

* Mobile updates

* Add more spacing for execution status in mobile

* Add spacing between results wrapper and resizer

* Align Query description

* Hide Add Description/tag on mobile

* Allow different messages for no results/empty set

* Don't show empty state when opening new query page

* Add min-width to ExecutionStatus

* Improve ExecutionStatus spacing

* Use same execution information for view/edit

* Use autoFocus in EditInPlace for focus
- remove inputRef and use autoFocus attr

* Control visualization row emptyState from Renderer

* Fix broken Filters on Visualization Renderer

* Don't handle empty state based on context

* Add Data Source label to data source.

* Reuse useFullscreenHandler in QueryView page.

* (style fix)

Co-authored-by: Gabriel Dutra <nesk.frz@gmail.com>
@arikfr arikfr marked this pull request as ready for review February 19, 2020 13:37
@arikfr arikfr changed the title Live preview of new Query View design Query View redesign Feb 19, 2020
@arikfr arikfr mentioned this pull request Feb 19, 2020
Closed
4 tasks
@gabrieldutra gabrieldutra merged commit 9eaa44d into master Feb 19, 2020
@gabrieldutra gabrieldutra deleted the query-view branch February 19, 2020 20:47
@weekly-digest weekly-digest bot mentioned this pull request Feb 24, 2020
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@arikfr arikfr arikfr left review comments

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
v9
Development

Successfully merging this pull request may close these issues.

None yet
2 participants
@gabrieldutra @arikfr