From c31fa238e0f787ea5f389365eeabd9c63bc7a3ec Mon Sep 17 00:00:00 2001 From: sverhoeven Date: Fri, 4 Oct 2024 15:00:34 +0200 Subject: [PATCH 1/4] Make plotly menubar render ok Fixes #101 --- app/components/PlotlyPlot.tsx | 1 + app/components/plotly-override.css | 3 +++ package-lock.json | 4 ++-- 3 files changed, 6 insertions(+), 2 deletions(-) create mode 100644 app/components/plotly-override.css diff --git a/app/components/PlotlyPlot.tsx b/app/components/PlotlyPlot.tsx index 8d194bc3..3623ef40 100644 --- a/app/components/PlotlyPlot.tsx +++ b/app/components/PlotlyPlot.tsx @@ -1,5 +1,6 @@ import Plot from "react-plotly.js"; import type { Data, Layout } from "plotly.js"; +import './plotly-override.css'; export interface PlotlyProps { data: Data[]; diff --git a/app/components/plotly-override.css b/app/components/plotly-override.css new file mode 100644 index 00000000..661f64e8 --- /dev/null +++ b/app/components/plotly-override.css @@ -0,0 +1,3 @@ +.js-plotly-plot .plotly .modebar svg { + display: inline; +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 03d31007..5b5109a7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "haddock3-webapp", - "version": "0.3.4", + "version": "0.3.7", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "haddock3-webapp", - "version": "0.3.4", + "version": "0.3.7", "dependencies": { "@i-vresse/haddock3-ui": "^0.2.2", "@i-vresse/wb-core": "^3.2.1", From 6ca6b1f3684bd9495762527f5b742472f41e7dc7 Mon Sep 17 00:00:00 2001 From: sverhoeven Date: Fri, 4 Oct 2024 13:05:02 +0000 Subject: [PATCH 2/4] Format + prep v0.3.8 --- app/components/PlotlyPlot.tsx | 2 +- app/components/plotly-override.css | 4 ++-- package.json | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/app/components/PlotlyPlot.tsx b/app/components/PlotlyPlot.tsx index 3623ef40..a3a13573 100644 --- a/app/components/PlotlyPlot.tsx +++ b/app/components/PlotlyPlot.tsx @@ -1,6 +1,6 @@ import Plot from "react-plotly.js"; import type { Data, Layout } from "plotly.js"; -import './plotly-override.css'; +import "./plotly-override.css"; export interface PlotlyProps { data: Data[]; diff --git a/app/components/plotly-override.css b/app/components/plotly-override.css index 661f64e8..fea835a8 100644 --- a/app/components/plotly-override.css +++ b/app/components/plotly-override.css @@ -1,3 +1,3 @@ .js-plotly-plot .plotly .modebar svg { - display: inline; -} \ No newline at end of file + display: inline; +} diff --git a/package.json b/package.json index 61e69d14..751781a0 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "haddock3-webapp", "private": true, - "version": "0.3.7", + "version": "0.3.8", "sideEffects": false, "type": "module", "scripts": { From 4453a4c9584a146a580ff817b68673da55baefa6 Mon Sep 17 00:00:00 2001 From: sverhoeven Date: Fri, 4 Oct 2024 13:06:47 +0000 Subject: [PATCH 3/4] Update lock --- package-lock.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5b5109a7..afbb93e2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "haddock3-webapp", - "version": "0.3.7", + "version": "0.3.8", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "haddock3-webapp", - "version": "0.3.7", + "version": "0.3.8", "dependencies": { "@i-vresse/haddock3-ui": "^0.2.2", "@i-vresse/wb-core": "^3.2.1", From bee271b8619fe0ac135f944236993dcfa3b02902 Mon Sep 17 00:00:00 2001 From: sverhoeven Date: Fri, 4 Oct 2024 15:16:03 +0200 Subject: [PATCH 4/4] Move development docs from readme to contibuting --- CONTRIBUTING.md | 87 +++++++++++++++++++++++++++++++++++++++++++++++++ README.md | 86 ++---------------------------------------------- 2 files changed, 90 insertions(+), 83 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index f9ca6487..6314a7a5 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -18,3 +18,90 @@ If you want to make a pull request: By participating in this project, you agree to abide by the [code of conduct](https://github.com/i-VRESSE/haddock3-webapp/blob/main/CODE_OF_CONDUCT.md). + +## Development + +If you want to contribute to the development of the webapp, you can follow the instructions below. + +### Develop inside devcontainer + +You can develop inside a [devcontainer](https://containers.dev/) inside Visual Studio Code. The devcontainer includes all services required by the webapp. + +When you exit VS code the containers will keep running, kill by running `docker compose -f .devcontainer/docker-compose.yml -p haddock3-webapp_devcontainer down` in the terminal or in VS Code reopen folder outside container. + +### Development outside devcontainer + +To develop the webapp ouside a devcontainer you have the following services running: + +1. PostgreSQL database for user management +2. [Bartender web service](https://github.com/i-VRESSE/bartender/) for job executation and input/output storage. +3. [Haddock3 restraints web service]() for calculating restraints on scenario pages. + +The PostgreSQL database can be started in a container with + +```sh +npm run docker:dev +``` + +(Stores data in a Docker volume) +(You can get a psql shell with `npm run psql:dev`) +(On CTRL-C the database is stopped. To remove container and volume use `npm run docker:devrm`) + +The database must be initialized with + +```sh +npm run setup +# This will create tables +``` + +## Start development server + +Start [remix](https://remix.run) development server from your terminal with: + +```sh +npm run dev +``` + +This will refresh & rebuild assets on file changes. + +## Other development commands + +The database setup should be run only once for a fresh database. +Whenever you change the `app/drizzle/schema.server.ts` file you need to run [npm run generate:migration](https://orm.drizzle.team/kit-docs/commands#generate-migrations) to generate a migration, edit generated `app/drizzle/*.sql` file if needed and then run `npm run setup` to apply migration to database. + +To format according to [prettier](https://prettier.io) run + +```sh +npm run format +``` + +It's recommended to install an editor plugin (like the [VSCode Prettier plugin](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)) to get auto-formatting on save. + +To lint according [eslint](https://eslint.org) run + +```sh +npm run lint +``` + +To check the Typescript types run + +```sh +npm run typecheck +``` + +For testing see [docs/testing.md](docs/testing.md). + +## Start production server + +First, build your app for production: + +```sh +npm run build +``` + +Then run the app in production mode: + +```sh +export $(cat .env |grep -v '#' |xargs) +npm start +``` diff --git a/README.md b/README.md index 14ce5ce6..722fa98b 100644 --- a/README.md +++ b/README.md @@ -42,6 +42,7 @@ Web app->>+Bartender: Result of job ## Deployment Deployments with containers are explained in [deploy/README.md](deploy/README.md). +The easiest deployment is with a single worker at [deploy/arq/README.mnd](deploy/arq/README.md). ## Setup @@ -79,7 +80,7 @@ See [docs/bartender.md](docs/bartender.md) how to set it up. ## Haddock3 restraints web service -The scenario forms uses the [haddock3 restraints web service](https://github.com/haddocking/haddock3/blob/main/src/haddock/clis/restraints/webservice.py). to calulate restraints based on given active residues and structures. +The scenario forms uses the [haddock3 restraints web service](https://github.com/haddocking/haddock3/blob/main/src/haddock/clis/restraints/webservice.py). to calculate restraints based on given active residues and structures. For the web application to use this service, it needs to be running with @@ -94,88 +95,7 @@ See [docs/scenarios.md](docs/scenarios.md) for more information on how the web a ## Development -### Develop inside devcontainer - -You can develop inside a [devcontainer](https://containers.dev/) inside Visual Studio Code. The devcontainer includes all services required by the webapp. - -When you exit VS code the containers will keep running, kill by running `docker compose -f .devcontainer/docker-compose.yml -p haddock3-webapp_devcontainer down` in the terminal or in VS Code reopen folder outside container. - -### Development outside devcontainer - -To develop the webapp ouside a devcontainer you have the following services running: - -1. PostgreSQL database for user management -2. [Bartender web service](https://github.com/i-VRESSE/bartender/) for job executation and input/output storage. -3. [Haddock3 restraints web service]() for calculating restraints on scenario pages. - -The PostgreSQL database can be started in a container with - -```sh -npm run docker:dev -``` - -(Stores data in a Docker volume) -(You can get a psql shell with `npm run psql:dev`) -(On CTRL-C the database is stopped. To remove container and volume use `npm run docker:devrm`) - -The database must be initialized with - -```sh -npm run setup -# This will create tables -``` - -## Start development server - -Start [remix](https://remix.run) development server from your terminal with: - -```sh -npm run dev -``` - -This will refresh & rebuild assets on file changes. - -## Other development commands - -The database setup should be run only once for a fresh database. -Whenever you change the `app/drizzle/schema.server.ts` file you need to run [npm run generate:migration](https://orm.drizzle.team/kit-docs/commands#generate-migrations) to generate a migration, edit generated `app/drizzle/*.sql` file if needed and then run `npm run setup` to apply migration to database. - -To format according to [prettier](https://prettier.io) run - -```sh -npm run format -``` - -It's recommended to install an editor plugin (like the [VSCode Prettier plugin](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)) to get auto-formatting on save. - -To lint according [eslint](https://eslint.org) run - -```sh -npm run lint -``` - -To check the Typescript types run - -```sh -npm run typecheck -``` - -For testing see [docs/testing.md](docs/testing.md). - -## Start production server - -First, build your app for production: - -```sh -npm run build -``` - -Then run the app in production mode: - -```sh -export $(cat .env |grep -v '#' |xargs) -npm start -``` +For development instructions see [CONTRIBUTING.md](CONTRIBUTING.md). ## Stack