How can I choose the entity sequence shown in the sequence panel?

[Natalia Rosa]

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 { ColorNames } from 'molstar/lib/mol-util/color/names';
  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';
  
  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} } });

  // Set up the entity sequence displayed in the sequence panel
    const preSelectedEntityId = 2
    const selection = pluginInstanceRef.current.managers.structure.selection;
    const entriesMap = selection.entries; // Get the Map object
    const entryKey = [...entriesMap.keys()][0]; // Get the key of the first entry
    const entryValue = entriesMap.get(entryKey); // Get the value of the first entry
    const model = entryValue._selection.structure.state.model.sequence

    if (entryValue) {
    const model = entryValue._selection.structure.state.model.sequence;

   // Remove from model.byEntityKey
    if (model.byEntityKey) {
        for (const index in model.byEntityKey) {
            if (model.byEntityKey[index].entityId != preSelectedEntityId) {
                delete model.byEntityKey[index];
            }
        }
    }

    // Remove from model.sequences
    if (model.sequences) {
        model.sequences = model.sequences.filter(sequence => sequence.entityId == preSelectedEntityId);
    }
        console.log(model)
    }


  } 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;

[Natalia Rosa]

I found a simple solution for it :)

// Find the select element
const selectElement = document.querySelector('select.msp-form-control:nth-child(5)');

// Set the initial value
const initialValue = '0|2';
selectElement.value = initialValue;

// Create a new 'change' event
const event = new Event('change', { bubbles: true });

// Dispatch the 'change' event on the select element
selectElement.dispatchEvent(event);