Draw_Data: Implement new visualizers

src/commons/sagas/WorkspaceSaga/index.ts

@@ -407,7 +407,7 @@ const WorkspaceSaga = combineSagaHandlers({
    * the function.
    */
   [WorkspaceActions.beginClearContext.type]: function* (action): any {
-    yield call([DataVisualizer, DataVisualizer.clear]);
+    yield call([DataVisualizer, DataVisualizer.clearWithData]);
     yield call([CseMachine, CseMachine.clear]);
     const globals: Array<[string, any]> = action.payload.library.globals as Array<[string, any]>;
     for (const [key, value] of globals) {

src/commons/sideContent/content/SideContentDataVisualizer.tsx

@@ -1,4 +1,6 @@
-import { Button, Card, Classes } from '@blueprintjs/core';
+import { AnchorButton, Button, Card, Checkbox, Classes } from '@blueprintjs/core';
+import { Tooltip } from '@blueprintjs/core';
+import { Icon } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import { HotkeyItem } from '@mantine/hooks';
 import { bindActionCreators } from '@reduxjs/toolkit';
@@ -134,6 +136,72 @@ class SideContentDataVisualizerBase extends React.Component<OwnProps & DispatchP
           ) : (
             <DataVisualizerDefaultText />
           )}
+          {this.state.steps.length > 0 && (
+            <>
+              <Tooltip content="Original View" position="top">
+                <AnchorButton
+                  style={{
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'center'
+                  }}
+                  onMouseUp={() => {
+                    DataVisualizer.setMode('normal');
+                    DataVisualizer.redraw();
+                  }}
+                >
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                    <Icon icon="grid-view" />
+                    <Checkbox checked={DataVisualizer.getNormalMode()} style={{ marginTop: 7 }} />
+                  </div>
+                </AnchorButton>
+              </Tooltip>
+              <Tooltip content="Render Binary Tree" position="top">
+                <AnchorButton
+                  style={{
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    marginLeft: 10
+                  }}
+                  onMouseUp={() => {
+                    DataVisualizer.setMode('binTree');
+                    DataVisualizer.redraw();
+                  }}
+                >
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                    <Icon
+                      icon="one-to-many"
+                      style={{ transform: 'rotate(90deg)', marginLeft: 6 }}
+                    />
+                    <Checkbox checked={DataVisualizer.getBinTreeMode()} style={{ marginTop: 7 }} />
+                  </div>
+                </AnchorButton>
+              </Tooltip>
+              <Tooltip content="Render General Tree" position="top">
+                <AnchorButton
+                  style={{
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    marginLeft: 10
+                  }}
+                  onMouseUp={() => {
+                    DataVisualizer.setMode('tree');
+                    DataVisualizer.redraw();
+                  }}
+                >
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                    <Icon icon="diagram-tree" />
+                    <Checkbox checked={DataVisualizer.getTreeMode()} style={{ marginTop: 7 }} />
+                  </div>
+                </AnchorButton>
+              </Tooltip>
+            </>
+          )}
         </div>
       </HotKeys>
     );

src/features/dataVisualizer/Config.ts

@@ -6,6 +6,7 @@ export const Config = {
   Stroke: 'white',
   Fill: 'white',
 
+  NWidth: 90,
   BoxWidth: 45,
   BoxMinWidth: 15, // Set to half of BoxHeight for empty arrays following CseMachineConfig
   BoxHeight: 30,

src/features/dataVisualizer/dataVisualizer.tsx

@@ -1,5 +1,4 @@
 import type { JSX } from 'react';
-import { Stage } from 'react-konva';
 
 import { Config } from './Config';
 import { Data, Step } from './dataVisualizerTypes';
@@ -15,30 +14,172 @@ import { DataTreeNode } from './tree/TreeNode';
  * clear is used by WorkspaceSaga to reset the visualizer after every "Run" button press
  */
 export default class DataVisualizer {
+  private static counter = 1;
   private static empty(step: Step[]) {}
   private static setSteps: (step: Step[]) => void = DataVisualizer.empty;
+  public static dataRecords: Data[] = [];
+  public static isRedraw = false;
   private static _instance = new DataVisualizer();
+  public static treeMode = false;
+  public static BinTreeMode = false;
+  public static normalMode = true;
+  public static TreeDepth = 0;
+  public static isBinTree = false;
+  public static isGenTree = false;
+  public static nodeCount: number[] = [];
+  public static nodeColor: number[] = [];
+  public static longestNodePos: number = 0;
+  public static colorMap: WeakMap<any, number> = new WeakMap();
+  public static posMap: WeakMap<any, number> = new WeakMap();
 
   private steps: Step[] = [];
   private nodeLabel = 0;
   private nodeToLabelMap: Map<DataTreeNode, number> = new Map();
 
   private constructor() {}
 
+  public static isBinaryTree(structures: Data[]): boolean {
+    if (!(structures instanceof Array)) {
+      return false;
+    }
+    if (structures[0] === null) {
+      return true;
+    }
+    if (structures[0].length != 2) {
+      return false;
+    }
+    let next = structures[0];
+    let ans = false;
+    let count = 0;
+    while (next instanceof Array) {
+      count++;
+      next = next[1];
+    }
+    if (count == 3) {
+      ans = true;
+    }
+    return ans && this.isBinaryTree(structures[0][1]);
+  }
+
+  public static isGeneralTree(structures: Data[]): boolean {
+    if (structures == null || (structures.length == 2 && structures[1] == null)) {
+      return true;
+    }
+    if (!(structures[0] instanceof Array) && structures[1] != null) {
+      return this.isGeneralTree(structures[1]);
+    }
+    if (structures.length != 2 || (!(structures[1] instanceof Array) && structures[1] != null)) {
+      return false;
+    }
+    return this.isGeneralTree(structures[1]) && this.isGeneralTree(structures[0]);
+  }
+
+  public static get_depth(
+    structures: Data[],
+    depth: number,
+    nodePos: number,
+    newNode: boolean
+  ): number {
+    if (!(structures instanceof Array)) {
+      return 0;
+    }
+    // nodeCount keeps track of the current index of nodes at each depth
+    if (this.getTreeMode()) {
+      if (this.nodeCount[depth] === undefined) {
+        this.nodeCount[depth] = 0;
+      }
+      this.posMap.set(structures, this.nodeCount[depth]);
+      if (this.nodeCount[depth] > this.longestNodePos) {
+        this.longestNodePos = this.nodeCount[depth];
+      }
+      this.nodeCount[depth]++;
+    }
+    if (this.getBinTreeMode() || this.getTreeMode()) {
+      if (this.nodeColor[depth] === undefined) {
+        this.nodeColor[depth] = depth;
+      }
+      if (newNode) {
+        this.nodeColor[depth]++;
+      }
+      this.colorMap.set(structures, this.nodeColor[depth]);
+    }
+
+    this.TreeDepth = Math.max(this.TreeDepth, depth);
+    this.get_depth(structures[0], depth + 1, 0, true);
+    this.get_depth(structures[1], depth, nodePos + 1, false);
+    return depth;
+  }
+
   public static init(setSteps: (step: Step[]) => void): void {
     DataVisualizer.setSteps = setSteps;
   }
 
+  /**
+   * Set the visualization mode. This ensures only one mode is active at a time.
+   * @param mode - 'normal' for original view, 'binTree' for binary tree, 'tree' for general tree
+   */
+  public static setMode(mode: 'normal' | 'binTree' | 'tree'): void {
+    DataVisualizer.normalMode = mode === 'normal';
+    DataVisualizer.BinTreeMode = mode === 'binTree';
+    DataVisualizer.treeMode = mode === 'tree';
+  }
+
+  // RenderBinaryTree
+  public static toggleBinTreeMode(): void {
+    DataVisualizer.BinTreeMode = !DataVisualizer.BinTreeMode;
+  }
+
+  // RenderGeneralTree
+  public static toggleTreeMode(): void {
+    DataVisualizer.treeMode = !DataVisualizer.treeMode;
+  }
+
+  // OriginalView
+  public static toggleNormalMode(): void {
+    DataVisualizer.normalMode = !DataVisualizer.normalMode;
+  }
+
+  public static getBinTreeMode(): boolean {
+    return DataVisualizer.BinTreeMode;
+  }
+
+  public static getTreeMode(): boolean {
+    return DataVisualizer.treeMode;
+  }
+
+  public static getNormalMode(): boolean {
+    return DataVisualizer.normalMode;
+  }
+
   public static drawData(structures: Data[]): void {
     if (!DataVisualizer.setSteps) {
       throw new Error('Data visualizer not initialized');
     }
+    if (!DataVisualizer.isRedraw) {
+      this.dataRecords.push(structures);
+    }
+    DataVisualizer.isBinTree = this.isBinaryTree(structures);
+    DataVisualizer.isGenTree = this.isGeneralTree(structures[0]);
+    DataVisualizer.nodeCount = [];
+    DataVisualizer.nodeColor = [];
+    this.nodeColor[0] = -1;
+    this.get_depth(structures[0], 0, 0, false);
+
     DataVisualizer._instance.addStep(structures);
     DataVisualizer.setSteps(DataVisualizer._instance.steps);
   }
 
+  public static clearWithData(): void {
+    DataVisualizer.longestNodePos = 0;
+    DataVisualizer.dataRecords = [];
+    DataVisualizer.isRedraw = false;
+    DataVisualizer.clear();
+  }
+
   public static clear(): void {
     DataVisualizer._instance = new DataVisualizer();
+    this.nodeCount = [];
+    this.TreeDepth = 0;
     DataVisualizer.setSteps(DataVisualizer._instance.steps);
   }
 
@@ -50,36 +191,32 @@ export default class DataVisualizer {
     if (this.nodeToLabelMap.has(dataNode)) {
       return this.nodeToLabelMap.get(dataNode) ?? 0;
     } else {
-      console.log('*' + this.nodeLabel + ': ' + dataNode.data);
       this.nodeToLabelMap.set(dataNode, this.nodeLabel);
       return this.nodeLabel++;
     }
   }
 
   private addStep(structures: Data[]) {
-    const step = structures.map(this.createDrawing);
+    const step = structures.map((xs, index) => this.createDrawing(xs, index));
     this.steps.push(step);
   }
 
-  /**
-   *  For student use. Draws a structure by converting it into a tree object, attempts to draw on the canvas,
-   *  Then shift it to the left end.
-   */
-  private createDrawing(xs: Data): JSX.Element {
+  private createDrawing(xs: Data, key: number): JSX.Element {
     const treeDrawer = Tree.fromSourceStructure(xs).draw();
 
     // To account for overflow to the left side due to a backward arrow
-    // const leftMargin = Config.ArrowMarginHorizontal + Config.StrokeWidth;
     const leftMargin = Config.StrokeWidth / 2;
 
     // To account for overflow to the top due to a backward arrow
     const topMargin = Config.StrokeWidth / 2;
 
-    const layer = treeDrawer.draw(leftMargin, topMargin);
-    return (
-      <Stage key={xs} width={treeDrawer.width + leftMargin} height={treeDrawer.height + topMargin}>
-        {layer}
-      </Stage>
-    );
+    return treeDrawer.draw(leftMargin, topMargin, key);
+  }
+
+  static redraw() {
+    this.isRedraw = true;
+    this.clear();
+    DataVisualizer.counter = -DataVisualizer.counter;
+    return DataVisualizer.dataRecords.map(structures => this.drawData(structures));
   }
 }

src/features/dataVisualizer/dataVisualizerUtils.ts

@@ -30,7 +30,6 @@ export function isArray(data: Data): data is Array<Data> {
 export function isFunction(data: Data): data is Function {
   return typeof data === 'function';
 }
-
 export function isPair(data: Data): data is Pair {
   return is_pair(data);
 }

src/features/dataVisualizer/drawable/ArrayDrawable.tsx

@@ -11,6 +11,7 @@ type ArrayProps = {
   nodes: TreeNode[];
   x: number;
   y: number;
+  color: string;
 };
 
 /**
@@ -55,7 +56,7 @@ class ArrayDrawable extends React.PureComponent<ArrayProps> {
           height={Config.BoxHeight}
           strokeWidth={Config.StrokeWidth}
           stroke={Config.Stroke}
-          fill="#17181A"
+          fill={this.props.color}
           preventDefault={false}
         />
         {/* Vertical lines in the box */}