Lint Code [skip actions]

src/handbook/package-lock.json

@@ -11,7 +11,10 @@
       "dependencies": {
         "events": "^3.3.0",
         "react": "^18.2.0",
+        "react-collapsible": "^2.10.0",
+        "react-d3-tree": "^3.6.1",
         "react-dom": "^18.2.0",
+        "react-icons": "^4.8.0",
         "react-virtualized": "^9.22.3"
       },
       "devDependencies": {
@@ -342,6 +345,31 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@bkrem/react-transition-group": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@bkrem/react-transition-group/-/react-transition-group-1.3.3.tgz",
+      "integrity": "sha512-nUZaumHu/MMolELv+MhEEQzQtKsnfpbKBHtam/NK53tGICwU19tuffEXW8BLhm9HhQfN1H3+C0bsJv8Z7vzwEA==",
+      "dependencies": {
+        "chain-function": "^1.0.0",
+        "dom-helpers": "^3.3.1",
+        "loose-envify": "^1.3.1",
+        "prop-types": "^15.5.6",
+        "react-lifecycles-compat": "^3.0.4",
+        "warning": "^3.0.0"
+      },
+      "peerDependencies": {
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@bkrem/react-transition-group/node_modules/dom-helpers": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
+      "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==",
+      "dependencies": {
+        "@babel/runtime": "^7.1.2"
+      }
+    },
     "node_modules/@esbuild/win32-x64": {
       "version": "0.17.15",
       "cpu": [
@@ -736,6 +764,11 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/d3-hierarchy": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-1.1.8.tgz",
+      "integrity": "sha512-AbStKxNyWiMDQPGDguG2Kuhlq1Sv539pZSxYbx4UZeYkutpPwXCcgyiRrlV4YH64nIOsKx7XVnOMy9O7rJsXkg=="
+    },
     "node_modules/@types/estree": {
       "version": "1.0.0",
       "dev": true,
@@ -1090,6 +1123,11 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/chain-function": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/chain-function/-/chain-function-1.0.1.tgz",
+      "integrity": "sha512-SxltgMwL9uCko5/ZCLiyG2B7R9fY4pDZUw7hJ4MhirdjBLosoDqkWABi3XMucddHdLiFJMb7PD2MZifZriuMTg=="
+    },
     "node_modules/chalk": {
       "version": "2.4.2",
       "dev": true,
@@ -1135,6 +1173,14 @@
       "integrity": "sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==",
       "dev": true
     },
+    "node_modules/clone": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+      "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/clsx": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
@@ -1372,6 +1418,34 @@
       "version": "3.1.2",
       "license": "MIT"
     },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/d3-dsv": {
       "version": "2.0.0",
       "dev": true,
@@ -1398,6 +1472,92 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-hierarchy": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-1.1.9.tgz",
+      "integrity": "sha512-j8tPxlqh1srJHAtxfvOUwKNYJkQuBFdM1+JAUfq6xqH5eAqf93L7oG1NVqDa4CpFZNvnNKtCYEUC8KY9yEn9lQ=="
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="
+    },
+    "node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
+      "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+      "dependencies": {
+        "d3-path": "1"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
+      }
+    },
+    "node_modules/d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "dev": true,
@@ -1414,6 +1574,14 @@
         }
       }
     },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "dev": true,
@@ -3019,6 +3187,35 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-collapsible": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/react-collapsible/-/react-collapsible-2.10.0.tgz",
+      "integrity": "sha512-kEVsmlFfXBMTCnU5gwIv19MdmPAhbIPzz5Er37TiJSzRKS0IHrqAKQyQeHEmtoGIQMTcVI46FzE4z3NlVTx77A==",
+      "peerDependencies": {
+        "react": "~15 || ~16 || ~17 || ~18",
+        "react-dom": "~15 || ~16 || ~17 || ~18"
+      }
+    },
+    "node_modules/react-d3-tree": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/react-d3-tree/-/react-d3-tree-3.6.1.tgz",
+      "integrity": "sha512-tl7P3Wg5q/ep6c7z6wPgf3vpqaxZ1yQi/rpvIePj3vt7XGwdP3Vdr9GBIZXw7K2CrMknoyoDIbPSNaZtZZ6MIg==",
+      "dependencies": {
+        "@bkrem/react-transition-group": "^1.3.3",
+        "@types/d3-hierarchy": "^1.1.8",
+        "clone": "^2.1.1",
+        "d3-hierarchy": "^1.1.9",
+        "d3-selection": "^3.0.0",
+        "d3-shape": "^1.3.7",
+        "d3-zoom": "^3.0.0",
+        "dequal": "^2.0.2",
+        "uuid": "^8.3.1"
+      },
+      "peerDependencies": {
+        "react": "16.x || 17.x || 18.x",
+        "react-dom": "16.x || 17.x || 18.x"
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.2.0",
       "license": "MIT",
@@ -3030,6 +3227,14 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.8.0.tgz",
+      "integrity": "sha512-N6+kOLcihDiAnj5Czu637waJqSnwlMNROzVZMhfX68V/9bu9qHaMIJC4UdozWoOk57gahFCNHwVvWzm0MTzRjg==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "license": "MIT"
@@ -3556,6 +3761,14 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/vite": {
       "version": "4.2.1",
       "dev": true,
@@ -3649,6 +3862,14 @@
         }
       }
     },
+    "node_modules/warning": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+      "integrity": "sha512-jMBt6pUrKn5I+OGgtQ4YZLdhIeJmObddh6CsibPxyQ5yPZm1XExSyzC1LCNX7BzhxWgiHmizBWJTHJIjMjTQYQ==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/which": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
@@ -3883,6 +4104,29 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@bkrem/react-transition-group": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@bkrem/react-transition-group/-/react-transition-group-1.3.3.tgz",
+      "integrity": "sha512-nUZaumHu/MMolELv+MhEEQzQtKsnfpbKBHtam/NK53tGICwU19tuffEXW8BLhm9HhQfN1H3+C0bsJv8Z7vzwEA==",
+      "requires": {
+        "chain-function": "^1.0.0",
+        "dom-helpers": "^3.3.1",
+        "loose-envify": "^1.3.1",
+        "prop-types": "^15.5.6",
+        "react-lifecycles-compat": "^3.0.4",
+        "warning": "^3.0.0"
+      },
+      "dependencies": {
+        "dom-helpers": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
+          "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==",
+          "requires": {
+            "@babel/runtime": "^7.1.2"
+          }
+        }
+      }
+    },
     "@esbuild/win32-x64": {
       "version": "0.17.15",
       "dev": true,
@@ -4073,6 +4317,11 @@
       "version": "3.0.1",
       "dev": true
     },
+    "@types/d3-hierarchy": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-1.1.8.tgz",
+      "integrity": "sha512-AbStKxNyWiMDQPGDguG2Kuhlq1Sv539pZSxYbx4UZeYkutpPwXCcgyiRrlV4YH64nIOsKx7XVnOMy9O7rJsXkg=="
+    },
     "@types/estree": {
       "version": "1.0.0",
       "dev": true
@@ -4301,6 +4550,11 @@
       "version": "1.0.30001473",
       "dev": true
     },
+    "chain-function": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/chain-function/-/chain-function-1.0.1.tgz",
+      "integrity": "sha512-SxltgMwL9uCko5/ZCLiyG2B7R9fY4pDZUw7hJ4MhirdjBLosoDqkWABi3XMucddHdLiFJMb7PD2MZifZriuMTg=="
+    },
     "chalk": {
       "version": "2.4.2",
       "dev": true,
@@ -4330,6 +4584,11 @@
       "integrity": "sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==",
       "dev": true
     },
+    "clone": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+      "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w=="
+    },
     "clsx": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
@@ -4491,6 +4750,25 @@
     "csstype": {
       "version": "3.1.2"
     },
+    "d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA=="
+    },
+    "d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg=="
+    },
+    "d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "requires": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      }
+    },
     "d3-dsv": {
       "version": "2.0.0",
       "dev": true,
@@ -4506,6 +4784,71 @@
         }
       }
     },
+    "d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w=="
+    },
+    "d3-hierarchy": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-1.1.9.tgz",
+      "integrity": "sha512-j8tPxlqh1srJHAtxfvOUwKNYJkQuBFdM1+JAUfq6xqH5eAqf93L7oG1NVqDa4CpFZNvnNKtCYEUC8KY9yEn9lQ=="
+    },
+    "d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "requires": {
+        "d3-color": "1 - 3"
+      }
+    },
+    "d3-path": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="
+    },
+    "d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ=="
+    },
+    "d3-shape": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
+      "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+      "requires": {
+        "d3-path": "1"
+      }
+    },
+    "d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA=="
+    },
+    "d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "requires": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      }
+    },
+    "d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "requires": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      }
+    },
     "debug": {
       "version": "4.3.4",
       "dev": true,
@@ -4513,6 +4856,11 @@
         "ms": "2.1.2"
       }
     },
+    "dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA=="
+    },
     "didyoumean": {
       "version": "1.2.2",
       "dev": true
@@ -5470,6 +5818,28 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "react-collapsible": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/react-collapsible/-/react-collapsible-2.10.0.tgz",
+      "integrity": "sha512-kEVsmlFfXBMTCnU5gwIv19MdmPAhbIPzz5Er37TiJSzRKS0IHrqAKQyQeHEmtoGIQMTcVI46FzE4z3NlVTx77A==",
+      "requires": {}
+    },
+    "react-d3-tree": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/react-d3-tree/-/react-d3-tree-3.6.1.tgz",
+      "integrity": "sha512-tl7P3Wg5q/ep6c7z6wPgf3vpqaxZ1yQi/rpvIePj3vt7XGwdP3Vdr9GBIZXw7K2CrMknoyoDIbPSNaZtZZ6MIg==",
+      "requires": {
+        "@bkrem/react-transition-group": "^1.3.3",
+        "@types/d3-hierarchy": "^1.1.8",
+        "clone": "^2.1.1",
+        "d3-hierarchy": "^1.1.9",
+        "d3-selection": "^3.0.0",
+        "d3-shape": "^1.3.7",
+        "d3-zoom": "^3.0.0",
+        "dequal": "^2.0.2",
+        "uuid": "^8.3.1"
+      }
+    },
     "react-dom": {
       "version": "18.2.0",
       "requires": {
@@ -5477,6 +5847,12 @@
         "scheduler": "^0.23.0"
       }
     },
+    "react-icons": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.8.0.tgz",
+      "integrity": "sha512-N6+kOLcihDiAnj5Czu637waJqSnwlMNROzVZMhfX68V/9bu9qHaMIJC4UdozWoOk57gahFCNHwVvWzm0MTzRjg==",
+      "requires": {}
+    },
     "react-is": {
       "version": "16.13.1"
     },
@@ -5787,6 +6163,11 @@
       "version": "1.0.2",
       "dev": true
     },
+    "uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
+    },
     "vite": {
       "version": "4.2.1",
       "dev": true,
@@ -5822,6 +6203,14 @@
         "tsconfck": "^2.1.0"
       }
     },
+    "warning": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+      "integrity": "sha512-jMBt6pUrKn5I+OGgtQ4YZLdhIeJmObddh6CsibPxyQ5yPZm1XExSyzC1LCNX7BzhxWgiHmizBWJTHJIjMjTQYQ==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "which": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",

src/handbook/src/backend/data.ts

@@ -165,8 +165,7 @@ export function getItems(): Item[] {
 export function getQuests(): QuestDump {
     const map: QuestDump = {};
     quests.forEach((quest: Quest) => {
-        quest.description = quest.description
+        quest.description = quest.description.replaceAll("\\", ",");
-            .replaceAll("\\", ",");
         map[quest.id] = quest;
     });
 
@@ -177,8 +176,7 @@ export function getQuests(): QuestDump {
  * Fetches and lists all the quests in the file.
  */
 export function listQuests(): Quest[] {
-    return Object.values(getQuests())
+    return Object.values(getQuests()).sort((a, b) => a.id - b.id);
-        .sort((a, b) => a.id - b.id);
 }
 
 /**
@@ -187,8 +185,7 @@ export function listQuests(): Quest[] {
 export function getMainQuests(): MainQuestDump {
     const map: MainQuestDump = {};
     mainQuests.forEach((quest: MainQuest) => {
-        quest.title = quest.title
+        quest.title = quest.title.replaceAll("\\", ",");
-            .replaceAll("\\", ",");
         map[quest.id] = quest;
     });
 
@@ -199,8 +196,7 @@ export function getMainQuests(): MainQuestDump {
  * Fetches and lists all the quests in the file.
  */
 export function listMainQuests(): MainQuestDump[] {
-    return Object.values(allMainQuests)
+    return Object.values(allMainQuests).sort((a, b) => a.id - b.id);
-        .sort((a, b) => a.id - b.id);
 }
 
 /**
@@ -218,8 +214,7 @@ export function getMainQuestFor(quest: Quest): MainQuest {
  * @param mainQuest The main quest to fetch quests for.
  */
 export function listSubQuestsFor(mainQuest: MainQuest): Quest[] {
-    return listQuests()
+    return listQuests().filter((quest) => quest.mainId == mainQuest.id);
-        .filter((quest) => quest.mainId == mainQuest.id);
 }
 
 /*
@@ -237,8 +232,7 @@ export function questToTree(mainQuest: MainQuest): RawNodeDatum {
         attributes: {
             id: mainQuest.id
         },
-        children: listSubQuestsFor(mainQuest)
+        children: listSubQuestsFor(mainQuest).map((quest) => {
-            .map((quest) => {
             return {
                 name: quest.id.toString(),
                 attributes: {

src/handbook/src/backend/server.ts

@@ -5,7 +5,8 @@ let playerToken: string | null = null; // The session token for the player.
 export let targetPlayer = 0; // The UID of the target player.
 
 // The server's address and port.
-export let address: string = "127.0.0.1", port: string = "443";
+export let address: string = "127.0.0.1",
+    port: string = "443";
 export let encrypted: boolean = true;
 
 export let lockedPlayer = false; // Whether the UID field is locked.

src/handbook/src/ui/App.tsx

@@ -45,13 +45,7 @@ class App extends React.Component<{}, IState> {
             <div className={"App"}>
                 <SideBar />
 
-                {
+                {this.state.plain ? <PlainText /> : <Content initial={this.state.initial} />}
-                    this.state.plain ?
-                        <PlainText /> :
-                        <Content
-                            initial={this.state.initial}
-                        />
-                }
 
                 <Overlay />
             </div>

src/handbook/src/ui/pages/QuestsPage.tsx

@@ -31,10 +31,12 @@ class QuestsPage extends React.Component<{}, IState> {
         return (
             <div className={"QuestsPage"}>
                 <div className={"QuestsPage_Selector"}>
-                    <PrimaryQuest quest={{
+                    <PrimaryQuest
+                        quest={{
                             id: 351,
                             title: "Across the Sea"
-                    }} />
+                        }}
+                    />
                 </div>
 
                 <div className={"QuestsPage_Tree"}>

src/handbook/src/ui/views/Overlay.tsx

@@ -50,11 +50,7 @@ class Overlay extends React.Component<{}, IState> {
     }
 
     render() {
-        return this.state.page != "None" ? (
+        return this.state.page != "None" ? <div className={"Overlay"}>{this.getPage()}</div> : undefined;
-            <div className={"Overlay"}>
-                {this.getPage()}
-            </div>
-        ) : undefined;
     }
 }
 

src/handbook/src/ui/views/PlainText.tsx

@@ -101,7 +101,9 @@ class PlainText extends React.PureComponent {
                 {listQuests()
                     .sort((a, b) => a.id - b.id)
                     .map((quest) => (
-                        <p key={quest.id}>{`${quest.id} : ${getMainQuestFor(quest)?.title ?? "Unknown"} - ${quest.description}`}</p>
+                        <p key={quest.id}>{`${quest.id} : ${getMainQuestFor(quest)?.title ?? "Unknown"} - ${
+                            quest.description
+                        }`}</p>
                     ))}
             </>
         );

src/handbook/src/ui/widgets/ServerSettings.tsx

@@ -1,10 +1,7 @@
 import React from "react";
 
 import emitter from "@backend/events";
-import {
+import { targetPlayer, address, port, setServerDetails, url, setTargetPlayer } from "@backend/server";
-    targetPlayer, address, port,
-    setServerDetails, url, setTargetPlayer
-} from "@backend/server";
 
 import "@css/widgets/ServerSettings.scss";
 
@@ -96,22 +93,19 @@ class ServerSettings extends React.Component<{}, IState> {
         emitter.emit("overlay", "None");
 
         // Save the server settings.
-        setServerDetails(
+        setServerDetails(this.state.address, this.state.port.toString());
-            this.state.address,
-            this.state.port.toString()
-        );
     }
 
     render() {
         return (
             <div className={"ServerSettings"}>
-                {
+                {this.state.webview ? (
-                    this.state.webview ? (
                     <iframe
                         className={"ServerSettings_Frame"}
                         src={`${url()}/handbook/authenticate?uid=${targetPlayer}`}
                     />
-                    ) : <>
+                ) : (
+                    <>
                         <div className={"ServerSettings_Content ServerSettings_Top"}>
                             <h1 className={"ServerSettings_Title"}>Server Settings</h1>
 
@@ -139,8 +133,7 @@ class ServerSettings extends React.Component<{}, IState> {
                                             const target = e.target as HTMLInputElement;
                                             const value = target.value;
 
-                                            if (isNaN(Number(value))
+                                            if (isNaN(Number(value)) || value.length > 5) {
-                                                || value.length > 5) {
                                                 return;
                                             }
 
@@ -150,24 +143,18 @@ class ServerSettings extends React.Component<{}, IState> {
                                 </div>
                             </div>
 
-                            <button
+                            <button className={"ServerSettings_Authenticate"} onClick={this.authenticate.bind(this)}>
-                                className={"ServerSettings_Authenticate"}
-                                onClick={this.authenticate.bind(this)}
-                            >
                                 Authenticate
                             </button>
                         </div>
 
                         <div className={"ServerSettings_Content"}>
-                            <button
+                            <button className={"ServerSettings_Save"} onClick={this.save.bind(this)}>
-                                className={"ServerSettings_Save"}
-                                onClick={this.save.bind(this)}
-                            >
                                 Save
                             </button>
                         </div>
                     </>
-                }
+                )}
             </div>
         );
     }

src/handbook/src/ui/widgets/quest/NormalQuest.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { IoLocationSharp } from "react-icons/io5"
+import { IoLocationSharp } from "react-icons/io5";
 
 import type { Quest } from "@backend/types";
 
@@ -20,13 +20,12 @@ class NormalQuest extends React.PureComponent<IProps> {
         const { quest } = this.props;
 
         return (
-            <div
+            <div className={"NormalQuest"} datatype={this.props.right ? "right" : "left"}>
-                className={"NormalQuest"}
-                datatype={this.props.right ? "right" : "left"}
-            >
                 <div className={"NormalQuest_Info"}>
                     <p className={"font-bold"}>{quest.description}</p>
-                    <p>ID: {quest.id} | Main: {quest.mainId}</p>
+                    <p>
+                        ID: {quest.id} | Main: {quest.mainId}
+                    </p>
                 </div>
 
                 <IoLocationSharp className={"NormalQuest_Icon"} />

src/handbook/src/ui/widgets/quest/PrimaryQuest.tsx

@@ -40,11 +40,9 @@ class PrimaryQuest extends React.PureComponent<IProps> {
                 transitionTime={50}
             >
                 <div className={"PrimaryQuest_List"}>
-                    {
+                    {listSubQuestsFor(this.props.quest).map((quest) => (
-                        listSubQuestsFor(this.props.quest)
+                        <NormalQuest key={quest.id} quest={quest} right />
-                            .map((quest) => <NormalQuest
+                    ))}
-                                key={quest.id} quest={quest} right />)
-                    }
                 </div>
             </Collapsible>
         );