Feat: Add shortcut for output inspection and play component

src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx

@@ -39,7 +39,11 @@ import {
   scapedJSONStringfy,
 } from "../../../../utils/reactflowUtils";
 import { nodeColors } from "../../../../utils/styleUtils";
-import { classNames, groupByFamily } from "../../../../utils/utils";
+import {
+  classNames,
+  groupByFamily,
+  isThereModal,
+} from "../../../../utils/utils";
 import useFetchDataOnMount from "../../../hooks/use-fetch-data-on-mount";
 import useHandleOnNewValue from "../../../hooks/use-handle-new-value";
 import useHandleNodeClass from "../../../hooks/use-handle-node-class";
@@ -47,6 +51,8 @@ import useHandleRefreshButtonPress from "../../../hooks/use-handle-refresh-butto
 import OutputModal from "../outputModal";
 import TooltipRenderComponent from "../tooltipRenderComponent";
 import { TEXT_FIELD_TYPES } from "./constants";
+import { useShortcutsStore } from "../../../../stores/shortcuts";
+import { useHotkeys } from "react-hotkeys-hook";
 
 export default function ParameterComponent({
   left,
@@ -63,6 +69,7 @@ export default function ParameterComponent({
   proxy,
   showNode,
   index = "",
+  selected,
 }: ParameterComponentType): JSX.Element {
   const ref = useRef<HTMLDivElement>(null);
   const refHtml = useRef<HTMLDivElement & ReactNode>(null);
@@ -90,6 +97,19 @@ export default function ParameterComponent({
       "unknown"
   );
 
+  const preventDefault = true;
+
+  function handleOutputWShortcut() {
+    if (!displayOutputPreview || unknownOutput) return;
+    if (isThereModal() && !openOutputModal) return;
+    if (selected && !left) {
+      setOpenOutputModal((state) => !state);
+    }
+  }
+
+  const output = useShortcutsStore((state) => state.output);
+  useHotkeys(output, handleOutputWShortcut, { preventDefault });
+
   const { handleOnNewValue: handleOnNewValueHook } = useHandleOnNewValue(
     data,
     name,
@@ -98,7 +118,7 @@ export default function ParameterComponent({
     debouncedHandleUpdateValues,
     setNode,
     renderTooltips,
-    setIsLoading
+    setIsLoading,
   );
 
   const { handleNodeClass: handleNodeClassHook } = useHandleNodeClass(
@@ -107,7 +127,7 @@ export default function ParameterComponent({
     takeSnapshot,
     setNode,
     updateNodeInternals,
-    renderTooltips
+    renderTooltips,
   );
 
   const { handleRefreshButtonPress: handleRefreshButtonPressHook } =
@@ -116,7 +136,7 @@ export default function ParameterComponent({
   let disabled =
     edges.some(
       (edge) =>
-        edge.targetHandle === scapedJSONStringfy(proxy ? { ...id, proxy } : id)
+        edge.targetHandle === scapedJSONStringfy(proxy ? { ...id, proxy } : id),
     ) ?? false;
 
   const handleRefreshButtonPress = async (name, data) => {
@@ -129,12 +149,12 @@ export default function ParameterComponent({
     handleUpdateValues,
     setNode,
     renderTooltips,
-    setIsLoading
+    setIsLoading,
   );
 
   const handleOnNewValue = async (
     newValue: string | string[] | boolean | Object[],
-    skipSnapshot: boolean | undefined = false
+    skipSnapshot: boolean | undefined = false,
   ): Promise<void> => {
     handleOnNewValueHook(newValue, skipSnapshot);
   };
@@ -216,7 +236,7 @@ export default function ParameterComponent({
               className={classNames(
                 left ? "my-12 -ml-0.5 " : " my-12 -mr-0.5 ",
                 "h-3 w-3 rounded-full border-2 bg-background",
-                !showNode ? "mt-0" : ""
+                !showNode ? "mt-0" : "",
               )}
               style={{
                 borderColor: color ?? nodeColors.unknown,
@@ -286,7 +306,7 @@ export default function ParameterComponent({
                         "h-5 w-5 rounded-md",
                         displayOutputPreview && !unknownOutput
                           ? " hover:bg-secondary-foreground/5 hover:text-medium-indigo"
-                          : " cursor-not-allowed text-muted-foreground"
+                          : " cursor-not-allowed text-muted-foreground",
                       )}
                       name={"ScanEye"}
                     />
@@ -336,7 +356,7 @@ export default function ParameterComponent({
                   }
                   className={classNames(
                     left ? "-ml-0.5" : "-mr-0.5",
-                    "h-3 w-3 rounded-full border-2 bg-background"
+                    "h-3 w-3 rounded-full border-2 bg-background",
                   )}
                   style={{ borderColor: color ?? nodeColors.unknown }}
                   onClick={() => setFilterEdge(groupedEdge.current)}

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -241,8 +241,18 @@ export default function GenericNode({
     }
   }
 
+  function handlePlayWShortcut() {
+    if (buildStatus === BuildStatus.BUILDING || isBuilding || !selected) return;
+    setValidationStatus(null);
+    console.log(data.node?.display_name);
+    buildFlow({ stopNodeId: data.id });
+  }
+
   const update = useShortcutsStore((state) => state.update);
+  const play = useShortcutsStore((state) => state.play);
+
   useHotkeys(update, handleUpdateCodeWShortcut, { preventDefault });
+  useHotkeys(play, handlePlayWShortcut, { preventDefault });
 
   const shortcuts = useShortcutsStore((state) => state.shortcuts);
 
@@ -388,6 +398,7 @@ export default function GenericNode({
                         data.node!.template[templateField].show &&
                         !data.node!.template[templateField].advanced && (
                           <ParameterComponent
+                            selected={selected}
                             index={idx.toString()}
                             key={scapedJSONStringfy({
                               inputTypes:
@@ -461,6 +472,7 @@ export default function GenericNode({
                         ),
                     )}
                   <ParameterComponent
+                    selected={selected}
                     key={scapedJSONStringfy({
                       baseClasses: data.node!.base_classes,
                       id: data.id,
@@ -644,6 +656,7 @@ export default function GenericNode({
                     {data.node!.template[templateField].show &&
                     !data.node!.template[templateField].advanced ? (
                       <ParameterComponent
+                        selected={selected}
                         index={idx.toString()}
                         key={scapedJSONStringfy({
                           inputTypes:
@@ -723,6 +736,7 @@ export default function GenericNode({
               </div>
               {data.node!.base_classes.length > 0 && (
                 <ParameterComponent
+                  selected={selected}
                   key={scapedJSONStringfy({
                     baseClasses: data.node!.base_classes,
                     id: data.id,

src/frontend/src/constants/constants.ts

@@ -817,6 +817,14 @@ export const defaultShortcuts = [
     name: "Flow Share",
     shortcut: `${IS_MAC ? "Cmd" : "Ctrl"} + B`,
   },
+  {
+    name: "Play",
+    shortcut: `P`,
+  },
+  {
+    name: "Output Inspection",
+    shortcut: `O`,
+  },
 ];
 
 export const DEFAULT_TABLE_ALERT_MSG = `Oops! It seems there's no data to display right now. Please check back later.`;

src/frontend/src/stores/shortcuts.ts

@@ -7,6 +7,8 @@ export const useShortcutsStore = create<shortcutsStoreType>((set, get) => ({
   setShortcuts: (newShortcuts) => {
     set({ shortcuts: newShortcuts });
   },
+  output: "o",
+  play: "p",
   flow: "mod+b",
   undo: "mod+z",
   redo: "mod+y",

src/frontend/src/types/components/index.ts

@@ -54,6 +54,7 @@ export type DropDownComponentType = {
   children?: ReactNode;
 };
 export type ParameterComponentType = {
+  selected: boolean;
   data: NodeDataType;
   title: string;
   id: sourceHandleType | targetHandleType;
@@ -491,7 +492,7 @@ export type ChatInputType = {
   isDragging: boolean;
   files: FilePreviewType[];
   setFiles: (
-    files: FilePreviewType[] | ((prev: FilePreviewType[]) => FilePreviewType[])
+    files: FilePreviewType[] | ((prev: FilePreviewType[]) => FilePreviewType[]),
   ) => void;
   chatValue: string;
   inputRef: {
@@ -593,7 +594,7 @@ export type chatMessagePropsType = {
   updateChat: (
     chat: ChatMessageType,
     message: string,
-    stream_url?: string
+    stream_url?: string,
   ) => void;
 };
 
@@ -685,12 +686,12 @@ export type codeTabsPropsType = {
       value: string,
       node: NodeType,
       template: TemplateVariableType,
-      tweak: tweakType
+      tweak: tweakType,
     ) => string;
     buildTweakObject?: (
       tw: string,
       changes: string | string[] | boolean | number | Object[] | Object,
-      template: TemplateVariableType
+      template: TemplateVariableType,
     ) => Promise<string | void>;
   };
   activeTweaks?: boolean;

src/frontend/src/types/store/index.ts

@@ -21,6 +21,8 @@ export type StoreComponentResponse = {
 
 export type shortcutsStoreType = {
   updateUniqueShortcut: (name: string, combination: string) => void;
+  output: string;
+  play: string;
   flow: string;
   group: string;
   cut: string;