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

refactor: modularized categories (#3615)

Browse source 
Modularized category and fixed Discover More not appearing
This commit is contained in:
Lucas Oliveira 2024-08-29 11:42:41 -03:00 • committed by GitHub
commit cb1a2f24b3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 132 additions and 270 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/frontend/src/pages/FlowPage/components/ParentDisclosureComponent/index.tsx
View file

@ -3,7 +3,7 @@ import IconComponent from "../../../../components/genericIconComponent";
import { DisclosureComponentType } from "../../../../types/components"; import { DisclosureComponentType } from "../../../../types/components";
export default function ParentDisclosureComponent({ export default function ParentDisclosureComponent({
button: { title, Icon, buttons = [] }, button: { title, Icon, buttons = [], beta },
children, children,
defaultOpen, defaultOpen,
testId, testId,
@ -19,7 +19,7 @@ export default function ParentDisclosureComponent({
> >
<div className="flex items-baseline gap-1 align-baseline"> <div className="flex items-baseline gap-1 align-baseline">
<span className="parent-disclosure-title">{title}</span> <span className="parent-disclosure-title">{title}</span>
{title === "Experimental" && ( {beta && (
<div className="h-fit rounded-full bg-beta-background px-2 py-1 text-xs/3 font-semibold text-beta-foreground-soft"> <div className="h-fit rounded-full bg-beta-background px-2 py-1 text-xs/3 font-semibold text-beta-foreground-soft">
BETA BETA
</div> </div>

68
src/frontend/src/pages/FlowPage/components/extraSidebarComponent/SidebarCategoryComponent/index.tsx Normal file
View file

@ -0,0 +1,68 @@
import ShadTooltip from "@/components/shadTooltipComponent";
import { nodeColors, nodeIconsLucide, nodeNames } from "@/utils/styleUtils";
import { removeCountFromString } from "@/utils/utils";
import { Fragment } from "react/jsx-runtime";
import DisclosureComponent from "../../DisclosureComponent";
import SidebarDraggableComponent from "../sideBarDraggableComponent";
import sensitiveSort from "../utils/sensitive-sort";
export function SidebarCategoryComponent({
index,
search,
getFilterEdge,
category,
name,
onDragStart,
}) {
return (
<Fragment
key={`DisclosureComponent${index + search + JSON.stringify(getFilterEdge)}`}
>
<DisclosureComponent
isChild={false}
defaultOpen={
getFilterEdge.length !== 0 || search.length !== 0 ? true : false
}
button={{
title: nodeNames[name] ?? nodeNames.unknown,
Icon: nodeIconsLucide[name] ?? nodeIconsLucide.unknown,
}}
>
<div className="side-bar-components-gap">
{Object.keys(category)
.sort((a, b) =>
sensitiveSort(category[a].display_name, category[b].display_name),
)
.map((SBItemName: string, index) => (
<ShadTooltip
content={category[SBItemName].display_name}
side="right"
key={index}
>
<SidebarDraggableComponent
sectionName={name as string}
apiClass={category[SBItemName]}
key={index}
onDragStart={(event) =>
onDragStart(event, {
//split type to remove type in nodes saved with same name removing it's
type: removeCountFromString(SBItemName),
node: category[SBItemName],
})
}
color={nodeColors[name]}
itemName={SBItemName}
//convert error to boolean
error={!!category[SBItemName].error}
display_name={category[SBItemName].display_name}
official={
category[SBItemName].official === false ? false : true
}
/>
</ShadTooltip>
))}
</div>
</DisclosureComponent>
</Fragment>
);
}

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

@ -1,9 +1,8 @@
import FeatureFlags from "@/../feature-config.json"; import FeatureFlags from "@/../feature-config.json";
import { useStoreStore } from "@/stores/storeStore";
import { cloneDeep } from "lodash"; import { cloneDeep } from "lodash";
import { LinkIcon, SparklesIcon } from "lucide-react"; import { useEffect, useState } from "react";
import { Fragment, useEffect, useState } from "react";
import IconComponent from "../../../../components/genericIconComponent"; import IconComponent from "../../../../components/genericIconComponent";
import ShadTooltip from "../../../../components/shadTooltipComponent";
import { Input } from "../../../../components/ui/input"; import { Input } from "../../../../components/ui/input";
import { Separator } from "../../../../components/ui/separator"; import { Separator } from "../../../../components/ui/separator";
import { import {
@ -14,23 +13,17 @@ import useAlertStore from "../../../../stores/alertStore";
import useFlowStore from "../../../../stores/flowStore"; import useFlowStore from "../../../../stores/flowStore";
import { useTypesStore } from "../../../../stores/typesStore"; import { useTypesStore } from "../../../../stores/typesStore";
import { APIClassType, APIObjectType } from "../../../../types/api"; import { APIClassType, APIObjectType } from "../../../../types/api";
import { import { nodeIconsLucide } from "../../../../utils/styleUtils";
nodeColors,
nodeIconsLucide,
nodeNames,
} from "../../../../utils/styleUtils";
import { removeCountFromString } from "../../../../utils/utils";
import DisclosureComponent from "../DisclosureComponent";
import ParentDisclosureComponent from "../ParentDisclosureComponent"; import ParentDisclosureComponent from "../ParentDisclosureComponent";
import SidebarDraggableComponent from "./sideBarDraggableComponent"; import { SidebarCategoryComponent } from "./SidebarCategoryComponent";
import { sortKeys } from "./utils"; import { sortKeys } from "./utils";
import sensitiveSort from "./utils/sensitive-sort";
export default function ExtraSidebar(): JSX.Element { export default function ExtraSidebar(): JSX.Element {
const data = useTypesStore((state) => state.data); const data = useTypesStore((state) => state.data);
const templates = useTypesStore((state) => state.templates); const templates = useTypesStore((state) => state.templates);
const getFilterEdge = useFlowStore((state) => state.getFilterEdge); const getFilterEdge = useFlowStore((state) => state.getFilterEdge);
const setFilterEdge = useFlowStore((state) => state.setFilterEdge); const setFilterEdge = useFlowStore((state) => state.setFilterEdge);
const hasStore = useStoreStore((state) => state.hasStore);
const setErrorData = useAlertStore((state) => state.setErrorData); const setErrorData = useAlertStore((state) => state.setErrorData);
const [dataFilter, setFilterData] = useState(data); const [dataFilter, setFilterData] = useState(data);
@ -42,6 +35,7 @@ export default function ExtraSidebar(): JSX.Element {
//start drag event //start drag event
var crt = event.currentTarget.cloneNode(true); var crt = event.currentTarget.cloneNode(true);
crt.style.position = "absolute"; crt.style.position = "absolute";
crt.style.width = "215px";
crt.style.top = "-500px"; crt.style.top = "-500px";
crt.style.right = "-500px"; crt.style.right = "-500px";
crt.classList.add("cursor-grabbing"); crt.classList.add("cursor-grabbing");
@ -235,75 +229,25 @@ export default function ExtraSidebar(): JSX.Element {
.filter((x) => PRIORITY_SIDEBAR_ORDER.includes(x)) .filter((x) => PRIORITY_SIDEBAR_ORDER.includes(x))
.map((SBSectionName: keyof APIObjectType, index) => .map((SBSectionName: keyof APIObjectType, index) =>
Object.keys(dataFilter[SBSectionName]).length > 0 ? ( Object.keys(dataFilter[SBSectionName]).length > 0 ? (
<DisclosureComponent <SidebarCategoryComponent
defaultOpen={ index={index}
getFilterEdge.length !== 0 || search.length !== 0 search={search}
? true getFilterEdge={getFilterEdge}
: false category={dataFilter[SBSectionName]}
} name={SBSectionName}
isChild={false} onDragStart={onDragStart}
key={index + search + JSON.stringify(getFilterEdge)} />
button={{
title: nodeNames[SBSectionName] ?? nodeNames.unknown,
Icon:
nodeIconsLucide[SBSectionName] ?? nodeIconsLucide.unknown,
}}
>
<div className="side-bar-components-gap">
{Object.keys(dataFilter[SBSectionName])
.sort((a, b) =>
sensitiveSort(
dataFilter[SBSectionName][a].display_name,
dataFilter[SBSectionName][b].display_name,
),
)
.map((SBItemName: string, index) => (
<ShadTooltip
content={
dataFilter[SBSectionName][SBItemName].display_name
}
side="right"
key={index}
>
<SidebarDraggableComponent
sectionName={SBSectionName as string}
apiClass={dataFilter[SBSectionName][SBItemName]}
key={index + SBItemName}
onDragStart={(event) =>
onDragStart(event, {
//split type to remove type in nodes saved with same name removing it's
type: removeCountFromString(SBItemName),
node: dataFilter[SBSectionName][SBItemName],
})
}
color={nodeColors[SBSectionName]}
itemName={SBItemName}
//convert error to boolean
error={!!dataFilter[SBSectionName][SBItemName].error}
display_name={
dataFilter[SBSectionName][SBItemName].display_name
}
official={
dataFilter[SBSectionName][SBItemName].official ===
false
? false
: true
}
/>
</ShadTooltip>
))}
</div>
</DisclosureComponent>
) : ( ) : (
<div key={index}></div> <div key={index}></div>
), ),
)}{" "} )}
<ParentDisclosureComponent <ParentDisclosureComponent
defaultOpen={search.length !== 0 || getFilterEdge.length !== 0} defaultOpen={search.length !== 0 || getFilterEdge.length !== 0}
key={`${search.length !== 0}-${getFilterEdge.length !== 0}-Advanced`} key={`${search.length !== 0}-${getFilterEdge.length !== 0}-Advanced`}
button={{ button={{
title: "Experimental", title: "Experimental",
Icon: nodeIconsLucide.unknown, Icon: nodeIconsLucide.unknown,
beta: true,
}} }}
testId="extended-disclosure" testId="extended-disclosure"
> >
@ -312,105 +256,47 @@ export default function ExtraSidebar(): JSX.Element {
.filter((x) => !PRIORITY_SIDEBAR_ORDER.includes(x)) .filter((x) => !PRIORITY_SIDEBAR_ORDER.includes(x))
.map((SBSectionName: keyof APIObjectType, index) => .map((SBSectionName: keyof APIObjectType, index) =>
Object.keys(dataFilter[SBSectionName]).length > 0 ? ( Object.keys(dataFilter[SBSectionName]).length > 0 ? (
<Fragment <SidebarCategoryComponent
key={`DisclosureComponent${index + search + JSON.stringify(getFilterEdge)}`} index={index}
> search={search}
<DisclosureComponent getFilterEdge={getFilterEdge}
isChild={false} category={dataFilter[SBSectionName]}
defaultOpen={ name={SBSectionName}
getFilterEdge.length !== 0 || search.length !== 0 onDragStart={onDragStart}
? true />
: false
}
button={{
title: nodeNames[SBSectionName] ?? nodeNames.unknown,
Icon:
nodeIconsLucide[SBSectionName] ??
nodeIconsLucide.unknown,
}}
>
<div className="side-bar-components-gap">
{Object.keys(dataFilter[SBSectionName])
.sort((a, b) =>
sensitiveSort(
dataFilter[SBSectionName][a].display_name,
dataFilter[SBSectionName][b].display_name,
),
)
.map((SBItemName: string, index) => (
<ShadTooltip
content={
dataFilter[SBSectionName][SBItemName].display_name
}
side="right"
key={index}
>
<SidebarDraggableComponent
sectionName={SBSectionName as string}
apiClass={dataFilter[SBSectionName][SBItemName]}
key={index}
onDragStart={(event) =>
onDragStart(event, {
//split type to remove type in nodes saved with same name removing it's
type: removeCountFromString(SBItemName),
node: dataFilter[SBSectionName][SBItemName],
})
}
color={nodeColors[SBSectionName]}
itemName={SBItemName}
//convert error to boolean
error={
!!dataFilter[SBSectionName][SBItemName].error
}
display_name={
dataFilter[SBSectionName][SBItemName]
.display_name
}
official={
dataFilter[SBSectionName][SBItemName]
.official === false
? false
: true
}
/>
</ShadTooltip>
))}
</div>
</DisclosureComponent>
{index ===
Object.keys(dataFilter).length -
PRIORITY_SIDEBAR_ORDER.length +
1 && (
<>
<a
target={"_blank"}
href="https://langflow.store"
className="components-disclosure-arrangement"
>
<div className="flex gap-4">
{/* BUG ON THIS ICON */}
<SparklesIcon
strokeWidth={1.5}
className="w-[22px] text-primary"
/>
<span className="components-disclosure-title">
Discover More
</span>
</div>
<div className="components-disclosure-div">
<div>
<LinkIcon className="h-4 w-4 text-foreground" />
</div>
</div>
</a>
</>
)}
</Fragment>
) : ( ) : (
<div key={index}></div> <div key={index}></div>
), ),
)} )}
{hasStore && (
<a
target={"_blank"}
href="https://langflow.store"
className="components-disclosure-arrangement"
draggable="false"
>
<div className="flex gap-4">
{/* BUG ON THIS ICON */}
<IconComponent
name="Sparkles"
strokeWidth={1.5}
className="w-[22px] text-primary"
/>
<span className="components-disclosure-title">
Discover More
</span>
</div>
<div className="components-disclosure-div">
<div>
<IconComponent
name="Link"
className="h-4 w-4 text-foreground"
/>
</div>
</div>
</a>
)}
</ParentDisclosureComponent> </ParentDisclosureComponent>
{FeatureFlags.ENABLE_MVPS && ( {FeatureFlags.ENABLE_MVPS && (
<> <>
@ -430,107 +316,14 @@ export default function ExtraSidebar(): JSX.Element {
.filter((x) => BUNDLES_SIDEBAR_FOLDER_NAMES.includes(x)) .filter((x) => BUNDLES_SIDEBAR_FOLDER_NAMES.includes(x))
.map((SBSectionName: keyof APIObjectType, index) => .map((SBSectionName: keyof APIObjectType, index) =>
Object.keys(dataFilter[SBSectionName]).length > 0 ? ( Object.keys(dataFilter[SBSectionName]).length > 0 ? (
<Fragment <SidebarCategoryComponent
key={`DisclosureComponent${index + search + JSON.stringify(getFilterEdge)}`} index={index}
> search={search}
<DisclosureComponent getFilterEdge={getFilterEdge}
isChild={false} category={dataFilter[SBSectionName]}
defaultOpen={ name={SBSectionName}
getFilterEdge.length !== 0 || search.length !== 0 onDragStart={onDragStart}
? true />
: false
}
button={{
title: nodeNames[SBSectionName] ?? nodeNames.unknown,
Icon:
nodeIconsLucide[SBSectionName] ??
nodeIconsLucide.unknown,
}}
>
<div className="side-bar-components-gap">
{Object.keys(dataFilter[SBSectionName])
.sort((a, b) =>
sensitiveSort(
dataFilter[SBSectionName][a].display_name,
dataFilter[SBSectionName][b].display_name,
),
)
.map((SBItemName: string, index) => (
<ShadTooltip
content={
dataFilter[SBSectionName][SBItemName]
.display_name
}
side="right"
key={index}
>
<SidebarDraggableComponent
sectionName={SBSectionName as string}
apiClass={
dataFilter[SBSectionName][SBItemName]
}
key={index}
onDragStart={(event) =>
onDragStart(event, {
//split type to remove type in nodes saved with same name removing it's
type: removeCountFromString(SBItemName),
node: dataFilter[SBSectionName][
SBItemName
],
})
}
color={nodeColors[SBSectionName]}
itemName={SBItemName}
//convert error to boolean
error={
!!dataFilter[SBSectionName][SBItemName]
.error
}
display_name={
dataFilter[SBSectionName][SBItemName]
.display_name
}
official={
dataFilter[SBSectionName][SBItemName]
.official === false
? false
: true
}
/>
</ShadTooltip>
))}
</div>
</DisclosureComponent>
{index ===
Object.keys(dataFilter).length -
PRIORITY_SIDEBAR_ORDER.length +
1 && (
<>
<a
target={"_blank"}
href="https://langflow.store"
className="components-disclosure-arrangement"
>
<div className="flex gap-4">
{/* BUG ON THIS ICON */}
<SparklesIcon
strokeWidth={1.5}
className="w-[22px] text-primary"
/>
<span className="components-disclosure-title">
Discover More
</span>
</div>
<div className="components-disclosure-div">
<div>
<LinkIcon className="h-4 w-4 text-foreground" />
</div>
</div>
</a>
</>
)}
</Fragment>
) : ( ) : (
<div key={index}></div> <div key={index}></div>
), ),

1
src/frontend/src/types/components/index.ts
View file

@ -258,6 +258,7 @@ export type DisclosureComponentType = {
title: string; title: string;
onClick: (event?: React.MouseEvent) => void; onClick: (event?: React.MouseEvent) => void;
}[]; }[];
beta?: boolean;
}; };
testId?: string; testId?: string;
}; };