From 05846003348bae7e696d3baa8a2147729b67f8bd Mon Sep 17 00:00:00 2001 From: Ian Arawjo Date: Mon, 1 May 2023 11:56:18 -0400 Subject: [PATCH] Offload template hooks to separate component --- chain-forge/src/PromptNode.js | 66 +++++------------------ chain-forge/src/TemplateHooksComponent.js | 39 ++++++++++++++ 2 files changed, 52 insertions(+), 53 deletions(-) create mode 100644 chain-forge/src/TemplateHooksComponent.js diff --git a/chain-forge/src/PromptNode.js b/chain-forge/src/PromptNode.js index 9fb3491..98263ad 100644 --- a/chain-forge/src/PromptNode.js +++ b/chain-forge/src/PromptNode.js @@ -3,6 +3,7 @@ import { Handle } from 'react-flow-renderer'; import useStore from './store'; import StatusIndicator from './StatusIndicatorComponent' import NodeLabel from './NodeLabelComponent' +import TemplateHooks from './TemplateHooksComponent' // Helper funcs const truncStr = (s, maxLen) => { @@ -36,30 +37,8 @@ const PromptNode = ({ data, id }) => { const output = useStore((state) => state.output); const setDataPropsForNode = useStore((state) => state.setDataPropsForNode); - const genTemplateHooks = (temp_var_names, names_to_blink) => { - return temp_var_names.map( - (name, idx) => { - const className = (names_to_blink.includes(name)) ? 'text-blink' : ''; - const pos = (idx * 35) + 140 + 'px'; - const style = { top: pos, background: '#555' }; - return ( -
-

{name}

- -
- ) - } - ); - }; - const [hovered, setHovered] = useState(false); const [templateVars, setTemplateVars] = useState(data.vars || []); - const [templateHooks, setTemplateHooks] = useState(genTemplateHooks(data.vars || [], [])); const [promptText, setPromptText] = useState(data.prompt); const [promptTextOnLastRun, setPromptTextOnLastRun] = useState(null); const [selectedLLMs, setSelectedLLMs] = useState(['gpt3.5']); @@ -90,28 +69,24 @@ const PromptNode = ({ data, id }) => { } } + // Update template var fields + handles const braces_regex = /(? 0) { const temp_var_names = found_template_vars.map( - name => name.substring(1, name.length-1) + name => name.substring(1, name.length-1) // remove brackets {} ) setTemplateVars(temp_var_names); - setTemplateHooks( - genTemplateHooks(temp_var_names, []) - ); - setDataPropsForNode(id, {vars: temp_var_names}); } else { - setTemplateHooks([]); - setDataPropsForNode(id, {vars: []}); + setTemplateVars([]); } }; const handleRunClick = (event) => { // Go through all template hooks (if any) and check they're connected: - const is_fully_connected = templateHooks.every(hook => { + const is_fully_connected = templateVars.every(varname => { // Check that some edge has, as its target, this node and its template hook: - return edges.some(e => (e.target == id && e.targetHandle == hook.key)); + return edges.some(e => (e.target == id && e.targetHandle == varname)); }); // console.log(templateHooks); @@ -130,18 +105,18 @@ const PromptNode = ({ data, id }) => { // Pull data from each source: const pulled_data = {}; - templateHooks.forEach(hook => { + templateVars.forEach(varname => { // Find the relevant edge (breaking once we've found it): for (let i = 0; i < edges.length; i++) { const e = edges[i]; - if (e.target == id && e.targetHandle == hook.key) { + if (e.target == id && e.targetHandle == varname) { // Get the data output for that handle on the source node: let out = output(e.source, e.sourceHandle); if (!Array.isArray(out)) out = [out]; - if (hook.key in pulled_data) - pulled_data[hook.key] = pulled_data[hook.key].concat(out); + if (varname in pulled_data) + pulled_data[varname] = pulled_data[varname].concat(out); else - pulled_data[hook.key] = out; + pulled_data[varname] = out; } } }); @@ -212,20 +187,7 @@ const PromptNode = ({ data, id }) => { } else { console.log('Not connected! :('); - // Blink the names of unconnected params: - const names_to_blink = templateVars.filter(name => { - return !edges.some(e => (e.target == id && e.targetHandle == name)); - }); - setTemplateHooks( - genTemplateHooks(templateVars, names_to_blink) - ); - - // Set timeout to turn off blinking: - setTimeout(() => { - setTemplateHooks( - genTemplateHooks(templateVars, []) - ); - }, 750*2); + // TODO: Blink the names of unconnected params } } @@ -302,9 +264,7 @@ const PromptNode = ({ data, id }) => { style={{ top: '50%', background: '#555' }} /> -
- {templateHooks} -
+
diff --git a/chain-forge/src/TemplateHooksComponent.js b/chain-forge/src/TemplateHooksComponent.js new file mode 100644 index 0000000..3d3458a --- /dev/null +++ b/chain-forge/src/TemplateHooksComponent.js @@ -0,0 +1,39 @@ +import React, { useEffect, useState } from 'react'; +import { Handle } from 'react-flow-renderer'; +import useStore from './store' + +export default function TemplateHooks({ vars, nodeId, startY }) { + + const genTemplateHooks = (temp_var_names, names_to_blink) => { + return temp_var_names.map((name, idx) => { + const className = (names_to_blink.includes(name)) ? 'text-blink' : ''; + const pos = (idx * 35) + startY + 'px'; + const style = { top: pos, background: '#555' }; + return (
+

{name}

+ +
) + }); + }; + + const [templateHooks, setTemplateHooks] = useState(genTemplateHooks(vars || [], [])); + const setDataPropsForNode = useStore((state) => state.setDataPropsForNode); + + const blinkTemplateVars = (vars_to_blink) => { + setTemplateHooks(genTemplateHooks(vars, vars_to_blink)); + setTimeout(() => { // Set timeout to turn off blinking: + blinkTemplateVars([]); + }, 750*2); + }; + + useEffect(() => { + setTemplateHooks(genTemplateHooks(vars, [])); + setDataPropsForNode(nodeId, {vars: vars}); + }, [vars]); + + return ( +
+ {templateHooks} +
+ ); +} \ No newline at end of file