JS Performance: Unload JsTree on navigation

Similar to the ACE editor, we unload the JsTree to prevent memory leaks. Also, we use this opportunity to reduce code duplication.

Author: MrSerth

app/assets/javascripts/editor/editor.js

@@ -418,15 +418,39 @@ var CodeOceanEditor = {
             this.showFrame(frame);
             this.toggleButtonStates();
         }.bind(this));
-        $(document).on('theme:change', function(event) {
+
+        this.installFileTreeEventHandlers(filesInstance);
+    },
+
+    installFileTreeEventHandlers: function (filesInstance) {
+        // Prevent duplicate event listeners by removing them during unload.
+        const themeListener = this.createFileTreeThemeChangeListener(filesInstance);
+        const jsTree = filesInstance?.jstree(true);
+        $(document).on('theme:change', themeListener);
+        $(document).one('turbo:visit', function() {
+            $(document).off('theme:change', themeListener);
+            if (jsTree && jsTree.element) {
+                jsTree.destroy(true);
+            }
+        });
+        $(window).one('beforeunload', function() {
+            $(document).off('theme:change', themeListener);
+            if (jsTree && jsTree.element) {
+                jsTree.destroy(true);
+            }
+        });
+    },
+
+    createFileTreeThemeChangeListener: function (filesInstance) {
+      return function (event) {
             const jsTree = filesInstance?.jstree(true);
 
             if (jsTree) {
                 const newColorScheme = event.detail.currentTheme;
                 // Update the JStree theme
                 jsTree?.set_theme(newColorScheme === "dark" ? "default-dark" : "default");
             }
-        });
+        }
     },
 
     initializeFileTreeButtons: function () {

app/assets/javascripts/shell.js

@@ -133,11 +133,7 @@ $(document).on('turbo-migration:load', function () {
                     window.location = downloadPath;
                 }
             }.bind(this));
-            $(document).on('theme:change', function(event) {
-                const newColorScheme = event.detail.currentTheme;
-                // Update the JStree theme
-                fileTree.jstree(true).set_theme(newColorScheme === "dark" ? "default-dark" : "default");
-            });
+            CodeOceanEditor.installFileTreeEventHandlers(fileTree);
         }
     }
 

app/assets/javascripts/submission_statistics.js

@@ -46,11 +46,7 @@ $(document).on('turbo-migration:load', function(event) {
         });
         showActiveFile();
       });
-      $(document).on('theme:change', function(event) {
-          const newColorScheme = event.detail.currentTheme;
-          // Update the JStree theme
-          fileTree.jstree(true).set_theme(newColorScheme === "dark" ? "default-dark" : "default");
-      });
+      CodeOceanEditor.installFileTreeEventHandlers(fileTree);
       fileTrees.push(fileTree);
     });
   };