Fix component PR comments

- use isFinite - Refactor default props - Fix height of single line - Remove codejar dependency
2022-04-05 13:37:47 +10:00 · 2022-04-05 13:37:47 +10:00 · 427c5d5615
commit 427c5d5615
parent 7e28be8f3b
6 changed files with 80 additions and 81 deletions
--- 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",
--- 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<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,
    }}
  />
 );
--- 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<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") {
--- 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 (
-      <div>
-        <CodeEditor
-          width={props.width ? props.width : 500}
-          value={expression}
-          onChange={(e) => {
-            this.setState({ expression: e });
-          }}
-          oneLine={true}
-        />
-        <SquiggleChart
-          width={props.width ? props.width : 500}
-          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}
-        />
-      </div>
-    );
-  }
-}
+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={width}
+        value={expression}
+        onChange={setExpression}
+        oneLine={true}
+      />
+      <SquiggleChart
+        width={width}
+        squiggleString={expression}
+        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");
--- 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> = (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
--- a/yarn.lock
+++ b/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"