From c7714a109d32ed1bebfb4eff875d8a885a8fc776 Mon Sep 17 00:00:00 2001 From: cristhianzl Date: Wed, 6 Nov 2024 13:19:17 -0300 Subject: [PATCH 01/17] =?UTF-8?q?=F0=9F=93=9D=20(tailwind.config.mjs):=20r?= =?UTF-8?q?efactor=20color=20classes=20from=20"inner-"=20to=20"accent-"=20?= =?UTF-8?q?for=20better=20clarity=20and=20consistency=20in=20naming=20conv?= =?UTF-8?q?entions?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/frontend/tailwind.config.mjs | 98 ++++++++++++++------------------ 1 file changed, 44 insertions(+), 54 deletions(-) diff --git a/src/frontend/tailwind.config.mjs b/src/frontend/tailwind.config.mjs index de91d74256c4..949a49844fcc 100644 --- a/src/frontend/tailwind.config.mjs +++ b/src/frontend/tailwind.config.mjs @@ -191,61 +191,51 @@ const config = { DEFAULT: "#18181B", muted: "#27272A", }, - "inner-yellow": { - DEFAULT: "hsl(var(--inner-yellow))", - foreground: "hsl(var(--inner-foreground-yellow))", - muted: "hsl(var(--inner-yellow-muted-foreground))", - }, - "inner-blue": { - DEFAULT: "hsl(var(--inner-blue))", - foreground: "hsl(var(--inner-foreground-blue))", - muted: "hsl(var(--inner-blue-muted-foreground))", - }, - "inner-gray": { - DEFAULT: "hsl(var(--inner-gray))", - foreground: "hsl(var(--inner-foreground-gray))", - muted: "hsl(var(--inner-gray-muted-foreground))", - }, - "inner-lime": { - DEFAULT: "hsl(var(--inner-lime))", - foreground: "hsl(var(--inner-foreground-lime))", - muted: "hsl(var(--inner-lime-muted-foreground))", - }, - "inner-red": { - DEFAULT: "hsl(var(--inner-red))", - foreground: "hsl(var(--inner-foreground-red))", - muted: "hsl(var(--inner-red-muted-foreground))", - }, - "inner-violet": { - DEFAULT: "hsl(var(--inner-violet))", - foreground: "hsl(var(--inner-foreground-violet))", - muted: "hsl(var(--inner-violet-muted-foreground))", - }, - "inner-emerald": { - DEFAULT: "hsl(var(--inner-emerald))", - foreground: "hsl(var(--inner-foreground-emerald))", - muted: "hsl(var(--inner-emerald-muted-foreground))", - }, - "inner-fuchsia": { - DEFAULT: "hsl(var(--inner-fuchsia))", - foreground: "hsl(var(--inner-foreground-fuchsia))", - muted: "hsl(var(--inner-fuchsia-muted-foreground))", - }, - "inner-purple": { - DEFAULT: "hsl(var(--inner-purple))", - foreground: "hsl(var(--inner-foreground-purple))", - muted: "hsl(var(--inner-purple-muted-foreground))", - }, - "inner-cyan": { - DEFAULT: "hsl(var(--inner-cyan))", - foreground: "hsl(var(--inner-foreground-cyan))", - muted: "hsl(var(--inner-cyan-muted-foreground))", - }, - "inner-indigo": { - DEFAULT: "hsl(var(--inner-indigo))", - foreground: "hsl(var(--inner-foreground-indigo))", - muted: "hsl(var(--inner-indigo-muted-foreground))", + "accent-yellow": { + DEFAULT: "hsl(var(--accent-yellow))", + foreground: "hsl(var(--accent-yellow-foreground))", }, + "accent-blue": { + DEFAULT: "hsl(var(--accent-blue))", + foreground: "hsl(var(--accent-blue-foreground))", + }, + "accent-gray": { + DEFAULT: "hsl(var(--accent-gray))", + foreground: "hsl(var(--accent-gray-foreground))", + }, + "accent-lime": { + DEFAULT: "hsl(var(--accent-lime))", + foreground: "hsl(var(--accent-lime-foreground))", + }, + "accent-red": { + DEFAULT: "hsl(var(--accent-red))", + foreground: "hsl(var(--accent-red-foreground))", + }, + "accent-violet": { + DEFAULT: "hsl(var(--accent-violet))", + foreground: "hsl(var(--accent-violet-foreground))", + }, + "accent-emerald": { + DEFAULT: "hsl(var(--accent-emerald))", + foreground: "hsl(var(--accent-emerald-foreground))", + }, + "accent-fuchsia": { + DEFAULT: "hsl(var(--accent-fuchsia))", + foreground: "hsl(var(--accent-fuchsia-foreground))", + }, + "accent-purple": { + DEFAULT: "hsl(var(--accent-purple))", + foreground: "hsl(var(--accent-purple-foreground))", + }, + "accent-cyan": { + DEFAULT: "hsl(var(--accent-cyan))", + foreground: "hsl(var(--accent-cyan-foreground))", + }, + "accent-indigo": { + DEFAULT: "hsl(var(--accent-indigo))", + foreground: "hsl(var(--accent-indigo-foreground))", + }, + "node-ring": "hsl(var(--node-ring))", }, borderRadius: { lg: `var(--radius)`, From 24a7b5da5876858ddb7792804b9f272a8f1099c5 Mon Sep 17 00:00:00 2001 From: cristhianzl Date: Wed, 6 Nov 2024 13:19:23 -0300 Subject: [PATCH 02/17] =?UTF-8?q?=F0=9F=94=A7=20(GenericNode/index.tsx):?= =?UTF-8?q?=20Remove=20unused=20imports=20and=20constants=20to=20clean=20u?= =?UTF-8?q?p=20the=20code=20and=20improve=20maintainability=20=E2=99=BB?= =?UTF-8?q?=EF=B8=8F=20(GenericNode/index.tsx):=20Refactor=20GenericNode?= =?UTF-8?q?=20component=20by=20removing=20unnecessary=20code=20related=20t?= =?UTF-8?q?o=20BuildStatus=20and=20BorderBeam=20to=20simplify=20the=20comp?= =?UTF-8?q?onent=20and=20improve=20readability?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/frontend/src/CustomNodes/GenericNode/index.tsx | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index b079364b556f..184fe2088717 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -1,6 +1,3 @@ -import { Badge } from "@/components/ui/badge"; -import { BorderBeam } from "@/components/ui/border-beams"; -import { BuildStatus } from "@/constants/enums"; import { usePostValidateComponentCode } from "@/controllers/API/queries/nodes/use-post-validate-component-code"; import { useEffect, useMemo, useState } from "react"; import { useHotkeys } from "react-hotkeys-hook"; @@ -13,7 +10,6 @@ import { Button } from "../../components/ui/button"; import { TOOLTIP_HIDDEN_OUTPUTS, TOOLTIP_OPEN_HIDDEN_OUTPUTS, - TOOLTIP_OUTDATED_NODE, } from "../../constants/constants"; import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent"; import useAlertStore from "../../stores/alertStore"; @@ -294,16 +290,6 @@ export default function GenericNode({ !hasOutputs && "pb-4", )} > - {BuildStatus.BUILDING === buildStatus && ( - - )} -
Date: Wed, 6 Nov 2024 13:19:28 -0300 Subject: [PATCH 03/17] =?UTF-8?q?=F0=9F=94=A7=20(handleRenderComponent/ind?= =?UTF-8?q?ex.tsx):=20rename=20innerColorName=20and=20innerForegroundColor?= =?UTF-8?q?Name=20variables=20to=20accentColorName=20and=20accentForegroun?= =?UTF-8?q?dColorName=20for=20better=20clarity=20and=20consistency=20?= =?UTF-8?q?=F0=9F=94=A7=20(handleRenderComponent/index.tsx):=20update=20CS?= =?UTF-8?q?S=20variables=20to=20use=20accent=20prefix=20instead=20of=20inn?= =?UTF-8?q?er=20for=20better=20naming=20convention=20and=20readability=20?= =?UTF-8?q?=F0=9F=94=A7=20(handleRenderComponent/index.tsx):=20pass=20acce?= =?UTF-8?q?ntColorName=20and=20accentForegroundColorName=20props=20to=20Ha?= =?UTF-8?q?ndleTooltipComponent=20for=20improved=20customization=20and=20s?= =?UTF-8?q?tyling?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../handleRenderComponent/index.tsx | 66 ++++++++++--------- 1 file changed, 34 insertions(+), 32 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/components/handleRenderComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/handleRenderComponent/index.tsx index b821098ab207..22fb72f8aae6 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/handleRenderComponent/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/handleRenderComponent/index.tsx @@ -44,8 +44,8 @@ export default function HandleRenderComponent({ }) { const handleColorName = colorName?.[0]; - const innerColorName = `inner-${handleColorName}`; - const innerForegroundColorName = `${innerColorName}-foreground`; + const accentColorName = `accent-${handleColorName}`; + const accentForegroundColorName = `${accentColorName}-foreground`; const setHandleDragging = useFlowStore((state) => state.setHandleDragging); const setFilterType = useFlowStore((state) => state.setFilterType); @@ -175,14 +175,14 @@ export default function HandleRenderComponent({ () => isNullHandle ? dark - ? "conic-gradient(hsl(var(--inner-gray)) 0deg 360deg)" - : "conic-gradient(hsl(var(--inner-gray-foreground)) 0deg 360deg)" + ? "conic-gradient(hsl(var(--accent-gray)) 0deg 360deg)" + : "conic-gradient(hsl(var(--accent-gray-foreground)) 0deg 360deg)" : "conic-gradient(" + colorName! .concat(colorName![0]) .map( (color, index) => - `hsl(var(--inner-${color}))` + + `hsl(var(--accent-${color}))` + " " + ((360 / colors.length) * index - 360 / (colors.length * 4)) + "deg " + @@ -204,34 +204,34 @@ export default function HandleRenderComponent({ styleSheet.textContent = ` @keyframes pulseNeon { 0% { - box-shadow: 0 0 0 2px hsl(var(--border)), - 0 0 2px hsl(var(--inner-${colorName![0]})), - 0 0 4px hsl(var(--inner-${colorName![0]})), - 0 0 6px hsl(var(--inner-${colorName![0]})), - 0 0 8px hsl(var(--inner-${colorName![0]})), - 0 0 10px hsl(var(--inner-${colorName![0]})), - 0 0 15px hsl(var(--inner-${colorName![0]})), - 0 0 20px hsl(var(--inner-${colorName![0]})); + box-shadow: 0 0 0 2px hsl(var(--node-ring)), + 0 0 2px hsl(var(--accent-${colorName![0]})), + 0 0 4px hsl(var(--accent-${colorName![0]})), + 0 0 6px hsl(var(--accent-${colorName![0]})), + 0 0 8px hsl(var(--accent-${colorName![0]})), + 0 0 10px hsl(var(--accent-${colorName![0]})), + 0 0 15px hsl(var(--accent-${colorName![0]})), + 0 0 20px hsl(var(--accent-${colorName![0]})); } 50% { - box-shadow: 0 0 0 2px hsl(var(--border)), - 0 0 4px hsl(var(--inner-${colorName![0]})), - 0 0 8px hsl(var(--inner-${colorName![0]})), - 0 0 12px hsl(var(--inner-${colorName![0]})), - 0 0 16px hsl(var(--inner-${colorName![0]})), - 0 0 20px hsl(var(--inner-${colorName![0]})), - 0 0 25px hsl(var(--inner-${colorName![0]})), - 0 0 30px hsl(var(--inner-${colorName![0]})); + box-shadow: 0 0 0 2px hsl(var(--node-ring)), + 0 0 4px hsl(var(--accent-${colorName![0]})), + 0 0 8px hsl(var(--accent-${colorName![0]})), + 0 0 12px hsl(var(--accent-${colorName![0]})), + 0 0 16px hsl(var(--accent-${colorName![0]})), + 0 0 20px hsl(var(--accent-${colorName![0]})), + 0 0 25px hsl(var(--accent-${colorName![0]})), + 0 0 30px hsl(var(--accent-${colorName![0]})); } 100% { - box-shadow: 0 0 0 2px hsl(var(--border)), - 0 0 2px hsl(var(--inner-${colorName![0]})), - 0 0 4px hsl(var(--inner-${colorName![0]})), - 0 0 6px hsl(var(--inner-${colorName![0]})), - 0 0 8px hsl(var(--inner-${colorName![0]})), - 0 0 10px hsl(var(--inner-${colorName![0]})), - 0 0 15px hsl(var(--inner-${colorName![0]})), - 0 0 20px hsl(var(--inner-${colorName![0]})); + box-shadow: 0 0 0 2px hsl(var(--node-ring)), + 0 0 2px hsl(var(--accent-${colorName![0]})), + 0 0 4px hsl(var(--accent-${colorName![0]})), + 0 0 6px hsl(var(--accent-${colorName![0]})), + 0 0 8px hsl(var(--accent-${colorName![0]})), + 0 0 10px hsl(var(--accent-${colorName![0]})), + 0 0 15px hsl(var(--accent-${colorName![0]})), + 0 0 20px hsl(var(--accent-${colorName![0]})); } } `; @@ -303,11 +303,13 @@ export default function HandleRenderComponent({ content={ } side={left ? "left" : "right"} @@ -367,12 +369,12 @@ export default function HandleRenderComponent({ height: "10px", transition: "all 0.2s", boxShadow: getNeonShadow( - innerForegroundColorName, + accentForegroundColorName, isHovered || openHandle, ), animation: (isHovered || openHandle) && !isNullHandle - ? "pulseNeon 0.7s ease-in-out infinite" + ? "pulseNeon 1.1s ease-in-out infinite" : "none", border: isNullHandle ? "2px solid hsl(var(--muted))" : "none", }} From 75a4496de39ef162e975749856af351bbf72ff08 Mon Sep 17 00:00:00 2001 From: cristhianzl Date: Wed, 6 Nov 2024 13:19:33 -0300 Subject: [PATCH 04/17] =?UTF-8?q?=F0=9F=93=9D=20(HandleTooltipComponent/in?= =?UTF-8?q?dex.tsx):=20Refactor=20HandleTooltipComponent=20to=20use=20Badg?= =?UTF-8?q?e=20component=20for=20tooltip=20styling=20and=20add=20support?= =?UTF-8?q?=20for=20custom=20accent=20colors=20and=20foreground=20colors?= =?UTF-8?q?=20based=20on=20left=20alignment.=20Update=20styles=20and=20dat?= =?UTF-8?q?a-testid=20attributes=20accordingly.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../HandleTooltipComponent/index.tsx | 28 +++++++++++++------ 1 file changed, 19 insertions(+), 9 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/components/HandleTooltipComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/HandleTooltipComponent/index.tsx index 401444a4f7b9..c34e79fde1f6 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/HandleTooltipComponent/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/HandleTooltipComponent/index.tsx @@ -1,28 +1,34 @@ import { convertTestName } from "@/components/storeCardComponent/utils/convert-test-name"; +import { Badge } from "@/components/ui/badge"; export default function HandleTooltipComponent({ isInput, tooltipTitle, - colors, isConnecting, isCompatible, isSameNode, + accentColorName, + accentForegroundColorName, + left, }: { isInput: boolean; - colors: string[]; tooltipTitle: string; isConnecting: boolean; isCompatible: boolean; isSameNode: boolean; + accentColorName: string; + accentForegroundColorName: string; + left: boolean; }) { const tooltips = tooltipTitle.split("\n"); const plural = tooltips.length > 1 ? "s" : ""; + return (
{isSameNode ? ( "Can't connect to the same node" ) : ( -
+
{isConnecting ? ( isCompatible ? ( @@ -40,22 +46,26 @@ export default function HandleTooltipComponent({ )} {tooltips.map((word, index) => ( -
{word} -
+ ))} {isConnecting && {isInput ? `input` : `output`}}
)} {!isConnecting && ( -
+
Drag to connect compatible {!isInput ? "inputs" : "outputs"}
From 71eaadf2c63169b9cc7304a0601eb3f92914f739 Mon Sep 17 00:00:00 2001 From: cristhianzl Date: Wed, 6 Nov 2024 13:19:38 -0300 Subject: [PATCH 05/17] =?UTF-8?q?=F0=9F=93=9D=20(NodeStatus/index.tsx):=20?= =?UTF-8?q?update=20border=20and=20text=20color=20classes=20for=20better?= =?UTF-8?q?=20visual=20consistency=20and=20clarity?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CustomNodes/GenericNode/components/NodeStatus/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx index 8ef88ef14788..70609701e652 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx @@ -99,7 +99,7 @@ export default function NodeStatus({ const getBaseBorderClass = (selected) => { let className = selected && !isBuilding - ? " border-[1px] ring-[0.75px] ring-foreground border-foreground hover:shadow-node" + ? " border-[1px] ring-[0.75px] ring-muted-foreground border-muted-foreground hover:shadow-node" : "border-[1px] ring-[0.5px] hover:shadow-node ring-border"; let frozenClass = selected ? "border-ring-frozen" : "border-frozen"; return frozen ? frozenClass : className; @@ -218,7 +218,7 @@ export default function NodeStatus({
{validationString && ( -
+
{validationString}
)} From 004a19ea335d846ad7e3d01c90fb0d3cae8cd2b9 Mon Sep 17 00:00:00 2001 From: cristhianzl Date: Wed, 6 Nov 2024 13:19:43 -0300 Subject: [PATCH 06/17] =?UTF-8?q?=F0=9F=90=9B=20(get-class-from-build-stat?= =?UTF-8?q?us.ts):=20fix=20incorrect=20condition=20to=20return=20class=20b?= =?UTF-8?q?ased=20on=20build=20status,=20now=20correctly=20returns=20class?= =?UTF-8?q?=20for=20BUILDING=20status?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/CustomNodes/helpers/get-class-from-build-status.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/frontend/src/CustomNodes/helpers/get-class-from-build-status.ts b/src/frontend/src/CustomNodes/helpers/get-class-from-build-status.ts index 2c4a38984881..48f06cfdc20a 100644 --- a/src/frontend/src/CustomNodes/helpers/get-class-from-build-status.ts +++ b/src/frontend/src/CustomNodes/helpers/get-class-from-build-status.ts @@ -8,7 +8,9 @@ export const getSpecificClassFromBuildStatus = ( ): string => { let isInvalid = validationStatus && !validationStatus.valid; - if ((isInvalid || buildStatus === BuildStatus.ERROR) && !isBuilding) { + if (BuildStatus.BUILDING === buildStatus) { + return "border-foreground border-[1px] ring-[0.75px] ring-foreground"; + } else if ((isInvalid || buildStatus === BuildStatus.ERROR) && !isBuilding) { return "border-destructive border-[1px] ring-[0.75px] ring-destructive"; } else { return ""; From 3e00eec419ce373ff145d647bd4fd8f2016641b5 Mon Sep 17 00:00:00 2001 From: cristhianzl Date: Wed, 6 Nov 2024 13:19:48 -0300 Subject: [PATCH 07/17] =?UTF-8?q?=E2=9C=A8=20(nodeToolbarComponent/index.t?= =?UTF-8?q?sx):=20Add=20zoom=20functionality=20to=20NodeToolbarComponent?= =?UTF-8?q?=20using=20ReactFlow's=20store=20selector=20to=20dynamically=20?= =?UTF-8?q?adjust=20scale=20based=20on=20zoom=20level.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/nodeToolbarComponent/index.tsx | 76 ++++++++----------- 1 file changed, 33 insertions(+), 43 deletions(-) diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx index 30054c86816a..8671abeb7d9f 100644 --- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx @@ -8,7 +8,7 @@ import CodeAreaModal from "@/modals/codeAreaModal"; import { APIClassType } from "@/types/api"; import _, { cloneDeep } from "lodash"; import { useEffect, useRef, useState } from "react"; -import { useUpdateNodeInternals } from "reactflow"; +import { useReactFlow, useStore, useUpdateNodeInternals } from "reactflow"; import IconComponent from "../../../../components/genericIconComponent"; import ShadTooltip from "../../../../components/shadTooltipComponent"; import { @@ -322,10 +322,31 @@ export default function NodeToolbarComponent({ (selectTriggerRef.current! as HTMLElement)?.click(); }; + // Use ReactFlow's store selector to get zoom updates + const zoom = useStore((state) => state.transform[2]); + const [scale, setScale] = useState(null); + + useEffect(() => { + if (!zoom) return; + if (zoom < 0.65) { + const newScale = Math.max(zoom * 1.2, 0.4); + setScale(newScale); + } else { + setScale(1); + } + }, [zoom]); + + if (scale === null) return <>; return ( <> -
-
+
+
{hasCode && ( )} - name.toLowerCase() === "freeze path", - )!} - /> - } - side="top" - > - - + - +