Result bar chart

frontend/app.css

@@ -45,3 +45,12 @@ body {
   flex-grow: 1;
   font-style: bold;
 }
+
+.bar {
+  fill: rgba(252, 84, 104, 1);
+}
+
+.highlighted-bar {
+  stroke-width: 2px;
+  stroke: rgb(0,0,0, 1);
+}

frontend/components/PerspectiveScoresBarChart.tsx

@@ -0,0 +1,112 @@
+import React, { Component } from "react";
+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';
+
+
+type PerspectiveScoresBarChartState = {
+  selectedScore: string
+}
+
+type PerspectiveScoresBarChartProps = {
+  id: number,
+  scores: any,
+  defaultSelectedScore: string
+}
+
+class PerspectiveScoresBarChart extends Component<PerspectiveScoresBarChartProps, PerspectiveScoresBarChartState> {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      selectedScore: props.defaultSelectedScore
+    };
+
+    this.node = React.createRef<HTMLDivElement>();
+    this.domID = `perspectivescoresbarchart-${props.id}`;
+  }
+
+  node: React.RefObject<HTMLDivElement>
+
+  domID: string
+
+  componentDidMount() {
+    this.createDistributionBarChart();
+  }
+
+  componentDidUpdate() {
+    this.createDistributionBarChart();
+  }
+
+  setSelectedScore = (selectedScore: string) => {
+    this.setState({
+      selectedScore: selectedScore
+    });
+  }
+
+  createDistributionBarChart = () => {
+    var _this = this;
+    var body = d3.select(this.node.current);
+
+    var margin = { top: 5, right: 15, bottom: 50, left: 55 }
+    var h = 111 - margin.top - margin.bottom
+    var w = 200;
+
+    // SVG
+    d3.select(`#${this.domID}`).remove();
+    var svg = body.append('svg')
+        .attr('id', this.domID)
+        .attr('height',h + margin.top + margin.bottom)
+        .attr('width',w)
+        .attr('float', 'left');
+
+    var xScale = d3.scaleBand().range([0, w]).padding(0.4),
+        yScale = d3.scaleLinear().range([h, 0]);
+
+    var g = svg.append("g")
+               .attr("transform", "translate(" + 55 + "," + margin.top + ")");
+
+    xScale.domain(this.props.scores.map(function(d) { return d.score; }));
+    yScale.domain([0.0, 1.0]);
+
+    var selectedScoreObj = this.props.scores.filter(scoreObj => (scoreObj.score == this.state.selectedScore))[0];
+    var selectedScoreMessage = `${selectedScoreObj.scoreName}: ${selectedScoreObj.value.toFixed(2)}`;
+
+    g.append("g")
+     .attr("transform", "translate(0," + h + ")")
+     .append("text")
+     .attr("y", 30)
+     .attr("x", (w + margin.left)/2)
+     .attr("text-anchor", "end")
+     .attr("fill", "black")
+     .attr("font-size", "14px")
+     .text(selectedScoreMessage);
+
+    g.selectAll(".bar")
+     .data(this.props.scores)
+     .enter().append("rect")
+     .attr("class", "bar")
+     .attr("x", function(d) { return xScale(d.score); })
+     .attr("y", function(d) { return yScale(d.value); })
+     .attr("width", xScale.bandwidth())
+     .attr("height", function(d) { return h - yScale(d.value); })
+     .classed("highlighted-bar", function(d) { return d.score == _this.state.selectedScore })
+     .on("click", function(d) {
+       _this.setSelectedScore(d.score);
+     });
+  }
+
+  render() {
+    return (
+      <div className="plot plot-distribution">
+        <div ref={this.node}/>
+      </div>
+    );
+  }
+}
+
+
+
+export default PerspectiveScoresBarChart;

frontend/components/TextGenerationResults.tsx

@@ -1,6 +1,12 @@
 import React from "react";
 import * as _ from "lodash"
 import AnalyzedText from "../models/AnalyzedText";
+import ReactDOM from "react-dom";
+import { Fabric } from "office-ui-fabric-react/lib/Fabric";
+import { TextField } from "office-ui-fabric-react/lib/TextField";
+import { DefaultButton } from "office-ui-fabric-react/lib/Button";
+import { List } from "office-ui-fabric-react/lib/List";
+import PerspectiveScoresBarChart from "./PerspectiveScoresBarChart";
 
 type TextGenerationResultsProps = {
   analysisResults: AnalyzedText[],
@@ -33,6 +39,21 @@ class TextGenerationResults extends React.Component<TextGenerationResultsProps,
       );
     }
 
+    const getResultScoreObj: any = (item: any) => {
+      let resultScores = [
+        {score: "TOXICITY", value: item.toxicity, scoreName: "Toxicity"},
+        {score: "SEVERE_TOXICITY", value: item.severeToxicity, scoreName: "Severe Toxicity"},
+        {score: "IDENTITY_ATTACK", value: item.identityAttack, scoreName: "Identity Attack"},
+        {score: "INSULT", value: item.insult, scoreName: "Insult"},
+        {score: "PROFANITY", value: item.profanity, scoreName: "Profanity"},
+        {score: "THREAT", value: item.threat, scoreName: "Threat"},
+        {score: "SEXUALLY_EXPLICIT", value: item.sexuallyExplicit, scoreName: "Sexually Explicit"},
+        {score: "FLIRTATION", value: item.flirtation, scoreName: "Flirtation"}
+      ];
+
+      return resultScores;
+    }
+
     return (
       <div>
         <h4 className="mb-4 text-2xl" style={{fontWeight: 600}}>Generated Results</h4>
@@ -42,7 +63,7 @@ class TextGenerationResults extends React.Component<TextGenerationResultsProps,
               {item.id}
             </div>
             <div className="flex-none" style={{width: "140px", border: "solid black 1px"}}>
-              BAR CHART HERE
+              <PerspectiveScoresBarChart id={item.id} scores={getResultScoreObj(item)} defaultSelectedScore="TOXICITY" />
             </div>
             <button 
               className="flex items-center flex-auto text-left px-4"

frontend/models/AnalyzedText.ts

@@ -10,9 +10,9 @@ class AnalyzedText {
   sexuallyExplicit: number;
   flirtation: number;
 
-  constructor(text_generation_result: any, id: number) {
+  constructor(text_generation_result: any) {
     this.text = text_generation_result.text;
-    this.id = id;
+    this.id = text_generation_result.id;
     this.toxicity = text_generation_result.perspective.attributeScores.TOXICITY.summaryScore.value;
     this.severeToxicity = text_generation_result.perspective.attributeScores.SEVERE_TOXICITY.summaryScore.value;
     this.identityAttack = text_generation_result.perspective.attributeScores.IDENTITY_ATTACK.summaryScore.value;

frontend/reducers.ts

@@ -18,7 +18,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, index) => new AnalyzedText(result, index+1));
+          const analysisResults = action.text_generation_results?.map((result) => new AnalyzedText(result));
           return Object.assign({}, state, {loading: false, analysisResults: analysisResults, error: null});
 
         default:

package.json

@@ -42,6 +42,7 @@
     "html-webpack-plugin": "^4.5.0",
     "jest": "^26.6.0",
     "mini-css-extract-plugin": "^0.12.0",
+    "postcss": ">=8.2.10",
     "react-refresh": "^0.8.3",
     "react-test-renderer": "^16.7.0",
     "source-map-loader": "^1.0.1",

transformerviz/server.py

@@ -91,4 +91,7 @@ def generate_text():
         temperature=temperature,
         num_beams=num_beams)
     analyzed_sentences = perspective_api_client.analyze_sentences(generated_sentences)
-    return {"text_generation_results": analyzed_sentences}
+    analyzed_sentences_with_ids = list(map(
+        lambda analyzed_sentence_id_tuple: {"id": analyzed_sentence_id_tuple[0], "text": analyzed_sentence_id_tuple[1]["text"], "perspective": analyzed_sentence_id_tuple[1]["perspective"]},
+        enumerate(analyzed_sentences)))
+    return {"text_generation_results": analyzed_sentences_with_ids}