Skip to content

Commit 5e9a502

Browse files
m-kesselm-kessel
committed
updated web
1 parent 1c2034f commit 5e9a502

80 files changed

Lines changed: 832 additions & 302 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎lasso/src/pages/hub.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import Tab from '@mui/material/Tab';
1212
import Grid from '@mui/material/Grid2';
1313
import SrmViewer from '../components/SrmViewer';
1414
import GraphComponent from '../components/Graph/graph';
15+
import { useHistory } from '@docusaurus/router';
1516

1617
interface TabPanelProps {
1718
children?: React.ReactNode;
@@ -43,6 +44,8 @@ function a11yProps(index: number) {
4344
}
4445

4546
const HubPage = () => {
47+
const history = useHistory()
48+
4649
const [value, setValue] = React.useState(0);
4750

4851
const handleChange = (event: React.SyntheticEvent, newValue: number) => {
@@ -82,6 +85,11 @@ const HubPage = () => {
8285
window.scrollTo({ top: 0, left: 0 })
8386
};
8487

88+
const handleTryClick = () => {
89+
// redirect to result page
90+
history.push(`./lasso/submit?exampleId=${currentExampleId}`)
91+
};
92+
8593
const editorRef = useRef<any>(null);
8694
const monacoRef = useRef<any>(null);
8795

@@ -143,7 +151,7 @@ const HubPage = () => {
143151
<Typography sx={{ margin: 2 }} variant="h5" component="div">LSL Pipeline Viewer<Typography variant="h6" component="div">Explore the study and actions</Typography></Typography>
144152
<Typography sx={{ color: 'text.secondary', mb: 1.5 }}>{HubExamples.MAP[currentExampleId].description}</Typography>
145153
<Typography variant="h5" component="div">
146-
<Button sx={{ float: "right" }} disabled>Try (coming soon)</Button>
154+
<Button sx={{ float: "right" }} onClick={(event) => handleTryClick()}>Try Now!</Button>
147155
<Editor
148156
height="500px"
149157
defaultLanguage="java"

‎lasso/src/pages/lasso/result.tsx‎

Lines changed: 176 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
import { Box, Button, CardActions, CardContent, CircularProgress, Link, Tab, Tabs, Typography } from '@mui/material';
2+
import Grid from '@mui/material/Grid2';
3+
import React, { useEffect, useRef, useState } from 'react';
4+
5+
import Layout from '@theme/Layout';
6+
import Head from '@docusaurus/Head';
7+
8+
9+
import { useHistory, useLocation } from '@docusaurus/router';
10+
import LassoService from '@site/src/services/LassoService';
11+
import { ScriptInfo } from '@site/src/services/models';
12+
import SrmViewer from '@site/src/components/SrmViewer';
13+
14+
import CodeBlock from '@theme/CodeBlock';
15+
import BrowserOnly from '@docusaurus/BrowserOnly';
16+
17+
interface TabPanelProps {
18+
children?: React.ReactNode;
19+
index: number;
20+
value: number;
21+
}
22+
23+
function CustomTabPanel(props: TabPanelProps) {
24+
const { children, value, index, ...other } = props;
25+
26+
return (
27+
<div
28+
role="tabpanel"
29+
hidden={value !== index}
30+
id={`simple-tabpanel-${index}`}
31+
aria-labelledby={`simple-tab-${index}`}
32+
{...other}
33+
>
34+
{value === index && <Box sx={{ p: 3 }}>{children}</Box>}
35+
</div>
36+
);
37+
}
38+
39+
function a11yProps(index: number) {
40+
return {
41+
id: `simple-tab-${index}`,
42+
'aria-controls': `simple-tabpanel-${index}`,
43+
};
44+
}
45+
46+
const ResultPage = () => {
47+
const location = useLocation();
48+
49+
const [executionId, setExecutionId] = useState(location.search.split('=')[1])
50+
const [scriptInfo, setScriptInfo] = useState<ScriptInfo>()
51+
const intervalRef = useRef(null);
52+
53+
const [value, setValue] = React.useState(0);
54+
55+
const handleChange = (event: React.SyntheticEvent, newValue: number) => {
56+
setValue(newValue);
57+
};
58+
59+
console.log("loading " + executionId)
60+
61+
const checkScriptJobStatus = () => {
62+
return LassoService.getScriptJobStatus(executionId)
63+
.then(
64+
(response) => {
65+
let scriptInfo: ScriptInfo = response.data
66+
console.log("checkScriptJobStatus successful " + scriptInfo.executionId)
67+
68+
//
69+
setScriptInfo(scriptInfo)
70+
71+
return scriptInfo;
72+
},
73+
(error) => {
74+
const resMessage =
75+
(error.response &&
76+
error.response.data &&
77+
error.response.data.message) ||
78+
error.message ||
79+
error.toString();
80+
81+
// FIXME
82+
console.log("checkScriptJobStatus attempt failed " + error)
83+
84+
return null;
85+
}
86+
)
87+
};
88+
89+
useEffect(() => {
90+
intervalRef.current = setInterval(() => {
91+
checkScriptJobStatus();
92+
console.log(JSON.stringify(scriptInfo));
93+
94+
}, 1000);
95+
96+
/**
97+
* UNKNOWN,
98+
PENDING,
99+
FAILED,
100+
SUCCESSFUL,
101+
DRAFT
102+
*/
103+
104+
if (scriptInfo && scriptInfo.status === "PENDING") {
105+
console.log("we don't have a result");
106+
107+
} else if (scriptInfo) {
108+
console.log("we have a result");
109+
110+
clearInterval(intervalRef.current)
111+
} else {
112+
113+
}
114+
115+
return () => clearInterval(intervalRef.current)
116+
})
117+
118+
return (
119+
<Layout>
120+
<Head>
121+
<title>Execution Result</title>
122+
<meta name="description" content="Material" />
123+
</Head>
124+
125+
<Typography sx={{ mt: 4, mb: 2 }} variant="h6" component="div">
126+
Result for LSL Script Execution ({executionId})
127+
</Typography>
128+
129+
{scriptInfo ?
130+
131+
<Grid container spacing={2}>
132+
133+
<Grid size={12}>
134+
135+
<Box sx={{ width: '100%' }}>
136+
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
137+
<Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
138+
<Tab label="Script Overview" {...a11yProps(0)} />
139+
{scriptInfo.status === "SUCCESSFUL" ?
140+
<Tab label="SRM Explorer" {...a11yProps(1)} /> : null}
141+
</Tabs>
142+
</Box>
143+
<CustomTabPanel value={value} index={0}>
144+
<Typography variant="h5" component="div">
145+
<p>The execution status of your LSL is <code>{scriptInfo.status}</code> (started {scriptInfo.start})</p>
146+
{scriptInfo.status === "PENDING" ?
147+
<CircularProgress size="3rem" /> : null}
148+
</Typography>
149+
{scriptInfo.status === "SUCCESSFUL" ?
150+
<p>You can now explore the SRMs in the 'SRM Explorer' tab above.</p> : null}
151+
{/* <Typography variant="h5" component="div">
152+
<CodeBlock
153+
language="groovy">{scriptInfo.content}</CodeBlock>
154+
</Typography> */}
155+
</CustomTabPanel>
156+
{scriptInfo.status === "SUCCESSFUL" ?
157+
<CustomTabPanel value={value} index={1}>
158+
<SrmViewer fileName={LassoService.retrieveParquetUrl(scriptInfo.executionId)} />
159+
</CustomTabPanel> : null}
160+
</Box>
161+
162+
</Grid>
163+
</Grid> : <CircularProgress size="3rem" />}
164+
165+
<div className='text--center'>
166+
<BrowserOnly>
167+
{() => <p>Permanent Link (Copy) <Link target="_blank" href=""><code>{window.location + ""}</code></Link></p>}
168+
</BrowserOnly>
169+
170+
</div>
171+
172+
</Layout>
173+
);
174+
}
175+
176+
export default ResultPage;

‎lasso/src/pages/lasso/submit.tsx‎

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
import React, { useRef, useState } from 'react';
2+
3+
import Layout from '@theme/Layout';
4+
import Head from '@docusaurus/Head';
5+
import { Button, Card, CardActions, CardContent, Divider, Tabs, Typography } from '@mui/material';
6+
import { HubExamples } from '../../components/HubFeatures/HubFeatures';
7+
import { Editor } from '@monaco-editor/react';
8+
9+
import Box from '@mui/material/Box';
10+
import Tab from '@mui/material/Tab';
11+
12+
import Grid from '@mui/material/Grid2';
13+
import SrmViewer from '../../components/SrmViewer';
14+
import GraphComponent from '../../components/Graph/graph';
15+
import { LslRequest, LslResponse } from '@site/src/services/models';
16+
import LassoService from '@site/src/services/LassoService';
17+
import AuthService from '@site/src/services/AuthService';
18+
import { useHistory, useLocation } from '@docusaurus/router';
19+
20+
interface TabPanelProps {
21+
children?: React.ReactNode;
22+
index: number;
23+
value: number;
24+
}
25+
26+
function CustomTabPanel(props: TabPanelProps) {
27+
const { children, value, index, ...other } = props;
28+
29+
return (
30+
<div
31+
role="tabpanel"
32+
hidden={value !== index}
33+
id={`simple-tabpanel-${index}`}
34+
aria-labelledby={`simple-tab-${index}`}
35+
{...other}
36+
>
37+
{value === index && <Box sx={{ p: 3 }}>{children}</Box>}
38+
</div>
39+
);
40+
}
41+
42+
function a11yProps(index: number) {
43+
return {
44+
id: `simple-tab-${index}`,
45+
'aria-controls': `simple-tabpanel-${index}`,
46+
};
47+
}
48+
49+
const SubmitPage = () => {
50+
const [value, setValue] = React.useState(0);
51+
52+
const handleChange = (event: React.SyntheticEvent, newValue: number) => {
53+
setValue(newValue);
54+
};
55+
56+
const location = useLocation()
57+
const history = useHistory()
58+
59+
const [currentExampleId, setCurrentExampleId] = useState(location.search.split('=')[1])
60+
61+
const [lsl, setLsl] = useState("")
62+
63+
const handleSubmit = () => {
64+
let lslRequest = new LslRequest()
65+
66+
// get current value
67+
lslRequest.script = editorRef.current.getModel().getValue()
68+
const user = JSON.parse(localStorage.getItem('user') || '{}');
69+
lslRequest.email = user.email;
70+
lslRequest.type = null //draft ? "DRAFT" : null;
71+
console.log(lslRequest);
72+
73+
const responses = execute(lslRequest)
74+
};
75+
76+
const execute = async (lslRequest: LslRequest) => {
77+
return await Promise.all([AuthService.login("lasso", "lasso").then(
78+
(response) => {
79+
// login successful
80+
console.log("Successfully logged in")
81+
},
82+
(error) => {
83+
const resMessage =
84+
(error.response &&
85+
error.response.data &&
86+
error.response.data.message) ||
87+
error.message ||
88+
error.toString();
89+
90+
// FIXME
91+
console.log("Login attempt failed " + error)
92+
}
93+
), LassoService.execute(lslRequest).then(
94+
(response) => {
95+
let lslResponse: LslResponse = response.data
96+
console.log("Successfully executed. Execution ID is " + lslResponse.executionId)
97+
98+
// redirect to result page
99+
history.push(`./result?executionId=${lslResponse.executionId}`)
100+
},
101+
(error) => {
102+
const resMessage =
103+
(error.response &&
104+
error.response.data &&
105+
error.response.data.message) ||
106+
error.message ||
107+
error.toString();
108+
109+
// FIXME
110+
console.log("Execute attempt failed " + error)
111+
}
112+
)])
113+
};
114+
115+
const editorRef = useRef<any>(null);
116+
const monacoRef = useRef<any>(null);
117+
118+
function handleEditorDidMount(editor: any, monaco: any) {
119+
monaco.languages.register({ id: 'java' });
120+
121+
monacoRef.current = monaco;
122+
editorRef.current = editor;
123+
124+
if (editorRef.current && editorRef.current.getModel() && currentExampleId) {
125+
editorRef.current.getModel().setValue(HubExamples.MAP[currentExampleId].lsl);
126+
} else {
127+
editorRef.current.getModel().setValue("");
128+
}
129+
}
130+
131+
return (
132+
<Layout>
133+
<Head>
134+
<title>LSL Pipeline Editor</title>
135+
<meta name="description" content="A hub for TDSEs" />
136+
</Head>
137+
138+
<Typography sx={{ margin: 2 }} variant="h5" component="div">Editor<Typography variant="h6" component="div">Write and Submit a LSL Script to the Public LASSO Demo Platform</Typography></Typography>
139+
140+
<Grid container spacing={2}>
141+
<Grid size={12}>
142+
<Box sx={{ width: '100%' }}>
143+
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
144+
<Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
145+
<Tab label="LSL Pipeline" {...a11yProps(0)} />
146+
{/* <Tab label="Graph Viewer" {...a11yProps(1)} /> */}
147+
</Tabs>
148+
</Box>
149+
<CustomTabPanel value={value} index={0}>
150+
<><CardContent>
151+
<Typography sx={{ margin: 2 }} variant="h5" component="div">LSL Pipeline Editor</Typography>
152+
<Typography variant="h5" component="div">
153+
<Editor
154+
height="500px"
155+
defaultLanguage="java"
156+
defaultValue={lsl}
157+
onMount={handleEditorDidMount} />
158+
</Typography>
159+
<Button sx={{ float: "left" }} onClick={(event) => handleSubmit()}>Submit</Button>
160+
161+
</CardContent><CardActions>
162+
</CardActions></>
163+
</CustomTabPanel>
164+
{/* <CustomTabPanel value={value} index={1}>
165+
<Typography variant="h5" component="div">
166+
<GraphComponent exampleId={currentExampleId} />
167+
</Typography>
168+
</CustomTabPanel> */}
169+
</Box>
170+
171+
172+
</Grid>
173+
</Grid>
174+
175+
</Layout>
176+
);
177+
}
178+
179+
export default SubmitPage;

0 commit comments

Comments
 (0)