gky360 / react-ngl Goto Github PK

View Code? Open in Web Editor NEW

21.0 3.0 11.0 5.15 MB

React wrapper for ngl

Home Page: https://gky360.github.io/react-ngl/

License: MIT License

JavaScript 9.06% Dockerfile 0.47% TypeScript 90.47%

react ngl webgl molecular-structures web-application molecular-graphics scientific-visualization

react-ngl's Introduction

react-ngl

React NGL

React wrapper for NGL
Explore the docs »

View Demo · Report Bug · Request Feature

About The Project

react-ngl is a React wrapper for NGL.

Built With

ngl >= v2.0.0-dev.37
node >= 12.16.0
react ^16.13.1

Getting Started

To get a local copy up and running follow these simple steps.

Prerequisites

This is an example of how to list things you need to use the software and how to install them.

npm install react-ngl

Installation

Clone the repo

git clone https://github.com/gky360/react-ngl.git

Install NPM packages

npm install

Usage

A minimal example of using react-ngl is as follows.

import React from 'react';
import { Stage, Component } from 'react-ngl';

ReactDOM.render(
  <Stage width="600px" height="400px">
    <Component path="rcsb://4hhb" reprList={reprList} />
  </Stage>,
  document.getElementById('app')
);

For more examples, please refer to the Demo

Roadmap

See the open issues for a list of proposed features (and known issues).

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

Fork the Project
Create your Feature Branch (git checkout -b feature/AmazingFeature)
Commit your Changes (git commit -m 'Add some AmazingFeature')
Push to the Branch (git push origin feature/AmazingFeature)
Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Project Link: https://github.com/gky360/react-ngl

Acknowledgements

nglviewer/ngl

react-ngl's People

Contributors

Stargazers

Watchers

Forkers

mirimcz maxdng szabatek obonyojimmy dahyorr bio-grids cpellet konstin janash sasaju shash0501

react-ngl's Issues

How can we render mrc file with nglview on react?

Any code example will be appreciated.

React testing library render() fails when rendering NGL stage

When attempting to test an app that contains React NGL <Stage/> using React testing library, render() operation fails with error TypeError: Cannot read property 'setParameters' of undefined

See minimal reproduction based on create-react-app and the basic NGL React example here

`
TypeError: Cannot read property 'setParameters' of undefined

  3 |
  4 | test('renders react ngl app', () => {
> 5 |   render(<App />);
    |   ^
  6 |   expect(screen.getByRole('app')).toBeTruthy();
  7 | });
  8 |

  at E_.setParameters (node_modules/ngl/dist/ngl.js:1:1012424)
  at node_modules/react-ngl/src/components/Stage/Stage.tsx:78:13
  at invokePassiveEffectCreate (node_modules/react-dom/cjs/react-dom.development.js:23487:20)
  at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:3945:14)
  at HTMLUnknownElement.callTheUserObjectsOperation (node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
  at innerInvokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:338:25)
  at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
  at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
  at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
  at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
  at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:3994:16)
  at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:4056:31)
  at flushPassiveEffectsImpl (node_modules/react-dom/cjs/react-dom.development.js:23574:9)
  at unstable_runWithPriority (node_modules/scheduler/cjs/scheduler.development.js:468:12)
  at runWithPriority$1 (node_modules/react-dom/cjs/react-dom.development.js:11276:10)
  at flushPassiveEffects (node_modules/react-dom/cjs/react-dom.development.js:23447:14)
  at Object.<anonymous>.flushWork (node_modules/react-dom/cjs/react-dom-test-utils.development.js:992:10)
  at act (node_modules/react-dom/cjs/react-dom-test-utils.development.js:1107:9)
  at render (node_modules/@testing-library/react/dist/pure.js:97:26)
  at Object.<anonymous> (src/App.test.js:5:3)
  at TestScheduler.scheduleTests (node_modules/@jest/core/build/TestScheduler.js:333:13)
  at runJest (node_modules/@jest/core/build/runJest.js:404:19)

can't toggle between structures

Hi, this is maybe more of a question than an issue, but I'm not sure how to resolve this.

Basically, my use case is this: I would like to toggle between the known structure of a protein (which exists as a PDB file), and a predicted structure (another PDB file).

I want to allow the user to select which version of the structure to view in the same component (as there may be many predictions, and I don't want to have too many structure viewers on the page).

What I have tried is something similar to the following:

export default function StructureViewer(props) {

  const [selectedStructure, setSelectedStructure] = useState('');
  const [path, setPath] = useState(null);
  const structureBlobs = {'known': new Blob(), 'predicted': new Blob()}; // in the actual code these are real blobs
  const availableStructures = ['known', 'predicted'];

  useEffect(() => {
    setPath(structureBlobs[selectedStructure]);
  }, [selectedStructure])


  const handleStructureInputChange = (event) => {
    setSelectedStructure(event.target.value);
  }

...

  return (
      <AutoSizer disableHeight>
          <Stage
            height={'300px'}
            width={width}
            params={{
              backgroundColor: '#f5f5f5',
              quality: 'low',
              ...stageParams,
            }}
            cameraState={{}}
          >
            <Component
              path={path}
              reprList={reprList}
              transform={viewerControls}
              loadFileParams={loadFileParams}
            />
          </Stage>
      </AutoSizer>

      <label>Select which structure to view:</label>
      <br/>
      <select name='structure' onChange={handleStructureInputChange}>
        {
          availableStructures.map( (structureName) =>
            <option
              key={structureName.toLowerCase()}
              value={structureName.toLowerCase()}
            >
              {structureName}
            </option>
          )
        }
      </select>
  )
}

This works just fine for viewing the structure at first, but when I select a new structure and change the value of structureName (which changes path), instead of clearing the previous structure and displaying the new one, it superimposes them!

This may be an interesting feature in the future, but for now it's not the desired behavior. Looking at the Component class, it looks like when path updates, it should trigger a re-render here:

  useAsyncEffect(
    function* loadFile(setCancelHandler, c) {
      const abortController = new AbortController();
      setCancelHandler(() => abortController.abort());
      let nextComponent: NGL.Component | undefined;
      try {
        nextComponent = (yield* c(stage.loadFile(path, loadFileParams))) as
          | NGL.Component
          | undefined;
      } catch (error) {
        if (onLoadFailure) {
          onLoadFailure(error);
        }
      }
      if (nextComponent) {
        setComponent(nextComponent);
      }
    },
    [loadFileParams, onLoadFailure, path, stage]
  );

does setComponent(nextComponent) not clear the current component? or is there an easy workaround?

would love any help, and thank you in advance!

ColormakerRegistry

Is there the ability to add custom color schemes to the structure?

Can't use defaultRepresentation

Hi! Thank you for making this wrapper, it's super useful!

I'm not sure about this, but I think there's an issue with how representations are handled when

{ defaultRepresentation: true }

is passed into loadFileParams for Component. The behavior is that the structure briefly flashes on screen (with the expected colorful defaultRepresentation) before disappearing, leaving just an empty Stage.

From briefly browsing around, I think what happens is that when the Component instance is created and this runs:

  useEffect(() => {
    if (component) {
      component.removeAllRepresentations();
      reprList.forEach((repr) =>
        component.addRepresentation(repr.type, repr.params)
      );
    }
  }, [component, reprList]);

whatever representation was created from the first flag passed into loadFileParams is cleared out and it causes an empty Stage. I don't know if that's how it works under the hood, but I suspect that that may be the case.

I haven't tested this, but I think that changing the above to:

  useEffect(() => {
    if (component && reprList.length > 0) {
      component.removeAllRepresentations();
      reprList.forEach((repr) =>
        component.addRepresentation(repr.type, repr.params)
      );
    }
  }, [component, reprList]);

would allow for the defaultRepresentation flag to work as long as a reprList prop weren't passed in to Component.

Let me know what you think!

Does Component or Stage support autoView?

I was unable to connect the autoView() function (which allows you to move the camera to a specific component), please tell me how this can be done?

Typescript error in `nglTypes.d.ts` when using `typescript@latest`

I'm trying to include react-ngl in a React Typescript project and I'm getting this:

Declaration or statement expected.  TS1128

    1 | export * from 'ngl';
    2 | export { Matrix3, Matrix4, Vector2, Vector3, Box3, Quaternion, Euler, Plane, Color, } from 'three';
  > 3 | export type { StageParameters } from 'ngl/declarations/stage/stage';
      | ^
    4 | export type { ComponentParameters } from 'ngl/declarations/component/component';
    5 | export type { StructureRepresentationType } from 'ngl/declarations/component/structure-component';
    6 | export type { SurfaceRepresentationType } from 'ngl/declarations/component/surface-component';

If I set my typsecript version to 3.8, then the problem goes away.

How to use a hover signal?

Hi there

I was interested in using ngl with react and this looked like a great library. I wasn't sure how I could add a custom hover signal though.

Something similar to interactive/hover-tooltip https://nglviewer.org/ngl/gallery/index.html

The aim is not necessarily to do a custom tooltip but just make a custom listener for what atom is being moused over

Is it possible to have access to the scene?

I know it is based on three.js therefore I am wondering if it is possible to access to the scene such that I could modify it in a custom way.

Typescript error with Components inside Stage

i get error "Type '{ children: Element; width: string; height: string; params: { backgroundColor: string; }; }' is not assignable to type 'IntrinsicAttributes & StageProps'.
Property 'children' does not exist on type 'IntrinsicAttributes & StageProps'.ts(2322)
(alias) const Stage: React.FC

It means, that in props of scene we don't have field children