First PDF export attempt

geneit_app/package-lock.json

@@ -27,12 +27,15 @@
         "@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",
+        "jspdf": "^2.5.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-easy-crop": "^5.0.0",
         "react-router-dom": "^6.11.2",
         "react-scripts": "^5.0.1",
+        "svg2pdf.js": "^2.2.2",
         "typescript": "^4.9.5",
         "web-vitals": "^2.1.4"
       }
@@ -4169,6 +4172,12 @@
       "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz",
       "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw=="
     },
+    "node_modules/@types/raf": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.0.tgz",
+      "integrity": "sha512-taW5/WYqo36N7V39oYyHP9Ipfd5pNFvGTIQsNGj86xV88YQ7GnI30/yMfKDF7Zgin0m3e+ikX88FvImnK4RjGw==",
+      "optional": true
+    },
     "node_modules/@types/range-parser": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz",
@@ -5046,6 +5055,17 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/atob": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
+      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
+      "bin": {
+        "atob": "bin/atob.js"
+      },
+      "engines": {
+        "node": ">= 4.5.0"
+      }
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.14",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz",
@@ -5315,6 +5335,15 @@
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/batch": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
@@ -5490,6 +5519,17 @@
         "node-int64": "^0.4.0"
       }
     },
+    "node_modules/btoa": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz",
+      "integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g==",
+      "bin": {
+        "btoa": "bin/btoa.js"
+      },
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
     "node_modules/buffer-from": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
@@ -5592,6 +5632,25 @@
         }
       ]
     },
+    "node_modules/canvg": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.10.tgz",
+      "integrity": "sha512-qwR2FRNO9NlzTeKIPIKpnTY6fqwuYSequ8Ru8c0YkYU7U0oW+hLUvWadLvAu1Rl72OMNiFhoLu4f8eUjQ7l/+Q==",
+      "optional": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@types/raf": "^3.4.0",
+        "core-js": "^3.8.3",
+        "raf": "^3.4.1",
+        "regenerator-runtime": "^0.13.7",
+        "rgbcolor": "^1.0.1",
+        "stackblur-canvas": "^2.0.0",
+        "svg-pathdata": "^6.0.3"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/case-sensitive-paths-webpack-plugin": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz",
@@ -6102,6 +6161,15 @@
         "postcss": "^8.4"
       }
     },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "optional": true,
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/css-loader": {
       "version": "6.8.1",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.8.1.tgz",
@@ -6452,6 +6520,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 +6937,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",
@@ -6778,6 +7144,12 @@
         "url": "https://github.com/fb55/domhandler?sponsor=1"
       }
     },
+    "node_modules/dompurify": {
+      "version": "2.4.7",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.4.7.tgz",
+      "integrity": "sha512-kxxKlPEDa6Nc5WJi+qRgPbOAbgTpSULL+vI3NUXsZMlkJxTqYI9wg5ZTay2sFrdZRWHPWNi+EdAhcJf81WtoMQ==",
+      "optional": true
+    },
     "node_modules/domutils": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
@@ -7785,6 +8157,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",
@@ -7853,6 +8233,11 @@
         "bser": "2.1.1"
       }
     },
+    "node_modules/fflate": {
+      "version": "0.4.8",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.4.8.tgz",
+      "integrity": "sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA=="
+    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -8031,6 +8416,11 @@
         }
       }
     },
+    "node_modules/font-family-papandreou": {
+      "version": "0.2.0-patch2",
+      "resolved": "https://registry.npmjs.org/font-family-papandreou/-/font-family-papandreou-0.2.0-patch2.tgz",
+      "integrity": "sha512-l/YiRdBSH/eWv6OF3sLGkwErL+n0MqCICi9mppTZBOCL5vixWGDqCYvRcuxB2h7RGCTzaTKOHT2caHvCXQPRlw=="
+    },
     "node_modules/for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -8682,6 +9072,19 @@
         "webpack": "^5.20.0"
       }
     },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "optional": true,
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/htmlparser2": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
@@ -8930,6 +9333,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",
@@ -10400,6 +10808,23 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/jspdf": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-2.5.1.tgz",
+      "integrity": "sha512-hXObxz7ZqoyhxET78+XR34Xu2qFGrJJ2I2bE5w4SM8eFaFEkW2xcGRVUss360fYelwRSid/jT078kbNvmoW0QA==",
+      "dependencies": {
+        "@babel/runtime": "^7.14.0",
+        "atob": "^2.1.2",
+        "btoa": "^1.2.1",
+        "fflate": "^0.4.8"
+      },
+      "optionalDependencies": {
+        "canvg": "^3.0.6",
+        "core-js": "^3.6.0",
+        "dompurify": "^2.2.0",
+        "html2canvas": "^1.0.0-rc.5"
+      }
+    },
     "node_modules/jsx-ast-utils": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.4.tgz",
@@ -13488,6 +13913,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+      "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.8.15"
+      }
+    },
     "node_modules/rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -13574,6 +14008,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",
@@ -14055,6 +14494,14 @@
         "wbuf": "^1.7.3"
       }
     },
+    "node_modules/specificity": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/specificity/-/specificity-0.4.1.tgz",
+      "integrity": "sha512-1klA3Gi5PD1Wv9Q0wUoOQN1IWAuPu0D1U03ThXTr0cJ20+/iq2tHSDnK7Kk/0LXJ1ztUB2/1Os0wKmfyNgUQfg==",
+      "bin": {
+        "specificity": "bin/specificity"
+      }
+    },
     "node_modules/sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
@@ -14085,6 +14532,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/stackblur-canvas": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.6.0.tgz",
+      "integrity": "sha512-8S1aIA+UoF6erJYnglGPug6MaHYGo1Ot7h5fuXx4fUPvcvQfcdw2o/ppCse63+eZf8PPidSu4v1JnmEVtEDnpg==",
+      "optional": true,
+      "engines": {
+        "node": ">=0.1.14"
+      }
+    },
     "node_modules/stackframe": {
       "version": "1.3.4",
       "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.3.4.tgz",
@@ -14404,6 +14860,29 @@
       "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
       "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ=="
     },
+    "node_modules/svg-pathdata": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
+      "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
+      "optional": true,
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/svg2pdf.js": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/svg2pdf.js/-/svg2pdf.js-2.2.2.tgz",
+      "integrity": "sha512-uhnLyeOCLzgvkjmck08kRaMxA3qdXxHcTVcrk9aZiVwzpnJeixdFWqTAtGgKhCpCF5jSsoBOuC4CY4KgdrB7WA==",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "font-family-papandreou": "^0.2.0-patch1",
+        "specificity": "^0.4.1",
+        "svgpath": "^2.3.0"
+      },
+      "peerDependencies": {
+        "jspdf": "^2.0.0"
+      }
+    },
     "node_modules/svgo": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
@@ -14548,6 +15027,14 @@
         "node": ">=4"
       }
     },
+    "node_modules/svgpath": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/svgpath/-/svgpath-2.6.0.tgz",
+      "integrity": "sha512-OIWR6bKzXvdXYyO4DK/UWa1VA1JeKq8E+0ug2DG98Y/vOmMpfZNj+TIG988HjfYSqtcy/hFOtZq/n/j5GSESNg==",
+      "funding": {
+        "url": "https://github.com/fontello/svg2ttf?sponsor=1"
+      }
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -14717,6 +15204,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "optional": true,
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -15119,6 +15615,15 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "optional": true,
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "node_modules/uuid": {
       "version": "8.3.2",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",

geneit_app/package.json

@@ -22,12 +22,15 @@
     "@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",
+    "jspdf": "^2.5.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-easy-crop": "^5.0.0",
     "react-router-dom": "^6.11.2",
     "react-scripts": "^5.0.1",
+    "svg2pdf.js": "^2.2.2",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },

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 ? (
           <BasicFamilyTree tree={tree!} />
         ) : (
-          <>todo</>
+          <ComlexFamilyTree />
         )}
       </Paper>
     </div>

geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.tsx

@@ -0,0 +1,244 @@
+import React from "react";
+import f3 from "family-chart";
+import "./family-chart.css";
+
+import { jsPDF } from "jspdf";
+import "svg2pdf.js";
+
+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"],
+          },
+        },
+      ];
+    }
+
+    setTimeout(() => {
+      const doc = new jsPDF({
+        orientation: "l",
+        format: [1000, 1000],
+      });
+
+      const element = document.getElementById("FamilyChart");
+      console.log(element);
+      doc.svg(element!.children[0], { height: 1000, width: 1000 }).then(() => {
+        // save the created pdf
+        doc.save("myPDF.pdf");
+      });
+    }, 6000);
+  }
+
+  render() {
+    return <div className="f3" id="FamilyChart" ref={this.cont as any}></div>;
+  }
+}

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);
+}

geneit_app/src/widgets/complex_family_tree/family_chart.d.ts

@@ -0,0 +1,67 @@
+declare module "family-chart" {
+  type f3data = any;
+  type f3tree = any;
+
+  type f3State = {
+    data: any;
+    main_id?: any;
+    tree?: f3tree;
+    node_separation?: number;
+    level_separation?: number;
+  };
+
+  interface f3Update {
+    tree: (props) => void;
+    mainId: (mainId) => void;
+    data: (data: f3data) => void;
+  }
+
+  interface f3Store {
+    state: f3State;
+    update: f3update;
+    getData: () => f3data;
+    getTree: () => f3tree;
+    setOnUpdate: (cb: (props) => void) => void;
+    methods: any;
+  }
+
+  function createStore(initial_state: f3State): f3Store;
+
+  function CalculateTree({
+    data_stash,
+    main_id = null,
+    is_vertical = true,
+    node_separation = 250,
+    level_separation = 150,
+  });
+
+  function d3AnimationView(p: {
+    store: f3Store;
+    cont: HTMLElement | null;
+    Card?: any;
+  });
+
+  const handlers: any;
+
+  type F3elements = {
+    Card: (props: {
+      store: f3Store;
+      svg: HTMLElement;
+      mini_tree: boolean;
+      link_break: boolean;
+      cardEditForm?: boolean;
+      card_dim: {
+        w: number;
+        h: number;
+        text_x: number;
+        text_y: number;
+        img_w: number;
+        img_h: number;
+        img_x: number;
+        img_y: number;
+      };
+      card_display: ((data: any) => string)[];
+    }) => (p: { node; d }) => HTMLElement;
+  };
+  const elements: F3elements;
+}