Merge pull request #15 from ianarawjo/pv

Close button for all the nodes.
This commit is contained in:
Priyan Vaithilingam 2023-05-03 15:44:33 -04:00 committed by GitHub
commit 8cec55edc7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 133 additions and 46 deletions

View File

@ -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 &nbsp;
<select name="mapscope" id="mapscope" onChange={handleOnMapScopeSelect}>

View File

@ -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> */}

View File

@ -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}>&#9654;</button>);
}
else {
setRunButton(<></>);
}
}, [handleRunClick]);
const handleCloseButtonClick = () => {
removeNode(nodeId);
}
return (<>
{icon ? (<>{icon}&nbsp;</>) : <></>}
<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}&nbsp;</>) : <></>}
<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}>&#x2715;</button>
<br/>
</div>
{/* <button className="AmitSahoo45-button-3 nodrag" onClick={handleRunClick}><div className="play-button"></div></button> */}
</div>
</>);
}

View File

@ -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"

View File

@ -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}

View File

@ -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>

View File

@ -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"

View File

@ -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

View File

@ -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;