Env visualiser (#541)

* Env visualiser

* fixed formatting

Author: lumos309

public/externalLibs/env_visualizer/ConcreteJs.js

@@ -38,8 +38,11 @@ function loadAllLibs() {
     '/externalLibs/streams/stream.js',
     '/externalLibs/pe_library.js',
     '/externalLibs/assert_compiled.js',
-    //inspector
-    '/externalLibs/inspector/inspector.js'
+    // inspector
+    '/externalLibs/inspector/inspector.js',
+    // env visualizer
+    '/externalLibs/env_visualizer/ConcreteJS.js',
+    '/externalLibs/env_visualizer/visualizer.js'
   ]
 
   for (var i = 0; i < files.length; i++) {

public/externalLibs/env_visualizer/visualizer - Copy.js

@@ -9,6 +9,7 @@ import { ExternalLibraryName } from './assessment/assessmentShape';
 import Markdown from './commons/Markdown';
 import Workspace, { WorkspaceProps } from './workspace';
 import { SideContentTab } from './workspace/side-content';
+import EnvVisualizer from './workspace/side-content/EnvVisualizer';
 import Inspector from './workspace/side-content/Inspector';
 import ListVisualizer from './workspace/side-content/ListVisualizer';
 
@@ -155,7 +156,7 @@ class Playground extends React.Component<IPlaygroundProps, PlaygroundState> {
       sideContentProps: {
         activeTab: this.props.activeTab,
         handleChangeActiveTab: this.props.handleChangeActiveTab,
-        tabs: [playgroundIntroductionTab, listVisualizerTab, inspectorTab]
+        tabs: [playgroundIntroductionTab, listVisualizerTab, inspectorTab, envVisualizerTab]
       }
     };
     return (
@@ -181,7 +182,7 @@ const playgroundIntroductionTab: SideContentTab = {
 };
 
 const listVisualizerTab: SideContentTab = {
-  label: 'List Visualizer',
+  label: 'Data Visualizer',
   icon: IconNames.EYE_OPEN,
   body: <ListVisualizer />
 };
@@ -192,4 +193,10 @@ const inspectorTab: SideContentTab = {
   body: <Inspector />
 };
 
+const envVisualizerTab: SideContentTab = {
+  label: 'Env Visualizer',
+  icon: IconNames.EYE_OPEN,
+  body: <EnvVisualizer />
+};
+
 export default Playground;

public/externalLibs/env_visualizer/visualizer.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+class EnvVisualizer extends React.Component<{}, {}> {
+  private $parent: HTMLElement | null;
+
+  public componentDidMount() {
+    if (this.$parent) {
+      (window as any).EnvVisualizer.init(this.$parent);
+    }
+  }
+
+  public render() {
+    return <div ref={r => (this.$parent = r)} className="sa-env-visualizer pt-dark" />;
+  }
+}
+
+export default EnvVisualizer;

public/externalLibs/index.js

@@ -14,7 +14,7 @@ import { externalLibraries } from '../reducers/externalLibraries';
 import { defaultEditorValue, IState, IWorkspaceState } from '../reducers/states';
 import { IVLE_KEY, USE_BACKEND } from '../utils/constants';
 import { showSuccessMessage, showWarningMessage } from '../utils/notification';
-import { highlightLine, inspectorUpdate } from '../utils/slangHelper';
+import { highlightLine, inspectorUpdate, visualiseEnv } from '../utils/slangHelper';
 import backendSaga from './backend';
 
 function* mainSaga() {
@@ -312,6 +312,7 @@ function* updateInspector() {
     const start = lastDebuggerResult.context.runtime.nodes[0].loc.start.line - 1;
     const end = lastDebuggerResult.context.runtime.nodes[0].loc.end.line - 1;
     yield put(actions.highlightEditorLine([start, end], location));
+    visualiseEnv(lastDebuggerResult);
     inspectorUpdate(lastDebuggerResult);
   } catch (e) {
     put(actions.highlightEditorLine([], location));

src/components/Playground.tsx

@@ -82,6 +82,14 @@ function visualiseList(list: any) {
   }
 }
 
+export function visualiseEnv(context: Context) {
+  if ((window as any).EnvVisualizer) {
+    (window as any).EnvVisualizer.draw_env({ context });
+  } else {
+    throw new Error('Env visualizer is not enabled');
+  }
+}
+
 export function highlightLine(line: number) {
   if ((window as any).Inspector) {
     (window as any).Inspector.highlightClean();