Adjust UI code to be properly responsive #530

karpov-sv · 2023-11-30T10:47:03Z

Some links that may be useful here:
https://getbootstrap.com/docs/5.1/layout/breakpoints/
https://getbootstrap.com/docs/5.1/utilities/display/

…out the database, relying on remote API entry points for that

It is activated if DASH_TELEMETRY is set in the environment.

….css

…n element

…ng input type

…ry page

JulienPeloton

Thanks @karpov-sv -- this is a super interesting PR! As it touches many aspects of the code, I will break into sections. Also when it comes to the layout, I test on several screen sizes using the responsive mode of Firefox:

Name	screen size	resolution	DPR	Comment
Laptop 1	13''	1920 x 1080	1	e.g. HP elitebook from 2020 (my default)
Laptop 2	14''	1280 x 800	2	e.g. macbook pro from 2020
Desktop	24''	1920 x 1080	1	e.g. DELL P2417H (my default)
Smartphone	6''	360 x 800	4	e.g. Galaxy S20

Let's start with the main page :-)

Main page (index.py)

search bar & logo

I think would even be more disruptive in the look change of the main page, and keep reducing the logo to 20% and center the logo+bar (in the case of no table shown) in the page. In the end, that would feel more like popular search engine main page (small logo on top of the search bar, all centered in the page). What do you think?

General layout for table

I like the fact that buttons are on top, and visible by default:

I would add a space between these buttons, and the header and the table though, to avoid crowded zone. What do you think?

However, the basic look for the result table looks to me too 'raw' and too small for large resolution devices, such as laptop 1 and desktop screen (this is why I've added transparency before, and make it bigger):

Any strong opinion to revert back to the previous look? Or proposal to improve the current look for all platforms?

Skymap

There used to be transparency around the map -- can we keep it?

Preview

The new look is too "raw" from my opinion:

Maybe a dark background on the simple_card object (to contrast more with the underlying page), and a bit of transparency on the card elements?

Also, I see that you change the cutout colormap from Greys_r to Hot. What was the motivation?

…hould hide them completely then?..

…proper measurements

… are properly normalized

…s now unused

…lower right part of the card

… last alert content tab

…lightcurve points

…er. Also, invert the difference cutouts of negative detections to make them more visible

…r show where it goes

…. Uses js-based POST as direct GET tends to just open plainly in the browser, until we change its Content-Disposition.

apps/plotting.py

JulienPeloton · 2023-12-04T07:41:48Z

apps/cards.py

+                                        html.Div(APIURL, id='download_apiurl', className='d-none'),
+                                    ], position="center"
+                                ),
+                                help_popover(


Instead of having the helper here, can we add a third button labeled for example 'Code snippet' (propose something better if you find!) that actually opens the popover?

Committed a fix that makes this a button. For readability, saving space on smaller screens, and to better distinguish from download formats, it has just a help icon, with no text.

JulienPeloton · 2023-12-04T08:42:29Z

Summary of this work -- @karpov-sv do I miss something?

Layout improvement or change

Uniformisation of the code for all screen sizes (incl. mobile)
Improve layout management by using more CSS
Improve loading display
Improve the display of the last alert content dropdown by scrolling instead of the changing page.
Improve external links display
Improve cutouts display (incl. inverting the difference cutout for negative detection) & zoom, and set the color map to Blues
Disable irrelevant tabs in the object page (e.g. disable Solar System when there is no match with MPC)

New features

Auto-close the drawer when clicking on a link
Move the light-curve helper into a popover
Allow toggling visibility of lightcurve upper limit independently of the rest
Properly update the content of the last alert content dropdown when clicking on a measurement in the lightcurve
Enable the direct download of object data with buttons (JSON & VOTable)
Display the info on whether a lightcurve point is negative or low quality in the popup
Display the alert content for the clicked data point on the right accordion, like the cutout.

Code improvement

Generate QR code asynchronously to speed-up the page loading
Remove HBase access outside the API part
Enable Dash callback debugging

karpov-sv · 2023-12-04T12:59:20Z

Summary of this work -- @karpov-sv do I miss something?

There are also newly introduced features for displaying the info on whether the point is negative or low quality in the popup, and for inverting the difference cutout for negative detection. Also, now it displays the alert content for the clicked data point, like the cutout.
Btw - maybe we should now change the titles of these two tabs - from "Last alert (cutout|content)" to just "Alert ..." ?

JulienPeloton · 2023-12-04T20:28:15Z

Btw - maybe we should now change the titles of these two tabs - from "Last alert (cutout|content)" to just "Alert ..." ?

Agree!

…ures.

karpov-sv · 2023-12-04T22:09:46Z

Btw - maybe we should now change the titles of these two tabs - from "Last alert (cutout|content)" to just "Alert ..." ?

Agree!

Committed!

…sults table

karpov-sv added 16 commits November 26, 2023 14:55

Remove HBase access outside the API, so that the portal may work with…

070950f

…out the database, relying on remote API entry points for that

Minor fixes for the last commit

73edf98

Auxiliary code for Dash callback debugging added.

82411f2

It is activated if DASH_TELEMETRY is set in the environment.

Auto-close the menu drawer on changing the page URL

fc437b9

De-hardcode (some) CSS, especially the backgrounds, into assets/theme…

03786f8

….css

Fix daily statistics plots broken in previous commits

3d0a998

Merge branch 'local' into ui

2710304

Merge branch 'master' into ui

000efeb

Make small wrapper function for adding loading status indicator for a…

fa71753

…n element

Proper responsive design for statistics page

afb7056

Make index page a bit more responsible

53a20bb

Optimize the input field behaviour, and clear the results when changi…

26986f4

…ng input type

Improve index page a bit more

1d80978

Generate qrcode asynchronously to speed up initial rendering of summa…

24a6e61

…ry page

Initial attempt at making summary page responsive

cd99077

The whole thing is supposedly responsive now. Old mobile code removed.

254093e

JulienPeloton reviewed Dec 1, 2023

View reviewed changes

karpov-sv added 13 commits December 1, 2023 15:18

Generalize adjusting the background transparency on individual pages

5900361

Improve table rendering on index page

60cbbed

Improve index page and quickview rendering on smaller screens

bed854c

Disable SSO and Tracklet tabs when they are irrelevant. Probably we s…

bed2867

…hould hide them completely then?..

Allow toggling visibility of lightcurve upper limits separately from …

bb1d225

…proper measurements

Linked zooming in cutouts. Cutouts are now shown in blue palette, and…

8bc7cad

… are properly normalized

Optimize layout on mid-sized screens, and remove some old code that i…

c026e5d

…s now unused

Slightly more compact (and equal aspect) display of astrometric shifts

4856140

Move some info to the popover activated by clicking a help icon at a …

00c87b9

…lower right part of the card

Auomatic placement for the help popover

3001dd3

Improve the table display in last alert content.

941ec58

Now clicking on lightcurve points also changes the alert shown in the…

0afae1b

… last alert content tab

Let alert table parameters be persistent while clicking on different …

985ef27

…lightcurve points

karpov-sv added 4 commits December 3, 2023 02:36

Show the information on negative or low quality data point in the hov…

3ef981a

…er. Also, invert the difference cutouts of negative detections to make them more visible

Adjust neighborhood tab, and add tooltips for external links to bette…

5f9483e

…r show where it goes

Make download tab actually download things, in either JSON or VOTable…

142aa5c

…. Uses js-based POST as direct GET tends to just open plainly in the browser, until we change its Content-Disposition.

Slightly unify the look of rightmost panels

4210e85

JulienPeloton reviewed Dec 4, 2023

View reviewed changes

apps/plotting.py Show resolved Hide resolved

JulienPeloton reviewed Dec 4, 2023

View reviewed changes

karpov-sv added 2 commits December 4, 2023 11:53

Fix displaying (negative) cutouts in the carousel

ad122b2

Help button in download data tab is now, well, a button

412268a

Modify tab titles for alert cutouts/content to adjust to current feat…

ba5cafa

…ures.

karpov-sv added 2 commits December 6, 2023 21:04

Show more results in a wider table on results page

d9c1611

Fix z-index of the header interfering with the first column of the re…

bc3c33d

…sults table

JulienPeloton added enhancement New feature or request layout cutouts hbase code quality labels Dec 7, 2023

JulienPeloton added this to the 2.4 milestone Dec 7, 2023

JulienPeloton merged commit f6fcc65 into astrolabsoftware:master Dec 7, 2023
1 check failed

This was referenced Dec 7, 2023

Close side bar when clicking on a link #460

Closed

captions in the stamps #228

Closed

karpov-sv deleted the ui branch January 22, 2024 23:13

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adjust UI code to be properly responsive #530

Adjust UI code to be properly responsive #530

karpov-sv commented Nov 30, 2023

JulienPeloton left a comment

JulienPeloton Dec 4, 2023

karpov-sv Dec 4, 2023

JulienPeloton commented Dec 4, 2023 •

edited

Loading

karpov-sv commented Dec 4, 2023

JulienPeloton commented Dec 4, 2023

karpov-sv commented Dec 4, 2023

Adjust UI code to be properly responsive #530

Adjust UI code to be properly responsive #530

Conversation

karpov-sv commented Nov 30, 2023

JulienPeloton left a comment

Choose a reason for hiding this comment

Main page (index.py)

search bar & logo

General layout for table

Skymap

Preview

JulienPeloton Dec 4, 2023

Choose a reason for hiding this comment

karpov-sv Dec 4, 2023

Choose a reason for hiding this comment

JulienPeloton commented Dec 4, 2023 • edited Loading

Layout improvement or change

New features

Code improvement

karpov-sv commented Dec 4, 2023

JulienPeloton commented Dec 4, 2023

karpov-sv commented Dec 4, 2023

JulienPeloton commented Dec 4, 2023 •

edited

Loading