diff --git a/frontend/ePSIC/src/App.tsx b/frontend/ePSIC/src/App.tsx index a04e7f2..ccd4301 100644 --- a/frontend/ePSIC/src/App.tsx +++ b/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 ( <> + diff --git a/frontend/unified/src/App.tsx b/frontend/unified/src/App.tsx index 7f83e1a..8e436b6 100644 --- a/frontend/unified/src/App.tsx +++ b/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 ( <> @@ -16,14 +21,12 @@ export const App: React.FC = () => { Scan - App - + Technique + + Parameter Configuration + { Plot + { /> Log + + + + + ID + Scan Number + Status + Progress + Controls + + + + {rows.map((row) => ( + + {row.ID} + {row.ScanNumber} + {row.status} + {row.progress} + {row.controls} + + ))} + +
+ + ); +} + +export default LogTable; diff --git a/frontend/unified/src/components/ParameterConfig.tsx b/frontend/unified/src/components/ParameterConfig.tsx new file mode 100644 index 0000000..555337e --- /dev/null +++ b/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 ( + + + + + + ); + case 1: + return ( + + + + + + ); + case 2: + return ( + + + + ); + case 3: + return ( + + + + + + + ); + } +} + +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 ( + + + Workflow + + + + + + ); + case 1: + return ( + + + + ); + } +} + +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 ( + <> + + Workflow + + + {EpsicParameterEdit(currentWorkflow)} + + ); +} + +//console.log(`switch off ${props.Beamline}`) +//.log(`switch on/ current ${currentValue}`) + +export default ParameterConfig; diff --git a/frontend/unified/src/components/SessionSelector.tsx b/frontend/unified/src/components/SessionSelector.tsx index 4f6b4b0..9ec8c47 100644 --- a/frontend/unified/src/components/SessionSelector.tsx +++ b/frontend/unified/src/components/SessionSelector.tsx @@ -42,11 +42,11 @@ export const SessionSelector: React.FC = () => { const [sessionSelectionMode, setSessionSelectionMode] = useState(SessionSelectionMode.Latest); const [textInputValue, setTextInputValue] = useState(""); - const sessions = useLazyLoadQuery( - testInstrumentSessionQuery, - {} - ); - console.log("sessions: ", sessions); + //const sessions = useLazyLoadQuery( + // testInstrumentSessionQuery, + // {} + //); + //console.log("sessions: ", sessions); return ( diff --git a/frontend/unified/src/components/TechniqueSelector.tsx b/frontend/unified/src/components/TechniqueSelector.tsx new file mode 100644 index 0000000..4808994 --- /dev/null +++ b/frontend/unified/src/components/TechniqueSelector.tsx @@ -0,0 +1,105 @@ +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"; + +export function Techniquedisplay( + Beamline: Beam, + techniquestate: string | null, + onChange: any +) { + switch (Beamline) { + case Beam.I12: + return ( + + Tomography + + ); + case Beam.I14: + return ( + + XANES + + ); + case Beam.ePSIC: + return ( + + Ptychography + + ); + case Beam.all: + return ( + + Tomography + Ptychography + XANES + + ); + } +} + +export enum Beam { + I12, + I14, + ePSIC, + all, +} + +export function TechniqueForm(props: { Beamline: Beam }): FC { + const [activestate, setactivestate] = useState(false); + const [currentValue, setcurrentValue] = useState(props.Beamline); + + const [techniquestate, setTechniquestate] = useState( + "Ptychography" + ); + + const handelToggle = ( + event: MouseEvent, + newtechnique: string | null + ) => { + setTechniquestate(newtechnique); + console.log(newtechnique); + }; + + const handleChange = (event: React.ChangeEvent) => { + setactivestate(event.target.checked); + if (event.target.checked) { + setcurrentValue(Beam.all); + //console.log(`switch on ${props.Beamline}`) + //console.log(`switch on/ current ${currentValue}`) + } else { + setcurrentValue(props.Beamline); + //console.log(`switch off ${props.Beamline}`) + //.log(`switch on/ current ${currentValue}`) + } + }; + return ( + <> + + } + label="Show all" + /> + + + {Techniquedisplay(currentValue, techniquestate, handelToggle)} + + ); +} + +export default TechniqueForm; diff --git a/frontend/unified/src/components/TechniqueSelector_backup.tsx b/frontend/unified/src/components/TechniqueSelector_backup.tsx new file mode 100644 index 0000000..6a3adb8 --- /dev/null +++ b/frontend/unified/src/components/TechniqueSelector_backup.tsx @@ -0,0 +1,99 @@ +import { FC, ChangeEvent, useState, MouseEvent } from "react"; +import { + InputLabel, + Grid, + Stack, + TextField, + Button, + Box, + Switch, + ToggleButton, + ToggleButtonGroup, +} from "@mui/material"; +import FormControlLabel from "@mui/material/FormControlLabel"; + +export function Techniquedisplay( + Beamline: Beam, + techniquestate: string | null, + onChange: any +) { + switch (Beamline) { + case Beam.I12: + return ( + + Tomography + + ); + case Beam.I14: + return ( + + XANES + + ); + case Beam.ePSIC: + return ( + + Ptychography + + ); + case Beam.all: + return ( + + Tomography + Ptychography + XANES + + ); + } +} + +export enum Beam { + I12, + I14, + ePSIC, + all, +} + +export function TechniqueForm(props: { Beamline: Beam }): FC { + const [activestate, setactivestate] = useState(false); + const [currentValue, setcurrentValue] = useState(props.Beamline); + + const [techniquestate, setTechniquestate] = useState( + "Ptychography" + ); + + const handelToggle = ( + event: MouseEvent, + newtechnique: string | null + ) => { + setTechniquestate(newtechnique); + console.log(techniquestate); + }; + + const handleChange = (event: React.ChangeEvent) => { + setactivestate(event.target.checked); + if (event.target.checked) { + setcurrentValue(Beam.all); + //console.log(`switch on ${props.Beamline}`) + //console.log(`switch on/ current ${currentValue}`) + } else { + setcurrentValue(props.Beamline); + //console.log(`switch off ${props.Beamline}`) + //.log(`switch on/ current ${currentValue}`) + } + }; + return ( + <> + + } + label="Show all" + /> + + + {Techniquedisplay(currentValue, techniquestate, handelToggle)} + + ); +} + +export default TechniqueForm; diff --git a/frontend/unified/src/components/__generated__/SessionSelectorTestQuery.graphql.ts b/frontend/unified/src/components/__generated__/SessionSelectorTestQuery.graphql.ts new file mode 100644 index 0000000..d51280d --- /dev/null +++ b/frontend/unified/src/components/__generated__/SessionSelectorTestQuery.graphql.ts @@ -0,0 +1,162 @@ +/** + * @generated SignedSource<> + * @lightSyntaxTransform + * @nogrep + */ + +/* tslint:disable */ +/* eslint-disable */ +// @ts-nocheck + +import { ConcreteRequest } from "relay-runtime"; +export type SessionSelectorTestQuery$variables = Record; +export type SessionSelectorTestQuery$data = { + readonly account: + | { + readonly proposalRoles: ReadonlyArray<{ + readonly proposal: { + readonly instrumentSessions: ReadonlyArray<{ + readonly endTime: any | null | undefined; + readonly instrumentSessionNumber: number; + readonly startTime: any | null | undefined; + }>; + readonly proposalCategory: string | null | undefined; + readonly proposalNumber: number; + readonly title: string | null | undefined; + }; + }>; + } + | null + | undefined; +}; +export type SessionSelectorTestQuery = { + response: SessionSelectorTestQuery$data; + variables: SessionSelectorTestQuery$variables; +}; + +const node: ConcreteRequest = (function () { + var v0 = [ + { + alias: null, + args: [ + { + kind: "Literal", + name: "username", + value: "twi18192", + }, + ], + concreteType: "Account", + kind: "LinkedField", + name: "account", + plural: false, + selections: [ + { + alias: null, + args: null, + concreteType: "ProposalAccount", + kind: "LinkedField", + name: "proposalRoles", + plural: true, + selections: [ + { + alias: null, + args: null, + concreteType: "Proposal", + kind: "LinkedField", + name: "proposal", + plural: false, + selections: [ + { + alias: null, + args: null, + kind: "ScalarField", + name: "proposalNumber", + storageKey: null, + }, + { + alias: null, + args: null, + kind: "ScalarField", + name: "proposalCategory", + storageKey: null, + }, + { + alias: null, + args: null, + kind: "ScalarField", + name: "title", + storageKey: null, + }, + { + alias: null, + args: null, + concreteType: "InstrumentSession", + kind: "LinkedField", + name: "instrumentSessions", + plural: true, + selections: [ + { + alias: null, + args: null, + kind: "ScalarField", + name: "startTime", + storageKey: null, + }, + { + alias: null, + args: null, + kind: "ScalarField", + name: "endTime", + storageKey: null, + }, + { + alias: null, + args: null, + kind: "ScalarField", + name: "instrumentSessionNumber", + storageKey: null, + }, + ], + storageKey: null, + }, + ], + storageKey: null, + }, + ], + storageKey: null, + }, + ], + storageKey: 'account(username:"twi18192")', + }, + ]; + return { + fragment: { + argumentDefinitions: [], + kind: "Fragment", + metadata: null, + name: "SessionSelectorTestQuery", + selections: v0 /*: any*/, + type: "Query", + abstractKey: null, + }, + kind: "Request", + operation: { + argumentDefinitions: [], + kind: "Operation", + name: "SessionSelectorTestQuery", + selections: v0 /*: any*/, + }, + params: { + cacheID: "dc67597d0bf4e205bb8dd4ae5cdb3297", + id: null, + metadata: {}, + name: "SessionSelectorTestQuery", + operationKind: "query", + text: 'query SessionSelectorTestQuery {\n account(username: "twi18192") {\n proposalRoles {\n proposal {\n proposalNumber\n proposalCategory\n title\n instrumentSessions {\n startTime\n endTime\n instrumentSessionNumber\n }\n }\n }\n }\n}\n', + }, + }; +})(); + +(node as any).hash = "d56b6fdb9e6485ab1ca94b9bffa06778"; + +export default node;