Skip to content

Commit

Permalink
Fix visual regression in BeamlineSetupContainer
Browse files Browse the repository at this point in the history
  • Loading branch information
@axelboc @marcus-oscarsson
axelboc authored and marcus-oscarsson committed Jun 29, 2023
1 parent e40e832 commit fe247e4
Show file tree
Hide file tree
Showing 2 changed files with 212 additions and 176 deletions.
235 changes: 129 additions & 106 deletions ui/src/containers/BeamlineActionsContainer.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,14 @@
import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { startAction,
import {
startAction,
stopAction,
showActionOutput,
hideActionOutput,
setArgumentValue } from '../actions/beamlineActions';
import { Row,
Col,
Modal,
Dropdown,
Button,
Form,
Card} from 'react-bootstrap';
setArgumentValue,
} from '../actions/beamlineActions';
import { Row, Col, Modal, Dropdown, Button, Form, Card } from 'react-bootstrap';
import BeamlineActionControl from '../components/BeamlineActions/BeamlineActionControl';
import Plot1D from '../components/Plot1D';
import { RUNNING } from '../constants';
Expand Down Expand Up @@ -76,124 +72,152 @@ class BeamlineActionsContainer extends React.Component {
const defaultDialogPosition = { x: -100, y: 100 };

return (
<Row>
<Col xs={12}>
<Dropdown
title="Beamline Actions"
id="beamline-actions-dropdown"
variant="outline-secondary"
autoClose="outside"
>
<Dropdown.Toggle variant="outline-secondary" id="beamline-actions-dropdown">
Beamline Actions
</Dropdown.Toggle>
<Dropdown.Menu>
{this.props.actionsList.map((cmd, i) => {
const cmdName = cmd.name;
const cmdUsername = cmd.username;
const cmdState = cmd.state;
let disabled = false;
if (currentActionRunning && (currentActionName !== cmdName)) {
disabled = true;
}

return (
<Dropdown.Item
style={{width: '250px' }}
className='d-flex justify-content-between align-items-start'
key={i}
>
<div className="ms-2 me-auto">
<div className="fw-bold">{cmdUsername}</div>
</div>
<BeamlineActionControl cmdName={cmdName}
start={this.startAction}
stop={this.stopAction}
showOutput={this.showOutput}
state={cmdState}
disabled={disabled}
arguments={cmd.arguments}
type={cmd.type}
data={cmd.data}
/>
</Dropdown.Item>
);
})}
</Dropdown.Menu>
</Dropdown>
</Col>
<DraggableModal id="beamlineActionOutput"
<>
<Dropdown
title="Beamline Actions"
id="beamline-actions-dropdown"
variant="outline-secondary"
autoClose="outside"
>
<Dropdown.Toggle
variant="outline-secondary"
id="beamline-actions-dropdown"
>
Beamline Actions
</Dropdown.Toggle>
<Dropdown.Menu>
{this.props.actionsList.map((cmd, i) => {
const cmdName = cmd.name;
const cmdUsername = cmd.username;
const cmdState = cmd.state;
let disabled = false;
if (currentActionRunning && currentActionName !== cmdName) {
disabled = true;
}

return (
<Dropdown.Item
style={{ width: '250px' }}
className="d-flex justify-content-between align-items-start"
key={i}
>
<div className="ms-2 me-auto">
<div className="fw-bold">{cmdUsername}</div>
</div>
<BeamlineActionControl
cmdName={cmdName}
start={this.startAction}
stop={this.stopAction}
showOutput={this.showOutput}
state={cmdState}
disabled={disabled}
arguments={cmd.arguments}
type={cmd.type}
data={cmd.data}
/>
</Dropdown.Item>
);
})}
</Dropdown.Menu>
</Dropdown>
<DraggableModal
id="beamlineActionOutput"
show={!!this.props.currentAction.show}
onHide={this.hideOutput}
defaultpos={defaultDialogPosition}
>
<Modal.Header>
<Modal.Title>
{this.props.currentAction.username}
</Modal.Title>
</Modal.Header>
<Modal.Body className='d-flex' style={{ height: '500px', overflowY: 'auto' }}>
<Row >
{ this.props.currentAction.arguments.map((arg, i) =>
<Modal.Title>{this.props.currentAction.username}</Modal.Title>
</Modal.Header>
<Modal.Body
className="d-flex"
style={{ height: '500px', overflowY: 'auto' }}
>
<Row>
{this.props.currentAction.arguments.map((arg, i) => (
<>
<Col className='mt-2' xs={3} style={{ whiteSpace: 'nowrap' }} component={Form.Label}>{arg.name}</Col>
<Col xs={3}>
<Form.Control
label={arg.name}
type="text"
value={arg.value}
disabled={currentActionRunning}
onChange={(e) => {
this.props.setArgumentValue(currentActionName,
i,
e.target.value);
}}
/>
</Col>
</>
)
}
<Col>
{ currentActionRunning ?
<Button variant="danger"
onClick={ () => { this.stopAction(currentActionName); } }
>
Abort
</Button> : <Button disabled={currentActionRunning}
variant="primary"
onClick={ () => { this.startAction(currentActionName); } }
>
Run
</Button>
}
<Col
className="mt-2"
xs={3}
style={{ whiteSpace: 'nowrap' }}
component={Form.Label}
>
{arg.name}
</Col>
</Row>
<hr />
<Plot1D displayedPlotCallback={this.newPlotDisplayed}
plotId={this.plotIdByAction[currentActionName]} autoNext={currentActionRunning}
/>
{ this.props.currentAction.messages.length > 0 ? (<Card>
{this.props.currentAction.messages.map(message => <p>{message.message}</p>)}
</Card>) : '' }
<Col xs={3}>
<Form.Control
label={arg.name}
type="text"
value={arg.value}
disabled={currentActionRunning}
onChange={(e) => {
this.props.setArgumentValue(
currentActionName,
i,
e.target.value
);
}}
/>
</Col>
</>
))}
<Col>
{currentActionRunning ? (
<Button
variant="danger"
onClick={() => {
this.stopAction(currentActionName);
}}
>
Abort
</Button>
) : (
<Button
disabled={currentActionRunning}
variant="primary"
onClick={() => {
this.startAction(currentActionName);
}}
>
Run
</Button>
)}
</Col>
</Row>
<hr />
<Plot1D
displayedPlotCallback={this.newPlotDisplayed}
plotId={this.plotIdByAction[currentActionName]}
autoNext={currentActionRunning}
/>
{this.props.currentAction.messages.length > 0 ? (
<Card>
{this.props.currentAction.messages.map((message) => (
<p>{message.message}</p>
))}
</Card>
) : (
''
)}
</Modal.Body>
<Modal.Footer>
<Button
variant='outline-secondary'
variant="outline-secondary"
onClick={this.hideOutput}
disabled={currentActionRunning}
>
Close window
</Button>
</Modal.Footer>
</DraggableModal>
</Row>
</>
);
}
}

function mapStateToProps(state) {
return {
currentAction: state.beamline.currentBeamlineAction
currentAction: state.beamline.currentBeamlineAction,
};
}

Expand All @@ -203,12 +227,11 @@ function mapDispatchToProps(dispatch) {
stopAction: bindActionCreators(stopAction, dispatch),
showOutput: bindActionCreators(showActionOutput, dispatch),
hideOutput: bindActionCreators(hideActionOutput, dispatch),
setArgumentValue: bindActionCreators(setArgumentValue, dispatch)
setArgumentValue: bindActionCreators(setArgumentValue, dispatch),
};
}

export default connect(
mapStateToProps,
mapDispatchToProps
)(BeamlineActionsContainer);

Loading

0 comments on commit fe247e4

Please sign in to comment.