From babd5efb5c74544ae86ec99faa9f55814c9ef6a4 Mon Sep 17 00:00:00 2001 From: Wadjih Bencheikh Date: Wed, 23 Aug 2023 18:12:48 +0100 Subject: [PATCH 1/2] refactor: ROIToolbar using PanelHeader (#58) * refactor: ROIToolbar using PanelHeader * refactor: fix eslint errors * fix: ROIToolbar style * refactor: PreferencesToolbar using react-science * refactor: fix eslint errors --- package-lock.json | 375 ++++++++++++++++------- package.json | 2 +- src/components/roi/ROIAccordion.tsx | 11 +- src/components/roi/ROIEditPreference.tsx | 20 +- src/components/roi/ROITable.tsx | 28 +- src/components/roi/ROIToolbar.tsx | 43 +-- 6 files changed, 305 insertions(+), 174 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8f3f3a8..1943e40 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,7 +24,7 @@ "react-kbs": "^2.1.1", "react-map-interaction": "^2.1.0", "react-plot": "^1.4.2", - "react-science": "^0.24.3", + "react-science": "^0.26.2", "react-use": "^17.4.0" }, "devDependencies": { @@ -664,8 +664,9 @@ } }, "node_modules/@headlessui/react": { - "version": "1.7.15", - "license": "MIT", + "version": "1.7.17", + "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.17.tgz", + "integrity": "sha512-4am+tzvkqDSSgiwrsEpGWqgGo9dz8qU5M3znCkC4PgkpY4HcCZzEDEvozltGGGHIKl9jbXbZPSH5TWn4sWJdow==", "dependencies": { "client-only": "^0.0.1" }, @@ -1109,6 +1110,69 @@ } } }, + "node_modules/@radix-ui/react-radio-group": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.1.3.tgz", + "integrity": "sha512-x+yELayyefNeKeTx4fjK6j99Fs6c4qKm3aY38G3swQVTN6xMpsrbigC0uHs2L//g8q4qR7qOcww8430jJmi2ag==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-direction": "1.0.1", + "@radix-ui/react-presence": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-roving-focus": "1.0.4", + "@radix-ui/react-use-controllable-state": "1.0.1", + "@radix-ui/react-use-previous": "1.0.1", + "@radix-ui/react-use-size": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-roving-focus": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.4.tgz", + "integrity": "sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-collection": "1.0.3", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-direction": "1.0.1", + "@radix-ui/react-id": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-callback-ref": "1.0.1", + "@radix-ui/react-use-controllable-state": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-select": { "version": "1.2.2", "license": "MIT", @@ -1384,18 +1448,20 @@ "license": "Apache-2.0" }, "node_modules/@tanstack/query-core": { - "version": "4.29.14", - "license": "MIT", + "version": "4.33.0", + "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.33.0.tgz", + "integrity": "sha512-qYu73ptvnzRh6se2nyBIDHGBQvPY1XXl3yR769B7B6mIDD7s+EZhdlWHQ67JI6UOTFRaI7wupnTnwJ3gE0Mr/g==", "funding": { "type": "github", "url": "https://github.com/sponsors/tannerlinsley" } }, "node_modules/@tanstack/react-query": { - "version": "4.29.14", - "license": "MIT", + "version": "4.33.0", + "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-4.33.0.tgz", + "integrity": "sha512-97nGbmDK0/m0B86BdiXzx3EW9RcDYKpnyL2+WwyuLHEgpfThYAnXFaMMmnTDuAO4bQJXEhflumIEUfKmP7ESGA==", "dependencies": { - "@tanstack/query-core": "4.29.14", + "@tanstack/query-core": "4.33.0", "use-sync-external-store": "^1.2.0" }, "funding": { @@ -1417,10 +1483,11 @@ } }, "node_modules/@tanstack/react-table": { - "version": "8.9.2", - "license": "MIT", + "version": "8.9.3", + "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.9.3.tgz", + "integrity": "sha512-Ng9rdm3JPoSCi6cVZvANsYnF+UoGVRxflMb270tVj0+LjeT/ZtZ9ckxF6oLPLcKesza6VKBqtdF9mQ+vaz24Aw==", "dependencies": { - "@tanstack/table-core": "8.9.2" + "@tanstack/table-core": "8.9.3" }, "engines": { "node": ">=12" @@ -1435,8 +1502,9 @@ } }, "node_modules/@tanstack/table-core": { - "version": "8.9.2", - "license": "MIT", + "version": "8.9.3", + "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.9.3.tgz", + "integrity": "sha512-NpHZBoHTfqyJk0m/s/+CSuAiwtebhYK90mDuf5eylTvgViNOujiaOaxNDxJkQQAsVvHWZftUGAx1EfO1rkKtLg==", "engines": { "node": ">=12" }, @@ -1936,7 +2004,8 @@ }, "node_modules/atom-sorter": { "version": "2.0.0", - "license": "MIT" + "resolved": "https://registry.npmjs.org/atom-sorter/-/atom-sorter-2.0.0.tgz", + "integrity": "sha512-30O3ccAH+lmysMykyEkBsfB65BU329GatBeYrgzKjDBhaURgvWT7B2+C9gmBFnVmbMO2HaqvyAuce3eMsICluw==" }, "node_modules/attr-accept": { "version": "2.2.2", @@ -2111,11 +2180,13 @@ }, "node_modules/chemical-elements": { "version": "2.0.2", - "license": "MIT" + "resolved": "https://registry.npmjs.org/chemical-elements/-/chemical-elements-2.0.2.tgz", + "integrity": "sha512-h/nJgVzMRIPUu7hg3QIsoFBDRrOO4v78Qxvh8Hh/R83ZW6G9iJtikNV6FBt1Fu8ovJK1SaoS3uyzadGyCMOD9A==" }, "node_modules/chemical-groups": { "version": "2.1.0", - "license": "MIT" + "resolved": "https://registry.npmjs.org/chemical-groups/-/chemical-groups-2.1.0.tgz", + "integrity": "sha512-Yj4iqkbnG3LG5zS35JCRxhLivzFyZqFnEz5EAtb5DgLw4SNMGAAC/9fDkMhTWiS6ceGY9Zjg7xQPx3dFMweO2A==" }, "node_modules/cheminfo-font": { "version": "1.10.0", @@ -2163,7 +2234,8 @@ }, "node_modules/client-only": { "version": "0.0.1", - "license": "MIT" + "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz", + "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==" }, "node_modules/cliui": { "version": "8.0.1", @@ -2593,15 +2665,16 @@ "license": "MIT" }, "node_modules/emdb": { - "version": "2.4.0", - "license": "MIT", + "version": "2.4.3", + "resolved": "https://registry.npmjs.org/emdb/-/emdb-2.4.3.tgz", + "integrity": "sha512-irnEU374TUhjygl9gPbK8ubiwIBc8dboDwO+dWKQ2syCjdAsQr51jPBC0O95YlWKwiap+fEHHqKzXt6X1Q8R2Q==", "dependencies": { "chemical-elements": "^2.0.2", "chemical-groups": "^2.1.0", "cross-fetch": "^3.1.5", "isotopic-distribution": "^2.2.0", "jszip": "^3.10.1", - "mass-fragmentation": "^0.3.0", + "mass-fragmentation": "^0.6.0", "mf-finder": "^2.4.0", "mf-from-google-sheet": "^2.0.7", "mf-generator": "^2.1.1", @@ -2610,7 +2683,7 @@ "mf-utilities": "^2.0.4", "ml-regression-theil-sen": "^2.0.0", "ml-spectra-processing": "^12.0.0", - "ms-spectrum": "^2.4.0", + "ms-spectrum": "^2.5.0", "nucleotide": "^2.1.0", "openchemlib-utils": "^2.4.0", "peaks-similarity": "^3.1.1", @@ -3417,15 +3490,24 @@ } }, "node_modules/filelist-utils": { - "version": "1.10.0", - "license": "MIT", + "version": "1.10.2", + "resolved": "https://registry.npmjs.org/filelist-utils/-/filelist-utils-1.10.2.tgz", + "integrity": "sha512-E4wIKXIXEyON7i6Z/7+hjytm53S0GSE/b+lvPlE5jAbHRV8thv7a4G+aLLFeOPYQK01MCH1l+ti6jHQ3tl/7bg==", "dependencies": { "cheminfo-types": "^1.7.2", - "cross-fetch": "^3.1.6", + "cross-fetch": "^4.0.0", "jszip": "^3.10.1", "pako": "^2.1.0" } }, + "node_modules/filelist-utils/node_modules/cross-fetch": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-4.0.0.tgz", + "integrity": "sha512-e4a5N8lVvuLgAWgnCrLr2PP0YyDOTHa9H/Rj54dirp61qXnNq46m82bRhNqIA5VccJtWBvPTFRV3TtvHUKPB1g==", + "dependencies": { + "node-fetch": "^2.6.12" + } + }, "node_modules/fill-range": { "version": "7.0.1", "dev": true, @@ -3588,6 +3670,17 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/get-value": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/get-value/-/get-value-3.0.1.tgz", + "integrity": "sha512-mKZj9JLQrwMBtj5wxi6MH8Z5eSKaERpAwjg43dPtlGI1ZVEgH/qC7T8/6R2OBSUA+zzHBZgICsVJaEIV2tKTDA==", + "dependencies": { + "isobject": "^3.0.1" + }, + "engines": { + "node": ">=6.0" + } + }, "node_modules/git-raw-commits": { "version": "2.0.11", "dev": true, @@ -3840,7 +3933,8 @@ }, "node_modules/humps": { "version": "2.0.1", - "license": "MIT" + "resolved": "https://registry.npmjs.org/humps/-/humps-2.0.1.tgz", + "integrity": "sha512-E0eIbrFWUhwfXJmsbdjRQFQPrl5pTEoKlz163j1mTqqUnU9PgR4AgB8AIITzuB3vLBdxZXyZ9TDIrwB2OASz4g==" }, "node_modules/husky": { "version": "8.0.3", @@ -3889,20 +3983,6 @@ "tiff": "^5.0.3" } }, - "node_modules/image-js/node_modules/ml-spectra-processing": { - "version": "12.4.0", - "resolved": "https://registry.npmjs.org/ml-spectra-processing/-/ml-spectra-processing-12.4.0.tgz", - "integrity": "sha512-OnJbo/yBYUnV111/c5HXn6sIeV5RlRSRQMxqEtVConEjFBJNbFhpLECbk4/W+5hR9Xsmy8G1EXCX88gkeTMNpA==", - "dependencies": { - "binary-search": "^1.3.6", - "cheminfo-types": "^1.7.1", - "fft.js": "^4.0.4", - "is-any-array": "^2.0.1", - "ml-matrix": "^6.10.4", - "ml-xsadd": "^2.0.0", - "spline-interpolator": "^1.0.0" - } - }, "node_modules/image-type": { "version": "4.1.0", "license": "MIT", @@ -4328,9 +4408,18 @@ "dev": true, "license": "ISC" }, + "node_modules/isobject": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz", + "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/isotopic-distribution": { "version": "2.2.0", - "license": "MIT", + "resolved": "https://registry.npmjs.org/isotopic-distribution/-/isotopic-distribution-2.2.0.tgz", + "integrity": "sha512-C3vrnVV6ibD8SwYgochgy4Slydj9tdHFWRHfaE5AZhAZ0xHoGVb6X68xfzBj3RxGt6lwBQrLLWInhPROHYyIzA==", "dependencies": { "chemical-elements": "^2.0.2", "mf-parser": "^2.3.0", @@ -4638,11 +4727,29 @@ } }, "node_modules/mass-fragmentation": { - "version": "0.3.0", - "license": "MIT", + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/mass-fragmentation/-/mass-fragmentation-0.6.0.tgz", + "integrity": "sha512-Yokw/z4nChOgR0LczfbVQqEMQpjyJXxbLLYUlJ5sfyoE2Jc8Fz7M1B5uYBnYkiDPAEPXsuYDF9vdrgFVZ9ul0w==", "dependencies": { "mf-parser": "^2.3.0", - "openchemlib-utils": "^2.4.0" + "openchemlib-utils": "^5.0.2" + } + }, + "node_modules/mass-fragmentation/node_modules/openchemlib-utils": { + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/openchemlib-utils/-/openchemlib-utils-5.0.2.tgz", + "integrity": "sha512-BN/gSpZzJFqfP/BiGHa+wb9BIKvNgIEkwZruyzFWAmwG3P5HvsSERdztMXNBH1YRFpxfsW6u2DvBX0yz7rL7/A==", + "dependencies": { + "atom-sorter": "^2.0.0", + "ensure-string": "^1.2.0", + "get-value": "^3.0.1", + "ml-floyd-warshall": "^3.0.1", + "ml-matrix": "^6.10.4", + "papaparse": "^5.4.1", + "sdf-parser": "^6.0.1" + }, + "peerDependencies": { + "openchemlib": ">=8.5.0" } }, "node_modules/mdn-data": { @@ -4703,7 +4810,8 @@ }, "node_modules/mf-finder": { "version": "2.4.0", - "license": "MIT", + "resolved": "https://registry.npmjs.org/mf-finder/-/mf-finder-2.4.0.tgz", + "integrity": "sha512-8fyTBxf8EdKel1vbcAmy5vsR8SYUQpylrM7ifn5+fizAOWwUXAB3U1115PVN4bED1Wur4E20Pru3lzNgkDaYFQ==", "dependencies": { "atom-sorter": "^2.0.0", "chemical-elements": "^2.0.2", @@ -4714,7 +4822,8 @@ }, "node_modules/mf-from-google-sheet": { "version": "2.0.7", - "license": "MIT", + "resolved": "https://registry.npmjs.org/mf-from-google-sheet/-/mf-from-google-sheet-2.0.7.tgz", + "integrity": "sha512-bzwv/1DGHp+oH1GQkWHJN9IX8Z+AY+A1oGXe4sv7iTT+NUYuIRAGIqChEcmHwUJrc54AXUVJkak1KNVlS0FtSg==", "dependencies": { "cross-fetch": "^3.1.5", "mf-generator": "^2.1.1", @@ -4725,7 +4834,8 @@ }, "node_modules/mf-generator": { "version": "2.1.1", - "license": "MIT", + "resolved": "https://registry.npmjs.org/mf-generator/-/mf-generator-2.1.1.tgz", + "integrity": "sha512-ckKw3PyzJTlG7s4zayZV7IeZrprA/jfmprTc3/kZ4LK60kcTCDaJ2gbiN4nejFbFnAZSjuVk4J9MboJL1UctYA==", "dependencies": { "chemical-elements": "^2.0.2", "mf-finder": "^2.4.0", @@ -4737,7 +4847,8 @@ }, "node_modules/mf-matcher": { "version": "2.1.0", - "license": "MIT", + "resolved": "https://registry.npmjs.org/mf-matcher/-/mf-matcher-2.1.0.tgz", + "integrity": "sha512-cVRJoz8sf5Xg6SKsy8H1StECHKTXjP4FGokCCm6rXGuSMCb7KR5pAAS45blN24tnkXKtw3GzXGKiZNGzO1khVA==", "dependencies": { "mf-utilities": "^2.0.3", "ml-spectra-processing": "^12.0.0" @@ -4745,7 +4856,8 @@ }, "node_modules/mf-parser": { "version": "2.3.0", - "license": "MIT", + "resolved": "https://registry.npmjs.org/mf-parser/-/mf-parser-2.3.0.tgz", + "integrity": "sha512-eWG7JAPpWN/C+5zyTHOa460DHXHqbnpUHGvMWpqEeR+sAXHzBTiuDd3n4RD2X08QxIIgLiQpAjo0Otj7NBLpTw==", "dependencies": { "atom-sorter": "^2.0.0", "chemical-elements": "^2.0.2", @@ -4755,7 +4867,8 @@ }, "node_modules/mf-utilities": { "version": "2.0.4", - "license": "MIT", + "resolved": "https://registry.npmjs.org/mf-utilities/-/mf-utilities-2.0.4.tgz", + "integrity": "sha512-i1UX6v0FwWXj1RM4N3izEcShfwB7/LO2jIpK+cwauy9OPUtTQdRS9IdNiKNc0dvEpnCDY2Ci0zOQSnVPTnnDkg==", "dependencies": { "chemical-elements": "^2.0.2", "chemical-groups": "^2.1.0", @@ -4838,7 +4951,8 @@ }, "node_modules/ml-array-mean": { "version": "1.1.6", - "license": "MIT", + "resolved": "https://registry.npmjs.org/ml-array-mean/-/ml-array-mean-1.1.6.tgz", + "integrity": "sha512-MIdf7Zc8HznwIisyiJGRH9tRigg3Yf4FldW8DxKxpCCv/g5CafTw0RRu51nojVEOXuCQC7DRVVu5c7XXO/5joQ==", "dependencies": { "ml-array-sum": "^1.1.6" } @@ -4876,7 +4990,8 @@ }, "node_modules/ml-array-sum": { "version": "1.1.6", - "license": "MIT", + "resolved": "https://registry.npmjs.org/ml-array-sum/-/ml-array-sum-1.1.6.tgz", + "integrity": "sha512-29mAh2GwH7ZmiRnup4UyibQZB9+ZLyMShvt4cH4eTK+cL2oEMIZFnSyB3SS8MlsTh6q/w/yh48KmqLxmovN4Dw==", "dependencies": { "is-any-array": "^2.0.0" } @@ -4906,7 +5021,8 @@ }, "node_modules/ml-distance": { "version": "4.0.1", - "license": "MIT", + "resolved": "https://registry.npmjs.org/ml-distance/-/ml-distance-4.0.1.tgz", + "integrity": "sha512-feZ5ziXs01zhyFUUUeZV5hwc0f5JW0Sh0ckU1koZe/wdVkJdGxcP06KNQuF0WBTj8FttQUzcvQcpcrOp/XrlEw==", "dependencies": { "ml-array-mean": "^1.1.6", "ml-distance-euclidean": "^2.0.0", @@ -4918,8 +5034,9 @@ "license": "MIT" }, "node_modules/ml-floyd-warshall": { - "version": "2.0.1", - "license": "MIT", + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/ml-floyd-warshall/-/ml-floyd-warshall-3.0.1.tgz", + "integrity": "sha512-GrUdw/QuENlOp1HnCNzjaqZJXdXyrOG8YYK7lSvq3fzgOFoaZPY5gUFFmHDSo/T0ZCBLkka9IjcSpEbRGqi/fw==", "dependencies": { "ml-matrix": "^6.10.4" } @@ -4984,22 +5101,35 @@ }, "node_modules/ml-regression-power": { "version": "2.0.0", - "license": "MIT", + "resolved": "https://registry.npmjs.org/ml-regression-power/-/ml-regression-power-2.0.0.tgz", + "integrity": "sha512-u8O9Fy45+OeYm/4ZBcNDn5w3w+MHc6kZz/AWSJIwmJcyjz6PRkTZnNfgGYdVKwKKDlAOS7G/AFvMKSTWRNO4RQ==", "dependencies": { "ml-regression-base": "^2.0.1", "ml-regression-simple-linear": "^2.0.2" } }, "node_modules/ml-regression-simple-linear": { - "version": "2.0.3", - "license": "MIT", + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/ml-regression-simple-linear/-/ml-regression-simple-linear-2.0.4.tgz", + "integrity": "sha512-Tg9TeReeEz757YLgHDvBYQZh75kn3TW2q0uwWQC6g2uHFdZGxlz0Ie5COFkWXKB0KP1aWyeyobYxtzX0Fgh8mA==", "dependencies": { - "ml-regression-base": "^2.0.1" + "cheminfo-types": "^1.7.2", + "ml-regression-base": "^3.0.0" + } + }, + "node_modules/ml-regression-simple-linear/node_modules/ml-regression-base": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/ml-regression-base/-/ml-regression-base-3.0.0.tgz", + "integrity": "sha512-qkQWvNk8VU1LIytjid/+YHOSx8GnEU9dCUPsAQ8AzCh4saijrsni/XA6x7r+N1UrHMDHeSEUBtRZTsl2syyu/A==", + "dependencies": { + "cheminfo-types": "^1.7.2", + "is-any-array": "^2.0.1" } }, "node_modules/ml-regression-theil-sen": { "version": "2.0.0", - "license": "MIT", + "resolved": "https://registry.npmjs.org/ml-regression-theil-sen/-/ml-regression-theil-sen-2.0.0.tgz", + "integrity": "sha512-RO//tYzo69XbWDO5LIPdGp8ef1MSTPPJY0bXNlmOLMSay7YR9FQqtNgqn29T9DSYTa863VAafRlCeXwDQNXkBw==", "dependencies": { "ml-array-median": "^1.1.1", "ml-regression-base": "^2.0.1" @@ -5045,13 +5175,14 @@ } }, "node_modules/ml-spectra-processing": { - "version": "12.3.0", - "license": "MIT", + "version": "12.5.0", + "resolved": "https://registry.npmjs.org/ml-spectra-processing/-/ml-spectra-processing-12.5.0.tgz", + "integrity": "sha512-y2yMg8w69hpmNEebY17DJ7NNDljV2C16k6HsWx4B5aSdVL3tkgHvwLFAbmZcMpZxRE0VGIBVAPLfo8E3mTQFzQ==", "dependencies": { "binary-search": "^1.3.6", - "cheminfo-types": "^1.6.0", + "cheminfo-types": "^1.7.2", "fft.js": "^4.0.4", - "is-any-array": "^2.0.0", + "is-any-array": "^2.0.1", "ml-matrix": "^6.10.4", "ml-xsadd": "^2.0.0", "spline-interpolator": "^1.0.0" @@ -5059,11 +5190,13 @@ }, "node_modules/ml-stat": { "version": "1.3.3", - "license": "MIT" + "resolved": "https://registry.npmjs.org/ml-stat/-/ml-stat-1.3.3.tgz", + "integrity": "sha512-F6plydFIKFZA+7j/pRsRrfRu4nwsruQvYD9QxHWc4hFUdASVznsKUL2hgAwgMVizY/P0+b1L9bVQexKES5y/uw==" }, "node_modules/ml-tree-similarity": { "version": "1.0.0", - "license": "MIT", + "resolved": "https://registry.npmjs.org/ml-tree-similarity/-/ml-tree-similarity-1.0.0.tgz", + "integrity": "sha512-XJUyYqjSuUQkNQHMscr6tcjldsOoAekxADTplt40QKfwW6nd++1wHWV9AArl0Zvw/TIHgNaZZNvr8QGvE8wLRg==", "dependencies": { "binary-search": "^1.3.5", "num-sort": "^2.0.0" @@ -5090,11 +5223,12 @@ "license": "MIT" }, "node_modules/ms-spectrum": { - "version": "2.4.0", - "license": "MIT", + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/ms-spectrum/-/ms-spectrum-2.5.0.tgz", + "integrity": "sha512-iEBpHTb8jbbHrABVMEfaBaddAWMlmS93HgC8V2xYED4LhIPucSJOm0AmY/m3hXMyaOrIOmpkH1w/l2I8t/ZgCw==", "dependencies": { "cheminfo-types": "^1.4.0", - "emdb": "^2.4.0", + "emdb": "^2.4.3", "is-any-array": "^2.0.0", "mf-parser": "^2.3.0", "mf-utilities": "^2.0.4", @@ -5163,8 +5297,9 @@ "license": "MIT" }, "node_modules/node-fetch": { - "version": "2.6.11", - "license": "MIT", + "version": "2.6.13", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.13.tgz", + "integrity": "sha512-StxNAxh15zr77QvvkmveSQ8uCQ4+v5FkvNTj0OESmiHu+VRi/gXArXtkWMElOsOUNLtUEvI4yS+rdtOHZTwlQA==", "dependencies": { "whatwg-url": "^5.0.0" }, @@ -5207,7 +5342,8 @@ }, "node_modules/nucleotide": { "version": "2.1.0", - "license": "MIT", + "resolved": "https://registry.npmjs.org/nucleotide/-/nucleotide-2.1.0.tgz", + "integrity": "sha512-DAf9B0uDZebp/oQM0/UWy5+52KlmLnvGir71QGu2kWn02moHz8BRD6vONMgqpq/MY1mvps1Uan4O1n4cMzn2Mw==", "dependencies": { "chemical-groups": "^2.1.0", "mf-utilities": "^2.0.4" @@ -5215,7 +5351,8 @@ }, "node_modules/num-sort": { "version": "2.1.0", - "license": "MIT", + "resolved": "https://registry.npmjs.org/num-sort/-/num-sort-2.1.0.tgz", + "integrity": "sha512-1MQz1Ed8z2yckoBeSfkQHHO9K1yDRxxtotKSJ9yvcTUUxSvfvzEq5GwBrjjHEpMlq/k5gvXdmJ1SbYxWtpNoVg==", "engines": { "node": ">=8" }, @@ -5350,23 +5487,26 @@ } }, "node_modules/openchemlib": { - "version": "8.3.0", - "license": "BSD-3-Clause", + "version": "8.5.0", + "resolved": "https://registry.npmjs.org/openchemlib/-/openchemlib-8.5.0.tgz", + "integrity": "sha512-g9i7JfZRsEZSSxDYoBwd9tGwIp7ZAHTbCJMKphmLApY86hyObr0pOtocIPqsT14bmFJ2oM2A3F73wiuRKOwROg==", "peer": true }, "node_modules/openchemlib-utils": { - "version": "2.4.0", - "license": "MIT", + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/openchemlib-utils/-/openchemlib-utils-2.9.0.tgz", + "integrity": "sha512-El0vE5Tg6BgujWHmnoAZR6azGwl6ESH6ieouUwHnYMgNvBfc63iJDzo7rn0TliK9Gr5BLQh89qfzO6A6eSeh9Q==", "dependencies": { "atom-sorter": "^2.0.0", "ensure-string": "^1.2.0", - "ml-floyd-warshall": "^2.0.1", + "get-value": "^3.0.1", + "ml-floyd-warshall": "^3.0.1", "ml-matrix": "^6.10.4", - "papaparse": "^5.3.2", + "papaparse": "^5.4.1", "sdf-parser": "^6.0.1" }, "peerDependencies": { - "openchemlib": ">=8.0.0" + "openchemlib": ">=8.3.0" } }, "node_modules/optionator": { @@ -5427,7 +5567,8 @@ }, "node_modules/papaparse": { "version": "5.4.1", - "license": "MIT" + "resolved": "https://registry.npmjs.org/papaparse/-/papaparse-5.4.1.tgz", + "integrity": "sha512-HipMsgJkZu8br23pW15uvo6sib6wne/4woLZPlFf3rpDyMe9ywEXUsuD7+6K9PRkJlVT51j/sCOYDKGGS3ZJrw==" }, "node_modules/parent-module": { "version": "1.0.1", @@ -5492,14 +5633,16 @@ }, "node_modules/peaks-similarity": { "version": "3.1.1", - "license": "MIT", + "resolved": "https://registry.npmjs.org/peaks-similarity/-/peaks-similarity-3.1.1.tgz", + "integrity": "sha512-KRG5sO728cRNnzc7YLuXXilhTigP2w3WVpLvWqfhcAXEAinrXah+VirVkucoeL+THq6Vwa20w0j2HNSubm8HAQ==", "dependencies": { "ml-stat": "^1.3.3" } }, "node_modules/peptide": { "version": "2.0.0", - "license": "MIT" + "resolved": "https://registry.npmjs.org/peptide/-/peptide-2.0.0.tgz", + "integrity": "sha512-zhCkPS6qllu4FK3/Bh8RCC3vfyQvVwT+Eg0TDcypsi8SdQb+tKfB1AoHcEj1M664W17pnYqxzyGcr8kVhW0lvQ==" }, "node_modules/picocolors": { "version": "1.0.0", @@ -5678,8 +5821,9 @@ } }, "node_modules/react-error-boundary": { - "version": "4.0.10", - "license": "MIT", + "version": "4.0.11", + "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-4.0.11.tgz", + "integrity": "sha512-U13ul67aP5DOSPNSCWQ/eO0AQEYzEFkVljULQIjMV0KlffTAhxuDoBKdO0pb/JZ8mDhMKFZ9NZi0BmLGUiNphw==", "dependencies": { "@babel/runtime": "^7.12.5" }, @@ -5834,41 +5978,42 @@ } }, "node_modules/react-science": { - "version": "0.24.3", - "resolved": "https://registry.npmjs.org/react-science/-/react-science-0.24.3.tgz", - "integrity": "sha512-acCSBUQJee/sQHS7HlxsbHeGGh2qXF9PEAP+PV3Rfjolj+ldaI3BICy1gMtt08JshM0FeB5Wk3QWNMoEh6ttMQ==", + "version": "0.26.2", + "resolved": "https://registry.npmjs.org/react-science/-/react-science-0.26.2.tgz", + "integrity": "sha512-p5t7i8zYXUzXsjAi7a73wOrMegRKeKsIw/sNh0+dSAzHCLcQOtIBxeyjqd7d1v7D7FTEp+2YEQljRkSMp8+3DQ==", "dependencies": { - "@emotion/react": "^11.10.6", - "@emotion/styled": "^11.10.6", - "@headlessui/react": "^1.7.14", + "@emotion/react": "^11.11.1", + "@emotion/styled": "^11.11.0", + "@headlessui/react": "^1.7.16", "@lukeed/uuid": "^2.0.1", - "@popperjs/core": "^2.11.7", + "@popperjs/core": "^2.11.8", "@radix-ui/react-checkbox": "^1.0.4", + "@radix-ui/react-radio-group": "^1.1.3", "@radix-ui/react-select": "^1.2.2", - "@tanstack/react-query": "^4.29.5", - "@tanstack/react-table": "^8.8.5", + "@tanstack/react-query": "^4.32.6", + "@tanstack/react-table": "^8.9.3", "biologic-converter": "^0.6.0", - "cheminfo-types": "^1.7.0", + "cheminfo-types": "^1.7.2", "d3-scale-chromatic": "^3.0.0", - "filelist-utils": "^1.8.1", - "immer": "^10.0.1", - "jcampconverter": "^9.1.0", + "filelist-utils": "^1.10.1", + "immer": "^10.0.2", + "jcampconverter": "^9.1.1", "lodash": "^4.17.21", "ml-gsd": "^12.1.3", "ml-peak-shape-generator": "^4.1.2", "ml-signal-processing": "^1.0.3", - "ml-spectra-processing": "12.3.0", - "ms-spectrum": "^2.3.1", + "ml-spectra-processing": "^12.5.0", + "ms-spectrum": "^2.4.2", "netcdfjs": "^2.0.2", "react-d3-utils": "^1.0.0", "react-dropzone": "^14.2.3", - "react-error-boundary": "^4.0.4", - "react-icons": "^4.8.0", - "react-inspector": "^6.0.1", + "react-error-boundary": "^4.0.11", + "react-icons": "^4.10.1", + "react-inspector": "^6.0.2", "react-kbs": "^2.1.1", "react-plot": "^1.4.2", "react-popper": "^2.3.0", - "react-shadow": "^20.0.0", + "react-shadow": "^20.4.0", "spc-parser": "^0.7.2", "tinycolor2": "^1.6.0", "use-resize-observer": "^9.1.0", @@ -5880,8 +6025,9 @@ } }, "node_modules/react-shadow": { - "version": "20.2.0", - "license": "MIT", + "version": "20.4.0", + "resolved": "https://registry.npmjs.org/react-shadow/-/react-shadow-20.4.0.tgz", + "integrity": "sha512-sirvAmFja7Ss6MoyQbKWxaQ5IDTAW3Za3Tvegylfr5jXnwKZObHRIyiatefeNlskoGKfuPaZ8DNT052T0SUGcg==", "dependencies": { "humps": "^2.0.1" }, @@ -6341,7 +6487,8 @@ }, "node_modules/sdf-parser": { "version": "6.0.1", - "license": "MIT", + "resolved": "https://registry.npmjs.org/sdf-parser/-/sdf-parser-6.0.1.tgz", + "integrity": "sha512-QorgjqiqTzodCMmYkWYkYJ9nBnOL3w3mWOE9BB1SATUfkFvLOSxHaeZAnJxrHlRkfI7+q3+FsvZOS2OTN74lNA==", "dependencies": { "dynamic-typing": "^1.0.0", "ensure-string": "^1.2.0" @@ -6475,11 +6622,12 @@ "license": "CC0-1.0" }, "node_modules/spectrum-generator": { - "version": "8.0.7", - "license": "MIT", + "version": "8.0.8", + "resolved": "https://registry.npmjs.org/spectrum-generator/-/spectrum-generator-8.0.8.tgz", + "integrity": "sha512-CRCW/ByC9lyRqssRz+S84l/xHhU+p2BzAIQc2OwLqRpmt89bzzr2u8h3WT1GDtXtMnTyDQEH2Yhnpb3PJeZ79Q==", "dependencies": { "ml-peak-shape-generator": "^4.1.2", - "ml-spectra-processing": "^12.0.0" + "ml-spectra-processing": "^12.5.0" } }, "node_modules/spline-interpolator": { @@ -6694,7 +6842,8 @@ }, "node_modules/sum-object-keys": { "version": "1.0.2", - "license": "MIT" + "resolved": "https://registry.npmjs.org/sum-object-keys/-/sum-object-keys-1.0.2.tgz", + "integrity": "sha512-ii+z8zlKwTeVoidaFv6g2kQuhxq4L2GHFMglZsYrKCcwmMBtNlr/V2K1zlgkopNMmuMOheNV0dVKc5Sf/WdhEw==" }, "node_modules/supports-color": { "version": "7.2.0", @@ -7031,7 +7180,8 @@ }, "node_modules/use-sync-external-store": { "version": "1.2.0", - "license": "MIT", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", + "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==", "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0" } @@ -7208,7 +7358,8 @@ }, "node_modules/xy-parser": { "version": "5.0.4", - "license": "MIT", + "resolved": "https://registry.npmjs.org/xy-parser/-/xy-parser-5.0.4.tgz", + "integrity": "sha512-c8rnPqJqFKQzHvBv+rjwm68KaXyUpDN1+9+moF8NKOUrfqJVMCZ1oyE6w14RWNIaQ8kIG8o7CAFht7JOAmpS+w==", "dependencies": { "cheminfo-types": "^1.4.0", "ensure-string": "^1.2.0", diff --git a/package.json b/package.json index 66e472f..1d26040 100644 --- a/package.json +++ b/package.json @@ -63,7 +63,7 @@ "@emotion/styled": "^11.11.0", "image-js": "0.0.0-next-ce6a4f4a28", "immer": "^10.0.2", - "react-science": "^0.24.3", + "react-science": "^0.26.2", "lodash": "^4.17.21", "react-use": "^17.4.0", "react-plot": "^1.4.2", diff --git a/src/components/roi/ROIAccordion.tsx b/src/components/roi/ROIAccordion.tsx index 5076402..f9117e5 100644 --- a/src/components/roi/ROIAccordion.tsx +++ b/src/components/roi/ROIAccordion.tsx @@ -24,10 +24,17 @@ function ROIAccordion() { {isEditing ? ( ) : ( - <> +
- +
)} ); diff --git a/src/components/roi/ROIEditPreference.tsx b/src/components/roi/ROIEditPreference.tsx index 80f324a..f615fcb 100644 --- a/src/components/roi/ROIEditPreference.tsx +++ b/src/components/roi/ROIEditPreference.tsx @@ -1,12 +1,11 @@ import styled from '@emotion/styled'; import startCase from 'lodash/startCase'; import { CSSProperties, memo, useCallback, useMemo, useState } from 'react'; -import { FaCheck, FaTimes } from 'react-icons/fa'; import { Checkbox, ColorPickerDropdown, + PanelPreferencesToolbar, Table, - Toolbar, ValueRenderers, } from 'react-science/ui'; @@ -117,22 +116,7 @@ function ROIEditPreference() { return ( <> - - - - - - - - + Shown columns diff --git a/src/components/roi/ROITable.tsx b/src/components/roi/ROITable.tsx index f402b48..f9d9120 100644 --- a/src/components/roi/ROITable.tsx +++ b/src/components/roi/ROITable.tsx @@ -102,18 +102,24 @@ function ROITable({ identifier }: ROITableProps) { if (rois.length === 0) return No ROIs generated; return ( - - - {columns.map((column) => ( - +
+
+ + {columns.map((column) => ( + + ))} + + {rois.map((roi) => ( + + {columns.map((column) => columnRenderer(column, roi))} + ))} - - {rois.map((roi) => ( - - {columns.map((column) => columnRenderer(column, roi))} - - ))} -
+ + ); } diff --git a/src/components/roi/ROIToolbar.tsx b/src/components/roi/ROIToolbar.tsx index 56998d9..d8c4962 100644 --- a/src/components/roi/ROIToolbar.tsx +++ b/src/components/roi/ROIToolbar.tsx @@ -1,9 +1,8 @@ -import styled from '@emotion/styled'; import { Roi } from 'image-js'; import startCase from 'lodash/startCase'; import { memo, useCallback, useState } from 'react'; -import { FaCog, FaCopy } from 'react-icons/fa'; -import { Toolbar } from 'react-science/ui'; +import { FaCopy } from 'react-icons/fa'; +import { Toolbar, PanelHeader } from 'react-science/ui'; import { useCopyToClipboard } from 'react-use'; import useROIs from '../../hooks/useROIs'; @@ -41,15 +40,6 @@ function roisToTSV(rois: Roi[]) { const copyToClipBoardDefaultText = 'Copy to clipboard'; -const Separator = styled.div` - flex: 1; -`; - -const ROICount = styled.div` - display: flex; - align-items: center; -`; - function ROIToolbar({ identifier }: ROIToolbarProps) { const rois = useROIs(identifier); const viewDispatch = useViewDispatch(); @@ -73,26 +63,19 @@ function ROIToolbar({ identifier }: ROIToolbarProps) { }, [viewDispatch]); return ( - + {rois.length > 0 && ( - - - + + + + + )} - - {`[${rois.length}]`} - - - - + ); } From bc800a14ad79620b29434e7e12c3cb97b0f9383f Mon Sep 17 00:00:00 2001 From: Wadjih Bencheikh Date: Thu, 24 Aug 2023 07:52:24 +0100 Subject: [PATCH 2/2] feat: improve annotations of ROI --- src/components/roi/ROIEditPreference.tsx | 147 ++++++++++++------ .../roi/annotation/ConvexHullAnnotation.tsx | 30 +++- .../roi/annotation/FeretAnnotation.tsx | 58 +++++-- .../roi/annotation/MBRAnnotation.tsx | 30 +++- .../roi/annotation/ROIAnnotation.tsx | 2 + .../roi/annotation/SurfaceAnnotation.tsx | 38 +++++ src/state/preferences/PreferencesReducer.ts | 22 ++- 7 files changed, 245 insertions(+), 82 deletions(-) create mode 100644 src/components/roi/annotation/SurfaceAnnotation.tsx diff --git a/src/components/roi/ROIEditPreference.tsx b/src/components/roi/ROIEditPreference.tsx index f615fcb..fa0f28d 100644 --- a/src/components/roi/ROIEditPreference.tsx +++ b/src/components/roi/ROIEditPreference.tsx @@ -4,6 +4,7 @@ import { CSSProperties, memo, useCallback, useMemo, useState } from 'react'; import { Checkbox, ColorPickerDropdown, + Input, PanelPreferencesToolbar, Table, ValueRenderers, @@ -23,6 +24,7 @@ import { import { SET_EDIT_ROI_PREFERENCE } from '../../state/view/ViewActionTypes'; const PaddedContent = styled.div` + overflow: auto; padding: 0.5rem; `; @@ -37,23 +39,6 @@ const EditGroup = styled.div` margin-bottom: 1rem; `; -const CheckboxGroup = styled.div` - display: flex; - flex-direction: column; - & > * { - } -`; - -const AnnotationGroup = styled.div` - display: flex; - flex-direction: row; - margin-bottom: 0.5rem; - - & > :first-of-type { - white-space: nowrap; - } -`; - const tableStyle: CSSProperties = { width: '100%', }; @@ -115,7 +100,14 @@ function ROIEditPreference() { const handleCancel = useMemo(() => close, [close]); return ( - <> +
@@ -144,41 +136,98 @@ function ROIEditPreference() { Annotations - + + + + + + + + + {Object.keys(annotationsPreferences).map((key) => ( - - - setAnnotationsPreferences({ - ...annotationsPreferences, - [key]: { - ...annotationsPreferences[key], - enabled: checked as boolean, - }, - }) - } - /> - - setAnnotationsPreferences({ - ...annotationsPreferences, - [key]: { - ...annotationsPreferences[key], - color: color.hex, - }, - }) - } - /> - + + + + + setAnnotationsPreferences({ + ...annotationsPreferences, + [key]: { + ...annotationsPreferences[key], + color: color.hex, + }, + }) + } + /> + + + + setAnnotationsPreferences({ + ...annotationsPreferences, + [key]: { + ...annotationsPreferences[key], + enabled: checked as boolean, + }, + }) + } + /> + + + + setAnnotationsPreferences({ + ...annotationsPreferences, + [key]: { + ...annotationsPreferences[key], + displayValue: checked as boolean, + }, + }) + } + /> + + + { + const newValue = event.target.valueAsNumber; + setAnnotationsPreferences({ + ...annotationsPreferences, + [key]: { + ...annotationsPreferences[key], + fontSize: newValue, + }, + }); + }} + /> + + + + setAnnotationsPreferences({ + ...annotationsPreferences, + [key]: { + ...annotationsPreferences[key], + fontColor: color.hex, + }, + }) + } + /> + + ))} - +
- +
); } diff --git a/src/components/roi/annotation/ConvexHullAnnotation.tsx b/src/components/roi/annotation/ConvexHullAnnotation.tsx index 17d61c3..801eb99 100644 --- a/src/components/roi/annotation/ConvexHullAnnotation.tsx +++ b/src/components/roi/annotation/ConvexHullAnnotation.tsx @@ -17,10 +17,8 @@ function ConvexHullAnnotation({ roi }: ConvexHullAnnotationProps) { ); const preferences = usePreferences(); - const color = useMemo( - () => preferences.rois.annotations.convexHull.color, - [preferences.rois.annotations.convexHull.color], - ); + const { color, enabled, fontColor, fontSize, displayValue } = + preferences.rois.annotations.convexHull; const polygonStyle: CSSProperties = useMemo( () => ({ @@ -30,10 +28,28 @@ function ConvexHullAnnotation({ roi }: ConvexHullAnnotationProps) { }), [color], ); + const textStyle: CSSProperties = useMemo( + () => ({ + fill: fontColor, + fontSize, + textAnchor: 'middle', + dominantBaseline: 'text-before-edge', + }), + [fontColor, fontSize], + ); - if (!preferences.rois.annotations.convexHull.enabled) return null; - - return ; + if (!enabled && !displayValue) return null; + + return ( + + {enabled && } + {displayValue && ( + + {roi.convexHull.surface} + + )} + + ); } export default memo(ConvexHullAnnotation); diff --git a/src/components/roi/annotation/FeretAnnotation.tsx b/src/components/roi/annotation/FeretAnnotation.tsx index 5267f36..322cf48 100644 --- a/src/components/roi/annotation/FeretAnnotation.tsx +++ b/src/components/roi/annotation/FeretAnnotation.tsx @@ -18,46 +18,70 @@ function FeretAnnotation({ roi }: FeretAnnotationProps) { { column: columnA, row: rowA }, { column: columnB, row: rowB }, ], + length, }) => ({ x1: columnA, y1: rowA, x2: columnB, y2: rowB, + length, }), ), [maxDiameter, minDiameter], ); const preferences = usePreferences(); - const color = useMemo( - () => preferences.rois.annotations.feretDiameters.color, - [preferences.rois.annotations.feretDiameters.color], - ); + const { color, enabled, fontColor, fontSize, displayValue } = + preferences.rois.annotations.feretDiameters; const lineStyle: CSSProperties = useMemo( () => ({ fill: 'none', stroke: color, - strokewidth: 1, + strokewidth: 2, }), [color], ); - if (!preferences.rois.annotations.feretDiameters.enabled) return null; + const textStyle: CSSProperties = useMemo( + () => ({ + fill: fontColor, + fontSize, + textAnchor: 'middle', + dominantBaseline: 'central', + }), + [fontColor, fontSize], + ); + + if (!enabled && !displayValue) return null; return ( <> - {lines.map(({ x1, y1, x2, y2 }, index) => ( - - ))} + {lines.map(({ x1, y1, x2, y2, length }, index) => { + const rotation = Math.atan((y2 - y1) / (x2 - x1)) * (180 / Math.PI); + const x = x2 > x1 ? (x2 + x1 + 2) / 2 : (x2 + x1 - 2) / 2; + const y = y1 > y2 ? (y2 + y1 + 2) / 2 : (y2 + y1 - 2) / 2; + return ( + + {enabled && ( + + )} + {displayValue && ( + + {length.toFixed(2)} + + )} + + ); + })} ); } diff --git a/src/components/roi/annotation/MBRAnnotation.tsx b/src/components/roi/annotation/MBRAnnotation.tsx index 03ef23c..7ad9f8a 100644 --- a/src/components/roi/annotation/MBRAnnotation.tsx +++ b/src/components/roi/annotation/MBRAnnotation.tsx @@ -16,10 +16,8 @@ function MBRAnnotation({ roi }: MBRAnnotationProps) { [roi.mbr.points], ); const preferences = usePreferences(); - const color = useMemo( - () => preferences.rois.annotations.minimalBoundingRectangle.color, - [preferences.rois.annotations.minimalBoundingRectangle.color], - ); + const { color, enabled, fontSize, fontColor, displayValue } = + preferences.rois.annotations.minimalBoundingRectangle; const polygonStyle: CSSProperties = useMemo( () => ({ @@ -29,12 +27,28 @@ function MBRAnnotation({ roi }: MBRAnnotationProps) { }), [color], ); + const textStyle: CSSProperties = useMemo( + () => ({ + fill: fontColor, + fontSize, + textAnchor: 'middle', + dominantBaseline: 'text-after-edge', + }), + [fontColor, fontSize], + ); - if (!preferences.rois.annotations.minimalBoundingRectangle.enabled) { - return null; - } + if (!enabled && !displayValue) return null; - return ; + return ( + + {enabled && } + {displayValue && ( + + {roi.width} x {roi.height} ({roi.surface} pixels) + + )} + + ); } export default memo(MBRAnnotation); diff --git a/src/components/roi/annotation/ROIAnnotation.tsx b/src/components/roi/annotation/ROIAnnotation.tsx index e9b3741..8e93097 100644 --- a/src/components/roi/annotation/ROIAnnotation.tsx +++ b/src/components/roi/annotation/ROIAnnotation.tsx @@ -4,6 +4,7 @@ import { memo, useMemo } from 'react'; import ConvexHullAnnotation from './ConvexHullAnnotation'; import FeretAnnotation from './FeretAnnotation'; import MBRAnnotation from './MBRAnnotation'; +import SurfaceAnnotation from './SurfaceAnnotation'; interface ROIAnnotationProps { roi: Roi; @@ -15,6 +16,7 @@ function ROIAnnotation({ roi }: ROIAnnotationProps) { return ( + diff --git a/src/components/roi/annotation/SurfaceAnnotation.tsx b/src/components/roi/annotation/SurfaceAnnotation.tsx new file mode 100644 index 0000000..5b5395b --- /dev/null +++ b/src/components/roi/annotation/SurfaceAnnotation.tsx @@ -0,0 +1,38 @@ +import { Roi } from 'image-js'; +import { CSSProperties, memo, useMemo } from 'react'; + +import usePreferences from '../../../hooks/usePreferences'; + +interface SurfaceAnnotationProps { + roi: Roi; +} + +function SurfaceAnnotation({ roi }: SurfaceAnnotationProps) { + const preferences = usePreferences(); + + const { color, enabled } = preferences.rois.annotations.surface; + + const rectStyle: CSSProperties = useMemo( + () => ({ + fill: color, + stroke: color, + strokeWidth: 0.1, + }), + [color], + ); + + if (!enabled) return null; + + return roi.points.map(([column, row]) => ( + + )); +} + +export default memo(SurfaceAnnotation); diff --git a/src/state/preferences/PreferencesReducer.ts b/src/state/preferences/PreferencesReducer.ts index 3bbd25d..04c6ef6 100644 --- a/src/state/preferences/PreferencesReducer.ts +++ b/src/state/preferences/PreferencesReducer.ts @@ -30,6 +30,7 @@ export const availableAnnotations = [ 'convexHull', 'minimalBoundingRectangle', 'feretDiameters', + 'surface', ] as const; export type RoiColumn = (typeof availableRoiColumns)[number]; @@ -38,6 +39,9 @@ export type AnnotationsPreferences = { [key in AnnotationType]: { enabled: boolean; color: string; + fontColor: string; + fontSize: number; + displayValue: boolean; }; }; @@ -57,14 +61,30 @@ export const initialPreferencesState: PreferencesState = { convexHull: { enabled: true, color: '#ff0000', + fontColor: '#ff0000', + fontSize: 2, + displayValue: true, }, minimalBoundingRectangle: { enabled: true, color: '#0000ff', + fontColor: '#0000ff', + fontSize: 2, + displayValue: true, }, feretDiameters: { enabled: true, - color: '#000000', + color: '#ff00ff', + fontColor: '#ff00ff', + fontSize: 2, + displayValue: true, + }, + surface: { + enabled: false, + color: '#00ff00', + fontColor: '#00ff00', + fontSize: 2, + displayValue: true, }, }, },