How to deploy both PDBeMolstarPlugin and external component for Molstar? Advice needed...

[pavelvasev]

Hi there!

I want to use PDBeMolstarPlugin in my project. And I want to configure it to use my custom ColorTheme component.

1. I used instructions from wiki PDBe-Molstar-as-JS-plugin
2. I created separate project for my ColorTheme component, say ColorerX.
3. I am going then to register that ColorerX in plugin using representation.structure.themes.colorThemeRegistry.add call and activate using plugin.managers.structure.component.updateRepresentationsTheme. Seems this will work.

Now I try to understand, how ColorerX may use webpacked Molstar modules which are located in pdbe-molstar-plugin-3.1.0.js file?

• Of course I may configure ColorerX to bundle Molstar inside it itself. But in that case, two copies of Molstar codes will be present - one in pdbe-molstar-plugin and one in ColorerX...
• And of course I may clone pdbe-molstar repo and hard-code ColorerX into it, but I consider it as not the best solution.

Please give me an advice, how my ColorerX component might use Molstar modules from pdbe-molstar-plugin? While keeping pdbe-molstar and ColorerX as separate projects. I am new to webpack and tryied to resolve that, but still failed to find a solution.

Many thanks in advance!

[midlik]

Hi, perhaps something like this would work:

index.html:

...
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/pdbe-molstar@3.3.0/build/pdbe-molstar.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pdbe-molstar@3.3.0/build/pdbe-molstar-plugin.js"></script>
<script type="text/javascript" src="hack.js"></script>
... 
const viewerContainer = document.getElementById('myViewer');
viewerInstance.render(viewerContainer, options).then(() => {
    registerCustomColorTheme(viewerInstance.plugin);
});
...

Your hack.ts (or hack.js):

import { type PluginContext } from 'molstar/lib/mol-plugin/context';
import { type RepresentationProvider } from 'molstar/lib/mol-repr/representation';

const provider = { /* ... */ } as RepresentationProvider;

function registerCustomColorTheme(plugin: PluginContext) {
    plugin.representation.structure.registry.add(provider);
}

(window as any).registerCustomColorTheme = registerCustomColorTheme;

As we only import types, they shouldn't end up in the hack.js bundle (or you can just forget types and write in plain Javascript if you prefer).

[midlik]

Another option is creating your custom build. But instead of forking the pdbe-molstar repo I would recommend including pdbe-molstar as dependency of your project. Then you can just import { PDBeMolstarPlugin } from 'pdbe-molstar/lib/viewer' and extend PDBeMolstarPlugin class (registering your provider in the overridden render method, I think).