yet another big nameless update

client/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "tachi-client",
-	"version": "0.1.0",
+	"version": "2.0.0-prerelease",
 	"private": true,
 	"scripts": {
 		"start": "node scripts/start.js -o",
@@ -74,7 +74,7 @@
 		"resolve": "1.12.0",
 		"resolve-url-loader": "3.1.0",
 		"socicon": "3.0.5",
-		"tachi-common": "0.1.28"
+		"tachi-common": "0.1.30"
 	},
 	"devDependencies": {
 		"@types/humanize-duration": "3.25.1",

client/pnpm-lock.yaml

@@ -77,7 +77,7 @@ specifiers:
   serve: 11.2.0
   socicon: 3.0.5
   style-loader: 1.0.0
-  tachi-common: 0.1.28
+  tachi-common: 0.1.30
   terser-webpack-plugin: 1.4.1
   ts-pnp: 1.1.4
   typescript: 4.3.5
@@ -141,7 +141,7 @@ dependencies:
   resolve: 1.12.0
   resolve-url-loader: 3.1.0
   socicon: 3.0.5
-  tachi-common: 0.1.28_typescript@4.3.5
+  tachi-common: 0.1.30_typescript@4.3.5
 
 devDependencies:
   '@types/humanize-duration': 3.25.1
@@ -216,8 +216,8 @@ packages:
       '@babel/generator': 7.15.0
       '@babel/helper-compilation-targets': 7.15.0_@babel+core@7.15.0
       '@babel/helper-module-transforms': 7.15.0
-      '@babel/helpers': 7.14.8
-      '@babel/parser': 7.15.0
+      '@babel/helpers': 7.15.3
+      '@babel/parser': 7.15.3
       '@babel/template': 7.14.5
       '@babel/traverse': 7.15.0
       '@babel/types': 7.15.0
@@ -238,8 +238,8 @@ packages:
       '@babel/code-frame': 7.14.5
       '@babel/generator': 7.15.0
       '@babel/helper-module-transforms': 7.15.0
-      '@babel/helpers': 7.14.8
-      '@babel/parser': 7.15.0
+      '@babel/helpers': 7.15.3
+      '@babel/parser': 7.15.3
       '@babel/template': 7.14.5
       '@babel/traverse': 7.15.0
       '@babel/types': 7.15.0
@@ -288,7 +288,7 @@ packages:
       '@babel/compat-data': 7.15.0
       '@babel/core': 7.15.0
       '@babel/helper-validator-option': 7.14.5
-      browserslist: 4.16.7
+      browserslist: 4.16.8
       semver: 6.3.0
     dev: false
 
@@ -301,7 +301,7 @@ packages:
       '@babel/compat-data': 7.15.0
       '@babel/core': 7.9.0
       '@babel/helper-validator-option': 7.14.5
-      browserslist: 4.16.7
+      browserslist: 4.16.8
       semver: 6.3.0
     dev: false
 
@@ -516,8 +516,8 @@ packages:
       - supports-color
     dev: false
 
-  /@babel/helpers/7.14.8:
-    resolution: {integrity: sha512-ZRDmI56pnV+p1dH6d+UN6GINGz7Krps3+270qqI9UJ4wxYThfAIcI5i7j5vXC4FJ3Wap+S9qcebxeYiqn87DZw==}
+  /@babel/helpers/7.15.3:
+    resolution: {integrity: sha512-HwJiz52XaS96lX+28Tnbu31VeFSQJGOeKHJeaEPQlTl7PnlhFElWPj8tUXtqFIzeN86XxXoBr+WFAyK2PPVz6g==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/template': 7.14.5
@@ -535,8 +535,8 @@ packages:
       chalk: 2.4.2
       js-tokens: 4.0.0
 
-  /@babel/parser/7.15.0:
-    resolution: {integrity: sha512-0v7oNOjr6YT9Z2RAOTv4T9aP+ubfx4Q/OhVtAet7PFDt0t9Oy6Jn+/rfC6b8HJ5zEqrQCiMxJfgtHpmIminmJQ==}
+  /@babel/parser/7.15.3:
+    resolution: {integrity: sha512-O0L6v/HvqbdJawj0iBEfVQMc3/6WP+AeOsovsIgBFyJaG+W2w7eqvZB7puddATmWuARlm1SX7DwxJ/JJUnDpEA==}
     engines: {node: '>=6.0.0'}
     hasBin: true
     dev: false
@@ -1192,8 +1192,8 @@ packages:
       '@babel/helper-plugin-utils': 7.14.5
     dev: false
 
-  /@babel/plugin-transform-block-scoping/7.14.5_@babel+core@7.15.0:
-    resolution: {integrity: sha512-LBYm4ZocNgoCqyxMLoOnwpsmQ18HWTQvql64t3GvMUzLQrNoV1BDG0lNftC8QKYERkZgCCT/7J5xWGObGAyHDw==}
+  /@babel/plugin-transform-block-scoping/7.15.3_@babel+core@7.15.0:
+    resolution: {integrity: sha512-nBAzfZwZb4DkaGtOes1Up1nOAp9TDRRFw4XBzBBSG9QK7KVFmYzgj9o9sbPv7TX5ofL4Auq4wZnxCoPnI/lz2Q==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -1202,8 +1202,8 @@ packages:
       '@babel/helper-plugin-utils': 7.14.5
     dev: false
 
-  /@babel/plugin-transform-block-scoping/7.14.5_@babel+core@7.9.0:
-    resolution: {integrity: sha512-LBYm4ZocNgoCqyxMLoOnwpsmQ18HWTQvql64t3GvMUzLQrNoV1BDG0lNftC8QKYERkZgCCT/7J5xWGObGAyHDw==}
+  /@babel/plugin-transform-block-scoping/7.15.3_@babel+core@7.9.0:
+    resolution: {integrity: sha512-nBAzfZwZb4DkaGtOes1Up1nOAp9TDRRFw4XBzBBSG9QK7KVFmYzgj9o9sbPv7TX5ofL4Auq4wZnxCoPnI/lz2Q==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -2018,7 +2018,7 @@ packages:
       '@babel/plugin-transform-arrow-functions': 7.14.5_@babel+core@7.15.0
       '@babel/plugin-transform-async-to-generator': 7.14.5_@babel+core@7.15.0
       '@babel/plugin-transform-block-scoped-functions': 7.14.5_@babel+core@7.15.0
-      '@babel/plugin-transform-block-scoping': 7.14.5_@babel+core@7.15.0
+      '@babel/plugin-transform-block-scoping': 7.15.3_@babel+core@7.15.0
       '@babel/plugin-transform-classes': 7.14.9_@babel+core@7.15.0
       '@babel/plugin-transform-computed-properties': 7.14.5_@babel+core@7.15.0
       '@babel/plugin-transform-destructuring': 7.14.7_@babel+core@7.15.0
@@ -2052,7 +2052,7 @@ packages:
       babel-plugin-polyfill-corejs2: 0.2.2_@babel+core@7.15.0
       babel-plugin-polyfill-corejs3: 0.2.4_@babel+core@7.15.0
       babel-plugin-polyfill-regenerator: 0.2.2_@babel+core@7.15.0
-      core-js-compat: 3.16.0
+      core-js-compat: 3.16.2
       semver: 6.3.0
     transitivePeerDependencies:
       - supports-color
@@ -2089,7 +2089,7 @@ packages:
       '@babel/plugin-transform-arrow-functions': 7.14.5_@babel+core@7.9.0
       '@babel/plugin-transform-async-to-generator': 7.14.5_@babel+core@7.9.0
       '@babel/plugin-transform-block-scoped-functions': 7.14.5_@babel+core@7.9.0
-      '@babel/plugin-transform-block-scoping': 7.14.5_@babel+core@7.9.0
+      '@babel/plugin-transform-block-scoping': 7.15.3_@babel+core@7.9.0
       '@babel/plugin-transform-classes': 7.14.9_@babel+core@7.9.0
       '@babel/plugin-transform-computed-properties': 7.14.5_@babel+core@7.9.0
       '@babel/plugin-transform-destructuring': 7.14.7_@babel+core@7.9.0
@@ -2119,8 +2119,8 @@ packages:
       '@babel/plugin-transform-unicode-regex': 7.14.5_@babel+core@7.9.0
       '@babel/preset-modules': 0.1.4_@babel+core@7.9.0
       '@babel/types': 7.15.0
-      browserslist: 4.16.7
-      core-js-compat: 3.16.0
+      browserslist: 4.16.8
+      core-js-compat: 3.16.2
       invariant: 2.2.4
       levenary: 1.1.1
       semver: 5.7.1
@@ -2195,8 +2195,8 @@ packages:
       - supports-color
     dev: false
 
-  /@babel/runtime/7.14.8:
-    resolution: {integrity: sha512-twj3L8Og5SaCRCErB4x4ajbvBIVV77CGeFglHpeg5WC5FF8TZzBWXtTJ4MqaD9QszLYTtr+IsaAL2rEUevb+eg==}
+  /@babel/runtime/7.15.3:
+    resolution: {integrity: sha512-OvwMLqNXkCXSz1kSm58sEsNuhqOx/fKpnUnKnFB5v8uDda5bLNEHNgKPvhDN6IU0LDcnHQ90LlJ0Q6jnyBSIBA==}
     engines: {node: '>=6.9.0'}
     dependencies:
       regenerator-runtime: 0.13.9
@@ -2212,7 +2212,7 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/code-frame': 7.14.5
-      '@babel/parser': 7.15.0
+      '@babel/parser': 7.15.3
       '@babel/types': 7.15.0
     dev: false
 
@@ -2225,7 +2225,7 @@ packages:
       '@babel/helper-function-name': 7.14.5
       '@babel/helper-hoist-variables': 7.14.5
       '@babel/helper-split-export-declaration': 7.14.5
-      '@babel/parser': 7.15.0
+      '@babel/parser': 7.15.3
       '@babel/types': 7.15.0
       debug: 4.3.2
       globals: 11.12.0
@@ -2265,7 +2265,7 @@ packages:
       ajv: 6.12.6
       debug: 4.3.2
       espree: 7.3.1
-      globals: 13.10.0
+      globals: 13.11.0
       ignore: 4.0.6
       import-fresh: 3.3.0
       js-yaml: 3.14.1
@@ -2365,7 +2365,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.14.8
+      '@babel/runtime': 7.15.3
       '@material-ui/styles': 4.9.14_47cbb7f80549068c6fc0f244709343f3
       '@material-ui/system': 4.12.1_47cbb7f80549068c6fc0f244709343f3
       '@material-ui/types': 5.1.0_@types+react@17.0.13
@@ -2394,7 +2394,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.14.8
+      '@babel/runtime': 7.15.3
       '@material-ui/core': 4.9.14_47cbb7f80549068c6fc0f244709343f3
       '@types/react': 17.0.13
       react: 17.0.2
@@ -2413,7 +2413,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.14.8
+      '@babel/runtime': 7.15.3
       '@material-ui/core': 4.9.14_47cbb7f80549068c6fc0f244709343f3
       '@material-ui/utils': 4.11.2_react-dom@16.12.0+react@17.0.2
       '@types/react': 17.0.13
@@ -2432,7 +2432,7 @@ packages:
       react: ^16.8.4
       react-dom: ^16.8.4
     dependencies:
-      '@babel/runtime': 7.14.8
+      '@babel/runtime': 7.15.3
       '@date-io/core': 1.3.13
       '@material-ui/core': 4.9.14_47cbb7f80549068c6fc0f244709343f3
       '@types/styled-jsx': 2.2.9
@@ -2454,7 +2454,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.14.8
+      '@babel/runtime': 7.15.3
       '@emotion/hash': 0.8.0
       '@material-ui/types': 5.1.0_@types+react@17.0.13
       '@material-ui/utils': 4.11.2_react-dom@16.12.0+react@17.0.2
@@ -2486,7 +2486,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.14.8
+      '@babel/runtime': 7.15.3
       '@material-ui/utils': 4.11.2_react-dom@16.12.0+react@17.0.2
       '@types/react': 17.0.13
       csstype: 2.6.17
@@ -2513,7 +2513,7 @@ packages:
       react: ^16.8.0 || ^17.0.0
       react-dom: ^16.8.0 || ^17.0.0
     dependencies:
-      '@babel/runtime': 7.14.8
+      '@babel/runtime': 7.15.3
       prop-types: 15.7.2
       react: 17.0.2
       react-dom: 16.12.0_react@17.0.2
@@ -2916,7 +2916,7 @@ packages:
   /@tanem/svg-injector/8.0.50:
     resolution: {integrity: sha512-UydIFxRyXbcQW4sN3Omo9Rwgyc2wA+txNDnu8LeAw+fHiDRp89m4FxWTXQzD/UpVzagX6GNj9Tu3CFcs6lKWVQ==}
     dependencies:
-      '@babel/runtime': 7.14.8
+      '@babel/runtime': 7.15.3
     dev: false
 
   /@types/bson/4.0.5:
@@ -3021,8 +3021,8 @@ packages:
       '@types/react': 17.0.13
     dev: false
 
-  /@types/react/16.14.12:
-    resolution: {integrity: sha512-7nOJgNsRbARhZhvwPm7cnzahtzEi5VJ9OvcQk8ExEEb1t+zaFklwLVkJz7G1kfxX4X/mDa/icTmzE0vTmqsqBg==}
+  /@types/react/16.14.13:
+    resolution: {integrity: sha512-KznsRYfqPmbcA5pMxc4mYQ7UgsJa2tAgKE2YwEmY5xKaTVZXLAY/ImBohyQHnEoIjxIJR+Um4FmaEYDr3q3zlg==}
     dependencies:
       '@types/prop-types': 15.7.4
       '@types/scheduler': 0.16.2
@@ -3063,8 +3063,8 @@ packages:
     resolution: {integrity: sha1-DSUBJorY+ZYrdA04fEZU9fjiPlI=}
     dev: false
 
-  /@types/webpack-sources/2.1.1:
-    resolution: {integrity: sha512-MjM1R6iuw8XaVbtkCBz0N349cyqBjJHCbQiOeppe3VBeFvxqs74RKHAVt9LkxTnUWc7YLZOEsUfPUnmK6SBPKQ==}
+  /@types/webpack-sources/3.2.0:
+    resolution: {integrity: sha512-Ft7YH3lEVRQ6ls8k4Ff1oB4jN6oy/XmU6tQISKdhfh+1mR+viZFphS6WL0IrtDOzvefmJg5a0s7ZQoRXwqTEFg==}
     dependencies:
       '@types/node': 16.0.0
       '@types/source-list-map': 0.1.2
@@ -3077,7 +3077,7 @@ packages:
       '@types/node': 16.0.0
       '@types/tapable': 1.0.8
       '@types/uglify-js': 3.13.1
-      '@types/webpack-sources': 2.1.1
+      '@types/webpack-sources': 3.2.0
       anymatch: 3.1.2
       source-map: 0.6.1
     dev: false
@@ -3689,9 +3689,9 @@ packages:
     resolution: {integrity: sha512-XrvP4VVHdRBCdX1S3WXVD8+RyG9qeb1D5Sn1DeLiG2xfSpzellk5k54xbUERJ3M5DggQxes39UGOTP8CFrEGbg==}
     hasBin: true
     dependencies:
-      browserslist: 4.16.7
-      caniuse-lite: 1.0.30001249
-      colorette: 1.2.2
+      browserslist: 4.16.8
+      caniuse-lite: 1.0.30001251
+      colorette: 1.3.0
       normalize-range: 0.1.2
       num2fraction: 1.2.2
       postcss: 7.0.36
@@ -3775,7 +3775,7 @@ packages:
     dependencies:
       '@babel/core': 7.15.0
       '@babel/helper-define-polyfill-provider': 0.2.3_@babel+core@7.15.0
-      core-js-compat: 3.16.0
+      core-js-compat: 3.16.2
     transitivePeerDependencies:
       - supports-color
     dev: false
@@ -3999,7 +3999,7 @@ packages:
   /broadcast-channel/3.7.0:
     resolution: {integrity: sha512-cIAKJXAxGJceNZGTZSBzMxzyOn72cVgPnKx4dc6LRjQgbaJUQqhy5rzL3zbMxkMWsGKkv2hSFkPRMEXfoMZ2Mg==}
     dependencies:
-      '@babel/runtime': 7.14.8
+      '@babel/runtime': 7.15.3
       detect-node: 2.1.0
       js-sha3: 0.8.0
       microseconds: 0.2.0
@@ -4068,24 +4068,24 @@ packages:
       pako: 1.0.11
     dev: true
 
-  /browserslist/4.16.7:
-    resolution: {integrity: sha512-7I4qVwqZltJ7j37wObBe3SoTz+nS8APaNcrBOlgoirb6/HbEU2XxW/LpUDTCngM6iauwFqmRTuOMfyKnFGY5JA==}
+  /browserslist/4.16.8:
+    resolution: {integrity: sha512-sc2m9ohR/49sWEbPj14ZSSZqp+kbi16aLao42Hmn3Z8FpjuMaq2xCA2l4zl9ITfyzvnvyE0hcg62YkIGKxgaNQ==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
     dependencies:
-      caniuse-lite: 1.0.30001249
-      colorette: 1.2.2
-      electron-to-chromium: 1.3.798
+      caniuse-lite: 1.0.30001251
+      colorette: 1.3.0
+      electron-to-chromium: 1.3.811
       escalade: 3.1.1
-      node-releases: 1.1.73
+      node-releases: 1.1.75
 
   /browserslist/4.7.0:
     resolution: {integrity: sha512-9rGNDtnj+HaahxiVV38Gn8n8Lr8REKsel68v1sPFfIGEK6uSXTY3h9acgiT1dZVtOOUtifo/Dn8daDQ5dUgVsA==}
     hasBin: true
     dependencies:
-      caniuse-lite: 1.0.30001249
-      electron-to-chromium: 1.3.798
-      node-releases: 1.1.73
+      caniuse-lite: 1.0.30001251
+      electron-to-chromium: 1.3.811
+      node-releases: 1.1.75
     dev: true
 
   /bson/1.1.6:
@@ -4205,7 +4205,7 @@ packages:
     resolution: {integrity: sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==}
     dependencies:
       pascal-case: 3.1.2
-      tslib: 2.3.0
+      tslib: 2.3.1
     dev: false
 
   /camelcase/4.1.0:
@@ -4225,13 +4225,13 @@ packages:
   /caniuse-api/3.0.0:
     resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==}
     dependencies:
-      browserslist: 4.16.7
-      caniuse-lite: 1.0.30001249
+      browserslist: 4.16.8
+      caniuse-lite: 1.0.30001251
       lodash.memoize: 4.1.2
       lodash.uniq: 4.5.0
 
-  /caniuse-lite/1.0.30001249:
-    resolution: {integrity: sha512-vcX4U8lwVXPdqzPWi6cAJ3FnQaqXbBqy/GZseKNQzRj37J7qZdGcBtxq/QLFNLLlfsoXLUdHw8Iwenri86Tagw==}
+  /caniuse-lite/1.0.30001251:
+    resolution: {integrity: sha512-HOe1r+9VkU4TFmnU70z+r7OLmtR+/chB1rdcJUeQlAinjEeb0cKL20tlAtOagNZhbrtLnCvV19B4FmF1rgzl6A==}
 
   /case-sensitive-paths-webpack-plugin/2.2.0:
     resolution: {integrity: sha512-u5ElzokS8A1pm9vM3/iDgTcI3xqHxuCao94Oz8etI3cf0Tio0p8izkDYbTIn09uP3yUUr6+veaE6IkjnTYS46g==}
@@ -4483,8 +4483,8 @@ packages:
       color-convert: 1.9.3
       color-string: 1.6.0
 
-  /colorette/1.2.2:
-    resolution: {integrity: sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==}
+  /colorette/1.3.0:
+    resolution: {integrity: sha512-ecORCqbSFP7Wm8Y6lyqMJjexBQqXSF7SSeaTyGGphogUjBlFP9m9o08wy86HL2uB7fMTxtOUzLMk7ogKcxMg1w==}
 
   /colors/0.6.2:
     resolution: {integrity: sha1-JCP+ZnisDF2uiFLl0OW+CMmXq8w=}
@@ -4663,10 +4663,10 @@ packages:
       yargs: 13.3.2
     dev: true
 
-  /core-js-compat/3.16.0:
-    resolution: {integrity: sha512-5D9sPHCdewoUK7pSUPfTF7ZhLh8k9/CoJXWUEo+F1dZT5Z1DVgcuRqUKhjeKW+YLb8f21rTFgWwQJiNw1hoZ5Q==}
+  /core-js-compat/3.16.2:
+    resolution: {integrity: sha512-4lUshXtBXsdmp8cDWh6KKiHUg40AjiuPD3bOWkNVsr1xkAhpUqCjaZ8lB1bKx9Gb5fXcbRbFJ4f4qpRIRTuJqQ==}
     dependencies:
-      browserslist: 4.16.7
+      browserslist: 4.16.8
       semver: 7.0.0
     dev: false
 
@@ -4875,7 +4875,7 @@ packages:
   /css-vendor/2.0.8:
     resolution: {integrity: sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==}
     dependencies:
-      '@babel/runtime': 7.14.8
+      '@babel/runtime': 7.15.3
       is-in-browser: 1.1.3
     dev: false
 
@@ -5029,6 +5029,10 @@ packages:
     resolution: {integrity: sha512-J0piedu6Z8iB6TbIGfZgDzfXxUFN3qQRMofy2oPdXzQibYGqPB/9iMcxr/TGalU+2RsyDO+U4f33id8tbnSRMQ==}
     dev: false
 
+  /d3-format/2.0.0:
+    resolution: {integrity: sha512-Ab3S6XuE/Q+flY96HXT0jOXcM4EAClYFnRGY5zsjRGNy6qCYrQsMffs7cV5Q9xejb35zxW5hf/guKw34kvIKsA==}
+    dev: false
+
   /d3-hierarchy/1.1.9:
     resolution: {integrity: sha512-j8tPxlqh1srJHAtxfvOUwKNYJkQuBFdM1+JAUfq6xqH5eAqf93L7oG1NVqDa4CpFZNvnNKtCYEUC8KY9yEn9lQ==}
     dev: false
@@ -5054,7 +5058,7 @@ packages:
     resolution: {integrity: sha512-1JGp44NQCt5d1g+Yy+GeOnZP7xHo0ii8zsQp6PGzd+C1/dl0KGsp9A7Mxwp+1D1o4unbTTxVdU/ZOIEBoeZPbQ==}
     dependencies:
       d3-array: 2.12.1
-      d3-format: 1.4.5
+      d3-format: 2.0.0
       d3-interpolate: 2.0.1
       d3-time: 2.1.1
       d3-time-format: 3.0.0
@@ -5069,7 +5073,7 @@ packages:
   /d3-time-format/3.0.0:
     resolution: {integrity: sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag==}
     dependencies:
-      d3-time: 2.1.1
+      d3-time: 1.1.0
     dev: false
 
   /d3-time/1.1.0:
@@ -5234,8 +5238,8 @@ packages:
     engines: {node: '>=0.4.0'}
     dev: false
 
-  /denque/1.5.0:
-    resolution: {integrity: sha512-CYiCSgIF1p6EUByQPlGkKnP1M9g0ZV3qMIrqMqZqdwazygIA/YP2vrbcyl1h/WppKJTdl1F85cXIle+394iDAQ==}
+  /denque/1.5.1:
+    resolution: {integrity: sha512-XwE+iZ4D6ZUB7mfYRMb5wByE8L74HCn30FBN7sWnXksWc1LO1bPDl67pBR9o/kC4z/xSNAwkMYcGgqDV3BE3Hw==}
     engines: {node: '>=0.10'}
     dev: false
 
@@ -5350,7 +5354,7 @@ packages:
   /dom-helpers/5.2.1:
     resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}
     dependencies:
-      '@babel/runtime': 7.14.8
+      '@babel/runtime': 7.15.3
       csstype: 3.0.8
     dev: false
 
@@ -5404,7 +5408,7 @@ packages:
     resolution: {integrity: sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==}
     dependencies:
       no-case: 3.0.4
-      tslib: 2.3.0
+      tslib: 2.3.1
     dev: false
 
   /dot-prop/5.3.0:
@@ -5446,8 +5450,8 @@ packages:
     resolution: {integrity: sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=}
     dev: true
 
-  /electron-to-chromium/1.3.798:
-    resolution: {integrity: sha512-fwsr6oXAORoV9a6Ak2vMCdXfmHIpAGgpOGesulS1cbGgJmrMl3H+GicUyRG3t+z9uHTMrIuMTleFDW+EUFYT3g==}
+  /electron-to-chromium/1.3.811:
+    resolution: {integrity: sha512-hv3kgf6YSd+jQ7J+7Kdm44yux/1vxcAwfGV/6M6Nq4E9zJ3Bml/P2+vULCvqLS6Lh9knBCQ7iEMvyeDiGe5EbA==}
 
   /elliptic/6.5.4:
     resolution: {integrity: sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==}
@@ -5636,15 +5640,15 @@ packages:
       eslint: 7.30.0
     dev: true
 
-  /eslint-import-resolver-node/0.3.4:
-    resolution: {integrity: sha512-ogtf+5AB/O+nM6DIeBUNr2fuT7ot9Qg/1harBfBtaP13ekEWFQEEMP94BCB7zaNW3gyY+8SHYF00rnqYwXKWOA==}
+  /eslint-import-resolver-node/0.3.6:
+    resolution: {integrity: sha512-0En0w03NRVMn9Uiyn8YRPDKvWjxCWkslUEhGNTdGx15RvPJYQ+lbOlqrlNI2vEAs4pDYK4f/HN2TbDmk5TP0iw==}
     dependencies:
-      debug: 2.6.9
+      debug: 3.2.7
       resolve: 1.20.0
     dev: true
 
-  /eslint-module-utils/2.6.1:
-    resolution: {integrity: sha512-ZXI9B8cxAJIH4nfkhTwcRTEAnrVfobYqwjWy/QMCZ8rHkZHFjf9yO4BzpiF9kCSfNlMG54eKigISHpX0+AaT4A==}
+  /eslint-module-utils/2.6.2:
+    resolution: {integrity: sha512-QG8pcgThYOuqxupd06oYTZoNOGaUdTY1PqK+oS6ElF6vs4pBdk/aYxFVQQXzcrAqp9m7cl7lb2ubazX+g16k2Q==}
     engines: {node: '>=4'}
     dependencies:
       debug: 3.2.7
@@ -5662,11 +5666,11 @@ packages:
       debug: 2.6.9
       doctrine: 2.1.0
       eslint: 7.30.0
-      eslint-import-resolver-node: 0.3.4
-      eslint-module-utils: 2.6.1
+      eslint-import-resolver-node: 0.3.6
+      eslint-module-utils: 2.6.2
       find-up: 2.1.0
       has: 1.0.3
-      is-core-module: 2.5.0
+      is-core-module: 2.6.0
       minimatch: 3.0.4
       object.values: 1.1.4
       pkg-up: 2.0.0
@@ -5716,7 +5720,7 @@ packages:
       object.fromentries: 2.0.4
       object.values: 1.1.4
       prop-types: 15.7.2
-      resolve: 1.12.0
+      resolve: 1.20.0
     dev: true
 
   /eslint-scope/4.0.3:
@@ -5787,7 +5791,7 @@ packages:
       file-entry-cache: 6.0.1
       functional-red-black-tree: 1.0.1
       glob-parent: 5.1.2
-      globals: 13.10.0
+      globals: 13.11.0
       ignore: 4.0.6
       import-fresh: 3.3.0
       imurmurhash: 0.1.4
@@ -6243,6 +6247,7 @@ packages:
 
   /flatten/1.0.3:
     resolution: {integrity: sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg==}
+    deprecated: flatten is deprecated in favor of utility frameworks such as lodash.
     dev: false
 
   /flush-write-stream/1.1.1:
@@ -6252,8 +6257,8 @@ packages:
       readable-stream: 2.3.7
     dev: true
 
-  /follow-redirects/1.14.1_debug@4.3.2:
-    resolution: {integrity: sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg==}
+  /follow-redirects/1.14.2_debug@4.3.2:
+    resolution: {integrity: sha512-yLR6WaE2lbF0x4K2qE2p9PEXKLDjUjnR/xmjS3wHAYxtlsI9MLLBJUZirAHKzUZDGLxje7w/cXR49WOUo4rbsA==}
     engines: {node: '>=4.0'}
     peerDependencies:
       debug: '*'
@@ -6539,8 +6544,8 @@ packages:
     engines: {node: '>=4'}
     dev: false
 
-  /globals/13.10.0:
-    resolution: {integrity: sha512-piHC3blgLGFjvOuMmWZX60f+na1lXFDhQXBf1UYp2fXPXqvEUbOhNwi6BsQ0bQishwedgnjkwv1d9zKf+MWw3g==}
+  /globals/13.11.0:
+    resolution: {integrity: sha512-08/xrJ7wQjK9kkkRoI3OFUBbLx4f+6x3SGwcPvQ0QH6goFDrOU2oyAWrmh3dJezu65buo+HBMzAMQy6rovVC3g==}
     engines: {node: '>=8'}
     dependencies:
       type-fest: 0.20.2
@@ -6582,8 +6587,8 @@ packages:
       slash: 1.0.0
     dev: true
 
-  /goober/2.0.39:
-    resolution: {integrity: sha512-ryw0VaZaehKmnjL4ZEJaiUVQc+XFa5dXIAbf2QC3F+WVKRbzaSuJyq7w28bdlwqYctiZ0Ok5QL/Pap5M2pCHQg==}
+  /goober/2.0.41:
+    resolution: {integrity: sha512-kwjegMT5018zWydhOQlQneCgCtrKJaPsru7TaBWmTYV0nsMeUrM6L6O8JmNYb9UbPMgWcmtf+9p4Y3oJabIH1A==}
     peerDependencies:
       csstype: ^2.6.2
     dev: false
@@ -6722,7 +6727,7 @@ packages:
   /history/4.10.1:
     resolution: {integrity: sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==}
     dependencies:
-      '@babel/runtime': 7.14.8
+      '@babel/runtime': 7.15.3
       loose-envify: 1.4.0
       resolve-pathname: 3.0.0
       tiny-invariant: 1.1.0
@@ -6876,7 +6881,7 @@ packages:
     engines: {node: '>=8.0.0'}
     dependencies:
       eventemitter3: 4.0.7
-      follow-redirects: 1.14.1_debug@4.3.2
+      follow-redirects: 1.14.2_debug@4.3.2
       requires-port: 1.0.0
     transitivePeerDependencies:
       - debug
@@ -7138,8 +7143,10 @@ packages:
   /is-arrayish/0.3.2:
     resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==}
 
-  /is-bigint/1.0.3:
-    resolution: {integrity: sha512-ZU538ajmYJmzysE5yU4Y7uIrPQ2j704u+hXFiIPQExpqzzUbpe5jCPdTfmz7jXRxZdvjY3KZ3ZNenoXQovX+Dg==}
+  /is-bigint/1.0.4:
+    resolution: {integrity: sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==}
+    dependencies:
+      has-bigints: 1.0.1
 
   /is-binary-path/1.0.1:
     resolution: {integrity: sha1-dfFmQrSA8YenEcgUFh/TpKdlWJg=}
@@ -7178,8 +7185,8 @@ packages:
       rgb-regex: 1.0.1
       rgba-regex: 1.0.0
 
-  /is-core-module/2.5.0:
-    resolution: {integrity: sha512-TXCMSDsEHMEEZ6eCA8rwRDbLu55MRGmrctljsBX/2v1d9/GzqHOxW5c5oPSgrUt2vBFXebu9rGqckXGPWOlYpg==}
+  /is-core-module/2.6.0:
+    resolution: {integrity: sha512-wShG8vs60jKfPWpF2KZRaAtvt3a20OAn7+IJ6hLPECpSABLcKtFKTTI4ZtH5QcBruBHlq+WsdHWyz0BCZW7svQ==}
     dependencies:
       has: 1.0.3
 
@@ -7610,7 +7617,7 @@ packages:
   /jss-plugin-camel-case/10.7.1:
     resolution: {integrity: sha512-+ioIyWvmAfgDCWXsQcW1NMnLBvRinOVFkSYJUgewQ6TynOcSj5F1bSU23B7z0p1iqK0PPHIU62xY1iNJD33WGA==}
     dependencies:
-      '@babel/runtime': 7.14.8
+      '@babel/runtime': 7.15.3
       hyphenate-style-name: 1.0.4
       jss: 10.7.1
     dev: false
@@ -7618,21 +7625,21 @@ packages:
   /jss-plugin-default-unit/10.7.1:
     resolution: {integrity: sha512-tW+dfYVNARBQb/ONzBwd8uyImigyzMiAEDai+AbH5rcHg5h3TtqhAkxx06iuZiT/dZUiFdSKlbe3q9jZGAPIwA==}
     dependencies:
-      '@babel/runtime': 7.14.8
+      '@babel/runtime': 7.15.3
       jss: 10.7.1
     dev: false
 
   /jss-plugin-global/10.7.1:
     resolution: {integrity: sha512-FbxCnu44IkK/bw8X3CwZKmcAnJqjAb9LujlAc/aP0bMSdVa3/MugKQRyeQSu00uGL44feJJDoeXXiHOakBr/Zw==}
     dependencies:
-      '@babel/runtime': 7.14.8
+      '@babel/runtime': 7.15.3
       jss: 10.7.1
     dev: false
 
   /jss-plugin-nested/10.7.1:
     resolution: {integrity: sha512-RNbICk7FlYKaJyv9tkMl7s6FFfeLA3ubNIFKvPqaWtADK0KUaPsPXVYBkAu4x1ItgsWx67xvReMrkcKA0jSXfA==}
     dependencies:
-      '@babel/runtime': 7.14.8
+      '@babel/runtime': 7.15.3
       jss: 10.7.1
       tiny-warning: 1.0.3
     dev: false
@@ -7640,14 +7647,14 @@ packages:
   /jss-plugin-props-sort/10.7.1:
     resolution: {integrity: sha512-eyd5FhA+J0QrpqXxO7YNF/HMSXXl4pB0EmUdY4vSJI4QG22F59vQ6AHtP6fSwhmBdQ98Qd9gjfO+RMxcE39P1A==}
     dependencies:
-      '@babel/runtime': 7.14.8
+      '@babel/runtime': 7.15.3
       jss: 10.7.1
     dev: false
 
   /jss-plugin-rule-value-function/10.7.1:
     resolution: {integrity: sha512-fGAAImlbaHD3fXAHI3ooX6aRESOl5iBt3LjpVjxs9II5u9tzam7pqFUmgTcrip9VpRqYHn8J3gA7kCtm8xKwHg==}
     dependencies:
-      '@babel/runtime': 7.14.8
+      '@babel/runtime': 7.15.3
       jss: 10.7.1
       tiny-warning: 1.0.3
     dev: false
@@ -7655,7 +7662,7 @@ packages:
   /jss-plugin-vendor-prefixer/10.7.1:
     resolution: {integrity: sha512-1UHFmBn7hZNsHXTkLLOL8abRl8vi+D1EVzWD4WmLFj55vawHZfnH1oEz6TUf5Y61XHv0smdHabdXds6BgOXe3A==}
     dependencies:
-      '@babel/runtime': 7.14.8
+      '@babel/runtime': 7.15.3
       css-vendor: 2.0.8
       jss: 10.7.1
     dev: false
@@ -7663,7 +7670,7 @@ packages:
   /jss/10.7.1:
     resolution: {integrity: sha512-5QN8JSVZR6cxpZNeGfzIjqPEP+ZJwJJfZbXmeABNdxiExyO+eJJDy6WDtqTf8SDKnbL5kZllEpAP71E/Lt7PXg==}
     dependencies:
-      '@babel/runtime': 7.14.8
+      '@babel/runtime': 7.15.3
       csstype: 3.0.8
       is-in-browser: 1.1.3
       tiny-warning: 1.0.3
@@ -7920,7 +7927,7 @@ packages:
   /lower-case/2.0.2:
     resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==}
     dependencies:
-      tslib: 2.3.0
+      tslib: 2.3.1
     dev: false
 
   /lru-cache/4.1.5:
@@ -7987,7 +7994,7 @@ packages:
   /match-sorter/6.3.0:
     resolution: {integrity: sha512-efYOf/wUpNb8FgNY+cOD2EIJI1S5I7YPKsw0LBp7wqPh5pmMS6i/wr3ZWwfwrAw1NvqTA2KUReVRWDX84lUcOQ==}
     dependencies:
-      '@babel/runtime': 7.14.8
+      '@babel/runtime': 7.15.3
       remove-accents: 0.4.2
     dev: false
 
@@ -8155,7 +8162,7 @@ packages:
       prop-types: ^15.0.0
       react: ^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
     dependencies:
-      '@babel/runtime': 7.14.8
+      '@babel/runtime': 7.15.3
       prop-types: 15.7.2
       react: 17.0.2
       tiny-warning: 1.0.3
@@ -8167,7 +8174,7 @@ packages:
       prop-types: ^15.0.0
       react: ^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
     dependencies:
-      '@babel/runtime': 7.14.8
+      '@babel/runtime': 7.15.3
       prop-types: 15.7.2
       react: 17.0.2
       tiny-warning: 1.0.3
@@ -8279,7 +8286,7 @@ packages:
     dependencies:
       bl: 2.2.1
       bson: 1.1.6
-      denque: 1.5.0
+      denque: 1.5.1
       optional-require: 1.1.7
       safe-buffer: 5.2.1
     optionalDependencies:
@@ -8434,7 +8441,7 @@ packages:
     resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==}
     dependencies:
       lower-case: 2.0.2
-      tslib: 2.3.0
+      tslib: 2.3.1
     dev: false
 
   /node-forge/0.10.0:
@@ -8477,8 +8484,8 @@ packages:
       process-on-spawn: 1.0.0
     dev: false
 
-  /node-releases/1.1.73:
-    resolution: {integrity: sha512-uW7fodD6pyW2FZNZnp/Z3hvWKeEW1Y8R1+1CnErE8cXFXzl5blBOoVB41CvMer6P6Q0S5FXDwcHgFd1Wj0U9zg==}
+  /node-releases/1.1.75:
+    resolution: {integrity: sha512-Qe5OUajvqrqDSy6wrWFmMwfJ0jVgwiw4T3KqmbTcZ62qW0gQkheXYhcFM1+lOVcGUoRxcEcfyvFMAnDgaF1VWw==}
 
   /noms/0.0.0:
     resolution: {integrity: sha1-2o69nzr51nYJGbJ9nNyAkqczKFk=}
@@ -8892,7 +8899,7 @@ packages:
     resolution: {integrity: sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==}
     dependencies:
       dot-case: 3.0.4
-      tslib: 2.3.0
+      tslib: 2.3.1
     dev: false
 
   /parent-module/1.0.1:
@@ -8942,7 +8949,7 @@ packages:
     resolution: {integrity: sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==}
     dependencies:
       no-case: 3.0.4
-      tslib: 2.3.0
+      tslib: 2.3.1
     dev: false
 
   /pascalcase/0.1.1:
@@ -9127,13 +9134,13 @@ packages:
       postcss-selector-parser: 6.0.6
     dev: false
 
-  /postcss-browser-comments/2.0.0_browserslist@4.16.7:
+  /postcss-browser-comments/2.0.0_browserslist@4.16.8:
     resolution: {integrity: sha512-xGG0UvoxwBc4Yx4JX3gc0RuDl1kc4bVihCzzk6UC72YPfq5fu3c717Nu8Un3nvnq1BJ31gBnFXIG/OaUTnpHgA==}
     engines: {node: '>=6.0.0'}
     peerDependencies:
       browserslist: ^4
     dependencies:
-      browserslist: 4.16.7
+      browserslist: 4.16.8
       postcss: 7.0.36
     dev: false
 
@@ -9190,7 +9197,7 @@ packages:
     resolution: {integrity: sha512-WyQFAdDZpExQh32j0U0feWisZ0dmOtPl44qYmJKkq9xFWY3p+4qnRzCHeNrkeRhwPHz9bQ3mo0/yVkaply0MNw==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      browserslist: 4.16.7
+      browserslist: 4.16.8
       color: 3.2.1
       has: 1.0.3
       postcss: 7.0.36
@@ -9375,7 +9382,7 @@ packages:
     resolution: {integrity: sha512-U7e3r1SbvYzO0Jr3UT/zKBVgYYyhAz0aitvGIYOYK5CPmkNih+WDSsS5tvPrJ8YMQYlEMvsZIiqmn7HdFUaeEQ==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      browserslist: 4.16.7
+      browserslist: 4.16.8
       caniuse-api: 3.0.0
       cssnano-util-same-parent: 4.0.1
       postcss: 7.0.36
@@ -9403,7 +9410,7 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       alphanum-sort: 1.0.2
-      browserslist: 4.16.7
+      browserslist: 4.16.8
       cssnano-util-get-arguments: 4.0.0
       postcss: 7.0.36
       postcss-value-parser: 3.3.1
@@ -9508,7 +9515,7 @@ packages:
     resolution: {integrity: sha512-od18Uq2wCYn+vZ/qCOeutvHjB5jm57ToxRaMeNuf0nWVHaP9Hua56QyMF6fs/4FSUnVIw0CBPsU0K4LnBPwYwg==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      browserslist: 4.16.7
+      browserslist: 4.16.8
       postcss: 7.0.36
       postcss-value-parser: 3.3.1
 
@@ -9533,9 +9540,9 @@ packages:
     engines: {node: '>=6.0.0'}
     dependencies:
       '@csstools/normalize.css': 9.0.1
-      browserslist: 4.16.7
+      browserslist: 4.16.8
       postcss: 7.0.36
-      postcss-browser-comments: 2.0.0_browserslist@4.16.7
+      postcss-browser-comments: 2.0.0_browserslist@4.16.8
     dev: false
 
   /postcss-ordered-values/4.1.2:
@@ -9572,8 +9579,8 @@ packages:
     engines: {node: '>=6.0.0'}
     dependencies:
       autoprefixer: 9.8.6
-      browserslist: 4.16.7
-      caniuse-lite: 1.0.30001249
+      browserslist: 4.16.8
+      caniuse-lite: 1.0.30001251
       css-blank-pseudo: 0.1.4
       css-has-pseudo: 0.10.0
       css-prefers-color-scheme: 3.1.1
@@ -9622,7 +9629,7 @@ packages:
     resolution: {integrity: sha512-gKWmR5aUulSjbzOfD9AlJiHCGH6AEVLaM0AV+aSioxUDd16qXP1PCh8d1/BGVvpdWn8k/HiK7n6TjeoXN1F7DA==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      browserslist: 4.16.7
+      browserslist: 4.16.8
       caniuse-api: 3.0.0
       has: 1.0.3
       postcss: 7.0.36
@@ -10009,10 +10016,10 @@ packages:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
     dependencies:
-      '@babel/runtime': 7.14.8
+      '@babel/runtime': 7.15.3
       '@restart/context': 2.1.4_react@17.0.2
       '@restart/hooks': 0.3.27_react@17.0.2
-      '@types/react': 16.14.12
+      '@types/react': 16.14.13
       classnames: 2.3.1
       dom-helpers: 5.2.1
       invariant: 2.2.4
@@ -10084,7 +10091,7 @@ packages:
       react: '>=16'
       react-dom: '>=16'
     dependencies:
-      goober: 2.0.39
+      goober: 2.0.41
       react: 17.0.2
       react-dom: 16.12.0_react@17.0.2
     transitivePeerDependencies:
@@ -10119,7 +10126,7 @@ packages:
       react: '>=16.3.0'
       react-dom: '>=16.3.0'
     dependencies:
-      '@babel/runtime': 7.14.8
+      '@babel/runtime': 7.15.3
       '@popperjs/core': 2.9.3
       '@restart/hooks': 0.3.27_react@17.0.2
       '@types/warning': 3.0.0
@@ -10155,7 +10162,7 @@ packages:
       react-native:
         optional: true
     dependencies:
-      '@babel/runtime': 7.14.8
+      '@babel/runtime': 7.15.3
       broadcast-channel: 3.7.0
       match-sorter: 6.3.0
       react: 17.0.2
@@ -10167,7 +10174,7 @@ packages:
     peerDependencies:
       react: '>=15'
     dependencies:
-      '@babel/runtime': 7.14.8
+      '@babel/runtime': 7.15.3
       history: 4.10.1
       loose-envify: 1.4.0
       prop-types: 15.7.2
@@ -10182,7 +10189,7 @@ packages:
     peerDependencies:
       react: '>=15'
     dependencies:
-      '@babel/runtime': 7.14.8
+      '@babel/runtime': 7.15.3
       history: 4.10.1
       hoist-non-react-statics: 3.3.2
       loose-envify: 1.4.0
@@ -10200,7 +10207,7 @@ packages:
     peerDependencies:
       react: '>=15'
     dependencies:
-      '@babel/runtime': 7.14.8
+      '@babel/runtime': 7.15.3
       history: 4.10.1
       hoist-non-react-statics: 3.3.2
       loose-envify: 1.4.0
@@ -10227,7 +10234,7 @@ packages:
       react: '>=16.6.0'
       react-dom: '>=16.6.0'
     dependencies:
-      '@babel/runtime': 7.14.8
+      '@babel/runtime': 7.15.3
       dom-helpers: 5.2.1
       loose-envify: 1.4.0
       prop-types: 15.7.2
@@ -10341,7 +10348,7 @@ packages:
   /regenerator-transform/0.14.5:
     resolution: {integrity: sha512-eOf6vka5IO151Jfsw2NO9WpGX58W6wWmefK3I1zEGr0lOD0u8rwPaNqQL1aRxUaxLeKO3ArNh3VYg1KbaD+FFw==}
     dependencies:
-      '@babel/runtime': 7.14.8
+      '@babel/runtime': 7.9.0
     dev: false
 
   /regex-not/1.0.2:
@@ -10558,11 +10565,12 @@ packages:
     resolution: {integrity: sha512-B/dOmuoAik5bKcD6s6nXDCjzUKnaDvdkRyAk6rsmsKLipWj4797iothd7jmmUhWTfinVMU+wc56rYKsit2Qy4w==}
     dependencies:
       path-parse: 1.0.7
+    dev: false
 
   /resolve/1.20.0:
     resolution: {integrity: sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==}
     dependencies:
-      is-core-module: 2.5.0
+      is-core-module: 2.6.0
       path-parse: 1.0.7
 
   /restore-cursor/2.0.0:
@@ -10605,7 +10613,7 @@ packages:
     peerDependencies:
       react: '>=16.8'
     dependencies:
-      '@babel/runtime': 7.14.8
+      '@babel/runtime': 7.15.3
       react: 17.0.2
     dev: false
 
@@ -11079,7 +11087,7 @@ packages:
     resolution: {integrity: sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==}
     dependencies:
       spdx-expression-parse: 3.0.1
-      spdx-license-ids: 3.0.9
+      spdx-license-ids: 3.0.10
     dev: true
 
   /spdx-exceptions/2.3.0:
@@ -11090,11 +11098,11 @@ packages:
     resolution: {integrity: sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==}
     dependencies:
       spdx-exceptions: 2.3.0
-      spdx-license-ids: 3.0.9
+      spdx-license-ids: 3.0.10
     dev: true
 
-  /spdx-license-ids/3.0.9:
-    resolution: {integrity: sha512-Ki212dKK4ogX+xDo4CtOZBVIwhsKBEfsEEcwmJfLQzirgc2jIWdzg40Unxz/HzEUqM1WFzVlQSMF9kZZ2HboLQ==}
+  /spdx-license-ids/3.0.10:
+    resolution: {integrity: sha512-oie3/+gKf7QtpitB0LYLETe+k8SifzsX4KixvpOsbI6S0kRiRQ5MKOio8eMSAKQ17N06+wdEOXRiId+zOxo0hA==}
     dev: true
 
   /spdy-transport/3.0.0_supports-color@6.1.0:
@@ -11352,7 +11360,7 @@ packages:
     resolution: {integrity: sha512-7GlLk9JwlElY4Y6a/rmbH2MhVlTyVmiJd1PfTCqFaIBEGMYNsrO/v3SeGTdhBThLg4Z+NbOk/qFMwCa+J+3p/g==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      browserslist: 4.16.7
+      browserslist: 4.16.8
       postcss: 7.0.36
       postcss-selector-parser: 3.1.2
 
@@ -11475,8 +11483,8 @@ packages:
       strip-ansi: 6.0.0
     dev: true
 
-  /tachi-common/0.1.28_typescript@4.3.5:
-    resolution: {integrity: sha512-UibZ7mx7y27I3SuxTyLINBhipGDM1pxqBymkWfpnm+GIhGt6iVk6USWhYOsMJhaSaNcgG1hmIrWn9rUmwVAELg==}
+  /tachi-common/0.1.30_typescript@4.3.5:
+    resolution: {integrity: sha512-bQOhX5VSmfaMpdbkgci1C/r4mcc68bl41fovZcfqvxUv2SFKa4fJL5rc+5durudZy1QGcnmUioexul2ZhdaofA==}
     dependencies:
       monk: 7.3.4
       tap: 15.0.9_typescript@4.3.5
@@ -11757,8 +11765,8 @@ packages:
   /tslib/1.14.1:
     resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
 
-  /tslib/2.3.0:
-    resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
+  /tslib/2.3.1:
+    resolution: {integrity: sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==}
     dev: false
 
   /tsutils/3.21.0_typescript@4.3.5:
@@ -11852,7 +11860,7 @@ packages:
     peerDependencies:
       react: '>=15.0.0'
     dependencies:
-      '@babel/runtime': 7.14.8
+      '@babel/runtime': 7.15.3
       '@types/react': 17.0.13
       invariant: 2.2.4
       react: 17.0.2
@@ -11924,7 +11932,7 @@ packages:
   /unload/2.2.0:
     resolution: {integrity: sha512-B60uB5TNBLtN6/LsgAf3udH9saB5p7gqJwcFfbOEZ8BcBHnGwCf6G/TGiEqkRAxX7zAFIUtzdrXQSdL3Q/wqNA==}
     dependencies:
-      '@babel/runtime': 7.14.8
+      '@babel/runtime': 7.15.3
       detect-node: 2.1.0
     dev: false
 
@@ -12298,7 +12306,7 @@ packages:
   /which-boxed-primitive/1.0.2:
     resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==}
     dependencies:
-      is-bigint: 1.0.3
+      is-bigint: 1.0.4
       is-boolean-object: 1.1.2
       is-number-object: 1.0.6
       is-string: 1.0.7
@@ -12349,7 +12357,7 @@ packages:
     resolution: {integrity: sha512-UHdwrN3FrDvicM3AqJS/J07X0KXj67R8Cg0waq1MKEOqzo89ap6zh6LmaLnRAjpB+bDIz+7OlPye9iii9KBnxw==}
     engines: {node: '>=4.0.0'}
     dependencies:
-      '@babel/runtime': 7.14.8
+      '@babel/runtime': 7.15.3
       '@hapi/joi': 15.1.1
       common-tags: 1.8.0
       fs-extra: 4.0.3
@@ -12445,7 +12453,7 @@ packages:
     peerDependencies:
       webpack: ^2.0.0 || ^3.0.0 || ^4.0.0
     dependencies:
-      '@babel/runtime': 7.14.8
+      '@babel/runtime': 7.15.3
       json-stable-stringify: 1.0.1
       webpack: 4.41.0
       workbox-build: 4.3.1

client/src/app/pages/dashboard/users/games/_game/_playtype/OverviewPage.tsx

@@ -42,6 +42,7 @@ import IIDXScoreTable from "components/tables/scores/IIDXScoreTable";
 
 import { NumericSOV } from "util/sorts";
 import { ScoreDataset } from "types/tables";
+import ScoreTable from "components/tables/scores/ScoreTable";
 
 export default function OverviewPage({
 	reqUser,
@@ -253,9 +254,10 @@ function RecentSessionScoreInfo({
 				</div>
 			</div>
 			<div className="col-12 mt-4">
-				<IIDXScoreTable
+				<ScoreTable
 					dataset={dataset as any}
 					pageLen={5}
+					game={game}
 					reqUser={reqUser}
 					playtype={playtype as any}
 				/>

client/src/app/pages/dashboard/users/games/_game/_playtype/ScoresPage.tsx

@@ -21,6 +21,7 @@ import LoadingWrapper from "components/util/LoadingWrapper";
 import Icon from "components/util/Icon";
 import SelectButton from "components/util/SelectButton";
 import PBTable from "components/tables/pbs/PBTable";
+import ScoreTable from "components/tables/scores/ScoreTable";
 
 export default function ScoresPage({
 	reqUser,
@@ -150,9 +151,9 @@ function FormatData<
 function useFetchScores(url: string) {
 	const { isLoading, error, data } = useQuery(url, async () => {
 		const res = await APIFetchV1<{
-			scores: ScoreDocument<"iidx:SP">[];
-			charts: ChartDocument<"iidx:SP">[];
-			songs: SongDocument<"iidx">[];
+			scores: ScoreDocument[];
+			charts: ChartDocument[];
+			songs: SongDocument[];
 		}>(url);
 
 		if (!res.success) {
@@ -210,8 +211,9 @@ function ScoresOverview({ reqUser, game, playtype }: { reqUser: PublicUserDocume
 						style={{ height: 500 }}
 						{...{ isLoading, dataset: data, error }}
 					>
-						<IIDXScoreTable
+						<ScoreTable
 							dataset={data!}
+							game={game}
 							reqUser={reqUser}
 							playtype={playtype as any}
 						/>
@@ -236,7 +238,7 @@ function ScoresSearch({
 
 	return (
 		<LoadingWrapper style={{ height: 500 }} {...{ isLoading, error, dataset: data }}>
-			<IIDXScoreTable dataset={data!} reqUser={reqUser} playtype={playtype as any} />
+			<ScoreTable dataset={data!} game={game} reqUser={reqUser} playtype={playtype as any} />
 		</LoadingWrapper>
 	);
 }

client/src/components/tables/cells/IIDXLampCell.tsx

@@ -32,7 +32,7 @@ export default function IIDXLampCell({
 	} else if (IsNotNullish(sc.scoreData.hitMeta.bp)) {
 		bpText = `[BP: ${sc.scoreData.hitMeta.bp}]`;
 	} else if (IsNotNullish(sc.scoreData.hitMeta.comboBreak)) {
-		bpText = `[CBRK: ${sc.scoreData.hitMeta.comboBreak}`;
+		bpText = `[CBRK: ${sc.scoreData.hitMeta.comboBreak}]`;
 	}
 
 	return (

client/src/components/tables/cells/LampCell.tsx

@@ -1,10 +1,9 @@
 import React from "react";
 import { GetGamePTConfig, PBScoreDocument, ScoreDocument } from "tachi-common";
-import { IsScore } from "util/asserts";
 import { ChangeOpacity } from "util/color-opacity";
-import { IsNotNullish, IsNullish } from "util/misc";
 
 export default function LampCell({ sc }: { sc: ScoreDocument | PBScoreDocument }) {
+	console.log(sc.game, sc.playtype);
 	const gptConfig = GetGamePTConfig(sc.game, sc.playtype);
 
 	return (

client/src/components/tables/cells/SDVXScoreCell.tsx

@@ -4,14 +4,8 @@ import { GamePT } from "types/react";
 import { ChangeOpacity } from "util/color-opacity";
 import { FormatMillions } from "util/misc";
 
-export default function SDVXScoreCell({
-	game,
-	playtype,
-	score,
-}: GamePT & {
-	score: PBScoreDocument | ScoreDocument;
-}) {
-	const gptConfig = GetGamePTConfig(game, playtype);
+export default function SDVXScoreCell({ score }: { score: PBScoreDocument | ScoreDocument }) {
+	const gptConfig = GetGamePTConfig("sdvx", "Single");
 
 	return (
 		<td

client/src/components/tables/cells/TitleCell.tsx

@@ -15,7 +15,7 @@ export default function TitleCell({
 	noArtist?: boolean;
 }) {
 	return (
-		<td style={{ textAlign: "left", minWidth: "140px" }}>
+		<td style={{ textAlign: "left", minWidth: "140px", maxWidth: "300px" }}>
 			<Link className="song-title-link" to={CreateChartLink(chart, game)}>
 				{song.title}
 				{!noArtist && (

client/src/components/tables/dropdowns/GenericPBDropdown.tsx

@@ -0,0 +1,141 @@
+import DebugContent from "components/util/DebugContent";
+import Icon from "components/util/Icon";
+import SelectButton from "components/util/SelectButton";
+import React, { useContext, useMemo, useState } from "react";
+import DropdownStructure from "./components/DropdownStructure";
+import {
+	PublicUserDocument,
+	ChartDocument,
+	ScoreDocument,
+	PBScoreDocument,
+	IDStrings,
+} from "tachi-common";
+import { GamePT, SetState } from "types/react";
+import { useQuery } from "react-query";
+import { APIFetchV1 } from "util/api";
+import { UGPTChartPBComposition } from "types/api-returns";
+import Loading from "components/util/Loading";
+import { UserContext } from "context/UserContext";
+import GenericScoreContentDropdown from "./components/GenericScoreContentDropdown";
+
+export interface ScoreState {
+	highlight: boolean;
+	setHighlight: SetState<boolean>;
+}
+
+export interface ScoreDropdownProps<I extends IDStrings = IDStrings> {
+	score: ScoreDocument<I> | PBScoreDocument<I>;
+	scoreState: ScoreState;
+}
+
+export default function GenericPBDropdown<I extends IDStrings = IDStrings>({
+	game,
+	playtype,
+	reqUser,
+	chart,
+	scoreState,
+	defaultView = "pb",
+	DocComponent = GenericScoreContentDropdown,
+}: {
+	reqUser: PublicUserDocument;
+	chart: ChartDocument;
+	scoreState: ScoreState;
+	defaultView?: "pb" | "scorePB" | "lampPB" | "history" | "debug";
+	DocComponent?: (props: {
+		score: ScoreDocument<I> | PBScoreDocument<I>;
+		scoreState: ScoreState;
+	}) => JSX.Element;
+} & GamePT) {
+	const { user } = useContext(UserContext);
+	const [view, setView] = useState(defaultView);
+
+	const { isLoading, error, data } = useQuery(
+		`/users/${reqUser.id}/games/${game}/${playtype}/pbs/${chart.chartID}?getComposition=true`,
+		async () => {
+			const res = await APIFetchV1<UGPTChartPBComposition<I>>(
+				`/users/${reqUser.id}/games/${game}/${playtype}/pbs/${chart.chartID}?getComposition=true`
+			);
+
+			if (!res.success) {
+				throw new Error(res.description);
+			}
+
+			return res.body;
+		}
+	);
+
+	const currentScoreDoc: ScoreDocument<I> | PBScoreDocument<I> | null = useMemo(() => {
+		if (!data) {
+			// dont worry about this null, it never gets below the rquery checks
+			return null;
+		}
+
+		if (view === "pb") {
+			return data.pb;
+		}
+
+		const idMap = {
+			scorePB: data.pb.composedFrom.scorePB,
+			lampPB: data.pb.composedFrom.lampPB,
+			...Object.fromEntries((data.pb.composedFrom.other ?? []).map(e => [e.name, e.scoreID])),
+		};
+
+		// @ts-expect-error awful
+		return data.scores.filter(e => e.scoreID === idMap[view])[0];
+	}, [view, data]);
+
+	if (error) {
+		return <>An error has occured. Whoops.</>;
+	}
+
+	if (isLoading || !data) {
+		return (
+			<div style={{ height: "200px" }} className="d-flex align-items-center">
+				<Loading />
+			</div>
+		);
+	}
+
+	let body;
+
+	if (view === "history") {
+		body = <></>; // todo
+	} else if (view === "debug") {
+		body = <DebugContent data={data} />;
+	} else {
+		body = <DocComponent score={currentScoreDoc!} scoreState={scoreState} />;
+	}
+
+	return (
+		<DropdownStructure
+			buttons={
+				<>
+					<SelectButton setValue={setView} value={view} id="pb">
+						<Icon type="trophy" />
+						PB Info
+					</SelectButton>
+					<SelectButton setValue={setView} value={view} id="scorePB">
+						<Icon type="star-half-alt" />
+						Best Score
+					</SelectButton>
+					<SelectButton setValue={setView} value={view} id="lampPB">
+						<Icon type="lightbulb" />
+						Best Lamp
+					</SelectButton>
+					<SelectButton setValue={setView} value={view} id="history" disabled>
+						<Icon type="history" />
+						Play History
+					</SelectButton>
+					{user?.authLevel === "admin" && (
+						<SelectButton setValue={setView} value={view} id="debug">
+							<Icon type="bug" />
+							Debug Info
+						</SelectButton>
+					)}
+				</>
+			}
+		>
+			{body}
+		</DropdownStructure>
+	);
+}

client/src/components/tables/dropdowns/GenericScoreDropdown.tsx

@@ -0,0 +1,141 @@
+import DebugContent from "components/util/DebugContent";
+import Icon from "components/util/Icon";
+import SelectButton from "components/util/SelectButton";
+import React, { useContext, useMemo, useState } from "react";
+import DropdownStructure from "./components/DropdownStructure";
+import {
+	PublicUserDocument,
+	ChartDocument,
+	ScoreDocument,
+	PBScoreDocument,
+	IDStrings,
+} from "tachi-common";
+import { GamePT, SetState } from "types/react";
+import { useQuery } from "react-query";
+import { APIFetchV1 } from "util/api";
+import { UGPTChartPBComposition } from "types/api-returns";
+import Loading from "components/util/Loading";
+import { UserContext } from "context/UserContext";
+import GenericScoreContentDropdown from "./components/GenericScoreContentDropdown";
+
+export interface ScoreState {
+	highlight: boolean;
+	setHighlight: SetState<boolean>;
+}
+
+export interface ScoreDropdownProps<I extends IDStrings = IDStrings> {
+	score: ScoreDocument<I> | PBScoreDocument<I>;
+	scoreState: ScoreState;
+}
+
+export default function GenericScoreDropdown<I extends IDStrings = IDStrings>({
+	game,
+	playtype,
+	reqUser,
+	chart,
+	scoreState,
+	defaultView = "moreInfo",
+	DocComponent = GenericScoreContentDropdown,
+}: {
+	reqUser: PublicUserDocument;
+	chart: ChartDocument;
+	scoreState: ScoreState;
+	defaultView?: "vsPB" | "moreInfo" | "history" | "debug";
+	DocComponent?: (props: {
+		score: ScoreDocument<I> | PBScoreDocument<I>;
+		scoreState: ScoreState;
+	}) => JSX.Element;
+} & GamePT) {
+	const { user } = useContext(UserContext);
+	const [view, setView] = useState(defaultView);
+
+	const { isLoading, error, data } = useQuery(
+		`/users/${reqUser.id}/games/${game}/${playtype}/pbs/${chart.chartID}?getComposition=true`,
+		async () => {
+			const res = await APIFetchV1<UGPTChartPBComposition<I>>(
+				`/users/${reqUser.id}/games/${game}/${playtype}/pbs/${chart.chartID}?getComposition=true`
+			);
+
+			if (!res.success) {
+				throw new Error(res.description);
+			}
+
+			return res.body;
+		}
+	);
+
+	const currentScoreDoc: ScoreDocument<I> | PBScoreDocument<I> | null = useMemo(() => {
+		if (!data) {
+			// dont worry about this null, it never gets below the rquery checks
+			return null;
+		}
+
+		if (view === "pb") {
+			return data.pb;
+		}
+
+		const idMap = {
+			scorePB: data.pb.composedFrom.scorePB,
+			lampPB: data.pb.composedFrom.lampPB,
+			...Object.fromEntries((data.pb.composedFrom.other ?? []).map(e => [e.name, e.scoreID])),
+		};
+
+		// @ts-expect-error awful
+		return data.scores.filter(e => e.scoreID === idMap[view])[0];
+	}, [view, data]);
+
+	if (error) {
+		return <>An error has occured. Whoops.</>;
+	}
+
+	if (isLoading || !data) {
+		return (
+			<div style={{ height: "200px" }} className="d-flex align-items-center">
+				<Loading />
+			</div>
+		);
+	}
+
+	let body;
+
+	if (view === "history") {
+		body = <></>; // todo
+	} else if (view === "debug") {
+		body = <DebugContent data={data} />;
+	} else {
+		body = <DocComponent score={currentScoreDoc!} scoreState={scoreState} />;
+	}
+
+	return (
+		<DropdownStructure
+			buttons={
+				<>
+					<SelectButton setValue={setView} value={view} id="pb">
+						<Icon type="trophy" />
+						PB Info
+					</SelectButton>
+					<SelectButton setValue={setView} value={view} id="scorePB">
+						<Icon type="star-half-alt" />
+						Best Score
+					</SelectButton>
+					<SelectButton setValue={setView} value={view} id="lampPB">
+						<Icon type="lightbulb" />
+						Best Lamp
+					</SelectButton>
+					<SelectButton setValue={setView} value={view} id="history" disabled>
+						<Icon type="history" />
+						Play History
+					</SelectButton>
+					{user?.authLevel === "admin" && (
+						<SelectButton setValue={setView} value={view} id="debug">
+							<Icon type="bug" />
+							Debug Info
+						</SelectButton>
+					)}
+				</>
+			}
+		>
+			{body}
+		</DropdownStructure>
+	);
+}

client/src/components/tables/dropdowns/IIDXPBDropdown.tsx

@@ -4,17 +4,19 @@ import Loading from "components/util/Loading";
 import SelectButton from "components/util/SelectButton";
 import React, { useMemo, useState, useEffect } from "react";
 import { useQuery } from "react-query";
-import { ChartDocument, PublicUserDocument } from "tachi-common";
+import { ChartDocument, PBScoreDocument, PublicUserDocument, ScoreDocument } from "tachi-common";
 import { UGPTChartPBComposition } from "types/api-returns";
 import { GamePT, SetState } from "types/react";
 import { APIFetchV1 } from "util/api";
 import { IsScore } from "util/asserts";
 import CommentContainer from "./components/CommentContainer";
+import DropdownScoreButtons from "./components/DropdownScoreButtons";
 import DropdownStructure from "./components/DropdownStructure";
 import { IIDXGraphsComponent, ModsTable, ScoreInfo } from "./components/IIDXScoreDropdownParts";
 import JudgementTable from "./components/JudgementTable";
 import PBNote from "./components/PBNote";
 import ScoreEditButtons from "./components/ScoreEditButtons";
+import GenericPBDropdown, { ScoreState } from "./GenericPBDropdown";
 
 export default function IIDXPBDropdown({
 	game,
@@ -62,104 +64,30 @@ export default function IIDXPBDropdown({
 	}
 
 	return (
-		<DropdownStructure
-			buttons={
-				<>
-					<SelectButton setValue={setView} value={view} id="pb">
-						<Icon type="trophy" />
-						PB Info
-					</SelectButton>
-					<SelectButton setValue={setView} value={view} id="scorePB">
-						<Icon type="star-half-alt" />
-						Best Score
-					</SelectButton>
-					<SelectButton setValue={setView} value={view} id="lampPB">
-						<Icon type="lightbulb" />
-						Best Lamp
-					</SelectButton>
-					<SelectButton setValue={setView} value={view} id="history" disabled>
-						<Icon type="history" />
-						Play History
-					</SelectButton>
-					<SelectButton setValue={setView} value={view} id="debug">
-						<Icon type="bug" />
-						Debug Info
-					</SelectButton>
-				</>
-			}
-		>
-			{view === "history" ? (
-				<></>
-			) : view === "debug" ? (
-				<DebugContent data={data} />
-			) : (
-				<DocumentDisplay pbData={data} view={view} scoreState={scoreState} />
-			)}
-		</DropdownStructure>
+		<GenericPBDropdown
+			{...{ game, playtype, chart, reqUser, scoreState }}
+			DocComponent={DocumentDisplay}
+		/>
 	);
 }
 
 function DocumentDisplay({
-	pbData,
-	view,
+	score,
 	scoreState,
 }: {
-	pbData: UGPTChartPBComposition<"iidx:SP">;
-	view: "pb" | "scorePB" | "lampPB" | "bpPB";
-	scoreState: {
-		highlight: boolean;
-		setHighlight: SetState<boolean>;
-	};
+	score: PBScoreDocument<"iidx:SP" | "iidx:DP"> | ScoreDocument<"iidx:SP" | "iidx:DP">;
+	scoreState: ScoreState;
 }) {
-	const idMap = {
-		scorePB: pbData.pb.composedFrom.scorePB,
-		lampPB: pbData.pb.composedFrom.lampPB,
-		...Object.fromEntries((pbData.pb.composedFrom.other ?? []).map(e => [e.name, e.scoreID])),
-	};
-
-	const currentDoc = useMemo(() => {
-		if (view === "pb") {
-			return pbData.pb;
-		}
-
-		// @ts-expect-error awful
-		return pbData.scores.filter(e => e.scoreID === idMap[view])[0];
-	}, [view]);
-
-	const [comment, setComment] = useState(IsScore(currentDoc) ? currentDoc.comment : null);
-
-	useEffect(() => {
-		setComment(IsScore(currentDoc) ? currentDoc.comment : null);
-	}, [currentDoc]);
-
 	return (
 		<>
 			<div className="col-9">
 				<div className="row">
-					<IIDXGraphsComponent score={currentDoc} />
-					{IsScore(currentDoc) ? (
-						<>
-							<ScoreInfo score={currentDoc} />
-							<CommentContainer comment={comment} />
-							<ScoreEditButtons
-								score={currentDoc}
-								scoreState={{ ...scoreState, comment, setComment }}
-							/>
-						</>
-					) : (
-						<div className="col-12">
-							<PBNote />
-						</div>
-					)}
+					<IIDXGraphsComponent score={score} />
+					<DropdownScoreButtons {...{ score, scoreState }} />
 				</div>
 			</div>
 			<div className="col-3 align-self-center">
-				<JudgementTable
-					game="iidx"
-					playtype="SP"
-					judgements={currentDoc.scoreData.judgements}
-				/>
-				{IsScore(currentDoc) && <ModsTable score={currentDoc} />}
+				<JudgementTable score={score} />
 			</div>
 		</>
 	);

client/src/components/tables/dropdowns/IIDXScoreDropdown.tsx

@@ -75,11 +75,7 @@ export default function IIDXScoreDropdown({
 					</div>
 				</div>
 				<div className="col-3 align-self-center">
-					<JudgementTable
-						game="iidx"
-						playtype="SP"
-						judgements={thisScore.scoreData.judgements}
-					/>
+					<JudgementTable score={thisScore} />
 					{IsScore(thisScore) && <ModsTable score={thisScore} />}
 				</div>
 			</>

client/src/components/tables/dropdowns/components/DropdownScoreButtons.tsx

@@ -0,0 +1,34 @@
+import React, { useEffect, useState } from "react";
+import { IsScore } from "util/asserts";
+import { ScoreDropdownProps } from "../GenericPBDropdown";
+import CommentContainer from "./CommentContainer";
+import { ScoreInfo } from "./GenericScoreContentDropdown";
+import PBNote from "./PBNote";
+import ScoreEditButtons from "./ScoreEditButtons";
+
+export default function DropdownScoreButtons({ score, scoreState }: ScoreDropdownProps) {
+	const [comment, setComment] = useState(IsScore(score) ? score.comment : null);
+
+	useEffect(() => {
+		setComment(IsScore(score) ? score.comment : null);
+	}, [score]);
+
+	return (
+		<>
+			{IsScore(score) ? (
+				<>
+					<ScoreInfo score={score} />
+					<CommentContainer comment={comment} />
+					<ScoreEditButtons
+						score={score}
+						scoreState={{ ...scoreState, comment, setComment }}
+					/>
+				</>
+			) : (
+				<div className="col-12">
+					<PBNote />
+				</div>
+			)}
+		</>
+	);
+}

client/src/components/tables/dropdowns/components/GenericScoreContentDropdown.tsx

@@ -0,0 +1,80 @@
+import DeltaCell from "components/tables/cells/DeltaCell";
+import LampCell from "components/tables/cells/LampCell";
+import ScoreCell from "components/tables/cells/ScoreCell";
+import TimestampCell from "components/tables/cells/TimestampCell";
+import React, { useEffect, useState } from "react";
+import { PBScoreDocument, ScoreDocument } from "tachi-common";
+import { SetState } from "types/react";
+import { IsScore } from "util/asserts";
+import CommentContainer from "./CommentContainer";
+import JudgementTable from "./JudgementTable";
+import PBNote from "./PBNote";
+import ScoreEditButtons from "./ScoreEditButtons";
+
+export function ScoreInfo({ score }: { score: ScoreDocument }) {
+	return (
+		<div className="col-12">
+			<table className="table">
+				<thead>
+					<tr>
+						<td colSpan={100}>Score Info</td>
+					</tr>
+				</thead>
+				<tbody>
+					<tr>
+						<ScoreCell score={score} game={score.game} playtype={score.playtype} />
+						<DeltaCell
+							game={score.game}
+							playtype={score.playtype}
+							score={score.scoreData.score}
+							percent={score.scoreData.percent}
+							grade={score.scoreData.grade}
+						/>
+						<LampCell sc={score} />
+						<TimestampCell time={score.timeAchieved} />
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	);
+}
+
+export default function GenericScoreContentDropdown({
+	score,
+	scoreState,
+}: {
+	score: ScoreDocument | PBScoreDocument;
+	scoreState: { highlight: boolean; setHighlight: SetState<boolean> };
+}) {
+	const [comment, setComment] = useState(IsScore(score) ? score.comment : null);
+
+	useEffect(() => {
+		setComment(IsScore(score) ? score.comment : null);
+	}, [score]);
+
+	return (
+		<>
+			<div className="col-9">
+				<div className="row">
+					{IsScore(score) ? (
+						<>
+							<ScoreInfo score={score} />
+							<CommentContainer comment={comment} />
+							<ScoreEditButtons
+								score={score}
+								scoreState={{ ...scoreState, comment, setComment }}
+							/>
+						</>
+					) : (
+						<div className="col-12">
+							<PBNote />
+						</div>
+					)}
+				</div>
+			</div>
+			<div className="col-3 align-self-center">
+				<JudgementTable score={score} />
+			</div>
+		</>
+	);
+}

client/src/components/tables/dropdowns/components/JudgementTable.tsx

@@ -1,23 +1,28 @@
 import MiniTable from "components/tables/components/MiniTable";
 import React from "react";
-import { GetGamePTConfig, ScoreDocument } from "tachi-common";
+import { COLOUR_SET, GetGamePTConfig, PBScoreDocument, ScoreDocument } from "tachi-common";
 import { GamePT } from "types/react";
+import { ChangeOpacity } from "util/color-opacity";
 
-export default function JudgementTable({
-	game,
-	playtype,
-	judgements,
-}: { judgements: ScoreDocument["scoreData"]["judgements"] } & GamePT) {
-	const gptConfig = GetGamePTConfig(game, playtype);
+export default function JudgementTable({ score }: { score: ScoreDocument | PBScoreDocument }) {
+	const gptConfig = GetGamePTConfig(score.game, score.playtype);
 
 	return (
 		<MiniTable className="text-center table-sm" headers={["Judgements"]} colSpan={2}>
 			{gptConfig.judgements.map(j => (
 				<tr key={j}>
 					<td>{j.toUpperCase()}</td>
-					<td>{judgements[j] ?? "No Data."}</td>
+					<td>{score.scoreData.judgements[j] ?? "No Data."}</td>
 				</tr>
 			))}
+			<tr>
+				<td style={{ backgroundColor: ChangeOpacity(COLOUR_SET.red, 0.2) }}>
+					Slow: {score.scoreData.hitMeta.slow ?? "Unknown"}
+				</td>
+				<td style={{ backgroundColor: ChangeOpacity(COLOUR_SET.paleBlue, 0.2) }}>
+					Fast: {score.scoreData.hitMeta.fast ?? "Unknown"}
+				</td>
+			</tr>
 		</MiniTable>
 	);
 }

client/src/components/tables/pbs/BMSPBTable.tsx

@@ -16,6 +16,7 @@ import LampCell from "../cells/LampCell";
 import BMSDifficultyCell from "../cells/BMSDifficultyCell";
 import { BMS_TABLES } from "util/constants/bms-tables";
 import { ValueGetterOrHybrid } from "util/ztable/search";
+import GenericPBDropdown from "../dropdowns/GenericPBDropdown";
 
 function GetBMSTableVal(chart: ChartDocument<"bms:7K" | "bms:14K">, key: string) {
 	for (const table of chart.data.tableFolders) {
@@ -129,14 +130,13 @@ function Row({
 	return (
 		<DropdownRow
 			dropdown={
-				<></>
-				// <IIDXPBDropdown
-				// 	chart={pb.__related.chart}
-				// 	reqUser={reqUser}
-				// 	game="bms"
-				// 	playtype={pb.playtype}
-				// 	scoreState={scoreState}
-				// />
+				<GenericPBDropdown
+					chart={pb.__related.chart}
+					reqUser={reqUser}
+					game="bms"
+					playtype={pb.playtype}
+					scoreState={scoreState}
+				/>
 			}
 			className={highlight ? "highlighted-row" : ""}
 		>

client/src/components/tables/pbs/SDVXPBTable.tsx

@@ -104,7 +104,7 @@ function Row({
 			{indexCol && <IndexCell index={pb.__related.index} />}
 			<DifficultyCell game="sdvx" chart={pb.__related.chart} />
 			<TitleCell song={pb.__related.song} chart={pb.__related.chart} game="sdvx" />
-			<SDVXScoreCell score={pb} game="sdvx" playtype={pb.playtype} />
+			<SDVXScoreCell score={pb} />
 			<LampCell sc={pb} />
 			<td>
 				{!IsNullish(pb.calculatedData.VF6) ? pb.calculatedData.VF6!.toFixed(3) : "No Data."}

client/src/components/tables/scores/BMSScoreTable.tsx

@@ -0,0 +1,114 @@
+import React, { useState } from "react";
+import { FormatDifficulty } from "tachi-common/js/utils/util";
+import TitleCell from "../cells/TitleCell";
+import TimestampCell from "../cells/TimestampCell";
+import { NumericSOV, StrSOV } from "util/sorts";
+import { ScoreDataset } from "types/tables";
+import { integer, PublicUserDocument, Playtypes } from "tachi-common";
+import TachiTable from "../components/TachiTable";
+import ScoreCell from "../cells/ScoreCell";
+import DeltaCell from "../cells/DeltaCell";
+import { HumanFriendlyStrToGradeIndex, HumanFriendlyStrToLampIndex } from "util/str-to-num";
+import DropdownRow from "../components/DropdownRow";
+import { IsNullish } from "util/misc";
+import LampCell from "../cells/LampCell";
+import BMSDifficultyCell from "../cells/BMSDifficultyCell";
+import { Playtype } from "types/tachi";
+import GenericPBDropdown from "../dropdowns/GenericPBDropdown";
+
+export default function BMSScoreTable({
+	reqUser,
+	dataset,
+	pageLen,
+	playtype,
+}: {
+	reqUser: PublicUserDocument;
+	dataset: ScoreDataset<"bms:7K" | "bms:14K">;
+	pageLen?: integer;
+	playtype: Playtypes["bms"];
+}) {
+	return (
+		<TachiTable
+			dataset={dataset}
+			pageLen={pageLen}
+			headers={[
+				["Chart", "Ch.", NumericSOV(x => x.__related.chart.levelNum)],
+				["Song", "Song", StrSOV(x => x.__related.song.title)],
+				["Score", "Score", NumericSOV(x => x.scoreData.percent)],
+				["Deltas", "Deltas", NumericSOV(x => x.scoreData.percent)],
+				["Lamp", "Lamp", NumericSOV(x => x.scoreData.lampIndex)],
+				["Sieglinde", "sgl.", NumericSOV(x => x.calculatedData.sieglinde ?? 0)],
+
+				["Timestamp", "Timestamp", NumericSOV(x => x.timeAchieved ?? 0)],
+			]}
+			entryName="Scores"
+			searchFunctions={{
+				artist: x => x.__related.song.artist,
+				title: x => x.__related.song.title,
+				difficulty: x => FormatDifficulty(x.__related.chart, "bms"),
+				level: x => x.__related.chart.levelNum,
+				score: x => x.scoreData.score,
+				percent: x => x.scoreData.percent,
+				lamp: {
+					valueGetter: x => [x.scoreData.lamp, x.scoreData.lampIndex],
+					strToNum: HumanFriendlyStrToLampIndex("bms", playtype),
+				},
+				grade: {
+					valueGetter: x => [x.scoreData.grade, x.scoreData.gradeIndex],
+					strToNum: HumanFriendlyStrToGradeIndex("bms", playtype),
+				},
+			}}
+			rowFunction={sc => (
+				<Row playtype={playtype} key={sc.scoreID} sc={sc} reqUser={reqUser} />
+			)}
+		/>
+	);
+}
+
+function Row({
+	sc,
+	reqUser,
+	playtype,
+}: {
+	sc: ScoreDataset<"bms:7K" | "bms:14K">[0];
+	reqUser: PublicUserDocument;
+	playtype: Playtype;
+}) {
+	const [highlight, setHighlight] = useState(sc.highlight);
+	const [comment, setComment] = useState(sc.comment);
+
+	const scoreState = { highlight, comment, setHighlight, setComment };
+
+	return (
+		<DropdownRow
+			className={highlight ? "highlighted-row" : ""}
+			dropdown={
+				<GenericPBDropdown
+					chart={sc.__related.chart}
+					reqUser={reqUser}
+					game="bms"
+					playtype={sc.playtype}
+					scoreState={scoreState}
+				/>
+			}
+		>
+			<BMSDifficultyCell chart={sc.__related.chart} />
+			<TitleCell song={sc.__related.song} chart={sc.__related.chart} game="bms" />
+			<ScoreCell score={sc} game="bms" playtype={playtype} />
+			<DeltaCell
+				game="bms"
+				playtype={playtype}
+				score={sc.scoreData.score}
+				percent={sc.scoreData.percent}
+				grade={sc.scoreData.grade}
+			/>
+			<LampCell sc={sc} />
+			<td>
+				{!IsNullish(sc.calculatedData.sieglinde)
+					? sc.calculatedData.sieglinde!.toFixed(2)
+					: "N/A"}
+			</td>
+			<TimestampCell time={sc.timeAchieved} />
+		</DropdownRow>
+	);
+}

client/src/components/tables/scores/IIDXScoreTable.tsx

@@ -22,6 +22,7 @@ import IIDXLampCell from "../cells/IIDXLampCell";
 import DropdownRow from "../components/DropdownRow";
 import IIDXScoreDropdown from "../dropdowns/IIDXScoreDropdown";
 import { IsNullish } from "util/misc";
+import { Playtype } from "types/tachi";
 
 export default function IIDXScoreTable({
 	reqUser,
@@ -77,14 +78,22 @@ export default function IIDXScoreTable({
 				percent: x => x.scoreData.percent,
 				lamp: {
 					valueGetter: x => [x.scoreData.lamp, x.scoreData.lampIndex],
-					strToNum: HumanFriendlyStrToLampIndex("iidx", "SP"),
+					strToNum: HumanFriendlyStrToLampIndex("iidx", playtype),
 				},
 				grade: {
 					valueGetter: x => [x.scoreData.grade, x.scoreData.gradeIndex],
-					strToNum: HumanFriendlyStrToGradeIndex("iidx", "SP"),
+					strToNum: HumanFriendlyStrToGradeIndex("iidx", playtype),
 				},
 			}}
-			rowFunction={sc => <Row key={sc.scoreID} sc={sc} reqUser={reqUser} rating={rating} />}
+			rowFunction={sc => (
+				<Row
+					key={sc.scoreID}
+					playtype={playtype}
+					sc={sc}
+					reqUser={reqUser}
+					rating={rating}
+				/>
+			)}
 		/>
 	);
 }
@@ -93,10 +102,12 @@ function Row({
 	sc,
 	reqUser,
 	rating,
+	playtype,
 }: {
 	sc: ScoreDataset<"iidx:SP" | "iidx:DP">[0];
 	reqUser: PublicUserDocument;
 	rating: ScoreCalculatedDataLookup["iidx:SP" | "iidx:DP"];
+	playtype: Playtype;
 }) {
 	const [highlight, setHighlight] = useState(sc.highlight);
 	const [comment, setComment] = useState(sc.comment);
@@ -117,12 +128,12 @@ function Row({
 				/>
 			}
 		>
-			<DifficultyCell chart={sc.__related.chart} game={"iidx"} />
+			<DifficultyCell chart={sc.__related.chart} game="iidx" />
 			<TitleCell song={sc.__related.song} chart={sc.__related.chart} game="iidx" />
-			<ScoreCell score={sc} game="iidx" playtype="SP" />
+			<ScoreCell score={sc} game="iidx" playtype={playtype} />
 			<DeltaCell
 				game="iidx"
-				playtype="SP"
+				playtype={playtype}
 				score={sc.scoreData.score}
 				percent={sc.scoreData.percent}
 				grade={sc.scoreData.grade}

client/src/components/tables/scores/SDVXScoreTable.tsx

@@ -0,0 +1,91 @@
+import React, { useState } from "react";
+import { FormatDifficulty } from "tachi-common/js/utils/util";
+import TitleCell from "../cells/TitleCell";
+import TimestampCell from "../cells/TimestampCell";
+import { NumericSOV, StrSOV } from "util/sorts";
+import { ScoreDataset } from "types/tables";
+import { integer, PublicUserDocument, Playtypes } from "tachi-common";
+import TachiTable from "../components/TachiTable";
+import DifficultyCell from "../cells/DifficultyCell";
+import ScoreCell from "../cells/ScoreCell";
+import { HumanFriendlyStrToGradeIndex, HumanFriendlyStrToLampIndex } from "util/str-to-num";
+import DropdownRow from "../components/DropdownRow";
+import { IsNullish } from "util/misc";
+import LampCell from "../cells/LampCell";
+import SDVXScoreCell from "../cells/SDVXScoreCell";
+
+export default function SDVXScoreTable({
+	reqUser,
+	dataset,
+	pageLen,
+}: {
+	reqUser: PublicUserDocument;
+	dataset: ScoreDataset<"sdvx:Single">;
+	pageLen?: integer;
+	playtype: Playtypes["sdvx"];
+}) {
+	return (
+		<TachiTable
+			dataset={dataset}
+			pageLen={pageLen}
+			headers={[
+				["Chart", "Ch.", NumericSOV(x => x.__related.chart.levelNum)],
+				["Song", "Song", StrSOV(x => x.__related.song.title)],
+				["Score", "Score", NumericSOV(x => x.scoreData.percent)],
+				["Lamp", "Lamp", NumericSOV(x => x.scoreData.lampIndex)],
+				["VF6", "VF6", NumericSOV(x => x.calculatedData.VF6 ?? 0)],
+
+				["Timestamp", "Timestamp", NumericSOV(x => x.timeAchieved ?? 0)],
+			]}
+			entryName="Scores"
+			searchFunctions={{
+				artist: x => x.__related.song.artist,
+				title: x => x.__related.song.title,
+				difficulty: x => FormatDifficulty(x.__related.chart, "sdvx"),
+				level: x => x.__related.chart.levelNum,
+				score: x => x.scoreData.score,
+				percent: x => x.scoreData.percent,
+				lamp: {
+					valueGetter: x => [x.scoreData.lamp, x.scoreData.lampIndex],
+					strToNum: HumanFriendlyStrToLampIndex("sdvx", "Single"),
+				},
+				grade: {
+					valueGetter: x => [x.scoreData.grade, x.scoreData.gradeIndex],
+					strToNum: HumanFriendlyStrToGradeIndex("sdvx", "Single"),
+				},
+			}}
+			rowFunction={sc => <Row key={sc.scoreID} sc={sc} reqUser={reqUser} />}
+		/>
+	);
+}
+
+function Row({ sc, reqUser }: { sc: ScoreDataset<"sdvx:Single">[0]; reqUser: PublicUserDocument }) {
+	const [highlight, setHighlight] = useState(sc.highlight);
+	const [comment, setComment] = useState(sc.comment);
+
+	const scoreState = { highlight, comment, setHighlight, setComment };
+
+	return (
+		<DropdownRow
+			className={highlight ? "highlighted-row" : ""}
+			dropdown={
+				<></>
+				// <sdvxScoreDropdown
+				// 	chart={sc.__related.chart}
+				// 	game="sdvx"
+				// 	playtype={sc.playtype}
+				// 	reqUser={reqUser}
+				// 	thisScore={sc}
+				// 	scoreState={scoreState}
+				// />
+			}
+		>
+			<DifficultyCell chart={sc.__related.chart} game="sdvx" />
+			<TitleCell song={sc.__related.song} chart={sc.__related.chart} game="sdvx" />
+			<SDVXScoreCell score={sc} />
+			<LampCell sc={sc} />
+			<td>{!IsNullish(sc.calculatedData.VF6) ? sc.calculatedData.VF6!.toFixed(2) : "N/A"}</td>
+			<TimestampCell time={sc.timeAchieved} />
+		</DropdownRow>
+	);
+}

client/src/components/tables/scores/ScoreTable.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { GamePT } from "types/react";
+import { ScoreDataset } from "types/tables";
+import { PublicUserDocument, integer } from "tachi-common";
+import IIDXScoreTable from "./IIDXScoreTable";
+import BMSScoreTable from "./BMSScoreTable";
+import SDVXScoreTable from "./SDVXScoreTable";
+
+export default function ScoreTable({
+	dataset,
+	indexCol = true,
+	reqUser,
+	playtype,
+	pageLen = 10,
+	game,
+}: {
+	dataset: ScoreDataset;
+	indexCol?: boolean;
+	reqUser: PublicUserDocument;
+	pageLen?: integer;
+} & GamePT) {
+	// We're just going to ignore all these errors
+	// and assume we just won't make a mistake.
+	// ever.
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	const props = { dataset, indexCol, reqUser, playtype, pageLen } as any;
+	if (game === "iidx") {
+		return <IIDXScoreTable {...props} />;
+	} else if (game === "bms") {
+		return <BMSScoreTable {...props} />;
+	} else if (game === "sdvx") {
+		return <SDVXScoreTable {...props} />;
+	}
+
+	return <></>;
+}

client/src/components/user/ProfileBadges.tsx

@@ -19,7 +19,7 @@ export function ProfileBadge({ variant }: { variant: UserBadges }) {
 		return <Badge variant="warning">Alpha Tester</Badge>;
 	} else if (variant === "beta") {
 		return <Badge variant="info">Beta Tester</Badge>;
-	} else if (variant === "devTeam") {
+	} else if (variant === "dev-team") {
 		return <Badge variant="primary">Dev Team</Badge>;
 	} else if (variant === "contributor") {
 		// discord contributor colour

client/src/util/misc.ts

@@ -60,17 +60,5 @@ export function ReverseStr(str: string) {
 }
 
 export function FormatMillions(v: number) {
-	let str = "";
-
-	const valueStr = v.toFixed();
-
-	for (let i = 0; i < valueStr.length; i++) {
-		const backwardsIndex = valueStr.length - i - 1;
-		if (i % 3 === 0 && i > 0) {
-			str += ",";
-		}
-		str += valueStr[backwardsIndex];
-	}
-
-	return ReverseStr(str);
+	return v.toLocaleString();
 }