DM-7280: display wrong data when 'hidden' columns are in front of visible ones

src/firefly/html/css/global.css

@@ -96,6 +96,9 @@
     cursor: pointer;
 }
 
+.clickable:hover {
+    cursor: pointer;
+}
 
 .ff-href {
     color: #005da4; /*highlightColor*/

src/firefly/js/tables/ui/BasicTableView.jsx

@@ -153,7 +153,7 @@ export class BasicTableView extends React.Component {
                                   columnWidths, filterInfo, sortInfo, showUnits, showFilters,
                                   onSort, onFilter, onRowSelect, onSelectAll, onFilterSelected};
 
-        const headerHeight = 22 + (showUnits && 12) + (showFilters && 20);
+        const headerHeight = 22 + (showUnits && 8) + (showFilters && 22);
 
         return (
             <Resizable id='table-resizer' tabIndex='-1' onKeyDown={this.onKeyDown} className='TablePanel__frame' onResize={this.onResize}>
@@ -264,7 +264,7 @@ function makeColumns ({columns, columnWidths, data, selectable, showUnits, showF
         return (
             <Column
                 key={col.name}
-                columnKey={col.name}
+                columnKey={idx}
                 header={<HeadRenderer {...{col, showUnits, showFilters, filterInfo, sortInfo, onSort, onFilter}} />}
                 cell={<CellRenderer style={style} data={data} colIdx={idx} />}
                 fixed={fixed}
@@ -287,7 +287,7 @@ function makeColumns ({columns, columnWidths, data, selectable, showUnits, showF
         />);
         colsEl.splice(0, 0, cbox);
     }
-    return colsEl;
+    return colsEl.filter((c) => c);
 }
 
 

src/firefly/js/tables/ui/FilterEditor.jsx

@@ -85,9 +85,9 @@ FilterEditor.defaultProps = {
 function prepareOptionData(columns, sortInfo, filterInfo, selectable) {
 
     var cols = [
-        {name: 'Column', visibility: 'show', fixed: true},
-        {name: 'Filter', visibility: 'show'},
-        {name: 'Units', visibility: 'show'},
+        {name: 'Column', fixed: true},
+        {name: 'Filter'},
+        {name: 'Units'},
         {name: '', visibility: 'hidden'},
         {name: 'Selected', visibility: 'hidden'}
     ];
@@ -120,9 +120,12 @@ function prepareOptionData(columns, sortInfo, filterInfo, selectable) {
 
 function makeCallbacks(onChange, columns, data, orgFilterInfo='') {
     var onSelectAll = (checked) => {
-        const nColumns = cloneDeep(columns).filter((c) => c.visibility !== 'hidden');
-        nColumns.forEach((v) => {
-            v.visibility = checked ? 'show' : 'hide';
+        const nColumns = columns.map((c) => {
+            var col = cloneDeep(c);
+            if (col.visibility !== 'hidden') {
+                col.visibility = checked ? 'show' : 'hide';
+            }
+            return col;
         });
         onChange && onChange({columns: nColumns});
     };

src/firefly/js/tables/ui/TablePanel.css

@@ -84,13 +84,13 @@
 
 .TablePanel__header {
     white-space: nowrap;
-    height: calc(100% - 3px);
+    height: calc(100% - 1px);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-between;
-    margin: 2px;
-}
+    padding: 2px;
+    box-sizing: border-box;}
 
 button.paging_bar {
     height: 16px;

src/firefly/js/tables/ui/TableRenderer.js

@@ -5,7 +5,7 @@
 import React from 'react';
 import FixedDataTable from 'fixed-data-table';
 import sCompare from 'react-addons-shallow-compare';
-import {set, get, isEqual, pick, isString} from 'lodash';
+import {set, get, isEqual, pick} from 'lodash';
 
 import {FilterInfo, FILTER_CONDITION_TTIPS} from '../FilterInfo.js';
 import {SortInfo} from '../SortInfo.js';
@@ -108,13 +108,13 @@ export class SelectableHeader extends React.Component {
     render() {
         const {checked, onSelectAll, showUnits, showFilters, onFilterSelected, style} = this.props;
         return (
-            <div style={style} className='TablePanel__header'>
+            <div style={{padding: 0, ...style}} className='TablePanel__header'>
                 <input type='checkbox'
                        tabIndex={-1}
                        checked={checked}
                        onChange={(e) => onSelectAll(e.target.checked)}/>
                 {showUnits && <div/>}
-                {showFilters && <img className='button'
+                {showFilters && <img className='clickable'
                                      src={FILTER_SELECTED_ICO}
                                      onClick={onFilterSelected}
                                      title='Filter on selected rows'/>}
@@ -155,8 +155,8 @@ export class SelectableCell extends React.Component {
 /*---------------------------- CELL RENDERERS ----------------------------*/
 
 function getValue(props) {
-    const {rowIndex, data, colIdx} = props;
-    return get(data, [rowIndex, colIdx], 'undef');
+    const {rowIndex, data, columnKey} = props;
+    return get(data, [rowIndex, columnKey], 'undef');
 }
 
 export class TextCell extends React.Component {

src/firefly/js/ui/panel/TabPanel.css

@@ -13,20 +13,18 @@
     outline: none;
     color:black; /*CVAL-BLACK*/
     cursor:pointer;
+    height: 18px;
     margin-left:6px;
     padding:2px 6px;
     font-weight: normal;
     text-align:center;
-    \-moz-border-radius-topleft: 5px;
-    \-webkit-border-top-left-radius: 5px;
     border-top-left-radius: 5px;
     white-space: nowrap;
     overflow: hidden;
 }
 
 .TabPanel__Tab--selected {
     width: auto;
-    height: auto;
     cursor:default;
     font-weight:bold;
     background: #c8c8c8;

src/firefly/js/ui/panel/TabPanel.jsx

@@ -182,18 +182,20 @@ export class Tab extends Component {
         }
 
         // removable width: 14px
-        const textStyle = maxTitleWidth ? {width: maxTitleWidth-(removable?14:0)} : {};
+        const textStyle = maxTitleWidth ? {float: 'left', width: maxTitleWidth-(removable?14:0)} : {};
 
         return (
-            <li className={tabClassName}>
-                <div style={textStyle} className='text-ellipsis' title={name} onClick={() => onSelect(id,name)}>
-                     {name}
+            <li className={tabClassName} onClick={() => onSelect(id,name)}>
+                <div>
+                    <div style={textStyle} className='text-ellipsis' title={name}>
+                         {name}
+                    </div>
+                    {removable &&
+                            <div style={{right: -4, top: -2}} className='btn-close'
+                                 title='Remove Tab'
+                                 onClick={() => onTabRemove && onTabRemove(name)}/>
+                    }
                 </div>
-                {removable &&
-                        <div style={{right: -4, top: -2}} className='btn-close'
-                             title='Remove Tab'
-                             onClick={() => onTabRemove && onTabRemove(name)}/>
-                }
             </li>);
     }
 }