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

feat: standardize node output icons with TextSearch and Chevrons (#5600)

Browse source 
* ✨ (NodeInputField): Update styling to include padding-bottom when lastInput is true for better UI appearance
📝 (NodeOutputfield): Import TextSearch component from lucide-react library for future use
🔧 (RenderInputParameters): Simplify logic for determining lastInput in NodeInputField component
🔧 (GenericNode): Change icon displayed on HiddenOutputsButton based on showHiddenOutputs state
🔧 (GenericNode): Update tooltip content to include the number of hiddenOutputs when toggling visibility
🔧 (sliderComponent): Remove unnecessary padding-bottom from SliderComponent for better layout
📝 (constants.ts): Update tooltip text for better clarity and consistency with action names

* ✨ (NodeOutputfield/index.tsx): Update import statement for IconComponent to include ForwardedIconComponent for better organization and clarity
🐛 (chatInputOutputUser-shard-0.spec.ts, chatInputOutputUser-shard-1.spec.ts): Fix references to 'ScanEye' icon to 'TextSearchIcon' for consistency and accuracy in tests
This commit is contained in:
Cristhian Zanforlin Lousa 2025-01-10 15:29:00 -03:00 • committed by GitHub
commit febae4b589
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 21 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/frontend/src/CustomNodes/GenericNode/components/NodeInputField/index.tsx
View file

@ -108,8 +108,8 @@ export default function NodeInputField({
<div
ref={ref}
className={cn(
"relative mt-1 flex min-h-10 w-full flex-wrap items-center justify-between px-5 py-2",
lastInput ? "rounded-b-[0.69rem]" : "",
"relative flex min-h-10 w-full flex-wrap items-center justify-between px-5 py-2",
lastInput ? "rounded-b-[0.69rem] pb-5" : "",
isToolMode && "bg-primary/10",
(name === "code" && type === "code") || (name.includes("code") && proxy)
? "hidden"

9
src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx
View file

@ -1,8 +1,11 @@
import { ICON_STROKE_WIDTH } from "@/constants/constants";
import { useUpdateNodeInternals } from "@xyflow/react";
import { cloneDeep } from "lodash";
import { TextSearch } from "lucide-react";
import { memo, useCallback, useEffect, useMemo, useRef } from "react";
import { default as IconComponent } from "../../../../components/common/genericIconComponent";
import ForwardedIconComponent, {
default as IconComponent,
} from "../../../../components/common/genericIconComponent";
import ShadTooltip from "../../../../components/common/shadTooltipComponent";
import { Button } from "../../../../components/ui/button";
import useFlowStore from "../../../../stores/flowStore";
@ -113,7 +116,9 @@ const InspectButton = memo(
unstyled
onClick={onClick}
>
<ScanEyeIcon
<IconComponent
name="TextSearchIcon"
strokeWidth={ICON_STROKE_WIDTH}
className={cn(
"icon-size",
isToolMode

5
src/frontend/src/CustomNodes/GenericNode/components/RenderInputParameters/index.tsx
View file

@ -87,10 +87,7 @@ const RenderInputParameters = ({
return (
<NodeInputField
lastInput={
idx === templateFields.length - 1 &&
!(shownOutputs.length > 0 || showHiddenOutputs)
}
lastInput={!(shownOutputs.length > 0 || showHiddenOutputs)}
key={memoizedKey}
data={data}
colors={memoizedColor.colors}

8
src/frontend/src/CustomNodes/GenericNode/index.tsx
View file

@ -48,11 +48,11 @@ const HiddenOutputsButton = memo(
}) => (
<Button
unstyled
className="group flex h-6 w-6 items-center justify-center rounded-full border bg-background hover:border-foreground hover:text-foreground"
className="group m-auto h-[1.75rem] w-[1.75rem] place-items-center items-center rounded-full border bg-muted hover:text-foreground"
onClick={onClick}
>
<ForwardedIconComponent
name={showHiddenOutputs ? "EyeOff" : "Eye"}
name={showHiddenOutputs ? "ChevronsDownUp" : "ChevronsUpDown"}
strokeWidth={1.5}
className="h-4 w-4 text-placeholder-foreground group-hover:text-foreground"
/>
@ -455,8 +455,8 @@ function GenericNode({
<ShadTooltip
content={
showHiddenOutputs
? TOOLTIP_HIDDEN_OUTPUTS
: TOOLTIP_OPEN_HIDDEN_OUTPUTS
? `${TOOLTIP_HIDDEN_OUTPUTS} (${hiddenOutputs?.length})`
: `${TOOLTIP_OPEN_HIDDEN_OUTPUTS} (${hiddenOutputs?.length})`
}
>
<div

2
src/frontend/src/components/core/parameterRenderComponent/components/sliderComponent/index.tsx
View file

@ -198,7 +198,7 @@ export default function SliderComponent({
const ringClassInputClass = "ring-[1px] ring-slider-input-border";
return (
<div className="w-full rounded-lg pb-2">
<div className="w-full rounded-lg">
<Case condition={!sliderButtons}>
<div className="noflow nowheel nopan nodelete nodrag flex items-center justify-end">
<div

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

@ -686,8 +686,8 @@ export const TOOLTIP_OUTDATED_NODE =
export const CHAT_SECOND_INITIAL_TEXT = "to inspect previous messages.";
export const TOOLTIP_OPEN_HIDDEN_OUTPUTS = "Show hidden outputs";
export const TOOLTIP_HIDDEN_OUTPUTS = "Hide outputs";
export const TOOLTIP_OPEN_HIDDEN_OUTPUTS = "Expand hidden outputs";
export const TOOLTIP_HIDDEN_OUTPUTS = "Collapse hidden outputs";
export const ZERO_NOTIFICATIONS = "No new notifications";

4
src/frontend/tests/core/features/chatInputOutputUser-shard-0.spec.ts
View file

@ -80,11 +80,11 @@ test(
await page.getByText("Close", { exact: true }).click();
await page.waitForSelector('[data-testid="icon-ScanEye"]', {
await page.waitForSelector('[data-testid="icon-TextSearchIcon"]', {
timeout: 30000,
});
await page.getByTestId("icon-ScanEye").nth(4).click();
await page.getByTestId("icon-TextSearchIcon").nth(4).click();
await page.getByText("Restart").isHidden();
},

4
src/frontend/tests/extended/integrations/chatInputOutputUser-shard-1.spec.ts
View file

@ -34,11 +34,11 @@ test(
timeout: 15000,
});
await page.waitForSelector('[data-testid="icon-ScanEye"]', {
await page.waitForSelector('[data-testid="icon-TextSearchIcon"]', {
timeout: 30000,
});
await page.getByTestId("icon-ScanEye").nth(4).click();
await page.getByTestId("icon-TextSearchIcon").nth(4).click();
await page.getByText("Sender", { exact: true }).isVisible();
await page.getByText("Type", { exact: true }).isVisible();