Persist node descriptions in store

OctoConsulting · Apr 20, 2024 · cbd49b0 · cbd49b0
1 parent 68ca2b7
commit cbd49b0
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 6 deletions.
diff --git a/ui/src/components/assistant/AssistantChatPanel.tsx b/ui/src/components/assistant/AssistantChatPanel.tsx
@@ -215,7 +215,6 @@ const AssistantChatPanel = () => {
         </TableToolbarContent>
       </TableToolbar>
 
-      {/* TODO: Ensure request is still processing if panel is collapsed */}
       {/* TODO: Display an error pop-up if LLM prompt fails  */}
       {isOpen && (
         <>

diff --git a/ui/src/components/config-panel/RootNodeConfig.tsx b/ui/src/components/config-panel/RootNodeConfig.tsx
@@ -1,7 +1,13 @@
 import { Stack, TextArea, TextInput } from "@carbon/react"
+import { ChangeEvent, useMemo } from "react"
 import { Attribute, EipChildGroup } from "../../api/eipSchema"
 import { EipFlowNode } from "../../api/flow"
-import { ROOT_PARENT, useAppActions } from "../../singletons/store"
+import {
+  ROOT_PARENT,
+  useAppActions,
+  useGetNodeDescription,
+} from "../../singletons/store"
+import debounce from "../../utils/debounce"
 import AttributeConfigForm from "./AttributeConfigForm"
 import ChildSelector from "./ChildSelector"
 import ConfigurationInputTabs from "./ConfigurationTabs"
@@ -13,7 +19,19 @@ interface PanelContentProps {
 }
 
 const NodeIdentifierInputs = ({ node }: { node: EipFlowNode }) => {
-  const { updateNodeLabel } = useAppActions()
+  const { updateNodeLabel, updateNodeDescription } = useAppActions()
+  const description = useGetNodeDescription(node.id)
+
+  const handleDescriptionUpdates = useMemo(
+    () =>
+      debounce(
+        (ev: ChangeEvent<HTMLTextAreaElement>) =>
+          updateNodeDescription(node.id, ev.target.value),
+        1000
+      ),
+    [node.id, updateNodeDescription]
+  )
+
   return (
     <Stack gap={6} className="side-panel-padded-container">
       <TextInput
@@ -34,6 +52,8 @@ const NodeIdentifierInputs = ({ node }: { node: EipFlowNode }) => {
         helperText="Optional description of the selected node's behavior"
         enableCounter
         maxCount={600}
+        defaultValue={description}
+        onChange={handleDescriptionUpdates}
       ></TextArea>
     </Stack>
   )
@@ -56,9 +76,7 @@ const RootNodeConfig = ({
           attrs={attributes}
         />
       }
-      childrenForm={
-        <ChildSelector nodeId={node.id} childGroup={childGroup!} />
-      }
+      childrenForm={<ChildSelector nodeId={node.id} childGroup={childGroup!} />}
     />
   </Stack>
 )

diff --git a/ui/src/singletons/store.ts b/ui/src/singletons/store.ts
@@ -36,13 +36,16 @@ type AttributeMapping = Record<string, AttributeTypes>
 interface EipNodeConfig {
   attributes: AttributeMapping
   children: Record<string, AttributeMapping>
+  description?: string
 }
 
 interface AppActions {
   createDroppedNode: (eipId: EipId, position: XYPosition) => void
 
   updateNodeLabel: (nodeId: string, label: string) => void
 
+  updateNodeDescription: (nodeId: string, description: string) => void
+
   updateEipAttribute: (
     id: string,
     parentId: string,
@@ -120,13 +123,21 @@ const useStore = create<AppStore>()(
               },
             }
           }),
+
         updateNodeLabel: (id, label) =>
           set((state) => ({
             nodes: state.nodes.map((node) =>
               node.id === id ? { ...node, data: { ...node.data, label } } : node
             ),
           })),
 
+        updateNodeDescription: (id, description) =>
+          set((state) => {
+            const configs = { ...state.eipNodeConfigs }
+            configs[id].description = description
+            return { eipNodeConfigs: configs }
+          }),
+
         updateEipAttribute: (id, parentId, attrName, value) =>
           set((state) => {
             const configs = { ...state.eipNodeConfigs }
@@ -245,6 +256,9 @@ export const useSerializedStore = () =>
     })
   )
 
+export const useGetNodeDescription = (id: string) =>
+  useStore((state) => state.eipNodeConfigs[id]?.description)
+
 export const useGetEipAttribute = (
   id: string,
   parentId: string,