Added pinned property on node

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -107,6 +107,7 @@ export default function GenericNode({
   }, [flowPool, data.id]);
 
   const showNode = data.showNode ?? true;
+  const pinned = data.pinned ?? true;
 
   const nameEditable = data.node?.flow || data.type === "CustomComponent";
 
@@ -204,7 +205,7 @@ export default function GenericNode({
                   ) : (
                     <ShadTooltip content={data.node?.display_name}>
                       <div
-                        className="flex"
+                        className="flex items-center gap-2"
                         onDoubleClick={() => {
                           setInputName(true);
                           takeSnapshot();
@@ -212,7 +213,7 @@ export default function GenericNode({
                       >
                         <div
                           data-testid={"title-" + data.node?.display_name}
-                          className="generic-node-tooltip-div pr-2 text-primary"
+                          className="generic-node-tooltip-div text-primary"
                         >
                           {data.node?.display_name}
                         </div>
@@ -318,7 +319,32 @@ export default function GenericNode({
                 </>
               )}
             </div>
-
+            {showNode && (
+              <div
+                className="round-button-div"
+                onClick={() => {
+                  setNode(data.id, (old) => ({
+                    ...old,
+                    data: {
+                      ...old.data,
+                      pinned: old?.data?.pinned ? false : true,
+                    },
+                  }));
+                }}
+              >
+                <div className="generic-node-status-position flex items-center">
+                  <IconComponent
+                    name={"Pin"}
+                    className={cn(
+                      "h-5 fill-transparent stroke-chat-trigger stroke-2 transition-all",
+                      pinned ?? false
+                        ? "animate-wiggle fill-chat-trigger"
+                        : ""
+                    )}
+                  />
+                </div>
+              </div>
+            )}
             {showNode && (
               <div
                 className="round-button-div"
@@ -351,7 +377,7 @@ export default function GenericNode({
                       )
                     }
                   >
-                    <div className="generic-node-status-position">
+                    <div className="generic-node-status-position flex items-center">
                       <div
                         className={classNames(
                           validationStatus && validationStatus.valid

src/frontend/src/stores/flowStore.ts

@@ -134,6 +134,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
         ? change(get().nodes.find((node) => node.id === id)!)
         : change;
 
+    console.log(newChange);
     get().setNodes((oldNodes) =>
       oldNodes.map((node) => {
         if (node.id === id) {

src/frontend/src/style/applies.css

@@ -267,7 +267,7 @@
     @apply relative flex flex-col justify-center bg-background;
   }
   .generic-node-div-title {
-    @apply flex w-full items-center gap-8  border-b bg-muted p-4;
+    @apply flex w-full items-center gap-4 border-b bg-muted p-4;
   }
   .generic-node-title-arrangement {
     @apply flex-max-width items-center truncate;

src/frontend/src/types/flow/index.ts

@@ -21,6 +21,7 @@ export type NodeType = {
 
 export type NodeDataType = {
   showNode?: boolean;
+  pinned?: boolean;
   type: string;
   node?: APIClassType;
   id: string;

src/frontend/src/utils/styleUtils.ts

@@ -68,6 +68,7 @@ import {
   Network,
   Paperclip,
   Pencil,
+  Pin,
   Plus,
   Redo,
   RefreshCcw,
@@ -378,6 +379,7 @@ export const nodeIconsLucide: iconsType = {
   Loader2,
   BookmarkPlus,
   Heart,
+  Pin,
   Link,
   ToyBrick,
   RefreshCcw,