jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Feat: Add shortcut for output inspection and play component

Browse source
This commit is contained in:
igorrCarvalho 2024-06-10 23:24:57 -03:00
commit 33b1ee8365
6 changed files with 60 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

38
src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
View file

@ -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)}

14
src/frontend/src/CustomNodes/GenericNode/index.tsx
View file

@ -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,

8
src/frontend/src/constants/constants.ts
View file

@ -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.`;

2
src/frontend/src/stores/shortcuts.ts
View file

@ -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",

9
src/frontend/src/types/components/index.ts
View file

@ -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;

2
src/frontend/src/types/store/index.ts
View file

@ -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;