LOD adjustment settings (#160)

* Fix behavior locking panning to viewport * Add LOD as configurable options * Allow for LOD adjustment of all kinds
spcl · Aug 26, 2024 · 21a11bb · 21a11bb
1 parent 51cf273
commit 21a11bb
Show file tree

Hide file tree

Showing 15 changed files with 275 additions and 86 deletions.
diff --git a/scss/sdfv.scss b/scss/sdfv.scss
@@ -391,4 +391,12 @@ body.sdfv {
 
   }
 
+  .sdfv-setting-separator {
+    margin-top: 0.5rem !important;
+    margin-bottom: 0.5rem !important;
+    margin-left: calc(-1 * var(--bs-accordion-body-padding-x)) !important;
+    margin-right: calc(-1 * var(--bs-accordion-body-padding-x)) !important;
+    opacity: 0.1 !important;
+  }
+
 }
diff --git a/src/overlays/avg_parallelism_overlay.ts b/src/overlays/avg_parallelism_overlay.ts
@@ -3,6 +3,7 @@
 import {
     DagreGraph,
     Point2D,
+    SDFVSettings,
     SimpleRect,
     SymbolMap,
     getGraphElementUUID,
@@ -235,7 +236,8 @@ export class AvgParallelismOverlay extends GenericSdfgOverlay {
                 return;
 
             const stateppp = Math.sqrt(block.width * block.height) / ppp;
-            if ((this.renderer.adaptiveHiding && (stateppp < SDFV.STATE_LOD)) ||
+            if ((this.renderer.adaptiveHiding &&
+                (stateppp < SDFVSettings.get<number>('nestedLOD'))) ||
                 block.attributes()?.is_collapsed) {
                 this.shadeNode(block, ctx);
             } else if (block instanceof State) {
@@ -258,7 +260,8 @@ export class AvgParallelismOverlay extends GenericSdfgOverlay {
                                 node.width * node.height
                             ) / ppp;
                             if (this.renderer.adaptiveHiding &&
-                                nodeppp < SDFV.STATE_LOD) {
+                                nodeppp <
+                                SDFVSettings.get<number>('nestedLOD')) {
                                 this.shadeNode(node, ctx);
                             } else if (node.attributes().sdfg &&
                                 node.attributes().sdfg.type !== 'SDFGShell') {

diff --git a/src/overlays/depth_overlay.ts b/src/overlays/depth_overlay.ts
@@ -3,6 +3,7 @@
 import {
     DagreGraph,
     Point2D,
+    SDFVSettings,
     SimpleRect,
     SymbolMap,
     getGraphElementUUID,
@@ -220,7 +221,8 @@ export class DepthOverlay extends GenericSdfgOverlay {
                 return;
 
             const stateppp = Math.sqrt(state.width * state.height) / ppp;
-            if ((this.renderer.adaptiveHiding && (stateppp < SDFV.STATE_LOD)) ||
+            if ((this.renderer.adaptiveHiding &&
+                (stateppp < SDFVSettings.get<number>('nestedLOD'))) ||
                 state.data.state.attributes.is_collapsed) {
                 this.shade_node(state, ctx);
             } else {
@@ -243,7 +245,8 @@ export class DepthOverlay extends GenericSdfgOverlay {
                                 node.width * node.height
                             ) / ppp;
                             if (this.renderer.adaptiveHiding &&
-                                nodeppp < SDFV.STATE_LOD) {
+                                nodeppp <
+                                SDFVSettings.get<number>('nestedLOD')) {
                                 this.shade_node(node, ctx);
                             } else if (node.attributes().sdfg &&
                                 node.attributes().sdfg.type !== 'SDFGShell') {

diff --git a/src/overlays/logical_group_overlay.ts b/src/overlays/logical_group_overlay.ts
@@ -1,6 +1,12 @@
 // Copyright 2019-2024 ETH Zurich and the DaCe authors. All rights reserved.
 
-import { DagreGraph, JsonSDFG, Point2D, SimpleRect } from '../index';
+import {
+    DagreGraph,
+    JsonSDFG,
+    Point2D,
+    SDFVSettings,
+    SimpleRect,
+} from '../index';
 import {
     GraphElementInfo,
     SDFGElementGroup,
@@ -13,7 +19,6 @@ import {
     State,
     SDFGElementType,
 } from '../renderer/renderer_elements';
-import { SDFV } from '../sdfv';
 import { GenericSdfgOverlay, OverlayType } from './generic_sdfg_overlay';
 
 export type LogicalGroup = {
@@ -109,7 +114,8 @@ export class LogicalGroupOverlay extends GenericSdfgOverlay {
                 return;
 
             const blockppp = Math.sqrt(block.width * block.height) / ppp;
-            if ((this.renderer.adaptiveHiding && (blockppp < SDFV.STATE_LOD)) ||
+            if ((this.renderer.adaptiveHiding &&
+                (blockppp < SDFVSettings.get<number>('nestedLOD'))) ||
                 block.attributes().is_collapsed
             ) {
                 this.shadeNode(block, sdfgGroups, ctx);
@@ -129,7 +135,7 @@ export class LogicalGroupOverlay extends GenericSdfgOverlay {
 
                             if (node.attributes().is_collapsed ||
                                 (this.renderer.adaptiveHiding &&
-                                 ppp > SDFV.NODE_LOD)) {
+                                 ppp > SDFVSettings.get<number>('nodeLOD'))) {
                                 this.shadeNode(node, sdfgGroups, ctx);
                             } else {
                                 if (node instanceof NestedSDFG &&

diff --git a/src/overlays/memory_location_overlay.ts b/src/overlays/memory_location_overlay.ts
@@ -1,6 +1,6 @@
 // Copyright 2019-2024 ETH Zurich and the DaCe authors. All rights reserved.
 
-import { DagreGraph, Point2D, SimpleRect } from '../index';
+import { DagreGraph, Point2D, SDFVSettings, SimpleRect } from '../index';
 import {
     GraphElementInfo,
     SDFGElementGroup,
@@ -15,7 +15,6 @@ import {
     SDFGNode,
     State,
 } from '../renderer/renderer_elements';
-import { SDFV } from '../sdfv';
 import { KELLY_COLORS } from '../utils/utils';
 import { GenericSdfgOverlay, OverlayType } from './generic_sdfg_overlay';
 
@@ -248,7 +247,8 @@ export class MemoryLocationOverlay extends GenericSdfgOverlay {
                 return;
 
             const stateppp = Math.sqrt(block.width * block.height) / ppp;
-            if ((this.renderer.adaptiveHiding && (stateppp < SDFV.STATE_LOD)) ||
+            if ((this.renderer.adaptiveHiding &&
+                (stateppp < SDFVSettings.get<number>('nestedLOD'))) ||
                 block.attributes()?.is_collapsed) {
                 // The state is collapsed or too small, so we don't need to
                 // traverse its insides.
@@ -275,7 +275,7 @@ export class MemoryLocationOverlay extends GenericSdfgOverlay {
                             );
                         } else if (node instanceof AccessNode) {
                             if (!this.renderer.adaptiveHiding ||
-                                ppp < SDFV.NODE_LOD)
+                                ppp < SDFVSettings.get<number>('nodeLOD'))
                                 this.shadeNode(node, ctx);
                         }
                     });

diff --git a/src/overlays/memory_volume_overlay.ts b/src/overlays/memory_volume_overlay.ts
@@ -1,6 +1,12 @@
 // Copyright 2019-2024 ETH Zurich and the DaCe authors. All rights reserved.
 
-import { DagreGraph, Point2D, SimpleRect, SymbolMap } from '../index';
+import {
+    DagreGraph,
+    Point2D,
+    SDFVSettings,
+    SimpleRect,
+    SymbolMap,
+} from '../index';
 import {
     GraphElementInfo,
     SDFGElementGroup,
@@ -15,7 +21,6 @@ import {
     SDFGNode,
     State,
 } from '../renderer/renderer_elements';
-import { SDFV } from '../sdfv';
 import { getTempColorHslString } from '../utils/utils';
 import { GenericSdfgOverlay, OverlayType } from './generic_sdfg_overlay';
 
@@ -187,7 +192,8 @@ export class MemoryVolumeOverlay extends GenericSdfgOverlay {
             // If we're zoomed out enough that the contents aren't visible, we
             // skip the state.
             const stateppp = Math.sqrt(block.width * block.height) / ppp;
-            if (this.renderer.adaptiveHiding && (stateppp < SDFV.STATE_LOD))
+            if (this.renderer.adaptiveHiding &&
+                (stateppp < SDFVSettings.get<number>('nestedLOD')))
                 return;
 
             if (block instanceof State) {
@@ -207,7 +213,7 @@ export class MemoryVolumeOverlay extends GenericSdfgOverlay {
                         // aren't visible or the node is collapsed, we skip it.
                         if (node.data.node.attributes.is_collapsed ||
                             (this.renderer.adaptiveHiding &&
-                             ppp > SDFV.NODE_LOD))
+                             ppp > SDFVSettings.get<number>('nodeLOD')))
                             return;
 
                         if (node instanceof NestedSDFG &&
@@ -226,7 +232,7 @@ export class MemoryVolumeOverlay extends GenericSdfgOverlay {
                         if (this.renderer.adaptiveHiding && (!edge.intersect(
                             visibleRect.x, visibleRect.y,
                             visibleRect.w, visibleRect.h
-                        ) || ppp > SDFV.EDGE_LOD))
+                        ) || ppp > SDFVSettings.get<number>('edgeLOD')))
                             return;
 
                         this.shadeEdge(edge, ctx);

diff --git a/src/overlays/operational_intensity_overlay.ts b/src/overlays/operational_intensity_overlay.ts
@@ -3,6 +3,7 @@
 import {
     DagreGraph,
     Point2D,
+    SDFVSettings,
     SimpleRect,
     SymbolMap,
     getGraphElementUUID,
@@ -18,7 +19,6 @@ import {
     SDFGElement,
     SDFGNode,
 } from '../renderer/renderer_elements';
-import { SDFV } from '../sdfv';
 import { getTempColorHslString } from '../utils/utils';
 import { GenericSdfgOverlay, OverlayType } from './generic_sdfg_overlay';
 
@@ -265,7 +265,8 @@ export class OperationalIntensityOverlay extends GenericSdfgOverlay {
                 return;
 
             const stateppp = Math.sqrt(state.width * state.height) / ppp;
-            if ((this.renderer.adaptiveHiding && (stateppp < SDFV.STATE_LOD)) ||
+            if ((this.renderer.adaptiveHiding &&
+                (stateppp < SDFVSettings.get<number>('nestedLOD'))) ||
                 state.data.state.attributes.is_collapsed) {
                 this.shade_node(state, ctx);
             } else {
@@ -287,7 +288,7 @@ export class OperationalIntensityOverlay extends GenericSdfgOverlay {
                                 node.width * node.height
                             ) / ppp;
                             if (this.renderer.adaptiveHiding &&
-                                nodeppp < SDFV.STATE_LOD) {
+                                nodeppp < SDFVSettings.get<number>('nodeLOD')) {
                                 this.shade_node(node, ctx);
                             } else if (node.attributes().sdfg &&
                                 node.attributes().sdfg.type !== 'SDFGShell') {

diff --git a/src/overlays/runtime_micro_seconds_overlay.ts b/src/overlays/runtime_micro_seconds_overlay.ts
@@ -1,10 +1,14 @@
 // Copyright 2019-2024 ETH Zurich and the DaCe authors. All rights reserved.
 
 import { Node } from 'dagre';
-import { DagreGraph, SimpleRect, getGraphElementUUID } from '../index';
+import {
+    DagreGraph,
+    SDFVSettings,
+    SimpleRect,
+    getGraphElementUUID,
+} from '../index';
 import { SDFGRenderer } from '../renderer/renderer';
 import { NestedSDFG, SDFGNode } from '../renderer/renderer_elements';
-import { SDFV } from '../sdfv';
 import { getTempColorHslString } from '../utils/utils';
 import {
     GenericSdfgOverlay,
@@ -132,7 +136,8 @@ export class RuntimeMicroSecondsOverlay extends RuntimeReportOverlay {
                 return;
 
             const stateppp = Math.sqrt(state.width * state.height) / ppp;
-            if ((this.renderer.adaptiveHiding && (stateppp < SDFV.STATE_LOD)) ||
+            if ((this.renderer.adaptiveHiding &&
+                (stateppp < SDFVSettings.get<number>('nestedLOD'))) ||
                 state.data.state.attributes.is_collapsed) {
                 this.shade_node(state, ctx);
             } else {
@@ -154,7 +159,8 @@ export class RuntimeMicroSecondsOverlay extends RuntimeReportOverlay {
                                 node.width * node.height
                             ) / ppp;
                             if (this.renderer.adaptiveHiding &&
-                                nodeppp < SDFV.STATE_LOD) {
+                                nodeppp <
+                                SDFVSettings.get<number>('nestedLOD')) {
                                 this.shade_node(node, ctx);
                             } else if (node.attributes().sdfg &&
                                 node.attributes().sdfg.type !== 'SDFGShell') {

diff --git a/src/overlays/simulated_operational_intensity_overlay.ts b/src/overlays/simulated_operational_intensity_overlay.ts
@@ -3,6 +3,7 @@
 import {
     DagreGraph,
     Point2D,
+    SDFVSettings,
     SimpleRect,
     SymbolMap,
     getGraphElementUUID,
@@ -18,7 +19,6 @@ import {
     SDFGElement,
     SDFGNode,
 } from '../renderer/renderer_elements';
-import { SDFV } from '../sdfv';
 import { getTempColorHslString } from '../utils/utils';
 import { GenericSdfgOverlay, OverlayType } from './generic_sdfg_overlay';
 
@@ -226,7 +226,8 @@ export class SimulatedOperationalIntensityOverlay extends GenericSdfgOverlay {
                 return;
 
             const stateppp = Math.sqrt(state.width * state.height) / ppp;
-            if ((this.renderer.adaptiveHiding && (stateppp < SDFV.STATE_LOD)) ||
+            if ((this.renderer.adaptiveHiding &&
+                (stateppp < SDFVSettings.get<number>('nestedLOD'))) ||
                 state.data.state.attributes.is_collapsed) {
                 this.shade_node(state, ctx);
             } else {
@@ -248,7 +249,8 @@ export class SimulatedOperationalIntensityOverlay extends GenericSdfgOverlay {
                                 node.width * node.height
                             ) / ppp;
                             if (this.renderer.adaptiveHiding &&
-                                nodeppp < SDFV.STATE_LOD) {
+                                nodeppp <
+                                SDFVSettings.get<number>('nestedLOD')) {
                                 this.shade_node(node, ctx);
                             } else if (node.attributes().sdfg &&
                                 node.attributes().sdfg.type !== 'SDFGShell') {

diff --git a/src/overlays/static_flops_overlay.ts b/src/overlays/static_flops_overlay.ts
@@ -3,6 +3,7 @@
 import {
     DagreGraph,
     Point2D,
+    SDFVSettings,
     SimpleRect,
     SymbolMap,
     getGraphElementUUID,
@@ -18,7 +19,6 @@ import {
     SDFGElement,
     SDFGNode,
 } from '../renderer/renderer_elements';
-import { SDFV } from '../sdfv';
 import { getTempColorHslString } from '../utils/utils';
 import { GenericSdfgOverlay, OverlayType } from './generic_sdfg_overlay';
 
@@ -220,7 +220,8 @@ export class StaticFlopsOverlay extends GenericSdfgOverlay {
                 return;
 
             const stateppp = Math.sqrt(state.width * state.height) / ppp;
-            if ((this.renderer.adaptiveHiding && (stateppp < SDFV.STATE_LOD)) ||
+            if ((this.renderer.adaptiveHiding &&
+                (stateppp < SDFVSettings.get<number>('nestedLOD'))) ||
                 state.data.state.attributes.is_collapsed) {
                 this.shade_node(state, ctx);
             } else {
@@ -242,7 +243,8 @@ export class StaticFlopsOverlay extends GenericSdfgOverlay {
                                 node.width * node.height
                             ) / ppp;
                             if (this.renderer.adaptiveHiding &&
-                                nodeppp < SDFV.STATE_LOD) {
+                                nodeppp <
+                                SDFVSettings.get<number>('nestedLOD')) {
                                 this.shade_node(node, ctx);
                             } else if (node.attributes().sdfg &&
                                 node.attributes().sdfg.type !== 'SDFGShell') {

diff --git a/src/renderer/renderer.ts b/src/renderer/renderer.ts
@@ -3176,7 +3176,7 @@ export class SDFGRenderer extends EventEmitter {
         // large graphs.
         if (this.canvas_manager) {
             const ppp = this.canvas_manager.points_per_pixel();
-            if (ppp < SDFV.NODE_LOD) {
+            if (ppp < SDFVSettings.get<number>('nodeLOD')) {
                 // Global change boolean. Determines if repaint necessary.
                 let highlighting_changed = false;