React support,about ncbi/icn3d

Comments (15)

jiywang3 commented on July 20, 2024 1

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"

from icn3d.

youkha commented on July 20, 2024

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 <#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

from icn3d.

daniaki commented on July 20, 2024

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:

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

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.

from icn3d.

jiywang3 commented on July 20, 2024

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;

from icn3d.

youkha commented on July 20, 2024

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 1. side by side This is already available but it is clunky. Check the gallery https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d.html#gallery for examples of features, in this case:: Side-by-Side View (PDBs 2AJF and 6W41) <https://structure.ncbi.nlm.nih.gov/icn3d/share.html?AzdRqTaUscB74JSq8> I would think that Jiyao would be delighted to work with you on improving that feature ... we could list it as a hackathon project This is actually more and more needed to look at large datasets that can now be examined from either PDB or Alphafold2 2. 2D Maps visualization and overlay are in my radar screen and would benefit from side by side visualization This goes beyond heat maps > 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 <#80 (comment)>, 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

from icn3d.

daniaki commented on July 20, 2024

@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:

Would it be possible to include the CSS file in the npm package so that users can import it from there rather than a url? That way any changes to the CSS can be version controlled via npm.
The solution works and renders, but now I am seeing a lot of WebGL errors in the console causing performance issues. When I googled the error I found this thread that you started https://discourse.threejs.org/t/shader-error-in-the-section-lights-physical-fragment/34246. It seems like you have encountered this error in the past. Do you have any suggestions on what might be causing it, or a possible solution?

from icn3d.

tiboloic commented on July 20, 2024

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

from icn3d.

jiywang3 commented on July 20, 2024

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;

from icn3d.

daniaki commented on July 20, 2024

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!

from icn3d.

jiywang3 commented on July 20, 2024

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.

from icn3d.

jiywang3 commented on July 20, 2024

npm icn3d 3.12.0 was just released with the fix in css. You can try it again.

from icn3d.

daniaki commented on July 20, 2024

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

from icn3d.

jiywang3 commented on July 20, 2024

The integration of iCn3D in React framework is working.

from icn3d.

daniaki commented on July 20, 2024

Thank you for all your help! It's integrating nicely with React now.

from icn3d.

youkha commented on July 20, 2024

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 <#80 (comment)>, 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

from icn3d.

React support about icn3d HOT 15 CLOSED

Comments (15)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent