Skip to content

Commit

Permalink
updates to UI that were requested
Browse files Browse the repository at this point in the history
  • Loading branch information
@kardiff18
kardiff18 committed Aug 29, 2019
1 parent affa9ed commit ae5ebfd
Show file tree
Hide file tree
Showing 39 changed files with 1,718 additions and 929 deletions.
1,169 changes: 1,149 additions & 20 deletions tools/ml-audio-content-moderation/app/angular/package-lock.json
View file

Large diffs are not rendered by default.

16 changes: 13 additions & 3 deletions tools/ml-audio-content-moderation/app/angular/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,14 @@
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
"e2e": "ng e2e",
"check": "gts check",
"clean": "gts clean",
"compile": "tsc -p .",
"fix": "gts fix",
"prepare": "npm run compile",
"pretest": "npm run compile",
"posttest": "npm run check"
},
"private": true,
"dependencies": {
Expand All @@ -23,6 +30,8 @@
"@angular/platform-browser-dynamic": "~7.0.0",
"@angular/router": "~7.0.0",
"@material-ui/core": "^3.9.3",
"@types/d3": "^5.7.2",
"ajv": "^6.9.1",
"bootstrap": "^4.3.1",
"core-js": "^2.5.4",
"d3": "^5.9.2",
Expand All @@ -49,8 +58,9 @@
"@angular/language-service": "~7.0.0",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"@types/node": "^10.0.3",
"codelyzer": "~4.5.0",
"gts": "^1.1.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.0.0",
Expand All @@ -61,6 +71,6 @@
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.1.1"
"typescript": "^3.1.2"
}
}
4 changes: 4 additions & 0 deletions tools/ml-audio-content-moderation/app/angular/prettier.config.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
module.exports = {
singleQuote: true,
trailingComma: 'es5',
};
54 changes: 23 additions & 31 deletions tools/ml-audio-content-moderation/app/angular/src/app/analysis/analysis.component.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,107 +2,99 @@
width: 100%;
}

.no-border > .mat-card{
.no-border > .mat-card {
box-shadow: none;
transition: none;
}

::ng-deep #threshold-0 .mat-accent .mat-slider-track-fill, .mat-slider-thumb, .mat-slider-thumb-label {
#threshold-0 .mat-accent .mat-slider-track-fill, .mat-slider-thumb, .mat-slider-thumb-label {
background-color: #388E3C!important;
}

::ng-deep #threshold-0 .mat-accent .mat-slider-thumb {
#threshold-0 .mat-accent .mat-slider-thumb {
background-color: #388E3C!important;
}

::ng-deep #threshold-0 .mat-accent .mat-slider-thumb-label {
#threshold-0 .mat-accent .mat-slider-thumb-label {
background-color: #388E3C!important;
}

::ng-deep #threshold-1 .mat-accent .mat-slider-track-fill {
#threshold-1 .mat-accent .mat-slider-track-fill {
background-color: #FFE57F!important;
}

::ng-deep #threshold-1 .mat-accent .mat-slider-thumb {
#threshold-1 .mat-accent .mat-slider-thumb {
background-color: #FFE57F!important;
}

::ng-deep #threshold-1 .mat-accent .mat-slider-thumb-label {
#threshold-1 .mat-accent .mat-slider-thumb-label {
background-color: #FFE57F!important;
}

::ng-deep #threshold-2 .mat-accent .mat-slider-track-fill
{
#threshold-2 .mat-accent .mat-slider-track-fill {
background-color: #E53935!important;
}

::ng-deep #threshold-2 .mat-accent .mat-slider-thumb
{
#threshold-2 .mat-accent .mat-slider-thumb {
background-color: #E53935!important;
}


::ng-deep #threshold-2 .mat-accent .mat-slider-thumb-label
{
#threshold-2 .mat-accent .mat-slider-thumb-label {
background-color: #E53935!important;
}

.icon-height{
.icon-height {
margin-top: 0.5em;
}

.output-content {
/*height: 45em;*/
}

.icon-color{
.icon-color {
color: #32CD32;
}

.text-toxicity-preview-height{
.text-toxicity-preview-height {
margin-top: 0.5em;
}

.icon-toxicity-preview-height{
.icon-toxicity-preview-height {
margin-top: 0.25em;
}

.bar-width{
.bar-width {
width: 60%;
}

.legend-col{
.legend-col {
width: 8em;
}

.legend-scale{
.legend-scale {
padding-top: 0.5em;
padding-bottom: 0.5em;
}

::ng-deep #toxicity-bar-0 .mat-progress-bar-fill::after{
#toxicity-bar-0 .mat-progress-bar-fill::after {
background-color: #388E3C!important;
}

::ng-deep #toxicity-bar-1 .mat-progress-bar-fill::after{
#toxicity-bar-1 .mat-progress-bar-fill::after {
background-color: #FFE57F!important;
}

::ng-deep #toxicity-bar-2 .mat-progress-bar-fill::after{
#toxicity-bar-2 .mat-progress-bar-fill::after {
background-color: #E53935!important;
}

.slider-box{
.slider-box {
margin: 1em;
width: 95%;
}

.mat-expansion-panel{
.mat-expansion-panel {
margin-left: 0.25em;
margin-right: 0.25em;
}

.output-container{
.output-container {
width: 80%;
margin:auto;
}
51 changes: 16 additions & 35 deletions tools/ml-audio-content-moderation/app/angular/src/app/analysis/analysis.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,8 @@
<div class="output-container">
<mat-tab-group class="my-4" mat-align-tabs="center">
<mat-tab label="Toxicity">
<!--<div class="summary-table mt-2">-->
<!--<div class="row justify-content-center">-->
<!--<h6 class="dark-grey-font"><b>Toxicity Count by Category</b></h6>-->
<!--</div>-->
<!--<div class="row justify-content-center vcenter">-->
<!--<div *ngFor="let toxicity_bucket of getToxicityBuckets(); let i = index;">-->
<!--<div class="col legend-col">-->
<!--<div class="row justify-content-center">-->
<!--<label class="dark-grey-font"><b> {{ this.toxicity_levels[i].label }}</b></label>-->
<!--</div>-->
<!--<div class="row legend-scale justify-content-center"-->
<!--[ngStyle]="{'background-color': this.toxicity_levels[i].background_color,-->
<!--'color': this.toxicity_levels[i].text_color}">-->
<!--{{ toxicity_bucket }}-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->

<div class="histogram">
<app-histogram [histogram_data]="histogram_data"></app-histogram>
<app-histogram [histogramData]="histogramData"></app-histogram>
</div>
<div class="row justify-content-center vcenter">
<div class="col-auto">
Expand All @@ -33,9 +13,9 @@
<div class="col-auto">
<mat-form-field>
<mat-label>Sort</mat-label>
<mat-select (selectionChange)="sortResults()" [(ngModel)]="selected_sort">
<mat-option *ngFor="let sort of sort_options" [value]="sort.value">
{{ sort.view_value }}
<mat-select (selectionChange)="sortResults()" [(ngModel)]="selectedSort">
<mat-option *ngFor="let sort of sortOptions" [value]="sort.value">
{{ sort.viewValue }}
</mat-option>
</mat-select>
</mat-form-field>
Expand All @@ -46,34 +26,33 @@
</b></label>
</div>
</div>
<mat-card class="slider-box" *ngIf="show_slider_filter">
<mat-card class="slider-box" *ngIf="showSliderFilter">
<mat-card-content>
<div class="row justify-content-center">
<label class="dark-grey-font"><b>Move Slider to Filter by Toxicity Level</b></label>
</div>
<div class="row justify-content-center">
<div class="col-auto">
<mat-icon class="icon-height" [ngStyle]="{'color': this.toxicity_levels[0].background_color}">
{{ this.toxicity_levels[0].shape }}</mat-icon>
<mat-icon class="icon-height" [ngStyle]="{'color': this.toxicityLevels[0].backgroundColor}">
{{ this.toxicityLevels[0].shape }}</mat-icon>
</div>
<div class="col-md-6">
<div id="{{'threshold-' + getThreshold(slider_value / this.toxicity_levels.length)}}">
<div id="{{'threshold-' + getToxicityBucketIndex(sliderValue / this.toxicityLevels.length)}}">
<mat-slider
[thumbLabel]="true"
[(ngModel)]="slider_value"
[(ngModel)]="sliderValue"
[min]="1"
[max]="this.toxicity_levels.length"
[max]="this.toxicityLevels.length"
[displayWith]="formatLabel(phrases)">
</mat-slider>
</div>
</div>
<div class="col-auto">
<mat-icon class="icon-height" [ngStyle]="{'color': this.toxicity_levels[2].background_color}">
{{ this.toxicity_levels[2].shape }}</mat-icon>
<mat-icon class="icon-height" [ngStyle]="{'color': this.toxicityLevels[2].backgroundColor}">
{{ this.toxicityLevels[2].shape }}</mat-icon>
</div>
</div>
</mat-card-content>

</mat-card>
<div data-simplebar class="output-content">
<mat-accordion>
Expand All @@ -99,7 +78,9 @@
<div class="col-auto">
{{ phrase.toxicity.toFixed(4) * 100 }}%
</div>
<mat-progress-bar id="{{'toxicity-bar-' + getThreshold(phrase.toxicity)}}" class="bar-width" [value]="phrase.toxicity * 100"></mat-progress-bar>
<mat-progress-bar id="{{'toxicity-bar-' + getToxicityBucketIndex(phrase.toxicity)}}"
class="bar-width" [value]="phrase.toxicity * 100">
</mat-progress-bar>
</div>
<div class="row my-2">
<div class="col-auto">
Expand All @@ -120,7 +101,7 @@
</mat-tab>

<mat-tab label="Full Transcription">
<label class="mx-4 my-2">{{ full_transcript }}</label>
<label class="mx-4 my-2">{{ fullTranscript }}</label>
</mat-tab>

</mat-tab-group>
Expand Down
25 changes: 0 additions & 25 deletions tools/ml-audio-content-moderation/app/angular/src/app/analysis/analysis.component.spec.ts
View file

This file was deleted.

Loading

0 comments on commit ae5ebfd

Please sign in to comment.