From 26ae6cf627dd787b411583cb0a58b2301000bf65 Mon Sep 17 00:00:00 2001 From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com> Date: Tue, 14 May 2024 14:16:19 -0400 Subject: [PATCH 1/8] adding tanstack packages --- package-lock.json | 284 ++++++++++++++++++++++- package.json | 2 + src/components/tanstack/base-tanstack.js | 0 3 files changed, 285 insertions(+), 1 deletion(-) create mode 100644 src/components/tanstack/base-tanstack.js diff --git a/package-lock.json b/package-lock.json index 03572a38..5dcd67a5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@mui/icons-material": "^5.15.15", "@mui/joy": "^5.0.0-beta.36", "@mui/material": "^5.15.15", + "@tanstack/react-query": "^5.36.0", "axios": "^1.6.7", "core-js": "^3.36.0", "d3": "^7.8.5", @@ -35,6 +36,7 @@ "@babel/preset-react": "^7.23.3", "@eslint/js": "^9.1.1", "@faker-js/faker": "^8.4.1", + "@tanstack/eslint-plugin-query": "^5.35.6", "arg": "^5.0.2", "babel-loader": "^9.1.3", "clean-webpack-plugin": "^4.0.0", @@ -4854,6 +4856,46 @@ "@sinonjs/commons": "^3.0.0" } }, + "node_modules/@tanstack/eslint-plugin-query": { + "version": "5.35.6", + "resolved": "https://registry.npmjs.org/@tanstack/eslint-plugin-query/-/eslint-plugin-query-5.35.6.tgz", + "integrity": "sha512-XhVRLsJFJMWYNzArPzy1MWSpx2BSUnc8Zof+fvsgaAnWBy9tjNXH3DFftZoNMGA8Mw1dPIdDPkEQcSku3m80Jw==", + "dev": true, + "dependencies": { + "@typescript-eslint/utils": "^6.20.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "eslint": "^8.0.0" + } + }, + "node_modules/@tanstack/query-core": { + "version": "5.36.0", + "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.36.0.tgz", + "integrity": "sha512-B5BD3pg/mztDR36i77hGcyySKKeYrbM5mnogOROTBi1SUml5ByRK7PGUUl16vvubvQC+mSnqziFG/VIy/DE3FQ==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, + "node_modules/@tanstack/react-query": { + "version": "5.36.0", + "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.36.0.tgz", + "integrity": "sha512-BATvtM0rohwg7pRHUnxgeDiwLWRGZ8OM/4y8LImHVpecQWoH6Uhytu3Z8YV6V7hQ1sMQBFcUrGE1/e4MxR6YiA==", + "dependencies": { + "@tanstack/query-core": "5.36.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "react": "^18.0.0" + } + }, "node_modules/@types/babel__core": { "version": "7.20.5", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz", @@ -5195,6 +5237,12 @@ "integrity": "sha512-XISRgDJ2Tc5q4TRqvgJtzsRkFYNJzZrhTdtMoGVBttwzzQJkPnS3WWTFc7kuDRoPtPakl+T+OfdEUjYJj7Jbow==", "dev": true }, + "node_modules/@types/semver": { + "version": "7.5.8", + "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.8.tgz", + "integrity": "sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==", + "dev": true + }, "node_modules/@types/send": { "version": "0.17.4", "resolved": "https://registry.npmjs.org/@types/send/-/send-0.17.4.tgz", @@ -5264,6 +5312,180 @@ "integrity": "sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==", "dev": true }, + "node_modules/@typescript-eslint/scope-manager": { + "version": "6.21.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.21.0.tgz", + "integrity": "sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==", + "dev": true, + "dependencies": { + "@typescript-eslint/types": "6.21.0", + "@typescript-eslint/visitor-keys": "6.21.0" + }, + "engines": { + "node": "^16.0.0 || >=18.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + } + }, + "node_modules/@typescript-eslint/types": { + "version": "6.21.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.21.0.tgz", + "integrity": "sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==", + "dev": true, + "engines": { + "node": "^16.0.0 || >=18.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + } + }, + "node_modules/@typescript-eslint/typescript-estree": { + "version": "6.21.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.21.0.tgz", + "integrity": "sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==", + "dev": true, + "dependencies": { + "@typescript-eslint/types": "6.21.0", + "@typescript-eslint/visitor-keys": "6.21.0", + "debug": "^4.3.4", + "globby": "^11.1.0", + "is-glob": "^4.0.3", + "minimatch": "9.0.3", + "semver": "^7.5.4", + "ts-api-utils": "^1.0.1" + }, + "engines": { + "node": "^16.0.0 || >=18.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/@typescript-eslint/typescript-estree/node_modules/array-union": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz", + "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/@typescript-eslint/typescript-estree/node_modules/globby": { + "version": "11.1.0", + "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz", + "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==", + "dev": true, + "dependencies": { + "array-union": "^2.1.0", + "dir-glob": "^3.0.1", + "fast-glob": "^3.2.9", + "ignore": "^5.2.0", + "merge2": "^1.4.1", + "slash": "^3.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@typescript-eslint/typescript-estree/node_modules/semver": { + "version": "7.6.2", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz", + "integrity": "sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==", + "dev": true, + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/@typescript-eslint/typescript-estree/node_modules/slash": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", + "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/@typescript-eslint/utils": { + "version": "6.21.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.21.0.tgz", + "integrity": "sha512-NfWVaC8HP9T8cbKQxHcsJBY5YE1O33+jpMwN45qzWWaPDZgLIbo12toGMWnmhvCpd3sIxkpDw3Wv1B3dYrbDQQ==", + "dev": true, + "dependencies": { + "@eslint-community/eslint-utils": "^4.4.0", + "@types/json-schema": "^7.0.12", + "@types/semver": "^7.5.0", + "@typescript-eslint/scope-manager": "6.21.0", + "@typescript-eslint/types": "6.21.0", + "@typescript-eslint/typescript-estree": "6.21.0", + "semver": "^7.5.4" + }, + "engines": { + "node": "^16.0.0 || >=18.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependencies": { + "eslint": "^7.0.0 || ^8.0.0" + } + }, + "node_modules/@typescript-eslint/utils/node_modules/semver": { + "version": "7.6.2", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz", + "integrity": "sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==", + "dev": true, + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/@typescript-eslint/visitor-keys": { + "version": "6.21.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.21.0.tgz", + "integrity": "sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==", + "dev": true, + "dependencies": { + "@typescript-eslint/types": "6.21.0", + "eslint-visitor-keys": "^3.4.1" + }, + "engines": { + "node": "^16.0.0 || >=18.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + } + }, + "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": { + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz", + "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==", + "dev": true, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, "node_modules/@ungap/structured-clone": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz", @@ -8457,6 +8679,18 @@ "node": "^14.15.0 || ^16.10.0 || >=18.0.0" } }, + "node_modules/dir-glob": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz", + "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==", + "dev": true, + "dependencies": { + "path-type": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/dns-packet": { "version": "5.6.1", "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-5.6.1.tgz", @@ -9471,6 +9705,34 @@ "node": ">=6.0.0" } }, + "node_modules/fast-glob": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz", + "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==", + "dev": true, + "dependencies": { + "@nodelib/fs.stat": "^2.0.2", + "@nodelib/fs.walk": "^1.2.3", + "glob-parent": "^5.1.2", + "merge2": "^1.3.0", + "micromatch": "^4.0.4" + }, + "engines": { + "node": ">=8.6.0" + } + }, + "node_modules/fast-glob/node_modules/glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dev": true, + "dependencies": { + "is-glob": "^4.0.1" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/fast-json-stable-stringify": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz", @@ -13669,6 +13931,15 @@ "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==", "dev": true }, + "node_modules/merge2": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", + "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==", + "dev": true, + "engines": { + "node": ">= 8" + } + }, "node_modules/methods": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz", @@ -17577,6 +17848,18 @@ "dev": true, "peer": true }, + "node_modules/ts-api-utils": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz", + "integrity": "sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==", + "dev": true, + "engines": { + "node": ">=16" + }, + "peerDependencies": { + "typescript": ">=4.2.0" + } + }, "node_modules/tslib": { "version": "2.6.2", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", @@ -17715,7 +17998,6 @@ "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz", "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==", "dev": true, - "optional": true, "peer": true, "bin": { "tsc": "bin/tsc", diff --git a/package.json b/package.json index 477e6012..89b678db 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "@babel/preset-react": "^7.23.3", "@eslint/js": "^9.1.1", "@faker-js/faker": "^8.4.1", + "@tanstack/eslint-plugin-query": "^5.35.6", "arg": "^5.0.2", "babel-loader": "^9.1.3", "clean-webpack-plugin": "^4.0.0", @@ -50,6 +51,7 @@ "@mui/icons-material": "^5.15.15", "@mui/joy": "^5.0.0-beta.36", "@mui/material": "^5.15.15", + "@tanstack/react-query": "^5.36.0", "axios": "^1.6.7", "core-js": "^3.36.0", "d3": "^7.8.5", diff --git a/src/components/tanstack/base-tanstack.js b/src/components/tanstack/base-tanstack.js new file mode 100644 index 00000000..e69de29b From b640808a124482b7ec0a920205e51c89cc951294 Mon Sep 17 00:00:00 2001 From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com> Date: Tue, 14 May 2024 16:25:41 -0400 Subject: [PATCH 2/8] tidying up comments, code --- src/components/dialog/base-floating-dialog.js | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/src/components/dialog/base-floating-dialog.js b/src/components/dialog/base-floating-dialog.js index 1d04c5b1..cec41b21 100644 --- a/src/components/dialog/base-floating-dialog.js +++ b/src/components/dialog/base-floating-dialog.js @@ -26,11 +26,12 @@ BaseFloatingDialog.propTypes = { * This is a component that displays a floating dialog with the content passed. * Note: this component * - * @param title: string - * @param dialogObject: {JSX.Element} - * @param dataKey: - * @param dataList: - * @param setDataList: + * @param title - the name of the dialog: string + * @param dialogObject the object to render in the dialog: {JSX.Element} + * @param dataKey - the key to the data list elements in state: string + * @param dataList - a data list in state: array + * @param setDataList - method to update a data list in state: function + * @param map - a reference to the map state: object */ export default function BaseFloatingDialog({ title, dialogObject, dataKey, dataList, setDataList, map} ) { /** @@ -84,15 +85,16 @@ export default function BaseFloatingDialog({ title, dialogObject, dataKey, dataL function PaperComponent(props) { return ( - + ); } /** * This creates an animated transition for the dialog that pops up + * * @type {React.ForwardRefExoticComponent & React.RefAttributes>} */ const Transition = React.forwardRef(function Transition(props, ref) { - return ; + return ; }); \ No newline at end of file From a5a341d7e50ca4976af2c0bab063e332f8234861 Mon Sep 17 00:00:00 2001 From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com> Date: Wed, 15 May 2024 18:05:57 -0400 Subject: [PATCH 3/8] adding axios --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 89b678db..e795803d 100644 --- a/package.json +++ b/package.json @@ -52,7 +52,7 @@ "@mui/joy": "^5.0.0-beta.36", "@mui/material": "^5.15.15", "@tanstack/react-query": "^5.36.0", - "axios": "^1.6.7", + "axios": "^1.6.8", "core-js": "^3.36.0", "d3": "^7.8.5", "dotenv": "^16.4.5", From d574e8e26f2ef88843d58ee857e766740590543f Mon Sep 17 00:00:00 2001 From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com> Date: Wed, 15 May 2024 18:06:04 -0400 Subject: [PATCH 4/8] adding axios --- package-lock.json | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5dcd67a5..0a17cf44 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,7 @@ "@mui/joy": "^5.0.0-beta.36", "@mui/material": "^5.15.15", "@tanstack/react-query": "^5.36.0", - "axios": "^1.6.7", + "axios": "^1.6.8", "core-js": "^3.36.0", "d3": "^7.8.5", "dotenv": "^16.4.5", @@ -4873,20 +4873,20 @@ } }, "node_modules/@tanstack/query-core": { - "version": "5.36.0", - "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.36.0.tgz", - "integrity": "sha512-B5BD3pg/mztDR36i77hGcyySKKeYrbM5mnogOROTBi1SUml5ByRK7PGUUl16vvubvQC+mSnqziFG/VIy/DE3FQ==", + "version": "5.36.1", + "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.36.1.tgz", + "integrity": "sha512-BteWYEPUcucEu3NBcDAgKuI4U25R9aPrHSP6YSf2NvaD2pSlIQTdqOfLRsxH9WdRYg7k0Uom35Uacb6nvbIMJg==", "funding": { "type": "github", "url": "https://github.com/sponsors/tannerlinsley" } }, "node_modules/@tanstack/react-query": { - "version": "5.36.0", - "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.36.0.tgz", - "integrity": "sha512-BATvtM0rohwg7pRHUnxgeDiwLWRGZ8OM/4y8LImHVpecQWoH6Uhytu3Z8YV6V7hQ1sMQBFcUrGE1/e4MxR6YiA==", + "version": "5.36.1", + "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.36.1.tgz", + "integrity": "sha512-BxGdE0DQYcLYJoEWVerxgT8iLLbjM8DOB8C0ASwyLeJZC2hqYYjWa8g4KQOaquB2Z+tf7qsH5FS63fvCoX+eVA==", "dependencies": { - "@tanstack/query-core": "5.36.0" + "@tanstack/query-core": "5.36.1" }, "funding": { "type": "github", From 682b4b6eceb23b626cd0e7ee7e04e459cad78295 Mon Sep 17 00:00:00 2001 From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com> Date: Wed, 15 May 2024 18:06:48 -0400 Subject: [PATCH 5/8] removing --- src/components/tanstack/base-tanstack.js | 0 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 src/components/tanstack/base-tanstack.js diff --git a/src/components/tanstack/base-tanstack.js b/src/components/tanstack/base-tanstack.js deleted file mode 100644 index e69de29b..00000000 From a04027c11799e4603c4b3eff14a1965c54ce983a Mon Sep 17 00:00:00 2001 From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com> Date: Wed, 15 May 2024 18:07:36 -0400 Subject: [PATCH 6/8] implementing tanstack for data retrieval --- src/components/dialog/observation-chart.js | 134 ++++++++++++--------- 1 file changed, 78 insertions(+), 56 deletions(-) diff --git a/src/components/dialog/observation-chart.js b/src/components/dialog/observation-chart.js index 6f2f23d3..07b55621 100644 --- a/src/components/dialog/observation-chart.js +++ b/src/components/dialog/observation-chart.js @@ -1,18 +1,89 @@ -import React, {Fragment, useState, useEffect} from 'react'; +import React, {Fragment} from 'react'; import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts'; +import axios from 'axios'; +import { useQuery, QueryClient, QueryClientProvider } from '@tanstack/react-query'; -import PropTypes from 'prop-types'; +const queryClient = new QueryClient(); -// define the properties of this component -ObservationChart.propTypes = { - dataUrl: PropTypes.string -}; +/** + * renders the observations as a chart + * + * @param dataUrl + * @returns {JSX.Element} + * @constructor + */ +export default function ObservationChart(url) { + // render the chart + return ( + + + + ); +} + +/** + * Retrieves and returns the chart data in json format + * + * @param url + * @returns { json } + */ +function getObsChartData(url) { + // return the data to the caller + return useQuery( { + // specify the data key and url to use + queryKey: ['apsviz-data', url], + + // create the function to call for data + queryFn: async () => { + // make the call to get the data + const { data } = await axios.get(url); + + // return the csv data in json format + return csvToJSON(data); + } + }); +} + +/** + * Creates the chart. + * + * @param url + * @returns {JSX.Element} + * @constructor + */ +function CreateObsChart(url) { + // call to get the data. expect back some information too + const { status, data, error } = getObsChartData(url.url); + + // render the chart + return ( + + { status === 'pending' ? ( + 'Loading...' + ) : status === 'error' ? ( + Error: {error.message} + ) : ( + + + + + + + + + + + + )} + + ); +} /** * converts CSV data into json format * * @param csvData - * @returns {*[]} + * @returns { json [] } */ function csvToJSON(csvData) { // ensure that there is csv data to convert @@ -57,52 +128,3 @@ function csvToJSON(csvData) { return ret_val; } } - -/** - * renders the observations as a chart - * - * @param dataUrl - * @returns {JSX.Element} - * @constructor - */ -export default function ObservationChart(dataUrl) { - // store the station observation data in state - const [stationObs, setStationObs] = useState(""); - - // get the data - useEffect( () => { - const fetchData = () => { - return fetch(dataUrl.dataUrl) - .then(res => { - return res.text(); - }) - .then(data => { - setStationObs(csvToJSON(data)); - // console.log(JSON.stringify(data)); - }) - .catch(err => { - console.log(err); - }); - }; - - // finish off the data retrieval - fetchData().then(); - }, [dataUrl]); - - // render the chart. - return ( - - - - - - - - - - - - - - ); -}; From 40332de17d3c72adedadd383448be4b8d5a73f20 Mon Sep 17 00:00:00 2001 From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com> Date: Wed, 15 May 2024 18:07:50 -0400 Subject: [PATCH 7/8] tidying up code --- src/components/dialog/observation-dialog.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/dialog/observation-dialog.js b/src/components/dialog/observation-dialog.js index b03b3802..e8c5f339 100644 --- a/src/components/dialog/observation-dialog.js +++ b/src/components/dialog/observation-dialog.js @@ -20,13 +20,10 @@ export const ObservationDialog = (obs_data) => { // create a graph using data from this url const graphObj = (url) => { - // create the data object - const args = { dataUrl: url }; - // create the chart return ( - + ); }; From 8f1931a606f40ef0e1bdef14aede8148154a4e8f Mon Sep 17 00:00:00 2001 From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com> Date: Wed, 15 May 2024 18:08:26 -0400 Subject: [PATCH 8/8] tidying up comments --- src/components/dialog/base-floating-dialog.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/dialog/base-floating-dialog.js b/src/components/dialog/base-floating-dialog.js index cec41b21..86917964 100644 --- a/src/components/dialog/base-floating-dialog.js +++ b/src/components/dialog/base-floating-dialog.js @@ -12,7 +12,7 @@ import Paper from '@mui/material/Paper'; import Slide from '@mui/material/Slide'; import { markUnclicked } from '@utils/map-utils'; -// define the properties of this component +// define the properties of this component's input BaseFloatingDialog.propTypes = { title: PropTypes.string, dialogObject: PropTypes.any, @@ -92,9 +92,9 @@ function PaperComponent(props) { /** * This creates an animated transition for the dialog that pops up - * +* * @type {React.ForwardRefExoticComponent & React.RefAttributes>} */ const Transition = React.forwardRef(function Transition(props, ref) { return ; -}); \ No newline at end of file +});