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

Layout fixes and input validation #18

Merged
nking-1 merged 4 commits into from
May 25, 2021
Merged

Layout fixes and input validation #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
18a9aca
Put selected text ids in Redux store
May 25, 2021
34941f5
Fix bar chart centering
May 25, 2021
d35281e
Improve text generation form layout, add dropdowns
May 25, 2021
0e396dd
Use mask to prevent NaN input, adjust form layout
May 25, 2021
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
1 change: 1 addition & 0 deletions development/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
window.API_SERVICE_ENVIRONMENT = { port: 5000 };
window.APP_STATE = {
analysisResults: [],
selectedTextIds: [],
error: null,
loading: false
};
Expand Down
30 changes: 11 additions & 19 deletions frontend/MainContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@ import {
requestGenerateText,
setGeneratedTextResults,
generateTextFailed,
generateText
generateText,
selectText
} from './actions';
import TextGenerationControl from "./components/TextGenerationControl";
import TextGenerationResults from "./components/TextGenerationResults";
Expand All @@ -16,36 +17,25 @@ type ContainerProps = {
analysisResults: AnalyzedText[],
error: any,
loading: any,
selectedTextIds: Array<number>,
requestGenerateText: Function,
setGeneratedTextResults: Function,
generateTextFailed: any,
generateText: any
selectText: Function
}

const Container: React.FunctionComponent<ContainerProps> = ({
analysisResults,
error,
loading,
selectedTextIds,
requestGenerateText,
setGeneratedTextResults,
generateTextFailed,
generateText
generateText,
selectText
}) => {
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]);
}
}

const getDetailedAnalysisComponent = () => {
if (selectedTextIds.length == 0) {
return (<React.Fragment />);
Expand All @@ -65,7 +55,7 @@ const Container: React.FunctionComponent<ContainerProps> = ({
analysisResults={analysisResults}
loading={loading}
error={error}
onSelectTextId={onSelectTextId}
onSelectTextId={selectText}
selectedTextIds={selectedTextIds} />
{getDetailedAnalysisComponent()}
</div>
Expand All @@ -78,6 +68,7 @@ function mapStateToProps (state) {
analysisResults: state.analysisResults,
error: state.error,
loading: state.loading,
selectedTextIds: state.selectedTextIds,
};
}

Expand All @@ -86,7 +77,8 @@ function mapDispatchToProps (dispatch) {
requestGenerateText: requestGenerateText,
setGeneratedTextResults: setGeneratedTextResults,
generateTextFailed: generateTextFailed,
generateText: generateText
generateText: generateText,
selectText: selectText
}, dispatch);
}

Expand Down
7 changes: 7 additions & 0 deletions frontend/actions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,11 +30,18 @@ function generateText(config) {
}
}

function selectText(id: number) {
return {
type: "SELECT_TEXT",
id: id
}
}


export {
requestGenerateText,
setGeneratedTextResults,
generateTextFailed,
generateText,
selectText,
};
20 changes: 20 additions & 0 deletions frontend/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,4 +24,24 @@ h1 {
.plot-spider {
display: flex;
justify-content: center;
}

.light-gray-text {
color: #8A8886;
}

.text-gen-form-grid {
display: grid;
grid-template-columns: 1fr 2fr 2fr 3fr;
}

.stacked-text-field-grid {
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 2fr;
align-items: center;
}

.ms-Checkbox-label {
font-weight: 600;
}
9 changes: 5 additions & 4 deletions frontend/components/PerspectiveScoresBarChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ type PerspectiveScoresBarChartState = {

type PerspectiveScoresBarChartProps = {
id: number,
width: number,
scores: any,
defaultSelectedScore: string
}
Expand Down Expand Up @@ -52,7 +53,7 @@ class PerspectiveScoresBarChart extends Component<PerspectiveScoresBarChartProps

var margin = { top: 5, right: 15, bottom: 50, left: 55 }
var h = 111 - margin.top - margin.bottom
var w = 200;
var w = this.props.width;

// SVG
d3.select(`#${this.domID}`).remove();
Expand All @@ -66,7 +67,7 @@ class PerspectiveScoresBarChart extends Component<PerspectiveScoresBarChartProps
yScale = d3.scaleLinear().range([h, 0]);

var g = svg.append("g")
.attr("transform", "translate(" + 55 + "," + margin.top + ")");
.attr("transform", "translate(0," + margin.top + ")");

xScale.domain(this.props.scores.map(function(d) { return d.score; }));
yScale.domain([0.0, 1.0]);
Expand All @@ -78,8 +79,8 @@ class PerspectiveScoresBarChart extends Component<PerspectiveScoresBarChartProps
.attr("transform", "translate(0," + h + ")")
.append("text")
.attr("y", 30)
.attr("x", (w + margin.left)/2)
.attr("text-anchor", "end")
.attr("x", w/2)
.attr("text-anchor", "middle")
.attr("fill", "black")
.attr("font-size", "14px")
.text(selectedScoreMessage);
Expand Down
140 changes: 89 additions & 51 deletions frontend/components/TextGenerationControl.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ 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 { MaskedTextField } 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";
Expand Down Expand Up @@ -127,12 +128,15 @@ class TextGenerationControl extends React.Component<
}

render() {
const textFieldStyle = {root: {width: "110px", display: "inline-block"}};
if (this.state.isFolded) {
return (
<div
style={{
backgroundColor: "white",
padding: "24px",
paddingLeft: "24px",
paddingRight: "24px",
paddingTop: "24px",
border: "1px solid #E7E7E7",
borderRadius: "4px",
boxShadow: "0px 2px 12px rgba(0, 0, 0, 0.12)",
Expand All @@ -149,7 +153,7 @@ class TextGenerationControl extends React.Component<
/>
</div>
<button className="flex items-center justify-center w-full p-1" onClick={() => this.toggleFold()}>
<FiChevronDown />
<FiChevronDown size={25} className="light-gray-text" />
</button>
</div>
)
Expand All @@ -158,7 +162,9 @@ class TextGenerationControl extends React.Component<
<div
style={{
backgroundColor: "white",
padding: "24px",
paddingLeft: "24px",
paddingRight: "24px",
paddingTop: "24px",
border: "1px solid #E7E7E7",
borderRadius: "4px",
boxShadow: "0px 2px 12px rgba(0, 0, 0, 0.12)",
Expand All @@ -180,56 +186,88 @@ class TextGenerationControl extends React.Component<
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 className="text-gen-form-grid p-4" style={{backgroundColor: "#F3F6FD"}}>
<div className="grid grid-rows-2 items-center">
<Checkbox
label="Sample"
onChange={this.onSampleChange}
checked={this.state.doSample}
/>
<Checkbox
label="Early Stopping"
onChange={this.onEarlyStoppingChange}
checked={this.state.earlyStopping}
/>
</div>
<div className="stacked-text-field-grid">
<span className="mr-3 font-semibold text-right">Max Length</span>
<div>
<MaskedTextField
onChange={this.onMaxLengthChange}
value={this.state.maxLength.toString()}
mask="999"
maskChar=""
styles={textFieldStyle}
/>
<span className="ml-3 light-gray-text">[1-100]</span>
</div>
<span className="mr-3 font-semibold text-right">Min Length</span>
<div>
<MaskedTextField
onChange={this.onMinLengthChange}
value={this.state.minLength.toString()}
mask="999"
maskChar=""
styles={textFieldStyle}
/>
<span className="ml-3 light-gray-text">[1-100]</span>
</div>
</div>
<div className="stacked-text-field-grid">
<span className="mr-3 font-semibold text-right">Num. Beams</span>
<div>
<MaskedTextField
onChange={this.onNumBeamsChange}
value={this.state.numBeams.toString()}
mask="999"
maskChar=""
styles={textFieldStyle}
/>
<span className="ml-3 light-gray-text">[1-100]</span>
</div>
<span className="mr-3 font-semibold text-right">Top K</span>
<div>
<MaskedTextField
onChange={this.onTopKChange}
value={this.state.topK.toString()}
mask="999"
maskChar=""
styles={textFieldStyle}
/>
<div/>
</div>
</div>
<div className="grid grid-rows-2">
<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>
</div>
<button className="flex items-center justify-center w-full p-1" onClick={() => this.toggleFold()}>
<FiChevronUp />
<FiChevronUp size={25} className="light-gray-text" />
</button>
</div>
);
Expand Down
Loading