CSE Machine: Remove old components and make compact components the default (source-academy#2848)

* Make compact components the new default and remove any mentions to the old components.
Also removes the experimental button toggle.

* Update test snapshots

* Clean up testing code a little

* Formatting changes

* Fix some minor issues

Author: CZX123

src/commons/sideContent/__tests__/__snapshots__/SideContentCseMachine.tsx.snap

@@ -119,7 +119,7 @@ exports[`CSE Machine component renders correctly 1`] = `
               className="bp5-button-text"
             >
               <label
-                className="bp5-control bp5-checkbox"
+                className="bp5-control bp5-checkbox bp5-disabled"
                 style={
                   Object {
                     "margin": 0,
@@ -128,7 +128,7 @@ exports[`CSE Machine component renders correctly 1`] = `
               >
                 <input
                   checked={false}
-                  disabled={false}
+                  disabled={true}
                   onChange={[Function]}
                   type="checkbox"
                 />
@@ -256,55 +256,6 @@ exports[`CSE Machine component renders correctly 1`] = `
       <div
         className="bp5-button-group"
       >
-        <span
-          className="bp5-popover-target"
-          onBlur={[Function]}
-          onContextMenu={[Function]}
-          onFocus={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-        >
-          <a
-            aria-disabled={true}
-            aria-expanded={false}
-            className="bp5-button bp5-disabled"
-            disabled={true}
-            onBlur={[Function]}
-            onKeyDown={[Function]}
-            onKeyUp={[Function]}
-            onMouseUp={[Function]}
-            role="button"
-            tabIndex={-1}
-          >
-            <span
-              aria-hidden={true}
-              className="bp5-icon bp5-icon-standard bp5-icon-build"
-              data-icon="build"
-            />
-            <span
-              className="bp5-button-text"
-            >
-              <label
-                className="bp5-control bp5-checkbox bp5-disabled"
-                style={
-                  Object {
-                    "margin": 0,
-                  }
-                }
-              >
-                <input
-                  checked={false}
-                  disabled={true}
-                  onChange={[Function]}
-                  type="checkbox"
-                />
-                <span
-                  className="bp5-control-indicator"
-                />
-              </label>
-            </span>
-          </a>
-        </span>
         <span
           className="bp5-popover-target"
           onBlur={[Function]}

src/commons/sideContent/content/SideContentCseMachine.tsx

@@ -211,35 +211,35 @@ class SideContentCseMachineBase extends React.Component<CseMachineProps, State>
               <Tooltip2 content="Control and Stash" compact>
                 <AnchorButton
                   onMouseUp={() => {
-                    if (this.state.visualization && CseMachine.getCompactLayout()) {
+                    if (this.state.visualization) {
                       CseMachine.toggleControlStash();
                       CseMachine.redraw();
                     }
                   }}
                   icon="layers"
-                  disabled={!this.state.visualization || !CseMachine.getCompactLayout()}
+                  disabled={!this.state.visualization}
                 >
                   <Checkbox
                     checked={CseMachine.getControlStash()}
-                    disabled={!CseMachine.getCompactLayout()}
+                    disabled={!this.state.visualization}
                     style={{ margin: 0 }}
                   />
                 </AnchorButton>
               </Tooltip2>
               <Tooltip2 content="Truncate Control" compact>
                 <AnchorButton
                   onMouseUp={() => {
-                    if (this.state.visualization && CseMachine.getControlStash()) {
+                    if (this.state.visualization) {
                       CseMachine.toggleStackTruncated();
                       CseMachine.redraw();
                     }
                   }}
                   icon="minimize"
-                  disabled={!this.state.visualization || !CseMachine.getControlStash()}
+                  disabled={!this.state.visualization}
                 >
                   <Checkbox
                     checked={CseMachine.getStackTruncated()}
-                    disabled={!CseMachine.getControlStash()}
+                    disabled={!this.state.visualization}
                     style={{ margin: 0 }}
                   />
                 </AnchorButton>
@@ -268,24 +268,6 @@ class SideContentCseMachineBase extends React.Component<CseMachineProps, State>
               />
             </ButtonGroup>
             <ButtonGroup>
-              <Tooltip2 content="Experimental" compact>
-                <AnchorButton
-                  onMouseUp={() => {
-                    if (this.state.visualization) {
-                      CseMachine.toggleCompactLayout();
-                      CseMachine.redraw();
-                    }
-                  }}
-                  icon="build"
-                  disabled={!this.state.visualization}
-                >
-                  <Checkbox
-                    checked={!CseMachine.getCompactLayout()}
-                    disabled={!this.state.visualization}
-                    style={{ margin: 0 }}
-                  />
-                </AnchorButton>
-              </Tooltip2>
               <Tooltip2 content="Print" compact>
                 <AnchorButton
                   onMouseUp={() => {

src/features/cseMachine/CseMachine.tsx

@@ -19,7 +19,6 @@ export default class CseMachine {
   /** callback function to update the step limit exceeded state in the SideContentCseMachine component */
   private static setIsStepLimitExceeded: SetisStepLimitExceeded;
   private static printableMode: boolean = false;
-  private static compactLayout: boolean = true;
   private static controlStash: boolean = false; // TODO: discuss if the default should be true
   private static stackTruncated: boolean = false;
   private static environmentTree: EnvTree | undefined;
@@ -29,9 +28,6 @@ export default class CseMachine {
   public static togglePrintableMode(): void {
     CseMachine.printableMode = !CseMachine.printableMode;
   }
-  public static toggleCompactLayout(): void {
-    CseMachine.compactLayout = !CseMachine.compactLayout;
-  }
   public static toggleControlStash(): void {
     CseMachine.controlStash = !CseMachine.controlStash;
   }
@@ -44,9 +40,6 @@ export default class CseMachine {
   public static getPrintableMode(): boolean {
     return CseMachine.printableMode;
   }
-  public static getCompactLayout(): boolean {
-    return CseMachine.compactLayout;
-  }
   public static getControlStash(): boolean {
     return CseMachine.controlStash;
   }
@@ -75,7 +68,6 @@ export default class CseMachine {
 
   static clear() {
     Layout.values.clear();
-    Layout.compactValues.clear();
   }
 
   /** updates the visualization state in the SideContentCseMachine component based on
@@ -103,60 +95,40 @@ export default class CseMachine {
     if (CseMachine.environmentTree && CseMachine.control && CseMachine.stash) {
       // checks if the required diagram exists, and updates the dom node using setVis
       if (
-        CseMachine.getCompactLayout() &&
         CseMachine.getPrintableMode() &&
         CseMachine.getControlStash() &&
         CseMachine.getStackTruncated() &&
         Layout.currentStackTruncLight !== undefined
       ) {
         this.setVis(Layout.currentStackTruncLight);
       } else if (
-        CseMachine.getCompactLayout() &&
         CseMachine.getPrintableMode() &&
         CseMachine.getControlStash() &&
         !CseMachine.getStackTruncated() &&
         Layout.currentStackLight !== undefined
       ) {
         this.setVis(Layout.currentStackLight);
       } else if (
-        CseMachine.getCompactLayout() &&
         !CseMachine.getPrintableMode() &&
         CseMachine.getControlStash() &&
         CseMachine.getStackTruncated() &&
         Layout.currentStackTruncDark !== undefined
       ) {
         this.setVis(Layout.currentStackTruncDark);
       } else if (
-        CseMachine.getCompactLayout() &&
         !CseMachine.getPrintableMode() &&
         CseMachine.getControlStash() &&
         !CseMachine.getStackTruncated() &&
         Layout.currentStackDark !== undefined
       ) {
         this.setVis(Layout.currentStackDark);
       } else if (
-        CseMachine.getCompactLayout() &&
-        CseMachine.getPrintableMode() &&
-        !CseMachine.getControlStash() &&
-        Layout.currentCompactLight !== undefined
-      ) {
-        this.setVis(Layout.currentCompactLight);
-      } else if (
-        CseMachine.getCompactLayout() &&
-        !CseMachine.getPrintableMode() &&
-        !CseMachine.getControlStash() &&
-        Layout.currentCompactDark !== undefined
-      ) {
-        this.setVis(Layout.currentCompactDark);
-      } else if (
-        !CseMachine.getCompactLayout() &&
         CseMachine.getPrintableMode() &&
         !CseMachine.getControlStash() &&
         Layout.currentLight !== undefined
       ) {
         this.setVis(Layout.currentLight);
       } else if (
-        !CseMachine.getCompactLayout() &&
         !CseMachine.getPrintableMode() &&
         !CseMachine.getControlStash() &&
         Layout.currentDark !== undefined

src/features/cseMachine/CseMachineAnimation.tsx

@@ -7,7 +7,7 @@ import { BlockAnimation } from './animationComponents/BlockAnimation';
 import { LiteralAnimation } from './animationComponents/LiteralAnimation';
 import { PopAnimation } from './animationComponents/PopAnimation';
 import { UnaryOperationAnimation } from './animationComponents/UnaryOperationAnimation';
-import { isInstr } from './compactComponents/ControlStack';
+import { isInstr } from './components/ControlStack';
 import CseMachine from './CseMachine';
 import { Layout } from './CseMachineLayout';
 

src/features/cseMachine/CseMachineCompactConfig.ts

@@ -11,25 +11,22 @@ export enum Config {
   FrameMinWidth = 100,
   FramePaddingX = 20,
   FramePaddingY = 30,
-  FrameMarginX = 60,
-  FrameMarginY = 100,
+  FrameMarginX = 30,
+  FrameMarginY = 10,
   FrameCornerRadius = 3,
 
   FnRadius = 15,
   FnInnerRadius = 3,
-  FnTooltipOpacity = 0.6,
+  FnTooltipOpacity = 0.3,
 
   DataMinWidth = 20,
   DataUnitWidth = 40,
-  DataUnitPaddingY = 40,
-  DataUnitPaddingX = 50,
   DataUnitHeight = 40,
   DataCornerRadius = 3,
   DataHitStrokeWidth = 5,
-  DataGroupMaxDist = 500,
 
   TextPaddingX = 10,
-  TextPaddingY = 20,
+  TextPaddingY = 30,
   TextMargin = 5,
   TextMinWidth = 30,
   FontFamily = 'monospace, monospace',
@@ -43,19 +40,15 @@ export enum Config {
   ArrowStrokeWidth = 1,
   ArrowHitStrokeWidth = 5,
   ArrowHoveredStrokeWidth = 2,
-  ArrowUnhoveredOpacity = 0.8,
-  ArrowCornerRadius = 10,
-  ArrowMinHeight = 100,
-  ArrowNumLanes = 5,
-  ArrowLaneInterval = 1, // lane for next arrow = previous lane + lane interval % num lanes.
-  FrameArrowStrokeWidth = 2,
-  FrameArrowHoveredStrokeWidth = 2.5,
+  ArrowCornerRadius = 40,
+
   MaxExportWidth = 20000,
   MaxExportHeight = 12000,
 
   SA_WHITE = '#999999',
   SA_BLUE = '#2c3e50',
   PRINT_BACKGROUND = 'white',
+  SA_CURRENT_ITEM = '#030fff',
 
   ConstantColon = ':= ',
   VariableColon = ': ',

src/features/cseMachine/CseMachineConfig.ts

@@ -36,7 +36,3 @@ export enum ControlStashConfig {
   PRINT_BACKGROUND = 'white',
   STASH_DANGER_ITEM = '#ff0000'
 }
-
-export const ShapeDefaultProps = {
-  preventDefault: false
-};