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

code format

Browse source
This commit is contained in:
anovazzi1 2024-04-30 14:37:12 -03:00
commit 854afe02ac
15 changed files with 106 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/frontend/src/App.tsx
View file

@ -22,7 +22,6 @@ import useFlowsManagerStore from "./stores/flowsManagerStore";
import { useGlobalVariablesStore } from "./stores/globalVariables";
import { useStoreStore } from "./stores/storeStore";
import { useTypesStore } from "./stores/typesStore";
import { getUnavailableFields } from "./utils/utils";
export default function App() {
const removeFromTempNotificationList = useAlertStore(
(state) => state.removeFromTempNotificationList
@ -48,7 +47,9 @@ export default function App() {
const setGlobalVariables = useGlobalVariablesStore(
(state) => state.setGlobalVariables
);
const setUnavailableFields = useGlobalVariablesStore((state) => state.setUnavaliableFields);
const setUnavailableFields = useGlobalVariablesStore(
(state) => state.setUnavaliableFields
);
const checkHasStore = useStoreStore((state) => state.checkHasStore);
const navigate = useNavigate();
const dark = useDarkStore((state) => state.dark);

19
src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
View file

@ -3,6 +3,7 @@ import { registerGlobalVariable } from "../../controllers/API";
import BaseModal from "../../modals/baseModal";
import useAlertStore from "../../stores/alertStore";
import { useGlobalVariablesStore } from "../../stores/globalVariables";
import { useTypesStore } from "../../stores/typesStore";
import { ResponseErrorDetailAPI } from "../../types/api";
import ForwardedIconComponent from "../genericIconComponent";
import InputComponent from "../inputComponent";
@ -10,7 +11,6 @@ import { Button } from "../ui/button";
import { Input } from "../ui/input";
import { Label } from "../ui/label";
import { Textarea } from "../ui/textarea";
import { useTypesStore } from "../../stores/typesStore";
//TODO IMPLEMENT FORM LOGIC
@ -22,18 +22,27 @@ export default function AddNewVariableButton({ children }): JSX.Element {
const [open, setOpen] = useState(false);
const setErrorData = useAlertStore((state) => state.setErrorData);
const componentFields = useTypesStore((state) => state.ComponentFields);
const unavaliableFields = useGlobalVariablesStore((state) => state.unavaliableFields);
const availableFields = Array.from(componentFields).filter((field) => !unavaliableFields.has(field));
const unavaliableFields = useGlobalVariablesStore(
(state) => state.unavaliableFields
);
const availableFields = Array.from(componentFields).filter(
(field) => !unavaliableFields.has(field)
);
const addGlobalVariable = useGlobalVariablesStore(
(state) => state.addGlobalVariable
);
function handleSaveVariable() {
let data: { name: string; value: string; type?: string; default_fields?: string[] } = {
let data: {
name: string;
value: string;
type?: string;
default_fields?: string[];
} = {
name: key,
type,
value,
default_fields: fields
default_fields: fields,
};
registerGlobalVariable(data)
.then((res) => {

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

@ -33,7 +33,9 @@ export default function Dropdown({
const refButton = useRef<HTMLButtonElement>(null);
const PopoverContentDropdown = children ? PopoverContent : PopoverContentWithoutPortal;
const PopoverContentDropdown = children
? PopoverContent
: PopoverContentWithoutPortal;
return (
<>
@ -77,7 +79,11 @@ export default function Dropdown({
)}
<PopoverContentDropdown
className="nocopy nowheel nopan nodelete nodrag noundo p-0"
style={children ? {} : { minWidth: refButton?.current?.clientWidth ?? "200px" }}
style={
children
? {}
: { minWidth: refButton?.current?.clientWidth ?? "200px" }
}
>
<Command>
<CommandInput placeholder="Search options..." className="h-9" />

4
src/frontend/src/components/inputGlobalComponent/index.tsx
View file

@ -1,5 +1,4 @@
import { useEffect } from "react";
import { deleteGlobalVariable } from "../../controllers/API";
import DeleteConfirmationModal from "../../modals/DeleteConfirmationModal";
import useAlertStore from "../../stores/alertStore";
import { useGlobalVariablesStore } from "../../stores/globalVariables";
@ -43,7 +42,8 @@ export default function InputGlobalComponent({
function handleDelete(key: string) {
const id = getVariableId(key);
if (id !== undefined) {
removeGlobalVariable(key).then((_) => {
removeGlobalVariable(key)
.then((_) => {
if (
data?.node?.template[name].value === key &&
data?.node?.template[name].load_from_db

8
src/frontend/src/controllers/API/index.ts
View file

@ -860,14 +860,14 @@ export async function requestLogout() {
}
export async function getGlobalVariables(): Promise<{
[key: string]: { id: string; type: string,default_fields:string[] };
[key: string]: { id: string; type: string; default_fields: string[] };
}> {
const globalVariables = {};
(await api.get(`${BASE_URL_API}variables/`)).data.forEach((element) => {
globalVariables[element.name] = {
id: element.id,
type: element.type,
default_fields:element.default_fields
default_fields: element.default_fields,
};
});
return globalVariables;
@ -877,7 +877,7 @@ export async function registerGlobalVariable({
name,
value,
type,
default_fields=[],
default_fields = [],
}: {
name: string;
value: string;
@ -888,7 +888,7 @@ export async function registerGlobalVariable({
name,
value,
type,
default_fields:default_fields
default_fields: default_fields,
});
}

20
src/frontend/src/pages/SettingsPage/index.tsx
View file

@ -16,16 +16,16 @@ export default function SettingsPage(): JSX.Element {
const sidebarNavItems = [
{
title: "General",
href: "/settings/general",
icon: (
<ForwardedIconComponent
name="SlidersHorizontal"
className="mx-[0.08rem] w-[1.1rem] stroke-[1.5]"
/>
),
},
/* {
title: "General",
href: "/settings/general",
icon: (
<ForwardedIconComponent
name="SlidersHorizontal"
className="mx-[0.08rem] w-[1.1rem] stroke-[1.5]"
/>
),
},
/* {
title: "Theme",
href: "/settings/theme",
icon: (

23
src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
View file

@ -34,19 +34,29 @@ export default function GlobalVariablesPage() {
);
};
const [rowData, setRowData] = useState<{ type: string | undefined;
id: string; name: string; default_fields:string | undefined }[]>();
const [rowData, setRowData] =
useState<
{
type: string | undefined;
id: string;
name: string;
default_fields: string | undefined;
}[]
>();
useEffect(() => {
const rows:Array<{type: string | undefined; id: string;
name: string;default_fields:string | undefined}> = [];
const rows: Array<{
type: string | undefined;
id: string;
name: string;
default_fields: string | undefined;
}> = [];
globalVariablesEntries.forEach((e) => {
const globalVariableObj = globalVariables[e];
rows.push({
type: globalVariableObj.type,
id: globalVariableObj.id,
default_fields: (globalVariableObj.default_fields??[]).join(", "),
default_fields: (globalVariableObj.default_fields ?? []).join(", "),
name: e,
});
});
@ -92,7 +102,6 @@ export default function GlobalVariablesPage() {
flex: 1,
editable: false,
},
]);
const [selectedRows, setSelectedRows] = useState<string[]>([]);

4
src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx
View file

@ -124,9 +124,7 @@ export default function ShortcutsPage() {
<Card x-chunk="dashboard-04-chunk-2">
<CardHeader>
<CardTitle>Flow</CardTitle>
<CardDescription>
Shortcuts relating to the flow.
</CardDescription>
<CardDescription>Shortcuts relating to the flow.</CardDescription>
</CardHeader>
<CardContent>
<TableComponent

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

@ -11,7 +11,6 @@ import ApiKeysPage from "./pages/ApiKeysPage";
import FlowPage from "./pages/FlowPage";
import HomePage from "./pages/MainPage";
import ComponentsComponent from "./pages/MainPage/components/components";
import ProfileSettingsPage from "./pages/ProfileSettingsPage";
import SettingsPage from "./pages/SettingsPage";
import GeneralPage from "./pages/SettingsPage/pages/GeneralPage";
import GlobalVariablesPage from "./pages/SettingsPage/pages/GlobalVariablesPage";

20
src/frontend/src/stores/flowsManagerStore.ts
View file

@ -83,7 +83,10 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
);
useTypesStore.setState((state) => ({
data: { ...state.data, ["saved_components"]: data },
ComponentFields: extractFieldsFromComponenents({...state.data, ["saved_components"]: data }),
ComponentFields: extractFieldsFromComponenents({
...state.data,
["saved_components"]: data,
}),
}));
set({ isLoading: false });
resolve();
@ -199,7 +202,10 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
set({ isLoading: false });
useTypesStore.setState((state) => ({
data: { ...state.data, ["saved_components"]: data },
ComponentFields: extractFieldsFromComponenents({...state.data, ["saved_components"]: data }),
ComponentFields: extractFieldsFromComponenents({
...state.data,
["saved_components"]: data,
}),
}));
}, 200);
// addFlowToLocalState(newFlow);
@ -222,7 +228,10 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
set({ isLoading: false });
useTypesStore.setState((state) => ({
data: { ...state.data, ["saved_components"]: data },
ComponentFields: extractFieldsFromComponenents({...state.data, ["saved_components"]: data }),
ComponentFields: extractFieldsFromComponenents({
...state.data,
["saved_components"]: data,
}),
}));
// Return the id
@ -252,7 +261,10 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
set({ isLoading: false });
useTypesStore.setState((state) => ({
data: { ...state.data, ["saved_components"]: data },
ComponentFields: extractFieldsFromComponenents({...state.data, ["saved_components"]: data }),
ComponentFields: extractFieldsFromComponenents({
...state.data,
["saved_components"]: data,
}),
}));
resolve();
});

12
src/frontend/src/stores/globalVariables.ts
View file

@ -1,6 +1,6 @@
import { create } from "zustand";
import { GlobalVariablesStore } from "../types/zustand/globalVariables";
import { deleteGlobalVariable } from "../controllers/API";
import { GlobalVariablesStore } from "../types/zustand/globalVariables";
import { getUnavailableFields } from "../utils/utils";
export const useGlobalVariablesStore = create<GlobalVariablesStore>(
@ -21,7 +21,7 @@ export const useGlobalVariablesStore = create<GlobalVariablesStore>(
set({
globalVariables: variables,
globalVariablesEntries: Object.keys(variables),
unavaliableFields: getUnavailableFields(variables)
unavaliableFields: getUnavailableFields(variables),
});
},
addGlobalVariable: (name, id, type, default_fields) => {
@ -30,19 +30,19 @@ export const useGlobalVariablesStore = create<GlobalVariablesStore>(
set({
globalVariables: newVariables,
globalVariablesEntries: Object.keys(newVariables),
unavaliableFields: getUnavailableFields(newVariables)
unavaliableFields: getUnavailableFields(newVariables),
});
},
removeGlobalVariable:async (name) => {
removeGlobalVariable: async (name) => {
const id = get().globalVariables[name]?.id;
if (id === undefined) return;
await deleteGlobalVariable(id)
await deleteGlobalVariable(id);
const newVariables = { ...get().globalVariables };
delete newVariables[name];
set({
globalVariables: newVariables,
globalVariablesEntries: Object.keys(newVariables),
unavaliableFields: getUnavailableFields(newVariables)
unavaliableFields: getUnavailableFields(newVariables),
});
},
getVariableId: (name) => {

13
src/frontend/src/stores/typesStore.ts
View file

@ -2,7 +2,11 @@ import { create } from "zustand";
import { getAll } from "../controllers/API";
import { APIDataType } from "../types/api";
import { TypesStoreType } from "../types/zustand/types";
import { extractFieldsFromComponenents, templatesGenerator, typesGenerator } from "../utils/reactflowUtils";
import {
extractFieldsFromComponenents,
templatesGenerator,
typesGenerator,
} from "../utils/reactflowUtils";
import useAlertStore from "./alertStore";
import useFlowsManagerStore from "./flowsManagerStore";
@ -28,7 +32,10 @@ export const useTypesStore = create<TypesStoreType>((set, get) => ({
set((old) => ({
types: typesGenerator(data),
data: { ...old.data, ...data },
ComponentFields: extractFieldsFromComponenents({ ...old.data, ...data }),
ComponentFields: extractFieldsFromComponenents({
...old.data,
...data,
}),
templates: templatesGenerator(data),
}));
setLoading(false);
@ -50,7 +57,7 @@ export const useTypesStore = create<TypesStoreType>((set, get) => ({
},
setData: (change: APIDataType | ((old: APIDataType) => APIDataType)) => {
let newChange = typeof change === "function" ? change(get().data) : change;
set({ data: newChange});
set({ data: newChange });
get().setComponentFields(extractFieldsFromComponenents(newChange));
},
}));

7
src/frontend/src/types/zustand/globalVariables/index.ts
View file

@ -9,7 +9,12 @@ export type GlobalVariablesStore = {
};
};
setGlobalVariables: (variables: {
[name: string]: { id: string; type?: string; default_fields?: string[],value?: string };
[name: string]: {
id: string;
type?: string;
default_fields?: string[];
value?: string;
};
}) => void;
addGlobalVariable: (
name: string,

9
src/frontend/src/utils/reactflowUtils.ts
View file

@ -1234,13 +1234,16 @@ export function templatesGenerator(data: APIObjectType) {
}, {});
}
export function extractFieldsFromComponenents(data:APIObjectType ) {
export function extractFieldsFromComponenents(data: APIObjectType) {
const fields = new Set<string>();
Object.keys(data).forEach((key) => {
Object.keys(data[key]).forEach((kind) => {
Object.keys(data[key][kind].template).forEach((field) => {
if(data[key][kind].template[field].display_name && data[key][kind].template[field].show)
fields.add(data[key][kind].template[field].display_name!);
if (
data[key][kind].template[field].display_name &&
data[key][kind].template[field].show
)
fields.add(data[key][kind].template[field].display_name!);
});
});
});

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

@ -91,12 +91,12 @@ export function toTitleCase(
.join(" ");
}
export function getUnavailableFields(
variables:{[key: string]: { default_fields?:string[] }}
): Set<string> {
export function getUnavailableFields(variables: {
[key: string]: { default_fields?: string[] };
}): Set<string> {
const set = new Set<string>();
Object.keys(variables).forEach((key) => {
if(variables[key].default_fields){
if (variables[key].default_fields) {
variables[key].default_fields!.forEach((field) => {
set.add(field);
});