From 823111b2707b0be052e5ae0698a83758773e90ab Mon Sep 17 00:00:00 2001
From: Nicholas King <v-nicki@microsoft.com>
Date: Tue, 25 May 2021 16:44:11 -0700
Subject: [PATCH 1/3] Make the columns scroll separately

---
 frontend/MainContainer.tsx                    | 16 +++++++++++++---
 frontend/app.css                              | 14 ++++++++++++++
 frontend/components/TextDetailedAnalysis.tsx  |  6 +++---
 frontend/components/TextGenerationControl.tsx |  6 ++++--
 frontend/components/TextGenerationResults.tsx |  4 +++-
 5 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/frontend/MainContainer.tsx b/frontend/MainContainer.tsx
index 5f92678..33091b2 100644
--- a/frontend/MainContainer.tsx
+++ b/frontend/MainContainer.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { bindActionCreators } from "redux";
 import { connect } from 'react-redux';
 import {
@@ -36,6 +36,8 @@ const Container: React.FunctionComponent<ContainerProps> = ({
   generateText,
   selectText
   }) => {
+    const [isFolded, setIsFolded] = useState(false);
+
     const getDetailedAnalysisComponent = () => {
       if (selectedTextIds.length == 0) {
         return (<React.Fragment />);
@@ -47,10 +49,18 @@ const Container: React.FunctionComponent<ContainerProps> = ({
       }
     }
 
+    useEffect(() => {
+      const form = document.getElementById("text_gen_form");
+      const grid = document.getElementById("two_column_grid");
+      if (grid) {
+        grid.style.height = `calc(93.5vh - ${form?.offsetHeight}px)`
+      }
+    })
+
     return (
       <div className="m-4 font-sans">
-        <TextGenerationControl generateText={generateText} />
-        <div className="grid grid-cols-2 gap-4">
+        <TextGenerationControl generateText={generateText} onFold={() => setIsFolded(!isFolded)} />
+        <div id="two_column_grid" className="two-column-grid gap-4">
           <TextGenerationResults 
             analysisResults={analysisResults}
             loading={loading}
diff --git a/frontend/app.css b/frontend/app.css
index fa85492..f812801 100644
--- a/frontend/app.css
+++ b/frontend/app.css
@@ -4,6 +4,8 @@ html {
 
 body {
   min-height: 100%;
+  max-height: 100vh;
+  overflow: hidden;
 }
 
 .bar {
@@ -44,4 +46,16 @@ h1 {
 
 .ms-Checkbox-label {
   font-weight: 600;
+}
+
+.two-column-grid {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr;
+  align-items: stretch;
+}
+
+.page-column {
+  overflow-y: scroll;
 }
\ No newline at end of file
diff --git a/frontend/components/TextDetailedAnalysis.tsx b/frontend/components/TextDetailedAnalysis.tsx
index e3de57d..1148b09 100644
--- a/frontend/components/TextDetailedAnalysis.tsx
+++ b/frontend/components/TextDetailedAnalysis.tsx
@@ -10,7 +10,7 @@ type TextDetailedAnalysisProps = {
   selectedText: AnalyzedText[],
 }
 
-class TextGenerationResults extends React.Component<TextDetailedAnalysisProps, null> {
+class TextDetailedAnalysis extends React.Component<TextDetailedAnalysisProps, null> {
 
   constructor(props) {
     super(props);
@@ -20,7 +20,7 @@ class TextGenerationResults extends React.Component<TextDetailedAnalysisProps, n
     const tabColors = ["#FD8A40", "#60B877", "#F03C92", "#8B3CF0"];
 
     return (
-      <div className="p-3" style={{boxShadow: "0px 0px 12px rgba(0, 0, 0, 0.12)"}}>
+      <div className="page-column 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
@@ -56,4 +56,4 @@ class TextGenerationResults extends React.Component<TextDetailedAnalysisProps, n
   }
 }
 
-export default TextGenerationResults;
+export default TextDetailedAnalysis;
diff --git a/frontend/components/TextGenerationControl.tsx b/frontend/components/TextGenerationControl.tsx
index 7557f25..5d5c175 100644
--- a/frontend/components/TextGenerationControl.tsx
+++ b/frontend/components/TextGenerationControl.tsx
@@ -9,6 +9,7 @@ import { FiChevronUp, FiChevronDown } from "react-icons/fi";
 
 type TextGenerationControlProps = {
   generateText: Function;
+  onFold: Function;
 };
 
 type TextGenerationControlState = {
@@ -122,6 +123,7 @@ class TextGenerationControl extends React.Component<
   };
 
   toggleFold = () => {
+    this.props.onFold();
     this.setState({
       isFolded: !this.state.isFolded
     });
@@ -131,7 +133,7 @@ class TextGenerationControl extends React.Component<
     const textFieldStyle = {root: {width: "110px", display: "inline-block"}};
     if (this.state.isFolded) {
       return (
-        <div
+        <div id="text_gen_form"
           style={{
               backgroundColor: "white",
               paddingLeft: "24px",
@@ -159,7 +161,7 @@ class TextGenerationControl extends React.Component<
       )
     } else {
       return (
-        <div
+        <div id="text_gen_form"
           style={{
               backgroundColor: "white",
               paddingLeft: "24px",
diff --git a/frontend/components/TextGenerationResults.tsx b/frontend/components/TextGenerationResults.tsx
index 217697a..0432f50 100644
--- a/frontend/components/TextGenerationResults.tsx
+++ b/frontend/components/TextGenerationResults.tsx
@@ -75,7 +75,8 @@ class TextGenerationResults extends React.Component<TextGenerationResultsProps,
     const chartWidth = 140;
 
     return (
-      <div>
+      <div className="page-column">
+        <div className="scroll-pane">
         <h1>Generated Results</h1>
         <Stack horizontal horizontalAlign="end" tokens={{childrenGap: 20}} styles={{root: {marginBottom: "16px"}}}>
           <ComboBox
@@ -106,6 +107,7 @@ class TextGenerationResults extends React.Component<TextGenerationResultsProps,
             </button>
           </div>
         )}
+        </div>
       </div>
     );
   }

From ef7979a815458df23b1d4997778c9332b7829384 Mon Sep 17 00:00:00 2001
From: Nicholas King <v-nicki@microsoft.com>
Date: Tue, 25 May 2021 16:49:22 -0700
Subject: [PATCH 2/3] Tweak bar chart border color

---
 frontend/components/TextGenerationResults.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/components/TextGenerationResults.tsx b/frontend/components/TextGenerationResults.tsx
index 0432f50..4cc0812 100644
--- a/frontend/components/TextGenerationResults.tsx
+++ b/frontend/components/TextGenerationResults.tsx
@@ -95,7 +95,7 @@ class TextGenerationResults extends React.Component<TextGenerationResultsProps,
             <div className="flex items-center flex-none px-1" style={{backgroundColor: "#8894B1", color: "white", fontSize: "18px", lineHeight: "20px"}}>
               {item.id}
             </div>
-            <div className="flex-none" style={{width: `${chartWidth}px`, border: "solid black 1px"}}>
+            <div className="flex-none" style={{width: `${chartWidth}px`, border: "solid #E7E7E7 1px"}}>
               <PerspectiveScoresBarChart id={item.id} width={chartWidth} scores={getResultScoreObj(item)} defaultSelectedScore="TOXICITY" />
             </div>
             <button 

From b25f88895e7513e133d9cb8bf0797e05087e82ed Mon Sep 17 00:00:00 2001
From: Nicholas King <v-nicki@microsoft.com>
Date: Wed, 26 May 2021 10:13:15 -0700
Subject: [PATCH 3/3] Move isFolded into redux store

---
 development/index.html                        |  1 +
 frontend/MainContainer.tsx                    | 19 ++++++++++++-------
 frontend/actions.ts                           |  7 +++++++
 frontend/components/TextGenerationControl.tsx |  8 ++------
 frontend/reducers.ts                          |  4 ++++
 transformerviz/assets/index.html              |  1 +
 6 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/development/index.html b/development/index.html
index 7439887..1c39224 100644
--- a/development/index.html
+++ b/development/index.html
@@ -13,6 +13,7 @@
             analysisResults: [],
             selectedTextIds: [],
             error: null,
+            isFolded: false,
             loading: false
         };
     </script>
diff --git a/frontend/MainContainer.tsx b/frontend/MainContainer.tsx
index 33091b2..5f5b466 100644
--- a/frontend/MainContainer.tsx
+++ b/frontend/MainContainer.tsx
@@ -6,7 +6,8 @@ import {
   setGeneratedTextResults,
   generateTextFailed,
   generateText,
-  selectText
+  selectText,
+  foldForm
 } from './actions';
 import TextGenerationControl from "./components/TextGenerationControl";
 import TextGenerationResults from "./components/TextGenerationResults";
@@ -17,27 +18,29 @@ type ContainerProps = {
   analysisResults: AnalyzedText[],
   error: any,
   loading: any,
+  isFolded: boolean,
   selectedTextIds: Array<number>,
   requestGenerateText: Function,
   setGeneratedTextResults: Function,
   generateTextFailed: any,
   generateText: any
-  selectText: Function
+  selectText: Function,
+  foldForm: Function
 }
 
 const Container: React.FunctionComponent<ContainerProps> = ({
   analysisResults,
   error,
   loading,
+  isFolded,
   selectedTextIds,
   requestGenerateText,
   setGeneratedTextResults,
   generateTextFailed,
   generateText,
-  selectText
+  selectText,
+  foldForm
   }) => {
-    const [isFolded, setIsFolded] = useState(false);
-
     const getDetailedAnalysisComponent = () => {
       if (selectedTextIds.length == 0) {
         return (<React.Fragment />);
@@ -59,7 +62,7 @@ const Container: React.FunctionComponent<ContainerProps> = ({
 
     return (
       <div className="m-4 font-sans">
-        <TextGenerationControl generateText={generateText} onFold={() => setIsFolded(!isFolded)} />
+        <TextGenerationControl generateText={generateText} onFold={() => foldForm()} isFolded={isFolded} />
         <div id="two_column_grid" className="two-column-grid gap-4">
           <TextGenerationResults 
             analysisResults={analysisResults}
@@ -79,6 +82,7 @@ function mapStateToProps (state) {
     error: state.error,
     loading: state.loading,
     selectedTextIds: state.selectedTextIds,
+    isFolded: state.isFolded
   };
 }
 
@@ -88,7 +92,8 @@ function mapDispatchToProps (dispatch) {
     setGeneratedTextResults: setGeneratedTextResults,
     generateTextFailed: generateTextFailed,
     generateText: generateText,
-    selectText: selectText
+    selectText: selectText,
+    foldForm: foldForm,
   }, dispatch);
  }
 
diff --git a/frontend/actions.ts b/frontend/actions.ts
index 48565e4..efee7d8 100644
--- a/frontend/actions.ts
+++ b/frontend/actions.ts
@@ -30,6 +30,12 @@ function generateText(config) {
     }
 }
 
+function foldForm() {
+  return {
+    type: "FOLD_FORM"
+  }
+}
+
 function selectText(id: number) {
   return {
     type: "SELECT_TEXT",
@@ -44,4 +50,5 @@ export {
   generateTextFailed,
   generateText,
   selectText,
+  foldForm,
 };
diff --git a/frontend/components/TextGenerationControl.tsx b/frontend/components/TextGenerationControl.tsx
index 5d5c175..7146a9b 100644
--- a/frontend/components/TextGenerationControl.tsx
+++ b/frontend/components/TextGenerationControl.tsx
@@ -10,6 +10,7 @@ import { FiChevronUp, FiChevronDown } from "react-icons/fi";
 type TextGenerationControlProps = {
   generateText: Function;
   onFold: Function;
+  isFolded: boolean;
 };
 
 type TextGenerationControlState = {
@@ -17,7 +18,6 @@ type TextGenerationControlState = {
   model: string;
   doSample: boolean;
   earlyStopping: boolean;
-  isFolded: boolean;
   minLength: number;
   maxLength: number;
   topK: number;
@@ -37,7 +37,6 @@ class TextGenerationControl extends React.Component<
       model: "gpt2",
       doSample: true,
       earlyStopping: false,
-      isFolded: false,
       minLength: 10,
       maxLength: 70,
       topK: 0,
@@ -124,14 +123,11 @@ class TextGenerationControl extends React.Component<
 
   toggleFold = () => {
     this.props.onFold();
-    this.setState({
-      isFolded: !this.state.isFolded
-    });
   }
 
   render() {
     const textFieldStyle = {root: {width: "110px", display: "inline-block"}};
-    if (this.state.isFolded) {
+    if (this.props.isFolded) {
       return (
         <div id="text_gen_form"
           style={{
diff --git a/frontend/reducers.ts b/frontend/reducers.ts
index 75abfd4..df09ecd 100644
--- a/frontend/reducers.ts
+++ b/frontend/reducers.ts
@@ -5,6 +5,7 @@ const rawInitialState = {
    selectedTextIds: [],
    error: null,
    loading: false,
+   isFolded: false
 }
 
 const initialState = window["APP_STATE"] || rawInitialState;
@@ -31,6 +32,9 @@ function rootReducer(state = initialState, action) {
             textIds = [...textIds, id];
           }
           return Object.assign({}, state, {selectedTextIds: textIds});
+        
+        case "FOLD_FORM":
+          return Object.assign({}, state, {isFolded: !state.isFolded});
 
         default:
             return state
diff --git a/transformerviz/assets/index.html b/transformerviz/assets/index.html
index 0dc343e..072003b 100644
--- a/transformerviz/assets/index.html
+++ b/transformerviz/assets/index.html
@@ -15,6 +15,7 @@
             analysisResults: [],
             selectedTextIds: [],
             error: null,
+            isFolded: false,
             loading: false
         };