Skip to content

Commit

Permalink
Canavandl/collapse navbar (#2223)
Browse files Browse the repository at this point in the history
* Move CSS into css file and add collapsing navbar

* Move navbar JS into js file

* Add bokeh theme to make status doc backgrounds clear

* Move active page highlight logic to JS

* Move status css to standalone file

* use self-closing tag

* [skip ci] add css to MANIFEST.in

* add bokeh theme to all plot
  • Loading branch information
canavandl authored and mrocklin committed Aug 30, 2018
1 parent ab83d85 commit 6f583f4
Show file tree
Hide file tree
Showing 10 changed files with 235 additions and 177 deletions.
1 change: 1 addition & 0 deletions MANIFEST.in
Expand Up @@ -2,6 +2,7 @@ recursive-include distributed *.py
recursive-include distributed *.js
recursive-include distributed *.coffee
recursive-include distributed *.html
recursive-include distributed *.css
recursive-include distributed *.svg
recursive-include distributed *.yaml
recursive-include docs *.rst
Expand Down
30 changes: 20 additions & 10 deletions distributed/bokeh/scheduler.py
Expand Up @@ -18,6 +18,7 @@
from bokeh.models.widgets import DataTable, TableColumn
from bokeh.plotting import figure
from bokeh.palettes import Viridis11
from bokeh.themes import Theme
from bokeh.transform import factor_cmap
from bokeh.io import curdoc
from toolz import pipe, merge
Expand Down Expand Up @@ -54,6 +55,7 @@

template_variables = {'pages': ['status', 'workers', 'tasks', 'system', 'profile', 'graph']}

BOKEH_THEME = Theme(os.path.join(os.path.dirname(__file__), 'theme.yaml'))

nan = float('nan')

Expand Down Expand Up @@ -1057,8 +1059,8 @@ def systemmonitor_doc(scheduler, extra, doc):

doc.add_root(column(sysmon.root, sizing_mode='scale_width'))
doc.template = env.get_template('simple.html')
doc.template_variables['active_page'] = 'system'
doc.template_variables.update(extra)
doc.theme = BOKEH_THEME


def stealing_doc(scheduler, extra, doc):
Expand All @@ -1077,8 +1079,8 @@ def stealing_doc(scheduler, extra, doc):
sizing_mode='scale_width'))

doc.template = env.get_template('simple.html')
doc.template_variables['active_page'] = 'stealing'
doc.template_variables.update(extra)
doc.theme = BOKEH_THEME


def events_doc(scheduler, extra, doc):
Expand All @@ -1089,8 +1091,8 @@ def events_doc(scheduler, extra, doc):
doc.title = "Dask: Scheduler Events"
doc.add_root(column(events.root, sizing_mode='scale_width'))
doc.template = env.get_template('simple.html')
doc.template_variables['active_page'] = 'events'
doc.template_variables.update(extra)
doc.theme = BOKEH_THEME


def workers_doc(scheduler, extra, doc):
Expand All @@ -1101,8 +1103,8 @@ def workers_doc(scheduler, extra, doc):
doc.title = "Dask: Workers"
doc.add_root(table.root)
doc.template = env.get_template('simple.html')
doc.template_variables['active_page'] = 'workers'
doc.template_variables.update(extra)
doc.theme = BOKEH_THEME


def tasks_doc(scheduler, extra, doc):
Expand All @@ -1114,8 +1116,8 @@ def tasks_doc(scheduler, extra, doc):
doc.title = "Dask: Task Stream"
doc.add_root(ts.root)
doc.template = env.get_template('simple.html')
doc.template_variables['active_page'] = 'tasks'
doc.template_variables.update(extra)
doc.theme = BOKEH_THEME


def graph_doc(scheduler, extra, doc):
Expand All @@ -1127,8 +1129,8 @@ def graph_doc(scheduler, extra, doc):
doc.add_root(graph.root)

doc.template = env.get_template('simple.html')
doc.template_variables['active_page'] = 'graph'
doc.template_variables.update(extra)
doc.theme = BOKEH_THEME


def status_doc(scheduler, extra, doc):
Expand Down Expand Up @@ -1164,10 +1166,10 @@ def status_doc(scheduler, extra, doc):
doc.title = "Dask: Status"
doc.add_root(task_progress.root)
doc.add_root(task_stream.root)

doc.theme = BOKEH_THEME
doc.template = env.get_template('status.html')
doc.template_variables['active_page'] = 'status'
doc.template_variables.update(extra)
doc.theme = BOKEH_THEME


def individual_task_stream_doc(scheduler, extra, doc):
Expand All @@ -1176,27 +1178,31 @@ def individual_task_stream_doc(scheduler, extra, doc):
task_stream.update()
doc.add_periodic_callback(task_stream.update, 100)
doc.add_root(task_stream.root)
doc.theme = BOKEH_THEME


def individual_nbytes_doc(scheduler, extra, doc):
current_load = CurrentLoad(scheduler, sizing_mode='stretch_both')
current_load.update()
doc.add_periodic_callback(current_load.update, 100)
doc.add_root(current_load.nbytes_figure)
doc.theme = BOKEH_THEME


def individual_nprocessing_doc(scheduler, extra, doc):
current_load = CurrentLoad(scheduler, sizing_mode='stretch_both')
current_load.update()
doc.add_periodic_callback(current_load.update, 100)
doc.add_root(current_load.processing_figure)
doc.theme = BOKEH_THEME


def individual_progress_doc(scheduler, extra, doc):
task_progress = TaskProgress(scheduler, height=160, sizing_mode='stretch_both')
task_progress.update()
doc.add_periodic_callback(task_progress.update, 100)
doc.add_root(task_progress.root)
doc.theme = BOKEH_THEME


def individual_graph_doc(scheduler, extra, doc):
Expand All @@ -1205,20 +1211,23 @@ def individual_graph_doc(scheduler, extra, doc):
graph.update()
doc.add_periodic_callback(graph.update, 200)
doc.add_root(graph.root)
doc.theme = BOKEH_THEME


def individual_profile_doc(scheduler, extra, doc):
with log_errors():
prof = ProfileTimePlot(scheduler, sizing_mode='scale_width', doc=doc)
doc.add_root(prof.root)
prof.trigger_update()
doc.theme = BOKEH_THEME


def individual_profile_server_doc(scheduler, extra, doc):
with log_errors():
prof = ProfileServer(scheduler, sizing_mode='scale_width', doc=doc)
doc.add_root(prof.root)
prof.trigger_update()
doc.theme = BOKEH_THEME


def individual_workers_doc(scheduler, extra, doc):
Expand All @@ -1227,6 +1236,7 @@ def individual_workers_doc(scheduler, extra, doc):
table.update()
doc.add_periodic_callback(table.update, 500)
doc.add_root(table.root)
doc.theme = BOKEH_THEME


def profile_doc(scheduler, extra, doc):
Expand All @@ -1235,8 +1245,8 @@ def profile_doc(scheduler, extra, doc):
prof = ProfileTimePlot(scheduler, sizing_mode='scale_width', doc=doc)
doc.add_root(prof.root)
doc.template = env.get_template('simple.html')
doc.template_variables['active_page'] = 'profile'
doc.template_variables.update(extra)
doc.theme = BOKEH_THEME

prof.trigger_update()

Expand All @@ -1247,8 +1257,8 @@ def profile_server_doc(scheduler, extra, doc):
prof = ProfileServer(scheduler, sizing_mode='scale_width', doc=doc)
doc.add_root(prof.root)
doc.template = env.get_template('simple.html')
# doc.template_variables['active_page'] = 'profile'
doc.template_variables.update(extra)
doc.theme = BOKEH_THEME

prof.trigger_update()

Expand Down
108 changes: 108 additions & 0 deletions distributed/bokeh/static/css/base.css
@@ -0,0 +1,108 @@
html {
width: 100%;
height: 100%;
background: #FAFAFA;
}

body {
height: 100%;
width: 100%;
margin: 0;
box-sizing: border-box;
font-family: Helvetica, Arial, sans-serif;
padding: 0px 10px;
padding-top: 3rem;
padding-bottom: 1rem;
}

.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1;
}

.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #EEE;
}

.navbar li {
float: left;
font-size: 17px;
transition: .3s background-color;
}

.navbar li.active {
background-color: rgba(234, 170, 109, 0.7);
}

.navbar li a {
display: block;
color: black;
padding: 11px 16px;
text-decoration: none;
}

.navbar li:hover {
background-color: #eaaa6d;
}

#dask-logo img {
height: 28px;
padding: 5px 15px;
}

#dask-logo a {
padding: 0px;
}

#navbar-toggle-icon {
float: right;
}

#navbar-toggle-icon a {
display: none;
}

#navbar-toggle-icon img {
height: 22px;
}

@media screen and (max-width: 650px) {
.navbar li:not(#dask-logo):not(#navbar-toggle-icon) a {
display: none;
}
#navbar-toggle-icon a {
display: block;
}
}

@media screen and (max-width: 650px) {
.navbar.responsive li:not(#navbar-toggle-icon) {
float: none;
}
.navbar.responsive li:not(#dask-logo):not(#navbar-toggle-icon) a {
display: block;
text-align: left;
}
.navbar.responsive #navbar-toggle-icon a {
position: absolute;
right: 0;
top: 0;
}
}

.bk-root .bk-toolbar-box .bk-toolbar-right {
top: 4px;
right: 4px;
}

.content {
width: 100%;
height: 100%;
}
50 changes: 50 additions & 0 deletions distributed/bokeh/static/css/status.css
@@ -0,0 +1,50 @@
#status-fluid {
display: grid;
height: 100%;
}

@media (min-width: 0px) {
#status-fluid {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 3fr 1fr;
}
#status-history {
grid-column: 1;
grid-row: 1;
}
#status-processing {
grid-column: 2;
grid-row: 1;
}
#status-tasks {
grid-column: 1 / span 2;
grid-row: 2;
}
#status-progress {
grid-column: 1 / span 2;
grid-row: 3;
}
}

@media (min-width: 992px) {
#status-fluid {
grid-template-columns: 1fr 3fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
}
#status-history {
grid-column: 1;
grid-row: 1 / span 3;
}
#status-processing {
grid-column: 1;
grid-row: 4 / span 3;
}
#status-tasks {
grid-column: 2;
grid-row: 1 / span 4;
}
#status-progress {
grid-column: 2;
grid-row: 5 / span 2;
}
}
1 change: 1 addition & 0 deletions distributed/bokeh/static/images/fa-bars.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 6f583f4

Please sign in to comment.