diff --git a/client/__tests__/e2e/screenshot_env.js b/client/__tests__/e2e/screenshot_env.js deleted file mode 100644 index 1f20d3180..000000000 --- a/client/__tests__/e2e/screenshot_env.js +++ /dev/null @@ -1,37 +0,0 @@ -const PuppeteerEnvironment = require("jest-environment-puppeteer"); -require("jest-circus"); -const ENV_DEFAULT = require("../../../environment.default.json"); -const takeScreenshot = require("./takeScreenshot"); - -class ScreenshotEnvironment extends PuppeteerEnvironment { - async handleTestEvent(event, state) { - // (thuang): Enable this when debugging a flaky test, since this provides - // the context around the flaky test, which is helpful for debugging. - // if (["test_start", "test_done"].includes(event.name)) { - // console.log("------------------event name:\n", event.name); - // console.log("~~~~ Current test errors\n", new Date(), event.test.errors); - // console.log("~~~~ Current test\n", new Date(), event.test); - // } - - if (event.name === "error") { - console.log("error event:", JSON.stringify(event)); - } - - if (event.name === "test_fn_failure" || event.name === "hook_failure") { - console.log("------------------event name:\n", event.name); - console.log(">>>> Current state\n", new Date(), state); - console.log("===> Failure event\n", new Date(), event); - - // (thuang): We only want to take screenshot on the last try - if ( - state.currentlyRunningTest.invocations <= ENV_DEFAULT.RETRY_ATTEMPTS - ) { - return; - } - - await takeScreenshot(state.currentlyRunningTest.name, this.global.page); - } - } -} - -module.exports = ScreenshotEnvironment; diff --git a/client/__tests__/e2e/takeScreenshot.js b/client/__tests__/e2e/takeScreenshot.js deleted file mode 100644 index 9800efabe..000000000 --- a/client/__tests__/e2e/takeScreenshot.js +++ /dev/null @@ -1,17 +0,0 @@ -function toFilename(name) { - return name.replace(/[^a-z0-9.-]+/gi, "-"); -} - -async function takeScreenshot(currentTestName, page) { - const testName = toFilename(currentTestName); - - // Take a screenshot at the point of failure - const date = new Date().toISOString(); - const screenshotName = `${date}-${testName}.png`; - - await page.screenshot({ - path: `./__tests__/screenshots/ignoreE2E-screenshot-${screenshotName}`, - }); -} - -module.exports = takeScreenshot; diff --git a/client/package-lock.json b/client/package-lock.json index 71ad56474..99e978ea2 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -84,7 +84,7 @@ "@storybook/react-webpack5": "^7.6.12", "@storybook/server-webpack5": "^7.6.12", "@storybook/test": "^7.6.12", - "@types/d3": "^7.0.0", + "@types/d3": "^4.0.0", "@types/d3-scale-chromatic": "^3.0.0", "@types/flatbuffers": "^1.10.0", "@types/is-number": "^7.0.1", @@ -10656,198 +10656,194 @@ } }, "node_modules/@types/d3": { - "version": "7.4.0", - "resolved": "https://registry.npmjs.org/@types/d3/-/d3-7.4.0.tgz", - "integrity": "sha512-jIfNVK0ZlxcuRDKtRS/SypEyOQ6UHaFQBKv032X45VvxSJ6Yi5G9behy9h6tNTHTDGh5Vq+KbmBjUWLgY4meCA==", - "dev": true, - "dependencies": { - "@types/d3-array": "*", - "@types/d3-axis": "*", - "@types/d3-brush": "*", - "@types/d3-chord": "*", - "@types/d3-color": "*", - "@types/d3-contour": "*", - "@types/d3-delaunay": "*", - "@types/d3-dispatch": "*", - "@types/d3-drag": "*", - "@types/d3-dsv": "*", - "@types/d3-ease": "*", - "@types/d3-fetch": "*", - "@types/d3-force": "*", - "@types/d3-format": "*", - "@types/d3-geo": "*", - "@types/d3-hierarchy": "*", - "@types/d3-interpolate": "*", - "@types/d3-path": "*", - "@types/d3-polygon": "*", - "@types/d3-quadtree": "*", - "@types/d3-random": "*", - "@types/d3-scale": "*", - "@types/d3-scale-chromatic": "*", - "@types/d3-selection": "*", - "@types/d3-shape": "*", - "@types/d3-time": "*", - "@types/d3-time-format": "*", - "@types/d3-timer": "*", - "@types/d3-transition": "*", - "@types/d3-zoom": "*" + "version": "4.13.15", + "resolved": "https://registry.npmjs.org/@types/d3/-/d3-4.13.15.tgz", + "integrity": "sha512-D1yRBsDCC8BBUHfl7DHfEXAX1+RkwdmrwTSMB+dhCPuzIyj4dc3b+fkKnvMWj7tqx3YeoM/QsZnZ13IkkbhTUw==", + "dev": true, + "dependencies": { + "@types/d3-array": "^1", + "@types/d3-axis": "^1", + "@types/d3-brush": "^1", + "@types/d3-chord": "^1", + "@types/d3-collection": "*", + "@types/d3-color": "^1", + "@types/d3-dispatch": "^1", + "@types/d3-drag": "^1", + "@types/d3-dsv": "^1", + "@types/d3-ease": "^1", + "@types/d3-force": "^1", + "@types/d3-format": "^1", + "@types/d3-geo": "^1", + "@types/d3-hierarchy": "^1", + "@types/d3-interpolate": "^1", + "@types/d3-path": "^1", + "@types/d3-polygon": "^1", + "@types/d3-quadtree": "^1", + "@types/d3-queue": "*", + "@types/d3-random": "^1", + "@types/d3-request": "*", + "@types/d3-scale": "^1", + "@types/d3-selection": "^1", + "@types/d3-shape": "^1", + "@types/d3-time": "^1", + "@types/d3-time-format": "^2", + "@types/d3-timer": "^1", + "@types/d3-transition": "^1", + "@types/d3-voronoi": "*", + "@types/d3-zoom": "^1" } }, "node_modules/@types/d3-array": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.0.3.tgz", - "integrity": "sha512-Reoy+pKnvsksN0lQUlcH6dOGjRZ/3WRwXR//m+/8lt1BXeI4xyaUZoqULNjyXXRuh0Mj4LNpkCvhUpQlY3X5xQ==", + "version": "1.2.12", + "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-1.2.12.tgz", + "integrity": "sha512-zIq9wCg/JO7MGC6vq3HRDaVYkqgSPIDjpo3JhAQxl7PHYVPA5D9SMiBfjW/ZoAvPd2a+rkovqBg0nS0QOChsJQ==", "dev": true }, "node_modules/@types/d3-axis": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-3.0.1.tgz", - "integrity": "sha512-zji/iIbdd49g9WN0aIsGcwcTBUkgLsCSwB+uH+LPVDAiKWENMtI3cJEWt+7/YYwelMoZmbBfzA3qCdrZ2XFNnw==", + "version": "1.0.19", + "resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-1.0.19.tgz", + "integrity": "sha512-rXxE2jJYv6kar/6YWS8rM0weY+jjvnJvBxHKrIUqt3Yzomrfbf5tncpKG6jq6Aaw6TZyBcb1bxEWc0zGzcmbiw==", "dev": true, "dependencies": { - "@types/d3-selection": "*" + "@types/d3-selection": "^1" } }, "node_modules/@types/d3-brush": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/@types/d3-brush/-/d3-brush-3.0.1.tgz", - "integrity": "sha512-B532DozsiTuQMHu2YChdZU0qsFJSio3Q6jmBYGYNp3gMDzBmuFFgPt9qKA4VYuLZMp4qc6eX7IUFUEsvHiXZAw==", + "version": "1.1.8", + "resolved": "https://registry.npmjs.org/@types/d3-brush/-/d3-brush-1.1.8.tgz", + "integrity": "sha512-tPVjYAjJt02fgazF9yiX/309sj6qhIiIopLuHhP4FFFq9VKqu9NQBeCK3ger0RHVZGs9RKaSBUWyPUzii5biGQ==", "dev": true, "dependencies": { - "@types/d3-selection": "*" + "@types/d3-selection": "^1" } }, "node_modules/@types/d3-chord": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/@types/d3-chord/-/d3-chord-3.0.1.tgz", - "integrity": "sha512-eQfcxIHrg7V++W8Qxn6QkqBNBokyhdWSAS73AbkbMzvLQmVVBviknoz2SRS/ZJdIOmhcmmdCRE/NFOm28Z1AMw==", + "version": "1.0.14", + "resolved": "https://registry.npmjs.org/@types/d3-chord/-/d3-chord-1.0.14.tgz", + "integrity": "sha512-W9rCIbSAhwtmydW5iGg9dwTQIi3SGBOh68/T3ke3PyOgejuSLozmtAMaWNViGaGJCeuM4aFJHTUHQvMedl4ugA==", "dev": true }, - "node_modules/@types/d3-color": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.0.tgz", - "integrity": "sha512-HKuicPHJuvPgCD+np6Se9MQvS6OCbJmOjGvylzMJRlDwUXjKTTXs6Pwgk79O09Vj/ho3u1ofXnhFOaEWWPrlwA==", + "node_modules/@types/d3-collection": { + "version": "1.0.13", + "resolved": "https://registry.npmjs.org/@types/d3-collection/-/d3-collection-1.0.13.tgz", + "integrity": "sha512-v0Rgw3IZebRyamcwVmtTDCZ8OmQcj4siaYjNc7wGMZT7PmdSHawGsCOQMxyLvZ7lWjfohYLK0oXtilMOMgfY8A==", "dev": true }, - "node_modules/@types/d3-contour": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/@types/d3-contour/-/d3-contour-3.0.1.tgz", - "integrity": "sha512-C3zfBrhHZvrpAAK3YXqLWVAGo87A4SvJ83Q/zVJ8rFWJdKejUnDYaWZPkA8K84kb2vDA/g90LTQAz7etXcgoQQ==", - "dev": true, - "dependencies": { - "@types/d3-array": "*", - "@types/geojson": "*" - } - }, - "node_modules/@types/d3-delaunay": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/@types/d3-delaunay/-/d3-delaunay-6.0.1.tgz", - "integrity": "sha512-tLxQ2sfT0p6sxdG75c6f/ekqxjyYR0+LwPrsO1mbC9YDBzPJhs2HbJJRrn8Ez1DBoHRo2yx7YEATI+8V1nGMnQ==", + "node_modules/@types/d3-color": { + "version": "1.4.5", + "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-1.4.5.tgz", + "integrity": "sha512-5sNP3DmtSnSozxcjqmzQKsDOuVJXZkceo1KJScDc1982kk/TS9mTPc6lpli1gTu1MIBF1YWutpHpjucNWcIj5g==", "dev": true }, "node_modules/@types/d3-dispatch": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/@types/d3-dispatch/-/d3-dispatch-3.0.1.tgz", - "integrity": "sha512-NhxMn3bAkqhjoxabVJWKryhnZXXYYVQxaBnbANu0O94+O/nX9qSjrA1P1jbAQJxJf+VC72TxDX/YJcKue5bRqw==", + "version": "1.0.12", + "resolved": "https://registry.npmjs.org/@types/d3-dispatch/-/d3-dispatch-1.0.12.tgz", + "integrity": "sha512-vrhleoVNhGJGx7GQZ4207lYGyMbW/yj/iJTSvLKyfAp8nXFF+19dnMpPN/nEVs6fudIsQc7ZelBFUMe3aJDmKw==", "dev": true }, "node_modules/@types/d3-drag": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.1.tgz", - "integrity": "sha512-o1Va7bLwwk6h03+nSM8dpaGEYnoIG19P0lKqlic8Un36ymh9NSkNFX1yiXMKNMx8rJ0Kfnn2eovuFaL6Jvj0zA==", + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-1.2.8.tgz", + "integrity": "sha512-QM6H8E6r9/51BcE4NEluQ0f9dTECCTDEALJSQIWn183+Mtz/6KvEjOxW8VzKYSnhhL+qMljMKKA1WOUUf/4Qhw==", "dev": true, "dependencies": { - "@types/d3-selection": "*" + "@types/d3-selection": "^1" } }, "node_modules/@types/d3-dsv": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@types/d3-dsv/-/d3-dsv-3.0.0.tgz", - "integrity": "sha512-o0/7RlMl9p5n6FQDptuJVMxDf/7EDEv2SYEO/CwdG2tr1hTfUVi0Iavkk2ax+VpaQ/1jVhpnj5rq1nj8vwhn2A==", + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/@types/d3-dsv/-/d3-dsv-1.2.8.tgz", + "integrity": "sha512-x1m1s0lVstZQ5/Kzp4bVIMee3fFuDm+hphVnvrYA7wU16XqwgbCBfeVvHYZzVQQIy4jyi3MEtgduLVuwIRCKLQ==", "dev": true }, "node_modules/@types/d3-ease": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.0.tgz", - "integrity": "sha512-aMo4eaAOijJjA6uU+GIeW018dvy9+oH5Y2VPPzjjfxevvGQ/oRDs+tfYC9b50Q4BygRR8yE2QCLsrT0WtAVseA==", + "version": "1.0.13", + "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-1.0.13.tgz", + "integrity": "sha512-VAA4H8YNaNN0+UNIlpkwkLOj7xL5EGdyiQpdlAvOIRHckjGFCLK8eMoUd4+IMNEhQgweq0Yk/Dfzr70xhUo6hA==", "dev": true }, - "node_modules/@types/d3-fetch": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/@types/d3-fetch/-/d3-fetch-3.0.1.tgz", - "integrity": "sha512-toZJNOwrOIqz7Oh6Q7l2zkaNfXkfR7mFSJvGvlD/Ciq/+SQ39d5gynHJZ/0fjt83ec3WL7+u3ssqIijQtBISsw==", - "dev": true, - "dependencies": { - "@types/d3-dsv": "*" - } - }, "node_modules/@types/d3-force": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/@types/d3-force/-/d3-force-3.0.3.tgz", - "integrity": "sha512-z8GteGVfkWJMKsx6hwC3SiTSLspL98VNpmvLpEFJQpZPq6xpA1I8HNBDNSpukfK0Vb0l64zGFhzunLgEAcBWSA==", + "version": "1.2.7", + "resolved": "https://registry.npmjs.org/@types/d3-force/-/d3-force-1.2.7.tgz", + "integrity": "sha512-zySqZfnxn67RVEGWzpD9dQA0AbNIp4Rj0qGvAuUdUNfGLrwuGCbEGAGze5hEdNaHJKQT2gTqr6j+qAzncm11ew==", "dev": true }, "node_modules/@types/d3-format": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-3.0.1.tgz", - "integrity": "sha512-5KY70ifCCzorkLuIkDe0Z9YTf9RR2CjBX1iaJG+rgM/cPP+sO+q9YdQ9WdhQcgPj1EQiJ2/0+yUkkziTG6Lubg==", + "version": "1.4.5", + "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-1.4.5.tgz", + "integrity": "sha512-mLxrC1MSWupOSncXN/HOlWUAAIffAEBaI4+PKy2uMPsKe4FNZlk7qrbTjmzJXITQQqBHivaks4Td18azgqnotA==", "dev": true }, "node_modules/@types/d3-geo": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-3.0.2.tgz", - "integrity": "sha512-DbqK7MLYA8LpyHQfv6Klz0426bQEf7bRTvhMy44sNGVyZoWn//B0c+Qbeg8Osi2Obdc9BLLXYAKpyWege2/7LQ==", + "version": "1.12.7", + "resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-1.12.7.tgz", + "integrity": "sha512-QetZrWWjuMfCe0BHLjD+dOThlgk7YGZ2gj+yhFAbDN5TularNBEQiBs5/CIgX0+IBDjt7/fbkDd5V70J1LjjKA==", "dev": true, "dependencies": { "@types/geojson": "*" } }, "node_modules/@types/d3-hierarchy": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-3.1.0.tgz", - "integrity": "sha512-g+sey7qrCa3UbsQlMZZBOHROkFqx7KZKvUpRzI/tAp/8erZWpYq7FgNKvYwebi2LaEiVs1klhUfd3WCThxmmWQ==", + "version": "1.1.11", + "resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-1.1.11.tgz", + "integrity": "sha512-lnQiU7jV+Gyk9oQYk0GGYccuexmQPTp08E0+4BidgFdiJivjEvf+esPSdZqCZ2C7UwTWejWpqetVaU8A+eX3FA==", "dev": true }, "node_modules/@types/d3-interpolate": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.1.tgz", - "integrity": "sha512-jx5leotSeac3jr0RePOH1KdR9rISG91QIE4Q2PYTu4OymLTZfA3SrnURSLzKH48HmXVUru50b8nje4E79oQSQw==", + "version": "1.4.5", + "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-1.4.5.tgz", + "integrity": "sha512-k9L18hXXv7OvK4PqW1kSFYIzasGOvfhPUWmHFkoZ8/ci99EAmY4HoF6zMefrHl0SGV7XYc7Qq2MNh8dK3edg5A==", "dev": true, "dependencies": { - "@types/d3-color": "*" + "@types/d3-color": "^1" } }, "node_modules/@types/d3-path": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.0.0.tgz", - "integrity": "sha512-0g/A+mZXgFkQxN3HniRDbXMN79K3CdTpLsevj+PXiTcb2hVyvkZUBg37StmgCQkaD84cUJ4uaDAWq7UJOQy2Tg==", + "version": "1.0.11", + "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-1.0.11.tgz", + "integrity": "sha512-4pQMp8ldf7UaB/gR8Fvvy69psNHkTpD/pVw3vmEi8iZAB9EPMBruB1JvHO4BIq9QkUUd2lV1F5YXpMNj7JPBpw==", "dev": true }, "node_modules/@types/d3-polygon": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@types/d3-polygon/-/d3-polygon-3.0.0.tgz", - "integrity": "sha512-D49z4DyzTKXM0sGKVqiTDTYr+DHg/uxsiWDAkNrwXYuiZVd9o9wXZIo+YsHkifOiyBkmSWlEngHCQme54/hnHw==", + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/@types/d3-polygon/-/d3-polygon-1.0.10.tgz", + "integrity": "sha512-+hbHsFdCMs23vk9p/SpvIkHkCpl0vxkP2qWR2vEk0wRi0BXODWgB/6aHnfrz/BeQnk20XzZiQJIZ+11TGxuYMQ==", "dev": true }, "node_modules/@types/d3-quadtree": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/@types/d3-quadtree/-/d3-quadtree-3.0.2.tgz", - "integrity": "sha512-QNcK8Jguvc8lU+4OfeNx+qnVy7c0VrDJ+CCVFS9srBo2GL9Y18CnIxBdTF3v38flrGy5s1YggcoAiu6s4fLQIw==", + "version": "1.0.13", + "resolved": "https://registry.npmjs.org/@types/d3-quadtree/-/d3-quadtree-1.0.13.tgz", + "integrity": "sha512-BAQD6gTHnXqmI7JRhXwM2pEYJJF27AT1f6zCC192BKAUhigzd5HZjdje5ufRXmYcUM/fr2IJ9KqVMeXaljmmOw==", + "dev": true + }, + "node_modules/@types/d3-queue": { + "version": "3.0.10", + "resolved": "https://registry.npmjs.org/@types/d3-queue/-/d3-queue-3.0.10.tgz", + "integrity": "sha512-kYb7UeXKaOWJIkPx1Rx79+D/3wx69XXpkQ8+MWctAu4CUTdVnSOF/AKqC9bgf42sDuL1Fj0eeQSyU62HRqRHWg==", "dev": true }, "node_modules/@types/d3-random": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/@types/d3-random/-/d3-random-3.0.1.tgz", - "integrity": "sha512-IIE6YTekGczpLYo/HehAy3JGF1ty7+usI97LqraNa8IiDur+L44d0VOjAvFQWJVdZOJHukUJw+ZdZBlgeUsHOQ==", + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/@types/d3-random/-/d3-random-1.1.5.tgz", + "integrity": "sha512-gB5CR+7xYMj56pt5zmSyDBjTNMEy96PdfUb2qBaAT9bmPcf4P/YHfhhTI5y8JoiqaSRLJY+3mqtaE9loBgB6Ng==", "dev": true }, + "node_modules/@types/d3-request": { + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/@types/d3-request/-/d3-request-1.0.9.tgz", + "integrity": "sha512-gD2991YKzdQu5lJGhWHEjptxQvWRZKwZF3QdWqjnqrWfVd15e7/WuL6X2Pl/4sRyLKaXWbB2xuk1tSBPVLlNhg==", + "dev": true, + "dependencies": { + "@types/d3-dsv": "^1" + } + }, "node_modules/@types/d3-scale": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.2.tgz", - "integrity": "sha512-Yk4htunhPAwN0XGlIwArRomOjdoBFXC3+kCxK2Ubg7I9shQlVSJy/pG/Ht5ASN+gdMIalpk8TJ5xV74jFsetLA==", + "version": "1.0.22", + "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-1.0.22.tgz", + "integrity": "sha512-9XHVg/pVr+4qbowUNKHYNouFCXQUQ0ZZr1ppGgh10DVUaEb6nKuyPj0May0mmTiLhuDEaa9di1t0Hmg6lYTSFw==", "dev": true, "dependencies": { - "@types/d3-time": "*" + "@types/d3-time": "^1" } }, "node_modules/@types/d3-scale-chromatic": { @@ -10857,55 +10853,61 @@ "dev": true }, "node_modules/@types/d3-selection": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.3.tgz", - "integrity": "sha512-Mw5cf6nlW1MlefpD9zrshZ+DAWL4IQ5LnWfRheW6xwsdaWOb6IRRu2H7XPAQcyXEx1D7XQWgdoKR83ui1/HlEA==", + "version": "1.4.6", + "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-1.4.6.tgz", + "integrity": "sha512-0MhJ/LzJe6/vQVxiYJnvNq5CD/MF6Qy0dLp4BEQ6Dz8oOaB0EMXfx1GGeBFSW+3VzgjaUrxK6uECDQj9VLa/Mg==", "dev": true }, "node_modules/@types/d3-shape": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.0.tgz", - "integrity": "sha512-jYIYxFFA9vrJ8Hd4Se83YI6XF+gzDL1aC5DCsldai4XYYiVNdhtpGbA/GM6iyQ8ayhSp3a148LY34hy7A4TxZA==", + "version": "1.3.12", + "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-1.3.12.tgz", + "integrity": "sha512-8oMzcd4+poSLGgV0R1Q1rOlx/xdmozS4Xab7np0eamFFUYq71AU9pOCJEFnkXW2aI/oXdVYJzw6pssbSut7Z9Q==", "dev": true, "dependencies": { - "@types/d3-path": "*" + "@types/d3-path": "^1" } }, "node_modules/@types/d3-time": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.0.tgz", - "integrity": "sha512-sZLCdHvBUcNby1cB6Fd3ZBrABbjz3v1Vm90nysCQ6Vt7vd6e/h9Lt7SiJUoEX0l4Dzc7P5llKyhqSi1ycSf1Hg==", + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-1.1.4.tgz", + "integrity": "sha512-JIvy2HjRInE+TXOmIGN5LCmeO0hkFZx5f9FZ7kiN+D+YTcc8pptsiLiuHsvwxwC7VVKmJ2ExHUgNlAiV7vQM9g==", "dev": true }, "node_modules/@types/d3-time-format": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-4.0.0.tgz", - "integrity": "sha512-yjfBUe6DJBsDin2BMIulhSHmr5qNR5Pxs17+oW4DoVPyVIXZ+m6bs7j1UVKP08Emv6jRmYrYqxYzO63mQxy1rw==", + "version": "2.3.4", + "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-2.3.4.tgz", + "integrity": "sha512-xdDXbpVO74EvadI3UDxjxTdR6QIxm1FKzEA/+F8tL4GWWUg/hgvBqf6chql64U5A9ZUGWo7pEu4eNlyLwbKdhg==", "dev": true }, "node_modules/@types/d3-timer": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.0.tgz", - "integrity": "sha512-HNB/9GHqu7Fo8AQiugyJbv6ZxYz58wef0esl4Mv828w1ZKpAshw/uFWVDUcIB9KKFeFKoxS3cHY07FFgtTRZ1g==", + "version": "1.0.12", + "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-1.0.12.tgz", + "integrity": "sha512-Tv9tkA4y3UvGQnrHyYAQhf5x/297FuYwotS4UW2TpwLblvRahbyL8r9HFYTJLPfPRqS63hwlqRItjKGmKtJxNg==", "dev": true }, "node_modules/@types/d3-transition": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.2.tgz", - "integrity": "sha512-jo5o/Rf+/u6uerJ/963Dc39NI16FQzqwOc54bwvksGAdVfvDrqDpVeq95bEvPtBwLCVZutAEyAtmSyEMxN7vxQ==", + "version": "1.3.5", + "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-1.3.5.tgz", + "integrity": "sha512-gVj9AXXkoj0yKr1jsPJFkKoYTEmSdaYh8W7XBeRIhcspFX9b3MSwLxTerVHeEPXer9kYLvZfAINk8HcjWhwZSQ==", "dev": true, "dependencies": { - "@types/d3-selection": "*" + "@types/d3-selection": "^1" } }, + "node_modules/@types/d3-voronoi": { + "version": "1.1.12", + "resolved": "https://registry.npmjs.org/@types/d3-voronoi/-/d3-voronoi-1.1.12.tgz", + "integrity": "sha512-DauBl25PKZZ0WVJr42a6CNvI6efsdzofl9sajqZr2Gf5Gu733WkDdUGiPkUHXiUvYGzNNlFQde2wdZdfQPG+yw==", + "dev": true + }, "node_modules/@types/d3-zoom": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.1.tgz", - "integrity": "sha512-7s5L9TjfqIYQmQQEUcpMAcBOahem7TRoSO/+Gkz02GbMVuULiZzjF2BOdw291dbO2aNon4m2OdFsRGaCq2caLQ==", + "version": "1.8.7", + "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-1.8.7.tgz", + "integrity": "sha512-HJWci3jXwFIuFKDqGn5PmuwrhZvuFdrnUmtSKCLXFAWyf2lAIUKMKh1/lHOkWBl/f4KVupGricJiqkQy+cVTog==", "dev": true, "dependencies": { - "@types/d3-interpolate": "*", - "@types/d3-selection": "*" + "@types/d3-interpolate": "^1", + "@types/d3-selection": "^1" } }, "node_modules/@types/detect-port": { @@ -11016,9 +11018,9 @@ } }, "node_modules/@types/geojson": { - "version": "7946.0.10", - "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.10.tgz", - "integrity": "sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==", + "version": "7946.0.14", + "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.14.tgz", + "integrity": "sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg==", "dev": true }, "node_modules/@types/glob": { @@ -35105,198 +35107,194 @@ } }, "@types/d3": { - "version": "7.4.0", - "resolved": "https://registry.npmjs.org/@types/d3/-/d3-7.4.0.tgz", - "integrity": "sha512-jIfNVK0ZlxcuRDKtRS/SypEyOQ6UHaFQBKv032X45VvxSJ6Yi5G9behy9h6tNTHTDGh5Vq+KbmBjUWLgY4meCA==", - "dev": true, - "requires": { - "@types/d3-array": "*", - "@types/d3-axis": "*", - "@types/d3-brush": "*", - "@types/d3-chord": "*", - "@types/d3-color": "*", - "@types/d3-contour": "*", - "@types/d3-delaunay": "*", - "@types/d3-dispatch": "*", - "@types/d3-drag": "*", - "@types/d3-dsv": "*", - "@types/d3-ease": "*", - "@types/d3-fetch": "*", - "@types/d3-force": "*", - "@types/d3-format": "*", - "@types/d3-geo": "*", - "@types/d3-hierarchy": "*", - "@types/d3-interpolate": "*", - "@types/d3-path": "*", - "@types/d3-polygon": "*", - "@types/d3-quadtree": "*", - "@types/d3-random": "*", - "@types/d3-scale": "*", - "@types/d3-scale-chromatic": "*", - "@types/d3-selection": "*", - "@types/d3-shape": "*", - "@types/d3-time": "*", - "@types/d3-time-format": "*", - "@types/d3-timer": "*", - "@types/d3-transition": "*", - "@types/d3-zoom": "*" + "version": "4.13.15", + "resolved": "https://registry.npmjs.org/@types/d3/-/d3-4.13.15.tgz", + "integrity": "sha512-D1yRBsDCC8BBUHfl7DHfEXAX1+RkwdmrwTSMB+dhCPuzIyj4dc3b+fkKnvMWj7tqx3YeoM/QsZnZ13IkkbhTUw==", + "dev": true, + "requires": { + "@types/d3-array": "^1", + "@types/d3-axis": "^1", + "@types/d3-brush": "^1", + "@types/d3-chord": "^1", + "@types/d3-collection": "*", + "@types/d3-color": "^1", + "@types/d3-dispatch": "^1", + "@types/d3-drag": "^1", + "@types/d3-dsv": "^1", + "@types/d3-ease": "^1", + "@types/d3-force": "^1", + "@types/d3-format": "^1", + "@types/d3-geo": "^1", + "@types/d3-hierarchy": "^1", + "@types/d3-interpolate": "^1", + "@types/d3-path": "^1", + "@types/d3-polygon": "^1", + "@types/d3-quadtree": "^1", + "@types/d3-queue": "*", + "@types/d3-random": "^1", + "@types/d3-request": "*", + "@types/d3-scale": "^1", + "@types/d3-selection": "^1", + "@types/d3-shape": "^1", + "@types/d3-time": "^1", + "@types/d3-time-format": "^2", + "@types/d3-timer": "^1", + "@types/d3-transition": "^1", + "@types/d3-voronoi": "*", + "@types/d3-zoom": "^1" } }, "@types/d3-array": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.0.3.tgz", - "integrity": "sha512-Reoy+pKnvsksN0lQUlcH6dOGjRZ/3WRwXR//m+/8lt1BXeI4xyaUZoqULNjyXXRuh0Mj4LNpkCvhUpQlY3X5xQ==", + "version": "1.2.12", + "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-1.2.12.tgz", + "integrity": "sha512-zIq9wCg/JO7MGC6vq3HRDaVYkqgSPIDjpo3JhAQxl7PHYVPA5D9SMiBfjW/ZoAvPd2a+rkovqBg0nS0QOChsJQ==", "dev": true }, "@types/d3-axis": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-3.0.1.tgz", - "integrity": "sha512-zji/iIbdd49g9WN0aIsGcwcTBUkgLsCSwB+uH+LPVDAiKWENMtI3cJEWt+7/YYwelMoZmbBfzA3qCdrZ2XFNnw==", + "version": "1.0.19", + "resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-1.0.19.tgz", + "integrity": "sha512-rXxE2jJYv6kar/6YWS8rM0weY+jjvnJvBxHKrIUqt3Yzomrfbf5tncpKG6jq6Aaw6TZyBcb1bxEWc0zGzcmbiw==", "dev": true, "requires": { - "@types/d3-selection": "*" + "@types/d3-selection": "^1" } }, "@types/d3-brush": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/@types/d3-brush/-/d3-brush-3.0.1.tgz", - "integrity": "sha512-B532DozsiTuQMHu2YChdZU0qsFJSio3Q6jmBYGYNp3gMDzBmuFFgPt9qKA4VYuLZMp4qc6eX7IUFUEsvHiXZAw==", + "version": "1.1.8", + "resolved": "https://registry.npmjs.org/@types/d3-brush/-/d3-brush-1.1.8.tgz", + "integrity": "sha512-tPVjYAjJt02fgazF9yiX/309sj6qhIiIopLuHhP4FFFq9VKqu9NQBeCK3ger0RHVZGs9RKaSBUWyPUzii5biGQ==", "dev": true, "requires": { - "@types/d3-selection": "*" + "@types/d3-selection": "^1" } }, "@types/d3-chord": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/@types/d3-chord/-/d3-chord-3.0.1.tgz", - "integrity": "sha512-eQfcxIHrg7V++W8Qxn6QkqBNBokyhdWSAS73AbkbMzvLQmVVBviknoz2SRS/ZJdIOmhcmmdCRE/NFOm28Z1AMw==", + "version": "1.0.14", + "resolved": "https://registry.npmjs.org/@types/d3-chord/-/d3-chord-1.0.14.tgz", + "integrity": "sha512-W9rCIbSAhwtmydW5iGg9dwTQIi3SGBOh68/T3ke3PyOgejuSLozmtAMaWNViGaGJCeuM4aFJHTUHQvMedl4ugA==", "dev": true }, - "@types/d3-color": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.0.tgz", - "integrity": "sha512-HKuicPHJuvPgCD+np6Se9MQvS6OCbJmOjGvylzMJRlDwUXjKTTXs6Pwgk79O09Vj/ho3u1ofXnhFOaEWWPrlwA==", + "@types/d3-collection": { + "version": "1.0.13", + "resolved": "https://registry.npmjs.org/@types/d3-collection/-/d3-collection-1.0.13.tgz", + "integrity": "sha512-v0Rgw3IZebRyamcwVmtTDCZ8OmQcj4siaYjNc7wGMZT7PmdSHawGsCOQMxyLvZ7lWjfohYLK0oXtilMOMgfY8A==", "dev": true }, - "@types/d3-contour": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/@types/d3-contour/-/d3-contour-3.0.1.tgz", - "integrity": "sha512-C3zfBrhHZvrpAAK3YXqLWVAGo87A4SvJ83Q/zVJ8rFWJdKejUnDYaWZPkA8K84kb2vDA/g90LTQAz7etXcgoQQ==", - "dev": true, - "requires": { - "@types/d3-array": "*", - "@types/geojson": "*" - } - }, - "@types/d3-delaunay": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/@types/d3-delaunay/-/d3-delaunay-6.0.1.tgz", - "integrity": "sha512-tLxQ2sfT0p6sxdG75c6f/ekqxjyYR0+LwPrsO1mbC9YDBzPJhs2HbJJRrn8Ez1DBoHRo2yx7YEATI+8V1nGMnQ==", + "@types/d3-color": { + "version": "1.4.5", + "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-1.4.5.tgz", + "integrity": "sha512-5sNP3DmtSnSozxcjqmzQKsDOuVJXZkceo1KJScDc1982kk/TS9mTPc6lpli1gTu1MIBF1YWutpHpjucNWcIj5g==", "dev": true }, "@types/d3-dispatch": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/@types/d3-dispatch/-/d3-dispatch-3.0.1.tgz", - "integrity": "sha512-NhxMn3bAkqhjoxabVJWKryhnZXXYYVQxaBnbANu0O94+O/nX9qSjrA1P1jbAQJxJf+VC72TxDX/YJcKue5bRqw==", + "version": "1.0.12", + "resolved": "https://registry.npmjs.org/@types/d3-dispatch/-/d3-dispatch-1.0.12.tgz", + "integrity": "sha512-vrhleoVNhGJGx7GQZ4207lYGyMbW/yj/iJTSvLKyfAp8nXFF+19dnMpPN/nEVs6fudIsQc7ZelBFUMe3aJDmKw==", "dev": true }, "@types/d3-drag": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.1.tgz", - "integrity": "sha512-o1Va7bLwwk6h03+nSM8dpaGEYnoIG19P0lKqlic8Un36ymh9NSkNFX1yiXMKNMx8rJ0Kfnn2eovuFaL6Jvj0zA==", + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-1.2.8.tgz", + "integrity": "sha512-QM6H8E6r9/51BcE4NEluQ0f9dTECCTDEALJSQIWn183+Mtz/6KvEjOxW8VzKYSnhhL+qMljMKKA1WOUUf/4Qhw==", "dev": true, "requires": { - "@types/d3-selection": "*" + "@types/d3-selection": "^1" } }, "@types/d3-dsv": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@types/d3-dsv/-/d3-dsv-3.0.0.tgz", - "integrity": "sha512-o0/7RlMl9p5n6FQDptuJVMxDf/7EDEv2SYEO/CwdG2tr1hTfUVi0Iavkk2ax+VpaQ/1jVhpnj5rq1nj8vwhn2A==", + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/@types/d3-dsv/-/d3-dsv-1.2.8.tgz", + "integrity": "sha512-x1m1s0lVstZQ5/Kzp4bVIMee3fFuDm+hphVnvrYA7wU16XqwgbCBfeVvHYZzVQQIy4jyi3MEtgduLVuwIRCKLQ==", "dev": true }, "@types/d3-ease": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.0.tgz", - "integrity": "sha512-aMo4eaAOijJjA6uU+GIeW018dvy9+oH5Y2VPPzjjfxevvGQ/oRDs+tfYC9b50Q4BygRR8yE2QCLsrT0WtAVseA==", + "version": "1.0.13", + "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-1.0.13.tgz", + "integrity": "sha512-VAA4H8YNaNN0+UNIlpkwkLOj7xL5EGdyiQpdlAvOIRHckjGFCLK8eMoUd4+IMNEhQgweq0Yk/Dfzr70xhUo6hA==", "dev": true }, - "@types/d3-fetch": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/@types/d3-fetch/-/d3-fetch-3.0.1.tgz", - "integrity": "sha512-toZJNOwrOIqz7Oh6Q7l2zkaNfXkfR7mFSJvGvlD/Ciq/+SQ39d5gynHJZ/0fjt83ec3WL7+u3ssqIijQtBISsw==", - "dev": true, - "requires": { - "@types/d3-dsv": "*" - } - }, "@types/d3-force": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/@types/d3-force/-/d3-force-3.0.3.tgz", - "integrity": "sha512-z8GteGVfkWJMKsx6hwC3SiTSLspL98VNpmvLpEFJQpZPq6xpA1I8HNBDNSpukfK0Vb0l64zGFhzunLgEAcBWSA==", + "version": "1.2.7", + "resolved": "https://registry.npmjs.org/@types/d3-force/-/d3-force-1.2.7.tgz", + "integrity": "sha512-zySqZfnxn67RVEGWzpD9dQA0AbNIp4Rj0qGvAuUdUNfGLrwuGCbEGAGze5hEdNaHJKQT2gTqr6j+qAzncm11ew==", "dev": true }, "@types/d3-format": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-3.0.1.tgz", - "integrity": "sha512-5KY70ifCCzorkLuIkDe0Z9YTf9RR2CjBX1iaJG+rgM/cPP+sO+q9YdQ9WdhQcgPj1EQiJ2/0+yUkkziTG6Lubg==", + "version": "1.4.5", + "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-1.4.5.tgz", + "integrity": "sha512-mLxrC1MSWupOSncXN/HOlWUAAIffAEBaI4+PKy2uMPsKe4FNZlk7qrbTjmzJXITQQqBHivaks4Td18azgqnotA==", "dev": true }, "@types/d3-geo": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-3.0.2.tgz", - "integrity": "sha512-DbqK7MLYA8LpyHQfv6Klz0426bQEf7bRTvhMy44sNGVyZoWn//B0c+Qbeg8Osi2Obdc9BLLXYAKpyWege2/7LQ==", + "version": "1.12.7", + "resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-1.12.7.tgz", + "integrity": "sha512-QetZrWWjuMfCe0BHLjD+dOThlgk7YGZ2gj+yhFAbDN5TularNBEQiBs5/CIgX0+IBDjt7/fbkDd5V70J1LjjKA==", "dev": true, "requires": { "@types/geojson": "*" } }, "@types/d3-hierarchy": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-3.1.0.tgz", - "integrity": "sha512-g+sey7qrCa3UbsQlMZZBOHROkFqx7KZKvUpRzI/tAp/8erZWpYq7FgNKvYwebi2LaEiVs1klhUfd3WCThxmmWQ==", + "version": "1.1.11", + "resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-1.1.11.tgz", + "integrity": "sha512-lnQiU7jV+Gyk9oQYk0GGYccuexmQPTp08E0+4BidgFdiJivjEvf+esPSdZqCZ2C7UwTWejWpqetVaU8A+eX3FA==", "dev": true }, "@types/d3-interpolate": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.1.tgz", - "integrity": "sha512-jx5leotSeac3jr0RePOH1KdR9rISG91QIE4Q2PYTu4OymLTZfA3SrnURSLzKH48HmXVUru50b8nje4E79oQSQw==", + "version": "1.4.5", + "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-1.4.5.tgz", + "integrity": "sha512-k9L18hXXv7OvK4PqW1kSFYIzasGOvfhPUWmHFkoZ8/ci99EAmY4HoF6zMefrHl0SGV7XYc7Qq2MNh8dK3edg5A==", "dev": true, "requires": { - "@types/d3-color": "*" + "@types/d3-color": "^1" } }, "@types/d3-path": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.0.0.tgz", - "integrity": "sha512-0g/A+mZXgFkQxN3HniRDbXMN79K3CdTpLsevj+PXiTcb2hVyvkZUBg37StmgCQkaD84cUJ4uaDAWq7UJOQy2Tg==", + "version": "1.0.11", + "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-1.0.11.tgz", + "integrity": "sha512-4pQMp8ldf7UaB/gR8Fvvy69psNHkTpD/pVw3vmEi8iZAB9EPMBruB1JvHO4BIq9QkUUd2lV1F5YXpMNj7JPBpw==", "dev": true }, "@types/d3-polygon": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@types/d3-polygon/-/d3-polygon-3.0.0.tgz", - "integrity": "sha512-D49z4DyzTKXM0sGKVqiTDTYr+DHg/uxsiWDAkNrwXYuiZVd9o9wXZIo+YsHkifOiyBkmSWlEngHCQme54/hnHw==", + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/@types/d3-polygon/-/d3-polygon-1.0.10.tgz", + "integrity": "sha512-+hbHsFdCMs23vk9p/SpvIkHkCpl0vxkP2qWR2vEk0wRi0BXODWgB/6aHnfrz/BeQnk20XzZiQJIZ+11TGxuYMQ==", "dev": true }, "@types/d3-quadtree": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/@types/d3-quadtree/-/d3-quadtree-3.0.2.tgz", - "integrity": "sha512-QNcK8Jguvc8lU+4OfeNx+qnVy7c0VrDJ+CCVFS9srBo2GL9Y18CnIxBdTF3v38flrGy5s1YggcoAiu6s4fLQIw==", + "version": "1.0.13", + "resolved": "https://registry.npmjs.org/@types/d3-quadtree/-/d3-quadtree-1.0.13.tgz", + "integrity": "sha512-BAQD6gTHnXqmI7JRhXwM2pEYJJF27AT1f6zCC192BKAUhigzd5HZjdje5ufRXmYcUM/fr2IJ9KqVMeXaljmmOw==", + "dev": true + }, + "@types/d3-queue": { + "version": "3.0.10", + "resolved": "https://registry.npmjs.org/@types/d3-queue/-/d3-queue-3.0.10.tgz", + "integrity": "sha512-kYb7UeXKaOWJIkPx1Rx79+D/3wx69XXpkQ8+MWctAu4CUTdVnSOF/AKqC9bgf42sDuL1Fj0eeQSyU62HRqRHWg==", "dev": true }, "@types/d3-random": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/@types/d3-random/-/d3-random-3.0.1.tgz", - "integrity": "sha512-IIE6YTekGczpLYo/HehAy3JGF1ty7+usI97LqraNa8IiDur+L44d0VOjAvFQWJVdZOJHukUJw+ZdZBlgeUsHOQ==", + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/@types/d3-random/-/d3-random-1.1.5.tgz", + "integrity": "sha512-gB5CR+7xYMj56pt5zmSyDBjTNMEy96PdfUb2qBaAT9bmPcf4P/YHfhhTI5y8JoiqaSRLJY+3mqtaE9loBgB6Ng==", "dev": true }, + "@types/d3-request": { + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/@types/d3-request/-/d3-request-1.0.9.tgz", + "integrity": "sha512-gD2991YKzdQu5lJGhWHEjptxQvWRZKwZF3QdWqjnqrWfVd15e7/WuL6X2Pl/4sRyLKaXWbB2xuk1tSBPVLlNhg==", + "dev": true, + "requires": { + "@types/d3-dsv": "^1" + } + }, "@types/d3-scale": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.2.tgz", - "integrity": "sha512-Yk4htunhPAwN0XGlIwArRomOjdoBFXC3+kCxK2Ubg7I9shQlVSJy/pG/Ht5ASN+gdMIalpk8TJ5xV74jFsetLA==", + "version": "1.0.22", + "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-1.0.22.tgz", + "integrity": "sha512-9XHVg/pVr+4qbowUNKHYNouFCXQUQ0ZZr1ppGgh10DVUaEb6nKuyPj0May0mmTiLhuDEaa9di1t0Hmg6lYTSFw==", "dev": true, "requires": { - "@types/d3-time": "*" + "@types/d3-time": "^1" } }, "@types/d3-scale-chromatic": { @@ -35306,55 +35304,61 @@ "dev": true }, "@types/d3-selection": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.3.tgz", - "integrity": "sha512-Mw5cf6nlW1MlefpD9zrshZ+DAWL4IQ5LnWfRheW6xwsdaWOb6IRRu2H7XPAQcyXEx1D7XQWgdoKR83ui1/HlEA==", + "version": "1.4.6", + "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-1.4.6.tgz", + "integrity": "sha512-0MhJ/LzJe6/vQVxiYJnvNq5CD/MF6Qy0dLp4BEQ6Dz8oOaB0EMXfx1GGeBFSW+3VzgjaUrxK6uECDQj9VLa/Mg==", "dev": true }, "@types/d3-shape": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.0.tgz", - "integrity": "sha512-jYIYxFFA9vrJ8Hd4Se83YI6XF+gzDL1aC5DCsldai4XYYiVNdhtpGbA/GM6iyQ8ayhSp3a148LY34hy7A4TxZA==", + "version": "1.3.12", + "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-1.3.12.tgz", + "integrity": "sha512-8oMzcd4+poSLGgV0R1Q1rOlx/xdmozS4Xab7np0eamFFUYq71AU9pOCJEFnkXW2aI/oXdVYJzw6pssbSut7Z9Q==", "dev": true, "requires": { - "@types/d3-path": "*" + "@types/d3-path": "^1" } }, "@types/d3-time": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.0.tgz", - "integrity": "sha512-sZLCdHvBUcNby1cB6Fd3ZBrABbjz3v1Vm90nysCQ6Vt7vd6e/h9Lt7SiJUoEX0l4Dzc7P5llKyhqSi1ycSf1Hg==", + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-1.1.4.tgz", + "integrity": "sha512-JIvy2HjRInE+TXOmIGN5LCmeO0hkFZx5f9FZ7kiN+D+YTcc8pptsiLiuHsvwxwC7VVKmJ2ExHUgNlAiV7vQM9g==", "dev": true }, "@types/d3-time-format": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-4.0.0.tgz", - "integrity": "sha512-yjfBUe6DJBsDin2BMIulhSHmr5qNR5Pxs17+oW4DoVPyVIXZ+m6bs7j1UVKP08Emv6jRmYrYqxYzO63mQxy1rw==", + "version": "2.3.4", + "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-2.3.4.tgz", + "integrity": "sha512-xdDXbpVO74EvadI3UDxjxTdR6QIxm1FKzEA/+F8tL4GWWUg/hgvBqf6chql64U5A9ZUGWo7pEu4eNlyLwbKdhg==", "dev": true }, "@types/d3-timer": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.0.tgz", - "integrity": "sha512-HNB/9GHqu7Fo8AQiugyJbv6ZxYz58wef0esl4Mv828w1ZKpAshw/uFWVDUcIB9KKFeFKoxS3cHY07FFgtTRZ1g==", + "version": "1.0.12", + "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-1.0.12.tgz", + "integrity": "sha512-Tv9tkA4y3UvGQnrHyYAQhf5x/297FuYwotS4UW2TpwLblvRahbyL8r9HFYTJLPfPRqS63hwlqRItjKGmKtJxNg==", "dev": true }, "@types/d3-transition": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.2.tgz", - "integrity": "sha512-jo5o/Rf+/u6uerJ/963Dc39NI16FQzqwOc54bwvksGAdVfvDrqDpVeq95bEvPtBwLCVZutAEyAtmSyEMxN7vxQ==", + "version": "1.3.5", + "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-1.3.5.tgz", + "integrity": "sha512-gVj9AXXkoj0yKr1jsPJFkKoYTEmSdaYh8W7XBeRIhcspFX9b3MSwLxTerVHeEPXer9kYLvZfAINk8HcjWhwZSQ==", "dev": true, "requires": { - "@types/d3-selection": "*" + "@types/d3-selection": "^1" } }, + "@types/d3-voronoi": { + "version": "1.1.12", + "resolved": "https://registry.npmjs.org/@types/d3-voronoi/-/d3-voronoi-1.1.12.tgz", + "integrity": "sha512-DauBl25PKZZ0WVJr42a6CNvI6efsdzofl9sajqZr2Gf5Gu733WkDdUGiPkUHXiUvYGzNNlFQde2wdZdfQPG+yw==", + "dev": true + }, "@types/d3-zoom": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.1.tgz", - "integrity": "sha512-7s5L9TjfqIYQmQQEUcpMAcBOahem7TRoSO/+Gkz02GbMVuULiZzjF2BOdw291dbO2aNon4m2OdFsRGaCq2caLQ==", + "version": "1.8.7", + "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-1.8.7.tgz", + "integrity": "sha512-HJWci3jXwFIuFKDqGn5PmuwrhZvuFdrnUmtSKCLXFAWyf2lAIUKMKh1/lHOkWBl/f4KVupGricJiqkQy+cVTog==", "dev": true, "requires": { - "@types/d3-interpolate": "*", - "@types/d3-selection": "*" + "@types/d3-interpolate": "^1", + "@types/d3-selection": "^1" } }, "@types/detect-port": { @@ -35465,9 +35469,9 @@ } }, "@types/geojson": { - "version": "7946.0.10", - "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.10.tgz", - "integrity": "sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==", + "version": "7946.0.14", + "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.14.tgz", + "integrity": "sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg==", "dev": true }, "@types/glob": { diff --git a/client/package.json b/client/package.json index d4e27615c..f1ed28695 100644 --- a/client/package.json +++ b/client/package.json @@ -127,7 +127,7 @@ "@storybook/react-webpack5": "^7.6.12", "@storybook/server-webpack5": "^7.6.12", "@storybook/test": "^7.6.12", - "@types/d3": "^7.0.0", + "@types/d3": "^4.0.0", "@types/d3-scale-chromatic": "^3.0.0", "@types/flatbuffers": "^1.10.0", "@types/is-number": "^7.0.1", diff --git a/client/src/components/app.tsx b/client/src/components/app.tsx index d7cf09f5f..8dd5a7af3 100644 --- a/client/src/components/app.tsx +++ b/client/src/components/app.tsx @@ -83,8 +83,6 @@ class App extends React.Component { diff --git a/client/src/components/graph/drawPointsRegl.ts b/client/src/components/graph/drawPointsRegl.ts index ad75e2115..b92c066bd 100644 --- a/client/src/components/graph/drawPointsRegl.ts +++ b/client/src/components/graph/drawPointsRegl.ts @@ -1,7 +1,18 @@ +import { Regl } from "regl"; import { glPointFlags, glPointSize } from "../../util/glHelpers"; -// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS. -export default function drawPointsRegl(regl: any) { +interface ReglProps { + position: Float32Array; + color: Float32Array; + flag: Float32Array; + distance: number; + projView: number[]; + nPoints: number; + minViewportDimension: number; + count: number; +} + +export default function drawPointsRegl(regl: Regl) { return regl({ vert: ` precision mediump float; @@ -53,19 +64,21 @@ export default function drawPointsRegl(regl: any) { }`, attributes: { - position: regl.prop("position"), - color: regl.prop("color"), - flag: regl.prop("flag"), + position: regl.prop("position"), + color: regl.prop("color"), + flag: regl.prop("flag"), }, uniforms: { - distance: regl.prop("distance"), - projView: regl.prop("projView"), - nPoints: regl.prop("nPoints"), - minViewportDimension: regl.prop("minViewportDimension"), + distance: regl.prop("distance"), + projView: regl.prop("projView"), + nPoints: regl.prop("nPoints"), + minViewportDimension: regl.prop( + "minViewportDimension" + ), }, - count: regl.prop("count"), + count: regl.prop("count"), primitive: "points", diff --git a/client/src/components/graph/graph.tsx b/client/src/components/graph/graph.tsx index 5d0a36a9a..8ad343826 100644 --- a/client/src/components/graph/graph.tsx +++ b/client/src/components/graph/graph.tsx @@ -1,13 +1,13 @@ -import React from "react"; +import React, { MouseEvent, MouseEventHandler } from "react"; import * as d3 from "d3"; import { connect, shallowEqual } from "react-redux"; -import { mat3, vec2 } from "gl-matrix"; -import _regl from "regl"; +import { ReadonlyMat3, mat3, vec2 } from "gl-matrix"; +import _regl, { DrawCommand, Regl } from "regl"; import memoize from "memoize-one"; import Async from "react-async"; -import setupSVGandBrushElements from "./setupSVGandBrush"; -import _camera from "../../util/camera"; +import { setupBrush, setupLasso } from "./setupSVGandBrush"; +import _camera, { Camera } from "../../util/camera"; import _drawPoints from "./drawPointsRegl"; import { createColorTable, @@ -26,6 +26,8 @@ import { flagHighlight, } from "../../util/glHelpers"; import { Dataframe } from "../../util/dataframe"; +import { RootState } from "../../reducers"; +import { LassoFunctionWithAttributes } from "./setupLasso"; /* Simple 2D transforms control all point painting. There are three: @@ -34,8 +36,7 @@ Simple 2D transforms control all point painting. There are three: * camera - apply a 2D camera transformation (pan, zoom) * projection - apply any transformation required for screen size and layout */ -// eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS. -function createProjectionTF(viewportWidth: any, viewportHeight: any) { +function createProjectionTF(viewportWidth: number, viewportHeight: number) { /* the projection transform accounts for the screen size & other layout */ @@ -45,16 +46,15 @@ function createProjectionTF(viewportWidth: any, viewportHeight: any) { const heightMinusGutter = viewportHeight - topGutterSizePx - bottomGutterSizePx; const minDim = Math.min(viewportWidth, heightMinusGutter); - const aspectScale = [ + const aspectScale = new Float32Array([ (fractionToUse * minDim) / viewportWidth, (fractionToUse * minDim) / viewportHeight, - ]; + ]); const m = mat3.create(); mat3.fromTranslation(m, [ 0, (bottomGutterSizePx - topGutterSizePx) / viewportHeight / aspectScale[1], ]); - // @ts-expect-error ts-migrate(2345) FIXME: Argument of type 'number[]' is not assignable to p... Remove this comment to see the full error message mat3.scale(m, m, aspectScale); return m; } @@ -69,34 +69,52 @@ function createModelTF() { return m; } -// eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS. -type GraphState = any; +type GraphState = { + regl: Regl | null; + drawPoints: DrawCommand | null; + colorBuffer: _regl.Buffer | null; + pointBuffer: _regl.Buffer | null; + flagBuffer: _regl.Buffer | null; + camera: Camera | null; + projectionTF: mat3; + tool: LassoFunctionWithAttributes | d3.BrushBehavior | null; + container: d3.Selection | null; + // used? + updateOverlay: boolean; + toolSVG: d3.Selection | null; + viewport: { width: number; height: number }; + layoutState: { + layoutDf: Dataframe | null; + layoutChoice: string | null; + }; + colorState: { + colors: string[] | null; + colorDf: Dataframe | null; + colorTable: any | null; + }; + pointDilationState: { + pointDilation: string | null; + pointDilationDf: Dataframe | null; + }; + modelTF: ReadonlyMat3; + modelInvTF: ReadonlyMat3; +}; +type GraphProps = Partial; // @ts-expect-error ts-migrate(1238) FIXME: Unable to resolve signature of class decorator whe... Remove this comment to see the full error message -@connect((state) => ({ - // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS. - annoMatrix: (state as any).annoMatrix, - // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS. - crossfilter: (state as any).obsCrossfilter, - // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS. - selectionTool: (state as any).graphSelection.tool, - // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS. - currentSelection: (state as any).graphSelection.selection, - // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS. - layoutChoice: (state as any).layoutChoice, - // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS. - graphInteractionMode: (state as any).controls.graphInteractionMode, - // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS. - colors: (state as any).colors, - // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS. - pointDilation: (state as any).pointDilation, - // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS. - genesets: (state as any).genesets.genesets, +@connect((state: RootState) => ({ + annoMatrix: state.annoMatrix, + crossfilter: state.obsCrossfilter, + selectionTool: state.graphSelection.tool, + currentSelection: state.graphSelection.selection, + layoutChoice: state.layoutChoice, + graphInteractionMode: state.controls.graphInteractionMode, + colors: state.colors, + pointDilation: state.pointDilation, + genesets: state.genesets.genesets, })) -// eslint-disable-next-line @typescript-eslint/ban-types --- FIXME: disabled temporarily on migrate to TS. -class Graph extends React.Component<{}, GraphState> { - // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS. - static createReglState(canvas: any) { +class Graph extends React.Component { + static createReglState(canvas: HTMLCanvasElement) { /* Must be created for each canvas */ @@ -105,12 +123,9 @@ class Graph extends React.Component<{}, GraphState> { const regl = _regl(canvas); const drawPoints = _drawPoints(regl); // preallocate webgl buffers - // @ts-expect-error ts-migrate(2554) FIXME: Expected 1 arguments, but got 0. - const pointBuffer = regl.buffer(); - // @ts-expect-error ts-migrate(2554) FIXME: Expected 1 arguments, but got 0. - const colorBuffer = regl.buffer(); - // @ts-expect-error ts-migrate(2554) FIXME: Expected 1 arguments, but got 0. - const flagBuffer = regl.buffer(); + const pointBuffer = regl.buffer(0); + const colorBuffer = regl.buffer(0); + const flagBuffer = regl.buffer(0); return { camera, regl, @@ -121,18 +136,15 @@ class Graph extends React.Component<{}, GraphState> { }; } - // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS. - static watchAsync(props: any, prevProps: any) { + static watchAsync(props: GraphProps, prevProps: GraphProps) { return !shallowEqual(props.watchProps, prevProps.watchProps); } private graphRef = React.createRef(); - // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS. - cachedAsyncProps: any; + cachedAsyncProps: GraphProps | null; - // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS. - reglCanvas: any; + reglCanvas: HTMLCanvasElement | null; computePointPositions = memoize((X, Y, modelTF) => { /* @@ -221,8 +233,7 @@ class Graph extends React.Component<{}, GraphState> { } ); - // eslint-disable-next-line @typescript-eslint/ban-types --- FIXME: disabled temporarily on migrate to TS. - constructor(props: {}) { + constructor(props: GraphProps) { super(props); const viewport = this.getViewportDimensions(); this.reglCanvas = null; @@ -236,8 +247,7 @@ class Graph extends React.Component<{}, GraphState> { // projection camera: null, modelTF, - // @ts-expect-error ts-migrate(2345) FIXME: Argument of type '[]' is not assignable to paramet... Remove this comment to see the full error message - modelInvTF: mat3.invert([], modelTF), + modelInvTF: mat3.invert(mat3.create(), modelTF), projectionTF: createProjectionTF(viewport.width, viewport.height), // regl state regl: null, @@ -260,6 +270,7 @@ class Graph extends React.Component<{}, GraphState> { pointDilation: null, pointDilationDf: null, }, + updateOverlay: false, }; } @@ -273,27 +284,18 @@ class Graph extends React.Component<{}, GraphState> { } } - // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/ban-types --- FIXME: disabled temporarily on migrate to TS. - componentDidUpdate(prevProps: {}, prevState: GraphState) { - const { - // @ts-expect-error ts-migrate(2339) FIXME: Property 'selectionTool' does not exist on type 'R... Remove this comment to see the full error message - selectionTool, - // @ts-expect-error ts-migrate(2339) FIXME: Property 'currentSelection' does not exist on type 'R... Remove this comment to see the full error message - currentSelection, - // @ts-expect-error ts-migrate(2339) FIXME: Property 'graphInteractionMode' does not exist on type 'R... Remove this comment to see the full error message - graphInteractionMode, - } = this.props; + componentDidUpdate(prevProps: GraphProps, prevState: GraphState) { + const { selectionTool, currentSelection, graphInteractionMode } = + this.props; const { toolSVG, viewport } = this.state; const hasResized = prevState.viewport.height !== viewport.height || prevState.viewport.width !== viewport.width; - let stateChanges = {}; + let stateChanges: Partial = {}; if ( (viewport.height && viewport.width && !toolSVG) || // first time init hasResized || // window size has changed we want to recreate all SVGs - // @ts-expect-error ts-migrate(2339) FIXME: Property 'selectionTool' does not exist on type '{... Remove this comment to see the full error message selectionTool !== prevProps.selectionTool || // change of selection tool - // @ts-expect-error ts-migrate(2339) FIXME: Property 'graphInteractionMode' does not exist on ... Remove this comment to see the full error message prevProps.graphInteractionMode !== graphInteractionMode // lasso/zoom mode is switched ) { stateChanges = { @@ -306,28 +308,21 @@ class Graph extends React.Component<{}, GraphState> { tool correctly reflects the underlying selection. */ if ( - // @ts-expect-error ts-migrate(2339) FIXME: Property 'currentSelection' does not exist on type... Remove this comment to see the full error message currentSelection !== prevProps.currentSelection || - // @ts-expect-error ts-migrate(2339) FIXME: Property 'graphInteractionMode' does not exist on ... Remove this comment to see the full error message graphInteractionMode !== prevProps.graphInteractionMode || - // @ts-expect-error ts-migrate(2339) FIXME: Property 'toolSVG' does not exist on type '{}'. stateChanges.toolSVG ) { const { tool, container } = this.state; this.selectionToolUpdate( - // @ts-expect-error ts-migrate(2339) FIXME: Property 'tool' does not exist on type '{}'. - stateChanges.tool ? stateChanges.tool : tool, - // @ts-expect-error ts-migrate(2339) FIXME: Property 'container' does not exist on type '{}'. - stateChanges.container ? stateChanges.container : container + stateChanges.tool ? stateChanges.tool : tool!, + stateChanges.container ? stateChanges.container : container! ); } if (Object.keys(stateChanges).length > 0) { - // eslint-disable-next-line react/no-did-update-set-state --- Preventing update loop via stateChanges and diff checks - this.setState(stateChanges); + this.setState((state) => ({ ...state, ...stateChanges })); } } - // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types --- FIXME: disabled temporarily on migrate to TS. componentWillUnmount() { window.removeEventListener("resize", this.handleResize); if (this.graphRef.current) { @@ -335,33 +330,36 @@ class Graph extends React.Component<{}, GraphState> { } } - // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types --- FIXME: disabled temporarily on migrate to TS. handleResize = () => { - const { state } = this.state; const viewport = this.getViewportDimensions(); const projectionTF = createProjectionTF(viewport.width, viewport.height); - this.setState({ + this.setState((state) => ({ ...state, viewport, projectionTF, - }); + })); }; - // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS. - handleCanvasEvent = (e: any) => { + handleCanvasEvent: MouseEventHandler = (e) => { const { camera, projectionTF } = this.state; if (e.type !== "wheel") e.preventDefault(); - if (camera.handleEvent(e, projectionTF)) { + if ( + camera!.handleEvent( + e as unknown as MouseEvent< + HTMLCanvasElement, + MouseEvent + >, + projectionTF + ) + ) { this.renderCanvas(); - // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS. - this.setState((state: any) => ({ + this.setState((state: GraphState) => ({ ...state, updateOverlay: !state.updateOverlay, })); } }; - // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types --- FIXME: disabled temporarily on migrate to TS. handleBrushDragAction() { /* event describing brush position: @@ -370,12 +368,15 @@ class Graph extends React.Component<{}, GraphState> { | | |-------@ */ - // ignore programatically generated events - // @ts-expect-error ts-migrate(2339) FIXME: Property 'event' does not exist on type 'typeof im... Remove this comment to see the full error message - if (d3.event.sourceEvent === null || !d3.event.selection) return; - // @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message + // ignore programmatically generated events + const { camera } = this.state; + if ( + d3.event.sourceEvent === null || + !d3.event.selection || + !camera // ignore if camera not initialized + ) + return; const { dispatch, layoutChoice } = this.props; - // @ts-expect-error ts-migrate(2339) FIXME: Property 'event' does not exist on type 'typeof im... Remove this comment to see the full error message const s = d3.event.selection; const northwest = this.mapScreenToPoint(s[0]); const southeast = this.mapScreenToPoint(s[1]); @@ -393,28 +394,22 @@ class Graph extends React.Component<{}, GraphState> { ); } - // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types --- FIXME: disabled temporarily on migrate to TS. handleBrushStartAction() { - // Ignore programatically generated events. - // @ts-expect-error ts-migrate(2339) FIXME: Property 'event' does not exist on type 'typeof im... Remove this comment to see the full error message + // Ignore programmatically generated events. if (!d3.event.sourceEvent) return; - // @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message const { dispatch } = this.props; dispatch(actions.graphBrushStartAction()); } - // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types --- FIXME: disabled temporarily on migrate to TS. handleBrushEndAction() { - // Ignore programatically generated events. - // @ts-expect-error ts-migrate(2339) FIXME: Property 'event' does not exist on type 'typeof im... Remove this comment to see the full error message - if (!d3.event.sourceEvent) return; + const { camera } = this.state; + // Ignore programmatically generated events. Also abort if camera not initialized. + if (!d3.event.sourceEvent || !camera) return; /* coordinates will be included if selection made, null if selection cleared. */ - // @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message const { dispatch, layoutChoice } = this.props; - // @ts-expect-error ts-migrate(2339) FIXME: Property 'event' does not exist on type 'typeof im... Remove this comment to see the full error message const s = d3.event.selection; if (s) { const northwest = this.mapScreenToPoint(s[0]); @@ -436,26 +431,19 @@ class Graph extends React.Component<{}, GraphState> { } } - // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types --- FIXME: disabled temporarily on migrate to TS. handleBrushDeselectAction() { - // @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message const { dispatch, layoutChoice } = this.props; dispatch(actions.graphBrushDeselectAction(layoutChoice.current)); } - // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types --- FIXME: disabled temporarily on migrate to TS. handleLassoStart() { - // @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message - const { dispatch, layoutChoice } = this.props; - // @ts-expect-error ts-migrate(2554) FIXME: Expected 0 arguments, but got 1. - dispatch(actions.graphLassoStartAction(layoutChoice.current)); + const { dispatch } = this.props; + dispatch(actions.graphLassoStartAction()); } // when a lasso is completed, filter to the points within the lasso polygon - // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS. - handleLassoEnd(polygon: any) { + handleLassoEnd(polygon: [number, number][]) { const minimumPolygonArea = 10; - // @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message const { dispatch, layoutChoice } = this.props; if ( polygon.length < 3 || @@ -467,52 +455,34 @@ class Graph extends React.Component<{}, GraphState> { dispatch( actions.graphLassoEndAction( layoutChoice.current, - // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS. - polygon.map((xy: any) => this.mapScreenToPoint(xy)) + polygon.map((xy) => this.mapScreenToPoint(xy)) ) ); } } - // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types --- FIXME: disabled temporarily on migrate to TS. handleLassoCancel() { - // @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message const { dispatch, layoutChoice } = this.props; dispatch(actions.graphLassoCancelAction(layoutChoice.current)); } - // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types --- FIXME: disabled temporarily on migrate to TS. handleLassoDeselectAction() { - // @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message const { dispatch, layoutChoice } = this.props; dispatch(actions.graphLassoDeselectAction(layoutChoice.current)); } - // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types --- FIXME: disabled temporarily on migrate to TS. handleDeselectAction() { - // @ts-expect-error ts-migrate(2339) FIXME: Property 'selectionTool' does not exist on type 'R... Remove this comment to see the full error message const { selectionTool } = this.props; if (selectionTool === "brush") this.handleBrushDeselectAction(); if (selectionTool === "lasso") this.handleLassoDeselectAction(); } - // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS. - handleOpacityRangeChange(e: any) { - // @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message - const { dispatch } = this.props; - dispatch({ - type: "change opacity deselected cells in 2d graph background", - data: e.target.value, - }); - } - disableScroll = (event: WheelEvent) => { // disables browser scrolling behavior when hovering over the graph event.preventDefault(); }; - // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS. - setReglCanvas = (canvas: any) => { + setReglCanvas = (canvas: HTMLCanvasElement) => { // Ignore null canvas on unmount if (!canvas) { return; @@ -523,9 +493,7 @@ class Graph extends React.Component<{}, GraphState> { }); }; - // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types --- FIXME: disabled temporarily on migrate to TS. getViewportDimensions = () => { - // @ts-expect-error ts-migrate(2339) FIXME: Property 'viewportRef' does not exist on type 'Rea... Remove this comment to see the full error message const { viewportRef } = this.props; return { height: viewportRef.clientHeight, @@ -533,13 +501,11 @@ class Graph extends React.Component<{}, GraphState> { }; }; - // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types --- FIXME: disabled temporarily on migrate to TS. createToolSVG = () => { /* Called from componentDidUpdate. Create the tool SVG, and return any state changes that should be passed to setState(). */ - // @ts-expect-error ts-migrate(2339) FIXME: Property 'selectionTool' does not exist on type 'R... Remove this comment to see the full error message const { selectionTool, graphInteractionMode } = this.props; const { viewport } = this.state; /* clear out whatever was on the div, even if nothing, but usually the brushes etc */ @@ -557,32 +523,37 @@ class Graph extends React.Component<{}, GraphState> { let handleDrag; let handleEnd; let handleCancel; + let ret; + if (selectionTool === "brush") { handleStart = this.handleBrushStartAction.bind(this); handleDrag = this.handleBrushDragAction.bind(this); handleEnd = this.handleBrushEndAction.bind(this); + ret = setupBrush({ + selectionToolType: selectionTool, + handleStartAction: handleStart, + handleDragAction: handleDrag, + handleEndAction: handleEnd, + handleCancelAction: handleCancel, + viewport, + }); } else { handleStart = this.handleLassoStart.bind(this); handleEnd = this.handleLassoEnd.bind(this); handleCancel = this.handleLassoCancel.bind(this); + ret = setupLasso({ + selectionToolType: selectionTool, + handleStartAction: handleStart, + handleEndAction: handleEnd, + handleCancelAction: handleCancel, + }); } - const { - svg: newToolSVG, - tool, - container, - } = setupSVGandBrushElements( - selectionTool, - handleStart, - handleDrag, - handleEnd, - handleCancel, - viewport - ); + if (!ret) return {}; + const { svg: newToolSVG, container, tool } = ret; return { toolSVG: newToolSVG, tool, container }; }; - // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS. - fetchAsyncProps = async (props: any) => { + fetchAsyncProps = async (props: GraphProps) => { const { annoMatrix, colors: colorsProp, @@ -627,16 +598,11 @@ class Graph extends React.Component<{}, GraphState> { }; }; - // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types --- FIXME: disabled temporarily on migrate to TS. async fetchData( - // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS. - annoMatrix: any, - // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS. - layoutChoice: any, - // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS. - colors: any, - // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS. - pointDilation: any + annoMatrix: RootState["annoMatrix"], + layoutChoice: RootState["layoutChoice"], + colors: RootState["colors"], + pointDilation: RootState["pointDilation"] ): Promise<[Dataframe, Dataframe | null, Dataframe | null]> { /* fetch all data needed. Includes: @@ -662,16 +628,18 @@ class Graph extends React.Component<{}, GraphState> { return Promise.all(promises); } - // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS. - brushToolUpdate(tool: any, container: any) { + brushToolUpdate( + tool: d3.BrushBehavior, + container: d3.Selection + ) { /* this is called from componentDidUpdate(), so be very careful using anything from this.state, which may be updated asynchronously. */ - // @ts-expect-error ts-migrate(2339) FIXME: Property 'currentSelection' does not exist on type... Remove this comment to see the full error message const { currentSelection } = this.props; - if (container) { - const toolCurrentSelection = d3.brushSelection(container.node()); + const node = container.node(); + if (node) { + const toolCurrentSelection = d3.brushSelection(node); if (currentSelection.mode === "within-rect") { /* if there is a selection, make sure the brush tool matches @@ -690,8 +658,8 @@ class Graph extends React.Component<{}, GraphState> { for (let x = 0; x < 2; x += 1) { for (let y = 0; y < 2; y += 1) { delta += Math.abs( - // @ts-expect-error ts-migrate(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message - screenCoords[x][y] - toolCurrentSelection[x][y] + screenCoords[x][y] - + (toolCurrentSelection as [number, number][])[x][y] ); } } @@ -706,19 +674,16 @@ class Graph extends React.Component<{}, GraphState> { } } - // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS. - lassoToolUpdate(tool: any) { + lassoToolUpdate(tool: LassoFunctionWithAttributes) { /* this is called from componentDidUpdate(), so be very careful using anything from this.state, which may be updated asynchronously. */ - // @ts-expect-error ts-migrate(2339) FIXME: Property 'currentSelection' does not exist on type... Remove this comment to see the full error message const { currentSelection } = this.props; if (currentSelection.mode === "within-polygon") { /* if there is a current selection, make sure the lasso tool matches */ - // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS. const polygon = currentSelection.polygon.map((p: any) => this.mapPointToScreen(p) ); @@ -728,21 +693,21 @@ class Graph extends React.Component<{}, GraphState> { } } - // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS. - selectionToolUpdate(tool: any, container: any) { + selectionToolUpdate( + tool: GraphState["tool"], + container: d3.Selection + ) { /* this is called from componentDidUpdate(), so be very careful using anything from this.state, which may be updated asynchronously. */ - // @ts-expect-error ts-migrate(2339) FIXME: Property 'selectionTool' does not exist on type 'R... Remove this comment to see the full error message const { selectionTool } = this.props; switch (selectionTool) { case "brush": - this.brushToolUpdate(tool, container); + this.brushToolUpdate(tool as d3.BrushBehavior, container); break; case "lasso": - // @ts-expect-error ts-migrate(2554) FIXME: Expected 1 arguments, but got 2. - this.lassoToolUpdate(tool, container); + this.lassoToolUpdate(tool as LassoFunctionWithAttributes); break; default: /* punt? */ @@ -750,14 +715,13 @@ class Graph extends React.Component<{}, GraphState> { } } - // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS. - mapScreenToPoint(pin: any) { + mapScreenToPoint(pin: [number, number]) { /* Map an XY coordinates from screen domain to cell/point range, accounting for current pan/zoom camera. */ const { camera, projectionTF, modelInvTF, viewport } = this.state; - const cameraInvTF = camera.invView(); + const cameraInvTF = camera!.invView(); /* screen -> gl */ const x = (2 * pin[0]) / viewport.width - 1; const y = 2 * (1 - pin[1] / viewport.height) - 1; @@ -769,14 +733,13 @@ class Graph extends React.Component<{}, GraphState> { return xy; } - // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS. - mapPointToScreen(xyCell: any) { + mapPointToScreen(xyCell: [number, number]) { /* Map an XY coordinate from cell/point domain to screen range. Inverse of mapScreenToPoint() */ const { camera, projectionTF, modelTF, viewport } = this.state; - const cameraTF = camera.view(); + const cameraTF = camera!.view(); const xy = vec2.transformMat3(vec2.create(), xyCell, modelTF); vec2.transformMat3(xy, xy, cameraTF); vec2.transformMat3(xy, xy, projectionTF); @@ -807,7 +770,6 @@ class Graph extends React.Component<{}, GraphState> { ); }); - // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS. updateReglAndRender(asyncProps: any, prevAsyncProps: any) { const { positions, colors, flags, height, width } = asyncProps; this.cachedAsyncProps = asyncProps; @@ -817,23 +779,24 @@ class Graph extends React.Component<{}, GraphState> { needToRenderCanvas = true; } if (positions !== prevAsyncProps?.positions) { - pointBuffer({ data: positions, dimension: 2 }); + // @ts-expect-error (seve): need to look into arg mismatch + pointBuffer!({ data: positions, dimension: 2 }); needToRenderCanvas = true; } if (colors !== prevAsyncProps?.colors) { - colorBuffer({ data: colors, dimension: 3 }); + // @ts-expect-error (seve): need to look into arg mismatch + colorBuffer!({ data: colors, dimension: 3 }); needToRenderCanvas = true; } if (flags !== prevAsyncProps?.flags) { - flagBuffer({ data: flags, dimension: 1 }); + // @ts-expect-error (seve): need to look into arg mismatch + flagBuffer!({ data: flags, dimension: 1 }); needToRenderCanvas = true; } if (needToRenderCanvas) this.renderCanvas(); } - // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS. updateColorTable(colors: any, colorDf: any) { - // @ts-expect-error ts-migrate(2339) FIXME: Property 'annoMatrix' does not exist on type 'Read... Remove this comment to see the full error message const { annoMatrix } = this.props; const { schema } = annoMatrix; /* update color table state */ @@ -856,46 +819,35 @@ class Graph extends React.Component<{}, GraphState> { ); } - // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS. createColorByQuery(colors: any) { - // @ts-expect-error ts-migrate(2339) FIXME: Property 'annoMatrix' does not exist on type 'Read... Remove this comment to see the full error message const { annoMatrix, genesets } = this.props; const { schema } = annoMatrix; const { colorMode, colorAccessor } = colors; return createColorQuery(colorMode, colorAccessor, schema, genesets); } - // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types --- FIXME: disabled temporarily on migrate to TS. renderPoints( - // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS. - regl: any, - // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS. - drawPoints: any, - // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS. - colorBuffer: any, - // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS. - pointBuffer: any, - // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS. - flagBuffer: any, - // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS. - camera: any, - // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS. - projectionTF: any + regl: GraphState["regl"], + drawPoints: GraphState["drawPoints"], + colorBuffer: GraphState["colorBuffer"], + pointBuffer: GraphState["pointBuffer"], + flagBuffer: GraphState["flagBuffer"], + camera: GraphState["camera"], + projectionTF: GraphState["projectionTF"] ) { - // @ts-expect-error ts-migrate(2339) FIXME: Property 'annoMatrix' does not exist on type 'Read... Remove this comment to see the full error message const { annoMatrix } = this.props; if (!this.reglCanvas || !annoMatrix) return; const { schema } = annoMatrix; - const cameraTF = camera.view(); + const cameraTF = camera!.view(); const projView = mat3.multiply(mat3.create(), projectionTF, cameraTF); const { width, height } = this.reglCanvas; - regl.poll(); - regl.clear({ + regl!.poll(); + regl!.clear({ depth: 1, color: [1, 1, 1, 1], }); - drawPoints({ - distance: camera.distance(), + drawPoints!({ + distance: camera!.distance(), color: colorBuffer, position: pointBuffer, flag: flagBuffer, @@ -904,23 +856,16 @@ class Graph extends React.Component<{}, GraphState> { nPoints: schema.dataframe.nObs, minViewportDimension: Math.min(width, height), }); - regl._gl.flush(); + regl!._gl.flush(); } - // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types --- FIXME: disabled temporarily on migrate to TS. render() { const { - // @ts-expect-error ts-migrate(2339) FIXME: Property 'graphInteractionMode' does not exist on ... Remove this comment to see the full error message graphInteractionMode, - // @ts-expect-error ts-migrate(2339) FIXME: Property 'annoMatrix' does not exist on ... Remove this comment to see the full error message annoMatrix, - // @ts-expect-error ts-migrate(2339) FIXME: Property 'colors' does not exist on ... Remove this comment to see the full error message colors, - // @ts-expect-error ts-migrate(2339) FIXME: Property 'layoutChoice' does not exist on ... Remove this comment to see the full error message layoutChoice, - // @ts-expect-error ts-migrate(2339) FIXME: Property 'pointDilation' does not exist on ... Remove this comment to see the full error message pointDilation, - // @ts-expect-error ts-migrate(2339) FIXME: Property 'crossfilter' does not exist on ... Remove this comment to see the full error message crossfilter, } = this.props; const { modelTF, projectionTF, camera, viewport, regl } = this.state; @@ -939,7 +884,7 @@ class Graph extends React.Component<{}, GraphState> { ref={this.graphRef} > { onDoubleClick={this.handleCanvasEvent} onWheel={this.handleCanvasEvent} /> - { }} > - {/* eslint-disable-next-line @typescript-eslint/no-use-before-define --- StillLoading used before defined */} { {(error) => ( - // eslint-disable-next-line @typescript-eslint/no-use-before-define --- ErrorLoading used before defined { } } -// eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS. const ErrorLoading = ({ displayName, error, width, height }: any) => { - console.log(error); // log to console as this is an unepected error + console.error(error); // log to console as this is an unexpected error return (
{ ); }; -// eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS. const StillLoading = ({ displayName, width, height }: any) => ( /* Render a busy/loading indicator diff --git a/client/src/components/graph/setupLasso.ts b/client/src/components/graph/setupLasso.ts index afbe3678f..385ad81d7 100644 --- a/client/src/components/graph/setupLasso.ts +++ b/client/src/components/graph/setupLasso.ts @@ -1,28 +1,36 @@ import * as d3 from "d3"; import { Colors } from "@blueprintjs/core"; -// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types --- FIXME: disabled temporarily on migrate to TS. +type LassoFunction = ( + svg: d3.Selection +) => void; + +export type LassoFunctionWithAttributes = LassoFunction & { + move: (polygon: [number, number][]) => void; + reset: () => void; + on: ( + type: string, + callback: (polygon: [number, number][]) => void | (() => void) + ) => LassoFunctionWithAttributes; +}; + const Lasso = () => { const dispatch = d3.dispatch("start", "end", "cancel"); - // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS. - const lasso = (svg: any) => { - // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS. - let lassoPolygon: any; - // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS. - let lassoPath: any; - // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS. - let closePath: any; - // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS. - let lassoInProgress: any; - - // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS. - const polygonToPath = (polygon: any) => - // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS. - `M${polygon.map((d: any) => d.join(",")).join("L")}`; - - // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS. - const distance = (pt1: any, pt2: any) => + // (seve): I really can't seem to correctly type this function with dynamic attributes + const lasso: LassoFunctionWithAttributes = (( + svg + ) => { + const svgNode = svg.node()!; + let lassoPolygon: [number, number][] | null; + let lassoPath: d3.Selection | null; + let closePath: d3.Selection | null; + let lassoInProgress: boolean; + + const polygonToPath = (polygon: number[][]) => + `M${polygon.map((d) => d.join(",")).join("L")}`; + + const distance = (pt1: [number, number], pt2: [number, number]) => Math.sqrt((pt2[0] - pt1[0]) ** 2 + (pt2[1] - pt1[1]) ** 2); // distance last point has to be to first point before it auto closes when mouse is released @@ -30,14 +38,13 @@ const Lasso = () => { const lassoPathColor = Colors.BLUE5; const handleDragStart = () => { - // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS. - lassoPolygon = [(d3 as any).mouse(svg.node())]; // current x y of mouse within element + const point = d3.mouse(svgNode); + lassoPolygon = [point]; // current x y of mouse within element if (lassoPath) { // If the existing path is in progress if (lassoInProgress) { // cancel the existing lasso - // eslint-disable-next-line @typescript-eslint/no-use-before-define --- handleCancel used before defined handleCancel(); // Don't continue with current drag start return; @@ -48,14 +55,12 @@ const Lasso = () => { // We're starting a new drag lassoInProgress = true; - // eslint-disable-next-line @typescript-eslint/no-use-before-define --- g used before defined lassoPath = g .append("path") .attr("data-testid", "lasso-element") .attr("fill-opacity", 0.1) .attr("stroke-dasharray", "3, 3"); - // eslint-disable-next-line @typescript-eslint/no-use-before-define --- g used before defined closePath = g .append("line") .attr("x2", lassoPolygon[0][0]) @@ -66,8 +71,8 @@ const Lasso = () => { }; const handleDrag = () => { - // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS. - const point = (d3 as any).mouse(svg.node()); + if (!(lassoPath && closePath && lassoPolygon)) return; + const point = d3.mouse(svgNode); lassoPolygon.push(point); lassoPath.attr("d", polygonToPath(lassoPolygon)); @@ -91,6 +96,7 @@ const Lasso = () => { }; const handleCancel = () => { + if (!(lassoPath && closePath && lassoPolygon)) return; lassoPath.remove(); closePath = closePath?.remove(); lassoPath = null; @@ -100,6 +106,7 @@ const Lasso = () => { }; const handleDragEnd = () => { + if (!(lassoPath && closePath && lassoPolygon)) return; // remove the close path closePath.remove(); closePath = null; @@ -122,23 +129,21 @@ const Lasso = () => { // append a with a rect const g = svg.append("g").attr("class", "lasso-group"); - const bbox = svg.node().getBoundingClientRect(); + const bbox = svgNode.getBoundingClientRect(); const area = g .append("rect") .attr("width", bbox.width) .attr("height", bbox.height) .attr("opacity", 0); - const drag = d3 - .drag() + .drag() .on("start", handleDragStart) .on("drag", handleDrag) .on("end", handleDragEnd); area.call(drag); - // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS. - (lasso as any).reset = () => { + lasso.reset = () => { if (lassoPath) { lassoPath.remove(); lassoPath = null; @@ -150,10 +155,8 @@ const Lasso = () => { } }; - // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS. - (lasso as any).move = (polygon: any) => { - if (polygon !== lassoPolygon || polygon.length !== lassoPolygon.length) { - // @ts-expect-error ts-migrate(2339) FIXME: Property 'reset' does not exist on type '(svg: any... Remove this comment to see the full error message + lasso.move = (polygon: [number, number][]) => { + if (polygon !== lassoPolygon || polygon.length !== lassoPolygon?.length) { lasso.reset(); lassoPolygon = polygon; lassoPath = g @@ -163,13 +166,15 @@ const Lasso = () => { .attr("fill-opacity", 0.1) .attr("stroke", lassoPathColor) .attr("stroke-dasharray", "3, 3"); + if (!lassoPath) return; lassoPath.attr("d", `${polygonToPath(lassoPolygon)}Z`); } }; - }; - - // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS. - lasso.on = (type: any, callback: any) => { + }); + lasso.on = ( + type: string, + callback: (polygon: [number, number][]) => void | (() => void) + ) => { dispatch.on(type, callback); return lasso; }; diff --git a/client/src/components/graph/setupSVGandBrush.ts b/client/src/components/graph/setupSVGandBrush.ts index e8071b1e4..ad5e4a621 100644 --- a/client/src/components/graph/setupSVGandBrush.ts +++ b/client/src/components/graph/setupSVGandBrush.ts @@ -1,62 +1,80 @@ import * as d3 from "d3"; -import Lasso from "./setupLasso"; +import Lasso, { LassoFunctionWithAttributes } from "./setupLasso"; /****************************************** ******************************************* put svg & brush in DOM ******************************************* ******************************************/ - -// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types --- FIXME: disabled temporarily on migrate to TS. -export default ( - // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS. - selectionToolType: any, - // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS. - handleStartAction: any, - // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS. - handleDragAction: any, - // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS. - handleEndAction: any, - // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS. - handleCancelAction: any, - // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS. - viewport: any -) => { - const svg = d3.select("#graph-wrapper").select("#lasso-layer"); - if (svg.empty()) return {}; - - if (selectionToolType === "brush") { - const brush = d3 - .brush() - .extent([ - [0, 0], - [viewport.width, viewport.height], - ]) - .on("start", handleStartAction) - .on("brush", handleDragAction) - // FYI, brush doesn't generate cancel - .on("end", handleEndAction); - - const brushContainer = svg - .append("g") - .attr("class", "graph_brush") - .call(brush); - - return { svg, container: brushContainer, tool: brush }; +export function setupBrush({ + handleStartAction, + handleDragAction, + handleEndAction, + viewport, +}: { + selectionToolType: "brush"; + handleStartAction: () => void; + handleDragAction: () => void; + handleEndAction: () => void; + handleCancelAction: undefined; + viewport: { width: number; height: number }; +}): { + svg?: d3.Selection; + container?: d3.Selection; + tool?: d3.BrushBehavior; +} { + const svg: d3.Selection = d3 + .select("#graph-wrapper") + .select("#lasso-layer"); + if (svg.empty()) { + return {}; } + const brush = d3 + .brush() + .extent([ + [0, 0], + [viewport.width, viewport.height], + ]) + .on("start", handleStartAction) + .on("brush", handleDragAction) + // FYI, brush doesn't generate cancel + .on("end", handleEndAction); - if (selectionToolType === "lasso") { - // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS. - const lasso = (Lasso() as any) - .on("end", handleEndAction) - // FYI, Lasso doesn't generate drag - .on("start", handleStartAction) - .on("cancel", handleCancelAction); + const brushContainer = svg + .append("g") + .attr("class", "graph_brush") + .call(brush); - const lassoContainer = svg.call(lasso); + return { svg, container: brushContainer, tool: brush }; +} - return { svg, container: lassoContainer, tool: lasso }; +export function setupLasso({ + handleStartAction, + handleEndAction, + handleCancelAction, +}: { + selectionToolType: "lasso"; + handleStartAction: () => void; + handleEndAction: (polygon: [number, number][]) => void; + handleCancelAction: () => void; +}): { + svg?: d3.Selection; + container?: d3.Selection; + tool?: LassoFunctionWithAttributes; +} { + const svg: d3.Selection = d3 + .select("#graph-wrapper") + .select("#lasso-layer"); + if (svg.empty()) { + return {}; } + const lasso = Lasso() + .on("end", handleEndAction) + // FYI, Lasso doesn't generate drag + .on("start", handleStartAction) + .on("cancel", handleCancelAction); + + const lassoContainer = svg.call(lasso); - throw new Error("unknown graph selection tool"); -}; + return { svg, container: lassoContainer, tool: lasso }; +} diff --git a/client/src/reducers/controls.ts b/client/src/reducers/controls.ts index 2937792b7..665b4399a 100644 --- a/client/src/reducers/controls.ts +++ b/client/src/reducers/controls.ts @@ -50,7 +50,6 @@ interface ControlsState { error: Error | string | null; resettingInterface: boolean; graphInteractionMode: "zoom" | "select"; - opacityForDeselectedCells: number; scatterplotXXaccessor: string | false; scatterplotYYaccessor: string | false; geneIsOpen: boolean; @@ -78,7 +77,6 @@ const Controls = ( // all of the data + selection state resettingInterface: false, graphInteractionMode: "select", - opacityForDeselectedCells: 0.2, scatterplotXXaccessor: false, // just easier to read scatterplotYYaccessor: false, geneIsOpen: false, @@ -162,11 +160,6 @@ const Controls = ( ...state, graphInteractionMode: action.data, }; - case "change opacity deselected cells in 2d graph background": - return { - ...state, - opacityForDeselectedCells: action.data, - }; case "increment graph render counter": { const c = state.graphRenderCounter + 1; return { diff --git a/client/src/util/camera.ts b/client/src/util/camera.ts index 1b1fb0816..c465a031d 100644 --- a/client/src/util/camera.ts +++ b/client/src/util/camera.ts @@ -1,4 +1,5 @@ import { vec2, mat3 } from "gl-matrix"; +import { MouseEvent } from "react"; import clamp from "./clamp"; const EPSILON = 0.000001; @@ -13,7 +14,7 @@ const panBound = 0.8; const scratch0 = new Float32Array(16); const scratch1 = new Float32Array(16); -class Camera { +export class Camera { canvas: HTMLCanvasElement; prevEvent: { @@ -92,7 +93,7 @@ class Camera { Event handling */ - flush(e: MouseEvent) { + flush(e: MouseEvent>) { this.prevEvent.type = e.type; this.prevEvent.clientX = e.clientX; this.prevEvent.clientY = e.clientY; @@ -123,7 +124,10 @@ class Camera { return pos; } - mousePan(e: MouseEvent, projectionTF: mat3): true { + mousePan( + e: MouseEvent>, + projectionTF: mat3 + ): true { const projectionInvTF = mat3.invert(scratch0, projectionTF); const pos = this.localPosition( this.canvas, @@ -159,7 +163,10 @@ class Camera { return true; } - handleEvent(e: MouseEvent, projectionTF: mat3): boolean { + handleEvent( + e: MouseEvent>, + projectionTF: mat3 + ): boolean { /* process the event, and return true if camera view changed */ @@ -175,7 +182,7 @@ class Camera { } case "wheel": { - viewChanged = this.wheelZoom(e as WheelEvent, projectionTF); + viewChanged = this.wheelZoom(e as unknown as WheelEvent, projectionTF); this.flush(e); break; } diff --git a/client/src/util/maybeScientific.ts b/client/src/util/maybeScientific.ts index 8f701c45c..5c6747e48 100644 --- a/client/src/util/maybeScientific.ts +++ b/client/src/util/maybeScientific.ts @@ -12,6 +12,7 @@ import significantDigits from "./significantDigits"; */ export default function maybeScientific( + // @ts-expect-error need to retype some d3 types x: ScaleLinear ): string { let format = ","; diff --git a/client/src/util/stateManager/colorHelpers.ts b/client/src/util/stateManager/colorHelpers.ts index 8fe9a0718..c26b401b2 100644 --- a/client/src/util/stateManager/colorHelpers.ts +++ b/client/src/util/stateManager/colorHelpers.ts @@ -95,7 +95,9 @@ function _defaultColors(nObs: number): ColorTable { const defaultColors = memoize(_defaultColors); export type ColorRange = + // @ts-expect-error need to retype d3 types | d3.ScaleSequentialBase["range"] + // @ts-expect-error need to retype d3 types | d3.ScaleQuantile["range"]; export interface ColorTable { rgb: Float32Array; @@ -105,7 +107,9 @@ export interface ColorTable { range?(): ColorRange; domain(): number[]; } + // @ts-expect-error need to retype d3 types | d3.ScaleQuantile + // @ts-expect-error need to retype d3 types | d3.ScaleSequential | undefined; }