Implement folding for text generation form

.gitignore

@@ -1,5 +1,7 @@
 transformerviz.egg-info
 node_modules/
+dist/
+env/
 __pycache__
 *.pyc
 

frontend/app.css

@@ -6,46 +6,6 @@ body {
   min-height: 100%;
 }
 
-.button {
-  position: relative;
-  display: inline-block;
-}
-
-.container {
-  display: grid;
-  grid-template-columns: 1fr 3fr;
-  grid-template-rows: 1fr;
-  padding-left: 24px;
-  padding-right: 24px;
-  padding-top: 36px;
-  padding-bottom: 36px;
-  background-color: #F3F6FD;
-}
-
-.text-result {
-  padding: 10px;
-  background-color: #F3F6FD;
-}
-
-.text-result-content {
-  margin-left: 10px;
-  overflow: hidden;
-  flex-grow: 1;
-}
-
-.text-result-content-score {
-  margin-left: 10px;
-  overflow: hidden;
-  flex-grow: 1;
-}
-
-.text-result-content-generated-text {
-  margin-left: 10px;
-  overflow: hidden;
-  flex-grow: 1;
-  font-style: bold;
-}
-
 .bar {
   fill: rgba(252, 84, 104, 1);
 }
@@ -54,3 +14,9 @@ body {
   stroke-width: 2px;
   stroke: rgb(0,0,0, 1);
 }
+
+h1 {
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 20px;
+}

frontend/components/TextDetailedAnalysis.tsx

@@ -3,8 +3,8 @@ import * as d3 from "d3";
 import * as _ from "lodash"
 import ReactDOM from "react-dom";
 import AnalyzedText from "../models/AnalyzedText";
-import {BiEdit} from "react-icons/bi";
 import PerspectiveScoresSpiderChart from "./PerspectiveScoresSpiderChart";
+import { FiEdit } from "react-icons/fi";
 
 type TextDetailedAnalysisProps = {
   selectedText: AnalyzedText[],
@@ -20,7 +20,8 @@ class TextGenerationResults extends React.Component<TextDetailedAnalysisProps, n
     const tabColors = ["#FD8A40", "#60B877", "#F03C92", "#8B3CF0"];
 
     return (
-      <div>
+      <div className="p-3" style={{boxShadow: "0px 0px 12px rgba(0, 0, 0, 0.12)"}}>
+        <h1 className="mb-4">Toxicity Analysis</h1>
         <div className="mb-4 text-2xl">
           <PerspectiveScoresSpiderChart
             scores={this.props.selectedText}
@@ -38,15 +39,15 @@ class TextGenerationResults extends React.Component<TextDetailedAnalysisProps, n
           />
         </div>
         {this.props.selectedText.map((item, index) => 
-          <div className="flex items-stretch mb-4" style={{height: "110px"}}>
+          <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"}}>
               {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"}}>
-              <BiEdit style={{color: "#167DF5"}}/>
+              <FiEdit style={{color: "#167DF5"}}/>
             </div>
           </div>
         )}

frontend/components/TextGenerationControl.tsx

@@ -4,6 +4,7 @@ import { Fabric } from "office-ui-fabric-react/lib/Fabric";
 import { TextField } from "office-ui-fabric-react/lib/TextField";
 import { PrimaryButton } from "office-ui-fabric-react/lib/Button";
 import { Checkbox, Stack, Slider } from "office-ui-fabric-react";
+import { FiChevronUp, FiChevronDown } from "react-icons/fi";
 
 type TextGenerationControlProps = {
   generateText: Function;
@@ -14,6 +15,7 @@ type TextGenerationControlState = {
   model: string;
   doSample: boolean;
   earlyStopping: boolean;
+  isFolded: boolean;
   minLength: number;
   maxLength: number;
   topK: number;
@@ -33,11 +35,12 @@ class TextGenerationControl extends React.Component<
       model: "gpt2",
       doSample: false,
       earlyStopping: false,
+      isFolded: false,
       minLength: 10,
       maxLength: 20,
       topK: 50,
-      topP: 1.0,
-      temperature: 1.0,
+      topP: 0.0,
+      temperature: 0.0,
       numBeams: 1,
     };
   }
@@ -117,80 +120,120 @@ class TextGenerationControl extends React.Component<
     });
   };
 
+  toggleFold = () => {
+    this.setState({
+      isFolded: !this.state.isFolded
+    });
+  }
+
   render() {
-    return (
-      <div
-        style={{
-            backgroundColor: "white",
-            padding: "24px",
-            border: "1px solid #E7E7E7",
-            borderRadius: "4px",
-            boxShadow: "0px 2px 12px rgba(0, 0, 0, 0.12)",
-            marginBottom: "30px"
-        }}
-      >
-        <div className="flex items-end mb-4">
-          <TextField
-            className="flex-initial w-11/12 mr-4"
-            label="Text Generation Prompt"
-            placeholder="Input your prompt"
-            name="prompt"
-            value={this.state.textGenerationPrompt}
-            onChange={this.onTextPromptChange}
-          />
-          <PrimaryButton 
-            className="flex-auto"
-            text="Generate"
-            onClick={this.generateTextClickHandler}
-          />
+    if (this.state.isFolded) {
+      return (
+        <div
+          style={{
+              backgroundColor: "white",
+              padding: "24px",
+              border: "1px solid #E7E7E7",
+              borderRadius: "4px",
+              boxShadow: "0px 2px 12px rgba(0, 0, 0, 0.12)",
+              marginBottom: "30px"
+          }}
+        >
+          <div className="flex items-center">
+            <h1 className="mr-4">Text Generation Prompt</h1>
+            <TextField
+                className="flex-auto"
+                name="prompt"
+                value={this.state.textGenerationPrompt}
+                onChange={this.onTextPromptChange}
+              />
+          </div>
+          <button className="flex items-center justify-center w-full p-1" onClick={() => this.toggleFold()}>
+              <FiChevronDown />
+          </button>
         </div>
-        <div className="grid grid-rows-2 gap-4 grid-flow-col p-5" style={{backgroundColor: "#F3F6FD"}}>
-          <Checkbox
-            label="Sample"
-            onChange={this.onSampleChange}
-            styles={{ root: { paddingBottom: "16px" } }}
-          />
-          <Checkbox
-            label="Early Stopping"
-            onChange={this.onEarlyStoppingChange}
-          />
-          <TextField
-            label="Max Length"
-            defaultValue="20"
-            onChange={this.onMaxLengthChange}
-          />
-          <TextField
-            label="Min Length"
-            defaultValue="10"
-            onChange={this.onMinLengthChange}
-          />
-          <TextField
-            label="Top k"
-            defaultValue="50"
-            onChange={this.onTopKChange}
-          />
-          <TextField
-            label="Num. Beams"
-            defaultValue="1"
-            onChange={this.onNumBeamsChange}
-          />
-          <Slider
-            label="Temperature"
-            min={0.0}
-            max={1.0}
-            step={0.1}
-            onChange={this.onTemperatureChange}
-          />
-          <Slider
-            label="Top p"
-            min={0.0}
-            max={1.0}
-            step={0.1}
-            onChange={this.onTopPChange}
-          />
+      )
+    } else {
+      return (
+        <div
+          style={{
+              backgroundColor: "white",
+              padding: "24px",
+              border: "1px solid #E7E7E7",
+              borderRadius: "4px",
+              boxShadow: "0px 2px 12px rgba(0, 0, 0, 0.12)",
+              marginBottom: "30px"
+          }}
+        >
+          <div className="flex items-end mb-4">
+            <TextField
+              className="flex-initial w-11/12 mr-4"
+              label="Text Generation Prompt"
+              placeholder="Input your prompt"
+              name="prompt"
+              value={this.state.textGenerationPrompt}
+              onChange={this.onTextPromptChange}
+            />
+            <PrimaryButton 
+              className="flex-auto"
+              text="Generate"
+              onClick={this.generateTextClickHandler}
+            />
+          </div>
+          <div className="grid grid-rows-2 gap-4 grid-flow-col p-5" style={{backgroundColor: "#F3F6FD"}}>
+            <Checkbox
+              label="Sample"
+              onChange={this.onSampleChange}
+              checked={this.state.doSample}
+            />
+            <Checkbox
+              label="Early Stopping"
+              onChange={this.onEarlyStoppingChange}
+              checked={this.state.earlyStopping}
+            />
+            <TextField
+              label="Max Length"
+              onChange={this.onMaxLengthChange}
+              value={this.state.maxLength.toString()}
+            />
+            <TextField
+              label="Min Length"
+              onChange={this.onMinLengthChange}
+              value={this.state.minLength.toString()}
+            />
+            <TextField
+              label="Top k"
+              onChange={this.onTopKChange}
+              value={this.state.topK.toString()}
+            />
+            <TextField
+              label="Num. Beams"
+              onChange={this.onNumBeamsChange}
+              value={this.state.numBeams.toString()}
+            />
+            <Slider
+              label="Temperature"
+              min={0.0}
+              max={1.0}
+              step={0.1}
+              onChange={this.onTemperatureChange}
+              value={this.state.temperature}
+            />
+            <Slider
+              label="Top p"
+              min={0.0}
+              max={1.0}
+              step={0.1}
+              onChange={this.onTopPChange}
+              value={this.state.topP}
+            />
+          </div>
+          <button className="flex items-center justify-center w-full p-1" onClick={() => this.toggleFold()}>
+              <FiChevronUp />
+          </button>
         </div>
-      </div>
-    );
+      );
+    }
   }
 }
 

frontend/components/TextGenerationResults.tsx

@@ -56,9 +56,9 @@ class TextGenerationResults extends React.Component<TextGenerationResultsProps,
 
     return (
       <div>
-        <h4 className="mb-4 text-2xl" style={{fontWeight: 600}}>Generated Results</h4>
+        <h1 className="mb-4">Generated Results</h1>
         {this.props.analysisResults.map((item) => 
-          <div className="flex items-stretch mb-4" style={{height: "110px", border: this.props.selectedTextIds.includes(item.id) ? "solid #167DF5 2px" : "none"}}>
+          <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"}}>
               {item.id}
             </div>

frontend/index.tsx

@@ -8,8 +8,8 @@ import { createLogger } from 'redux-logger';
 import thunkMiddleware from 'redux-thunk';
 import { initializeIcons } from 'office-ui-fabric-react/lib/Icons';
 
-import "./app.css";
 import "./tailwind.css";
+import "./app.css";
 
 const loggerMiddleware = createLogger()
 const store = createStore(rootReducer, applyMiddleware(thunkMiddleware, loggerMiddleware));