Improve visualization performance and revise toolbar buttons

Author: 64json

src/frontend/apis/index.js

@@ -70,6 +70,15 @@ const GitHubApi = {
 
 let jsWorker = null;
 const TracerApi = {
+  md: ({ code }) => Promise.resolve([{
+    tracerKey: '0-MarkdownTracer-Markdown',
+    method: 'construct',
+    args: ['MarkdownTracer', 'Markdown'],
+  }, {
+    tracerKey: '0-MarkdownTracer-Markdown',
+    method: 'set',
+    args: [code],
+  }]),
   js: ({ code }) => new Promise((resolve, reject) => {
     if (jsWorker) jsWorker.terminate();
     jsWorker = new Worker('/api/tracers/js');
@@ -85,4 +94,4 @@ export {
   CategoryApi,
   GitHubApi,
   TracerApi,
-};
+};

src/frontend/common/stylesheet/colors.scss

@@ -8,6 +8,7 @@ $color-alert: #f3bd58;
 $color-selected: #2962ff;
 $color-patched: #c51162;
 $color-highlight: #29d;
+$color-active: #00e676;
 
 :export {
   themeDark: $theme-dark;
@@ -20,4 +21,5 @@ $color-highlight: #29d;
   colorSelected: $color-selected;
   colorPatched: $color-patched;
   colorHighlight: $color-highlight;
-}
+  colorActive: $color-active;
+}

src/frontend/components/App/index.jsx

@@ -11,18 +11,16 @@ import 'axios-progress-bar/dist/nprogress.css';
 import {
   CodeEditor,
   Header,
-  MarkdownViewer,
   Navigator,
   ResizableContainer,
   TabContainer,
   ToastContainer,
   VisualizationViewer,
 } from '/components';
 import { CategoryApi, GitHubApi } from '/apis';
-import { tracerManager } from '/core';
 import { actions } from '/reducers';
 import { extension, refineGist } from '/common/util';
-import { languages, exts, us } from '/common/config';
+import { exts, languages, us } from '/common/config';
 import { README_MD, SCRATCH_PAPER_MD } from '/skeletons';
 import styles from './stylesheet.scss';
 
@@ -36,7 +34,6 @@ class App extends React.Component {
     this.state = {
       navigatorOpened: true,
       workspaceWeights: [1, 2, 2],
-      viewerTabIndex: 0,
       editorTabIndex: -1,
     };
   }
@@ -53,15 +50,11 @@ class App extends React.Component {
     CategoryApi.getCategories()
       .then(({ categories }) => this.props.setCategories(categories))
       .catch(this.props.showErrorToast);
-
-    tracerManager.setOnError(error => this.props.showErrorToast({ name: error.name, message: error.message }));
   }
 
   componentWillUnmount() {
     delete window.signIn;
     delete window.signOut;
-
-    tracerManager.setOnError(null);
   }
 
   componentWillReceiveProps(nextProps) {
@@ -172,10 +165,6 @@ class App extends React.Component {
     this.setState({ workspaceWeights });
   }
 
-  handleChangeViewerTabIndex(viewerTabIndex) {
-    this.setState({ viewerTabIndex });
-  }
-
   handleChangeEditorTabIndex(editorTabIndex) {
     const { files } = this.props.current;
     if (editorTabIndex === files.length) this.handleAddFile();
@@ -203,8 +192,11 @@ class App extends React.Component {
   handleDeleteFile(file) {
     const { files } = this.props.current;
     const { editorTabIndex } = this.state;
-    if (files.indexOf(file) < editorTabIndex) this.handleChangeEditorTabIndex(editorTabIndex - 1);
-    else this.handleChangeEditorTabIndex(Math.min(editorTabIndex, files.length - 2));
+    if (files.indexOf(file) < editorTabIndex) {
+      this.handleChangeEditorTabIndex(editorTabIndex - 1);
+    } else {
+      this.handleChangeEditorTabIndex(Math.min(editorTabIndex, files.length - 2));
+    }
     this.props.deleteFile(file);
   }
 
@@ -220,19 +212,21 @@ class App extends React.Component {
       serializeFiles(files) === serializeFiles(lastFiles);
   }
 
+  getDescription() {
+    const { files } = this.props.current;
+    const readmeFile = files.find(file => file.name === 'README.md');
+    if (!readmeFile) return '';
+    const groups = /^\s*# .*\n+([^\n]+)/.exec(readmeFile.content);
+    return groups && groups[1] || '';
+  }
+
   render() {
-    const { navigatorOpened, workspaceWeights, viewerTabIndex, editorTabIndex } = this.state;
+    const { navigatorOpened, workspaceWeights, editorTabIndex } = this.state;
     const { titles, files } = this.props.current;
 
     const gistSaved = this.isGistSaved();
 
-    const readmeFile = files.find(file => file.name === 'README.md') || {
-      name: 'README.md',
-      content: `# ${titles[1]}\nREADME.md not found`,
-      contributors: [us],
-    };
-    const groups = /^\s*# .*\n+([^\n]+)/.exec(readmeFile.content);
-    const description = groups && groups[1] || '';
+    const description = this.getDescription();
 
     const editorTitles = files.map(file => file.name);
     if (files[editorTabIndex]) {
@@ -253,17 +247,13 @@ class App extends React.Component {
         </Helmet>
         <Header className={styles.header} onClickTitleBar={() => this.toggleNavigatorOpened()}
                 navigatorOpened={navigatorOpened} loadScratchPapers={() => this.loadScratchPapers()}
-                loadAlgorithm={params => this.loadAlgorithm(params)}
-                onAction={() => this.handleChangeViewerTabIndex(1)} gistSaved={gistSaved} />
+                loadAlgorithm={params => this.loadAlgorithm(params)} gistSaved={gistSaved}
+                file={files[editorTabIndex]} />
         <ResizableContainer className={styles.workspace} horizontal weights={workspaceWeights}
                             visibles={[navigatorOpened, true, true]}
                             onChangeWeights={weights => this.handleChangeWorkspaceWeights(weights)}>
           <Navigator loadAlgorithm={params => this.loadAlgorithm(params)} />
-          <TabContainer titles={['Description', 'Visualization']} tabIndex={viewerTabIndex}
-                        onChangeTabIndex={tabIndex => this.handleChangeViewerTabIndex(tabIndex)}>
-            <MarkdownViewer source={readmeFile.content} />
-            <VisualizationViewer />
-          </TabContainer>
+          <VisualizationViewer className={styles.visualization_viewer} />
           <TabContainer className={styles.editor_tab_container} titles={editorTitles} tabIndex={editorTabIndex}
                         onChangeTabIndex={tabIndex => this.handleChangeEditorTabIndex(tabIndex)}>
             {

src/frontend/components/App/stylesheet.scss

@@ -55,6 +55,10 @@ button {
   .workspace {
     flex: 1;
 
+    .visualization_viewer {
+      background-color: $theme-dark;
+    }
+
     .editor_tab_container {
       .input_title {
         input {
@@ -75,4 +79,4 @@ button {
     right: 0;
     z-index: 99;
   }
-}
+}

src/frontend/components/Button/index.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import faExclamationCircle from '@fortawesome/fontawesome-free-solid/faExclamationCircle';
+import faSpinner from '@fortawesome/fontawesome-free-solid/faSpinner';
 import { classes } from '/common/util';
 import { Ellipsis } from '/components';
 import styles from './stylesheet.scss';
@@ -22,7 +23,7 @@ class Button extends React.Component {
   }
 
   render() {
-    let { className, children, to, href, onClick, icon, reverse, selected, disabled, primary, active, confirmNeeded, ...rest } = this.props;
+    let { className, children, to, href, onClick, icon, reverse, selected, disabled, primary, active, confirmNeeded, inProgress, ...rest } = this.props;
     const { confirming } = this.state;
 
     if (confirmNeeded) {
@@ -54,7 +55,8 @@ class Button extends React.Component {
           typeof icon === 'string' ?
             <div className={classes(styles.icon, styles.image)} key="icon"
                  style={{ backgroundImage: `url(${icon})` }} /> :
-            <FontAwesomeIcon className={styles.icon} fixedWidth icon={icon} key="icon" />
+            <FontAwesomeIcon className={styles.icon} fixedWidth icon={inProgress ? faSpinner : icon} spin={inProgress}
+                             key="icon" />
         ),
         children,
       ],

src/frontend/components/Button/stylesheet.scss

@@ -54,7 +54,7 @@
       font-weight: bold;
 
       .icon {
-        color: #00e676;
+        color: $color-active;
       }
     }
   }
@@ -76,4 +76,4 @@
   &.confirming {
     color: $color-alert;
   }
-}
+}

src/frontend/components/CodeEditor/index.jsx

@@ -10,66 +10,29 @@ import 'brace/theme/tomorrow_night_eighties';
 import 'brace/ext/searchbox';
 import faTrashAlt from '@fortawesome/fontawesome-free-solid/faTrashAlt';
 import faUser from '@fortawesome/fontawesome-free-solid/faUser';
-import { tracerManager } from '/core';
 import { classes, extension } from '/common/util';
 import { actions } from '/reducers';
 import { connect } from 'react-redux';
 import { languages } from '/common/config';
 import { Button, Ellipsis } from '/components';
 import styles from './stylesheet.scss';
 
-@connect(({ current, env }) => ({ current, env }), actions)
+@connect(({ current, env, player }) => ({ current, env, player }), actions)
 class CodeEditor extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      lineMarker: null,
-    };
-  }
-
   componentDidMount() {
-    const { file } = this.props;
-    tracerManager.setFile(file, true);
-
-    tracerManager.setOnUpdateLineIndicator(lineIndicator => this.setState({ lineMarker: this.createLineMarker(lineIndicator) }));
-  }
-
-  componentWillReceiveProps(nextProps) {
-    const { file } = nextProps;
-    if (file !== this.props.file) {
-      tracerManager.setFile(file, extension(file.name) === 'js');
-    }
-  }
-
-  componentWillUnmount() {
-    tracerManager.setOnUpdateLineIndicator(null);
-  }
-
-  createLineMarker(lineIndicator) {
-    if (lineIndicator === null) return null;
-    const { lineNumber, cursor } = lineIndicator;
-    return {
-      startRow: lineNumber,
-      startCol: 0,
-      endRow: lineNumber,
-      endCol: Infinity,
-      className: styles.current_line_marker,
-      type: 'line',
-      inFront: true,
-      _key: cursor,
-    };
+    this.props.shouldBuild();
   }
 
   handleChangeCode(code) {
     const { file } = this.props;
     this.props.modifyFile({ ...file, content: code });
+    if (extension(file.name) === 'md') this.props.shouldBuild();
   }
 
   render() {
     const { className, file, onDeleteFile } = this.props;
     const { user } = this.props.env;
-    const { lineMarker } = this.state;
+    const { lineIndicator } = this.props.player;
 
     const fileExt = extension(file.name);
     const language = languages.find(language => language.ext === fileExt);
@@ -84,7 +47,16 @@ class CodeEditor extends React.Component {
           name="code_editor"
           editorProps={{ $blockScrolling: true }}
           onChange={code => this.handleChangeCode(code)}
-          markers={lineMarker ? [lineMarker] : []}
+          markers={lineIndicator ? [{
+            startRow: lineIndicator.lineNumber,
+            startCol: 0,
+            endRow: lineIndicator.lineNumber,
+            endCol: Infinity,
+            className: styles.current_line_marker,
+            type: 'line',
+            inFront: true,
+            _key: lineIndicator.cursor,
+          }] : []}
           value={file.content} />
         <div className={classes(styles.contributors_viewer, className)}>
           <span className={classes(styles.contributor, styles.label)}>Contributed by</span>