From 85dd0b70f61383571d331f5a04963d4b970e5dfa Mon Sep 17 00:00:00 2001
From: MFA-X-AI <fahreza@xpress.ai>
Date: Tue, 9 Jul 2024 22:59:19 +0900
Subject: [PATCH 01/13] add custom node icons

---
 src/components/node/CustomNodeWidget.tsx | 42 +++++++++++++++++++++---
 src/ui-components/icons.tsx              |  8 ++++-
 style/icons/branch-component.svg         |  1 +
 style/icons/component-library.svg        |  7 +---
 style/icons/start-finish-component.svg   |  1 +
 style/icons/workflow-component.svg       |  1 +
 6 files changed, 49 insertions(+), 11 deletions(-)
 create mode 100644 style/icons/branch-component.svg
 create mode 100644 style/icons/start-finish-component.svg
 create mode 100644 style/icons/workflow-component.svg

diff --git a/src/components/node/CustomNodeWidget.tsx b/src/components/node/CustomNodeWidget.tsx
index 4b742212..e41c790d 100644
--- a/src/components/node/CustomNodeWidget.tsx
+++ b/src/components/node/CustomNodeWidget.tsx
@@ -10,13 +10,15 @@ import { Dialog } from '@jupyterlab/apputils';
 import { formDialogWidget } from '../../dialog/formDialogwidget';
 import { showFormDialog } from '../../dialog/FormDialog';
 import { CommentDialog } from '../../dialog/CommentDialog';
-import ReactTooltip from "react-tooltip";
+import ReactTooltip from 'react-tooltip';
 import { marked } from 'marked';
 import Color from 'colorjs.io';
-import { commandIDs } from "../../commands/CommandIDs";
+import { commandIDs } from '../../commands/CommandIDs';
+import { componentLibIcon, branchComponentIcon, workflowComponentIcon, startFinishComponentIcon } from '../../ui-components/icons';
 
 var S;
 (function (S) {
+
     S.Node = styled.div<{ borderColor: string, background: string; selected: boolean; }>`
         background-color: ${(p) => {
             const color = new Color(p.background);
@@ -43,7 +45,20 @@ var S;
 
     S.TitleName = styled.div`
         flex-grow: 1;
-        padding: 5px 5px;
+        padding: 5px 5px 5px 5px;
+    `;
+
+    S.IconContainer = styled.div`
+        padding: 5px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 15px;
+        height: 15px;
+        svg {
+            width: 100%;
+            height: 100%;
+        }
     `;
 
     S.CommentContainer = styled.div<{ selected: boolean; }>`
@@ -85,6 +100,7 @@ var S;
             margin-right: 0px;
         }
     `;
+
     S.WorkflowNode = styled(S.Node)`
         outline: 2px solid rgba(255, 255, 255, 0.2);
         outline-offset: 8px; // Space between the main node and the outline
@@ -102,6 +118,21 @@ export interface DefaultNodeProps {
     shell: ILabShell;
 }
 
+const getNodeIcon = (type) => {
+    switch (type) {
+        case 'startFinish':
+            return <startFinishComponentIcon.react />;
+        case 'workflow':
+            return <workflowComponentIcon.react />;
+        case 'branch':
+            return <branchComponentIcon.react />;
+        case 'library_component':
+            return <componentLibIcon.react />;
+        default:
+            return null;
+    }
+};
+
 const CommentNode = ({ node }) => {
     const [commentInput, setCommentInput] = React.useState(node['extras']['commentInput']);
 
@@ -149,6 +180,7 @@ const ParameterNode = ({ node, engine, app }) => {
             onDoubleClick={handleEditParameter}
         >
             <S.Title>
+                {/* <S.IconContainer>{getNodeIcon('parameter')}</S.IconContainer> */}
                 <S.TitleName>{node.getOptions().name}</S.TitleName>
             </S.Title>
             <S.Ports>
@@ -167,6 +199,7 @@ const StartFinishNode = ({ node, engine, handleDeletableNode }) => (
         background={node.getOptions().color}
     >
         <S.Title>
+            <S.IconContainer>{getNodeIcon('startFinish')}</S.IconContainer>
             <S.TitleName>{node.getOptions().name}</S.TitleName>
             <label data-no-drag>
                 <Toggle className='lock' checked={node.isLocked() ?? false} onChange={event => handleDeletableNode('nodeDeletable', event)} />
@@ -181,7 +214,6 @@ const StartFinishNode = ({ node, engine, handleDeletableNode }) => (
 
 const WorkflowNode = ({ node, engine, handleDeletableNode }) => {
     const elementRef = React.useRef<HTMLElement>(null);
-
     return (
         <div style={{ position: "relative" }}>
             <S.WorkflowNode
@@ -193,6 +225,7 @@ const WorkflowNode = ({ node, engine, handleDeletableNode }) => {
                 background={node.getOptions().color}
             >
                 <S.Title>
+                    <S.IconContainer>{getNodeIcon('workflow')}</S.IconContainer>
                     <S.TitleName>{node.getOptions().name}</S.TitleName>
                     <label data-no-drag>
                         <Toggle className='lock' checked={node.isLocked() ?? false} onChange={event => handleDeletableNode('nodeDeletable', event)} />
@@ -255,6 +288,7 @@ const ComponentLibraryNode = ({ node, engine, shell, handleDeletableNode }) => {
                 background={node.getOptions().color}
             >
                 <S.Title>
+                    <S.IconContainer>{getNodeIcon('library_component')}</S.IconContainer>
                     <S.TitleName>{node.getOptions().name}</S.TitleName>
                     <label data-no-drag>
                         <Toggle className='lock' checked={node.isLocked() ?? false} onChange={event => handleDeletableNode('nodeDeletable', event)} />
diff --git a/src/ui-components/icons.tsx b/src/ui-components/icons.tsx
index 16623130..968abc49 100644
--- a/src/ui-components/icons.tsx
+++ b/src/ui-components/icons.tsx
@@ -8,6 +8,9 @@ import revertSvg from '../../style/icons/revert.svg';
 import componentLibSvg from '../../style/icons/component-library.svg';
 import reloadAllSvg from '../../style/icons/reload-all.svg';
 import toggleAnimationSvg from '../../style/icons/low-power.svg';
+import BranchComponentSvg from '../../style/icons/branch-component.svg';
+import WorkflowComponentSvg from '../../style/icons/workflow-component.svg';
+import startFinishComponentSvg from '../../style/icons/start-finish-component.svg';
 
 export const xircuitsFaviconLink = 'https://raw.githubusercontent.com/XpressAI/xircuits/master/style/icons/xpress-logo.ico';
 export const xircuitsIcon = new LabIcon({ name: 'xircuits:xircuits', svgstr: xircuitsSvg });
@@ -16,9 +19,12 @@ export const lockIcon = new LabIcon({ name: 'xircuits:lockIcon', svgstr: lockSvg
 export const breakpointIcon = new LabIcon({ name: 'xircuits:breakpointIcon', svgstr: breakpointSvg });
 export const nextIcon = new LabIcon({ name: 'xircuits:nextIcon', svgstr: nextSvg });
 export const revertIcon = new LabIcon({ name: 'xircuits:revertIcon', svgstr: revertSvg });
-export const componentLibIcon = new LabIcon({ name: 'xircuits:componentLibIcon', svgstr: componentLibSvg });
 export const reloadAllIcon = new LabIcon({ name: 'xircuits:reloadAllIcon', svgstr: reloadAllSvg });
 export const toggleAnimationIcon = new LabIcon({ name: 'xircuits:toggleAnimationIcon', svgstr: toggleAnimationSvg });
+export const componentLibIcon = new LabIcon({ name: 'xircuits:componentLibIcon', svgstr: componentLibSvg });
+export const branchComponentIcon = new LabIcon({ name: 'xircuits:BranchComponentIcon', svgstr: BranchComponentSvg });
+export const workflowComponentIcon = new LabIcon({ name: 'xircuits:workflowComponentIcon', svgstr: WorkflowComponentSvg });
+export const startFinishComponentIcon = new LabIcon({ name: 'xircuits:startFinishComponentIcon', svgstr: startFinishComponentSvg });
 
 export function changeFavicon(src: string) {
     let head = document.head || document.getElementsByTagName('head')[0];
diff --git a/style/icons/branch-component.svg b/style/icons/branch-component.svg
new file mode 100644
index 00000000..14188d4c
--- /dev/null
+++ b/style/icons/branch-component.svg
@@ -0,0 +1 @@
+<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-arrows-split"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M21 17h-8l-3.5 -5h-6.5" /><path d="M21 7h-8l-3.495 5" /><path d="M18 10l3 -3l-3 -3" /><path d="M18 20l3 -3l-3 -3" /></svg>
\ No newline at end of file
diff --git a/style/icons/component-library.svg b/style/icons/component-library.svg
index aea6cabd..700ddc24 100644
--- a/style/icons/component-library.svg
+++ b/style/icons/component-library.svg
@@ -1,6 +1 @@
-<svg class="jp-icon3"  fill="#616161" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="-50px" y="0px" 
-     viewBox="15 0 70 100" enable-background="new 0 0 100 100" xml:space="preserve">
-    <g class="jp-icon3" fill="#616161" >
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M80,70H20V33h9v-7h16v7h12v-7h16v7h7V70z"></path>
-    </g>
-</svg>
\ No newline at end of file
+<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  className="icon icon-tabler icons-tabler-outline icon-tabler-cube"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M21 16.008v-8.018a1.98 1.98 0 0 0 -1 -1.717l-7 -4.008a2.016 2.016 0 0 0 -2 0l-7 4.008c-.619 .355 -1 1.01 -1 1.718v8.018c0 .709 .381 1.363 1 1.717l7 4.008a2.016 2.016 0 0 0 2 0l7 -4.008c.619 -.355 1 -1.01 1 -1.718z" /><path d="M12 22v-10" /><path d="M12 12l8.73 -5.04" /><path d="M3.27 6.96l8.73 5.04" /></svg>
\ No newline at end of file
diff --git a/style/icons/start-finish-component.svg b/style/icons/start-finish-component.svg
new file mode 100644
index 00000000..e4bde120
--- /dev/null
+++ b/style/icons/start-finish-component.svg
@@ -0,0 +1 @@
+<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="currentColor"  class="icon icon-tabler icons-tabler-filled icon-tabler-direction-sign"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.52 2.614a2.095 2.095 0 0 1 2.835 -.117l.126 .117l7.905 7.905c.777 .777 .816 2.013 .117 2.836l-.117 .126l-7.905 7.905a2.094 2.094 0 0 1 -2.836 .117l-.126 -.117l-7.907 -7.906a2.096 2.096 0 0 1 -.115 -2.835l.117 -.126l7.905 -7.905zm5.969 9.535l.01 -.116l-.003 -.12l-.016 -.114l-.03 -.11l-.044 -.112l-.052 -.098l-.076 -.105l-.07 -.081l-3.5 -3.5l-.095 -.083a1 1 0 0 0 -1.226 0l-.094 .083l-.083 .094a1 1 0 0 0 0 1.226l.083 .094l1.792 1.793h-5.085l-.117 .007a1 1 0 0 0 0 1.986l.117 .007h5.085l-1.792 1.793l-.083 .094a1 1 0 0 0 1.403 1.403l.094 -.083l3.5 -3.5l.097 -.112l.05 -.074l.037 -.067l.05 -.112l.023 -.076l.025 -.117z" /></svg>
\ No newline at end of file
diff --git a/style/icons/workflow-component.svg b/style/icons/workflow-component.svg
new file mode 100644
index 00000000..dabc6331
--- /dev/null
+++ b/style/icons/workflow-component.svg
@@ -0,0 +1 @@
+<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  className="icon icon-tabler icons-tabler-outline icon-tabler-chart-dots-3"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 7m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M16 15m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M18 6m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /><path d="M6 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /><path d="M9 17l5 -1.5" /><path d="M6.5 8.5l7.81 5.37" /><path d="M7 7l8 -1" /></svg>
\ No newline at end of file

From 7c5d1481aae681cfbbfcacd254a4f7acf2c645b0 Mon Sep 17 00:00:00 2001
From: MFA-X-AI <fahreza@xpress.ai>
Date: Tue, 9 Jul 2024 23:51:10 +0900
Subject: [PATCH 02/13] library component nodes will use node extra type for
 icon, set default library from debug -> library_component

---
 src/components/node/CustomNodeWidget.tsx | 3 ++-
 xircuits/handlers/components.py          | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/node/CustomNodeWidget.tsx b/src/components/node/CustomNodeWidget.tsx
index e41c790d..9eef07dc 100644
--- a/src/components/node/CustomNodeWidget.tsx
+++ b/src/components/node/CustomNodeWidget.tsx
@@ -120,6 +120,7 @@ export interface DefaultNodeProps {
 
 const getNodeIcon = (type) => {
     switch (type) {
+        case 'Start':
         case 'startFinish':
             return <startFinishComponentIcon.react />;
         case 'workflow':
@@ -288,7 +289,7 @@ const ComponentLibraryNode = ({ node, engine, shell, handleDeletableNode }) => {
                 background={node.getOptions().color}
             >
                 <S.Title>
-                    <S.IconContainer>{getNodeIcon('library_component')}</S.IconContainer>
+                    <S.IconContainer>{getNodeIcon(node['extras']['type'])}</S.IconContainer>
                     <S.TitleName>{node.getOptions().name}</S.TitleName>
                     <label data-no-drag>
                         <Toggle className='lock' checked={node.isLocked() ?? false} onChange={event => handleDeletableNode('nodeDeletable', event)} />
diff --git a/xircuits/handlers/components.py b/xircuits/handlers/components.py
index 226471e8..b87bf412 100644
--- a/xircuits/handlers/components.py
+++ b/xircuits/handlers/components.py
@@ -220,7 +220,7 @@ def extract_component(self, node: ast.ClassDef, file_path, file_lines, python_pa
             "task": name,
             "header": GROUP_ADVANCED,
             "category": category,
-            "type": "debug",
+            "type": "library_component",
             "variables": variables,
             "docstring": docstring,
             "lineno" : lineno

From e37057220b636ec6dd2c9002eaa4a07137e5483f Mon Sep 17 00:00:00 2001
From: MFA-X-AI <fahreza@xpress.ai>
Date: Wed, 10 Jul 2024 00:46:48 +0900
Subject: [PATCH 03/13] fix svg classnames, set render library icon for type
 debug

---
 src/components/node/CustomNodeWidget.tsx   | 4 +++-
 style/icons/branch-component.svg           | 2 +-
 style/icons/start-finish-component.svg     | 2 +-
 xai_components/xai_controlflow/branches.py | 8 ++++----
 4 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/node/CustomNodeWidget.tsx b/src/components/node/CustomNodeWidget.tsx
index 9eef07dc..abacd4b7 100644
--- a/src/components/node/CustomNodeWidget.tsx
+++ b/src/components/node/CustomNodeWidget.tsx
@@ -49,7 +49,7 @@ var S;
     `;
 
     S.IconContainer = styled.div`
-        padding: 5px;
+        padding: 5px 5px 5px 5px;
         display: flex;
         align-items: center;
         justify-content: center;
@@ -127,6 +127,8 @@ const getNodeIcon = (type) => {
             return <workflowComponentIcon.react />;
         case 'branch':
             return <branchComponentIcon.react />;
+        // component libraries were typed as 'debug'. To be removed in the future.
+        case 'debug':
         case 'library_component':
             return <componentLibIcon.react />;
         default:
diff --git a/style/icons/branch-component.svg b/style/icons/branch-component.svg
index 14188d4c..1261449f 100644
--- a/style/icons/branch-component.svg
+++ b/style/icons/branch-component.svg
@@ -1 +1 @@
-<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-arrows-split"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M21 17h-8l-3.5 -5h-6.5" /><path d="M21 7h-8l-3.495 5" /><path d="M18 10l3 -3l-3 -3" /><path d="M18 20l3 -3l-3 -3" /></svg>
\ No newline at end of file
+<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  className="icon icon-tabler icons-tabler-outline icon-tabler-arrows-split"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M21 17h-8l-3.5 -5h-6.5" /><path d="M21 7h-8l-3.495 5" /><path d="M18 10l3 -3l-3 -3" /><path d="M18 20l3 -3l-3 -3" /></svg>
\ No newline at end of file
diff --git a/style/icons/start-finish-component.svg b/style/icons/start-finish-component.svg
index e4bde120..207f2eb8 100644
--- a/style/icons/start-finish-component.svg
+++ b/style/icons/start-finish-component.svg
@@ -1 +1 @@
-<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="currentColor"  class="icon icon-tabler icons-tabler-filled icon-tabler-direction-sign"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.52 2.614a2.095 2.095 0 0 1 2.835 -.117l.126 .117l7.905 7.905c.777 .777 .816 2.013 .117 2.836l-.117 .126l-7.905 7.905a2.094 2.094 0 0 1 -2.836 .117l-.126 -.117l-7.907 -7.906a2.096 2.096 0 0 1 -.115 -2.835l.117 -.126l7.905 -7.905zm5.969 9.535l.01 -.116l-.003 -.12l-.016 -.114l-.03 -.11l-.044 -.112l-.052 -.098l-.076 -.105l-.07 -.081l-3.5 -3.5l-.095 -.083a1 1 0 0 0 -1.226 0l-.094 .083l-.083 .094a1 1 0 0 0 0 1.226l.083 .094l1.792 1.793h-5.085l-.117 .007a1 1 0 0 0 0 1.986l.117 .007h5.085l-1.792 1.793l-.083 .094a1 1 0 0 0 1.403 1.403l.094 -.083l3.5 -3.5l.097 -.112l.05 -.074l.037 -.067l.05 -.112l.023 -.076l.025 -.117z" /></svg>
\ No newline at end of file
+<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="currentColor"  className="icon icon-tabler icons-tabler-filled icon-tabler-direction-sign"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.52 2.614a2.095 2.095 0 0 1 2.835 -.117l.126 .117l7.905 7.905c.777 .777 .816 2.013 .117 2.836l-.117 .126l-7.905 7.905a2.094 2.094 0 0 1 -2.836 .117l-.126 -.117l-7.907 -7.906a2.096 2.096 0 0 1 -.115 -2.835l.117 -.126l7.905 -7.905zm5.969 9.535l.01 -.116l-.003 -.12l-.016 -.114l-.03 -.11l-.044 -.112l-.052 -.098l-.076 -.105l-.07 -.081l-3.5 -3.5l-.095 -.083a1 1 0 0 0 -1.226 0l-.094 .083l-.083 .094a1 1 0 0 0 0 1.226l.083 .094l1.792 1.793h-5.085l-.117 .007a1 1 0 0 0 0 1.986l.117 .007h5.085l-1.792 1.793l-.083 .094a1 1 0 0 0 1.403 1.403l.094 -.083l3.5 -3.5l.097 -.112l.05 -.074l.037 -.067l.05 -.112l.023 -.076l.025 -.117z" /></svg>
\ No newline at end of file
diff --git a/xai_components/xai_controlflow/branches.py b/xai_components/xai_controlflow/branches.py
index a86803a0..f5debaaf 100644
--- a/xai_components/xai_controlflow/branches.py
+++ b/xai_components/xai_controlflow/branches.py
@@ -1,6 +1,6 @@
 from xai_components.base import InArg, OutArg, InCompArg, Component, BaseComponent, xai_component, dynalist
 
-@xai_component
+@xai_component(type='branch')
 class BranchComponent(Component):
     when_true: BaseComponent
     when_false: BaseComponent
@@ -20,7 +20,7 @@ def do(self, ctx) -> BaseComponent:
         if hasattr(self, 'next') and self.next:
             return self.next
     
-@xai_component
+@xai_component(type='branch')
 class LoopComponent(Component):
     body: BaseComponent
 
@@ -35,7 +35,7 @@ def do(self, ctx) -> BaseComponent:
         if hasattr(self, 'next') and self.next:
             return self.next
 
-@xai_component
+@xai_component(type='branch')
 class ReverseForEach(Component):
     body: BaseComponent
     
@@ -56,7 +56,7 @@ def do(self, ctx) -> BaseComponent:
             return self.next
 
 
-@xai_component
+@xai_component(type='branch')
 class ForEach(Component):
     body: BaseComponent
     

From 7535367545dd6312dd49f26e9a21922db5fa4db1 Mon Sep 17 00:00:00 2001
From: MFA-X-AI <fahreza@xpress.ai>
Date: Wed, 10 Jul 2024 14:24:31 +0900
Subject: [PATCH 04/13] set color to node title, node body to gray, add
 function component node icon

---
 src/components/node/CustomNodeWidget.tsx | 39 +++++++++++++++---------
 src/ui-components/icons.tsx              |  2 ++
 style/icons/function-component.svg       |  7 +++++
 3 files changed, 33 insertions(+), 15 deletions(-)
 create mode 100644 style/icons/function-component.svg

diff --git a/src/components/node/CustomNodeWidget.tsx b/src/components/node/CustomNodeWidget.tsx
index abacd4b7..61495c5d 100644
--- a/src/components/node/CustomNodeWidget.tsx
+++ b/src/components/node/CustomNodeWidget.tsx
@@ -14,18 +14,12 @@ import ReactTooltip from 'react-tooltip';
 import { marked } from 'marked';
 import Color from 'colorjs.io';
 import { commandIDs } from '../../commands/CommandIDs';
-import { componentLibIcon, branchComponentIcon, workflowComponentIcon, startFinishComponentIcon } from '../../ui-components/icons';
+import { componentLibIcon, branchComponentIcon, workflowComponentIcon, functionComponentIcon, startFinishComponentIcon } from '../../ui-components/icons';
 
 var S;
 (function (S) {
 
     S.Node = styled.div<{ borderColor: string, background: string; selected: boolean; }>`
-        background-color: ${(p) => {
-            const color = new Color(p.background);
-            color.alpha = 0.75;
-            color.oklch.c *= 1.2;
-            return color.to('oklch').toString();
-        }};
         box-shadow: 1px 1px 10px ${(p) => p.selected ? '3px rgb(0 192 255 / 0.5)' : '0px rgb(0 0 0 / 0.5)'};
         border-radius: 5px;
         font-family: sans-serif;
@@ -35,12 +29,19 @@ var S;
         border: solid 1px ${(p) => (p.selected ? (p.borderColor == undefined ? 'rgb(0,192,255)' : p.borderColor) : 'black')};
     `;
 
-    S.Title = styled.div`
-        background: rgba(0, 0, 0, 0.3);
+    S.Title = styled.div<{ background: string; }>`
+        background-color: ${(p) => {
+            const color = new Color(p.background);
+            color.alpha = 0.75;
+            color.oklch.c *= 1.2;
+            return color.to('oklch').toString();
+        }};
         display: flex;
         white-space: nowrap;
         justify-items: center;
         box-shadow: inset 0 -2px 4px 0 rgb(0 0 0 / 0.05);
+        border-top-left-radius: 5px;
+        border-top-right-radius: 5px;
     `;
 
     S.TitleName = styled.div`
@@ -82,7 +83,9 @@ var S;
 
     S.Ports = styled.div`
         display: flex;
-        background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2));
+        background-image: linear-gradient(rgba(128, 128, 128, 0.1), rgba(128, 128, 128, 0.2));
+        border-bottom-left-radius: 5px;
+        border-bottom-right-radius: 5px;
     `;
 
     S.PortsContainer = styled.div`
@@ -127,7 +130,9 @@ const getNodeIcon = (type) => {
             return <workflowComponentIcon.react />;
         case 'branch':
             return <branchComponentIcon.react />;
-        // component libraries were typed as 'debug'. To be removed in the future.
+        case 'function':
+            return <functionComponentIcon.react />;
+        // component libraries were typed as 'debug' before v1.12.
         case 'debug':
         case 'library_component':
             return <componentLibIcon.react />;
@@ -182,7 +187,8 @@ const ParameterNode = ({ node, engine, app }) => {
             background={node.getOptions().color}
             onDoubleClick={handleEditParameter}
         >
-            <S.Title>
+            <S.Title background={node.getOptions().color}
+>
                 {/* <S.IconContainer>{getNodeIcon('parameter')}</S.IconContainer> */}
                 <S.TitleName>{node.getOptions().name}</S.TitleName>
             </S.Title>
@@ -201,7 +207,8 @@ const StartFinishNode = ({ node, engine, handleDeletableNode }) => (
         selected={node.isSelected()}
         background={node.getOptions().color}
     >
-        <S.Title>
+        <S.Title background={node.getOptions().color}
+>
             <S.IconContainer>{getNodeIcon('startFinish')}</S.IconContainer>
             <S.TitleName>{node.getOptions().name}</S.TitleName>
             <label data-no-drag>
@@ -227,7 +234,8 @@ const WorkflowNode = ({ node, engine, handleDeletableNode }) => {
                 selected={node.isSelected()}
                 background={node.getOptions().color}
             >
-                <S.Title>
+                <S.Title background={node.getOptions().color}
+>
                     <S.IconContainer>{getNodeIcon('workflow')}</S.IconContainer>
                     <S.TitleName>{node.getOptions().name}</S.TitleName>
                     <label data-no-drag>
@@ -290,7 +298,8 @@ const ComponentLibraryNode = ({ node, engine, shell, handleDeletableNode }) => {
                 selected={node.isSelected()}
                 background={node.getOptions().color}
             >
-                <S.Title>
+                <S.Title background={node.getOptions().color}
+>
                     <S.IconContainer>{getNodeIcon(node['extras']['type'])}</S.IconContainer>
                     <S.TitleName>{node.getOptions().name}</S.TitleName>
                     <label data-no-drag>
diff --git a/src/ui-components/icons.tsx b/src/ui-components/icons.tsx
index 968abc49..674b0656 100644
--- a/src/ui-components/icons.tsx
+++ b/src/ui-components/icons.tsx
@@ -11,6 +11,7 @@ import toggleAnimationSvg from '../../style/icons/low-power.svg';
 import BranchComponentSvg from '../../style/icons/branch-component.svg';
 import WorkflowComponentSvg from '../../style/icons/workflow-component.svg';
 import startFinishComponentSvg from '../../style/icons/start-finish-component.svg';
+import functionComponentSvg from '../../style/icons/function-component.svg';
 
 export const xircuitsFaviconLink = 'https://raw.githubusercontent.com/XpressAI/xircuits/master/style/icons/xpress-logo.ico';
 export const xircuitsIcon = new LabIcon({ name: 'xircuits:xircuits', svgstr: xircuitsSvg });
@@ -25,6 +26,7 @@ export const componentLibIcon = new LabIcon({ name: 'xircuits:componentLibIcon',
 export const branchComponentIcon = new LabIcon({ name: 'xircuits:BranchComponentIcon', svgstr: BranchComponentSvg });
 export const workflowComponentIcon = new LabIcon({ name: 'xircuits:workflowComponentIcon', svgstr: WorkflowComponentSvg });
 export const startFinishComponentIcon = new LabIcon({ name: 'xircuits:startFinishComponentIcon', svgstr: startFinishComponentSvg });
+export const functionComponentIcon = new LabIcon({ name: 'xircuits:functionComponentIcon', svgstr: functionComponentSvg });
 
 export function changeFavicon(src: string) {
     let head = document.head || document.getElementsByTagName('head')[0];
diff --git a/style/icons/function-component.svg b/style/icons/function-component.svg
new file mode 100644
index 00000000..12dd957e
--- /dev/null
+++ b/style/icons/function-component.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" className="icon icon-tabler icons-tabler-outline icon-tabler-math-function">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+  <path d="M3 19a2 2 0 0 0 2 2c2 0 2 -4 3 -9s1 -9 3 -9a2 2 0 0 1 2 2" />
+  <path d="M5 12h6" />
+  <path d="M15 12l6 6" />
+  <path d="M15 18l6 -6" />
+</svg>
\ No newline at end of file

From 49de1b45df6506bc4609159aa259a33c59475e86 Mon Sep 17 00:00:00 2001
From: MFA-X-AI <fahreza@xpress.ai>
Date: Wed, 10 Jul 2024 14:47:27 +0900
Subject: [PATCH 05/13] adjust transparency

---
 src/components/node/CustomNodeWidget.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/node/CustomNodeWidget.tsx b/src/components/node/CustomNodeWidget.tsx
index 61495c5d..4aa24d8a 100644
--- a/src/components/node/CustomNodeWidget.tsx
+++ b/src/components/node/CustomNodeWidget.tsx
@@ -83,7 +83,7 @@ var S;
 
     S.Ports = styled.div`
         display: flex;
-        background-image: linear-gradient(rgba(128, 128, 128, 0.1), rgba(128, 128, 128, 0.2));
+        background-image: linear-gradient(rgba(50, 50, 50, 0.5), rgba(50, 50, 50, 0.8));
         border-bottom-left-radius: 5px;
         border-bottom-right-radius: 5px;
     `;
@@ -127,6 +127,7 @@ const getNodeIcon = (type) => {
         case 'startFinish':
             return <startFinishComponentIcon.react />;
         case 'workflow':
+        case 'xircuits_workflow':
             return <workflowComponentIcon.react />;
         case 'branch':
             return <branchComponentIcon.react />;

From fa58c773d660f2255e4a8e1cc2e174f2c5c9e7c7 Mon Sep 17 00:00:00 2001
From: Paul Dubs <paul.dubs@gmail.com>
Date: Wed, 10 Jul 2024 12:23:26 +0200
Subject: [PATCH 06/13] Make Literal & Argument Node detection a little more
 robust

Custom nodes can never have a space in their name, so adding a space to the startsWith check should now only match on real Literals and Arguments.
---
 src/commands/NodeActionCommands.tsx      | 22 +++++++++++-----------
 src/components/XircuitsBodyWidget.tsx    |  4 ++--
 src/components/node/CustomNodeWidget.tsx |  2 +-
 src/context-menu/CanvasContextMenu.tsx   |  4 ++--
 4 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/commands/NodeActionCommands.tsx b/src/commands/NodeActionCommands.tsx
index 989c5ef7..942b4f92 100644
--- a/src/commands/NodeActionCommands.tsx
+++ b/src/commands/NodeActionCommands.tsx
@@ -70,7 +70,7 @@ export function addNodeActionCommands(
             nodeName = args['nodeName'] ?? node?.name;
             nodeLineNo = args['nodeLineNo'] ?? node?.extras.lineNo;
     
-            if (nodeName.startsWith('Literal') || nodeName.startsWith('Argument')) {
+            if (nodeName.startsWith('Literal ') || nodeName.startsWith('Argument ')) {
                 showDialog({
                     title: `${node.name} don't have its own script`,
                     buttons: [Dialog.warnButton({ label: 'OK' })]
@@ -203,7 +203,7 @@ export function addNodeActionCommands(
         isEnabled: () => {
             let isNodeSelected: boolean;
             const node = getLastSelectedNode();
-            if (node.getOptions()["name"].startsWith("Literal")) {
+            if (node.getOptions()["name"].startsWith("Literal ")) {
                 isNodeSelected = true;
             }
             return isNodeSelected ?? false;
@@ -243,9 +243,9 @@ export function addNodeActionCommands(
             for (let selected_node of selected_nodes) {
 
                 if (
-                    selected_node.name.startsWith("Literal") || 
-                    selected_node.name.startsWith("Argument") ||
-                    selected_node.name.startsWith("Start")
+                    selected_node.name.startsWith("Literal ") ||
+                    selected_node.name.startsWith("Argument ") ||
+                    selected_node.name == "Start"
                 ) {
                     console.info(selected_node.name + " cannot be reloaded.");
                     continue;
@@ -253,7 +253,7 @@ export function addNodeActionCommands(
             
                 let node;
             
-                if (selected_node.name.startsWith("Finish")) {
+                if (selected_node.name == "Finish") {
                     node = BaseComponentLibrary('Finish');
                 } else {
                     // For other nodes, fetch from AdvancedComponentLibrary
@@ -727,12 +727,12 @@ export function addNodeActionCommands(
 
         if (widget) {
             const selected_node = getLastSelectedNode();
-            const nodeType = selected_node.getOptions()["name"];
+            const nodeName = selected_node.getOptions()["name"];
             let updatedNode = null;
     
-            if (nodeType.startsWith("Literal")) {
+            if (nodeName.startsWith("Literal ")) {
                 updatedNode = await editLiteral(widget, selected_node);
-            } else if (nodeType.startsWith("Argument")) {
+            } else if (nodeName.startsWith("Argument ")) {
                 updatedNode = await editArgument(widget, selected_node);
             } else {
                 showDialog({
@@ -778,7 +778,7 @@ export function addNodeActionCommands(
     }
     
     async function editLiteral(widget: XircuitsPanel, selected_node: any): Promise<any> {
-        if (!selected_node.getOptions()["name"].startsWith("Literal")) {
+        if (!selected_node.getOptions()["name"].startsWith("Literal ")) {
             showDialog({
                 title: 'Only Literal Node can be edited',
                 buttons: [Dialog.warnButton({ label: 'OK' })]
@@ -806,7 +806,7 @@ export function addNodeActionCommands(
     }
     
     async function editArgument(widget: XircuitsPanel, selected_node: any): Promise<any> {
-        if (!selected_node.getOptions()["name"].startsWith("Argument")) {
+        if (!selected_node.getOptions()["name"].startsWith("Argument ")) {
             showDialog({
                 title: 'Only Argument Node can be edited',
                 buttons: [Dialog.warnButton({ label: 'OK' })]
diff --git a/src/components/XircuitsBodyWidget.tsx b/src/components/XircuitsBodyWidget.tsx
index 3a097fe6..5f5b33e7 100644
--- a/src/components/XircuitsBodyWidget.tsx
+++ b/src/components/XircuitsBodyWidget.tsx
@@ -732,7 +732,7 @@ export const BodyWidget: FC<BodyWidgetProps> = ({
 
 				for (let i = 0; i < nodesCount; i++) {
 					let nodeName = allNodes[i].getOptions()["name"];
-					if (nodeName.startsWith("Argument")) {
+					if (nodeName.startsWith("Argument ")) {
 						let regEx = /\(([^)]+)\)/;
 						let result = nodeName.match(regEx);
 						let nodeText = nodeName.split(": ");
@@ -1050,7 +1050,7 @@ export const BodyWidget: FC<BodyWidgetProps> = ({
 			let point = xircuitsApp.getDiagramEngine().getRelativeMousePoint(event);
 			node.setPosition(point);
 			xircuitsApp.getDiagramEngine().getModel().addNode(node);
-			if (node["name"].startsWith("Argument")) {
+			if (node["name"].startsWith("Argument ")) {
 				setInitialize(true);
 			}
 			setSaved(false);
diff --git a/src/components/node/CustomNodeWidget.tsx b/src/components/node/CustomNodeWidget.tsx
index 4aa24d8a..038e799a 100644
--- a/src/components/node/CustomNodeWidget.tsx
+++ b/src/components/node/CustomNodeWidget.tsx
@@ -174,7 +174,7 @@ const CommentNode = ({ node }) => {
 const ParameterNode = ({ node, engine, app }) => {
     const handleEditParameter = () => {
         const nodeName = node.getOptions()["name"];
-        if (!nodeName.startsWith("Literal") && !nodeName.startsWith("Argument")) {
+        if (!nodeName.startsWith("Literal ") && !nodeName.startsWith("Argument ")) {
             return;
         }
         app.commands.execute(commandIDs.editNode);
diff --git a/src/context-menu/CanvasContextMenu.tsx b/src/context-menu/CanvasContextMenu.tsx
index 1a482518..8106200e 100644
--- a/src/context-menu/CanvasContextMenu.tsx
+++ b/src/context-menu/CanvasContextMenu.tsx
@@ -71,11 +71,11 @@ export class CanvasContextMenu extends React.Component<CanvasContextMenuProps> {
 export function getMenuOptionsVisibility(models) {
 
     function isLiteralNode(node) {
-        return node.getOptions()?.name?.startsWith("Literal") ?? false;
+        return node.getOptions()?.name?.startsWith("Literal ") ?? false;
     }
 
     function isArgumentNode(node) {
-        return node.getOptions()?.name?.startsWith("Argument") ?? false;
+        return node.getOptions()?.name?.startsWith("Argument ") ?? false;
     }
 
     function isComponentNode(node) {

From 13a822749f5964710b8c5fe6831599c8c68633d5 Mon Sep 17 00:00:00 2001
From: Paul Dubs <paul.dubs@gmail.com>
Date: Wed, 10 Jul 2024 12:26:07 +0200
Subject: [PATCH 07/13] More Contrast on Component Nodes

---
 src/components/node/CustomNodeWidget.tsx | 12 +++++++++---
 src/components/port/CustomPortLabel.tsx  | 14 ++++++++------
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/components/node/CustomNodeWidget.tsx b/src/components/node/CustomNodeWidget.tsx
index 038e799a..df858db4 100644
--- a/src/components/node/CustomNodeWidget.tsx
+++ b/src/components/node/CustomNodeWidget.tsx
@@ -30,12 +30,18 @@ var S;
     `;
 
     S.Title = styled.div<{ background: string; }>`
-        background-color: ${(p) => {
+        background-image: ${(p) => {
             const color = new Color(p.background);
             color.alpha = 0.75;
             color.oklch.c *= 1.2;
-            return color.to('oklch').toString();
+            const color1 = color.to('oklch').toString()
+            color.oklch.c *= 1.2;
+            color.oklch.l /= 2;
+            const color2 = color.to('oklch').toString()
+            return `linear-gradient(${color1}, ${color2})`
         }};
+        font-weight: 500;
+        letter-spacing: 0.025rem;
         display: flex;
         white-space: nowrap;
         justify-items: center;
@@ -83,7 +89,7 @@ var S;
 
     S.Ports = styled.div`
         display: flex;
-        background-image: linear-gradient(rgba(50, 50, 50, 0.5), rgba(50, 50, 50, 0.8));
+        background-image: linear-gradient(oklch(10% 0 0 / 0.7), oklch(10% 0 0 / 0.9));
         border-bottom-left-radius: 5px;
         border-bottom-right-radius: 5px;
     `;
diff --git a/src/components/port/CustomPortLabel.tsx b/src/components/port/CustomPortLabel.tsx
index 32e205ce..dcce081e 100644
--- a/src/components/port/CustomPortLabel.tsx
+++ b/src/components/port/CustomPortLabel.tsx
@@ -27,7 +27,7 @@ namespace S {
 	export const SymbolContainer = styled.div<{ symbolType: string; selected: boolean; isOutPort: boolean }>`
 		width: 15px;
 		height: 15px;
-		background: ${(p) => (p.selected ? 'oklch(1 0 0 / 0.5)' : 'rgba(0, 0, 0, 0.2)')};
+		background: ${(p) => (p.selected ? 'oklch(1 0 0 / 0.5)' : 'oklch(50% 0 0 / 0.2)')};
 		border-radius: ${(p) => (p.isOutPort ? '20px 0px 0px 20px' : '0px 20px 20px 0px')} ;
 		display: ${(p) => p.symbolType == null ? 'none' : 'visible'};
 		text-align: center;
@@ -41,8 +41,8 @@ namespace S {
 		}
 	`;
 
-	export const Symbol = styled.div<{ isOutPort: boolean }>`
-		color: black;
+	export const Symbol = styled.div<{ selected: boolean; isOutPort: boolean }>`
+		color: ${(p) => (p.selected ? 'black' : 'grey')};
 		font-weight: bold;
 		font-size: 9px;
 		font-family: Helvetica, Arial, sans-serif;
@@ -52,8 +52,8 @@ namespace S {
 	export const Port = styled.div<{ isOutPort: boolean, hasLinks: boolean }>`
 		width: 15px;
 		height: 15px;
-		background: ${(p) => p.hasLinks ? 'oklch(1 0 0 / 0.5)' : 'oklch(0 0 0 / 0.2)'};
-		color: ${(p) => p.hasLinks ? 'oklch(0 0 0 / 0.8)' : 'oklch(1 0 0 / 0.8)'};
+		background: ${(p) => p.hasLinks ? 'oklch(1 0 0 / 0.5)' : 'oklch(50% 0 0 / 0.2)'};
+		color: ${(p) => p.hasLinks ? 'oklch(0% 0 0 / 0.8)' : 'oklch(1 0 0 / 0.8)'};
 		border: 1px solid oklch(0 0 0 / 0.2);
 		border-radius: ${(p) => (p.isOutPort ? '20px 0px 0px 20px' : '0px 20px 20px 0px')} ;
 		box-shadow: ${(p) => p.hasLinks ? '' : 'inset'}  0 2px 4px ${(p) => (p.hasLinks ? 'rgb(0 0 0 / 0.1)' : 'rgb(0 0 0 / 0.05)')} ;
@@ -149,7 +149,7 @@ export class CustomPortLabel extends React.Component<CustomPortLabelProps> {
 
 		const symbol = (
 			<S.SymbolContainer symbolType={symbolLabel} selected={portHasLink} isOutPort={isOutPort}>
-				<S.Symbol isOutPort={isOutPort}>
+				<S.Symbol isOutPort={isOutPort} selected={portHasLink}>
 					{symbolLabel}
 				</S.Symbol>
 			</S.SymbolContainer>);
@@ -161,6 +161,8 @@ export class CustomPortLabel extends React.Component<CustomPortLabelProps> {
 				{nodeType === "Literal Secret" ? "*****" : this.props.port.getOptions().label.replace('▶', '').trim()}
 			</S.Label>);
 
+		console.log(this.props);
+
 		return (
 			<S.PortLabel>
 				{this.props.port.getOptions().in ? null : label}

From 7c1fc4d0b184c57c45fbb03b5a0b4961d571bff9 Mon Sep 17 00:00:00 2001
From: Paul Dubs <paul.dubs@gmail.com>
Date: Wed, 10 Jul 2024 12:58:18 +0200
Subject: [PATCH 08/13] Highlight links when hovering on a port

---
 src/components/link/CustomLinkFactory.tsx | 16 +++++++----
 src/components/port/CustomPortLabel.tsx   | 33 ++++++++++++++++++++---
 2 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/src/components/link/CustomLinkFactory.tsx b/src/components/link/CustomLinkFactory.tsx
index a7d553c4..6946ec80 100644
--- a/src/components/link/CustomLinkFactory.tsx
+++ b/src/components/link/CustomLinkFactory.tsx
@@ -36,19 +36,25 @@ namespace S {
 			animation: none !important;
 		}
 	`;
+
+	export const G = styled.g`
+		g.hover & path {
+			stroke: rgb(192, 255, 0);
+		}
+	`;
 }
 
 function addHover(model: TriangleLinkModel | ParameterLinkModel){
 	return (() => {
-					document.querySelector(`div.port[data-nodeid='${model.getSourcePort().getNode().getID()}'][data-name='${model.getSourcePort().getName()}']>div`).classList.add("hover");
-					document.querySelector(`div.port[data-nodeid="${model.getTargetPort().getNode().getID()}"][data-name='${model.getTargetPort().getName()}']>div`).classList.add("hover");
+					document.querySelector(`div.port[data-nodeid='${model.getSourcePort().getNode().getID()}'][data-name='${model.getSourcePort().getName()}']>div>div`).classList.add("hover");
+					document.querySelector(`div.port[data-nodeid="${model.getTargetPort().getNode().getID()}"][data-name='${model.getTargetPort().getName()}']>div>div`).classList.add("hover");
 				});
 }
 
 function removeHover(model: TriangleLinkModel | ParameterLinkModel){
 	return () => {
-					document.querySelector(`div.port[data-nodeid='${model.getSourcePort().getNode().getID()}'][data-name='${model.getSourcePort().getName()}']>div`).classList.remove("hover");
-					document.querySelector(`div.port[data-nodeid="${model.getTargetPort().getNode().getID()}"][data-name='${model.getTargetPort().getName()}']>div`).classList.remove("hover");
+					document.querySelector(`div.port[data-nodeid='${model.getSourcePort().getNode().getID()}'][data-name='${model.getSourcePort().getName()}']>div>div`).classList.remove("hover");
+					document.querySelector(`div.port[data-nodeid="${model.getTargetPort().getNode().getID()}"][data-name='${model.getTargetPort().getName()}']>div>div`).classList.remove("hover");
 				}
 }
 
@@ -131,7 +137,7 @@ class SelectOnClickLinkWidget extends DefaultLinkWidget {
 			}
 		}
 
-		return <g data-default-link-test={this.props.link.getOptions().testName}>{paths}</g>;
+		return <S.G data-default-link-test={this.props.link.getOptions().testName}>{paths}</S.G>;
 	}
 }
 
diff --git a/src/components/port/CustomPortLabel.tsx b/src/components/port/CustomPortLabel.tsx
index dcce081e..ecd4f4ae 100644
--- a/src/components/port/CustomPortLabel.tsx
+++ b/src/components/port/CustomPortLabel.tsx
@@ -156,18 +156,45 @@ export class CustomPortLabel extends React.Component<CustomPortLabelProps> {
 		
 		const nodeType = this.props.node.getOptions().name
 
+		function addHover(port: DefaultPortModel) {
+			return (() => {
+				for (let linksKey in port.getLinks()) {
+					document.querySelector(`g[data-linkid='${linksKey}']`).classList.add("hover");
+					const model = port.getLinks()[linksKey]
+					if(model.getSourcePort() != null)
+						document.querySelector(`div.port[data-nodeid="${model.getSourcePort().getNode().getID()}"][data-name='${model.getSourcePort().getName()}']>div>div`).classList.add("hover");
+					if(model.getTargetPort() != null)
+						document.querySelector(`div.port[data-nodeid="${model.getTargetPort().getNode().getID()}"][data-name='${model.getTargetPort().getName()}']>div>div`).classList.add("hover");
+				}
+			});
+		}
+
+		function removeHover(port: DefaultPortModel) {
+			return () => {
+				for (let linksKey in port.getLinks()) {
+					document.querySelector(`g[data-linkid='${linksKey}']`).classList.remove("hover");
+					const model = port.getLinks()[linksKey]
+					if(model.getSourcePort() != null)
+						document.querySelector(`div.port[data-nodeid="${model.getSourcePort().getNode().getID()}"][data-name='${model.getSourcePort().getName()}']>div>div`).classList.remove("hover");
+					if(model.getTargetPort() != null)
+						document.querySelector(`div.port[data-nodeid="${model.getTargetPort().getNode().getID()}"][data-name='${model.getTargetPort().getName()}']>div>div`).classList.remove("hover");
+				}
+			};
+		}
+
 		const label = (
 			<S.Label style={{ textAlign: (!this.props.port.getOptions().in && this.props.port.getOptions().label === '▶') ? 'right' : 'left' }}>
 				{nodeType === "Literal Secret" ? "*****" : this.props.port.getOptions().label.replace('▶', '').trim()}
 			</S.Label>);
 
-		console.log(this.props);
-
 		return (
 			<S.PortLabel>
 				{this.props.port.getOptions().in ? null : label}
 				<PortWidget engine={this.props.engine} port={this.props.port}>
-					{symbolLabel == null ? port : symbol}
+					<div onMouseOver={addHover(this.props.port)}
+							 onMouseOut={removeHover(this.props.port)}>
+						{symbolLabel == null ? port : symbol}
+					</div>
 				</PortWidget>
 				{this.props.port.getOptions().in ? label : null}
 			</S.PortLabel>

From 314cf8af3371956c54ac1da8bf067f1e5bf67435 Mon Sep 17 00:00:00 2001
From: Paul Dubs <paul.dubs@gmail.com>
Date: Wed, 10 Jul 2024 14:11:22 +0200
Subject: [PATCH 09/13] Make outline more subtle

---
 src/components/node/CustomNodeWidget.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/node/CustomNodeWidget.tsx b/src/components/node/CustomNodeWidget.tsx
index df858db4..3a0fe9af 100644
--- a/src/components/node/CustomNodeWidget.tsx
+++ b/src/components/node/CustomNodeWidget.tsx
@@ -111,11 +111,11 @@ var S;
     `;
 
     S.WorkflowNode = styled(S.Node)`
-        outline: 2px solid rgba(255, 255, 255, 0.2);
-        outline-offset: 8px; // Space between the main node and the outline
+        outline: 1px solid oklch(75% 0 0 / 0.2);
+        outline-offset: 4px; // Space between the main node and the outline
 
         ${(p) => p.selected && `
-            outline: 2px solid rgba(0, 192, 255, 0.2); // blue
+            outline: 2px solid rgba(0, 192, 255, 0.1); // blue
         `}
     `;
 })(S || (S = {}));
@@ -240,6 +240,7 @@ const WorkflowNode = ({ node, engine, handleDeletableNode }) => {
                 data-default-node-name={node.getOptions().name}
                 selected={node.isSelected()}
                 background={node.getOptions().color}
+                className="workflow-node"
             >
                 <S.Title background={node.getOptions().color}
 >

From 67f814c7c5a9b233a08833238be0d19d7e4f981d Mon Sep 17 00:00:00 2001
From: Paul Dubs <paul.dubs@gmail.com>
Date: Wed, 10 Jul 2024 14:39:24 +0200
Subject: [PATCH 10/13] Add Component Icons to Library List

---
 src/tray_library/TrayItemWidget.tsx | 39 ++++++++++++++++++++++++++++-
 1 file changed, 38 insertions(+), 1 deletion(-)

diff --git a/src/tray_library/TrayItemWidget.tsx b/src/tray_library/TrayItemWidget.tsx
index e6264d44..843fab93 100644
--- a/src/tray_library/TrayItemWidget.tsx
+++ b/src/tray_library/TrayItemWidget.tsx
@@ -5,6 +5,12 @@ import styled from '@emotion/styled';
 import { JupyterFrontEnd } from '@jupyterlab/application';
 
 import { commandIDs } from "../commands/CommandIDs";
+import {
+	branchComponentIcon, componentLibIcon,
+	functionComponentIcon,
+	startFinishComponentIcon,
+	workflowComponentIcon
+} from "../ui-components/icons";
 
 export interface TrayItemWidgetProps {
 	model: any;
@@ -21,7 +27,7 @@ interface TrayStyledProps {
 
 export const Tray = styled.div<TrayStyledProps>`
 	color: black;
-	font-family: Helvetica, Arial;
+	font-family: Helvetica, Arial, sans-serif;
 	padding: 7px;
 	width: auto;
 	margin: 7px;
@@ -29,10 +35,40 @@ export const Tray = styled.div<TrayStyledProps>`
 	border-radius: 5px;
 	margin-bottom: 2px;
 	cursor: pointer;
+	display: flex;
+	gap: 0.5em;
+	overflow: hidden;
+	align-items: center;
+	
+	& svg {
+		height: 16px;
+		width: 16px;
+	}
 `;
 
 export class TrayItemWidget extends React.Component<TrayItemWidgetProps> {
 	render() {
+		const getNodeIcon = (type) => {
+			switch (type) {
+					case 'Start':
+					case 'startFinish':
+							return <startFinishComponentIcon.react />;
+					case 'workflow':
+					case 'xircuits_workflow':
+							return <workflowComponentIcon.react />;
+					case 'branch':
+							return <branchComponentIcon.react />;
+					case 'function':
+							return <functionComponentIcon.react />;
+					// component libraries were typed as 'debug' before v1.12.
+					case 'debug':
+					case 'library_component':
+							return <componentLibIcon.react />;
+					default:
+							return null;
+			}
+		};
+
 		return (
 			<Tray
 				color={this.props.color || "white"}
@@ -65,6 +101,7 @@ export class TrayItemWidget extends React.Component<TrayItemWidgetProps> {
 					this.forceUpdate();
 				}}
 				className="tray-item">
+				{getNodeIcon(this.props.model.type)}
 				{this.props.name}
 			</Tray>
 		);

From d1fa1aff4d5b153d848225027b90aaf68c4f3f74 Mon Sep 17 00:00:00 2001
From: Paul Dubs <paul.dubs@gmail.com>
Date: Wed, 10 Jul 2024 14:45:56 +0200
Subject: [PATCH 11/13] Mark where workflow background pattern might go

---
 src/components/node/CustomNodeWidget.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/node/CustomNodeWidget.tsx b/src/components/node/CustomNodeWidget.tsx
index 3a0fe9af..77e5ffb8 100644
--- a/src/components/node/CustomNodeWidget.tsx
+++ b/src/components/node/CustomNodeWidget.tsx
@@ -92,6 +92,10 @@ var S;
         background-image: linear-gradient(oklch(10% 0 0 / 0.7), oklch(10% 0 0 / 0.9));
         border-bottom-left-radius: 5px;
         border-bottom-right-radius: 5px;
+        
+        .workflow-node & {
+        {/* Background pattern for Workflow Node goes here */}
+        }
     `;
 
     S.PortsContainer = styled.div`

From 5a476c797523622775f2c22c8e293aeebc48cd9f Mon Sep 17 00:00:00 2001
From: Paul Dubs <paul.dubs@gmail.com>
Date: Thu, 11 Jul 2024 09:06:00 +0200
Subject: [PATCH 12/13] Workflow Nodes: Replace outline with circuit board
 background

---
 src/components/node/CustomNodeWidget.tsx | 11 ++++-------
 style/icons/circuit-board-bg.svg         |  5 +++++
 2 files changed, 9 insertions(+), 7 deletions(-)
 create mode 100644 style/icons/circuit-board-bg.svg

diff --git a/src/components/node/CustomNodeWidget.tsx b/src/components/node/CustomNodeWidget.tsx
index 77e5ffb8..1ab7af08 100644
--- a/src/components/node/CustomNodeWidget.tsx
+++ b/src/components/node/CustomNodeWidget.tsx
@@ -15,6 +15,9 @@ import { marked } from 'marked';
 import Color from 'colorjs.io';
 import { commandIDs } from '../../commands/CommandIDs';
 import { componentLibIcon, branchComponentIcon, workflowComponentIcon, functionComponentIcon, startFinishComponentIcon } from '../../ui-components/icons';
+import  circuitBoardSvg from '../../../style/icons/circuit-board-bg.svg';
+
+
 
 var S;
 (function (S) {
@@ -94,7 +97,7 @@ var S;
         border-bottom-right-radius: 5px;
         
         .workflow-node & {
-        {/* Background pattern for Workflow Node goes here */}
+            background: linear-gradient(oklch(10% 0 0 / 0.7), oklch(10% 0 0 / 0.9)), url("data:image/svg+xml;base64,${btoa(circuitBoardSvg)}") no-repeat right 10px;
         }
     `;
 
@@ -115,12 +118,6 @@ var S;
     `;
 
     S.WorkflowNode = styled(S.Node)`
-        outline: 1px solid oklch(75% 0 0 / 0.2);
-        outline-offset: 4px; // Space between the main node and the outline
-
-        ${(p) => p.selected && `
-            outline: 2px solid rgba(0, 192, 255, 0.1); // blue
-        `}
     `;
 })(S || (S = {}));
 
diff --git a/style/icons/circuit-board-bg.svg b/style/icons/circuit-board-bg.svg
new file mode 100644
index 00000000..b2e06304
--- /dev/null
+++ b/style/icons/circuit-board-bg.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 304 304" width="128" height="128">
+  <path
+     fill="oklch(100% 0 0 / 75%)"
+     d="m 204.1,272 c 1.20825,-5.91917 9.89572,-5.01313 9.89572,1 0,6.01313 -8.68747,6.91917 -9.89572,1 H 82 v -2 z m 57.8,-46 c -1.20825,5.91917 -9.89572,5.01313 -9.89572,-1 0,-6.01313 8.68747,-6.91917 9.89572,-1 H 304 v 2 z m 0,16 c -1.20825,5.91917 -9.89572,5.01313 -9.89572,-1 0,-6.01313 8.68747,-6.91917 9.89572,-1 H 304 v 2 z m 6.2,-114 c 1.20825,-5.91917 9.89572,-5.01313 9.89572,1 0,6.01313 -8.68747,6.91917 -9.89572,1 h -86.2 c -1.20825,5.91917 -9.89572,5.01313 -9.89572,-1 0,-6.01313 8.68747,-6.91917 9.89572,-1 z m -70.2,-14 c -1.20825,5.91917 -9.89572,5.01313 -9.89572,-1 0,-6.01313 8.68747,-6.91917 9.89572,-1 h 86.2 c 1.20825,-5.91917 9.89572,-5.01313 9.89572,1 0,6.01313 -8.68747,6.91917 -9.89572,1 z M 194,220.1 c 5.91917,1.20825 5.01313,9.89572 -1,9.89572 -6.01313,0 -6.91917,-8.68747 -1,-9.89572 v -54.2 c -5.91917,-1.20825 -5.01313,-9.89572 1,-9.89572 6.01313,0 6.91917,8.68747 1,9.89572 z M 242,21.9 V 80 h 62 v 2 H 240 V 21.9 c -5.91917,-1.208245 -5.01313,-9.895719 1,-9.895719 6.01313,0 6.91917,8.687474 1,9.895719 z m 16,16 V 64 h 46 v 2 H 256 V 37.9 c -5.91917,-1.208245 -5.01313,-9.895719 1,-9.895719 6.01313,0 6.91917,8.687474 1,9.895719 z m -128,96 V 208 h 16 v 12.1 c 5.91917,1.20825 5.01313,9.89572 -1,9.89572 -6.01313,0 -6.91917,-8.68747 -1,-9.89572 V 210 h -16 v -76.1 c -5.91917,-1.20825 -5.01313,-9.89572 1,-9.89572 6.01313,0 6.91917,8.68747 1,9.89572 z M 124.1,112 c 1.20825,-5.91917 9.89572,-5.01313 9.89572,1 0,6.01313 -8.68747,6.91917 -9.89572,1 H 114 v 48 H 85.9 c -1.208245,5.91917 -9.895719,5.01313 -9.895719,-1 0,-6.01313 8.687474,-6.91917 9.895719,-1 H 112 v -48 z m -6.2,130 c -1.20825,5.91917 -9.89572,5.01313 -9.89572,-1 0,-6.01313 8.68747,-6.91917 9.89572,-1 H 176 v -74.1 c -5.91917,-1.20825 -5.01313,-9.89572 1,-9.89572 6.01313,0 6.91917,8.68747 1,9.89572 V 242 Z m -16,-64 c -1.20825,5.91917 -9.895719,5.01313 -9.895719,-1 0,-6.01313 8.687469,-6.91917 9.895719,-1 H 114 v 48 h 10.1 c 1.20825,-5.91917 9.89572,-5.01313 9.89572,1 0,6.01313 -8.68747,6.91917 -9.89572,1 H 112 V 178 Z M 66,284.1 c 5.919168,1.20825 5.013134,9.89572 -1,9.89572 -6.013134,0 -6.919168,-8.68747 -1,-9.89572 V 274 H 50 v 30 H 48 V 272 H 66 Z M 236.1,176 c 1.20825,-5.91917 9.89572,-5.01313 9.89572,1 0,6.01313 -8.68747,6.91917 -9.89572,1 H 226 v 94 h 48 v 32 h -2 v -30 h -48 v -98 z m 25.8,-30 c -1.20825,5.91917 -9.89572,5.01313 -9.89572,-1 0,-6.01313 8.68747,-6.91917 9.89572,-1 H 274 v 44.1 c 5.91917,1.20825 5.01313,9.89572 -1,9.89572 -6.01313,0 -6.91917,-8.68747 -1,-9.89572 V 146 Z m -64,96 c -1.20825,5.91917 -9.89572,5.01313 -9.89572,-1 0,-6.01313 8.68747,-6.91917 9.89572,-1 H 208 v -80 h 16 v -14 h -42.1 c -1.20825,5.91917 -9.89572,5.01313 -9.89572,-1 0,-6.01313 8.68747,-6.91917 9.89572,-1 H 226 v 18 h -16 v 80 z m 22.2,46 c 1.20825,-5.91917 9.89572,-5.01313 9.89572,1 0,6.01313 -8.68747,6.91917 -9.89572,1 H 98 v 14 H 96 V 288 Z M 242,149.9 V 160 h 16 v 34 h -16 v 62 h 48 v 48 h -2 v -46 h -48 v -66 h 16 v -30 h -16 v -12.1 c -5.91917,-1.20825 -5.01313,-9.89572 1,-9.89572 6.01313,0 6.91917,8.68747 1,9.89572 z M 117.9,98 c -1.20825,5.91917 -9.89572,5.01313 -9.89572,-1 0,-6.013134 8.68747,-6.919168 9.89572,-1 H 137 l 32,-32 h 39 V 21.9 c -5.91917,-1.208245 -5.01313,-9.895719 1,-9.895719 6.01313,0 6.91917,8.687474 1,9.895719 V 66 h -40.17 l -32,32 z m 28.1,90.1 c 5.91917,1.20825 5.01313,9.89572 -1,9.89572 -6.01313,0 -6.91917,-8.68747 -1,-9.89572 V 111.59 L 175.59,80 H 224 V 21.9 c -5.91917,-1.208245 -5.01313,-9.895719 1,-9.895719 6.01313,0 6.91917,8.687474 1,9.895719 V 82 H 176.41 L 146,112.41 Z m 16,32 c 5.91917,1.20825 5.01313,9.89572 -1,9.89572 -6.01313,0 -6.91917,-8.68747 -1,-9.89572 V 120.59 L 184.59,96 H 300.1 c 0.4006,-1.964289 1.93571,-3.499395 3.9,-3.9 v 2.07 c -2.67261,0.940174 -2.67261,4.719826 0,5.66 v 2.07 c -1.96429,-0.4006 -3.4994,-1.935711 -3.9,-3.9 H 185.41 L 162,121.41 Z M 277.9,50 c -1.20825,5.919168 -9.89572,5.013134 -9.89572,-1 0,-6.013134 8.68747,-6.919168 9.89572,-1 h 18.69 L 304,40.59 v 2.82 L 297.41,50 Z m -16,160 c -1.20825,5.91917 -9.89572,5.01313 -9.89572,-1 0,-6.01313 8.68747,-6.91917 9.89572,-1 H 288 v -71.41 l 16,-16 v 2.82 l -14,14 V 210 Z m -208,32 c -1.208245,5.91917 -9.895719,5.01313 -9.895719,-1 0,-6.01313 8.687474,-6.91917 9.895719,-1 H 64 V 217.41 L 40.59,194 H 21.9 c -1.208245,5.91917 -9.895719,5.01313 -9.895719,-1 0,-6.01313 8.687474,-6.91917 9.895719,-1 H 41.41 L 66,216.59 V 242 Z m 150.2,14 c 1.20825,-5.91917 9.89572,-5.01313 9.89572,1 0,6.01313 -8.68747,6.91917 -9.89572,1 H 96 V 201.4 L 56.6,162 H 37.9 c -1.208245,5.91917 -9.895719,5.01313 -9.895719,-1 0,-6.01313 8.687474,-6.91917 9.895719,-1 H 57.4 L 98,200.6 V 256 Z m -150.2,2 c -1.208245,5.91917 -9.895719,5.01313 -9.895719,-1 0,-6.01313 8.687474,-6.91917 9.895719,-1 H 80 V 209.41 L 48.59,178 H 21.9 c -1.208245,5.91917 -9.895719,5.01313 -9.895719,-1 0,-6.01313 8.687474,-6.91917 9.895719,-1 H 49.41 L 82,208.59 V 258 Z M 258,289 v 15 h -2 v -14 h -14 v 14 h -2 v -16 h 18 z M 80,272 h 2 v 32 h -2 z m 33,-172 c 4,0 4,-6 0,-6 -4,0 -4,6 0,6 z m 16,16 c 4,0 4,-6 0,-6 -4,0 -4,6 0,6 z m 0,16 c 4,0 4,-6 0,-6 -4,0 -4,6 0,6 z m -48,32 c 3.999998,0 3.999998,-6 0,-6 -3.999998,0 -3.999998,6 0,6 z m 16,16 c 4,0 4,-6 0,-6 -3.999998,0 -3.999998,6 0,6 z m 32,48 c 4,0 4,-6 0,-6 -4,0 -4,6 0,6 z m -16,16 c 4,0 4,-6 0,-6 -4,0 -4,6 0,6 z m 32,-16 c 4,0 4,-6 0,-6 -4,0 -4,6 0,6 z m 0,-32 c 4,0 4,-6 0,-6 -4,0 -4,6 0,6 z m 16,32 c 4,0 4,-6 0,-6 -4,0 -4,6 0,6 z m 32,16 c 4,0 4,-6 0,-6 -4,0 -4,6 0,6 z m 0,-16 c 4,0 4,-6 0,-6 -4,0 -4,6 0,6 z m -16,-64 c 4,0 4,-6 0,-6 -4,0 -4,6 0,6 z m 16,0 c 4,0 4,-6 0,-6 -4,0 -4,6 0,6 z m 16,96 c 4,0 4,-6 0,-6 -4,0 -4,6 0,6 z m 0,16 c 4,0 4,-6 0,-6 -4,0 -4,6 0,6 z m 16,16 c 4,0 4,-6 0,-6 -4,0 -4,6 0,6 z m 16,-144 c 4,0 4,-6 0,-6 -4,0 -4,6 0,6 z m 0,32 c 4,0 4,-6 0,-6 -4,0 -4,6 0,6 z m 16,-32 c 4,0 4,-6 0,-6 -4,0 -4,6 0,6 z m 16,-16 c 4,0 4,-6 0,-6 -4,0 -4,6 0,6 z m -96,0 c 4,0 4,-6 0,-6 -4,0 -4,6 0,6 z m 0,16 c 4,0 4,-6 0,-6 -4,0 -4,6 0,6 z m 16,-32 c 4,0 4,-6 0,-6 -4,0 -4,6 0,6 z m 96,0 c 4,0 4,-6 0,-6 -4,0 -4,6 0,6 z M 273,52 c 4,0 4,-6 0,-6 -4,0 -4,6 0,6 z M 257,36 c 4,0 4,-6 0,-6 -4,0 -4,6 0,6 z M 241,20 c 4,0 4,-6 0,-6 -4,0 -4,6 0,6 z m -16,0 c 4,0 4,-6 0,-6 -4,0 -4,6 0,6 z m -16,0 c 4,0 4,-6 0,-6 -4,0 -4,6 0,6 z M 49,260 c 3.999998,0 3.999998,-6 0,-6 -3.999998,0 -3.999998,6 0,6 z m 16,32 c 3.999998,0 3.999998,-6 0,-6 -3.999998,0 -3.999998,6 0,6 z M 49,244 c 3.999998,0 3.999998,-6 0,-6 -3.999998,0 -3.999998,6 0,6 z m 224,-48 c 4,0 4,-6 0,-6 -4,0 -4,6 0,6 z m -16,16 c 4,0 4,-6 0,-6 -4,0 -4,6 0,6 z m 0,16 c 4,0 4,-6 0,-6 -4,0 -4,6 0,6 z m 0,16 c 4,0 4,-6 0,-6 -4,0 -4,6 0,6 z M 17,180 c 3.999998,0 3.999998,-6 0,-6 -3.999998,0 -3.999998,6 0,6 z m 0,16 c 3.999998,0 3.999998,-6 0,-6 -3.999998,0 -3.999998,6 0,6 z m 16,-32 c 3.999998,0 3.999998,-6 0,-6 -3.999998,0 -3.999998,6 0,6 z" />
+</svg>

From 2a48dc560201a0c308037b05d68034a7f2f0fc04 Mon Sep 17 00:00:00 2001
From: MFA-X-AI <fahreza@xpress.ai>
Date: Thu, 11 Jul 2024 17:27:17 +0900
Subject: [PATCH 13/13] add context_set, context_get, variable component type
 and icons

---
 src/components/node/CustomNodeWidget.tsx   | 16 +++++-
 src/tray_library/TrayItemWidget.tsx        | 57 ++++++++++++----------
 src/ui-components/icons.tsx                |  7 +++
 style/icons/get-variable-component.svg     |  1 +
 style/icons/set-variable-component.svg     |  1 +
 style/icons/variable-component.svg         |  1 +
 xai_components/xai_controlflow/branches.py |  6 +--
 7 files changed, 60 insertions(+), 29 deletions(-)
 create mode 100644 style/icons/get-variable-component.svg
 create mode 100644 style/icons/set-variable-component.svg
 create mode 100644 style/icons/variable-component.svg

diff --git a/src/components/node/CustomNodeWidget.tsx b/src/components/node/CustomNodeWidget.tsx
index 1ab7af08..0cc5db59 100644
--- a/src/components/node/CustomNodeWidget.tsx
+++ b/src/components/node/CustomNodeWidget.tsx
@@ -14,7 +14,15 @@ import ReactTooltip from 'react-tooltip';
 import { marked } from 'marked';
 import Color from 'colorjs.io';
 import { commandIDs } from '../../commands/CommandIDs';
-import { componentLibIcon, branchComponentIcon, workflowComponentIcon, functionComponentIcon, startFinishComponentIcon } from '../../ui-components/icons';
+import { 
+    componentLibIcon, 
+    branchComponentIcon, 
+    workflowComponentIcon, 
+    functionComponentIcon, 
+    startFinishComponentIcon, 
+    variableComponentIcon, 
+    setVariableComponentIcon, 
+    getVariableComponentIcon } from '../../ui-components/icons';
 import  circuitBoardSvg from '../../../style/icons/circuit-board-bg.svg';
 
 
@@ -140,6 +148,12 @@ const getNodeIcon = (type) => {
             return <branchComponentIcon.react />;
         case 'function':
             return <functionComponentIcon.react />;
+        case 'context_set':
+            return <setVariableComponentIcon.react />;
+        case 'context_get':
+            return <getVariableComponentIcon.react />;
+        case 'variable':
+            return <variableComponentIcon.react />;
         // component libraries were typed as 'debug' before v1.12.
         case 'debug':
         case 'library_component':
diff --git a/src/tray_library/TrayItemWidget.tsx b/src/tray_library/TrayItemWidget.tsx
index 843fab93..59a3babf 100644
--- a/src/tray_library/TrayItemWidget.tsx
+++ b/src/tray_library/TrayItemWidget.tsx
@@ -1,16 +1,17 @@
 import * as React from 'react';
-
 import styled from '@emotion/styled';
-
 import { JupyterFrontEnd } from '@jupyterlab/application';
-
 import { commandIDs } from "../commands/CommandIDs";
-import {
-	branchComponentIcon, componentLibIcon,
-	functionComponentIcon,
-	startFinishComponentIcon,
-	workflowComponentIcon
-} from "../ui-components/icons";
+
+import { 
+    componentLibIcon, 
+    branchComponentIcon, 
+    workflowComponentIcon, 
+    functionComponentIcon, 
+    startFinishComponentIcon, 
+    variableComponentIcon, 
+    setVariableComponentIcon, 
+    getVariableComponentIcon } from "../ui-components/icons";
 
 export interface TrayItemWidgetProps {
 	model: any;
@@ -50,22 +51,28 @@ export class TrayItemWidget extends React.Component<TrayItemWidgetProps> {
 	render() {
 		const getNodeIcon = (type) => {
 			switch (type) {
-					case 'Start':
-					case 'startFinish':
-							return <startFinishComponentIcon.react />;
-					case 'workflow':
-					case 'xircuits_workflow':
-							return <workflowComponentIcon.react />;
-					case 'branch':
-							return <branchComponentIcon.react />;
-					case 'function':
-							return <functionComponentIcon.react />;
-					// component libraries were typed as 'debug' before v1.12.
-					case 'debug':
-					case 'library_component':
-							return <componentLibIcon.react />;
-					default:
-							return null;
+				case 'Start':
+				case 'startFinish':
+					return <startFinishComponentIcon.react />;
+				case 'workflow':
+				case 'xircuits_workflow':
+					return <workflowComponentIcon.react />;
+				case 'branch':
+					return <branchComponentIcon.react />;
+				case 'function':
+					return <functionComponentIcon.react />;
+				case 'context_set':
+					return <setVariableComponentIcon.react />;
+				case 'context_get':
+					return <getVariableComponentIcon.react />;
+				case 'variable':
+					return <variableComponentIcon.react />;
+				// component libraries were typed as 'debug' before v1.12.
+				case 'debug':
+				case 'library_component':
+					return <componentLibIcon.react />;
+				default:
+					return null;
 			}
 		};
 
diff --git a/src/ui-components/icons.tsx b/src/ui-components/icons.tsx
index 674b0656..9b7b74a8 100644
--- a/src/ui-components/icons.tsx
+++ b/src/ui-components/icons.tsx
@@ -12,6 +12,10 @@ import BranchComponentSvg from '../../style/icons/branch-component.svg';
 import WorkflowComponentSvg from '../../style/icons/workflow-component.svg';
 import startFinishComponentSvg from '../../style/icons/start-finish-component.svg';
 import functionComponentSvg from '../../style/icons/function-component.svg';
+import setVariableComponentSvg from '../../style/icons/set-variable-component.svg';
+import getVariableComponentSvg from '../../style/icons/get-variable-component.svg';
+import variableComponentSvg from '../../style/icons/variable-component.svg';
+
 
 export const xircuitsFaviconLink = 'https://raw.githubusercontent.com/XpressAI/xircuits/master/style/icons/xpress-logo.ico';
 export const xircuitsIcon = new LabIcon({ name: 'xircuits:xircuits', svgstr: xircuitsSvg });
@@ -27,6 +31,9 @@ export const branchComponentIcon = new LabIcon({ name: 'xircuits:BranchComponent
 export const workflowComponentIcon = new LabIcon({ name: 'xircuits:workflowComponentIcon', svgstr: WorkflowComponentSvg });
 export const startFinishComponentIcon = new LabIcon({ name: 'xircuits:startFinishComponentIcon', svgstr: startFinishComponentSvg });
 export const functionComponentIcon = new LabIcon({ name: 'xircuits:functionComponentIcon', svgstr: functionComponentSvg });
+export const setVariableComponentIcon = new LabIcon({ name: 'xircuits:setVariableComponentIcon', svgstr: setVariableComponentSvg });
+export const getVariableComponentIcon = new LabIcon({ name: 'xircuits:getVariableComponentIcon', svgstr: getVariableComponentSvg });
+export const variableComponentIcon = new LabIcon({ name: 'xircuits:variableComponentIcon', svgstr: variableComponentSvg });
 
 export function changeFavicon(src: string) {
     let head = document.head || document.getElementsByTagName('head')[0];
diff --git a/style/icons/get-variable-component.svg b/style/icons/get-variable-component.svg
new file mode 100644
index 00000000..b0b80d96
--- /dev/null
+++ b/style/icons/get-variable-component.svg
@@ -0,0 +1 @@
+<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-world-download"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M21 12a9 9 0 1 0 -9 9" /><path d="M3.6 9h16.8" /><path d="M3.6 15h8.4" /><path d="M11.578 3a17 17 0 0 0 0 18" /><path d="M12.5 3c1.719 2.755 2.5 5.876 2.5 9" /><path d="M18 14v7m-3 -3l3 3l3 -3" /></svg>
\ No newline at end of file
diff --git a/style/icons/set-variable-component.svg b/style/icons/set-variable-component.svg
new file mode 100644
index 00000000..45714b98
--- /dev/null
+++ b/style/icons/set-variable-component.svg
@@ -0,0 +1 @@
+<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-world-upload"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M21 12a9 9 0 1 0 -9 9" /><path d="M3.6 9h16.8" /><path d="M3.6 15h8.4" /><path d="M11.578 3a17 17 0 0 0 0 18" /><path d="M12.5 3c1.719 2.755 2.5 5.876 2.5 9" /><path d="M18 21v-7m3 3l-3 -3l-3 3" /></svg>
\ No newline at end of file
diff --git a/style/icons/variable-component.svg b/style/icons/variable-component.svg
new file mode 100644
index 00000000..0bdf0a9b
--- /dev/null
+++ b/style/icons/variable-component.svg
@@ -0,0 +1 @@
+<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-variable"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 4c-2.5 5 -2.5 10 0 16m14 -16c2.5 5 2.5 10 0 16m-10 -11h1c1 0 1 1 2.016 3.527c.984 2.473 .984 3.473 1.984 3.473h1" /><path d="M8 16c1.5 0 3 -2 4 -3.5s2.5 -3.5 4 -3.5" /></svg>
\ No newline at end of file
diff --git a/xai_components/xai_controlflow/branches.py b/xai_components/xai_controlflow/branches.py
index f5debaaf..234ab491 100644
--- a/xai_components/xai_controlflow/branches.py
+++ b/xai_components/xai_controlflow/branches.py
@@ -122,7 +122,7 @@ def value(self) -> any:
         return self._fn()
     
     
-@xai_component
+@xai_component(type='context_get')
 class GetVariableComponent(Component):
     name: InArg[str]
     value: OutArg[any]
@@ -135,7 +135,7 @@ def execute(self, ctx) -> None:
         self.value.set_fn(lambda: ctx[self.name.value])
 
 
-@xai_component
+@xai_component(type='context_set')
 class SetVariableComponent(Component):
     name: InArg[str]
     value: InArg[any]
@@ -144,7 +144,7 @@ def execute(self, ctx) -> None:
         ctx[self.name.value] = self.value.value
 
 
-@xai_component
+@xai_component(type='variable')
 class DefineVariableComponent(Component):
     name: InArg[str]
     value: InArg[any]