Skip to content

DM-7700: Atlas table filtering doesn't work properly #193

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
Sep 28, 2016
Merged

DM-7700: Atlas table filtering doesn't work properly #193

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9e3b08c
DM-7700: Atlas table filtering doesn't work properly
loitly Sep 26, 2016
579b1dd
DM-7700: implements change request
loitly Sep 28, 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
11 changes: 6 additions & 5 deletions src/firefly/html/css/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -206,19 +206,19 @@
}
/* react-split-pane style <END> */

[role="toolbar"] {
.PanelToolbar {
display: flex;
justify-content: space-between;
height:30px;
}

[role="toolbar"] .group {
.PanelToolbar__group {
background-color: #c8c8c8;
display: flex;
align-items: center;
}

[role="toolbar"] button {
.PanelToolbar__button {
width: 24px;
height: 24px;
border: none;
Expand All @@ -227,13 +227,14 @@
padding: 0;
border-radius: 2px;
background: none;
margin: 0 2px;
}

[role="toolbar"] button:active {
.PanelToolbar__button:active {
background-color: #ffffff;
}

[role="toolbar"] button:hover {
.PanelToolbar__button:hover {
background-color: rgba(0,0,0,.15);
cursor: pointer;
}
Expand Down
5 changes: 0 additions & 5 deletions src/firefly/js/charts/ui/ChartPanel.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,3 @@
overflow: auto;
box-shadow: -2px 0 2px 0 rgba(0,0,0,0.50);
}

.selectionBtn {
padding: 0 5px;
cursor: pointer;
}
27 changes: 14 additions & 13 deletions src/firefly/js/charts/ui/ChartsTableViewPanel.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -374,17 +374,17 @@ class ChartsPanel extends React.Component {
if (this.displaySelectionOptions()) {
return (
<div style={{display:'inline-block', whiteSpace: 'nowrap'}}>
<img className='selectionBtn'
<img className='PanelToolbar__button'
title='Zoom in the enclosed points'
src={ZOOM_IN}
onClick={() => this.addZoom()}
/>
{<img className='selectionBtn'
{<img className='PanelToolbar__button'
title='Select enclosed points'
src={SELECT_ROWS}
onClick={() => this.addSelection()}
/>}
<img className='selectionBtn'
<img className='PanelToolbar__button'
title='Filter in the selected points'
src={FILTER_IN}
onClick={() => this.addFilter()}
Expand All @@ -397,22 +397,22 @@ class ChartsPanel extends React.Component {
renderToolbar() {
const {expandable, expandedMode, tblId, chartId, chartType, deletable, help_id} = this.props;
return (
<div role='toolbar' className='ChartPanel__toolbar'>
<div className='group'>
<div className='PanelToolbar ChartPanel__toolbar'>
<div className='PanelToolbar_group'>
{this.renderSelectionButtons()}
</div>
<div className='group'>
{this.displayZoomOriginal() && <img className='selectionBtn'
<div className='PanelToolbar_group'>
{this.displayZoomOriginal() && <img className='PanelToolbar__button'
title='Zoom out to original chart'
src={ZOOM_ORIGINAL}
onClick={() => this.resetZoom()}
/>}
{this.displayUnselectAll() && <img className='selectionBtn'
{this.displayUnselectAll() && <img className='PanelToolbar__button'
title='Unselect all selected points'
src={UNSELECT_ROWS}
onClick={() => this.resetSelection()}
/>}
{this.getFilterCount()>0 && <img className='selectionBtn'
{this.getFilterCount()>0 && <img className='PanelToolbar__button'
title='Remove all filters'
src={CLEAR_FILTERS}
onClick={() => this.clearFilters()}
Expand All @@ -422,24 +422,25 @@ class ChartsPanel extends React.Component {
visible={true}
badgeCount={this.getFilterCount()}
onClick={this.toggleFilters}/>
<img style={{paddingLeft: 5, cursor: 'pointer'}}
<img className='PanelToolbar__button'
title='Plot options and tools'
src={SETTINGS}
onClick={() => this.toggleOptions()}
/>
{ expandable && !expandedMode &&
<img style={{paddingLeft: 4, cursor: 'pointer'}}
<img className='PanelToolbar__button'
title='Expand this panel to take up a larger area'
src={OUTLINE_EXPAND}
onClick={() => {
dispatchChartExpanded(chartId, tblId, chartType, help_id);
dispatchSetLayoutMode(LO_MODE.expanded, LO_VIEW.xyPlots);
}}
/>}
{ help_id && <div style={{paddingLeft: 4, marginTop: -10}}> <HelpIcon helpId={help_id} /> </div>}

{ help_id && <div style={{display: 'inline-block', position: 'relative', top: -9}}> <HelpIcon helpId={help_id} /> </div>}
{ expandable && !expandedMode &&
(isBoolean(deletable) ? deletable : numRelatedCharts(tblId) > 1) && // when deletable is undefined, use related charts criterion
<img style={{alignSelf: 'baseline', padding: 2, cursor: 'pointer'}}
<img style={{display: 'inline-block', position: 'relative', top: -9, alignSelf: 'baseline', padding: 2, cursor: 'pointer'}}
title='Delete this chart'
src={DELETE}
onClick={() => {dispatchDelete(tblId, chartId, chartType);}}
Expand Down
17 changes: 6 additions & 11 deletions src/firefly/js/tables/ui/TablePanel.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,7 @@
}

.PagingBar__button:hover {
background-color: rgba(0,0,0,.15);
cursor: pointer;
}

Expand All @@ -122,29 +123,23 @@
background-image: url("/images/icons-2014/16x16_Backward.png");
}

.TablePanel__button {
height: 24px;
width: 24px;
margin: 0 2px;
}

.TablePanel__button.options {
.PanelToolbar__button.options {
background-image: url("/images/icons-2014/24x24_GearsNEW.png");
}

.TablePanel__button.textView {
.PanelToolbar__button.textView {
background-image: url("/images/icons-2014/24x24_TextView.png");
}

.TablePanel__button.tableView {
.PanelToolbar__button.tableView {
background-image: url("/images/icons-2014/24x24_TableView.png");
}

.TablePanel__button.save {
.PanelToolbar__button.save {
background-image: url("/images/icons-2014/24x24_Save.png");
}

.TablePanel__button.clearFilters {
.PanelToolbar__button.clearFilters {
background-image: url("/images/icons-2014/24x24_FilterOff_Circle.png");
}

Expand Down
24 changes: 12 additions & 12 deletions src/firefly/js/tables/ui/TablePanel.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ export class TablePanel extends Component {
if (isEmpty(columns)) return <Loading {...{showTitle, tbl_id, title, removable}}/>;

const selectInfoCls = SelectInfo.newInstance(selectInfo, startIdx);
const viewIcoStyle = 'TablePanel__button ' + (textView ? 'tableView' : 'textView');
const viewIcoStyle = 'PanelToolbar__button ' + (textView ? 'tableView' : 'textView');
const tableTopPos = showToolbar ? 29 : 0;
const TT_VIEW = textView ? TT_TABLE_VIEW : TT_TEXT_VIEW;

Expand All @@ -132,37 +132,37 @@ export class TablePanel extends Component {
<div className='TablePanel'>
<div className={'TablePanel__wrapper' + (border ? '--border' : '')}>
{showToolbar &&
<div role='toolbar' className='TablePanel__toolbar'>
<div className='PanelToolbar TablePanel__toolbar'>
{showTitle ? <TableTitle {...{tbl_id, title, removable}} /> : <div/>}
{showPaging && <PagingBar {...{currentPage, pageSize, showLoading, totalRows, callbacks:tableConnector}} /> }
<div className='group'>
<div className='PanelToolbar__group'>
{showFilterButton && filterCount > 0 &&
<button onClick={this.clearFilter}
<div onClick={this.clearFilter}
title={TT_CLEAR_FILTER}
className='TablePanel__button clearFilters'/>}
className='PanelToolbar__button clearFilters'/>}
{showFilterButton &&
<ToolbarButton icon={FILTER}
tip={TT_SHOW_FILTER}
visible={true}
badgeCount={filterCount}
onClick={this.toggleFilter}/>
}
<button onClick={this.toggleTextView}
<div onClick={this.toggleTextView}
title={TT_VIEW}
className={viewIcoStyle}/>
{showSave &&
<button onClick={this.saveTable}
<div onClick={this.saveTable}
title={TT_SAVE}
className='TablePanel__button save'/> }
className='PanelToolbar__button save'/> }
{showOptionButton &&
<button style={{marginLeft: '4px'}}
<div style={{marginLeft: '4px'}}
title={TT_OPTIONS}
onClick={this.toggleOptions}
className='TablePanel__button options'/> }
className='PanelToolbar__button options'/> }
{ expandable && !expandedMode &&
<button onClick={this.expandTable} title={TT_EXPAND}>
<div className='PanelToolbar__button' onClick={this.expandTable} title={TT_EXPAND}>
<img src={OUTLINE_EXPAND}/>
</button>}
</div>}
{ help_id && <div style={{marginTop:-10}}> <HelpIcon helpId={help_id} /> </div>}
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/firefly/js/ui/PagingBar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export class PagingBar extends Component {
return showingLabel;
} else {
return (
<div className='group'>
<div className='PanelToolbar__group'>
<div onClick={() => callbacks.onGotoPage(1)} className='PagingBar__button first' title='First Page'/>
<div onClick={() => callbacks.onGotoPage(currentPage - 1)} className='PagingBar__button previous' title='Previous Page'/>
<InputField
Expand Down
2 changes: 1 addition & 1 deletion src/firefly/js/visualize/ui/ImageMetaDataToolbarView.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,7 @@ function ImagePager({pageSize, tbl_id}) {
};

return (
<div role='toolbar'>
<div className='PanelToolbar'>
<PagingBar {...{currentPage, pageSize, showLoading, totalRows, callbacks:{onGotoPage}}} />
</div>
);
Expand Down