How do you set up the entity sequence displayed in the sequence panel?

[nataliarosa9]

Hello, In my project, I implemented the Mol* viewer version 4.1.0 in a React app. How can I pre-select the entity sequence displayed in the sequence panel in my react component?

    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}.cif` },
      { state: { isGhost: false } }
    );
    const trajectory = await pluginInstanceRef.current.builders.structure.parseTrajectory(data, 'mmcif');
    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;

[dsehnal]

You will have to write your own version of the component that supports it and then pass it to the viewer via the PluginUISpec.components.sequenceViewer.view property.