geneit_app/package-lock.json

@@ -17,8 +17,8 @@
         "@mui/icons-material": "^5.11.16",
         "@mui/lab": "^5.0.0-alpha.140",
         "@mui/material": "^5.14.5",
-        "@mui/x-data-grid": "^6.9.2",
+        "@mui/x-data-grid": "^7.1.1",
-        "@mui/x-tree-view": "^6.0.0-alpha.1",
+        "@mui/x-tree-view": "^7.1.1",
         "@testing-library/jest-dom": "^6.0.0",
         "@testing-library/react": "^14.0.0",
         "@testing-library/user-event": "^14.0.0",
@@ -462,9 +462,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.23.9",
+      "version": "7.24.4",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.9.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.4.tgz",
-      "integrity": "sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==",
+      "integrity": "sha512-dkxf7+hn8mFBwKjs9bvBlArzLVxVbS8usaPUDd5p2a9JCL9tB8OaOVN1isD4+Xyk4ns89/xeOmbQvgdK7IIVdA==",
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -1516,13 +1516,14 @@
       }
     },
     "node_modules/@mui/x-data-grid": {
-      "version": "6.19.9",
+      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-6.19.9.tgz",
+      "resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-7.1.1.tgz",
-      "integrity": "sha512-Oj8mOBShrOiWYiWsbv2dKcctA3nrFRR+0MLyXOUDmz58r9jmpPFMSdFwm32Ki24sGPsjBUdb10CfUuypTdqyEw==",
+      "integrity": "sha512-hNvz927lkAznFdy45QPE7mIZVyQhlqveHmTK9+SD0N1us4sSTij90uUJ/roTNDod0VA9f5GqWmNz+5h8ihpz6Q==",
       "dependencies": {
-        "@babel/runtime": "^7.23.2",
+        "@babel/runtime": "^7.24.0",
-        "@mui/utils": "^5.14.16",
+        "@mui/system": "^5.15.14",
-        "clsx": "^2.0.0",
+        "@mui/utils": "^5.15.14",
+        "clsx": "^2.1.0",
         "prop-types": "^15.8.1",
         "reselect": "^4.1.8"
       },
@@ -1531,26 +1532,25 @@
       },
       "funding": {
         "type": "opencollective",
-        "url": "https://opencollective.com/mui"
+        "url": "https://opencollective.com/mui-org"
       },
       "peerDependencies": {
-        "@mui/material": "^5.4.1",
+        "@mui/material": "^5.15.14",
-        "@mui/system": "^5.4.1",
         "react": "^17.0.0 || ^18.0.0",
         "react-dom": "^17.0.0 || ^18.0.0"
       }
     },
     "node_modules/@mui/x-tree-view": {
-      "version": "6.17.0",
+      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/@mui/x-tree-view/-/x-tree-view-6.17.0.tgz",
+      "resolved": "https://registry.npmjs.org/@mui/x-tree-view/-/x-tree-view-7.1.1.tgz",
-      "integrity": "sha512-09dc2D+Rjg2z8KOaxbUXyPi0aw7fm2jurEtV8Xw48xJ00joLWd5QJm1/v4CarEvaiyhTQzHImNqdgeJW8ZQB6g==",
+      "integrity": "sha512-BOvhs55k02iPuJtSjoorEMBvPAYXQfPwtLzCOwlhyyLawloPNN5z9qRhbfTqwjdddFh0EEoSY1GyzuY5aOv7iw==",
-      "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.23.2",
+        "@babel/runtime": "^7.24.0",
-        "@mui/base": "^5.0.0-beta.20",
+        "@mui/base": "^5.0.0-beta.40",
-        "@mui/utils": "^5.14.14",
+        "@mui/system": "^5.15.14",
-        "@types/react-transition-group": "^4.4.8",
+        "@mui/utils": "^5.15.14",
-        "clsx": "^2.0.0",
+        "@types/react-transition-group": "^4.4.10",
+        "clsx": "^2.1.0",
         "prop-types": "^15.8.1",
         "react-transition-group": "^4.4.5"
       },
@@ -1559,13 +1559,12 @@
       },
       "funding": {
         "type": "opencollective",
-        "url": "https://opencollective.com/mui"
+        "url": "https://opencollective.com/mui-org"
       },
       "peerDependencies": {
         "@emotion/react": "^11.9.0",
         "@emotion/styled": "^11.8.1",
-        "@mui/material": "^5.8.6",
+        "@mui/material": "^5.15.14",
-        "@mui/system": "^5.8.0",
         "react": "^17.0.0 || ^18.0.0",
         "react-dom": "^17.0.0 || ^18.0.0"
       }

geneit_app/package.json

@@ -13,8 +13,8 @@
     "@mui/icons-material": "^5.11.16",
     "@mui/lab": "^5.0.0-alpha.140",
     "@mui/material": "^5.14.5",
-    "@mui/x-data-grid": "^6.9.2",
+    "@mui/x-data-grid": "^7.1.1",
-    "@mui/x-tree-view": "^6.0.0-alpha.1",
+    "@mui/x-tree-view": "^7.1.1",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.0.0",

geneit_app/src/hooks/context_providers/DarkThemeProvider.tsx

@@ -1,7 +1,7 @@
 import { ThemeProvider, createTheme } from "@mui/material/styles";
 import React from "react";
 import { PropsWithChildren } from "react";
-import { frFR as dataGridFr } from "@mui/x-data-grid";
+import { frFR as dataGridFr } from "@mui/x-data-grid/locales";
 
 const localStorageKey = "dark-theme";
 

geneit_app/src/widgets/BasicFamilyTree.tsx

@@ -2,7 +2,7 @@ import { mdiBabyCarriage, mdiCross } from "@mdi/js";
 import Icon from "@mdi/react";
 import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import { TreeItem, TreeView } from "@mui/x-tree-view";
+import { TreeItem, SimpleTreeView } from "@mui/x-tree-view";
 import React from "react";
 import { useNavigate } from "react-router-dom";
 import { Couple } from "../api/CoupleApi";
@@ -16,13 +16,12 @@ export function BasicFamilyTree(p: {
   depth: number;
 }): React.ReactElement {
   return (
-    <TreeView
+    <SimpleTreeView
-      defaultCollapseIcon={<ExpandMoreIcon />}
+      slots={{ collapseIcon: ExpandMoreIcon, expandIcon: ChevronRightIcon }}
-      defaultExpandIcon={<ChevronRightIcon />}
       sx={{ flexGrow: 1 }}
     >
       <FamilyTreeItem n={p.tree} depth={p.depth} />
-    </TreeView>
+    </SimpleTreeView>
   );
 }
 
@@ -40,7 +39,7 @@ function FamilyTreeItem(p: {
 
   return (
     <TreeItem
-      nodeId={p.n.member.id.toString()}
+      itemId={p.n.member.id.toString()}
       style={{ margin: "10px" }}
       label={
         <div style={{ display: "flex" }}>