This is an old revision of the document!
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 lask 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 select 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.
