Styling changes + tooltips and defaults

js/controllers/menu_controller.js

@@ -1,5 +1,5 @@
 // Global ATON
-import { Controller } from "@hotwired/stimulus"
+import { Controller } from "@hotwired/stimulus";
 import AppState from "../state.js";
 import { traverseOntology } from "../ontology.js";
 
@@ -16,7 +16,6 @@ export default class extends Controller {
     }
     /**
      * Open settings panel
-     * @param {Event} event 
      */
     async toggleMenu() {
         ATON.UI.setSidePanelRight();
@@ -33,8 +32,8 @@ export default class extends Controller {
          * The node's id
          * @type {string}
          */
-        const id = event.params.node;
-        const status = event.target.checked;
+        const id = event?.params.node;
+        const status = event?.target?.checked;
         ATON.getSceneNode(id).toggle(status);
         AppState.normalizedNodes.find(n => n.id === id).active = status;
     }
@@ -44,7 +43,7 @@ export default class extends Controller {
      * @returns {DocumentFragment}
      */
     #cloneTemplate(id) {
-        return document.getElementById(id).content.cloneNode(true);
+        return document.getElementById(id)?.content?.cloneNode(true);
     }
     /**
      * Create the left-side settings panel
@@ -58,7 +57,7 @@ export default class extends Controller {
     }
     /**
      * @todo Don't rebuild it every time, use caching, return a container with checkboxes
-     * @param {Array} nodes The normalized scene nodes (IDs and status)
+     * @param {Array<import("../state.js").NormalizedSceneNode>} nodes The normalized scene nodes (IDs and status)
      * @param {HTMLElement} tab Tab content element
      */
     #buildLayersMenu(nodes, tab) {