May Improvements (#147)

* Fmt * Better SDFV Settings * Change viewport clamping to minimap bounds instead of graph bounding box * Fixes to edge summarization
spcl · May 27, 2024 · 0367d50 · 0367d50
1 parent 5f34f33
commit 0367d50
Show file tree

Hide file tree

Showing 18 changed files with 2,586 additions and 1,161 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@spcl/sdfv",
-    "version": "1.2.4",
+    "version": "1.2.6",
     "description": "A standalone viewer for SDFGs",
     "homepage": "https://github.com/spcl/dace-webclient",
     "main": "out/index.js",
@@ -70,7 +70,7 @@
     "dependencies": {
         "@babel/runtime": "^7.20.7",
         "assert": "^2.0.0",
-        "bootstrap": "^5.2.3",
+        "bootstrap": "^5.3.0",
         "browserify-zlib": "^0.2.0",
         "buffer": "^6.0.3",
         "chart.js": "^4.1.2",

diff --git a/scss/sdfv.scss b/scss/sdfv.scss
@@ -167,29 +167,6 @@ body.sdfv {
     background-color: silver;
   }
 
-  .button {
-    padding: 0.3rem 0.4rem;
-    border-radius: 5px;
-    cursor: pointer;
-    background-color: #eee;
-    color: black;
-  }
-
-  .button:hover {
-    background-color: #ccc;
-  }
-
-  .button > span {
-    margin: 0;
-  }
-
-  button {
-    border: 0;
-    margin: 2px;
-    background: none;
-    box-shadow: none;
-  }
-
   pre.code {
     margin-top: 0;
     margin-bottom: 0;

diff --git a/src/overlay_manager.ts b/src/overlay_manager.ts
@@ -3,7 +3,11 @@
 import { MathNode, parse, SymbolNode } from 'mathjs';
 import { Point2D, SymbolMap } from './index';
 import { GenericSdfgOverlay } from './overlays/generic_sdfg_overlay';
-import { SDFGRenderer } from './renderer/renderer';
+import {
+    GraphElementInfo,
+    SDFGElementGroup,
+    SDFGRenderer,
+} from './renderer/renderer';
 import { SDFGElement } from './renderer/renderer_elements';
 import { createElement } from './utils/utils';
 
@@ -346,8 +350,8 @@ export class OverlayManager {
         type: string,
         ev: MouseEvent,
         mousepos: Point2D,
-        elements: SDFGElement[],
-        foreground_elem: SDFGElement | undefined,
+        elements: Record<SDFGElementGroup, GraphElementInfo[]>,
+        foreground_elem: SDFGElement | null,
         ends_drag: boolean
     ): boolean {
         let dirty = false;

diff --git a/src/overlays/avg_parallelism_overlay.ts b/src/overlays/avg_parallelism_overlay.ts
@@ -7,7 +7,11 @@ import {
     SymbolMap,
     getGraphElementUUID,
 } from '../index';
-import { SDFGRenderer } from '../renderer/renderer';
+import {
+    GraphElementInfo,
+    SDFGElementGroup,
+    SDFGRenderer,
+} from '../renderer/renderer';
 import {
     ControlFlowBlock,
     ControlFlowRegion,
@@ -245,18 +249,20 @@ export class AvgParallelismOverlay extends GenericSdfgOverlay {
                             visibleRect.y, visibleRect.w, visibleRect.h))
                             return;
 
-                        if (node instanceof NestedSDFG && !node.data.node.attributes.is_collapsed) {
-                            const nodeppp = Math.sqrt(node.width * node.height) / ppp;
+                        if (node instanceof NestedSDFG &&
+                            !node.data.node.attributes.is_collapsed) {
+                            const nodeppp = Math.sqrt(
+                                node.width * node.height
+                            ) / ppp;
                             if ((ctx as any).lod && nodeppp < SDFV.STATE_LOD) {
                                 this.shadeNode(node, ctx);
-                            }
-                            else if (node.attributes().sdfg && node.attributes().sdfg.type !== 'SDFGShell') {
+                            } else if (node.attributes().sdfg &&
+                                node.attributes().sdfg.type !== 'SDFGShell') {
                                 this.recursivelyShadeCFG(
                                     node.data.graph, ctx, ppp, visibleRect
                                 );
                             }
-                        }
-                        else {
+                        } else {
                             this.shadeNode(node, ctx);
                         }
                     });
@@ -282,13 +288,12 @@ export class AvgParallelismOverlay extends GenericSdfgOverlay {
         type: string,
         _ev: Event,
         _mousepos: Point2D,
-        _elements: SDFGElement[],
-        foreground_elem: SDFGElement,
+        _elements: Record<SDFGElementGroup, GraphElementInfo[]>,
+        foreground_elem: SDFGElement | null,
         ends_drag: boolean
     ): boolean {
         if (type === 'click' && !ends_drag) {
-            if (foreground_elem !== undefined && foreground_elem !== null &&
-                !(foreground_elem instanceof Edge)) {
+            if (foreground_elem && !(foreground_elem instanceof Edge)) {
                 if (foreground_elem.data.avg_parallelism === undefined) {
                     const avg_parallelism_string = this.avg_parallelism_map[
                         getGraphElementUUID(foreground_elem)

diff --git a/src/overlays/depth_overlay.ts b/src/overlays/depth_overlay.ts
@@ -7,7 +7,11 @@ import {
     SymbolMap,
     getGraphElementUUID,
 } from '../index';
-import { SDFGRenderer } from '../renderer/renderer';
+import {
+    GraphElementInfo,
+    SDFGElementGroup,
+    SDFGRenderer,
+} from '../renderer/renderer';
 import {
     Edge,
     NestedSDFG,
@@ -230,18 +234,20 @@ export class DepthOverlay extends GenericSdfgOverlay {
                             visible_rect.y, visible_rect.w, visible_rect.h))
                             return;
 
-                        if (node instanceof NestedSDFG && !node.data.node.attributes.is_collapsed) {
-                            const nodeppp = Math.sqrt(node.width * node.height) / ppp;
+                        if (node instanceof NestedSDFG &&
+                            !node.data.node.attributes.is_collapsed) {
+                            const nodeppp = Math.sqrt(
+                                node.width * node.height
+                            ) / ppp;
                             if ((ctx as any).lod && nodeppp < SDFV.STATE_LOD) {
                                 this.shade_node(node, ctx);
-                            }
-                            else if (node.attributes().sdfg && node.attributes().sdfg.type !== 'SDFGShell') {
+                            } else if (node.attributes().sdfg &&
+                                node.attributes().sdfg.type !== 'SDFGShell') {
                                 this.recursively_shade_sdfg(
                                     node.data.graph, ctx, ppp, visible_rect
                                 );
                             }
-                        }
-                        else {
+                        } else {
                             this.shade_node(node, ctx);
                         }
                     });
@@ -263,13 +269,12 @@ export class DepthOverlay extends GenericSdfgOverlay {
         type: string,
         _ev: Event,
         _mousepos: Point2D,
-        _elements: SDFGElement[],
-        foreground_elem: SDFGElement,
+        _elements: Record<SDFGElementGroup, GraphElementInfo[]>,
+        foreground_elem: SDFGElement | null,
         ends_drag: boolean
     ): boolean {
         if (type === 'click' && !ends_drag) {
-            if (foreground_elem !== undefined && foreground_elem !== null &&
-                !(foreground_elem instanceof Edge)) {
+            if (foreground_elem && !(foreground_elem instanceof Edge)) {
                 if (foreground_elem.data.depth === undefined) {
                     const depth_string = this.depth_map[
                         getGraphElementUUID(foreground_elem)

diff --git a/src/overlays/generic_sdfg_overlay.ts b/src/overlays/generic_sdfg_overlay.ts
@@ -3,7 +3,11 @@
 import { log, mean, median } from 'mathjs';
 import { Point2D } from '../index';
 import { OverlayManager, SymbolResolver } from '../overlay_manager';
-import { SDFGRenderer } from '../renderer/renderer';
+import {
+    GraphElementInfo,
+    SDFGElementGroup,
+    SDFGRenderer,
+} from '../renderer/renderer';
 import { SDFGElement } from '../renderer/renderer_elements';
 
 declare const vscode: any;
@@ -43,8 +47,8 @@ export class GenericSdfgOverlay {
         _type: string,
         _ev: MouseEvent,
         _mousepos: Point2D,
-        _elements: SDFGElement[],
-        _foreground_elem: SDFGElement | undefined,
+        _elements: Record<SDFGElementGroup, GraphElementInfo[]>,
+        _foreground_elem: SDFGElement | null,
         _ends_drag: boolean
     ): boolean {
         return false;

diff --git a/src/overlays/logical_group_overlay.ts b/src/overlays/logical_group_overlay.ts
@@ -1,7 +1,11 @@
 // Copyright 2019-2024 ETH Zurich and the DaCe authors. All rights reserved.
 
 import { DagreGraph, JsonSDFG, Point2D, SimpleRect } from '../index';
-import { SDFGRenderer } from '../renderer/renderer';
+import {
+    GraphElementInfo,
+    SDFGElementGroup,
+    SDFGRenderer,
+} from '../renderer/renderer';
 import {
     NestedSDFG,
     SDFGNode,
@@ -88,13 +92,11 @@ export class LogicalGroupOverlay extends GenericSdfgOverlay {
         // In that case, we overlay the correct grouping color(s).
         // If it's expanded or zoomed in close enough, we traverse inside.
         const sdfgGroups = sdfg.attributes.logical_groups;
-        if (sdfgGroups === undefined || sdfgGroups.length === 0) {    
+        if (sdfgGroups === undefined || sdfgGroups.length === 0)
             return;
-        }
 
-        if (!graph) {
+        if (!graph)
             return;
-        }
 
         graph?.nodes().forEach(v => {
             const block = graph.node(v);
@@ -169,8 +171,8 @@ export class LogicalGroupOverlay extends GenericSdfgOverlay {
         _type: string,
         _ev: MouseEvent,
         _mousepos: Point2D,
-        _elements: SDFGElement[],
-        _foreground_elem: SDFGElement | undefined,
+        _elements: Record<SDFGElementGroup, GraphElementInfo[]>,
+        _foreground_elem: SDFGElement | null,
         _ends_drag: boolean
     ): boolean {
         return false;

diff --git a/src/overlays/memory_location_overlay.ts b/src/overlays/memory_location_overlay.ts
@@ -1,7 +1,11 @@
 // Copyright 2019-2024 ETH Zurich and the DaCe authors. All rights reserved.
 
 import { DagreGraph, Point2D, SimpleRect } from '../index';
-import { SDFGRenderer } from '../renderer/renderer';
+import {
+    GraphElementInfo,
+    SDFGElementGroup,
+    SDFGRenderer,
+} from '../renderer/renderer';
 import {
     AccessNode,
     ControlFlowBlock,
@@ -267,9 +271,8 @@ export class MemoryLocationOverlay extends GenericSdfgOverlay {
                                 node.data.graph, ctx, ppp, visibleRect
                             );
                         } else if (node instanceof AccessNode) {
-                            if (!(ctx as any).lod || ppp < SDFV.NODE_LOD) {
+                            if (!(ctx as any).lod || ppp < SDFV.NODE_LOD)
                                 this.shadeNode(node, ctx);
-                            }
                         }
                     });
                 }
@@ -294,8 +297,8 @@ export class MemoryLocationOverlay extends GenericSdfgOverlay {
         _type: string,
         _ev: MouseEvent,
         _mousepos: Point2D,
-        _elements: SDFGElement[],
-        _foreground_elem: SDFGElement | undefined,
+        _elements: Record<SDFGElementGroup, GraphElementInfo[]>,
+        _foreground_elem: SDFGElement | null,
         _ends_drag: boolean
     ): boolean {
         return false;

diff --git a/src/overlays/memory_volume_overlay.ts b/src/overlays/memory_volume_overlay.ts
@@ -1,7 +1,11 @@
 // Copyright 2019-2024 ETH Zurich and the DaCe authors. All rights reserved.
 
 import { DagreGraph, Point2D, SimpleRect, SymbolMap } from '../index';
-import { SDFGRenderer } from '../renderer/renderer';
+import {
+    GraphElementInfo,
+    SDFGElementGroup,
+    SDFGRenderer,
+} from '../renderer/renderer';
 import {
     ControlFlowBlock,
     ControlFlowRegion,
@@ -218,11 +222,10 @@ export class MemoryVolumeOverlay extends GenericSdfgOverlay {
                         const edge: Edge = state_graph.edge(e);
 
                         // Skip if edge is invisible, or zoomed out far
-                        if ((ctx as any).lod 
-                            && (!edge.intersect(visibleRect.x, visibleRect.y, visibleRect.w, visibleRect.h)
-                            || ppp > SDFV.EDGE_LOD
-                            )
-                        )
+                        if ((ctx as any).lod && (!edge.intersect(
+                            visibleRect.x, visibleRect.y,
+                            visibleRect.w, visibleRect.h
+                        ) || ppp > SDFV.EDGE_LOD))
                             return;
 
                         this.shadeEdge(edge, ctx);
@@ -249,13 +252,12 @@ export class MemoryVolumeOverlay extends GenericSdfgOverlay {
         type: string,
         _ev: MouseEvent,
         _mousepos: Point2D,
-        _elements: SDFGElement[],
-        foreground_elem: SDFGElement | undefined,
+        _elements: Record<SDFGElementGroup, GraphElementInfo[]>,
+        foreground_elem: SDFGElement | null,
         ends_drag: boolean
     ): boolean {
         if (type === 'click' && !ends_drag) {
-            if (foreground_elem !== undefined &&
-                foreground_elem instanceof Edge) {
+            if (foreground_elem && foreground_elem instanceof Edge) {
                 if (foreground_elem.data.volume === undefined) {
                     if (foreground_elem.data.attributes.volume) {
                         this.symbolResolver.parse_symbol_expression(

diff --git a/src/overlays/operational_intensity_overlay.ts b/src/overlays/operational_intensity_overlay.ts
@@ -7,7 +7,11 @@ import {
     SymbolMap,
     getGraphElementUUID,
 } from '../index';
-import { SDFGRenderer } from '../renderer/renderer';
+import {
+    GraphElementInfo,
+    SDFGElementGroup,
+    SDFGRenderer,
+} from '../renderer/renderer';
 import {
     Edge,
     NestedSDFG,
@@ -273,18 +277,20 @@ export class OperationalIntensityOverlay extends GenericSdfgOverlay {
                             visible_rect.y, visible_rect.w, visible_rect.h))
                             return;
 
-                        if (node instanceof NestedSDFG && !node.data.node.attributes.is_collapsed) {
-                            const nodeppp = Math.sqrt(node.width * node.height) / ppp;
+                        if (node instanceof NestedSDFG &&
+                            !node.data.node.attributes.is_collapsed) {
+                            const nodeppp = Math.sqrt(
+                                node.width * node.height
+                            ) / ppp;
                             if ((ctx as any).lod && nodeppp < SDFV.STATE_LOD) {
                                 this.shade_node(node, ctx);
-                            }
-                            else if (node.attributes().sdfg && node.attributes().sdfg.type !== 'SDFGShell') {
+                            } else if (node.attributes().sdfg &&
+                                node.attributes().sdfg.type !== 'SDFGShell') {
                                 this.recursively_shade_sdfg(
                                     node.data.graph, ctx, ppp, visible_rect
                                 );
                             }
-                        }
-                        else {
+                        } else {
                             this.shade_node(node, ctx);
                         }
                     });
@@ -306,13 +312,12 @@ export class OperationalIntensityOverlay extends GenericSdfgOverlay {
         type: string,
         _ev: Event,
         _mousepos: Point2D,
-        _elements: SDFGElement[],
-        foreground_elem: SDFGElement,
+        _elements: Record<SDFGElementGroup, GraphElementInfo[]>,
+        foreground_elem: SDFGElement | null,
         ends_drag: boolean
     ): boolean {
         if (type === 'click' && !ends_drag) {
-            if (foreground_elem !== undefined && foreground_elem !== null &&
-                !(foreground_elem instanceof Edge)) {
+            if (foreground_elem && !(foreground_elem instanceof Edge)) {
                 if (foreground_elem.data.flops === undefined) {
                     const flops_string = this.flops_map[
                         getGraphElementUUID(foreground_elem)