Table of Contents

KINARI-Web Web development (Summer 2023)

Shuhan Huang

1. Summary (goal)

Completion of the website development for protein visualization, enabling the display of protein molecules, including chemical bonds, molecular clusters, and more, on the frontend pages.

2. Reading (can make subsections for notes)

1.Rego, Nicholas, and David Koes. “3Dmol. js: molecular visualization with WebGL.” Bioinformatics 31.8 (2015): 1322-1324.

2.Burger, Melanie C. “ChemDoodle Web Components: HTML5 toolkit for chemical graphics, interfaces, and informatics.” Journal of cheminformatics 7 (2015): 1-7.

3.An Introduction to Combinatorial Rigidity Methods and Their Applications

4.Rego, Nicholas, and David Koes. “3Dmol. js: molecular visualization with WebGL.” Bioinformatics 31.8 (2015): 1322-1324.

3. Coding

2023/8/1：complete fundamental interactions with ChemDoodle，including read PDB/MOL file，display the number of atoms and bonds。

2023/8/3:Continue to learn Python flask.Learn how to upload file and how to parse file.

upload.html:

<!doctype html> <html> <head> 

  <title>File Upload</title>

</head> <body> 

  <h2>Upload a File</h2>
  <form method="POST" enctype="multipart/form-data" action="/protein">
      <input type="file" name="file">
      <input type="submit" value="Upload">
  </form>

</body> </html>

app.py: def protein(): 

  if 'file' not in request.files:
      return "No file part"
  file = request.files['file']
  if file.filename == '':
      return "No selected file"

4. Research Progress

2023/8/1:

Comparison of Protein Visualization Software: JSmol and ChemDoodle.

Advantages of both:

1.Both can be embedded into HTML, making it convenient for building web-based visualization platforms.

2.Both can read various protein files, including PDB files.

3.Both can generate protein structure visualizations from PDB files and allow operations such as rotation and translation using the mouse.

Advantages of ChemDoodle: 1.Stronger interactivity and comes with corresponding tutorials.

2.Offers a wider range of tutorials for better guidance.

Disadvantages of JSmol:

Relative lack of tutorials and examples.

2023/8/3:

Continue to learn Python flask:

1.learn how to upload file and parse file.

2.learn how to handle the response and request of Web

3.learn how to display html file to Web (use render_template)

Continue to learn ChemDoodle :

Parse file and do some caculations

2023/8/5:

1.Learn An Introduction to Combinatorial Rigidity Methods and Their Applications

2.Study HTML structure and function of KINARI

2023/8/7:

Use ChemDoodle to complete a demo: Read PDB file and display visual protein struture

2023/8/10:

1.Continue to learn python flask

2.Learn conception of body-bar-hinge.

2023/8/13:

1.Go over the background of body-bar-hinge in the meeting Teacher Li had told

2.Find PDB visualizer 3dMol and MolStar

3dMol:Rego, Nicholas, and David Koes. “3Dmol. js: molecular visualization with WebGL.” Bioinformatics 31.8 (2015): 1322-1324.

advantages:

1.enough tutorials

2.easy to be embedded into html5

3.visualization is very nice

2023/8/17:

1.Continue to learn vue

2.Use 3Dmol to finish a simple demo

3.Try to construct editable board for PDB file using 3dMol visualizer

2023/8/20:

1.Constrcut a vue template

2.Embed 3dMol visualizer into vue template

2023/8/21:

online meeting:

1.discuss about former works

2.Put forward to next task:

1)complete B/S framework construction, upload file and parse file, display some statistical work

2)Complete 1hvr.pdb visualization, reach the function that using surface to cover clustering atoms

show the 1ycr.pdb:

2023/8/24:

1.Complete connecting browser to server. Upload PDB file in browser, parse file in server, and then display the protein in browser

2.Complete computing the count of body, atom, bar, hinge in xml file

2023/8/26:

1.Try to parse xml file to realize getting atom array from specific bodyId.

2.Try to add surface to specific atom array

2023/8/27: online meeting:

1.Discuss about my work in last week

2.Put forward to next week's task:

1)show uploaded file name with link to file, add name to title

2) separate showpdb and show surface

3)show only partial surface (check API)

current visualization:

2023/8/30:

1.Complete the display of uploaded filename and link to file

2.Separate reload protein and add surface

2023/9/3:

1.Complete the function of add surface to specific clustering atoms

2023/9/6:

Complete the function of clicking on atom to display the information of atoms.

2023/9/9:

Online meeting:

1.Continue to finish adding surface function of covering different bodies with different colors.

2.Complete the function of selecting multiple bodies.

2023/9/12:

1.Complete the function of adding surface function of covering different bodies with different colors.

2. Add the “Restore” button.

2023/9/15:

1.Complete the function of selecting multiple bodies with the input split by ','.

2.Comlete the selection box to decide the visualized styles of the protein.

2023/9/21:

Complete the function of adding bar between two atoms.

2023/9/24:

Online meeting:

Plan:

1.Reading the pdf of Karina and identify the functions which should be done.

2.Display the sequence of bodyID which contains the most atoms.

3.Set different radius of surface.

4.Add some description of some functions.

5.Display the bars of xml file

Current visualization:

2023/9/29:

Complete reading pdf of Karina and list the functions that should be reconstructed.

2023/10/4:

Finish the function of displaying all bars of xml file.

2023/10/7:

1.Finish the foldable menu of surfaces ,bars ,hinges.

2.Finish the summary of clusters, which contains the largest cluster's number of the bodies.

2023/10/11:

Complete the function of setting threshold for clusters(surface contains atoms larger than xxx).

2023/10/15:

1.Complete the function of displaying atom in cluster where atomic number more than xx

2.Complete the function of displaying atoms in specific clusters

2023/10/22:

1.Continue to finish the function of bars

2.Learn the section of “bars” in the former edition of KINARI.

2023/10/27:

Achieving the function of “Show/Hide only bars incident to highlighted clusters:” ;

2023/11/2:

Achieving the function of “Show/Hide only bars which span highlighted clusters”;

2023/11/9:

Achieving the function of “Add single bar”;

2023/11/13:

Achieving the function of “Show/Hide all hinges”

2023/11/17:

Achieving the function of “Show/Hide only hinges incident to highlighted clusters”

2023/11/22:

Achieving the function of “Show/Hide only hinges which span highlighted clusters”

2023/11/28:

Fix some functional bugs of “Show/Hide only hinges which span highlighted clusters”