Frontend enhancements #80

benj-zen · 2020-06-03T10:39:21Z

Fixes layout for large tables
Adds Welcome page
Adds routing and URL params
Makes QueryTable sortable
Adds dark/light mode toggle
Refactors framework for adding new views
Updates favicon
Adds option to export data as csv or json

- Fixes layout for large tables - Adds Welcome page - Adds routing and URL params - Adds dark/light mode toggle - Refactors framework for adding new views

dingens

(copied from slack) irgendwie bin ich nicht damit zufrieden dass man für die hauptoperation (query) dieses kleine versteckte menü anklicken muss. das ist irgendwie das gegenteil von guter ux. finden wir da nicht was besseres? vllt doch tabs und wir bemühen uns uns damit extrem kurz zu fassen (ggf zusatzinfo per mouseover) damit es immer in eine zeile passt?

Also, I'd like to rename pqdb-frontend to just frontend (or web-frontend, maybe)

pqdb-frontend/src/App.js

dingens · 2020-06-08T09:41:25Z

pqdb-frontend/src/App.js

+      <ThemeProvider theme={getTheme(this.state.themeId)}>
+        <CssBaseline />
+        {this.state.lightBoxIsOpen && (
+          <Lightbox


Actually I think it'd be more helpful if the diagram wasn't shown in an overlay but right below the sql query field, so that one can type queries while looking at it. (It'd be enough if this was possible on the sql page, it's not important on the welcome page. There, we should rather have a simple diagram telling people what scheme/flavor etc is.)

Also, the icon could be a link to the image so if you middle-click it you can open the image in another tab.

I think if you display the image below the query field it will be too small to read. I chose the lightbox since it had zooming functionality.
An alternative would be to display the image below the query field and to magnify the content at the cursor position.

Something like this: https://ethanselzer.github.io/react-image-magnify/#/react-slick

I like!

Another idea (but way more work): split the big diagram into five, one for scheme_, one for flavor_, etc. This is the natural way of splitting the diagram in parts: Each of them would just have one arrow which leaves the diagram in the direction of the "one level up" table (except benchmark where it's two)

works well for me! It'd be great if we could set a max height to the image so that it is never larger than say 80% of the screen so the query box is always above, but it doesn't seem to be possible (setting the style property sets it on the outer div, not on the image)

for really small displays, it's probably not very usable, but that's probably not solvable no matter what (and nobody wants to write queries on a smartphone anyways)

dingens · 2020-06-08T09:55:18Z

pqdb-frontend/src/components/views.js

-                                        value={this.state.sqlQuery}
-                                        onChange={e => this.setState({ sqlQuery: e.target.value })}
+                                        value={this.state.sqlInput}
+                                        onChange={e => this.setState({ sqlInput: e.target.value })}
                                    />


can we make this resizable?

i've found out we need CSS resize: vertical but where is the css file? (yeah I need to get into react :) just leaving this here for now though)

We can remove the 'rows' property, then it will autosize.

Or use 'rowsMax'

autosize depending on the content? sounds good. But I'd still allow manual resizing because why not let users work the way they want. (And I'd not set a maximum height. Let users do what they want)

basically, like this field here: grow when you enter more, but allow manual resizing. (They seem to stop autoresizing at about 80% of the screen height. That's sensible probably, but probably not worth the effort)

Now it just resizes to fit. That's enough I'd say.

Btw I think I found out how to use style. You need to pass a js object, and use the JS camelCase style names, like so:
style={{ backgroundColor: 'red' }}

Yes, that's how it works. However, the material components ignore the style property, because they use their own styling system.

pqdb-frontend/src/App.js

pqdb-frontend/src/components/views.js

- Autofocus for TextField - History push instead of replace (also fixes double query execution) - Show indicator when query is being executed - Show 'No results' when there are none - Increases rowsMax for TextField

- Now only visible on Custom SQL Query view - New magnifying glass

dingens · 2020-06-16T15:29:44Z

lgtm! I didn't look at the source code though, I just played around with it :)

Now I just miss

(copied from slack) irgendwie bin ich nicht damit zufrieden dass man für die hauptoperation (query) dieses kleine versteckte menü anklicken muss. das ist irgendwie das gegenteil von guter ux. finden wir da nicht was besseres? vllt doch tabs und wir bemühen uns uns damit extrem kurz zu fassen (ggf zusatzinfo per mouseover) damit es immer in eine zeile passt?

(but if you don't like to change it, let's keep it that way and I'll make a suggestion some day. Now that I've learned more about react I think I can do this :) )

and

Also, I'd like to rename pqdb-frontend to just frontend (or web-frontend, maybe)

benj-zen · 2020-06-17T12:11:13Z

I would address your first comment in another PR, second is done.

benj-zen added 2 commits June 2, 2020 11:53

[pqdb-frontend] Makes table sortable

8bb5de8

[pqdb-frontend] Various enhancements

4a8b96e

- Fixes layout for large tables - Adds Welcome page - Adds routing and URL params - Adds dark/light mode toggle - Refactors framework for adding new views

benj-zen force-pushed the frontend_enhancements branch from 246ebc6 to 4a8b96e Compare June 3, 2020 10:40

benj-zen added 2 commits June 4, 2020 10:38

[pqdb-frontend] Update favicon

09331b9

[pqdb-frontend] Adds option to export data as csv or json

8d5b8b0

benj-zen marked this pull request as ready for review June 4, 2020 08:47

benj-zen requested a review from a team as a code owner June 4, 2020 08:47

benj-zen added 3 commits June 4, 2020 10:58

[pqdb-frontend] Fixes some warnings

b7bb413

[pqdb-frontend] Updates dependencies

202798f

Merge branch 'master' into frontend_enhancements

f40af96

dingens reviewed Jun 8, 2020

View reviewed changes

benj-zen added 3 commits June 15, 2020 11:19

[pqdb-frontend] Implements some comments on #80

ce91153

- Autofocus for TextField - History push instead of replace (also fixes double query execution) - Show indicator when query is being executed - Show 'No results' when there are none - Increases rowsMax for TextField

[pqdb-frontend] New design for database diagram

557117f

- Now only visible on Custom SQL Query view - New magnifying glass

[pqdb-frontend] package updates

9cd495e

benj-zen requested a review from dingens June 15, 2020 10:15

Renames frontend folder

1caccc6

benj-zen force-pushed the frontend_enhancements branch from 98671cc to 1caccc6 Compare June 17, 2020 12:09

Merge branch 'master' into frontend_enhancements

a1a9731

dingens approved these changes Jun 17, 2020

View reviewed changes

dingens merged commit 3e6114b into master Jun 17, 2020

taudor deleted the frontend_enhancements branch June 26, 2020 09:21

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Frontend enhancements #80

Frontend enhancements #80

benj-zen commented Jun 3, 2020 •

edited

Loading

dingens left a comment

dingens Jun 8, 2020

benj-zen Jun 10, 2020

benj-zen Jun 10, 2020

dingens Jun 10, 2020

dingens Jun 16, 2020

dingens Jun 8, 2020

dingens Jun 8, 2020

benj-zen Jun 10, 2020

benj-zen Jun 10, 2020

dingens Jun 10, 2020

dingens Jun 16, 2020

benj-zen Jun 17, 2020

dingens commented Jun 16, 2020

benj-zen commented Jun 17, 2020

Frontend enhancements #80

Frontend enhancements #80

Conversation

benj-zen commented Jun 3, 2020 • edited Loading

dingens left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dingens commented Jun 16, 2020

benj-zen commented Jun 17, 2020

benj-zen commented Jun 3, 2020 •

edited

Loading