From 4db45c9c547dac0a8c54dd493d62e6f667a06284 Mon Sep 17 00:00:00 2001
From: Wapaul1 <william11235@gmail.com>
Date: Mon, 28 Aug 2017 14:43:34 -0700
Subject: [PATCH] Improved layout of controls for Web UI (#876)

* Improved layout of controls

* Added explicit labels and some comments

* Fix linting errors
---
 python/ray/experimental/ui.py | 39 ++++++++++++++++++++++++++---------
 1 file changed, 29 insertions(+), 10 deletions(-)

diff --git a/python/ray/experimental/ui.py b/python/ray/experimental/ui.py
index 6048ab6bc..715c48bbe 100644
--- a/python/ray/experimental/ui.py
+++ b/python/ray/experimental/ui.py
@@ -75,6 +75,12 @@ def get_sliders(update):
         description="Selection Options:"
     )
 
+    # Display box for layout.
+    total_time_box = widgets.VBox([start_box, end_box])
+
+    # This sets the CSS style display to hide the box.
+    total_time_box.layout.display = 'none'
+
     # Initially passed in to the update_wrapper function.
     INIT_EVENT = "INIT"
 
@@ -136,6 +142,10 @@ def get_sliders(update):
                         start_box.disabled = True
                         end_box.disabled = True
                         num_tasks_box.disabled = False
+                        total_time_box.layout.display = 'none'
+
+                        # Make CSS display go back to the default settings.
+                        num_tasks_box.layout.display = None
                         num_tasks_box.value = min(10000, num_tasks)
                         range_slider.value = (int(100 -
                                               (100. * num_tasks_box.value) /
@@ -144,6 +154,10 @@ def get_sliders(update):
                         start_box.disabled = False
                         end_box.disabled = False
                         num_tasks_box.disabled = True
+
+                        # Make CSS display go back to the default settings.
+                        total_time_box.layout.display = None
+                        num_tasks_box.layout.display = 'none'
                         range_slider.value = (int((start_box.value * 100.) /
                                               diff),
                                               int((end_box.value * 100.) /
@@ -226,7 +240,8 @@ def get_sliders(update):
     update_wrapper(INIT_EVENT)
 
     # Display sliders and search boxes
-    display(start_box, end_box, range_slider, num_tasks_box, breakdown_opt)
+    display(breakdown_opt, widgets.HBox([range_slider, total_time_box,
+                                         num_tasks_box]))
 
     # Return the sliders and text boxes
     return start_box, end_box, range_slider, breakdown_opt
@@ -341,24 +356,28 @@ def task_timeline():
     breakdown_opt = widgets.Dropdown(
         options=["Basic", "Task Breakdowns"],
         value="Basic",
-        description="View options:",
         disabled=False,
     )
     obj_dep = widgets.Checkbox(
         value=True,
-        description="Object dependencies",
-        disabled=False
+        disabled=False,
+        layout=widgets.Layout(width='20px')
     )
     task_dep = widgets.Checkbox(
         value=True,
-        description="Task submissions",
-        disabled=False
+        disabled=False,
+        layout=widgets.Layout(width='20px')
     )
-
+    # Labels to bypass width limitation for descriptions.
+    label_tasks = widgets.Label(value='Task submissions',
+                                layout=widgets.Layout(width='110px'))
+    label_objects = widgets.Label(value='Object dependencies',
+                                  layout=widgets.Layout(width='130px'))
+    label_options = widgets.Label(value='View options:',
+                                  layout=widgets.Layout(width='100px'))
     start_box, end_box, range_slider, time_opt = get_sliders(False)
-    display(task_dep)
-    display(obj_dep)
-    display(breakdown_opt)
+    display(widgets.HBox([label_tasks, task_dep, label_objects, obj_dep]))
+    display(widgets.HBox([label_options, breakdown_opt]))
     display(path_input)
 
     def handle_submit(sender):