From 8d981dcdbab32110c7e67998f06b30ffacc70035 Mon Sep 17 00:00:00 2001
From: Nicholas King <v-nicki@microsoft.com>
Date: Wed, 26 May 2021 16:56:07 -0700
Subject: [PATCH 1/3] edit prototype part 1

---
 frontend/MainContainer.tsx                    |  19 +-
 frontend/actions.ts                           |  34 +++
 frontend/components/InteractiveText.tsx       | 209 ++++++++++++++++++
 .../components/PerspectiveScoresBarChart.tsx  |   7 +-
 frontend/components/TextDetailedAnalysis.tsx  |  61 +++--
 frontend/components/TextGenerationResults.tsx |  12 +-
 frontend/models/TextRecord.ts                 |  15 ++
 frontend/reducers.ts                          |  21 +-
 package-lock.json                             |   5 +
 package.json                                  |   3 +-
 10 files changed, 350 insertions(+), 36 deletions(-)
 create mode 100644 frontend/components/InteractiveText.tsx
 create mode 100644 frontend/models/TextRecord.ts

diff --git a/frontend/MainContainer.tsx b/frontend/MainContainer.tsx
index cb5ea28..fd38a87 100644
--- a/frontend/MainContainer.tsx
+++ b/frontend/MainContainer.tsx
@@ -7,15 +7,17 @@ import {
   generateTextFailed,
   generateText,
   selectText,
+  submitEditText,
+  deleteEditText,
   foldForm
 } from './actions';
 import TextGenerationControl from "./components/TextGenerationControl";
 import TextGenerationResults from "./components/TextGenerationResults";
 import TextDetailedAnalysis from "./components/TextDetailedAnalysis";
-import AnalyzedText from "./models/AnalyzedText";
+import TextRecord from "./models/TextRecord";
 
 type ContainerProps = {
-  analysisResults: AnalyzedText[],
+  analysisResults: TextRecord[],
   error: any,
   loading: any,
   isFolded: boolean,
@@ -25,7 +27,9 @@ type ContainerProps = {
   generateTextFailed: any,
   generateText: any
   selectText: Function,
-  foldForm: Function
+  submitEditText: Function,
+  deleteEditText: Function,
+  foldForm: Function,
 }
 
 const Container: React.FunctionComponent<ContainerProps> = ({
@@ -39,6 +43,8 @@ const Container: React.FunctionComponent<ContainerProps> = ({
   generateTextFailed,
   generateText,
   selectText,
+  submitEditText,
+  deleteEditText,
   foldForm
   }) => {
     const getDetailedAnalysisComponent = () => {
@@ -48,7 +54,10 @@ const Container: React.FunctionComponent<ContainerProps> = ({
         const selectedText = selectedTextIds.map(id => analysisResults.find(item => id == item.id))
         return (
           <TextDetailedAnalysis
-            selectedText={selectedText} />
+            selectedText={selectedText} 
+            submitEditText={submitEditText} 
+            deleteEditText={deleteEditText} 
+            />
         );
       }
     }
@@ -95,6 +104,8 @@ function mapDispatchToProps (dispatch) {
     generateTextFailed: generateTextFailed,
     generateText: generateText,
     selectText: selectText,
+    submitEditText: submitEditText,
+    deleteEditText: deleteEditText,
     foldForm: foldForm,
   }, dispatch);
  }
diff --git a/frontend/actions.ts b/frontend/actions.ts
index efee7d8..a6351c0 100644
--- a/frontend/actions.ts
+++ b/frontend/actions.ts
@@ -43,6 +43,38 @@ function selectText(id: number) {
   }
 }
 
+function setEditTextResults(id: number, text: string, analysis: any) {
+  return {
+    type: "EDIT_TEXT_SUCCEEDED",
+    id: id,
+    text: text,
+    analysis: analysis
+  }
+
+}
+
+function editTextFailed(error) {
+  return {
+    type: "EDIT_TEXT_FAILED",
+    error: error
+  }
+}
+
+function submitEditText(id: number, text: string) {
+  return function(dispatch) {
+    makePostCall("api/v1/analyze_text", {text: text})
+      .then(response => dispatch(setEditTextResults(id, text, response.data.text_analysis_result)))
+      .catch(error => dispatch(editTextFailed(error)));
+  }
+}
+
+function deleteEditText(id: number) {
+  return {
+    type: "DELETE_EDIT_TEXT",
+    id: id
+  }
+}
+
 
 export {
   requestGenerateText,
@@ -50,5 +82,7 @@ export {
   generateTextFailed,
   generateText,
   selectText,
+  submitEditText,
+  deleteEditText,
   foldForm,
 };
diff --git a/frontend/components/InteractiveText.tsx b/frontend/components/InteractiveText.tsx
new file mode 100644
index 0000000..4a5ca2b
--- /dev/null
+++ b/frontend/components/InteractiveText.tsx
@@ -0,0 +1,209 @@
+import React from "react";
+import TextRecord from "../models/TextRecord";
+import AnalyzedText from "../models/AnalyzedText";
+import { FiEdit } from "react-icons/fi";
+
+type InteractiveTextProps = {
+  textRecord: TextRecord;
+  tabColor: string;
+  editColor: string;
+  submitEditText: Function,
+  deleteEditText: Function,
+};
+
+type InteractiveTextState = {
+  editMode: boolean;
+  editText: string;
+}
+
+class InteractiveText extends React.Component<InteractiveTextProps, InteractiveTextState> {
+  constructor(props) {
+    super(props);
+
+    let editText;
+    if (this.props.textRecord.edited) {
+      editText = this.props.textRecord.edited.text;
+    } else {
+      editText = this.props.textRecord.original.text;
+    }
+
+    this.state = {
+      editMode: false,
+      editText: editText
+    };
+
+    this.enableEditMode = this.enableEditMode.bind(this);
+    this.handleTextSubmit = this.handleTextSubmit.bind(this);
+    this.handleTextClear = this.handleTextClear.bind(this);
+    this.handleTextEdit = this.handleTextEdit.bind(this);
+  }
+
+  enableEditMode() {
+    this.setState({editMode: true});
+  }
+
+  handleTextSubmit() {
+    this.props.submitEditText(this.props.textRecord.id, this.state.editText);
+    this.setState({editMode: false});
+  }
+
+  handleTextClear() {
+    this.props.deleteEditText(this.props.textRecord.id);
+    this.setState({editMode: false});
+  }
+
+  handleTextEdit(event) {
+    this.setState({editText: event.target.value});
+  }
+
+  render() {
+    /*
+        {this.props.selectedText.map((item, index) => 
+          <div className="flex items-stretch mb-4" style={{minHeight: "110px"}}>
+            <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 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>
+        )}
+    */
+    return (
+      <>
+        <div className="flex items-stretch mb-4" style={{ minHeight: "110px" }}>
+          <div
+            className="flex items-center justify-center flex-none px-1"
+            style={{
+              backgroundColor: this.props.tabColor,
+              color: "white",
+              width: "26px",
+              fontSize: "18px",
+              lineHeight: "20px",
+            }}
+          >
+            {this.props.textRecord.id}
+          </div>
+          <div
+            className="flex items-center flex-auto px-4"
+            style={{
+              backgroundColor: "#F3F6FD",
+              fontSize: "18px",
+              lineHeight: "27px",
+            }}
+          >
+            {this.props.textRecord.original.text}
+          </div>
+          <button
+            className="flex items-center justify-center flex-none px-1"
+            style={{
+              backgroundColor: "#E1E6F0",
+              color: "white",
+              width: "42px",
+              fontSize: "18px",
+              lineHeight: "20px",
+            }}
+            onClick={this.enableEditMode}
+          >
+            <FiEdit style={{ color: "#167DF5" }} />
+          </button>
+        </div>
+        {
+          this.props.textRecord.edited && !this.state.editMode ? 
+            <div className="flex items-stretch mb-4" style={{ minHeight: "110px" }}>
+              <div
+                className="flex items-center flex-none px-1"
+                style={{
+                  backgroundColor: this.props.editColor,
+                  color: "white",
+                  fontSize: "18px",
+                  lineHeight: "20px",
+                }}
+              >
+                {this.props.textRecord.id}*
+              </div>
+              <div
+                className="flex items-center flex-auto px-4"
+                style={{
+                  backgroundColor: "#F3F6FD",
+                  fontSize: "18px",
+                  lineHeight: "27px",
+                }}
+              >
+                {this.props.textRecord.edited.text}
+              </div>
+              <button
+                className="flex items-center flex-none px-1"
+                style={{
+                  backgroundColor: "#E1E6F0",
+                  color: "white",
+                  fontSize: "18px",
+                  lineHeight: "20px",
+                }}
+                onClick={this.enableEditMode}
+              >
+                <FiEdit style={{ color: "#167DF5" }} />
+              </button>
+            </div> : null
+        }
+        {
+          this.state.editMode ?
+            <div className="flex items-stretch mb-4" style={{ minHeight: "110px" }}>
+              <div
+                className="flex items-center flex-none px-1"
+                style={{
+                  backgroundColor: this.props.editColor,
+                  color: "white",
+                  fontSize: "18px",
+                  lineHeight: "20px",
+                }}
+              >
+                {this.props.textRecord.id}*
+              </div>
+              <textarea
+                className="flex-auto"
+                style={{
+                  backgroundColor: "white",
+                  fontSize: "18px",
+                  lineHeight: "27px",
+                }}
+                value={this.state.editText}
+                onChange={this.handleTextEdit}
+              />
+              <div className="flex flex-col flex-none px-1">
+                <button
+                  className="flex items-center flex-none px-1"
+                  style={{
+                    backgroundColor: "#E1E6F0",
+                    color: "white",
+                    fontSize: "18px",
+                    lineHeight: "20px",
+                  }}
+                  onClick={this.handleTextClear}
+                >
+                  X
+                </button>
+                <button
+                  className="flex items-center flex-none px-1"
+                  style={{
+                    backgroundColor: "#E1E6F0",
+                    color: "white",
+                    fontSize: "18px",
+                    lineHeight: "20px",
+                  }}
+                  onClick={this.handleTextSubmit}
+                >
+                  OK
+                </button>
+              </div>
+            </div> : null
+        }
+      </>
+    );
+  }
+}
+
+export default InteractiveText;
\ No newline at end of file
diff --git a/frontend/components/PerspectiveScoresBarChart.tsx b/frontend/components/PerspectiveScoresBarChart.tsx
index 3d96182..26103e2 100644
--- a/frontend/components/PerspectiveScoresBarChart.tsx
+++ b/frontend/components/PerspectiveScoresBarChart.tsx
@@ -3,6 +3,7 @@ import ReactDOM from "react-dom";
 import * as d3 from "d3";
 import { DirectionalHint } from 'office-ui-fabric-react/lib/Tooltip';
 import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button';
+import TextRecord from "../models/TextRecord";
 import AnalyzedText from "../models/AnalyzedText";
 
 
@@ -14,7 +15,7 @@ type PerspectiveScoresBarChartProps = {
   id: number,
   width: number,
   defaultSelectedScore: string,
-  analyzedText: AnalyzedText
+  textRecord: TextRecord
 }
 
 class PerspectiveScoresBarChart extends Component<PerspectiveScoresBarChartProps, PerspectiveScoresBarChartState> {
@@ -58,7 +59,7 @@ class PerspectiveScoresBarChart extends Component<PerspectiveScoresBarChartProps
     var _this = this;
     var body = d3.select(this.node.current);
 
-    const getResultScoreObj: any = (item: any) => {
+    const getResultScoreObj: any = (item: AnalyzedText) => {
       let resultScores = [
         {label: "toxicity", value: item.toxicity, scoreName: "Toxicity"},
         {label: "severeToxicity", value: item.severeToxicity, scoreName: "Severe Toxicity"},
@@ -73,7 +74,7 @@ class PerspectiveScoresBarChart extends Component<PerspectiveScoresBarChartProps
       return resultScores;
     }
 
-    var scores = getResultScoreObj(this.props.analyzedText);
+    var scores = getResultScoreObj(this.props.textRecord.original);
 
     var margin = { top: 5, right: 15, bottom: 50, left: 55 }
     var h = 111 - margin.top - margin.bottom
diff --git a/frontend/components/TextDetailedAnalysis.tsx b/frontend/components/TextDetailedAnalysis.tsx
index 0c77ad6..63c7d27 100644
--- a/frontend/components/TextDetailedAnalysis.tsx
+++ b/frontend/components/TextDetailedAnalysis.tsx
@@ -1,13 +1,14 @@
 import React from "react";
-import * as d3 from "d3";
-import * as _ from "lodash"
-import ReactDOM from "react-dom";
+import TextRecord from "../models/TextRecord";
 import AnalyzedText from "../models/AnalyzedText";
 import PerspectiveScoresSpiderChart from "./PerspectiveScoresSpiderChart";
-import { FiEdit } from "react-icons/fi";
+import tinycolor from "tinycolor2";
+import InteractiveText from "./InteractiveText";
 
 type TextDetailedAnalysisProps = {
-  selectedText: AnalyzedText[],
+  selectedText: TextRecord[],
+  submitEditText: Function,
+  deleteEditText: Function,
 }
 
 class TextDetailedAnalysis extends React.Component<TextDetailedAnalysisProps, null> {
@@ -17,14 +18,36 @@ class TextDetailedAnalysis extends React.Component<TextDetailedAnalysisProps, nu
   }
 
   render() {
-    const tabColors = ["#FD6D22", "#3AA757", "#ED4596", "#752BEE", "#4DBDC5", "#FABB2D", "#3C85FA", "#FF4C4C"];
+
+    const getColor = (i: number) => {
+      const tabColors = ["#FD6D22", "#3AA757", "#ED4596", "#752BEE", "#4DBDC5", "#FABB2D", "#3C85FA", "#FF4C4C"];
+      return tabColors[i % tabColors.length];
+    }
+
+    const getEditColor = (baseColor: string) => {
+      return tinycolor(baseColor).lighten(20).toHexString();
+    }
+
+    const textScores = new Array<AnalyzedText>();
+    const spiderColors = new Array<string>();
+
+    this.props.selectedText.forEach((text, index) => {
+      textScores.push(text.original);
+      const color = getColor(index);
+      spiderColors.push(color);
+
+      if (text.edited) {
+        textScores.push(text.edited);
+        spiderColors.push(getEditColor(color));
+      }
+    });
 
     return (
       <div className="page-column p-3" style={{boxShadow: "0px 0px 12px rgba(0, 0, 0, 0.12)"}}>
         <h1 className="mb-4">Toxicity Analysis</h1>
         <div className="mb-4 text-2xl">
           <PerspectiveScoresSpiderChart
-            scores={this.props.selectedText}
+            scores={textScores}
             axes={[
               ["Toxicity", "toxicity"],
               ["Severe Toxicity", "severeToxicity"],
@@ -35,22 +58,18 @@ class TextDetailedAnalysis extends React.Component<TextDetailedAnalysisProps, nu
               ["Sexually Explicit", "sexuallyExplicit"],
               ["Flirtation", "flirtation"]
             ]}
-            colors={tabColors}
+            colors={spiderColors}
           />
         </div>
-        {this.props.selectedText.map((item, index) => 
-          <div className="flex items-stretch mb-4" style={{minHeight: "110px"}}>
-            <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 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>
-        )}
+        {this.props.selectedText.map((item, index) => {
+          const color = getColor(index);
+          return <InteractiveText 
+                   textRecord={item} 
+                   tabColor={color} 
+                   editColor={getEditColor(color)}
+                   submitEditText={this.props.submitEditText}
+                   deleteEditText={this.props.deleteEditText} />
+        })}
       </div>
     );
   }
diff --git a/frontend/components/TextGenerationResults.tsx b/frontend/components/TextGenerationResults.tsx
index 38c97b6..d0a7df5 100644
--- a/frontend/components/TextGenerationResults.tsx
+++ b/frontend/components/TextGenerationResults.tsx
@@ -1,11 +1,11 @@
 import React from "react";
 import { ComboBox, Dropdown, IComboBoxOption, IDropdownOption, Stack } from "office-ui-fabric-react"
-import AnalyzedText from "../models/AnalyzedText";
+import TextRecord from "../models/TextRecord";
 import PerspectiveScoresBarChart from "./PerspectiveScoresBarChart";
 import { IconSortDescending, IconSortAscending } from '@tabler/icons';
 
 type TextGenerationResultsProps = {
-  analysisResults: AnalyzedText[],
+  analysisResults: TextRecord[],
   onSelectTextId: Function,
   selectedTextIds: number[],
   loading?: boolean,
@@ -13,7 +13,7 @@ type TextGenerationResultsProps = {
 }
 
 type TextGenerationResultsState = {
-  analysisResults: AnalyzedText[],
+  analysisResults: TextRecord[],
   highlightScoreLabel: string,
   sortByLabel: string,
   sortDescending: boolean,
@@ -66,7 +66,7 @@ class TextGenerationResults extends React.Component<TextGenerationResultsProps,
       const sortedAnalysisResultsAscending = this.state.analysisResults.map((result) => result).sort((resultA, resultB) => {
         if (resultA[scoreLabel] < resultB[scoreLabel]) {
           return -1;
-        } else if (resultA[scoreLabel] == resultB[scoreLabel]) {
+        } else if (resultA.original[scoreLabel] == resultB.original[scoreLabel]) {
           return 0;
         } else {
           return 1;
@@ -201,14 +201,14 @@ class TextGenerationResults extends React.Component<TextGenerationResultsProps,
               {item.id}
             </div>
             <div className="flex-none" style={{width: `${chartWidth}px`, border: "5px solid #F3F6FD"}}>
-              <PerspectiveScoresBarChart id={item.id} width={chartWidth} analyzedText={item} defaultSelectedScore={this.state.highlightScoreLabel} />
+              <PerspectiveScoresBarChart id={item.id} width={chartWidth} textRecord={item} defaultSelectedScore={this.state.highlightScoreLabel} />
             </div>
             <button 
               className="flex items-center flex-auto text-left px-4"
               style={{backgroundColor: "#F3F6FD", fontSize: "18px", lineHeight: "27px"}}
               onClick={() => this.props.onSelectTextId(item.id)}
             >
-              {item.text}
+              {item.original.text}
             </button>
           </div>
         )}
diff --git a/frontend/models/TextRecord.ts b/frontend/models/TextRecord.ts
new file mode 100644
index 0000000..09d16c1
--- /dev/null
+++ b/frontend/models/TextRecord.ts
@@ -0,0 +1,15 @@
+import AnalyzedText from "./AnalyzedText";
+
+class TextRecord {
+  original: AnalyzedText;
+  edited: AnalyzedText;
+  id: number;
+
+  constructor(text_generation_result: any) {
+    this.id = text_generation_result.id;
+    this.original = new AnalyzedText(text_generation_result);
+    this.edited = null;
+  }
+}
+
+export default TextRecord;
\ No newline at end of file
diff --git a/frontend/reducers.ts b/frontend/reducers.ts
index df09ecd..7969eef 100644
--- a/frontend/reducers.ts
+++ b/frontend/reducers.ts
@@ -1,4 +1,5 @@
 import AnalyzedText from "./models/AnalyzedText";
+import TextRecord from "./models/TextRecord";
 
 const rawInitialState = {
    analysisResults: [],
@@ -20,7 +21,7 @@ function rootReducer(state = initialState, action) {
           return Object.assign({}, state, {loding: false, error: action.error});
 
         case "SET_GENERATED_TEXT_RESULTS":
-          const analysisResults = action.text_generation_results?.map((result) => new AnalyzedText(result));
+          const analysisResults = action.text_generation_results?.map((result) => new TextRecord(result));
           return Object.assign({}, state, {loading: false, analysisResults: analysisResults, error: null});
         
         case "SELECT_TEXT":
@@ -33,6 +34,24 @@ function rootReducer(state = initialState, action) {
           }
           return Object.assign({}, state, {selectedTextIds: textIds});
         
+        case "EDIT_TEXT_SUCCEEDED":
+          const record: TextRecord = state.analysisResults.find(item => item.id === action.id);
+          if (record) {
+            record.edited = new AnalyzedText({...action.analysis, text: action.text, id: action.id});
+          }
+          return Object.assign({}, state, {analysisResults: [...state.analysisResults]});
+        
+        case "EDIT_TEXT_FAILED":
+          console.log(action.error);
+          return Object.assign({}, state, {});
+
+        case "DELETE_EDIT_TEXT":
+          const rec: TextRecord = state.analysisResults.find(item => item.id === action.id);
+          if (rec) {
+            rec.edited = null;
+          }
+          return Object.assign({}, state, {analysisResults: [...state.analysisResults]});
+
         case "FOLD_FORM":
           return Object.assign({}, state, {isFolded: !state.isFolded});
 
diff --git a/package-lock.json b/package-lock.json
index 158d175..da4ee64 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13379,6 +13379,11 @@
         "setimmediate": "^1.0.4"
       }
     },
+    "tinycolor2": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz",
+      "integrity": "sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA=="
+    },
     "tmpl": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz",
diff --git a/package.json b/package.json
index 6d536b1..7d7aa49 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,8 @@
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.3.0",
     "request": "^2.88.0",
-    "request-promise": "^4.2.4"
+    "request-promise": "^4.2.4",
+    "tinycolor2": "^1.4.2"
   },
   "devDependencies": {
     "@babel/core": "^7.2.2",

From 3dd703d5811c338dc27d8c6808e83f264d97b172 Mon Sep 17 00:00:00 2001
From: Nicholas King <v-nicki@microsoft.com>
Date: Fri, 28 May 2021 13:30:11 -0700
Subject: [PATCH 2/3] Edit feature working

---
 frontend/actions.ts                     |  13 +-
 frontend/components/InteractiveText.tsx | 225 +++++++++++++-----------
 frontend/models/TextRecord.ts           |   4 +
 frontend/reducers.ts                    |  32 +++-
 transformerviz/server.py                |   2 +-
 5 files changed, 160 insertions(+), 116 deletions(-)

diff --git a/frontend/actions.ts b/frontend/actions.ts
index a6351c0..a7f1cf9 100644
--- a/frontend/actions.ts
+++ b/frontend/actions.ts
@@ -7,6 +7,13 @@ function requestGenerateText() {
   }
 }
 
+function requestEditText(id) {
+  return {
+    type: "REQUEST_EDIT_TEXT",
+    id: id
+  }
+}
+
 function setGeneratedTextResults(generateTextResults) {
   return {
     type: "SET_GENERATED_TEXT_RESULTS",
@@ -53,18 +60,20 @@ function setEditTextResults(id: number, text: string, analysis: any) {
 
 }
 
-function editTextFailed(error) {
+function editTextFailed(id: number, error) {
   return {
     type: "EDIT_TEXT_FAILED",
+    id: id,
     error: error
   }
 }
 
 function submitEditText(id: number, text: string) {
   return function(dispatch) {
+    dispatch(requestEditText(id));
     makePostCall("api/v1/analyze_text", {text: text})
       .then(response => dispatch(setEditTextResults(id, text, response.data.text_analysis_result)))
-      .catch(error => dispatch(editTextFailed(error)));
+      .catch(error => dispatch(editTextFailed(id, error)));
   }
 }
 
diff --git a/frontend/components/InteractiveText.tsx b/frontend/components/InteractiveText.tsx
index 4a5ca2b..d7e8a66 100644
--- a/frontend/components/InteractiveText.tsx
+++ b/frontend/components/InteractiveText.tsx
@@ -1,22 +1,25 @@
 import React from "react";
 import TextRecord from "../models/TextRecord";
 import AnalyzedText from "../models/AnalyzedText";
-import { FiEdit } from "react-icons/fi";
+import { FiEdit, FiX, FiCheck } from "react-icons/fi";
 
 type InteractiveTextProps = {
   textRecord: TextRecord;
   tabColor: string;
   editColor: string;
-  submitEditText: Function,
-  deleteEditText: Function,
+  submitEditText: Function;
+  deleteEditText: Function;
 };
 
 type InteractiveTextState = {
   editMode: boolean;
   editText: string;
-}
+};
 
-class InteractiveText extends React.Component<InteractiveTextProps, InteractiveTextState> {
+class InteractiveText extends React.Component<
+  InteractiveTextProps,
+  InteractiveTextState
+> {
   constructor(props) {
     super(props);
 
@@ -29,7 +32,7 @@ class InteractiveText extends React.Component<InteractiveTextProps, InteractiveT
 
     this.state = {
       editMode: false,
-      editText: editText
+      editText: editText,
     };
 
     this.enableEditMode = this.enableEditMode.bind(this);
@@ -39,39 +42,39 @@ class InteractiveText extends React.Component<InteractiveTextProps, InteractiveT
   }
 
   enableEditMode() {
-    this.setState({editMode: true});
+    this.setState({ editMode: true });
   }
 
   handleTextSubmit() {
     this.props.submitEditText(this.props.textRecord.id, this.state.editText);
-    this.setState({editMode: false});
+    this.setState({ editMode: false });
   }
 
   handleTextClear() {
     this.props.deleteEditText(this.props.textRecord.id);
-    this.setState({editMode: false});
+    this.setState({ editMode: false });
   }
 
   handleTextEdit(event) {
-    this.setState({editText: event.target.value});
+    this.setState({ editText: event.target.value });
   }
 
   render() {
-    /*
-        {this.props.selectedText.map((item, index) => 
-          <div className="flex items-stretch mb-4" style={{minHeight: "110px"}}>
-            <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 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>
-        )}
-    */
+    const getEditText = (record: TextRecord) => {
+      if (record.editLoading) {
+        return "Loading...";
+      } else if (record.editError) {
+        return (
+          <>
+            <div style={{color: "red"}}>Error: {record.editError.message}</div>
+            <div>{record.edited?.text}</div>
+          </>
+        );
+      } else {
+        return record.edited.text;
+      }
+    }
+
     return (
       <>
         <div className="flex items-stretch mb-4" style={{ minHeight: "110px" }}>
@@ -101,109 +104,119 @@ class InteractiveText extends React.Component<InteractiveTextProps, InteractiveT
             className="flex items-center justify-center flex-none px-1"
             style={{
               backgroundColor: "#E1E6F0",
-              color: "white",
               width: "42px",
               fontSize: "18px",
               lineHeight: "20px",
             }}
             onClick={this.enableEditMode}
           >
-            <FiEdit style={{ color: "#167DF5" }} />
+            <FiEdit style={{ color: "#167DF5" }} size={20} />
           </button>
         </div>
-        {
-          this.props.textRecord.edited && !this.state.editMode ? 
-            <div className="flex items-stretch mb-4" style={{ minHeight: "110px" }}>
-              <div
-                className="flex items-center flex-none px-1"
-                style={{
-                  backgroundColor: this.props.editColor,
-                  color: "white",
-                  fontSize: "18px",
-                  lineHeight: "20px",
-                }}
-              >
-                {this.props.textRecord.id}*
-              </div>
-              <div
-                className="flex items-center flex-auto px-4"
-                style={{
-                  backgroundColor: "#F3F6FD",
-                  fontSize: "18px",
-                  lineHeight: "27px",
-                }}
-              >
-                {this.props.textRecord.edited.text}
-              </div>
+        {(this.props.textRecord.edited || this.props.textRecord.editLoading) && !this.state.editMode ? (
+          <div
+            className="flex items-stretch mb-4"
+            style={{ minHeight: "110px" }}
+          >
+            <div
+              className="flex items-center flex-none px-1"
+              style={{
+                backgroundColor: this.props.editColor,
+                color: "white",
+                width: "26px",
+                fontSize: "18px",
+                lineHeight: "20px",
+              }}
+            >
+              {this.props.textRecord.id}*
+            </div>
+            <div
+              className="flex flex-col justify-center flex-auto px-4"
+              style={{
+                backgroundColor: "#F3F6FD",
+                fontSize: "18px",
+                lineHeight: "27px",
+              }}
+            >
+              { getEditText(this.props.textRecord) }
+            </div>
+            <button
+              className="flex items-center justify-center flex-none px-1"
+              style={{
+                backgroundColor: "#E1E6F0",
+                width: "42px",
+                fontSize: "18px",
+                lineHeight: "20px",
+              }}
+              onClick={this.enableEditMode}
+            >
+              <FiEdit style={{ color: "#167DF5" }} size={20} />
+            </button>
+          </div>
+        ) : null}
+        {this.state.editMode ? (
+          <div
+            className="flex items-stretch mb-4"
+            style={{ minHeight: "110px" }}
+          >
+            <div
+              className="flex items-center flex-none px-1"
+              style={{
+                backgroundColor: this.props.editColor,
+                color: "white",
+                fontSize: "18px",
+                lineHeight: "20px",
+              }}
+            >
+              {this.props.textRecord.id}*
+            </div>
+            <textarea
+              className="flex-auto"
+              style={{
+                backgroundColor: "white",
+                fontSize: "18px",
+                lineHeight: "27px",
+                padding: "10px",
+                border: "solid black 1px",
+              }}
+              value={this.state.editText}
+              onChange={this.handleTextEdit}
+            />
+            <div
+              className="flex flex-col items-center justify-center flex-none px-1"
+              style={{
+                backgroundColor: "#E1E6F0",
+                width: "42px",
+                lineHeight: "20px",
+              }}
+            >
               <button
-                className="flex items-center flex-none px-1"
+                className="flex items-center flex-grow px-1"
                 style={{
                   backgroundColor: "#E1E6F0",
-                  color: "white",
-                  fontSize: "18px",
                   lineHeight: "20px",
                 }}
-                onClick={this.enableEditMode}
+                onClick={this.handleTextClear}
               >
-                <FiEdit style={{ color: "#167DF5" }} />
+                <FiX style={{ color: "#167DF5" }} size={20} />
               </button>
-            </div> : null
-        }
-        {
-          this.state.editMode ?
-            <div className="flex items-stretch mb-4" style={{ minHeight: "110px" }}>
-              <div
-                className="flex items-center flex-none px-1"
+              <button
+                className="flex items-center flex-grow px-1"
                 style={{
-                  backgroundColor: this.props.editColor,
+                  backgroundColor: "#E1E6F0",
                   color: "white",
-                  fontSize: "18px",
                   lineHeight: "20px",
                 }}
+                onClick={this.handleTextSubmit}
               >
-                {this.props.textRecord.id}*
-              </div>
-              <textarea
-                className="flex-auto"
-                style={{
-                  backgroundColor: "white",
-                  fontSize: "18px",
-                  lineHeight: "27px",
-                }}
-                value={this.state.editText}
-                onChange={this.handleTextEdit}
-              />
-              <div className="flex flex-col flex-none px-1">
-                <button
-                  className="flex items-center flex-none px-1"
-                  style={{
-                    backgroundColor: "#E1E6F0",
-                    color: "white",
-                    fontSize: "18px",
-                    lineHeight: "20px",
-                  }}
-                  onClick={this.handleTextClear}
-                >
-                  X
-                </button>
-                <button
-                  className="flex items-center flex-none px-1"
-                  style={{
-                    backgroundColor: "#E1E6F0",
-                    color: "white",
-                    fontSize: "18px",
-                    lineHeight: "20px",
-                  }}
-                  onClick={this.handleTextSubmit}
-                >
-                  OK
-                </button>
-              </div>
-            </div> : null
-        }
+                <FiCheck style={{ color: "#167DF5" }} size={20}/>
+              </button>
+            </div>
+          </div>
+        ) : null}
       </>
     );
   }
 }
 
-export default InteractiveText;
\ No newline at end of file
+export default InteractiveText;
diff --git a/frontend/models/TextRecord.ts b/frontend/models/TextRecord.ts
index 09d16c1..f45dcfa 100644
--- a/frontend/models/TextRecord.ts
+++ b/frontend/models/TextRecord.ts
@@ -3,12 +3,16 @@ import AnalyzedText from "./AnalyzedText";
 class TextRecord {
   original: AnalyzedText;
   edited: AnalyzedText;
+  editLoading: boolean;
+  editError: any;
   id: number;
 
   constructor(text_generation_result: any) {
     this.id = text_generation_result.id;
     this.original = new AnalyzedText(text_generation_result);
     this.edited = null;
+    this.editLoading = false;
+    this.editError = null;
   }
 }
 
diff --git a/frontend/reducers.ts b/frontend/reducers.ts
index 7969eef..c30a770 100644
--- a/frontend/reducers.ts
+++ b/frontend/reducers.ts
@@ -17,14 +17,23 @@ function rootReducer(state = initialState, action) {
         case "REQUEST_GENERATE_TEXT":
           return Object.assign({}, state, {loading: true, error: null, analysisResults: [], selectedTextIds: []});
 
+        case "REQUEST_EDIT_TEXT": {
+          const record: TextRecord = state.analysisResults.find(item => item.id === action.id);
+          if (record) {
+            record.editLoading = true;
+          }
+          return Object.assign({}, state, {analysisResults: [...state.analysisResults]});
+        }
+
         case "REQUEST_GENERATE_TEXT_FAILED":
-          return Object.assign({}, state, {loding: false, error: action.error});
+          return Object.assign({}, state, {loading: false, error: action.error});
 
-        case "SET_GENERATED_TEXT_RESULTS":
+        case "SET_GENERATED_TEXT_RESULTS": {
           const analysisResults = action.text_generation_results?.map((result) => new TextRecord(result));
           return Object.assign({}, state, {loading: false, analysisResults: analysisResults, error: null});
+        }
         
-        case "SELECT_TEXT":
+        case "SELECT_TEXT": {
           const id = action.id;
           let textIds = state.selectedTextIds;
           if (state.selectedTextIds.includes(id)) {
@@ -33,24 +42,33 @@ function rootReducer(state = initialState, action) {
             textIds = [...textIds, id];
           }
           return Object.assign({}, state, {selectedTextIds: textIds});
+        }
         
-        case "EDIT_TEXT_SUCCEEDED":
+        case "EDIT_TEXT_SUCCEEDED": {
           const record: TextRecord = state.analysisResults.find(item => item.id === action.id);
           if (record) {
             record.edited = new AnalyzedText({...action.analysis, text: action.text, id: action.id});
+            record.editLoading = false;
           }
           return Object.assign({}, state, {analysisResults: [...state.analysisResults]});
+        }
         
-        case "EDIT_TEXT_FAILED":
+        case "EDIT_TEXT_FAILED": {
           console.log(action.error);
-          return Object.assign({}, state, {});
+          const record: TextRecord = state.analysisResults.find(item => item.id === action.id);
+          record.editLoading = false;
+          record.edited = null;
+          record.editError = action.error;
+          return Object.assign({}, state, {analysisResults: [...state.analysisResults]});
+        }
 
-        case "DELETE_EDIT_TEXT":
+        case "DELETE_EDIT_TEXT": {
           const rec: TextRecord = state.analysisResults.find(item => item.id === action.id);
           if (rec) {
             rec.edited = null;
           }
           return Object.assign({}, state, {analysisResults: [...state.analysisResults]});
+        }
 
         case "FOLD_FORM":
           return Object.assign({}, state, {isFolded: !state.isFolded});
diff --git a/transformerviz/server.py b/transformerviz/server.py
index ecba7b5..7107fd4 100644
--- a/transformerviz/server.py
+++ b/transformerviz/server.py
@@ -106,6 +106,6 @@ def generate_text():
 def analyze_text():
     request_json = request.json
     text = request_json.get("text", "")
-    analyzed_sentence = perspective_api_client.analyze_sentences(text).pop()
+    analyzed_sentence = perspective_api_client.analyze_sentences([text]).pop()
 
     return {"text_analysis_result": analyzed_sentence}

From f8a043d9b604369a8133ab2a2ca571263a109731 Mon Sep 17 00:00:00 2001
From: Nicholas King <v-nicki@microsoft.com>
Date: Wed, 2 Jun 2021 11:01:17 -0700
Subject: [PATCH 3/3] Change edit colors

---
 frontend/components/TextDetailedAnalysis.tsx | 29 ++++++++++++++------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/frontend/components/TextDetailedAnalysis.tsx b/frontend/components/TextDetailedAnalysis.tsx
index 63c7d27..6b915d9 100644
--- a/frontend/components/TextDetailedAnalysis.tsx
+++ b/frontend/components/TextDetailedAnalysis.tsx
@@ -11,6 +11,16 @@ type TextDetailedAnalysisProps = {
   deleteEditText: Function,
 }
 
+class TabColor {
+  original: string;
+  edited: string;
+
+  constructor(original: string, edited: string) {
+    this.original = original;
+    this.edited = edited;
+  }
+}
+
 class TextDetailedAnalysis extends React.Component<TextDetailedAnalysisProps, null> {
 
   constructor(props) {
@@ -18,27 +28,28 @@ class TextDetailedAnalysis extends React.Component<TextDetailedAnalysisProps, nu
   }
 
   render() {
+    const tabColors = [
+      new TabColor("#FD6D22", "FABB2D"),
+      new TabColor("#3AA757", "#4DBDC5"),
+      new TabColor("#ED4596", "#FF4C4C"),
+      new TabColor("#752BEE", "#3C85FA")
+    ]
 
     const getColor = (i: number) => {
-      const tabColors = ["#FD6D22", "#3AA757", "#ED4596", "#752BEE", "#4DBDC5", "#FABB2D", "#3C85FA", "#FF4C4C"];
       return tabColors[i % tabColors.length];
     }
 
-    const getEditColor = (baseColor: string) => {
-      return tinycolor(baseColor).lighten(20).toHexString();
-    }
-
     const textScores = new Array<AnalyzedText>();
     const spiderColors = new Array<string>();
 
     this.props.selectedText.forEach((text, index) => {
       textScores.push(text.original);
       const color = getColor(index);
-      spiderColors.push(color);
+      spiderColors.push(color.original);
 
       if (text.edited) {
         textScores.push(text.edited);
-        spiderColors.push(getEditColor(color));
+        spiderColors.push(color.edited);
       }
     });
 
@@ -65,8 +76,8 @@ class TextDetailedAnalysis extends React.Component<TextDetailedAnalysisProps, nu
           const color = getColor(index);
           return <InteractiveText 
                    textRecord={item} 
-                   tabColor={color} 
-                   editColor={getEditColor(color)}
+                   tabColor={color.original} 
+                   editColor={color.edited}
                    submitEditText={this.props.submitEditText}
                    deleteEditText={this.props.deleteEditText} />
         })}