Move hover border style events to cfnode CSS class

This commit is contained in:
Ian Arawjo 2023-05-03 13:49:03 -04:00
parent 71f2d35314
commit 302021dae0
7 changed files with 13 additions and 57 deletions

View File

@ -25,20 +25,12 @@ const EvaluatorNode = ({ data, id }) => {
// For displaying error messages to user
const alertModal = useRef(null);
const [hovered, setHovered] = useState(false);
const [codeText, setCodeText] = useState(data.code);
const [codeTextOnLastRun, setCodeTextOnLastRun] = useState(false);
const [reduceMethod, setReduceMethod] = useState('none');
const [mapScope, setMapScope] = useState('response');
const [reduceVars, setReduceVars] = useState([]);
const handleMouseEnter = () => {
setHovered(true);
};
const handleMouseLeave = () => {
setHovered(false);
};
const handleCodeChange = (code) => {
if (codeTextOnLastRun !== false) {
const code_changed = code !== codeTextOnLastRun;
@ -156,17 +148,8 @@ const EvaluatorNode = ({ data, id }) => {
if (status !== 'none') { setStatus('none'); }
};
const borderStyle = hovered
? '1px solid #222'
: '1px solid #999';
return (
<div
className="evaluator-node"
style={{ border: borderStyle }}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
<div className="evaluator-node cfnode">
<div className="node-header">
<NodeLabel title={data.title || 'Python Evaluator Node'}
nodeId={id}

View File

@ -116,7 +116,7 @@ const InspectorNode = ({ data, id }) => {
}
return (
<div className="inspector-node">
<div className="inspector-node cfnode">
<div className="node-header">
<NodeLabel title={data.title || 'Inspect Node'}
nodeId={id}

View File

@ -53,7 +53,6 @@ const PromptNode = ({ data, id }) => {
const setDataPropsForNode = useStore((state) => state.setDataPropsForNode);
const getNode = useStore((state) => state.getNode);
const [hovered, setHovered] = useState(false);
const [templateVars, setTemplateVars] = useState(data.vars || []);
const [promptText, setPromptText] = useState(data.prompt);
const [promptTextOnLastRun, setPromptTextOnLastRun] = useState(null);
@ -87,13 +86,6 @@ const PromptNode = ({ data, id }) => {
const onLLMListItemsChange = useCallback((new_items) => {
setLLMItemsCurrState(new_items);
}, [setLLMItemsCurrState]);
const handleMouseEnter = () => {
setHovered(true);
};
const handleMouseLeave = () => {
setHovered(false);
};
const handleInputChange = (event) => {
const value = event.target.value;
@ -277,18 +269,9 @@ const PromptNode = ({ data, id }) => {
const hideStatusIndicator = () => {
if (status !== 'none') { setStatus('none'); }
};
const borderStyle = hovered
? '1px solid #222'
: '1px solid #999';
return (
<div
className="prompt-node"
style={{ border: borderStyle }}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
<div className="prompt-node cfnode">
<div className="node-header drag-handle">
<NodeLabel title={data.title || 'Prompt Node'}
nodeId={id}

View File

@ -59,7 +59,7 @@ const ScriptNode = ({ data, id }) => {
}, [data, id, setDataPropsForNode]);
return (
<div className="script-node">
<div className="script-node cfnode">
<div className="node-header">
<NodeLabel title={data.title || 'Global Scripts'} nodeId={id} editable={false} />
</div>

View File

@ -95,7 +95,7 @@ const TextFieldsNode = ({ data, id }) => {
}, [fields]);
return (
<div className="text-fields-node">
<div className="text-fields-node cfnode">
<div className="node-header">
<NodeLabel title={data.title || 'TextFields Node'} nodeId={id} icon={<IconTextPlus size="16px" />} />
</div>

View File

@ -40,16 +40,8 @@ const createHoverTexts = (responses) => {
const VisNode = ({ data, id }) => {
const setDataPropsForNode = useStore((state) => state.setDataPropsForNode);
const [hovered, setHovered] = useState(false);
const [plotlyObj, setPlotlyObj] = useState([]);
const [pastInputs, setPastInputs] = useState([]);
const handleMouseEnter = () => {
setHovered(true);
};
const handleMouseLeave = () => {
setHovered(false);
};
const handleOnConnect = useCallback(() => {
// Grab the input node ids
@ -169,18 +161,9 @@ const VisNode = ({ data, id }) => {
handleOnConnect();
}
}, [data, id, handleOnConnect, setDataPropsForNode]);
const borderStyle = hovered
? '1px solid #222'
: '1px solid #999';
return (
<div
className="vis-node"
style={{ border: borderStyle }}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
<div className="vis-node cfnode">
<div className="node-header">
<NodeLabel title={data.title || 'Vis Node'}
nodeId={id}

View File

@ -183,6 +183,13 @@
margin: 0px 0px 0px 2px;
}
.cfnode {
border-color: #999;
}
.cfnode:hover {
border-color: #222;
}
.var-select-toolbar {
text-align: right;
margin: 0px;