Overview: render viewport on first render

frontend/src/App.tsx

@@ -150,6 +150,7 @@ function App(): JSX.Element {
             offsetPixels={offsetPixels}
             height={80}
             position={position}
+            selection={viewport}
             onSelectionStart={(x1: number) => {
               console.log('onSelectionStart', x1);
             }}

frontend/src/Overview.tsx

@@ -12,6 +12,7 @@ interface Props {
   height: number;
   offsetPixels: number;
   position: number;
+  selection: Frames;
   onSelectionStart: (x1: number) => void;
   onSelectionChange: (selection: Frames) => void;
 }
@@ -33,13 +34,13 @@ export const Overview: React.FC<Props> = ({
   height,
   offsetPixels,
   position,
+  selection,
   onSelectionStart,
   onSelectionChange,
 }: Props) => {
   const hudCanvasRef = useRef<HTMLCanvasElement>(null);
   const [peaks, setPeaks] = useState<Observable<number[]>>(from([]));
   const [mode, setMode] = useState(Mode.Normal);
-  const [selection, setSelection] = useState({ ...emptySelection });
   const [newSelection, setNewSelection] = useState({ ...emptySelection });
   const [dragStart, setDragStart] = useState(0);
 
@@ -142,10 +143,6 @@ export const Overview: React.FC<Props> = ({
     onSelectionStart(newSelection.start);
   }, [newSelection]);
 
-  useEffect(() => {
-    onSelectionChange({ ...selection });
-  }, [selection]);
-
   // handlers
 
   const handleMouseDown = (evt: MouseEvent<HTMLCanvasElement>) => {
@@ -207,7 +204,7 @@ export const Overview: React.FC<Props> = ({
     }
 
     setMode(Mode.Normal);
-    setSelection(newSelection);
+    onSelectionChange({ ...newSelection });
   };
 
   // render component