From b502e99c22b506ebcfcc51ec906ad88fa7e2f780 Mon Sep 17 00:00:00 2001 From: Pierre Hubert Date: Tue, 22 Aug 2023 16:12:55 +0200 Subject: [PATCH] Start to test family-chart module --- geneit_app/package-lock.json | 317 ++++++++++++++++++ geneit_app/package.json | 1 + .../routes/family/FamilyMemberTreeRoute.tsx | 5 +- .../complex_family_tree/ComplexFamilyTree.jsx | 227 +++++++++++++ .../complex_family_tree/family-chart.css | 97 ++++++ 5 files changed, 645 insertions(+), 2 deletions(-) create mode 100644 geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.jsx create mode 100644 geneit_app/src/widgets/complex_family_tree/family-chart.css 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); +}