Default texts for data visualiser, inspector, env visualiser (#820)

* Added default texts to be shown before Data/Insp/Env are used

* Remove mentions of 'debugger;'

* Modified default texts for Playground

* Added links to textbook

* Links now open in new tab

Author: alcen

public/externalLibs/env_visualizer/visualizer.js

@@ -982,7 +982,10 @@
       builtins.push(externalSymbols[i]);
     }
 
-    // blink icon
+    // Hides the default text
+    (document.getElementById('env-visualizer-default-text')).hidden = true;
+
+    // Blink icon
     const icon = document.getElementById('env_visualiser-icon');
     icon.classList.add('side-content-tab-alert');
 

public/externalLibs/inspector/inspector.js

@@ -120,10 +120,14 @@
       return res.length > 0 ? res : undefined;
     }
 
+    // Hides the default text
+    (document.getElementById('inspector-default-text')).hidden = true;
+
     // icon to blink
     const icon = document.getElementById("inspector-icon");
 
     if (!context && icon) {
+      (document.getElementById('inspector-default-text')).hidden = false;
       icon.classList.remove("side-content-tab-alert");
       container.innerHTML = "";
       return

public/externalLibs/visualizer/visualizer.js

@@ -866,6 +866,11 @@
    *  Then shift it to the left end.
    */
   function draw(xs) {
+
+    // Hides the default text
+    (document.getElementById('data-visualizer-default-text')).hidden = true;
+    
+
     // Blink icon
     const icon = document.getElementById('data_visualiser-icon');
 

src/components/Playground.tsx

@@ -276,7 +276,7 @@ class Playground extends React.Component<IPlaygroundProps, PlaygroundState> {
 const playgroundIntroductionTab: SideContentTab = {
   label: 'Introduction',
   iconName: IconNames.COMPASS,
-  body: <Markdown content={INTRODUCTION} />,
+  body: <Markdown content={INTRODUCTION} openLinksInNewWindow={true} />,
   id: SideContentType.introduction
 };
 

src/components/workspace/side-content/EnvVisualizer.tsx

@@ -2,6 +2,8 @@ import { Classes, NonIdealState, Spinner } from '@blueprintjs/core';
 import * as classNames from 'classnames';
 import * as React from 'react';
 
+import { LINKS } from '../../../utils/constants';
+
 interface IEnvVisualizerState {
   loading: boolean;
 }
@@ -21,6 +23,24 @@ class EnvVisualizer extends React.Component<{}, IEnvVisualizerState> {
   public render() {
     return (
       <div ref={r => (this.$parent = r)} className={classNames('sa-env-visualizer', Classes.DARK)}>
+        <p id="env-visualizer-default-text" className={Classes.RUNNING_TEXT}>
+          The environmental visualizer generates the environmental model diagram based on
+          breakpoints set in the editor.
+          <br />
+          <br />
+          It is activated by clicking on the gutter of the editor (where all the line numbers are,
+          on the left) to set a breakpoint, and then running the program.
+          <br />
+          <br />
+          The environment model diagram follows a notation introduced in{' '}
+          <a href={LINKS.SOURCE_DOCS_CHAPTER_3_2} target="_blank">
+            <i>
+              Structure and Interpretation of Computer Programs, JavaScript Adaptation, Chapter 3,
+              Section 2
+            </i>
+          </a>
+          .
+        </p>
         {this.state.loading && (
           <NonIdealState description="Loading Env Visualizer..." icon={<Spinner />} />
         )}

src/components/workspace/side-content/Inspector.tsx

@@ -1,4 +1,4 @@
-import { NonIdealState, Spinner } from '@blueprintjs/core';
+import { Classes, NonIdealState, Spinner } from '@blueprintjs/core';
 import * as React from 'react';
 // import { createContext } from '../../../utils/slangHelper';
 
@@ -21,6 +21,14 @@ class Inspector extends React.Component<{}, IInspectorState> {
   public render() {
     return (
       <div ref={r => (this.$parent = r)} className="sa-inspector">
+        <p id="inspector-default-text" className={Classes.RUNNING_TEXT}>
+          The inspector generates a list of variable bindings based on breakpoints set in the
+          editor.
+          <br />
+          <br />
+          It is activated by clicking on the gutter of the editor (where all the line numbers are,
+          on the left) to set a breakpoint, and then running the program.
+        </p>
         {this.state.loading && (
           <NonIdealState description="Loading Inspector..." icon={<Spinner />} />
         )}

src/components/workspace/side-content/ListVisualizer.tsx

@@ -2,6 +2,8 @@ import { Classes, NonIdealState, Spinner } from '@blueprintjs/core';
 import * as classNames from 'classnames';
 import * as React from 'react';
 
+import { LINKS } from '../../../utils/constants';
+
 interface IListVisualizerState {
   loading: boolean;
 }
@@ -19,8 +21,26 @@ class ListVisualizer extends React.Component<{}, IListVisualizerState> {
   }
 
   public render() {
+    // Default text will be hidden by visualizer.js when 'draw_data' is called
     return (
       <div ref={r => (this.$parent = r)} className={classNames('sa-list-visualizer', Classes.DARK)}>
+        <p id="data-visualizer-default-text" className={Classes.RUNNING_TEXT}>
+          The data visualizer visualises data structures.
+          <br />
+          <br />
+          It is activated by calling the function <code>draw_data(the_data)</code>, where
+          <code>the_data</code> would be the data structure that you want to visualise.
+          <br />
+          <br />
+          The data visualizer uses box-and-pointer diagrams, as introduced in{' '}
+          <a href={LINKS.SOURCE_DOCS_CHAPTER_2_2} target="_blank">
+            <i>
+              Structure and Interpretation of Computer Programs, JavaScript Adaptation, Chapter 2,
+              Section 2
+            </i>
+          </a>
+          .
+        </p>
         {this.state.loading && (
           <NonIdealState description="Loading Data Visualizer..." icon={<Spinner />} />
         )}

src/utils/constants.ts

@@ -23,6 +23,8 @@ export enum LINKS {
   PIAZZA = 'https://piazza.com/nus.edu.sg/fall2019/cs1101s',
   SHAREDB_SERVER = 'api2.sourceacademy.nus.edu.sg/',
   SOURCE_DOCS = 'https://sicp.comp.nus.edu.sg/source/',
+  SOURCE_DOCS_CHAPTER_2_2 = 'https://sicp.comp.nus.edu.sg/chapters/29',
+  SOURCE_DOCS_CHAPTER_3_2 = 'https://sicp.comp.nus.edu.sg/chapters/52',
   TECH_SVC = 'mailto:techsvc@comp.nus.edu.sg',
   TEXTBOOK = 'https://sicp.comp.nus.edu.sg/'
 }