diff --git a/geneit_app/package-lock.json b/geneit_app/package-lock.json
index 76ee6ad..5072a28 100644
--- a/geneit_app/package-lock.json
+++ b/geneit_app/package-lock.json
@@ -27,6 +27,7 @@
"@types/react-dom": "^18.2.4",
"date-and-time": "^3.0.1",
"email-validator": "^2.0.4",
+ "family-chart": "^0.0.0-beta-1",
"filesize": "^10.0.9",
"react": "^18.2.0",
"react-dom": "^18.2.0",
@@ -6452,6 +6453,299 @@
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
"integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
},
+ "node_modules/d3": {
+ "version": "6.7.0",
+ "resolved": "https://registry.npmjs.org/d3/-/d3-6.7.0.tgz",
+ "integrity": "sha512-hNHRhe+yCDLUG6Q2LwvR/WdNFPOJQ5VWqsJcwIYVeI401+d2/rrCjxSXkiAdIlpx7/73eApFB4Olsmh3YN7a6g==",
+ "dependencies": {
+ "d3-array": "2",
+ "d3-axis": "2",
+ "d3-brush": "2",
+ "d3-chord": "2",
+ "d3-color": "2",
+ "d3-contour": "2",
+ "d3-delaunay": "5",
+ "d3-dispatch": "2",
+ "d3-drag": "2",
+ "d3-dsv": "2",
+ "d3-ease": "2",
+ "d3-fetch": "2",
+ "d3-force": "2",
+ "d3-format": "2",
+ "d3-geo": "2",
+ "d3-hierarchy": "2",
+ "d3-interpolate": "2",
+ "d3-path": "2",
+ "d3-polygon": "2",
+ "d3-quadtree": "2",
+ "d3-random": "2",
+ "d3-scale": "3",
+ "d3-scale-chromatic": "2",
+ "d3-selection": "2",
+ "d3-shape": "2",
+ "d3-time": "2",
+ "d3-time-format": "3",
+ "d3-timer": "2",
+ "d3-transition": "2",
+ "d3-zoom": "2"
+ }
+ },
+ "node_modules/d3-array": {
+ "version": "2.12.1",
+ "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
+ "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
+ "dependencies": {
+ "internmap": "^1.0.0"
+ }
+ },
+ "node_modules/d3-axis": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-2.1.0.tgz",
+ "integrity": "sha512-z/G2TQMyuf0X3qP+Mh+2PimoJD41VOCjViJzT0BHeL/+JQAofkiWZbWxlwFGb1N8EN+Cl/CW+MUKbVzr1689Cw=="
+ },
+ "node_modules/d3-brush": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-2.1.0.tgz",
+ "integrity": "sha512-cHLLAFatBATyIKqZOkk/mDHUbzne2B3ZwxkzMHvFTCZCmLaXDpZRihQSn8UNXTkGD/3lb/W2sQz0etAftmHMJQ==",
+ "dependencies": {
+ "d3-dispatch": "1 - 2",
+ "d3-drag": "2",
+ "d3-interpolate": "1 - 2",
+ "d3-selection": "2",
+ "d3-transition": "2"
+ }
+ },
+ "node_modules/d3-chord": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-2.0.0.tgz",
+ "integrity": "sha512-D5PZb7EDsRNdGU4SsjQyKhja8Zgu+SHZfUSO5Ls8Wsn+jsAKUUGkcshLxMg9HDFxG3KqavGWaWkJ8EpU8ojuig==",
+ "dependencies": {
+ "d3-path": "1 - 2"
+ }
+ },
+ "node_modules/d3-color": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-2.0.0.tgz",
+ "integrity": "sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ=="
+ },
+ "node_modules/d3-contour": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-2.0.0.tgz",
+ "integrity": "sha512-9unAtvIaNk06UwqBmvsdHX7CZ+NPDZnn8TtNH1myW93pWJkhsV25JcgnYAu0Ck5Veb1DHiCv++Ic5uvJ+h50JA==",
+ "dependencies": {
+ "d3-array": "2"
+ }
+ },
+ "node_modules/d3-delaunay": {
+ "version": "5.3.0",
+ "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-5.3.0.tgz",
+ "integrity": "sha512-amALSrOllWVLaHTnDLHwMIiz0d1bBu9gZXd1FiLfXf8sHcX9jrcj81TVZOqD4UX7MgBZZ07c8GxzEgBpJqc74w==",
+ "dependencies": {
+ "delaunator": "4"
+ }
+ },
+ "node_modules/d3-dispatch": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-2.0.0.tgz",
+ "integrity": "sha512-S/m2VsXI7gAti2pBoLClFFTMOO1HTtT0j99AuXLoGFKO6deHDdnv6ZGTxSTTUTgO1zVcv82fCOtDjYK4EECmWA=="
+ },
+ "node_modules/d3-drag": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-2.0.0.tgz",
+ "integrity": "sha512-g9y9WbMnF5uqB9qKqwIIa/921RYWzlUDv9Jl1/yONQwxbOfszAWTCm8u7HOTgJgRDXiRZN56cHT9pd24dmXs8w==",
+ "dependencies": {
+ "d3-dispatch": "1 - 2",
+ "d3-selection": "2"
+ }
+ },
+ "node_modules/d3-dsv": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-2.0.0.tgz",
+ "integrity": "sha512-E+Pn8UJYx9mViuIUkoc93gJGGYut6mSDKy2+XaPwccwkRGlR+LO97L2VCCRjQivTwLHkSnAJG7yo00BWY6QM+w==",
+ "dependencies": {
+ "commander": "2",
+ "iconv-lite": "0.4",
+ "rw": "1"
+ },
+ "bin": {
+ "csv2json": "bin/dsv2json",
+ "csv2tsv": "bin/dsv2dsv",
+ "dsv2dsv": "bin/dsv2dsv",
+ "dsv2json": "bin/dsv2json",
+ "json2csv": "bin/json2dsv",
+ "json2dsv": "bin/json2dsv",
+ "json2tsv": "bin/json2dsv",
+ "tsv2csv": "bin/dsv2dsv",
+ "tsv2json": "bin/dsv2json"
+ }
+ },
+ "node_modules/d3-dsv/node_modules/commander": {
+ "version": "2.20.3",
+ "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+ "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
+ },
+ "node_modules/d3-dsv/node_modules/iconv-lite": {
+ "version": "0.4.24",
+ "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+ "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+ "dependencies": {
+ "safer-buffer": ">= 2.1.2 < 3"
+ },
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/d3-ease": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-2.0.0.tgz",
+ "integrity": "sha512-68/n9JWarxXkOWMshcT5IcjbB+agblQUaIsbnXmrzejn2O82n3p2A9R2zEB9HIEFWKFwPAEDDN8gR0VdSAyyAQ=="
+ },
+ "node_modules/d3-fetch": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-2.0.0.tgz",
+ "integrity": "sha512-TkYv/hjXgCryBeNKiclrwqZH7Nb+GaOwo3Neg24ZVWA3MKB+Rd+BY84Nh6tmNEMcjUik1CSUWjXYndmeO6F7sw==",
+ "dependencies": {
+ "d3-dsv": "1 - 2"
+ }
+ },
+ "node_modules/d3-force": {
+ "version": "2.1.1",
+ "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-2.1.1.tgz",
+ "integrity": "sha512-nAuHEzBqMvpFVMf9OX75d00OxvOXdxY+xECIXjW6Gv8BRrXu6gAWbv/9XKrvfJ5i5DCokDW7RYE50LRoK092ew==",
+ "dependencies": {
+ "d3-dispatch": "1 - 2",
+ "d3-quadtree": "1 - 2",
+ "d3-timer": "1 - 2"
+ }
+ },
+ "node_modules/d3-format": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-2.0.0.tgz",
+ "integrity": "sha512-Ab3S6XuE/Q+flY96HXT0jOXcM4EAClYFnRGY5zsjRGNy6qCYrQsMffs7cV5Q9xejb35zxW5hf/guKw34kvIKsA=="
+ },
+ "node_modules/d3-geo": {
+ "version": "2.0.2",
+ "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-2.0.2.tgz",
+ "integrity": "sha512-8pM1WGMLGFuhq9S+FpPURxic+gKzjluCD/CHTuUF3mXMeiCo0i6R0tO1s4+GArRFde96SLcW/kOFRjoAosPsFA==",
+ "dependencies": {
+ "d3-array": "^2.5.0"
+ }
+ },
+ "node_modules/d3-hierarchy": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-2.0.0.tgz",
+ "integrity": "sha512-SwIdqM3HxQX2214EG9GTjgmCc/mbSx4mQBn+DuEETubhOw6/U3fmnji4uCVrmzOydMHSO1nZle5gh6HB/wdOzw=="
+ },
+ "node_modules/d3-interpolate": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-2.0.1.tgz",
+ "integrity": "sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==",
+ "dependencies": {
+ "d3-color": "1 - 2"
+ }
+ },
+ "node_modules/d3-path": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-2.0.0.tgz",
+ "integrity": "sha512-ZwZQxKhBnv9yHaiWd6ZU4x5BtCQ7pXszEV9CU6kRgwIQVQGLMv1oiL4M+MK/n79sYzsj+gcgpPQSctJUsLN7fA=="
+ },
+ "node_modules/d3-polygon": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-2.0.0.tgz",
+ "integrity": "sha512-MsexrCK38cTGermELs0cO1d79DcTsQRN7IWMJKczD/2kBjzNXxLUWP33qRF6VDpiLV/4EI4r6Gs0DAWQkE8pSQ=="
+ },
+ "node_modules/d3-quadtree": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-2.0.0.tgz",
+ "integrity": "sha512-b0Ed2t1UUalJpc3qXzKi+cPGxeXRr4KU9YSlocN74aTzp6R/Ud43t79yLLqxHRWZfsvWXmbDWPpoENK1K539xw=="
+ },
+ "node_modules/d3-random": {
+ "version": "2.2.2",
+ "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-2.2.2.tgz",
+ "integrity": "sha512-0D9P8TRj6qDAtHhRQn6EfdOtHMfsUWanl3yb/84C4DqpZ+VsgfI5iTVRNRbELCfNvRfpMr8OrqqUTQ6ANGCijw=="
+ },
+ "node_modules/d3-scale": {
+ "version": "3.3.0",
+ "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-3.3.0.tgz",
+ "integrity": "sha512-1JGp44NQCt5d1g+Yy+GeOnZP7xHo0ii8zsQp6PGzd+C1/dl0KGsp9A7Mxwp+1D1o4unbTTxVdU/ZOIEBoeZPbQ==",
+ "dependencies": {
+ "d3-array": "^2.3.0",
+ "d3-format": "1 - 2",
+ "d3-interpolate": "1.2.0 - 2",
+ "d3-time": "^2.1.1",
+ "d3-time-format": "2 - 3"
+ }
+ },
+ "node_modules/d3-scale-chromatic": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-2.0.0.tgz",
+ "integrity": "sha512-LLqy7dJSL8yDy7NRmf6xSlsFZ6zYvJ4BcWFE4zBrOPnQERv9zj24ohnXKRbyi9YHnYV+HN1oEO3iFK971/gkzA==",
+ "dependencies": {
+ "d3-color": "1 - 2",
+ "d3-interpolate": "1 - 2"
+ }
+ },
+ "node_modules/d3-selection": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-2.0.0.tgz",
+ "integrity": "sha512-XoGGqhLUN/W14NmaqcO/bb1nqjDAw5WtSYb2X8wiuQWvSZUsUVYsOSkOybUrNvcBjaywBdYPy03eXHMXjk9nZA=="
+ },
+ "node_modules/d3-shape": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-2.1.0.tgz",
+ "integrity": "sha512-PnjUqfM2PpskbSLTJvAzp2Wv4CZsnAgTfcVRTwW03QR3MkXF8Uo7B1y/lWkAsmbKwuecto++4NlsYcvYpXpTHA==",
+ "dependencies": {
+ "d3-path": "1 - 2"
+ }
+ },
+ "node_modules/d3-time": {
+ "version": "2.1.1",
+ "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-2.1.1.tgz",
+ "integrity": "sha512-/eIQe/eR4kCQwq7yxi7z4c6qEXf2IYGcjoWB5OOQy4Tq9Uv39/947qlDcN2TLkiTzQWzvnsuYPB9TrWaNfipKQ==",
+ "dependencies": {
+ "d3-array": "2"
+ }
+ },
+ "node_modules/d3-time-format": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-3.0.0.tgz",
+ "integrity": "sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag==",
+ "dependencies": {
+ "d3-time": "1 - 2"
+ }
+ },
+ "node_modules/d3-timer": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-2.0.0.tgz",
+ "integrity": "sha512-TO4VLh0/420Y/9dO3+f9abDEFYeCUr2WZRlxJvbp4HPTQcSylXNiL6yZa9FIUvV1yRiFufl1bszTCLDqv9PWNA=="
+ },
+ "node_modules/d3-transition": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-2.0.0.tgz",
+ "integrity": "sha512-42ltAGgJesfQE3u9LuuBHNbGrI/AJjNL2OAUdclE70UE6Vy239GCBEYD38uBPoLeNsOhFStGpPI0BAOV+HMxog==",
+ "dependencies": {
+ "d3-color": "1 - 2",
+ "d3-dispatch": "1 - 2",
+ "d3-ease": "1 - 2",
+ "d3-interpolate": "1 - 2",
+ "d3-timer": "1 - 2"
+ },
+ "peerDependencies": {
+ "d3-selection": "2"
+ }
+ },
+ "node_modules/d3-zoom": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-2.0.0.tgz",
+ "integrity": "sha512-fFg7aoaEm9/jf+qfstak0IYpnesZLiMX6GZvXtUSdv8RH2o4E2qeelgdU09eKS6wGuiGMfcnMI0nTIqWzRHGpw==",
+ "dependencies": {
+ "d3-dispatch": "1 - 2",
+ "d3-drag": "2",
+ "d3-interpolate": "1 - 2",
+ "d3-selection": "2",
+ "d3-transition": "2"
+ }
+ },
"node_modules/damerau-levenshtein": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -6576,6 +6870,11 @@
"url": "https://github.com/sponsors/ljharb"
}
},
+ "node_modules/delaunator": {
+ "version": "4.0.1",
+ "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-4.0.1.tgz",
+ "integrity": "sha512-WNPWi1IRKZfCt/qIDMfERkDp93+iZEmOxN2yy4Jg+Xhv8SLk2UTqqbe1sfiipn0and9QrE914/ihdx82Y/Giag=="
+ },
"node_modules/delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -7785,6 +8084,14 @@
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
},
+ "node_modules/family-chart": {
+ "version": "0.0.0-beta-1",
+ "resolved": "https://registry.npmjs.org/family-chart/-/family-chart-0.0.0-beta-1.tgz",
+ "integrity": "sha512-3YqXXum40xQBPagXan4Hpg71cO09FB5BVm2S/AUOggvF1x6/4PDlwRkZTDJ6OkbZNlR7GnyD2zphUgTfE2FTVg==",
+ "dependencies": {
+ "d3": "6"
+ }
+ },
"node_modules/fast-deep-equal": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -8930,6 +9237,11 @@
"node": ">= 0.4"
}
},
+ "node_modules/internmap": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
+ "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw=="
+ },
"node_modules/ipaddr.js": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.1.0.tgz",
@@ -13574,6 +13886,11 @@
"queue-microtask": "^1.2.2"
}
},
+ "node_modules/rw": {
+ "version": "1.3.3",
+ "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+ "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="
+ },
"node_modules/safe-array-concat": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.0.0.tgz",
diff --git a/geneit_app/package.json b/geneit_app/package.json
index d0e704c..54fbbe6 100644
--- a/geneit_app/package.json
+++ b/geneit_app/package.json
@@ -22,6 +22,7 @@
"@types/react-dom": "^18.2.4",
"date-and-time": "^3.0.1",
"email-validator": "^2.0.4",
+ "family-chart": "^0.0.0-beta-1",
"filesize": "^10.0.9",
"react": "^18.2.0",
"react-dom": "^18.2.0",
diff --git a/geneit_app/src/routes/family/FamilyMemberTreeRoute.tsx b/geneit_app/src/routes/family/FamilyMemberTreeRoute.tsx
index a621a62..ceda5b8 100644
--- a/geneit_app/src/routes/family/FamilyMemberTreeRoute.tsx
+++ b/geneit_app/src/routes/family/FamilyMemberTreeRoute.tsx
@@ -21,6 +21,7 @@ import { useFamily } from "../../widgets/BaseFamilyRoute";
import { MemberItem } from "../../widgets/MemberItem";
import { RouterLink } from "../../widgets/RouterLink";
import { BasicFamilyTree } from "../../widgets/BasicFamilyTree";
+import ComlexFamilyTree from "../../widgets/complex_family_tree/ComplexFamilyTree";
enum CurrTab {
BasicTree,
@@ -37,7 +38,7 @@ export function FamilyMemberTreeRoute(): React.ReactElement {
const family = useFamily();
- const [currTab, setCurrTab] = React.useState(CurrTab.BasicTree);
+ const [currTab, setCurrTab] = React.useState(CurrTab.AdvancedTree);
const [currMode, setCurrMode] = React.useState(TreeMode.Descending);
const member = family.members.get(Number(memberId));
@@ -121,7 +122,7 @@ export function FamilyMemberTreeRoute(): React.ReactElement {
{currTab === CurrTab.BasicTree ? (
) : (
- <>todo
+
)}
diff --git a/geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.jsx b/geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.jsx
new file mode 100644
index 0000000..edf3f60
--- /dev/null
+++ b/geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.jsx
@@ -0,0 +1,227 @@
+import React from "react";
+import f3 from "family-chart";
+import "./family-chart.css";
+
+export default class ComlexFamilyTree extends React.Component {
+ cont = React.createRef();
+
+ componentDidMount() {
+ if (!this.cont.current) return;
+
+ const store = f3.createStore({
+ data: data(),
+ node_separation: 250,
+ level_separation: 150,
+ }),
+ view = f3.d3AnimationView({
+ store,
+ cont: document.querySelector("#FamilyChart"),
+ }),
+ Card = f3.elements.Card({
+ store,
+ svg: view.svg,
+ card_dim: {
+ w: 220,
+ h: 70,
+ text_x: 75,
+ text_y: 15,
+ img_w: 60,
+ img_h: 60,
+ img_x: 5,
+ img_y: 5,
+ },
+ card_display: [
+ (d) => `${d.data["first name"] || ""} ${d.data["last name"] || ""}`,
+ (d) => `${d.data["birthday"] || ""}`,
+ ],
+ mini_tree: true,
+ link_break: false,
+ });
+
+ view.setCard(Card);
+ store.setOnUpdate((props) => view.update(props || {}));
+ store.update.tree({ initial: true });
+
+ function data() {
+ return [
+ {
+ id: "0",
+ rels: {
+ spouses: ["8c92765f-92d3-4120-90dd-85a28302504c"],
+ father: "0c09cfa0-5e7c-4073-8beb-94f6c69ada19",
+ mother: "0fa5c6bc-5b58-40f5-a07e-d787e26d8b56",
+ children: [
+ "ce2fcb9a-6058-4326-b56a-aced35168561",
+ "f626d086-e2d6-4722-b4f3-ca4f15b109ab",
+ ],
+ },
+ data: {
+ "first name": "Agnus",
+ "last name": "",
+ birthday: "1970",
+ avatar:
+ "https://static8.depositphotos.com/1009634/988/v/950/depositphotos_9883921-stock-illustration-no-user-profile-picture.jpg",
+ gender: "M",
+ },
+ },
+ {
+ id: "8c92765f-92d3-4120-90dd-85a28302504c",
+ data: {
+ gender: "F",
+ "first name": "Andrea",
+ "last name": "",
+ birthday: "",
+ avatar: "",
+ },
+ rels: {
+ spouses: ["0"],
+ children: [
+ "ce2fcb9a-6058-4326-b56a-aced35168561",
+ "f626d086-e2d6-4722-b4f3-ca4f15b109ab",
+ ],
+ },
+ },
+ {
+ id: "0c09cfa0-5e7c-4073-8beb-94f6c69ada19",
+ data: {
+ gender: "M",
+ "first name": "Zen",
+ "last name": "",
+ birthday: "",
+ avatar: "",
+ },
+ rels: {
+ children: ["0"],
+ spouses: ["0fa5c6bc-5b58-40f5-a07e-d787e26d8b56"],
+ },
+ },
+ {
+ id: "0fa5c6bc-5b58-40f5-a07e-d787e26d8b56",
+ data: {
+ gender: "F",
+ "first name": "Zebra",
+ "last name": "",
+ birthday: "",
+ avatar: "",
+ },
+ rels: {
+ spouses: ["0c09cfa0-5e7c-4073-8beb-94f6c69ada19"],
+ children: ["0"],
+ father: "12a9bddf-855a-4583-a695-c73fa8c0e9b2",
+ mother: "bd56a527-b613-474d-9f38-fcac0aae218b",
+ },
+ },
+ {
+ id: "ce2fcb9a-6058-4326-b56a-aced35168561",
+ data: {
+ gender: "M",
+ "first name": "Ben",
+ "last name": "",
+ birthday: "",
+ avatar: "",
+ },
+ rels: {
+ mother: "8c92765f-92d3-4120-90dd-85a28302504c",
+ father: "0",
+ spouses: ["b4e33c68-20a7-47ba-9dcc-1168a07d5b52"],
+ children: [
+ "eabd40c9-4518-4485-af5e-e4bc3ffd27fb",
+ "240a3f71-c921-42d7-8a13-dec5e1acc4fd",
+ ],
+ },
+ },
+ {
+ id: "f626d086-e2d6-4722-b4f3-ca4f15b109ab",
+ data: {
+ gender: "F",
+ "first name": "Becky",
+ "last name": "",
+ birthday: "",
+ avatar: "",
+ },
+ rels: {
+ mother: "8c92765f-92d3-4120-90dd-85a28302504c",
+ father: "0",
+ },
+ },
+ {
+ id: "eabd40c9-4518-4485-af5e-e4bc3ffd27fb",
+ data: {
+ gender: "M",
+ "first name": "Carlos",
+ "last name": "",
+ birthday: "",
+ avatar: "",
+ },
+ rels: {
+ mother: "b4e33c68-20a7-47ba-9dcc-1168a07d5b52",
+ father: "ce2fcb9a-6058-4326-b56a-aced35168561",
+ },
+ },
+ {
+ id: "b4e33c68-20a7-47ba-9dcc-1168a07d5b52",
+ data: {
+ gender: "F",
+ "first name": "Branka",
+ "last name": "",
+ birthday: "",
+ avatar: "",
+ },
+ rels: {
+ spouses: ["ce2fcb9a-6058-4326-b56a-aced35168561"],
+ children: [
+ "eabd40c9-4518-4485-af5e-e4bc3ffd27fb",
+ "240a3f71-c921-42d7-8a13-dec5e1acc4fd",
+ ],
+ },
+ },
+ {
+ id: "240a3f71-c921-42d7-8a13-dec5e1acc4fd",
+ data: {
+ gender: "F",
+ "first name": "Carla",
+ "last name": "",
+ birthday: "",
+ avatar: "",
+ },
+ rels: {
+ mother: "b4e33c68-20a7-47ba-9dcc-1168a07d5b52",
+ father: "ce2fcb9a-6058-4326-b56a-aced35168561",
+ },
+ },
+ {
+ id: "12a9bddf-855a-4583-a695-c73fa8c0e9b2",
+ data: {
+ gender: "M",
+ "first name": "Yvo",
+ "last name": "",
+ birthday: "",
+ avatar: "",
+ },
+ rels: {
+ children: ["0fa5c6bc-5b58-40f5-a07e-d787e26d8b56"],
+ spouses: ["bd56a527-b613-474d-9f38-fcac0aae218b"],
+ },
+ },
+ {
+ id: "bd56a527-b613-474d-9f38-fcac0aae218b",
+ data: {
+ gender: "F",
+ "first name": "Yva",
+ "last name": "",
+ birthday: "",
+ avatar: "",
+ },
+ rels: {
+ spouses: ["12a9bddf-855a-4583-a695-c73fa8c0e9b2"],
+ children: ["0fa5c6bc-5b58-40f5-a07e-d787e26d8b56"],
+ },
+ },
+ ];
+ }
+ }
+
+ render() {
+ return ;
+ }
+}
diff --git a/geneit_app/src/widgets/complex_family_tree/family-chart.css b/geneit_app/src/widgets/complex_family_tree/family-chart.css
new file mode 100644
index 0000000..1511b59
--- /dev/null
+++ b/geneit_app/src/widgets/complex_family_tree/family-chart.css
@@ -0,0 +1,97 @@
+.f3 {
+ height: 700px;
+ max-height: calc(100vh - 80px);
+ width: 900px;
+ max-width: 100%;
+ margin: auto;
+ position: relative;
+}
+
+.f3 .cursor-pointer {
+ cursor: pointer;
+}
+.f3 svg.main_svg {
+ width: 100%;
+ height: 100%;
+ background-color: #3b5560;
+ color: #3b5560;
+}
+.f3 svg.main_svg text {
+ fill: currentColor;
+}
+.f3 rect.card-female,
+.f3 .card-female .card-body-rect,
+.f3 .card-female .text-overflow-mask {
+ fill: lightpink;
+}
+.f3 rect.card-male,
+.f3 .card-male .card-body-rect,
+.f3 .card-male .text-overflow-mask {
+ fill: lightblue;
+}
+.f3 .card-genderless .card-body-rect,
+.f3 .card-genderless .text-overflow-mask {
+ fill: lightgray;
+}
+.f3 .card_add .card-body-rect {
+ fill: #3b5560;
+ stroke-width: 4px;
+ stroke: #fff;
+ cursor: pointer;
+}
+.f3 g.card_add text {
+ fill: #fff;
+}
+.f3 .card-main {
+ stroke: #000;
+}
+.f3 .card_family_tree rect {
+ transition: 0.3s;
+}
+.f3 .card_family_tree:hover rect {
+ transform: scale(1.1);
+}
+.f3 .card_add_relative {
+ cursor: pointer;
+ color: #fff;
+ transition: 0.3s;
+}
+.f3 .card_add_relative circle {
+ fill: rgba(0, 0, 0, 0);
+}
+.f3 .card_add_relative:hover {
+ color: black;
+}
+.f3 .card_edit.pencil_icon {
+ color: #fff;
+ transition: 0.3s;
+}
+.f3 .card_edit.pencil_icon:hover {
+ color: black;
+}
+.f3 .card_break_link,
+.f3 .link_upper,
+.f3 .link_lower,
+.f3 .link_particles {
+ transform-origin: 50% 50%;
+ transition: 1s;
+}
+.f3 .card_break_link {
+ color: #fff;
+}
+.f3 .card_break_link.closed .link_upper {
+ transform: translate(-140.5px, 655.6px);
+}
+.f3 .card_break_link.closed .link_upper g {
+ transform: rotate(-58deg);
+}
+.f3 .card_break_link.closed .link_particles {
+ transform: scale(0);
+}
+.f3 .input-field input {
+ height: 2.5rem !important;
+}
+.f3 .input-field > label:not(.label-icon).active {
+ -webkit-transform: translateY(-8px) scale(0.8);
+ transform: translateY(-8px) scale(0.8);
+}