Loop Support (#114)

* Frist crude loop support

* Bugfixes

* Improved loop rendering

* Sync

* Rewert erroneous change in node LOD

.vscode/launch.json

@@ -5,7 +5,7 @@
             "type": "chrome",
             "request": "launch",
             "name": "Launch",
-            "url": "http://localhost:8080/sdfv.html",
+            "url": "http://localhost:3000/sdfv.html",
             "sourceMaps": true,
             "webRoot": "${workspaceFolder}",
             "preLaunchTask": "npm: serve",

sdfv.css

@@ -67,8 +67,8 @@ body {
 #contents {
   position: relative;
   resize: both;
-  width: 1024px;
-  height: 768px;
+  width: 90%;
+  height: 90%;
   border: 1px solid;
   overflow: hidden;
 }
@@ -366,6 +366,9 @@ pre.code code {
   --node-missing-background-color: red;
   --state-background-color: #deebf7;
   --state-foreground-color: #000000;
+  --loop-background-color: #ffffff;
+  --loop-background-simple-color: #e0e0e0;
+  --loop-foreground-color: #000000;
   --interstate-edge-color: #86add9;
   --connector-scoped-color: #c1dfe690;
   --connector-unscoped-color: #f0fdff;

src/index.ts

@@ -41,16 +41,6 @@ export type InvalidSDFGError = {
     isedge_id: number | undefined,
 };
 
-export type JsonSDFG = {
-    type: string,
-    start_state: number,
-    sdfg_list_id: number,
-    attributes: any,
-    edges: any[],
-    nodes: any[],
-    error: InvalidSDFGError | undefined,
-};
-
 export type JsonSDFGEdge = {
     attributes: any,
     dst: string,
@@ -64,24 +54,42 @@ export type JsonSDFGEdge = {
     y?: number,
 };
 
-export type JsonSDFGNode = {
+export interface JsonSDFGNode {
     attributes: any,
     id: number,
     label: string,
     scope_entry: string | null,
     scope_exit: string | null,
     type: string,
-};
+}
 
-export type JsonSDFGState = {
+export interface JsonSDFGBlock {
     attributes: any,
     collapsed: boolean,
     edges: JsonSDFGEdge[],
+    nodes: (JsonSDFGBlock | JsonSDFGNode)[],
     id: number,
     label: string,
-    nodes: JsonSDFGNode[],
+    type: string,
+}
+
+export interface JsonSDFGControlBlock extends JsonSDFGBlock {
+    nodes: JsonSDFGBlock[],
+}
+
+export interface JsonSDFGState extends JsonSDFGBlock {
     scope_dict: any,
+    nodes: JsonSDFGNode[],
+}
+
+export type JsonSDFG = {
     type: string,
+    start_state: number,
+    sdfg_list_id: number,
+    attributes: any,
+    edges: any[], // TODO
+    nodes: any[], // TODO
+    error: InvalidSDFGError | undefined,
 };
 
 export type ModeButtons = {

src/overlays/logical_group_overlay.ts

@@ -7,6 +7,7 @@ import {
     SDFGNode,
     SDFGElement,
     State,
+    SDFGElementType,
 } from '../renderer/renderer_elements';
 import { SDFV } from '../sdfv';
 import { GenericSdfgOverlay, OverlayType } from './generic_sdfg_overlay';
@@ -78,62 +79,69 @@ export class LogicalGroupOverlay extends GenericSdfgOverlay {
         }
     }
 
-    public recursively_shade_sdfg(
-        sdfg: JsonSDFG,
-        graph: DagreSDFG,
-        ctx: CanvasRenderingContext2D,
-        ppp: number,
-        visible_rect: SimpleRect
+    public recursivelyShadeSDFG(
+        sdfg: JsonSDFG, graph: DagreSDFG, ctx: CanvasRenderingContext2D,
+        ppp: number, visibleRect: SimpleRect
     ): void {
         // First go over visible states, skipping invisible ones. We only draw
         // something if the state is collapsed or we're zoomed out far enough.
         // In that case, we overlay the correct grouping color(s).
         // If it's expanded or zoomed in close enough, we traverse inside.
-        const sdfg_groups = sdfg.attributes.logical_groups;
-        if (sdfg_groups === undefined)
+        const sdfgGroups = sdfg.attributes.logical_groups;
+        if (sdfgGroups === undefined)
             return;
 
         graph.nodes().forEach(v => {
-            const state = graph.node(v);
+            const block = graph.node(v);
 
             // If the node's invisible, we skip it.
-            if ((ctx as any).lod && !state.intersect(
-                visible_rect.x, visible_rect.y,
-                visible_rect.w, visible_rect.h
+            if ((ctx as any).lod && !block.intersect(
+                visibleRect.x, visibleRect.y,
+                visibleRect.w, visibleRect.h
             ))
                 return;
 
             if (((ctx as any).lod && (ppp >= SDFV.STATE_LOD ||
-                state.width / ppp <= SDFV.STATE_LOD)) ||
-                state.data.state.attributes.is_collapsed) {
-                this.shade_node(state, sdfg_groups, ctx);
+                block.width / ppp <= SDFV.STATE_LOD)) ||
+                block.attributes().is_collapsed
+            ) {
+                this.shade_node(block, sdfgGroups, ctx);
             } else {
-                const state_graph = state.data.graph;
-                if (state_graph) {
-                    state_graph.nodes().forEach((v: string) => {
-                        const node = state_graph.node(v);
-
-                        // Skip the node if it's not visible.
-                        if ((ctx as any).lod && !node.intersect(visible_rect.x,
-                            visible_rect.y, visible_rect.w, visible_rect.h))
-                            return;
-
-                        if (node.data.node.attributes.is_collapsed ||
-                            ((ctx as any).lod && ppp >= SDFV.NODE_LOD)) {
-                            this.shade_node(node, sdfg_groups, ctx);
-                        } else {
-                            if (node instanceof NestedSDFG &&
-                                node.attributes().sdfg &&
-                                node.attributes().sdfg.type !== 'SDFGShell') {
-                                this.recursively_shade_sdfg(
-                                    node.data.node.attributes.sdfg,
-                                    node.data.graph, ctx, ppp, visible_rect
-                                );
+                if (block.type() === SDFGElementType.SDFGState) {
+                    const stateGraph = block.data.graph;
+                    if (stateGraph) {
+                        stateGraph.nodes().forEach((v: string) => {
+                            const node = stateGraph.node(v);
+
+                            // Skip the node if it's not visible.
+                            if ((ctx as any).lod && !node.intersect(
+                                visibleRect.x,
+                                visibleRect.y, visibleRect.w, visibleRect.h)
+                            )
+                                return;
+
+                            if (node.attributes().is_collapsed ||
+                                ((ctx as any).lod && ppp >= SDFV.NODE_LOD)) {
+                                this.shade_node(node, sdfgGroups, ctx);
                             } else {
-                                this.shade_node(node, sdfg_groups, ctx);
+                                if (node instanceof NestedSDFG &&
+                                    node.attributes().sdfg &&
+                                    node.attributes().sdfg.type !== 'SDFGShell'
+                                ) {
+                                    this.recursivelyShadeSDFG(
+                                        node.data.node.attributes.sdfg,
+                                        node.data.graph, ctx, ppp, visibleRect
+                                    );
+                                } else {
+                                    this.shade_node(node, sdfgGroups, ctx);
+                                }
                             }
-                        }
-                    });
+                        });
+                    }
+                } else {
+                    this.recursivelyShadeSDFG(
+                        sdfg, block.data.graph, ctx, ppp, visibleRect
+                    );
                 }
             }
         });
@@ -146,7 +154,7 @@ export class LogicalGroupOverlay extends GenericSdfgOverlay {
         const context = this.renderer.get_context();
         const visible_rect = this.renderer.get_visible_rect();
         if (graph && ppp !== undefined && context && visible_rect)
-            this.recursively_shade_sdfg(
+            this.recursivelyShadeSDFG(
                 sdfg, graph, context, ppp, visible_rect
             );
     }

src/overlays/operational_intensity_overlay.ts

@@ -1,7 +1,7 @@
 // Copyright 2019-2022 ETH Zurich and the DaCe authors. All rights reserved.
 
 import { DagreSDFG, Point2D, SimpleRect, SymbolMap } from '../index';
-import { SDFGRenderer, SDFGRendererEvent } from '../renderer/renderer';
+import { SDFGRenderer } from '../renderer/renderer';
 import {
     Edge,
     NestedSDFG,

src/renderer/canvas_manager.ts

@@ -4,7 +4,7 @@ import { Edge, EntryNode, SDFGElement, SDFGElementType, SDFGNode } from './rende
 import { lerpMatrix } from '../utils/lerp_matrix';
 import { updateEdgeBoundingBox } from '../utils/bounding_box';
 import {
-    get_positioning_info,
+    getPositioningInfo,
     initialize_positioning_info,
 } from '../utils/sdfg/sdfg_utils';
 import { SDFGRenderer, SDFGListType } from './renderer';
@@ -483,7 +483,7 @@ export class CanvasManager {
             const points = el.get_points();
             let position;
             if (update_position_info) {
-                position = get_positioning_info(el);
+                position = getPositioningInfo(el);
 
                 if (!position)
                     position = initialize_positioning_info(el);
@@ -591,7 +591,7 @@ export class CanvasManager {
 
         // Store movement information in element (for relayouting)
         if (update_position_info) {
-            let position = get_positioning_info(el);
+            let position = getPositioningInfo(el);
             if (!position)
                 position = initialize_positioning_info(el);