Skip to content

Commit 32307b3

Browse files
sverhoevensverhoeven
authored
Merge pull request #157 from i-VRESSE/101-plotly-menubar-overlap
Make plotly menubar render ok
2 parents 54736fc + bee271b commit 32307b3

6 files changed

Lines changed: 97 additions & 86 deletions

File tree

‎CONTRIBUTING.md‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,3 +18,90 @@ If you want to make a pull request:
1818

1919
By participating in this project, you agree to abide by the [code of
2020
conduct](https://github.com/i-VRESSE/haddock3-webapp/blob/main/CODE_OF_CONDUCT.md).
21+
22+
## Development
23+
24+
If you want to contribute to the development of the webapp, you can follow the instructions below.
25+
26+
### Develop inside devcontainer
27+
28+
You can develop inside a [devcontainer](https://containers.dev/) inside Visual Studio Code. The devcontainer includes all services required by the webapp.
29+
30+
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.
31+
32+
### Development outside devcontainer
33+
34+
To develop the webapp ouside a devcontainer you have the following services running:
35+
36+
1. PostgreSQL database for user management
37+
2. [Bartender web service](https://github.com/i-VRESSE/bartender/) for job executation and input/output storage.
38+
3. [Haddock3 restraints web service]() for calculating restraints on scenario pages.
39+
40+
The PostgreSQL database can be started in a container with
41+
42+
```sh
43+
npm run docker:dev
44+
```
45+
46+
(Stores data in a Docker volume)
47+
(You can get a psql shell with `npm run psql:dev`)
48+
(On CTRL-C the database is stopped. To remove container and volume use `npm run docker:devrm`)
49+
50+
The database must be initialized with
51+
52+
```sh
53+
npm run setup
54+
# This will create tables
55+
```
56+
57+
## Start development server
58+
59+
Start [remix](https://remix.run) development server from your terminal with:
60+
61+
```sh
62+
npm run dev
63+
```
64+
65+
This will refresh & rebuild assets on file changes.
66+
67+
## Other development commands
68+
69+
The database setup should be run only once for a fresh database.
70+
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.
71+
72+
To format according to [prettier](https://prettier.io) run
73+
74+
```sh
75+
npm run format
76+
```
77+
78+
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.
79+
80+
To lint according [eslint](https://eslint.org) run
81+
82+
```sh
83+
npm run lint
84+
```
85+
86+
To check the Typescript types run
87+
88+
```sh
89+
npm run typecheck
90+
```
91+
92+
For testing see [docs/testing.md](docs/testing.md).
93+
94+
## Start production server
95+
96+
First, build your app for production:
97+
98+
```sh
99+
npm run build
100+
```
101+
102+
Then run the app in production mode:
103+
104+
```sh
105+
export $(cat .env |grep -v '#' |xargs)
106+
npm start
107+
```

‎README.md‎

Lines changed: 3 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ Web app->>+Bartender: Result of job
4242
## Deployment
4343

4444
Deployments with containers are explained in [deploy/README.md](deploy/README.md).
45+
The easiest deployment is with a single worker at [deploy/arq/README.mnd](deploy/arq/README.md).
4546

4647
## Setup
4748

@@ -79,7 +80,7 @@ See [docs/bartender.md](docs/bartender.md) how to set it up.
7980

8081
## Haddock3 restraints web service
8182

82-
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.
83+
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.
8384

8485
For the web application to use this service, it needs to be running with
8586

@@ -94,88 +95,7 @@ See [docs/scenarios.md](docs/scenarios.md) for more information on how the web a
9495

9596
## Development
9697

97-
### Develop inside devcontainer
98-
99-
You can develop inside a [devcontainer](https://containers.dev/) inside Visual Studio Code. The devcontainer includes all services required by the webapp.
100-
101-
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.
102-
103-
### Development outside devcontainer
104-
105-
To develop the webapp ouside a devcontainer you have the following services running:
106-
107-
1. PostgreSQL database for user management
108-
2. [Bartender web service](https://github.com/i-VRESSE/bartender/) for job executation and input/output storage.
109-
3. [Haddock3 restraints web service]() for calculating restraints on scenario pages.
110-
111-
The PostgreSQL database can be started in a container with
112-
113-
```sh
114-
npm run docker:dev
115-
```
116-
117-
(Stores data in a Docker volume)
118-
(You can get a psql shell with `npm run psql:dev`)
119-
(On CTRL-C the database is stopped. To remove container and volume use `npm run docker:devrm`)
120-
121-
The database must be initialized with
122-
123-
```sh
124-
npm run setup
125-
# This will create tables
126-
```
127-
128-
## Start development server
129-
130-
Start [remix](https://remix.run) development server from your terminal with:
131-
132-
```sh
133-
npm run dev
134-
```
135-
136-
This will refresh & rebuild assets on file changes.
137-
138-
## Other development commands
139-
140-
The database setup should be run only once for a fresh database.
141-
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.
142-
143-
To format according to [prettier](https://prettier.io) run
144-
145-
```sh
146-
npm run format
147-
```
148-
149-
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.
150-
151-
To lint according [eslint](https://eslint.org) run
152-
153-
```sh
154-
npm run lint
155-
```
156-
157-
To check the Typescript types run
158-
159-
```sh
160-
npm run typecheck
161-
```
162-
163-
For testing see [docs/testing.md](docs/testing.md).
164-
165-
## Start production server
166-
167-
First, build your app for production:
168-
169-
```sh
170-
npm run build
171-
```
172-
173-
Then run the app in production mode:
174-
175-
```sh
176-
export $(cat .env |grep -v '#' |xargs)
177-
npm start
178-
```
98+
For development instructions see [CONTRIBUTING.md](CONTRIBUTING.md).
17999

180100
## Stack
181101

‎app/components/PlotlyPlot.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import Plot from "react-plotly.js";
22
import type { Data, Layout } from "plotly.js";
3+
import "./plotly-override.css";
34

45
export interface PlotlyProps {
56
data: Data[];

‎app/components/plotly-override.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.js-plotly-plot .plotly .modebar svg {
2+
display: inline;
3+
}

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "haddock3-webapp",
33
"private": true,
4-
"version": "0.3.7",
4+
"version": "0.3.8",
55
"sideEffects": false,
66
"type": "module",
77
"scripts": {

0 commit comments

Comments
 (0)