Skip to content

Commit

Permalink
Tool Run Output Overhaul - Keep last output
Browse files Browse the repository at this point in the history 
Related to INSM-TUM/SimuBridge#25
  • Loading branch information
@LeonBein
LeonBein committed Sep 9, 2023
1 parent 3ff2489 commit c5a383e
Show file tree
Hide file tree
Showing 3 changed files with 82 additions and 60 deletions.
78 changes: 36 additions & 42 deletions frontend/src/components/Processminer/ProcessMinerPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import simodConfiguration from './simod_config.yml'
import { getFile, getFiles, setFile, uploadFileToProject } from "../../util/Storage";
import { convertSimodOutput } from "simulation-bridge-converter-simod/simod_converter";
import RunProgressIndicationBar from "../RunProgressIndicationBar";
import ToolRunOutputCard from "../ToolRunOutputCard";


function getNumberOfInstances(eventLog) {
Expand All @@ -20,7 +21,7 @@ const ProcessMinerPage = ({projectName, getData, toasting }) => {
const [started, setStarted] = useState(false);
const [finished, setFinished] = useState(false);
const [errored, setErrored] = useState(false);
const [response, setResponse] = useState({});
const [response, setResponse] = useState(JSON.parse(sessionStorage.getItem(projectName+'/lastMinerResponse')) || {});
const [logFile, setLogFile] = useState();
const [miner, setMiner] = useState();

Expand Down Expand Up @@ -171,14 +172,17 @@ const ProcessMinerPage = ({projectName, getData, toasting }) => {

relevant_files.forEach(file => {

setFile(projectName, 'simod_results/' + file.name, file.data);
setFile(projectName, 'simod_results/' + file.name, file.data); // TODO extract magic string 'simod_results'
})

// Setting the response state and updating the finished and started states
setResponse({
const responseObject = {
message : 'Miner output currently not captured',
files : relevant_files
});
files : relevant_files.map(file => file.name),
finished : new Date()
}
setResponse(responseObject);
sessionStorage.setItem(projectName+'/lastMinerResponse', JSON.stringify(responseObject));
console.log('simod_results/' + relevant_files.find(file => /.*best_result.*simulation_parameters\.json/.test(file.name))?.name)
setConfigFile('simod_results/' + relevant_files.find(file => /.*best_result.*simulation_parameters\.json/.test(file.name))?.name)
setBpmnFile('simod_results/' + relevant_files.find(file => /.*structure_trial.*\.bpmn/.test(file.name))?.name)
Expand Down Expand Up @@ -266,7 +270,7 @@ const ProcessMinerPage = ({projectName, getData, toasting }) => {

<Card bg="white">
<CardHeader>
<Heading size='ms'> Process Miner settings </Heading>
<Heading size='md'> Start Process Miner Run </Heading>
</CardHeader>
<CardBody>

Expand Down Expand Up @@ -309,47 +313,37 @@ const ProcessMinerPage = ({projectName, getData, toasting }) => {

<Card bg="white">
<CardHeader>
<Heading size='md'> Miner feedback </Heading>
<Heading size='md'> Convert Miner Output to Scenario: </Heading>
</CardHeader>
<CardBody>
<Flex flexDirection='column' gap='5'>
<Textarea isDisabled value={response.message} />
{response.files && response.message && <>
<Heading size='ms' mt={5}>Click on the name of the file to download it:</Heading>
<UnorderedList>
{response.files.map(x => (<ListItem><Button onClick={() => download(x.data, x.name)} variant="link">{x.name}</Button></ListItem>)) }
</UnorderedList>
</>}

<Heading size='ms' mt='10'>Convert Miner Output to Scenario:</Heading>
<Flex
gap="15"
flexDirection="row"
alignItems="end"
>
{fileSelect('Select .json Config File:', configFile, setConfigFile, file => file.endsWith('.json') && file.includes('simulation_parameters') && !file.includes('converted'))}
{fileSelect('Select Bpmn File:', bpmnFile, setBpmnFile, file => file.endsWith('.bpmn'))}

<Button disabled={!configFile || !bpmnFile} onClick={async () => {
console.log('Converting files ' + configFile + ' ' + bpmnFile)
const converted = convertSimodOutput((await getFile(projectName, configFile)).data, (await getFile(projectName, bpmnFile)).data);
const eventLog = (await getFile(projectName, logFile || fileList.filter(file => file.endsWith('.xes'))[0])).data; //TODO what if somebody selects another config?
converted.numberOfInstances = getNumberOfInstances(eventLog);

const scenarioName = window.prompt('Please enter scenario name');
if (scenarioName) {
converted.scenarioName = scenarioName;
getData().addScenario(converted);
}
}}>
<Text color="RGBA(0, 0, 0, 0.64)" fontWeight="bold">Convert to Scenario</Text>
</Button>

</Flex>
<Flex
gap="15"
flexDirection="row"
alignItems="end"
>
{fileSelect('Select .json Config File:', configFile, setConfigFile, file => file.endsWith('.json') && file.includes('simulation_parameters') && !file.includes('converted'))}
{fileSelect('Select Bpmn File:', bpmnFile, setBpmnFile, file => file.endsWith('.bpmn'))}

<Button disabled={!configFile || !bpmnFile} onClick={async () => {
console.log('Converting files ' + configFile + ' ' + bpmnFile)
const converted = convertSimodOutput((await getFile(projectName, configFile)).data, (await getFile(projectName, bpmnFile)).data);
const eventLog = (await getFile(projectName, logFile || fileList.filter(file => file.endsWith('.xes'))[0])).data; //TODO what if somebody selects another config?
converted.numberOfInstances = getNumberOfInstances(eventLog);

const scenarioName = window.prompt('Please enter scenario name');
if (scenarioName) {
converted.scenarioName = scenarioName;
getData().addScenario(converted);
}
}}>
<Text color="RGBA(0, 0, 0, 0.64)" fontWeight="bold">Convert to Scenario</Text>
</Button>

</Flex>
</CardBody>
</Card>


<ToolRunOutputCard {...{projectName, response, toolName : 'Miner', processName : 'process mining', filePrefix : 'simod_results'}}/>


</Stack>
Expand Down
33 changes: 15 additions & 18 deletions frontend/src/components/Simulation/SimulationPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,15 @@ import axios from 'axios';
import { getFile, getScenarioFileName, setFile } from "../../util/Storage";
import { convertScenario } from "simulation-bridge-converter-scylla/ConvertScenario";
import RunProgressIndicationBar from "../RunProgressIndicationBar";
import ToolRunOutputCard from "../ToolRunOutputCard";

const SimulationPage = ({projectName, getData, toasting }) => {

// Setting initial states of started, finished, and response
const [started, setStarted] = useState(false);
const [finished, setFinished] = useState(false);
const [errored, setErrored] = useState(false);
const [response, setResponse] = useState({});
const [response, setResponse] = useState(JSON.parse(sessionStorage.getItem(projectName+'/lastSimulatorResponse')) || {});

const [scenarioName, setScenarioName] = useState();
const [simulator, setSimulator] = useState();
Expand All @@ -24,7 +25,7 @@ const SimulationPage = ({projectName, getData, toasting }) => {
// function to start the simulation
const start = async () => {
// Resetting response and finished states
setResponse({ message: "", files: [{ name: "", link: "" }] });
setResponse({ message: "", files: [] });
setFinished(false);
setErrored(false);
// Updating the started state
Expand Down Expand Up @@ -64,7 +65,15 @@ const SimulationPage = ({projectName, getData, toasting }) => {
})

// Setting the response state and updating the finished and started states
setResponse(r.data);

const responseObject = {
message : r.data.message,
files : r.data.files.map(file => file.name),
finished : new Date(),
requestId
}
setResponse(responseObject);
sessionStorage.setItem(projectName+'/lastSimulatorResponse', JSON.stringify(responseObject));
setFinished(true);
setStarted(false);
// Toasting a success message
Expand Down Expand Up @@ -119,7 +128,7 @@ const SimulationPage = ({projectName, getData, toasting }) => {
<RunProgressIndicationBar {...{started, finished, errored}}/>
<Card bg="white">
<CardHeader>
<Heading size='ms'> Simulation settings </Heading>
<Heading size='md'> Start Simulation Run </Heading>
</CardHeader>
<CardBody>

Expand Down Expand Up @@ -161,20 +170,8 @@ const SimulationPage = ({projectName, getData, toasting }) => {
</CardBody>
</Card>

<Card bg="white">
<CardHeader>
<Heading size='ms'> Simulator feedback </Heading>
</CardHeader>
<CardBody>
<Textarea isDisabled value={response.message} />
{response.files && response.message && <>
<Heading size='ms' mt={5}>Click on the name of the file to download it:</Heading>
<UnorderedList>
{response.files.map(x => (<ListItem><Button onClick={() => download(x.data, x.name)} variant="link">{x.name}</Button></ListItem>)) }
</UnorderedList>
</>}
</CardBody>
</Card>

<ToolRunOutputCard {...{projectName, response, toolName : 'Simulator', processName : 'simulation', filePrefix : response.requestId}}/>



Expand Down
31 changes: 31 additions & 0 deletions frontend/src/components/ToolRunOutputCard.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import { Button, Card, CardBody, CardHeader, Flex, Heading, ListItem, Textarea, UnorderedList } from "@chakra-ui/react";
import { downloadFile } from "../util/Storage";

export default function ToolRunOutputCard({projectName, response, toolName, processName, filePrefix}) {


return <Card bg="white">
<CardHeader>
<Heading size='md'> Last {toolName} Run Output {response.finished && `[${new Date(response.finished).toLocaleString()}]`}</Heading>
</CardHeader>
<CardBody>
<Flex flexDirection='column' gap='5'>
{!response.message && !response.files && !response.finished && <>
No {processName} runs in this session yet.
</>}
{response.message && <>
<Heading size='ms' mt={-5}>Console Output:</Heading>
<Textarea isDisabled value={response.message} />
</>}
{response.files && <>
<Heading size='ms'>Returned Files: (Click on the name of the file to download it)</Heading>
<UnorderedList>
{response.files.map(fileName => (<ListItem>
<Button onClick={() => downloadFile(projectName, (filePrefix ? filePrefix + '/' : '') + fileName)} variant="link">{fileName}</Button>
</ListItem>)) }
</UnorderedList>
</>}
</Flex>
</CardBody>
</Card>
}

0 comments on commit c5a383e

Please sign in to comment.