Display the "msp-sequence-missing" CSS class residues

[Natalia Rosa]

Hello,
In my project, I implemented the Mol* viewer version 4.1.0 in a React app. However, I have trouble displaying residues with the "msp-sequence-missing" CSS class in the sequence panel. Do you know how I can solve this?

import React, { useEffect, useRef, useMemo } from 'react';
import { createPluginUI } from 'molstar/lib/mol-plugin-ui';
import { Color } from 'molstar/lib/mol-util/color/';
import { ColorNames } from 'molstar/lib/mol-util/color/names';
import { StructureElement } from 'molstar/lib/mol-model/structure';
import 'molstar/lib/mol-plugin-ui/skin/light.scss';
import { renderReact18 } from 'molstar/lib/mol-plugin-ui/react18';
import { PluginCommands } from 'molstar/lib/mol-plugin/commands';
import { Script } from 'molstar/lib/mol-script/script';
import { StructureSelection } from 'molstar/lib/mol-model/structure/query';

const MolstarViewer = ({ pdbId }) => {
const viewerRef = useRef(null);
const pluginInstanceRef = useRef(null);

const initMolstar = useMemo(() => async () => {
if (viewerRef.current && !pluginInstanceRef.current) {
const plugin = await createPluginUI({
target: viewerRef.current,
layoutIsExpanded: false,
layoutShowControls: false,
layoutShowRemoteState: false,
layoutShowSequence: true,
layoutShowLog: false,
layoutShowLeftPanel: false,
viewportShowExpand: false,
viewportShowSelectionMode: false,
viewportShowAnimation: false,
pdbProvider: 'rcsb',
backgroundColor: 'white',
render: renderReact18,
});
pluginInstanceRef.current = plugin;

  try {
    const data = await pluginInstanceRef.current.builders.data.download(
      { url: `https://files.rcsb.org/download/${pdbId}.pdb` },
      { state: { isGhost: false } }
    );
    const trajectory = await pluginInstanceRef.current.builders.structure.parseTrajectory(data, 'pdb');
    const structure = await pluginInstanceRef.current.builders.structure.hierarchy.applyPreset(
      trajectory,
      'default'
    );

  // Change background color
  const renderer = plugin.canvas3d.props.renderer;
  PluginCommands.Canvas3D.SetSettings(plugin, { settings: { renderer: { ...renderer, backgroundColor: ColorNames.white} } });


  } catch (error) {
    console.error('Failed to load the PDB structure:', error);
  }
}

}, [pdbId]);

useEffect(() => {
initMolstar();

return () => {
  if (pluginInstanceRef.current) {
    pluginInstanceRef.current.dispose();
    pluginInstanceRef.current = null;
  }
};

}, [initMolstar]);

return <div key={pdbId} ref={viewerRef} style={{ width: '100%', height: '100%' }} />;
};

export default MolstarViewer;

[David Sehnal]

Try loading the CIF instead of the PDB file.

[Natalia Rosa]

Thanks for your answer. It worked for me.