Merge pull request #433 from ajthinking/run-hotkey

Bypass run sidebar on shift+r

Author: ajthinking

packages/ui/src/components/DataStory/controls/RunControl.tsx

@@ -5,42 +5,18 @@ import { useCallback, useState, useMemo, useEffect } from 'react';
 import { AbortIcon } from '../icons/abortIcon';
 import { DataStoryEvents, DataStoryEventType } from '../events/dataStoryEventType';
 import { useDataStoryEvent } from '../events/eventManager';
-import { createDataStoryId, debounce } from '@data-story/core';
+import { useRunControl } from './useRunControl';
 
 export const RunControl = () => {
-  const [isRunning, setIsRunning] = useState<boolean>(false);
-  const onRun = useStore((state) => state.onRun);
-  const abortExecution = useStore((state) => state.abortExecution);
-  const [executionId, setExecutionId] = useState<string>('');
-
-  const handleRun = debounce(async () => {
-    if (isRunning && executionId) {
-      abortExecution(executionId);
-      setIsRunning(false);
-    } else {
-      const tempExecutionId = createDataStoryId();
-      setExecutionId(tempExecutionId);
-      onRun(tempExecutionId);
-      setIsRunning(true);
-    }
-  }, 300);
-
-  const dataStoryEvent = useCallback((event: DataStoryEventType) => {
-    const stopRunning = event.type === DataStoryEvents.RUN_ABORT || event.type === DataStoryEvents.RUN_ERROR || event.type === DataStoryEvents.RUN_SUCCESS;
-    if (stopRunning) {
-      setIsRunning(false);
-      setExecutionId('');
-    }
-  }, []);
-  useDataStoryEvent(dataStoryEvent);
+  const { isRunning, handleRun } = useRunControl();
 
   return (
     <ControlButton
       title="Run"
       aria-label="run"
       onClick={handleRun}
     >
-      {isRunning ? <AbortIcon /> : <RunIcon/> }
+      {isRunning ? <AbortIcon /> : <RunIcon />}
     </ControlButton>
   );
 };

packages/ui/src/components/DataStory/controls/useRunControl.ts

@@ -0,0 +1,41 @@
+import { useState, useCallback, useMemo } from 'react';
+import { createDataStoryId, debounce } from '@data-story/core';
+import { useStore } from '../store/store';
+import { DataStoryEvents, DataStoryEventType } from '../events/dataStoryEventType';
+import { useDataStoryEvent } from '../events/eventManager';
+
+export function useRunControl() {
+  const [isRunning, setIsRunning] = useState(false);
+  const [executionId, setExecutionId] = useState('');
+  const onRun = useStore((state) => state.onRun);
+  const abortExecution = useStore((state) => state.abortExecution);
+
+  const handleRun = useMemo(
+    () => debounce(async () => {
+      if (isRunning && executionId) {
+        abortExecution(executionId);
+        setIsRunning(false);
+      } else {
+        const tempExecutionId = createDataStoryId();
+        setExecutionId(tempExecutionId);
+        onRun(tempExecutionId);
+        setIsRunning(true);
+      }
+    }, 300),
+    [isRunning, executionId, abortExecution, onRun],
+  );
+
+  const dataStoryEvent = useCallback((event: DataStoryEventType) => {
+    const stopRunning =
+      event.type === DataStoryEvents.RUN_ABORT ||
+      event.type === DataStoryEvents.RUN_ERROR ||
+      event.type === DataStoryEvents.RUN_SUCCESS;
+    if (stopRunning) {
+      setIsRunning(false);
+      setExecutionId('');
+    }
+  }, []);
+  useDataStoryEvent(dataStoryEvent);
+
+  return { isRunning, handleRun };
+}

packages/ui/src/components/DataStory/useHotkeys.tsx

@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+import { useRunControl } from './controls/useRunControl';
 import { ReactFlowNode } from '../Node/ReactFlowNode';
 import { Direction } from './getNodesWithNewSelection';
 import { DataStoryCanvasProps } from './types';
@@ -89,10 +90,11 @@ export function useHotkeys({
     }
   }, [hotkeyManager, setShowAddNode, nodeDescriptions, addNodeFromDescription]);
 
+  const { handleRun } = useRunControl();
   useEffect(() => {
-    hotkeyManager.register('Shift+KeyR', () => setShowRun(true));
+    hotkeyManager.register('Shift+KeyR', handleRun);
     return () => hotkeyManager.unregister('Shift+KeyR');
-  }, [hotkeyManager, setShowRun]);
+  }, [hotkeyManager, handleRun]);
 
   useEffect(() => {
     hotkeyManager.register('Ctrl+KeyS', () => onSave?.(toDiagram?.()));