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

coming soon message for empty components

Browse source
This commit is contained in:
anovazzi1 2023-04-04 22:08:31 -03:00
commit 092640e9e3
1 changed files with 81 additions and 74 deletions
Download patch file Download diff file Expand all files Collapse all files

153
src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
View file

@ -1,86 +1,93 @@
import { Bars2Icon } from "@heroicons/react/24/outline"; import { Bars2Icon } from "@heroicons/react/24/outline";
import DisclosureComponent from "../DisclosureComponent"; import DisclosureComponent from "../DisclosureComponent";
import { import { nodeColors, nodeIcons, nodeNames } from "../../../../utils";
nodeColors,
nodeIcons,
nodeNames,
} from "../../../../utils";
import { useContext, useEffect, useState } from "react"; import { useContext, useEffect, useState } from "react";
import { getAll } from "../../../../controllers/API"; import { getAll } from "../../../../controllers/API";
import { typesContext } from "../../../../contexts/typesContext"; import { typesContext } from "../../../../contexts/typesContext";
import { APIClassType, APIKindType, APIObjectType } from "../../../../types/api"; import {
APIClassType,
APIKindType,
APIObjectType,
} from "../../../../types/api";
export default function ExtraSidebar() { export default function ExtraSidebar() {
const [data, setData] = useState({}); const [data, setData] = useState({});
const { setTypes} = useContext(typesContext); const { setTypes } = useContext(typesContext);
useEffect(() => { useEffect(() => {
async function getTypes():Promise<void>{ async function getTypes(): Promise<void> {
// Make an asynchronous API call to retrieve all data.
let result = await getAll();
// Make an asynchronous API call to retrieve all data. // Update the state of the component with the retrieved data.
let result = await getAll(); setData(result.data);
// Update the state of the component with the retrieved data. // Set the types by reducing over the keys of the result data and updating the accumulator.
setData(result.data); setTypes(
Object.keys(result.data).reduce((acc, curr) => {
Object.keys(result.data[curr]).forEach((c: keyof APIKindType) => {
acc[c] = curr;
// Add the base classes to the accumulator as well.
result.data[curr][c].base_classes?.forEach((b) => {
acc[b] = curr;
});
});
return acc;
}, {})
);
}
// Call the getTypes function.
getTypes();
}, [setTypes]);
// Set the types by reducing over the keys of the result data and updating the accumulator. function onDragStart(
setTypes( event: React.DragEvent<any>,
Object.keys(result.data).reduce( data: { type: string; node?: APIClassType }
(acc, curr) => { ) {
Object.keys(result.data[curr]).forEach((c:keyof APIKindType) => { //start drag event
acc[c] = curr; event.dataTransfer.effectAllowed = "move";
// Add the base classes to the accumulator as well. event.dataTransfer.setData("json", JSON.stringify(data));
result.data[curr][c].base_classes?.forEach((b) => { }
acc[b] = curr;
});
});
return acc;
},{}
)
);
}
// Call the getTypes function.
getTypes();
}, [setTypes]);
return (
function onDragStart(event: React.DragEvent<any>, data:{type:string,node?:APIClassType}) { <div className="mt-1 w-full">
//start drag event {Object.keys(data).map((d: keyof APIObjectType, i) => (
event.dataTransfer.effectAllowed = "move"; <DisclosureComponent
event.dataTransfer.setData("json", JSON.stringify(data)); key={i}
} button={{
title: nodeNames[d] ?? nodeNames.unknown,
return ( Icon: nodeIcons[d] ?? nodeIcons.unknown,
<div className="mt-1 w-full"> }}
{Object.keys(data).map((d:keyof APIObjectType, i) => ( >
<DisclosureComponent <div className="p-2 flex flex-col gap-2">
key={i} {Object.keys(data[d]).map((t: string, k) => (
button={{ title: nodeNames[d]??nodeNames.unknown, Icon: nodeIcons[d]??nodeIcons.unknown }} <div key={k}>
> <div
<div className="p-2 flex flex-col gap-2"> draggable
{Object.keys(data[d]).map((t: string, k) => ( className={" cursor-grab border-l-8 rounded-l-md"}
<div key={k}> style={{
<div borderLeftColor: nodeColors[d] ?? nodeColors.unknown,
draggable }}
className={" cursor-grab border-l-8 rounded-l-md"} onDragStart={(event) =>
style={{ borderLeftColor: nodeColors[d]??nodeColors.unknown }} onDragStart(event, {
onDragStart={(event) => type: t,
onDragStart(event, { node: data[d][t],
type: t, })
node: data[d][t], }
}) >
} <div className="flex w-full justify-between text-sm px-3 py-1 items-center border-dashed border-gray-400 dark:border-gray-600 border-l-0 rounded-md rounded-l-none border">
> <span className="text-black dark:text-white w-36 truncate text-xs">
<div className="flex w-full justify-between text-sm px-3 py-1 items-center border-dashed border-gray-400 dark:border-gray-600 border-l-0 rounded-md rounded-l-none border"> {t}
<span className="text-black dark:text-white w-36 truncate text-xs">{t}</span> </span>
<Bars2Icon className="w-4 h-6 text-gray-400 dark:text-gray-600" /> <Bars2Icon className="w-4 h-6 text-gray-400 dark:text-gray-600" />
</div> </div>
</div> </div>
</div> </div>
))} ))}
</div> {Object.keys(data[d]).length===0 && <div className="text-gray-400 text-center">Coming soon</div>}
</DisclosureComponent> </div>
))} </DisclosureComponent>
</div> ))}
); </div>
);
} }