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

155
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.
// Make an asynchronous API call to retrieve all data. let result = await getAll();
let result = await getAll();
// Update the state of the component with the retrieved data.
setData(result.data);
// Set the types by reducing over the keys of the result data and updating the accumulator.
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]);
// Update the state of the component with the retrieved data.
setData(result.data);
function onDragStart(event: React.DragEvent<any>, data:{type:string,node?:APIClassType}) { // Set the types by reducing over the keys of the result data and updating the accumulator.
//start drag event setTypes(
event.dataTransfer.effectAllowed = "move"; Object.keys(result.data).reduce((acc, curr) => {
event.dataTransfer.setData("json", JSON.stringify(data)); 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]);
return ( function onDragStart(
<div className="mt-1 w-full"> event: React.DragEvent<any>,
{Object.keys(data).map((d:keyof APIObjectType, i) => ( data: { type: string; node?: APIClassType }
<DisclosureComponent ) {
key={i} //start drag event
button={{ title: nodeNames[d]??nodeNames.unknown, Icon: nodeIcons[d]??nodeIcons.unknown }} event.dataTransfer.effectAllowed = "move";
> event.dataTransfer.setData("json", JSON.stringify(data));
<div className="p-2 flex flex-col gap-2"> }
{Object.keys(data[d]).map((t: string, k) => (
<div key={k}> return (
<div <div className="mt-1 w-full">
draggable {Object.keys(data).map((d: keyof APIObjectType, i) => (
className={" cursor-grab border-l-8 rounded-l-md"} <DisclosureComponent
style={{ borderLeftColor: nodeColors[d]??nodeColors.unknown }} key={i}
onDragStart={(event) => button={{
onDragStart(event, { title: nodeNames[d] ?? nodeNames.unknown,
type: t, Icon: nodeIcons[d] ?? nodeIcons.unknown,
node: data[d][t], }}
}) >
} <div className="p-2 flex flex-col gap-2">
> {Object.keys(data[d]).map((t: string, k) => (
<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"> <div key={k}>
<span className="text-black dark:text-white w-36 truncate text-xs">{t}</span> <div
<Bars2Icon className="w-4 h-6 text-gray-400 dark:text-gray-600" /> draggable
</div> className={" cursor-grab border-l-8 rounded-l-md"}
</div> style={{
</div> borderLeftColor: nodeColors[d] ?? nodeColors.unknown,
))} }}
</div> onDragStart={(event) =>
</DisclosureComponent> onDragStart(event, {
))} type: t,
</div> 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">
{t}
</span>
<Bars2Icon className="w-4 h-6 text-gray-400 dark:text-gray-600" />
</div>
</div>
</div>
))}
{Object.keys(data[d]).length===0 && <div className="text-gray-400 text-center">Coming soon</div>}
</div>
</DisclosureComponent>
))}
</div>
);
} }