From bb2299f4406b29a3377f6992d1dae09c1b603e4d Mon Sep 17 00:00:00 2001 From: Marcus Baw Date: Wed, 26 Jul 2023 18:31:07 +0100 Subject: [PATCH 1/7] Add Marcus Baw as a reviewer of this page --- docs/parents/faqs-parents.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/parents/faqs-parents.md b/docs/parents/faqs-parents.md index d90b2cd..448343a 100644 --- a/docs/parents/faqs-parents.md +++ b/docs/parents/faqs-parents.md @@ -1,6 +1,6 @@ --- title: Frequently Asked Questions -reviewers: Dr Anchit Chandran +reviewers: Dr Anchit Chandran, Dr Marcus Baw --- ### I didn’t breastfeed, or I stopped early – are these charts still right for my baby? From 672c0b76a475cb51155af2dcddd3625b1468853a Mon Sep 17 00:00:00 2001 From: Marcus Baw Date: Wed, 26 Jul 2023 18:31:28 +0100 Subject: [PATCH 2/7] creates new developer docs page for the React client --- docs/developer/react-client.md | 47 ++++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 docs/developer/react-client.md diff --git a/docs/developer/react-client.md b/docs/developer/react-client.md new file mode 100644 index 0000000..8362998 --- /dev/null +++ b/docs/developer/react-client.md @@ -0,0 +1,47 @@ +--- +title: React Client +reviewers: Dr Simon Chapman, Dr Marcus Baw + +--- + +## Developer documentation + +The demonstration React client for the dGC API is built in React and styled with Semantic UI React. It is intended as a good starting point for understanding the dGC API backend and serves as a prototype client from which you can build your own client, if that is what you require. + +It's important to understand the three parts of the dGC platform that are in play here: + +1. **React client application** - this comprises the left sidebar with the input boxes and UI tools for inputting data such as heights, weights, age, sex, and gestation at birth. When data are entered, the React client sends a HTTP request to the + +1. **dGC API server** - which proccesses the data and returns a JSON response containing calculated centile data, corrected gestational ages, etc. This response is received by the React client which passes it direct into the React chart component without any transformation being required + +1. **React chart component** - this is the right hand side section of the screen in the demo client. The component can be embedded in any web page and it natively 'understands' the JSON response from the API call. Passing an array of JSON API responses to the React chart component will result in all those measurements being plotted for you. + +### Set Up for local development using Docker + +1. Clone the React Client repo +```console +git clone https://github.com/rcpch/digital-growth-charts-react-client.git +``` + +1. Build the Docker image +```console +s/docker-rebuild +``` + +1. Start the Docker container +```console +s/docker-start +``` + +1. Open the React Client in your browser +```console +open http://localhost:3000 +``` + +If you make changes to the dependencies you will need to rebuild the Docker image using `s/docker-rebuild` and restart the Docker container using `s/docker-start`. + + + +### Style + +We recommend the use of the Prettier Javascript linter. From 81c0b8080d4d06c35d1f5b89dcfc362d592eab3d Mon Sep 17 00:00:00 2001 From: Marcus Baw Date: Wed, 26 Jul 2023 18:31:52 +0100 Subject: [PATCH 3/7] fixes the badges which had some malformed html/handlebars gumbo in them --- docs/products/react-client.md | 41 +++++++++++------------------------ 1 file changed, 13 insertions(+), 28 deletions(-) diff --git a/docs/products/react-client.md b/docs/products/react-client.md index 2c98fc7..78d28c6 100644 --- a/docs/products/react-client.md +++ b/docs/products/react-client.md @@ -10,7 +10,7 @@ reviewers: Dr Marcus Baw, Dr Anchit Chandran [![Github Issues](https://img.shields.io/github/issues/{{ repository_name }})](https://github.com/{{ repository_name }}/issues) [![Github Stars](https://img.shields.io/github/stars/{{ repository_name }})](https://github.com/{{ repository_name }}/stargazers) [![Github Forks](https://img.shields.io/github/forks/{{ repository_name }})](https://github.com/{{ repository_name }}/network/members) -[![Github Licence](https://img.shields.io/github/license/{{ repository_name }})](https://github.com/{{repository_name }}/blob/live/LICENSE) +[![Github Licence](https://img.shields.io/github/license/{{ repository_name }})](https://github.com/{{ repository_name }}/blob/live/LICENSE) [![GitHub Pages Build & Deploy](https://github.com/rcpch/digital-growth-charts-react-client/actions/workflows/deploy-react-app-gh-pages.yml/badge.svg)](https://github.com/rcpch/digital-growth-charts-react-client/actions/workflows/deploy-react-app-gh-pages.yml) [:octicons-mark-github-16: GitHub repository](https://github.com/{{ repository_name }}) @@ -25,37 +25,22 @@ This client, written in React.js, is for demonstration of the API and the chart We have attempted to build the very best of growth chart theory and practice into the React client, including guidance given to us by the RCPCH Digital Growth Charts Project Board, and accepted best practice from the days of paper growth charts. -## Clinical notes regarding the React client +## Notes regarding the React client -### Pink and Blue no longer used for the charts +### Colours for the charts have been updated -It was felt that representing boys' charts with blue lines and girls' charts with pink lines did not really fit with 21st Century sensibilities of sex and gender. A Project Board decision was made to remove these colours and simply render the charts in monochrome black/grey, with some more off-the-wall colour themes available for variety and interest only. +It was felt that representing boys' charts with blue lines and girls' charts with pink lines did not necessarily fit with 21st Century sensibilities of sex and gender. A Project Board decision was made to make the default chart colour monochrome black/grey. -## Documentation +'Traditional' growth chart pink and blue colours are available as an option, and we have created som other colour options named after James Tanner who pioneered the study of childrens' growth, showing off the capability of the chart component to be customised. -API documentation can be found [here](../integrator/api-reference.md). - -If you spot errors or inconsistencies in any documentation, please do point them out to us either by creating an Issue in the relevant repository, or by making a pull request with a fix. We will [acknowledge](../about/acknowledgements) all contributors. - -## Developer documentation - -Built in React using Semantic UI React. - -### Set Up - -1. Install React [here](https://reactjs.org/docs/getting-started.html) -1. Clone the repo -1. Navigate to the root of the folder -1. `npm login --registry=https://npm.pkg.github.com` and -1. `npm install` -1. `npm start` - -### Style - -We recommend the use of the Prettier Javascript linter. - -## Other documentation +### Other documentation +- [Clinician documentation](../clinician/how-the-api-works.md) - [Integrator documentation](../integrator/getting-started.md) +- [API documentation](../integrator/api-reference.md) +- [Developer documentation](../developer/react-client.md) - [Contributor documentation](../developer/start-here.md) -- [Clinician documentation](../clinician/how-the-api-works.md) + +--8<-- +docs/_assets/_snippets/docs-contributions.md +--8<-- From 30d45aa828e7bb00216238c2ac971fd242764643 Mon Sep 17 00:00:00 2001 From: Marcus Baw Date: Wed, 26 Jul 2023 18:32:12 +0100 Subject: [PATCH 4/7] adds a docs contributor snippet which we can use in multiple laces --- docs/_assets/_snippets/docs-contributions.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 docs/_assets/_snippets/docs-contributions.md diff --git a/docs/_assets/_snippets/docs-contributions.md b/docs/_assets/_snippets/docs-contributions.md new file mode 100644 index 0000000..c370825 --- /dev/null +++ b/docs/_assets/_snippets/docs-contributions.md @@ -0,0 +1 @@ +If you spot errors or inconsistencies in any documentation, please do point them out to us either by creating an Issue in the relevant repository, or by making a pull request with a fix. We will [acknowledge](../about/acknowledgements) all contributors. From 5b7435264d0732a8ad45ec4b64c34aaebf49dac3 Mon Sep 17 00:00:00 2001 From: Marcus Baw Date: Wed, 26 Jul 2023 18:32:33 +0100 Subject: [PATCH 5/7] adds nav for the react client dev docs --- mkdocs.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/mkdocs.yml b/mkdocs.yml index 61da18a..0c35313 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -48,6 +48,7 @@ nav: - 'developer/api-python.md' - 'developer/api-docker.md' - 'developer/api-testing.md' + - 'developer/react-client.md' - 'developer/rcpchgrowth.md' - 'developer/rcpchgrowth-cli.md' - 'developer/versioning.md' From 380e42c2b8fa642fc22504df2293c747f0a60ef6 Mon Sep 17 00:00:00 2001 From: Marcus Baw Date: Wed, 26 Jul 2023 18:43:44 +0100 Subject: [PATCH 6/7] additional info about how the client, chart and API work together --- docs/developer/react-client.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/developer/react-client.md b/docs/developer/react-client.md index 8362998..cb995e3 100644 --- a/docs/developer/react-client.md +++ b/docs/developer/react-client.md @@ -10,11 +10,11 @@ The demonstration React client for the dGC API is built in React and styled with It's important to understand the three parts of the dGC platform that are in play here: -1. **React client application** - this comprises the left sidebar with the input boxes and UI tools for inputting data such as heights, weights, age, sex, and gestation at birth. When data are entered, the React client sends a HTTP request to the +1. **React client application** - this comprises the left sidebar with the input boxes and UI tools for inputting data such as heights, weights, age, sex, and gestation at birth. The React client imports the React chart component from NPM, so the chart component is a dependency of the client. When data are entered into the forms and submitted, the React client sends a HTTP request to the: -1. **dGC API server** - which proccesses the data and returns a JSON response containing calculated centile data, corrected gestational ages, etc. This response is received by the React client which passes it direct into the React chart component without any transformation being required +1. **dGC API server** - which processes the data and returns a JSON response containing calculated centile data, corrected gestational ages, etc. This response is received by the React client which passes it direct into the React chart component without any JSON transformation being required. -1. **React chart component** - this is the right hand side section of the screen in the demo client. The component can be embedded in any web page and it natively 'understands' the JSON response from the API call. Passing an array of JSON API responses to the React chart component will result in all those measurements being plotted for you. +1. **React chart component** - this is the right hand side two thirds section of the screen in the demo client, containing the chart vector image. The component can be embedded in any web page and it natively 'understands' the JSON response from the API call. Passing an array of JSON API responses to the React chart component will result in all those measurements being plotted for you. ### Set Up for local development using Docker From e0cd25bcd8162818fdcf36ea7041277c51ed80c3 Mon Sep 17 00:00:00 2001 From: Marcus Baw Date: Thu, 5 Oct 2023 15:31:18 +0100 Subject: [PATCH 7/7] adds comment to the 'fetch-depth' directive in the git-checkout command for workflow --- .../ALL-BRANCHES-ALL-PRs-build-and-deploy-to-azure.yml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/.github/workflows/ALL-BRANCHES-ALL-PRs-build-and-deploy-to-azure.yml b/.github/workflows/ALL-BRANCHES-ALL-PRs-build-and-deploy-to-azure.yml index 191a74b..960c5f0 100644 --- a/.github/workflows/ALL-BRANCHES-ALL-PRs-build-and-deploy-to-azure.yml +++ b/.github/workflows/ALL-BRANCHES-ALL-PRs-build-and-deploy-to-azure.yml @@ -1,7 +1,7 @@ # This Action builds the documentation site in mkdocs # and pushes it to Azure from where it is deployed # to the LIVE site https://growth.rcpch.ac.uk/ -# +# # Azure will also build a preview site for any PRs against LIVE or branches name: ALL-BRANCHES-ALL-PRs-build-and-deploy-to-azure.yml @@ -28,7 +28,7 @@ jobs: steps: - uses: actions/checkout@v3 with: - fetch-depth: 0 + fetch-depth: 0 # required for git-revision and git-committers plugins to work properly in CI submodules: true - uses: actions/setup-python@v4 with: @@ -63,5 +63,5 @@ jobs: action: "close" - +