custom widget for node name

dimagi · Jan 16, 2025 · 482ca36 · 482ca36
1 parent 91866bf
commit 482ca36
Show file tree

Hide file tree

Showing 14 changed files with 99 additions and 75 deletions.
diff --git a/apps/pipelines/nodes/base.py b/apps/pipelines/nodes/base.py
@@ -92,9 +92,7 @@ def _process(self, state: PipelineState) -> PipelineState:
     model_config = ConfigDict(arbitrary_types_allowed=True)
 
     _config: RunnableConfig | None = None
-    name: str = Field(
-        description="The node name",
-    )
+    name: str = Field(title="Node Name", json_schema_extra={"ui:widget": "node_name"})
 
     def process(self, node_id: str, incoming_edges: list, state: PipelineState, config) -> PipelineState:
         self._config = config

diff --git a/apps/pipelines/tests/data/AssistantNode.json b/apps/pipelines/tests/data/AssistantNode.json
@@ -2,9 +2,9 @@
   "description": "Calls an OpenAI assistant",
   "properties": {
     "name": {
-      "description": "The node name",
-      "title": "Name",
-      "type": "string"
+      "title": "Node Name",
+      "type": "string",
+      "ui:widget": "node_name"
     },
     "assistant_id": {
       "title": "Assistant Id",

diff --git a/apps/pipelines/tests/data/BooleanNode.json b/apps/pipelines/tests/data/BooleanNode.json
@@ -2,9 +2,9 @@
   "description": "Branches based whether the input matches a certain value",
   "properties": {
     "name": {
-      "description": "The node name",
-      "title": "Name",
-      "type": "string"
+      "title": "Node Name",
+      "type": "string",
+      "ui:widget": "node_name"
     },
     "input_equals": {
       "title": "Input Equals",

diff --git a/apps/pipelines/tests/data/CodeNode.json b/apps/pipelines/tests/data/CodeNode.json
@@ -2,9 +2,9 @@
   "description": "Runs python",
   "properties": {
     "name": {
-      "description": "The node name",
-      "title": "Name",
-      "type": "string"
+      "title": "Node Name",
+      "type": "string",
+      "ui:widget": "node_name"
     },
     "code": {
       "default": "# You must define a main function, which takes the node input as a string.\n# Return a string to pass to the next node.\n\n# Available functions:\n# - get_participant_data() -> dict\n# - set_participant_data(data: Any) -> None\n# - get_state_key(key_name: str) -> str | None\n# - set_state_key(key_name: str, data: Any) -> None\n\ndef main(input: str, **kwargs) -> str:\n    return input\n",

diff --git a/apps/pipelines/tests/data/ExtractParticipantData.json b/apps/pipelines/tests/data/ExtractParticipantData.json
@@ -20,9 +20,9 @@
       "ui:widget": "range"
     },
     "name": {
-      "description": "The node name",
-      "title": "Name",
-      "type": "string"
+      "title": "Node Name",
+      "type": "string",
+      "ui:widget": "node_name"
     },
     "data_schema": {
       "default": "{\"name\": \"the name of the user\"}",

diff --git a/apps/pipelines/tests/data/ExtractStructuredData.json b/apps/pipelines/tests/data/ExtractStructuredData.json
@@ -20,9 +20,9 @@
       "ui:widget": "range"
     },
     "name": {
-      "description": "The node name",
-      "title": "Name",
-      "type": "string"
+      "title": "Node Name",
+      "type": "string",
+      "ui:widget": "node_name"
     },
     "data_schema": {
       "default": "{\"name\": \"the name of the user\"}",

diff --git a/apps/pipelines/tests/data/LLMResponse.json b/apps/pipelines/tests/data/LLMResponse.json
@@ -20,9 +20,9 @@
       "ui:widget": "range"
     },
     "name": {
-      "description": "The node name",
-      "title": "Name",
-      "type": "string"
+      "title": "Node Name",
+      "type": "string",
+      "ui:widget": "node_name"
     }
   },
   "required": [

diff --git a/apps/pipelines/tests/data/LLMResponseWithPrompt.json b/apps/pipelines/tests/data/LLMResponseWithPrompt.json
@@ -44,9 +44,9 @@
       "type": "string"
     },
     "name": {
-      "description": "The node name",
-      "title": "Name",
-      "type": "string"
+      "title": "Node Name",
+      "type": "string",
+      "ui:widget": "node_name"
     },
     "source_material_id": {
       "default": null,

diff --git a/apps/pipelines/tests/data/Passthrough.json b/apps/pipelines/tests/data/Passthrough.json
@@ -2,9 +2,9 @@
   "description": "Returns the input without modification",
   "properties": {
     "name": {
-      "description": "The node name",
-      "title": "Name",
-      "type": "string"
+      "title": "Node Name",
+      "type": "string",
+      "ui:widget": "node_name"
     }
   },
   "required": [

diff --git a/apps/pipelines/tests/data/RenderTemplate.json b/apps/pipelines/tests/data/RenderTemplate.json
@@ -2,9 +2,9 @@
   "description": "Renders a Jinja template",
   "properties": {
     "name": {
-      "description": "The node name",
-      "title": "Name",
-      "type": "string"
+      "title": "Node Name",
+      "type": "string",
+      "ui:widget": "node_name"
     },
     "template_string": {
       "description": "Use {{your_variable_name}} to refer to designate input",

diff --git a/apps/pipelines/tests/data/RouterNode.json b/apps/pipelines/tests/data/RouterNode.json
@@ -44,16 +44,9 @@
       "type": "string"
     },
     "name": {
-      "description": "The node name",
-      "title": "Name",
-      "type": "string"
-    },
-    "prompt": {
-      "default": "You are an extremely helpful router",
-      "minLength": 1,
-      "title": "Prompt",
+      "title": "Node Name",
       "type": "string",
-      "ui:widget": "expandable_text"
+      "ui:widget": "node_name"
     },
     "num_outputs": {
       "default": 2,
@@ -68,6 +61,13 @@
       "title": "Keywords",
       "type": "array",
       "ui:widget": "keywords"
+    },
+    "prompt": {
+      "default": "You are an extremely helpful router",
+      "minLength": 1,
+      "title": "Prompt",
+      "type": "string",
+      "ui:widget": "expandable_text"
     }
   },
   "required": [

diff --git a/apps/pipelines/tests/data/SendEmail.json b/apps/pipelines/tests/data/SendEmail.json
@@ -2,9 +2,9 @@
   "description": "Send the input to the node to the list of addresses provided",
   "properties": {
     "name": {
-      "description": "The node name",
-      "title": "Name",
-      "type": "string"
+      "title": "Node Name",
+      "type": "string",
+      "ui:widget": "node_name"
     },
     "recipient_list": {
       "description": "A comma-separated list of email addresses",

diff --git a/apps/pipelines/tests/data/StaticRouterNode.json b/apps/pipelines/tests/data/StaticRouterNode.json
@@ -2,9 +2,23 @@
   "description": "Routes the input to a linked node using the shared state of the pipeline",
   "properties": {
     "name": {
-      "description": "The node name",
-      "title": "Name",
-      "type": "string"
+      "title": "Node Name",
+      "type": "string",
+      "ui:widget": "node_name"
+    },
+    "num_outputs": {
+      "default": 2,
+      "title": "Num Outputs",
+      "type": "integer",
+      "ui:widget": "none"
+    },
+    "keywords": {
+      "items": {
+        "type": "string"
+      },
+      "title": "Keywords",
+      "type": "array",
+      "ui:widget": "keywords"
     },
     "data_source": {
       "enum": [
@@ -21,23 +35,9 @@
       ]
     },
     "route_key": {
-      "description": "The key in the to use for routing",
+      "description": "The key in the data to use for routing",
       "title": "Route Key",
       "type": "string"
-    },
-    "num_outputs": {
-      "default": 2,
-      "title": "Num Outputs",
-      "type": "integer",
-      "ui:widget": "none"
-    },
-    "keywords": {
-      "items": {
-        "type": "string"
-      },
-      "title": "Keywords",
-      "type": "array",
-      "ui:widget": "keywords"
     }
   },
   "required": [

diff --git a/assets/javascript/apps/pipeline/nodes/widgets.tsx b/assets/javascript/apps/pipeline/nodes/widgets.tsx
@@ -1,20 +1,13 @@
-import React, {
-  ChangeEvent,
-  ChangeEventHandler,
-  ReactNode,
-  useId,
-  useEffect,
-} from "react";
-import { useState } from "react";
+import React, {ChangeEvent, ChangeEventHandler, ReactNode, useEffect, useId, useState,} from "react";
 import CodeMirror from '@uiw/react-codemirror';
-import { python } from "@codemirror/lang-python";
-import { githubLight, githubDark } from "@uiw/codemirror-theme-github";
-import { CompletionContext, snippetCompletion as snip } from '@codemirror/autocomplete'
-import { TypedOption } from "../types/nodeParameterValues";
+import {python} from "@codemirror/lang-python";
+import {githubDark, githubLight} from "@uiw/codemirror-theme-github";
+import {CompletionContext, snippetCompletion as snip} from '@codemirror/autocomplete'
+import {TypedOption} from "../types/nodeParameterValues";
 import usePipelineStore from "../stores/pipelineStore";
-import { classNames, concatenate, getCachedData, getSelectOptions } from "../utils";
-import { NodeParams, PropertySchema } from "../types/nodeParams";
-import { Node, useUpdateNodeInternals } from "reactflow";
+import {classNames, concatenate, getCachedData, getSelectOptions} from "../utils";
+import {NodeParams, PropertySchema} from "../types/nodeParams";
+import {Node, useUpdateNodeInternals} from "reactflow";
 import DOMPurify from 'dompurify';
 
 export function getWidget(name: string, params: PropertySchema) {
@@ -39,6 +32,8 @@ export function getWidget(name: string, params: PropertySchema) {
       return HistoryTypeWidget
     case "keywords":
       return KeywordsWidget
+    case "node_name":
+      return NodeNameWidget
     default:
       if (params.enum) {
         return SelectWidget
@@ -76,6 +71,37 @@ function DefaultWidget(props: WidgetParams) {
   );
 }
 
+/**
+ * A widget component for displaying and editing the name of a node.
+ *
+ * Will display a blank input field if the current value matches the node ID.
+ */
+function NodeNameWidget(props: WidgetParams) {
+  const value = concatenate(props.paramValue);
+  const [inputValue, setInputValue] = React.useState(value === props.nodeId ? "" : value);
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(event.target.value);
+    if (!event.target.value) {
+      event.target.value = props.nodeId;
+    }
+    props.updateParamValue(event);
+  };
+
+  return (
+    <InputField label={props.label} help_text={props.helpText} inputError={props.inputError}>
+      <input
+        className="input input-bordered w-full"
+        name={props.name}
+        onChange={handleInputChange}
+        value={inputValue}
+        type="text"
+        required={props.required}
+      ></input>
+    </InputField>
+  );
+}
+
 function FloatWidget(props: WidgetParams) {
   return <InputField label={props.label} help_text={props.helpText} inputError={props.inputError}>
     <input