From 420bf4ba4dc403ac512bac099bc566ed7fa0bd4b Mon Sep 17 00:00:00 2001 From: igorrCarvalho Date: Mon, 10 Jun 2024 20:32:45 -0300 Subject: [PATCH 1/5] Refactor: Decrease visual shortcut font size --- .../components/renderIconComponent/index.tsx | 18 +++++++++--------- .../components/nodeToolbarComponent/index.tsx | 4 ++-- .../toolbarSelectItem/index.tsx | 4 ++-- 3 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/frontend/src/components/renderIconComponent/index.tsx b/src/frontend/src/components/renderIconComponent/index.tsx index 241566f93..39b1e7908 100644 --- a/src/frontend/src/components/renderIconComponent/index.tsx +++ b/src/frontend/src/components/renderIconComponent/index.tsx @@ -12,35 +12,35 @@ export default function RenderIcons({ shortcutWPlus: string[]; }): JSX.Element { return hasShift ? ( - <> + {isMac ? ( - + ) : ( filteredShortcut[0] )} - + {filteredShortcut.map((key, idx) => { if (idx > 0) { - return {key.toUpperCase()} ; + return {key.toUpperCase()} ; } })} - + ) : ( - <> + {shortcutWPlus[0].toLowerCase() === "space" ? ( "Space" ) : shortcutWPlus[0].length <= 1 ? ( shortcutWPlus[0] ) : isMac ? ( - + ) : ( shortcutWPlus[0] )} {shortcutWPlus.map((key, idx) => { if (idx > 0) { - return {key.toUpperCase()} ; + return {key.toUpperCase()} ; } })} - + ); } diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx index 49636c4cb..5077e9318 100644 --- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx @@ -352,7 +352,7 @@ export default function NodeToolbarComponent({
{name} {" "} Delete{" "} !key.toLowerCase().includes("shift") + (key) => !key.toLowerCase().includes("shift"), ); let shortcutWPlus: string[] = []; if (!hasShift) shortcutWPlus = filteredShortcut.join("+").split(" "); @@ -38,7 +38,7 @@ export default function ToolbarSelectItem({ {value} Date: Mon, 10 Jun 2024 20:38:18 -0300 Subject: [PATCH 2/5] Refactor: change default API modal shortcut --- src/frontend/src/constants/constants.ts | 4 ++-- .../pages/FlowPage/components/nodeToolbarComponent/index.tsx | 4 ++-- src/frontend/src/stores/shortcuts.ts | 4 ++-- src/frontend/src/types/store/index.ts | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/frontend/src/constants/constants.ts b/src/frontend/src/constants/constants.ts index df003c021..89fc3bafe 100644 --- a/src/frontend/src/constants/constants.ts +++ b/src/frontend/src/constants/constants.ts @@ -758,7 +758,7 @@ export const defaultShortcuts = [ shortcut: `${IS_MAC ? "Cmd" : "Ctrl"} + D`, }, { - name: "Share", + name: "Component Share", shortcut: `${IS_MAC ? "Cmd" : "Ctrl"} + Shift + S`, }, { @@ -799,7 +799,7 @@ export const defaultShortcuts = [ }, { name: "API", - shortcut: `${IS_MAC ? "Cmd" : "Ctrl"} + R`, + shortcut: `R`, }, { name: "Download", diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx index 5077e9318..231875f85 100644 --- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx @@ -170,7 +170,7 @@ export default function NodeToolbarComponent({ const advanced = useShortcutsStore((state) => state.advanced); const minimize = useShortcutsStore((state) => state.minimize); - const share = useShortcutsStore((state) => state.share); + const component = useShortcutsStore((state) => state.component); const save = useShortcutsStore((state) => state.save); const docs = useShortcutsStore((state) => state.docs); const code = useShortcutsStore((state) => state.code); @@ -182,7 +182,7 @@ export default function NodeToolbarComponent({ useHotkeys(minimize, handleMinimizeWShortcut, { preventDefault }); useHotkeys(update, handleUpdateWShortcut, { preventDefault }); useHotkeys(group, handleGroupWShortcut, { preventDefault }); - useHotkeys(share, handleShareWShortcut, { preventDefault }); + useHotkeys(component, handleShareWShortcut, { preventDefault }); useHotkeys(code, handleCodeWShortcut, { preventDefault }); useHotkeys(advanced, handleAdvancedWShortcut, { preventDefault }); useHotkeys(save, handleSaveWShortcut, { preventDefault }); diff --git a/src/frontend/src/stores/shortcuts.ts b/src/frontend/src/stores/shortcuts.ts index d792a0d6c..44133d31a 100644 --- a/src/frontend/src/stores/shortcuts.ts +++ b/src/frontend/src/stores/shortcuts.ts @@ -16,14 +16,14 @@ export const useShortcutsStore = create((set, get) => ({ code: "space", copy: "mod+c", duplicate: "mod+d", - share: "mod+shift+s", + component: "mod+shift+s", docs: "mod+shift+d", save: "mod+s", delete: "backspace", group: "mod+g", cut: "mod+x", paste: "mod+v", - api: "mod+shift+r", + api: "r", update: "mod+u", download: "mod+j", freeze: "mod+f", diff --git a/src/frontend/src/types/store/index.ts b/src/frontend/src/types/store/index.ts index 31eb985e9..5d21ee8bf 100644 --- a/src/frontend/src/types/store/index.ts +++ b/src/frontend/src/types/store/index.ts @@ -34,7 +34,7 @@ export type shortcutsStoreType = { code: string; copy: string; duplicate: string; - share: string; + component: string; docs: string; save: string; delete: string; @@ -46,7 +46,7 @@ export type shortcutsStoreType = { shortcut: string; }>; setShortcuts: ( - newShortcuts: Array<{ name: string; shortcut: string }> + newShortcuts: Array<{ name: string; shortcut: string }>, ) => void; getShortcutsFromStorage: () => void; }; From e9f63edacd87a0c928e396f281e1216d2ef486ed Mon Sep 17 00:00:00 2001 From: igorrCarvalho Date: Mon, 10 Jun 2024 20:41:10 -0300 Subject: [PATCH 3/5] Refactor: update shortcut name --- .../pages/FlowPage/components/nodeToolbarComponent/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx index 231875f85..664b46dad 100644 --- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx @@ -614,7 +614,8 @@ export default function NodeToolbarComponent({ > obj.name === "Share")?.shortcut! + shortcuts.find((obj) => obj.name === "Component Share") + ?.shortcut! } value={"Share"} icon={"Share3"} From 1aca27e5f3bb38108d8da5e653ce82680acfcdd8 Mon Sep 17 00:00:00 2001 From: igorrCarvalho Date: Mon, 10 Jun 2024 20:50:35 -0300 Subject: [PATCH 4/5] Fix: update shortcut not working --- .../src/CustomNodes/GenericNode/index.tsx | 41 ++++++++++++------- .../components/nodeToolbarComponent/index.tsx | 2 - 2 files changed, 26 insertions(+), 17 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index 71c5388e0..467122451 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -37,6 +37,7 @@ import useValidationStatusString from "../hooks/use-validation-status-string"; import getFieldTitle from "../utils/get-field-title"; import sortFields from "../utils/sort-fields"; import ParameterComponent from "./components/parameterComponent"; +import { useHotkeys } from "react-hotkeys-hook"; export default function GenericNode({ data, @@ -48,6 +49,7 @@ export default function GenericNode({ xPos?: number; yPos?: number; }): JSX.Element { + const preventDefault = true; const types = useTypesStore((state) => state.types); const templates = useTypesStore((state) => state.templates); const deleteNode = useFlowStore((state) => state.deleteNode); @@ -58,10 +60,10 @@ export default function GenericNode({ const setErrorData = useAlertStore((state) => state.setErrorData); const isDark = useDarkStore((state) => state.dark); const buildStatus = useFlowStore( - (state) => state.flowBuildStatus[data.id]?.status + (state) => state.flowBuildStatus[data.id]?.status, ); const lastRunTime = useFlowStore( - (state) => state.flowBuildStatus[data.id]?.timestamp + (state) => state.flowBuildStatus[data.id]?.timestamp, ); const takeSnapshot = useFlowsManagerStore((state) => state.takeSnapshot); @@ -69,7 +71,7 @@ export default function GenericNode({ const [nodeName, setNodeName] = useState(data.node!.display_name); const [inputDescription, setInputDescription] = useState(false); const [nodeDescription, setNodeDescription] = useState( - data.node?.description! + data.node?.description!, ); const [isOutdated, setIsOutdated] = useState(false); const [validationStatus, setValidationStatus] = @@ -87,7 +89,7 @@ export default function GenericNode({ data.node!, setNode, setIsOutdated, - updateNodeInternals + updateNodeInternals, ); const name = nodeIconsLucide[data.type] ? data.type : types[data.type]; @@ -118,12 +120,12 @@ export default function GenericNode({ selected: boolean, showNode: boolean, buildStatus: BuildStatus | undefined, - validationStatus: VertexBuildTypeAPI | null + validationStatus: VertexBuildTypeAPI | null, ) => { const specificClassFromBuildStatus = getSpecificClassFromBuildStatus( buildStatus, validationStatus, - isDark + isDark, ); const baseBorderClass = getBaseBorderClass(selected); @@ -132,7 +134,7 @@ export default function GenericNode({ baseBorderClass, nodeSizeClass, "generic-node-div group/node", - specificClassFromBuildStatus + specificClassFromBuildStatus, ); return names; }; @@ -175,7 +177,7 @@ export default function GenericNode({ showNode, isEmoji, nodeIconFragment, - checkNodeIconFragment + checkNodeIconFragment, ); function countHandles(): void { @@ -233,6 +235,15 @@ export default function GenericNode({ } }; + function handleUpdateCodeWShortcut() { + if (isOutdated && selected) { + handleUpdateCode(); + } + } + + const update = useShortcutsStore((state) => state.update); + useHotkeys(update, handleUpdateCodeWShortcut, { preventDefault }); + const shortcuts = useShortcutsStore((state) => state.shortcuts); const memoizedNodeToolbarComponent = useMemo(() => { @@ -288,7 +299,7 @@ export default function GenericNode({ selected, showNode, buildStatus, - validationStatus + validationStatus, )} > {data.node?.beta && showNode && ( @@ -419,7 +430,7 @@ export default function GenericNode({ } title={getFieldTitle( data.node?.template!, - templateField + templateField, )} info={data.node?.template[templateField].info} name={templateField} @@ -447,7 +458,7 @@ export default function GenericNode({ proxy={data.node?.template[templateField].proxy} showNode={showNode} /> - ) + ), )} { setInputDescription(true); @@ -672,13 +683,13 @@ export default function GenericNode({ } title={getFieldTitle( data.node?.template!, - templateField + templateField, )} info={data.node?.template[templateField].info} name={templateField} tooltipTitle={ data.node?.template[templateField].input_types?.join( - "\n" + "\n", ) ?? data.node?.template[templateField].type } required={data.node!.template[templateField].required} @@ -705,7 +716,7 @@ export default function GenericNode({
{" "} diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx index 664b46dad..7f1773a43 100644 --- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx @@ -175,12 +175,10 @@ export default function NodeToolbarComponent({ const docs = useShortcutsStore((state) => state.docs); const code = useShortcutsStore((state) => state.code); const group = useShortcutsStore((state) => state.group); - const update = useShortcutsStore((state) => state.update); const download = useShortcutsStore((state) => state.download); const freeze = useShortcutsStore((state) => state.freeze); useHotkeys(minimize, handleMinimizeWShortcut, { preventDefault }); - useHotkeys(update, handleUpdateWShortcut, { preventDefault }); useHotkeys(group, handleGroupWShortcut, { preventDefault }); useHotkeys(component, handleShareWShortcut, { preventDefault }); useHotkeys(code, handleCodeWShortcut, { preventDefault }); From 33b1ee83651071b2819dc0ba22cdd12c1ff19364 Mon Sep 17 00:00:00 2001 From: igorrCarvalho Date: Mon, 10 Jun 2024 23:24:57 -0300 Subject: [PATCH 5/5] Feat: Add shortcut for output inspection and play component --- .../components/parameterComponent/index.tsx | 38 ++++++++++++++----- .../src/CustomNodes/GenericNode/index.tsx | 14 +++++++ src/frontend/src/constants/constants.ts | 8 ++++ src/frontend/src/stores/shortcuts.ts | 2 + src/frontend/src/types/components/index.ts | 9 +++-- src/frontend/src/types/store/index.ts | 2 + 6 files changed, 60 insertions(+), 13 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index 37ef5cf60..90520f939 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/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(null); const refHtml = useRef(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 => { 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)} diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index 467122451..83a7a7354 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/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 && ( {data.node!.base_classes.length > 0 && ( ((set, get) => ({ setShortcuts: (newShortcuts) => { set({ shortcuts: newShortcuts }); }, + output: "o", + play: "p", flow: "mod+b", undo: "mod+z", redo: "mod+y", diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts index 8d1fef5d1..097a351f2 100644 --- a/src/frontend/src/types/components/index.ts +++ b/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; }; activeTweaks?: boolean; diff --git a/src/frontend/src/types/store/index.ts b/src/frontend/src/types/store/index.ts index 5d21ee8bf..54b7cb478 100644 --- a/src/frontend/src/types/store/index.ts +++ b/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;