From 8df3afcfed19839a963eb0f8c451e7031a7f8af1 Mon Sep 17 00:00:00 2001
From: Leandro Treu <leandro.treu@gmail.com>
Date: Wed, 27 Mar 2024 17:03:08 +0100
Subject: [PATCH] Performance Optimizations and Viewport Feature (#135)

* bind viewport to graph

* bind viewport to graph bounds && comments

* first LOD optimizations

* minimap optimizations

* quickfix simple_draw after invisible check

* added connector LOD

* first mousehandler optimizations (only highlight when close)

* mousehandler highlighting optimization (only redraw on change)

* arrowhead LOD

* fixed connectors rendered when invisible

* fixed edges rendered even if not visible

* added loading animation for relayout tasks

* added missing loading animation for settings change

* fixed mousehandler highlighting and solved state-outline performance issues

* changed state LOD formula

* removed adaptiveHideContent option from user settings menu

* reworked user settings menu, added curved edges setting, added adaptiveStateHiding setting again with a warning

* checked all lod occurrences

* added loading animation to settings menu
---
 index.html                        |   4 +
 package-lock.json                 |   4 +-
 scss/sdfv.scss                    |  14 +
 src/renderer/canvas_manager.ts    |   3 +-
 src/renderer/renderer.ts          | 557 ++++++++++++++++++++++--------
 src/renderer/renderer_elements.ts | 538 +++++++++++++++++++----------
 src/sdfv.ts                       |  46 ++-
 src/utils/sdfv_settings.ts        |  77 ++++-
 8 files changed, 902 insertions(+), 341 deletions(-)

diff --git a/index.html b/index.html
index 42009f02..e93e573a 100644
--- a/index.html
+++ b/index.html
@@ -101,6 +101,10 @@ <h3 id="sidebar-header">
                     </form>
                 </div>
             </div>
+            <div class="col-auto d-flex align-items-center">
+                <div id="task-info-field">
+                </div>
+            </div>
         </div>
     </div>
     <div id="contents"></div>
diff --git a/package-lock.json b/package-lock.json
index c48fcfd5..b88520dd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "@spcl/sdfv",
-    "version": "1.1.5",
+    "version": "1.1.6",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@spcl/sdfv",
-            "version": "1.1.5",
+            "version": "1.1.6",
             "hasInstallScript": true,
             "license": "BSD-3-Clause",
             "dependencies": {
diff --git a/scss/sdfv.scss b/scss/sdfv.scss
index d80595a9..48e71a3a 100644
--- a/scss/sdfv.scss
+++ b/scss/sdfv.scss
@@ -25,6 +25,20 @@ body.sdfv {
   font-family: "Segoe UI", Arial, sans-serif;
 }
 
+// Loading animation
+.loader {
+  border: 4px solid #ffffff;
+  border-top: 7px solid #34db50;
+  border-radius: 50%;
+  width: 25px;
+  height: 25px;
+  animation: spin 1s linear infinite;
+}
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
 .sdfv {
 
   .hidden {
diff --git a/src/renderer/canvas_manager.ts b/src/renderer/canvas_manager.ts
index 93734fe3..5fefced1 100644
--- a/src/renderer/canvas_manager.ts
+++ b/src/renderer/canvas_manager.ts
@@ -790,8 +790,9 @@ export class CanvasManager {
         this.renderer.draw(dt);
         this.contention -= 1;
 
-        if (this.animation_end !== null && now < this.animation_end)
+        if (this.animation_end !== null && now < this.animation_end) {
             this.draw_async();
+        }
     }
 
     public draw_async(): void {
diff --git a/src/renderer/renderer.ts b/src/renderer/renderer.ts
index 858b04c2..d3ff04fa 100644
--- a/src/renderer/renderer.ts
+++ b/src/renderer/renderer.ts
@@ -857,6 +857,8 @@ export class SDFGRenderer extends EventEmitter {
             this.bgcolor = window.getComputedStyle(this.canvas).backgroundColor;
 
         // Create the initial SDFG layout
+        // Loading animation already started in the file_read_complete function in sdfv.ts
+        // to also include the JSON parsing step.
         this.relayout();
 
         // Set mouse event handlers
@@ -975,7 +977,11 @@ export class SDFGRenderer extends EventEmitter {
         this.sdfg = new_sdfg;
 
         if (layout) {
-            this.relayout();
+            this.add_loading_animation();
+            setTimeout(() => {
+                this.relayout();
+            }, 10);
+            
             this.draw_async();
         }
 
@@ -1059,6 +1065,25 @@ export class SDFGRenderer extends EventEmitter {
         }
     }
 
+    // Add loading animation if not already present.
+    // Appends a div of class "loader" to task-info-field
+    // and task-info-field-settings divs.
+    public add_loading_animation() {
+
+        const info_field = document.getElementById('task-info-field');
+        if (info_field && info_field.innerHTML === '') {
+            const loaderDiv = document.createElement("div");
+            loaderDiv.classList.add("loader");
+            info_field.appendChild(loaderDiv);
+        }
+        const info_field_settings = document.getElementById('task-info-field-settings');
+        if (info_field_settings && info_field_settings.innerHTML === '') {
+            const loaderDiv = document.createElement("div");
+            loaderDiv.classList.add("loader");
+            info_field_settings.appendChild(loaderDiv);
+        }
+    }
+
     // Re-layout graph and nested graphs
     public relayout(): DagreSDFG {
         if (!this.ctx)
@@ -1084,6 +1109,16 @@ export class SDFGRenderer extends EventEmitter {
         if (this.in_vscode)
             this.sdfv_instance.outline(this, this.graph);
 
+        // Remove loading animation
+        const info_field = document.getElementById('task-info-field');
+        if (info_field) {
+            info_field.innerHTML = "";
+        }
+        const info_field_settings = document.getElementById('task-info-field-settings');
+        if (info_field_settings) {
+            info_field_settings.innerHTML = "";
+        }
+
         return this.graph;
     }
 
@@ -1279,7 +1314,13 @@ export class SDFGRenderer extends EventEmitter {
         if (collapsed) {
             this.emit('collapse_state_changed', false, true);
 
-            this.relayout();
+            this.add_loading_animation();
+            // Use timeout function with low delay to force the browser 
+            // to reload the dom with the above loader element.
+            setTimeout(() => {
+                this.relayout();
+            }, 10);
+
             this.draw_async();
         }
     }
@@ -1295,7 +1336,13 @@ export class SDFGRenderer extends EventEmitter {
 
         this.emit('collapse_state_changed', true, true);
 
-        this.relayout();
+        this.add_loading_animation();
+        // Use timeout function with low delay to force the browser 
+        // to reload the dom with the above loader element.
+        setTimeout(() => {
+            this.relayout();
+        }, 10);
+
         this.draw_async();
     }
 
@@ -1315,7 +1362,13 @@ export class SDFGRenderer extends EventEmitter {
 
         this.emit('collapse_state_changed', false, true);
 
-        this.relayout();
+        this.add_loading_animation();
+        // Use timeout function with low delay to force the browser 
+        // to reload the dom with the above loader element.
+        setTimeout(() => {
+            this.relayout();
+        }, 10);
+
         this.draw_async();
     }
 
@@ -1330,7 +1383,13 @@ export class SDFGRenderer extends EventEmitter {
 
         this.emit('collapse_state_changed', false, true);
 
-        this.relayout();
+        this.add_loading_animation();
+        // Use timeout function with low delay to force the browser 
+        // to reload the dom with the above loader element.
+        setTimeout(() => {
+            this.relayout();
+        }, 10);
+
         this.draw_async();
     }
 
@@ -1343,7 +1402,13 @@ export class SDFGRenderer extends EventEmitter {
 
         this.emit('element_position_changed', 'reset');
 
-        this.relayout();
+        this.add_loading_animation();
+        // Use timeout function with low delay to force the browser 
+        // to reload the dom with the above loader element.
+        setTimeout(() => {
+            this.relayout();
+        }, 10);
+        
         this.draw_async();
     }
 
@@ -1535,13 +1600,20 @@ export class SDFGRenderer extends EventEmitter {
         let targetHeight = minDimSize;
         const maxPercentage = 0.22;
         if (targetHeight > this.canvas.height * maxPercentage)
-            targetHeight = this.canvas.height * maxPercentage;
+            targetHeight = Math.floor(this.canvas.height * maxPercentage);
         if (targetWidth > this.canvas.width * maxPercentage)
-            targetWidth = this.canvas.width * maxPercentage;
-        this.minimap_canvas.height = targetHeight;
-        this.minimap_canvas.width = targetWidth;
-        this.minimap_canvas.style.width = targetWidth.toString() + 'px';
-        this.minimap_canvas.style.height = targetHeight.toString() + 'px';
+            targetWidth = Math.floor(this.canvas.width * maxPercentage);
+        
+        // Prevent forced style reflow if nothing changed
+        // Can save about 0.5ms of computation
+        if (this.minimap_canvas.height !== targetHeight) {
+            this.minimap_canvas.height = targetHeight;
+            this.minimap_canvas.style.height = targetHeight.toString() + 'px';
+        }
+        if (this.minimap_canvas.width !== targetWidth) {
+            this.minimap_canvas.width = targetWidth;
+            this.minimap_canvas.style.width = targetWidth.toString() + 'px';
+        }
 
         // Set the zoom level and translation so everything is visible.
         const bb = {
@@ -1566,11 +1638,17 @@ export class SDFGRenderer extends EventEmitter {
             if (n && this.minimap_ctx)
                 n.simple_draw(this, this.minimap_ctx, undefined);
         });
-        this.graph.edges().forEach(x => {
-            const e = this.graph?.edge(x);
-            if (e && this.minimap_ctx)
-                e.draw(this, this.minimap_ctx, undefined);
-        });
+
+        // Don't draw Interstate edges in the minimap:
+        // Small optimization thats can save ~1ms in computation
+        // The performance problem comes from the edges and their 
+        // labels which are also drawn.
+
+        // this.graph.edges().forEach(x => {
+        //     const e = this.graph?.edge(x);
+        //     if (e && this.minimap_ctx)
+        //         e.draw(this, this.minimap_ctx, undefined);
+        // });
 
         // Draw the viewport.
         if (this.visible_rect) {
@@ -2266,6 +2344,62 @@ export class SDFGRenderer extends EventEmitter {
         return true;
     }
 
+    // Checks if pan mouse movement is in the bounds of the graph.
+    // Takes the current visible_rect as input and computes if its center is 
+    // within the graph bounds. The pan mouse movement (movX, movY) is 
+    // corrected accordingly to have a smooth view pan blocking.
+    // Returns: corrected movement x/y coordinates to input into this.canvas_manager?.translate()
+    public pan_movement_in_bounds(visible_rect: SimpleRect, movX: number, movY: number) {
+
+        const visible_rectCenter = {
+            x: (visible_rect.x + (visible_rect.w / 2)),
+            y: (visible_rect.y + (visible_rect.h / 2))
+        }
+
+        const graphLimits = {
+            minX: 0,
+            minY: 0,
+            maxX: (this.graph as any).width,
+            maxY: (this.graph as any).height,
+        };
+
+        // Compute where the visible_rectCenter is out of bounds:
+        // outofboundsX/Y === 0 means not out of bounds
+        let outofboundsX = 0;
+        let outofboundsY = 0;
+
+        if (visible_rectCenter.x < graphLimits.minX) {
+            outofboundsX = -1;
+        }
+        else if (visible_rectCenter.x > graphLimits.maxX) {
+            outofboundsX = 1;
+        }
+        if (visible_rectCenter.y < graphLimits.minY) {
+            outofboundsY = -1;
+        }
+        else if (visible_rectCenter.y > graphLimits.maxY) {
+            outofboundsY = 1;
+        }
+
+        // Take uncorrected mouse event movement as default
+        let correctedMovement = {
+            x: movX,
+            y: movY
+        }
+
+        // Correct mouse movement if necessary
+        if ((outofboundsX === -1 && correctedMovement.x > 0) || 
+            (outofboundsX === 1 && correctedMovement.x < 0)) {
+            correctedMovement.x = 0;
+        }
+        if ((outofboundsY === -1 && correctedMovement.y > 0) || 
+            (outofboundsY === 1 && correctedMovement.y < 0)) {
+            correctedMovement.y = 0;
+        }
+        
+        return correctedMovement;
+    }
+
     // TODO(later): Improve event system using event types (instanceof) instead
     // of passing string eventtypes.
     /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
@@ -2395,20 +2529,41 @@ export class SDFGRenderer extends EventEmitter {
                     // Mark for redraw
                     dirty = true;
                 } else {
-                    this.canvas_manager?.translate(
-                        event.movementX, event.movementY
-                    );
+                    
+                    // Mouse move in panning mode
+                    if (this.visible_rect) {
+
+                        // Check if mouse panning is in bounds (near graph)
+                        // and restrict/correct it 
+                        const correctedMovement = this.pan_movement_in_bounds(
+                            this.visible_rect, event.movementX, event.movementY
+                        );
 
-                    // Mark for redraw
-                    dirty = true;
+                        this.canvas_manager?.translate(
+                            correctedMovement.x, correctedMovement.y
+                        );
+
+                        // Mark for redraw
+                        dirty = true;
+                    }
+                    
                 }
             } else if (this.drag_start && event.buttons & 4) {
                 // Pan the view with the middle mouse button
                 this.dragging = true;
-                this.canvas_manager?.translate(
-                    event.movementX, event.movementY
-                );
-                dirty = true;
+                if (this.visible_rect) {
+
+                    // Check if mouse panning is in bounds (near graph)
+                    // and restrict/correct it 
+                    const correctedMovement = this.pan_movement_in_bounds(
+                        this.visible_rect, event.movementX, event.movementY
+                    );
+
+                    this.canvas_manager?.translate(
+                        correctedMovement.x, correctedMovement.y
+                    );
+                    dirty = true;
+                }
                 element_focus_changed = true;
             } else {
                 this.drag_start = null;
@@ -2421,12 +2576,21 @@ export class SDFGRenderer extends EventEmitter {
                 // Different number of touches, ignore and reset drag_start
                 this.drag_start = event;
             } else if (event.touches.length === 1) { // Move/drag
-                this.canvas_manager?.translate(
-                    event.touches[0].clientX -
-                        this.drag_start.touches[0].clientX,
-                    event.touches[0].clientY -
-                        this.drag_start.touches[0].clientY
-                );
+                if (this.visible_rect) {
+
+                    const movX = event.touches[0].clientX - this.drag_start.touches[0].clientX;
+                    const movY = event.touches[0].clientY - this.drag_start.touches[0].clientY;
+
+                    // Check if panning is in bounds (near graph)
+                    // and restrict/correct it 
+                    const correctedMovement = this.pan_movement_in_bounds(
+                        this.visible_rect, movX, movY
+                    );
+
+                    this.canvas_manager?.translate(
+                        correctedMovement.x, correctedMovement.y
+                    );
+                }
                 this.drag_start = event;
 
                 // Mark for redraw
@@ -2451,15 +2615,28 @@ export class SDFGRenderer extends EventEmitter {
                 );
                 const newCenter = [(x1 + x2) / 2.0, (y1 + y2) / 2.0];
 
-                // First, translate according to movement of center point
-                this.canvas_manager?.translate(
-                    newCenter[0] - oldCenter[0], newCenter[1] - oldCenter[1]
-                );
-                // Then scale
-                this.canvas_manager?.scale(
-                    currentDistance / initialDistance, newCenter[0],
-                    newCenter[1]
-                );
+                if (this.visible_rect) {
+
+                    // First, translate according to movement of center point
+                    const movX = newCenter[0] - oldCenter[0];
+                    const movY = newCenter[1] - oldCenter[1];
+
+                    // Check if movement is in bounds (near graph)
+                    // and restrict/correct it 
+                    const correctedMovement = this.pan_movement_in_bounds(
+                        this.visible_rect, movX, movY
+                    );
+
+                    this.canvas_manager?.translate(
+                        correctedMovement.x, correctedMovement.y
+                    );
+
+                    // Then scale
+                    this.canvas_manager?.scale(
+                        currentDistance / initialDistance, newCenter[0],
+                        newCenter[1]
+                    );
+                }
 
                 this.drag_start = event;
 
@@ -2473,9 +2650,22 @@ export class SDFGRenderer extends EventEmitter {
                 // If vertical scroll navigation is turned on, use this to
                 // move the viewport up and down. If the control key is held
                 // down while scrolling, treat it as a typical zoom operation.
-                this.canvas_manager?.translate(0, -event.deltaY);
-                dirty = true;
-                element_focus_changed = true;
+                if (this.visible_rect) {
+                    const movX = 0;
+                    const movY = -event.deltaY;
+
+                    // Check if scroll is in bounds (near graph)
+                    // and restrict/correct it 
+                    const correctedMovement = this.pan_movement_in_bounds(
+                        this.visible_rect, movX, movY
+                    );
+
+                    this.canvas_manager?.translate(
+                        correctedMovement.x, correctedMovement.y
+                    );
+                    dirty = true;
+                    element_focus_changed = true;
+                }
             } else {
                 // Get physical x,y coordinates (rather than canvas coordinates)
                 const br = this.canvas?.getBoundingClientRect();
@@ -2545,111 +2735,199 @@ export class SDFGRenderer extends EventEmitter {
 
         this.tooltip = null;
 
-        // De-highlight all elements.
-        this.doForVisibleElements(
-            (type: any, e: any, obj: any) => {
-                obj.hovered = false;
-                obj.highlighted = false;
-                if (obj instanceof Tasklet) {
-                    for (const t of obj.inputTokens)
-                        t.highlighted = false;
-                    for (const t of obj.outputTokens)
-                        t.highlighted = false;
-                }
-            }
-        );
-        // Mark hovered and highlighted elements.
-        this.doForVisibleElements(
-            (type: any, e: any, obj: any) => {
-                const intersected = obj.intersect(
-                    this.mousepos!.x, this.mousepos!.y, 0, 0
-                );
+        // Only do highlighting re-computation if view is close enough to actually see the 
+        // highlights. Done by points-per-pixel metric using SDFV.NODE_LOD as the threshold.
+        // Hence, the highlights only update/become visible if there are nodes visible to hover over.
+        // This creatly reduces CPU utilization when moving/hovering the mouse over large graphs.
+        if (this.canvas_manager) {
+            const ppp = this.canvas_manager.points_per_pixel();
+            if (ppp < SDFV.NODE_LOD) {
+
+                // Global change boolean. Determines if repaint necessary.
+                let highlighting_changed = false;
+
+                // Mark hovered and highlighted elements.
+                this.doForVisibleElements(
+                    (type: any, e: any, obj: any) => {
+                        const intersected = obj.intersect(
+                            this.mousepos!.x, this.mousepos!.y, 0, 0
+                        );
 
-                // Highlight all edges of the memlet tree
-                if (intersected && obj instanceof Edge &&
-                    obj.parent_id !== null) {
-                    const tree = this.get_nested_memlet_tree(obj);
-                    tree.forEach(te => {
-                        if (te !== obj && te !== undefined) {
-                            te.highlighted = true;
+                        // Local change boolean, for each visible element checked.
+                        // Prevents recursion if nothing changed.
+                        let hover_changed = false;
+        
+                        // Change hover status
+                        if (intersected && !obj.hovered) {
+                            obj.hovered = true;
+                            highlighting_changed = true;
+                            hover_changed = true;
                         }
-                    });
-                }
-
-                // Highlight all access nodes with the same name in the same
-                // nested sdfg
-                if (intersected && obj instanceof AccessNode) {
-                    traverseSDFGScopes(
-                        this.cfg_list[obj.sdfg.cfg_list_id],
-                        (node: any) => {
-                            // If node is a state, then visit sub-scope
-                            if (node instanceof State)
-                                return true;
-                            if (node instanceof AccessNode &&
-                                node.data.node.label === obj.data.node.label)
-                                node.highlighted = true;
-                            // No need to visit sub-scope
-                            return false;
+                        else if (!intersected && obj.hovered) {
+                            obj.hovered = false;
+                            highlighting_changed = true;
+                            hover_changed = true;
                         }
-                    );
-                }
 
-                if (intersected && obj instanceof Connector) {
-                    // Highlight all access nodes with the same name as the
-                    // hovered connector in the nested sdfg
-                    if (e.graph) {
-                        const nested_graph =
-                            e.graph.node(obj.parent_id).data.graph;
-                        if (nested_graph) {
-                            traverseSDFGScopes(nested_graph, (node: any) => {
-                                // If node is a state, then visit sub-scope
-                                if (node instanceof State) {
-                                    return true;
+                        // Highlight all edges of the memlet tree
+                        if (obj instanceof Edge && obj.parent_id !== null) {
+                            if (obj.hovered && hover_changed) {
+                                const tree = this.get_nested_memlet_tree(obj);
+                                tree.forEach(te => {
+                                    if (te !== obj && te !== undefined) {
+                                        te.highlighted = true;
+                                    }
+                                });
+                            }
+                            else if (!obj.hovered && hover_changed) {
+                                const tree = this.get_nested_memlet_tree(obj);
+                                tree.forEach(te => {
+                                    if (te !== obj && te !== undefined) {
+                                        te.highlighted = false;
+                                    }
+                                });
+                            }
+                        }
+        
+                        // Highlight all access nodes with the same name in the same
+                        // nested sdfg
+                        if (obj instanceof AccessNode) {
+                            if (obj.hovered && hover_changed) {
+                                traverseSDFGScopes(
+                                    this.cfg_list[obj.sdfg.cfg_list_id],
+                                    (node: any) => {
+                                        // If node is a state, then visit sub-scope
+                                        if (node instanceof State)
+                                            return true;
+                                        if (node instanceof AccessNode &&
+                                            node.data.node.label === obj.data.node.label) {
+                                            node.highlighted = true;
+                                        }
+                                        // No need to visit sub-scope
+                                        return false;
+                                    }
+                                );
+                            }
+                            else if (!obj.hovered && hover_changed) {
+                                traverseSDFGScopes(
+                                    this.cfg_list[obj.sdfg.cfg_list_id],
+                                    (node: any) => {
+                                        // If node is a state, then visit sub-scope
+                                        if (node instanceof State)
+                                            return true;
+                                        if (node instanceof AccessNode &&
+                                            node.data.node.label === obj.data.node.label) {
+                                            node.highlighted = false;
+                                        }
+                                        // No need to visit sub-scope
+                                        return false;
+                                    }
+                                );
+                            }
+                        }
+        
+                        if (obj instanceof Connector) {
+                            // Highlight all access nodes with the same name as the
+                            // hovered connector in the nested sdfg
+                            if (obj.hovered && hover_changed) {
+                                if (e.graph) {
+                                    const nested_graph =
+                                        e.graph.node(obj.parent_id).data.graph;
+                                    if (nested_graph) {
+                                        traverseSDFGScopes(nested_graph, (node: any) => {
+                                            // If node is a state, then visit sub-scope
+                                            if (node instanceof State) {
+                                                return true;
+                                            }
+                                            if (node instanceof AccessNode &&
+                                                node.data.node.label === obj.label()) {
+                                                node.highlighted = true;
+                                            }
+                                            // No need to visit sub-scope
+                                            return false;
+                                        });
+                                    }
                                 }
-                                if (node instanceof AccessNode &&
-                                    node.data.node.label === obj.label()) {
-                                    node.highlighted = true;
+                            }
+                            else if (!obj.hovered && hover_changed) {
+                                if (e.graph) {
+                                    const nested_graph =
+                                        e.graph.node(obj.parent_id).data.graph;
+                                    if (nested_graph) {
+                                        traverseSDFGScopes(nested_graph, (node: any) => {
+                                            // If node is a state, then visit sub-scope
+                                            if (node instanceof State) {
+                                                return true;
+                                            }
+                                            if (node instanceof AccessNode &&
+                                                node.data.node.label === obj.label()) {
+                                                node.highlighted = false;
+                                            }
+                                            // No need to visit sub-scope
+                                            return false;
+                                        });
+                                    }
                                 }
-                                // No need to visit sub-scope
-                                return false;
-                            });
-                        }
-                    }
-
-                    // Similarly, highlight any identifiers in a connector's
-                    // tasklet, if applicable.
-                    if (obj.linkedElem && obj.linkedElem instanceof Tasklet) {
-                        if (obj.connectorType === 'in') {
-                            for (const token of obj.linkedElem.inputTokens) {
-                                if (token.token === obj.data.name)
-                                    token.highlighted = true;
                             }
-                        } else {
-                            for (const token of obj.linkedElem.outputTokens) {
-                                if (token.token === obj.data.name)
-                                    token.highlighted = true;
+        
+                            // Similarly, highlight any identifiers in a connector's
+                            // tasklet, if applicable.
+                            if (obj.hovered && hover_changed) {
+                                if (obj.linkedElem && obj.linkedElem instanceof Tasklet) {
+                                    if (obj.connectorType === 'in') {
+                                        for (const token of obj.linkedElem.inputTokens) {
+                                            if (token.token === obj.data.name) {
+                                                token.highlighted = true;
+                                            }
+                                        }
+                                    } else {
+                                        for (const token of obj.linkedElem.outputTokens) {
+                                            if (token.token === obj.data.name) {
+                                                token.highlighted = true;
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                            else if (!obj.hovered && hover_changed) {
+                                if (obj.linkedElem && obj.linkedElem instanceof Tasklet) {
+                                    if (obj.connectorType === 'in') {
+                                        for (const token of obj.linkedElem.inputTokens) {
+                                            if (token.token === obj.data.name) {
+                                                token.highlighted = false;
+                                            }
+                                        }
+                                    } else {
+                                        for (const token of obj.linkedElem.outputTokens) {
+                                            if (token.token === obj.data.name) {
+                                                token.highlighted = false;
+                                            }
+                                        }
+                                    }
+                                }
                             }
                         }
                     }
+                );
+
+                if (highlighting_changed) {
+                    dirty = true;
                 }
 
-                if (intersected)
-                    obj.hovered = true;
             }
-        );
+        }
 
         // If adding an edge, mark/highlight the first/from element, if it has
         // already been selected.
         if (this.mouse_mode === 'add' && this.add_type === 'Edge') {
-            if (this.add_edge_start)
+            if (this.add_edge_start) {
                 this.add_edge_start.highlighted = true;
-            if (this.add_edge_start_conn)
+                dirty = true;
+            }
+            if (this.add_edge_start_conn) {
                 this.add_edge_start_conn.highlighted = true;
-        }
-
-        if (evtype === 'mousemove') {
-            // TODO: Draw only if elements have changed
-            dirty = true;
+                dirty = true;
+            }
         }
 
         if (evtype === 'dblclick') {
@@ -2679,7 +2957,10 @@ export class SDFGRenderer extends EventEmitter {
                 this.emit('collapse_state_changed');
 
                 // Re-layout SDFG
-                this.relayout();
+                this.add_loading_animation();
+                setTimeout(() => {
+                    this.relayout();
+                }, 10);
                 dirty = true;
                 element_focus_changed = true;
             }
@@ -2937,9 +3218,13 @@ export class SDFGRenderer extends EventEmitter {
                     }
                 }
 
-                if (relayout_necessary)
-                    this.relayout();
-
+                if (relayout_necessary) {
+                    this.add_loading_animation();
+                    setTimeout(() => {
+                        this.relayout();
+                    }, 10);
+                }
+                
                 this.draw_async();
 
                 if (element_moved) {
@@ -2976,8 +3261,10 @@ export class SDFGRenderer extends EventEmitter {
             dirty = dirty || ol_manager_dirty;
         }
 
-        if (dirty)
+        if (dirty) {
+
             this.draw_async();
+        }
 
         if (element_focus_changed || selection_changed)
             this.emit('selection_changed', multi_selection_changed);
diff --git a/src/renderer/renderer_elements.ts b/src/renderer/renderer_elements.ts
index 01387404..09907a60 100644
--- a/src/renderer/renderer_elements.ts
+++ b/src/renderer/renderer_elements.ts
@@ -284,7 +284,13 @@ export class ControlFlowRegion extends ControlFlowBlock {
             renderer, '--control-flow-region-foreground-color'
         );
         ctx.fillRect(clamped.x, clamped.y, clamped.w, clamped.h);
-        ctx.strokeRect(clamped.x, clamped.y, clamped.w, clamped.h);
+
+        // Only draw line if close enough.
+        const ppp = renderer.get_canvas_manager()?.points_per_pixel();
+        if (!(ctx as any).lod || (ppp && ppp < SDFV.NODE_LOD)) {            
+            ctx.strokeRect(clamped.x, clamped.y, clamped.w, clamped.h);
+        }
+
         ctx.fillStyle = this.getCssProperty(
             renderer, '--control-flow-region-foreground-color'
         );
@@ -292,19 +298,25 @@ export class ControlFlowRegion extends ControlFlowBlock {
         if (visibleRect && visibleRect.x <= topleft.x &&
             visibleRect.y <= topleft.y + SDFV.LINEHEIGHT &&
             SDFVSettings.showStateNames)
-            ctx.fillText(
-                this.label(), topleft.x + LoopRegion.META_LABEL_MARGIN,
-                topleft.y + SDFV.LINEHEIGHT
-            );
+
+            if (!too_far_away_for_text(renderer, ctx)) {
+
+                ctx.fillText(
+                    this.label(), topleft.x + LoopRegion.META_LABEL_MARGIN,
+                    topleft.y + SDFV.LINEHEIGHT
+                );
+            }
 
         // If this state is selected or hovered
-        if ((this.selected || this.highlighted || this.hovered) &&
-            (clamped.x === topleft.x ||
-                clamped.y === topleft.y ||
-                clamped.x2 === topleft.x + this.width ||
-                clamped.y2 === topleft.y + this.height)) {
-            ctx.strokeStyle = this.strokeStyle(renderer);
-            ctx.strokeRect(clamped.x, clamped.y, clamped.w, clamped.h);
+        if (!(ctx as any).lod || (ppp && ppp < SDFV.NODE_LOD)) {
+            if ((this.selected || this.highlighted || this.hovered) &&
+                (clamped.x === topleft.x ||
+                    clamped.y === topleft.y ||
+                    clamped.x2 === topleft.x + this.width ||
+                    clamped.y2 === topleft.y + this.height)) {
+                ctx.strokeStyle = this.strokeStyle(renderer);
+                ctx.strokeRect(clamped.x, clamped.y, clamped.w, clamped.h);
+            }
         }
 
         // If collapsed, draw a "+" sign in the middle
@@ -427,17 +439,24 @@ export class State extends BasicBlock {
 
         if (visible_rect && visible_rect.x <= topleft.x &&
             visible_rect.y <= topleft.y + SDFV.LINEHEIGHT &&
-            SDFVSettings.showStateNames)
-            ctx.fillText(this.label(), topleft.x, topleft.y + SDFV.LINEHEIGHT);
+            SDFVSettings.showStateNames) {
+
+            if (!too_far_away_for_text(renderer, ctx)) {
+                ctx.fillText(this.label(), topleft.x, topleft.y + SDFV.LINEHEIGHT);
+            } 
+        }
 
         // If this state is selected or hovered
-        if ((this.selected || this.highlighted || this.hovered) &&
-            (clamped.x === topleft.x ||
-                clamped.y === topleft.y ||
-                clamped.x2 === topleft.x + this.width ||
-                clamped.y2 === topleft.y + this.height)) {
-            ctx.strokeStyle = this.strokeStyle(renderer);
-            ctx.strokeRect(clamped.x, clamped.y, clamped.w, clamped.h);
+        const ppp = renderer.get_canvas_manager()?.points_per_pixel();
+        if (!(ctx as any).lod || (ppp && ppp < SDFV.NODE_LOD)) {
+            if ((this.selected || this.highlighted || this.hovered) &&
+                (clamped.x === topleft.x ||
+                    clamped.y === topleft.y ||
+                    clamped.x2 === topleft.x + this.width ||
+                    clamped.y2 === topleft.y + this.height)) {
+                ctx.strokeStyle = this.strokeStyle(renderer);
+                ctx.strokeRect(clamped.x, clamped.y, clamped.w, clamped.h);
+            }
         }
 
         // If collapsed, draw a "+" sign in the middle
@@ -599,7 +618,13 @@ export class LoopRegion extends ControlFlowRegion {
             renderer, '--loop-foreground-color'
         );
         ctx.fillRect(clamped.x, clamped.y, clamped.w, clamped.h);
-        ctx.strokeRect(clamped.x, clamped.y, clamped.w, clamped.h);
+
+        // Only draw line if close enough.
+        const ppp = renderer.get_canvas_manager()?.points_per_pixel();
+        if (!(ctx as any).lod || (ppp && ppp < SDFV.NODE_LOD)) {
+            ctx.strokeRect(clamped.x, clamped.y, clamped.w, clamped.h);
+        }
+
         ctx.fillStyle = this.getCssProperty(
             renderer, '--loop-foreground-color'
         );
@@ -617,22 +642,25 @@ export class LoopRegion extends ControlFlowRegion {
             ctx.lineTo(topleft.x + this.width, initBottomLineY);
             ctx.stroke();
 
-            ctx.font = LoopRegion.LOOP_STATEMENT_FONT;
-            const initStatement = this.attributes().init_statement?.string_data;
-            const initTextY = (
-                (topleft.y + (LoopRegion.INIT_SPACING / 2)) +
-                (SDFV.LINEHEIGHT / 2)
-            );
-            if (initStatement) {
-                const initTextMetrics = ctx.measureText(initStatement);
-                const initTextX = this.x - (initTextMetrics.width / 2);
-                ctx.fillText(initStatement, initTextX, initTextY);
-            }
+            if (!too_far_away_for_text(renderer, ctx)) {
 
-            ctx.font = oldFont;
-            ctx.fillText(
-                'init', topleft.x + LoopRegion.META_LABEL_MARGIN, initTextY
-            );
+                ctx.font = LoopRegion.LOOP_STATEMENT_FONT;
+                const initStatement = this.attributes().init_statement?.string_data;
+                const initTextY = (
+                    (topleft.y + (LoopRegion.INIT_SPACING / 2)) +
+                    (SDFV.LINEHEIGHT / 2)
+                );
+                if (initStatement) {
+                    const initTextMetrics = ctx.measureText(initStatement);
+                    const initTextX = this.x - (initTextMetrics.width / 2);
+                    ctx.fillText(initStatement, initTextX, initTextY);
+                }
+    
+                ctx.font = oldFont;
+                ctx.fillText(
+                    'init', topleft.x + LoopRegion.META_LABEL_MARGIN, initTextY
+                );
+            }
         }
 
         // Draw the condition (either on top if the loop is a regularly
@@ -654,20 +682,25 @@ export class LoopRegion extends ControlFlowRegion {
         ctx.moveTo(topleft.x, condLineY);
         ctx.lineTo(topleft.x + this.width, condLineY);
         ctx.stroke();
-        ctx.font = LoopRegion.LOOP_STATEMENT_FONT;
-        const condStatement = this.attributes().loop_condition?.string_data;
-        const condTextY = (
-            (condTopY + (LoopRegion.CONDITION_SPACING / 2)) +
-            (SDFV.LINEHEIGHT / 2)
-        );
-        if (condStatement) {
-            const condTextMetrics = ctx.measureText(condStatement);
-            const condTextX = this.x - (condTextMetrics.width / 2);
-            ctx.fillText(condStatement, condTextX, condTextY);
-            ctx.font = oldFont;
-            ctx.fillText(
-                'while', topleft.x + LoopRegion.META_LABEL_MARGIN, condTextY
+
+
+        if (!too_far_away_for_text(renderer, ctx)) {
+
+            ctx.font = LoopRegion.LOOP_STATEMENT_FONT;
+            const condStatement = this.attributes().loop_condition?.string_data;
+            const condTextY = (
+                (condTopY + (LoopRegion.CONDITION_SPACING / 2)) +
+                (SDFV.LINEHEIGHT / 2)
             );
+            if (condStatement) {
+                const condTextMetrics = ctx.measureText(condStatement);
+                const condTextX = this.x - (condTextMetrics.width / 2);
+                ctx.fillText(condStatement, condTextX, condTextY);
+                ctx.font = oldFont;
+                ctx.fillText(
+                    'while', topleft.x + LoopRegion.META_LABEL_MARGIN, condTextY
+                );
+            }
         }
 
         // Draw the update statement if there is one.
@@ -681,21 +714,25 @@ export class LoopRegion extends ControlFlowRegion {
             ctx.lineTo(topleft.x + this.width, updateTopY);
             ctx.stroke();
 
-            ctx.font = LoopRegion.LOOP_STATEMENT_FONT;
-            const updateStatement =
-                this.attributes().update_statement.string_data;
-            const updateTextY = (
-                (updateTopY + (LoopRegion.UPDATE_SPACING / 2)) +
-                (SDFV.LINEHEIGHT / 2)
-            );
-            const updateTextMetrics = ctx.measureText(updateStatement);
-            const updateTextX = this.x - (updateTextMetrics.width / 2);
-            ctx.fillText(updateStatement, updateTextX, updateTextY);
-            ctx.font = oldFont;
-            ctx.fillText(
-                'update', topleft.x + LoopRegion.META_LABEL_MARGIN,
-                updateTextY
-            );
+
+            if (!too_far_away_for_text(renderer, ctx)) {
+
+                ctx.font = LoopRegion.LOOP_STATEMENT_FONT;
+                const updateStatement =
+                    this.attributes().update_statement.string_data;
+                const updateTextY = (
+                    (updateTopY + (LoopRegion.UPDATE_SPACING / 2)) +
+                    (SDFV.LINEHEIGHT / 2)
+                );
+                const updateTextMetrics = ctx.measureText(updateStatement);
+                const updateTextX = this.x - (updateTextMetrics.width / 2);
+                ctx.fillText(updateStatement, updateTextX, updateTextY);
+                ctx.font = oldFont;
+                ctx.fillText(
+                    'update', topleft.x + LoopRegion.META_LABEL_MARGIN,
+                    updateTextY
+                );
+            }
         }
         remainingHeight -= topSpacing;
 
@@ -704,19 +741,25 @@ export class LoopRegion extends ControlFlowRegion {
         if (visibleRect && visibleRect.x <= topleft.x &&
             visibleRect.y <= topleft.y + SDFV.LINEHEIGHT &&
             SDFVSettings.showStateNames)
-            ctx.fillText(
-                this.label(), topleft.x + LoopRegion.META_LABEL_MARGIN,
-                topleft.y + topSpacing + SDFV.LINEHEIGHT
-            );
+
+            if (!too_far_away_for_text(renderer, ctx)) {
+
+                ctx.fillText(
+                    this.label(), topleft.x + LoopRegion.META_LABEL_MARGIN,
+                    topleft.y + topSpacing + SDFV.LINEHEIGHT
+                );
+            }
 
         // If this state is selected or hovered
-        if ((this.selected || this.highlighted || this.hovered) &&
-            (clamped.x === topleft.x ||
-                clamped.y === topleft.y ||
-                clamped.x2 === topleft.x + this.width ||
-                clamped.y2 === topleft.y + this.height)) {
-            ctx.strokeStyle = this.strokeStyle(renderer);
-            ctx.strokeRect(clamped.x, clamped.y, clamped.w, clamped.h);
+        if (!(ctx as any).lod || (ppp && ppp < SDFV.NODE_LOD)) {
+            if ((this.selected || this.highlighted || this.hovered) &&
+                (clamped.x === topleft.x ||
+                    clamped.y === topleft.y ||
+                    clamped.x2 === topleft.x + this.width ||
+                    clamped.y2 === topleft.y + this.height)) {
+                ctx.strokeStyle = this.strokeStyle(renderer);
+                ctx.strokeRect(clamped.x, clamped.y, clamped.w, clamped.h);
+            }
         }
 
         // If collapsed, draw a "+" sign in the middle
@@ -784,25 +827,34 @@ export class SDFGNode extends SDFGElement {
 
         ctx.fillStyle = this.getCssProperty(renderer, bgstyle);
         ctx.fillRect(clamped.x, clamped.y, clamped.w, clamped.h);
-        if (clamped.x === topleft.x &&
-            clamped.y === topleft.y &&
-            clamped.x2 === topleft.x + this.width &&
-            clamped.y2 === topleft.y + this.height) {
-            ctx.strokeStyle = this.strokeStyle(renderer);
-            ctx.strokeRect(clamped.x, clamped.y, clamped.w, clamped.h);
+
+        // Only draw line if close enough to see it.
+        const ppp = renderer.get_canvas_manager()?.points_per_pixel();
+        if (!(ctx as any).lod || (ppp && ppp < SDFV.NODE_LOD)) {
+            if (clamped.x === topleft.x &&
+                clamped.y === topleft.y &&
+                clamped.x2 === topleft.x + this.width &&
+                clamped.y2 === topleft.y + this.height) {
+                ctx.strokeStyle = this.strokeStyle(renderer);
+                ctx.strokeRect(clamped.x, clamped.y, clamped.w, clamped.h);
+            }
         }
         if (this.label()) {
-            ctx.fillStyle = this.getCssProperty(renderer, fgstyle);
-            const textw = ctx.measureText(this.label()).width;
-            if (!visible_rect)
-                ctx.fillText(
-                    this.label(), this.x - textw / 2, this.y + SDFV.LINEHEIGHT / 4
-                );
-            else if (visible_rect && visible_rect.x <= topleft.x &&
-                visible_rect.y <= topleft.y + SDFV.LINEHEIGHT)
-                ctx.fillText(
-                    this.label(), this.x - textw / 2, this.y + SDFV.LINEHEIGHT / 4
-                );
+
+            if (!too_far_away_for_text(renderer, ctx)) {
+
+                ctx.fillStyle = this.getCssProperty(renderer, fgstyle);
+                const textw = ctx.measureText(this.label()).width;
+                if (!visible_rect)
+                    ctx.fillText(
+                        this.label(), this.x - textw / 2, this.y + SDFV.LINEHEIGHT / 4
+                    );
+                else if (visible_rect && visible_rect.x <= topleft.x &&
+                    visible_rect.y <= topleft.y + SDFV.LINEHEIGHT)
+                    ctx.fillText(
+                        this.label(), this.x - textw / 2, this.y + SDFV.LINEHEIGHT / 4
+                    );
+            }
         }
     }
 
@@ -987,8 +1039,9 @@ export abstract class Edge extends SDFGElement {
         x: number, y: number, w: number = 0, h: number = 0
     ): boolean {
         // First, check bounding box
-        if (!super.intersect(x, y, w, h))
+        if (!super.intersect(x, y, w, h)) {
             return false;
+        }
 
         // Then (if point), check distance from line
         if (w === 0 || h === 0) {
@@ -1001,7 +1054,33 @@ export abstract class Edge extends SDFGElement {
             }
             return false;
         }
-        return true;
+        else { 
+            // It is a rectangle.
+            // Check if any of the rectangles, spanned by pairs of points of the line,
+            // intersect the input rectangle.
+            // This is needed for long Interstate edges that have a huge bounding box and
+            // intersect almost always with the viewport even if they are not visible.
+            // This is only an approximation to detect if a line is in the viewport and
+            // could be made more accurate at the cost of more computation.
+            for (let i = 0; i < this.points.length - 1; i++) {
+                const linepoint_0 = this.points[i];
+                const linepoint_1 = this.points[i + 1];
+                // Rectangle spanned by the two line points
+                const r = {
+                    x: Math.min(linepoint_0.x, linepoint_1.x),
+                    y: Math.min(linepoint_0.y, linepoint_1.y),
+                    w: Math.abs(linepoint_1.x - linepoint_0.x),
+                    h: Math.abs(linepoint_1.y - linepoint_0.y)
+                }
+
+                // Check if the two rectangles intersect
+                if (r.x + r.w >= x && r.x <= x+w &&
+                    r.y + r.h >= y && r.y <= y+h) {
+                        return true;
+                }
+            }
+            return false;
+        }
     }
 
 }
@@ -1015,16 +1094,26 @@ export class Memlet extends Edge {
             // Straight line can be drawn
             ctx.lineTo(this.points[1].x, this.points[1].y);
         } else {
+
             let i;
-            for (i = 1; i < this.points.length - 2; i++) {
-                const xm = (this.points[i].x + this.points[i + 1].x) / 2.0;
-                const ym = (this.points[i].y + this.points[i + 1].y) / 2.0;
-                ctx.quadraticCurveTo(
-                    this.points[i].x, this.points[i].y, xm, ym
-                );
+            if (SDFVSettings.curvedEdges) {
+                for (i = 1; i < this.points.length - 2; i++) {
+                    const xm = (this.points[i].x + this.points[i + 1].x) / 2.0;
+                    const ym = (this.points[i].y + this.points[i + 1].y) / 2.0;
+                    ctx.quadraticCurveTo(
+                        this.points[i].x, this.points[i].y, xm, ym
+                    );
+                }
+                ctx.quadraticCurveTo(this.points[i].x, this.points[i].y,
+                    this.points[i + 1].x, this.points[i + 1].y);
             }
-            ctx.quadraticCurveTo(this.points[i].x, this.points[i].y,
-                this.points[i + 1].x, this.points[i + 1].y);
+            else {
+                // Straight lines
+                for (i = 1; i < this.points.length; i++) {
+                    ctx.lineTo(this.points[i].x, this.points[i].y);
+                }
+            }
+            
         }
     }
 
@@ -1150,19 +1239,29 @@ export class InterstateEdge extends Edge {
     public create_arrow_line(ctx: CanvasRenderingContext2D): void {
         // Draw intersate edges with bezier curves through the arrow points.
         ctx.moveTo(this.points[0].x, this.points[0].y);
-        let lastX = this.points[0].x;
-        let lastY = this.points[0].y;
         let i;
-        for (i = 1; i < this.points.length; i++) {
-            const intermediateY = (lastY + this.points[i].y) / 2.0;
-            ctx.bezierCurveTo(
-                lastX, intermediateY,
-                this.points[i].x, intermediateY,
-                this.points[i].x, this.points[i].y
-            );
-            lastX = this.points[i].x;
-            lastY = this.points[i].y;
+        
+        if (SDFVSettings.curvedEdges) {
+            let lastX = this.points[0].x;
+            let lastY = this.points[0].y;
+            for (i = 1; i < this.points.length; i++) {
+                const intermediateY = (lastY + this.points[i].y) / 2.0;
+                ctx.bezierCurveTo(
+                    lastX, intermediateY,
+                    this.points[i].x, intermediateY,
+                    this.points[i].x, this.points[i].y
+                );
+                lastX = this.points[i].x;
+                lastY = this.points[i].y;
+            }
+        }
+        else {
+            // Straight lines
+            for (i = 1; i < this.points.length; i++) {
+                ctx.lineTo(this.points[i].x, this.points[i].y);
+            }
         }
+        
     }
 
     protected drawArrow(
@@ -1523,6 +1622,12 @@ export class AccessNode extends SDFGNode {
             if (this.strokeStyle(renderer) !== this.getCssProperty(renderer, '--color-default'))
                 renderer.set_tooltip((c) => this.tooltip(c));
         }
+
+        // If we are far away, don't show the text
+        if (too_far_away_for_text(renderer, ctx)) {
+            return;
+        }
+
         const textmetrics = ctx.measureText(this.label());
         ctx.fillText(
             this.label(), this.x - textmetrics.width / 2.0,
@@ -1637,6 +1742,11 @@ export class ScopeNode extends SDFGNode {
             renderer, '--node-foreground-color'
         );
 
+        // If we are far away, don't show the text
+        if (too_far_away_for_text(renderer, ctx)) {
+            return;
+        }
+
         drawAdaptiveText(
             ctx, renderer, this.far_label(renderer),
             this.close_label(renderer), this.x, this.y,
@@ -2063,6 +2173,11 @@ export class Tasklet extends SDFGNode {
             renderer, '--node-foreground-color'
         );
 
+        // If we are far away, don't show the text
+        if (too_far_away_for_text(renderer, ctx)) {
+            return;
+        }
+
         const ppp = canvas_manager.points_per_pixel();
         if (!(ctx as any).lod || ppp < SDFV.TASKLET_LOD) {
             // If we are close to the tasklet, show its contents
@@ -2122,17 +2237,20 @@ export class Reduce extends SDFGNode {
         if ((ctx as any).pdf)
             draw_shape();
         ctx.fill();
-        ctx.fillStyle = this.getCssProperty(
-            renderer, '--node-foreground-color'
-        );
-
-        const far_label = this.label().substring(4, this.label().indexOf(','));
-        drawAdaptiveText(
-            ctx, renderer, far_label,
-            this.label(), this.x, this.y - this.height * 0.2,
-            this.width, this.height,
-            SDFV.SCOPE_LOD
-        );
+        
+        if (!too_far_away_for_text(renderer, ctx)) {
+            
+            ctx.fillStyle = this.getCssProperty(
+                renderer, '--node-foreground-color'
+            );
+            const far_label = this.label().substring(4, this.label().indexOf(','));
+            drawAdaptiveText(
+                ctx, renderer, far_label,
+                this.label(), this.x, this.y - this.height * 0.2,
+                this.width, this.height,
+                SDFV.SCOPE_LOD
+            );
+        }
     }
 
     public shade(
@@ -2189,17 +2307,22 @@ export class NestedSDFG extends SDFGNode {
                     this.width - 5, this.height - 5
                 );
             ctx.fill();
-            ctx.fillStyle = this.getCssProperty(
-                renderer, '--node-foreground-color'
-            );
-            let label = this.data.node.attributes.label;
-            if (!this.data.node.attributes.sdfg)
-                label += ' (not loaded)';
-            const textmetrics = ctx.measureText(label);
-            ctx.fillText(
-                label, this.x - textmetrics.width / 2.0,
-                this.y + SDFV.LINEHEIGHT / 4.0
-            );
+
+
+            if (!too_far_away_for_text(renderer, ctx)) {
+
+                ctx.fillStyle = this.getCssProperty(
+                    renderer, '--node-foreground-color'
+                );
+                let label = this.data.node.attributes.label;
+                if (!this.data.node.attributes.sdfg)
+                    label += ' (not loaded)';
+                const textmetrics = ctx.measureText(label);
+                ctx.fillText(
+                    label, this.x - textmetrics.width / 2.0,
+                    this.y + SDFV.LINEHEIGHT / 4.0
+                );
+            }
         } else {
             // Draw square around nested SDFG.
             super.draw(
@@ -2213,16 +2336,19 @@ export class NestedSDFG extends SDFGNode {
                 drawSDFG(renderer, ctx, this.data.graph, mousepos);
             } else {
                 // Expanded, but no SDFG present or loaded yet.
-                const errColor = this.getCssProperty(
-                    renderer, '--node-missing-background-color'
-                );
-                const label = 'No SDFG loaded';
-                const textmetrics = ctx.measureText(label);
-                ctx.fillStyle = errColor;
-                ctx.fillText(
-                    label, this.x - textmetrics.width / 2.0,
-                    this.y + SDFV.LINEHEIGHT / 4.0
-                );
+                if (!too_far_away_for_text(renderer, ctx)) {
+
+                    const errColor = this.getCssProperty(
+                        renderer, '--node-missing-background-color'
+                    );
+                    const label = 'No SDFG loaded';
+                    const textmetrics = ctx.measureText(label);
+                    ctx.fillStyle = errColor;
+                    ctx.fillText(
+                        label, this.x - textmetrics.width / 2.0,
+                        this.y + SDFV.LINEHEIGHT / 4.0
+                    );
+                }
             }
         }
     }
@@ -2325,6 +2451,12 @@ export class LibraryNode extends SDFGNode {
         ctx.fillStyle = this.getCssProperty(
             renderer, '--node-foreground-color'
         );
+
+        // If we are far away, don't show the text
+        if (too_far_away_for_text(renderer, ctx)) {
+            return;
+        }
+        
         const textw = ctx.measureText(this.label()).width;
         ctx.fillText(
             this.label(), this.x - textw / 2, this.y + SDFV.LINEHEIGHT / 4
@@ -2354,6 +2486,24 @@ export class LibraryNode extends SDFGNode {
 
 //////////////////////////////////////////////////////
 
+// Checks if graph is zoomed out far (defined by SDFV.TEXT_LOD), using Points-per-Pixel
+// Used before ctx.fillText calls to only draw text when zoomed in close enough
+function too_far_away_for_text(renderer: SDFGRenderer, ctx: CanvasRenderingContext2D): boolean {
+
+    const canvas_manager = renderer.get_canvas_manager();
+    const ppp = canvas_manager?.points_per_pixel();
+    if (ppp) {
+        if ((ctx as any).lod && ppp > SDFV.TEXT_LOD) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+
+    return false;
+}
+
 /**
  * Batched drawing of graph edges, given a specific default color.
  *
@@ -2425,11 +2575,17 @@ function batchedDrawEdges(
     ctx.fillStyle = ctx.strokeStyle = renderer.getCssProperty(color);
     ctx.stroke();
 
-    arrowEdges.forEach(e => {
-        e.drawArrow(
-            ctx, e.points[e.points.length - 2], e.points[e.points.length - 1], 3
-        );
-    });
+    // Only draw Arrowheads when close enough to see them
+    const canvas_manager = renderer.get_canvas_manager();
+    const ppp = canvas_manager?.points_per_pixel();
+    if (!(ctx as any).lod || (ppp && ppp < SDFV.ARROW_LOD)) {
+
+        arrowEdges.forEach(e => {
+            e.drawArrow(
+                ctx, e.points[e.points.length - 2], e.points[e.points.length - 1], 3
+            );
+        });
+    }
 
     labelEdges.forEach(e => {
         (e as InterstateEdge).drawLabel(renderer, ctx);
@@ -2462,7 +2618,7 @@ export function drawStateContents(
 
         if (node instanceof NestedSDFG) {
             if (lod && (
-                Math.max(node.height, node.width) / ppp
+                Math.sqrt(node.height * node.width) / ppp
             ) < SDFV.STATE_LOD) {
                 node.simple_draw(renderer, ctx, mousePos);
                 node.debug_draw(renderer, ctx);
@@ -2478,28 +2634,48 @@ export function drawStateContents(
 
         node.draw(renderer, ctx, mousePos);
         node.debug_draw(renderer, ctx);
-        node.in_connectors.forEach((c: Connector) => {
-            let edge: Edge | null = null;
-            stateGraph.inEdges(nodeId)?.forEach((e) => {
-                const eobj = stateGraph.edge(e);
-                if (eobj.dst_connector == c.data.name)
-                    edge = eobj as any;
-            });
 
-            c.draw(renderer, ctx, mousePos, edge);
-            c.debug_draw(renderer, ctx);
-        });
-        node.out_connectors.forEach((c: Connector) => {
-            let edge: Edge | null = null;
-            stateGraph.outEdges(nodeId)?.forEach((e) => {
-                const eobj = stateGraph.edge(e);
-                if (eobj.src_connector == c.data.name)
-                    edge = eobj as any;
+        // Only draw connectors when close enough to see them
+        if (!lod || ppp < SDFV.CONNECTOR_LOD) {
+
+            node.in_connectors.forEach((c: Connector) => {
+
+                // Only draw connectors if actually visible. This is needed for large
+                // nodes in the background like NestedSDFGs, that are visible, but their
+                // connectors are actually not.
+                if (visibleRect && !c.intersect(
+                    visibleRect.x, visibleRect.y, visibleRect.w, visibleRect.h)) {
+                    return;
+                }
+
+                let edge: Edge | null = null;
+                stateGraph.inEdges(nodeId)?.forEach((e) => {
+                    const eobj = stateGraph.edge(e);
+                    if (eobj.dst_connector == c.data.name)
+                        edge = eobj as any;
+                });
+    
+                c.draw(renderer, ctx, mousePos, edge);
+                c.debug_draw(renderer, ctx);
             });
+            node.out_connectors.forEach((c: Connector) => {
 
-            c.draw(renderer, ctx, mousePos, edge);
-            c.debug_draw(renderer, ctx);
-        });
+                if (visibleRect && !c.intersect(
+                    visibleRect.x, visibleRect.y, visibleRect.w, visibleRect.h)) {
+                    return;
+                }
+
+                let edge: Edge | null = null;
+                stateGraph.outEdges(nodeId)?.forEach((e) => {
+                    const eobj = stateGraph.edge(e);
+                    if (eobj.src_connector == c.data.name)
+                        edge = eobj as any;
+                });
+    
+                c.draw(renderer, ctx, mousePos, edge);
+                c.debug_draw(renderer, ctx);
+            });
+        }
     }
 
     if (lod && ppp > SDFV.EDGE_LOD)
@@ -2516,26 +2692,28 @@ export function drawStateMachine(
     renderer: SDFGRenderer, ppp: number, lod?: boolean,
     visibleRect?: SimpleRect, mousePos?: Point2D
 ): void {
-    if (!lod || ppp < SDFV.EDGE_LOD)
+    if (!lod || ppp < SDFV.EDGE_LOD) {
+
         batchedDrawEdges(
             renderer, stateMachineGraph, ctx, visibleRect, mousePos,
             '--interstate-edge-color', SDFVSettings.alwaysOnISEdgeLabels
         );
+    }
 
     for (const nodeId of stateMachineGraph.nodes()) {
         const block = stateMachineGraph.node(nodeId);
 
-        const blockppp = Math.max(block.width, block.height) / ppp;
-        if (lod && blockppp < SDFV.STATE_LOD) {
-            block.simple_draw(renderer, ctx, mousePos);
-            block.debug_draw(renderer, ctx);
-            continue;
-        }
-
         // Skip invisible states.
         if (lod && visibleRect && !block.intersect(
             visibleRect.x, visibleRect.y, visibleRect.w, visibleRect.h
-        )) {
+            )) {
+                continue;
+            }
+            
+        const blockppp = Math.sqrt(block.width * block.height) / ppp;
+        if (lod && blockppp < SDFV.STATE_LOD) {
+            block.simple_draw(renderer, ctx, mousePos);
+            block.debug_draw(renderer, ctx);
             continue;
         }
 
diff --git a/src/sdfv.ts b/src/sdfv.ts
index 47fdbecd..d1d5055b 100644
--- a/src/sdfv.ts
+++ b/src/sdfv.ts
@@ -42,19 +42,25 @@ export class SDFV {
 
     public static LINEHEIGHT: number = 10;
     // Points-per-pixel threshold for drawing tasklet contents.
-    public static TASKLET_LOD: number = 0.35;
+    public static TASKLET_LOD: number = 0.35; // 0.35
     // Points-per-pixel threshold for simple version of map nodes (label only).
-    public static SCOPE_LOD: number = 1.5;
+    public static SCOPE_LOD: number = 0.75; // 0.75
     // Points-per-pixel threshold for not drawing memlets/interstate edges.
-    public static EDGE_LOD: number = 8;
+    public static EDGE_LOD: number = 5.0; // 5.0
+    // Points-per-pixel threshold for not drawing Arrowheads of memlets/interstate edges.
+    public static ARROW_LOD: number = 2.0; // 2.0
+    // Points-per-pixel threshold for not drawing connectors.
+    public static CONNECTOR_LOD = 2.0; // 2.0
     // Points-per-pixel threshold for not drawing node shapes and labels.
-    public static NODE_LOD: number = 60.0;
+    public static NODE_LOD: number = 5.0; // 5.0
+    // Points-per-pixel threshold for not drawing node text.
+    public static TEXT_LOD: number = 1.5; // 1.5
     // Pixel threshold for not drawing state contents.
-    public static STATE_LOD: number = 50;
+    public static STATE_LOD: number = 100; // 100
 
     public static DEFAULT_CANVAS_FONTSIZE: number = 10;
-    public static DEFAULT_MAX_FONTSIZE: number = 50;
-    public static DEFAULT_FAR_FONT_MULTIPLIER: number = 16;
+    public static DEFAULT_MAX_FONTSIZE: number = 20; // 50
+    public static DEFAULT_FAR_FONT_MULTIPLIER: number = 16; // 16
 
     protected renderer: SDFGRenderer | null = null;
     protected localViewRenderer: LViewRenderer | null = null;
@@ -502,11 +508,27 @@ export function reload_file(sdfv: SDFV): void {
 function file_read_complete(sdfv: SDFV): void {
     const result_string = fr.result;
     const container = document.getElementById('contents');
-    if (result_string && container) {
-        const sdfg = checkCompatLoad(parse_sdfg(result_string));
-        sdfv.get_renderer()?.destroy();
-        sdfv.set_renderer(new SDFGRenderer(sdfv, sdfg, container, mouse_event));
-        sdfv.close_menu();
+    const info_field = document.getElementById('task-info-field');
+
+    if (result_string && container && info_field) {
+
+        // Create the loader element before starting to parse and layout the graph.
+        // The layouting can take several seconds for large graphs on slow machines.
+        // The user sees a loading animation in the meantime so that the site doesn't 
+        // appear unresponsive.
+        // The loader element is removed/cleared again at the end of the layout function in
+        // the SDFGRenderer.
+        const loaderDiv = document.createElement("div");
+        loaderDiv.classList.add("loader");
+        info_field.appendChild(loaderDiv);
+
+        // Use setTimeout function to force the browser to reload the dom with the above loader element.
+        setTimeout(() => {
+            const sdfg = checkCompatLoad(parse_sdfg(result_string));
+            sdfv.get_renderer()?.destroy();
+            sdfv.set_renderer(new SDFGRenderer(sdfv, sdfg, container, mouse_event));
+            sdfv.close_menu();
+        }, 20);
     }
 }
 
diff --git a/src/utils/sdfv_settings.ts b/src/utils/sdfv_settings.ts
index dda97c39..74d04099 100644
--- a/src/utils/sdfv_settings.ts
+++ b/src/utils/sdfv_settings.ts
@@ -30,10 +30,11 @@ export class SDFVSettings {
         'showStateNames': true,
         'showMapSchedules': true,
         'showDataDescriptorSizes': false,
-        'adaptiveContentHiding': true,
         'inclusiveRanges': false,
         'useVerticalStateMachineLayout': false,
         'useVerticalScrollNavigation': false,
+        'adaptiveContentHiding': true,
+        'curvedEdges': true,
         // Hidden settings fields.
         'toolbar': true,
     };
@@ -72,7 +73,10 @@ export class SDFVSettings {
         const viewSettingsTitle = $('<div>', {
             class: 'col-12',
         }).append($('<h6>', {
-            text: 'View settings',
+            text: 'View Settings',
+            css: {
+                'font-weight': 'bold'
+            }
         }));
         $('<div>', {
             class: 'row',
@@ -99,22 +103,61 @@ export class SDFVSettings {
                 '(hides data container names)',
             'showDataDescriptorSizes', true
         );
-        this.addToggle(
-            root, 'Adaptively hide content when zooming out',
-            'adaptiveContentHiding', false, (value: boolean) => {
-                if (this.renderer)
-                    (this.renderer.get_context() as any).lod = value;
-            }
-        );
         this.addToggle(root, 'Use inclusive ranges', 'inclusiveRanges', true);
         this.addToggle(
             root, 'Use vertical state machine layout',
             'useVerticalStateMachineLayout', true
         );
+
+        const mouseSettingsTitle = $('<div>', {
+            class: 'col-12',
+        }).append($('<h6>', {
+            text: '',
+        })).append($('<h6>', {
+            text: 'Mouse Settings',
+            css: {
+                'font-weight': 'bold'
+            }
+        }));
+        $('<div>', {
+            class: 'row',
+        }).appendTo(root).append(mouseSettingsTitle);
+
         this.addToggle(
             root, 'Use vertical scroll navigation',
             'useVerticalScrollNavigation', false
         );
+
+        const performanceSettingsTitle = $('<div>', {
+            class: 'col-12',
+        }).append($('<h6>', {
+            text: '',
+        })).append($('<h6>', {
+            text: 'Performance Settings',
+            css: {
+                'font-weight': 'bold'
+            }
+        }));
+        $('<div>', {
+            class: 'row',
+        }).appendTo(root).append(performanceSettingsTitle);
+
+        // TODO: Remove this setting as disabling the adaptive content hiding can cause
+        // massive performance issues. TODO: add sliders for LOD thresholds of sdfv.ts 
+        // into an advanced settings menu.
+        this.addToggle(
+            root, 'Adaptively hide content when zooming out (Warning: turning this off can cause\
+                huge performance issues on big graphs)',
+            'adaptiveContentHiding', false, (value: boolean) => {
+                if (this.renderer)
+                    (this.renderer.get_context() as any).lod = value;
+            }
+        );
+
+        this.addToggle(
+            root, 'Curved Edges (turn off in case of performance issues)',
+            'curvedEdges', false
+        );
     }
 
     private constructModal(): JQuery<HTMLElement> {
@@ -138,6 +181,9 @@ export class SDFVSettings {
         }).appendTo(modalContents).append($('<h1>', {
             class: 'modal-title fs-5',
             text: 'Settings',
+        })).append($('<div>', {
+            id: 'task-info-field-settings',
+            style: 'margin-left: 15px;'
         })).append($('<button>', {
             type: 'button',
             class: 'btn-close',
@@ -167,8 +213,12 @@ export class SDFVSettings {
     }
 
     private onSettingsChanged(relayout: boolean): void {
-        if (relayout)
-            this.renderer?.relayout();
+        if (relayout) {
+            this.renderer?.add_loading_animation();
+            setTimeout(() => {
+                this.renderer?.relayout();
+            }, 10);
+        }
         this.renderer?.draw_async();
 
         if (this.renderer?.get_in_vscode())
@@ -267,4 +317,9 @@ export class SDFVSettings {
         ] as boolean;
     }
 
+    public static get curvedEdges(): boolean {
+        return this.getInstance().settingsDict[
+            'curvedEdges'
+        ] as boolean;
+    }
 }