Merge 980d142 into 64cca46

public/externalLibs/inspector/inspector.js

@@ -12,8 +12,18 @@
     var gutterCells = document.getElementsByClassName('ace_gutter-cell');
     var aceLines = document.getElementsByClassName('ace_line');
 
-    // We are simply assuming they are sorted (they are).
+    // For cases where code is folded, line numbers may not be ordered sequentially.
     if (gutterCells != undefined && aceLines != undefined) {
+      if (!gutterCells[number] || gutterCells[number].textContent != number) {
+        // If cell number is not correct, do a linear search to find cell number
+        for (let i = 0; i < gutterCells.length; i++) {
+          if (number + 1 == gutterCells[i].textContent) {
+            number = i;
+            break;
+          }
+        }
+      }
+
       gutterCells[number].classList.add('ace_gutter-cell_hi');
       aceLines[number].classList.add('ace_line_hi');
     }

src/features/sicp/parser/ParseJson.tsx

@@ -31,12 +31,11 @@ export type JsonType = {
   title?: string;
   solution?: Array<JsonType>;
   id?: string;
-  withoutPrepend?: string;
-  prepend?: string;
   program?: string;
   href?: string;
   count?: integer;
   eval?: boolean;
+  prependLength?: number;
 };
 
 const handleFootnote = (obj: JsonType, refs: React.MutableRefObject<{}>) => {
@@ -105,9 +104,8 @@ const handleSnippet = (obj: JsonType) => {
     const CodeSnippetProps = {
       body: obj['body']!,
       id: obj['id']!,
-      initialEditorValueHash: obj['withoutPrepend']!,
-      initialFullProgramHash: obj['program']! || obj['withoutPrepend']!,
-      initialPrependHash: obj['prepend']!,
+      initialEditorValueHash: obj['program']!,
+      prependLength: obj['prependLength']!,
       output: obj['output']!
     };
     return <CodeSnippet {...CodeSnippetProps} />;

src/features/sicp/parser/__tests__/ParseJson.tsx

@@ -155,16 +155,13 @@ describe('Parse exercise', () => {
 
 describe('Parse snippet', () => {
   const tag = snippetTag;
-  const body = '1 + 1;';
+  const body = 'const a = 1;\na+1;';
   const output = '2';
-  const prependString = 'const a = 1;';
-  const withoutPrepend = lzString.compressToEncodedURIComponent(body);
-  const program = lzString.compressToEncodedURIComponent(prependString + '\n' + body);
-  const prepend = lzString.compressToEncodedURIComponent(prependString);
+  const program = lzString.compressToEncodedURIComponent(body);
 
   const base = {
     id: 'id',
-    withoutPrepend: withoutPrepend,
+    program: program,
     body: body
   };
 
@@ -184,8 +181,7 @@ describe('Parse snippet', () => {
   const objWithPrepend = objWithText(
     {
       ...base,
-      program: program,
-      prepend: prepend
+      prependLength: 1
     },
     'with prepend'
   );

src/features/sicp/parser/__tests__/__snapshots__/ParseJson.tsx.snap

@@ -162,7 +162,7 @@ exports[`Parse figures FIGURE with image successful 1`] = `
 exports[`Parse figures FIGURE with snippet successful 1`] = `
 "<div className=\\"sicp-figure\\">
   <div />
-  <Component body=\\"1 + 1;\\" id={[undefined]} initialEditorValueHash=\\"IwAg1CwNxA\\" initialFullProgramHash=\\"IwAg1CwNxA\\" initialPrependHash={[undefined]} output={[undefined]}>
+  <Component body=\\"1 + 1;\\" id={[undefined]} initialEditorValueHash={[undefined]} prependLength={[undefined]} output={[undefined]}>
     <div>
       Code Snippet
     </div>
@@ -333,15 +333,16 @@ exports[`Parse section SECTION  successful 1`] = `
 exports[`Parse snippet SNIPPET no eval successful 1`] = `
 "<Component>
   <pre className=\\"bp3-code-block\\">
-    1 + 1;
+    const a = 1;
+    a+1;
   </pre>
 </Component>"
 `;
 
 exports[`Parse snippet SNIPPET with latex successful 1`] = `
 "<Component>
   <pre className=\\"bp3-code-block\\">
-    <SicpLatex math=\\"1 + 1;\\">
+    <SicpLatex math=\\"const a = 1;\\\\na+1;\\">
       <Latex delimiters={{...}} strict={false}>
         <span className=\\"__Latex__\\" dangerouslySetInnerHTML={{...}} />
       </Latex>
@@ -351,23 +352,23 @@ exports[`Parse snippet SNIPPET with latex successful 1`] = `
 `;
 
 exports[`Parse snippet SNIPPET with prepend successful 1`] = `
-"<Component body=\\"1 + 1;\\" id=\\"id\\" initialEditorValueHash=\\"IwAg1CwNxA\\" initialFullProgramHash=\\"MYewdgzgLgBAhjAvDAjAbgFApgalWoA\\" initialPrependHash=\\"MYewdgzgLgBAhjAvDAjAbiA\\" output={[undefined]}>
+"<Component body=\\"const a = 1;\\\\na+1;\\" id=\\"id\\" initialEditorValueHash=\\"MYewdgzgLgBAhjAvDAjAbgFBwNTqA\\" prependLength={1} output={[undefined]}>
   <div>
     Code Snippet
   </div>
 </Component>"
 `;
 
 exports[`Parse snippet SNIPPET without prepend successful 1`] = `
-"<Component body=\\"1 + 1;\\" id=\\"id\\" initialEditorValueHash=\\"IwAg1CwNxA\\" initialFullProgramHash=\\"IwAg1CwNxA\\" initialPrependHash={[undefined]} output={[undefined]}>
+"<Component body=\\"const a = 1;\\\\na+1;\\" id=\\"id\\" initialEditorValueHash=\\"MYewdgzgLgBAhjAvDAjAbgFBwNTqA\\" prependLength={[undefined]} output={[undefined]}>
   <div>
     Code Snippet
   </div>
 </Component>"
 `;
 
 exports[`Parse snippet SNIPPET without prepend with output successful 1`] = `
-"<Component body=\\"1 + 1;\\" id=\\"id\\" initialEditorValueHash=\\"IwAg1CwNxA\\" initialFullProgramHash=\\"IwAg1CwNxA\\" initialPrependHash={[undefined]} output=\\"2\\">
+"<Component body=\\"const a = 1;\\\\na+1;\\" id=\\"id\\" initialEditorValueHash=\\"MYewdgzgLgBAhjAvDAjAbgFBwNTqA\\" prependLength={[undefined]} output=\\"2\\">
   <div>
     Code Snippet
   </div>

src/pages/playground/Playground.tsx

@@ -1,6 +1,7 @@
 import { Classes } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import { Octokit } from '@octokit/rest';
+import { Ace, Range } from 'ace-builds';
 import classNames from 'classnames';
 import { isStepperOutput } from 'js-slang/dist/stepper/stepper';
 import { Variant } from 'js-slang/dist/types';
@@ -63,9 +64,7 @@ export type PlaygroundProps = OwnProps & DispatchProps & StateProps & RouteCompo
 export type OwnProps = {
   isSicpEditor?: boolean;
   initialEditorValueHash?: string;
-  initialPrependHash?: string | undefined;
-  initialFullProgramHash?: string;
-
+  prependLength?: number;
   handleCloseEditor?: () => void;
 };
 
@@ -178,7 +177,7 @@ function handleHash(hash: string, props: PlaygroundProps) {
 }
 
 const Playground: React.FC<PlaygroundProps> = props => {
-  const { isSicpEditor, initialPrependHash, handleUpdatePrepend } = props;
+  const { isSicpEditor } = props;
   const isMobileBreakpoint = useMediaQuery({ maxWidth: Constants.mobileBreakpoint });
   const propsRef = React.useRef(props);
   propsRef.current = props;
@@ -232,19 +231,6 @@ const Playground: React.FC<PlaygroundProps> = props => {
     handleHash(hash, propsRef.current);
   }, [hash]);
 
-  // Add prepend if exists.
-  React.useEffect(() => {
-    if (!initialPrependHash || !handleUpdatePrepend) {
-      return;
-    }
-
-    const prepend = decompressFromEncodedURIComponent(initialPrependHash);
-
-    if (prepend) {
-      handleUpdatePrepend(prepend);
-    }
-  }, [handleUpdatePrepend, initialPrependHash]);
-
   /**
    * Handles toggling of relevant SideContentTabs when mobile breakpoint it hit
    */
@@ -554,7 +540,7 @@ const Playground: React.FC<PlaygroundProps> = props => {
 
   const shareButton = React.useMemo(() => {
     const queryString = isSicpEditor
-      ? Links.playground + '#' + props.initialFullProgramHash
+      ? Links.playground + '#' + props.initialEditorValueHash
       : props.queryString;
     return (
       <ControlBarShareButton
@@ -572,7 +558,7 @@ const Playground: React.FC<PlaygroundProps> = props => {
     props.handleGenerateLz,
     props.handleShortenURL,
     props.handleUpdateShortURL,
-    props.initialFullProgramHash,
+    props.initialEditorValueHash,
     props.queryString,
     props.shortURL
   ]);
@@ -659,6 +645,18 @@ const Playground: React.FC<PlaygroundProps> = props => {
     x => x !== playgroundIntroductionTab && x !== remoteExecutionTab
   );
 
+  const onLoadMethod = React.useCallback(
+    (editor: Ace.Editor) => {
+      const addFold = () => {
+        editor.getSession().addFold('    ', new Range(1, 0, props.prependLength!, 0));
+        editor.renderer.off('afterRender', addFold);
+      };
+
+      editor.renderer.on('afterRender', addFold);
+    },
+    [props.prependLength]
+  );
+
   const onChangeMethod = React.useCallback(
     (newCode: string, delta: CodeDelta) => {
       handleEditorValueChange(newCode);
@@ -738,6 +736,7 @@ const Playground: React.FC<PlaygroundProps> = props => {
     onChange: onChangeMethod,
     onCursorChange: onCursorChangeMethod,
     onSelectionChange: onSelectionChangeMethod,
+    onLoad: isSicpEditor && props.prependLength ? onLoadMethod : undefined,
     sourceChapter: props.sourceChapter,
     externalLibraryName: props.externalLibraryName,
     sourceVariant: props.sourceVariant,

src/pages/sicp/subcomponents/CodeSnippet.tsx

@@ -6,7 +6,6 @@ import { useMediaQuery } from 'react-responsive';
 import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
 import ControlBar from 'src/commons/controlBar/ControlBar';
 import { ControlBarCloseButton } from 'src/commons/controlBar/ControlBarCloseButton';
-import { ControlBarShowDependenciesButton } from 'src/commons/controlBar/ControlBarShowDependenciesButton';
 import Constants from 'src/commons/utils/Constants';
 import { SourceTheme } from 'src/features/sicp/SourceTheme';
 
@@ -19,8 +18,7 @@ type OwnProps = {
   output: string;
   id: string;
   initialEditorValueHash: string;
-  initialPrependHash: string | undefined;
-  initialFullProgramHash: string | undefined;
+  prependLength: number | undefined;
 };
 
 const resizableProps = {
@@ -45,13 +43,8 @@ const resizableProps = {
 const CodeSnippet: React.FC<CodeSnippetProps> = props => {
   const { body, output, id } = props;
   const context = React.useContext(CodeSnippetContext);
-  const [showPrepend, setShowPrepend] = React.useState(false);
   const isMobileBreakpoint = useMediaQuery({ maxWidth: Constants.mobileBreakpoint });
 
-  const handleShowDependencies = React.useCallback(() => {
-    setShowPrepend(!showPrepend);
-  }, [showPrepend]);
-
   const handleOpen = () => {
     context.setActive(id);
   };
@@ -61,11 +54,8 @@ const CodeSnippet: React.FC<CodeSnippetProps> = props => {
   }, [context]);
 
   const WorkspaceProps = {
-    initialEditorValueHash: showPrepend
-      ? props.initialFullProgramHash
-      : props.initialEditorValueHash,
-    initialPrependHash: showPrepend ? undefined : props.initialPrependHash,
-    initialFullProgramHash: props.initialFullProgramHash,
+    initialEditorValueHash: props.initialEditorValueHash,
+    prependLength: props.prependLength,
     isSicpEditor: true,
 
     handleCloseEditor: handleClose
@@ -79,19 +69,8 @@ const CodeSnippet: React.FC<CodeSnippetProps> = props => {
     [handleClose]
   );
 
-  const showDependenciesButton = React.useMemo(
-    () => (
-      <ControlBarShowDependenciesButton
-        key="dependencies"
-        buttonText={showPrepend ? 'Hide Dependencies' : 'Show Dependencies'}
-        handleShowDependencies={handleShowDependencies}
-      />
-    ),
-    [handleShowDependencies, showPrepend]
-  );
-
   const controlBarProps = {
-    editorButtons: props.initialPrependHash ? [showDependenciesButton] : [],
+    editorButtons: [],
     flowButtons: [],
     editingWorkspaceButtons: [closeButton]
   };

src/pages/sicp/subcomponents/SicpWorkspaceContainer.tsx

@@ -44,8 +44,7 @@ import {
   toggleUsingSubst,
   updateActiveTab,
   updateEditorValue,
-  updateReplValue,
-  updateWorkspace
+  updateReplValue
 } from '../../../commons/workspace/WorkspaceActions';
 import { WorkspaceLocation } from '../../../commons/workspace/WorkspaceTypes';
 import {
@@ -122,10 +121,6 @@ const mapDispatchToProps: MapDispatchToProps<DispatchProps, {}> = (dispatch: Dis
       handleGenerateLz: generateLzString,
       handleShortenURL: (s: string) => shortenURL(s),
       handleUpdateShortURL: (s: string) => updateShortURL(s),
-      handleUpdatePrepend: (s: string) =>
-        updateWorkspace(workspaceLocation, {
-          editorPrepend: s
-        }),
       handleInterruptEval: () => beginInterruptExecution(workspaceLocation),
       handleExternalSelect: (externalLibraryName: ExternalLibraryName, initialise?: boolean) =>
         externalLibrarySelect(externalLibraryName, workspaceLocation, initialise),

src/pages/sicp/subcomponents/__tests__/CodeSnippet.tsx

@@ -8,21 +8,30 @@ import lzString from 'lz-string';
 import CodeSnippet from '../CodeSnippet';
 
 describe('Sicp Code Snippet', () => {
-  const body = '1+1;';
+  const body = 'const a = 1;\na+1;';
   const output = '2';
-  const prependString = 'const a = 1;';
-  const withoutPrepend = lzString.compressToEncodedURIComponent(body);
-  const program = lzString.compressToEncodedURIComponent(prependString + '\n' + body);
-  const prepend = lzString.compressToEncodedURIComponent(prependString);
+  const program = lzString.compressToEncodedURIComponent(body);
 
-  test('renders correctly', () => {
+  test('renders correctly with prepend', () => {
     const props = {
       body: body,
       output: output,
       id: 'id',
-      initialEditorValueHash: withoutPrepend,
-      initialPrependHash: prepend,
-      initialFullProgramHash: program
+      initialEditorValueHash: program,
+      prependLength: 1
+    };
+
+    const tree = shallow(<CodeSnippet {...props} />);
+    expect(tree.debug()).toMatchSnapshot();
+  });
+
+  test('renders correctly without prepend', () => {
+    const props = {
+      body: body,
+      output: output,
+      id: 'id',
+      initialEditorValueHash: program,
+      prependLength: 0
     };
 
     const tree = shallow(<CodeSnippet {...props} />);

src/pages/sicp/subcomponents/__tests__/__snapshots__/CodeSnippet.tsx.snap

@@ -1,10 +1,25 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Sicp Code Snippet renders correctly 1`] = `
+exports[`Sicp Code Snippet renders correctly with prepend 1`] = `
 "<div className=\\"sicp-code-snippet\\">
   <Blueprint3.Card className=\\"sicp-code-snippet-closed\\" interactive={true} elevation={2}>
     <SyntaxHighlighter language=\\"javascript\\" style={{...}} onClick={[Function: handleOpen]}>
-      1+1;
+      const a = 1;
+      a+1;
+    </SyntaxHighlighter>
+  </Blueprint3.Card>
+  <Component>
+    2
+  </Component>
+</div>"
+`;
+
+exports[`Sicp Code Snippet renders correctly without prepend 1`] = `
+"<div className=\\"sicp-code-snippet\\">
+  <Blueprint3.Card className=\\"sicp-code-snippet-closed\\" interactive={true} elevation={2}>
+    <SyntaxHighlighter language=\\"javascript\\" style={{...}} onClick={[Function: handleOpen]}>
+      const a = 1;
+      a+1;
     </SyntaxHighlighter>
   </Blueprint3.Card>
   <Component>