mirror of
https://github.com/ianarawjo/ChainForge.git
synced 2025-03-14 16:26:45 +00:00
Merge pull request #15 from ianarawjo/pv
Close button for all the nodes.
This commit is contained in:
commit
8cec55edc7
@ -150,14 +150,14 @@ const EvaluatorNode = ({ data, id }) => {
|
||||
|
||||
return (
|
||||
<div className="evaluator-node cfnode">
|
||||
<div className="node-header">
|
||||
<NodeLabel title={data.title || 'Python Evaluator Node'}
|
||||
nodeId={id}
|
||||
onEdit={hideStatusIndicator}
|
||||
icon={<IconTerminal size="16px" />} />
|
||||
<StatusIndicator status={status} />
|
||||
<button className="AmitSahoo45-button-3" onClick={handleRunClick}><div className="play-button"></div></button>
|
||||
</div>
|
||||
<NodeLabel title={data.title || 'Python Evaluator Node'}
|
||||
nodeId={id}
|
||||
onEdit={hideStatusIndicator}
|
||||
icon={<IconTerminal size="16px" />}
|
||||
status={status}
|
||||
alertModal={alertModal}
|
||||
handleRunClick={handleRunClick}
|
||||
/>
|
||||
<Handle
|
||||
type="target"
|
||||
position="left"
|
||||
@ -170,7 +170,6 @@ const EvaluatorNode = ({ data, id }) => {
|
||||
id="output"
|
||||
style={{ top: '50%', background: '#555' }}
|
||||
/>
|
||||
<AlertModal ref={alertModal} />
|
||||
<div className="core-mirror-field">
|
||||
<div className="code-mirror-field-header">Function to map over each
|
||||
<select name="mapscope" id="mapscope" onChange={handleOnMapScopeSelect}>
|
||||
|
@ -117,11 +117,9 @@ const InspectorNode = ({ data, id }) => {
|
||||
|
||||
return (
|
||||
<div className="inspector-node cfnode">
|
||||
<div className="node-header">
|
||||
<NodeLabel title={data.title || 'Inspect Node'}
|
||||
nodeId={id}
|
||||
icon={'🔍'} />
|
||||
</div>
|
||||
<NodeLabel title={data.title || 'Inspect Node'}
|
||||
nodeId={id}
|
||||
icon={'🔍'} />
|
||||
{/* <div className="var-select-toolbar">
|
||||
{varSelects}
|
||||
</div> */}
|
||||
|
@ -1,10 +1,16 @@
|
||||
import { edit } from 'ace-builds';
|
||||
import useStore from './store';
|
||||
import { EditText } from 'react-edit-text';
|
||||
import 'react-edit-text/dist/index.css';
|
||||
import StatusIndicator from './StatusIndicatorComponent';
|
||||
import AlertModal from './AlertModal';
|
||||
import { useState, useEffect} from 'react';
|
||||
import { CloseButton } from '@mantine/core';
|
||||
|
||||
export default function NodeLabel({ title, nodeId, icon, onEdit, onSave, editable }) {
|
||||
export default function NodeLabel({ title, nodeId, icon, onEdit, onSave, editable, status, alertModal, handleRunClick }) {
|
||||
const setDataPropsForNode = useStore((state) => state.setDataPropsForNode);
|
||||
const [statusIndicator, setStatusIndicator] = useState('none');
|
||||
const [runButton, setRunButton] = useState('none');
|
||||
const removeNode = useStore((state) => state.removeNode);
|
||||
|
||||
const handleNodeLabelChange = (evt) => {
|
||||
const { value } = evt;
|
||||
@ -16,15 +22,48 @@ export default function NodeLabel({ title, nodeId, icon, onEdit, onSave, editabl
|
||||
if (onEdit) onEdit();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if(status !== undefined) {
|
||||
setStatusIndicator(<StatusIndicator status={status} />);
|
||||
}
|
||||
else {
|
||||
setStatusIndicator(<></>);
|
||||
}
|
||||
}, [status]);
|
||||
|
||||
useEffect(() => {
|
||||
if(handleRunClick !== undefined) {
|
||||
setRunButton(<button className="AmitSahoo45-button-3 nodrag" onClick={handleRunClick}>▶</button>);
|
||||
}
|
||||
else {
|
||||
setRunButton(<></>);
|
||||
}
|
||||
}, [handleRunClick]);
|
||||
|
||||
const handleCloseButtonClick = () => {
|
||||
removeNode(nodeId);
|
||||
}
|
||||
|
||||
return (<>
|
||||
{icon ? (<>{icon} </>) : <></>}
|
||||
<EditText className="nodrag" name={nodeId ? nodeId+"-label" : "node-label"}
|
||||
defaultValue={title || 'Node'}
|
||||
style={{width: '70%', margin:'0px', padding:'0px', minHeight:'18px'}}
|
||||
onEditMode={handleEnterEditMode}
|
||||
onSave={handleNodeLabelChange}
|
||||
inline={true}
|
||||
readonly={editable !== undefined ? (!editable) : false}
|
||||
/>
|
||||
<div className="node-header drag-handle">
|
||||
{icon ? (<>{icon} </>) : <></>}
|
||||
<EditText className="nodrag" name={nodeId ? nodeId + "-label" : "node-label"}
|
||||
defaultValue={title || 'Node'}
|
||||
style={{ width: '60%', margin: '0px', padding: '0px', minHeight: '18px' }}
|
||||
onEditMode={handleEnterEditMode}
|
||||
onSave={handleNodeLabelChange}
|
||||
inline={true}
|
||||
readonly={editable !== undefined ? (!editable) : false}
|
||||
/>
|
||||
{statusIndicator}
|
||||
<AlertModal ref={alertModal} />
|
||||
<div style={{float: 'right', marginRight: '5px', marginLeft: '10px'}}>
|
||||
{runButton}
|
||||
<button className="AmitSahoo45-button-4 nodrag" onClick={handleCloseButtonClick}>✕</button>
|
||||
<br/>
|
||||
</div>
|
||||
{/* <button className="AmitSahoo45-button-3 nodrag" onClick={handleRunClick}><div className="play-button"></div></button> */}
|
||||
</div>
|
||||
|
||||
</>);
|
||||
}
|
@ -272,15 +272,14 @@ const PromptNode = ({ data, id }) => {
|
||||
|
||||
return (
|
||||
<div className="prompt-node cfnode">
|
||||
<div className="node-header drag-handle">
|
||||
<NodeLabel title={data.title || 'Prompt Node'}
|
||||
nodeId={id}
|
||||
onEdit={hideStatusIndicator}
|
||||
icon={'💬'} />
|
||||
<StatusIndicator status={status} />
|
||||
<AlertModal ref={alertModal} />
|
||||
<button className="AmitSahoo45-button-3 nodrag" onClick={handleRunClick}><div className="play-button"></div></button>
|
||||
</div>
|
||||
<NodeLabel title={data.title || 'Prompt Node'}
|
||||
nodeId={id}
|
||||
onEdit={hideStatusIndicator}
|
||||
icon={'💬'}
|
||||
status={status}
|
||||
alertModal={alertModal}
|
||||
handleRunClick={handleRunClick}
|
||||
/>
|
||||
<div className="input-field">
|
||||
<textarea
|
||||
rows="4"
|
||||
|
@ -65,9 +65,7 @@ const ScriptNode = ({ data, id }) => {
|
||||
|
||||
return (
|
||||
<div className="script-node cfnode">
|
||||
<div className="node-header">
|
||||
<NodeLabel title={data.title || 'Global Scripts'} nodeId={id} editable={false} icon={<IconSettingsAutomation size="16px" />}/>
|
||||
</div>
|
||||
<NodeLabel title={data.title || 'Global Scripts'} nodeId={id} editable={false} icon={<IconSettingsAutomation size="16px" />}/>
|
||||
<label htmlFor="num-generations" style={{fontSize: '10pt'}}>Enter folder paths for external modules you wish to import.</label> <br/><br/>
|
||||
<div>
|
||||
{scriptFiles}
|
||||
|
@ -115,9 +115,7 @@ const TextFieldsNode = ({ data, id }) => {
|
||||
|
||||
return (
|
||||
<div className="text-fields-node cfnode">
|
||||
<div className="node-header">
|
||||
<NodeLabel title={data.title || 'TextFields Node'} nodeId={id} icon={<IconTextPlus size="16px" />} />
|
||||
</div>
|
||||
<NodeLabel title={data.title || 'TextFields Node'} nodeId={id} icon={<IconTextPlus size="16px" />} />
|
||||
<div ref={ref}>
|
||||
{fields}
|
||||
</div>
|
||||
|
@ -164,11 +164,9 @@ const VisNode = ({ data, id }) => {
|
||||
|
||||
return (
|
||||
<div className="vis-node cfnode">
|
||||
<div className="node-header">
|
||||
<NodeLabel title={data.title || 'Vis Node'}
|
||||
nodeId={id}
|
||||
icon={'📊'} />
|
||||
</div>
|
||||
<NodeLabel title={data.title || 'Vis Node'}
|
||||
nodeId={id}
|
||||
icon={'📊'} />
|
||||
<div className="nodrag">{plotlyObj}</div>
|
||||
<Handle
|
||||
type="target"
|
||||
|
@ -89,6 +89,11 @@ const useStore = create((set, get) => ({
|
||||
nodes: get().nodes.concat(newnode)
|
||||
});
|
||||
},
|
||||
removeNode: (id) => {
|
||||
set({
|
||||
nodes: get().nodes.filter(n => n.id !== id)
|
||||
});
|
||||
},
|
||||
setNodes: (newnodes) => {
|
||||
set({
|
||||
nodes: newnodes
|
||||
|
@ -272,7 +272,7 @@
|
||||
-webkit-transition: all 0.2s ease-in;
|
||||
-moz-transition: all 0.2s ease-in;
|
||||
transition: all 0.2s ease-in;
|
||||
float:right;
|
||||
/* float:right; */
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -307,6 +307,59 @@
|
||||
transform: skewX(-20deg);
|
||||
}
|
||||
|
||||
/** CSS Button style from https://css-buttons-hover.netlify.app/ */
|
||||
.AmitSahoo45-button-4 {
|
||||
position: relative;
|
||||
padding: 2px 10px;
|
||||
margin-top: -5px;
|
||||
border-radius: 7px;
|
||||
border: 1px solid #999;
|
||||
font-size: 14px;
|
||||
/* text-transform: uppercase; */
|
||||
/* font-weight: 600; */
|
||||
/* letter-spacing: 2px; */
|
||||
background: transparent;
|
||||
color: #333;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 0 0 0 transparent;
|
||||
-webkit-transition: all 0.2s ease-in;
|
||||
-moz-transition: all 0.2s ease-in;
|
||||
transition: all 0.2s ease-in;
|
||||
/* float:right; */
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.AmitSahoo45-button-4:hover {
|
||||
background: rgb(200 , 26, 69);
|
||||
box-shadow: 0 0 30px 5px rgb(234, 63, 106, 0.815);
|
||||
-webkit-transition: all 0.2s ease-out;
|
||||
-moz-transition: all 0.2s ease-out;
|
||||
transition: all 0.2s ease-out;
|
||||
}
|
||||
|
||||
.AmitSahoo45-button-4:hover::before {
|
||||
-moz-animation: sh02 0.5s 0s linear;
|
||||
animation: sh02 0.5s 0s linear;
|
||||
}
|
||||
|
||||
.AmitSahoo45-button-4::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 0px;
|
||||
height: 86%;
|
||||
position: absolute;
|
||||
top: 7%;
|
||||
left: 0%;
|
||||
opacity: 0;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 50px 30px #fff;
|
||||
-webkit-transform: skewX(-20deg);
|
||||
-moz-transform: skewX(-20deg);
|
||||
-ms-transform: skewX(-20deg);
|
||||
-o-transform: skewX(-20deg);
|
||||
transform: skewX(-20deg);
|
||||
}
|
||||
|
||||
/* Play button triangle |> */
|
||||
.play-button {
|
||||
border: 0;
|
||||
|
Loading…
x
Reference in New Issue
Block a user