diff --git a/package-lock.json b/package-lock.json
index b34755f8..51aecc9b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -35,12 +35,14 @@
         "i18next-http-backend": "^1.4.4",
         "import-js": "^5.0.0",
         "numeric": "^1.2.6",
+        "or": "^0.2.0",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-draggable": "^4.4.4",
         "react-dropzone": "^12.0.4",
         "react-hook-form": "^7.30.0",
         "react-i18next": "^11.18.6",
+        "react-icons": "^4.10.1",
         "react-redux": "^7.2.6",
         "react-responsive": "^9.0.0-beta.6",
         "react-router-dom": "^6.2.1",
@@ -1811,9 +1813,11 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.23.9",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.9.tgz",
-      "integrity": "sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==",
+
+      "version": "7.24.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.0.tgz",
+      "integrity": "sha512-Chk32uHMg6TnQdvw2e9IlqPpFX/6NLuK0Ys2PqLb7/gL5uFn9mXvK715FGLlOLQrcO4qIkNHkvPGktzzXexsFw==",
+
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -3001,12 +3005,14 @@
       }
     },
     "node_modules/@mui/private-theming": {
-      "version": "5.15.6",
-      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.6.tgz",
-      "integrity": "sha512-ZBX9E6VNUSscUOtU8uU462VvpvBS7eFl5VfxAzTRVQBHflzL+5KtnGrebgf6Nd6cdvxa1o0OomiaxSKoN2XDmg==",
-      "dependencies": {
-        "@babel/runtime": "^7.23.8",
-        "@mui/utils": "^5.15.6",
+
+      "version": "5.15.12",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.12.tgz",
+      "integrity": "sha512-cqoSo9sgA5HE+8vZClbLrq9EkyOnYysooepi5eKaKvJ41lReT2c5wOZAeDDM1+xknrMDos+0mT2zr3sZmUiRRA==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/utils": "^5.15.12",
+
         "prop-types": "^15.8.1"
       },
       "engines": {
@@ -3027,13 +3033,14 @@
       }
     },
     "node_modules/@mui/styled-engine": {
-      "version": "5.15.6",
-      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.15.6.tgz",
-      "integrity": "sha512-KAn8P8xP/WigFKMlEYUpU9z2o7jJnv0BG28Qu1dhNQVutsLVIFdRf5Nb+0ijp2qgtcmygQ0FtfRuXv5LYetZTg==",
+      "version": "5.15.11",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.15.11.tgz",
+      "integrity": "sha512-So21AhAngqo07ces4S/JpX5UaMU2RHXpEA6hNzI6IQjd/1usMPxpgK8wkGgTe3JKmC2KDmH8cvoycq5H3Ii7/w==",
       "dependencies": {
-        "@babel/runtime": "^7.23.8",
+        "@babel/runtime": "^7.23.9",
         "@emotion/cache": "^11.11.0",
-        "csstype": "^3.1.2",
+        "csstype": "^3.1.3",
+
         "prop-types": "^15.8.1"
       },
       "engines": {
@@ -3058,17 +3065,19 @@
       }
     },
     "node_modules/@mui/system": {
-      "version": "5.15.6",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.6.tgz",
-      "integrity": "sha512-J01D//u8IfXvaEHMBQX5aO2l7Q+P15nt96c4NskX7yp5/+UuZP8XCQJhtBtLuj+M2LLyXHYGmCPeblsmmscP2Q==",
-      "dependencies": {
-        "@babel/runtime": "^7.23.8",
-        "@mui/private-theming": "^5.15.6",
-        "@mui/styled-engine": "^5.15.6",
+
+      "version": "5.15.12",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.12.tgz",
+      "integrity": "sha512-/pq+GO6yN3X7r3hAwFTrzkAh7K1bTF5r8IzS79B9eyKJg7v6B/t4/zZYMR6OT9qEPtwf6rYN2Utg1e6Z7F1OgQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/private-theming": "^5.15.12",
+        "@mui/styled-engine": "^5.15.11",
         "@mui/types": "^7.2.13",
-        "@mui/utils": "^5.15.6",
+        "@mui/utils": "^5.15.12",
         "clsx": "^2.1.0",
-        "csstype": "^3.1.2",
+        "csstype": "^3.1.3",
+
         "prop-types": "^15.8.1"
       },
       "engines": {
@@ -3118,11 +3127,12 @@
       }
     },
     "node_modules/@mui/utils": {
-      "version": "5.15.6",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.6.tgz",
-      "integrity": "sha512-qfEhf+zfU9aQdbzo1qrSWlbPQhH1nCgeYgwhOVnj9Bn39shJQitEnXpSQpSNag8+uty5Od6PxmlNKPTnPySRKA==",
+      "version": "5.15.12",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.12.tgz",
+      "integrity": "sha512-8SDGCnO2DY9Yy+5bGzu00NZowSDtuyHP4H8gunhHGQoIlhlY2Z3w64wBzAOLpYw/ZhJNzksDTnS/i8qdJvxuow==",
       "dependencies": {
-        "@babel/runtime": "^7.23.8",
+        "@babel/runtime": "^7.23.9",
+
         "@types/prop-types": "^15.7.11",
         "prop-types": "^15.8.1",
         "react-is": "^18.2.0"
@@ -5968,25 +5978,11 @@
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
       "integrity": "sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw=="
     },
-    "node_modules/@types/minimist": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.2.tgz",
-      "integrity": "sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==",
-      "optional": true,
-      "peer": true
-    },
     "node_modules/@types/node": {
       "version": "16.11.21",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.21.tgz",
       "integrity": "sha512-Pf8M1XD9i1ksZEcCP8vuSNwooJ/bZapNmIzpmsMaL+jMI+8mEYU3PKvs+xDNuQcJWF/x24WzY4qxLtB0zNow9A=="
     },
-    "node_modules/@types/normalize-package-data": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz",
-      "integrity": "sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==",
-      "optional": true,
-      "peer": true
-    },
     "node_modules/@types/numeric": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/@types/numeric/-/numeric-1.2.2.tgz",
@@ -6908,41 +6904,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/arrify": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
-      "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/asap": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
       "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
     },
-    "node_modules/asn1": {
-      "version": "0.2.6",
-      "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.6.tgz",
-      "integrity": "sha512-ix/FxPn0MDjeyJ7i/yoHGFt/EX6LyNbxSEhPPXODPL+KB0VPk86UYfL0lMdy+KCnv+fmvIzySwaK5COwqVbWTQ==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "safer-buffer": "~2.1.0"
-      }
-    },
-    "node_modules/assert-plus": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
-      "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=0.8"
-      }
-    },
     "node_modules/ast-types-flow": {
       "version": "0.0.7",
       "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz",
@@ -6956,16 +6922,6 @@
         "lodash": "^4.17.14"
       }
     },
-    "node_modules/async-foreach": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/async-foreach/-/async-foreach-0.1.3.tgz",
-      "integrity": "sha1-NhIfhFwFeBct5Bmpfb6x0W7DRUI=",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -7035,23 +6991,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/aws-sign2": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
-      "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/aws4": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.11.0.tgz",
-      "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
-      "optional": true,
-      "peer": true
-    },
     "node_modules/axe-core": {
       "version": "4.3.5",
       "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.3.5.tgz",
@@ -7395,16 +7334,6 @@
       "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
       "integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY="
     },
-    "node_modules/bcrypt-pbkdf": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
-      "integrity": "sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "tweetnacl": "^0.14.3"
-      }
-    },
     "node_modules/bfj": {
       "version": "7.0.2",
       "resolved": "https://registry.npmjs.org/bfj/-/bfj-7.0.2.tgz",
@@ -7707,44 +7636,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/camelcase-keys": {
-      "version": "6.2.2",
-      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-6.2.2.tgz",
-      "integrity": "sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "camelcase": "^5.3.1",
-        "map-obj": "^4.0.0",
-        "quick-lru": "^4.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/camelcase-keys/node_modules/camelcase": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/camelcase-keys/node_modules/quick-lru": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-4.0.1.tgz",
-      "integrity": "sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -7773,13 +7664,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/caseless": {
-      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
-      "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=",
-      "optional": true,
-      "peer": true
-    },
     "node_modules/cfb": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.1.tgz",
@@ -8804,19 +8688,6 @@
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
       "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA=="
     },
-    "node_modules/dashdash": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
-      "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "assert-plus": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10"
-      }
-    },
     "node_modules/data-urls": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-2.0.0.tgz",
@@ -8851,40 +8722,6 @@
         }
       }
     },
-    "node_modules/decamelize": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
-      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/decamelize-keys": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/decamelize-keys/-/decamelize-keys-1.1.0.tgz",
-      "integrity": "sha1-0XGoeTMlKAfrPLYdwcFEXQeN8tk=",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "decamelize": "^1.1.0",
-        "map-obj": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/decamelize-keys/node_modules/map-obj": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
-      "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/decimal.js": {
       "version": "10.3.1",
       "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.3.1.tgz",
@@ -9298,17 +9135,6 @@
       "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.3.tgz",
       "integrity": "sha512-iRDI1QeCQIhMCZk48DRDMVgQSSBDmbzzNhnxIo+pwx3swkfjMh6vh0nWLq1NdvGHLKH6wIrAM3vQWeTj6qeoug=="
     },
-    "node_modules/ecc-jsbn": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
-      "integrity": "sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "jsbn": "~0.1.0",
-        "safer-buffer": "^2.1.0"
-      }
-    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -10382,23 +10208,6 @@
         }
       ]
     },
-    "node_modules/extend": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
-      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
-      "optional": true,
-      "peer": true
-    },
-    "node_modules/extsprintf": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
-      "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=",
-      "engines": [
-        "node >=0.6.0"
-      ],
-      "optional": true,
-      "peer": true
-    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -10657,16 +10466,6 @@
       "resolved": "https://registry.npmjs.org/foreach/-/foreach-2.0.5.tgz",
       "integrity": "sha1-C+4AUBiusmDQo6865ljdATbsG5k="
     },
-    "node_modules/forever-agent": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
-      "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/fork-ts-checker-webpack-plugin": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.0.tgz",
@@ -10953,19 +10752,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/gaze": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/gaze/-/gaze-1.1.3.tgz",
-      "integrity": "sha512-BRdNm8hbWzFzWHERTrejLqwHDfS4GibPoq5wjTPIoJHoBtKGPg3xAFfxmM+9ztbXelxcf2hwQcaz1PtmFeue8g==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "globule": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 4.0.0"
-      }
-    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -11066,16 +10852,6 @@
         "node": ">=8.0.0"
       }
     },
-    "node_modules/get-stdin": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
-      "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/get-stream": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
@@ -11102,16 +10878,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/getpass": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
-      "integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "assert-plus": "^1.0.0"
-      }
-    },
     "node_modules/glob": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
@@ -11209,42 +10975,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/globule": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/globule/-/globule-1.3.3.tgz",
-      "integrity": "sha512-mb1aYtDbIjTu4ShMB85m3UzjX9BVKe9WCzsnfMSZk+K5GpIbBOexgg4PPCt5eHDEG5/ZQAUX2Kct02zfiPLsKg==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "glob": "~7.1.1",
-        "lodash": "~4.17.10",
-        "minimatch": "~3.0.2"
-      },
-      "engines": {
-        "node": ">= 0.10"
-      }
-    },
-    "node_modules/globule/node_modules/glob": {
-      "version": "7.1.7",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
-      "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "fs.realpath": "^1.0.0",
-        "inflight": "^1.0.4",
-        "inherits": "2",
-        "minimatch": "^3.0.4",
-        "once": "^1.3.0",
-        "path-is-absolute": "^1.0.0"
-      },
-      "engines": {
-        "node": "*"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/glsl-noise": {
       "version": "0.0.0",
       "resolved": "https://registry.npmjs.org/glsl-noise/-/glsl-noise-0.0.0.tgz",
@@ -11274,41 +11004,6 @@
       "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
       "integrity": "sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg=="
     },
-    "node_modules/har-schema": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
-      "integrity": "sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/har-validator": {
-      "version": "5.1.5",
-      "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.5.tgz",
-      "integrity": "sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==",
-      "deprecated": "this library is no longer supported",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "ajv": "^6.12.3",
-        "har-schema": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/hard-rejection": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/hard-rejection/-/hard-rejection-2.1.0.tgz",
-      "integrity": "sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/harmony-reflect": {
       "version": "1.6.2",
       "resolved": "https://registry.npmjs.org/harmony-reflect/-/harmony-reflect-1.6.2.tgz",
@@ -11408,19 +11103,6 @@
         "node": ">= 6.0.0"
       }
     },
-    "node_modules/hosted-git-info": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
-      "integrity": "sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "lru-cache": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/hpack.js": {
       "version": "2.1.6",
       "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
@@ -11618,22 +11300,6 @@
         "@types/express": "^4.17.13"
       }
     },
-    "node_modules/http-signature": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
-      "integrity": "sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "assert-plus": "^1.0.0",
-        "jsprim": "^1.2.2",
-        "sshpk": "^1.7.0"
-      },
-      "engines": {
-        "node": ">=0.8",
-        "npm": ">=1.3.7"
-      }
-    },
     "node_modules/https-proxy-agent": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.0.tgz",
@@ -12334,13 +12000,6 @@
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA="
     },
-    "node_modules/isstream": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
-      "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
-      "optional": true,
-      "peer": true
-    },
     "node_modules/istanbul-lib-coverage": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz",
@@ -14140,13 +13799,6 @@
         "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
-    "node_modules/js-base64": {
-      "version": "2.6.4",
-      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
-      "integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==",
-      "optional": true,
-      "peer": true
-    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -14164,13 +13816,6 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
-    "node_modules/jsbn": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
-      "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=",
-      "optional": true,
-      "peer": true
-    },
     "node_modules/jsdom": {
       "version": "16.7.0",
       "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-16.7.0.tgz",
@@ -14252,13 +13897,6 @@
       "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
       "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE="
     },
-    "node_modules/json-stringify-safe": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
-      "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=",
-      "optional": true,
-      "peer": true
-    },
     "node_modules/json5": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz",
@@ -14292,22 +13930,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/jsprim": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.2.tgz",
-      "integrity": "sha512-P2bSOMAc/ciLz6DzgjVlGJP9+BrJWu5UDGK70C2iweC5QBIeFf0ZXRvGjEj2uYgrY2MkAAhsSWHDWlFtEroZWw==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "assert-plus": "1.0.0",
-        "extsprintf": "1.3.0",
-        "json-schema": "0.4.0",
-        "verror": "1.10.0"
-      },
-      "engines": {
-        "node": ">=0.6.0"
-      }
-    },
     "node_modules/jsx-ast-utils": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.2.1.tgz",
@@ -14610,19 +14232,6 @@
         "tmpl": "1.0.5"
       }
     },
-    "node_modules/map-obj": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-4.3.0.tgz",
-      "integrity": "sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/matchmediaquery": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.3.1.tgz",
@@ -14655,46 +14264,6 @@
         "node": ">= 4.0.0"
       }
     },
-    "node_modules/meow": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/meow/-/meow-9.0.0.tgz",
-      "integrity": "sha512-+obSblOQmRhcyBt62furQqRAQpNyWXo8BuQ5bN7dG8wmwQ+vwHKp/rCFD4CrTP8CsDQD1sjoZ94K417XEUk8IQ==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "@types/minimist": "^1.2.0",
-        "camelcase-keys": "^6.2.2",
-        "decamelize": "^1.2.0",
-        "decamelize-keys": "^1.1.0",
-        "hard-rejection": "^2.1.0",
-        "minimist-options": "4.1.0",
-        "normalize-package-data": "^3.0.0",
-        "read-pkg-up": "^7.0.1",
-        "redent": "^3.0.0",
-        "trim-newlines": "^3.0.0",
-        "type-fest": "^0.18.0",
-        "yargs-parser": "^20.2.3"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/meow/node_modules/type-fest": {
-      "version": "0.18.1",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.18.1.tgz",
-      "integrity": "sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/merge-descriptors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
@@ -14875,31 +14444,6 @@
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
       "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
     },
-    "node_modules/minimist-options": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-4.1.0.tgz",
-      "integrity": "sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "arrify": "^1.0.1",
-        "is-plain-obj": "^1.1.0",
-        "kind-of": "^6.0.3"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/minimist-options/node_modules/is-plain-obj": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
-      "integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4=",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/minipass": {
       "version": "3.1.6",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.6.tgz",
@@ -15026,13 +14570,6 @@
       "resolved": "https://registry.npmjs.org/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz",
       "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE="
     },
-    "node_modules/nan": {
-      "version": "2.15.0",
-      "resolved": "https://registry.npmjs.org/nan/-/nan-2.15.0.tgz",
-      "integrity": "sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ==",
-      "optional": true,
-      "peer": true
-    },
     "node_modules/nanoid": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.3.tgz",
@@ -15191,113 +14728,6 @@
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.1.tgz",
       "integrity": "sha512-CqyzN6z7Q6aMeF/ktcMVTzhAHCEpf8SOarwpzpf8pNBY2k5/oM34UHldUwp8VKI7uxct2HxSRdJjBaZeESzcxA=="
     },
-    "node_modules/node-sass": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-7.0.1.tgz",
-      "integrity": "sha512-uMy+Xt29NlqKCFdFRZyXKOTqGt+QaKHexv9STj2WeLottnlqZEEWx6Bj0MXNthmFRRdM/YwyNo/8Tr46TOM0jQ==",
-      "hasInstallScript": true,
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "async-foreach": "^0.1.3",
-        "chalk": "^4.1.2",
-        "cross-spawn": "^7.0.3",
-        "gaze": "^1.0.0",
-        "get-stdin": "^4.0.1",
-        "glob": "^7.0.3",
-        "lodash": "^4.17.15",
-        "meow": "^9.0.0",
-        "nan": "^2.13.2",
-        "node-gyp": "^8.4.1",
-        "npmlog": "^5.0.0",
-        "request": "^2.88.0",
-        "sass-graph": "4.0.0",
-        "stdout-stream": "^1.4.0",
-        "true-case-path": "^1.0.2"
-      },
-      "bin": {
-        "node-sass": "bin/node-sass"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/node-sass/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/node-sass/node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
-    "node_modules/node-sass/node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/node-sass/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "optional": true,
-      "peer": true
-    },
-    "node_modules/node-sass/node_modules/has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/node-sass/node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/nopt": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz",
@@ -15312,22 +14742,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/normalize-package-data": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-3.0.3.tgz",
-      "integrity": "sha512-p2W1sgqij3zMMyRC067Dg16bfzVH+w7hyegmpIvZ4JNjqtGOVAIvLmjBx3yP7YTe9vKJgkoNOPjwQGogDoMXFA==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "hosted-git-info": "^4.0.1",
-        "is-core-module": "^2.5.0",
-        "semver": "^7.3.4",
-        "validate-npm-package-license": "^3.0.1"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -15398,16 +14812,6 @@
       "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.0.tgz",
       "integrity": "sha512-h2AatdwYH+JHiZpv7pt/gSX1XoRGb7L/qSIeuqA6GwYoF9w1vP1cw42TO0aI2pNyshRK5893hNSl+1//vHK7hQ=="
     },
-    "node_modules/oauth-sign": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
-      "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -15646,6 +15050,14 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/or": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/or/-/or-0.2.0.tgz",
+      "integrity": "sha512-BHB8VZq2isxkyRaCBZ6CZCbQBzCT+gy8LPiqdbMH1+Fd6biFj3v8ebjeYzzL51PbsApsPYnGegGTO6KLQMxxDw==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/overlap-area": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/overlap-area/-/overlap-area-1.0.0.tgz",
@@ -17472,6 +16884,14 @@
         }
       }
     },
+    "node_modules/react-icons": {
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.10.1.tgz",
+      "integrity": "sha512-/ngzDP/77tlCfqthiiGNZeYFACw85fUjZtLbedmJ5DTlNDIwETxhwBzdOJ21zj4iJdvc0J3y7yOsX3PpxAJzrw==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -18000,146 +17420,6 @@
         "react-dom": "^17.0.2"
       }
     },
-    "node_modules/read-pkg": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
-      "integrity": "sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "@types/normalize-package-data": "^2.4.0",
-        "normalize-package-data": "^2.5.0",
-        "parse-json": "^5.0.0",
-        "type-fest": "^0.6.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/read-pkg-up": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-7.0.1.tgz",
-      "integrity": "sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "find-up": "^4.1.0",
-        "read-pkg": "^5.2.0",
-        "type-fest": "^0.8.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/read-pkg-up/node_modules/find-up": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "locate-path": "^5.0.0",
-        "path-exists": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/read-pkg-up/node_modules/locate-path": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "p-locate": "^4.1.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/read-pkg-up/node_modules/p-limit": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "p-try": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/read-pkg-up/node_modules/p-locate": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "p-limit": "^2.2.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/read-pkg-up/node_modules/type-fest": {
-      "version": "0.8.1",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
-      "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/read-pkg/node_modules/hosted-git-info": {
-      "version": "2.8.9",
-      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
-      "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
-      "optional": true,
-      "peer": true
-    },
-    "node_modules/read-pkg/node_modules/normalize-package-data": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
-      "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "hosted-git-info": "^2.1.4",
-        "resolve": "^1.10.0",
-        "semver": "2 || 3 || 4 || 5",
-        "validate-npm-package-license": "^3.0.1"
-      }
-    },
-    "node_modules/read-pkg/node_modules/semver": {
-      "version": "5.7.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
-      "optional": true,
-      "peer": true,
-      "bin": {
-        "semver": "bin/semver"
-      }
-    },
-    "node_modules/read-pkg/node_modules/type-fest": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz",
-      "integrity": "sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/readable-stream": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
@@ -18328,89 +17608,6 @@
         "strip-ansi": "^6.0.1"
       }
     },
-    "node_modules/request": {
-      "version": "2.88.2",
-      "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
-      "integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
-      "deprecated": "request has been deprecated, see https://github.com/request/request/issues/3142",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "aws-sign2": "~0.7.0",
-        "aws4": "^1.8.0",
-        "caseless": "~0.12.0",
-        "combined-stream": "~1.0.6",
-        "extend": "~3.0.2",
-        "forever-agent": "~0.6.1",
-        "form-data": "~2.3.2",
-        "har-validator": "~5.1.3",
-        "http-signature": "~1.2.0",
-        "is-typedarray": "~1.0.0",
-        "isstream": "~0.1.2",
-        "json-stringify-safe": "~5.0.1",
-        "mime-types": "~2.1.19",
-        "oauth-sign": "~0.9.0",
-        "performance-now": "^2.1.0",
-        "qs": "~6.5.2",
-        "safe-buffer": "^5.1.2",
-        "tough-cookie": "~2.5.0",
-        "tunnel-agent": "^0.6.0",
-        "uuid": "^3.3.2"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/request/node_modules/form-data": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
-      "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "asynckit": "^0.4.0",
-        "combined-stream": "^1.0.6",
-        "mime-types": "^2.1.12"
-      },
-      "engines": {
-        "node": ">= 0.12"
-      }
-    },
-    "node_modules/request/node_modules/qs": {
-      "version": "6.5.3",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.3.tgz",
-      "integrity": "sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA==",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=0.6"
-      }
-    },
-    "node_modules/request/node_modules/tough-cookie": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
-      "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "psl": "^1.1.28",
-        "punycode": "^2.1.1"
-      },
-      "engines": {
-        "node": ">=0.8"
-      }
-    },
-    "node_modules/request/node_modules/uuid": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
-      "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
-      "deprecated": "Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.",
-      "optional": true,
-      "peer": true,
-      "bin": {
-        "uuid": "bin/uuid"
-      }
-    },
     "node_modules/require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -18712,54 +17909,6 @@
         "node": ">=12.0.0"
       }
     },
-    "node_modules/sass-graph": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-4.0.0.tgz",
-      "integrity": "sha512-WSO/MfXqKH7/TS8RdkCX3lVkPFQzCgbqdGsmSKq6tlPU+GpGEsa/5aW18JqItnqh+lPtcjifqdZ/VmiILkKckQ==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "glob": "^7.0.0",
-        "lodash": "^4.17.11",
-        "scss-tokenizer": "^0.3.0",
-        "yargs": "^17.2.1"
-      },
-      "bin": {
-        "sassgraph": "bin/sassgraph"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/sass-graph/node_modules/yargs": {
-      "version": "17.3.1",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.3.1.tgz",
-      "integrity": "sha512-WUANQeVgjLbNsEmGk20f+nlHgOqzRFpiGWVaBrYGYIGANIIu3lWjoyi0fNlFmJkvfhCZ6BXINe7/W2O2bV4iaA==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "cliui": "^7.0.2",
-        "escalade": "^3.1.1",
-        "get-caller-file": "^2.0.5",
-        "require-directory": "^2.1.1",
-        "string-width": "^4.2.3",
-        "y18n": "^5.0.5",
-        "yargs-parser": "^21.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/sass-graph/node_modules/yargs-parser": {
-      "version": "21.0.0",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.0.0.tgz",
-      "integrity": "sha512-z9kApYUOCwoeZ78rfRYYWdiU/iNL6mwwYlkkZfJoyMR1xps+NEBX5X7XmRpxkZHhXJ6+Ey00IwKxBBSW9FIjyA==",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/sass-loader": {
       "version": "12.4.0",
       "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.4.0.tgz",
@@ -18835,27 +17984,6 @@
         "url": "https://opencollective.com/webpack"
       }
     },
-    "node_modules/scss-tokenizer": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.3.0.tgz",
-      "integrity": "sha512-14Zl9GcbBvOT9057ZKjpz5yPOyUWG2ojd9D5io28wHRYsOrs7U95Q+KNL87+32p8rc+LvDpbu/i9ZYjM9Q+FsQ==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "js-base64": "^2.4.3",
-        "source-map": "^0.7.1"
-      }
-    },
-    "node_modules/scss-tokenizer/node_modules/source-map": {
-      "version": "0.7.3",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
-      "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -19243,42 +18371,6 @@
       "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
       "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
     },
-    "node_modules/spdx-correct": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz",
-      "integrity": "sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "spdx-expression-parse": "^3.0.0",
-        "spdx-license-ids": "^3.0.0"
-      }
-    },
-    "node_modules/spdx-exceptions": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz",
-      "integrity": "sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==",
-      "optional": true,
-      "peer": true
-    },
-    "node_modules/spdx-expression-parse": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
-      "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "spdx-exceptions": "^2.1.0",
-        "spdx-license-ids": "^3.0.0"
-      }
-    },
-    "node_modules/spdx-license-ids": {
-      "version": "3.0.11",
-      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.11.tgz",
-      "integrity": "sha512-Ctl2BrFiM0X3MANYgj3CkygxhRmr9mi6xhejbdO960nF6EDJApTYpn0BQnDKlnNBULKiCN1n3w9EBkHK8ZWg+g==",
-      "optional": true,
-      "peer": true
-    },
     "node_modules/spdy": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/spdy/-/spdy-4.0.2.tgz",
@@ -19350,32 +18442,6 @@
         "node": ">=0.8"
       }
     },
-    "node_modules/sshpk": {
-      "version": "1.17.0",
-      "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.17.0.tgz",
-      "integrity": "sha512-/9HIEs1ZXGhSPE8X6Ccm7Nam1z8KcoCqPdI7ecm1N33EzAetWahvQWVqLZtaZQ+IDKX4IyA2o0gBzqIMkAagHQ==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "asn1": "~0.2.3",
-        "assert-plus": "^1.0.0",
-        "bcrypt-pbkdf": "^1.0.0",
-        "dashdash": "^1.12.0",
-        "ecc-jsbn": "~0.1.1",
-        "getpass": "^0.1.1",
-        "jsbn": "~0.1.0",
-        "safer-buffer": "^2.0.2",
-        "tweetnacl": "~0.14.0"
-      },
-      "bin": {
-        "sshpk-conv": "bin/sshpk-conv",
-        "sshpk-sign": "bin/sshpk-sign",
-        "sshpk-verify": "bin/sshpk-verify"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/ssri": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.1.tgz",
@@ -19438,42 +18504,6 @@
         "node": ">= 0.6"
       }
     },
-    "node_modules/stdout-stream": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/stdout-stream/-/stdout-stream-1.4.1.tgz",
-      "integrity": "sha512-j4emi03KXqJWcIeF8eIXkjMFN1Cmb8gUlDYGeBALLPo5qdyTfA9bOtl8m33lRoC+vFMkP3gl0WsDr6+gzxbbTA==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "readable-stream": "^2.0.1"
-      }
-    },
-    "node_modules/stdout-stream/node_modules/readable-stream": {
-      "version": "2.3.7",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
-      "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "core-util-is": "~1.0.0",
-        "inherits": "~2.0.3",
-        "isarray": "~1.0.0",
-        "process-nextick-args": "~2.0.0",
-        "safe-buffer": "~5.1.1",
-        "string_decoder": "~1.1.1",
-        "util-deprecate": "~1.0.1"
-      }
-    },
-    "node_modules/stdout-stream/node_modules/string_decoder": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "safe-buffer": "~5.1.0"
-      }
-    },
     "node_modules/string_decoder": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
@@ -20229,16 +19259,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/trim-newlines": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-3.0.1.tgz",
-      "integrity": "sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/triple-beam": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/triple-beam/-/triple-beam-1.3.0.tgz",
@@ -20271,16 +19291,6 @@
       "resolved": "https://registry.npmjs.org/troika-worker-utils/-/troika-worker-utils-0.46.0.tgz",
       "integrity": "sha512-bzOx5f2ZBxkFhXtIvDJlLn2AI3bzCkGVbCndl/2dL5QZrwHEKl45OEIilCxYQQWJG1rEbOD9O80tMjoYjw19OA=="
     },
-    "node_modules/true-case-path": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/true-case-path/-/true-case-path-1.0.3.tgz",
-      "integrity": "sha512-m6s2OdQe5wgpFMC+pAJ+q9djG82O2jcHPOI6RNg1yy9rCYR+WD6Nbpl32fDpfC56nirdRy+opFa/Vk7HYhqaew==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "glob": "^7.1.2"
-      }
-    },
     "node_modules/tryer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
@@ -20340,31 +19350,11 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
     },
-    "node_modules/tunnel-agent": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
-      "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "safe-buffer": "^5.0.1"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/turf-jsts": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/turf-jsts/-/turf-jsts-1.2.3.tgz",
       "integrity": "sha512-Ja03QIJlPuHt4IQ2FfGex4F4JAr8m3jpaHbFbQrgwr7s7L6U8ocrHiF3J1+wf9jzhGKxvDeaCAnGDot8OjGFyA=="
     },
-    "node_modules/tweetnacl": {
-      "version": "0.14.5",
-      "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
-      "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=",
-      "optional": true,
-      "peer": true
-    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -20618,17 +19608,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/validate-npm-package-license": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
-      "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "spdx-correct": "^3.0.0",
-        "spdx-expression-parse": "^3.0.0"
-      }
-    },
     "node_modules/vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -20637,28 +19616,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/verror": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
-      "integrity": "sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=",
-      "engines": [
-        "node >=0.6.0"
-      ],
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "assert-plus": "^1.0.0",
-        "core-util-is": "1.0.2",
-        "extsprintf": "^1.2.0"
-      }
-    },
-    "node_modules/verror/node_modules/core-util-is": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
-      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
-      "optional": true,
-      "peer": true
-    },
     "node_modules/void-elements": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
@@ -22903,9 +21860,11 @@
       }
     },
     "@babel/runtime": {
-      "version": "7.23.9",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.9.tgz",
-      "integrity": "sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==",
+
+      "version": "7.24.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.0.tgz",
+      "integrity": "sha512-Chk32uHMg6TnQdvw2e9IlqPpFX/6NLuK0Ys2PqLb7/gL5uFn9mXvK715FGLlOLQrcO4qIkNHkvPGktzzXexsFw==",
+
       "requires": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -23792,38 +22751,44 @@
       }
     },
     "@mui/private-theming": {
-      "version": "5.15.6",
-      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.6.tgz",
-      "integrity": "sha512-ZBX9E6VNUSscUOtU8uU462VvpvBS7eFl5VfxAzTRVQBHflzL+5KtnGrebgf6Nd6cdvxa1o0OomiaxSKoN2XDmg==",
-      "requires": {
-        "@babel/runtime": "^7.23.8",
-        "@mui/utils": "^5.15.6",
+
+      "version": "5.15.12",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.12.tgz",
+      "integrity": "sha512-cqoSo9sgA5HE+8vZClbLrq9EkyOnYysooepi5eKaKvJ41lReT2c5wOZAeDDM1+xknrMDos+0mT2zr3sZmUiRRA==",
+      "requires": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/utils": "^5.15.12",
+
         "prop-types": "^15.8.1"
       }
     },
     "@mui/styled-engine": {
-      "version": "5.15.6",
-      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.15.6.tgz",
-      "integrity": "sha512-KAn8P8xP/WigFKMlEYUpU9z2o7jJnv0BG28Qu1dhNQVutsLVIFdRf5Nb+0ijp2qgtcmygQ0FtfRuXv5LYetZTg==",
+
+      "version": "5.15.11",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.15.11.tgz",
+      "integrity": "sha512-So21AhAngqo07ces4S/JpX5UaMU2RHXpEA6hNzI6IQjd/1usMPxpgK8wkGgTe3JKmC2KDmH8cvoycq5H3Ii7/w==",
       "requires": {
-        "@babel/runtime": "^7.23.8",
+        "@babel/runtime": "^7.23.9",
         "@emotion/cache": "^11.11.0",
-        "csstype": "^3.1.2",
+        "csstype": "^3.1.3",
+
         "prop-types": "^15.8.1"
       }
     },
     "@mui/system": {
-      "version": "5.15.6",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.6.tgz",
-      "integrity": "sha512-J01D//u8IfXvaEHMBQX5aO2l7Q+P15nt96c4NskX7yp5/+UuZP8XCQJhtBtLuj+M2LLyXHYGmCPeblsmmscP2Q==",
-      "requires": {
-        "@babel/runtime": "^7.23.8",
-        "@mui/private-theming": "^5.15.6",
-        "@mui/styled-engine": "^5.15.6",
+
+      "version": "5.15.12",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.12.tgz",
+      "integrity": "sha512-/pq+GO6yN3X7r3hAwFTrzkAh7K1bTF5r8IzS79B9eyKJg7v6B/t4/zZYMR6OT9qEPtwf6rYN2Utg1e6Z7F1OgQ==",
+      "requires": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/private-theming": "^5.15.12",
+        "@mui/styled-engine": "^5.15.11",
         "@mui/types": "^7.2.13",
-        "@mui/utils": "^5.15.6",
+        "@mui/utils": "^5.15.12",
         "clsx": "^2.1.0",
-        "csstype": "^3.1.2",
+        "csstype": "^3.1.3",
+
         "prop-types": "^15.8.1"
       },
       "dependencies": {
@@ -23841,11 +22806,13 @@
       "requires": {}
     },
     "@mui/utils": {
-      "version": "5.15.6",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.6.tgz",
-      "integrity": "sha512-qfEhf+zfU9aQdbzo1qrSWlbPQhH1nCgeYgwhOVnj9Bn39shJQitEnXpSQpSNag8+uty5Od6PxmlNKPTnPySRKA==",
+
+      "version": "5.15.12",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.12.tgz",
+      "integrity": "sha512-8SDGCnO2DY9Yy+5bGzu00NZowSDtuyHP4H8gunhHGQoIlhlY2Z3w64wBzAOLpYw/ZhJNzksDTnS/i8qdJvxuow==",
       "requires": {
-        "@babel/runtime": "^7.23.8",
+        "@babel/runtime": "^7.23.9",
+
         "@types/prop-types": "^15.7.11",
         "prop-types": "^15.8.1",
         "react-is": "^18.2.0"
@@ -25977,25 +24944,11 @@
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
       "integrity": "sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw=="
     },
-    "@types/minimist": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.2.tgz",
-      "integrity": "sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==",
-      "optional": true,
-      "peer": true
-    },
     "@types/node": {
       "version": "16.11.21",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.21.tgz",
       "integrity": "sha512-Pf8M1XD9i1ksZEcCP8vuSNwooJ/bZapNmIzpmsMaL+jMI+8mEYU3PKvs+xDNuQcJWF/x24WzY4qxLtB0zNow9A=="
     },
-    "@types/normalize-package-data": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz",
-      "integrity": "sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==",
-      "optional": true,
-      "peer": true
-    },
     "@types/numeric": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/@types/numeric/-/numeric-1.2.2.tgz",
@@ -26705,35 +25658,11 @@
         "es-abstract": "^1.19.0"
       }
     },
-    "arrify": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
-      "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=",
-      "optional": true,
-      "peer": true
-    },
     "asap": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
       "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
     },
-    "asn1": {
-      "version": "0.2.6",
-      "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.6.tgz",
-      "integrity": "sha512-ix/FxPn0MDjeyJ7i/yoHGFt/EX6LyNbxSEhPPXODPL+KB0VPk86UYfL0lMdy+KCnv+fmvIzySwaK5COwqVbWTQ==",
-      "optional": true,
-      "peer": true,
-      "requires": {
-        "safer-buffer": "~2.1.0"
-      }
-    },
-    "assert-plus": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
-      "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
-      "optional": true,
-      "peer": true
-    },
     "ast-types-flow": {
       "version": "0.0.7",
       "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz",
@@ -26747,13 +25676,6 @@
         "lodash": "^4.17.14"
       }
     },
-    "async-foreach": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/async-foreach/-/async-foreach-0.1.3.tgz",
-      "integrity": "sha1-NhIfhFwFeBct5Bmpfb6x0W7DRUI=",
-      "optional": true,
-      "peer": true
-    },
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -26792,20 +25714,6 @@
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
       "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw=="
     },
-    "aws-sign2": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
-      "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=",
-      "optional": true,
-      "peer": true
-    },
-    "aws4": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.11.0.tgz",
-      "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
-      "optional": true,
-      "peer": true
-    },
     "axe-core": {
       "version": "4.3.5",
       "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.3.5.tgz",
@@ -27072,16 +25980,6 @@
       "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
       "integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY="
     },
-    "bcrypt-pbkdf": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
-      "integrity": "sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=",
-      "optional": true,
-      "peer": true,
-      "requires": {
-        "tweetnacl": "^0.14.3"
-      }
-    },
     "bfj": {
       "version": "7.0.2",
       "resolved": "https://registry.npmjs.org/bfj/-/bfj-7.0.2.tgz",
@@ -27323,34 +26221,6 @@
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
       "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA=="
     },
-    "camelcase-keys": {
-      "version": "6.2.2",
-      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-6.2.2.tgz",
-      "integrity": "sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==",
-      "optional": true,
-      "peer": true,
-      "requires": {
-        "camelcase": "^5.3.1",
-        "map-obj": "^4.0.0",
-        "quick-lru": "^4.0.1"
-      },
-      "dependencies": {
-        "camelcase": {
-          "version": "5.3.1",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
-          "optional": true,
-          "peer": true
-        },
-        "quick-lru": {
-          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-4.0.1.tgz",
-          "integrity": "sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==",
-          "optional": true,
-          "peer": true
-        }
-      }
-    },
     "caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -27372,13 +26242,6 @@
       "resolved": "https://registry.npmjs.org/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz",
       "integrity": "sha512-roIFONhcxog0JSSWbvVAh3OocukmSgpqOH6YpMkCvav/ySIV3JKg4Dc8vYtQjYi/UxpNE36r/9v+VqTQqgkYmw=="
     },
-    "caseless": {
-      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
-      "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=",
-      "optional": true,
-      "peer": true
-    },
     "cfb": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.1.tgz",
@@ -28141,16 +27004,6 @@
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
       "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA=="
     },
-    "dashdash": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
-      "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=",
-      "optional": true,
-      "peer": true,
-      "requires": {
-        "assert-plus": "^1.0.0"
-      }
-    },
     "data-urls": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-2.0.0.tgz",
@@ -28174,33 +27027,6 @@
         "ms": "2.1.2"
       }
     },
-    "decamelize": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
-      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
-      "optional": true,
-      "peer": true
-    },
-    "decamelize-keys": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/decamelize-keys/-/decamelize-keys-1.1.0.tgz",
-      "integrity": "sha1-0XGoeTMlKAfrPLYdwcFEXQeN8tk=",
-      "optional": true,
-      "peer": true,
-      "requires": {
-        "decamelize": "^1.1.0",
-        "map-obj": "^1.0.0"
-      },
-      "dependencies": {
-        "map-obj": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
-          "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=",
-          "optional": true,
-          "peer": true
-        }
-      }
-    },
     "decimal.js": {
       "version": "10.3.1",
       "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.3.1.tgz",
@@ -28535,17 +27361,6 @@
       "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.3.tgz",
       "integrity": "sha512-iRDI1QeCQIhMCZk48DRDMVgQSSBDmbzzNhnxIo+pwx3swkfjMh6vh0nWLq1NdvGHLKH6wIrAM3vQWeTj6qeoug=="
     },
-    "ecc-jsbn": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
-      "integrity": "sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=",
-      "optional": true,
-      "peer": true,
-      "requires": {
-        "jsbn": "~0.1.0",
-        "safer-buffer": "^2.1.0"
-      }
-    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -29333,20 +28148,6 @@
         }
       }
     },
-    "extend": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
-      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
-      "optional": true,
-      "peer": true
-    },
-    "extsprintf": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
-      "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=",
-      "optional": true,
-      "peer": true
-    },
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -29546,13 +28347,6 @@
       "resolved": "https://registry.npmjs.org/foreach/-/foreach-2.0.5.tgz",
       "integrity": "sha1-C+4AUBiusmDQo6865ljdATbsG5k="
     },
-    "forever-agent": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
-      "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=",
-      "optional": true,
-      "peer": true
-    },
     "fork-ts-checker-webpack-plugin": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.0.tgz",
@@ -29751,16 +28545,6 @@
         "wide-align": "^1.1.2"
       }
     },
-    "gaze": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/gaze/-/gaze-1.1.3.tgz",
-      "integrity": "sha512-BRdNm8hbWzFzWHERTrejLqwHDfS4GibPoq5wjTPIoJHoBtKGPg3xAFfxmM+9ztbXelxcf2hwQcaz1PtmFeue8g==",
-      "optional": true,
-      "peer": true,
-      "requires": {
-        "globule": "^1.0.0"
-      }
-    },
     "gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -29850,13 +28634,6 @@
       "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz",
       "integrity": "sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q=="
     },
-    "get-stdin": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
-      "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=",
-      "optional": true,
-      "peer": true
-    },
     "get-stream": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
@@ -29871,16 +28648,6 @@
         "get-intrinsic": "^1.1.1"
       }
     },
-    "getpass": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
-      "integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=",
-      "optional": true,
-      "peer": true,
-      "requires": {
-        "assert-plus": "^1.0.0"
-      }
-    },
     "glob": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
@@ -29953,35 +28720,6 @@
         "slash": "^3.0.0"
       }
     },
-    "globule": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/globule/-/globule-1.3.3.tgz",
-      "integrity": "sha512-mb1aYtDbIjTu4ShMB85m3UzjX9BVKe9WCzsnfMSZk+K5GpIbBOexgg4PPCt5eHDEG5/ZQAUX2Kct02zfiPLsKg==",
-      "optional": true,
-      "peer": true,
-      "requires": {
-        "glob": "~7.1.1",
-        "lodash": "~4.17.10",
-        "minimatch": "~3.0.2"
-      },
-      "dependencies": {
-        "glob": {
-          "version": "7.1.7",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
-          "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
-          "optional": true,
-          "peer": true,
-          "requires": {
-            "fs.realpath": "^1.0.0",
-            "inflight": "^1.0.4",
-            "inherits": "2",
-            "minimatch": "^3.0.4",
-            "once": "^1.3.0",
-            "path-is-absolute": "^1.0.0"
-          }
-        }
-      }
-    },
     "glsl-noise": {
       "version": "0.0.0",
       "resolved": "https://registry.npmjs.org/glsl-noise/-/glsl-noise-0.0.0.tgz",
@@ -30005,31 +28743,6 @@
       "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
       "integrity": "sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg=="
     },
-    "har-schema": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
-      "integrity": "sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=",
-      "optional": true,
-      "peer": true
-    },
-    "har-validator": {
-      "version": "5.1.5",
-      "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.5.tgz",
-      "integrity": "sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==",
-      "optional": true,
-      "peer": true,
-      "requires": {
-        "ajv": "^6.12.3",
-        "har-schema": "^2.0.0"
-      }
-    },
-    "hard-rejection": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/hard-rejection/-/hard-rejection-2.1.0.tgz",
-      "integrity": "sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==",
-      "optional": true,
-      "peer": true
-    },
     "harmony-reflect": {
       "version": "1.6.2",
       "resolved": "https://registry.npmjs.org/harmony-reflect/-/harmony-reflect-1.6.2.tgz",
@@ -30104,16 +28817,6 @@
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
       "integrity": "sha512-HRcs+2mr52W0K+x8RzcLzuPPmVIKMSv97RGHy0Ea9y/mpcaK+xTrjICA04KAHi4GRzxliNqNJEFYWHghy3rSfQ=="
     },
-    "hosted-git-info": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
-      "integrity": "sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==",
-      "optional": true,
-      "peer": true,
-      "requires": {
-        "lru-cache": "^6.0.0"
-      }
-    },
     "hpack.js": {
       "version": "2.1.6",
       "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
@@ -30272,18 +28975,6 @@
         "micromatch": "^4.0.2"
       }
     },
-    "http-signature": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
-      "integrity": "sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=",
-      "optional": true,
-      "peer": true,
-      "requires": {
-        "assert-plus": "^1.0.0",
-        "jsprim": "^1.2.2",
-        "sshpk": "^1.7.0"
-      }
-    },
     "https-proxy-agent": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.0.tgz",
@@ -30761,13 +29452,6 @@
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA="
     },
-    "isstream": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
-      "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
-      "optional": true,
-      "peer": true
-    },
     "istanbul-lib-coverage": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz",
@@ -32072,13 +30756,6 @@
         }
       }
     },
-    "js-base64": {
-      "version": "2.6.4",
-      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
-      "integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==",
-      "optional": true,
-      "peer": true
-    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -32093,13 +30770,6 @@
         "esprima": "^4.0.0"
       }
     },
-    "jsbn": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
-      "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=",
-      "optional": true,
-      "peer": true
-    },
     "jsdom": {
       "version": "16.7.0",
       "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-16.7.0.tgz",
@@ -32164,13 +30834,6 @@
       "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
       "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE="
     },
-    "json-stringify-safe": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
-      "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=",
-      "optional": true,
-      "peer": true
-    },
     "json5": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz",
@@ -32193,19 +30856,6 @@
       "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-5.0.0.tgz",
       "integrity": "sha512-PNYZIdMjVIvVgDSYKTT63Y+KZ6IZvGRNNWcxwD+GNnUz1MKPfv30J8ueCjdwcN0nDx2SlshgyB7Oy0epAzVRRg=="
     },
-    "jsprim": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.2.tgz",
-      "integrity": "sha512-P2bSOMAc/ciLz6DzgjVlGJP9+BrJWu5UDGK70C2iweC5QBIeFf0ZXRvGjEj2uYgrY2MkAAhsSWHDWlFtEroZWw==",
-      "optional": true,
-      "peer": true,
-      "requires": {
-        "assert-plus": "1.0.0",
-        "extsprintf": "1.3.0",
-        "json-schema": "0.4.0",
-        "verror": "1.10.0"
-      }
-    },
     "jsx-ast-utils": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.2.1.tgz",
@@ -32458,13 +31108,6 @@
         "tmpl": "1.0.5"
       }
     },
-    "map-obj": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-4.3.0.tgz",
-      "integrity": "sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==",
-      "optional": true,
-      "peer": true
-    },
     "matchmediaquery": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.3.1.tgz",
@@ -32491,36 +31134,6 @@
         "fs-monkey": "1.0.3"
       }
     },
-    "meow": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/meow/-/meow-9.0.0.tgz",
-      "integrity": "sha512-+obSblOQmRhcyBt62furQqRAQpNyWXo8BuQ5bN7dG8wmwQ+vwHKp/rCFD4CrTP8CsDQD1sjoZ94K417XEUk8IQ==",
-      "optional": true,
-      "peer": true,
-      "requires": {
-        "@types/minimist": "^1.2.0",
-        "camelcase-keys": "^6.2.2",
-        "decamelize": "^1.2.0",
-        "decamelize-keys": "^1.1.0",
-        "hard-rejection": "^2.1.0",
-        "minimist-options": "4.1.0",
-        "normalize-package-data": "^3.0.0",
-        "read-pkg-up": "^7.0.1",
-        "redent": "^3.0.0",
-        "trim-newlines": "^3.0.0",
-        "type-fest": "^0.18.0",
-        "yargs-parser": "^20.2.3"
-      },
-      "dependencies": {
-        "type-fest": {
-          "version": "0.18.1",
-          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.18.1.tgz",
-          "integrity": "sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==",
-          "optional": true,
-          "peer": true
-        }
-      }
-    },
     "merge-descriptors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
@@ -32647,27 +31260,6 @@
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
       "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
     },
-    "minimist-options": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-4.1.0.tgz",
-      "integrity": "sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==",
-      "optional": true,
-      "peer": true,
-      "requires": {
-        "arrify": "^1.0.1",
-        "is-plain-obj": "^1.1.0",
-        "kind-of": "^6.0.3"
-      },
-      "dependencies": {
-        "is-plain-obj": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
-          "integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4=",
-          "optional": true,
-          "peer": true
-        }
-      }
-    },
     "minipass": {
       "version": "3.1.6",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.6.tgz",
@@ -32765,13 +31357,6 @@
       "resolved": "https://registry.npmjs.org/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz",
       "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE="
     },
-    "nan": {
-      "version": "2.15.0",
-      "resolved": "https://registry.npmjs.org/nan/-/nan-2.15.0.tgz",
-      "integrity": "sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ==",
-      "optional": true,
-      "peer": true
-    },
     "nanoid": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.3.tgz",
@@ -32899,87 +31484,6 @@
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.1.tgz",
       "integrity": "sha512-CqyzN6z7Q6aMeF/ktcMVTzhAHCEpf8SOarwpzpf8pNBY2k5/oM34UHldUwp8VKI7uxct2HxSRdJjBaZeESzcxA=="
     },
-    "node-sass": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-7.0.1.tgz",
-      "integrity": "sha512-uMy+Xt29NlqKCFdFRZyXKOTqGt+QaKHexv9STj2WeLottnlqZEEWx6Bj0MXNthmFRRdM/YwyNo/8Tr46TOM0jQ==",
-      "optional": true,
-      "peer": true,
-      "requires": {
-        "async-foreach": "^0.1.3",
-        "chalk": "^4.1.2",
-        "cross-spawn": "^7.0.3",
-        "gaze": "^1.0.0",
-        "get-stdin": "^4.0.1",
-        "glob": "^7.0.3",
-        "lodash": "^4.17.15",
-        "meow": "^9.0.0",
-        "nan": "^2.13.2",
-        "node-gyp": "^8.4.1",
-        "npmlog": "^5.0.0",
-        "request": "^2.88.0",
-        "sass-graph": "4.0.0",
-        "stdout-stream": "^1.4.0",
-        "true-case-path": "^1.0.2"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "optional": true,
-          "peer": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-          "optional": true,
-          "peer": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "optional": true,
-          "peer": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "optional": true,
-          "peer": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "optional": true,
-          "peer": true
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "optional": true,
-          "peer": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
     "nopt": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz",
@@ -32988,19 +31492,6 @@
         "abbrev": "1"
       }
     },
-    "normalize-package-data": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-3.0.3.tgz",
-      "integrity": "sha512-p2W1sgqij3zMMyRC067Dg16bfzVH+w7hyegmpIvZ4JNjqtGOVAIvLmjBx3yP7YTe9vKJgkoNOPjwQGogDoMXFA==",
-      "optional": true,
-      "peer": true,
-      "requires": {
-        "hosted-git-info": "^4.0.1",
-        "is-core-module": "^2.5.0",
-        "semver": "^7.3.4",
-        "validate-npm-package-license": "^3.0.1"
-      }
-    },
     "normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -33053,13 +31544,6 @@
       "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.0.tgz",
       "integrity": "sha512-h2AatdwYH+JHiZpv7pt/gSX1XoRGb7L/qSIeuqA6GwYoF9w1vP1cw42TO0aI2pNyshRK5893hNSl+1//vHK7hQ=="
     },
-    "oauth-sign": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
-      "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==",
-      "optional": true,
-      "peer": true
-    },
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -33223,6 +31707,11 @@
         "word-wrap": "^1.2.3"
       }
     },
+    "or": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/or/-/or-0.2.0.tgz",
+      "integrity": "sha512-BHB8VZq2isxkyRaCBZ6CZCbQBzCT+gy8LPiqdbMH1+Fd6biFj3v8ebjeYzzL51PbsApsPYnGegGTO6KLQMxxDw=="
+    },
     "overlap-area": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/overlap-area/-/overlap-area-1.0.0.tgz",
@@ -34428,6 +32917,12 @@
         "html-parse-stringify": "^3.0.1"
       }
     },
+    "react-icons": {
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.10.1.tgz",
+      "integrity": "sha512-/ngzDP/77tlCfqthiiGNZeYFACw85fUjZtLbedmJ5DTlNDIwETxhwBzdOJ21zj4iJdvc0J3y7yOsX3PpxAJzrw==",
+      "requires": {}
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -34778,117 +33273,6 @@
       "integrity": "sha512-a5AChOWhjo0RmxsNZXGQIlNh3e3nLU6m4V6M+6dlbPNk5d+MtMxgKWyA5zpR06Lp3OZkZVF9nR8JeWSvKwck9g==",
       "requires": {}
     },
-    "read-pkg": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
-      "integrity": "sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==",
-      "optional": true,
-      "peer": true,
-      "requires": {
-        "@types/normalize-package-data": "^2.4.0",
-        "normalize-package-data": "^2.5.0",
-        "parse-json": "^5.0.0",
-        "type-fest": "^0.6.0"
-      },
-      "dependencies": {
-        "hosted-git-info": {
-          "version": "2.8.9",
-          "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
-          "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
-          "optional": true,
-          "peer": true
-        },
-        "normalize-package-data": {
-          "version": "2.5.0",
-          "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
-          "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
-          "optional": true,
-          "peer": true,
-          "requires": {
-            "hosted-git-info": "^2.1.4",
-            "resolve": "^1.10.0",
-            "semver": "2 || 3 || 4 || 5",
-            "validate-npm-package-license": "^3.0.1"
-          }
-        },
-        "semver": {
-          "version": "5.7.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
-          "optional": true,
-          "peer": true
-        },
-        "type-fest": {
-          "version": "0.6.0",
-          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz",
-          "integrity": "sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==",
-          "optional": true,
-          "peer": true
-        }
-      }
-    },
-    "read-pkg-up": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-7.0.1.tgz",
-      "integrity": "sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==",
-      "optional": true,
-      "peer": true,
-      "requires": {
-        "find-up": "^4.1.0",
-        "read-pkg": "^5.2.0",
-        "type-fest": "^0.8.1"
-      },
-      "dependencies": {
-        "find-up": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-          "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-          "optional": true,
-          "peer": true,
-          "requires": {
-            "locate-path": "^5.0.0",
-            "path-exists": "^4.0.0"
-          }
-        },
-        "locate-path": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-          "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-          "optional": true,
-          "peer": true,
-          "requires": {
-            "p-locate": "^4.1.0"
-          }
-        },
-        "p-limit": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-          "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-          "optional": true,
-          "peer": true,
-          "requires": {
-            "p-try": "^2.0.0"
-          }
-        },
-        "p-locate": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-          "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-          "optional": true,
-          "peer": true,
-          "requires": {
-            "p-limit": "^2.2.0"
-          }
-        },
-        "type-fest": {
-          "version": "0.8.1",
-          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
-          "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
-          "optional": true,
-          "peer": true
-        }
-      }
-    },
     "readable-stream": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
@@ -35038,74 +33422,6 @@
         "strip-ansi": "^6.0.1"
       }
     },
-    "request": {
-      "version": "2.88.2",
-      "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
-      "integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
-      "optional": true,
-      "peer": true,
-      "requires": {
-        "aws-sign2": "~0.7.0",
-        "aws4": "^1.8.0",
-        "caseless": "~0.12.0",
-        "combined-stream": "~1.0.6",
-        "extend": "~3.0.2",
-        "forever-agent": "~0.6.1",
-        "form-data": "~2.3.2",
-        "har-validator": "~5.1.3",
-        "http-signature": "~1.2.0",
-        "is-typedarray": "~1.0.0",
-        "isstream": "~0.1.2",
-        "json-stringify-safe": "~5.0.1",
-        "mime-types": "~2.1.19",
-        "oauth-sign": "~0.9.0",
-        "performance-now": "^2.1.0",
-        "qs": "~6.5.2",
-        "safe-buffer": "^5.1.2",
-        "tough-cookie": "~2.5.0",
-        "tunnel-agent": "^0.6.0",
-        "uuid": "^3.3.2"
-      },
-      "dependencies": {
-        "form-data": {
-          "version": "2.3.3",
-          "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
-          "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
-          "optional": true,
-          "peer": true,
-          "requires": {
-            "asynckit": "^0.4.0",
-            "combined-stream": "^1.0.6",
-            "mime-types": "^2.1.12"
-          }
-        },
-        "qs": {
-          "version": "6.5.3",
-          "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.3.tgz",
-          "integrity": "sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA==",
-          "optional": true,
-          "peer": true
-        },
-        "tough-cookie": {
-          "version": "2.5.0",
-          "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
-          "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
-          "optional": true,
-          "peer": true,
-          "requires": {
-            "psl": "^1.1.28",
-            "punycode": "^2.1.1"
-          }
-        },
-        "uuid": {
-          "version": "3.4.0",
-          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
-          "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
-          "optional": true,
-          "peer": true
-        }
-      }
-    },
     "require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -35311,44 +33627,6 @@
         "source-map-js": ">=0.6.2 <2.0.0"
       }
     },
-    "sass-graph": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-4.0.0.tgz",
-      "integrity": "sha512-WSO/MfXqKH7/TS8RdkCX3lVkPFQzCgbqdGsmSKq6tlPU+GpGEsa/5aW18JqItnqh+lPtcjifqdZ/VmiILkKckQ==",
-      "optional": true,
-      "peer": true,
-      "requires": {
-        "glob": "^7.0.0",
-        "lodash": "^4.17.11",
-        "scss-tokenizer": "^0.3.0",
-        "yargs": "^17.2.1"
-      },
-      "dependencies": {
-        "yargs": {
-          "version": "17.3.1",
-          "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.3.1.tgz",
-          "integrity": "sha512-WUANQeVgjLbNsEmGk20f+nlHgOqzRFpiGWVaBrYGYIGANIIu3lWjoyi0fNlFmJkvfhCZ6BXINe7/W2O2bV4iaA==",
-          "optional": true,
-          "peer": true,
-          "requires": {
-            "cliui": "^7.0.2",
-            "escalade": "^3.1.1",
-            "get-caller-file": "^2.0.5",
-            "require-directory": "^2.1.1",
-            "string-width": "^4.2.3",
-            "y18n": "^5.0.5",
-            "yargs-parser": "^21.0.0"
-          }
-        },
-        "yargs-parser": {
-          "version": "21.0.0",
-          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.0.0.tgz",
-          "integrity": "sha512-z9kApYUOCwoeZ78rfRYYWdiU/iNL6mwwYlkkZfJoyMR1xps+NEBX5X7XmRpxkZHhXJ6+Ey00IwKxBBSW9FIjyA==",
-          "optional": true,
-          "peer": true
-        }
-      }
-    },
     "sass-loader": {
       "version": "12.4.0",
       "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.4.0.tgz",
@@ -35390,26 +33668,6 @@
         "ajv-keywords": "^3.5.2"
       }
     },
-    "scss-tokenizer": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.3.0.tgz",
-      "integrity": "sha512-14Zl9GcbBvOT9057ZKjpz5yPOyUWG2ojd9D5io28wHRYsOrs7U95Q+KNL87+32p8rc+LvDpbu/i9ZYjM9Q+FsQ==",
-      "optional": true,
-      "peer": true,
-      "requires": {
-        "js-base64": "^2.4.3",
-        "source-map": "^0.7.1"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.7.3",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
-          "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
-          "optional": true,
-          "peer": true
-        }
-      }
-    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -35741,42 +33999,6 @@
       "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
       "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
     },
-    "spdx-correct": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz",
-      "integrity": "sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==",
-      "optional": true,
-      "peer": true,
-      "requires": {
-        "spdx-expression-parse": "^3.0.0",
-        "spdx-license-ids": "^3.0.0"
-      }
-    },
-    "spdx-exceptions": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz",
-      "integrity": "sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==",
-      "optional": true,
-      "peer": true
-    },
-    "spdx-expression-parse": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
-      "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
-      "optional": true,
-      "peer": true,
-      "requires": {
-        "spdx-exceptions": "^2.1.0",
-        "spdx-license-ids": "^3.0.0"
-      }
-    },
-    "spdx-license-ids": {
-      "version": "3.0.11",
-      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.11.tgz",
-      "integrity": "sha512-Ctl2BrFiM0X3MANYgj3CkygxhRmr9mi6xhejbdO960nF6EDJApTYpn0BQnDKlnNBULKiCN1n3w9EBkHK8ZWg+g==",
-      "optional": true,
-      "peer": true
-    },
     "spdy": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/spdy/-/spdy-4.0.2.tgz",
@@ -35831,24 +34053,6 @@
         "frac": "~1.1.2"
       }
     },
-    "sshpk": {
-      "version": "1.17.0",
-      "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.17.0.tgz",
-      "integrity": "sha512-/9HIEs1ZXGhSPE8X6Ccm7Nam1z8KcoCqPdI7ecm1N33EzAetWahvQWVqLZtaZQ+IDKX4IyA2o0gBzqIMkAagHQ==",
-      "optional": true,
-      "peer": true,
-      "requires": {
-        "asn1": "~0.2.3",
-        "assert-plus": "^1.0.0",
-        "bcrypt-pbkdf": "^1.0.0",
-        "dashdash": "^1.12.0",
-        "ecc-jsbn": "~0.1.1",
-        "getpass": "^0.1.1",
-        "jsbn": "~0.1.0",
-        "safer-buffer": "^2.0.2",
-        "tweetnacl": "~0.14.0"
-      }
-    },
     "ssri": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.1.tgz",
@@ -35898,44 +34102,6 @@
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
       "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow="
     },
-    "stdout-stream": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/stdout-stream/-/stdout-stream-1.4.1.tgz",
-      "integrity": "sha512-j4emi03KXqJWcIeF8eIXkjMFN1Cmb8gUlDYGeBALLPo5qdyTfA9bOtl8m33lRoC+vFMkP3gl0WsDr6+gzxbbTA==",
-      "optional": true,
-      "peer": true,
-      "requires": {
-        "readable-stream": "^2.0.1"
-      },
-      "dependencies": {
-        "readable-stream": {
-          "version": "2.3.7",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
-          "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
-          "optional": true,
-          "peer": true,
-          "requires": {
-            "core-util-is": "~1.0.0",
-            "inherits": "~2.0.3",
-            "isarray": "~1.0.0",
-            "process-nextick-args": "~2.0.0",
-            "safe-buffer": "~5.1.1",
-            "string_decoder": "~1.1.1",
-            "util-deprecate": "~1.0.1"
-          }
-        },
-        "string_decoder": {
-          "version": "1.1.1",
-          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-          "optional": true,
-          "peer": true,
-          "requires": {
-            "safe-buffer": "~5.1.0"
-          }
-        }
-      }
-    },
     "string_decoder": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
@@ -36480,13 +34646,6 @@
         "punycode": "^2.1.1"
       }
     },
-    "trim-newlines": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-3.0.1.tgz",
-      "integrity": "sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==",
-      "optional": true,
-      "peer": true
-    },
     "triple-beam": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/triple-beam/-/triple-beam-1.3.0.tgz",
@@ -36514,16 +34673,6 @@
       "resolved": "https://registry.npmjs.org/troika-worker-utils/-/troika-worker-utils-0.46.0.tgz",
       "integrity": "sha512-bzOx5f2ZBxkFhXtIvDJlLn2AI3bzCkGVbCndl/2dL5QZrwHEKl45OEIilCxYQQWJG1rEbOD9O80tMjoYjw19OA=="
     },
-    "true-case-path": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/true-case-path/-/true-case-path-1.0.3.tgz",
-      "integrity": "sha512-m6s2OdQe5wgpFMC+pAJ+q9djG82O2jcHPOI6RNg1yy9rCYR+WD6Nbpl32fDpfC56nirdRy+opFa/Vk7HYhqaew==",
-      "optional": true,
-      "peer": true,
-      "requires": {
-        "glob": "^7.1.2"
-      }
-    },
     "tryer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
@@ -36575,28 +34724,11 @@
         }
       }
     },
-    "tunnel-agent": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
-      "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=",
-      "optional": true,
-      "peer": true,
-      "requires": {
-        "safe-buffer": "^5.0.1"
-      }
-    },
     "turf-jsts": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/turf-jsts/-/turf-jsts-1.2.3.tgz",
       "integrity": "sha512-Ja03QIJlPuHt4IQ2FfGex4F4JAr8m3jpaHbFbQrgwr7s7L6U8ocrHiF3J1+wf9jzhGKxvDeaCAnGDot8OjGFyA=="
     },
-    "tweetnacl": {
-      "version": "0.14.5",
-      "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
-      "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=",
-      "optional": true,
-      "peer": true
-    },
     "type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -36784,43 +34916,11 @@
         }
       }
     },
-    "validate-npm-package-license": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
-      "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
-      "optional": true,
-      "peer": true,
-      "requires": {
-        "spdx-correct": "^3.0.0",
-        "spdx-expression-parse": "^3.0.0"
-      }
-    },
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
       "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
     },
-    "verror": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
-      "integrity": "sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=",
-      "optional": true,
-      "peer": true,
-      "requires": {
-        "assert-plus": "^1.0.0",
-        "core-util-is": "1.0.2",
-        "extsprintf": "^1.2.0"
-      },
-      "dependencies": {
-        "core-util-is": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
-          "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
-          "optional": true,
-          "peer": true
-        }
-      }
-    },
     "void-elements": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
diff --git a/package.json b/package.json
index 5e61b531..4fb707fd 100644
--- a/package.json
+++ b/package.json
@@ -30,12 +30,14 @@
     "i18next-http-backend": "^1.4.4",
     "import-js": "^5.0.0",
     "numeric": "^1.2.6",
+    "or": "^0.2.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-draggable": "^4.4.4",
     "react-dropzone": "^12.0.4",
     "react-hook-form": "^7.30.0",
     "react-i18next": "^11.18.6",
+    "react-icons": "^4.10.1",
     "react-redux": "^7.2.6",
     "react-responsive": "^9.0.0-beta.6",
     "react-router-dom": "^6.2.1",
diff --git a/src/App/App.tsx b/src/App/App.tsx
index ef5bee19..720985bb 100644
--- a/src/App/App.tsx
+++ b/src/App/App.tsx
@@ -3,6 +3,8 @@ import styles from './App.module.scss';
 import { Route, Routes } from 'react-router-dom';
 import { useAppDispatch, useAppSelector } from '../services/store/hooks';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
+
+
 import { MainPageLayout, AppLayout } from '../components/Layouts';
 import { MainPage, DIRPage, PCAPage, NotFoundPage, WhyPMToolsPage, AuthorsAndHistory } from '../pages';
 import { useSystemTheme } from '../utils/GlobalHooks';
@@ -11,17 +13,19 @@ import { setCurrentDIRid, setCurrentPMDid, setDirStatData, setTreatmentData } fr
 import * as pcaPageReducer from '../services/reducers/pcaPage';
 import * as dirPageReducer from '../services/reducers/dirPage';
 
+import {Khokhlov_Gvozdik} from "../gag_components/khokhlov-gvozdik/khokhlov-gvozdik";
+
 function App() {
 
   const dispatch = useAppDispatch();
-  
+
   const { colorMode, rememberColorMode } = useAppSelector(state => state.appSettingsReducer);
   const systemTheme = useSystemTheme();
 
   // useEffect(() => {
   //   if (!rememberColorMode) dispatch(setColorMode(systemTheme));
   // }, [systemTheme, rememberColorMode]);
-  
+
   useEffect(() => {
     console.log('color', localStorage)
     const previousColorMode = localStorage.getItem('colorMode') || systemTheme;
@@ -131,11 +135,15 @@ function App() {
           <Route path='/app' element={<AppLayout />}>
             <Route path='pca' element={<PCAPage />}/>
             <Route path='dir' element={<DIRPage />}/>
+            <Route path='Khokhlov_Gvozdik' element={<Khokhlov_Gvozdik />}/>
           </Route>
           <Route path='*' element={<NotFoundPage />}/>
         </Routes>
+
       </ThemeProvider>
+      
     </Suspense>
+
   );
 }
 
diff --git a/src/components/AppGraphs/HGGraph/HGGraph.tsx b/src/components/AppGraphs/HGGraph/HGGraph.tsx
new file mode 100644
index 00000000..4eab6930
--- /dev/null
+++ b/src/components/AppGraphs/HGGraph/HGGraph.tsx
@@ -0,0 +1,56 @@
+import React, { FC, useMemo } from "react";
+import styles from "./MagGraph.module.scss";
+import { useGraphSelectableNodesPCA, useGraphSelectedIDs, usePMDGraphSettings } from "../../../utils/GlobalHooks";
+import { IDirData, IGraph } from "../../../utils/GlobalTypes";
+import { IPmdData } from "../../../utils/GlobalTypes";
+import dataToMag from "../../../utils/graphs/formatters/mag/dataToMag";
+import { SelectableGraph } from "../../Common/Graphs";
+import getInterpretationIDs from "../../../utils/graphs/formatters/getInterpretationIDs";
+import { useAppSelector } from "../../../services/store/hooks";
+import { GraphSettings, TMenuItem } from "../../../utils/graphs/types";
+
+export interface IHGGraph extends IGraph {
+  data: IDirData;
+  menuSettings: {
+    menuItems: TMenuItem[];
+    settings: GraphSettings;
+  }
+}
+
+const HGGraph = ({ graphId, width, height, data, menuSettings }: IHGGraph) => {
+
+  return (
+    <>
+      {/* <SelectableGraph
+        graphId={graphId}
+        width={viewWidth}
+        height={viewHeight}
+        selectableNodes={[]}
+        nodesDuplicated={false}
+        menuItems={[]}
+        extraID={data.metadata.name}
+        graphName={`${data.metadata.name}_hg_zoomed`}
+      >
+        <g>
+          <Zoomed_lambert_graph
+            center_zone={center_zone}
+            dir_list={dir_list}
+            angle_list={angle_list}
+            grid_points={grid_points}
+            points_numb={points_numb}
+            sred_dir={sred_dir}
+            alpha95={alpha95}
+            isvis={isvis}
+            isvisgrid={isvisgrid}
+            grid_color={grid_color}
+            poly_color={poly_color}
+            degree_grid_isvis={degree_grid_isvis}
+            rumbs_isvis={rumbs_isvis}
+          />
+        </g>
+      </SelectableGraph> */}
+    </>
+  )
+}
+
+export default HGGraph;
\ No newline at end of file
diff --git a/src/components/AppGraphs/StereoGraphDIR/AxesAndData.tsx b/src/components/AppGraphs/StereoGraphDIR/AxesAndData.tsx
index 83efc327..7ef8af50 100644
--- a/src/components/AppGraphs/StereoGraphDIR/AxesAndData.tsx
+++ b/src/components/AppGraphs/StereoGraphDIR/AxesAndData.tsx
@@ -6,7 +6,7 @@ import { graphSelectedDotColor } from "../../../utils/ThemeConstants";
 import { Axis, Data, Dot } from "../../Common/Graphs";
 
 interface IAxesAndData {
-  graphId: string;
+graphId: string;
   width: number;
   height: number;
   areaConstants: {
diff --git a/src/components/AppLogic/AppNavigation/AppNavigation.tsx b/src/components/AppLogic/AppNavigation/AppNavigation.tsx
index 5b6c7086..127a1ae9 100644
--- a/src/components/AppLogic/AppNavigation/AppNavigation.tsx
+++ b/src/components/AppLogic/AppNavigation/AppNavigation.tsx
@@ -12,6 +12,7 @@ import OtherHousesIcon from '@mui/icons-material/OtherHouses';
 import { DefaultIconButton } from "../../Common/Buttons";
 import { useTranslation } from "react-i18next";
 import { Menu, MenuItem } from "@mui/material";
+import {Khokhlov_Gvozdik} from "../../../gag_components/khokhlov-gvozdik/khokhlov-gvozdik";
 
 const AppNavigation: FC = ({}) => {
 
@@ -56,6 +57,12 @@ const AppNavigation: FC = ({}) => {
         icon={'DIR'}
         to={'/app/dir'}
       />
+      <NavButton 
+        label={t('')}
+        icon={'CAC'}
+        to={'Khokhlov_Gvozdik'}
+      />
+
       <NavButton 
         label={t('appLayout.navPanel.projectRepo')}
         icon={<GitHubIcon />}
diff --git a/src/components/Common/Graphs/Dot/Dot.tsx b/src/components/Common/Graphs/Dot/Dot.tsx
index 7e2e372b..3bcd12de 100644
--- a/src/components/Common/Graphs/Dot/Dot.tsx
+++ b/src/components/Common/Graphs/Dot/Dot.tsx
@@ -85,7 +85,7 @@ interface IDot {
    * @param highlightStatistics Whether to render orange highlights
    * @param showGC Whether to render great circles for dirs with 'gc' or 'gcn' code
    */
-  settings: DotSettings;
+  settings?: DotSettings;
 }
 
 /**
@@ -153,7 +153,11 @@ const Dot: FC<IDot> = ({
     <g>
       {
         [
+<<<<<<< HEAD
+          settings && (((showText || selected) && settings.annotations) &&
+=======
           (settings.annotations) &&
+>>>>>>> upstream/main
           <text 
             id={`${id}__annotation`}
             x={x}
@@ -188,7 +192,7 @@ const Dot: FC<IDot> = ({
             <line x1={x} x2={x} y1={y - 8} y2={y + 8} stroke={graphSelectedDotColor(type)}/>
           </g>,
 
-          confidenceCircle && settings.confidenceCircle &&
+          settings && (confidenceCircle && settings.confidenceCircle &&
           [
             <path 
               d={createStraightPath(confidenceCircle.xyDataSplitted.neg)}
@@ -249,8 +253,8 @@ const Dot: FC<IDot> = ({
               strokeLinecap="round"
               fillOpacity="0"
             />
-          ]
-        ]
+          ])
+  )]
       }
       {/* <circle 
         cx={x} 
@@ -278,7 +282,7 @@ const Dot: FC<IDot> = ({
         onMouseOut={() => handleOut(id)}
       />
       {
-        tooltipData && settings.tooltips && 
+        settings && tooltipData && settings.tooltips && 
           <Tooltip
             position={tooltipData.position} 
             isVisible={tooltipData.isVisible} 
diff --git a/src/gag_components/CACDataTable/CACDataTable.module.scss b/src/gag_components/CACDataTable/CACDataTable.module.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/gag_components/CACDataTable/CACDataTable.tsx b/src/gag_components/CACDataTable/CACDataTable.tsx
new file mode 100644
index 00000000..5deadef1
--- /dev/null
+++ b/src/gag_components/CACDataTable/CACDataTable.tsx
@@ -0,0 +1,266 @@
+
+
+
+import React, { FC, useEffect, useState } from "react";
+import styles from './CACDataTable.module.scss';
+import { DataGridDIRFromDIRRow, IDirData } from "../../../src/utils/GlobalTypes";
+import { DataGrid, GridActionsCellItem, GridColumnHeaderParams, GridColumns, GridSelectionModel, GridValueFormatterParams } from '@mui/x-data-grid';
+import DataTableDIRSkeleton from '../../../src/components/AppLogic/DataTablesDIR/InputDataTable/DataTableDIRSkeleton';
+import { useAppDispatch, useAppSelector } from "../../../src/services/store/hooks";
+import { setSelectedDirectionsIDs, setHiddenDirectionsIDs, setReversedDirectionsIDs } from "../../../src/services/reducers/dirPage";
+import { GetDataTableBaseStyle } from "../../../src/components/AppLogic/DataTablesDIR/styleConstants";
+import PMDInputDataTableToolbar from "../../../src/components/Common/DataTable/Toolbar/PMDInputDataTableToolbar";
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
+import { StatisticsModeDIR } from "../../../src/utils/graphs/types";
+
+
+import SwapVertRoundedIcon from '@mui/icons-material/SwapVertRounded';
+import SettingsBackupRestoreIcon from '@mui/icons-material/SettingsBackupRestore';
+
+import { useTheme } from '@mui/material/styles';
+import {
+  primaryColor,
+} from '../../../src/utils/ThemeConstants';
+import Direction from "../../../src/utils/graphs/classes/Direction";
+
+
+
+
+
+
+// import React, { FC, useEffect, useState, useCallback } from "react";
+// import styles from './CACDataTable.module.scss';
+// import { useTheme } from '@mui/material/styles';
+// import { DataGrid, GridActionsCellItem, GridColumns, GridColumnHeaderParams, GridValueFormatterParams, GridEditRowsModel, GridCellParams, MuiEvent } from '@mui/x-data-grid';
+// import StatisticsDataTablePMDSkeleton from '../../../src/components/AppLogic/DataTablesDIR/StatisticsDataTable/StatisticsDataTableDIRSkeleton';
+// import { GetDataTableBaseStyle } from "../../../src/components/AppLogic/DataTablesDIR/styleConstants";
+// import { DataGridDIRFromDIRRow, StatisitcsInterpretationFromDIR } from "../../../src/utils/GlobalTypes";
+// import DeleteIcon from '@mui/icons-material/DeleteOutlined';
+// import { useAppDispatch, useAppSelector } from "../../../src/services/store/hooks";
+// import { deleteInterpretation, setAllInterpretations, updateCurrentFileInterpretations, updateCurrentInterpretation } from "../../../src/services/reducers/dirPage";
+// import DIRStatisticsDataTableToolbar from "../../../src/components/Common/DataTable/Toolbar/DIRStatisticsDataTableToolbar";
+// import equal from "deep-equal"
+// import { acitvateHotkeys, deactivateHotkeys } from "../../../src/services/reducers/appSettings";
+
+
+
+
+
+
+
+interface IDataTableDIR {
+  data: IDirData | null;
+  selData?: number[] | null;
+};
+
+const DataTableDIR: FC<IDataTableDIR> = ({ data }) => {
+
+  const theme = useTheme();
+  const dispatch = useAppDispatch();
+
+  const { selectedDirectionsIDs, hiddenDirectionsIDs, reversedDirectionsIDs } = useAppSelector(state => state.dirPageReducer);
+
+  // selectionModel is array of ID's of rows
+  const [selectionModel, setSelectionModel] = useState<GridSelectionModel>([]);
+  const [selectedRows, setSelectedRows] = useState<Array<DataGridDIRFromDIRRow>>([]);
+
+  useEffect(() => {
+    if (selectedDirectionsIDs) setSelectionModel(selectedDirectionsIDs);
+    else setSelectionModel([]); 
+  }, [selectedDirectionsIDs]);
+
+  const toggleRowVisibility = (id: number) => (event: any) => {
+    event.stopPropagation();
+    const newhiddenDirectionsIDs = hiddenDirectionsIDs.includes(id) 
+      ? hiddenDirectionsIDs.filter(hiddenId => hiddenId !== id) 
+      : [...hiddenDirectionsIDs, id];
+    dispatch(setHiddenDirectionsIDs(newhiddenDirectionsIDs))
+  };
+
+  const toggleAllRowsVisibility = (event: any) => {
+    dispatch(setHiddenDirectionsIDs([]));
+  };
+
+  const toggleRowPolarity = (id: number) => (event: any) => {
+    event.stopPropagation();
+    const newReversedDirectionsIDs = reversedDirectionsIDs.includes(id)
+      ? reversedDirectionsIDs.filter(reversedId => reversedId !== id)
+      : [...reversedDirectionsIDs, id];
+    dispatch(setReversedDirectionsIDs(newReversedDirectionsIDs));
+  };
+
+  const toggleAllRowsPolarity = (event: any) => {
+    reversedDirectionsIDs.length > 0 ? 
+      
+
+      dispatch(setReversedDirectionsIDs([])) : 
+      dispatch(setReversedDirectionsIDs(data?.interpretations?.map(interpretation => interpretation.id) ?? []));
+  };
+
+  const columns: GridColumns = [
+    {
+      field: 'toggleVisibility',
+      type: 'actions',
+      width: 40,
+      renderHeader: (params: GridColumnHeaderParams) => (
+        <GridActionsCellItem
+          icon={<VisibilityIcon />}
+          label="Hide all directions" 
+          onClick={toggleAllRowsVisibility}
+          color="inherit"
+        />
+      ),
+      getActions: ({ id }) => {
+        return [
+          <GridActionsCellItem
+            icon={hiddenDirectionsIDs.includes(id as number) ? <VisibilityOffIcon /> : <VisibilityIcon />} 
+            label="Toggle direction visibility"
+            onClick={toggleRowVisibility(id as number)}
+            color="inherit"
+          />,
+        ];
+      },
+    },
+    {
+      field: 'reversePolarity',
+      type: 'actions',
+      width: 40,
+      renderHeader: (params: GridColumnHeaderParams) => (
+        <GridActionsCellItem
+          icon={<SwapVertRoundedIcon />}
+          label="Reverse polarity for all directions"
+          onClick={toggleAllRowsPolarity}
+          color="inherit"
+        />
+      ),
+      getActions: ({ id }) => {
+        return [
+          <GridActionsCellItem
+            icon={
+              reversedDirectionsIDs.includes(id as number) ?               
+              <SettingsBackupRestoreIcon sx={{fill: primaryColor(theme.palette.mode)}}/> :
+              <SwapVertRoundedIcon /> 
+            } 
+            label="Toggle direction polarity"
+            onClick={toggleRowPolarity(id as number)}
+            color="inherit"
+          />,
+        ];
+      },
+    },
+    { field: 'id', headerName: 'ID', type: 'number', width: 40 },
+    { field: 'index', headerName: '№', type: 'number', width: 40 },
+    { field: 'label', headerName: 'Label', type: 'string', width: 90 },
+    { field: 'code', headerName: 'Code', type: 'string', width: 80 },
+    { field: 'stepRange', headerName: 'StepRange', type: 'string', width: 120 },
+    { field: 'stepCount', headerName: 'N', type: 'number', width: 40 },
+    { field: 'Dgeo', headerName: 'Dgeo', type: 'number', width: 70,
+      valueFormatter: (params: GridValueFormatterParams) => (params.value as number)?.toFixed(1)
+    },
+    { field: 'Igeo', headerName: 'Igeo', type: 'number', width: 70,
+      valueFormatter: (params: GridValueFormatterParams) => (params.value as number)?.toFixed(1)
+    },
+    { field: 'accuracyGeo', headerName: 'Kgeo', type: 'string', width: 70,
+      valueFormatter: (params: GridValueFormatterParams) => (params.value as number)?.toFixed(1)
+    },
+    { field: 'confidenceRadiusGeo', headerName: 'MADgeo', type: 'string', width: 80,
+      valueFormatter: (params: GridValueFormatterParams) => (params.value as number)?.toFixed(1)
+    },
+    { field: 'Dstrat', headerName: 'Dstrat', type: 'number', width: 70,
+      valueFormatter: (params: GridValueFormatterParams) => (params.value as number)?.toFixed(1)
+    },
+    { field: 'Istrat', headerName: 'Istrat', type: 'number', width: 70,
+      valueFormatter: (params: GridValueFormatterParams) => (params.value as number)?.toFixed(1)
+    },
+    { field: 'accuracyStrat', headerName: 'Kstrat', type: 'string', width: 70,
+      valueFormatter: (params: GridValueFormatterParams) => (params.value as number)?.toFixed(1)
+    },
+    { field: 'confidenceRadiusStrat', headerName: 'MADstrat', type: 'string', width: 80,
+      valueFormatter: (params: GridValueFormatterParams) => (params.value as number)?.toFixed(1)
+    },
+    { field: 'comment', headerName: 'Comment', type: 'string', width: 200 },
+    { field: 'lat', headerName: 'Lat', type: 'number', width: 70, },
+    { field: 'lon', headerName: 'Lon', type: 'number', width: 70, },
+  ];
+
+  columns.forEach((col) => {
+    col.align = 'center';
+    col.headerAlign = 'center';
+    col.hideSortIcons = true;
+  });
+  
+  if (!data) return <></>;
+  let visibleIndex = 1;
+  const rows: Array<DataGridDIRFromDIRRow> = data.interpretations.map((interpretation, index) => {
+    const { id, label, code, stepRange, stepCount, Dgeo, Igeo, Dstrat, Istrat, MADgeo, Kgeo, MADstrat, Kstrat, comment } = interpretation;
+    let geoDirection = new Direction(Dgeo, Igeo, 1);
+    let stratDirection = new Direction(Dstrat, Istrat, 1);
+    if (reversedDirectionsIDs.includes(id)) {
+      geoDirection = geoDirection.reversePolarity();
+      stratDirection = stratDirection.reversePolarity();
+    };
+    const DgeoFinal = +geoDirection.declination.toFixed(1);
+    const IgeoFinal = +geoDirection.inclination.toFixed(1);
+    const DstratFinal = +stratDirection.declination.toFixed(1);
+    const IstratFinal = +stratDirection.inclination.toFixed(1);
+    return {
+      id,
+      index: hiddenDirectionsIDs.includes(id) ? '-' : visibleIndex++,
+      label,
+      code: code as StatisticsModeDIR, 
+      stepRange,
+      stepCount,
+      Dgeo: DgeoFinal,
+      Igeo: IgeoFinal,
+      Dstrat: DstratFinal,
+      Istrat: IstratFinal,
+      confidenceRadiusGeo: +MADgeo.toFixed(1),
+      accuracyGeo: +(Kgeo || 0).toFixed(1),
+      confidenceRadiusStrat: +MADstrat.toFixed(1),
+      accuracyStrat: +(Kstrat || 0).toFixed(1),
+      comment
+    };
+  });
+
+  return (
+    // <DataTablePMDSkeleton>
+    <>
+
+      <DataGrid 
+        rows={rows} 
+        columns={columns} 
+        checkboxSelection
+        selectionModel={selectionModel}
+        onSelectionModelChange={(e) => {
+          setSelectionModel(e);
+          const selectedIDs = new Set(e);
+          if ([...selectedIDs].length > 0) dispatch(setSelectedDirectionsIDs([...selectedIDs]));
+          else dispatch(setSelectedDirectionsIDs(null));
+          const selectedRows = rows.filter((r) => selectedIDs.has(r.id));
+          setSelectedRows(selectedRows);
+          console.log(selectedRows);
+        }}
+        components={{
+        //   Toolbar: DIRInputDataTableToolbar, 
+        }}
+        sx={{
+          ...GetDataTableBaseStyle(),
+          '& .MuiDataGrid-cell': {
+            padding: '0px 0px',
+          },
+          '& .MuiDataGrid-columnHeader': {
+            padding: '0px 0px',
+          }
+        }}
+        density={'compact'}
+        hideFooter={rows.length < 100}
+        getRowClassName={
+          (params) =>  hiddenDirectionsIDs.includes(params.row.id) ? styles.hiddenRow : ''
+        }
+      />
+    </>
+  )
+}
+
+export default DataTableDIR;
diff --git a/src/gag_components/CACResTable/CACResTable.module.scss b/src/gag_components/CACResTable/CACResTable.module.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/gag_components/CACResTable/CACResTable.tsx b/src/gag_components/CACResTable/CACResTable.tsx
new file mode 100644
index 00000000..4a5e9039
--- /dev/null
+++ b/src/gag_components/CACResTable/CACResTable.tsx
@@ -0,0 +1,46 @@
+import React, { FC, useEffect, useState } from 'react';
+import styles from '../khokhlov-gvozdik/khokhlov-gvozdik.module.scss';
+import { useAppSelector } from '../../services/store/hooks';
+import { IDirData, StatisitcsInterpretationFromDIR } from "../../utils/GlobalTypes";
+import { DataTableDIR, StatisticsDataTableDIR } from '../../components/AppLogic';
+import { useTheme } from '@mui/material/styles';
+import {
+  bgColorMain,
+} from '../../utils/ThemeConstants';
+import CACResultTable from '../CACResultTable/CACResultTable';
+
+interface ITables {
+  dataToShow: IDirData | null;
+};
+
+const CACResTable: FC<ITables> = ({ dataToShow }) => {
+
+
+// export function CACTable({ dataToShow }) {
+
+  const theme = useTheme();
+  
+  const { currentInterpretation, currentFileInterpretations } = useAppSelector(state => state.dirPageReducer);
+  const [interpretations, setInterpretations] = useState<StatisitcsInterpretationFromDIR[] | null>(null);
+
+  useEffect(() => {
+    if (currentFileInterpretations && currentFileInterpretations.length) setInterpretations(currentFileInterpretations);
+    else if (currentInterpretation) setInterpretations([currentInterpretation]);
+    else setInterpretations(null);
+  }, [currentInterpretation, currentFileInterpretations]);
+
+  return (
+    <div 
+
+      className={styles.table2_container + ' ' + styles.commonContainer}
+      // style={{backgroundColor: bgColorMain(theme.palette.mode)}}
+    >
+      
+        {/* <DataTableDIR data={dataToShow}/> */}
+        <CACResultTable data={interpretations}/>
+      
+    </div>
+  )
+};
+
+export default CACResTable;
\ No newline at end of file
diff --git a/src/gag_components/CACResultTable/CACResultTable.module.scss b/src/gag_components/CACResultTable/CACResultTable.module.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/gag_components/CACResultTable/CACResultTable.tsx b/src/gag_components/CACResultTable/CACResultTable.tsx
new file mode 100644
index 00000000..7cdf759a
--- /dev/null
+++ b/src/gag_components/CACResultTable/CACResultTable.tsx
@@ -0,0 +1,207 @@
+import React, { FC, useEffect, useState, useCallback } from "react";
+import styles from './CACResultTable.module.scss';
+import { useTheme } from '@mui/material/styles';
+import { DataGrid, GridActionsCellItem, GridColumns, GridColumnHeaderParams, GridValueFormatterParams, GridEditRowsModel, GridCellParams, MuiEvent } from '@mui/x-data-grid';
+import StatisticsDataTablePMDSkeleton from '../../../src/components/AppLogic/DataTablesDIR/StatisticsDataTable/StatisticsDataTableDIRSkeleton';
+import { GetDataTableBaseStyle } from "../../../src/components/AppLogic/DataTablesDIR/styleConstants";
+import { DataGridDIRFromDIRRow, StatisitcsInterpretationFromDIR } from "../../../src/utils/GlobalTypes";
+import DeleteIcon from '@mui/icons-material/DeleteOutlined';
+import { useAppDispatch, useAppSelector } from "../../../src/services/store/hooks";
+import { deleteInterpretation, setAllInterpretations, updateCurrentFileInterpretations, updateCurrentInterpretation } from "../../../src/services/reducers/dirPage";
+import DIRStatisticsDataTableToolbar from "../../../src/components/Common/DataTable/Toolbar/DIRStatisticsDataTableToolbar";
+import equal from "deep-equal"
+import { acitvateHotkeys, deactivateHotkeys } from "../../../src/services/reducers/appSettings";
+
+interface IStatisticsDataTableDIR {
+  data: Array<StatisitcsInterpretationFromDIR> | null;
+};
+
+const CACDataTable: FC<IStatisticsDataTableDIR> = ({ data }) => {
+
+  const dispatch = useAppDispatch();
+  const theme = useTheme();
+
+  const { currentInterpretation } = useAppSelector(state => state.dirPageReducer);
+  const [editRowsModel, setEditRowsModel] = useState<GridEditRowsModel>({});
+  const [currentClass, setCurrentClass] = useState(styles.current_dark);
+
+  const handleEditRowsModelChange = useCallback((model: GridEditRowsModel) => {
+    setEditRowsModel(model);
+  }, []);
+
+  useEffect(() => {
+    setCurrentClass(theme.palette.mode === 'dark' ? styles.current_dark : styles.current_light);
+  }, [theme]);
+
+  useEffect(() => {
+    if (data && Object.keys(editRowsModel).length !== 0) {
+      const updatedData = data.map((interpretation, index) => {
+        const rowId = Object.keys(editRowsModel)[0];
+        const newComment = editRowsModel[rowId]?.comment?.value as string;
+        if (rowId !== interpretation.label) return interpretation;
+        return {
+          ...interpretation,
+          comment: newComment
+        };
+      });
+      if (!equal(updatedData, data)) {
+        dispatch(setAllInterpretations(updatedData));
+        dispatch(updateCurrentFileInterpretations(data[0].parentFile));
+        dispatch(updateCurrentInterpretation());
+      }
+    };
+  }, [data, editRowsModel]);
+
+  const handleRowDelete = (id: string) => (event: any) => {
+    event.stopPropagation();
+    dispatch(deleteInterpretation(id));
+    if (data) {
+      dispatch(updateCurrentFileInterpretations(data[0].parentFile));
+      dispatch(updateCurrentInterpretation());
+    };
+  };
+
+  const handleDeleteAllRows = (event: any) => {
+    event.stopPropagation();
+    if (data) {
+      data.forEach(interpretation => {
+        dispatch(deleteInterpretation(interpretation.label));
+      });
+      dispatch(updateCurrentFileInterpretations(data[0].parentFile));
+      dispatch(updateCurrentInterpretation());
+    };
+  };
+
+  const columns: GridColumns = [
+    {
+      field: 'actions',
+      type: 'actions',
+      minWidth: 40,
+      width: 40,
+      renderHeader: (params: GridColumnHeaderParams) => (
+        <GridActionsCellItem
+          icon={<DeleteIcon />}
+          label="Delete all interpretations"
+          onClick={handleDeleteAllRows}
+          color="inherit"
+        />
+      ),
+      getActions: ({ id }) => {
+        return [
+          <GridActionsCellItem
+            icon={<DeleteIcon />}
+            label="Delete interpretation"
+            onClick={handleRowDelete(id as string)}
+            color="inherit"
+          />,
+        ];
+      },
+    },
+    { field: 'id', headerName: 'Label', type: 'string', width: 70 },
+    { field: 'code', headerName: 'Code', type: 'string', width: 60 },
+    { field: 'stepRange', headerName: 'StepRange', type: 'string', width: 90 },
+    { field: 'stepCount', headerName: 'N', type: 'number', minWidth: 30, width: 30 },
+    { field: 'Dgeo', headerName: 'Dgeo', type: 'number', width: 70,
+      valueFormatter: (params: GridValueFormatterParams) => (params.value as number)?.toFixed(1)
+    },
+    { field: 'Igeo', headerName: 'Igeo', type: 'number', width: 60,
+      valueFormatter: (params: GridValueFormatterParams) => (params.value as number)?.toFixed(1)
+    },
+    { field: 'accuracyGeo', headerName: 'Kgeo', type: 'string', width: 60,
+      valueFormatter: (params: GridValueFormatterParams) => (params.value as number)?.toFixed(1)
+    },
+    { field: 'confidenceRadiusGeo', headerName: 'MADgeo', type: 'string', width: 80,
+      valueFormatter: (params: GridValueFormatterParams) => (params.value as number)?.toFixed(1)
+    },
+    { field: 'Dstrat', headerName: 'Dstrat', type: 'number', width: 70,
+      valueFormatter: (params: GridValueFormatterParams) => (params.value as number)?.toFixed(1)
+    },
+    { field: 'Istrat', headerName: 'Istrat', type: 'number', width: 60,
+      valueFormatter: (params: GridValueFormatterParams) => (params.value as number)?.toFixed(1)
+    },
+    { field: 'accuracyStrat', headerName: 'Kstrat', type: 'string', width: 60,
+      valueFormatter: (params: GridValueFormatterParams) => (params.value as number)?.toFixed(1)
+    },
+    { field: 'confidenceRadiusStrat', headerName: 'MADstrat', type: 'string', width: 80,
+      valueFormatter: (params: GridValueFormatterParams) => (params.value as number)?.toFixed(1)
+    },
+    { field: 'comment', headerName: 'Comment', type: 'string', minWidth: 210, flex: 1, editable: true, cellClassName: styles[`editableCell_${theme.palette.mode}`] },
+  ];
+
+  columns.forEach((col) => {
+    col.align = 'center';
+    col.headerAlign = 'center';
+    col.hideSortIcons = true;
+    col.disableColumnMenu = true;
+  });
+
+  if (!data || !data.length) return <></>;
+
+  const rows: Array<Omit<DataGridDIRFromDIRRow, | 'id' | 'label'>> = data.map((statistics, index) => {
+    const { label, code, stepRange, stepCount, Dgeo, Igeo, Dstrat, Istrat, confidenceRadiusGeo, Kgeo, confidenceRadiusStrat, Kstrat, comment } = statistics;
+    return {
+      id: label,
+      code, 
+      stepRange,
+      stepCount,
+      Dgeo: +Dgeo.toFixed(1),
+      Igeo: +Igeo.toFixed(1),
+      Dstrat: +Dstrat.toFixed(1),
+      Istrat: +Istrat.toFixed(1),
+      confidenceRadiusGeo: +confidenceRadiusGeo.toFixed(1),
+      accuracyGeo: +(Kgeo || 0).toFixed(1),
+      confidenceRadiusStrat: +confidenceRadiusStrat.toFixed(1),
+      accuracyStrat: +(Kstrat || 0).toFixed(1),
+      comment
+    };
+  });
+
+  return (
+
+    <>
+    {
+      data[0].label
+      
+    }
+
+
+
+      <DataGrid 
+        rows={rows} 
+        columns={columns} 
+        editRowsModel={editRowsModel}
+        onEditRowsModelChange={handleEditRowsModelChange}
+        onCellEditStart={(params: GridCellParams, event: MuiEvent) => {
+          dispatch(deactivateHotkeys());
+        }}
+        onCellEditStop={(params: GridCellParams, event: MuiEvent) => {
+          dispatch(acitvateHotkeys());
+        }}
+        sx={{
+          ...GetDataTableBaseStyle(),
+          '& .MuiDataGrid-cell': {
+            padding: '0px 0px',
+          },
+          '& .MuiDataGrid-columnHeader': {
+            padding: '0px 0px',
+          },
+          p: '0 4px 0 0'
+        }}
+        hideFooter={rows.length < 100}
+        density={'compact'}
+        disableSelectionOnClick={true}
+        getRowClassName={
+          (params) => params.row.id === currentInterpretation?.label ? currentClass : ''
+        }
+        components={{
+          Toolbar: DIRStatisticsDataTableToolbar
+        }}
+      />
+  </>
+
+
+  );
+};
+
+export default CACDataTable;
+
diff --git a/src/gag_components/CACResultTableTest/CACResultTable.tsx b/src/gag_components/CACResultTableTest/CACResultTable.tsx
new file mode 100644
index 00000000..bde74cc7
--- /dev/null
+++ b/src/gag_components/CACResultTableTest/CACResultTable.tsx
@@ -0,0 +1,149 @@
+import * as React from 'react';
+import { DataGrid, GridColDef, GridValueGetterParams } from '@mui/x-data-grid';
+
+const columns: GridColDef[] = [
+  {
+    field: 'id',
+    headerName: 'id',
+    description: 'This column has a value getter and is not sortable.',
+    sortable: false,
+    width: 30,
+    valueGetter: (params: GridValueGetterParams) =>
+      `${params.row.id || ''}`,
+  },
+  {
+    field: 'Code',
+    headerName: 'Code',
+    description: 'This column has a value getter and is not sortable.',
+    sortable: false,
+    width: 60,
+    valueGetter: (params: GridValueGetterParams) =>
+      `${params.row.Code || ''}`,
+  },
+
+  {
+    field: 'N',
+    headerName: 'N',
+    description: 'This column has a value getter and is not sortable.',
+    sortable: false,
+    width: 25,
+    valueGetter: (params: GridValueGetterParams) =>
+      `${params.row.N || ''}`,
+  },
+  {
+    field: 'Lat',
+    headerName: 'Lat',
+    description: 'This column has a value getter and is not sortable.',
+    sortable: false,
+    width: 75,
+    valueGetter: (params: GridValueGetterParams) =>
+      `${params.row.Lat || ''}`,
+  },
+  {
+    field: 'Lon',
+    headerName: 'Lon',
+    description: 'This column has a value getter and is not sortable.',
+    sortable: false,
+    width: 75,
+    valueGetter: (params: GridValueGetterParams) =>
+      `${params.row.Lon || ''}`,
+  },
+  {
+    field: 'ZoneRad',
+    headerName: 'ZoneRad',
+    description: 'This column has a value getter and is not sortable.',
+    sortable: false,
+    width: 75,
+    valueGetter: (params: GridValueGetterParams) =>
+      `${params.row.ZoneRad || ''}`,
+  },
+
+  {
+    field: 'FishLat',
+    headerName: 'FishLat',
+    description: 'This column has a value getter and is not sortable.',
+    sortable: false,
+    width: 75,
+    valueGetter: (params: GridValueGetterParams) =>
+      `${params.row.FishLat || ''}`,
+  },
+  {
+    field: 'FishLon',
+    headerName: 'FishLon',
+    description: 'This column has a value getter and is not sortable.',
+    sortable: false,
+    width: 75,
+    valueGetter: (params: GridValueGetterParams) =>
+      `${params.row.FishLon || ''}`,
+  },
+  {
+    field: 'alpha95',
+    headerName: 'alpha95',
+    description: 'This column has a value getter and is not sortable.',
+    sortable: false,
+    width: 75,
+    valueGetter: (params: GridValueGetterParams) =>
+      `${params.row.alpha95 || ''}`,
+  },
+//   {
+//     field: 'age',
+//     headerName: 'Age',
+//     type: 'number',
+//     width: 90,
+//   },
+//   {
+//     field: 'fullName',
+//     headerName: 'Full name',
+//     description: 'This column has a value getter and is not sortable.',
+//     sortable: false,
+//     width: 160,
+//     valueGetter: (params: GridValueGetterParams) =>
+//       `${params.row.firstName || ''} ${params.row.lastName || ''}`,
+//   },
+
+];
+
+
+interface HGGResult {
+    rows: Row[]
+}
+
+type Row = {
+    id: number,
+    Code: string,
+    N: number,
+    Lat: string,
+    Lon: string,
+    ZoneRad: number,
+    FishLat: string,
+    FishLon: string,
+    alpha95: string
+};
+
+
+
+
+
+
+
+export function CACResultTable({
+    rows
+}: HGGResult) {
+
+  return (
+    <div style={{ height: '100%', width: '100%' }}>
+      <DataGrid
+        rows={rows}
+        columns={columns}
+        initialState={{
+          pagination: {
+            page: 0, 
+            pageSize: 5,
+          },
+        }}
+        // pageSizeOptions={[5, 10]}
+        checkboxSelection
+      />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/gag_components/CACTable/CACTable.module.scss b/src/gag_components/CACTable/CACTable.module.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/gag_components/CACTable/CACTable.tsx b/src/gag_components/CACTable/CACTable.tsx
new file mode 100644
index 00000000..f9169900
--- /dev/null
+++ b/src/gag_components/CACTable/CACTable.tsx
@@ -0,0 +1,61 @@
+import React, { FC, useEffect, useState } from 'react';
+import styles from '../khokhlov-gvozdik/khokhlov-gvozdik.module.scss';
+import CACDataTable from '../CACDataTable/CACDataTable';
+import { useAppSelector } from '../../services/store/hooks';
+import { IDirData, StatisitcsInterpretationFromDIR } from "../../utils/GlobalTypes";
+import { DataTableDIR, StatisticsDataTableDIR } from '../../components/AppLogic';
+import { useTheme } from '@mui/material/styles';
+import {
+  bgColorMain,
+} from '../../utils/ThemeConstants';
+
+
+// export function CACTable() {
+
+
+//   return (
+//     <div style={{ height: 400, width: '100%' }}>
+     
+//     </div>
+//   );
+// }
+
+
+
+
+
+interface ITables {
+  dataToShow: IDirData | null;
+};
+
+const CACTable: FC<ITables> = ({ dataToShow }) => {
+
+
+// export function CACTable({ dataToShow }) {
+
+  const theme = useTheme();
+  
+  const { currentInterpretation, currentFileInterpretations } = useAppSelector(state => state.dirPageReducer);
+  const [interpretations, setInterpretations] = useState<StatisitcsInterpretationFromDIR[] | null>(null);
+
+  useEffect(() => {
+    if (currentFileInterpretations && currentFileInterpretations.length) setInterpretations(currentFileInterpretations);
+    else if (currentInterpretation) setInterpretations([currentInterpretation]);
+    else setInterpretations(null);
+  }, [currentInterpretation, currentFileInterpretations]);
+
+  return (
+    <div 
+    className={styles.table_container + ' ' + styles.commonContainer}
+    // style={{backgroundColor: bgColorMain(theme.palette.mode)}}
+    >
+        <CACDataTable data={dataToShow}/>
+
+        {/* <DataTableDIR data={dataToShow}/> */}
+    </div>
+  )
+};
+
+export default CACTable;
+
+
diff --git a/src/gag_components/ZoomedLambertGraph/ZoomedLabertGraph.module.scss b/src/gag_components/ZoomedLambertGraph/ZoomedLabertGraph.module.scss
new file mode 100644
index 00000000..cd7639b4
--- /dev/null
+++ b/src/gag_components/ZoomedLambertGraph/ZoomedLabertGraph.module.scss
@@ -0,0 +1,108 @@
+
+:root {
+  --my-white: white;
+  --menu-blue: #4690db;
+  --my-grey: #c5c5c5;
+  --checkbox-hover: #1975d2;
+  --my-black: #202020;
+  --checkmark-hover: #ccc;
+  --my-checkmark: #e0e0e0;
+  --my-select: #e4e4e4;
+  --my-shadow: rgba(0, 0, 0, 0.15);
+  --my-shadow2: rgba(0, 0, 0, 0.15);
+  --button-blue: #4690db;
+  --button-blue2: #90caf9;
+  --button-blue3: #62b8ff;
+  --my-tooltip: #202020;
+  --my-tooltip-back: #c5c5c5;
+  
+  --color-scheme: light;
+}
+
+.dark {
+  --my-white: #424242;
+  --menu-blue: #90caf9;
+  --my-grey: #999999;
+  --checkbox-hover: #4892cf;
+  --my-black: #202020;
+  --checkmark-hover: #4892cf;
+  --my-checkmark: #90caf9;
+  --my-select: #90caf9;
+  --my-shadow: rgba(144, 202, 249, 0.31);
+  --my-shadow2: rgba(144, 202, 249, 0.55);
+
+  --button-blue: #0280fd;
+  --button-blue2: #2375c6;
+  --button-blue3: #229cff;
+  --my-tooltip: #90caf9;
+  --color-scheme: dark;
+  --my-tooltip-back: #424242;
+}
+
+.interface{
+  border: 3px solid var(--my-grey);
+  border-radius: 6px;
+  padding: 1vh;
+  height: 17.5vh;
+  display: grid;
+  grid-template-columns: 6fr 6fr 4fr;
+  grid-template-rows: 1fr 1fr 1fr 1fr;
+  grid-gap: 10px;
+}
+
+.interface:hover{
+  border: 3px solid var(--menu-blue);
+  /* border-radius: 12px; */
+  transition: 0.4s ease-in-out;
+}
+
+
+.graph_interface{
+  height: 52vh;
+  width: 97%;
+  border: 3px solid var(--my-grey);
+  border-radius: 6px;
+  padding: auto;
+  position: relative; 
+}
+
+.graph_interface:hover{
+  border: 3px solid var(--menu-blue);
+  /* border-radius: 12px; */
+  transition: 0.4s ease-in-out;
+
+}
+
+@media screen and (max-width: 720px){
+ 
+  .interface{
+    padding: 5px;
+    height: 100vh;
+    display: grid;
+    grid-template-columns: 5fr 5fr 5fr;
+    grid-template-rows: 1fr 1fr 2fr;
+    grid-gap: 10px;
+  }
+
+  .graph_interface{
+    height: 12vh;
+  }
+}
+
+@media screen and (max-height: 580px){
+ 
+  .interface{
+    padding: 5px;
+    height: 100vh;
+    display: grid;
+    grid-template-columns: 5fr 5fr 3fr ;
+    grid-template-rows: 1fr 1fr 2fr;
+    grid-gap: 10px;
+  }
+
+  .graph_interface{
+    /* display: block; */
+    height: 200px;
+    padding: 5px;
+  }
+}
diff --git a/src/gag_components/ZoomedLambertGraph/ZoomedLambertGraph.tsx b/src/gag_components/ZoomedLambertGraph/ZoomedLambertGraph.tsx
new file mode 100644
index 00000000..ada8b161
--- /dev/null
+++ b/src/gag_components/ZoomedLambertGraph/ZoomedLambertGraph.tsx
@@ -0,0 +1,343 @@
+import React, {} from 'react';
+
+import { useTheme } from '@mui/material/styles';
+import { Cutoff } from "../../utils/GlobalTypes";
+import { DotsData, GraphSettings, MeanDirection, TooltipDot } from "../../utils/graphs/types";
+import { graphSelectedDotColor } from "../../utils/ThemeConstants";
+import { Axis, Data, Dot } from "../../components/Common/Graphs";
+
+
+// import Graphs from '../pages/DIRPage/Graphs';
+// import { Rumbs } from "./rumbs";
+import { DegreeGrid } from "../degreeGrid/degreeGrid";
+
+import styles from "./ZoomedLabertGraph.module.scss" 
+
+import {
+    RotateAroundV,
+    PlotCircle,
+    make_coords,
+    centering,
+    poly_contour,
+    convertToLambert,
+    lambertMass,
+    to_center,
+    points_dist_2d,
+    getViewBoxSize,
+    getPointSize
+} from "../gag_functions";
+
+
+
+
+interface HGGraph {
+    centerZone: number[],
+    dirList: number[][],
+    angleList: number[],
+    gridPoints: number[][],
+    meanDir: number[],
+    alpha95: number,
+    gridColor: string,
+    polygonColor: string,
+    showGrid: boolean,
+    showDegreeGrid: boolean,
+    showPolygon: boolean,
+}
+
+
+
+export function ZoomedLambertGraph({
+    centerZone,
+    dirList,
+    angleList,
+    gridPoints,
+    meanDir,
+    alpha95,
+    gridColor,
+    polygonColor,
+    showGrid,
+    showDegreeGrid,
+    showPolygon
+}: HGGraph) {
+
+
+    const centerZoneColor = '#2b3bb3';
+    let plotPointsCount = 150; 
+
+
+    dirList = centering(dirList, meanDir);
+    let viewBoxSize = getViewBoxSize(dirList, angleList, meanDir, 0.1);
+    let fullViewBoxSize = viewBoxSize;
+    // let fullViewBoxSize = getViewBoxSize(dirList, angleList, meanDir, 0);
+
+    let parallelsCount = 36;
+    let meridianCount = 36;
+
+    let circlesRadius = getPointSize(viewBoxSize);
+    let gridRadius = circlesRadius;
+    let centerZoneRadius = 3 * circlesRadius;
+    let fisherRadius = 2.5 * circlesRadius;
+    let alphaCircleWidth = 1.5 * circlesRadius;
+
+
+
+    // to see all sphere
+    // fullViewBoxSize = '-0.5 -0.5 1 1';
+    // viewBoxSize = '-0.5 -0.5 1 1';
+    // fullViewBoxSize = '-1 -1 2 2';
+    // viewBoxSize = '-1 -1 2 2';
+
+    if (angleList[0] == 0) {
+      return (
+        <div>
+          <svg className={styles.svg + ' ' + styles.interface} key={6534324} viewBox={"-1 -1 2 2"} />
+        </div>
+      );
+    }
+
+
+
+
+    //---------------------------------------------------------------------------------------
+    // CENTER ZONE
+    //---------------------------------------------------------------------------------------
+    
+    const rotationCenterZone = convertToLambert(to_center(centerZone, meanDir), meanDir);
+
+    //---------------------------------------------------------------------------------------
+    // SMALL CIRCLES
+    //---------------------------------------------------------------------------------------
+
+    let smallCircles: number[][] = [];
+    let circle: number[][] = [];
+
+    for (let i = 0; i < dirList.length; i++) {
+        
+        circle = lambertMass(
+                        PlotCircle(
+                            dirList[i], 
+                            angleList[i], 
+                            plotPointsCount
+                        ), 
+                        meanDir
+                    );
+
+        smallCircles = smallCircles.concat(circle);
+    }
+        
+    //---------------------------------------------------------------------------------------
+    // SPGERAL GRID
+    //---------------------------------------------------------------------------------------
+    
+    let gridPointsCentered = lambertMass(centering(gridPoints, meanDir), meanDir);
+
+    //---------------------------------------------------------------------------------------
+    // POLYGON ZONE
+    //---------------------------------------------------------------------------------------
+    
+    const circlePointsToCalculateCount = 720 * 8;
+    let input: [number, number][] = [];
+    let circlePoints = [];
+    let circlePoint = [];
+
+    for (let i = 0; i < dirList.length; i++) {
+          circlePoint = lambertMass(
+                            PlotCircle(
+                                dirList[i], 
+                                angleList[i], 
+                                circlePointsToCalculateCount
+                            ), 
+                            meanDir
+                        );
+
+        for (let j = 0; j < circlePoint.length; j++){
+            circlePoints.push(circlePoint[j]);
+        }
+    }
+
+    for (let i = 0; i < circlePoints.length; i++) {
+        input.push([circlePoints[i][0], circlePoints[i][1]]);
+    }
+
+    let polygonPoints2d = poly_contour(input, [rotationCenterZone[0], rotationCenterZone[1]]);
+    let polygonPoints3d = [];
+
+    for (let i = 0; i < polygonPoints2d.length; i++) {
+        polygonPoints3d.push([polygonPoints2d[i][0], polygonPoints2d[i][1], 1 ]);
+    }
+
+    let polygonPoints = make_coords(polygonPoints3d);
+
+    let maxRad = -1;
+    for (let i = 0; i < input.length; i++) {
+        if (points_dist_2d(rotationCenterZone, input[i]) > maxRad) {
+            maxRad = points_dist_2d(rotationCenterZone, input[i]);
+        }
+    }
+
+    //---------------------------------------------------------------------------------------
+    // DEGREE GRID
+    //---------------------------------------------------------------------------------------
+    
+    let degreeGrid = [];
+
+    let point = [1, 0, 0];
+
+
+    for (let i = 0; i < meridianCount; i++) {
+        point = RotateAroundV(point, [0, 1, 0], 360/ meridianCount );
+        const meridian = lambertMass(centering(PlotCircle(point, 90, 90), meanDir), meanDir);
+        degreeGrid.push(make_coords(meridian));
+    }
+
+
+    for (let i = 0; i < parallelsCount; i++) {
+        const parallel = lambertMass(centering(PlotCircle([0, 1, 0], i * (360 / meridianCount), 90), meanDir), meanDir);
+        degreeGrid.push(make_coords(parallel));
+    }
+
+    let paralel = lambertMass(PlotCircle([0, 0, 1], 90, 90), meanDir);
+    degreeGrid.push(make_coords(paralel));
+
+    //---------------------------------------------------------------------------------------
+    // RUMBS
+    //---------------------------------------------------------------------------------------
+    
+    // ToDo: Вообще все тут удалить (что связано с румбами). Происходят 
+    // какие то непонятные преобразования, хотя стоит лишь
+    // взять компонент Axis и настроить его под себя. В качестве 
+    // примера смотри на 
+    // components/AppGraphs/StereoGraphDIR/AxesAndData.tsx
+
+    //---------------------------------------------------------------------------------------
+    // making fisher stat
+    //---------------------------------------------------------------------------------------
+
+    // ToDo: перейти на использование уже подгтовленных компонентов для графиков, 
+    // в частности тут надо использовать Dot
+    // в этой директории ищи: components/Sub/Graphs/
+    // Использование компонента Dot сразу даст тебе и тултип, и 
+    // круг доверия (он опциональный), и в целом единый стиль со всем приложением
+
+
+    //---------------------------------------------------------------------------------------
+    // RETURN
+    //---------------------------------------------------------------------------------------
+    
+    return (
+        <svg className={styles.graph_interface} viewBox={ fullViewBoxSize }>
+ 
+            {/* Градусная сетка */}
+            { showDegreeGrid && 
+                <DegreeGrid
+                    viewBoxSize={viewBoxSize}
+                    meridianCount={meridianCount}
+                    parallelsCount={parallelsCount}
+                    meanDir={meanDir}
+                />
+            }
+
+
+            {/* Закраска зоны пересечения кругов */}
+            { showPolygon && 
+                <polygon 
+                    points={ polygonPoints } 
+                    fill={ polygonColor } 
+                />
+            }
+
+            {/* Спиральный грид в зоне пересечения */}
+            { showGrid && gridPointsCentered.map((gridPoints) => (
+                <Dot 
+                    x={gridPoints[0]} 
+                    y={gridPoints[1]} 
+                    r={gridRadius}
+                    id={'1'} 
+                    type={'mean'}
+                    annotation={{id: '', label: ''}}
+                    fillColor={gridColor}
+                    strokeColor={'purple'}
+                    strokeWidth={0}
+                />
+            ))}
+
+
+
+            {/* Круги вокруг палеонаправлений */}
+            { smallCircles.map((circles) => (
+                <Dot 
+                    x={circles[0]} 
+                    y={circles[1]} 
+                    r={circlesRadius}
+                    id={'1'} 
+                    type={'mean'}
+                    annotation={{id: '', label: ''}}
+                    fillColor={"black"}
+                    strokeColor={'purple'}
+                    strokeWidth={0}
+                />
+            ))}    
+     
+            {/* Истинное направление по фишеру (удалю когда сравню результаты) */}
+            <Dot 
+                x={to_center(meanDir, meanDir)[0]} 
+                y={to_center(meanDir, meanDir)[1]} 
+                r={fisherRadius}
+                id={'1'} 
+                type={'mean'}
+                annotation={{id: '', label: ''}}
+                fillColor={'red'}
+                strokeColor={'purple'}
+                strokeWidth={0}
+            />
+
+
+            {/* Круг альфа 95 */}
+            <polyline 
+                points={ make_coords(PlotCircle([0, 0, 1], alpha95, 90)) } 
+                stroke={ "red" }
+                fill={'none'}
+                strokeWidth={alphaCircleWidth} 
+                strokeDasharray={"0.01px, 0.003px"}
+            />
+
+            {/* Истинное направление по Хохлову */}
+            <Dot 
+                x={rotationCenterZone[0]} 
+                y={rotationCenterZone[1]} 
+                r={centerZoneRadius}
+                id={'1'} 
+                type={'mean'}
+                annotation={{id: '', label: ''}}
+                fillColor={centerZoneColor}
+                strokeColor={'purple'}
+                strokeWidth={0}
+            />
+
+        </svg>
+    );
+}
+
+
+
+    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/gag_components/debugCrash/my-tooltip.tsx b/src/gag_components/debugCrash/my-tooltip.tsx
new file mode 100644
index 00000000..8271867e
--- /dev/null
+++ b/src/gag_components/debugCrash/my-tooltip.tsx
@@ -0,0 +1,63 @@
+import React, {createElement as e, useEffect, useState} from 'react';
+// import "./style.css";
+// import {Rotate_sphere} from "./rotate_sphere";
+
+
+  export function TooltipContent(tooltip_props:{type:string, sred_dir: number[], center_zone: number[], dir_list: number[][], angle_list: number[]}) {
+
+    var type = tooltip_props.type;
+
+    let center_zone = tooltip_props.center_zone;
+    let dir_list = tooltip_props.dir_list;
+    let angle_list = tooltip_props.angle_list;
+    let sred_dir = tooltip_props.sred_dir
+
+    let content = '';
+    if (type === 'graph') {
+        return (
+            <span className='tooltip-span'>
+                Этот график представляет собой результат проецирования на 
+                плоскость изображения, построенного на поверхности сферы.
+                Красный круг - это доверительный интервал а95. Черные круги 
+                построены вокруг направления, получанного из одного образца.
+                Радиус черных кругов отображает качество соответствующих 
+                образцов и представляет собой доверительный интервал. Чем 
+                больше шагов размагничивания было пройдено образцом, тем 
+                меньше круг.
+                
+                <hr className='tooltip-span'></hr>
+                Пересечение кругов образует  синеватую зону, в которой лежит 
+                истинное палеомагнитное направление, закраску этой зоны можно 
+                убрать нажав на галочку show zone Точность расчета центра 
+                этой зоны зависит от плотности grid, которую можно настроить 
+                на панели параметров, также сам grid можно отобразить, нажав
+                на галочку show grid. При достаточной точности, центр
+                будет находиться ровно в гипоцентре зоны.
+
+            </span>
+        );
+    } 
+    
+    else if (type === 'checkbox') {
+        return (
+            <span>my checkbox</span>
+        );
+    } 
+
+    else if (type === 'select') {
+        return (
+            <span>my select</span>
+        );
+    }
+
+    else if (type === 'download svg') {
+        return (
+            <span>download svg</span>
+        );
+    }
+    
+    else {
+        return <span></span>;
+    }
+    
+  };
diff --git a/src/gag_components/debugCrash/rumbs.tsx b/src/gag_components/debugCrash/rumbs.tsx
new file mode 100644
index 00000000..fff97c52
--- /dev/null
+++ b/src/gag_components/debugCrash/rumbs.tsx
@@ -0,0 +1,159 @@
+import React, { FC } from "react";
+import { useTheme } from '@mui/material/styles';
+// import { Cutoff } from "../../../utils/GlobalTypes";
+// import { DotsData, GraphSettings, MeanDirection, TooltipDot } from "../../../utils/graphs/types";
+// import { graphSelectedDotColor } from "../../../utils/ThemeConstants";
+// import { Axis, Data, Dot } from "../../Common/Graphs";
+
+import { Cutoff } from "../../utils/GlobalTypes";
+import { DotsData, GraphSettings, MeanDirection, TooltipDot } from "../../utils/graphs/types";
+import { graphSelectedDotColor } from "../../utils/ThemeConstants";
+import { Axis, Data, Dot } from "../../components/Common/Graphs";
+
+interface IAxesAndData {
+graphId: string;
+  width: number;
+  height: number;
+  areaConstants: {
+    graphAreaMargin: number;
+    zeroX: number;
+    zeroY: number;
+    unit: number;
+    unitCount: number;
+  };
+  dataConstants: {
+    labels: Array<string>;
+    dotsData: DotsData;
+    directionalData: Array<[number, number]>;
+    tooltipData: Array<TooltipDot>;
+    meanDirection: MeanDirection;
+  };
+  selectedIDs: Array<number>;
+  inInterpretationIDs: Array<number>;
+  cutoff?: Cutoff;
+  settings: GraphSettings;
+};
+
+const Rumbs: FC<IAxesAndData> = ({ 
+  graphId, width, height,
+  areaConstants,
+  dataConstants,
+  selectedIDs,
+  inInterpretationIDs,
+  cutoff,
+  settings,
+}) => {
+
+  const theme = useTheme();
+
+  const {
+    graphAreaMargin,
+    unit,
+    unitCount,
+    zeroX,
+    zeroY,
+  } = areaConstants;
+
+  const {
+    directionalData,
+    tooltipData,
+    labels,
+    dotsData,
+    meanDirection,
+  } = dataConstants;
+
+  return (
+    <g 
+      id={`${graphId}-axes-and-data`}
+      transform={`translate(${graphAreaMargin}, ${graphAreaMargin})`}
+    >
+      <g id={`${graphId}-axes`}>
+        <circle 
+          id='stereo-circle-axis'
+          cx={zeroX} 
+          cy={zeroY} 
+          r={width/2}
+          fill="none"
+          stroke="black"
+          strokeWidth={1}
+        />
+        <Axis 
+          graphId={graphId}
+          type='x'
+          name='E'
+          mirrorName='W'
+          zero={zeroY}
+          length={width}
+          unit={unit}
+          unitCount={unitCount}
+          hideLine={true}
+          hideTicks={!settings.area.ticks}
+          tickPosition="both"
+        />
+        <Axis 
+          graphId={graphId}
+          type='y'
+          name='N'
+          mirrorName='S'
+          mirrorNamePosition={{x: zeroX, y: height + 15}}
+          zero={zeroX}
+          length={height}
+          unit={unit}
+          unitCount={unitCount}
+          hideLine={true}
+          hideTicks={!settings.area.ticks}
+          tickPosition="both"
+        />
+      </g>
+      {/* 
+          Создавать маркеры черезе path нельзя, ибо тогда теряется почти весь их функционал
+          Добавить слушатель можно только к конкретному элементу по типу <circle />
+          Потому лучше отрисовывать отдельно каждый <circle /> через map() массива координат
+          Однако hover всё равно работать не будет и потому лучше использовать onMouseOver
+      */}
+      <g 
+        id={`${graphId}-data`}
+        transform={
+          `
+            translate(${width / 2}, ${width / 2})
+          `
+        }
+      >
+        <Data 
+          graphId={graphId}
+          type='all'
+          labels={labels}
+          data={dotsData}
+          connectDots={false}
+          directionalData={directionalData}
+          tooltipData={tooltipData}
+          selectedIDs={selectedIDs}
+          inInterpretationIDs={inInterpretationIDs}
+          dotFillColor='black'
+          differentColors={true}
+          colorsType={theme.palette.mode}
+          settings={settings.dots}
+        />
+        {
+          meanDirection &&
+          <Dot 
+            x={meanDirection.xyData[0]} 
+            y={meanDirection.xyData[1]} 
+            id={`${graphId}-mean-dot`} 
+            type={'mean'}
+            annotation={{id: '', label: ''}}
+            tooltip={meanDirection.tooltip}
+            fillColor={meanDirection.dirData[1] > 0 ? graphSelectedDotColor('mean') : 'white'}
+            strokeColor={meanDirection.confidenceCircle?.color || 'black'}
+            confidenceCircle={meanDirection.confidenceCircle}
+            cutoffCircle={(cutoff?.enabled && cutoff?.borderCircle?.show) ? meanDirection.cutoffCircle : undefined}
+            greatCircle={meanDirection.greatCircle}
+            settings={{...settings.dots, confidenceCircle: true}}
+          />
+        }
+      </g>
+    </g>
+  )
+}
+
+export default Rumbs
diff --git a/src/gag_components/degreeGrid/degreeGrid.module.scss b/src/gag_components/degreeGrid/degreeGrid.module.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/gag_components/degreeGrid/degreeGrid.tsx b/src/gag_components/degreeGrid/degreeGrid.tsx
new file mode 100644
index 00000000..f3417ca4
--- /dev/null
+++ b/src/gag_components/degreeGrid/degreeGrid.tsx
@@ -0,0 +1,342 @@
+import styles from "./degreeGrid.module.scss" 
+import {
+    RotateAroundV,
+    RotateAroundX,
+    RotateAroundY,
+    PlotCircle,
+    make_coords,
+    centering,
+    poly_contour,
+    convertToLambert,
+    lambertMass,
+    to_center,
+    points_dist_2d,
+    getViewBoxSize,
+    getPointSize,
+    PlotArcInBox,
+    getOnePointInCenteredBox,
+    // getOnePointInBox,
+    DekVgeo,
+    NormalizeV,
+    angle_between_v,
+    getOneCirclePoint,
+    centerToBack,
+    plotParalellCircle,
+    plotMeridianCircle,
+    GeoVdek,
+    cutParEnd,
+    cutMerEnd,
+
+} from "../gag_functions";
+import { Axis, Data, Dot } from "../../components/Common/Graphs";
+import {PointsWithLabels} from "../pointsWithLabels/pointsWithLabels";
+
+
+interface degreeGraticules {
+    viewBoxSize: string,
+    meridianCount: number,
+    parallelsCount: number,
+    meanDir: number[]
+}
+
+export function DegreeGrid({
+                                viewBoxSize,
+                                meridianCount,
+                                parallelsCount,
+                                meanDir
+                            }: degreeGraticules) {
+   
+
+    //---------------------------------------------------------------------------------------
+    // RAM
+    //---------------------------------------------------------------------------------------
+    
+    // половина ширины черной рамки
+    let width = -viewBoxSize.split(' ')[0] * 0.85 ;
+    
+                
+    // расчет спроецированных координат рамки
+    let lamberWidth =  width;       
+   
+    // width = lamberWidth * 0.98;
+
+
+    let ram = String(lamberWidth) + ',' + String(lamberWidth) + ' ';
+    ram += String(lamberWidth) + ',' + String(-lamberWidth) + ' ';
+    ram += String(-lamberWidth) + ',' + String(-lamberWidth) + ' ';
+    ram += String(-lamberWidth) + ',' + String(lamberWidth) + ' ';
+    ram += String(lamberWidth) + ',' + String(lamberWidth) + ' ';
+
+
+    //---------------------------------------------------------------------------------------
+    // DEGREE GRID
+    //---------------------------------------------------------------------------------------
+
+    //---------------------------------------------------------------------------------------
+    // MERIDIANS PLOT
+    //---------------------------------------------------------------------------------------
+
+    let meridiansInBox: number[][][] = [];
+
+    let degreeMerLabels:number[][] = [];
+    let endMerCords: number[][] = [];
+
+    let degreeMerLabelsShift: number[] = [0, width / 8];
+    
+    let merTicks: number[][][] = [];
+
+    let merTicksSift: number = width / 25;
+
+    let point = [1, 0, 0];
+
+    let centeredMeridian: number[][] = [];
+
+    for (let i = 0; i < meridianCount / 2; i++) {
+
+
+        point = RotateAroundV(point, [0, 1, 0], 360 / meridianCount );
+        centeredMeridian = PlotArcInBox(to_center(point, meanDir), 90, width, 200);
+       
+        // слабое место. здесь происходит вылет, без ошибки если убрать это условие, не знаю почему
+        if (centeredMeridian.length > 3){
+            
+            // разварачиваю массивы с точками меридианов, чтобы нулевая точка была внизу сетки
+            if (centeredMeridian[0][1] > centeredMeridian[2][1]) {
+                centeredMeridian.reverse();
+            }
+
+            // обрезаю концы параллелей и меридианов по краю рамки
+            centeredMeridian = cutMerEnd(lambertMass(centeredMeridian, meanDir), width);
+            meridiansInBox.push(centeredMeridian);
+            
+            // координата конца меридиана
+            let merEnd: number[] = centeredMeridian[centeredMeridian.length - 1]
+
+            // координаты делений и подписи к ним
+            // только внизу сетки
+            if (merEnd[1] == width) {
+                
+                
+
+                degreeMerLabels.push(DekVgeo(centerToBack(merEnd, meanDir)));
+                 
+                merTicks.push(
+                    [
+                        merEnd, 
+                        [
+                            merEnd[0], 
+                            merEnd[1] + merTicksSift, 
+                            merEnd[2]
+                        ]
+                    ]
+                );
+                
+                // задаю координаты подписи долготы и сдвиг для разного числа символов подписи
+                let xMerLabelSift: number = 0;
+                let lenOfLabel: number = String(degreeMerLabels[degreeMerLabels.length - 1][0].toFixed()).length
+  
+                if (lenOfLabel == 1) {
+                    xMerLabelSift = width / 50;
+                }
+                else if (lenOfLabel == 2) {
+                    xMerLabelSift = width / 22;
+                }
+                else if (lenOfLabel == 3) {
+                    xMerLabelSift = width / 15;
+                }
+                else {
+                    xMerLabelSift = width / 11;
+                }
+                endMerCords.push(
+                    [
+                        merEnd[0] - xMerLabelSift, 
+                        merEnd[1], 
+                        merEnd[2]
+                    ]
+                );
+            }      
+        }
+    }
+
+
+    // делаю подписи через одну рядос с северным полюсом
+
+
+    if (meanDir[1] > 0.95){
+        for (let i = 0; i < merTicks.length; i++){
+            if ((i + 1) % 3 != 0) {
+                if(merTicks[i][0][0] > -width){
+                    merTicks[i][0] = merTicks[i][1];
+                }
+            }
+        }
+    }
+
+
+
+
+    //---------------------------------------------------------------------------------------
+    // PARALELS PLOT
+    //---------------------------------------------------------------------------------------
+    
+    let paralelsInBox:number[][][] = [];
+
+    let degreeParLabels:number[][] = [];
+    let endParCords: number[][] = [];
+
+    let parTicks: number[][][] = [];
+
+    let parTicksSift: number =  width / 25;
+    let degreeParLabelsShift: number[] = [-width / 5.5, width / 35];
+
+    for (let i = 2; i < parallelsCount / 2; i++) {
+
+        let centeredParallel: number[][] = PlotArcInBox(to_center([0, 1, 0], meanDir), i * (360 / meridianCount), width, 300);
+
+        if (centeredParallel.length > 5){
+
+            if (centeredParallel[0][0] > centeredParallel[2][0]) {
+                centeredParallel.reverse();
+            }
+            centeredParallel = cutParEnd(lambertMass(centeredParallel, meanDir), width);
+            
+            paralelsInBox.push(centeredParallel);
+
+            if (centeredParallel[0][0] == -width){
+                endParCords.push(centeredParallel[0]);
+
+                degreeParLabels.push(DekVgeo(centerToBack(centeredParallel[0], meanDir)));
+
+                parTicks.push(
+                    [
+                        centeredParallel[0], 
+                        [
+                            centeredParallel[0][0] - parTicksSift, 
+                            centeredParallel[0][1], 
+                            centeredParallel[0][2]
+                        ]
+                    ]
+                );    
+            }
+        }
+    }
+
+
+
+    //---------------------------------------------------------------------------------------
+    // RETURN
+    //---------------------------------------------------------------------------------------
+
+    return (
+        <g>
+
+            {/* ------------------------------------------- */}
+            {/* ------------------MERIDIANS---------------- */}
+            {/* ------------------------------------------- */}
+
+            { meridiansInBox.map((circles) => (
+                <polyline 
+                    points={ make_coords(circles) } 
+                    stroke={ "grey" }
+                    fill={'none'}
+                    strokeWidth={width / 230} 
+                />
+            ))}
+
+            {/* MERIDIANS LABELS */}
+            <PointsWithLabels
+                points={endMerCords}
+                radius={0}
+                type={"lat"}
+                labelsValues={degreeMerLabels}
+                fontSize={width / 12}
+                xShift={degreeMerLabelsShift[0]}
+                yShift={degreeMerLabelsShift[1]}
+                width = {width}
+                meanDir = {meanDir}
+            />
+
+            {/* MERIDIANS TICKS */}
+            { merTicks.map((tick) => (
+                <polyline 
+                    points={ make_coords(tick) } 
+                    stroke={ "black" }
+                    fill={'none'}
+                    strokeWidth={width / 80} 
+                />
+            ))}
+
+            {/* ------------------------------------------- */}
+            {/* ------------------PARALLELS--------------- */}
+            {/* ------------------------------------------- */}
+            
+            { paralelsInBox.map((circles) => (
+                <polyline 
+                    points={ make_coords(circles) } 
+                    stroke={ "grey" }
+                    fill={'none'}
+                    strokeWidth={width / 230} 
+                />
+            ))}
+
+            {/* PARALELS LABELS */}
+            <PointsWithLabels
+                points={endParCords}
+                radius={0}
+                type={"lon"}
+                labelsValues={degreeParLabels}
+                fontSize={width / 12}
+                xShift={degreeParLabelsShift[0]}
+                yShift={degreeParLabelsShift[1]}
+                width = {width}
+                meanDir = {meanDir}
+            />
+
+            {/* PARALLELS TICKS */}
+            { parTicks.map((tick) => (
+                <polyline 
+                    points={ make_coords(tick) } 
+                    stroke={ "black" }
+                    fill={'none'}
+                    strokeWidth={width / 80} 
+                />
+            ))}
+
+            {/* ------------------------------------------- */}
+            {/* -------------------COMMON------------------ */}
+            {/* ------------------------------------------- */}
+
+            {/* ram */}
+            <polyline 
+                points={ ram } 
+                stroke={ "black" }
+                fill={'none'}
+                strokeWidth={width / 100} 
+            />
+
+        </g>
+    );
+}
+
+
+
+    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/gag_components/gag_functions.ts b/src/gag_components/gag_functions.ts
new file mode 100644
index 00000000..60bce3ab
--- /dev/null
+++ b/src/gag_components/gag_functions.ts
@@ -0,0 +1,1261 @@
+
+//-----------------------------------------------------------------------
+// projections func
+//-----------------------------------------------------------------------
+
+
+
+export function get_quantiles(d: number, apc: number, p: number) {
+
+    var quantiles = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
+
+    if (d == 10) {
+        if (apc == 0){
+            if (p == 950){
+                quantiles = [9.9, 8.1, 7.1, 6.4, 5.9, 5.5, 5.2, 4.9, 4.6, 4.4, 4.3, 4.1, 4.0, 3.8];
+            }
+            if (p == 975){
+                quantiles = [11.0, 9.1, 7.9, 7.1, 6.6, 6.1, 5.8, 5.4, 5.2, 5.0, 4.8, 4.6, 4.4, 4.3];
+            }
+            if (p == 990){
+                quantiles = [12.3, 10.1, 8.9, 8.0, 7.4, 6.8, 6.4, 6.1, 5.8, 5.5, 5.3, 5.1, 4.9, 4.8];
+            }
+            if (p == 995){
+                quantiles = [8.6, 7.9, 7.4, 6.9, 6.5,6.2, 5.9];
+            }
+            if (p == 997){
+                quantiles = [9.0, 8.3, 7.7, 7.2, 6.8, 6.5, 6.2];
+            }
+        }
+        if (apc == 1){
+            if (p == 950){
+                quantiles = [8.4, 7.3, 6.6, 6.0, 5.6, 5.3, 5.0, 4.8, 4.5, 4.3, 4.2, 4.0, 3.9, 3.8];
+            }
+            if (p == 975){
+                quantiles = [9.3, 8.1, 7.3, 6.7, 6.3, 5.9, 5.6, 5.3, 5.0, 4.8, 4.6, 4.5, 4.3, 4.2];
+            }
+            if (p == 990){
+                quantiles = [10.4, 9.1, 8.2, 7.5, 7.0, 6.6, 6.2, 5.9, 5.6, 5.4, 5.2, 5.0, 4.8, 4.7];
+            }
+            if (p == 995){
+                quantiles = [8.1, 7.5, 7.0, 6.6, 6.3, 6.0, 5.8];
+            }
+            if (p == 997){
+                quantiles = [8.4, 7.9, 7.4, 7.0, 6.6, 6.3, 6.1];
+            }
+        }
+    }
+    else {
+        if (apc == 0){
+            if (p == 950){
+                quantiles = [20.1, 16.4, 14.3, 12.9, 11.8, 11.0, 10.4, 9.8, 9.3, 8.9, 8.6, 8.2, 7.9, 7.7];
+            }
+            if (p == 975){
+                quantiles = [22.1, 18.2, 15.9, 14.3, 13.1, 12.3, 11.5, 10.9, 10.4, 9.9, 9.5, 9.2, 8.8, 8.6];
+            }
+            if (p == 990){
+                quantiles = [24.7, 20.4, 17.8, 16.0, 14.7, 13.7, 12.9, 12.2, 11.6, 11.1, 10.6, 10.2, 9.9, 9.6];
+            }
+            if (p == 995){
+                quantiles = [17.3, 15.8, 14.8, 13.8, 13.1, 12.5, 11.9];
+            }
+            if (p == 997){
+                quantiles = [18.1, 16.6, 15.5, 14.5, 13.7, 13.1, 12.5];
+            }
+        }
+        if (apc == 1){
+            if (p == 950){
+                quantiles = [16.9, 14.7, 13.2, 12.1, 11.2, 10.5, 10.0, 9.5, 9.1, 8.7, 8.4, 8.1, 7.8, 7.5];
+            }
+            if (p == 975){
+                quantiles = [18.6, 16.3, 14.7, 13.5, 12.5, 11.7, 11.1, 10.5, 10.1, 9.7, 9.3, 9.0, 8.7, 8.4];
+            }
+            if (p == 990){
+                quantiles = [20.8, 18.2, 16.4, 15.0, 14.0, 13.1, 12.4, 11.8, 11.2, 10.8, 10.4, 10.0, 9.7, 9.4];
+            }
+            if (p == 995){
+                quantiles = [16.2, 15.0, 14.1, 13.3, 12.7, 12.1, 11.6];
+            }
+            if (p == 997){
+                quantiles = [17.0, 15.7, 14.8, 14.0, 13.3, 12.7, 12.2];
+            }
+        }
+    }
+    return quantiles;
+
+}
+
+
+
+
+export function fisherStat(dirs: number[][]) {
+
+    var x_sum = 0;
+    var y_sum = 0;
+    var z_sum = 0;
+
+    for (var i = 0; i < dirs.length; i++)
+    {
+        x_sum += dirs[i][0];
+        y_sum += dirs[i][1];
+        z_sum += dirs[i][2];
+    }
+    var r = [x_sum, y_sum, z_sum];
+
+    var r_len = vector_length(r);
+    var n = dirs.length;
+    var k = (n - 1) / (n - r_len);
+    var alpha95 = 140 / Math.sqrt(k * n);
+
+    var result : [number[], number] = [NormalizeV(r), alpha95];
+    return result;
+}
+
+export function getRandomInt(min: number, max: number) {
+    var fmin = Math.ceil(min);
+    var fmax = Math.floor(max);
+    return Math.floor(Math.random() * (fmax - fmin) + fmin); // The maximum is exclusive and the minimum is inclusive
+}
+
+export function getRandomfloat(min: number, max: number) {
+    return Math.random() * (max - min) + min;
+}
+
+
+
+export function GridVdek(phiAngle: number, lmbdAngle: number)
+{
+
+    let r: number = 1;
+    let phi: number = phiAngle * Math.PI / 180;
+    let lmbd: number = lmbdAngle * Math.PI / 180;
+
+    let X: number = r * Math.cos(phi) * Math.cos(lmbd);
+    let Y: number = r * Math.cos(phi) * Math.sin(lmbd);
+    let Z: number = r * Math.sin(phi);
+    
+    let C: number[] = RotateAroundV([X, Y, Z], [1,0,0], 90);
+
+    return C;
+
+}
+
+
+
+export function DekVgeo(point: number[])
+{
+    
+    // point = RotateAroundX(point, 90);
+    // point = RotateAroundZ(point, 90);
+    
+    // let x = point[0];
+    // let y = point[1];
+    // let z = point[2];
+
+    // let R = 1;
+    // let phi = Math.asin(z / R) * 180 / Math.PI;
+    // let lmbd = Math.atan(y / x) * 180 / Math.PI;
+
+    // return [-phi, lmbd];
+
+
+    let dir: number[] = NormalizeV(point);
+    let phi: number = 0;
+    let lmbd: number = 90;
+
+    if (dir[0] > 0 && dir[1] > 0 && dir[2] > 0) {
+        phi = angle_between_v([0, 0, 1], [dir[0], 0, dir[2]])  * 180 / Math.PI;
+        lmbd = -angle_between_v([dir[0], dir[1], dir[2]], [dir[0], 0, dir[2]]) * 180 / Math.PI;
+        return [phi, lmbd];
+    }
+
+    if (dir[0] > 0 && dir[1] > 0 && dir[2] < 0) {
+        phi = angle_between_v([0, 0, 1], [dir[0], 0, dir[2]]) * 180 / Math.PI;
+        lmbd = -angle_between_v([dir[0], dir[1], dir[2]], [dir[0], 0, dir[2]]) * 180 / Math.PI;
+        return [phi, lmbd];
+    }
+
+    if (dir[0] > 0 && dir[1] < 0 && dir[2] > 0) {
+        phi = angle_between_v([0, 0, 1], [dir[0], 0, dir[2]]) * 180 / Math.PI;
+        lmbd = angle_between_v([dir[0], dir[1], dir[2]], [dir[0], 0, dir[2]]) * 180 / Math.PI;
+        return [phi, lmbd];
+    }
+
+    if (dir[0] > 0 && dir[1] < 0 && dir[2] < 0) {
+        phi =  angle_between_v([0, 0, 1], [dir[0], 0, dir[2]]) * 180 / Math.PI;
+        lmbd = angle_between_v([dir[0], dir[1], dir[2]], [dir[0], 0, dir[2]]) * 180 / Math.PI;
+        return [phi, lmbd];
+    }
+
+    if (dir[0] < 0 && dir[1] > 0 && dir[2] > 0) {
+        phi =  -angle_between_v([0, 0, 1], [dir[0], 0, dir[2]]) * 180 / Math.PI;
+        lmbd = -angle_between_v([dir[0], dir[1], dir[2]], [dir[0], 0, dir[2]]) * 180 / Math.PI;
+        return [phi, lmbd];
+    }
+
+    if (dir[0] < 0 && dir[1] > 0 && dir[2] < 0) {
+        phi = -angle_between_v([0, 0, 1], [dir[0], 0, dir[2]]) * 180 / Math.PI;
+        lmbd = -angle_between_v([dir[0], dir[1], dir[2]], [dir[0], 0, dir[2]]) * 180 / Math.PI;
+        return [phi, lmbd];
+    }
+
+    if (dir[0] < 0 && dir[1] < 0 && dir[2] > 0) {
+        phi = -angle_between_v([0, 0, 1], [dir[0], 0, dir[2]]) * 180 / Math.PI;
+        lmbd = angle_between_v([dir[0], dir[1], dir[2]], [dir[0], 0, dir[2]]) * 180 / Math.PI;
+        return [phi, lmbd];
+    }
+
+    if (dir[0] < 0 && dir[1] < 0 && dir[2] < 0) {
+        phi = -angle_between_v([0, 0, 1], [dir[0], 0, dir[2]]) * 180 / Math.PI;
+        lmbd = angle_between_v([dir[0], dir[1], dir[2]], [dir[0], 0, dir[2]]) * 180 / Math.PI;
+        return [phi, lmbd];
+    }
+    // TODO: if dir[0] = 0 || dir[1] == 0 ???!
+    return [phi, lmbd];
+}
+
+export function getOcto(point: number[]){
+
+    let dir: number[] = NormalizeV(point);
+
+
+    if (dir[0] > 0 && dir[1] > 0 && dir[2] > 0) {
+        return '+++';
+    }
+
+    if (dir[0] > 0 && dir[1] > 0 && dir[2] < 0) {
+        return '++-';
+    }
+
+    if (dir[0] > 0 && dir[1] < 0 && dir[2] > 0) {
+        return '+-+';
+    }
+
+    if (dir[0] > 0 && dir[1] < 0 && dir[2] < 0) {
+        return '+--';
+    }
+
+    if (dir[0] < 0 && dir[1] > 0 && dir[2] > 0) {
+        return '-++';
+    }
+
+    if (dir[0] < 0 && dir[1] > 0 && dir[2] < 0) {
+        return '-+-';
+    }
+
+    if (dir[0] < 0 && dir[1] < 0 && dir[2] > 0) {
+        return '--+';
+    }
+
+    if (dir[0] < 0 && dir[1] < 0 && dir[2] < 0) {
+        return '---';
+    }
+
+    // TODO: if dir[0] = 0 || dir[1] == 0 ???!
+
+    return 0;
+}
+
+export function GeoVdek(phiAngle: number, lmbdAngle: number)
+{
+
+    // let r: number = 1;
+    // let phi: number = phiAngle * Math.PI / 180;
+    // let lmbd: number = lmbdAngle * Math.PI / 180;
+
+    // let X: number = r * Math.cos(phi) * Math.cos(lmbd);
+    // let Y: number = r * Math.cos(phi) * Math.sin(lmbd);
+    // let Z: number = r * Math.sin(phi);
+    
+    // let C: number[] = RotateAroundV([X, Y, Z], [1,0,0], 90);
+    // return C;
+
+    let point: number[] = [0, 0, 1];
+
+    if (phiAngle > 0 && phiAngle < 90 && lmbdAngle > -90 && lmbdAngle < 0){
+        point = RotateAroundY(point, phiAngle);
+        point = RotateAroundV(point, get_perp(point, [0, 1, 0]), -lmbdAngle);
+    }
+
+    else if (phiAngle > 90 && phiAngle < 180 && lmbdAngle > -90 && lmbdAngle < 0){
+        point = RotateAroundY(point, phiAngle);
+        point = RotateAroundV(point, get_perp(point, [0, 1, 0]), -lmbdAngle);
+    }
+
+    else if (phiAngle > 0 && phiAngle < 90 && lmbdAngle > 0 && lmbdAngle < 90){
+        point = RotateAroundY(point, phiAngle);
+        point = RotateAroundV(point, get_perp(point, [0, -1, 0]), lmbdAngle);
+    }
+
+    else if (phiAngle > 90 && phiAngle < 180 && lmbdAngle > 0 && lmbdAngle < 90){
+        point = RotateAroundY(point, phiAngle);
+        point = RotateAroundV(point, get_perp(point, [0, -1, 0]), lmbdAngle);
+    }
+
+    else if (phiAngle > -90 && phiAngle < 0 && lmbdAngle > -90 && lmbdAngle < 0){
+        point = RotateAroundY(point, phiAngle);
+        point = RotateAroundV(point, get_perp(point, [0, 1, 0]), -lmbdAngle);
+    }
+
+    else if (phiAngle > -180 && phiAngle < -90 && lmbdAngle > -90 && lmbdAngle < 0){
+        point = RotateAroundY(point, phiAngle);
+        point = RotateAroundV(point, get_perp(point, [0, -1, 0]), lmbdAngle);
+    }
+
+    else if (phiAngle > -90 && phiAngle < 0 && lmbdAngle > 0 && lmbdAngle < 90){
+        point = RotateAroundY(point, phiAngle);
+        point = RotateAroundV(point, get_perp(point, [0, -1, 0]), lmbdAngle);
+    }
+
+    else if (phiAngle > -180 && phiAngle < -90 && lmbdAngle > 0 && lmbdAngle < 90){
+        point = RotateAroundY(point, phiAngle);
+        point = RotateAroundV(point, get_perp(point, [0, -1, 0]), lmbdAngle);
+    }
+    else {
+        point = [1, 1, 1]
+    }
+    // TODO: if dir[0] = 0 || dir[1] == 0 ???!
+    return point;
+}
+
+
+export function vector_length(v:number[]) { return Math.sqrt( v[0] * v[0] + v[1] * v[1] + v[2] * v[2] ); }
+
+export function points_dist(p1:number[], p2:number[]) {
+    return Math.sqrt( 
+            (p1[0] - p2[0]) * (p1[0] - p2[0]) + 
+            (p1[1] - p2[1]) * (p1[1] - p2[1]) + 
+            (p1[2] - p2[2]) * (p1[2] - p2[2])
+        );
+}
+
+export function angle_between_v(v1: number[], v2: number[])
+{
+    let angle;
+    angle = Math.acos( (v1[0] * v2[0] + v1[1] * v2[1] + v1[2] * v2[2]) / ( vector_length(v1) * vector_length(v2) ) );
+
+    if (angle > 180) { angle -= 180; }
+        return angle;
+}
+
+
+
+//-----------------------------------------------------------------------
+// matrix mod functions
+//-----------------------------------------------------------------------
+
+export function MultiplyMatrix(A: number[][], B: number[])
+{
+    let C = [0, 0, 0];
+
+    C[0] = A[0][0] * B[0] + A[0][1] * B[1] + A[0][2] * B[2];
+    C[1] = A[1][0] * B[0] + A[1][1] * B[1] + A[1][2] * B[2];
+    C[2] = A[2][0] * B[0] + A[2][1] * B[1] + A[2][2] * B[2];
+
+    return C;
+}
+
+export function RotateAroundV(B: number[], V: number[], angle: number)
+{
+    let phi = angle * Math.PI / 180;
+
+    var x = V[0];
+    var y = V[1];
+    var z = V[2];
+
+    let A = [
+        [Math.cos(phi) + (1 - Math.cos(phi)) * x * x, (1 - Math.cos(phi)) * x * y - z * Math.sin(phi), (1 - Math.cos(phi)) * x * z + y * Math.sin(phi)],
+        [(1 - Math.cos(phi)) * y * x + z * Math.sin(phi), Math.cos(phi) + (1 - Math.cos(phi)) * y * y, (1 - Math.cos(phi)) * y * z - x * Math.sin(phi)],
+        [(1 - Math.cos(phi)) * z * x - y * Math.sin(phi), (1 - Math.cos(phi)) * z * y + x * Math.sin(phi), Math.cos(phi) + (1 - Math.cos(phi)) * z * z]
+    ];
+
+
+    let C = MultiplyMatrix(A, B)
+
+    return C;
+}
+
+export function RotateAroundZ(B: number[], angle: number)
+{
+    let phi = angle * Math.PI / 180;
+
+    let A = [
+                [ Math.cos(phi), -Math.sin(phi), 0 ],
+                [ Math.sin(phi), Math.cos(phi), 0 ],
+                [ 0, 0, 1 ],
+            ];
+
+    var C = MultiplyMatrix(A, B)
+
+    return C;
+}
+
+export function RotateAroundY(B: number[], angle: number)
+{
+    let phi = angle * Math.PI / 180;
+
+    let A = [
+                [ Math.cos(phi), 0, Math.sin(phi) ],
+                [ 0, 1, 0 ],
+                [ -Math.sin(phi), 0, Math.cos(phi) ],
+            ];
+
+    var C = MultiplyMatrix(A, B)
+
+    return C;
+}
+export function RotateAroundX(B: number[], angle: number)
+{
+    let phi = angle * Math.PI / 180;
+
+    let A = [
+                [ 1, 0, 0 ],
+                [ 0, Math.cos(phi), -Math.sin(phi) ],
+                [ 0, Math.sin(phi), Math.cos(phi) ],
+            ];
+
+    var C = MultiplyMatrix(A, B)
+
+    return C;
+}
+
+export function NormalizeV(V: number[])
+{
+    var x = V[0];
+    var y = V[1];
+    var z = V[2];
+
+    var L = Math.sqrt(x * x + y * y + z * z);
+
+    var C = [x / L, y / L, z / L];
+
+    return C;
+}
+
+export function vectV2(V: number[])
+{
+    var x = V[0];
+    var y = V[1];
+    var z = V[2];
+
+    var L = Math.sqrt(x * x + y * y + z * z);
+
+    var C = [2 * x / L, 2 * y / L, 2 * z / L];
+
+    return C;
+}
+
+export function get_perp(v1: number[],v2: number[])
+{
+    var x1 = v1[0];
+    var y1 = v1[1];
+    var z1 = v1[2];
+
+    var x2 = v2[0];
+    var y2 = v2[1];
+    var z2 = v2[2];
+
+    var i = y1 * z2 - z1 * y2;
+    var j = z1 * x2 - x1 * z2;
+    var k = x1 * y2 - y1 * x2;
+
+    return NormalizeV([i,j,k]);
+}
+
+//-----------------------------------------------------------------------
+// circle plot func
+//-----------------------------------------------------------------------
+
+export function PlotCircle(dir: number[], phi: number, circle_points_numb: number)
+{
+    let direction = NormalizeV(dir);
+
+    //-------------------------------------------------------------------
+    //plot solid line
+    //-------------------------------------------------------------------
+    let my_point = getOneCirclePoint(direction, phi);
+
+    var points4 = [];
+
+    points4.push( [my_point[0], my_point[1], my_point[2]] );
+
+
+
+    for ( let i = 0; i < circle_points_numb; i ++ ) {
+        my_point = RotateAroundV(my_point, direction, 360 / circle_points_numb);
+        points4.push( [my_point[0], my_point[1], my_point[2]] ) ;
+    }
+
+    return points4;
+}
+
+//-----------------------------------------------------------------------
+// begin
+//-----------------------------------------------------------------------
+export function to_center(p: number[], dir: number[]){
+    let point = p;
+    
+    if (dir[0] >= 0 && dir[1] >= 0 && dir[2] >= 0) {
+        var yrot = RotateAroundY(point, -angle_between_v([0, 0, 1], [dir[0], 0, dir[2]]) * 180 / Math.PI);
+        var diryrot = RotateAroundY(dir, -angle_between_v([0, 0, 1], [dir[0], 0, dir[2]]) * 180 / Math.PI);
+        yrot = RotateAroundX(yrot, angle_between_v(diryrot, [0, 0, 1]) * 180 / Math.PI);
+        point = yrot;
+    }
+
+    if (dir[0] >= 0 && dir[1] >= 0 && dir[2] <= 0) {
+        var diryrot = RotateAroundY(dir, -( 90 + angle_between_v([1, 0, 0], [dir[0], 0, dir[2]]) * 180 / Math.PI));
+        var yrot = RotateAroundY(point, -( 90 + angle_between_v([1, 0, 0], [dir[0], 0, dir[2]]) * 180 / Math.PI));
+        yrot = RotateAroundX(yrot, angle_between_v(diryrot, [0, 0, 1]) * 180 / Math.PI);
+        point = yrot;
+    }
+
+    if (dir[0] >= 0 && dir[1] <= 0 && dir[2] <= 0) {
+        var diryrot = RotateAroundY(dir, -(90 + angle_between_v([1, 0, 0], [dir[0], 0, dir[2]]) * 180 / Math.PI));
+        var yrot = RotateAroundY(point, -(90 + angle_between_v([1, 0, 0], [dir[0], 0, dir[2]]) * 180 / Math.PI));
+        yrot = RotateAroundX(yrot, -angle_between_v(diryrot, [0, 0, 1]) * 180 / Math.PI);
+        point = yrot;
+    }
+
+    if (dir[0] >= 0 && dir[1] <= 0 && dir[2] >= 0) {
+        var diryrot = RotateAroundY(dir, -angle_between_v([0, 0, 1], [dir[0], 0, dir[2]]) * 180 / Math.PI);
+        var yrot = RotateAroundY(point, -angle_between_v([0, 0, 1], [dir[0], 0, dir[2]]) * 180 / Math.PI);
+        yrot = RotateAroundX(yrot, -angle_between_v(diryrot, [0, 0, 1]) * 180 / Math.PI);
+        point = yrot;
+    }
+
+    if (dir[0] <= 0 && dir[1] >= 0 && dir[2] >= 0) {
+        var diryrot = RotateAroundY(dir, angle_between_v([0, 0, 1], [dir[0], 0, dir[2]]) * 180 / Math.PI);
+        var yrot = RotateAroundY(point, angle_between_v([0, 0, 1], [dir[0], 0, dir[2]]) * 180 / Math.PI);
+        yrot = RotateAroundX(yrot, angle_between_v(diryrot, [0, 0, 1]) * 180 / Math.PI);
+        point = yrot;
+    }
+    if (dir[0] <= 0 && dir[1] <= 0 && dir[2] >= 0) {
+        var diryrot = RotateAroundY(dir, angle_between_v([0, 0, 1], [dir[0], 0, dir[2]]) * 180 / Math.PI);
+        var yrot = RotateAroundY(point, angle_between_v([0, 0, 1], [dir[0], 0, dir[2]]) * 180 / Math.PI);
+        yrot = RotateAroundX(yrot, -angle_between_v(diryrot, [0, 0, 1]) * 180 / Math.PI);
+        point = yrot;
+    }
+    if (dir[0] <= 0 && dir[1] >= 0 && dir[2] <= 0) {
+        var diryrot =RotateAroundY(dir, 90 + angle_between_v([-1, 0, 0], [dir[0], 0, dir[2]]) * 180 / Math.PI);
+        var yrot = RotateAroundY(point, 90 + angle_between_v([-1, 0, 0], [dir[0], 0, dir[2]]) * 180 / Math.PI);
+        yrot = RotateAroundX(yrot, angle_between_v(diryrot, [0, 0, 1]) * 180 / Math.PI);
+        point = yrot;
+    }
+    if (dir[0] <= 0 && dir[1] <= 0 && dir[2] <= 0) {
+        var diryrot = RotateAroundY(dir, 90 + angle_between_v([-1, 0, 0], [dir[0], 0, dir[2]]) * 180 / Math.PI);
+        var yrot = RotateAroundY(point, 90 + angle_between_v([-1, 0, 0], [dir[0], 0, dir[2]]) * 180 / Math.PI);
+        yrot = RotateAroundX(yrot, -angle_between_v(diryrot, [0, 0, 1]) * 180 / Math.PI);
+        point = yrot;
+    }
+
+    return point;
+}
+
+export function centering(in_points: number[][], dir: number[]){
+
+    const res = [];
+    const allCenteredPoints = [];
+    
+    for (let i = 0; i < in_points.length; i++) {
+        const centeredPoint = to_center(in_points[i], dir);
+        allCenteredPoints.push(centeredPoint);
+
+        if (centeredPoint[2] >= 0) {
+            res.push(centeredPoint);
+        }
+    }
+
+    //  Для меридианов и параллелей
+    if (res.length < allCenteredPoints.length) {
+        for (let i = 0; i < allCenteredPoints.length; i++) {
+            if (res[i] != allCenteredPoints[i]) {
+                return res.slice(i, res.length).concat(res.slice(0, i));
+            }
+        }
+    }
+
+    return res;
+}
+
+export function make_coords(points: number[][]){
+
+    var s = "";
+    var res = [];
+
+    for ( let j = 0; j < points.length; j ++ ) {
+        res.push([points[j][0], points[j][1]]);
+    }
+    for ( let j = 0; j < res.length; j ++ ) {
+        s += String(res[j][0]);
+        s += "," + String(res[j][1]) + " ";
+    }
+    return s;
+}
+
+
+export function lineSphereIntersect(v: number[]) {
+
+    var a1 = v[0] * v[0] + v[1] * v[1] + v[2] * v[2];
+    var b1 = 2 * v[2]
+    var c1 = 1 - 4;
+
+    var d = b1 * b1 - 4 * a1 * c1;
+    var t1 = (-b1 - Math.sqrt(d)) / (2 * a1);
+    var t2 = (-b1 + Math.sqrt(d)) / (2 * a1);
+
+    let x1 = v[0] * t1;
+    let y1 = v[1] * t1;
+    let z1 = v[2] * t1;
+
+    let x2 = v[0] * t2;
+    let y2 = v[1] * t2;
+    let z2 = v[2] * t2;
+
+
+    if (z1 > 0){
+        return [x1, y1, z1];
+    }
+    else {
+        return [x2, y2, z2];
+    }
+}
+
+
+export function convertToLambert(v: number[], fish_dir: number[]) {
+    // let my_perp = get_perp([0, 0, 1], fish_dir);
+    return lineSphereIntersect(v);
+    // return v;
+}
+
+export function lambertMass(points: number[][], fish_dir: number[]){
+
+    let result = [];
+    for (let i = 0; i < points.length; i++)
+    {
+        result.push(convertToLambert(points[i], fish_dir));
+    }
+
+    return result;
+}
+
+
+export function orientation(p: [number, number], q: [number, number], r: [number, number]): number {
+  const val = (q[1] - p[1]) * (r[0] - q[0]) - (q[0] - p[0]) * (r[1] - q[1]);
+
+  if (val === 0) {
+    return 0; // Точки p, q и r коллинеарны
+  }
+
+  return (val > 0) ? 1 : 2; // 1 - По часовой стрелке, 2 - Поворот против часовой стрелки
+}
+
+export function convexHull(points: [number, number][]): [number, number][] {
+  const n = points.length;
+
+  // Если количество точек меньше 3, то выпуклая оболочка не может быть образована
+  if (n < 3) {
+    return [];
+  }
+
+  const hull: [number, number][] = [];
+
+  let l = 0;
+  for (let i = 1; i < n; i++) {
+    if (points[i][0] < points[l][0]) {
+      l = i;
+    }
+  }
+
+  let p = l;
+  let q: number;
+  do {
+    hull.push(points[p]);
+    q = (p + 1) % n;
+
+    for (let i = 0; i < n; i++) {
+      if (orientation(points[p], points[i], points[q]) === 2) {
+        q = i;
+      }
+    }
+
+    p = q;
+  } while (p !== l);
+
+  return hull;
+}
+
+export function points_dist_2d(v1: number[], v2: number[]) { return Math.sqrt( (v1[0] - v2[0]) * (v1[0] - v2[0]) + (v1[1] - v2[1]) * (v1[1] - v2[1]) ); }
+
+export function v_len_2d(v: number[]) { return Math.sqrt( v[0] * v[0] + v[1] * v[1] ); }
+
+export function v_angle_2d(v1: number[], v2: number[])
+{
+    let angle;
+    angle = Math.acos( (v1[0] * v2[0] + v1[1] * v2[1]) / ( v_len_2d(v1) * v_len_2d(v2) ) );
+
+    if (angle > 180) { angle -= 180; };
+
+    return Math.abs(angle * 180 / Math.PI);
+
+}
+
+export function rot_V_2d(v: number[], angle: number)
+{
+    let alpha = angle * Math.PI / 180;
+    let x =  v[0] * Math.cos(alpha) - v[1] * Math.sin(alpha);
+    let y = v[0] * Math.sin(alpha) + v[1] * Math.cos(alpha);
+    return [x, y];
+}
+
+
+
+export function zone_square(points_number: number, all_points: number, ) { return points_number / all_points;};
+
+export function poly_contour(points_mass: number[][], center: number[])
+{
+    let points = points_mass;
+    for (let i = 0; i < points.length; i++)
+    {
+        points[i] = [points[i][0] - center[0], points[i][1] - center[1]];
+    }
+    let sect_numb = 120;
+
+    let alpha = 360 / sect_numb;
+    let dir = [0, 1];
+    let min_dist = 76548876;
+    let near_p = [87,8568,87658];
+    let near_plus = [ 200, 200];
+
+    var result = [];
+
+
+    for (let j = 0; j < sect_numb; j++)
+    {
+        for (let i = 0; i < points.length - 1; i++)
+        {
+            if (v_angle_2d(points[i], dir) < alpha / 2)
+            {
+                if (v_len_2d(points[i]) < min_dist)
+                {
+                    near_p = points[i];
+                    near_plus = points[i + 1];
+                    min_dist = v_len_2d(points[i]);
+                }
+            }
+        }
+        if (min_dist < 1.2 * v_len_2d(near_plus))
+        {
+            result.push([near_p[0] + center[0], near_p[1] + center[1]]);
+        }
+        dir = rot_V_2d(dir, alpha);
+
+        min_dist = 76548876;
+    }
+
+
+    return result;
+}
+
+export function getViewBoxSize(dirMass: number[][], anglesMass: number[], lambertCenter: number[], padding:number)
+{
+    let xMax: number;
+    let xMin: number;
+    let yMax: number;
+    let yMin: number;
+
+    let max: number = 0;
+
+    for (let i = 0; i < dirMass.length; i ++){
+        
+        xMax = RotateAroundY(dirMass[i], anglesMass[i])[0];
+        xMin = RotateAroundY(dirMass[i], -anglesMass[i])[0];
+        yMax = RotateAroundX(dirMass[i], anglesMass[i])[1];
+        yMin = RotateAroundX(dirMass[i], -anglesMass[i])[1];
+
+        
+        // xMax = convertToLambert(RotateAroundY(dirMass[i], anglesMass[i]), lambertCenter)[0];
+        // xMin = convertToLambert(RotateAroundY(dirMass[i], -anglesMass[i]), lambertCenter)[0];
+        // yMax = convertToLambert(RotateAroundX(dirMass[i], anglesMass[i]), lambertCenter)[1];
+        // yMin = convertToLambert(RotateAroundX(dirMass[i], -anglesMass[i]), lambertCenter)[1];
+
+        
+        if (Math.abs(xMax) > max) {
+          max = Math.abs(xMax);
+        }
+        if (Math.abs(xMin) > max) {
+          max = Math.abs(xMin);
+        }
+        if (Math.abs(yMax) > max) {
+          max = Math.abs(yMax);
+        }
+        if (Math.abs(yMin) > max) {
+          max = Math.abs(yMin);
+        }
+    }
+
+
+
+    let viewBoxSize: string = String(-max - padding) + ' ';
+    viewBoxSize += String(-max - padding) + ' ';
+    viewBoxSize += String(2 * (max + padding)) + ' ';
+    viewBoxSize += String(2 * (max + padding));
+
+    return viewBoxSize;
+}
+
+export function getPointSize(viewBoxSize: string){
+    let boxHeight =  parseFloat(viewBoxSize.split(' ')[3]) / 350;
+    return boxHeight;
+}
+
+
+export function getOnePointInCenteredBox(dir: number[], phi:number, window: number){
+
+    let calcPointsNumb = 180;
+    dir = NormalizeV(dir);
+
+    let my_point = getOneCirclePoint(dir, phi);
+
+    let leftLimit: number = -window;
+    let rightLimit: number = window;
+    let topLimit: number = window;
+    let bottomLimit: number = -window;
+
+    let onePoint: number[] = [];
+
+    // find one point in window using big step
+    for ( let i = 0; i < calcPointsNumb; i ++ ) {
+        my_point = RotateAroundV(my_point, dir, 360 / calcPointsNumb);
+        
+        if (my_point[1] < topLimit && 
+            my_point[1] > bottomLimit && 
+            my_point[0] < rightLimit && 
+            my_point[0] > leftLimit && 
+            my_point[2] > 0) {
+                
+            onePoint = my_point;
+            break;
+        }
+        
+    }
+    return onePoint;
+}
+
+
+
+export function PlotArcInBox(dir: number[], phi:number, window: number, circlePointsNumb: number)
+{
+  
+    let points = [];
+    dir = NormalizeV(dir);
+
+
+    let leftLimit: number = -window;
+    let rightLimit: number = window;
+    let topLimit: number = window;
+    let bottomLimit: number = -window;
+
+    let onePoint: number[] = getOnePointInCenteredBox(dir, phi, window);
+
+    // rotate one point in + with little step
+    let rotPoint: number[] = onePoint;
+
+    for ( let i = 0; i < circlePointsNumb; i ++ ) {
+        if (
+            rotPoint[1] < topLimit && 
+            rotPoint[1] > bottomLimit && 
+            rotPoint[0] < rightLimit && 
+            rotPoint[0] > leftLimit 
+        ) {
+            rotPoint = RotateAroundV(rotPoint, dir, -360 / circlePointsNumb);
+            points.push( rotPoint );
+        }
+    }
+
+    points.reverse();
+
+    // rotate one point in - with little step
+    rotPoint = onePoint;
+
+
+    for ( let i = 0; i < circlePointsNumb; i ++ ) {
+
+        if (
+            rotPoint[1] < topLimit && 
+            rotPoint[1] > bottomLimit && 
+            rotPoint[0] < rightLimit && 
+            rotPoint[0] > leftLimit 
+        ) {
+            rotPoint = RotateAroundV(rotPoint, dir, 360 / circlePointsNumb);              
+            points.push( rotPoint );
+        }
+    }
+    return points;
+}
+
+
+
+
+
+export function getOneCirclePoint(dir: number[], phi:number){
+
+    let direction = NormalizeV(dir);
+
+    let xp: number;
+    let yp: number;
+    let zp: number;
+    let perp: number[];
+
+    if ((direction[0] == -1 || direction[0] == 1) && direction[1] == 0 && direction[2] == 0){
+        xp = 0;
+        yp = 1;
+        zp = 1;
+        perp = NormalizeV([xp, yp, zp]);
+    }
+    else if (direction[0] == 0 && (direction[1] == -1 || direction[1] == 1) && direction[2] == 0){
+        xp = 1;
+        yp = 0;
+        zp = 1;
+        perp = NormalizeV([xp, yp, zp]);
+    }
+    else if (direction[0] == 0 && direction[1] == 0 && (direction[2] == 1 || direction[2] == -1)){
+        xp = 1;
+        yp = 1;
+        zp = 0;
+        perp = NormalizeV([xp, yp, zp]);
+    }
+    else {
+        xp = 0.0001;
+        yp = 0.0001;
+        zp = (-1) * (direction[0] * xp + direction[1] * yp) / direction[2];
+        perp = NormalizeV([xp, yp, zp]);
+    }
+
+
+    return RotateAroundV(direction, perp, phi);
+}
+
+
+
+export function centerToBack(input: number[], dir: number[]){
+    let point = input;
+    dir = NormalizeV(dir);
+
+    if (dir[0] >= 0 && dir[1] >= 0 && dir[2] >= 0) {
+
+        let diryrot = RotateAroundY(dir, -angle_between_v([0, 0, 1], [dir[0], 0, dir[2]]) * 180 / Math.PI);
+        let xrot = RotateAroundX(point, -angle_between_v(diryrot, [0, 0, 1]) * 180 / Math.PI);
+        let yrot = RotateAroundY(xrot, angle_between_v([0, 0, 1], [dir[0], 0,dir[2]]) * 180 / Math.PI);
+        point = yrot;
+    }
+
+    if (dir[0] >= 0 && dir[1] >= 0 && dir[2] <= 0) {
+
+        let diryrot = RotateAroundY(dir, -(0 + angle_between_v([0, 0, 1], [dir[0], 0, dir[2]]) * 180 / Math.PI));
+        let xrot = RotateAroundX(point, -angle_between_v(diryrot, [0, 0, 1]) * 180 / Math.PI);
+        let yrot = RotateAroundY(xrot, (0 + angle_between_v([0, 0, 1], [dir[0], 0,dir[2]]) * 180 / Math.PI));
+        point = yrot;
+
+    }
+
+    if (dir[0] >= 0 && dir[1] <= 0 && dir[2] <= 0) {
+        let diryrot = RotateAroundY(dir, -(0 + angle_between_v([0, 0, 1], [dir[0], 0, dir[2]]) * 180 / Math.PI));
+        let xrot = RotateAroundX(point, angle_between_v(diryrot, [0, 0, 1]) * 180 / Math.PI);
+        let yrot = RotateAroundY(xrot, (0 + angle_between_v([0, 0, 1], [dir[0], 0,dir[2]]) * 180 / Math.PI));
+        point = yrot;
+    }
+
+    if (dir[0] >= 0 && dir[1] <= 0 && dir[2] >= 0) {
+        let diryrot = RotateAroundY(dir, -angle_between_v([0, 0, 1], [dir[0], 0, dir[2]]) * 180 / Math.PI);
+        let xrot = RotateAroundX(point, angle_between_v(diryrot, [0, 0, 1]) * 180 / Math.PI);
+        let yrot = RotateAroundY(xrot, angle_between_v([0, 0, 1], [dir[0], 0,dir[2]]) * 180 / Math.PI);
+        point = yrot;
+    }
+
+    if (dir[0] <= 0 && dir[1] >= 0 && dir[2] >= 0) {
+        let diryrot = RotateAroundY(dir, angle_between_v([0, 0, 1], [dir[0], 0, dir[2]]) * 180 / Math.PI);
+        let xrot = RotateAroundX(point, -angle_between_v(diryrot, [0, 0, 1]) * 180 / Math.PI);
+        let yrot = RotateAroundY(xrot, -angle_between_v([0, 0, 1], [dir[0], 0,dir[2]]) * 180 / Math.PI);
+        point = yrot;
+    }
+    if (dir[0] <= 0 && dir[1] <= 0 && dir[2] >= 0) {
+        let diryrot = RotateAroundY(dir, angle_between_v([0, 0, 1], [dir[0], 0, dir[2]]) * 180 / Math.PI);
+        let xrot = RotateAroundX(point, angle_between_v(diryrot, [0, 0, 1]) * 180 / Math.PI);
+        let yrot = RotateAroundY(xrot, -angle_between_v([0, 0, 1], [dir[0], 0,dir[2]]) * 180 / Math.PI);
+        point = yrot;
+    }
+    if (dir[0] <= 0 && dir[1] >= 0 && dir[2] <= 0) {
+        let diryrot = RotateAroundY(dir, (0 + angle_between_v([0, 0, 1], [dir[0], 0, dir[2]]) * 180 / Math.PI));
+        let xrot = RotateAroundX(point, -angle_between_v(diryrot, [0, 0, 1]) * 180 / Math.PI);
+        let yrot = RotateAroundY(xrot, -(0 + angle_between_v([0, 0, 1], [dir[0], 0,dir[2]]) * 180 / Math.PI));
+        point = yrot;
+    }
+    if (dir[0] <= 0 && dir[1] <= 0 && dir[2] <= 0) {
+        let diryrot = RotateAroundY(dir, (0 + angle_between_v([0, 0, 1], [dir[0], 0, dir[2]]) * 180 / Math.PI));
+        let xrot = RotateAroundX(point, angle_between_v(diryrot, [0, 0, 1]) * 180 / Math.PI);
+        let yrot = RotateAroundY(xrot, -(0 + angle_between_v([0, 0, 1], [dir[0], 0,dir[2]]) * 180 / Math.PI));
+        point = yrot;
+    }
+
+    return point;
+}
+
+
+
+// эта функция рисует меридиан по парпендикуляру к плоскости меридиана. точки совпадают с градусной сеткой
+export function plotMeridianCircle(dir: number[], pointsCount: number){
+
+    dir = NormalizeV(dir);
+    let point = [0, 0, 1];
+    let res: number[][] = [point];
+    
+    for (let i = 0; i < pointsCount; i++){
+        point = RotateAroundX(point, 360 / pointsCount)
+        res.push(point);
+    }
+
+    for (let i = 0; i < pointsCount; i++){
+        res[i] = RotateAroundY(res[i], angle_between_v(dir, [0, 0, 1]) * 180 / Math.PI)
+        res.push(point);
+    }
+    return res;
+}
+
+// эта функция рисует паралель по точке, принадлежащейе паралали. точки совпадают с градусной сеткой
+export function plotParalellCircle(dir: number[], pointsCount: number){
+    dir = NormalizeV(dir);
+    
+    let point = RotateAroundX([0, 0, 1], angle_between_v([dir[0], 0, dir[2]], [dir[0], dir[1], dir[2]]) * 180 / Math.PI);
+    let res: number[][] = [point];
+    
+    for (let i = 0; i < pointsCount; i++){
+        point = RotateAroundY(point, 360 / pointsCount)
+        res.push(point);
+    }
+    return res;
+}
+
+// эта функция обрезает концы паралелей, выходящие за рамку. концы могут пересекать 
+// рамку через две из 4 сторон рамки. тут рассматриваются все варианты пересечения
+export function cutParEnd(line: number[][], window: number){
+    if (line.length == 0){
+        return [];
+    }
+    let leftLimit: number = -window;
+    let rightLimit: number = window;
+    let topLimit: number = window;
+    let bottomLimit: number = -window;
+
+    let res: number[][] = line;
+    let endPoint: number[] = line[line.length - 1];
+    let startPoint: number[] = line[0];
+
+    if (startPoint[0] < leftLimit) {
+
+        let k:number = (startPoint[1] - res[1][1]) / (startPoint[0] - res[1][0]);
+        let b: number = startPoint[1] - k * startPoint[0];
+        startPoint = [-window, -window * k + b, startPoint[2]];
+
+        for (let i: number = 0; i < res.length - 1; i++){
+            if (res[i][0] < leftLimit){
+                res[i] = startPoint;
+            }
+            else{
+                break;
+            }
+        }
+
+
+    }
+    
+    if (endPoint[0] > rightLimit) {
+
+        let k:number = (endPoint[1] - res[res.length - 2][1]) / (endPoint[0] - res[res.length - 2][0]);
+        let b: number = endPoint[1] - k * endPoint[0];
+        endPoint = [window, window * k + b, endPoint[2]];
+
+        let i: number = res.length - 1;
+        for (let i: number = res.length - 1; i > 1; i--){
+            if (res[i][0] > rightLimit){
+                res[i] = endPoint;
+            }
+            else{
+                break;
+            }
+        }
+
+
+    }
+
+    if (endPoint[1] < bottomLimit) {
+        let i: number = line.length - 1;
+        for (let i: number = line.length - 1; i > 1; i--){
+            if (line[i][1] > -topLimit){
+                res.splice(i + 1, res.length - i + 1);
+                break;
+            }
+        }
+        let k:number = (endPoint[1] - line[line.length - 2][1]) / (endPoint[0] - line[line.length - 2][0]);
+        let b: number = endPoint[1] - k * endPoint[0];
+        endPoint = [(-window - b) / k, -window, endPoint[2]];
+    }
+
+
+    if (startPoint[1] < bottomLimit) {
+        for (let i: number = 0; i < res.length - 1; i++){
+            if (line[i][1] > -topLimit){
+                res = res.slice(i - 1);
+                break;
+            }
+        }
+        let k:number = (startPoint[1] - line[1][1]) / (startPoint[0] - line[1][0]);
+        let b: number = startPoint[1] - k * startPoint[0];
+        startPoint = [(-window - b) / k, -window, startPoint[2]];
+    }
+
+
+    // res[line.length - 1] = endPoint;
+    // res[0] = startPoint;
+    for (let i: number = 0; i < res.length; i++){
+        if (line[i][1] > topLimit){
+            line[i][1] = topLimit;
+        }
+    }
+
+
+    return res;
+
+}
+
+
+
+
+
+
+
+
+// // эта функция обрезает концы меридианов, выходящие за рамку. концы могут пересекать 
+// // рамку через две из 4 сторон рамки. тут рассматриваются все варианты пересечения
+// // если конец пересекает одну из 4 сторон, то функция меняет его координаты так,
+// // чтобы конец лег на рамку
+
+// for meridians
+export function cutMerEnd(line: number[][], window: number){
+    
+    if (line.length == 0){
+            return [];
+    }
+    let leftLimit: number = -window;
+    let rightLimit: number = window;
+    let topLimit: number = window;
+    let bottomLimit: number = -window;
+
+    let res: number[][] = cutParEnd(line, window);
+    // let res: number[][] = line;
+
+    let endPoint: number[] = res[res.length - 1];
+    let startPoint: number[] = res[0];
+
+
+    if (res[res.length - 1][1] == topLimit){
+        let k: number = (res[res.length - 4][1] - res[res.length - 3][1]) / (res[res.length - 4][0] - res[res.length - 3][0]);
+        let b: number = res[res.length - 4][1] - k * res[res.length - 4][0];
+        
+        res[res.length - 1][0] = (topLimit - b) / k;
+        
+        let i: number = res.length - 1;
+        for (let i: number = res.length - 1; i > 1; i--){
+            if (res[i][1] == topLimit){
+                res[i][0] = res[res.length - 1][0];
+            }
+            else{
+                break;
+            }
+        }
+    
+    }
+
+    if (startPoint[0] > rightLimit) {
+
+        let k:number = (startPoint[1] - res[res.length - 2][1]) / (startPoint[0] - res[res.length - 2][0]);
+        let b: number = startPoint[1] - k * startPoint[0];
+        startPoint = [window, window * k + b, startPoint[2]];
+
+
+        for (let i: number = 0; i < res.length - 1; i++){
+            if (res[i][0] > rightLimit){
+                res[i] = startPoint;
+            }
+            else{
+                break;
+            }
+        }
+    }
+    res[0] = startPoint;
+
+    if (endPoint[0] < leftLimit) {
+
+        let k:number = (endPoint[1] - res[res.length - 2][1]) / (endPoint[0] - res[res.length - 2][0]);
+        let b: number = endPoint[1] - k * endPoint[0];
+        endPoint = [-window, -window * k + b, endPoint[2]];
+
+        let i: number = res.length - 1;
+        for (let i: number = res.length - 1; i > 1; i--){
+            if (res[i][0] < leftLimit){
+                res[i] = endPoint;
+            }
+            else{
+                break;
+            }
+        }
+    }
+
+
+
+    
+    if (res[0][1] < -topLimit) {
+        let k:number = (res[1][1] - res[2][1]) / (res[1][0] - res[2][0]);
+        let b: number = res[1][1] - k * res[1][0];
+        res[0] = [(-window - b) / k, -window, res[0][2]];
+
+
+        for (let i: number = 0; i < res.length - 1; i++){
+            if (res[i][1] < -topLimit){
+                res[i] = res[0];
+            }
+            else{
+                break;
+            }
+        }
+
+    }
+
+
+    
+    if (res[res.length - 1][1] > -bottomLimit) {
+        let k:number = (res[res.length - 1][1] - res[res.length - 2][1]) / (res[res.length - 1][0] - res[res.length - 2][0]);
+        let b: number = res[res.length - 1][1] - k * res[res.length - 1][0];
+        res[res.length - 1] = [(window - b) / k, window, res[res.length - 1][2]];
+
+
+        for (let i: number = res.length - 1; i > 1; i--){
+            if (res[res.length - 1][1] > -bottomLimit){
+                res[i] = res[res.length - 1];
+            }
+            else{
+                break;
+            }
+        }
+
+    }
+
+    return res;
+
+}
+
+
+
+
+
+
+
diff --git a/src/gag_components/khokhlov-gvozdik/khokhlov-gvozdik.module.scss b/src/gag_components/khokhlov-gvozdik/khokhlov-gvozdik.module.scss
new file mode 100644
index 00000000..5a15923c
--- /dev/null
+++ b/src/gag_components/khokhlov-gvozdik/khokhlov-gvozdik.module.scss
@@ -0,0 +1,652 @@
+:root {
+
+    --my-white: white;
+    --menu-blue: #4690db;
+    --my-grey: #c5c5c5;
+    --checkbox-hover: #1975d2;
+    --my-black: #202020;
+    --checkmark-hover: #ccc;
+    --my-checkmark: #e0e0e0;
+    --my-select: #e4e4e4;
+    --my-shadow: rgba(0, 0, 0, 0.15);
+    --my-shadow2: rgba(0, 0, 0, 0.15);
+    --button-blue: #4690db;
+    --button-blue2: #90caf9;
+    --button-blue3: #62b8ff;
+    --my-tooltip: #202020;
+    --my-tooltip-back: #c5c5c5;
+    
+    --color-scheme: light;
+  }
+  
+  .dark {
+    --my-white: #424242;
+    --menu-blue: #90caf9;
+    --my-grey: #999999;
+    --checkbox-hover: #4892cf;
+    --my-black: #202020;
+    --checkmark-hover: #4892cf;
+    --my-checkmark: #90caf9;
+    --my-select: #90caf9;
+    --my-shadow: rgba(144, 202, 249, 0.31);
+    --my-shadow2: rgba(144, 202, 249, 0.55);
+  
+    --button-blue: #0280fd;
+    --button-blue2: #2375c6;
+    --button-blue3: #229cff;
+    --my-tooltip: #90caf9;
+    --color-scheme: dark;
+    --my-tooltip-back: #424242;
+  }
+  
+  
+  .lowScreen{
+    color: #2c94fc;
+  
+    visibility: hidden;
+    display: none;
+  }
+  
+  /* --------------------------------------------------------------*/
+  /* debug */
+  /* --------------------------------------------------------------*/
+    
+  .question{
+    float: right;
+  }
+  
+  .debug{
+    border: 3px solid var(--my-grey);
+    border-radius: 6px;
+    padding: 1vh;
+    height: 10.5vh;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 1fr;
+    grid-gap: 10px;
+  }
+  
+  .debug:hover{
+    border: 3px solid var(--menu-blue);
+    /* border-radius: 12px; */
+    transition: 0.4s ease-in-out;
+  }
+.debugItem1{
+
+    grid-column-start: 1;
+    grid-column-end: 1;
+    grid-row-start: 1;
+    grid-row-end: 2;
+}
+  
+.debugItem2{
+  grid-column-start: 1;
+  grid-column-end: 1;
+  grid-row-start: 2;
+  grid-row-end: 3;
+}
+  
+  /* --------------------------------------------------------------*/
+  /* main grid*/
+  /* --------------------------------------------------------------*/
+  .main_container{
+    display: grid;
+    grid-template-columns: 10fr 2fr 3fr;
+    grid-template-rows: 3fr 4fr 3fr;
+    grid-gap: 20px;
+    height: 100vh;
+    overflow:auto;
+    
+    /* grid-template-rows: minmax(0, 500px); */
+    /* justify-content: center;
+    justify-items: center; */
+  }
+  
+  .commonContainer {
+    background-color: var(--my-white);
+    box-shadow: var(--my-shadow) 0px 0px 10px 1px;
+    overflow: auto;
+    position: relative;
+    padding: 10px;
+    transition: 0.4s ease-in-out;
+  }
+  
+  .commonContainer:hover {
+    box-shadow: none;
+    transition: 0.4s ease-in-out;
+  
+  }
+  
+  .table_container{
+    grid-column-start: 1;
+    grid-column-end: 1;
+    grid-row-start: 1;
+    grid-row-end: 3;
+    box-shadow: var(--my-shadow) 0px 0px 10px 1px;
+    transition: 0.4s ease-in-out;
+  }
+  
+  .table_container:hover {
+    box-shadow: none;
+    transition: 0.4s ease-in-out;
+  
+  }
+
+
+
+
+  .table2_container{
+    grid-column-start: 1;
+    grid-column-end: 1;
+    grid-row-start: 3;
+    grid-row-end: 3;
+    box-shadow: var(--my-shadow) 0px 0px 10px 1px;
+    transition: 0.4s ease-in-out;
+  }
+
+  .table2_container:hover {
+    box-shadow: none;
+    transition: 0.4s ease-in-out;
+  
+  }
+
+  
+  .graph_container {
+    grid-column-start: 2;
+    grid-column-end: 4;
+    grid-row-start: 1;
+    grid-row-end: 3;
+  }
+  
+  
+  
+
+  
+  .container {
+    grid-column-start: 2;
+    grid-column-end: 4;
+    grid-row-start: 3;
+    grid-row-end: 3;
+  }
+  
+  @media screen and (max-width: 720px){
+    .main_container{
+      
+      overflow: scroll;
+      display: block;
+  
+      /* grid-template-columns: 2fr 3fr; */
+      /* grid-template-rows: 6fr 2fr 6fr 2fr; */
+      /* grid-gap: 5px; */
+      /* height: 150vh;
+      overflow: scroll; */
+  
+  
+    }
+    .lowScreen{
+      visibility: visible;
+      display: block;
+    }
+    .commonContainer {
+      background-color: var(--my-white);
+      box-shadow: var(--my-shadow) 0px 0px 10px 1px;
+      overflow: auto;
+      position: relative;
+      padding: 10px;
+      margin: 5px;
+      display: none;
+    }
+    
+    .table_container{
+     height: 300px;
+    }
+    
+    .graph_container {
+      height: 300px;
+    }
+    
+    .sphere_container {
+      /* height: 200vh; */
+    }
+    
+    .table2_container{
+      height: 150px;
+    }
+    
+    .container {
+      height: 150px;
+    }
+  
+    .interface{
+      padding: 5px;
+      height: 100vh;
+      display: grid;
+      grid-template-columns: 5fr 5fr 5fr;
+      grid-template-rows: 1fr 1fr 2fr;
+      grid-gap: 10px;
+    }
+  
+    .graph_interface{
+  
+      height: 12vh;
+      
+    }
+  }
+  
+  @media screen and (max-height: 580px){
+    .main_container{
+      
+      overflow: scroll;
+      display: block;
+  
+      /* grid-template-columns: 2fr 3fr; */
+      /* grid-template-rows: 6fr 2fr 6fr 2fr; */
+      /* grid-gap: 5px; */
+      /* height: 150vh;
+      overflow: scroll; */
+  
+  
+    }
+    .low-screen{
+      visibility: visible;
+      display: block;
+    }
+    .commonContainer {
+      background-color: var(--my-white);
+      box-shadow: var(--my-shadow) 0px 0px 10px 1px;
+      overflow: auto;
+      position: relative;
+      padding: 10px;
+      margin: 5px;
+      display: none;
+    }
+    
+    .table_container{
+     height: 300px;
+    }
+    
+    .graph_container {
+      height: 300px;
+    }
+    
+    .sphere_container {
+  
+    }
+    
+    .table2_container{
+      height: 150px;
+    }
+    
+    .container {
+      height: 150px;
+    }
+  
+    .interface{
+      padding: 5px;
+      height: 100vh;
+      display: grid;
+      grid-template-columns: 5fr 5fr 3fr ;
+      grid-template-rows: 1fr 1fr 2fr;
+      grid-gap: 10px;
+    }
+  
+    .graph_interface{
+      /* display: block; */
+      height: 200px;
+      padding: 5px;
+    }
+  }
+  
+  
+  /* --------------------------------------------------------------*/
+  /* intefrace grid*/
+  /* --------------------------------------------------------------*/
+  
+  .sphere_interface{
+    border: 3px solid var(--menu-blue);
+    border-radius: 6px;
+    padding: 10px;
+    height: 500px;
+    width: 90%;
+  
+  }
+  .sphere_interface:hover{
+    border: 3px solid var(--menu-blue);
+    /* border-radius: 12px; */
+    transition: 0.4s ease-in-out;
+  }
+  
+  .graph_interface{
+    height: 52vh;
+    width: 97%;
+    border: 3px solid var(--my-grey);
+    border-radius: 6px;
+    padding: auto;
+  
+    position: relative; 
+    
+    
+  }
+  
+  .graph_interface:hover{
+    border: 3px solid var(--menu-blue);
+    /* border-radius: 12px; */
+    transition: 0.4s ease-in-out;
+  
+  }
+  
+  /* --------------------------------------------------------------*/
+  /* INTERFACE */
+  /* --------------------------------------------------------------*/
+  
+  .interface{
+    border: 3px solid var(--my-grey);
+    border-radius: 6px;
+    padding: 1vh;
+    height: 17.5vh;
+    display: grid;
+    grid-template-columns: 6fr 6fr 4fr;
+    grid-template-rows: 1fr 1fr 1fr 1fr;
+    grid-gap: 10px;
+  }
+  
+  .interface:hover{
+    border: 3px solid var(--menu-blue);
+    /* border-radius: 12px; */
+    transition: 0.4s ease-in-out;
+  }
+  
+  
+  
+  .item{
+    border-radius: 5px;
+  }
+  
+  .select1Item {
+    grid-column-start: 1;
+    grid-column-end: 1;
+    grid-row-start: 1;
+    grid-row-end: 1;
+  }
+  .select2Item {
+    grid-column-start: 2;
+    grid-column-end: 2;
+    grid-row-start: 1;
+    grid-row-end: 1;
+  }
+  
+  .select3Item {
+    grid-column-start: 1;
+    grid-column-end: 1;
+    grid-row-start: 2;
+    grid-row-end: 2;
+  }
+  
+  .select4Item {
+    grid-column-start: 2;
+    grid-column-end: 2;
+    grid-row-start: 2;
+    grid-row-end: 2;
+  }
+  
+  .buttonItem {
+    grid-column-start: 1;
+    grid-column-end: 3;
+    grid-row-start: 3;
+    grid-row-end: 5;
+    justify-self: center;
+    align-self: center;
+  }
+  
+  .infoItem1 {
+    grid-column-start: 3;
+    grid-column-end: 3;
+    grid-row-start: 1;
+    grid-row-end: 1;
+    align-self: center;
+    
+  }
+  .infoItem2 {
+  
+    grid-column-start: 3;
+    grid-column-end: 3;
+    grid-row-start: 2;
+    grid-row-end: 2;
+    align-self: center;
+  
+  
+  }
+  .infoItem3 {
+    grid-column-start: 3;
+    grid-column-end: 3;
+    grid-row-start: 3;
+    grid-row-end: 3;
+    align-self: center;
+  }
+  
+  .infoItem4 {
+    grid-column-start: 3;
+    grid-column-end: 3;
+    grid-row-start: 4;
+    grid-row-end: 4;
+    align-self: center;
+  }
+  
+  
+  .my_text {
+    text-align: center;
+    margin-bottom: 10px;
+    margin-top: 0px;
+    font-size: 18px;
+  
+  }
+  
+  .info {
+    /* background-color: #1975d2; */
+    font-size: 12px;
+    display: flex;
+    align-items: center;
+    /* flex-direction: column; */
+  
+  }
+  
+  .button {
+    font-size: 16px;
+    font-family: 'Open Sans', sans-serif;
+    transition-duration: 0.15s;
+    border: none;
+    color: white;
+    background: var(--button-blue3);
+    padding: 6px;
+    text-align: center;
+    
+    border-radius: 8px;
+    height: 5.5vh;
+    transition: transform 0.6s ease-in-out;
+  }
+  
+  @media screen and (max-width: 900px){
+    .button {
+      font-size: 13px;
+  
+    }
+  }
+  
+  .button:hover {
+    background-color: var(--button-blue);
+    color: var(--my-white);
+    border-radius: 6px;
+    box-shadow: 0px 2px 7px var(--my-shadow2);
+    transition: transform 0.6s ease-in-out;
+  }
+  
+  .button:active {
+    background-color: var(--my-select);
+    box-shadow: none;
+    transition: transform 0.6s ease-in-out;
+  }
+  
+  .my_select {
+  
+    font-size: 14px;
+    font-family: 'Open Sans', sans-serif;
+    -webkit-appearance:none;
+    -moz-appearance:none;
+    -ms-appearance:none;
+    appearance:none;
+    outline:0;
+    box-shadow:none;
+    border:0!important;
+    background: var(--my-select);
+    background-image: none;
+    flex: 1;
+    padding: 5px 12px;
+    color: var(--my-black);
+    cursor:pointer;
+    border-radius: 3px;
+    transition: transform 0.6s ease-in-out;
+  }
+  
+  .my_select:hover {
+    transition: transform 0.6s ease-in-out;
+    box-shadow: 0px 2px 7px var(--my-shadow2);
+  }
+  .my_select option {
+  
+    border-radius: 5px;
+    outline: none;
+  }
+  
+  .my_select option:checked {
+    background-color: var(--checkmark-hover);
+    color: var(--my-white);
+  }
+  
+  .selectOption:hover {
+    background-color: var(--checkmark-hover);
+    color: var(--my-white);
+  }
+  .my_select.decorated option:hover {
+    background-color: var(--checkmark-hover);
+    color: var(--my-white);
+  }
+  /* --------------------------------------------------------------*/
+  /* CHECKBOX */
+  /* --------------------------------------------------------------*/
+  
+  .my_input {
+    display: block;
+    position: relative;
+    padding-left: 27px;
+    /* margin-bottom: 30px; */
+    /* margin-top: 0px; */
+    font-family: 'Open Sans', sans-serif;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    /* height: 100%; */
+  }
+  
+  /* Hide the browser's default checkbox */
+  .my_input input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+  }
+  
+  /* Create a custom checkbox */
+  .checkmark {
+    position: absolute;
+  
+    left: 0px;
+    height: 20px;
+    width: 20px;
+    background-color: var(--my-checkmark);
+    border-radius: 5px;
+  
+    
+    
+  }
+  
+  /* On mouse-over, add a g rey background color */
+  .my_input:hover input ~ .checkmark {
+    background-color: var(--checkmark-hover);
+  }
+  
+  
+  /* When the checkbox is checked, add a blue background */
+  .my_input input:checked ~ .checkmark {
+    background-color: var(--checkbox-hover);
+  }
+  .my_input input:checked:hover ~ .checkmark {
+    background-color: var(--button-blue2);
+    border-radius: 2px;
+  }
+  
+  
+  
+  
+  /* Create the checkmark/indicator (hidden when not checked) */
+  .checkmark:after {
+    content: "";
+    position: absolute;
+    display: none;
+  }
+  
+  /* Show the checkmark when checked */
+  .my_input input:checked ~ .checkmark:after {
+    display: block;
+  }
+  
+  /* Style the checkmark/indicator */
+  .my_input .checkmark:after {
+    left: 7px;
+    top: 2px;
+    width: 3px;
+    height: 10px;
+    border: solid var(--my-white);
+    border-width: 0 3px 3px 0;
+    -webkit-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform: rotate(45deg);
+  }
+  
+  .graphTooltip{
+    color: var(--menu-blue);
+    display: block;
+    float: right;
+  }
+  
+  
+  .interfaceTooltip{
+    color: var(--menu-blue);
+    display: block;
+    width: 100%;
+    float: right;
+  }
+  
+  
+  
+  
+  .myTooltip{
+  
+  }
+  
+  .tooltipSpan{
+    color: var(--my-tooltip);
+  }
+  
+  .MuiTooltipTooltip {
+    background-color: var(--my-tooltip-back) !important;
+  }
+  
+  .my-tooltipArrow:before {
+    border-bottom-color: green;
+  }
+  
+  
\ No newline at end of file
diff --git a/src/gag_components/khokhlov-gvozdik/khokhlov-gvozdik.tsx b/src/gag_components/khokhlov-gvozdik/khokhlov-gvozdik.tsx
new file mode 100644
index 00000000..da17ee88
--- /dev/null
+++ b/src/gag_components/khokhlov-gvozdik/khokhlov-gvozdik.tsx
@@ -0,0 +1,645 @@
+import React, { createElement as e, useEffect, useState } from 'react';
+import { ZoomedLambertGraph } from "../ZoomedLambertGraph/ZoomedLambertGraph";
+import styles from "./khokhlov-gvozdik.module.scss" 
+import { Footer, NavPanel } from "../../components/MainPage";
+import CACTable from "../CACTable/CACTable";
+import {CACResultTable} from "../CACResultTableTest/CACResultTable";
+
+import Tables from '../../pages/DIRPage/Tables';
+import Graphs from '../../pages/DIRPage/Graphs';
+import ModalWrapper from '../../components/Common/Modal/ModalWrapper';
+import UploadModal from '../../components/Common/Modal/UploadModal/UploadModal';
+// import { IDirData } from '../../utils/GlobalTypes';
+import { useAppDispatch, useAppSelector } from '../../services/store/hooks';
+import { filesToData } from '../../services/axios/filesAndData';
+import { 
+    addInterpretation, 
+    setStatisticsMode, 
+    showSelectionInput, 
+    updateCurrentInterpretation 
+  } from '../../services/reducers/dirPage';
+import calculateStatisticsDIR from '../../utils/statistics/calculateStatisticsDIR';
+
+import {
+    GeoVdek,
+    getRandomfloat,
+    NormalizeV,
+    RotateAroundV,
+    angle_between_v,
+    fisherStat,
+    getRandomInt,
+    get_quantiles,
+    DekVgeo,
+    get_perp,
+    GridVdek
+    } from "../gag_functions";
+
+import HelpCenterOutlinedIcon from '@mui/icons-material/HelpCenterOutlined';
+import Tooltip from '@mui/material/Tooltip';   
+import FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined';
+import { useMediaQuery } from 'react-responsive';
+import CACResTable from '../CACResTable/CACResTable';
+import Direction from "../../../src/utils/graphs/classes/Direction";
+import { DataGridDIRFromDIRRow, IDirData } from "../../../src/utils/GlobalTypes";
+import selectedRows from '../CACDataTable/CACDataTable';
+
+
+export function Khokhlov_Gvozdik() {
+  
+    //-----------------------------------------------------------
+    // input data generating
+    //-----------------------------------------------------------
+
+    var max_lon = 0;
+    var min_lon = 10;
+    var max_lat = 0;
+    var min_lat = 10;
+
+    // for debug
+    const [octo, setOcto] = useState<number>(9);
+
+    const octoChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+        const number = parseInt(event.target.value);
+        setOcto(number);
+    };
+
+    const [step_list, setStepList] = useState<number[] | undefined >([]);
+
+    const [dir_list, setDirList] = useState<[number, number, number][]>([]);
+
+    const [dir_number, setDirNumb] = useState<number>(0);
+
+
+    const [apc, setSelectedAPC] = useState<number>(0);
+    const [selectedP, setSelectedP] = useState<number>(990);
+    const [selectedD, setSelectedD] = useState<number>(10);
+
+
+    const [quantiles, setQuantiles] = useState<number[]>([0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
+
+	const [angle_list, setAngleList] = useState<number[]>([]);
+
+
+
+    useEffect(() => {
+        var quantiles = get_quantiles(selectedD, apc, selectedP);
+        setQuantiles(quantiles);
+
+        var new_ang_list = [];
+        
+        if (step_list != undefined){
+            for ( var i = 0; i < dir_number; i ++ ) {
+                new_ang_list.push(quantiles[step_list[i] - 3]);
+            }
+            setAngleList(new_ang_list);
+        }
+        
+    }, [selectedD, apc, selectedP, dir_number, step_list]);
+
+
+    const handleDChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+        const number = parseInt(event.target.value);
+        setSelectedD(number);
+    };
+
+
+
+    const handlePChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+        const number = parseInt(event.target.value);
+        setSelectedP(number);
+    };
+
+
+
+    const handleAPCChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+        const number = parseInt(event.target.value);
+        setSelectedAPC(number);
+    };
+
+    // const [selectedRows, setSelectedRows] = useState<Array<DataGridDIRFromDIRRow>>([]);
+
+    const getData = () => {
+        
+        // dataToShow.name
+
+
+        // for (let i = 0; i < dataToShow.lenght(); )
+        
+        //   dataToShow.interpretations.map(interpretation => (
+        //     interpretation.id
+        //     interpretation.label
+        //     interpretation.code
+        //     interpretation.stepRange
+              
+         
+
+
+        // Мне нужно чтобы ```let readDir: string[] | undefined = dataToShow?.interpretations.map(interpretation => interpretation.stepRange);```
+        // ```let dir_list: [number, number, number][] = [];```
+
+        
+        
+        let step_list: number[] | undefined = dataToShow?.interpretations.map(interpretation => interpretation.stepCount);
+
+        let igeoList: number[] | undefined = dataToShow?.interpretations.map(interpretation => interpretation.Igeo);
+        let dgeoList: number[] | undefined = dataToShow?.interpretations.map(interpretation => interpretation.Dgeo);
+        let idList: number[] | undefined = dataToShow?.interpretations.map(interpretation => interpretation.id);
+        
+        let dir_list: [number, number, number][] = [];
+        let paleo_data: number[] = [];
+        
+        let dir_number = 0;
+        
+
+        // let testDir = (GeoVdek(20, 60));
+        if (igeoList != undefined && dgeoList != undefined && idList != undefined){
+
+            dir_number = igeoList.length;
+
+            for ( var i = 0; i < igeoList.length; i ++ ) {   
+                
+                if (selectedDirectionsIDs != null){
+                    for ( var j = 0; j < selectedDirectionsIDs.length; j ++ ) { 
+                        if (idList[i] == selectedDirectionsIDs[j]){
+                            if (dgeoList[i] > 180){
+                                paleo_data = GeoVdek(dgeoList[i] - 360, igeoList[i]);
+            
+                            }
+                            else{
+                                paleo_data = GeoVdek(dgeoList[i], igeoList[i]);
+            
+                            }
+                            // paleo_data = NormalizeV([-1 + getRandomfloat(0, 0.2), -1 + getRandomfloat(0, 0.2), -1  + getRandomfloat(0, 0.2)]);
+                            // console.log(GeoVdek(dgeoList[i], igeoList[i]));
+                            // НУЖНО ЛИ НОРМАЛИЗОВЫВАТЬ???
+                            
+                            // console.log(Math.pow(paleo_data[0] * paleo_data[0] + paleo_data[1] * paleo_data[1] + paleo_data[2] * paleo_data[2], 0.5));
+                            if (paleo_data[0] == 1 && paleo_data[1] == 1 && paleo_data[2] == 1){
+                            }
+                            else {
+                                dir_list.push([paleo_data[0], paleo_data[1], paleo_data[2]]);
+                            }
+                            
+                        }
+                    }
+                }
+
+            }
+        }
+        setDirList(dir_list);
+        setStepList(step_list);
+        setDirNumb(dir_number);
+        setAngleList([0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
+    };
+
+    const [isvis, setIsVisible] = useState(true);
+    const handleCheckboxChange = () => {
+        setIsVisible(!isvis);
+    };
+
+    // const [isdark, setdark] = useState(true);
+    // const DarkTeamChange = () => {
+    //     setdark(!isdark);
+    //     const root = document.documentElement;
+    //     root.classList.toggle('dark', !isdark);
+    // };
+
+    const [isvisgrid, setisvisgrid] = useState(false);
+    const gridCheckboxChange = () => {
+        setisvisgrid(!isvisgrid);
+    };
+    
+    const [selectedNumber, setSelectedNumber] = useState<number>(10000);
+
+    const handleNumberChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+        const number = parseInt(event.target.value);
+        setSelectedNumber(number);
+    };
+
+    const outsideVariable = selectedNumber;
+    var points_numb = outsideVariable;
+
+    const [degree_grid_isvis, setDegree] = useState(true);
+    const degreeCheckboxChange = () => {
+        setDegree(!degree_grid_isvis);
+    };
+
+
+
+    //-----------------------------------------------------------------------
+    // fisher stat
+    //-----------------------------------------------------------------------
+
+    const [sred_dir, alpha95]: [ number[], number] = fisherStat(dir_list);
+
+    //-----------------------------------------------------------------------
+    // making grid dots
+    //-----------------------------------------------------------------------
+    
+    var x;
+    var y;
+    var m;
+    var grid_points = [];
+
+    var print_point = 0;
+    var print_point = 0;
+
+    var phi = 0.013;
+    
+    for (var i = 0; i < points_numb; i++)
+    {
+        x = (i * phi - Math.round(i * phi)) * 360;
+        y = (i / points_numb - Math.round(i / points_numb)) * 360;
+
+        m = GridVdek(x, y);
+
+
+        for (var j = 0; j < dir_list.length; j++ )
+        {
+            if (angle_between_v(dir_list[j], m) < angle_list[j] * Math.PI / 180)
+            {
+                print_point = 1;
+            }
+            else { print_point = 0; break; }
+        }
+
+        if (print_point == 1)
+        {
+            grid_points.push(m);
+
+        }
+        print_point = 0;
+    }
+
+    //---------------------------------------------------------------------------------------
+    // center zone calc
+    //---------------------------------------------------------------------------------------
+
+    var center_zone = [0,0,0];
+
+    for (var i = 0; i < grid_points.length; i++)
+    {
+        center_zone[0] += grid_points[i][0];
+        center_zone[1] += grid_points[i][1];
+        center_zone[2] += grid_points[i][2];
+    }
+    center_zone = NormalizeV(center_zone);
+
+    //---------------------------------------------------------------------------------------
+    // polygon of zone and max radius calculation
+    //---------------------------------------------------------------------------------------
+    // import * as React from 'react';
+    // import { saveAs } from 'file-saver';
+    
+    // const exportToEPS = (svgElement: SVGSVGElement) => {
+    //   const svgData = new XMLSerializer().serializeToString(svgElement);
+    
+    //   const canvas = document.createElement('canvas');
+    //   canvas.width = svgElement.clientWidth;
+    //   canvas.height = svgElement.clientHeight;
+    
+    //   const ctx = canvas.getContext('2d');
+    //   const img = new Image();
+    //   const svgBlob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
+    //   const imgURL = URL.createObjectURL(svgBlob);
+    
+    //   img.onload = () => {
+    //     ctx?.drawImage(img, 0, 0);
+    
+    //     const canvasBlob = canvas.toDataURL('image/jpeg');
+    //     const imgData = canvasBlob.replace(/^data:image\/(png|jpeg);base64,/, '');
+    
+    //     const epsData = window.atob(imgData);
+    //     const bufferArray = new Uint8Array(epsData.length);
+    
+    //     for (let i = 0; i < epsData.length; i++) {
+    //       bufferArray[i] = epsData.charCodeAt(i);
+    //     }
+    
+    //     const epsBlob = new Blob([bufferArray.buffer], { type: 'application/postscript' });
+    //     saveAs(epsBlob, 'image.eps');
+    //   };
+    
+    //   img.src = imgURL;
+    // };
+    
+    // const SVGExportButton: React.FC = () => {
+    //   const svgRef = React.useRef<SVGSVGElement>(null);
+    
+    //   const handleExportClick = () => {
+    //     if (svgRef.current) {
+    //       exportToEPS(svgRef.current);
+    //     }
+    //   };
+    
+    //---------------------------------------------------------------------------------------
+    // Result Table props
+    //---------------------------------------------------------------------------------------
+
+
+    let rows: Row[] = [];
+
+    // let myList: number[] = [2, 1];
+
+
+    const [ResultTableRow, setResultTableRow] = useState<Row[]>([]);
+    const [resultId, setResultId] = useState<number>(1);
+
+    const calculateResultTable = () => {
+        
+        setResultId(resultId + 1);
+
+        let newRow = 
+            { 
+                id: resultId, 
+                Code: 'CAC', 
+                N: dir_number, 
+                Lat: DekVgeo(center_zone)[0].toFixed(2), 
+                Lon: DekVgeo(center_zone)[1].toFixed(2), 
+                ZoneRad: 999,
+                FishLat: DekVgeo(sred_dir)[0].toFixed(2),
+                FishLon: DekVgeo(sred_dir)[1].toFixed(2),
+                alpha95: alpha95.toFixed(2)
+            };
+        
+        setResultTableRow(prevList => [...prevList, newRow]);
+    };
+    
+    // useEffect(() => {
+
+    //     rows.push(
+    //         { 
+    //             id: 1, 
+    //             Code: 'CAC', 
+    //             N: dir_number, 
+    //             Lat: DekVgeo(center_zone)[0].toFixed(2), 
+    //             Lon: DekVgeo(center_zone)[1].toFixed(2), 
+    //             ZoneRad: 999,
+    //             FishLat: DekVgeo(sred_dir)[0].toFixed(2),
+    //             FishLon: DekVgeo(sred_dir)[1].toFixed(2),
+    //             alpha95: alpha95.toFixed(2)
+    //         }
+    //     )
+
+    //     setResultTableRow(rows);
+    // }, [ResultTableRow]);
+    
+
+
+    type Row = {
+        id: number,
+        Code: string,
+        N: number,
+        Lat: string,
+        Lon: string,
+        ZoneRad: number,
+        FishLat: string,
+        FishLon: string,
+        alpha95: string
+    };
+
+    //---------------------------------------------------------------------------------------
+    // Interface
+    //---------------------------------------------------------------------------------------
+
+    var poly_color = "#AAE1BF";
+    var grid_color = '#16732f';
+
+    var poly_color = "#5badff";
+    var grid_color = '#1975d2';
+
+    //---------------------------------------------------------------------------------------
+    // Ванин код из DIRTable
+    //---------------------------------------------------------------------------------------
+    
+
+    const dispatch = useAppDispatch();
+    const widthLessThan720 = useMediaQuery({ maxWidth: 719 });
+    const heightLessThan560 = useMediaQuery({ maxHeight: 559 });
+    const unsupportedResolution = widthLessThan720 || heightLessThan560;
+
+    const files = useAppSelector(state => state.filesReducer.dirStatFiles);
+    const { dirStatData, currentDataDIRid } = useAppSelector(state => state.parsedDataReducer);
+    const { 
+        statisticsMode, 
+        selectedDirectionsIDs, 
+        hiddenDirectionsIDs, 
+        reversedDirectionsIDs,
+        currentFileInterpretations,
+        allInterpretations
+    } = useAppSelector(state => state.dirPageReducer);
+
+    const [dataToShow, setDataToShow] = useState<IDirData | null>(null);
+    const [showUploadModal, setShowUploadModal] = useState<boolean>(false);
+
+    useEffect(() => {
+        if (files) dispatch(filesToData({files, format: 'dir'}));
+    }, [files, files?.length]);
+
+    useEffect(() => {
+        if (dirStatData && dirStatData.length > 0) {
+        const dirID = currentDataDIRid || 0;
+        setDataToShow(dirStatData[dirID]);
+        } else setDataToShow(null);
+    }, [dirStatData, currentDataDIRid, hiddenDirectionsIDs]);
+
+    useEffect(() => {
+        if (statisticsMode && !selectedDirectionsIDs) dispatch(showSelectionInput(true));
+        if (statisticsMode && selectedDirectionsIDs && selectedDirectionsIDs.length >= 2 && dataToShow) {
+        const statistics = calculateStatisticsDIR(dataToShow, statisticsMode, selectedDirectionsIDs, reversedDirectionsIDs);
+        statistics.interpretation.label = `${allInterpretations.length}${statistics.interpretation.label}/${currentFileInterpretations.length}`;
+        dispatch(addInterpretation(statistics));
+        dispatch(setStatisticsMode(null));
+        } else dispatch(updateCurrentInterpretation());
+    }, [statisticsMode, selectedDirectionsIDs, dataToShow]);
+
+    useEffect(() => {
+        if (!dataToShow) setShowUploadModal(true);
+        else setShowUploadModal(false);
+    }, [dataToShow]);
+
+
+    // const [selectedRows, setSelectedRows] = useState<Array<DataGridDIRFromDIRRow>>([]);
+
+
+
+
+    if (unsupportedResolution) return <>Размер окна должен быть не меньше чем 720x560</>
+    return (
+        <div className={styles.main_container}>
+            <h3 className={styles.lowScreen}>Размер окна должен быть не меньше чем 720x560</h3>
+
+            
+            {/* <div className={styles.table2_container + ' ' + styles.commonContainer}>
+                <CACResultTable 
+                    rows={ResultTableRow}
+                />
+            </div> */}
+            
+            
+            <div className={styles.graph_container + ' ' + styles.commonContainer}>
+                
+                <div className={styles.interfaceTooltip}>
+                    <HelpCenterOutlinedIcon className={styles.question}/>
+                    <FileDownloadOutlinedIcon className={styles.question}/>
+                </div>
+
+                <ZoomedLambertGraph
+                    centerZone={center_zone}
+                    dirList={dir_list}
+                    angleList={angle_list}
+                    gridPoints={grid_points}
+                    meanDir={sred_dir}
+                    alpha95={alpha95}
+                    gridColor={grid_color}
+                    polygonColor={poly_color}
+                    showGrid={isvisgrid}
+                    showDegreeGrid={degree_grid_isvis}
+                    showPolygon={isvis}
+                />
+
+            </div>
+
+
+
+                <CACTable dataToShow={dataToShow}/> 
+                <CACResTable dataToShow={dataToShow}/>  
+
+
+            
+                <ModalWrapper
+                    open={showUploadModal}
+                    setOpen={setShowUploadModal}
+                    size={{width: '60vw', height: '60vh'}}
+                    showBottomClose
+                >
+                <UploadModal page='dir' />
+                </ModalWrapper>
+
+
+                {/* <div className={styles.table2_container + ' ' + styles.commonContainer}>
+                    {DekVgeo(sred_dir)[0].toFixed(2)}
+                    <br></br>
+                    {DekVgeo(sred_dir)[1].toFixed(2)}
+                    
+
+                </div> */}
+
+                {/* <div className={styles.table_container + ' ' + styles.commonContainer}> */}
+                {/* </div> */}
+
+                {/* <div className={styles.table2_container + ' ' + styles.commonContainer}>
+                </div> */}
+
+            {/* <div className={styles.table_container + ' ' + styles.commonContainer}> */}
+                {/* <CACTable /> */}
+                
+                
+                {/* for debug */}
+                {/* <h3>Debug panel</h3>
+
+                <div className={styles.debug}>
+                    
+
+                    <div className={styles.debugItem1}>
+                        <button className={styles.button} onClick={generateRandomNumbers}>Generate Random Numbers</button>
+                    </div>
+                    
+                    <div className={styles.debugItem2}>
+                        <select className={styles.my_select} value={octo} onChange={octoChange}>
+                            <option value={1}>+++</option>
+                            <option value={2}>++-</option>
+                            <option value={3}>+-+</option>
+                            <option value={4}>+--</option>
+                            <option value={5}>-++</option>
+                            <option value={6}>-+-</option>
+                            <option value={7}>--+</option>
+                            <option value={8}>---</option>
+                            <option value={9}>0 1 0</option>
+                            <option value={10}>0 -1 0</option>
+                        </select>
+                    </div>
+                </div>
+
+                <br></br> */}
+
+            {/* </div> */}
+
+
+
+            <div className={styles.container + ' ' + styles.commonContainer}>
+
+                <div className={styles.interfaceTooltip}>
+                    <HelpCenterOutlinedIcon className={styles.question}/>
+                </div>
+                <br></br>
+
+                <div className={styles.interface}>
+                    <select className={styles.select1Item + ' ' + styles.item + ' ' + styles.my_select} value={selectedNumber} onChange={handleNumberChange}>
+                        <option value={10000}>N = 10 000</option>
+                        <option value={50000}>N = 50 000</option>
+                        <option value={100000}>N = 100 000</option>
+                        <option value={250000}>N = 250 000</option>
+                        <option value={500000}>N = 500 000</option>
+                        <option value={1000000}>N = 1 000 000</option>
+                    </select>
+                    
+                    <select className={styles.select2Item + ' ' + styles.item + ' ' + styles.my_select} value={selectedD} onChange={handleDChange}>
+                        <option value={10}>d = 10</option>
+                        <option value={5}>d = 5</option>
+                    </select>
+
+                    <select className={styles.select3Item + ' ' + styles.item + ' ' + styles.my_select} value={selectedP} onChange={handlePChange}>
+                        <option value={950}>quantile = 0.950</option>
+                        <option value={975}>quantile = 0.975</option>
+                        <option value={990}>quantile = 0.99</option>
+                    </select>
+
+                    <select className={styles.select4Item + ' ' + styles.item + ' ' + styles.my_select} value={apc} onChange={handleAPCChange}>
+                        <option className={styles.selectOption} value={1}>aPC</option>
+                        <option className={styles.selectOption} value={0}>PC</option>
+                    </select>
+
+                    <div className={styles.buttonItem + ' ' + styles.item}>
+                        <button className={styles.button} onClick={getData}>Calculate result table</button>
+                        {/* <button className={styles.button} onClick={calculateResultTable}>Calculate result table</button> */}
+                    </div>
+                        {/* <b>The percentage of the zone from the sphere:</b>
+                        {" " + String((zone_square(grid_points.length, points_numb) * 100).toFixed(3))}%.
+                        <br/>
+                        <b>Maxium radius of the zone: </b>{max_rad.toFixed(3)}
+                        <br/>
+                        <b>&#945;95: </b>{alpha95.toFixed(3)}
+                        <br/> */}
+
+                    <div className={styles.infoItem1}>
+                        <label className={styles.my_input}><div className={styles.info}>Show zone</div>
+                            <input type="checkbox" checked={isvis} onChange={handleCheckboxChange}/>
+                            <span className={styles.checkmark}></span>
+                        </label>
+                    </div>
+
+                    <div className={styles.infoItem2}>
+                        <label className={styles.my_input}><div className={styles.info}>Show grid</div>
+                            <input type="checkbox" checked={isvisgrid} onChange={gridCheckboxChange}/>
+                            <span className={styles.checkmark}></span>
+                        </label>
+                    </div>
+
+                    <div className={styles.infoItem3}>
+                        <label className={styles.my_input}><div className={styles.info}>show degree grid</div>
+                            <input type="checkbox" checked={degree_grid_isvis} onChange={degreeCheckboxChange}/>
+                            <span className={styles.checkmark}></span>
+                        </label>
+                    </div>
+
+
+                </div>
+            </div>
+        </div>
+    );
+}
+
+
+
+
diff --git a/src/gag_components/pointsWithLabels/pointsWithLabels.tsx b/src/gag_components/pointsWithLabels/pointsWithLabels.tsx
new file mode 100644
index 00000000..c30d59f3
--- /dev/null
+++ b/src/gag_components/pointsWithLabels/pointsWithLabels.tsx
@@ -0,0 +1,153 @@
+
+import {
+    RotateAroundV,
+    RotateAroundX,
+    RotateAroundY,
+    PlotCircle,
+    make_coords,
+    centering,
+    poly_contour,
+    convertToLambert,
+    lambertMass,
+    to_center,
+    points_dist_2d,
+    getViewBoxSize,
+    getPointSize,
+    PlotArcInBox,
+    getOnePointInCenteredBox,
+    // getOnePointInBox,
+    DekVgeo,
+    NormalizeV,
+    angle_between_v,
+    getOneCirclePoint,
+    centerToBack,
+
+    GeoVdek,
+
+} from "../gag_functions";
+
+interface PointsWithLabels {
+    points: number[][],
+    radius: number,
+    color?: string,
+    labelsValues?: number[][],
+    type? : 'lat' | 'lon' | 'lat & lon',
+    fontSize?: number,
+    xShift?: number,
+    yShift?:number,
+    width: number,
+    meanDir: number[]
+}
+
+export function PointsWithLabels({
+                                points,
+                                radius,
+                                color,
+                                labelsValues,
+                                type,
+                                fontSize,
+                                xShift,
+                                yShift,
+                                width,
+                                meanDir
+                            }: PointsWithLabels) {
+   
+    //---------------------------------------------------------------------------------------
+    // 
+    //---------------------------------------------------------------------------------------
+    let labels: string[] = [];
+
+    if (labelsValues && type && type == 'lat'){
+        for ( let i = 0; i < labelsValues.length; i ++){
+            labels.push(labelsValues[i][0].toFixed(0));
+        }
+    }
+
+    else if (labelsValues && type && type == 'lon'){
+        for ( let i = 0; i < labelsValues.length; i ++){
+            labels.push(labelsValues[i][1].toFixed(0));
+        }
+    }
+
+    else if (labelsValues && type && (type == 'lat & lon' || !type)){
+        let label: string;
+        for ( let i = 0; i < labelsValues.length; i ++){
+            label = labelsValues[i][0].toFixed(0);
+            label += " ";
+            label += labelsValues[i][1].toFixed(0);
+            labels.push(label);
+        }
+    }
+
+
+
+    // делаю подписи через одну рядос с северным полюсом
+    if (meanDir[1] > 0.95){
+        for ( let i = 0; i < points.length; i ++){
+            if ((i + 1) % 3 != 0) {
+                if(points[i][0] > -width){
+                    labels[i] = '';
+                }
+            }
+        }
+    }
+
+
+
+
+
+
+
+    return (
+        <g>
+
+            {/* POINTS */}
+            {points.map((point) => (
+                <circle 
+                    cx={point[0]} 
+                    cy={point[1]} 
+                    r={radius}
+                    fill={color? color : "black"}
+                />
+            ))}
+
+            {/* LABELS */}
+            {labels && points.map((point, index) => (
+                    <text 
+                        x={ xShift? point[0] + xShift : point[0] } 
+                        y={ yShift? point[1] + yShift : point[1] }  
+                        font-size={fontSize? fontSize : radius * 10}
+                    > 
+                        {labels[index]} 
+                    </text>
+            ))}
+
+
+        </g>
+
+    );
+}
+
+
+
+    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/pages/HGPage/HGPage.module.scss b/src/pages/HGPage/HGPage.module.scss
new file mode 100644
index 00000000..c9d2c43d
--- /dev/null
+++ b/src/pages/HGPage/HGPage.module.scss
@@ -0,0 +1,12 @@
+.content {
+  display: flex;
+  flex-direction: row;
+
+  .left-block {
+
+  }
+
+  .right-block {
+
+  }
+}
\ No newline at end of file
diff --git a/src/pages/HGPage/HGPage.tsx b/src/pages/HGPage/HGPage.tsx
new file mode 100644
index 00000000..f98909d3
--- /dev/null
+++ b/src/pages/HGPage/HGPage.tsx
@@ -0,0 +1,93 @@
+import React, { FC, useEffect, useState } from 'react';
+import styles from './DIRPage.module.scss';
+import { useAppDispatch, useAppSelector } from '../../services/store/hooks';
+import { filesToData } from '../../services/axios/filesAndData';
+import { IDirData } from '../../utils/GlobalTypes';
+import Tables from './Tables';
+import { ToolsDIR } from '../../components/AppLogic';
+import { useTheme } from '@mui/material/styles';
+import { bgColorMain } from '../../utils/ThemeConstants';
+import ModalWrapper from '../../components/Common/Modal/ModalWrapper';
+import UploadModal from '../../components/Common/Modal/UploadModal/UploadModal';
+import { useMediaQuery } from 'react-responsive';
+
+const DIRPage: FC = ({}) => {
+
+  const theme = useTheme();
+  const dispatch = useAppDispatch();
+  const widthLessThan720 = useMediaQuery({ maxWidth: 719 });
+  const heightLessThan560 = useMediaQuery({ maxHeight: 559 });
+  const unsupportedResolution = widthLessThan720 || heightLessThan560;
+
+  const files = useAppSelector(state => state.filesReducer.dirStatFiles);
+  const { dirStatData, currentDataDIRid } = useAppSelector(state => state.parsedDataReducer);
+  const { 
+    // statisticsMode, 
+    // selectedDirectionsIDs, 
+    hiddenDirectionsIDs, 
+    // reversedDirectionsIDs,
+    // currentFileInterpretations,
+    // allInterpretations
+  } = useAppSelector(state => state.dirPageReducer);
+
+  const [dataToShow, setDataToShow] = useState<IDirData | null>(null);
+  const [showUploadModal, setShowUploadModal] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (files) dispatch(filesToData({files, format: 'dir'}));
+  }, [files, files?.length]);
+
+  useEffect(() => {
+    if (dirStatData && dirStatData.length > 0) {
+      const dirID = currentDataDIRid || 0;
+      setDataToShow(dirStatData[dirID]);
+    } else setDataToShow(null);
+  }, [dirStatData, currentDataDIRid, hiddenDirectionsIDs]);
+
+  // useEffect(() => {
+  //   if (statisticsMode && !selectedDirectionsIDs) dispatch(showSelectionInput(true));
+  //   if (statisticsMode && selectedDirectionsIDs && selectedDirectionsIDs.length >= 2 && dataToShow) {
+  //     const statistics = calculateStatisticsDIR(dataToShow, statisticsMode, selectedDirectionsIDs, reversedDirectionsIDs);
+  //     statistics.interpretation.label = `${allInterpretations.length}${statistics.interpretation.label}/${currentFileInterpretations.length}`;
+  //     dispatch(addInterpretation(statistics));
+  //     dispatch(setStatisticsMode(null));
+  //   } else dispatch(updateCurrentInterpretation());
+  // }, [statisticsMode, selectedDirectionsIDs, dataToShow]);
+
+  useEffect(() => {
+    if (!dataToShow) setShowUploadModal(true);
+    else setShowUploadModal(false);
+  }, [dataToShow]);
+
+  if (unsupportedResolution) return <>Размер окна должен быть не меньше чем 720x560</>
+
+  return (
+    <>
+      <div className={styles.content}>
+        <div 
+          className={styles.leftBlock}
+          style={{backgroundColor: bgColorMain(theme.palette.mode)}}
+        >
+          {/* <Tables dataToShow={dataToShow}/> */}
+        </div>
+        <div 
+          className={styles.rightBlock}
+          style={{backgroundColor: bgColorMain(theme.palette.mode)}}
+        > 
+          {/* <ToolsDIR data={dataToShow}/> */}
+          {/* <Graphs dataToShow={dataToShow}/> */}
+        </div>
+      </div>
+      <ModalWrapper
+        open={showUploadModal}
+        setOpen={setShowUploadModal}
+        size={{width: '60vw', height: widthLessThan720 ? 'fit-content' : '60vh'}}
+        showBottomClose
+      >
+        <UploadModal page='dir' />
+      </ModalWrapper>
+    </>
+  )
+}
+
+export default DIRPage;
diff --git a/src/pages/HGPage/Tables.tsx b/src/pages/HGPage/Tables.tsx
new file mode 100644
index 00000000..2283f4e6
--- /dev/null
+++ b/src/pages/HGPage/Tables.tsx
@@ -0,0 +1,39 @@
+import React, { FC, useEffect, useState } from 'react';
+import styles from './DIRPage.module.scss';
+import { useAppSelector } from '../../services/store/hooks';
+import { IDirData, StatisitcsInterpretationFromDIR } from "../../utils/GlobalTypes";
+import { DataTableDIR, StatisticsDataTableDIR } from '../../components/AppLogic';
+import { useTheme } from '@mui/material/styles';
+import {
+  bgColorMain,
+} from '../../utils/ThemeConstants';
+
+interface ITables {
+  dataToShow: IDirData | null;
+};
+
+const Tables: FC<ITables> = ({ dataToShow }) => {
+
+  const theme = useTheme();
+  
+  const { currentInterpretation, currentFileInterpretations } = useAppSelector(state => state.dirPageReducer);
+  const [interpretations, setInterpretations] = useState<StatisitcsInterpretationFromDIR[] | null>(null);
+
+  useEffect(() => {
+    if (currentFileInterpretations && currentFileInterpretations.length) setInterpretations(currentFileInterpretations);
+    else if (currentInterpretation) setInterpretations([currentInterpretation]);
+    else setInterpretations(null);
+  }, [currentInterpretation, currentFileInterpretations]);
+
+  return (
+    <div 
+      className={styles.tables}
+      style={{backgroundColor: bgColorMain(theme.palette.mode)}}
+    >
+      <StatisticsDataTableDIR data={interpretations}/>
+      <DataTableDIR data={dataToShow}/>
+    </div>
+  )
+};
+
+export default Tables;
diff --git a/src/services/reducers/dirPage.ts b/src/services/reducers/dirPage.ts
index be9b0570..b9802bcd 100644
--- a/src/services/reducers/dirPage.ts
+++ b/src/services/reducers/dirPage.ts
@@ -181,6 +181,8 @@ const dirPage = createSlice({
     setOutputFilename (state, action) {
       state.outputFilename = action.payload;
     },
+
+
   },
   extraReducers: (builder) => {
   }
diff --git a/src/utils/GlobalTypes.ts b/src/utils/GlobalTypes.ts
index 76c04046..7bf563df 100644
--- a/src/utils/GlobalTypes.ts
+++ b/src/utils/GlobalTypes.ts
@@ -85,6 +85,8 @@ export interface IDirData extends IObjectKeys {
   created: string;
 }
 
+
+
 export type VGPData = {
   readonly id: number;
   label: string;