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

Merge branch 'cz/mergeAll' of https://github.com/langflow-ai/langflow into cz/mergeAll

Browse source
This commit is contained in:
cristhianzl 2024-06-11 09:13:15 -03:00
commit eee3475451
9 changed files with 109 additions and 52 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)}

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

@ -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,25 @@ export default function GenericNode({
}
};
function handleUpdateCodeWShortcut() {
if (isOutdated && selected) {
handleUpdateCode();
}
}
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);
const memoizedNodeToolbarComponent = useMemo(() => {
@ -288,7 +309,7 @@ export default function GenericNode({
selected,
showNode,
buildStatus,
validationStatus
validationStatus,
)}
>
{data.node?.beta && showNode && (
@ -377,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:
@ -419,7 +441,7 @@ export default function GenericNode({
}
title={getFieldTitle(
data.node?.template!,
templateField
templateField,
)}
info={data.node?.template[templateField].info}
name={templateField}
@ -447,9 +469,10 @@ export default function GenericNode({
proxy={data.node?.template[templateField].proxy}
showNode={showNode}
/>
)
),
)}
<ParameterComponent
selected={selected}
key={scapedJSONStringfy({
baseClasses: data.node!.base_classes,
id: data.id,
@ -610,7 +633,7 @@ export default function GenericNode({
!data.node?.description) &&
nameEditable
? "font-light italic"
: ""
: "",
)}
onClick={(e) => {
setInputDescription(true);
@ -633,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:
@ -672,13 +696,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,13 +729,14 @@ export default function GenericNode({
<div
className={classNames(
Object.keys(data.node!.template).length < 1 ? "hidden" : "",
"flex-max-width justify-center"
"flex-max-width justify-center",
)}
>
{" "}
</div>
{data.node!.base_classes.length > 0 && (
<ParameterComponent
selected={selected}
key={scapedJSONStringfy({
baseClasses: data.node!.base_classes,
id: data.id,

18
src/frontend/src/components/renderIconComponent/index.tsx
View file

@ -12,35 +12,35 @@ export default function RenderIcons({
shortcutWPlus: string[];
}): JSX.Element {
return hasShift ? (
<>
<span className="flex gap-0.5 text-xs">
{isMac ? (
<ForwardedIconComponent name="Command" className="h-4 w-4" />
<ForwardedIconComponent name="Command" className="h-3 w-3" />
) : (
filteredShortcut[0]
)}
<ForwardedIconComponent name="ArrowBigUp" className="ml-1 h-5 w-5" />
<ForwardedIconComponent name="ArrowBigUp" className=" h-4 w-4" />
{filteredShortcut.map((key, idx) => {
if (idx > 0) {
return <span className="ml-1"> {key.toUpperCase()} </span>;
return <span className=""> {key.toUpperCase()} </span>;
}
})}
</>
</span>
) : (
<>
<span className="flex gap-1 text-xs">
{shortcutWPlus[0].toLowerCase() === "space" ? (
"Space"
) : shortcutWPlus[0].length <= 1 ? (
shortcutWPlus[0]
) : isMac ? (
<ForwardedIconComponent name="Command" className="h-4 w-4" />
<ForwardedIconComponent name="Command" className="h-3 w-3" />
) : (
shortcutWPlus[0]
)}
{shortcutWPlus.map((key, idx) => {
if (idx > 0) {
return <span className="ml-0.5"> {key.toUpperCase()} </span>;
return <span className=""> {key.toUpperCase()} </span>;
}
})}
</>
</span>
);
}

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

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

13
src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
View file

@ -170,19 +170,17 @@ 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);
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(share, handleShareWShortcut, { preventDefault });
useHotkeys(component, handleShareWShortcut, { preventDefault });
useHotkeys(code, handleCodeWShortcut, { preventDefault });
useHotkeys(advanced, handleAdvancedWShortcut, { preventDefault });
useHotkeys(save, handleSaveWShortcut, { preventDefault });
@ -352,7 +350,7 @@ export default function NodeToolbarComponent({
<div className="flex justify-center">
<span> {name} </span>
<span
className={`ml-3 flex items-center rounded-sm bg-muted px-1 py-[0.2] text-muted-foreground`}
className={`ml-3 flex items-center rounded-sm bg-muted px-1.5 py-[0.1em] text-lg text-muted-foreground`}
>
<RenderIcons
isMac={isMac}
@ -614,7 +612,8 @@ export default function NodeToolbarComponent({
>
<ToolbarSelectItem
shortcut={
shortcuts.find((obj) => obj.name === "Share")?.shortcut!
shortcuts.find((obj) => obj.name === "Component Share")
?.shortcut!
}
value={"Share"}
icon={"Share3"}
@ -707,7 +706,7 @@ export default function NodeToolbarComponent({
/>{" "}
<span className="">Delete</span>{" "}
<span
className={`justify absolute right-2 top-2 flex items-center rounded-sm px-1 py-[0.2] ${deleteIsFocus ? " " : "bg-muted"}`}
className={` absolute right-2 top-2 flex items-center justify-center rounded-sm px-1 py-[0.2] ${deleteIsFocus ? " " : "bg-muted"}`}
>
<IconComponent
name="Delete"

4
src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/toolbarSelectItem/index.tsx
View file

@ -19,7 +19,7 @@ export default function ToolbarSelectItem({
}
});
const filteredShortcut = fixedShortcut.filter(
(key) => !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}
</span>
<span
className={`absolute right-2 top-[0.43em] flex items-center rounded-sm bg-muted px-1 py-[0.2] text-muted-foreground `}
className={`absolute right-2 top-[0.43em] flex items-center rounded-sm bg-muted px-1.5 py-[0.1em] text-muted-foreground `}
>
<RenderIcons
isMac={isMac}

6
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",
@ -16,14 +18,14 @@ export const useShortcutsStore = create<shortcutsStoreType>((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",

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;

6
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;
@ -34,7 +36,7 @@ export type shortcutsStoreType = {
code: string;
copy: string;
duplicate: string;
share: string;
component: string;
docs: string;
save: string;
delete: string;
@ -46,7 +48,7 @@ export type shortcutsStoreType = {
shortcut: string;
}>;
setShortcuts: (
newShortcuts: Array<{ name: string; shortcut: string }>
newShortcuts: Array<{ name: string; shortcut: string }>,
) => void;
getShortcutsFromStorage: () => void;
};