From 427c5d5615384d18b69f7d6e5c5bda066a11df08 Mon Sep 17 00:00:00 2001 From: Sam Nolan Date: Tue, 5 Apr 2022 13:37:47 +1000 Subject: [PATCH] Fix component PR comments - use isFinite - Refactor default props - Fix height of single line - Remove codejar dependency --- packages/components/package.json | 1 - packages/components/src/CodeEditor.tsx | 19 +++-- packages/components/src/SquiggleChart.tsx | 36 +++++--- packages/components/src/SquiggleEditor.tsx | 82 +++++++++---------- .../components/src/SquigglePlayground.tsx | 11 +-- yarn.lock | 12 --- 6 files changed, 80 insertions(+), 81 deletions(-) diff --git a/packages/components/package.json b/packages/components/package.json index 277d2cba..42468257 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -72,7 +72,6 @@ "@types/styled-components": "^5.1.24", "css-loader": "^6.7.1", "prettier": "^2.6.0", - "react-codejar": "^1.1.2", "style-loader": "^3.3.1", "ts-loader": "^9.2.8", "webpack": "^5.70.0", diff --git a/packages/components/src/CodeEditor.tsx b/packages/components/src/CodeEditor.tsx index 0a460ed8..f2634307 100644 --- a/packages/components/src/CodeEditor.tsx +++ b/packages/components/src/CodeEditor.tsx @@ -9,21 +9,27 @@ import "ace-builds/src-noconflict/keybinding-vim"; interface CodeEditorProps { value: string; onChange: (value: string) => void; - oneLine: boolean; + oneLine?: boolean; width?: number; } -export let CodeEditor: FC = (props) => ( +export let CodeEditor: FC = ({ + value, + onChange, + oneLine = false, + width = 500, +}: CodeEditorProps) => ( = (props) => ( setOptions={{ enableBasicAutocompletion: false, enableLiveAutocompletion: true, - enableSnippets: true, }} /> ); diff --git a/packages/components/src/SquiggleChart.tsx b/packages/components/src/SquiggleChart.tsx index 97608834..2e4234d9 100644 --- a/packages/components/src/SquiggleChart.tsx +++ b/packages/components/src/SquiggleChart.tsx @@ -22,7 +22,7 @@ let SquigglePercentilesChart = createClassFromSpec({ export interface SquiggleChartProps { /** The input string for squiggle */ - squiggleString: string; + squiggleString?: string; /** If the output requires monte carlo sampling, the amount of samples */ sampleCount?: number; @@ -44,19 +44,31 @@ export interface SquiggleChartProps { width?: number; } -export const SquiggleChart: React.FC = (props) => { +export const SquiggleChart: React.FC = ({ + squiggleString = "", + sampleCount = 1000, + outputXYPoints = 1000, + kernelWidth, + pointDistLength = 1000, + diagramStart = 0, + diagramStop = 10, + diagramCount = 20, + environment = [], + onEnvChange = () => {}, + width = 500, +}: SquiggleChartProps) => { let samplingInputs: SamplingInputs = { - sampleCount: props.sampleCount, - outputXYPoints: props.outputXYPoints ? props.outputXYPoints : 1000, - kernelWidth: props.kernelWidth, - pointDistLength: props.pointDistLength ? props.pointDistLength : 1000, + sampleCount: sampleCount, + outputXYPoints: outputXYPoints, + kernelWidth: kernelWidth, + pointDistLength: pointDistLength, }; - let result = run(props.squiggleString, samplingInputs, props.environment); + let result = run(squiggleString, samplingInputs, environment); if (result.tag === "Ok") { let environment = result.value.environment; let exports = result.value.exports; - if (props.onEnvChange) props.onEnvChange(environment); + onEnvChange(environment); let chartResults = exports.map((chartResult: exportDistribution) => { if (chartResult["NAME"] === "Float") { return ; @@ -78,7 +90,7 @@ export const SquiggleChart: React.FC = (props) => { return ( @@ -170,9 +182,9 @@ export const SquiggleChart: React.FC = (props) => { } } else if (chartResult.NAME === "Function") { // We are looking at a function. In this case, we draw a Percentiles chart - let start = props.diagramStart ? props.diagramStart : 0; - let stop = props.diagramStop ? props.diagramStop : 10; - let count = props.diagramCount ? props.diagramCount : 20; + let start = diagramStart; + let stop = diagramStop; + let count = diagramCount; let step = (stop - start) / count; let data = _.range(start, stop, step).map((x) => { if (chartResult.NAME === "Function") { diff --git a/packages/components/src/SquiggleEditor.tsx b/packages/components/src/SquiggleEditor.tsx index 0d37a411..7bb741f8 100644 --- a/packages/components/src/SquiggleEditor.tsx +++ b/packages/components/src/SquiggleEditor.tsx @@ -27,50 +27,44 @@ export interface SquiggleEditorProps { width: number; } -interface SquiggleEditorState { - expression: string; - env: exportEnv; -} - -export class SquiggleEditor extends React.Component< - SquiggleEditorProps, - SquiggleEditorState -> { - constructor(props: SquiggleEditorProps) { - super(props); - let code = props.initialSquiggleString ? props.initialSquiggleString : ""; - this.state = { expression: code, env: props.environment }; - } - render() { - let { expression, env } = this.state; - let props = this.props; - return ( -
- { - this.setState({ expression: e }); - }} - oneLine={true} - /> - -
- ); - } -} +export let SquiggleEditor: React.FC = ({ + initialSquiggleString = "", + width = 500, + sampleCount, + outputXYPoints, + kernelWidth, + pointDistLength, + diagramStart, + diagramStop, + diagramCount, + onEnvChange, + environment, +}: SquiggleEditorProps) => { + let [expression, setExpression] = React.useState(initialSquiggleString); + return ( +
+ + +
+ ); +}; export function renderSquiggleEditor(props: SquiggleEditorProps) { let parent = document.createElement("div"); diff --git a/packages/components/src/SquigglePlayground.tsx b/packages/components/src/SquigglePlayground.tsx index 6332967a..9af3287a 100644 --- a/packages/components/src/SquigglePlayground.tsx +++ b/packages/components/src/SquigglePlayground.tsx @@ -1,3 +1,4 @@ +import _ from "lodash"; import React, { FC, useState } from "react"; import ReactDOM from "react-dom"; import { SquiggleChart } from "./SquiggleChart"; @@ -20,9 +21,9 @@ function FieldFloat(Props: FieldFloatProps) { value={contents} className={Props.className ? Props.className : ""} onChange={(e) => setContents(e.target.value)} - onBlur={(_) => { + onBlur={() => { let result = parseFloat(contents); - if (result != NaN) { + if (_.isFinite(result)) { Props.onChange(result); } }} @@ -67,7 +68,7 @@ let SquigglePlayground: FC = (props) => { value={squiggleString} onChange={setSquiggleString} oneLine={false} - />{" "} + /> @@ -76,7 +77,7 @@ let SquigglePlayground: FC = (props) => { value={sampleCount} label="Sample Count" onChange={setSampleCount} - />{" "} + /> = (props) => { value={diagramStop} onChange={setDiagramStop} label="Diagram Stop" - />{" "} + />