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

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

@ -1,14 +1,14 @@
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({});
@ -16,7 +16,6 @@ export default function ExtraSidebar() {
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();
@ -25,8 +24,7 @@ export default function ExtraSidebar() {
// Set the types by reducing over the keys of the result data and updating the accumulator. // Set the types by reducing over the keys of the result data and updating the accumulator.
setTypes( setTypes(
Object.keys(result.data).reduce( Object.keys(result.data).reduce((acc, curr) => {
(acc, curr) => {
Object.keys(result.data[curr]).forEach((c: keyof APIKindType) => { Object.keys(result.data[curr]).forEach((c: keyof APIKindType) => {
acc[c] = curr; acc[c] = curr;
// Add the base classes to the accumulator as well. // Add the base classes to the accumulator as well.
@ -35,16 +33,17 @@ export default function ExtraSidebar() {
}); });
}); });
return acc; return acc;
},{} }, {})
)
); );
} }
// Call the getTypes function. // Call the getTypes function.
getTypes(); getTypes();
}, [setTypes]); }, [setTypes]);
function onDragStart(
function onDragStart(event: React.DragEvent<any>, data:{type:string,node?:APIClassType}) { event: React.DragEvent<any>,
data: { type: string; node?: APIClassType }
) {
//start drag event //start drag event
event.dataTransfer.effectAllowed = "move"; event.dataTransfer.effectAllowed = "move";
event.dataTransfer.setData("json", JSON.stringify(data)); event.dataTransfer.setData("json", JSON.stringify(data));
@ -55,7 +54,10 @@ export default function ExtraSidebar() {
{Object.keys(data).map((d: keyof APIObjectType, i) => ( {Object.keys(data).map((d: keyof APIObjectType, i) => (
<DisclosureComponent <DisclosureComponent
key={i} key={i}
button={{ title: nodeNames[d]??nodeNames.unknown, Icon: nodeIcons[d]??nodeIcons.unknown }} button={{
title: nodeNames[d] ?? nodeNames.unknown,
Icon: nodeIcons[d] ?? nodeIcons.unknown,
}}
> >
<div className="p-2 flex flex-col gap-2"> <div className="p-2 flex flex-col gap-2">
{Object.keys(data[d]).map((t: string, k) => ( {Object.keys(data[d]).map((t: string, k) => (
@ -63,7 +65,9 @@ export default function ExtraSidebar() {
<div <div
draggable draggable
className={" cursor-grab border-l-8 rounded-l-md"} className={" cursor-grab border-l-8 rounded-l-md"}
style={{ borderLeftColor: nodeColors[d]??nodeColors.unknown }} style={{
borderLeftColor: nodeColors[d] ?? nodeColors.unknown,
}}
onDragStart={(event) => onDragStart={(event) =>
onDragStart(event, { onDragStart(event, {
type: t, type: t,
@ -72,12 +76,15 @@ export default function ExtraSidebar() {
} }
> >
<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 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> <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" /> <Bars2Icon className="w-4 h-6 text-gray-400 dark:text-gray-600" />
</div> </div>
</div> </div>
</div> </div>
))} ))}
{Object.keys(data[d]).length===0 && <div className="text-gray-400 text-center">Coming soon</div>}
</div> </div>
</DisclosureComponent> </DisclosureComponent>
))} ))}