From a6d299a48a2596b87ab7ecb2f9556e7a78c19189 Mon Sep 17 00:00:00 2001
From: Nicholas King <v-nicki@microsoft.com>
Date: Wed, 26 May 2021 18:40:27 -0700
Subject: [PATCH 1/2] Increase button size, chart text, bar chart border

---
 .../components/PerspectiveScoresBarChart.tsx  | 13 +++++++++--
 .../PerspectiveScoresSpiderChart.tsx          | 10 ++++-----
 frontend/components/TextGenerationControl.tsx | 19 +++++++++++-----
 frontend/components/TextGenerationResults.tsx | 22 +++++++++++--------
 4 files changed, 42 insertions(+), 22 deletions(-)

diff --git a/frontend/components/PerspectiveScoresBarChart.tsx b/frontend/components/PerspectiveScoresBarChart.tsx
index b31350a..033c0ca 100644
--- a/frontend/components/PerspectiveScoresBarChart.tsx
+++ b/frontend/components/PerspectiveScoresBarChart.tsx
@@ -87,7 +87,7 @@ class PerspectiveScoresBarChart extends Component<PerspectiveScoresBarChartProps
         .attr('width',w)
         .attr('float', 'left');
 
-    var xScale = d3.scaleBand().range([0, w]).padding(0.4),
+    var xScale = d3.scaleBand().range([0, w-10]).padding(0.4),
         yScale = d3.scaleLinear().range([h, 0]);
 
     var g = svg.append("g")
@@ -97,7 +97,7 @@ class PerspectiveScoresBarChart extends Component<PerspectiveScoresBarChartProps
     yScale.domain([0.0, 1.0]);
 
     var selectedScoreObj = scores.filter(scoreObj => (scoreObj.label == this.state.selectedScore))[0];
-    var selectedScoreMessage = `${selectedScoreObj.scoreName}: ${selectedScoreObj.value.toFixed(2)}`;
+    var selectedScoreMessage = `${selectedScoreObj.scoreName}: ${(selectedScoreObj.value*100).toFixed(2)}%`;
 
     g.append("g")
      .attr("transform", "translate(0," + h + ")")
@@ -117,6 +117,15 @@ class PerspectiveScoresBarChart extends Component<PerspectiveScoresBarChartProps
      .attr("y", function(d) { return yScale(d.value); })
      .attr("width", xScale.bandwidth())
      .attr("height", function(d) { return h - yScale(d.value); })
+     .attr("fill-opacity", function(d) { 
+        if (d.value < 0.33) {
+          return ".65";
+        }
+        if (d.value < 0.66) {
+          return ".8";
+        }
+        return "1";
+      })
      .classed("highlighted-bar", function(d) { return d.label == _this.state.selectedScore })
      .on("click", function(d) {
        _this.setSelectedScore(d.label);
diff --git a/frontend/components/PerspectiveScoresSpiderChart.tsx b/frontend/components/PerspectiveScoresSpiderChart.tsx
index 6cb7987..fe5aeee 100644
--- a/frontend/components/PerspectiveScoresSpiderChart.tsx
+++ b/frontend/components/PerspectiveScoresSpiderChart.tsx
@@ -43,9 +43,9 @@ class PerspectiveScoresSpiderChart extends Component<PerspectiveScoresSpiderChar
     var body = d3.select(this.node.current);
 
     var h = 310
-    var w = 450;
+    var w = 500;
     var maxRadius = 125;
-    var centerX = 225;
+    var centerX = 250;
     var centerY = 155;
 
     // SVG
@@ -79,9 +79,9 @@ class PerspectiveScoresSpiderChart extends Component<PerspectiveScoresSpiderChar
 
     const getLabelOffset = (index: number, label: string) => {
       if (index == 1 || index == 2) {
-        return {"x":  -(label.length) * 5, "y": 0.0};
+        return {"x":  -(label.length) * 6, "y": 0.0};
       } else if (index == 3) {
-        return {"x":  -(label.length) * 5, "y": 6};
+        return {"x":  -(label.length) * 5, "y": 10};
       } else if (index == 4) {
         return {"x": -(label.length) * 2, "y": 12};
       } else if (index == 5) {
@@ -113,7 +113,7 @@ class PerspectiveScoresSpiderChart extends Component<PerspectiveScoresSpiderChar
         svg.append("text")
         .attr("x", label_coordinate.x + label_offset.x)
         .attr("y", label_coordinate.y + label_offset.y)
-        .attr("font-size", "12px")
+        .attr("font-size", "14px")
         .text(axisName);
     }
 
diff --git a/frontend/components/TextGenerationControl.tsx b/frontend/components/TextGenerationControl.tsx
index 8612b86..10d3643 100644
--- a/frontend/components/TextGenerationControl.tsx
+++ b/frontend/components/TextGenerationControl.tsx
@@ -144,13 +144,19 @@ class TextGenerationControl extends React.Component<
           }}
         >
           <div className="flex items-center">
-            <h1 className="mr-4">Text Generation Prompt</h1>
+            <h1 className="mr-4 flex-none">Text Generation Prompt</h1>
             <TextField
-                className="flex-auto"
+                className="flex-grow mr-4"
                 name="prompt"
                 value={this.state.textGenerationPrompt}
                 onChange={this.onTextPromptChange}
               />
+            <PrimaryButton 
+              className="flex-initial"
+              text="Generate"
+              onClick={this.generateTextClickHandler}
+              styles={{root: {minWidth: "190px", fontSize: "18px", paddingTop: "18px", paddingBottom: "18px"}}}
+            />
           </div>
           <button className="flex items-center justify-center w-full p-1" onClick={() => this.toggleFold()}>
               <FiChevronDown size={25} className="light-gray-text" />
@@ -171,19 +177,20 @@ class TextGenerationControl extends React.Component<
               marginBottom: "30px"
           }}
         >
-          <div className="flex items-end mb-4">
+          <h1 className="mb-4">Text Generation Prompt</h1>
+          <div className="flex items-center mb-4">
             <TextField
-              className="flex-initial w-11/12 mr-4"
-              label="Text Generation Prompt"
+              className="flex-grow mr-4"
               placeholder="Input your prompt"
               name="prompt"
               value={this.state.textGenerationPrompt}
               onChange={this.onTextPromptChange}
             />
             <PrimaryButton 
-              className="flex-auto"
+              className="flex-initial"
               text="Generate"
               onClick={this.generateTextClickHandler}
+              styles={{root: {minWidth: "190px", fontSize: "18px", paddingTop: "18px", paddingBottom: "18px"}}}
             />
           </div>
           <div className="text-gen-form-grid p-4" style={{backgroundColor: "#F3F6FD"}}>
diff --git a/frontend/components/TextGenerationResults.tsx b/frontend/components/TextGenerationResults.tsx
index aadfd37..1e56bee 100644
--- a/frontend/components/TextGenerationResults.tsx
+++ b/frontend/components/TextGenerationResults.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { ComboBox, IComboBoxOption, Stack } from "office-ui-fabric-react"
+import { ComboBox, Dropdown, IComboBoxOption, IDropdownOption, Stack } from "office-ui-fabric-react"
 import AnalyzedText from "../models/AnalyzedText";
 import PerspectiveScoresBarChart from "./PerspectiveScoresBarChart";
 import { IconSortDescending, IconSortAscending } from '@tabler/icons';
@@ -120,7 +120,7 @@ class TextGenerationResults extends React.Component<TextGenerationResultsProps,
       );
     }
 
-    const sortOptions: IComboBoxOption[] = [
+    const sortOptions: IDropdownOption[] = [
       { key: 'none', text: 'None'},
       { key: 'toxicity', text: 'Toxicity' },
       { key: 'severeToxicity', text: 'Severe Toxicity' },
@@ -132,7 +132,7 @@ class TextGenerationResults extends React.Component<TextGenerationResultsProps,
       { key: 'flirtation', text: 'Flirtation' },
     ];
 
-    const scoreOptions: IComboBoxOption[] = [
+    const scoreOptions: IDropdownOption[] = [
       { key: 'toxicity', text: 'Toxicity' },
       { key: 'severeToxicity', text: 'Severe Toxicity' },
       { key: 'identityAttack', text: 'Identity Attack' },
@@ -151,7 +151,7 @@ class TextGenerationResults extends React.Component<TextGenerationResultsProps,
       }
     }
 
-    const chartWidth = 140;
+    const chartWidth = 160;
 
     const getAscendingDescendingButtons = () => {
       if (this.state.sortByLabel != "none") {
@@ -172,19 +172,23 @@ class TextGenerationResults extends React.Component<TextGenerationResultsProps,
         <h1>Generated Results</h1>
         <Stack horizontal horizontalAlign="end" tokens={{childrenGap: 20}} styles={{root: {marginBottom: "16px"}}}>
           {getAscendingDescendingButtons()}
-          <ComboBox
+          <div className="flex items-end">
+            <button className={getSortClass(this.state.sortDescending)} onClick={() => this.sortDescending()} ><IconSortDescending size={30} /></button>
+            <button className={getSortClass(!this.state.sortDescending)} onClick={() => this.sortAscending()} ><IconSortAscending size={30} /></button>
+          </div>
+          <Dropdown
             label="Sort by"
             options={sortOptions}
-            styles={{root: {maxWidth: 160}}}
+            styles={{root: {minWidth: 160}}}
             selectedKey={this.state.sortByLabel}
             onChange={(evt, option) => {
               this.sortGeneratedTextResults(option.key, this.state.sortDescending);
             }}
           />
-          <ComboBox
+          <Dropdown
             label="Show score"
             options={scoreOptions}
-            styles={{root: {maxWidth: 160}}}
+            styles={{root: {minWidth: 160}}}
             selectedKey={this.state.highlightScoreLabel}
             onChange={(evt, option) => {
               this.setHighlightedScoreLabel(option.key);
@@ -196,7 +200,7 @@ class TextGenerationResults extends React.Component<TextGenerationResultsProps,
             <div className="flex items-center flex-none px-1" style={{backgroundColor: "#8894B1", color: "white", fontSize: "18px", lineHeight: "20px"}}>
               {item.id}
             </div>
-            <div className="flex-none" style={{width: `${chartWidth}px`, border: "solid #E7E7E7 1px"}}>
+            <div className="flex-none" style={{width: `${chartWidth}px`, border: "5px solid #F3F6FD"}}>
               <PerspectiveScoresBarChart id={item.id} width={chartWidth} analyzedText={item} defaultSelectedScore={this.state.highlightScoreLabel} />
             </div>
             <button 

From 4c10cdaf4716906713e399e0c6b72938a94155fb Mon Sep 17 00:00:00 2001
From: Nicholas King <v-nicki@microsoft.com>
Date: Wed, 26 May 2021 18:55:07 -0700
Subject: [PATCH 2/2] tweak bar fill color, spacing on page

---
 frontend/app.css                                  | 1 -
 frontend/components/PerspectiveScoresBarChart.tsx | 8 ++++----
 frontend/components/TextDetailedAnalysis.tsx      | 6 +++---
 frontend/components/TextGenerationResults.tsx     | 6 +++---
 4 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/frontend/app.css b/frontend/app.css
index 0d939d8..50a7300 100644
--- a/frontend/app.css
+++ b/frontend/app.css
@@ -9,7 +9,6 @@ body {
 }
 
 .bar {
-  fill: rgba(252, 84, 104, 1);
 }
 
 .highlighted-bar {
diff --git a/frontend/components/PerspectiveScoresBarChart.tsx b/frontend/components/PerspectiveScoresBarChart.tsx
index 033c0ca..3d96182 100644
--- a/frontend/components/PerspectiveScoresBarChart.tsx
+++ b/frontend/components/PerspectiveScoresBarChart.tsx
@@ -117,14 +117,14 @@ class PerspectiveScoresBarChart extends Component<PerspectiveScoresBarChartProps
      .attr("y", function(d) { return yScale(d.value); })
      .attr("width", xScale.bandwidth())
      .attr("height", function(d) { return h - yScale(d.value); })
-     .attr("fill-opacity", function(d) { 
+     .attr("fill", function(d) { 
         if (d.value < 0.33) {
-          return ".65";
+          return "#F994A1";
         }
         if (d.value < 0.66) {
-          return ".8";
+          return "#FF374F";
         }
-        return "1";
+        return "#BB061C";
       })
      .classed("highlighted-bar", function(d) { return d.label == _this.state.selectedScore })
      .on("click", function(d) {
diff --git a/frontend/components/TextDetailedAnalysis.tsx b/frontend/components/TextDetailedAnalysis.tsx
index 55d8c54..0c77ad6 100644
--- a/frontend/components/TextDetailedAnalysis.tsx
+++ b/frontend/components/TextDetailedAnalysis.tsx
@@ -40,14 +40,14 @@ class TextDetailedAnalysis extends React.Component<TextDetailedAnalysisProps, nu
         </div>
         {this.props.selectedText.map((item, index) => 
           <div className="flex items-stretch mb-4" style={{minHeight: "110px"}}>
-            <div className="flex items-center flex-none px-1" style={{backgroundColor: tabColors[index % tabColors.length], color: "white", fontSize: "18px", lineHeight: "20px"}}>
+            <div className="flex items-center justify-center flex-none px-1" style={{backgroundColor: tabColors[index % tabColors.length], color: "white", width: "26px", fontSize: "18px", lineHeight: "20px"}}>
               {item.id}
             </div>
             <div className="flex items-center flex-auto px-4" style={{backgroundColor: "#F3F6FD", fontSize: "18px", lineHeight: "27px"}}>
               {item.text}
             </div>
-            <div className="flex items-center flex-none px-1" style={{backgroundColor: "#E1E6F0", color: "white", fontSize: "18px", lineHeight: "20px"}}>
-              <FiEdit style={{color: "#167DF5"}}/>
+            <div className="flex items-center justify-center flex-none px-1" style={{backgroundColor: "#E1E6F0", color: "white", width: "42px", fontSize: "18px", lineHeight: "20px"}}>
+              <FiEdit style={{color: "#167DF5"}} size={20}/>
             </div>
           </div>
         )}
diff --git a/frontend/components/TextGenerationResults.tsx b/frontend/components/TextGenerationResults.tsx
index 1e56bee..38c97b6 100644
--- a/frontend/components/TextGenerationResults.tsx
+++ b/frontend/components/TextGenerationResults.tsx
@@ -167,7 +167,7 @@ class TextGenerationResults extends React.Component<TextGenerationResultsProps,
     }
 
     return (
-      <div className="page-column">
+      <div className="page-column p-3">
         <div className="scroll-pane">
         <h1>Generated Results</h1>
         <Stack horizontal horizontalAlign="end" tokens={{childrenGap: 20}} styles={{root: {marginBottom: "16px"}}}>
@@ -196,8 +196,8 @@ class TextGenerationResults extends React.Component<TextGenerationResultsProps,
           />
         </Stack>
         {this.state.analysisResults.map((item) => 
-          <div className="flex items-stretch mb-4" style={{minHeight: "110px", border: this.props.selectedTextIds.includes(item.id) ? "solid #167DF5 2px" : "none"}}>
-            <div className="flex items-center flex-none px-1" style={{backgroundColor: "#8894B1", color: "white", fontSize: "18px", lineHeight: "20px"}}>
+          <div className="flex items-stretch mb-5" style={{minHeight: "110px", border: this.props.selectedTextIds.includes(item.id) ? "solid #167DF5 2px" : "none"}}>
+            <div className="flex items-center justify-center flex-none px-1" style={{backgroundColor: "#8894B1", color: "white", width: "26px", fontSize: "18px", lineHeight: "20px"}}>
               {item.id}
             </div>
             <div className="flex-none" style={{width: `${chartWidth}px`, border: "5px solid #F3F6FD"}}>