Bug fixes and issues solved

Author: Aviral09

src/App.jsx

@@ -29,7 +29,7 @@ const app = () => {
             <FileDragDrop dispatcher={dispatcher} />
             <Header superState={superState} dispatcher={dispatcher} />
             <section className="body" style={{ display: 'flex', overflow: 'hidden' }}>
-                <div style={{ display: 'flex' }}>
+                <div style={{ display: 'flex', overflow: 'auto' }}>
                     <LocalFileBrowser dispatcher={dispatcher} />
                 </div>
                 <div className="graph" style={{ display: 'flex', overflow: 'hidden' }}>

src/component/Header.jsx

@@ -30,7 +30,7 @@ const setHotKeys = (actions) => {
 };
 
 const Header = ({ superState, dispatcher }) => {
-    const actions = toolbarList(superState);
+    const actions = toolbarList(superState, dispatcher);
     React.useEffect(() => {
         setHotKeys(actions, superState, dispatcher);
     }, []);

src/component/fileBrowser.css

@@ -43,7 +43,7 @@ div.rendered-react-keyed-file-browser div.action-bar {
         margin-right: 0.5rem; }
 
 div.rendered-react-keyed-file-browser div.files {
-  overflow: auto;
+  /* overflow: auto; */
   width: 30vw;
 }
 

src/component/header.css

@@ -7,7 +7,8 @@
     height: auto;
     display: flex;
     box-sizing: border-box;
-    overflow: auto;
+    overflow-x: auto;
+    overflow-y: hidden;
 }
 
 .toolbar .tool {

src/component/modals/NodeDetails.jsx

@@ -26,6 +26,10 @@ const NodeDetails = ({
         }
     }, [!widthSet && data.label]);
 
+    useEffect(() => {
+        setLabelName(data.label.split(':')[0]);
+    }, [data.label]);
+
     return (
         <div className="nodeform" onSubmit={submit}>
             <div className="parent-div" style={{ height: data.style.height }}>
@@ -96,7 +100,6 @@ const NodeDetails = ({
                             required
                             label="Node Label file"
                             placeholder="Select file"
-                            // value={data.label.split(':')[1]}
                             onChange={(e) => {
                                 setLabelFile(e.target.value.split('/').pop());
                                 if (labelName) {
@@ -106,16 +109,24 @@ const NodeDetails = ({
                                         lname += ':';
                                     }
                                     setData({ ...data, label: lname + e.target.value.split('/').pop() });
-                                }
-                                setData({ ...data, label: labelName + e.target.value.split('/').pop() });
+                                } else setData({ ...data, label: `:${e.target.value.split('/').pop()}` });
                             }}
                             list="files"
                         />
                         <datalist id="files">
                             {
                                 localStorageManager.getFileList()
-                                    // eslint-disable-next-line max-len, jsx-a11y/control-has-associated-label
-                                    ? JSON.parse(localStorageManager.getFileList()).map((item) => <option value={`${item.key.toString()}`} />)
+                                    // eslint-disable-next-line max-len, prefer-arrow-callback
+                                    ? JSON.parse(localStorageManager.getFileList()).map(function fn(item, index) {
+                                        const acceptedTypes = ['.v', '.c', '.cpp', '.py', '.m', '.sh'];
+                                        const list = [];
+                                        // eslint-disable-next-line max-len
+                                        if ((acceptedTypes.some((substring) => item.key.toString().includes(substring)))) {
+                                            list.push(item.key.toString());
+                                        }
+                                        // eslint-disable-next-line jsx-a11y/control-has-associated-label, react/no-array-index-key
+                                        return <option value={list} key={index} />;
+                                    })
                                     : ''
                             }
                         </datalist>

src/component/modals/ProjectDetails.jsx

@@ -24,8 +24,9 @@ const ProjectDetails = ({ superState, dispatcher }) => {
     useEffect(() => {
         if (superState.editDetailsModal && curGraph) {
             setProjectName(curGraph.projectName);
-        } else setProjectName('');
+        }
     }, [superState.authorName, superState.editDetailsModal, curGraph]);
+
     useEffect(() => {
         if (superState.authorName) setAuthorName(superState.authorName);
         else {

src/graph-builder/graph-core/6-server.js

@@ -64,6 +64,36 @@ class GraphServer extends GraphLoadSave {
     //     }
     // }
 
+    build() {
+        // TODO
+        if (this.serverID);
+    }
+
+    debug() {
+        // TODO
+        if (this.serverID);
+    }
+
+    run() {
+        // TODO
+        if (this.serverID);
+    }
+
+    clear() {
+        // TODO
+        if (this.serverID);
+    }
+
+    stop() {
+        // TODO
+        if (this.serverID);
+    }
+
+    destroy() {
+        // TODO
+        if (this.serverID);
+    }
+
     setCurStatus() {
         super.setCurStatus();
         this.dispatcher({ type: T.IS_WORKFLOW_ON_SERVER, payload: Boolean(this.serverID) });

src/toolbarActions/toolbarFunctions.js

@@ -142,8 +142,17 @@ const viewHistory = (state, setState) => {
     setState({ type: T.SET_HISTORY_MODAL, payload: true });
 };
 
+const toggleServer = (state, dispatcher) => {
+    if (state.isWorkflowOnServer) {
+        dispatcher({ type: T.IS_WORKFLOW_ON_SERVER, payload: false });
+    } else {
+        dispatcher({ type: T.IS_WORKFLOW_ON_SERVER, payload: true });
+    }
+};
+
 export {
     createNode, editElement, deleteElem, downloadImg, saveAction,
     readFile, readTextFile, newProject, clearAll, editDetails, undo, redo,
     openShareModal, openSettingModal, viewHistory,
+    toggleServer,
 };

src/toolbarActions/toolbarList.js

@@ -1,20 +1,22 @@
 /* eslint-disable no-alert */
 import {
     FaSave, FaUndo, FaRedo, FaTrash, FaFileImport, FaPlus, FaDownload, FaEdit, FaRegTimesCircle, FaShare, FaHistory,
-    // FaRegSun,
+    FaHammer, FaBug, FaBomb, FaToggleOn, FaThermometerEmpty,
 } from 'react-icons/fa';
 
-// import {
-//     FiChevronDown, FiChevronsDown, FiChevronsUp, FiChevronUp,
-// } from 'react-icons/fi';
+import {
+    // FiChevronDown, FiChevronsDown, FiChevronsUp, FiChevronUp,
+    FiPlay, FiStopCircle, FiToggleLeft, FiTriangle,
+} from 'react-icons/fi';
 
 import {
     createNode, editElement, deleteElem, downloadImg, saveAction,
     readFile, clearAll, undo, redo, openShareModal, viewHistory,
+    toggleServer,
     // openSettingModal,
 } from './toolbarFunctions';
 
-const toolbarList = (state) => [
+const toolbarList = (state, dispatcher) => [
     {
         type: 'action',
         text: 'Node',
@@ -37,18 +39,23 @@ const toolbarList = (state) => [
         text: 'Save',
         icon: FaSave,
         action: (s, d) => [
-            { fn: () => state.curGraphInstance && state.curGraphInstance.pushToServer(), name: 'Save on Server' },
-            { fn: () => saveAction(s, d), name: 'Save' },
-            { fn: () => saveAction(s, d, prompt('File Name:')), name: 'Save As' },
-            // TODO
-            // { fn: () => saveLocal(s, d), name: 'Save Local' },
+            { fn: () => saveAction(s, d), name: 'Save As' },
+        ],
+        active: false,
+    },
+    {
+        type: 'menu',
+        text: 'Save As',
+        icon: FaSave,
+        action: (s, d) => [
+            { fn: () => saveAction(s, d), name: 'Save As' },
         ],
         active: true,
     },
     {
         type: 'action',
-        text: 'Clear',
-        icon: FaRegTimesCircle,
+        text: 'Empty',
+        icon: FaThermometerEmpty,
         action: clearAll,
         active: true,
         hotkey: 'Ctrl+Backspace',
@@ -96,6 +103,57 @@ const toolbarList = (state) => [
         active: true,
     },
     { type: 'vsep' },
+    // server buttons
+    {
+        type: 'action',
+        text: 'Server',
+        icon: state.isWorkflowOnServer ? FaToggleOn : FiToggleLeft,
+        action: () => toggleServer(state, dispatcher),
+        active: true,
+    },
+    {
+        type: 'action',
+        text: 'Build',
+        icon: FaHammer,
+        action: () => state.curGraphInstance && state.curGraphInstance.build(),
+        active: state.isWorkflowOnServer,
+    },
+    {
+        type: 'action',
+        text: 'Debug',
+        icon: FaBug,
+        action: () => state.curGraphInstance && state.curGraphInstance.debug(),
+        active: state.isWorkflowOnServer,
+    },
+    {
+        type: 'action',
+        text: 'Run',
+        icon: FiPlay,
+        action: () => state.curGraphInstance && state.curGraphInstance.run(),
+        active: state.isWorkflowOnServer,
+    },
+    {
+        type: 'action',
+        text: 'Clear',
+        icon: FaRegTimesCircle,
+        action: () => state.curGraphInstance && state.curGraphInstance.clear(),
+        active: state.isWorkflowOnServer,
+    },
+    {
+        type: 'action',
+        text: 'Stop',
+        icon: FiStopCircle,
+        action: () => state.curGraphInstance && state.curGraphInstance.stop(),
+        active: state.isWorkflowOnServer,
+    },
+    {
+        type: 'action',
+        text: 'Destroy',
+        icon: FaBomb,
+        action: () => state.curGraphInstance && state.curGraphInstance.destroy(),
+        active: state.isWorkflowOnServer,
+    },
+
     // Not being implemented in version 1
     // {
     //     type: 'action',
@@ -135,6 +193,13 @@ const toolbarList = (state) => [
     //     action: openSettingModal,
     //     active: true,
     // },
+    {
+        type: 'action',
+        text: 'Contribute',
+        icon: FiTriangle,
+        action: () => { window.open('https://github.com/ControlCore-Project/concore-editor', '_blank'); },
+        active: true,
+    },
     {
         type: 'action',
         text: 'Share',