Added show script functionality

4 files changed, 119 insertions, 5 deletions

diff --git a/blocks/eda-frontend/src/components/SchematicEditor/SchematicToolbar.js b/blocks/eda-frontend/src/components/SchematicEditor/SchematicToolbar.js
index 5b8d2c21..2dabaea3 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/SchematicToolbar.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/SchematicToolbar.js
@@ -7,7 +7,7 @@ import {
 } from '@material-ui/core'
 import AddBoxOutlinedIcon from '@material-ui/icons/AddBoxOutlined'
 import PlayCircleOutlineIcon from '@material-ui/icons/PlayCircleOutline'
-// import DescriptionIcon from '@material-ui/icons/Description'
+import DescriptionIcon from '@material-ui/icons/Description'
 import HelpOutlineIcon from '@material-ui/icons/HelpOutline'
 import UndoIcon from '@material-ui/icons/Undo'
 import RedoIcon from '@material-ui/icons/Redo'
@@ -30,7 +30,7 @@ import { Link as RouterLink } from 'react-router-dom'
 import beautify from 'xml-beautifier'
 import mxGraphFactory from 'mxgraph'
 
-import { NetlistModal, HelpScreen, ImageExportDialog, OpenSchDialog /*, ScriptScreen */ } from './ToolbarExtension'
+import { NetlistModal, HelpScreen, ImageExportDialog, OpenSchDialog, ScriptScreen } from './ToolbarExtension'
 import { editorZoomIn, editorZoomOut, editorZoomAct, deleteComp, PrintPreview, Rotate, editorUndo, editorRedo, saveXml, ClearGrid } from './Helper/ToolbarTools'
 import { useSelector, useDispatch } from 'react-redux'
 import { toggleSimulate, closeCompProperties, setSchXmlData, saveSchematic, openLocalSch, setLoadingDiagram } from '../../redux/actions/index'
@@ -119,6 +119,7 @@ export default function SchematicToolbar ({ mobileClose, gridRef }) {
 
   // Control Help dialog window
   const [helpOpen, setHelpOpen] = useState(false)
+  const [scriptOpen, setScriptOpen] = useState(false)
 
   const handleHelpOpen = () => {
     setHelpOpen(true)
@@ -128,6 +129,14 @@ export default function SchematicToolbar ({ mobileClose, gridRef }) {
     setHelpOpen(false)
   }
 
+  const handleSchWinOpen = () => {
+    setScriptOpen(true)
+  }
+
+  const handleScriptClose = () => {
+    setScriptOpen(false)
+  }
+
   // Handle Delete component
   const handleDeleteComp = () => {
     deleteComp()
@@ -414,7 +423,7 @@ export default function SchematicToolbar ({ mobileClose, gridRef }) {
     { icon: <ImageOutlinedIcon fontSize='small' />, label: 'Image Export', action: handleImgClickOpen },
     { icon: <PrintOutlinedIcon fontSize='small' />, label: 'Print Preview', action: PrintPreview },
     'pipe',
-    // { icon: <DescriptionIcon fontSize='small' />, label: 'Show Script', action: handleSchWinOpen },
+    { icon: <DescriptionIcon fontSize='small' style={{ color: scriptDump ? 'red' : 'inherit' }} />, label: 'Show Script', action: handleSchWinOpen },
     { icon: <PlayCircleOutlineIcon fontSize='small' />, label: 'Simulate', action: handleNetlistOpen },
     'pipe',
     { icon: <UndoIcon fontSize='small' />, label: 'Undo', action: editorUndo },
@@ -504,6 +513,7 @@ export default function SchematicToolbar ({ mobileClose, gridRef }) {
       <ImageExportDialog open={imgopen} onClose={handleImgClose} />
       <NetlistModal open={open} close={handleClose} netlist={netlist} />
       <HelpScreen open={helpOpen} close={handleHelpClose} />
+      <ScriptScreen isOpen={scriptOpen} onClose={handleScriptClose} />
     </>
   )
 }
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/ToolbarExtension.js b/blocks/eda-frontend/src/components/SchematicEditor/ToolbarExtension.js
index b7c60421..2e0df305 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/ToolbarExtension.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/ToolbarExtension.js
@@ -28,13 +28,15 @@ import {
   TextareaAutosize,
   Toolbar,
   Tooltip,
-  Typography
+  Typography,
+  Box,
+  TextField
 } from '@material-ui/core'
 
 import { makeStyles } from '@material-ui/core/styles'
 import CloseIcon from '@material-ui/icons/Close'
 import { useSelector, useDispatch } from 'react-redux'
-import { fetchSchematics, fetchSchematic, fetchDiagram, fetchGallery } from '../../redux/actions/index'
+import { fetchSchematics, fetchSchematic, fetchDiagram, fetchGallery, setSchScriptDump } from '../../redux/actions/index'
 import { blue } from '@material-ui/core/colors'
 import { getDateTime as getDate, getUppercaseInitial, saveToFile } from '../../utils/GalleryUtils'
 
@@ -332,6 +334,105 @@ HelpScreen.propTypes = {
   close: PropTypes.func
 }
 
+export function ScriptScreen ({ isOpen, onClose }) {
+  const scriptDump = useSelector(state => state.saveSchematicReducer.scriptDump)
+  const dispatch = useDispatch()
+  const scriptHandler = (e) => {
+    dispatch(setSchScriptDump(e.target.value))
+  }
+
+  const [result, setResult] = useState('')
+
+  const executeCode = () => {
+    setResult('Executing Scilab code...')
+  }
+
+  const resetCode = () => {
+    setCode('')
+    setResult('')
+  }
+
+
+  return (
+    <Dialog fullScreen open={isOpen} onClose={onClose}>
+      {/* Top AppBar */}
+      <AppBar position='static'>
+        <Toolbar>
+          <Typography variant='h6' sx={{ flexGrow: 1 }}>
+            Script Editor
+          </Typography>
+          <IconButton edge='end' color='inherit' onClick={onClose}>
+            <CloseIcon />
+          </IconButton>
+        </Toolbar>
+      </AppBar>
+
+      {/* Main Content */}
+      <Box sx={{ p: 4 }}>
+
+        {/* Code and Result Sections */}
+        <Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1fr', md: '1fr 1fr' }, gap: 4, alignItems: 'stretch' }}>
+          {/* Scilab Code Input */}
+          <Box sx={{ p: 2, bgcolor: 'white', boxShadow: 2, borderRadius: 2, display: 'flex', flexDirection: 'column', height: '100%' }}>
+            <Typography variant='subtitle1' sx={{ fontWeight: 'bold', mb: 1 }}>
+              Scilab Code:
+            </Typography>
+            <TextField
+              value={scriptDump}
+              onChange={scriptHandler}
+              multiline
+              minRows={12}
+              variant='outlined'
+              fullWidth
+              sx={{ fontFamily: "Courier New, monospace", fontSize: "14px", flexGrow: 1 }}
+            />
+          </Box>
+
+          {/* Execution Result */}
+          <Box sx={{ p: 2, bgcolor: 'white', boxShadow: 2, borderRadius: 2, display: 'flex', flexDirection: 'column', height: '100%' }}>
+            <Typography variant='subtitle1' sx={{ fontWeight: 'bold', mb: 1 }}>
+              Result:
+            </Typography>
+            <Box
+              sx={{
+                flexGrow: 1,
+                width: '100%',
+                height: '200px',
+                p: 2,
+                border: '1px solid gray',
+                borderRadius: 1,
+                overflowY: 'auto',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                minHeight: '200px'
+              }}
+            >
+              {result || 'No output yet...'}
+            </Box>
+          </Box>
+        </Box>
+
+        {/* Action Buttons */}
+        <Box sx={{ mt: 4, display: 'flex', gap: 2 }}>
+          <Button onClick={executeCode} color='primary' variant='contained'>
+            Execute
+          </Button>
+          <Button onClick={resetCode} color='secondary' variant='contained'>
+            Reset
+          </Button>
+        </Box>
+      </Box>
+    </Dialog>
+  )
+}
+
+// PropTypes validation
+ScriptScreen.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired
+}
+
 // Image Export Dialog box
 const ImgTypes = ['PNG', 'JPG', 'SVG']
 export function ImageExportDialog (props) {
diff --git a/blocks/eda-frontend/src/redux/actions/saveSchematicActions.js b/blocks/eda-frontend/src/redux/actions/saveSchematicActions.js
index b5a46bbc..c3b3bab6 100644
--- a/blocks/eda-frontend/src/redux/actions/saveSchematicActions.js
+++ b/blocks/eda-frontend/src/redux/actions/saveSchematicActions.js
@@ -131,6 +131,7 @@ export const fetchSchematic = (saveId) => (dispatch, getState) => {
         dispatch(setSchTitle(res.data.name))
         dispatch(setSchDescription(res.data.description))
         dispatch(setSchXmlData(res.data.data_dump))
+        dispatch(setSchScriptDump(res.data.script_dump))
         renderGalleryXML(res.data.data_dump)
       }
     )
diff --git a/blocks/saveAPI/views.py b/blocks/saveAPI/views.py
index 5b315b33..6c94f7bc 100644
--- a/blocks/saveAPI/views.py
+++ b/blocks/saveAPI/views.py
@@ -177,6 +177,8 @@ class FetchSaveDiagram(APIView):
         # if data dump, shared, name, or description needs to be updated
         if 'data_dump' in data:
             state.data_dump = data['data_dump']
+        if 'script_dump' in data:
+            state.script_dump = data['script_dump']
         if 'shared' in data:
             state.shared = bool(data['shared'])
         if 'name' in data: