Handle mouseUp event outside of Overview component

frontend/src/App.tsx

@@ -158,8 +158,8 @@ function App(): JSX.Element {
             height={80}
             position={position}
             selection={viewport}
-            onSelectionStart={(x1: number) => {
-              console.log('onSelectionStart', x1);
+            onSelectionStart={() => {
+              // empty
             }}
             onSelectionChange={handleOverviewSelectionChange}
           />

frontend/src/Overview.tsx

@@ -46,6 +46,17 @@ export const Overview: React.FC<Props> = ({
 
   // effects
 
+  // handle global mouse up.
+  // Currently this adds and removes the global event listener every time the
+  // component is rerendered (which is often when dragging or redrawing). It
+  // works but probably better to optimize this for performance reasons.
+  useEffect(() => {
+    window.addEventListener('mouseup', handleMouseUp);
+    return () => {
+      window.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [mode, newSelection]);
+
   // load peaks on mediaset change
   useEffect(() => {
     (async function () {
@@ -244,7 +255,6 @@ export const Overview: React.FC<Props> = ({
           style={hudCanvasStyles}
           onMouseDown={handleMouseDown}
           onMouseMove={handleMouseMove}
-          onMouseUp={handleMouseUp}
         ></canvas>
       </div>
     </>