Using Mol* In Codepen

[Fred Parsons]

Hi Mol* team!

We've been thinking about contributing to the Mol* documentation with a set of examples similar to NGL's gallery. I've been trying to setup codepen to work with Mol* and I almost have things working but I've reached a blocker.

https://codepen.io/frederickparsons92/pen/NWVxGyW

This is the code I've been trying to use. Basically it's failing in the call to plugin.initViewer(canvas, parent).

<div id='molstar-parent' style='position: absolute; top: 0; left: 0; right: 0; bottom: 0'>
    <canvas id='molstar-canvas' style='position: absolute; top: 0; left: 0; right: 0; bottom: 0'></canvas>
</div>

import {
  DefaultPluginSpec,
  PluginSpec,
} from "https://esm.sh/molstar/lib/mol-plugin/spec";
import { PluginContext } from "https://esm.sh/molstar/lib/mol-plugin/context";
import { PluginConfig } from "https://esm.sh/molstar/lib/mol-plugin/config";

const MySpec: PluginSpec = {
  ...DefaultPluginSpec(),
  config: [[PluginConfig.VolumeStreaming.Enabled, false]],
};

async function init() {
  const plugin = new PluginContext(MySpec);
  await plugin.init();

  const canvas = document.getElementById("molstar-canvas");
  const parent = document.getElementById("molstar-parent");

  try {
    plugin.initViewer(canvas, parent);
  } catch (e) {
    console.error("Failed to init Mol*");
  }

  const data = await plugin.builders.data.download(
    { url: "https://models.rcsb.org/4hhb.bcif", isBinary: true },
    { state: { isGhost: true } }
  );

  const trajectory = await plugin.builders.structure.parseTrajectory(
    data,
    "mmcif"
  ); //format is 'mmcif' or 'pdb' etc.
  await plugin.builders.structure.hierarchy.applyPreset(trajectory, "default");
}

document.addEventListener("DOMContentLoaded", () => {
  init();
});

Have you managed to get Mol* working in Codepen before? Any help here is appreciated. Hoping we can get to learn Mol* through this gallery collaboration :)

[Fred Parsons]

found a way: https://codepen.io/frederickparsons92/pen/bGyEpvj