Update GoogleCloudPlatform#2 to UI code

tools/ml-audio-content-moderation/app/angular/src/app/entity-modal/entity-modal.component.html

@@ -30,7 +30,7 @@ <h5 mat-dialog-title>
         </div>
       </div>
     </div>
-    <label *ngFor="let letter of highlighted_text; let i=index" [ngStyle]="{'color': 'grey'}">
+    <label *ngFor="let letter of highlightedText; let i=index" [ngStyle]="{'color': 'grey'}">
       <div *ngIf="letter.char == ' '">
         &nbsp;
       </div>

tools/ml-audio-content-moderation/app/angular/src/app/entity-modal/entity-modal.component.ts

@@ -14,7 +14,7 @@ export class EntityModalComponent implements AfterViewInit {
   sentiments: any = [];
   text: string;
   isLoading: boolean = false;
-  highlighted_text: any = [];
+  highlightedText: any = [];
   fileName: string;
   readonly entityTypeColors = [
     {
@@ -91,9 +91,9 @@ export class EntityModalComponent implements AfterViewInit {
 
   constructor(
     public readonly dialogRef: MatDialogRef<EntityModalComponent>,
-    public restangular: Restangular,
+    public readonly restangular: Restangular,
     private readonly dialog: MatDialog,
-    @Inject(MAT_DIALOG_DATA) private data: any
+    @Inject(MAT_DIALOG_DATA) private readonly data: any
   ) {
     this.text = data.text;
     this.fileName = data.fileName;
@@ -104,26 +104,30 @@ export class EntityModalComponent implements AfterViewInit {
       .color;
   }
 
-  private getSentimentScoreColor(score: number) {
-    return this.sentimentScoreColors.find(
-      item => score >= item.start && score < item.end
+  private isScoreBetweenValues(min: number, max: number, target: number) {
+    return min <= target && max > target;
+  }
+
+  private getSentimentScoreColor(currentScore: number) {
+    return this.sentimentScoreColors.find(bucket =>
+      this.isScoreBetweenValues(bucket.start, bucket.end, currentScore)
     ).backgroundColor;
   }
 
   private formatText() {
-    let charArray = this.text.split('');
+    const charArray = this.text.split('');
     charArray.forEach(char => {
-      this.highlighted_text.push({
+      this.highlightedText.push({
         char: char,
         color: 'grey',
       });
     });
     this.sentiments.forEach((sentiment: any) => {
-      const start_index = this.text.indexOf(sentiment.entity_name);
-      const end_index = start_index + sentiment.entity_name.length;
-      const entity_color = this.getSentimentScoreColor(sentiment.score);
-      for (let i = start_index; i <= end_index; i++) {
-        this.highlighted_text[i].color = entity_color;
+      const startIndex = this.text.indexOf(sentiment.entity_name);
+      const endIndex = startIndex + sentiment.entity_name.length;
+      const entityColor = this.getSentimentScoreColor(sentiment.score);
+      for (let i = startIndex; i <= endIndex; i++) {
+        this.highlightedText[i].color = entityColor;
       }
     });
   }

tools/ml-audio-content-moderation/app/angular/src/app/error-modal/error-modal.component.ts

@@ -13,7 +13,7 @@ export class ErrorModalComponent {
 
   constructor(
     private readonly dialogRef: MatDialogRef<ErrorModalComponent>,
-    @Inject(MAT_DIALOG_DATA) private data: any
+    @Inject(MAT_DIALOG_DATA) private readonly data: any
   ) {
     this.errorMessage = data.errorMessage;
   }

tools/ml-audio-content-moderation/app/angular/src/app/histogram/histogram.component.ts

@@ -17,7 +17,7 @@ import * as d3 from 'd3';
 /** Class to create histogram using D3 library. */
 export class HistogramComponent implements AfterViewInit {
   @ViewChild('chart') private chartContainer: ElementRef;
-  @Input() private histogramData: number[] = [];
+  @Input() private readonly histogramData: number[] = [];
   private readonly margin: any = { top: 20, bottom: 20, left: 20, right: 20 };
   private chart: any;
   private svg: any;
@@ -28,7 +28,7 @@ export class HistogramComponent implements AfterViewInit {
   constructor() {}
 
   private createChart() {
-    let element = this.chartContainer.nativeElement;
+    const element = this.chartContainer.nativeElement;
     this.width = element.offsetWidth - this.margin.left - this.margin.right;
     this.height = 220 - this.margin.top - this.margin.bottom;
     this.svg = d3
@@ -47,9 +47,9 @@ export class HistogramComponent implements AfterViewInit {
 
   private updateChart() {
     this.data = this.histogramData;
-    let x = d3.scaleLinear<number>().rangeRound([0, this.width]);
+    const x = d3.scaleLinear<number>().rangeRound([0, this.width]);
 
-    let datagenerator = d3
+    const datagenerator = d3
       .histogram<number, number>()
       .domain([x.domain()[0], x.domain()[1]])
       .thresholds([
@@ -66,9 +66,9 @@ export class HistogramComponent implements AfterViewInit {
         10 / 9,
       ]);
 
-    let bins = datagenerator(this.data);
+    const bins = datagenerator(this.data);
 
-    let y = d3
+    const y = d3
       .scaleLinear<number>()
       .domain([
         0,
@@ -78,7 +78,7 @@ export class HistogramComponent implements AfterViewInit {
       ])
       .range([this.height, 0]);
 
-    let bar = this.chart
+    const bar = this.chart
       .selectAll('.bar')
       .data(bins)
       .enter()
@@ -88,7 +88,7 @@ export class HistogramComponent implements AfterViewInit {
         return 'translate(' + x(d.x0) + ',' + y(d.length) + ')';
       });
 
-    let barWidth = x(bins[0].x1) - x(bins[0].x0) - 1;
+    const barWidth = x(bins[0].x1) - x(bins[0].x0) - 1;
 
     bar
       .append('rect')
@@ -101,7 +101,7 @@ export class HistogramComponent implements AfterViewInit {
         return this.height - y(d.length);
       });
 
-    let textLoc = (x(bins[0].x1) - x(bins[0].x0)) / 2;
+    const textLoc = (x(bins[0].x1) - x(bins[0].x0)) / 2;
 
     bar
       .append('text')
@@ -116,7 +116,7 @@ export class HistogramComponent implements AfterViewInit {
         return this.formatBucketCount(d.length);
       });
 
-    let xaxis = d3
+    const xaxis = d3
       .axisBottom(x)
       .tickValues(d3.range(0, 11 / 9, 1 / 9))
       .tickFormat((d: any) => {

tools/ml-audio-content-moderation/app/angular/src/app/main/main.component.ts

@@ -16,21 +16,21 @@ import { ErrorModalComponent } from '../error-modal/error-modal.component';
 export class MainComponent implements OnInit {
   isLoading: boolean = false;
   fileName: string = '';
-  displayedColumns: string[] = ['fileName', 'fileType'];
+  readonly displayedColumns: string[] = ['fileName', 'fileType'];
   dataSource: any = [];
   @ViewChild(MatPaginator) paginator: MatPaginator;
   initialSelection: object[] = [];
-  allowMultiSelect: boolean = false;
+  readonly allowMultiSelect: boolean = false;
   selection = new SelectionModel<any>(
     this.allowMultiSelect,
     this.initialSelection
   );
   resultsService = new ResultsService();
 
   constructor(
-    private restangular: Restangular,
-    private router: Router,
-    private dialog: MatDialog
+    private readonly restangular: Restangular,
+    private readonly router: Router,
+    private readonly dialog: MatDialog
   ) {}
 
   ngOnInit() {

tools/ml-audio-content-moderation/app/angular/src/app/results.service.ts

@@ -3,29 +3,30 @@ import { Injectable } from '@angular/core';
 @Injectable({
   providedIn: 'root',
 })
+/** Class for holding shared variables between components. */
 export class ResultsService {
   setSegmentToxicity(toxicityResults: object) {
-    localStorage.setItem('segment_toxicity', JSON.stringify(toxicityResults));
+    localStorage.setItem('segmentToxicity', JSON.stringify(toxicityResults));
   }
 
   getSegmentToxicity() {
-    return JSON.parse(localStorage.getItem('segment_toxicity'));
+    return JSON.parse(localStorage.getItem('segmentToxicity'));
   }
 
   setFullTranscript(fullTranscript: string) {
-    localStorage.setItem('full_transcript', fullTranscript);
+    localStorage.setItem('fullTranscript', fullTranscript);
   }
 
   getFullTranscript() {
-    return localStorage.getItem('full_transcript');
+    return localStorage.getItem('fullTranscript');
   }
 
   setFileName(fileName: string) {
-    localStorage.setItem('file_name', fileName);
+    localStorage.setItem('fileName', fileName);
   }
 
   getFileName() {
-    return localStorage.getItem('file_name');
+    return localStorage.getItem('fileName');
   }
 
   constructor() {}

tools/ml-audio-content-moderation/app/angular/src/app/toxicity-text-section.ts

@@ -1,4 +1,5 @@
-export class ToxicityTextSection {
+/** Interface representing returned object from Python toxicity result. */
+export interface ToxicityTextSection {
   toxicity: number;
   start_time: number;
   text: string;