Fix component PR comments

- use isFinite
- Refactor default props
- Fix height of single line
- Remove codejar dependency

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",

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<CodeEditorProps> = (props) => (
+export let CodeEditor: FC<CodeEditorProps> = ({
+  value,
+  onChange,
+  oneLine = false,
+  width = 500,
+}: CodeEditorProps) => (
   <AceEditor
-    value={props.value}
+    value={value}
     mode="golang"
     theme="github"
-    width={props.width ? props.width + "px" : "500px"}
-    height={props.oneLine ? "1.2em" : "500px"}
+    width={width + "px"}
+    maxLines={oneLine ? 1 : 15}
+    minLines={oneLine ? 1 : 15}
     showGutter={false}
     highlightActiveLine={false}
     showPrintMargin={false}
-    onChange={props.onChange}
+    onChange={onChange}
     name="UNIQUE_ID_OF_DIV"
     editorProps={{
       $blockScrolling: true,
@@ -31,7 +37,6 @@ export let CodeEditor: FC<CodeEditorProps> = (props) => (
     setOptions={{
       enableBasicAutocompletion: false,
       enableLiveAutocompletion: true,
-      enableSnippets: true,
     }}
   />
 );

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<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 = {
-    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 <MakeNumberShower precision={3} number={chartResult["VAL"]} />;
@@ -78,7 +90,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = (props) => {
 
           return (
             <SquiggleVegaChart
-              width={props.width ? props.width : 500}
+              width={width}
               data={{ con: values }}
               actions={false}
             />
@@ -170,9 +182,9 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = (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") {

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;
+export let SquiggleEditor: React.FC<SquiggleEditorProps> = ({
+  initialSquiggleString = "",
+  width = 500,
+  sampleCount,
+  outputXYPoints,
+  kernelWidth,
+  pointDistLength,
+  diagramStart,
+  diagramStop,
+  diagramCount,
+  onEnvChange,
+  environment,
+}: SquiggleEditorProps) => {
+  let [expression, setExpression] = React.useState(initialSquiggleString);
   return (
     <div>
       <CodeEditor
-          width={props.width ? props.width : 500}
+        width={width}
         value={expression}
-          onChange={(e) => {
-            this.setState({ expression: e });
-          }}
+        onChange={setExpression}
         oneLine={true}
       />
       <SquiggleChart
-          width={props.width ? props.width : 500}
+        width={width}
         squiggleString={expression}
-          sampleCount={props.sampleCount}
-          outputXYPoints={props.outputXYPoints}
-          kernelWidth={props.kernelWidth}
-          pointDistLength={props.pointDistLength}
-          diagramStart={props.diagramStart}
-          diagramStop={props.diagramStop}
-          diagramCount={props.diagramCount}
-          environment={env}
-          onEnvChange={props.onEnvChange}
+        sampleCount={sampleCount}
+        outputXYPoints={outputXYPoints}
+        kernelWidth={kernelWidth}
+        pointDistLength={pointDistLength}
+        diagramStart={diagramStart}
+        diagramStop={diagramStop}
+        diagramCount={diagramCount}
+        environment={environment}
+        onEnvChange={onEnvChange}
       />
     </div>
   );
-  }
-}
+};
 
 export function renderSquiggleEditor(props: SquiggleEditorProps) {
   let parent = document.createElement("div");

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> = (props) => {
                   value={squiggleString}
                   onChange={setSquiggleString}
                   oneLine={false}
-                />{" "}
+                />
               </Col>
             </Row>
             <Row gutter={16}>
@@ -76,7 +77,7 @@ let SquigglePlayground: FC<Props> = (props) => {
                   value={sampleCount}
                   label="Sample Count"
                   onChange={setSampleCount}
-                />{" "}
+                />
               </Col>
               <Col span={12}>
                 <FieldFloat
@@ -104,7 +105,7 @@ let SquigglePlayground: FC<Props> = (props) => {
                   value={diagramStop}
                   onChange={setDiagramStop}
                   label="Diagram Stop"
-                />{" "}
+                />
               </Col>
               <Col span={12}>
                 <FieldFloat

yarn.lock

@@ -6246,11 +6246,6 @@ coa@^2.0.2:
     chalk "^2.4.1"
     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:
   version "1.0.6"
   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"
     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:
   version "5.5.1"
   resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.5.1.tgz#29d9c4e496f2ca784dd2bb5053a3a4340cfaf784"