Merge pull request #15 from ianarawjo/pv

Close button for all the nodes.

chain-forge/src/EvaluatorNode.js

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

chain-forge/src/InspectorNode.js

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

chain-forge/src/NodeLabelComponent.js

@@ -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>
+
     </>);
 }

chain-forge/src/PromptNode.js

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

chain-forge/src/ScriptNode.js

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

chain-forge/src/TextFieldsNode.js

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

chain-forge/src/VisNode.js

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

chain-forge/src/store.js

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

chain-forge/src/text-fields-node.css

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