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

Allow selection of sort by ascending or descending order #25

Merged
ilmarinen merged 1 commit into from
May 26, 2021
Merged

Allow selection of sort by ascending or descending order #25

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
47 changes: 37 additions & 10 deletions frontend/components/TextGenerationResults.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,14 +38,14 @@ class TextGenerationResults extends React.Component<TextGenerationResultsProps,
});
}

sortGeneratedTextResults(scoreLabel) {
sortGeneratedTextResults(scoreLabel, sortDescending) {
if (scoreLabel == "none") {
this.setState({
sortByLabel: scoreLabel,
analysisResults: this.props.analysisResults
});
} else {
const sortedAnalysisResults = this.state.analysisResults.map((result) => result).sort((resultA, resultB) => {
} else if (sortDescending) {
const sortedAnalysisResultsDescending = this.state.analysisResults.map((result) => result).sort((resultA, resultB) => {
if (resultA[scoreLabel] < resultB[scoreLabel]) {
return -1;
} else if (resultA[scoreLabel] == resultB[scoreLabel]) {
Expand All @@ -57,7 +57,22 @@ class TextGenerationResults extends React.Component<TextGenerationResultsProps,

this.setState({
sortByLabel: scoreLabel,
analysisResults: sortedAnalysisResults
analysisResults: sortedAnalysisResultsDescending
});
} else if (!sortDescending) {
const sortedAnalysisResultsAscending = this.state.analysisResults.map((result) => result).sort((resultA, resultB) => {
if (resultA[scoreLabel] < resultB[scoreLabel]) {
return 1;
} else if (resultA[scoreLabel] == resultB[scoreLabel]) {
return 0;
} else {
return -1;
}
});

this.setState({
sortByLabel: scoreLabel,
analysisResults: sortedAnalysisResultsAscending
});
}
}
Expand All @@ -72,9 +87,21 @@ class TextGenerationResults extends React.Component<TextGenerationResultsProps,
}
}

render() {
console.log(this.state);
sortDescending() {
this.setState({
sortDescending: true
});
this.sortGeneratedTextResults(this.state.sortByLabel, true);
}

sortAscending() {
this.setState({
sortDescending: false
});
this.sortGeneratedTextResults(this.state.sortByLabel, false);
}

render() {
if (this.props.error != null) {
return (
<div>Error generating text.</div>
Expand All @@ -94,7 +121,7 @@ class TextGenerationResults extends React.Component<TextGenerationResultsProps,
{ key: 'none', text: 'None'},
{ key: 'toxicity', text: 'Toxicity' },
{ key: 'severeToxicity', text: 'Severe Toxicity' },
{ key: 'identity', text: 'Identity Attack' },
{ key: 'identityAttack', text: 'Identity Attack' },
{ key: 'insult', text: 'Insult' },
{ key: 'profanity', text: 'Profanity' },
{ key: 'threat', text: 'Threat' },
Expand Down Expand Up @@ -129,16 +156,16 @@ class TextGenerationResults extends React.Component<TextGenerationResultsProps,
<h1>Generated Results</h1>
<Stack horizontal horizontalAlign="end" tokens={{childrenGap: 20}} styles={{root: {marginBottom: "16px"}}}>
<div className="flex items-end">
<button className={getSortClass(this.state.sortDescending)} onClick={() => this.setState({sortDescending: true})} ><IconSortDescending size={30} /></button>
<button className={getSortClass(!this.state.sortDescending)} onClick={() => this.setState({sortDescending: false})} ><IconSortAscending size={30} /></button>
<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>
<ComboBox
label="Sort by"
options={sortOptions}
styles={{root: {maxWidth: 160}}}
selectedKey={this.state.sortByLabel}
onChange={(evt, option) => {
this.sortGeneratedTextResults(option.key);
this.sortGeneratedTextResults(option.key, this.state.sortDescending);
}}
/>
<ComboBox
Expand Down