curation kbd shortcuts

gui/src/App.tsx

@@ -8,6 +8,7 @@ import './localStyles.css';
 import theme from './theme';
 import View from './View';
 import { SetupStyleSettings } from './libraries/franklab-views';
+import { globalKeyHandler } from './globalKeyHandler';
 
 const urlSearchParams = new URLSearchParams(window.location.search)
 const queryParams = Object.fromEntries(urlSearchParams.entries())
@@ -63,12 +64,20 @@ function App() {
               <SetupUrlState>
                 <SetupSortingCuration>
                   <SetupStyleSettings>
-                    <View
-                      data={data}
-                      opts={opts}
-                      width={width - 10}
-                      height={height - 5}
-                    />
+                    <div
+                      tabIndex={0}
+                      style={{position: 'absolute', top: 0, left: 0, width: width, height: height, overflow: 'hidden'}}
+                      onKeyDown={(e) => {
+                        globalKeyHandler.handleEvent(e)
+                      }}
+                    >
+                      <View
+                        data={data}
+                        opts={opts}
+                        width={width - 10}
+                        height={height - 5}
+                      />
+                    </div>
                   </SetupStyleSettings>
                 </SetupSortingCuration>
               </SetupUrlState>

gui/src/globalKeyHandler.ts

@@ -0,0 +1,16 @@
+import { KeyboardEvent } from "react";
+
+class GlobalKeyHandler {
+    callbacks: ((event: KeyboardEvent) => void)[] = [];
+    registerCallback(callback: (event: KeyboardEvent) => void) {
+        this.callbacks.push(callback);
+    }
+    deregisterCallback(callback: (event: KeyboardEvent) => void) {
+        this.callbacks = this.callbacks.filter(cb => cb !== callback);
+    }
+    handleEvent(event: KeyboardEvent) {
+        this.callbacks.forEach(cb => cb(event));
+    }
+}
+
+export const globalKeyHandler = new GlobalKeyHandler();

gui/src/libraries/view-sorting-selection/SortingSelectionView.tsx

@@ -2,9 +2,10 @@ import { Button, Checkbox } from "@material-ui/core";
 import { SortingCuration, useSortingCuration } from "../spike-sorting-views";
 import { useUrlState } from "@fi-sci/figurl-interface";
 import { useSelectedUnitIds } from "../spike-sorting-views";
-import { FunctionComponent, useCallback, useMemo } from "react";
+import { FunctionComponent, KeyboardEvent, useCallback, useEffect, useMemo } from "react";
 import { getAbbreviatedUnitIdsString, getAllLabelChoices } from "../spike-sorting-views";
 import { SortingSelectionViewData } from "./SortingSelectionViewData";
+import { globalKeyHandler } from "../../globalKeyHandler";
 
 type Props = {
     data: SortingSelectionViewData
@@ -86,6 +87,31 @@ const SortingSelectionView: FunctionComponent<Props> = ({width, height}) => {
             visibleUnitIds: restrictedUnitIds
         })
     }, [selectedUnitIds, updateUrlState, restrictedUnitIds])
+    useEffect(() => {
+        const cb = (event: KeyboardEvent) => {
+            if (event.shiftKey) {
+                let choiceIndex = -1
+                if (event.key === '!') choiceIndex = 0
+                if (event.key === '@') choiceIndex = 1
+                if (event.key === '#') choiceIndex = 2
+                if (event.key === '$') choiceIndex = 3
+                if (event.key === '%') choiceIndex = 4
+                if (event.key === '^') choiceIndex = 5
+                if (event.key === '&') choiceIndex = 6
+                if (event.key === '*') choiceIndex = 7
+                if (event.key === '(') choiceIndex = 8
+                if (event.key === ')') choiceIndex = 9
+                if (choiceIndex < 0) return
+                if (choiceIndex >= labelChoices.length) return
+                const label = labelChoices[choiceIndex]
+                handleClick(label, labelSelectedStates[label])
+            }
+        }
+        globalKeyHandler.registerCallback(cb)
+        return () => {
+            globalKeyHandler.deregisterCallback(cb)
+        }
+    }, [selectedUnitIds, restrictedUnitIds, handleClick, labelChoices, labelSelectedStates])
     return (
         <div style={{position: 'absolute', width, height, overflowY: 'auto'}}>
             <h3>Selection</h3>