Add sort buttons, add more tab colors, fix tab order bug

frontend/MainContainer.tsx

@@ -45,9 +45,10 @@ const Container: React.FunctionComponent<ContainerProps> = ({
       if (selectedTextIds.length == 0) {
         return (<React.Fragment />);
       } else {
+        const selectedText = selectedTextIds.map(id => analysisResults.find(item => id == item.id))
         return (
           <TextDetailedAnalysis
-            selectedText={analysisResults.filter(item => selectedTextIds.includes(item.id))} />
+            selectedText={selectedText} />
         );
       }
     }

frontend/app.css

@@ -58,4 +58,16 @@ h1 {
 
 .page-column {
   overflow-y: scroll;
+}
+
+.sort-button {
+  background: #FFFFFF;
+  border: 1px solid #167DF5;
+  box-sizing: border-box;
+  border-radius: 2px;
+}
+
+.sort-button.disabled-button {
+  background: #EFF2F4;
+  border: solid #EFF2F4 1px;
 }

frontend/components/TextDetailedAnalysis.tsx

@@ -17,7 +17,7 @@ class TextDetailedAnalysis extends React.Component<TextDetailedAnalysisProps, nu
   }
 
   render() {
-    const tabColors = ["#FD8A40", "#60B877", "#F03C92", "#8B3CF0"];
+    const tabColors = ["#FD6D22", "#3AA757", "#ED4596", "#752BEE", "#4DBDC5", "#FABB2D", "#3C85FA", "#FF4C4C"];
 
     return (
       <div className="page-column p-3" style={{boxShadow: "0px 0px 12px rgba(0, 0, 0, 0.12)"}}>

frontend/components/TextGenerationResults.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { ComboBox, IComboBoxOption, Stack } from "office-ui-fabric-react"
 import AnalyzedText from "../models/AnalyzedText";
 import PerspectiveScoresBarChart from "./PerspectiveScoresBarChart";
+import { IconSortDescending, IconSortAscending } from '@tabler/icons';
 
 type TextGenerationResultsProps = {
   analysisResults: AnalyzedText[],
@@ -14,7 +15,8 @@ type TextGenerationResultsProps = {
 type TextGenerationResultsState = {
   analysisResults: AnalyzedText[],
   highlightScoreLabel: string,
-  sortByLabel: string
+  sortByLabel: string,
+  sortDescending: boolean,
 }
 
 class TextGenerationResults extends React.Component<TextGenerationResultsProps, TextGenerationResultsState> {
@@ -25,7 +27,8 @@ class TextGenerationResults extends React.Component<TextGenerationResultsProps,
     this.state = {
       analysisResults: props.analysisResults,
       highlightScoreLabel: "toxicity",
-      sortByLabel: "none"
+      sortByLabel: "none",
+      sortDescending: true
     }
   }
 
@@ -110,13 +113,25 @@ class TextGenerationResults extends React.Component<TextGenerationResultsProps,
       { key: 'flirtation', text: 'Flirtation' },
     ];
 
+    const getSortClass = (enabled: boolean) => {
+      if (enabled) {
+        return "sort-button";
+      } else {
+        return "sort-button disabled-button";
+      }
+    }
+
     const chartWidth = 140;
 
     return (
       <div className="page-column">
         <div className="scroll-pane">
         <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>
+          </div>
           <ComboBox
             label="Sort by"
             options={sortOptions}

package.json

@@ -1,5 +1,6 @@
 {
   "dependencies": {
+    "@tabler/icons": "^1.41.2",
     "@types/lodash": "^4.14.169",
     "axios": "^0.21.1",
     "d3": "^5.16.0",