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

Formatting project

Browse source
This commit is contained in:
Cristhian Zanforlin Lousa 2023-06-14 21:22:45 -03:00
commit 86eb9af794
21 changed files with 470 additions and 492 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -59,8 +59,7 @@ export default function ParameterComponent({
data.node.template[name]?.value ?? false
);
useEffect(() => {
}, [closePopUp, data.node.template]);
useEffect(() => {}, [closePopUp, data.node.template]);
const { reactFlowInstance } = useContext(typesContext);
let disabled =
@ -115,7 +114,9 @@ export default function ParameterComponent({
className="w-full flex flex-wrap justify-between items-center bg-muted dark:bg-gray-800 dark:text-white mt-1 px-5 py-2"
>
<>
<div className={"text-sm truncate w-full " + (left ? "" : "text-end")}>
<div
className={"text-sm truncate w-full " + (left ? "" : "text-end")}
>
{title}
<span className="text-red-600">{required ? " *" : ""}</span>
</div>
@ -169,7 +170,6 @@ export default function ParameterComponent({
}
onChange={(t: string[]) => {
data.node.template[name].value = t;
}}
/>
) : data.node.template[name].multiline ? (
@ -178,7 +178,6 @@ export default function ParameterComponent({
value={data.node.template[name].value ?? ""}
onChange={(t: string) => {
data.node.template[name].value = t;
}}
/>
) : (
@ -189,7 +188,6 @@ export default function ParameterComponent({
value={data.node.template[name].value ?? ""}
onChange={(t) => {
data.node.template[name].value = t;
}}
/>
)}
@ -202,7 +200,6 @@ export default function ParameterComponent({
setEnabled={(t) => {
data.node.template[name].value = t;
setEnabled(t);
}}
/>
</div>
@ -235,7 +232,6 @@ export default function ParameterComponent({
value={data.node.template[name].value ?? ""}
onChange={(t: string) => {
data.node.template[name].value = t;
}}
/>
) : left === true && type === "file" ? (
@ -249,7 +245,6 @@ export default function ParameterComponent({
suffixes={data.node.template[name].suffixes}
onFileChange={(t: string) => {
data.node.template[name].content = t;
}}
></InputFileComponent>
) : left === true && type === "int" ? (
@ -260,7 +255,6 @@ export default function ParameterComponent({
value={data.node.template[name].value ?? ""}
onChange={(t) => {
data.node.template[name].value = t;
}}
/>
</div>
@ -270,7 +264,6 @@ export default function ParameterComponent({
value={data.node.template[name].value ?? ""}
onChange={(t: string) => {
data.node.template[name].value = t;
}}
/>
) : (
@ -279,6 +272,5 @@ export default function ParameterComponent({
</>
</div>
</>
);
}

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

@ -101,8 +101,7 @@ export default function GenericNode({
return;
}
useEffect(() => {
}, [closePopUp, data.node.template]);
useEffect(() => {}, [closePopUp, data.node.template]);
return (
<>

1
src/frontend/src/components/ShadTooltipComponent/index.tsx
View file

@ -18,7 +18,6 @@ const ShadTooltip = (props) => {
>
{props.content}
</TooltipContent>
</Tooltip>
</TooltipProvider>
);

41
src/frontend/src/components/cardComponent/index.tsx
View file

@ -4,10 +4,25 @@ import { Link } from "react-router-dom";
import { TabsContext } from "../../contexts/tabsContext";
import { FlowType } from "../../types/flow";
import { gradients } from "../../utils";
import { CardTitle, CardDescription, CardFooter, Card, CardHeader } from "../ui/card";
import {
CardTitle,
CardDescription,
CardFooter,
Card,
CardHeader,
} from "../ui/card";
export const CardComponent = ({ flow, id, onDelete, button }: { flow: FlowType; id: string, onDelete?: () => void, button?: JSX.Element }) => {
export const CardComponent = ({
flow,
id,
onDelete,
button,
}: {
flow: FlowType;
id: string;
onDelete?: () => void;
button?: JSX.Element;
}) => {
const { removeFlow } = useContext(TabsContext);
return (
@ -20,19 +35,14 @@ export const CardComponent = ({ flow, id, onDelete, button }: { flow: FlowType;
"rounded-full w-8 h-8 flex items-center justify-center text-2xl " +
gradients[parseInt(flow.id.slice(0, 6), 16) % gradients.length]
}
>
</span>
<span className="flex-1 truncate-doubleline">
{flow.name}
</span>
></span>
<span className="flex-1 truncate-doubleline">{flow.name}</span>
</div>
{onDelete &&
<button
onClick={onDelete}
>
{onDelete && (
<button onClick={onDelete}>
<Trash2 className="w-5 text-primary opacity-0 group-hover:opacity-100 transition-all" />
</button>
}
)}
</CardTitle>
<CardDescription className="pt-2 pb-2">
<div className="truncate-doubleline">
@ -53,10 +63,7 @@ export const CardComponent = ({ flow, id, onDelete, button }: { flow: FlowType;
<span className="text-base">&nbsp;</span>OpenAI+
</Badge> */}
</div>
{button &&
button
}
{button && button}
</div>
</CardFooter>
</Card>

3
src/frontend/src/components/dropdownComponent/index.tsx
View file

@ -29,7 +29,6 @@ export default function Dropdown({
<>
<div className={editNode ? "mt-1" : "relative mt-1"}>
<Listbox.Button
className={
editNode
? "relative pr-8 placeholder:text-center block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md shadow-sm sm:text-sm border-gray-300 border-1" +
@ -38,11 +37,9 @@ export default function Dropdown({
INPUT_STYLE
}
>
<span className="block truncate w-full">{internalValue}</span>
<span
className={
"pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
}
>

8
src/frontend/src/components/headerComponent/components/menuBar/index.tsx
View file

@ -49,15 +49,11 @@ export const MenuBar = ({ flows, tabId }) => {
</Link>
<div className="flex items-center font-medium text-sm rounded-md py-1 px-1.5 gap-0.5">
<DropdownMenu>
<DropdownMenuTrigger >
<Button
className="gap-2 flex items-center"
variant="primary"
>
<DropdownMenuTrigger>
<Button className="gap-2 flex items-center" variant="primary">
{current_flow.name}
<ChevronDown className="w-4 h-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-44">
<DropdownMenuLabel>Edit</DropdownMenuLabel>

5
src/frontend/src/components/headerComponent/index.tsx
View file

@ -28,10 +28,7 @@ export default function Header() {
<span className="text-2xl ml-4">⛓️</span>
</Link>
{flows.findIndex((f) => tabId === f.id) !== -1 && tabId !== "" && (
<MenuBar
flows={flows}
tabId={tabId}
/>
<MenuBar flows={flows} tabId={tabId} />
)}
</div>
<div className="flex gap-2 items-center">

3
src/frontend/src/components/ui/button.tsx
View file

@ -15,8 +15,7 @@ const buttonVariants = cva(
"border border-input hover:bg-accent hover:text-accent-foreground",
primary:
"border bg-background text-secondary-foreground hover:bg-background/80 hover:shadow-sm",
secondary:
"bg-muted text-secondary-foreground hover:bg-secondary/80",
secondary: "bg-muted text-secondary-foreground hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "underline-offset-4 hover:underline text-primary",
},

1
src/frontend/src/constants.tsx
View file

@ -129,4 +129,3 @@ export const EXPORT_CODE_DIALOG =
*/
export const INPUT_STYLE =
" focus:ring-1 focus:ring-offset-1 focus:ring-ring focus:outline-none ";

2
src/frontend/src/contexts/tabsContext.tsx
View file

@ -549,7 +549,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
uploadFlows,
uploadFlow,
getNodeId,
paste
paste,
}}
>
{children}

36
src/frontend/src/contexts/undoRedoContext.tsx
View file

@ -1,4 +1,10 @@
import { createContext, useCallback, useContext, useEffect, useState } from "react";
import {
createContext,
useCallback,
useContext,
useEffect,
useState,
} from "react";
import { Edge, Node, useReactFlow } from "reactflow";
import { cloneDeep } from "lodash";
import { TabsContext } from "./tabsContext";
@ -12,20 +18,20 @@ type undoRedoContextType = {
type UseUndoRedoOptions = {
maxHistorySize: number;
enableShortcuts: boolean;
};
};
type UseUndoRedo = (options?: UseUndoRedoOptions) => {
type UseUndoRedo = (options?: UseUndoRedoOptions) => {
undo: () => void;
redo: () => void;
takeSnapshot: () => void;
canUndo: boolean;
canRedo: boolean;
};
};
type HistoryItem = {
type HistoryItem = {
nodes: Node[];
edges: Edge[];
};
};
const initialValue = {
undo: () => {},
@ -36,7 +42,7 @@ const initialValue = {
const defaultOptions: UseUndoRedoOptions = {
maxHistorySize: 100,
enableShortcuts: true,
};
};
export const undoRedoContext = createContext<undoRedoContextType>(initialValue);
@ -45,14 +51,15 @@ export function UndoRedoProvider({ children }) {
const [past, setPast] = useState<HistoryItem[][]>(flows.map(() => []));
const [future, setFuture] = useState<HistoryItem[][]>(flows.map(() => []));
const [tabIndex, setTabIndex] = useState(flows.findIndex((f) => f.id === tabId));
const [tabIndex, setTabIndex] = useState(
flows.findIndex((f) => f.id === tabId)
);
useEffect(() => {
// whenever the flows variable changes, we need to add one array to the past and future states
setPast((old) => flows.map((f, i) => (old[i] ? old[i] : [])));
setFuture((old) => flows.map((f, i) => (old[i] ? old[i] : [])));
setTabIndex(flows.findIndex((f) => f.id === tabId));
}, [flows, tabId]);
const { setNodes, setEdges, getNodes, getEdges } = useReactFlow();
@ -77,16 +84,7 @@ export function UndoRedoProvider({ children }) {
newFuture[tabIndex] = [];
return newFuture;
});
}, [
getNodes,
getEdges,
past,
future,
flows,
tabId,
setPast,
setFuture,
]);
}, [getNodes, getEdges, past, future, flows, tabId, setPast, setFuture]);
const undo = useCallback(() => {
// get the last state that we want to go back to

8
src/frontend/src/modals/EditNodeModal/index.tsx
View file

@ -172,7 +172,6 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
}
onChange={(t: string[]) => {
data.node.template[n].value = t;
}}
/>
) : data.node.template[n].multiline ? (
@ -182,7 +181,6 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
value={data.node.template[n].value ?? ""}
onChange={(t: string) => {
data.node.template[n].value = t;
}}
/>
) : (
@ -195,7 +193,6 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
value={data.node.template[n].value ?? ""}
onChange={(t) => {
data.node.template[n].value = t;
}}
/>
)}
@ -208,7 +205,6 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
setEnabled={(e) => {
data.node.template[n].value = e;
setEnabled(e);
}}
disabled={false}
/>
@ -221,7 +217,6 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
value={data.node.template[n].value ?? ""}
onChange={(t) => {
data.node.template[n].value = t;
}}
/>
</div>
@ -249,7 +244,6 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
value={data.node.template[n].value ?? ""}
onChange={(t) => {
data.node.template[n].value = t;
}}
/>
</div>
@ -266,7 +260,6 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
suffixes={data.node.template[n].suffixes}
onFileChange={(t: string) => {
data.node.template[n].content = t;
}}
></InputFileComponent>
</div>
@ -278,7 +271,6 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
value={data.node.template[n].value ?? ""}
onChange={(t: string) => {
data.node.template[n].value = t;
}}
/>
</div>

9
src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
View file

@ -70,7 +70,6 @@ export default function ModalField({
}
onChange={(t: string[]) => {
data.node.template[name].value = t;
}}
/>
) : data.node.template[name].multiline ? (
@ -79,7 +78,6 @@ export default function ModalField({
value={data.node.template[name].value ?? ""}
onChange={(t: string) => {
data.node.template[name].value = t;
}}
/>
) : (
@ -89,7 +87,6 @@ export default function ModalField({
value={data.node.template[name].value ?? ""}
onChange={(t) => {
data.node.template[name].value = t;
}}
/>
)}
@ -103,7 +100,6 @@ export default function ModalField({
setEnabled={(t) => {
data.node.template[name].value = t;
setEnabled(t);
}}
/>
</div>
@ -114,7 +110,6 @@ export default function ModalField({
value={data.node.template[name].value ?? ""}
onChange={(t) => {
data.node.template[name].value = t;
}}
/>
</div>
@ -133,7 +128,6 @@ export default function ModalField({
value={data.node.template[name].value ?? ""}
onChange={(t) => {
data.node.template[name].value = t;
}}
/>
</div>
@ -149,7 +143,6 @@ export default function ModalField({
suffixes={data.node.template[name].suffixes}
onFileChange={(t: string) => {
data.node.template[name].content = t;
}}
></InputFileComponent>
</div>
@ -160,7 +153,6 @@ export default function ModalField({
value={data.node.template[name].value ?? ""}
onChange={(t: string) => {
data.node.template[name].value = t;
}}
/>
</div>
@ -171,7 +163,6 @@ export default function ModalField({
value={data.node.template[name].value ?? ""}
onChange={(t: string) => {
data.node.template[name].value = t;
}}
/>
</div>

3
src/frontend/src/modals/exportModal/index.tsx
View file

@ -20,6 +20,7 @@ import EditFlowSettings from "../../components/nameInputComponent";
import { Label } from "../../components/ui/label";
import { Input } from "../../components/ui/input";
import { Textarea } from "../../components/ui/textarea";
import { Download } from "lucide-react";
export default function ExportModal() {
const [open, setOpen] = useState(true);
@ -48,7 +49,7 @@ export default function ExportModal() {
<DialogHeader>
<DialogTitle className="flex items-center">
<span className="pr-2">Export</span>
<ArrowDownTrayIcon
<Download
className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
aria-hidden="true"
/>

15
src/frontend/src/pages/CommunityPage/index.tsx
View file

@ -85,12 +85,19 @@ export default function CommunityPage() {
</div>
</div>
<span className="flex pb-8 px-6 w-[70%] text-muted-foreground">
Discover and learn from shared examples by the LangFlow community. We welcome new example contributions that can help our community explore new and powerful features.
Discover and learn from shared examples by the LangFlow community. We
welcome new example contributions that can help our community explore
new and powerful features.
</span>
<div className="w-full p-4 grid gap-4 md:grid-cols-2 lg:grid-cols-4">
{!loadingExamples &&
examples.map((flow, idx) => (
<CardComponent key={idx} flow={flow} id={flow.id} button={<Button
<CardComponent
key={idx}
flow={flow}
id={flow.id}
button={
<Button
variant="outline"
size="sm"
className="whitespace-nowrap "
@ -102,7 +109,9 @@ export default function CommunityPage() {
>
<GitFork className="w-4 mr-2" />
Fork Example
</Button>}/>
</Button>
}
/>
))}
</div>
</div>

16
src/frontend/src/pages/FlowPage/index.tsx
View file

@ -3,17 +3,19 @@ import Page from "./components/PageComponent";
import { TabsContext } from "../../contexts/tabsContext";
import { useParams } from "react-router-dom";
export default function FlowPage(){
export default function FlowPage() {
const { flows, tabId, setTabId } = useContext(TabsContext);
const {id} = useParams();
const { id } = useParams();
useEffect(() => {
setTabId(id);
}, [id])
}, [id]);
return (
<div className="h-full w-full overflow-hidden">
{flows.length > 0 && tabId !== "" && flows.findIndex(flow => flow.id === tabId) !== -1 &&
<Page flow={flows.find(flow => flow.id === tabId)} />
}
{flows.length > 0 &&
tabId !== "" &&
flows.findIndex((flow) => flow.id === tabId) !== -1 && (
<Page flow={flows.find((flow) => flow.id === tabId)} />
)}
</div>
)
);
}

16
src/frontend/src/routes.tsx
View file

@ -1,18 +1,18 @@
import { Route, Routes } from "react-router-dom"
import { Route, Routes } from "react-router-dom";
import HomePage from "./pages/MainPage";
import FlowPage from "./pages/FlowPage";
import CommunityPage from "./pages/CommunityPage";
const Router = () => {
return(
return (
<Routes>
<Route path="/" element={<HomePage/>}/>
<Route path="/community" element={<CommunityPage/>}/>
<Route path="/" element={<HomePage />} />
<Route path="/community" element={<CommunityPage />} />
<Route path="/flow/:id/">
<Route path="" element={<FlowPage/>}/>
<Route path="" element={<FlowPage />} />
</Route>
</Routes>
)
}
);
};
export default Router;
export default Router;