Closed daniaki closed 2 years ago
Dear Daniel,
While Jiyaois working on this issue, I wonder if you could tell us how you plan to use iCn3D Is https://reactjs.org/ the project you work on? We have a hackathon at ISMB2022 and one theme is the UIF, another is the structural impact of mutations, ... in case you plan to attend either in person or virtually it might be an opportunity to exchange with the community https://www.iscb.org/ismb2022-program/protein-codeathon
Best, Philippe
On Tue, May 17, 2022 at 11:55 PM Daniel Esposito @.***> wrote:
We are working with a large React project, and we'd like to use the iCn3D structure viewer as a component. It would be ideal if we could install iCn3D using npm as an external dependency which we can then import into a React file to be used within our application. For example:
import React, { useEffect } from "react"; import as THREE from 'three'import $ from 'jquery' global.THREE = THREEglobal.$ = $global.jQuery = $ // Import after so dependencies are globally available for webpackimport as icn3d from "icn3d" function Icn3dViewer() { useEffect(() => { const cfg = { divid: 'viewer', width: '100%', height: '100%', resize: true, rotate: 'right', mobilemenu: true, showcommand: false, showtitle: false };
cfg['mmdbid'] = '1tup'; const icn3dui = new icn3d.iCn3DUI(cfg); icn3dui.show3DStructure(); }, []); return <div id="viewer"></div>;}
export default Icn3dViewer;
We've tried variations of the above simple approach using the current npm package designed for node scripts, and unfortunately couldn't get it running; webpack compiles but nothing seems to be attached to the parent div id viewer and I see a console error saying canvas is undefined. Do you have any suggestions for how we could get this working? If it is currently not possible, how much work would it take to enable support for frameworks such as React? We'd be happy to potentially work on this and submit a PR.
— Reply to this email directly, view it on GitHub https://github.com/ncbi/icn3d/issues/80, or unsubscribe https://github.com/notifications/unsubscribe-auth/AD35NIMYYCTTZGDBHVBTZZ3VKRS23ANCNFSM5WG7OXAQ . You are receiving this because you are subscribed to this thread.Message ID: @.***>
-- -- Philippe Youkharibache, Ph.D. US +1 415 448 6509
Hi Philippe,
Apologies, I should described what ReactJS is, and our intended iCn3D use case in more detail. ReactJS itself is not the project we are working on. It is an open source framework used to build rich and interactive user interfaces built by Facebook. We use it extensively in some of our web-based projects.
I work at at the Center for Population Genomics with teams based in Melbourne and Sydney Australia. Part of our team is working on calculating missense constraint within a protein's tertiary structure using the structures predicted by AlphaFold2. We're looking at current open source structure viewers that we can embed into some of our web projects that have been built using ReactJS, one of which is based on a fork of seqr (github). Some of our requirements from a 3D structure viewer (some or all of which may already be implemented by iCn3D):
Core:
Nice but not essential:
Ideally we would like to contribute to an existing open source package to help implement some of these features rather than build our own.
Hi Daniel,
We just released icn3d 3.11.7 at npm. Some instructions are in the section "Use icn3d as a 3D Viewer with React" in the README file. You can try it out and let us know. I am not familiar with React much. You could improve the mouse events and we'll add your feedback to the npm icn3d package. Here is the instruction:
You can specify jQuery and three.js in your HTML file by following the source code of example.html, then import "icn3d" in your React JavaScript file as shown below:
import React, { useEffect } from "react";
import * as icn3d from "icn3d/module";
function Icn3dViewer() {
useEffect(() => {
const cfg = {
divid: 'viewer',
mobilemenu: true
};
cfg['mmdbid'] = '1tup';
const icn3dui = new icn3d.iCn3DUI(cfg);
icn3dui.show3DStructure();
}, []);
return <div id="viewer"></div>;
}
export default Icn3dViewer;
Dear Daniel, If you'd like to join in to develop iCn3D, This would be mutually beneficial. It is open source and in addition it is and will be maintained by NCBI, a huge difference from most efforts that lose funding after a few years ...
First in your list of features (I will let Jiyao answer on the react aspect) I would think that we already cover a good number of the features you mentioned, at least to some extent. We can always discuss what's needed in addition. The definition of sets or residues for example is a very central and pervasive feature ... I cannot think of any software that permits what we already have, and what's coming goes one step further.
I think it would be too long for an email to go over all features and plans, but if you review the original design white paper ( https://www.biorxiv.org/content/10.1101/153528v2) you may have an idea. We may be 80-90% there by now, the initial iCn3D paper and the help pages on NCBI website, you may get an idea. The best would be that we connect through a zoom meeting to exchange, time is at a premium at the moment though and maybe that can be done in June, while we are preparing for the ISMB hackathon mid July that will be both in person and online.
In features we'd like to improve ASAP that overlap with your needs
This is actually more and more needed to look at large datasets that can now be examined from either PDB or Alphafold2
one of the proposed projects at the hackathon is to develop 2D sequence/topology maps. Ideally 3D > 2D would be ideal but it is difficult to have a general clean mechanism ... However on important folds a template based approach is working (see examples in this paper ( https://www.mdpi.com/2218-273X/11/9/1290/htm)
BTW ... what's your background?
All the best Philippe
On Wed, May 18, 2022 at 9:54 PM Daniel Esposito @.***> wrote:
Hi Philippe,
Apologies, I should described what ReactJS is and our intended use case in more detail. ReactJS itself is not the project we are working on. It is an open source framework used to build rich and interactive user interfaces built by Facebook. We use it extensively in some of our web-based projects.
I work at at the Center for Population Genomics https://www.garvan.org.au/research/population-genomics/about with teams based in Melbourne and Sydney Australia. Part of our team is working on calculating missense constraint within a protein's tertiary structure using the structures predicted by AlphaFold2. We're looking at current open source structure viewers that we can embed into some of our web projects that have been built using ReactJS, one of which is based on a fork of seqr https://pubmed.ncbi.nlm.nih.gov/35266241/ (github https://github.com/broadinstitute/seqr). Some of our requirements from a 3D structure viewer (some or all of which may already be implemented by iCn3D):
Core:
- A 3D structure display
- Ability to overlay a custom heatmap
- Ability to highlight custom sets of residues
- Ability to trigger a custom action when a residue is selected
- Compatible with declarative UI frameworks such as ReactJS https://reactjs.org/
Nice but not essential:
- Analysis capabilities including:
- Selection in space
- View 3D domains, binding sites, active sites, alignments
- Display of 2 structures side by side
- Software that is extensible
Ideally we would like to contribute to an existing open source package to help implement some of these features rather than build our own.
— Reply to this email directly, view it on GitHub https://github.com/ncbi/icn3d/issues/80#issuecomment-1130981240, or unsubscribe https://github.com/notifications/unsubscribe-auth/AD35NIMCK5AWKZ4WMY7ZLYLVKWNNVANCNFSM5WG7OXAQ . You are receiving this because you commented.Message ID: @.***>
-- -- Philippe Youkharibache, Ph.D. US +1 415 448 6509
@youkha My background is in Bioinformatics/Software Engineering, and I'm part of the software engineering team at the Centre for Population Genomics. As @tiboloic has suggested below, we'd be delighted to collaborate and contribute to iCn3D, and it would be great to set up a Zoom call at some point to discuss this in more details with the other members of our team. I'll leave further correspondence to Loic at this point.
@jiywang3 Thank you for your solution. Unfortunately it won't work because threejs, jquery and jquery-ui need to be available at compile time when React compiles and transpiles the source files into a single bundle. This is what worked for me:
dependencies.js
import * as THREE from 'three'
import $ from 'jquery'
import 'jquery-ui-bundle';
import 'jquery-ui-bundle/jquery-ui.min.css';
global.THREE = THREE
global.$ = $
global.jQuery = $
icn3d-viewer.css
@import url('https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d.css');
icn3d-viewer.js
import React, { useEffect } from "react";
import './dependencies'
import * as icn3d from 'icn3d/module'
import './icn3d-viewer.css';
function Icn3dViewer() {
useEffect(() => {
const cfg = {
divid: 'icn3d-viewer',
width: '100%',
height: '100%',
resize: true,
rotate: 'right',
mobilemenu: true,
showcommand: false,
showtitle: false
};
cfg['mmdbid'] = '1tup';
const icn3dui = new icn3d.iCn3DUI(cfg);
icn3dui.show3DStructure();
}, [])
return <div id="icn3d-viewer" />;
}
export default Icn3dViewer
My two questions are:
Dear Philippe and Jiyao,
I am a colleague of Daniel at the Centre for Population Genomics. I am a statistical geneticist and I lead the development of a new method to identify 3D regions in proteins depleted in missense variation.
We are delighted at the opportunity to collaborate on iCn3D and more generally on open Tools for Shareable Protein Analysis. We have a couple of ideas we could contribute to the protein codeathon and we would be keen to participate.
A challenge might be the need to work asynchronously given our respective time zones: I will be in France during the codeathon, the rest of the team will be in Australia and you will be based in Madison, WI.
I will send you an email today to take this conversation off github.
All the best
Loïc
Hi Daniel,
Thanks for the feedback. Now you can get icn3d.css and the modified three.module.js from npm icn3d. The instruction is updated at https://www.npmjs.com/package/icn3d. Here are the details. Please let me know if you have any problems such as mouse functions.
You can first specify the "dependencies.js" file as follows:
import * as THREE from 'icn3d/three'
import $ from 'jquery'
import 'jquery-ui-bundle';
import 'jquery-ui-bundle/jquery-ui.min.css';
global.THREE = THREE
global.$ = $
global.jQuery = $
Then specify the "icn3d-viewer.js" file as follows:
import React, { useEffect } from "react";
import './dependencies';
import * as icn3d from 'icn3d/module'
import * from 'icn3d/css'
function Icn3dViewer() {
useEffect(() => {
const cfg = {
divid: 'viewer',
mobilemenu: true
};
cfg['mmdbid'] = '1tup';
const icn3dui = new icn3d.iCn3DUI(cfg);
icn3dui.show3DStructure();
}, []);
return <div id="viewer"></div>;
}
export default Icn3dViewer;
I'm seeing compile errors because the css file in the npm package contains //
comments which are invalid. Are you able to replace these comments with the standard /* comment goes here */
style? Thanks for the quick updates!
Could you modify the file icn3d.css in your node_modules/icn3d directory and try it again? I suspect there may be issues related to mouse functions and will fix them together.
npm icn3d 3.12.0 was just released with the fix in css. You can try it again.
Thanks Jiyao, I've tried the new release but unfortunately it does not work. Most of the errors relate to missing image and font assets, however one relates to a repeated declaration of the class GLTFLoader
.
Failed to compile.
SyntaxError: ./node_modules/icn3d/icn3d.module.js: Identifier 'GLTFLoader' has already been declared. (50311:6)
50309 | */
50310 |
> 50311 | class GLTFLoader extends THREE.Loader {
| ^
50312 |
50313 | constructor( manager ) {
50314 |
ERROR in ./node_modules/icn3d/icn3d.module.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: ./node_modules/icn3d/icn3d.module.js: Identifier 'GLTFLoader' has already been declared. (50311:6)
50309 | */
50310 |
> 50311 | class GLTFLoader extends THREE.Loader {
| ^
50312 |
50313 | constructor( manager ) {
50314 |
at instantiate (./node_modules/@babel/parser/lib/index.js:72:32)
at constructor (./node_modules/@babel/parser/lib/index.js:358:12)
at Parser.raise (./node_modules/@babel/parser/lib/index.js:3334:19)
at ScopeHandler.checkRedeclarationInScope (./node_modules/@babel/parser/lib/index.js:3518:19)
at ScopeHandler.declareName (./node_modules/@babel/parser/lib/index.js:3484:12)
at Parser.declareNameFromIdentifier (./node_modules/@babel/parser/lib/index.js:12059:16)
at Parser.parseClassId (./node_modules/@babel/parser/lib/index.js:15759:14)
at Parser.parseClass (./node_modules/@babel/parser/lib/index.js:15376:10)
at Parser.parseStatementContent (./node_modules/@babel/parser/lib/index.js:14597:21)
at Parser.parseStatement (./node_modules/@babel/parser/lib/index.js:14549:17)
ERROR in ./node_modules/icn3d/icn3d.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/icn3d/icn3d.css) 5:36-82
Module not found: Error: Can't resolve 'color-picker-h.png' in './node_modules/icn3d'
ERROR in ./node_modules/icn3d/icn3d.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/icn3d/icn3d.css) 6:36-83
Module not found: Error: Can't resolve 'color-picker-sv.png' in './node_modules/icn3d'
ERROR in ./node_modules/icn3d/icn3d.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/icn3d/icn3d.css) 7:36-91
Module not found: Error: Can't resolve 'lib/fonts/la-brands-400.eot' in './node_modules/icn3d'
ERROR in ./node_modules/icn3d/icn3d.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/icn3d/icn3d.css) 8:36-93
Module not found: Error: Can't resolve 'lib/fonts/la-brands-400.woff2' in './node_modules/icn3d'
ERROR in ./node_modules/icn3d/icn3d.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/icn3d/icn3d.css) 9:36-92
Module not found: Error: Can't resolve 'lib/fonts/la-brands-400.woff' in './node_modules/icn3d'
ERROR in ./node_modules/icn3d/icn3d.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/icn3d/icn3d.css) 10:36-91
Module not found: Error: Can't resolve 'lib/fonts/la-brands-400.ttf' in './node_modules/icn3d'
ERROR in ./node_modules/icn3d/icn3d.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/icn3d/icn3d.css) 11:36-91
Module not found: Error: Can't resolve 'lib/fonts/la-brands-400.svg' in './node_modules/icn3d'
ERROR in ./node_modules/icn3d/icn3d.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/icn3d/icn3d.css) 12:36-92
Module not found: Error: Can't resolve 'lib/fonts/la-regular-400.eot' in './node_modules/icn3d'
ERROR in ./node_modules/icn3d/icn3d.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/icn3d/icn3d.css) 13:36-94
Module not found: Error: Can't resolve 'lib/fonts/la-regular-400.woff2' in './node_modules/icn3d'
ERROR in ./node_modules/icn3d/icn3d.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/icn3d/icn3d.css) 14:36-93
Module not found: Error: Can't resolve 'lib/fonts/la-regular-400.woff' in './node_modules/icn3d'
ERROR in ./node_modules/icn3d/icn3d.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/icn3d/icn3d.css) 15:37-93
Module not found: Error: Can't resolve 'lib/fonts/la-regular-400.ttf' in './node_modules/icn3d'
ERROR in ./node_modules/icn3d/icn3d.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/icn3d/icn3d.css) 16:37-93
Module not found: Error: Can't resolve 'lib/fonts/la-regular-400.svg' in './node_modules/icn3d'
ERROR in ./node_modules/icn3d/icn3d.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/icn3d/icn3d.css) 17:37-91
Module not found: Error: Can't resolve 'lib/fonts/la-solid-900.eot' in './node_modules/icn3d'
ERROR in ./node_modules/icn3d/icn3d.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/icn3d/icn3d.css) 18:37-93
Module not found: Error: Can't resolve 'lib/fonts/la-solid-900.woff2' in './node_modules/icn3d'
ERROR in ./node_modules/icn3d/icn3d.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/icn3d/icn3d.css) 19:37-92
Module not found: Error: Can't resolve 'lib/fonts/la-solid-900.woff' in './node_modules/icn3d'
ERROR in ./node_modules/icn3d/icn3d.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/icn3d/icn3d.css) 20:37-91
Module not found: Error: Can't resolve 'lib/fonts/la-solid-900.ttf' in './node_modules/icn3d'
ERROR in ./node_modules/icn3d/icn3d.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/icn3d/icn3d.css) 21:37-91
Module not found: Error: Can't resolve 'lib/fonts/la-solid-900.svg' in './node_modules/icn3d'
webpack compiled with 18 errors
I just released npm icn3d 3.12.3. Please try it again and use the following to import css: import "../node_modules/icn3d/css/icn3d.css"
The integration of iCn3D in React framework is working.
Thank you for all your help! It's integrating nicely with React now.
Congrats Jiyao and Daniel !
On Mon, Jun 20, 2022 at 9:11 PM Daniel Esposito @.***> wrote:
Thank you for all your help! It's integrating nicely with React now.
— Reply to this email directly, view it on GitHub https://github.com/ncbi/icn3d/issues/80#issuecomment-1161025999, or unsubscribe https://github.com/notifications/unsubscribe-auth/AD35NIKRDXGROOWL62NXKUDVQEJCJANCNFSM5WG7OXAQ . You are receiving this because you were mentioned.Message ID: @.***>
-- -- Philippe Youkharibache, Ph.D. US +1 415 448 6509
We are working with a large React project, and we'd like to use the iCn3D structure viewer as a component. It would be ideal if we could install iCn3D using npm as an external dependency which we can then import into a React file to be used within our application. For example:
We've tried variations of the above simple approach using the current npm package designed for node scripts, and unfortunately couldn't get it running; webpack compiles but nothing seems to be attached to the parent div id
viewer
and I see a console error sayingcanvas is undefined
. Do you have any suggestions for how we could get this working? If it is currently not possible, how much work would it take to enable support for frameworks such as React? We'd be happy to potentially work on this and submit a PR.Thank you!