Browse code

improve the style of the live_info widget, closes #250 (#251)

Based on the default style of the Jupyterlab table.

Bas Nijholt authored on 18/12/2019 17:36:23 • GitHub committed on 18/12/2019 17:36:23
Showing 1 changed files
... ...
@@ -228,14 +228,16 @@ def live_info(runner, *, update_interval=0.5):
228 228
 
229 229
     runner.ioloop.create_task(update())
230 230
 
231
-    display(
232
-        ipywidgets.HBox(
233
-            (status, cancel),
234
-            layout=ipywidgets.Layout(
235
-                border="solid 1px", width="200px", align_items="center"
236
-            ),
237
-        )
238
-    )
231
+    display(ipywidgets.VBox((status, cancel)))
232
+
233
+
234
+def _table_row(i, key, value):
235
+    """Style the rows of a table. Based on the default Jupyterlab table style."""
236
+    style_odd = "text-align: right; padding: 0.5em 0.5em; line-height: 1.0;"
237
+    style_even = style_odd + "background: var(--md-grey-100);"
238
+    template = '<tr><th style="{style}">{key}</th><th style="{style}">{value}</th></tr>'
239
+    style = style_odd if i % 2 == 1 else style_even
240
+    return template.format(style=style, key=key, value=value)
239 241
 
240 242
 
241 243
 def _info_html(runner):
... ...
@@ -260,11 +262,10 @@ def _info_html(runner):
260 262
     with suppress(Exception):
261 263
         info.append(("latest loss", f'{runner.learner._cache["loss"]:.3f}'))
262 264
 
263
-    template = '<dt class="ignore-css">{}</dt><dd>{}</dd>'
264
-    table = "\n".join(template.format(k, v) for k, v in info)
265
+    table = "\n".join(_table_row(i, k, v) for i, (k, v) in enumerate(info))
265 266
 
266 267
     return f"""
267
-        <dl>
268
+        <table>
268 269
         {table}
269
-        </dl>
270
+        </table>
270 271
     """