--- a/web/ascoltami/Light9AscoltamiTimeline.ts	Sat Jun 01 12:58:25 2024 -0700
+++ b/web/ascoltami/Light9AscoltamiTimeline.ts	Sat Jun 01 13:32:58 2024 -0700
@@ -2,7 +2,7 @@
 import { customElement, property, state } from "lit/decorators.js";
 import Sylvester from "sylvester";
 import { Zoom } from "../light9-timeline-audio";
-import { PlainViewState } from "../Light9CursorCanvas";
+import { PlainerViewState, PlainViewState } from "../Light9CursorCanvas";
 import { getTopGraph } from "../RdfdbSyncedGraph";
 import { show } from "../show_specific";
 import { SyncedGraph } from "../SyncedGraph";
@@ -31,11 +31,11 @@
         position: relative;
       }
       #overview {
-        height: 60px;
+        height: 400px;
       }
       #zoomed {
         margin-top: 40px;
-        height: 80px;
+        height: 400px;
       }
       #cursor {
         position: absolute;
@@ -44,6 +44,9 @@
         width: 100%;
         height: 100%;
       }
+      #timeSlider {
+        height: 0;
+      }
     `,
   ];
   graph!: SyncedGraph;
@@ -58,7 +61,7 @@
   @property() playerTime: number = 0;
   @state() zoom: Zoom;
   @state() overviewZoom: Zoom;
-  @state() viewState: PlainViewState | null = null;
+  @state() viewState: PlainerViewState | null = null;
   constructor() {
     super();
     getTopGraph().then((g) => {
@@ -87,15 +90,15 @@
     this.zoom = { duration: duration, t1, t2 };
     const w = timeRow.offsetWidth;
     this.viewState = {
-      zoomSpec: { t1: () => t1, t2: () => t2 },
-      cursor: { t: () => t },
-      audioY: () => 0,
-      audioH: () => 60,
-      zoomedTimeY: () => 60,
-      zoomedTimeH: () => 40,
+      zoomSpec: { t1: t1, t2: t2 },
+      cursor: { t: t },
+      audioY: 0,
+      audioH: 400,
+      zoomedTimeY: 400,
+      zoomedTimeH: 40,
       fullZoomX: (sec: number) => (sec / duration) * w,
       zoomInX: (sec: number) => ((sec - t1) / (t2 - t1)) * w,
-      mouse: { pos: () => $V([0, 0]) },
+      mouse: { pos: $V([0, 0]) },
     };
   }