Allow coloring node titles.

lynxkite-app/web/src/index.css

@@ -104,27 +104,29 @@ body {
     background-image: linear-gradient(
       to right,
       var(--status-color-1),
-      var(--status-color-2),
+      var(--status-color-2) 40%,
+      var(--status-color-2) 60%,
       var(--status-color-3)
     );
+    background-blend-mode: luminosity;
     background-size: 180% 180%;
-    --status-color-1: oklch(75% 0.2 55);
-    --status-color-2: oklch(75% 0.2 55);
-    --status-color-3: oklch(75% 0.2 55);
+    --status-color-1: #0000;
+    --status-color-2: #0000;
+    --status-color-3: #0000;
     transition: --status-color-1 0.3s, --status-color-2 0.3s, --status-color-3 0.3s;
   }
 
   .lynxkite-node .title.active {
-    --status-color-1: oklch(75% 0.2 55);
-    --status-color-2: oklch(90% 0.2 55);
-    --status-color-3: oklch(75% 0.1 55);
-    animation: active-node-gradient-animation 2s ease-in-out infinite;
+    --status-color-1: #0000;
+    --status-color-2: #fff4;
+    --status-color-3: #888f;
+    animation: active-node-gradient-animation 1.2s alternate ease-in-out infinite;
   }
 
   .lynxkite-node .title.planned {
-    --status-color-1: oklch(75% 0.1 55);
-    --status-color-2: oklch(75% 0.1 55);
-    --status-color-3: oklch(75% 0.1 55);
+    --status-color-1: #888f;
+    --status-color-2: #888f;
+    --status-color-3: #888f;
   }
 
   .handle-name {
@@ -405,15 +407,7 @@ body {
 }
 
 @keyframes active-node-gradient-animation {
-  0% {
-    background-position-x: 100%;
-  }
-
-  50% {
-    background-position-x: 0%;
-  }
-
-  100% {
+  to {
     background-position-x: 100%;
   }
 }

lynxkite-app/web/src/workspace/nodes/LynxKiteNode.tsx

@@ -43,6 +43,12 @@ function getHandles(inputs: object, outputs: object) {
   return handles;
 }
 
+const OP_COLORS: { [key: string]: string } = {
+  orange: "oklch(75% 0.2 55)",
+  blue: "oklch(75% 0.2 230)",
+  green: "oklch(75% 0.2 130)",
+};
+
 function LynxKiteNodeComponent(props: LynxKiteNodeProps) {
   const reactFlow = useReactFlow();
   const data = props.data;
@@ -57,7 +63,10 @@ function LynxKiteNodeComponent(props: LynxKiteNodeProps) {
     left: "top",
     right: "top",
   };
-
+  const titleStyle: { backgroundColor?: string } = {};
+  if (data.meta?.color) {
+    titleStyle.backgroundColor = OP_COLORS[data.meta.color] || data.meta.color;
+  }
   return (
     <div
       className={`node-container ${expanded ? "expanded" : "collapsed"} `}
@@ -67,7 +76,11 @@ function LynxKiteNodeComponent(props: LynxKiteNodeProps) {
       }}
     >
       <div className="lynxkite-node" style={props.nodeStyle}>
-        <div className={`title bg-primary ${data.status}`} onClick={titleClicked}>
+        <div
+          className={`title bg-primary ${data.status}`}
+          style={titleStyle}
+          onClick={titleClicked}
+        >
           {data.title}
           {data.error && <span className="title-icon">⚠️</span>}
           {expanded || <span className="title-icon">⋯</span>}
@@ -97,7 +110,7 @@ function LynxKiteNodeComponent(props: LynxKiteNodeProps) {
         )}
         {handles.map((handle) => (
           <Handle
-            key={handle.name}
+            key={`${handle.name} on ${handle.position}`}
             id={handle.name}
             type={handle.type}
             position={handle.position as Position}

lynxkite-core/src/lynxkite/core/ops.py

@@ -168,6 +168,7 @@ class Op(BaseConfig):
     outputs: dict[str, Output]
     # TODO: Make type an enum with the possible values.
     type: str = "basic"  # The UI to use for this operation.
+    color: str = "orange"  # The color of the operation in the UI.
 
     def __call__(self, *inputs, **params):
         # Convert parameters.
@@ -199,7 +200,16 @@ class Op(BaseConfig):
         return res
 
 
-def op(env: str, name: str, *, view="basic", outputs=None, params=None, slow=False):
+def op(
+    env: str,
+    name: str,
+    *,
+    view="basic",
+    outputs=None,
+    params=None,
+    slow=False,
+    color=None,
+):
     """Decorator for defining an operation."""
 
     def decorator(func):
@@ -234,6 +244,7 @@ def op(env: str, name: str, *, view="basic", outputs=None, params=None, slow=Fal
             inputs=inputs,
             outputs=_outputs,
             type=_view,
+            color=color or "orange",
         )
         CATALOGS.setdefault(env, {})
         CATALOGS[env][name] = op
@@ -291,7 +302,7 @@ def no_op(*args, **kwargs):
     return None
 
 
-def register_passive_op(env: str, name: str, inputs=[], outputs=["output"], params=[]):
+def register_passive_op(env: str, name: str, inputs=[], outputs=["output"], params=[], **kwargs):
     """A passive operation has no associated code."""
     op = Op(
         func=no_op,
@@ -303,6 +314,7 @@ def register_passive_op(env: str, name: str, inputs=[], outputs=["output"], para
         outputs=dict(
             (o, Output(name=o, type=None)) if isinstance(o, str) else (o.name, o) for o in outputs
         ),
+        **kwargs,
     )
     CATALOGS.setdefault(env, {})
     CATALOGS[env][name] = op

lynxkite-graph-analytics/src/lynxkite_graph_analytics/pytorch/pytorch_core.py

@@ -13,7 +13,9 @@ from .. import core
 ENV = "PyTorch model"
 
 
-def op(name, **kwargs):
+def op(name, weights=False, **kwargs):
+    if weights:
+        kwargs["color"] = "blue"
     _op = ops.op(ENV, name, **kwargs)
 
     def decorator(func):
@@ -28,7 +30,7 @@ def op(name, **kwargs):
     return decorator
 
 
-def reg(name, inputs=[], outputs=None, params=[]):
+def reg(name, inputs=[], outputs=None, params=[], **kwargs):
     if outputs is None:
         outputs = inputs
     return ops.register_passive_op(
@@ -37,6 +39,7 @@ def reg(name, inputs=[], outputs=None, params=[]):
         inputs=[ops.Input(name=name, position="bottom", type="tensor") for name in inputs],
         outputs=[ops.Output(name=name, position="top", type="tensor") for name in outputs],
         params=params,
+        **kwargs,
     )
 
 

lynxkite-graph-analytics/src/lynxkite_graph_analytics/pytorch/pytorch_ops.py

@@ -13,7 +13,7 @@ reg("Input: sequential", outputs=["y"])
 reg("Output", inputs=["x"], outputs=["x"], params=[P.basic("name")])
 
 
-@op("LSTM")
+@op("LSTM", weights=True)
 def lstm(x, *, input_size=1024, hidden_size=1024, dropout=0.0):
     return torch.nn.LSTM(input_size, hidden_size, dropout=0.0)
 
@@ -59,7 +59,7 @@ def dropout(x, *, p=0.0):
     return torch.nn.Dropout(p)
 
 
-@op("Linear")
+@op("Linear", weights=True)
 def linear(x, *, output_dim=1024):
     return pyg_nn.Linear(-1, output_dim)
 
@@ -124,6 +124,7 @@ reg(
         ),
         P.basic("lr", 0.001),
     ],
+    color="green",
 )
 
 ops.register_passive_op(