Add config settings file

fiaisis · Sep 25, 2024 · 48b7d99 · 48b7d99
1 parent 50d979d
commit 48b7d99
Show file tree

Hide file tree

Showing 4 changed files with 217 additions and 4 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -9,6 +9,7 @@ import JobsAll from './Jobs/JobsAll';
 import JobsGeneral from './Jobs/JobsGeneral';
 import HomePage from './HomePage';
 import ValueEditor from './ValueEditor';
+import ConfigSettings from './ConfigSettings';
 import GlobalStyles from './GlobalStyles';
 
 // Initialize Google Analytics
@@ -56,6 +57,9 @@ const App: FC = () => {
           <Route path="/value-editor/:jobId">
             <ValueEditor />
           </Route>
+          <Route path="/:instrumentName/config-settings">
+            <ConfigSettings />
+          </Route>
         </Switch>
       </Router>
     </GlobalStyles>

diff --git a/src/ConfigSettings.tsx b/src/ConfigSettings.tsx
@@ -0,0 +1,198 @@
+// React components
+import React, { useState } from 'react';
+import { useParams } from 'react-router-dom';
+
+// Material UI components
+import { Box, Button, Typography, Tabs, Tab, useTheme, Grid, Tooltip, IconButton } from '@mui/material';
+import { Info, UploadFile, Edit } from '@mui/icons-material';
+
+// Monaco components
+import MonacoEditor from '@monaco-editor/react';
+
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}
+
+const TabPanel: React.FC<TabPanelProps> = ({ children, value, index, ...other }): JSX.Element => {
+  return (
+    <div role="tabpanel" hidden={value !== index} id={`tabpanel-${index}`} aria-labelledby={`tab-${index}`} {...other}>
+      {value === index && <Box sx={{ p: 3, height: 'calc(85vh - 48px - 48px - 24px)' }}>{children}</Box>}
+    </div>
+  );
+};
+
+const a11yProps = (index: number): { id: string; 'aria-controls': string } => ({
+  id: `tab-${index}`,
+  'aria-controls': `tabpanel-${index}`,
+});
+
+const ConfigSettings: React.FC = () => {
+  const theme = useTheme();
+  const { instrumentName } = useParams<{ instrumentName: string }>();
+  const [reductionStatus, setReductionStatus] = useState<'ON' | 'OFF'>('ON');
+  const [jsonContent, setJsonContent] = useState(`{
+      "instrumentName": "MARI",
+      "settings": {
+        "algorithm": "levmar",
+        "fit": "gaussian",
+        "color_map": "veridis"
+      }
+    }`);
+  const [tabValue, setTabValue] = useState(0);
+
+  const toggleReductionStatus = (): void => {
+    setReductionStatus(reductionStatus === 'ON' ? 'OFF' : 'ON');
+  };
+
+  const handleTabChange = (event: React.SyntheticEvent, newValue: number): void => {
+    setTabValue(newValue);
+  };
+
+  return (
+    <Box sx={{ width: '100%', height: '85vh', overflow: 'hidden', color: theme.palette.text.primary }}>
+      <Box sx={{ m: 2, backgroundColor: theme.palette.background.default }}>
+        {/* Title */}
+        <Typography variant="h4" gutterBottom>
+          {instrumentName} config settings
+        </Typography>
+
+        {/* Reduction status */}
+        <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', mb: 2 }}>
+          <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
+            <Typography variant="body1" sx={{ lineHeight: '1.5', mr: 1 }}>
+              Toggle reduction status:
+            </Typography>
+            <Button
+              variant="contained"
+              onClick={toggleReductionStatus}
+              sx={{
+                backgroundColor: reductionStatus === 'ON' ? 'green' : theme.palette.error.main,
+                color: 'white',
+                '&:hover': {
+                  backgroundColor: reductionStatus === 'ON' ? 'darkgreen' : theme.palette.error.dark,
+                },
+              }}
+            >
+              {reductionStatus}
+            </Button>
+
+            {/* Tooltip */}
+            <Tooltip title="Click to toggle the reduction process on or off">
+              <IconButton sx={{ ml: 1 }}>
+                <Info sx={{ color: theme.palette.text.secondary }} />
+              </IconButton>
+            </Tooltip>
+          </Box>
+
+          {/* Upload file button */}
+          <Box sx={{ mb: 2 }}>
+            <Button variant="contained" startIcon={<UploadFile />}>
+              Upload file...
+            </Button>
+          </Box>
+
+          {/* Change script button */}
+          <Box>
+            <Button variant="contained" startIcon={<Edit />}>
+              Change script...
+            </Button>
+          </Box>
+        </Box>
+      </Box>
+
+      {/* Specification editor subheading */}
+      <Typography variant="h6" gutterBottom sx={{ ml: 2, mt: 4 }}>
+        Specification editor
+      </Typography>
+
+      {/* Divider line */}
+      <Box
+        sx={{
+          borderTop: 3,
+          borderColor: 'divider',
+        }}
+      />
+
+      {/* Tabs */}
+      <Box>
+        <Tabs
+          value={tabValue}
+          onChange={handleTabChange}
+          aria-label="Config Settings Tabs"
+          sx={{
+            '& .MuiTab-root': {
+              color: theme.palette.mode === 'dark' ? theme.palette.common.white : undefined,
+
+              '&.Mui-selected': {
+                color: theme.palette.mode === 'dark' ? theme.palette.common.white : undefined,
+                backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[800] : undefined,
+              },
+            },
+          }}
+        >
+          <Tab label="Simple" {...a11yProps(0)} />
+          <Tab label="Advanced" {...a11yProps(1)} />
+        </Tabs>
+      </Box>
+
+      {/* Simple panel */}
+      <TabPanel value={tabValue} index={0}>
+        <Grid container direction="column" spacing={1}>
+          {/* Algorithm */}
+          <Grid item>
+            <Box sx={{ display: 'flex', alignItems: 'center' }}>
+              <Typography variant="body1" sx={{ width: '150px', mb: 0 }}>
+                Algorithm:
+              </Typography>
+              <input type="text" value="levmar" style={{ margin: 0, width: '140px' }} />
+            </Box>
+          </Grid>
+
+          {/* Fit */}
+          <Grid item>
+            <Box sx={{ display: 'flex', alignItems: 'center' }}>
+              <Typography variant="body1" sx={{ width: '150px', mb: 0 }}>
+                Fit:
+              </Typography>
+              <input type="text" value="gaussian" style={{ margin: 0, width: '140px' }} />
+            </Box>
+          </Grid>
+
+          {/* Color_map */}
+          <Grid item>
+            <Box sx={{ display: 'flex', alignItems: 'center' }}>
+              <Typography variant="body1" sx={{ width: '150px', mb: 0 }}>
+                Color_map:
+              </Typography>
+              <input type="text" value="viridis" style={{ margin: 0, width: '140px' }} />
+            </Box>
+          </Grid>
+
+          {/* Apply settings button */}
+          <Grid item xs={12}>
+            <Button variant="contained" sx={{ mt: 3 }}>
+              Apply settings
+            </Button>
+          </Grid>
+        </Grid>
+      </TabPanel>
+
+      {/* Advanced panel */}
+      <TabPanel value={tabValue} index={1}>
+        <Box sx={{ height: 'calc(85vh - 48px - 48px - 24px)' }}>
+          <MonacoEditor
+            height="100%"
+            defaultLanguage="json"
+            value={jsonContent}
+            theme={theme.palette.mode === 'dark' ? 'vs-dark' : 'vs-light'}
+            onChange={(value) => setJsonContent(value || '')}
+          />
+        </Box>
+      </TabPanel>
+    </Box>
+  );
+};
+
+export default ConfigSettings;
diff --git a/src/Jobs/JobsAll.tsx b/src/Jobs/JobsAll.tsx
@@ -71,6 +71,7 @@ const JobsAll: React.FC = () => {
         </TableCell>
       )}
       maxHeight={650}
+      showConfigButton={false}
     />
   );
 };

diff --git a/src/Jobs/JobsBase.tsx b/src/Jobs/JobsBase.tsx
@@ -40,6 +40,7 @@ import {
   VpnKey,
   StackedBarChart,
   Schema,
+  Settings,
   ImageAspectRatio,
 } from '@mui/icons-material';
 import { CSSObject } from '@mui/system';
@@ -140,6 +141,7 @@ interface JobsBaseProps {
   fetchJobs: () => Promise<void>;
   fetchTotalCount: () => Promise<void>;
   maxHeight?: number;
+  showConfigButton?: boolean;
 }
 
 const JobsBase: React.FC<JobsBaseProps> = ({
@@ -160,6 +162,7 @@ const JobsBase: React.FC<JobsBaseProps> = ({
   fetchJobs,
   fetchTotalCount,
   maxHeight = 624,
+  showConfigButton = true,
 }) => {
   const theme = useTheme();
   const allInstruments = [{ name: 'ALL' }, ...instruments]; // Add 'ALL' option to the instruments list
@@ -200,7 +203,7 @@ const JobsBase: React.FC<JobsBaseProps> = ({
 
   const openConfigSettings = (): void => {
     const url = `/fia/${selectedInstrument}/config-settings`;
-    const features = 'width=400,height=300,left=200,top=200,resizable=no';
+    const features = 'width=900,height=800,resizable=no';
     window.open(url, 'ConfigSettingsWindow', features);
   };
 
@@ -555,9 +558,16 @@ const JobsBase: React.FC<JobsBaseProps> = ({
           {selectedInstrument} reductions
         </Typography>
         <Box display="flex" alignItems="center">
-          <Button variant="contained" onClick={openConfigSettings} style={{ marginRight: '20px' }}>
-            Open config settings...
-          </Button>
+          {showConfigButton && (
+            <Button
+              variant="contained"
+              startIcon={<Settings />}
+              onClick={openConfigSettings}
+              style={{ marginRight: '20px' }}
+            >
+              Open config settings...
+            </Button>
+          )}
           {handleInstrumentChange && (
             <FormControl style={{ width: '200px', marginLeft: '20px' }}>
               <InputLabel id="instrument-select-label">Instrument</InputLabel>