Fix component PR comments

- use isFinite
- Refactor default props
- Fix height of single line
- Remove codejar dependency
This commit is contained in:
Sam Nolan 2022-04-05 13:37:47 +10:00
parent 7e28be8f3b
commit 427c5d5615
6 changed files with 80 additions and 81 deletions

View File

@ -72,7 +72,6 @@
"@types/styled-components": "^5.1.24", "@types/styled-components": "^5.1.24",
"css-loader": "^6.7.1", "css-loader": "^6.7.1",
"prettier": "^2.6.0", "prettier": "^2.6.0",
"react-codejar": "^1.1.2",
"style-loader": "^3.3.1", "style-loader": "^3.3.1",
"ts-loader": "^9.2.8", "ts-loader": "^9.2.8",
"webpack": "^5.70.0", "webpack": "^5.70.0",

View File

@ -9,21 +9,27 @@ import "ace-builds/src-noconflict/keybinding-vim";
interface CodeEditorProps { interface CodeEditorProps {
value: string; value: string;
onChange: (value: string) => void; onChange: (value: string) => void;
oneLine: boolean; oneLine?: boolean;
width?: number; width?: number;
} }
export let CodeEditor: FC<CodeEditorProps> = (props) => ( export let CodeEditor: FC<CodeEditorProps> = ({
value,
onChange,
oneLine = false,
width = 500,
}: CodeEditorProps) => (
<AceEditor <AceEditor
value={props.value} value={value}
mode="golang" mode="golang"
theme="github" theme="github"
width={props.width ? props.width + "px" : "500px"} width={width + "px"}
height={props.oneLine ? "1.2em" : "500px"} maxLines={oneLine ? 1 : 15}
minLines={oneLine ? 1 : 15}
showGutter={false} showGutter={false}
highlightActiveLine={false} highlightActiveLine={false}
showPrintMargin={false} showPrintMargin={false}
onChange={props.onChange} onChange={onChange}
name="UNIQUE_ID_OF_DIV" name="UNIQUE_ID_OF_DIV"
editorProps={{ editorProps={{
$blockScrolling: true, $blockScrolling: true,
@ -31,7 +37,6 @@ export let CodeEditor: FC<CodeEditorProps> = (props) => (
setOptions={{ setOptions={{
enableBasicAutocompletion: false, enableBasicAutocompletion: false,
enableLiveAutocompletion: true, enableLiveAutocompletion: true,
enableSnippets: true,
}} }}
/> />
); );

View File

@ -22,7 +22,7 @@ let SquigglePercentilesChart = createClassFromSpec({
export interface SquiggleChartProps { export interface SquiggleChartProps {
/** The input string for squiggle */ /** The input string for squiggle */
squiggleString: string; squiggleString?: string;
/** If the output requires monte carlo sampling, the amount of samples */ /** If the output requires monte carlo sampling, the amount of samples */
sampleCount?: number; sampleCount?: number;
@ -44,19 +44,31 @@ export interface SquiggleChartProps {
width?: number; width?: number;
} }
export const SquiggleChart: React.FC<SquiggleChartProps> = (props) => { export const SquiggleChart: React.FC<SquiggleChartProps> = ({
squiggleString = "",
sampleCount = 1000,
outputXYPoints = 1000,
kernelWidth,
pointDistLength = 1000,
diagramStart = 0,
diagramStop = 10,
diagramCount = 20,
environment = [],
onEnvChange = () => {},
width = 500,
}: SquiggleChartProps) => {
let samplingInputs: SamplingInputs = { let samplingInputs: SamplingInputs = {
sampleCount: props.sampleCount, sampleCount: sampleCount,
outputXYPoints: props.outputXYPoints ? props.outputXYPoints : 1000, outputXYPoints: outputXYPoints,
kernelWidth: props.kernelWidth, kernelWidth: kernelWidth,
pointDistLength: props.pointDistLength ? props.pointDistLength : 1000, pointDistLength: pointDistLength,
}; };
let result = run(props.squiggleString, samplingInputs, props.environment); let result = run(squiggleString, samplingInputs, environment);
if (result.tag === "Ok") { if (result.tag === "Ok") {
let environment = result.value.environment; let environment = result.value.environment;
let exports = result.value.exports; let exports = result.value.exports;
if (props.onEnvChange) props.onEnvChange(environment); onEnvChange(environment);
let chartResults = exports.map((chartResult: exportDistribution) => { let chartResults = exports.map((chartResult: exportDistribution) => {
if (chartResult["NAME"] === "Float") { if (chartResult["NAME"] === "Float") {
return <MakeNumberShower precision={3} number={chartResult["VAL"]} />; return <MakeNumberShower precision={3} number={chartResult["VAL"]} />;
@ -78,7 +90,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = (props) => {
return ( return (
<SquiggleVegaChart <SquiggleVegaChart
width={props.width ? props.width : 500} width={width}
data={{ con: values }} data={{ con: values }}
actions={false} actions={false}
/> />
@ -170,9 +182,9 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = (props) => {
} }
} else if (chartResult.NAME === "Function") { } else if (chartResult.NAME === "Function") {
// We are looking at a function. In this case, we draw a Percentiles chart // We are looking at a function. In this case, we draw a Percentiles chart
let start = props.diagramStart ? props.diagramStart : 0; let start = diagramStart;
let stop = props.diagramStop ? props.diagramStop : 10; let stop = diagramStop;
let count = props.diagramCount ? props.diagramCount : 20; let count = diagramCount;
let step = (stop - start) / count; let step = (stop - start) / count;
let data = _.range(start, stop, step).map((x) => { let data = _.range(start, stop, step).map((x) => {
if (chartResult.NAME === "Function") { if (chartResult.NAME === "Function") {

View File

@ -27,50 +27,44 @@ export interface SquiggleEditorProps {
width: number; width: number;
} }
interface SquiggleEditorState { export let SquiggleEditor: React.FC<SquiggleEditorProps> = ({
expression: string; initialSquiggleString = "",
env: exportEnv; width = 500,
} sampleCount,
outputXYPoints,
export class SquiggleEditor extends React.Component< kernelWidth,
SquiggleEditorProps, pointDistLength,
SquiggleEditorState diagramStart,
> { diagramStop,
constructor(props: SquiggleEditorProps) { diagramCount,
super(props); onEnvChange,
let code = props.initialSquiggleString ? props.initialSquiggleString : ""; environment,
this.state = { expression: code, env: props.environment }; }: SquiggleEditorProps) => {
} let [expression, setExpression] = React.useState(initialSquiggleString);
render() { return (
let { expression, env } = this.state; <div>
let props = this.props; <CodeEditor
return ( width={width}
<div> value={expression}
<CodeEditor onChange={setExpression}
width={props.width ? props.width : 500} oneLine={true}
value={expression} />
onChange={(e) => { <SquiggleChart
this.setState({ expression: e }); width={width}
}} squiggleString={expression}
oneLine={true} sampleCount={sampleCount}
/> outputXYPoints={outputXYPoints}
<SquiggleChart kernelWidth={kernelWidth}
width={props.width ? props.width : 500} pointDistLength={pointDistLength}
squiggleString={expression} diagramStart={diagramStart}
sampleCount={props.sampleCount} diagramStop={diagramStop}
outputXYPoints={props.outputXYPoints} diagramCount={diagramCount}
kernelWidth={props.kernelWidth} environment={environment}
pointDistLength={props.pointDistLength} onEnvChange={onEnvChange}
diagramStart={props.diagramStart} />
diagramStop={props.diagramStop} </div>
diagramCount={props.diagramCount} );
environment={env} };
onEnvChange={props.onEnvChange}
/>
</div>
);
}
}
export function renderSquiggleEditor(props: SquiggleEditorProps) { export function renderSquiggleEditor(props: SquiggleEditorProps) {
let parent = document.createElement("div"); let parent = document.createElement("div");

View File

@ -1,3 +1,4 @@
import _ from "lodash";
import React, { FC, useState } from "react"; import React, { FC, useState } from "react";
import ReactDOM from "react-dom"; import ReactDOM from "react-dom";
import { SquiggleChart } from "./SquiggleChart"; import { SquiggleChart } from "./SquiggleChart";
@ -20,9 +21,9 @@ function FieldFloat(Props: FieldFloatProps) {
value={contents} value={contents}
className={Props.className ? Props.className : ""} className={Props.className ? Props.className : ""}
onChange={(e) => setContents(e.target.value)} onChange={(e) => setContents(e.target.value)}
onBlur={(_) => { onBlur={() => {
let result = parseFloat(contents); let result = parseFloat(contents);
if (result != NaN) { if (_.isFinite(result)) {
Props.onChange(result); Props.onChange(result);
} }
}} }}
@ -67,7 +68,7 @@ let SquigglePlayground: FC<Props> = (props) => {
value={squiggleString} value={squiggleString}
onChange={setSquiggleString} onChange={setSquiggleString}
oneLine={false} oneLine={false}
/>{" "} />
</Col> </Col>
</Row> </Row>
<Row gutter={16}> <Row gutter={16}>
@ -76,7 +77,7 @@ let SquigglePlayground: FC<Props> = (props) => {
value={sampleCount} value={sampleCount}
label="Sample Count" label="Sample Count"
onChange={setSampleCount} onChange={setSampleCount}
/>{" "} />
</Col> </Col>
<Col span={12}> <Col span={12}>
<FieldFloat <FieldFloat
@ -104,7 +105,7 @@ let SquigglePlayground: FC<Props> = (props) => {
value={diagramStop} value={diagramStop}
onChange={setDiagramStop} onChange={setDiagramStop}
label="Diagram Stop" label="Diagram Stop"
/>{" "} />
</Col> </Col>
<Col span={12}> <Col span={12}>
<FieldFloat <FieldFloat

View File

@ -6246,11 +6246,6 @@ coa@^2.0.2:
chalk "^2.4.1" chalk "^2.4.1"
q "^1.1.2" q "^1.1.2"
codejar@^3.2.3:
version "3.6.0"
resolved "https://registry.yarnpkg.com/codejar/-/codejar-3.6.0.tgz#be491d4db4d723da24f1bcd735ecad09e0f6c36d"
integrity sha512-30iPkdz4Y3d2qVMpMKsvEREtfUBH6JHvW2aWeoCBR67DUoZqSQLIvcAlLWZuTG7i7DonJkbCqkBnJPPhbj+J6w==
collapse-white-space@^1.0.2: collapse-white-space@^1.0.2:
version "1.0.6" version "1.0.6"
resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.6.tgz#e63629c0016665792060dbbeb79c42239d2c5287" resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.6.tgz#e63629c0016665792060dbbeb79c42239d2c5287"
@ -13997,13 +13992,6 @@ react-base16-styling@^0.6.0:
lodash.flow "^3.3.0" lodash.flow "^3.3.0"
pure-color "^1.2.0" pure-color "^1.2.0"
react-codejar@^1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/react-codejar/-/react-codejar-1.1.2.tgz#b55789f8c7e5360bb63f3d2501c99e49453845cf"
integrity sha512-xGmwZ3ij1AQNkpeJUgOIqFzgZx9Nl4/onflOt6FjJrexzRMkBowAqmLTlLzZGdA8QmCSJf7hSlrClHZGFC8b4A==
dependencies:
codejar "^3.2.3"
react-colorful@^5.1.2: react-colorful@^5.1.2:
version "5.5.1" version "5.5.1"
resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.5.1.tgz#29d9c4e496f2ca784dd2bb5053a3a4340cfaf784" resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.5.1.tgz#29d9c4e496f2ca784dd2bb5053a3a4340cfaf784"