How do you set up the entity sequence displayed in the sequence panel?
nataliarosa9 opened this issue · comments
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;
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.