diff --git a/core/static/bundled/user/family-graph-index.ts b/core/static/bundled/user/family-graph-index.ts
index 058d0cbe..d8179c07 100644
--- a/core/static/bundled/user/family-graph-index.ts
+++ b/core/static/bundled/user/family-graph-index.ts
@@ -5,7 +5,7 @@ import cytoscape, {
   type Singular,
 } from "cytoscape";
 import cxtmenu from "cytoscape-cxtmenu";
-import klay from "cytoscape-klay";
+import klay, { type KlayLayoutOptions } from "cytoscape-klay";
 import { type UserProfileSchema, familyGetFamilyGraph } from "#openapi";
 
 cytoscape.use(klay);
@@ -100,9 +100,9 @@ function createGraph(container: HTMLDivElement, data: GraphData, activeUserId: n
       {
         selector: ".not-traversed",
         style: {
-          "line-opacity": "0.5",
-          "background-opacity": "0.5",
-          "background-image-opacity": "0.5",
+          "line-opacity": 0.5,
+          "background-opacity": 0.5,
+          "background-image-opacity": 0.5,
         },
       },
     ],
@@ -116,21 +116,14 @@ function createGraph(container: HTMLDivElement, data: GraphData, activeUserId: n
         nodePlacement: "INTERACTIVE",
         layoutHierarchy: true,
       },
-    },
+    } as KlayLayoutOptions,
   });
   const activeUser = cy
     .getElementById(activeUserId.toString())
     .style("shape", "rectangle");
   /* Reset graph */
   const resetGraph = () => {
-    cy.elements(((element: Singular) => {
-      if (element.hasClass("traversed")) {
-        element.removeClass("traversed");
-      }
-      if (element.hasClass("not-traversed")) {
-        element.removeClass("not-traversed");
-      }
-    }) as unknown as string);
+    cy.elements().removeClass("traversed not-traversed");
   };
 
   const onNodeTap = (el: Singular) => {
@@ -139,9 +132,7 @@ function createGraph(container: HTMLDivElement, data: GraphData, activeUserId: n
     if (el === activeUser) {
       return;
     }
-    cy.elements(((element: Singular) => {
-      element.addClass("not-traversed");
-    }) as unknown as string);
+    cy.elements().addClass("not-traversed");
 
     for (const traversed of cy.elements().aStar({
       root: el,
@@ -188,9 +179,12 @@ function createGraph(container: HTMLDivElement, data: GraphData, activeUserId: n
 }
 
 interface FamilyGraphConfig {
-  activeUser: number; // activeUser Id of the user to fetch the tree from
-  depthMin: number; // depthMin Minimum tree depth for godfathers and godchildren
-  depthMax: number; // depthMax Maximum tree depth for godfathers and godchildren
+  /**Id of the user to fetch the tree from*/
+  activeUser: number;
+  /**Minimum tree depth for godfathers and godchildren*/
+  depthMin: number;
+  /**Maximum tree depth for godfathers and godchildren*/
+  depthMax: number;
 }
 
 document.addEventListener("alpine:init", () => {
diff --git a/core/templates/core/user_godfathers_tree.jinja b/core/templates/core/user_godfathers_tree.jinja
index e489fd6e..946ed196 100644
--- a/core/templates/core/user_godfathers_tree.jinja
+++ b/core/templates/core/user_godfathers_tree.jinja
@@ -97,11 +97,13 @@
     <div class="zoom-control" x-ref="zoomControl">
       <button
         @click="graph.zoom(graph.zoom() + 1)"
+        :disabled="!isZoomEnabled"
       >
         <i class="fa-solid fa-magnifying-glass-plus"></i>
       </button>
       <button
         @click="graph.zoom(graph.zoom() - 1)"
+        :disabled="!isZoomEnabled"
       >
         <i class="fa-solid fa-magnifying-glass-minus"></i>
       </button>
diff --git a/uv.lock b/uv.lock
index b1e3d63e..4b50121e 100644
--- a/uv.lock
+++ b/uv.lock
@@ -1852,7 +1852,7 @@ dev = [
     { name = "ipython", specifier = ">=9.0.2,<10.0.0" },
     { name = "pre-commit", specifier = ">=4.1.0,<5.0.0" },
     { name = "rjsmin", specifier = ">=1.2.4,<2.0.0" },
-    { name = "ruff", specifier = ">=0.11.11,<1.0.0" },
+    { name = "ruff", specifier = ">=0.11.13,<1.0.0" },
 ]
 docs = [
     { name = "mkdocs", specifier = ">=1.6.1,<2.0.0" },