Skip to content

Commit

Permalink
export json format now matches backend
Browse files Browse the repository at this point in the history
  • Loading branch information
@William-Hill
William-Hill committed Nov 5, 2018
1 parent 7d972fe commit c444ed1
Show file tree
Hide file tree
Showing 2 changed files with 74 additions and 32 deletions.
45 changes: 24 additions & 21 deletions frontend/src/js/components/modals/ColormapEditor/ColormapEditor.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ class ColormapEditor extends Component {
selected_cells_end: -1,
current_colormap: this.props.colormaps[this.props.default_colormap].map(function(arr) {
return arr.slice()
}), // an array of arrays representing the current cells
}), // an array of arrays representing the current cells
}
}

Expand All @@ -44,7 +44,7 @@ class ColormapEditor extends Component {
applyColormap: PropTypes.func,
graphics_methods: PropTypes.object,
startTour: PropTypes.func,
};
};
}

handleChange(color) {
Expand Down Expand Up @@ -141,7 +141,7 @@ class ColormapEditor extends Component {
selected_cells_start: -1,
selected_cells_end: -1,
})
}
}
else{
return
}
Expand Down Expand Up @@ -172,6 +172,9 @@ class ColormapEditor extends Component {
saveColormap(name){
if(name){
try{
console.log("in saveColormap")
console.log("name:", name)
console.log("this.state.current_colormap", this.state.current_colormap)
return vcs.setcolormap(name, this.state.current_colormap).then(() => {
this.props.saveColormap(name, this.state.current_colormap)
toast.success("Save Successful", { position: toast.POSITION.BOTTOM_CENTER });
Expand All @@ -183,7 +186,7 @@ class ColormapEditor extends Component {
toast.error(error.data.exception, {position: toast.POSITION.BOTTOM_CENTER})
}
catch(e){
toast.error("Failed to save colormap", { position: toast.POSITION.BOTTOM_CENTER });
toast.error("Failed to save colormap", { position: toast.POSITION.BOTTOM_CENTER });
}
})
}
Expand Down Expand Up @@ -222,11 +225,11 @@ class ColormapEditor extends Component {
catch(e){
return false
}

}
return new Promise((resolve, reject) => {
try{
/* eslint-disable no-undef */
/* eslint-disable no-undef */
if(vcs){
vcs.getcolormapnames().then((names) => {
if(names.indexOf(colormap_name) >= 0){
Expand Down Expand Up @@ -270,7 +273,7 @@ class ColormapEditor extends Component {
}

createNewColormapInVcs(base_cm, name){
// create should copy the current colormap, save it into vcs,
// create should copy the current colormap, save it into vcs,
// add it to redux and set it as active in the widget, and close the modal
// cancel should close the modal
try{
Expand All @@ -295,7 +298,7 @@ class ColormapEditor extends Component {
toast.error("Failed to create colormap", {position: toast.POSITION.BOTTOM_CENTER})
}
return Promise.resolve(false)

}

blendColors(){
Expand All @@ -319,7 +322,7 @@ class ColormapEditor extends Component {
let blendedColormap = this.state.current_colormap.map(function(arr) {
return arr.slice(); // copy inner array of colors
});

for(let count = 1; currentCell < endCell; currentCell++, count++){
blendedColormap[currentCell][0] = startColor[0] + (redStep * count)
blendedColormap[currentCell][1] = startColor[1] + (greenStep * count)
Expand Down Expand Up @@ -361,7 +364,7 @@ class ColormapEditor extends Component {
</select>
</div>
<div>
<button
<button
id='btn-new-colormap'
title="Create a new copy of the selected colormap"
onClick={() => {this.handleOpenNewColormapModal()}}
Expand All @@ -379,36 +382,36 @@ class ColormapEditor extends Component {
</div>
</div>
<hr/>
<ColorPicker
<ColorPicker
color={this.state.currentColor}
onChange={(color) => {this.handleChange(color)}}
/>
<ColormapWidget
current_colormap={this.state.current_colormap}
color={this.state.currentColor}
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}
selected_cells_end= {this.state.selected_cells_end}
/>
</Modal.Body>
<Modal.Footer>
<Button
<Button
id='btn-blend'
style={{float: "left"}}
onClick={() => {this.blendColors()}}>
Blend
</Button>
<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"
:
title={ apply_disabled ?
"A cell must be selected to apply a colormap"
:
"Apply the colormap shown to the currently selected cell"
}
onClick={() => {this.handleApplyColormap()}}>
Expand All @@ -420,7 +423,7 @@ class ColormapEditor extends Component {
</Modal.Footer>
</div>
</Modal>
<NewColormapModal
<NewColormapModal
show={this.state.show_new_colormap_modal}
close={() => this.setState({show_new_colormap_modal: false})}
newColormap={(name) => this.createNewColormap(name)}
Expand Down Expand Up @@ -470,7 +473,7 @@ const mapDispatchToProps = (dispatch) => {
}
}
return false

},
applyColormap: (graphics_method_parent, graphics_method, row, col, plot_index) =>{
dispatch(Actions.swapGraphicsMethodInPlot(graphics_method_parent, graphics_method, row, col, plot_index));
Expand All @@ -485,4 +488,4 @@ const mapDispatchToProps = (dispatch) => {
}

export default connect(mapStateToProps, mapDispatchToProps)(ColormapEditor);
export {ColormapEditor as PureColormapEditor}
export {ColormapEditor as PureColormapEditor}
61 changes: 50 additions & 11 deletions frontend/src/js/components/modals/ColormapEditor/ImportExportModal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,28 +11,33 @@ class ImportExportModal extends Component {
data: "",
importName: "",
importColormap: [],
colormapData: ""
}
}

static get propTypes() {
return {
static get propTypes() {
return {
show: PropTypes.bool.isRequired, // show the modal
close: PropTypes.func.isRequired, // close the modal
current_colormap: PropTypes.array,
saveColormap: PropTypes.func,
};
saveColormap: PropTypes.func
};
}

handleChange(e) {
let colormap = {
name: e.target.value,
colormap: this.props.current_colormap,
}

let data = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(colormap));
this.setState({
name: e.target.value,
data: data
data: data,
colormapData: this.props.current_colormap

})
console.log("this.state:", this.state )
}

handleFileChange(e){
Expand All @@ -48,20 +53,54 @@ class ImportExportModal extends Component {
return
}
let keys = Object.keys(obj)
console.log("keys:", keys)
console.log("event.target.result:", event.target.result)
console.log("obj:", obj)
// let name = Object.keys(obj["Cp"])[0]
// console.log("name:", name)
// let colormap = obj["Cp"]
// TODO: attempting to parse old way of exporting json; need to be updated to parse the new way that matches vcs
if(keys.indexOf("name") === -1 || keys.indexOf("colormap") === -1){
console.error(
"Unable to import colormap. Please check that the file contains both 'name' and 'colormap' keys."
)
return
}
console.log("obj.name:", obj.name)
console.log("obj.colormap:", obj.colormap)
this.setState({importName: obj.name, importColormap: obj.colormap})
}
reader.onload = handleLoad.bind(this)
reader.readAsText(e.target.files[0])
}

exportColormap(){
const name = this.state.name.substring(0, this.state.name.indexOf( ".json" ));
let myObject = {"Cp":{}};
myObject["Cp"][name] = {"index": {"data": {}}}
console.log("myObject:", myObject)
console.log("colormapData", this.state.colormapData)
for (var i = 0; i < this.state.colormapData.length; i++){
myObject["Cp"][name]["index"]["data"][i] = this.state.colormapData[i]
}
console.log("myObject after population:", myObject)

// Create hidden anchor tag for downloading the dynamically create JSON object
var element = document.createElement('a');
var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(myObject));
element.setAttribute('href', dataStr);
element.setAttribute('download', this.state.name);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);

}

importColormap(){
this.props.saveColormap(this.state.importName, this.state.importColormap)
console.log("props in importColormap:", this.props)
console.log("state in importColormap:", this.state)
this.props.saveColormap(this.state.importName, this.state.importColormap)
}

render(){
Expand All @@ -74,17 +113,17 @@ class ImportExportModal extends Component {
<Modal.Body>
<h4>Export Current Colormap</h4>
<div className="form-group form-inline">
<input
<input
placeholder="filename.json"
className="form-control"
type="text"
value={this.state.name}
onChange={(e)=>{this.handleChange(e)}}>
</input>
<Button
id="downloadAnchorElem"
className="btn btn-primary form-control"
href={this.state.data}
download={this.state.name}>
onClick={()=>{this.exportColormap()}}>
Download
</Button>
</div>
Expand All @@ -97,7 +136,7 @@ class ImportExportModal extends Component {
type="file"
onChange={(e)=>{this.handleFileChange(e)}}>
</input>
<Button
<Button
className="btn btn-primary form-control"
onClick={()=>{this.importColormap()}}>
Upload
Expand All @@ -113,4 +152,4 @@ class ImportExportModal extends Component {
}
}

export default ImportExportModal;
export default ImportExportModal;

0 comments on commit c444ed1

Please sign in to comment.