Skip to content

Commit

Permalink
Adjust UI code to be properly responsive (#530)
Browse files Browse the repository at this point in the history 
* Remove HBase access outside the API, so that the portal may work without the database, relying on remote API entry points for that

* Minor fixes for the last commit

* Auxiliary code for Dash callback debugging added.

It is activated if DASH_TELEMETRY is set in the environment.

* Auto-close the menu drawer on changing the page URL

* De-hardcode (some) CSS, especially the backgrounds, into assets/theme.css

* Fix daily statistics plots broken in previous commits

* Make small wrapper function for adding loading status indicator for an element

* Proper responsive design for statistics page

* Make index page a bit more responsible

* Optimize the input field behaviour, and clear the results when changing input type

* Improve index page a bit more

* Generate qrcode asynchronously to speed up initial rendering of summary page

* Initial attempt at making summary page responsive

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

* Generalize adjusting the background transparency on individual pages

* Improve table rendering on index page

* Improve index page and quickview rendering on smaller screens

* Disable SSO and Tracklet tabs when they are irrelevant. Probably we should hide them completely then?..

* Allow toggling visibility of lightcurve upper limits separately from proper measurements

* Linked zooming in cutouts. Cutouts are now shown in blue palette, and are properly normalized

* Optimize layout on mid-sized screens, and remove some old code that is now unused

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

* Move some info to the popover activated by clicking a help icon at a lower right part of the card

* Auomatic placement for the help popover

* Improve the table display in last alert content.

* Now clicking on lightcurve points also changes the alert shown in the last alert content tab

* Let alert table parameters be persistent while clicking on different lightcurve points

* Show the information on negative or low quality data point in the hover. Also, invert the difference cutouts of negative detections to make them more visible

* Adjust neighborhood tab, and add tooltips for external links to better show where it goes

* Make download tab actually download things, in either JSON or VOTable. 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

* Fix displaying (negative) cutouts in the carousel

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

* Modify tab titles for alert cutouts/content to adjust to current features.

* Show more results in a wider table on results page

* Fix z-index of the header interfering with the first column of the results table
  • Loading branch information
@karpov-sv
karpov-sv authored Dec 7, 2023
1 parent 4439b57 commit f6fcc65
Show file tree
Hide file tree
Showing 16 changed files with 1,275 additions and 1,299 deletions.
10 changes: 9 additions & 1 deletion app.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@

# import jpype

import os
import yaml
import diskcache

Expand All @@ -40,7 +41,14 @@
'//cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js',
]

app = dash.Dash(
# Enable verbose logging on callbacks, if requested
if 'DASH_TELEMETRY' in os.environ:
from telemetry import DashWithTelemetry
factory = DashWithTelemetry
else:
factory = dash.Dash

app = factory(
__name__,
external_stylesheets=external_stylesheets,
external_scripts=external_scripts,
Expand Down
278 changes: 122 additions & 156 deletions apps/api/api.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,183 +56,149 @@

api_bp = Blueprint('', __name__)

def layout(is_mobile):
if is_mobile:
width = '95%'
else:
width = '80%'
layout_ = html.Div(
# Enable CORS for this blueprint only
@api_bp.after_request
def after_request(response):
response.headers.add('Access-Control-Allow-Origin', '*')
response.headers.add('Access-Control-Allow-Headers', 'Content-Type,Authorization')
response.headers.add('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS')
return response

def layout():
layout_ = dbc.Container(
[
html.Br(),
html.Br(),
html.Br(),
dbc.Container(
dbc.Row(
[
dbc.Card(
dbc.CardBody(
dcc.Markdown(api_doc_summary)
)
),
],
className="mb-4"
),
dbc.Tabs(
[
dbc.Row(
dbc.Tab(
[
dbc.Card(
dbc.CardBody(
dcc.Markdown(api_doc_summary)
), style={
'backgroundColor': 'rgb(248, 248, 248, .7)'
}
dcc.Markdown(api_doc_object)
)
),
]
], label="Retrieve object data", label_style = {"color": "#000"}
),
html.Br(),
dbc.Tabs(
dbc.Tab(
[
dbc.Tab(
[
dbc.Card(
dbc.CardBody(
dcc.Markdown(api_doc_object)
), style={
'backgroundColor': 'rgb(248, 248, 248, .7)'
}
),
], label="Retrieve object data", label_style = {"color": "#000"}
),
dbc.Tab(
[
dbc.Card(
dbc.CardBody(
dcc.Markdown(api_doc_explorer)
), style={
'backgroundColor': 'rgb(248, 248, 248, .7)'
}
),
], label="Query the database", label_style = {"color": "#000"}
dbc.Card(
dbc.CardBody(
dcc.Markdown(api_doc_explorer)
)
),
dbc.Tab(
[
dbc.Card(
dbc.CardBody(
dcc.Markdown(api_doc_latests)
), style={
'backgroundColor': 'rgb(248, 248, 248, .7)'
}
),
], label="Get latest alerts", label_style = {"color": "#000"}
], label="Query the database", label_style = {"color": "#000"}
),
dbc.Tab(
[
dbc.Card(
dbc.CardBody(
dcc.Markdown(api_doc_latests)
)
),
dbc.Tab(
[
dbc.Card(
dbc.CardBody(
dcc.Markdown(api_doc_sso)
), style={
'backgroundColor': 'rgb(248, 248, 248, .7)'
}
),
], label="Solar System objects from MPC", label_style = {"color": "#000"}
], label="Get latest alerts", label_style = {"color": "#000"}
),
dbc.Tab(
[
dbc.Card(
dbc.CardBody(
dcc.Markdown(api_doc_sso)
)
),
dbc.Tab(
[
dbc.Card(
dbc.CardBody(
dcc.Markdown(api_doc_ssocand)
), style={
'backgroundColor': 'rgb(248, 248, 248, .7)'
}
),
], label="Candidate Solar System objects", label_style = {"color": "#000"}
], label="Solar System objects from MPC", label_style = {"color": "#000"}
),
dbc.Tab(
[
dbc.Card(
dbc.CardBody(
dcc.Markdown(api_doc_ssocand)
)
),
dbc.Tab(
[
dbc.Card(
dbc.CardBody(
dcc.Markdown(api_doc_ssoft)
), style={
'backgroundColor': 'rgb(248, 248, 248, .7)'
}
),
], label="Solar System object parameters table", label_style = {"color": "#000"}
], label="Candidate Solar System objects", label_style = {"color": "#000"}
),
dbc.Tab(
[
dbc.Card(
dbc.CardBody(
dcc.Markdown(api_doc_ssoft)
)
),
dbc.Tab(
[
dbc.Card(
dbc.CardBody(
dcc.Markdown(api_doc_tracklets)
), style={
'backgroundColor': 'rgb(248, 248, 248, .7)'
}
),
], label="Get Tracklet Objects", label_style = {"color": "#000"}
], label="Solar System object parameters table", label_style = {"color": "#000"}
),
dbc.Tab(
[
dbc.Card(
dbc.CardBody(
dcc.Markdown(api_doc_tracklets)
)
),
dbc.Tab(
[
dbc.Card(
dbc.CardBody(
dcc.Markdown(api_doc_cutout)
), style={
'backgroundColor': 'rgb(248, 248, 248, .7)'
}
),
], label="Get Image data", label_style = {"color": "#000"}
], label="Get Tracklet Objects", label_style = {"color": "#000"}
),
dbc.Tab(
[
dbc.Card(
dbc.CardBody(
dcc.Markdown(api_doc_cutout)
)
),
dbc.Tab(
[
dbc.Card(
dbc.CardBody(
dcc.Markdown(api_doc_xmatch)
), style={
'backgroundColor': 'rgb(248, 248, 248, .7)'
}
),
], label="Xmatch", label_style = {"color": "#000"}
], label="Get Image data", label_style = {"color": "#000"}
),
dbc.Tab(
[
dbc.Card(
dbc.CardBody(
dcc.Markdown(api_doc_xmatch)
)
),
dbc.Tab(
[
dbc.Card(
dbc.CardBody(
dcc.Markdown(api_doc_bayestar)
), style={
'backgroundColor': 'rgb(248, 248, 248, .7)'
}
),
], label="Gravitational Waves", label_style = {"color": "#000"}
], label="Xmatch", label_style = {"color": "#000"}
),
dbc.Tab(
[
dbc.Card(
dbc.CardBody(
dcc.Markdown(api_doc_bayestar)
)
),
dbc.Tab(
[
dbc.Card(
dbc.CardBody(
dcc.Markdown(api_doc_stats)
), style={
'backgroundColor': 'rgb(248, 248, 248, .7)'
}
),
], label="Statistics", label_style = {"color": "#000"}
], label="Gravitational Waves", label_style = {"color": "#000"}
),
dbc.Tab(
[
dbc.Card(
dbc.CardBody(
dcc.Markdown(api_doc_stats)
)
),
dbc.Tab(
[
dbc.Card(
dbc.CardBody(
dcc.Markdown(api_doc_anomaly)
), style={
'backgroundColor': 'rgb(248, 248, 248, .7)'
}
),
], label="Anomaly detection", label_style = {"color": "#000"}
], label="Statistics", label_style = {"color": "#000"}
),
dbc.Tab(
[
dbc.Card(
dbc.CardBody(
dcc.Markdown(api_doc_anomaly)
)
),
dbc.Tab(
[
dbc.Card(
dbc.CardBody(
dcc.Markdown(api_doc_random)
), style={
'backgroundColor': 'rgb(248, 248, 248, .7)'
}
),
], label="Random objects", label_style = {"color": "#000"}
], label="Anomaly detection", label_style = {"color": "#000"}
),
dbc.Tab(
[
dbc.Card(
dbc.CardBody(
dcc.Markdown(api_doc_random)
)
),
]
)
], className="mb-8", fluid=True, style={'width': width}
], label="Random objects", label_style = {"color": "#000"}
),
]
)
], className='home', style={
'background-image': 'linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0.3)), url(/assets/background.png)',
'background-size': 'cover'
}
], className='api mb-4 mt-4', fluid='lg'
)
return layout_

Expand Down
Loading

0 comments on commit f6fcc65

Please sign in to comment.