CSE machine: StreamViz arrow drawing

src/commons/sideContent/content/SideContentCseMachine.tsx

@@ -367,6 +367,12 @@
                           label="From stash"
                           onChange={() => this.toggleArrowFilter('stash')}
                         />
+                        <Checkbox
+                          checked={CseMachine.getPairCreationMode()}
+                          disabled={!this.state.visualization}
+                          label="Pairs returned by nullary functions"
+                          onChange={() => this.togglePairCreationModeArrows()}
+                        />
                       </div>
                     }
                   >
@@ -613,7 +619,8 @@
   };
 
   private stepNextChangepoint = () => {
-    for (const step of this.props.changepointSteps) {
+    const changeSteps = this.props.changepointSteps;
+    for (const step of changeSteps) {
       if (step > this.state.value) {
         this.sliderShift(step);
         this.sliderRelease(step);
@@ -625,8 +632,9 @@
   };
 
   private stepPrevChangepoint = () => {
-    for (let i = this.props.changepointSteps.length - 1; i >= 0; i--) {
-      const step = this.props.changepointSteps[i];
+    const changeSteps = this.props.changepointSteps;
+    for (let i = changeSteps.length - 1; i >= 0; i--) {
+      const step = changeSteps[i];
       if (step < this.state.value) {
         this.sliderShift(step);
         this.sliderRelease(step);
@@ -643,6 +651,11 @@
     this.refreshArrowFilters();
   };
 
+  private togglePairCreationModeArrows = () => {
+    CseMachine.togglePairCreationMode();
+    this.refreshArrowFilters();
+  };
+
   private setAllArrowFilters = (visible: boolean) => {
     CseMachine.setAllArrowOriginsVisible(visible);
     this.refreshArrowFilters();
@@ -710,7 +723,7 @@
     dispatch
   );
 
 export const SideContentCseMachine = connect(
   mapStateToProps,
   mapDispatchToProps
 )(SideContentCseMachineBase);

src/features/cseMachine/CseMachine.tsx

@@ -46,6 +46,7 @@ export default class CseMachine {
   private static printableMode: boolean = false;
   private static controlStash: boolean = false; // TODO: discuss if the default should be true
   private static stackTruncated: boolean = false;
+  private static pairCreationMode: boolean = false;
   private static centerAlignment: boolean = false;
   private static centerAlignmentToggled: boolean = false;
   private static arrowOriginFilters: ArrowOriginFilters = {
@@ -55,15 +56,20 @@ export default class CseMachine {
   private static currentEnvId: string;
   private static control: Control | undefined;
   private static stash: Stash | undefined;
+  private static streamLineage: Map<string, string[]> = new Map();
   public static togglePrintableMode(): void {
     CseMachine.printableMode = !CseMachine.printableMode;
   }
   public static toggleControlStash(): void {
+    //CseMachine.pairCreationMode = false;
     CseMachine.controlStash = !CseMachine.controlStash;
   }
   public static toggleStackTruncated(): void {
     CseMachine.stackTruncated = !CseMachine.stackTruncated;
   }
+  public static togglePairCreationMode(): void {
+    CseMachine.pairCreationMode = !CseMachine.pairCreationMode;
+  }
   public static setClearDeadFrames(enabled: boolean): void {
     Layout.clearDeadFrames = enabled;
   }
@@ -168,7 +174,22 @@ export default class CseMachine {
       }
     }
   }
+  public static getStreamLineage(key: string): string[] | undefined {
+    return CseMachine.streamLineage.get(key);
+  }
+  public static findKeyByValueInMap(value: any) {
+    for (const [key, array] of CseMachine.streamLineage.entries()) {
+      // console.log(key + array);
+      if (array.includes(value)) {
+        return key;
+      }
+    }
 
+    return undefined;
+  }
+  public static getPairCreationMode(): boolean {
+    return CseMachine.pairCreationMode;
+  }
   public static isControl(): boolean {
     return this.control ? !this.control.isEmpty() : false;
   }
@@ -203,6 +224,7 @@ export default class CseMachine {
       throw new Error('CSE machine not initialized');
     CseMachine.control = context.runtime.control;
     CseMachine.stash = context.runtime.stash;
+    CseMachine.streamLineage = context.streamLineage;
     CseMachine.setClearDeadFrames(false);
 
     Layout.setContext(
@@ -401,7 +423,18 @@ export default class CseMachine {
         CseAnimation.updateAnimation();
       }
 
-      if (
+      if (CseMachine.getPairCreationMode()) {
+        Layout.setContext(CseMachine.environmentTree, CseMachine.control, CseMachine.stash);
+        if (!CseMachine.getMasterLayout()) {
+          CseMachine.setMasterLayout(Layout.getLayoutPositions(this.controlStash));
+        }
+        Layout.applyFixedPositions();
+        CseAnimation.updateAnimation();
+        this.setVis(Layout.draw());
+        // this.setVis(Layout.draw());
+        // console.log(Layout.currentDarkPairs);
+        // this.setVis(Layout.currentDarkPairs);
+      } else if (
         CseMachine.getPrintableMode() &&
         CseMachine.getControlStash() &&
         CseMachine.getStackTruncated() &&

src/features/cseMachine/CseMachineLayout.tsx

@@ -131,11 +131,21 @@ export class Layout {
   static underlayArrows: React.ReactNode[] = [];
   static overlayNodes: React.ReactNode[] = [];
 
+  // For pair creation layouts:
+  static currentDarkPairs: React.ReactNode;
+  static currentLightPairs: React.ReactNode;
+  static currentStackDarkPairs: React.ReactNode;
+  static currentStackTruncDarkPairs: React.ReactNode;
+  static currentStackLightPairs: React.ReactNode;
+  static currentStackTruncLightPairs: React.ReactNode;
+
   // buffer for faster rendering of diagram when scrolling
   static invisiblePaddingVertical: number = 300;
   static invisiblePaddingHorizontal: number = 300;
   static scrollContainerRef: RefObject<HTMLDivElement | null> = React.createRef();
 
+  // STREAM VISUALISATION
+  static pendingFnLink: boolean = false;
   static resetUnderlayArrows() {
     Layout.underlayArrows = [];
   }
@@ -198,6 +208,13 @@ export class Layout {
     Layout.currentStackTruncDark = undefined;
     Layout.currentStackLight = undefined;
     Layout.currentStackTruncLight = undefined;
+
+    Layout.currentLightPairs = undefined;
+    Layout.currentDarkPairs = undefined;
+    Layout.currentStackDarkPairs = undefined;
+    Layout.currentStackTruncDarkPairs = undefined;
+    Layout.currentStackLightPairs = undefined;
+    Layout.currentStackTruncLightPairs = undefined;
     // clear/initialize data and value arrays
     Layout.values.clear();
     arrowSelection.clearSelection();
@@ -701,6 +718,7 @@ export class Layout {
       Layout.resetUnderlayArrows();
       Layout.resetOverlayNodes();
       const levelNodes = Layout.levels.map(level => level.draw());
+      const streamNodes = null;
       const controlNode = CseMachine.getControlStash() ? Layout.controlComponent.draw() : null;
       const stashNode = CseMachine.getControlStash() ? Layout.stashComponent.draw() : null;
       const underlayArrows = [...Layout.underlayArrows];
@@ -762,6 +780,7 @@ export class Layout {
                     listening={false}
                   />
                   <KonvaGroup ref={Layout.contentGroupRef}>
+                    {streamNodes}
                     {levelNodes}
                     {controlNode}
                     {stashNode}
@@ -778,6 +797,7 @@ export class Layout {
           </div>
         </div>
       );
+
       Layout.prevLayout = layout;
       if (CseMachine.getPrintableMode()) {
         if (CseMachine.getControlStash()) {

src/features/cseMachine/components/arrows/ArrowFromStreamNullaryFn.tsx

@@ -0,0 +1,49 @@
+import { Config } from '../../CseMachineConfig';
+import { StepsArray } from '../../CseMachineTypes';
+import { ArrayValue } from '../values/ArrayValue';
+import { ContValue } from '../values/ContValue';
+import { FnValue } from '../values/FnValue';
+import { GlobalFnValue } from '../values/GlobalFnValue';
+import { DottedArrow } from './DottedArrow';
+
+/** this class encapsulates an GenericArrow to be drawn between 2 points */
+export class ArrowFromStreamNullaryFn extends DottedArrow {
+  constructor(
+    from: FnValue | GlobalFnValue | ContValue,
+    public offsetIndex: number = 0
+  ) {
+    super(from);
+    this.faded = !from.isReferenced();
+  }
+
+  protected calculateSteps() {
+    const from = this.source as FnValue | GlobalFnValue | ContValue;
+    const to = this.target;
+
+    if (!to || !(to instanceof ArrayValue)) return [];
+
+    const verticalShift = this.offsetIndex * 20; // 20px vertical separation for multiple arrows to the same target
+
+    // The arrow starts from the right of the function circle
+    const startPointX = from.centerX + 2 * from.radius;
+    const startPointY = from.y();
+    // The arrow ends at the top-center of the array
+    const endPointX = to.x() + Config.DataUnitWidth / 2;
+    const endPointY = to.y();
+
+    // An intermediate point is used to create the arch.
+    // It is placed horizontally between the start and end points,
+    // and vertically above them to form an upward arch.
+    const midPointX = (startPointX + endPointX) / 2;
+    const archHeight = 50;
+    const midPointY = Math.min(startPointY, endPointY) - archHeight - verticalShift;
+    const steps: StepsArray = [
+      // The GenericArrow class will draw a path through these points,
+      // creating smooth curves at the corners.
+      () => [startPointX, startPointY],
+      () => [midPointX, midPointY],
+      () => [endPointX, endPointY]
+    ];
+    return steps;
+  }
+}

src/features/cseMachine/components/arrows/DottedArrow.tsx

@@ -0,0 +1,33 @@
+import { Arrow as KonvaArrow, Group as KonvaGroup, Path as KonvaPath } from 'react-konva';
+
+import CseMachine from '../../CseMachine';
+import { Config, ShapeDefaultProps } from '../../CseMachineConfig';
+import { Layout } from '../../CseMachineLayout';
+import { IVisible } from '../../CseMachineTypes';
+import { GenericArrow } from './GenericArrow';
+
+export class DottedArrow extends GenericArrow<IVisible, IVisible> {
+  draw() {
+    const stroke = CseMachine.getPrintableMode() ? '#9B870C' : '#ded74e';
+    return (
+      <KonvaGroup key={Layout.key++} ref={this.ref} listening={false}>
+        <KonvaPath
+          {...ShapeDefaultProps}
+          stroke={stroke}
+          strokeWidth={Config.ArrowStrokeWidth}
+          data={this.path()}
+          key={Layout.key++}
+          dash={[10, 5]}
+        />
+        <KonvaArrow
+          {...ShapeDefaultProps}
+          points={this.points.slice(this.points.length - 4)}
+          fill={stroke}
+          strokeEnabled={false}
+          pointerWidth={Config.ArrowHeadSize}
+          key={Layout.key++}
+        />
+      </KonvaGroup>
+    );
+  }
+}

src/features/cseMachine/components/values/ArrayValue.tsx

@@ -1,3 +1,4 @@
+import Closure from 'js-slang/dist/cse-machine/closure';
 import { KonvaEventObject } from 'konva/lib/Node';
 import React from 'react';
 import { Group } from 'react-konva';
@@ -36,6 +37,18 @@ export class ArrayValue extends Value implements IHoverable {
     super();
     Layout.memoizeValue(data, this);
     this.addReference(firstReference);
+    /** handling pairs for stream visualisation */
+    if (data[1] instanceof Closure) {
+      const originFnId = CseMachine.findKeyByValueInMap(data.id);
+      if (originFnId != undefined) {
+        const originFnValue = Layout.values.get(originFnId);
+        if (originFnValue instanceof FnValue) {
+          originFnValue.addArrow(this);
+        } else {
+          Layout.pendingFnLink = true;
+        }
+      }
+    }
   }
 
   handleNewReference(newReference: ReferenceType): void {

src/features/cseMachine/components/values/FnValue.tsx

@@ -24,8 +24,10 @@ import {
 } from '../../CseMachineUtils';
 import { ArrowFromFn } from '../arrows/ArrowFromFn';
 import { ArrowFromFnTooltip } from '../arrows/ArrowFromFnTooltip';
+import { ArrowFromStreamNullaryFn } from '../arrows/ArrowFromStreamNullaryFn';
 import { Binding } from '../Binding';
 import { Frame } from '../Frame';
+import { ArrayValue } from './ArrayValue';
 import { FunctionTooltipLabels, Value } from './Value';
 
 /** this class encapsulates a JS Slang function (not from the global frame) that
@@ -57,6 +59,8 @@ export class FnValue extends Value implements IHoverable {
   enclosingFrame?: Frame;
   private isExpandedDescription: boolean = false;
   private _arrow: ArrowFromFn | undefined;
+  private _streamArrows: ArrowFromStreamNullaryFn[] = [];
+
   private tooltipArrow: ArrowFromFnTooltip | undefined;
   private showTooltipArrow: boolean = false;
 
@@ -102,6 +106,32 @@ export class FnValue extends Value implements IHoverable {
     this.totalWidth =
       this._width + Config.TextMargin + this.exportTooltipWidth + Config.FnTooltipTextPadding * 2;
 
+    if (Layout.pendingFnLink) {
+      const thisId = (data as any).id;
+      const linkedPairs = CseMachine.getStreamLineage(thisId);
+
+      if (linkedPairs != undefined && CseMachine.getStreamLineage(thisId) != undefined) {
+        // console.log(CseMachine.getStreamLineage(thisId))
+        const targetCounts = new Map<ArrayValue, number>();
+
+        for (const pair of linkedPairs) {
+          const pairObject = Layout.values.get(pair) as ArrayValue;
+          // The pair might not be in Layout.values if it's not reachable in the current step, so we check.
+          if (pairObject instanceof ArrayValue) {
+            const currentCount = targetCounts.get(pairObject) || 0;
+            targetCounts.set(pairObject, currentCount + 1);
+
+            this._streamArrows.push(
+              new ArrowFromStreamNullaryFn(this).to(pairObject) as ArrowFromStreamNullaryFn
+            );
+            this._streamArrows[this._streamArrows.length - 1].draw();
+          }
+        }
+      }
+
+      Layout.pendingFnLink = false;
+    }
+
     this.addReference(firstReference);
   }
 
@@ -138,6 +168,16 @@ export class FnValue extends Value implements IHoverable {
     return this._arrow;
   }
 
+  addArrow(target: any): void {
+    // Check how many arrows already point to this specific target
+    const currentCount = this._streamArrows.filter(arrow => arrow.target === target).length;
+
+    // Pass the count as the offsetIndex
+    this._streamArrows?.push(
+      new ArrowFromStreamNullaryFn(this, currentCount).to(target) as ArrowFromStreamNullaryFn
+    );
+  }
+
   onMouseEnter = ({ currentTarget }: KonvaEventObject<MouseEvent>) => {
     if (CseMachine.getPrintableMode()) return;
     setHoveredCursor(currentTarget);
@@ -225,6 +265,20 @@ export class FnValue extends Value implements IHoverable {
   }
 
   draw(): React.ReactNode {
+    const pairs = CseMachine.getStreamLineage((this.data as any).id);
+    this._streamArrows = [];
+    if (CseMachine.getPairCreationMode()) {
+      // Clear arrows to prevent duplicates from multiple draw calls
+
+      if (pairs != undefined) {
+        for (const pair of pairs) {
+          const target = Layout.values.get(pair);
+          if (target) {
+            this.addArrow(target);
+          }
+        }
+      }
+    }
     if (this.fnName === undefined) {
       throw new Error('Closure has no main reference and is not initialised!');
     }
@@ -301,6 +355,7 @@ export class FnValue extends Value implements IHoverable {
           />
         </Group>
         {this._arrow?.draw()}
+        {this._streamArrows.map((arrow, index) => arrow.draw())}
         {this.tooltipArrow?.draw()}
       </React.Fragment>
     );