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

Added sidebar separations

Browse source
This commit is contained in:
Lucas Oliveira 2024-03-07 01:11:16 +01:00
commit 3e2caca2b5
2 changed files with 74 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/frontend/src/constants/constants.ts
View file

@ -739,3 +739,4 @@ export const PRIORITY_SIDEBAR_ORDER = [
"helpers", "helpers",
"experimental", "experimental",
]; ];

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

@ -5,6 +5,7 @@ import IconComponent from "../../../../components/genericIconComponent";
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 { UPLOAD_ERROR_ALERT } from "../../../../constants/alerts_constants"; import { UPLOAD_ERROR_ALERT } from "../../../../constants/alerts_constants";
import { PRIORITY_SIDEBAR_ORDER } from "../../../../constants/constants";
import ApiModal from "../../../../modals/ApiModal"; import ApiModal from "../../../../modals/ApiModal";
import ExportModal from "../../../../modals/exportModal"; import ExportModal from "../../../../modals/exportModal";
import ShareModal from "../../../../modals/shareModal"; import ShareModal from "../../../../modals/shareModal";
@ -264,64 +265,81 @@ export default function ExtraSidebar(): JSX.Element {
.sort(sortKeys) .sort(sortKeys)
.map((SBSectionName: keyof APIObjectType, index) => .map((SBSectionName: keyof APIObjectType, index) =>
Object.keys(dataFilter[SBSectionName]).length > 0 ? ( Object.keys(dataFilter[SBSectionName]).length > 0 ? (
<DisclosureComponent <>
openDisc={ {index === 0 && (
getFilterEdge.length !== 0 || search.length !== 0 <div className="pt-0.5">
? true <Separator />
: false <div className="p-2 px-4 font-semibold" key={index}>
} Native
key={index + search + JSON.stringify(getFilterEdge)} </div>
button={{ </div>
title: nodeNames[SBSectionName] ?? nodeNames.unknown, )}
Icon: {index === PRIORITY_SIDEBAR_ORDER.length - 1 && (
nodeIconsLucide[SBSectionName] ?? nodeIconsLucide.unknown, <div className="p-2 px-4 font-semibold" key={index}>
}} Legacy
> </div>
<div className="side-bar-components-gap"> )}
{Object.keys(dataFilter[SBSectionName]) <DisclosureComponent
.sort((a, b) => openDisc={
sensitiveSort( getFilterEdge.length !== 0 || search.length !== 0
dataFilter[SBSectionName][a].display_name, ? true
dataFilter[SBSectionName][b].display_name : false
}
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) => (
.map((SBItemName: string, index) => ( <ShadTooltip
<ShadTooltip content={
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 dataFilter[SBSectionName][SBItemName].display_name
} }
official={ side="right"
dataFilter[SBSectionName][SBItemName].official === key={index}
false >
? false <SidebarDraggableComponent
: true sectionName={SBSectionName as string}
} apiClass={dataFilter[SBSectionName][SBItemName]}
/> key={index}
</ShadTooltip> onDragStart={(event) =>
))} onDragStart(event, {
</div> //split type to remove type in nodes saved with same name removing it's
</DisclosureComponent> 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>
) )