Generate FastAPI client / Flag+Unflag a Molecule / Collapse row when View Similar Structures is clicked

[bodom0015]

Problems

As this API evolves, we will need to continue to add / adjust the client to handle new endpoints / models / properties etc

Fixes #71 Fixes #67
Fixes #79 Fixes #70

Relates to https://github.com/moleculemaker/mmli-backend/pull/29

Approach

• Cache latest mmli-backend spec in the openapi folder
• Generate latest mmli-backend client in the src/app/api folder
• Wire up the API client in app.module.ts and environment.service.ts, so that it can be used in Angular
• refactored the bypassSecurityTrustHtml bit into a reusable Pipe - this allows us to use the generated Molecule model

Added some NPM directives to help us keep the client code in-sync

• Added npm run openapi:sync: download and cache the latest openapi.json file from mmli-backend (prod)
• Added npm run openapi: generate an API client from the cached spec
• Added npm run openapi:live: does both of the above
• Added npm run openapi:sync:local: download and cache the latest openapi.json file from mmli-backend (localhost)
• Added npm run openapi:live:local: download the spec from localhost, and generate an API client from it

How to Test

Generating a client from Production API spec:

1. Checkout and run this branch locally
   • You should see no change in existing functionality
2. Run npm run openapi:sync - this will download the latest spec from mmli-backend (prod)
3. Run npm run openapi - this will generate a new client from the latest spec
4. Execute npm run openapi:live - this will download the latest spec, then generate a client from it

Generating a client from localdev API spec:

1. Checkout and run the mmli-backend locally: (docker compose up -d --build)
2. Set hostname=http://localhost:8080 in assets/config/envvars.json
3. Run npm run openapi:live:local to download the spec from your local mmli-backend and regenerate the client
4. Add a new API endpoint to your local mmli-backend and rerun npm run openapi:live:local
   • You should see that the newly-generated client contains a Service that will call the endpoint that was just added

Flagging / Unflagging a Molecule:

1. Navigate to https://chemscraper.frontend.staging.mmli1.ncsa.illinois.edu/results/516b7ee4-a7bd-4f28-9cf0-7fb6e7d39f1f
   • You should see a new column for "Flagged?"
   • You should see that this column is sortable
2. Click the flag button to flag a molecule
   • You should see the flag is now filled-in with color (flagged status)
3. Click the filled-in flag
   • You should see the flag goes back to unfilled (unflagged) status

Auto-Collapse Expanded Row when clicking "View Similar Structures":

1. Navigate to https://chemscraper.frontend.staging.mmli1.ncsa.illinois.edu/results/516b7ee4-a7bd-4f28-9cf0-7fb6e7d39f1f
2. Expand any row
3. Click on "View Similar Structure"
   • You should see the expanded row now automatically collapses

Notify User about Active Ratelimit:

1. Navigate to https://chemscraper.frontend.staging.mmli1.ncsa.illinois.edu/configuration
2. Upload a file and submit a new ChemScraper job
3. Quickly submit another job (before the ratelimit expires)
   • You should see an alert pop up stating that we've received too many requests, and stating when the user can retry their request

[matthewberry]

Thanks, Sara!