Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitf9ae9f2

Browse files
authored
feat: Enhance sidebar components (langflow-ai#4452)
* 📝 (pageLayout/index.tsx): update beta icon text from "BETA" to "Beta" for consistency and readability* ✨ (custom-parameter.tsx): add support for flex view in custom parameter title to improve UI flexibility and readability* ✨ (NodeInputField/index.tsx): refactor NodeInputField component to pass isFlexView prop to getCustomParameterTitle function for improved customization and flexibility* 📝 (NodeStatus/index.tsx): update text from "BETA" to "Beta" for consistency and readability* ✨ (flowSidebarComponent/index.tsx): Add new components and features to the Flow Sidebar Component to enhance user experience and functionality. Update the structure and logic of the component to improve search functionality, error handling, and component filtering.* ✨ (emptySearchComponent): add a new component NoResultsMessage to display a message when no components are found in the search result. The component includes options to clear the search, filter, and try a different query.* ✨ (featureTogglesComponent/index.tsx): add a new component FeatureToggles to manage feature toggles for Beta and Legacy features in the sidebar of the FlowPage.* 📝 (sidebarDraggableComponent): Update CSS classes for better styling and spacing💡 (sidebarDraggableComponent): Improve readability by changing font weight of text elements💡 (sidebarDraggableComponent): Update text content to be more consistent and capitalized* ✨ (index.tsx): Add a new component SidebarFooterButtons to display buttons in the sidebar footer for adding custom components and navigating to the store page.* ✨ (index.tsx): add a new component SidebarItemsList to render a list of items in the sidebar with tooltips and draggable functionality* ✨ (apply-beta-filter.ts): add a new helper function applyBetaFilter to filter out beta items from the given data based on a specific condition* ✨ (apply-edge-filter.ts): introduce a new helper function applyEdgeFilter to filter data based on edge filters for a better user experience.* ✨ (apply-legacy-filter.ts): introduce a new helper function applyLegacyFilter to filter out legacy data from APIDataType object.* ✨ (combined-results.ts): add a new helper function combinedResultsFn to combine Fuse.js search results with API data for each category* ✨ (filtered-data.ts): introduce a new helper function filteredDataFn to merge and return filtered data from different sources for a given category in the FlowPage component.* ✨ (normalize-string.ts): introduce a new helper function normalizeString to convert a string to lowercase, remove underscores, and spaces for better string normalization.* ✨ (ParentDisclosureComponent): Change "BETA" to "Beta" for consistency in text formatting✨ (search-on-metadata.ts, traditional-search-metadata.ts): Add helper functions for searching in metadata and traditional search metadata to improve search functionality in the flow sidebar component.
1 parente63cace commitf9ae9f2

File tree

19 files changed

+595
-536
lines changed

19 files changed

+595
-536
lines changed

‎src/frontend/src/CustomNodes/GenericNode/components/NodeInputField/index.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,10 @@ export default function NodeInputField({
125125
<ShadTooltipcontent={<span>{proxy.id}</span>}>
126126
{
127127
<span>
128-
{getCustomParameterTitle({ title,nodeId:data.id})}
128+
{getCustomParameterTitle({
129+
title,
130+
isFlexView,
131+
})}
129132
</span>
130133
}
131134
</ShadTooltip>
@@ -134,7 +137,10 @@ export default function NodeInputField({
134137
<span>
135138
{
136139
<spanclassName="text-sm font-medium">
137-
{getCustomParameterTitle({ title,nodeId:data.id})}
140+
{getCustomParameterTitle({
141+
title,
142+
isFlexView,
143+
})}
138144
</span>
139145
}
140146
</span>

‎src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -263,7 +263,7 @@ export default function NodeStatus({
263263
size="sq"
264264
className="pointer-events-none mr-1 flex h-[22px] w-10 justify-center rounded-[8px] bg-accent-pink text-accent-pink-foreground"
265265
>
266-
<spanclassName="text-[11px]">BETA</span>
266+
<spanclassName="text-[11px]">Beta</span>
267267
</Badge>
268268
)}
269269
</div>

‎src/frontend/src/components/pageLayout/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ export default function PageLayout({
4747
data-testid="mainpage_title"
4848
>
4949
{title}
50-
{betaIcon&&<spanclassName="store-beta-icon">BETA</span>}
50+
{betaIcon&&<spanclassName="store-beta-icon">Beta</span>}
5151
</h2>
5252
</div>
5353
<pclassName="text-muted-foreground">{description}</p>

‎src/frontend/src/customization/components/custom-parameter.tsx‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import{ParameterRenderComponent}from"@/components/parameterRenderComponent";
22
import{handleOnNewValueType}from"@/CustomNodes/hooks/use-handle-new-value";
33
import{APIClassType,InputFieldType}from"@/types/api";
4+
import{cn}from"@/utils/utils";
45

56
exportfunctionCustomParameterComponent({
67
handleOnNewValue,
@@ -40,18 +41,20 @@ export function CustomParameterComponent({
4041

4142
exportfunctiongetCustomParameterTitle({
4243
title,
43-
nodeId,
44+
isFlexView,
4445
}:{
4546
title:string;
46-
nodeId:string;
47+
isFlexView:boolean;
4748
}){
4849
return(
49-
<span
50-
data-testid={`title-${title.toLocaleLowerCase()}`}
51-
className="text-[13px]"
52-
>
53-
{title}
54-
</span>
50+
<divclassName={cn(isFlexView&&"max-w-56 truncate")}>
51+
<span
52+
data-testid={`title-${title.toLocaleLowerCase()}`}
53+
className="text-[13px]"
54+
>
55+
{title}
56+
</span>
57+
</div>
5558
);
5659
}
5760

‎src/frontend/src/pages/FlowPage/components/ParentDisclosureComponent/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export default function ParentDisclosureComponent({
2121
<spanclassName="text-sm font-medium">{title}</span>
2222
{beta&&(
2323
<divclassName="h-fit rounded-full bg-beta-background px-2 py-1 text-xs/3 font-semibold text-beta-foreground-soft">
24-
BETA
24+
Beta
2525
</div>
2626
)}
2727
</div>
Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
importReactfrom"react";
2+
constNoResultsMessage=({
3+
onClearSearch,
4+
message="No components found.",
5+
clearSearchText="Clear your search",
6+
additionalText="or filter and try a different query.",
7+
})=>{
8+
return(
9+
<divclassName="flex h-full flex-col items-center justify-center p-3 text-center">
10+
<pclassName="text-sm text-secondary-foreground">
11+
{message}{" "}
12+
<a
13+
className="cursor-pointer underline underline-offset-4"
14+
onClick={onClearSearch}
15+
>
16+
{clearSearchText}
17+
</a>{" "}
18+
{additionalText}
19+
</p>
20+
</div>
21+
);
22+
};
23+
24+
exportdefaultNoResultsMessage;
Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import{Badge}from"@/components/ui/badge";
2+
import{Switch}from"@/components/ui/switch";
3+
importReactfrom"react";
4+
5+
constFeatureToggles=({
6+
showBeta,
7+
setShowBeta,
8+
showLegacy,
9+
setShowLegacy,
10+
})=>{
11+
consttoggles=[
12+
{
13+
label:"Beta",
14+
checked:showBeta,
15+
onChange:setShowBeta,
16+
badgeVariant:"pinkStatic"asconst,
17+
testId:"sidebar-beta-switch",
18+
},
19+
{
20+
label:"Legacy",
21+
checked:showLegacy,
22+
onChange:setShowLegacy,
23+
badgeVariant:"secondaryStatic"asconst,
24+
testId:"sidebar-legacy-switch",
25+
},
26+
];
27+
28+
return(
29+
<divclassName="flex flex-col gap-7 border-b pb-7 pt-5">
30+
{toggles.map((toggle)=>(
31+
<divkey={toggle.label}className="flex items-center justify-between">
32+
<divclassName="flex items-center space-x-2">
33+
<spanclassName="flex gap-2 text-sm font-medium">
34+
Show
35+
<Badgevariant={toggle.badgeVariant}size="xq">
36+
{toggle.label}
37+
</Badge>
38+
</span>
39+
</div>
40+
<Switch
41+
checked={toggle.checked}
42+
onCheckedChange={toggle.onChange}
43+
data-testid={toggle.testId}
44+
/>
45+
</div>
46+
))}
47+
</div>
48+
);
49+
};
50+
51+
exportdefaultFeatureToggles;

‎src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarDraggableComponent/index.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ export const SidebarDraggableComponent = forwardRef(
121121
data-tooltip-id={itemName}
122122
tabIndex={0}
123123
onKeyDown={handleKeyDown}
124-
className="rounded-md outline-none ring-ring focus-visible:ring-2"
124+
className="m-[1px]rounded-md outline-none ring-ring focus-visible:ring-1"
125125
>
126126
<div
127127
data-testid={sectionName+display_name}
@@ -150,7 +150,7 @@ export const SidebarDraggableComponent = forwardRef(
150150
/>
151151
<divclassName="flex flex-1 items-center overflow-hidden">
152152
<ShadTooltipcontent={display_name}styleClasses="z-50">
153-
<spanclassName="truncate text-sm font-semibold">
153+
<spanclassName="truncate text-sm font-normal">
154154
{display_name}
155155
</span>
156156
</ShadTooltip>
@@ -160,7 +160,7 @@ export const SidebarDraggableComponent = forwardRef(
160160
size="xq"
161161
className="ml-1.5 shrink-0"
162162
>
163-
BETA
163+
Beta
164164
</Badge>
165165
)}
166166
{legacy&&(
@@ -169,7 +169,7 @@ export const SidebarDraggableComponent = forwardRef(
169169
size="xq"
170170
className="ml-1.5 shrink-0"
171171
>
172-
LEGACY
172+
Legacy
173173
</Badge>
174174
)}
175175
</div>
Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
importForwardedIconComponentfrom"@/components/genericIconComponent";
2+
import{Button}from"@/components/ui/button";
3+
import{SidebarMenuButton}from"@/components/ui/sidebar";
4+
import{CustomLink}from"@/customization/components/custom-link";
5+
importReactfrom"react";
6+
7+
constSidebarMenuButtons=({
8+
hasStore=false,
9+
customComponent,
10+
addComponent,
11+
})=>{
12+
return(
13+
<>
14+
{hasStore&&(
15+
<SidebarMenuButtonasChild>
16+
<CustomLink
17+
to="/store"
18+
target="_blank"
19+
rel="noopener noreferrer"
20+
className="group/discover"
21+
>
22+
<divclassName="flex w-full items-center gap-2">
23+
<ForwardedIconComponent
24+
name="Store"
25+
className="h-4 w-4 text-muted-foreground"
26+
/>
27+
<spanclassName="flex-1 group-data-[state=open]/collapsible:font-semibold">
28+
Discover more components
29+
</span>
30+
<ForwardedIconComponent
31+
name="SquareArrowOutUpRight"
32+
className="h-4 w-4 opacity-0 transition-all group-hover/discover:opacity-100"
33+
/>
34+
</div>
35+
</CustomLink>
36+
</SidebarMenuButton>
37+
)}
38+
<SidebarMenuButtonasChild>
39+
<Button
40+
unstyled
41+
onClick={()=>{
42+
if(customComponent){
43+
addComponent(customComponent,"CustomComponent");
44+
}
45+
}}
46+
data-testid="sidebar-custom-component-button"
47+
className="flex items-center gap-2"
48+
>
49+
<ForwardedIconComponent
50+
name="Plus"
51+
className="h-4 w-4 text-muted-foreground"
52+
/>
53+
<spanclassName="group-data-[state=open]/collapsible:font-semibold">
54+
New Custom Component
55+
</span>
56+
</Button>
57+
</SidebarMenuButton>
58+
</>
59+
);
60+
};
61+
62+
exportdefaultSidebarMenuButtons;
Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
importShadTooltipfrom"@/components/shadTooltipComponent";
2+
import{removeCountFromString}from"@/utils/utils";
3+
importReactfrom"react";
4+
importSidebarDraggableComponentfrom"../sidebarDraggableComponent";
5+
6+
constSidebarItemsList=({
7+
item,
8+
dataFilter,
9+
nodeColors,
10+
chatInputAdded,
11+
onDragStart,
12+
sensitiveSort,
13+
})=>{
14+
return(
15+
<divclassName="flex flex-col gap-1 py-2">
16+
{Object.keys(dataFilter[item.name])
17+
.sort((a,b)=>
18+
sensitiveSort(
19+
dataFilter[item.name][a].display_name,
20+
dataFilter[item.name][b].display_name,
21+
),
22+
)
23+
.map((SBItemName,idx)=>{
24+
constcurrentItem=dataFilter[item.name][SBItemName];
25+
26+
return(
27+
<ShadTooltip
28+
content={currentItem.display_name}
29+
side="right"
30+
key={idx}
31+
>
32+
<SidebarDraggableComponent
33+
sectionName={item.name}
34+
apiClass={currentItem}
35+
icon={currentItem.icon??item.icon??"Unknown"}
36+
onDragStart={(event)=>
37+
onDragStart(event,{
38+
type:removeCountFromString(SBItemName),
39+
node:currentItem,
40+
})
41+
}
42+
color={nodeColors[item.name]}
43+
itemName={SBItemName}
44+
error={!!currentItem.error}
45+
display_name={currentItem.display_name}
46+
official={currentItem.official===false ?false :true}
47+
beta={currentItem.beta??false}
48+
legacy={currentItem.legacy??false}
49+
disabled={SBItemName==="ChatInput"&&chatInputAdded}
50+
disabledTooltip="Chat input already added"
51+
/>
52+
</ShadTooltip>
53+
);
54+
})}
55+
</div>
56+
);
57+
};
58+
59+
exportdefaultSidebarItemsList;

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp