From 9e3b08cdf6015ff1a7bf38a42f8ebd3d6ce8399f Mon Sep 17 00:00:00 2001
From: loi <loi@ipac.caltech.edu>
Date: Mon, 26 Sep 2016 15:50:44 -0700
Subject: [PATCH 1/2] DM-7700: Atlas table filtering doesn't work properly

---
 src/firefly/html/css/global.css               | 10 ++++----
 .../js/charts/ui/ChartsTableViewPanel.jsx     |  6 ++---
 src/firefly/js/tables/ui/TablePanel.css       |  1 +
 src/firefly/js/tables/ui/TablePanel.jsx       | 24 +++++++++----------
 src/firefly/js/ui/PagingBar.jsx               |  2 +-
 .../visualize/ui/ImageMetaDataToolbarView.jsx |  2 +-
 6 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/src/firefly/html/css/global.css b/src/firefly/html/css/global.css
index dd2b5ee650..333fe79a57 100644
--- a/src/firefly/html/css/global.css
+++ b/src/firefly/html/css/global.css
@@ -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;
@@ -229,11 +229,11 @@
     background: none;
 }
 
-[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;
 }
diff --git a/src/firefly/js/charts/ui/ChartsTableViewPanel.jsx b/src/firefly/js/charts/ui/ChartsTableViewPanel.jsx
index ed0bc11ecf..1b820690b8 100644
--- a/src/firefly/js/charts/ui/ChartsTableViewPanel.jsx
+++ b/src/firefly/js/charts/ui/ChartsTableViewPanel.jsx
@@ -397,11 +397,11 @@ 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'>
+                <div className='PanelToolbar_group'>
                     {this.displayZoomOriginal() && <img className='selectionBtn'
                          title='Zoom out to original chart'
                          src={ZOOM_ORIGINAL}
diff --git a/src/firefly/js/tables/ui/TablePanel.css b/src/firefly/js/tables/ui/TablePanel.css
index 5a86a47f53..a73026d93f 100644
--- a/src/firefly/js/tables/ui/TablePanel.css
+++ b/src/firefly/js/tables/ui/TablePanel.css
@@ -103,6 +103,7 @@
 }
 
 .PagingBar__button:hover {
+    background-color: rgba(0,0,0,.15);
     cursor: pointer;
 }
 
diff --git a/src/firefly/js/tables/ui/TablePanel.jsx b/src/firefly/js/tables/ui/TablePanel.jsx
index 7c9ba99708..d3c0a9ebc6 100644
--- a/src/firefly/js/tables/ui/TablePanel.jsx
+++ b/src/firefly/js/tables/ui/TablePanel.jsx
@@ -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 TablePanel__button ' + (textView ? 'tableView' : 'textView');
         const tableTopPos = showToolbar ? 29 : 0;
         const TT_VIEW = textView ? TT_TABLE_VIEW : TT_TEXT_VIEW;
 
@@ -132,14 +132,14 @@ 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 TablePanel__button clearFilters'/>}
                                 {showFilterButton &&
                                     <ToolbarButton icon={FILTER}
                                                    tip={TT_SHOW_FILTER}
@@ -147,22 +147,22 @@ export class TablePanel extends Component {
                                                    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 TablePanel__button save'/> }
                                 {showOptionButton &&
-                                    <button style={{marginLeft: '4px'}}
+                                    <div style={{marginLeft: '4px'}}
                                             title={TT_OPTIONS}
                                             onClick={this.toggleOptions}
-                                            className='TablePanel__button options'/> }
+                                            className='PanelToolbar__button TablePanel__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>
diff --git a/src/firefly/js/ui/PagingBar.jsx b/src/firefly/js/ui/PagingBar.jsx
index 90a2f50d22..93c2818d0e 100644
--- a/src/firefly/js/ui/PagingBar.jsx
+++ b/src/firefly/js/ui/PagingBar.jsx
@@ -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
diff --git a/src/firefly/js/visualize/ui/ImageMetaDataToolbarView.jsx b/src/firefly/js/visualize/ui/ImageMetaDataToolbarView.jsx
index b3171644e1..fe5be2cd54 100644
--- a/src/firefly/js/visualize/ui/ImageMetaDataToolbarView.jsx
+++ b/src/firefly/js/visualize/ui/ImageMetaDataToolbarView.jsx
@@ -158,7 +158,7 @@ function ImagePager({pageSize, tbl_id}) {
     };
     
     return (
-        <div role='toolbar'>
+        <div className='PanelToolbar'>
             <PagingBar {...{currentPage, pageSize, showLoading, totalRows, callbacks:{onGotoPage}}} />
         </div>
     );

From 579b1dd1eb211c81e4b706e3bd534a377108f63e Mon Sep 17 00:00:00 2001
From: loi <loi@ipac.caltech.edu>
Date: Wed, 28 Sep 2016 11:47:54 -0700
Subject: [PATCH 2/2] DM-7700: implements change request

 - fix xy-plot help icon alignment
 - highlight xy-plot button when hover
---
 src/firefly/html/css/global.css               |  1 +
 src/firefly/js/charts/ui/ChartPanel.css       |  5 -----
 .../js/charts/ui/ChartsTableViewPanel.jsx     | 21 ++++++++++---------
 src/firefly/js/tables/ui/TablePanel.css       | 16 +++++---------
 src/firefly/js/tables/ui/TablePanel.jsx       |  8 +++----
 5 files changed, 21 insertions(+), 30 deletions(-)

diff --git a/src/firefly/html/css/global.css b/src/firefly/html/css/global.css
index 333fe79a57..31b8c5bb6c 100644
--- a/src/firefly/html/css/global.css
+++ b/src/firefly/html/css/global.css
@@ -227,6 +227,7 @@
     padding: 0;
     border-radius: 2px;
     background: none;
+    margin: 0 2px;
 }
 
 .PanelToolbar__button:active {
diff --git a/src/firefly/js/charts/ui/ChartPanel.css b/src/firefly/js/charts/ui/ChartPanel.css
index efbc7e3a98..2a6524173f 100644
--- a/src/firefly/js/charts/ui/ChartPanel.css
+++ b/src/firefly/js/charts/ui/ChartPanel.css
@@ -51,8 +51,3 @@
     overflow: auto;
     box-shadow: -2px 0 2px 0 rgba(0,0,0,0.50);
 }
-
-.selectionBtn {
-    padding: 0 5px;
-    cursor: pointer;
-}
diff --git a/src/firefly/js/charts/ui/ChartsTableViewPanel.jsx b/src/firefly/js/charts/ui/ChartsTableViewPanel.jsx
index 1b820690b8..dc35ab69ef 100644
--- a/src/firefly/js/charts/ui/ChartsTableViewPanel.jsx
+++ b/src/firefly/js/charts/ui/ChartsTableViewPanel.jsx
@@ -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()}
@@ -402,17 +402,17 @@ class ChartsPanel extends React.Component {
                     {this.renderSelectionButtons()}
                 </div>
                 <div className='PanelToolbar_group'>
-                    {this.displayZoomOriginal() && <img className='selectionBtn'
+                    {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()}
@@ -422,13 +422,13 @@ 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={() => {
@@ -436,10 +436,11 @@ class ChartsPanel extends React.Component {
                             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);}}
diff --git a/src/firefly/js/tables/ui/TablePanel.css b/src/firefly/js/tables/ui/TablePanel.css
index a73026d93f..ca7ce74325 100644
--- a/src/firefly/js/tables/ui/TablePanel.css
+++ b/src/firefly/js/tables/ui/TablePanel.css
@@ -123,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");
 }
 
diff --git a/src/firefly/js/tables/ui/TablePanel.jsx b/src/firefly/js/tables/ui/TablePanel.jsx
index d3c0a9ebc6..4e0c6e66d9 100644
--- a/src/firefly/js/tables/ui/TablePanel.jsx
+++ b/src/firefly/js/tables/ui/TablePanel.jsx
@@ -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 = 'PanelToolbar__button 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;
 
@@ -139,7 +139,7 @@ export class TablePanel extends Component {
                                 {showFilterButton && filterCount > 0 &&
                                     <div onClick={this.clearFilter}
                                             title={TT_CLEAR_FILTER}
-                                            className='PanelToolbar__button TablePanel__button clearFilters'/>}
+                                            className='PanelToolbar__button clearFilters'/>}
                                 {showFilterButton &&
                                     <ToolbarButton icon={FILTER}
                                                    tip={TT_SHOW_FILTER}
@@ -153,12 +153,12 @@ export class TablePanel extends Component {
                                 {showSave &&
                                     <div onClick={this.saveTable}
                                             title={TT_SAVE}
-                                            className='PanelToolbar__button TablePanel__button save'/> }
+                                            className='PanelToolbar__button save'/> }
                                 {showOptionButton &&
                                     <div style={{marginLeft: '4px'}}
                                             title={TT_OPTIONS}
                                             onClick={this.toggleOptions}
-                                            className='PanelToolbar__button TablePanel__button options'/> }
+                                            className='PanelToolbar__button options'/> }
                                 { expandable && !expandedMode &&
                                     <div className='PanelToolbar__button' onClick={this.expandTable} title={TT_EXPAND}>
                                         <img src={OUTLINE_EXPAND}/>