Add streamlit components and add ability to run via Remote.

.gitmodules

@@ -7,3 +7,6 @@
 [submodule "xai_components/xai_rpa"]
 	path = xai_components/xai_rpa
 	url = https://github.com/yuenherny/xai-rpa
+[submodule "xai_components/xai_streamlit"]
+	path = xai_components/xai_streamlit
+	url = https://github.com/XpressAI/xai-streamlit

.xircuits/config.ini

@@ -11,22 +11,30 @@ PORT = 5000
 # Separate each run type in a newline.
 # Uncomment 'TEST' to add a new run type
 RUN_TYPES = SPARK
-        ;     TEST 
+            STREAMLIT
+#           TEST
 
 [RUN_TYPES]
 # The types will be shown on each run types.
 # Separate each run types and insert every run configurations in a newline.
 SPARK = LOCAL
         CLUSTER
 # Uncomment below to add new configs in the TEST's run type
-; TEST = EG
-;        EG2
+TEST = EG
+       EG2
+
+STREAMLIT = STREAMLIT
 
 [CONFIGURATION]
 # Separate each config for each run types
 # Make sure each config name is the same as the above. The name inside the bracket.
 # Note: Create a unique name for each config types
 # Note: Make sure every criteria is FILLED
+[STREAMLIT]
+name = STREAMLIT
+command = streamlit run
+msg = Run streamlit app
+url = http://localhost:8501
 
 [LOCAL]
 name =  LOCAL
@@ -61,4 +69,4 @@ url = http://localhost:8088/
 name =  EG2
 command = printf
 msg = The 2nd config example will use printf to print the python script name.
-url = http://localhost:8088/
+url = http://localhost:8088/

src/commands/NodeActionCommands.tsx

@@ -53,7 +53,7 @@ export function addNodeActionCommands(
             const nodeName = args['nodeName'] as string ?? node.name;
             const nodeLineNo = args['nodeLineNo'] as number ?? node.extras.lineNo;
 
-            if (nodeName.startsWith('Literal') || nodeName.startsWith('Hyperparameter')) {
+            if (nodeName.startsWith('Literal') || nodeName.startsWith('Argument')) {
                 showDialog({
                     title: `${node.name} don't have its own script`,
                     buttons: [Dialog.warnButton({ label: 'OK' })]
@@ -200,7 +200,7 @@ export function addNodeActionCommands(
             const selected_node = selectedNode();
 
             // When a General Component is selected, just return
-            if (selected_node.name.startsWith("Literal") || selected_node.name.startsWith("Hyperparameter")) {
+            if (selected_node.name.startsWith("Literal") || selected_node.name.startsWith("Argument")) {
                 showDialog({
                     title: `${selected_node.name} cannot be reloaded`,
                     buttons: [Dialog.warnButton({ label: 'OK' })]

src/components/xircuitBodyWidget.tsx

@@ -164,11 +164,11 @@ export const BodyWidget: FC<BodyWidgetProps> = ({
 	const [displayHyperparameter, setDisplayHyperparameter] = useState(false);
 	const [runConfigs, setRunConfigs] = useState<any>("");
 	const [lastConfig, setLastConfigs] = useState<any>("");
-	const [stringNodes, setStringNodes] = useState<string[]>(["experiment name"]);
+	const [stringNodes, setStringNodes] = useState<string[]>([]);
 	const [intNodes, setIntNodes] = useState<string[]>([]);
 	const [floatNodes, setFloatNodes] = useState<string[]>([]);
 	const [boolNodes, setBoolNodes] = useState<string[]>([]);
-	const [stringNodesValue, setStringNodesValue] = useState<string[]>([""]);
+	const [stringNodesValue, setStringNodesValue] = useState<string[]>([]);
 	const [intNodesValue, setIntNodesValue] = useState<number[]>([0]);
 	const [floatNodesValue, setFloatNodesValue] = useState<number[]>([0.00]);
 	const [boolNodesValue, setBoolNodesValue] = useState<boolean[]>([false]);
@@ -723,7 +723,7 @@ export const BodyWidget: FC<BodyWidgetProps> = ({
 												break;
 										}
 										pythonCode += '    ' + bindingName + '.' + label + '.value' + equalSign + sourcePortLabelStructure + "\n";
-									} else if (linkSourceNodeId == sourceNodeId && !sourceNodeName.startsWith("Hyperparameter")) {
+									} else if (linkSourceNodeId == sourceNodeId && !sourceNodeName.startsWith("Argument")) {
 										// Make sure the node id match between connected link and source node
 										// Skip Hyperparameter Components
 										pythonCode += '    ' + bindingName + '.' + label + equalSign + preBindingName + '.' + sourcePortLabel + '\n';
@@ -1580,7 +1580,7 @@ export const BodyWidget: FC<BodyWidgetProps> = ({
 
 				for (let i = 0; i < nodesCount; i++) {
 					let nodeName = allNodes[i].getOptions()["name"];
-					if (nodeName.startsWith("Hyperparameter")) {
+					if (nodeName.startsWith("Argument")) {
 						let regEx = /\(([^)]+)\)/;
 						let result = nodeName.match(regEx);
 						let nodeText = nodeName.split(": ");
@@ -1597,7 +1597,7 @@ export const BodyWidget: FC<BodyWidgetProps> = ({
 				}
 			}
 			else {
-				setStringNodes(["experiment name"]);
+				setStringNodes([]);
 				setIntNodes([]);
 				setFloatNodes([]);
 				setBoolNodes([]);
@@ -1986,7 +1986,7 @@ export const BodyWidget: FC<BodyWidgetProps> = ({
 							let point = xircuitsApp.getDiagramEngine().getRelativeMousePoint(event);
 							node.setPosition(point);
 							xircuitsApp.getDiagramEngine().getModel().addNode(node);
-							if (node["name"].startsWith("Hyperparameter")) {
+							if (node["name"].startsWith("Argument")) {
 								setInitialize(true);
 							}
 							setSaved(false);

src/dialog/LiteralInputDialog.tsx

@@ -185,7 +185,7 @@ export const LiteralInputDialog = ({ title, oldValue, type, isStoreDataType, inp
 		<form>
 			{type != 'Boolean' && type != 'Variable' ?
 				<h3 style={{ marginTop: 0, marginBottom: 5 }}>
-					Enter {title.includes('parameter') ? 'Hyperparameter Name' : `${type} Value`} ({isStoreDataType ? 'Without Brackets' : 'Without Quotes'}):
+					Enter {title.includes('parameter') ? 'Argument Name' : `${type} Value`} ({isStoreDataType ? 'Without Brackets' : 'Without Quotes'}):
 				</h3>
 				: null}
 			<DictExample />

src/dialog/RunDialog.tsx

@@ -69,7 +69,7 @@ export const RunDialog = ({
 
 	return (
 		<form>
-			<h3 style={{ marginTop: 0, marginBottom: 5 }}>Hyperparameter:</h3>
+			{childStringNodes.length > 0 ? <h3 style={{ marginTop: 0, marginBottom: 5 }}>Arguments:</h3> : null}
 			<div>{runConfigs.length != 0 ?
 				<><h4 style={{ marginTop: 2, marginBottom: 0 }}>Remote Execution</h4>
 					<div>Available Run Type:
@@ -115,7 +115,6 @@ export const RunDialog = ({
 				: null}
 			</div>
 			<div></div>
-			<div><h4 style={{ marginTop: 2, marginBottom: 0 }}>String</h4></div>
 			{childStringNodes.map((stringNode, i) =>
 				<div key={`index-${i}`}>{stringNode}
 					<div>

src/tray_library/GeneralComponentLib.tsx

@@ -65,7 +65,7 @@ export async function GeneralComponentLibrary(props: GeneralComponentLibraryProp
             const dialogResult = await showFormDialog(dialogOptions);
             if (cancelDialog(dialogResult)) return;
             inputValue = dialogResult["value"][hyperparameterTitle];
-            node = new CustomNodeModel({ name: "Hyperparameter (String): " + inputValue, color: nodeData.color, extras: { "type": nodeData.type } });
+            node = new CustomNodeModel({ name: "Argument (String): " + inputValue, color: nodeData.color, extras: { "type": nodeData.type } });
             node.addOutPortEnhance('▶', 'parameter-out-0');
         }
 
@@ -86,7 +86,7 @@ export async function GeneralComponentLibrary(props: GeneralComponentLibraryProp
             const dialogResult = await showFormDialog(dialogOptions);
             if (cancelDialog(dialogResult)) return;
             inputValue = dialogResult["value"][hyperparameterTitle];
-            node = new CustomNodeModel({ name: "Hyperparameter (Int): " + inputValue, color: nodeData.color, extras: { "type": nodeData.type } });
+            node = new CustomNodeModel({ name: "Argument (Int): " + inputValue, color: nodeData.color, extras: { "type": nodeData.type } });
             node.addOutPortEnhance('▶', 'parameter-out-0');
 
         }
@@ -111,7 +111,7 @@ export async function GeneralComponentLibrary(props: GeneralComponentLibraryProp
             inputValue = dialogResult["value"][hyperparameterTitle];
             console.log(dialogResult);
 
-            node = new CustomNodeModel({ name: "Hyperparameter (Float): " + inputValue, color: nodeData.color, extras: { "type": nodeData.type } });
+            node = new CustomNodeModel({ name: "Argument (Float): " + inputValue, color: nodeData.color, extras: { "type": nodeData.type } });
             node.addOutPortEnhance('▶', 'parameter-out-0');
 
         }
@@ -132,7 +132,7 @@ export async function GeneralComponentLibrary(props: GeneralComponentLibraryProp
             const dialogResult = await showFormDialog(dialogOptions);
             if (cancelDialog(dialogResult)) return;
             inputValue = dialogResult["value"][hyperparameterTitle];
-            node = new CustomNodeModel({ name: "Hyperparameter (Boolean): " + inputValue, color: nodeData.color, extras: { "type": nodeData.type } });
+            node = new CustomNodeModel({ name: "Argument (Boolean): " + inputValue, color: nodeData.color, extras: { "type": nodeData.type } });
             node.addOutPortEnhance('▶', 'parameter-out-0');
 
         }
@@ -156,7 +156,7 @@ export async function GeneralComponentLibrary(props: GeneralComponentLibraryProp
             const dialogResult = await showFormDialog(dialogOptions);
             if (cancelDialog(dialogResult)) return;
             inputValue = dialogResult["value"][hyperparameterTitle];
-            node = new CustomNodeModel({ name: "Hyperparameter (List): " + inputValue, color: nodeData.color, extras: { "type": nodeData.type } });
+            node = new CustomNodeModel({ name: "Argument (List): " + inputValue, color: nodeData.color, extras: { "type": nodeData.type } });
             node.addOutPortEnhance('▶', 'parameter-out-0');
 
         }
@@ -180,7 +180,7 @@ export async function GeneralComponentLibrary(props: GeneralComponentLibraryProp
             const dialogResult = await showFormDialog(dialogOptions);
             if (cancelDialog(dialogResult)) return;
             inputValue = dialogResult["value"][hyperparameterTitle];
-            node = new CustomNodeModel({ name: "Hyperparameter (Tuple): " + inputValue, color: nodeData.color, extras: { "type": nodeData.type } });
+            node = new CustomNodeModel({ name: "Argument (Tuple): " + inputValue, color: nodeData.color, extras: { "type": nodeData.type } });
             node.addOutPortEnhance('▶', 'parameter-out-0');
         }
 
@@ -203,7 +203,7 @@ export async function GeneralComponentLibrary(props: GeneralComponentLibraryProp
             const dialogResult = await showFormDialog(dialogOptions);
             if (cancelDialog(dialogResult)) return;
             inputValue = dialogResult["value"][hyperparameterTitle];
-            node = new CustomNodeModel({ name: "Hyperparameter (Dict): " + inputValue, color: nodeData.color, extras: { "type": nodeData.type } });
+            node = new CustomNodeModel({ name: "Argument (Dict): " + inputValue, color: nodeData.color, extras: { "type": nodeData.type } });
             node.addOutPortEnhance('▶', 'parameter-out-0');
 
         }

xai_components/xai_controlflow/branches.py

@@ -52,7 +52,7 @@ def __init__(self):
         self.out_number = OutArg.empty()
         self.state = None
 
-    def execute(self, ctx):
+    def execute(self, ctx) -> None:
         if self.state is None:
             self.state = self.start_number.value
         else:
@@ -76,7 +76,7 @@ def __init__(self):
         self.op = InArg.empty()
         self.out = OutArg.empty()
 
-    def execute(self, ctx):
+    def execute(self, ctx) -> None:
         self.out.value = eval(str(self.a.value) + " " + self.op.value + " " + str(self.b.value))
 
 
@@ -86,11 +86,11 @@ class MutableVariable:
     def __init__(self):
         self._fn = None
 
-    def set_fn(self, fn):
+    def set_fn(self, fn) -> None:
         self._fn = fn
 
     @property
-    def value(self):
+    def value(self) -> any:
         return self._fn()
 
 
@@ -104,7 +104,7 @@ def __init__(self):
         self.name = InArg.empty()
         self.value = MutableVariable()
 
-    def execute(self, ctx):
+    def execute(self, ctx) -> None:
         self.value.set_fn(lambda: ctx[self.name.value])
 
 @xai_component
@@ -117,7 +117,7 @@ def __init__(self):
         self.name = InArg.empty()
         self.value = InArg.empty()
 
-    def execute(self, ctx):
+    def execute(self, ctx) -> None:
         ctx[self.name.value] = self.value.value
 
 
@@ -134,6 +134,6 @@ def __init__(self):
         self.value = InArg.empty()
         self.ref = MutableVariable()
 
-    def execute(self, ctx):
+    def execute(self, ctx) -> None:
         ctx[self.name.value] = self.value.value
         self.ref.set_fn(lambda: ctx[self.name.value])

xai_components/xai_utils/utils.py

@@ -14,8 +14,25 @@ def __init__(self):
         self.msg = InArg.empty()
         self.done = False
 
-    def execute(self, ctx):
+    def execute(self, ctx) -> None:
         print(str(self.msg.value))
+
+@xai_component
+class ConcatString(Component):
+    a: InArg[str]
+    b: InArg[str]
+    out: OutArg[str]
+    done: bool
+
+    def __init__(self):
+        self.a = InArg.empty()
+        self.b = InArg.empty()
+        self.out = InArg.empty()
+        self.done = False
+
+    def execute(self, cts) -> None:
+        self.out.value = self.a.value + self.b.value
+
 
 
 @xai_component

xircuits/handlers/components.py

@@ -24,18 +24,18 @@
 # A good point in time to do that, would be when the python compilation step
 # gets refactored
 DEFAULT_COMPONENTS = {
-    1: { "name": "Get Hyper-parameter String Name", "returnType": "string"},
-    2: { "name": "Get Hyper-parameter Int Name", "returnType": "int"},
-    3: { "name": "Get Hyper-parameter Float Name", "returnType": "float"},
-    4: { "name": "Get Hyper-parameter Boolean Name", "returnType": "boolean"},
-    5: { "name": "Literal String", "returnType": "string"},
-    6:{ "name": "Literal Integer", "returnType": "int"},
-    7:{ "name": "Literal Float", "returnType": "float"},
-    8:{ "name": "Literal True", "returnType": "boolean"},
-    9:{ "name": "Literal False", "returnType": "boolean"},
-    10:{ "name": "Literal List", "returnType": "list"},
-    11:{ "name": "Literal Tuple", "returnType": "tuple"},
-    12:{ "name": "Literal Dict", "returnType": "dict"},
+    1: { "name": "Get Argument String Name", "returnType": "string","color":"lightpink"},
+    2: { "name": "Get Argument Integer Name", "returnType": "int","color":"blue"},
+    3: { "name": "Get Argument Float Name", "returnType": "float","color":"green"},
+    4: { "name": "Get Argument Boolean Name", "returnType": "boolean","color":"red"},
+    5: { "name": "Literal String", "returnType": "string","color":"lightpink"},
+    6:{ "name": "Literal Integer", "returnType": "int","color":"blue"},
+    7:{ "name": "Literal Float", "returnType": "float","color":"green"},
+    8:{ "name": "Literal True", "returnType": "boolean","color":"red"},
+    9:{ "name": "Literal False", "returnType": "boolean","color":"red"},
+    10:{ "name": "Literal List", "returnType": "list","color":"yellow"},
+    11:{ "name": "Literal Tuple", "returnType": "tuple","color":"purple"},
+    12:{ "name": "Literal Dict", "returnType": "dict","color":"orange"},
     # Comment this first since we don't use it
     # 1: { "name": "Math Operation", "returnType": "math"},
     # 2: { "name": "Convert to Aurora", "returnType": "convert"},
@@ -102,7 +102,8 @@ def get(self):
                 "header": GROUP_GENERAL,
                 "category": GROUP_GENERAL,
                 "variables": [],
-                "type": c["returnType"]
+                "type": c["returnType"],
+                "color":c.get('color') or None    
             })
 
         default_paths = set(pathlib.Path(p).expanduser().resolve() for p in sys.path)