Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

setting initial options hide water with select on load #103

Open
Jhsmit opened this issue Mar 4, 2024 · 3 comments
Open

setting initial options hide water with select on load #103

Jhsmit opened this issue Mar 4, 2024 · 3 comments

Comments

@Jhsmit
Copy link

Jhsmit commented Mar 4, 2024

I'm setting hideStructure: ['water'], of the initial options and then using loadComplete.subscribe to set colors.

This gives me an error Uncaught (in promise) Error: Could not find node 'undefined'.
Perhaps its trying to color the water which isnt there?

code example on plnkr: https://plnkr.co/edit/V0wwfwfsGVplURYD

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <title>PDBe Molstar - Basic</title>

    <!-- Molstar CSS & JS -->
    <link rel="stylesheet" type="text/css" href="https://www.ebi.ac.uk/pdbe/pdb-component-library/css/pdbe-molstar-3.1.2.css">
    <script type="text/javascript" src="https://www.ebi.ac.uk/pdbe/pdb-component-library/js/pdbe-molstar-plugin-3.1.3.js"></script>
    <style>
      #myViewer{
        float:left;
        width:500px;
        height: 500px;
        position:relative;
      }
    </style>
  </head>

  <body>

    <h4>PDBe Mol* JS Plugin Demo</h4>

    <!-- Molstar container -->
    <div id="myViewer"></div>
      
    <script>

      var selectSections = [
        {
          struct_asym_id: 'B', 
          start_residue_number: 8, 
          end_residue_number: 10, 
          color:{r:255,g:0,b:255},
          sideChain: true
        },
        {
          struct_asym_id: 'B', 
          start_residue_number: 2, 
          end_residue_number: 5, 
          color:{r:255,g:0,b:0}
        }
      ]

      //Create plugin instance
      var viewerInstance = new PDBeMolstarPlugin();
  
      //Set options (Checkout available options list in the documentation)
      var options = {
        moleculeId: '2nnu',
        hideControls: true,
        // comment / uncomment to trigger bug
        hideStructure: ['water'],
      }
      
      //Get element from HTML/Template to place the viewer 
      var viewerContainer = document.getElementById('myViewer');
  
      //Call render method to display the 3D view
      viewerInstance.render(viewerContainer, options);
      
      //Trigger color and spin upon load complete
      viewerInstance.events.loadComplete.subscribe(() => {
      viewerInstance.visual.toggleSpin(true);
      viewerInstance.visual.select({ data: selectSections, nonSelectedColor: {r:255,g:255,b:255}})
      });
      
    </script>
  </body>

</html>
@m-crown
Copy link

m-crown commented Mar 15, 2024

I am also experiencing this - did you find a solution at all @Jhsmit ?

@Jhsmit
Copy link
Author

Jhsmit commented Mar 15, 2024

Yes - I don't set it at initial options but instead use visual.visibility at load complete event

@midlik
Copy link
Collaborator

midlik commented Aug 28, 2024

Hi, this issue seems to be fixed in version 3.3.0.
Both hideStructure: ['water'] initial option and calling viewerInstance.visual.visibility({ water: false }); should work.

Update you JS and CSS URLs based on this: https://github.com/molstar/pdbe-molstar/wiki/1.-PDBe-Molstar-as-JS-plugin#1-include-the-style-and-script-files-of-the-library-in-your-web-page

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@Jhsmit @midlik @m-crown