Skip to content

Commit

Permalink
Merge cc8de45 into eb6547b
Browse files Browse the repository at this point in the history
  • Loading branch information
@downiec
downiec committed Aug 30, 2018
2 parents eb6547b + cc8de45 commit eb554d0
Show file tree
Hide file tree
Showing 12 changed files with 3,077 additions and 2,910 deletions.
5,631 changes: 2,816 additions & 2,815 deletions frontend/package-lock.json
View file

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions frontend/src/js/components/PlotInspector/PlotInspector.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@ import React from "react";
import PropTypes from "prop-types";
import { Button } from "react-bootstrap";
import ColormapEditor from "../modals/ColormapEditor/ColormapEditor.jsx";
import { ONE_VAR_PLOTS } from "../../constants/Constants.js";
import { ONE_VAR_PLOTS} from "../../constants/Constants.js";
class PlotInspector extends React.PureComponent {
render() {
return (
<div className="plot-inspector-wrapper">
<div className="tools-container text-center">
<div className="tools-header">
<p>Tools</p>
<span onClick={this.props.startTour} className="help-button main-help btn btn-xs btn-default">
<span onClick={() => this.props.startTour(0)} className="help-button main-help btn btn-xs btn-default">
<i className="glyphicon glyphicon-question-sign" /> Help
</span>
</div>
Expand Down Expand Up @@ -220,7 +220,7 @@ class PlotInspector extends React.PureComponent {
</table>
</div>
{this.props.show_colormap_editor && (
<ColormapEditor show={this.props.show_colormap_editor} close={this.props.handleCloseColormapEditor} />
<ColormapEditor startTour={this.props.startTour} show={this.props.show_colormap_editor} close={this.props.handleCloseColormapEditor} />
)}
</div>
);
Expand Down
5 changes: 3 additions & 2 deletions frontend/src/js/components/PlotInspector/PlotInspectorWrapper.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,7 @@ class PlotInspectorWrapper extends React.Component {
handleOpenCalculator={this.handleOpenCalculator}
/>
{this.state.show_export_modal && <ExportModal show={this.state.show_export_modal} close={this.handleCloseExportModal} />}
{this.state.show_calculator && <Calculator show={this.state.show_calculator} close={this.handleCloseCalculator} />}
{this.state.show_calculator && <Calculator startTour={this.props.startTour} show={this.state.show_calculator} close={this.handleCloseCalculator} />}
</div>
);
}
Expand All @@ -157,7 +157,8 @@ PlotInspectorWrapper.propTypes = {
deleteVariableInPlot: PropTypes.func,
addPlot: PropTypes.func,
deletePlot: PropTypes.func,
cell_selected: PropTypes.string
cell_selected: PropTypes.string,
startTour: PropTypes.func,
};

const mapStateToProps = state => {
Expand Down
11 changes: 9 additions & 2 deletions frontend/src/js/components/modals/Calculator/Calculator.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -555,8 +555,13 @@ class Calculator extends React.Component {
const calculation_string = this.printCalculation();
return (
<Modal show={this.props.show} onHide={this.props.close} bsSize="large" onKeyDown={this.handleKeyDown}>
<div id='calculator-main'>
<Modal.Header closeButton>
<Modal.Title>Calculator</Modal.Title>
<Modal.Title>Calculator &nbsp;
<Button onClick={() => this.props.startTour(1)} className="help-button main-help btn btn-xs btn-default">
<i className="glyphicon glyphicon-question-sign" />Help
</Button>
</Modal.Title>
</Modal.Header>
<Modal.Body>
<div className="main-container">
Expand Down Expand Up @@ -585,6 +590,7 @@ class Calculator extends React.Component {
<Modal.Footer>
<Button onClick={this.props.close}>Close</Button>
</Modal.Footer>
</div>
</Modal>
);
}
Expand All @@ -596,7 +602,8 @@ Calculator.propTypes = {
variables: PropTypes.object,
variable_names: PropTypes.arrayOf(PropTypes.string),
removeVariable: PropTypes.func,
loadVariable: PropTypes.func
loadVariable: PropTypes.func,
startTour: PropTypes.func
};

/* istanbul ignore next */
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/js/components/modals/Calculator/CalculatorButtons.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ class CalculatorButtons extends React.Component {
render() {
/* istanbul ignore next */
return (
<div className="calculator-buttons">
<div id="calc-button-region" className="calculator-buttons">
<div id="regrid" className="dropdown btn-group">
<button
type="button"
Expand Down
7 changes: 6 additions & 1 deletion frontend/src/js/components/modals/Calculator/InputArea.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,12 @@ class InputArea extends React.Component {
<div id="assignment">
<span className="glyphicon glyphicon-arrow-left" />
</div>
<input id="calculation" type="text" value={this.props.calculation} disabled />
<input
id="calculation"
type="text"
value={this.props.calculation}
disabled
/>
<small id="calculation-help-text" className="form-text text-muted">
Construct a calculation by dragging variables here.
</small>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/js/components/modals/Calculator/VariableList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ class VariableList extends Component {
<p className="side-nav-header">Variables</p>
</div>
</nav>
<div className="scroll-area">
<div id='calc-variable-region' className="scroll-area">
<ul id="calc-variable-list" className="no-bullets left-list">
{this.props.variables.map(value => {
return <DraggableVariable key={value} variable={value} />;
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/js/components/modals/ColormapEditor/ColorPicker.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ class ColorPicker extends Component {
}
});
return(
<div>
<div id='color-pickers'>
<div style={styles.container}>
<div style={styles.container_vertical}>
<BasicColorSwatch
Expand Down
163 changes: 86 additions & 77 deletions frontend/src/js/components/modals/ColormapEditor/ColormapEditor.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ class ColormapEditor extends Component {
updateGraphicsMethod: PropTypes.func,
applyColormap: PropTypes.func,
graphics_methods: PropTypes.object,
startTour: PropTypes.func,
};
}

Expand Down Expand Up @@ -332,84 +333,92 @@ class ColormapEditor extends Component {
return(
<div>
<Modal show={this.props.show} onHide={this.props.close}>
<Modal.Header closeButton>
<Modal.Title>Editing Colormap: {this.state.selected_colormap_name}</Modal.Title>
</Modal.Header>
<Modal.Body>
<div className="form-inline " style={{display: "flex", justifyContent: "center"}}>
<div className="form-group">
<label htmlFor="cm-select" className="control-label">Colormaps</label>
<select
name="cm-select"
className="form-control example"
style={{marginLeft: "5px", marginRight: "5px"}}
onChange={(event) => {this.handleSelectColormap(event.target.value)}}
value={this.state.selected_colormap_name}>
{ this.props.colormaps ? (
Object.keys(this.props.colormaps).sort(function (a, b) {
return a.toLowerCase().localeCompare(b.toLowerCase());
}).map( name => ( <option key={name} value={name}>{name}</option> ))
) : (
<option value="" disabled />
)}
</select>
<div id='colormap-editor-main'>
<Modal.Header closeButton>
<Modal.Title>Editing Colormap: {this.state.selected_colormap_name}&nbsp;
<Button onClick={() => this.props.startTour(2)} className="help-button main-help btn btn-xs btn-default">
<i className="glyphicon glyphicon-question-sign" />Help
</Button>
</Modal.Title>
</Modal.Header>
<Modal.Body>
<div className="form-inline " style={{display: "flex", justifyContent: "center"}}>
<div className="form-group">
<label htmlFor="cm-select" className="control-label">Colormaps</label>
<select id='colormap-dropdown'
name="cm-select"
className="form-control example"
style={{marginLeft: "5px", marginRight: "5px"}}
onChange={(event) => {this.handleSelectColormap(event.target.value)}}
value={this.state.selected_colormap_name}>
{ this.props.colormaps ? (
Object.keys(this.props.colormaps).sort(function (a, b) {
return a.toLowerCase().localeCompare(b.toLowerCase());
}).map( name => ( <option key={name} value={name}>{name}</option> ))
) : (
<option value="" disabled />
)}
</select>
</div>
<div>
<button
id='btn-new-colormap'
title="Create a new copy of the selected colormap"
onClick={() => {this.handleOpenNewColormapModal()}}
className="btn btn-primary btn-sm"
style={{marginLeft: "5px"}}>
New
</button>
<button
title="Delete Selected Colormap"
onClick={() => {this.handleDeleteColormap()}}
className="btn btn-danger btn-sm"
style={{marginLeft: "5px"}}>
<i className="glyphicon glyphicon-trash"></i>
</button>
</div>
</div>
<div>
<button
title="Create a new copy of the selected colormap"
onClick={() => {this.handleOpenNewColormapModal()}}
className="btn btn-primary btn-sm"
style={{marginLeft: "5px"}}>
New
</button>
<button
title="Delete Selected Colormap"
onClick={() => {this.handleDeleteColormap()}}
className="btn btn-danger btn-sm"
style={{marginLeft: "5px"}}>
<i className="glyphicon glyphicon-trash"></i>
</button>
</div>
</div>
<hr/>
<ColorPicker
color={this.state.currentColor}
onChange={(color) => {this.handleChange(color)}}
/>
<ColormapWidget
current_colormap={this.state.current_colormap}
color={this.state.currentColor}
handleCellClick={(start_cell, end_cell) => {this.handleCellClick(start_cell, end_cell)}}
selected_cells_start={this.state.selected_cells_start}
selected_cells_end= {this.state.selected_cells_end}
/>
</Modal.Body>
<Modal.Footer>
<Button
style={{float: "left"}}
onClick={() => {this.blendColors()}}>
Blend
</Button>
<Button
style={{float: "left"}}
onClick={() => {this.resetColormap()}}>
Reset
</Button>
<Button
style={{float: "left"}}
disabled={apply_disabled}
title={ apply_disabled ?
"A cell must be selected to apply a colormap"
:
"Apply the colormap shown to the currently selected cell"
}
onClick={() => {this.handleApplyColormap()}}>
Apply
</Button>
<Button onClick={() => {this.saveColormap(this.state.selected_colormap_name)}} bsStyle="primary">Save</Button>
<Button onClick={this.openImportExportModal.bind(this)}>Import/Export</Button>
<Button onClick={this.props.close}>Close</Button>
</Modal.Footer>
<hr/>
<ColorPicker
color={this.state.currentColor}
onChange={(color) => {this.handleChange(color)}}
/>
<ColormapWidget
current_colormap={this.state.current_colormap}
color={this.state.currentColor}
handleCellClick={(start_cell, end_cell) => {this.handleCellClick(start_cell, end_cell)}}
selected_cells_start={this.state.selected_cells_start}
selected_cells_end= {this.state.selected_cells_end}
/>
</Modal.Body>
<Modal.Footer>
<Button
id='btn-blend'
style={{float: "left"}}
onClick={() => {this.blendColors()}}>
Blend
</Button>
<Button
style={{float: "left"}}
onClick={() => {this.resetColormap()}}>
Reset
</Button>
<Button
style={{float: "left"}}
disabled={apply_disabled}
title={ apply_disabled ?
"A cell must be selected to apply a colormap"
:
"Apply the colormap shown to the currently selected cell"
}
onClick={() => {this.handleApplyColormap()}}>
Apply
</Button>
<Button id='btn-save-colormap' onClick={() => {this.saveColormap(this.state.selected_colormap_name)}} bsStyle="primary">Save</Button>
<Button id='btn-import-export' onClick={this.openImportExportModal.bind(this)}>Import/Export</Button>
<Button onClick={this.props.close}>Close</Button>
</Modal.Footer>
</div>
</Modal>
<NewColormapModal
show={this.state.show_new_colormap_modal}
Expand Down

0 comments on commit eb554d0

Please sign in to comment.