How to load a component and a trajectory

[ixdi]

Hi, I want to load a GRO file and its correspondant TRR. I use NGL from npm client side and the following code, but it returns "Cannot read property getNumframesUrl" I've tried with some gro files and trajectories without success.

stage.loadFile(pathToGro)
.then(function (component) {
     component.addRepresentation('ball+stick', { color: 'element' });
     stage.autoView();
     component.addTrajectory(pathToTRR);
});

Error Stack

Error TypeError: Cannot read property 'getNumframesUrl' of undefined
    at RemoteTrajectory.getNumframes (/node_modules/ngl/dist/ngl.esm.js:76953)
    at RemoteTrajectory.Trajectory (/node_modules/ngl/dist/ngl.esm.js:66298)
    at new RemoteTrajectory (/node_modules/ngl/dist/ngl.esm.js:76872)
    at makeTrajectory (/node_modules/ngl/dist/ngl.esm.js:77019)
    at StructureComponent.addTrajectory (/node_modules/ngl/dist/ngl.esm.js:77437)

There's no "trajectory" property in DatasourceRegistry.trajectory

Thanks

[stephanmohr1985]

I experienced the same problem and have spent hours trying to solve it, without success. Any help would be highly appreciated.

[fredludlow]

So I've never used this bit of NGL so I don't have a working example to hand other than the ones in the webapp (which you already know about)

Is it possible you're using an out of date version? Looking at the current code, Datasource doesn't seem to have a trajectory attribute. Which version are you getting from npm? - I've only recently got the keys to npm from Alex and haven't had a chance to make a release yet - I think if you specify ngl@next you should at least get a fairly recent version. Failing that you can try building from source and importing with a relative path.

If that doesn't help, could you possibly share some example files for which it's not working?

(Datasource is used to map custom url schemes (as well as mapping standard things like 'https://' to a an Ajax request) - e.g. that's how the data:// and rcsb:// schemes are defined in the examples.)

Any other information you have to create a minimal test case would be really helpful

[ixdi]

Hi, thanks for the answer.

I was using version 0.10 but now I've generated the js library from the repository with npm.

The problem persists, it's not possible to load a GRO component with trajectory inside the file but when I load the same file into the web application (MDSrv) it's well represented (loading the file with the asTrajectory checked)

stage = new NGL.Stage('viewport');
self.stage
     .loadFile(pathToGroFileWithFramesInside, { asTrajectory: true })
     .then((component) => {
              component.addRepresentation('ball+stick',  { colorScheme: 'atomindex' });
              stage.autoView();
              console.log(component);
      });

If I load the component and then the trajectory as trr, it also fail. But in the MDSrv loading the component and then attaching a TRR trajectory works good.

stage = new NGL.Stage('viewport');
self.stage
     .loadFile(pathToGroFile)
     .then((component) => {
              component.addRepresentation('ball+stick',  { colorScheme: 'atomindex' });
              component.addTrajectory(trrFile); 
              stage.autoView();
              console.log(component);
      });

I attach the files so you can test it. test_NGL_files.zip

[fredludlow]

I haven't looked in great detail but a quick observation: loading those files gives me some very strange things (do you have lipids that cross over and periodic boundary conditions?)

[ixdi]

Thank you for your reply!

I realize that I chose a very bad example (it is a water droplet solvated with dodecane crossing periodic boundaries, therefore the strange behavior).

I have prepared a new set of files (see attachment) that reproduces the same problem with NGL, but does not have the issue of periodic boundary conditions.

files.zip

[fredludlow]

Apologies for the long wait, is this still an issue or did you find a fix/workaround?

I just tried with the files you attached - I edited the parser/gro-trajectory.js file to load your input file (trajectory_gro.gro) and it's working for me now:

  stage.loadFile('data://trajectory_gro.gro', { // File from zip above
    asTrajectory: true
  }).then(function (o) {
    o.addTrajectory()
    o.addRepresentation('cartoon')
    o.addRepresentation('helixorient')
    o.addRepresentation('line', {  })
    stage.autoView()
  })

[subinoyprescience]

how we can separately upload the gro and xtc file using ngl, I tried the method what @ixdi ixdi suggested but got the following error: Error loading structure file (.gro): TypeError: de.TrajectoryDatasource is undefined @fredludlow @ixdi