haddock3 icon indicating copy to clipboard operation
haddock3 copied to clipboard

Replace haddock3-analysis-components with haddock3-ui package

Open sverhoeven opened this issue 1 year ago • 10 comments

You are about to submit a new Pull Request. Before continuing make sure you read the contributing guidelines.

Checklist

  • [ ] Tests added for the new code
  • [ ] Documentation added for the code changes
  • [x] Does not break licensing
  • [x] Does not add any dependencies, if it does please add a thorough explanation

Summary of the Pull Request

I made 2 npm packages

  1. https://www.npmjs.com/package/@i-vresse/haddock3-ui
  2. https://www.npmjs.com/package/@i-vresse/haddock3-analysis-components

The haddock3-ui package now can do everything the haddock3-analysis-components can do. So I want to archive the haddock3-analysis-components GitHub repo.

This PR uses the haddock3-ui package for rendering tables of clusters and structures.

This PR also implements offline mode for the table in the report.html, no urls outside the local web server are requested.

Related Issue

https://github.com/i-VRESSE/haddock3-ui/issues/6

Additional Info

0 0 0 0_8000_analysis_10_caprieval_analysis_report html 0 0 0 0_8000_analysis_10_caprieval_analysis_report html (1) 0 0 0 0_8000_analysis_02_caprieval_analysis_report html

sverhoeven avatar Sep 16 '24 09:09 sverhoeven

To which extend we could also ship the haddock3-ui when installing haddock3, so the offline = true would also be functional ?

VGPReys avatar Sep 18 '24 06:09 VGPReys

I see that plotly menu is on top of the cluster legend (see screenshot) Screenshot 2024-09-18 at 09-08-41 Analysis report of step 9_caprieval

VGPReys avatar Sep 18 '24 07:09 VGPReys

To which extend we could also ship the haddock3-ui when installing haddock3, so the offline = true would also be functional ?

Working on offline mode in https://github.com/i-VRESSE/haddock3-ui/pull/9 . How would we like to use the haddock3-ui js bundle?

  1. As an external file,
    1. next to report.html,
    2. somewhere within run_dir for reusing same js file.
  2. JS embedded inside report.html

sverhoeven avatar Sep 19 '24 09:09 sverhoeven

To which extend we could also ship the haddock3-ui when installing haddock3, so the offline = true would also be functional ?

Working on offline mode in i-VRESSE/haddock3-ui#9 . How would we like to use the haddock3-ui js bundle?

1. As an external file,
   
   1. next to report.html,
   2. somewhere within run_dir for reusing same js file.

2. JS embedded inside report.html

Good question! design choice I guess.

  • Can't it be somewhere in the haddock3 installation repository ? Like haddock3/js-bundle/haddock3-ui.js?

  • Or maybe we want to have it contained in the run_dir somewhere, so results are self sufficient and can be separated from the code. I guess this is the best option. Could be placed in the data directory: run_dir/data/ui/haddock3-ui.js.

@rvhonorato , @amjjbonvin please provide input for this

VGPReys avatar Sep 19 '24 12:09 VGPReys

How large is the js file?

amjjbonvin avatar Sep 20 '24 06:09 amjjbonvin

The js file is 1.5Mb and the css file 11Kb.

@VGPReys indeed I was thinking of making it part of the haddock3 installation (using a similar mechanism as used to download cns executables in #1013) and then during analysis copy the css+js files to the run_dir, as the web server must have the css+js files in the directory it is hosting.

sverhoeven avatar Sep 20 '24 07:09 sverhoeven

Offline example

In examples/scoring dir created capri-scoring-test.offline.cfg with

# ===================================================================================
# CAPRI Scoring example
# ===================================================================================
# The Critical Assessment of PRedicted Interactions (CAPRI) experiment
#  aims to do test methods that model macromolecular interactions in
#  blind predictions based on the three-dimensional structures of proteins.
# For more information, please visit: https://www.ebi.ac.uk/pdbe/complex-pred/capri/
# ===================================================================================
run_dir = "capriscoring-test"

# execution mode
ncores = 40
mode = "local"
offline = true

# molecules to be scored (an ensemble PBD)
molecules = "data/T161-rescoring-ens.pdb"

# ===================================================================================
[topoaa]

[emscoring]

[caprieval]

[clustfcc]
min_population = 2

[seletopclusts]
top_cluster = 1
top_models = 2

[mdscoring]
per_interface_scoring = true

[clustfcc]
min_population = 2

[seletopclusts]

[caprieval]

# ===================================================================================

Ran with

rm -r capriscoring-test
haddock3 capri-scoring-test.offline.cfg
mkdir capriscoring-test/data/ui
curl -o capriscoring-test/data/ui/report.bundle.js https://cdn.jsdelivr.net/npm/@i-vresse/haddock3-ui@~0.3.0/dist/report.bundle.js
curl -o capriscoring-test/data/ui/index.css https://cdn.jsdelivr.net/npm/@i-vresse/haddock3-ui@~0.3.0/dist/index.css

sverhoeven avatar Sep 20 '24 09:09 sverhoeven

@rvhonorato At https://github.com/haddocking/haddock3/pull/1025#issuecomment-2363320459 I am working on rendering tables in offline mode. To do that I need to copy a css and js file from the haddock3 installation.

How can we make those files part of the haddock3 installation? I see several options:

  1. Use custombuild step similar to https://github.com/haddocking/haddock3/pull/1013 to download files.
  2. have the files be part of the repo and have a script to update them.
  3. Have a haddock3-ui python package that contains the js and css files and is a dependency of haddock3 package.

What has your preference?

sverhoeven avatar Sep 20 '24 09:09 sverhoeven

I went for option 2 so a 1.5Mb js file will be part of the repo.

sverhoeven avatar Sep 20 '24 11:09 sverhoeven

I see that plotly menu is on top of the cluster legend (see screenshot) Screenshot 2024-09-18 at 09-08-41 Analysis report of step 9_caprieval

Fixed with https://github.com/i-VRESSE/haddock3/commit/d24a510d70727488465ce28f01a5bef3a649b92c

sverhoeven avatar Sep 20 '24 13:09 sverhoeven

@VGPReys you beat me with #1041, so I will solve the conflicts.

sverhoeven avatar Oct 02 '24 14:10 sverhoeven

@VGPReys you beat me with #1041, so I will solve the conflicts.

Oops... I did not realized that you also worked on it !

VGPReys avatar Oct 02 '24 14:10 VGPReys

@VGPReys you beat me with #1041, so I will solve the conflicts.

Oops... I did not realized that you also worked on it !

No worries, conflicts have been resolved.

sverhoeven avatar Oct 04 '24 06:10 sverhoeven