Update output block heights in browser, for #266.

donkirkby · Jul 6, 2020 · fedf1c0 · fedf1c0
1 parent 7826233
commit fedf1c0
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -203,7 +203,7 @@ GitHub, and install Docker. After that, follow these steps for each release.
    Sometimes, I've had to remove all build products and rebuild. Either
    `make clean` or `git clean -f -Xd`.
 4. After the lengthy build process, run the
-   `live-py-plugin/test/PySrc/tools/serve_demo.py` script. It will copy all of
+   `live-py-plugin/test/PySrc/tools/serve_demo.py` script. It will copy all
    the Pyodide files into the demo directory.
 
 To update the ReactJS files, change to the `html` folder, and run

diff --git a/html/src/App.js b/html/src/App.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, {Component} from 'react';
 import AceEditor from 'react-ace';
 import ReactMarkdown from 'react-markdown';
 import SampleAnalyst from './SampleAnalyst.js';
@@ -169,6 +169,10 @@ class CodeSample extends Component {
         }
     }
 
+    countLines(text) {
+        return text.split(/\r\n|\r|\n/).length;
+    }
+
     render() {
         let displayValue = this.context;
         if (displayValue === null) {
@@ -179,7 +183,7 @@ class CodeSample extends Component {
             outputHeaders = null,
             outputSection = null,
             resetButton = null,
-            lineCount = 1 + this.state.source.split(/\r\n|\r|\n/).length;
+            sourceLineCount = 1 + this.countLines(this.state.source);
         if (this.state.isLive) {
             displayEditor = <div className="editor-pane">
                 <Editor
@@ -199,13 +203,18 @@ class CodeSample extends Component {
             </div>;
         }
         if (this.state.goalOutput !== undefined) {
+            let outputLineCount = this.countLines(this.state.output),
+                goalLineCount = this.countLines(this.state.goalOutput),
+                outputSize = Math.min(
+                    50, 1 + Math.max(outputLineCount, goalLineCount));
             progressBar = <ProgressBar percentage={this.state.matchPercentage}/>;
             outputHeaders = <div className="editor-wrapper">
                 <h4 className="editor-header">Goal output</h4>
                 <h4 className="editor-header">Your output</h4>
             </div>;
             outputSection = <div className="editor-wrapper">
-                <div className="editor-pane">
+                <div className="editor-pane"
+                     style={{height: outputSize*18 + "px"}}>
                     <Editor
                         value={this.state.goalOutput}
                         markers={this.state.goalMarkers}
@@ -227,7 +236,7 @@ class CodeSample extends Component {
             <div className="codeSample">
                 <div className="editor-wrapper">
                     <div className="editor-pane"
-                        style={{height: lineCount*18 + "px"}}>
+                        style={{height: sourceLineCount*18 + "px"}}>
                         <Editor
                             value={this.state.source}
                             scrollTop={this.state.scrollTop}

diff --git a/test/PySrc/tools/serve_demo.py b/test/PySrc/tools/serve_demo.py
@@ -18,6 +18,7 @@
 
 
 def parse_args():
+    # noinspection PyTypeChecker
     parser = ArgumentParser(description='Run the demo web site.',
                             formatter_class=ArgumentDefaultsHelpFormatter)
     parser.add_argument('--no_update',