Skip to content

DM-6288 Chart Options Display #115

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jul 12, 2016
Merged

DM-6288 Chart Options Display #115

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5dacd8c
DM-6288 Chart Options Display
tgoldina Jul 11, 2016
060598a
DM-6288 response to review comments
tgoldina Jul 12, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/firefly/js/ui/ChartSelectDropdown.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ class ChartSelect extends Component {
const {chartType} = this.state;
const fieldKey = 'chartType';
return (
<div style={{display:'block', whiteSpace: 'nowrap'}}>
<div style={{display:'block', whiteSpace: 'nowrap', paddingBottom: 10}}>
<input type='radio'
name={fieldKey}
value={SCATTER}
Expand Down
6 changes: 0 additions & 6 deletions src/firefly/js/ui/TextButton.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import React, {PropTypes} from 'react';

const labelStyle= {
display: 'inline-block',
lineHeight: '30px',
fontSize: '10pt',
fontStyle: 'italic',
color: 'blue',
Expand All @@ -26,7 +25,6 @@ export function TextButton({text, tip='$text',style={}, onClick}) {
var s= Object.assign({cursor:'pointer', verticalAlign:'bottom'},style);
return (
<div style={s} title={tip} onClick={onClick}>

<div style={labelStyle} title={tip}>
<u>{text}</u>
</div>
Expand All @@ -36,10 +34,6 @@ export function TextButton({text, tip='$text',style={}, onClick}) {
}


//CloseButton.contextTypes= {
//};


TextButton.propTypes= {
text : PropTypes.string,
style : PropTypes.object,
Expand Down
8 changes: 3 additions & 5 deletions src/firefly/js/visualize/ChartsCntlr.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,9 @@ export const DELETE = `${UI_PREFIX}/delete`;
* @param {string} chartId - chart id
* @param {string} tblId - table id, to which this chart is related. Acts as a group id
* @param {string} chartType (ex. scatter, histogram)
* @param {boolean} optionsPopup - true, if options should be displayed as a popup
*/
export function dispatchChartExpanded(chartId, tblId, chartType, optionsPopup) {
flux.process( {type: CHART_UI_EXPANDED, payload: {chartId, tblId, chartType, optionsPopup}});
export function dispatchChartExpanded(chartId, tblId, chartType) {
flux.process( {type: CHART_UI_EXPANDED, payload: {chartId, tblId, chartType}});
}

/*
Expand Down Expand Up @@ -78,9 +77,8 @@ export function reducer(state={ui:{}}, action={}) {
switch (action.type) {

case (CHART_UI_EXPANDED) :
const {optionsPopup} = action.payload;
//return updateSet(root, 'expanded', {chartId, tblId});
return updateSet(state, 'ui.expanded', {chartId, tblId, chartType, optionsPopup});
return updateSet(state, 'ui.expanded', {chartId, tblId, chartType});
case (CHART_MOUNTED) :

if (!has(state, ['tbl', tblId])) {
Expand Down
129 changes: 49 additions & 80 deletions src/firefly/js/visualize/ChartsTableViewPanel.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,6 @@ import {XYPlot} from '../visualize/XYPlot.jsx';
import HistogramOptions from '../visualize/HistogramOptions.jsx';
import Histogram from '../visualize/Histogram.jsx';

import {PopupPanel} from '../ui/PopupPanel.jsx';
import DialogRootContainer from '../ui/DialogRootContainer.jsx';
import {dispatchShowDialog, dispatchHideDialog, isDialogVisible} from '../core/ComponentCntlr.js';

import {showInfoPopup} from '../ui/PopupUtil.jsx';

import DELETE from 'html/images/blue_delete_10x10.png';
Expand All @@ -47,19 +43,34 @@ import FILTER_IN from 'html/images/icons-2014/24x24_FilterAdd.png';
import CLEAR_FILTERS from 'html/images/icons-2014/24x24_FilterOff_Circle.png';
import LOADING from 'html/images/gxt/loading.gif';

const selectionBtnStyle = {padding: '0 5px', cursor: 'pointer'};

const OPTIONS_WIDTH = 330;

const selectionBtnStyle = {verticalAlign: 'top', paddingLeft: 20, cursor: 'pointer'};

/*
CSS for left positioned options
left: 1
borderRight: '1px solid #CCC',
boxShadow: '2px 0 5px rgba(0,0,0,0.50)'
*/
const chartOptionsStyle = {
position: 'absolute',
padding: '0 5px',
top: 1,
right: 1,
bottom: 2,
backgroundColor: 'beige',
borderLeft: '1px solid #CCC',
zIndex: 100,
flex: '0 0 auto',
overflow:'auto',
boxShadow: '-2px 0 2px 0 rgba(0,0,0,0.50)'
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i see lots of inline styling in this file. having them in a css file may look cleaner.

};

class ChartsPanel extends React.Component {

constructor(props) {
super(props);
this.state = {
optionsShown: !props.chartId,
immediateResize: false
optionsShown: !props.chartId
};

const normal = (size) => {
Expand All @@ -68,15 +79,13 @@ class ChartsPanel extends React.Component {
var heightPx = size.height;
//console.log('width: '+widthPx+', height: '+heightPx);
if (widthPx !== this.state.widthPx || heightPx !== this.state.heightPx) {
this.setState({widthPx, heightPx, immediateResize: false});
this.setState({widthPx, heightPx});
}
}
};
const debounced = debounce(normal, 100);
this.onResize = (size) => {
if ( this.state.immediateResize) {
normal(size);
} else if (this.state.widthPx === 0) {
if (this.state.widthPx === 0) {
defer(normal, size);
} else {
debounced(size);
Expand Down Expand Up @@ -123,63 +132,28 @@ class ChartsPanel extends React.Component {
}

componentDidMount() {
this.handlePopups();
const {tblId, chartId, chartType} = this.props;
dispatchChartMounted(tblId,chartId,chartType);
this.iAmMounted = true;
}

componentDidUpdate() {
this.handlePopups();
}

componentWillReceiveProps(nextProps) {
const {tblId, chartId, chartType} = nextProps;
const {tblId, chartId, chartType, tblPlotData, tblHistogramData} = nextProps;
if (!tblId || !chartId) { return; }
if (chartId !== this.props.chartId || chartType !== this.props.chartType || !this.props.tblId) {
dispatchChartUnmounted(this.props.tblId, this.props.chartId, this.props.chartType);
dispatchChartMounted(tblId,chartId,chartType);
}
if (get(tblPlotData, 'xyPlotData') != get(this.props.tblPlotData, 'xyPlotData') ||
get(tblHistogramData, 'histogramData') != get(this.props.tblHistogramData, 'histogramData')) {
this.setState({optionsShown: false});
}
}

componentWillUnmount() {
this.iAmMounted = false;
const {tblId, chartId, chartType} = this.props;
dispatchChartUnmounted(tblId, chartId, chartType);
if (isDialogVisible(popupId)) {
hideChartOptionsPopup();
}
}

handlePopups() {
if (this.props.optionsPopup) {
const {optionsShown} = this.state;
if (optionsShown) {
const {tableModel, tblStatsData, tblPlotData, tblHistogramData, chartId, chartType} = this.props;
// show options popup
let popupTitle = 'Chart Options';

const reqTitle = get(tableModel, 'tableMeta.title');
if (reqTitle) { popupTitle += `: ${chartId} ${reqTitle}`; }

var popup = (
<PopupPanel title={popupTitle} closeCallback={()=>{this.toggleOptions();}}>
<div
style={{overflow:'auto',width:OPTIONS_WIDTH,height:300,paddingTop:10,paddingLeft:10,verticalAlign:'top'}}>
<OptionsWrapper {...{chartId, tableModel, tblStatsData, tblPlotData, tblHistogramData, chartType}}/>
</div>
</PopupPanel>
);

DialogRootContainer.defineDialog(popupId, popup);
dispatchShowDialog(popupId);

} else if (isDialogVisible(popupId)) {
hideChartOptionsPopup();
}
} else if (isDialogVisible(popupId)) {
hideChartOptionsPopup();
}
}

// -------------
Expand Down Expand Up @@ -278,8 +252,8 @@ class ChartsPanel extends React.Component {
// -----------------

toggleOptions() {
const {optionsShown, immediateResize, optionsPopup} = this.state;
this.setState({optionsShown: !optionsShown, immediateResize: optionsPopup?immediateResize:true});
const {optionsShown} = this.state;
this.setState({optionsShown: !optionsShown});
}

displaySelectionOptions() {
Expand Down Expand Up @@ -457,28 +431,30 @@ class ChartsPanel extends React.Component {
}

renderToolbar() {
const {expandable, expandedMode, tblId, chartId, chartType, optionsPopup, deletable} = this.props;
const {expandable, expandedMode, tblId, chartId, chartType, deletable} = this.props;
return (
<div style={{height: 30, position: 'absolute', top: 0, left: 0, right: 0}}>
<img style={{verticalAlign:'top', float: 'left', cursor: 'pointer'}}
title='Plot options and tools'
src={SETTINGS}
onClick={() => this.toggleOptions()}
/>
<div style={{display:'inline-block', float: 'right'}}>
<div role='toolbar' style={{height: 29, position: 'absolute', top: 0, left: 0, right: 0}}>
<div className='group'>
{this.renderSelectionButtons()}
</div>
<div className='group'>
<img style={{cursor: 'pointer'}}
title='Plot options and tools'
src={SETTINGS}
onClick={() => this.toggleOptions()}
/>
{ expandable && !expandedMode &&
<img style={selectionBtnStyle}
<img style={{paddingLeft: 4, cursor: 'pointer'}}
title='Expand this panel to take up a larger area'
src={OUTLINE_EXPAND}
onClick={() => {
dispatchChartExpanded(chartId, tblId, chartType, optionsPopup);
dispatchChartExpanded(chartId, tblId, chartType);
dispatchSetLayoutMode(LO_MODE.expanded, LO_VIEW.xyPlots);
}}
/>}
{ expandable && !expandedMode &&
(isBoolean(deletable) ? deletable : numRelatedCharts(tblId) > 1) && // when deletable is undefined, use related charts criterion
<img style={{verticalAlign: 'top', paddingLeft: 2, paddingRight:5, cursor: 'pointer'}}
<img style={{alignSelf: 'baseline', padding: 2, cursor: 'pointer'}}
title='Delete this chart'
src={DELETE}
onClick={() => {dispatchDelete(tblId, chartId, chartType);}}
Expand All @@ -490,11 +466,11 @@ class ChartsPanel extends React.Component {


renderOptions() {
const {optionsShown, heightPx} = this.state;
const { tableModel, tblStatsData, tblPlotData, tblHistogramData, optionsPopup, chartId, chartType} = this.props;
if (optionsShown && !optionsPopup) {
const {optionsShown} = this.state;
const { tableModel, tblStatsData, tblPlotData, tblHistogramData, chartId, chartType} = this.props;
if (optionsShown) {
return (
<div style={{flex: '0 0 auto',overflow:'auto',width:OPTIONS_WIDTH,height:heightPx,paddingLeft:10,verticalAlign:'top'}}>
<div style={Object.assign({},chartOptionsStyle)}>
<OptionsWrapper {...{chartId, tableModel, tblStatsData, tblPlotData, tblHistogramData, chartType}}/>
</div>
);
Expand Down Expand Up @@ -523,9 +499,9 @@ class ChartsPanel extends React.Component {

return (
<div style={{ display: 'flex', flex: 'auto', flexDirection: 'column', height: '100%', overflow: 'hidden'}}>
<div style={{ position: 'relative', flexGrow: 1}}>
<div style={{position: 'relative', flexGrow: 1, backgroundColor: '#c8c8c8', border: '1px solid #b3b3b3', padding: '0 3px 3px 3px'}}>
{this.renderToolbar()}
<div style={{display: 'flex', flexDirection: 'row', position: 'absolute', top: 30, bottom: 0, left: 0, right: 0}}>
<div style={{position: 'absolute', top: 29, bottom: 0, left: 1, right: 0}}>
{this.renderOptions()}
<Resizable id='chart-resizer' onResize={this.onResize} style={{flexGrow: 1, position: 'relative', width: '100%', height: '100%', overflow: 'hidden'}}>
<div style={{overflow:'auto',width:widthPx,height:heightPx}}>
Expand All @@ -542,7 +518,6 @@ class ChartsPanel extends React.Component {

ChartsPanel.propTypes = {
expandedMode: PropTypes.bool,
optionsPopup: PropTypes.bool,
expandable: PropTypes.bool,
deletable : PropTypes.bool,
tblId : PropTypes.string,
Expand Down Expand Up @@ -687,9 +662,3 @@ OptionsWrapper.propTypes = {
};



const popupId = 'chartOptions';

function hideChartOptionsPopup() {
dispatchHideDialog(popupId);
}
2 changes: 1 addition & 1 deletion src/firefly/js/visualize/Histogram.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -300,7 +300,7 @@ var Histogram = React.createClass(
width: Number(width),
height: Number(height),
borderColor: '#a5a5a5',
borderWidth: 3
borderWidth: 1
},
exporting: {
enabled: true
Expand Down
31 changes: 15 additions & 16 deletions src/firefly/js/visualize/HistogramOptions.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,8 +130,7 @@ var HistogramOptions = React.createClass({
render() {
const { colValStats, groupKey, histogramParams, onOptionsSelected}= this.props;
return (
<div style={{padding:'5px'}}>
<br/>
<div style={{padding:'7px 5px'}}>
<FieldGroup groupKey={groupKey} validatorFunc={null} keepState={true}>
<ListBoxInputField
initialState= {{
Expand Down Expand Up @@ -200,21 +199,21 @@ var HistogramOptions = React.createClass({
</InputGroup>
<br/>
{this.renderAlgorithmParameters()}

<br/><br/>
<br/>
{onOptionsSelected &&
<div style={{paddingTop: 10}}>
<CompleteButton style={{display: 'inline-block', marginRight: 10}}
groupKey={groupKey}
onSuccess={(flds) => resultsSuccess(onOptionsSelected, flds)}
onFail={resultsFail}
text = 'Apply'
/>
<div style={{display: 'inline-block', paddingLeft: 100}}>
<button style={{display: 'inline-block'}} type='button' className='button std' onClick={() => setOptions(groupKey, {})}>Clear</button>
<button style={{display: 'inline-block'}} type='button' className='button std' onClick={() => setOptions(groupKey, histogramParams)}>Reset</button>
</div>
</div>}
<div style={{display: 'flex', flexDirection: 'row', padding: '5px 0'}}>
<CompleteButton style={{flexGrow: 0}}
groupKey={groupKey}
onSuccess={(flds) => resultsSuccess(onOptionsSelected, flds)}
onFail={resultsFail}
text = 'Apply'
/>
<div style={{flexGrow: 1}}/>
<div style={{flexGrow: 0}}>
<button type='button' className='button std' onClick={() => setOptions(groupKey, {})}>Clear</button>
<button type='button' className='button std' onClick={() => setOptions(groupKey, histogramParams)}>Reset</button>
</div>
</div>}
</FieldGroup>

</div>
Expand Down
2 changes: 1 addition & 1 deletion src/firefly/js/visualize/XYPlot.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -542,7 +542,7 @@ export class XYPlot extends React.Component {
height: chartHeight,
width: chartWidth,
borderColor: '#a5a5a5',
borderWidth: 3,
borderWidth: 1,
zoomType: 'xy',
events: {
click() {
Expand Down
Loading