Prototype of app layout

development/index.html

@@ -10,7 +10,7 @@
     <script>
         window.API_SERVICE_ENVIRONMENT = { port: 5000 };
         window.APP_STATE = {
-            text_generation_results: [],
+            analysisResults: [],
             error: null,
             loading: false
         };

frontend/MainContainer.tsx

@@ -1,5 +1,4 @@
-import React from "react";
-import ReactDOM from "react-dom";
+import React, { useState } from "react";
 import { bindActionCreators } from "redux";
 import { connect } from 'react-redux';
 import {
@@ -10,29 +9,63 @@ import {
 } from './actions';
 import TextGenerationControl from "./components/TextGenerationControl";
 import TextGenerationResults from "./components/TextGenerationResults";
+import TextDetailedAnalysis from "./components/TextDetailedAnalysis";
+import AnalyzedText from "./models/AnalyzedText";
 
+type ContainerProps = {
+  analysisResults: AnalyzedText[],
+  error: any,
+  loading: any,
+  requestGenerateText: Function,
+  setGeneratedTextResults: Function,
+  generateTextFailed: any,
+  generateText: any
+}
 
-function Container({
-  text_generation_results,
+const Container: React.FunctionComponent<ContainerProps> = ({
+  analysisResults,
   error,
   loading,
   requestGenerateText,
   setGeneratedTextResults,
   generateTextFailed,
   generateText
-  }) {
+  }) => {
+    const [selectedTextIds, setSelectedTextIds] = useState(new Array<number>());
+    console.log("Container state: ", selectedTextIds)
+
+    const onSelectTextId = (id: number) => {
+      if (selectedTextIds.includes(id)) {
+        console.log(`Deselecting ${id}`)
+        // Deselect
+        setSelectedTextIds(selectedTextIds.filter(item => item != id));
+      } else {
+        console.log(`Selecting ${id}`)
+        // Add to selected ids
+        setSelectedTextIds([...selectedTextIds, id]);
+      }
+    }
 
     return (
-      <div className="container">
+      <div className="m-4 font-sans">
         <TextGenerationControl generateText={generateText} />
-        <TextGenerationResults generatedResults={text_generation_results} loading={loading} error={error} />
+        <div className="grid grid-cols-2 gap-4">
+          <TextGenerationResults 
+            analysisResults={analysisResults}
+            loading={loading}
+            error={error}
+            onSelectTextId={onSelectTextId}
+            selectedTextIds={selectedTextIds} />
+          <TextDetailedAnalysis
+            selectedText={analysisResults.filter(item => selectedTextIds.includes(item.id))} />
+        </div>
       </div>
     );
 }
 
 function mapStateToProps (state) {
   return {
-    text_generation_results: state.text_generation_results,
+    analysisResults: state.analysisResults,
     error: state.error,
     loading: state.loading,
   };

frontend/components/TextDetailedAnalysis.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+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";
+
+type TextDetailedAnalysisProps = {
+  selectedText: AnalyzedText[],
+}
+
+class TextGenerationResults extends React.Component<TextDetailedAnalysisProps, null> {
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const tabColors = ["#FD8A40", "#60B877", "#F03C92", "#8B3CF0"];
+    return (
+      <div>
+        <div className="mb-4 text-2xl">
+          d3 SVG chart here
+        </div>
+        {this.props.selectedText.map((item, index) => 
+          <div className="flex items-stretch mb-4" style={{height: "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"}}/>
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+}
+
+export default TextGenerationResults;

frontend/components/TextGenerationControl.tsx

@@ -2,29 +2,30 @@ import React, { FunctionComponent } from "react";
 import ReactDOM from "react-dom";
 import { Fabric } from "office-ui-fabric-react/lib/Fabric";
 import { TextField } from "office-ui-fabric-react/lib/TextField";
-import { DefaultButton } from "office-ui-fabric-react/lib/Button";
+import { PrimaryButton } from "office-ui-fabric-react/lib/Button";
 import { Checkbox, Stack, Slider } from "office-ui-fabric-react";
 
-
 type TextGenerationControlProps = {
-  generateText: Function
-}
+  generateText: Function;
+};
 
 type TextGenerationControlState = {
-  textGenerationPrompt: string,
-  model: string,
-  doSample: boolean,
-  earlyStopping: boolean,
-  minLength: number,
-  maxLength: number,
-  topK: number,
-  topP: number,
-  temperature: number,
-  numBeams: number
-}
-
-class TextGenerationControl extends React.Component<TextGenerationControlProps, TextGenerationControlState> {
-
+  textGenerationPrompt: string;
+  model: string;
+  doSample: boolean;
+  earlyStopping: boolean;
+  minLength: number;
+  maxLength: number;
+  topK: number;
+  topP: number;
+  temperature: number;
+  numBeams: number;
+};
+
+class TextGenerationControl extends React.Component<
+  TextGenerationControlProps,
+  TextGenerationControlState
+> {
   constructor(props) {
     super(props);
     this.state = {
@@ -37,94 +38,122 @@ class TextGenerationControl extends React.Component<TextGenerationControlProps,
       topK: 50,
       topP: 1.0,
       temperature: 1.0,
-      numBeams: 1
-    }
+      numBeams: 1,
+    };
   }
 
   generateTextClickHandler = () => {
     this.props.generateText({
-      "prompt": this.state.textGenerationPrompt,
-      "model": this.state.model,
-      "do_sample": this.state.doSample,
-      "early_stopping": this.state.earlyStopping,
-      "min_length": this.state.minLength,
-      "max_length": this.state.maxLength,
-      "top_k": this.state.topK,
-      "top_p": this.state.topP,
-      "temperature": this.state.temperature,
-      "num_beams": this.state.numBeams
-    })
-  }
+      prompt: this.state.textGenerationPrompt,
+      model: this.state.model,
+      do_sample: this.state.doSample,
+      early_stopping: this.state.earlyStopping,
+      min_length: this.state.minLength,
+      max_length: this.state.maxLength,
+      top_k: this.state.topK,
+      top_p: this.state.topP,
+      temperature: this.state.temperature,
+      num_beams: this.state.numBeams,
+    });
+  };
 
   onTextPromptChange = (evt) => {
     this.setState({
-      textGenerationPrompt: evt.target.value
+      textGenerationPrompt: evt.target.value,
     });
-  }
+  };
 
-  onSampleChange = (evt?: React.FormEvent<HTMLElement | HTMLInputElement>, isChecked?: boolean) => {
+  onSampleChange = (
+    evt?: React.FormEvent<HTMLElement | HTMLInputElement>,
+    isChecked?: boolean
+  ) => {
     this.setState({
-      doSample: isChecked
-    })
-  }
+      doSample: isChecked,
+    });
+  };
 
-  onEarlyStoppingChange = (evt?: React.FormEvent<HTMLElement | HTMLInputElement>, isChecked?: boolean) => {
+  onEarlyStoppingChange = (
+    evt?: React.FormEvent<HTMLElement | HTMLInputElement>,
+    isChecked?: boolean
+  ) => {
     this.setState({
-      earlyStopping: isChecked
-    })
-  }
+      earlyStopping: isChecked,
+    });
+  };
 
   onMaxLengthChange = (evt: any) => {
     this.setState({
-      maxLength: parseInt(evt.target.value)
-    })
-  }
+      maxLength: parseInt(evt.target.value),
+    });
+  };
 
   onMinLengthChange = (evt: any) => {
     this.setState({
-      minLength: parseInt(evt.target.value)
-    })
-  }
+      minLength: parseInt(evt.target.value),
+    });
+  };
 
   onTopKChange = (evt: any) => {
     this.setState({
-      topK: parseInt(evt.target.value)
-    })
-  }
+      topK: parseInt(evt.target.value),
+    });
+  };
 
   onNumBeamsChange = (evt: any) => {
     this.setState({
-      numBeams: parseInt(evt.target.value)
-    })
-  }
+      numBeams: parseInt(evt.target.value),
+    });
+  };
 
   onTemperatureChange = (value: number) => {
     this.setState({
-      temperature: value
+      temperature: value,
     });
-  }
+  };
 
   onTopPChange = (value: number) => {
     this.setState({
-      topP: value
-    })
-  }
+      topP: value,
+    });
+  };
 
   render() {
-
     return (
-      <Fabric styles={{root: {width: "410px", backgroundColor: "white", padding: "24px", border: "1px solid #E7E7E7", borderRadius: "4px"}}}>
-        <TextField
-          label="Text Generation Prompt"
-          name="prompt"
-          value={this.state.textGenerationPrompt}
-          onChange={this.onTextPromptChange}
-        />
-        <Stack styles={{root: {marginTop: "24px", marginBottom: "20px"}}}>
-          <Checkbox label="Sample" onChange={this.onSampleChange} styles={{root: {paddingBottom: "16px"}}} />
-          <Checkbox label="Early Stopping" onChange={this.onEarlyStoppingChange} />
-        </Stack>
-        <Stack>
+      <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}
+            styles={{ root: { paddingBottom: "16px" } }}
+          />
+          <Checkbox
+            label="Early Stopping"
+            onChange={this.onEarlyStoppingChange}
+          />
           <TextField
             label="Max Length"
             defaultValue="20"
@@ -145,8 +174,6 @@ class TextGenerationControl extends React.Component<TextGenerationControlProps,
             defaultValue="1"
             onChange={this.onNumBeamsChange}
           />
-        </Stack>
-        <Stack>
           <Slider
             label="Temperature"
             min={0.0}
@@ -161,11 +188,8 @@ class TextGenerationControl extends React.Component<TextGenerationControlProps,
             step={0.1}
             onChange={this.onTopPChange}
           />
-        </Stack>
-        <div className="text-generation-control-row">
-          <DefaultButton type="primary" onClick={this.generateTextClickHandler}>Generate</DefaultButton>
         </div>
-      </Fabric>
+      </div>
     );
   }
 }