\n \n

\n );\n }\n}\n\nexport class LoaderControls extends PluginUIComponent {\n componentDidMount() {\n }\n\n render() {\n return (\n

\n \n

\n );\n }\n}\n\nexport class ExampleControls extends PluginUIComponent {\n componentDidMount() {\n }\n\n render() {\n return (\n

\n \n

\n );\n }\n}\n\nexport function ColorLoaderControls({ plugin }: { plugin: PluginContext }) {\n const triggerLoadColors = () => {\n const input = document.createElement('input');\n input.type = 'file';\n input.accept = '.json';\n input.onchange = async (e) => {\n const input = e.target as HTMLInputElement;\n if (!input.files || !input.files[0]) return;\n const file = input.files[0];\n await loadColors(plugin, new File([file], file.name));\n };\n input.click();\n };\n\n return (\n \n );\n}\n\nexport async function openState(ctx: PluginContext, file: File) {\n const customState = ctx.customState as MesoscaleExplorerState;\n delete customState.stateRef;\n customState.stateCache = {};\n ctx.managers.asset.clear();\n\n await PluginCommands.State.Snapshots.Clear(ctx);\n await PluginCommands.State.Snapshots.OpenFile(ctx, { file });\n\n const cell = ctx.state.data.selectQ((q) => q.ofType(MesoscaleStateObject))[0];\n if (!cell) throw new Error('Missing MesoscaleState');\n\n customState.stateRef = cell.transform.ref;\n customState.graphicsMode = cell.obj?.data.graphics || customState.graphicsMode;\n}\n\nexport class SessionControls extends PluginUIComponent {\n downloadToFileZip = () => {\n PluginCommands.State.Snapshots.DownloadToFile(this.plugin, { type: 'zip' });\n };\n\n open = (e: React.ChangeEvent) => {\n if (!e.target.files || !e.target.files[0]) {\n this.plugin.log.error('No state file selected');\n return;\n }\n\n openState(this.plugin, e.target.files[0]);\n };\n\n render() {\n return (\n

\n \n

\n Open{' '}\n \n

\n );\n }\n}\n\nexport class SnapshotControls extends PluginUIComponent<{}> {\n render() {\n return (\n

\n \n

\n\n

\n \n \n \n

\n );\n }\n}\n\nexport class ExplorerInfo extends PluginUIComponent<{}, { isDisabled: boolean; showHelp: boolean }> {\n state = {\n isDisabled: false,\n showHelp: false,\n };\n\n componentDidMount() {\n this.subscribe(this.plugin.state.data.behaviors.isUpdating, (v) => {\n this.setState({ isDisabled: v });\n });\n\n this.subscribe(this.plugin.state.events.cell.stateUpdated, (e) => {\n if (\n !this.state.isDisabled && MesoscaleState.has(this.plugin) && MesoscaleState.ref(this.plugin) === e.ref\n ) {\n this.forceUpdate();\n }\n });\n }\n\n setupDriver = () => {\n // setup the tour of the interface\n const driver = (this.plugin.customState as MesoscaleExplorerState).driver;\n if (!driver) return;\n\n driver.setSteps([\n // Left panel\n {\n element: '#explorerinfo',\n popover: {\n title: 'Explorer Header Info',\n description:\n 'This section displays the explorer header with version information, documentation access, and tour navigation. Use the right and left arrow keys to navigate the tour.',\n side: 'left',\n align: 'start',\n },\n },\n {\n element: '#database',\n popover: {\n title: 'Import from PDB',\n description: 'Load structures directly from PDB and PDB-IHM databases.',\n side: 'bottom',\n align: 'start',\n },\n },\n {\n element: '#loader',\n popover: {\n title: 'Import from File',\n description: 'Load local files (.molx, .molj, .zip, .cif, .bcif) using this option.',\n side: 'bottom',\n align: 'start',\n },\n },\n {\n element: '#example',\n popover: {\n title: 'Example Models and Tours',\n description: 'Select from a range of example models and tours provided.',\n side: 'left',\n align: 'start',\n },\n },\n {\n element: '#session',\n popover: {\n title: 'Session Management',\n description: 'Download the current session in .molx format.',\n side: 'top',\n align: 'start',\n },\n },\n {\n element: '#snaplist',\n popover: {\n title: 'Snapshot List',\n description:\n 'View and manage the list of snapshots. You can reorder them and edit their titles, keys, and descriptions. Snapshot states cannot be edited.',\n side: 'right',\n align: 'start',\n },\n },\n {\n element: '#snap',\n popover: {\n title: 'Add Snapshot',\n description:\n 'Save the current state (e.g., camera position, color, visibility, etc.) in a snapshot with an optional title, key, and description.',\n side: 'right',\n align: 'start',\n },\n },\n {\n element: '#snapoption',\n popover: {\n title: 'Snapshot Options',\n description:\n 'These options are saved in the snapshot. Set them before adding a snapshot to see their effect during animation playback.',\n side: 'right',\n align: 'start',\n },\n },\n {\n element: '#exportanimation',\n popover: {\n title: 'Export Animation',\n description: 'Create movies or scenes with rocking, rotating, or snapshots animations.',\n side: 'right',\n align: 'start',\n },\n },\n {\n element: '#viewportsettings',\n popover: {\n title: 'Viewport Settings',\n description: 'Advanced settings for the renderer and trackball.',\n side: 'right',\n align: 'start',\n },\n },\n // Viewport\n {\n element: '#snapinfo',\n popover: {\n title: 'Snapshot Description',\n description:\n 'Save the current state (e.g., camera position, color, visibility, etc.) in a snapshot with an optional title, key, and description.',\n side: 'right',\n align: 'start',\n },\n },\n {\n element: '#snapinfoctrl',\n popover: {\n title: 'Snapshot Description Control',\n description: 'Control the visibility and text size of the snapshot description widget.',\n side: 'right',\n align: 'start',\n },\n },\n // Right panel\n {\n element: '#modelinfo',\n popover: {\n title: 'Model Information',\n description: 'Summary information about the model, if available.',\n side: 'right',\n align: 'start',\n },\n },\n {\n element: '#selestyle',\n popover: {\n title: 'Selection Style',\n description:\n 'Choose the rendering style for entity selection accessed via Shift/Ctrl mouse. Options include: Color & Outline, Color, Outline.',\n side: 'right',\n align: 'start',\n },\n },\n {\n element: '#seleinfo',\n popover: {\n title: 'Selection List',\n description: 'View the current list of selected entities.',\n side: 'right',\n align: 'start',\n },\n },\n {\n element: '#measurements',\n popover: {\n title: 'Measurements',\n description:\n 'Use this widget to create labels, measure distances, angles, dihedral orientations, and planes for the selected entities.',\n side: 'right',\n align: 'start',\n },\n },\n {\n element: '#quickstyles',\n popover: {\n title: 'Quick Styles',\n description: 'Change between a selection of style presets.',\n side: 'right',\n align: 'start',\n },\n },\n {\n element: '#graphicsquality',\n popover: {\n title: 'Graphics Quality',\n description:\n 'Adjust the overall graphics quality. Lower quality improves performance. Options are: Ultra, Quality (Default), Balanced, Performance, Custom. Custom settings use the Culling & LOD values set in the Tree.',\n side: 'right',\n align: 'start',\n },\n },\n {\n element: '#searchtree',\n popover: {\n title: 'Search',\n description: 'Filter the entity tree based on your queries.',\n side: 'right',\n align: 'start',\n },\n },\n {\n element: '#grouptree',\n popover: {\n title: 'Group By',\n description:\n 'Change the grouping of the hierarchy tree, e.g., group by instance or by compartment.',\n side: 'right',\n align: 'start',\n },\n },\n {\n element: '#tree',\n popover: {\n title: 'Tree Hierarchy',\n description: 'View the hierarchical tree of entity types in the model.',\n side: 'right',\n align: 'start',\n },\n },\n {\n element: '#focusinfo',\n popover: {\n title: 'Selection Description',\n description: 'Detailed information about the current selection, if present in the loaded file.',\n side: 'right',\n align: 'start',\n },\n },\n {\n popover: {\n title: 'Happy Exploring!',\n description: 'That’s all! Go ahead and start exploring or creating mesoscale tours.',\n },\n },\n ]);\n driver.refresh();\n };\n\n openHelp = () => {\n // open a new page with the documentation\n globalThis.open('https://molstar.org/me-docs/', '_blank');\n };\n\n toggleHelp = () => {\n const driver = (this.plugin.customState as MesoscaleExplorerState).driver;\n if (!driver || !driver.hasNextStep()) {\n this.setupDriver();\n }\n this.setState({ showHelp: !this.state.showHelp }, () => {\n if (this.state.showHelp && driver) {\n driver.drive(); // start at 0\n }\n });\n };\n\n render() {\n const driver = (this.plugin.customState as MesoscaleExplorerState).driver;\n if (!driver) return;\n\n const help = (\n \n );\n const tour = (\n \n );\n return (\n <>\n \n

Mol* Mesoscale Explorer

\n {tour}\n {help}\n \n \n );\n }\n}\n\nexport class MesoQuickStylesControls extends CollapsableControls {\n defaultState() {\n return {\n isCollapsed: true,\n header: 'Quick Styles',\n brand: { accent: 'gray' as const, svg: MagicWandSvg },\n };\n }\n\n renderControls() {\n return (\n <>\n \n \n );\n }\n}\n\nexport class MesoQuickStyles extends PluginUIComponent {\n async default() {\n if (!this.plugin.canvas3d) return;\n const p = this.plugin.canvas3d.props;\n this.plugin.canvas3d.setProps({\n renderer: {\n exposure: 1.1,\n },\n postprocessing: {\n ...p.postprocessing,\n shadow: {\n name: 'on',\n params: {\n maxDistance: 80,\n steps: 3,\n tolerance: 1.0,\n },\n },\n outline: {\n name: 'on',\n params: {\n scale: 1,\n threshold: 0.15,\n color: Color(0x000000),\n includeTransparent: false,\n },\n },\n dof: { name: 'off', params: {} },\n },\n });\n await updateStyle(this.plugin, {\n ignoreLight: true,\n material: { metalness: 0, roughness: 1.0, bumpiness: 0 },\n celShaded: false,\n illustrative: false,\n });\n }\n\n async celshading() {\n if (!this.plugin.canvas3d) return;\n const p = this.plugin.canvas3d.props;\n this.plugin.canvas3d.setProps({\n renderer: {\n exposure: 1.5,\n },\n postprocessing: {\n ...p.postprocessing,\n shadow: {\n name: 'on',\n params: {\n maxDistance: 256,\n steps: 64,\n tolerance: 1.0,\n },\n },\n outline: { name: 'off', params: {} },\n dof: { name: 'off', params: {} },\n },\n });\n await updateStyle(this.plugin, {\n ignoreLight: false,\n material: { metalness: 0, roughness: 1.0, bumpiness: 0 },\n celShaded: true,\n illustrative: false,\n });\n }\n\n async shinyDof() {\n if (!this.plugin.canvas3d) return;\n const p = this.plugin.canvas3d.props;\n this.plugin.canvas3d.setProps({\n renderer: {\n exposure: 1.1,\n },\n postprocessing: {\n ...p.postprocessing,\n shadow: {\n name: 'on',\n params: {\n maxDistance: 256,\n steps: 64,\n tolerance: 1.0,\n },\n },\n outline: { name: 'off', params: {} },\n dof: {\n name: 'on',\n params: {\n blurSize: 9,\n blurSpread: 1.0,\n inFocus: 0.0,\n PPM: 200.0,\n center: 'camera-target',\n mode: 'sphere',\n },\n },\n },\n });\n await updateStyle(this.plugin, {\n ignoreLight: false,\n material: { metalness: 0, roughness: 0.2, bumpiness: 0 },\n celShaded: false,\n illustrative: false,\n });\n }\n\n async illustrative() {\n if (!this.plugin.canvas3d) return;\n const p = this.plugin.canvas3d.props;\n this.plugin.canvas3d.setProps({\n renderer: {\n exposure: 1.5,\n },\n postprocessing: {\n ...p.postprocessing,\n shadow: {\n name: 'on',\n params: {\n maxDistance: 256,\n steps: 64,\n tolerance: 1.0,\n },\n },\n outline: {\n name: 'on',\n params: {\n scale: 1,\n threshold: 0.15,\n color: Color(0x000000),\n includeTransparent: false,\n },\n },\n dof: { name: 'off', params: {} },\n },\n });\n await updateStyle(this.plugin, {\n ignoreLight: true,\n material: { metalness: 0, roughness: 1.0, bumpiness: 0 },\n celShaded: false,\n illustrative: true,\n });\n }\n\n async shiny() {\n if (!this.plugin.canvas3d) return;\n const p = this.plugin.canvas3d.props;\n this.plugin.canvas3d.setProps({\n renderer: {\n exposure: 1.5,\n },\n postprocessing: {\n ...p.postprocessing,\n shadow: { name: 'off', params: {} },\n outline: { name: 'off', params: {} },\n dof: { name: 'off', params: {} },\n },\n });\n await updateStyle(this.plugin, {\n ignoreLight: false,\n material: { metalness: 0, roughness: 0.2, bumpiness: 0 },\n celShaded: false,\n illustrative: false,\n });\n }\n\n async stylized() {\n if (!this.plugin.canvas3d) return;\n const p = this.plugin.canvas3d.props;\n this.plugin.canvas3d.setProps({\n renderer: {\n exposure: 1.1,\n },\n postprocessing: {\n ...p.postprocessing,\n shadow: {\n name: 'on',\n params: {\n maxDistance: 256,\n steps: 64,\n tolerance: 1.0,\n },\n },\n outline: {\n name: 'on',\n params: {\n scale: 1,\n threshold: 0.15,\n color: Color(0x000000),\n includeTransparent: false,\n },\n },\n dof: { name: 'off', params: {} },\n },\n });\n await updateStyle(this.plugin, {\n ignoreLight: false,\n material: { metalness: 0, roughness: 0.2, bumpiness: 0 },\n celShaded: false,\n illustrative: true,\n });\n }\n\n render() {\n return (\n <>\n

\n this.default()}\n style={{ width: 'auto' }}\n >\n Default\n \n this.celshading()}\n style={{ width: 'auto' }}\n >\n Cel-shaded\n \n this.illustrative()}\n style={{ width: 'auto' }}\n >\n Illustrative\n \n

\n this.shiny()}\n style={{ width: 'auto' }}\n >\n Shiny\n \n this.stylized()}\n style={{ width: 'auto' }}\n >\n Shiny-Illustrative\n \n this.shinyDof()}\n style={{ width: 'auto' }}\n >\n Shiny-DOF\n \n

\n \n );\n }\n}\n","deleted","label",[168,169,170,149],"frontend","mesoscale-explorer","ui","permalink","https://www.val.town/x/zcpbx/MolstarViewer/code/frontend/mesoscale-explorer/ui/states.tsx","extension","actionData","errors"]