Skip to content
This repository was archived by the owner on Jun 11, 2026. It is now read-only.

Pre-demo UX tweaks #27

Merged
nking-1 merged 2 commits into from
May 27, 2021
Merged

Pre-demo UX tweaks #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a6d299a
Increase button size, chart text, bar chart border
May 27, 2021
4c10cda
tweak bar fill color, spacing on page
May 27, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion frontend/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ body {
}

.bar {
fill: rgba(252, 84, 104, 1);
}

.highlighted-bar {
Expand Down
13 changes: 11 additions & 2 deletions frontend/components/PerspectiveScoresBarChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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")
Expand All @@ -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 + ")")
Expand All @@ -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", function(d) {
if (d.value < 0.33) {
return "#F994A1";
}
if (d.value < 0.66) {
return "#FF374F";
}
return "#BB061C";
})
.classed("highlighted-bar", function(d) { return d.label == _this.state.selectedScore })
.on("click", function(d) {
_this.setSelectedScore(d.label);
Expand Down
10 changes: 5 additions & 5 deletions frontend/components/PerspectiveScoresSpiderChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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);
}

Expand Down
6 changes: 3 additions & 3 deletions frontend/components/TextDetailedAnalysis.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)}
Expand Down
19 changes: 13 additions & 6 deletions frontend/components/TextGenerationControl.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand All @@ -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"}}>
Expand Down
28 changes: 16 additions & 12 deletions frontend/components/TextGenerationResults.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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' },
Expand All @@ -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' },
Expand All @@ -151,7 +151,7 @@ class TextGenerationResults extends React.Component<TextGenerationResultsProps,
}
}

const chartWidth = 140;
const chartWidth = 160;

const getAscendingDescendingButtons = () => {
if (this.state.sortByLabel != "none") {
Expand All @@ -167,36 +167,40 @@ 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"}}}>
{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);
}}
/>
</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: "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
Expand Down