FIREFLY-136: Support right justification of numeric columns in Firefly table

src/firefly/html/test/tests-main.html

@@ -182,9 +182,9 @@
     <div id="expected" >
         <div>Using META-INFO API to show cell value as links
             <ul class='expected-list'>
-                <li><b>band</b> should be shown as links</li>
-                <li>first one links to irsa</li>
-                <li>second links to ivoa with constant text</li>
+                <li><b>band</b> should be shown as links, right aligned</li>
+                <li><b>in_row_id</b> should contain 2 links</li>
+                <li>one with its value and the second is fixed text 'ivoa'</li>
             </ul>
         </div>
     </div>
@@ -195,7 +195,8 @@
         function onFireflyLoaded(firefly) {
             tblReq1 = firefly.util.table.makeFileRequest(null, 'http://web.ipac.caltech.edu/staff/roby/demo/WiseDemoTable.tbl',null,
                 { META_INFO: {
-                    "col.band.Links": [{href: "https://irsa.ipac.caltech.edu/?id="}, {href: "http://ivoa.net/?id=", value: 'ivoa'}]
+                    "col.band.Links": [{href: "https://irsa.ipac.caltech.edu/?id="}],
+                    "col.in_row_id.Links": [{href: "https://irsa.ipac.caltech.edu/?id="}, {href: "http://ivoa.net/?id=", value: 'ivoa'}]
                 }});
             firefly.showTable('tables-1', tblReq1);
         }

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

@@ -361,7 +361,7 @@ function makeColumnTag(props, col, idx) {
             key={col.name}
             columnKey={idx}
             header={<HeadRenderer {...{col, showUnits, showTypes, showFilters, filterInfo, sortInfo, onSort, onFilter, tbl_id}} />}
-            cell={<CellRenderer {...{style, data, tbl_id, colIdx:idx}} />}
+            cell={<CellRenderer {...{style, data, tbl_id, col, colIdx:idx}} />}
             fixed={fixed}
             width={columnWidths[idx]}
             isResizable={true}

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

@@ -310,6 +310,10 @@
     padding: 3px;
 }
 
+.public_fixedDataTableCell_cellContent.right_align {
+    text-align: right;
+}
+
 .public_fixedDataTableCell_columnResizerKnob {
     background-color: #0284ff
 }

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

@@ -2,7 +2,7 @@
  * License information at https://github.com/Caltech-IPAC/firefly/blob/master/License.txt
  */
 
-import React, {Component, PureComponent, Fragment, useRef, useCallback} from 'react';
+import React, {Component, PureComponent, useRef, useCallback} from 'react';
 import FixedDataTable from 'fixed-data-table-2';
 import {set, get, isEqual, pick} from 'lodash';
 
@@ -11,7 +11,7 @@ import {isNumericType, tblDropDownId, getTblById, getColumn} from '../TableUtil.
 import {SortInfo} from '../SortInfo.js';
 import {InputField} from '../../ui/InputField.jsx';
 import {SORT_ASC, UNSORTED} from '../SortInfo';
-import {toBoolean} from '../../util/WebUtil.js';
+import {toBoolean, isNumeric} from '../../util/WebUtil.js';
 
 import ASC_ICO from 'html/images/sort_asc.gif';
 import DESC_ICO from 'html/images/sort_desc.gif';
@@ -241,11 +241,14 @@ export class TextCell extends Component {
     // }
     //
     render() {
-        var val = getValue(this.props) || '';
-        const lineHeight = this.props.height - 6 + 'px';  // 6 is the top/bottom padding.
+        const {col={}, style, height} = this.props;
+        const isNumeric = isNumericType(col);
+        let val = getValue(this.props) || '';
+        const lineHeight = height - 6 + 'px';  // 6 is the top/bottom padding.
         val = (val.search && val.search(html_regex) >= 0) ? <div dangerouslySetInnerHTML={{__html: val}}/> : val;
+        const className = 'public_fixedDataTableCell_cellContent' + (isNumeric ? ' right_align' : '');
         return (
-            <div style={{lineHeight, ...this.props.style}} className='public_fixedDataTableCell_cellContent'>{val}</div>
+            <div style={{lineHeight, ...style}} className={className}>{val}</div>
         );
     }
 }
@@ -255,29 +258,39 @@ export class TextCell extends Component {
  * LinkCell is implementing A.4 using link substitution based on A.1
  */
 export const LinkCell = React.memo((props) => {
-    const {tbl_id, col={}, rowIndex, height, style={}} = props;
+    const {tbl_id, col={}, rowIndex, style={}} = props;
     const val = getValue(props) || '';
-
-    const mStyle = {lineHeight: `${height - 6}px`, ...style};
+    let mStyle = style;
+    let className = 'public_fixedDataTableCell_cellContent';
     if (col.links) {
         const tableModel = getTblById(tbl_id);
+        if (col.links.length === 1) {
+            const rval = resolveHRefVal(tableModel, get(col, 'links.0.value', val), rowIndex);
+            className += isNumeric(rval) ? ' right_align' : '';
+        }
         return (
-            <Fragment>
+            <div className={className}>
                 {
                     col.links.map( (link={}, idx) => {
                         const {href, title, value=val, action} = link;
                         const target = action || '_blank';
                         const rvalue = resolveHRefVal(tableModel, value, rowIndex);
                         const rhref = resolveHRefVal(tableModel, href, rowIndex, val);
+                        if (idx > 0) mStyle = {marginLeft: 3, ...mStyle};
                         return (<ATag key={'ATag_' + idx} href={rhref}
                                       {...{value:rvalue, title, target, style:mStyle}}
                                 />);
                     })
                 }
-            </Fragment>
+            </div>
         );
     } else {
-        return <ATag href={val} value={val} target='_blank' style={mStyle}/>;
+        className += isNumeric(val) ? ' right_align' : '';
+        return (
+            <div className={className}>
+                <ATag href={val} value={val} target='_blank' style={mStyle}/>
+            </div>
+        );
     }
 });
 
@@ -366,10 +379,6 @@ const ATag = React.memo(({value='', title, href, target, style={}}) => {
         value = imageStubMap[imgStubKey] || <img data-src={imgStubKey}/>;   // if a src is given but, not found.. show bad img.
     }
 
-    return (
-        <div style={{display: 'inline-flex', height: '100%', alignItems: 'center', padding: '0 3px', ...style}}>
-            <a {...{title, href, target}}> {value} </a>
-        </div>
-    );
+    return <a {...{title, href, target, style}}> {value} </a>;
 });
 

src/firefly/js/util/WebUtil.js

@@ -836,4 +836,8 @@ export function hashCode(str) {
      * integers. Since we want the results to be always positive, convert the
      * signed int to an unsigned by doing an unsigned bitshift. */
     return hash >>> 0;
+}
+
+export function isNumeric(n) {
+    return !isNaN(parseFloat(n)) && isFinite(n);
 }