updating branch to enable discussion of changes

frontend/ePSIC/src/App.tsx

@@ -1,9 +1,11 @@
 import { WorkflowForm } from "./components/workflows/WorkflowForm";
 import { ResourceForm } from "../../shared_components/ResourceForm";
+import { TechniqueForm, Beam } from "../../shared_components/TechniqueForm";
 
 export const App: React.FC = () => {
   return (
     <>
+      <TechniqueForm Beamline={Beam.ePSIC} />
       <WorkflowForm />
       <ResourceForm />
     </>

frontend/unified/src/App.tsx

@@ -1,11 +1,16 @@
 import { Box, Divider, Grid, Stack, Typography } from "@mui/material";
 import { SessionSelector } from "./components/SessionSelector";
 import { ScanSelector } from "./components/ScanSelector";
+import { TechniqueForm, Beam } from "./components/TechniqueSelector";
+import { ParameterConfig, EpsicWorkflows } from "./components/ParameterConfig";
+import { LogTable } from "./components/DisplayLogs";
 
 const VERTICAL_SPACING = 2;
 const HORIZONTAL_SPACING = 2;
 
 export const App: React.FC = () => {
+  //adding common states of beamlines, Techique, workflow
+
   return (
     <>
       <Grid container spacing={HORIZONTAL_SPACING} columns={2}>
@@ -16,14 +21,12 @@ export const App: React.FC = () => {
           <Typography variant="h5">Scan</Typography>
           <ScanSelector />
           <Divider sx={{ width: "100%" }} />
-          <Typography variant="h5">App</Typography>
-          <PlaceholderComponent
-            placeholderText="App selector component placeholder"
-            height={100}
-            width={500}
-          />
+          <Typography variant="h5">Technique</Typography>
+          <TechniqueForm Beamline={Beam.ePSIC} />
+
           <Divider sx={{ width: "100%" }} />
           <Typography variant="h5">Parameter Configuration</Typography>
+          <ParameterConfig Workflows={EpsicWorkflows.Mib_Auto} />
           <PlaceholderComponent
             placeholderText="Parameter configuration component placeholder"
             height={200}
@@ -32,13 +35,15 @@ export const App: React.FC = () => {
         </Stack>
         <Stack spacing={VERTICAL_SPACING}>
           <Typography variant="h5">Plot</Typography>
+
           <PlaceholderComponent
             placeholderText="Plot component placeholder"
             height={200}
             width={500}
           />
           <Divider sx={{ width: "100%" }} />
           <Typography variant="h5">Log</Typography>
+          <LogTable />
           <PlaceholderComponent
             placeholderText="Log component placeholder"
             height={200}

frontend/unified/src/components/DisplayLogs.tsx

@@ -0,0 +1,75 @@
+import { FC, ChangeEvent, useState, MouseEvent, useReducer } from "react";
+import {
+  InputLabel,
+  Grid,
+  Stack,
+  TextField,
+  Button,
+  Box,
+  Switch,
+  ToggleButton,
+  ToggleButtonGroup,
+} from "@mui/material";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import { TaskContext, TaskDispatchContext } from "./ImagingHubContexts";
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Paper,
+} from "@mui/material";
+
+function createData(
+  ID: number,
+  ScanNumber: number,
+  status: string,
+  progress: number,
+  controls: any
+) {
+  return { ID, ScanNumber, status, progress, controls };
+}
+
+const rows = [
+  createData(0, 1054, "Completed", 100, null),
+  createData(1, 3178, "Error", 25, null),
+  createData(2, 5264, "Running", 30, null),
+  createData(3, 7377, "Scheduled", 0, null),
+];
+
+export function LogTable(): FC {
+  return (
+    <TableContainer component={Paper}>
+      <Table sx={{ minWidth: 650 }} aria-label="test-table">
+        <TableHead>
+          <TableRow>
+            <TableCell>ID</TableCell>
+            <TableCell align="right">Scan Number</TableCell>
+            <TableCell align="right">Status</TableCell>
+            <TableCell align="right">Progress</TableCell>
+            <TableCell align="right">Controls</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.map((row) => (
+            <TableRow
+              key={row.ID}
+              sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
+            >
+              <TableCell>{row.ID}</TableCell>
+              <TableCell align="right">{row.ScanNumber}</TableCell>
+              <TableCell align="right">{row.status}</TableCell>
+              <TableCell align="right">{row.progress}</TableCell>
+              <TableCell align="right">{row.controls}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}
+
+export default LogTable;

frontend/unified/src/components/ParameterConfig.tsx

@@ -0,0 +1,143 @@
+import { FC, ChangeEvent, useState } from "react";
+import {
+  InputLabel,
+  Grid,
+  Stack,
+  TextField,
+  Box,
+  Switch,
+  ToggleButton,
+  ToggleButtonGroup,
+  Select,
+  SelectChangeEvent,
+  MenuItem,
+  FormControl,
+} from "@mui/material";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import ResourceForm from "../../../shared_components/ResourceForm";
+
+export enum EpsicWorkflows {
+  Mib,
+  Mib_Auto,
+  Virtual,
+  Ptycho,
+}
+
+export enum XanesWorkflows {
+  Xanes,
+  Xanes_point,
+  Xanes_Sparse,
+}
+
+export enum Tomography {}
+
+export function EpsicParameterEdit(WFlow: number) {
+  switch (WFlow) {
+    case 0:
+      return (
+        <Stack direction="column" spacing={2} alignItems={"start"}>
+          <TextField id="Mib-Path" label="Mib path" />
+          <TextField id="Signal-Pixel-Binning" label="sig-pix-bin" />
+          <TextField
+            id="Navigation-Pixel-Binning"
+            label="Navigation pixel binning"
+          />
+        </Stack>
+      );
+    case 1:
+      return (
+        <Stack direction="column" spacing={2} alignItems={"start"}>
+          <TextField id="Sample-name" label="Sample name" />
+          <TextField id="Signal-Pixel-Binning" label="Signal pixel binning" />
+          <TextField
+            id="Navigation-Pixel-Binning"
+            label="Navigation pixel binning"
+          />
+        </Stack>
+      );
+    case 2:
+      return (
+        <Stack direction="column" spacing={2} alignItems={"start"}>
+          <TextField id="Sample-name" label="Sample name" />
+        </Stack>
+      );
+    case 3:
+      return (
+        <Stack direction="column" spacing={2} alignItems={"start"}>
+          <TextField id="Ptyrex-Config" label="Ptyrex-Config" />
+          <TextField id="Scan-Number" label="Scan-Number" />
+          <TextField id="Projection-Number" label="Projection-Number" />
+          <ResourceForm />
+        </Stack>
+      );
+  }
+}
+
+export function I14ParameterEdit(WFlow: number) {
+  const [XanesMethod, setXanesMethod] = useState(0);
+  const handelXanesMethod = (event: SelectChangeEvent) => {
+    setXanesMethod(event.target.value);
+    console.log(`XanesMethod is: ${XanesMethod}`);
+  };
+  switch (WFlow) {
+    case 0:
+      return (
+        <Stack direction="column" spacing={2} alignItems={"start"}>
+          <FormControl>
+            <InputLabel>Workflow</InputLabel>
+            <Select
+              value={currentWorkflow}
+              label="Workflow"
+              onChange={handleWorkflowChange}
+            >
+              <MenuItem value={0}>mutal</MenuItem>
+              <MenuItem value={1}>fourier</MenuItem>
+            </Select>
+          </FormControl>
+
+          <TextField id="Output Folder" label="Output-Folder" />
+        </Stack>
+      );
+    case 1:
+      return (
+        <Stack direction="column" spacing={2} alignItems={"start"}>
+          <TextField id="Output Folder" label="Output-Folder" />
+        </Stack>
+      );
+  }
+}
+
+export function ParameterConfig(props: { Workflows: EpsicWorkflows }): FC {
+  const [currentWorkflow, setcurrentWorkflow] = useState(props.Workflows);
+  console.log(`props.Workflows is: ${props.Workflows}`);
+
+  const handleWorkflowChange = (event: SelectChangeEvent) => {
+    setcurrentWorkflow(event.target.value);
+    console.log(`event.target.value is: ${event.target.value}`);
+    console.log(`currentWorkflow is: ${currentWorkflow}`);
+  };
+
+  return (
+    <>
+      <FormControl>
+        <InputLabel>Workflow</InputLabel>
+        <Select
+          value={currentWorkflow}
+          label="Workflow"
+          onChange={handleWorkflowChange}
+        >
+          <MenuItem value={0}>Mib</MenuItem>
+          <MenuItem value={1}>Mib Auto</MenuItem>
+          <MenuItem value={2}>Virtual</MenuItem>
+          <MenuItem value={3}>Ptycho</MenuItem>
+        </Select>
+      </FormControl>
+      {EpsicParameterEdit(currentWorkflow)}
+    </>
+  );
+}
+
+//console.log(`switch off ${props.Beamline}`)
+//.log(`switch on/ current ${currentValue}`)
+
+export default ParameterConfig;

frontend/unified/src/components/SessionSelector.tsx

@@ -42,11 +42,11 @@ export const SessionSelector: React.FC = () => {
   const [sessionSelectionMode, setSessionSelectionMode] =
     useState<SessionSelectionMode>(SessionSelectionMode.Latest);
   const [textInputValue, setTextInputValue] = useState<string>("");
-  const sessions = useLazyLoadQuery<SessionSelectorTestQueryType>(
-    testInstrumentSessionQuery,
-    {}
-  );
-  console.log("sessions: ", sessions);
+  //const sessions = useLazyLoadQuery<SessionSelectorTestQueryType>(
+  //  testInstrumentSessionQuery,
+  //  {}
+  //);
+  //console.log("sessions: ", sessions);
 
   return (
     <Stack direction="row" spacing={2} alignItems={"center"}>