Improve UI

src/expression/Operand.ts

@@ -1,7 +1,6 @@
-import {numberParser} from './numberParser';
 import { ExpressionElement as ExpressionElement } from './expression-interfaces';
 import { NumberBase } from '../core/formatter';
-import { INT32_MAX_VALUE, INT32_MIN_VALUE, INT64_MAX_VALUE, INT64_MIN_VALUE, UINT64_MAX_VALUE } from '../core/const';
+import { INT64_MAX_VALUE, INT64_MIN_VALUE, UINT64_MAX_VALUE } from '../core/const';
 import { Integer, JsNumber, isInteger, asInteger } from '../core/Integer';
 
 var globalId : number = 1;

src/expression/components/BitwiseResultView.tsx

@@ -26,8 +26,9 @@ export default class BitwiseResultView extends React.Component<BitwiseResultView
 
     render() {
 
-         let model : BitwiseResultViewModel | null = null
+        let model : BitwiseResultViewModel | null = null
-         const isListOfNumbers = this.props.expression instanceof ListOfNumbers;
+        const allowSignChange = this.props.expression instanceof ListOfNumbers;
+        
         
         try
         { 
@@ -38,7 +39,12 @@ export default class BitwiseResultView extends React.Component<BitwiseResultView
             return <div className='error'>Error: {text}</div>
         }
 
-        var rows = this.getRows(model!, isListOfNumbers);
+        const showInfoColumn : boolean = model.items
+            .map(i => willInfoColumnBeVisible(i.expressionElement, model!.maxNumberOfBits, allowSignChange))
+            .filter(p => p == true)
+            .length > 0;
+
+        var rows = this.getRows(model!, showInfoColumn, allowSignChange);
 
         return <table className="expression">
             <tbody>
@@ -47,31 +53,31 @@ export default class BitwiseResultView extends React.Component<BitwiseResultView
         </table>
     }
 
-    getRows(model: BitwiseResultViewModel, allowSignChange : boolean): JSX.Element[] {
+    getRows(model: BitwiseResultViewModel, showInfoColumn : boolean, allowSignChange : boolean): JSX.Element[] {
 
         this.maxSeenLengthNumberOfBits = Math.max(model.maxNumberOfBits, this.maxSeenLengthNumberOfBits);
 
         return model.items.map((itm, i) =>
-            <ExpressionRow
+            <ExpressionElementTableRow
                 key={i}
                 sign={itm.sign}
                 css={itm.css}
                 bitSize={itm.maxBitSize}
                 allowFlipBits={itm.allowFlipBits}
                 allowSignChange={allowSignChange}
-                expressionItem={itm.expression}
+                expressionItem={itm.expressionElement}
                 emphasizeBytes={this.props.emphasizeBytes}
                 maxNumberOfBits={this.maxSeenLengthNumberOfBits}
+                showInfoColumn={showInfoColumn}
                 onBitFlipped={() => this.onBitFlipped()} />);
     }
 
     onBitFlipped() {
         this.forceUpdate();
-        //this.setState({d:new Date()});
     }
 }
 
-type ExpressionRowProps = {
+type ExpressionElementRowProps = {
     sign: string,
     css: string,
     bitSize: number,
@@ -80,14 +86,15 @@ type ExpressionRowProps = {
     allowFlipBits: boolean,
     allowSignChange: boolean,
     expressionItem: ExpressionElement,
-    onBitFlipped: any
+    onBitFlipped: any,
+    showInfoColumn: boolean
 }
 
-class ExpressionRow extends React.Component<ExpressionRowProps> {
+class ExpressionElementTableRow extends React.Component<ExpressionElementRowProps> {
     
     infoWasShown: boolean = false;
 
-    constructor(props: ExpressionRowProps) {
+    constructor(props: ExpressionElementRowProps) {
         super(props);
         this.state = { operand: null };
     }
@@ -110,8 +117,8 @@ class ExpressionRow extends React.Component<ExpressionRowProps> {
                     onFlipBit={args => this.flipBit(args)} />
             </td>
             <td className="other">{this.getAlternative()}</td>
-            <td className="info accent1" data-test-name='ignore'>{this.getInfo(maxNumberOfBits)}</td>
+            <td className="info accent1" data-test-name='ignore'>{this.props.showInfoColumn ? this.getInfo(maxNumberOfBits) : null}</td>
-        </tr>;;
+        </tr>;
     }
 
     getLabel(): string {
@@ -170,12 +177,7 @@ class ExpressionRow extends React.Component<ExpressionRowProps> {
     getInfo(maxNumberOfBits:number) {
         
         const op = this.props.expressionItem.getUnderlyingOperand();
-        const allBitsDisplayed = op.value.maxBitSize != 32 || op.value.maxBitSize <= maxNumberOfBits;
         const { allowSignChange } = this.props;
-        const hasLabel = op.label.length > 0;
-
-        if(!allBitsDisplayed && !hasLabel && !this.infoWasShown)
-            return null;
 
         this.infoWasShown = true;
 
@@ -194,14 +196,22 @@ class ExpressionRow extends React.Component<ExpressionRowProps> {
 
         children.push(<span title={title} style={{cursor:"help"}}>{text.trim()}</span>);
                 
-        if(allBitsDisplayed)
+        if(this.props.maxNumberOfBits >= op.value.maxBitSize)
         {
             if(allowSignChange)
                 children.push(<button className='accent1' title={signedTitle} onClick={() => this.onChangeSign()}>{signedStr}</button>);
             else if(!op.value.signed)
                 children.push(<span className='accent1'> {signedStr}</span>)
         }
-
+        
         return <React.Fragment>{children}</React.Fragment>
     }
+}
+
+function willInfoColumnBeVisible(expr: ExpressionElement, maxNumberOfBits: number, allowSignChange : boolean) {
+        
+    const op = expr.getUnderlyingOperand();
+    const allBitsDisplayed = op.value.maxBitSize != 32 || op.value.maxBitSize <= maxNumberOfBits;
+    const hasLabel = op.label.length > 0;
+    return allBitsDisplayed || hasLabel;
 }

src/expression/components/BitwiseResultViewModel.ts

@@ -11,7 +11,7 @@ type Config = {
 type ExpressionRowModel = {
     sign: string;
     css: string;
-    expression: ExpressionElement;
+    expressionElement: ExpressionElement;
     allowFlipBits: boolean;
     label: string;
     maxBitSize: number;
@@ -84,7 +84,7 @@ export default class BitwiseResultViewModel {
         this.items.push({ 
             sign:'', 
             css: '',
-            expression: expr,
+            expressionElement: expr,
             allowFlipBits: this.allowFlipBits,
             label: '',
             maxBitSize: expr.value.maxBitSize,
@@ -102,7 +102,7 @@ export default class BitwiseResultViewModel {
             sign: expr.operator, 
             css: '',
             label: this.getLabel(resultNumber),
-            expression: expr.operand,
+            expressionElement: expr.operand,
             allowFlipBits: this.allowFlipBits,
             maxBitSize: resultNumber.value.maxBitSize
         });
@@ -115,7 +115,7 @@ export default class BitwiseResultViewModel {
         this.items.push({
             sign: expr.operator + formatter.numberToString(child.value, child.base),
             css: 'expression-result',
-            expression: resultExpr,
+            expressionElement: resultExpr,
             allowFlipBits: false,
             label: '',
             maxBitSize: resultExpr.value.maxBitSize
@@ -128,7 +128,7 @@ export default class BitwiseResultViewModel {
         this.items.push({ 
             sign:'=', 
             css: 'expression-result',
-            expression: expr, 
+            expressionElement: expr, 
             allowFlipBits: false,
             label: '',
             maxBitSize: expr.value.maxBitSize

src/expression/expression.ts

@@ -3,7 +3,7 @@ import Operator from './Operator'
 import ListOfNumbers from './ListOfNumbers';
 import BitwiseOperation from './BitwiseOperation';
 import { Expression, ExpressionElement } from './expression-interfaces';
-import { numberParser, numberRegexString } from './numberParser';
+import { numberParser } from './numberParser';
 
 export { default as Operand } from './Operand';
 export { default as Operator } from './Operator';