Rework raw values section (#46)

* Change SelectedModelDetails to use a table, rework styles, remove RawValues files that are not used.

* Revise styling based on design review

* Fix text centering

* Fix double negative sign issue

* Remove !important from styles

Co-authored-by: Nicholas King <v-nicki@microsoft.com>

tests/ts/main.test.tsx

@@ -5,16 +5,10 @@ import { TestScheduler } from 'jest'
 import { act } from 'react-dom/test-utils'
 import { unmountComponentAtNode } from 'react-dom'
 
-import RawValues from '@App/RawValues'
 import DataSelector from '@App/DataSelector'
 
 afterEach(cleanup);
 
-test('RawValues renders', () => {
-    render(<RawValues data={{}}/>);
-    expect(screen.getByText("Raw Values Table goes here")).toBeInTheDocument();
-});
-
 function testCheckbox(label: string): void {
     expect(screen.getByLabelText(label)).toBeChecked();
     fireEvent.click(screen.getByLabelText(label));

widget/MainContainer.tsx

@@ -7,7 +7,6 @@ import PerformanceCompatibility from "./PerformanceCompatibility.tsx";
 import Legend from "./Legend.tsx";
 import IntersectionBetweenModelErrors from "./IntersectionBetweenModelErrors.tsx";
 import IncompatiblePointDistribution from "./IncompatiblePointDistribution.tsx";
-import RawValues from "./RawValues.tsx";
 import ErrorInstancesTable from "./ErrorInstancesTable.tsx";
 import DataSelector from "./DataSelector.tsx"
 import SweepManager from "./SweepManager.tsx";
@@ -127,7 +126,9 @@ function Container({
               selectedDataPoint={selectedDataPoint}
             />
           </div>
-          {(selectedDataPoint != null)? <SelectedModelDetails btc={selectedDataPoint.btc} bec={selectedDataPoint.bec} performance={selectedDataPoint.h2_performance} lambda_c={selectedDataPoint.lambda_c} />: null}
+          {(selectedDataPoint != null)? 
+            <SelectedModelDetails btc={selectedDataPoint.btc} bec={selectedDataPoint.bec} h1Performance={data.h1_performance} h2Performance={selectedDataPoint.h2_performance} performanceMetric={data.performance_metric} lambdaC={selectedDataPoint.lambda_c} />
+            : null}
           <div className="row">
             <IntersectionBetweenModelErrors selectedDataPoint={selectedDataPoint} />
             <IncompatiblePointDistribution selectedDataPoint={selectedDataPoint} />

widget/RawValues.tsx

@@ -1,40 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import React, { Component } from "react";
-import ReactDOM from "react-dom";
-import * as d3 from "d3";
-
-
-type RawValuesState = {
-  data: any
-}
-
-type RawValuesProps = {
-  data: any
-}
-
-class RawValues extends Component<RawValuesProps, RawValuesState> {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      data: this.props.data
-    };
-  }
-
-  componentWillReceiveProps(nextProps) {
-    this.setState({
-      data: nextProps.data
-    });
-  }
-
-  render() {
-    return (
-      <div className="table">
-        Raw Values Table goes here
-      </div>
-    );
-  }
-}
-export default RawValues;

widget/SelectedModelDetails.tsx

@@ -9,8 +9,10 @@ import * as d3 from "d3";
 type SelectedModelDetailsProps = {
   btc: number,
   bec: number,
-  performance: number,
-  lambda_c: number
+  h1Performance: number,
+  h2Performance: number,
+  performanceMetric: string,
+  lambdaC: number
 }
 
 class SelectedModelDetails extends Component<SelectedModelDetailsProps, null> {
@@ -19,19 +21,22 @@ class SelectedModelDetails extends Component<SelectedModelDetailsProps, null> {
   }
 
   render() {
-    var h2ModelName = "MyModel";
+    let deltaPerf = this.props.h1Performance != 0 ? (this.props.h2Performance - this.props.h1Performance) / this.props.h1Performance * 100 : 0;
 
     return (
-      <div className="model-details">
-        <div className="model-details-row">
-          <div className="model-details-info"><div className="model-details-info-data">{h2ModelName}</div><div className="model-details-info-type">(h2)</div></div>
-          <div className="model-details-info"><div className="model-details-info-data">{this.props.lambda_c.toFixed(2)}</div><div className="model-details-info-type">(lambda_c)</div></div>
-          <div className="model-details-info"><div className="model-details-info-data">{this.props.performance.toFixed(3)}</div><div className="model-details-info-type">(Performance)</div></div>
-          <div className="model-details-info"><div className="model-details-info-data">{this.props.btc.toFixed(3)}</div><div className="model-details-info-type">(BTC)</div></div>
-          <div className="model-details-info"><div className="model-details-info-data">{this.props.bec.toFixed(3)}</div><div className="model-details-info-type">(BEC)</div></div>
-        </div>
-      </div>
-    );
+      <table className="model-details" id="raw-values-table">
+        <tr className="model-details-row">
+          <td><span className="model-details-info-type">BTC</span>&nbsp;<span className="model-details-info-data">{this.props.btc.toFixed(3)}</span></td>
+          <td><span className="model-details-info-type">h1 {this.props.performanceMetric}</span>&nbsp;<span className="model-details-info-data">{this.props.h1Performance.toFixed(3)}</span></td>
+          <td><span className="model-details-info-type">Δ{this.props.performanceMetric}</span>&nbsp;<span className="model-details-info-data">{(deltaPerf >= 0 ? "+" : "") + deltaPerf.toFixed(3)}%</span></td>
+        </tr>
+        <tr className="model-details-row">
+          <td><span className="model-details-info-type">BEC</span>&nbsp;<span className="model-details-info-data">{this.props.bec.toFixed(3)}</span></td>
+          <td><span className="model-details-info-type">h2 {this.props.performanceMetric}</span>&nbsp;<span className="model-details-info-data">{this.props.h2Performance.toFixed(3)}</span></td>
+          <td><span className="model-details-info-type">λ<sub>c</sub></span>&nbsp;<span className="model-details-info-data">{this.props.lambdaC.toFixed(2)}</span></td>
+        </tr>
+      </table>
+    )
   }
 }
 export default SelectedModelDetails;

widget/widget.css

@@ -188,21 +188,24 @@ label {
   display: block;
 }
 
-.model-details {
+#raw-values-table {
   width: 700px;
+  margin-top: 0px;
   border-style: solid;
   border-width: 1px;
 }
 
-.model-details-row {
+.model-details .model-details-row {
   width: 100%;
   display: inline-block;
   text-align: center;
+  padding: 0.1em 0.1em;
 }
 
-.model-details-info {
+.model-details-row td {
   display: inline-block;
-  width: 100px;
+  text-align: center;
+  width: 180px;
 }
 
 .model-details-info-data {