diff --git a/src/bin/wfd/main.rs b/src/bin/wfd/main.rs
index ac8f531..050e72a 100644
--- a/src/bin/wfd/main.rs
+++ b/src/bin/wfd/main.rs
@@ -197,6 +197,60 @@ async fn get_detailed_timeline(
     }
 }
 
+/// Retrieve all data about a segment, including:
+///     What resources it relies on
+///     Last attempt (if any)
+async fn get_segment_details(
+    span: web::Json<Interval>,
+    state: web::Data<AppState>,
+) -> impl Responder {
+    let interval = span.into_inner();
+
+    let (response, rx) = oneshot::channel();
+    state
+        .runner_tx
+        .send(RunnerMessage::GetResourceStateDetails { interval, response })
+        .unwrap();
+
+    match rx.await {
+        Ok(actions) => {
+            let mut timeline = Vec::new();
+            info!(
+                "Querying for actions over {}, got {} responses.",
+                interval,
+                actions.len()
+            );
+
+            for (resource, tasks) in actions {
+                let mut group = TimelineGroup {
+                    group: resource.clone(),
+                    data: Vec::new(),
+                };
+                for (task_name, intervals) in tasks.into_iter() {
+                    let data = intervals
+                        .into_iter()
+                        .map(|a| TimelineInterval {
+                            time_range: [a.interval.start, a.interval.end],
+                            val: a.state,
+                        })
+                        .collect();
+
+                    group.data.push(TimelineLabel {
+                        label: task_name,
+                        data,
+                    });
+                }
+                timeline.push(group);
+            }
+
+            HttpResponse::Ok().json(timeline)
+        }
+        Err(error) => HttpResponse::BadRequest().json(SimpleError {
+            error: format!("{:?}", error),
+        }),
+    }
+}
+
 /*
 async fn stop_run(path: web::Path<RunID>, state: web::Data<AppState>) -> impl Responder {
     let run_id = path.into_inner();
diff --git a/webui/src/components/SegmentDetails.vue b/webui/src/components/SegmentDetails.vue
index fa94d3a..1e050dd 100644
--- a/webui/src/components/SegmentDetails.vue
+++ b/webui/src/components/SegmentDetails.vue
@@ -12,6 +12,7 @@ export default {
           <th>Resource</th>
           <th>Task Name</th>
           <th>Interval</th>
+          <th>State</th>
         </tr>
       </thead>
       <tbody>
@@ -19,6 +20,7 @@ export default {
           <td>{{activeSegment.group}}</td>
           <td>{{activeSegment.label}}</td>
           <td>{{activeSegment.timeRange}}</td>
+          <td>{{activeSegment.val}}</td>
         </tr>
       </tbody>
     </table>
diff --git a/webui/src/components/Timeline.vue b/webui/src/components/Timeline.vue
index c4800d8..a6106c5 100644
--- a/webui/src/components/Timeline.vue
+++ b/webui/src/components/Timeline.vue
@@ -1,12 +1,28 @@
 <script>
 // import TimelinesChart from 'timelines-chart';
 
+function lexsort(a, b, keyfunc) {
+  const ka = keyfunc(a);
+  const kb = keyfunc(b);
+
+
+  let ret = 0;
+  if (ka < kb) { ret = -1; }
+  if (ka > kb) { ret =  1; }
+  return ret;
+}
+
+const MIN_TIME="1970-01-01T00:00:00Z";
+const MAX_TIME="2099-01-01T00:00:00Z";
+
 export default {
   props: ['waterfallURL', 'refreshSeconds'],
   data() {
     return {
       chart: null,
       data: {},
+      start: MIN_TIME,
+      end: MAX_TIME,
     }
   },
  
@@ -26,7 +42,7 @@ export default {
         headers: {
           'Content-Type': 'application/json'
         },
-        body: '{ "start": "2021-09-01T00:00:00Z", "end": "2022-10-01T00:00:00Z" }'
+        body: `{ "start": "${this.start}", "end": "${this.end}" }`
       })
         .then((response) =>  {
           if (!response.ok) {
@@ -36,12 +52,15 @@ export default {
         })
         .then((payload) => {
           payload.map((group) => {
+            group.data.sort((a, b) => lexsort(a, b, (v) => v.label));
             Object.values(group.data).map((label) => {
               label.data.map((interval) => {
                 interval.timeRange = interval.timeRange.map((t) => new Date(t));
               })
             })
           });
+          payload.sort((a, b) => lexsort(a, b, (v) => v.group));
+
           this.data = payload;
           this.chart.data(payload);
         })
@@ -54,6 +73,17 @@ export default {
         this.update();
       }, this.refreshSeconds * 1000);
     },
+
+      setVisibleRange(dateRange) {
+        if (dateRange === null) {
+          this.start = MIN_TIME;
+          this.end = MAX_TIME;
+        } else {
+          this.start = dateRange[0].toISOString();
+          this.end = dateRange[1].toISOString();
+        }
+        this.fetchTimeline();
+      }
   },
 
   mounted() {
@@ -62,6 +92,7 @@ export default {
             .zScaleLabel('State')
             .zQualitative(true)
             .useUtc(false)
+            .onZoom((dateRange, _) => this.setVisibleRange(dateRange))
             .onSegmentClick((segment) => this.$emit('updateActiveSegment', segment) );
     this.update();
   },