\n \n

\n\n

\n Edit in MolViewStories •\n Open in Mol* Viewer •\n Download MVS • Source Code\n

\n\n \n \n \n\n",[],[152,170,185,276,99],{"_104":326,"_95":327,"_153":328,"_155":277,"_156":138,"_157":329,"_159":22,"_106":330,"_100":218,"_161":219,"_163":331,"_164":22,"_165":-5,"_166":332,"_98":333},"dd8dd5d0-bdb6-11f0-baea-42dde27851f2","index.tsx","c7e66324-bdb5-11f0-b3e3-42dde27851f2",126,["D",1762725354716],"/**\n * Copyright (c) 2025 mol* contributors, licensed under MIT, See LICENSE file for more info.\n *\n * @author David Sehnal \n */\n\nimport { getMVSStoriesContext } from './context.ts';\nimport './elements';\nimport { MVSData } from '../../extensions/mvs/mvs-data.ts';\nimport { download } from '../../mol-util/download.ts';\n\nimport './favicon.ico';\nimport '../../mol-plugin-ui/skin/light.scss';\nimport './styles.scss';\nimport './index.html';\n\nexport function getContext(name?: string) {\n return getMVSStoriesContext({ name });\n}\n\nexport function loadFromURL(url: string, options?: { format: 'mvsx' | 'mvsj'; contextName?: string }) {\n setTimeout(() => {\n getContext(options?.contextName).dispatch({\n kind: 'load-mvs',\n format: options?.format ?? 'mvsj',\n url,\n });\n }, 0);\n}\n\nexport function loadFromData(\n data: MVSData | string | Uint8Array,\n options?: { format: 'mvsx' | 'mvsj'; contextName?: string },\n) {\n setTimeout(() => {\n getContext(options?.contextName).dispatch({\n kind: 'load-mvs',\n format: options?.format ?? 'mvsj',\n data,\n });\n }, 0);\n}\n\nfunction getStoryUrlFromId(id: string, format: 'mvsx' | 'mvsj' = 'mvsj') {\n return `https://stories.molstar.org/api/story/${id}/data`;\n}\n\nexport function loadFromID(id: string, options?: { format?: 'mvsx' | 'mvsj'; contextName?: string }) {\n loadFromURL(\n getStoryUrlFromId(id, options?.format),\n { format: options?.format ?? 'mvsj', contextName: options?.contextName },\n );\n}\n\nexport function downloadCurrentStory(options?: { contextName?: string; filename?: string }) {\n const story = getContext(options?.contextName).state.currentStoryData.value;\n if (!story) return;\n\n const isMVSJ = typeof story === 'string';\n const filename = `${options?.filename ?? 'story'}.${isMVSJ ? 'mvsj' : 'mvsx'}`;\n download(\n new Blob([typeof story === 'string' ? story : story.buffer], {\n type: isMVSJ ? 'application/json' : 'application/octet-stream',\n }),\n filename,\n );\n}\n\nexport { MVSData };\n",[],[152,170,185,276,327],{"_104":335,"_95":336,"_153":337,"_155":277,"_156":138,"_157":338,"_159":22,"_106":339,"_100":218,"_161":321,"_163":340,"_164":22,"_165":-5,"_166":341,"_98":342},"dd6ee67a-bdb6-11f0-873e-42dde27851f2","readme.md","c7ec90c8-bdb5-11f0-979f-42dde27851f2",122,["D",1762725354500],"# MolViewSpec Stories App\n\nAn app that defines `mvs-stories-snapshot-markdown` and `mvs-stories-viewer` web components that can be used to view\nMolViewSpec molecular stories.\n\nSee the [mvs-stories](../../examples/mvs-stories) example that includes specific stories.\n\n### Usage\n\n- Get `mvs-stories.css` and `mvs-stories.js` from `build/mvs-stories` and include these to your HTML page\n\n```html\n\n\n```\n\nCan also use `https://cdn.jsdelivr.net/npm/molstar@latest/build/mvs-stories/mvs-stories.js` (and `.css`). `latest` can\nbe substituted by specific version.\n\n- Place the components in your page wrapper in `

` elements to set up positioning:\n\n```html\n

\n \n

\n```\n\n- Load MolViewSpec state:\n\n```html\n\n```\n\n- See [index.html](./index.html) for full example of how to embed the app.\n\n- For interactive development build (for production use `npm run build`) of the example that immediately reflects\n changes use:\n\n```bash\nnpm run dev -- -a mvs-stories\n```\n\n### Multiple Stories on a Single Page\n\nTo support multiple instances of stories, use the `context-name='unique-name'` attribute on the `mvs-` components\ntogether with `loadFromURL/Data(..., { contextName: 'unique-name' })`.\n\nFor example (simplified to not include layout):\n\n```html\n

\n \n \n

\n\n\n```\n",[],[152,170,185,276,336],{"_104":344,"_95":345,"_153":346,"_155":277,"_156":138,"_157":347,"_159":22,"_106":348,"_100":218,"_161":321,"_163":349,"_164":22,"_165":-5,"_166":350,"_98":351},"dd7c9a40-bdb6-11f0-a612-42dde27851f2","styles.scss","c7e264fe-bdb5-11f0-899a-42dde27851f2",124,["D",1762725354602],"@use '../../mol-plugin-ui/skin/base/components/markdown.scss';\n\n.mvs-stories-markdown-explanation {\n // Adapted from skeleton.css, The MIT License (MIT), Copyright (c) 2011-2014 Dave Gamache\n line-height: 1.4;\n font-weight: 400;\n font-family: 'Raleway', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n color: #222;\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin-top: 0;\n margin-bottom: 1rem;\n font-weight: 300;\n }\n\n h1 {\n font-size: 3rem;\n line-height: 1.2;\n letter-spacing: -0.1rem;\n }\n\n h2 {\n font-size: 2.6rem;\n line-height: 1.25;\n letter-spacing: -0.1rem;\n }\n\n h3 {\n font-size: 2rem;\n line-height: 1.3;\n letter-spacing: -0.1rem;\n }\n\n h4 {\n font-size: 1.7rem;\n line-height: 1.35;\n letter-spacing: -0.08rem;\n }\n\n h5 {\n font-size: 1.4rem;\n line-height: 1.5;\n letter-spacing: -0.05rem;\n }\n\n h6 {\n font-size: 1.1rem;\n line-height: 1.6;\n letter-spacing: 0;\n }\n\n button {\n display: inline-block;\n height: 38px;\n padding: 0 24px;\n color: #555;\n text-align: center;\n font-size: 11px;\n font-weight: 600;\n line-height: 38px;\n letter-spacing: 0.1rem;\n text-transform: uppercase;\n text-decoration: none;\n white-space: nowrap;\n background-color: transparent;\n border-radius: 4px;\n border: 1px solid #bbb;\n cursor: pointer;\n box-sizing: border-box;\n }\n\n ul {\n list-style: circle inside;\n }\n\n ol {\n list-style: decimal inside;\n }\n\n ol,\n ul {\n padding-left: 0;\n margin-top: 0;\n }\n\n ul ul,\n ul ol,\n ol ol,\n ol ul {\n margin: 1.5rem 0 1.5rem 3rem;\n font-size: 90%;\n }\n\n li {\n margin-bottom: 0.2rem;\n }\n\n code {\n padding: 0.2rem 0.5rem;\n margin: 0 0.2rem;\n font-size: 90%;\n white-space: nowrap;\n background: #f1f1f1;\n border: 1px solid #e1e1e1;\n border-radius: 4px;\n }\n\n pre > code {\n display: block;\n padding: 1rem 1.5rem;\n white-space: pre;\n }\n\n th,\n td {\n padding: 12px 15px;\n text-align: left;\n border-bottom: 1px solid #e1e1e1;\n }\n\n th:first-child,\n td:first-child {\n padding-left: 0;\n }\n\n th:last-child,\n td:last-child {\n padding-right: 0;\n }\n\n button,\n .button {\n margin-bottom: 1rem;\n }\n\n input,\n textarea,\n select,\n fieldset {\n margin-bottom: 1.5rem;\n }\n\n pre,\n blockquote,\n dl,\n figure,\n table,\n p,\n ul,\n ol,\n form {\n margin-bottom: 1rem;\n }\n\n hr {\n margin-top: 1rem;\n margin-bottom: 1rem;\n border-width: 0;\n border-top: 1px solid #e1e1e1;\n }\n\n table {\n border: 1px solid #e1e1e1;\n border-collapse: collapse;\n }\n\n th {\n text-align: left;\n }\n\n th, td {\n border: 1px solid #e1e1e1;\n padding: 4px 8px;\n }\n\n img {\n max-width: 100%;\n height: auto;\n }\n\n a {\n text-decoration: none;\n color: #1d4ed7;\n\n &:hover {\n text-decoration: underline;\n }\n }\n}\n\n@media (orientation: portrait) {\n .mvs-stories-markdown-explanation {\n font-size: 0.9rem;\n }\n\n .mvs-stories-markdown-explanation h3 {\n font-size: 1.5rem;\n }\n}\n",[],[152,170,185,276,345],{"_104":353,"_95":354,"_153":355,"_155":277,"_156":138,"_157":356,"_159":22,"_106":357,"_100":218,"_161":219,"_163":358,"_164":22,"_165":-5,"_166":359,"_98":360},"dd6a199c-bdb6-11f0-a270-42dde27851f2","version.ts","c7fce658-bdb5-11f0-99a4-42dde27851f2",121,["D",1762725354478],"/**\n * Copyright (c) 2025 mol* contributors, licensed under MIT, See LICENSE file for more info.\n *\n * @author David Sehnal \n */\n\nexport const VERSION = 1;\n",[],[152,170,185,276,354],[152,170,185,276],{"_104":363,"_95":364,"_153":365,"_155":186,"_156":138,"_157":366,"_159":22,"_106":367,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":368,"_98":378},"dce63334-bdb6-11f0-8b68-42dde27851f2","ui","dce63406-bdb6-11f0-8b68-42dde27851f2",113,["D",1762725353619],[369],{"_104":370,"_95":371,"_153":372,"_155":365,"_156":138,"_157":373,"_159":22,"_106":374,"_100":218,"_161":219,"_163":375,"_164":22,"_165":-5,"_166":376,"_98":377},"dde35ca8-bdb6-11f0-aae8-42dde27851f2","entities.tsx","c784c510-bdb5-11f0-b3e3-42dde27851f2",141,["D",1762725355277],"/**\n * Copyright (c) 2022-2024 mol* contributors, licensed under MIT, See LICENSE file for more info.\n *\n * @author Alexander Rose \n */\n\nimport { PluginReactContext, PluginUIComponent } from '../../../mol-plugin-ui/base.tsx';\nimport { Button, ControlGroup, IconButton } from '../../../mol-plugin-ui/controls/common.tsx';\nimport {\n ArrowDropDownSvg,\n ArrowRightSvg,\n BrushSvg,\n CloseSvg,\n ContentCutSvg,\n MinusBoxSvg,\n PlusBoxSvg,\n SearchSvg,\n TooltipTextOutlineSvg,\n TooltipTextSvg,\n VisibilityOffOutlinedSvg,\n VisibilityOutlinedSvg,\n} from '../../../mol-plugin-ui/controls/icons.tsx';\nimport { PluginCommands } from '../../../mol-plugin/commands.ts';\nimport { type State, type StateObjectCell, StateSelection, type StateTransformer } from '../../../mol-state/index.ts';\nimport {\n ParameterControls,\n ParameterMappingControl,\n type ParamOnChange,\n SelectControl,\n} from '../../../mol-plugin-ui/controls/parameters.tsx';\nimport { ParamDefinition as PD } from '../../../mol-util/param-definition.ts';\nimport { Clip } from '../../../mol-util/clip.ts';\nimport type { StructureRepresentation3D } from '../../../mol-plugin-state/transforms/representation.ts';\nimport { Color } from '../../../mol-util/color/index.ts';\nimport { CombinedColorControl } from '../../../mol-plugin-ui/controls/color.tsx';\nimport { MarkerAction } from '../../../mol-util/marker-action.ts';\nimport { EveryLoci, Loci } from '../../../mol-model/loci.ts';\nimport { deepEqual } from '../../../mol-util/index.ts';\nimport {\n ColorParams,\n type ColorProps,\n ColorValueParam,\n createClipMapping,\n DimLightness,\n EmissiveParams,\n expandAllGroups,\n getAllEntities,\n getAllFilteredEntities,\n getAllGroups,\n getAllLeafGroups,\n getCellDescription,\n getClipObjects,\n getDistinctGroupColors,\n getEntities,\n getEntityDescription,\n getEntityLabel,\n getEveryEntity,\n getFilteredEntities,\n getGraphicsModeProps,\n getGroups,\n getRoots,\n type GraphicsMode,\n IllustrativeParams,\n LightnessParams,\n LodParams,\n MesoscaleGroup,\n type MesoscaleGroupProps,\n MesoscaleState,\n MesoscaleStateParams,\n OpacityParams,\n PatternParams,\n RootParams,\n setGraphicsCanvas3DProps,\n SimpleClipParams,\n type SimpleClipProps,\n updateColors,\n} from '../data/state.ts';\nimport React, { useState } from 'react';\nimport type { MesoscaleExplorerState } from '../app.ts';\nimport { StructureElement } from '../../../mol-model/structure/structure/element.ts';\nimport type { PluginStateObject as PSO } from '../../../mol-plugin-state/objects.ts';\nimport { Structure } from '../../../mol-model/structure.ts';\nimport type { PluginContext } from '../../../mol-plugin/context.ts';\nimport { Sphere3D } from '../../../mol-math/geometry.ts';\nimport { MesoFocusLoci } from '../behavior/camera.ts';\nimport Markdown from 'react-markdown';\nimport { combineLatest } from 'rxjs';\nimport { ColorLoaderControls } from './states.tsx';\n\nfunction centerLoci(plugin: PluginContext, loci: Loci, durationMs = 250) {\n const { canvas3d } = plugin;\n if (!canvas3d) return;\n\n const sphere = Loci.getBoundingSphere(loci) || Sphere3D();\n const snapshot = canvas3d.camera.getCenter(sphere.center);\n canvas3d.requestCameraReset({ durationMs, snapshot });\n}\n\nexport class ModelInfo extends PluginUIComponent<{}, { isDisabled: boolean }> {\n state = {\n isDisabled: 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 get info() {\n if (!MesoscaleState.has(this.plugin)) return;\n\n const state = MesoscaleState.get(this.plugin);\n if (!state.description && !state.link) return;\n\n return {\n selectionDescription: state.focusInfo,\n description: state.description,\n link: state.link,\n };\n }\n\n render() {\n const info = this.info;\n return info && (\n <>\n

{info.description}

\n Source\n

\n \n );\n }\n}\n\nconst SelectionStyleParam = PD.Select(\n 'color+outline',\n PD.objectToOptions(\n {\n 'color+outline': 'Color & Outline',\n 'color': 'Color',\n 'outline': 'Outline',\n } as const,\n ),\n);\ntype SelectionStyle = typeof SelectionStyleParam['defaultValue'];\n\nexport class SelectionInfo extends PluginUIComponent<{}, { isDisabled: boolean }> {\n state = {\n isDisabled: 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.managers.structure.selection.events.changed, (e) => {\n if (!this.state.isDisabled) {\n this.forceUpdate();\n }\n });\n }\n\n get info() {\n const infos: { label: string; key: string; description?: string }[] = [];\n this.plugin.managers.structure.selection.entries.forEach((e, k) => {\n if (StructureElement.Loci.is(e.selection) && !StructureElement.Loci.isEmpty(e.selection)) {\n const cell = this.plugin.helpers.substructureParent.get(e.selection.structure);\n const { entities } = e.selection.structure.model;\n const description = entities.data.pdbx_description.value(0)[0] || 'model';\n infos.push({\n description: description,\n label: cell?.obj?.label || 'Unknown',\n key: k,\n });\n }\n });\n return infos;\n }\n\n find(label: string) {\n MesoscaleState.set(this.plugin, { filter: `\"${label}\"` });\n if (label) expandAllGroups(this.plugin);\n }\n\n remove(key: string) {\n const e = this.plugin.managers.structure.selection.entries.get(key);\n if (!e) return;\n\n const loci = Structure.toStructureElementLoci(e.selection.structure);\n this.plugin.managers.interactivity.lociSelects.deselect({ loci }, false);\n }\n\n center(key: string) {\n const e = this.plugin.managers.structure.selection.entries.get(key);\n if (!e) return;\n\n const loci = Structure.toStructureElementLoci(e.selection.structure);\n centerLoci(this.plugin, loci);\n const cell = this.plugin.helpers.substructureParent.get(loci.structure);\n const d = getCellDescription(cell!); // '### ' + cell?.obj?.label + '\\n\\n' + cell?.obj?.description;\n MesoscaleState.set(this.plugin, { focusInfo: `${d}` });\n }\n\n get selection() {\n const info = this.info;\n const help_selection = (\n <>\n

\n Use ctrl+left to select entities, either on the 3D canvas or in the tree below\n

\n Use shift+left to select individual chain on the 3D canvas\n

\n \n );\n if (!info.length) {\n return (\n <>\n

\n {help_selection}\n

\n \n );\n }\n return (\n <>\n

\n {info.map((entry, index) => {\n const label = (\n this.center(entry.key)}\n >\n \n {entry.label}\n \n \n );\n const find = (\n this.find(entry.label)}\n />\n );\n const remove = (\n this.remove(entry.key)}\n />\n );\n return (\n <>\n \n {label}\n {find}\n {remove}\n

\n \n );\n })};\n

\n \n );\n }\n\n get style() {\n const p = this.plugin.canvas3d?.props;\n if (!p) return;\n\n if (p.renderer.dimStrength === 1 && p.marking.enabled) return 'color+outline';\n if (p.renderer.dimStrength === 1) return 'color';\n if (p.marking.enabled) return 'outline';\n }\n\n setStyle(value: SelectionStyle) {\n if (value.includes('color') && value.includes('outline')) {\n this.plugin.canvas3d?.setProps({\n renderer: {\n dimStrength: 1,\n },\n marking: {\n enabled: true,\n },\n });\n } else if (value.includes('color')) {\n this.plugin.canvas3d?.setProps({\n renderer: {\n dimStrength: 1,\n },\n marking: {\n enabled: false,\n },\n });\n } else if (value.includes('outline')) {\n this.plugin.canvas3d?.setProps({\n renderer: {\n dimStrength: 0,\n selectStrength: 0.3,\n },\n marking: {\n enabled: true,\n },\n });\n } else {\n this.plugin.canvas3d?.setProps({\n renderer: {\n dimStrength: 0,\n selectStrength: 0,\n },\n marking: {\n enabled: false,\n },\n });\n }\n\n this.forceUpdate();\n }\n\n renderStyle() {\n const style = this.style || '';\n return (\n

\n {\n this.setStyle(e.value);\n }}\n />\n

\n );\n }\n\n render() {\n return (\n <>\n {this.renderStyle()}\n {this.selection}\n \n );\n }\n}\n\nexport function MesoMarkdownAnchor({ href, children, element }: { href?: string; children?: any; element?: any }) {\n const plugin = React.useContext(PluginReactContext);\n if (!href) return element;\n // Decode the href to handle encoded spaces and other characters\n const decodedHref = href ? decodeURIComponent(href) : '';\n const handleHover = (e: React.MouseEvent) => {\n e.preventDefault();\n if (decodedHref.startsWith('i')) {\n plugin.canvas3d?.mark({ loci: EveryLoci }, MarkerAction.RemoveHighlight);\n const query_names = decodedHref.substring(1).split(',');\n for (const query_name of query_names) {\n const entities = getEveryEntity(plugin, query_name);\n for (const r of entities) {\n const repr = r.obj?.data.repr;\n if (repr) {\n plugin.canvas3d?.mark({ repr, loci: EveryLoci }, MarkerAction.Highlight);\n }\n }\n }\n } else if (decodedHref.startsWith('g')) {\n plugin.canvas3d?.mark({ loci: EveryLoci }, MarkerAction.RemoveHighlight);\n const qindex = decodedHref.indexOf('.');\n const query = decodedHref.substring(1, qindex) + ':';\n const query_names = decodedHref.substring(qindex + 1).split(',');\n for (const query_name of query_names) {\n const e = getAllEntities(plugin, query + query_name);\n for (const r of e) {\n const repr = r.obj?.data.repr;\n if (repr) {\n plugin.canvas3d?.mark({ repr, loci: EveryLoci }, MarkerAction.Highlight);\n }\n }\n }\n }\n };\n const handleLeave = (e: React.MouseEvent) => {\n // Implement your hover off logic here\n // Example: Perform an action if the href starts with 'h'\n if (decodedHref.startsWith('i') || decodedHref.startsWith('g')) {\n // Example hover off action\n e.preventDefault();\n plugin.canvas3d?.mark({ loci: EveryLoci }, MarkerAction.RemoveHighlight);\n }\n };\n const handleClick = (e: React.MouseEvent) => {\n e.preventDefault();\n if (href.startsWith('#')) {\n plugin.managers.snapshot.applyKey(decodedHref.substring(1));\n } else if (decodedHref.startsWith('i')) {\n plugin.managers.interactivity.lociSelects.deselectAll();\n plugin.canvas3d?.mark({ loci: EveryLoci }, MarkerAction.RemoveHighlight);\n const query_names = decodedHref.substring(1).split(',');\n for (const query_name of query_names) {\n const entities = getFilteredEntities(plugin, '', query_name);\n for (const r of entities) {\n const repr = r.obj?.data.repr;\n if (repr) {\n plugin.canvas3d?.mark({ repr, loci: EveryLoci }, MarkerAction.Highlight);\n }\n const cell = r as\n | StateObjectCell\n | undefined;\n if (!(cell?.obj?.data.sourceData instanceof Structure)) {\n return;\n }\n const loci = Structure.toStructureElementLoci(cell.obj.data.sourceData);\n plugin.managers.interactivity.lociSelects.toggle({ loci }, false);\n }\n }\n } else if (decodedHref.startsWith('g')) {\n plugin.managers.interactivity.lociSelects.deselectAll();\n plugin.canvas3d?.mark({ loci: EveryLoci }, MarkerAction.RemoveHighlight);\n const qindex = decodedHref.indexOf('.');\n const query = decodedHref.substring(1, qindex) + ':';\n const query_names = decodedHref.substring(qindex + 1).split(',');\n for (const query_name of query_names) {\n const entities = getAllEntities(plugin, query + query_name);\n for (const r of entities) {\n const repr = r.obj?.data.repr;\n if (repr) {\n plugin.canvas3d?.mark({ repr, loci: EveryLoci }, MarkerAction.Highlight);\n }\n const cell = r as\n | StateObjectCell\n | undefined;\n if (!(cell?.obj?.data.sourceData instanceof Structure)) return;\n const loci = Structure.toStructureElementLoci(cell.obj.data.sourceData);\n plugin.managers.interactivity.lociSelects.toggle({ loci }, false);\n }\n }\n } else {\n // open the link in a new tab\n globalThis.open(decodedHref, '_blank');\n }\n };\n\n if (decodedHref[0] === '#') {\n return {children};\n }\n if (decodedHref[0] === 'i' || decodedHref[0] === 'g') {\n return (\n \n {children}\n \n );\n }\n if (decodedHref[0] === 'h') {\n return {children};\n }\n return element;\n}\n\nexport function MesoViewportSnapshotDescription() {\n let tSize = 14;\n const plugin = React.useContext(PluginReactContext);\n if (MesoscaleState.has(plugin)) {\n const state = MesoscaleState.get(plugin);\n tSize = state.textSizeDescription;\n }\n const [_, setV] = React.useState(0);\n const [isShown, setIsShown] = useState(true);\n const [textSize, setTextSize] = useState(tSize);\n const toggleVisibility = () => {\n setIsShown(!isShown);\n };\n\n const increaseTextSize = () => {\n setTextSize((prevSize) => Math.min(prevSize + 2, 50)); // Increase the text size by 2px, but not above 50px\n };\n\n const decreaseTextSize = () => {\n setTextSize((prevSize) => Math.max(prevSize - 2, 2)); // Decrease the text size by 2px, but not below 2px\n };\n\n React.useEffect(() => {\n const sub = plugin.managers.snapshot.events.changed.subscribe(() => setV((v) => v + 1));\n return () => sub.unsubscribe();\n }, [plugin]);\n\n const current = plugin.managers.snapshot.state.current;\n if (!current) return null;\n\n const e = plugin.managers.snapshot.getEntry(current)!;\n if (!e?.description?.trim()) return null;\n if (MesoscaleState.has(plugin)) {\n MesoscaleState.set(plugin, { textSizeDescription: textSize });\n }\n const showInfo = (\n \n );\n const increasePoliceSize = (\n \n );\n const decreasePoliceSize = (\n \n );\n return (\n <>\n

\n {showInfo}\n {increasePoliceSize}\n {decreasePoliceSize}\n

\n \n {e.descriptionFormat === 'plaintext' &&\n e.description ||\n {e.description}}\n \n \n );\n}\n\nexport class FocusInfo extends PluginUIComponent<{}, { isDisabled: boolean }> {\n componentDidMount() {\n this.subscribe(\n combineLatest([\n this.plugin.state.data.behaviors.isUpdating,\n this.plugin.managers.structure.selection.events.changed,\n ]),\n ([isUpdating]) => {\n if (!isUpdating) this.forceUpdate();\n },\n );\n }\n\n get info() {\n let focusInfo = '';\n if (MesoscaleState.has(this.plugin)) {\n const state = MesoscaleState.get(this.plugin);\n if (state.focusInfo) focusInfo = state.focusInfo;\n }\n return focusInfo;\n }\n\n render() {\n const focusInfo = this.info;\n const description = (focusInfo !== '')\n ? {focusInfo}\n : '';\n return (\n <>\n

\n {description}\n

\n \n );\n }\n}\n\nexport class EntityControls extends PluginUIComponent<{}, { isDisabled: boolean }> {\n filterRef = React.createRef();\n prevFilter = '';\n filterFocus = false;\n\n state = {\n isDisabled: false,\n };\n\n componentDidMount() {\n this.subscribe(this.plugin.state.events.object.created, (e) => {\n this.forceUpdate();\n });\n\n this.subscribe(this.plugin.state.events.object.removed, (e) => {\n this.forceUpdate();\n });\n\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 && this.roots.some((r) => e.cell === r) ||\n (MesoscaleState.has(this.plugin) && MesoscaleState.ref(this.plugin) === e.ref)\n ) {\n this.forceUpdate();\n }\n });\n }\n\n componentDidUpdate(): void {\n const filter = this.filter;\n if (this.filterFocus) {\n this.filterRef.current?.focus();\n this.prevFilter = filter;\n }\n }\n\n get roots() {\n return getRoots(this.plugin);\n }\n\n setGroupBy = (value: number) => {\n this.roots.forEach((c, i) => {\n if (c.state.isHidden && value === i || !c.state.isHidden && value !== i) {\n PluginCommands.State.ToggleVisibility(this.plugin, { state: c.parent!, ref: c.transform.ref });\n }\n });\n };\n\n get groupBy() {\n const roots = this.roots;\n for (let i = 0, il = roots.length; i < il; ++i) {\n if (!roots[i].state.isHidden) return i;\n }\n return 0;\n }\n\n setFilter = (value: string) => {\n this.filterFocus = true;\n const filter = value.trim().replace(/\\s+/gi, ' ');\n MesoscaleState.set(this.plugin, { filter });\n if (filter) expandAllGroups(this.plugin);\n };\n\n get filter() {\n return MesoscaleState.has(this.plugin) ? MesoscaleState.get(this.plugin).filter : '';\n }\n\n setGraphics = (graphics: GraphicsMode) => {\n MesoscaleState.set(this.plugin, { graphics });\n (this.plugin.customState as MesoscaleExplorerState).graphicsMode = graphics;\n\n if (graphics === 'custom') return;\n\n const update = this.plugin.state.data.build();\n\n const { lodLevels, approximate, alphaThickness } = getGraphicsModeProps(graphics);\n\n for (const r of getAllEntities(this.plugin)) {\n update.to(r).update((old) => {\n if (old.type) {\n old.type.params.lodLevels = lodLevels;\n old.type.params.approximate = approximate;\n old.type.params.alphaThickness = alphaThickness;\n }\n });\n }\n\n for (const g of getAllGroups(this.plugin)) {\n update.to(g).update((old) => {\n old.lod.lodLevels = lodLevels;\n old.lod.approximate = approximate;\n });\n }\n\n update.commit();\n\n setGraphicsCanvas3DProps(this.plugin, graphics);\n };\n\n get graphics() {\n const customState = this.plugin.customState as MesoscaleExplorerState;\n return MesoscaleState.has(this.plugin) ? MesoscaleState.get(this.plugin).graphics : customState.graphicsMode;\n }\n\n renderGraphics() {\n const graphics = this.graphics;\n return (\n

\n {\n this.setGraphics(e.value);\n }}\n />\n

\n );\n }\n\n render() {\n const roots = this.roots;\n if (roots.length === 0 || !MesoscaleState.has(this.plugin)) {\n return (\n <>\n {this.renderGraphics()}\n \n );\n }\n\n const disabled = this.state.isDisabled;\n const groupBy = this.groupBy;\n\n const options: [string, string][] = [];\n roots.forEach((c, i) => {\n options.push([`${i}`, c.obj!.label]);\n });\n const groupParam = PD.Select(options[0][0], options);\n const root = roots.length === 1 ? roots[0] : roots[groupBy];\n\n const filter = this.filter;\n\n return (\n <>\n {this.renderGraphics()}\n \n this.setFilter(e.target.value)}\n disabled={disabled}\n onBlur={() => this.filterFocus = false}\n />\n this.setFilter('')}\n />\n \n {options.length > 1 && (\n

\n {\n this.setGroupBy(parseInt(e.value));\n }}\n />\n

\n )}\n \n \n \n \n );\n }\n}\n\nclass Node

\n extends PluginUIComponent

{\n is(e: State.ObjectEvent) {\n return e.ref === this.ref && e.state === this.props.cell.parent;\n }\n\n get ref() {\n return this.props.cell.transform.ref;\n }\n\n get cell() {\n return this.props.cell;\n }\n\n get roots() {\n return getRoots(this.plugin);\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 (!this.state.isDisabled && this.is(e)) {\n this.forceUpdate();\n }\n });\n }\n}\n\nexport class GroupNode extends Node<\n { filter: string },\n { isCollapsed: boolean; action?: 'color' | 'clip' | 'root'; isDisabled: boolean }\n> {\n state = {\n isCollapsed: !!this.props.cell.state.isCollapsed,\n action: undefined,\n isDisabled: false,\n };\n\n toggleExpanded = (e: React.MouseEvent) => {\n PluginCommands.State.ToggleExpanded(this.plugin, { state: this.cell.parent!, ref: this.ref });\n };\n\n toggleColor = (e?: React.MouseEvent) => {\n this.setState({ action: this.state.action === 'color' ? undefined : 'color' });\n };\n\n toggleClip = () => {\n this.setState({ action: this.state.action === 'clip' ? undefined : 'clip' });\n };\n\n toggleRoot = () => {\n this.setState({ action: this.state.action === 'root' ? undefined : 'root' });\n };\n\n showInfo = (e: React.MouseEvent) => {\n e.preventDefault();\n const d = getCellDescription(this.cell); // '### ' + this.cell?.obj?.label + '\\n\\n' + this.cell?.obj?.description;\n MesoscaleState.set(this.plugin, { focusInfo: `${d}` });\n };\n\n highlight = (e: React.MouseEvent) => {\n e.preventDefault();\n this.plugin.canvas3d?.mark({ loci: EveryLoci }, MarkerAction.RemoveHighlight);\n for (const r of this.allFilteredEntities) {\n const repr = r.obj?.data.repr;\n if (repr) {\n this.plugin.canvas3d?.mark({ repr, loci: EveryLoci }, MarkerAction.Highlight);\n }\n }\n };\n\n clearHighlight = (e: React.MouseEvent) => {\n e.preventDefault();\n this.plugin.canvas3d?.mark({ loci: EveryLoci }, MarkerAction.RemoveHighlight);\n e.currentTarget.blur();\n };\n\n get groups() {\n return getGroups(this.plugin, this.cell.params?.values.tag);\n }\n\n get allGroups() {\n const allGroups = getAllGroups(this.plugin, this.cell.params?.values.tag);\n allGroups.push(this.cell);\n return allGroups;\n }\n\n get entities() {\n return getEntities(this.plugin, this.cell.params?.values.tag);\n }\n\n get filteredEntities() {\n return getFilteredEntities(this.plugin, this.cell.params?.values.tag, this.props.filter);\n }\n\n get allEntities() {\n return getAllEntities(this.plugin, this.cell.params?.values.tag);\n }\n\n get allFilteredEntities() {\n return getAllFilteredEntities(this.plugin, this.cell.params?.values.tag, this.props.filter);\n }\n\n toggleVisible = (e: React.MouseEvent) => {\n PluginCommands.State.ToggleVisibility(this.plugin, { state: this.cell.parent!, ref: this.ref });\n const isHidden = this.cell.state.isHidden;\n\n for (const r of this.allFilteredEntities) {\n this.plugin.state.data.updateCellState(r.transform.ref, { isHidden });\n }\n\n this.plugin.build().to(this.ref).update((old) => {\n old.hidden = isHidden;\n }).commit();\n };\n\n updateColor = (values: ColorProps) => {\n const update = this.plugin.state.data.build();\n const { value, illustrative, type, lightness, alpha, emissive } = values;\n\n const entities = this.filteredEntities;\n\n let groupColors: Color[] = [];\n\n if (type === 'generate') {\n groupColors = getDistinctGroupColors(entities.length, value, values.variability, values.shift);\n }\n\n for (let i = 0; i < entities.length; ++i) {\n const c = type === 'generate' ? groupColors[i] : value;\n update.to(entities[i]).update((old) => {\n if (old.type) {\n if (illustrative) {\n old.colorTheme = {\n name: 'illustrative',\n params: { style: { name: 'uniform', params: { value: c, lightness } } },\n };\n } else {\n old.colorTheme = { name: 'uniform', params: { value: c, lightness } };\n }\n old.type.params.alpha = alpha;\n old.type.params.xrayShaded = alpha < 1 ? 'inverted' : false;\n old.type.params.emissive = emissive;\n } else {\n old.coloring.params.color = c;\n old.coloring.params.lightness = lightness;\n old.alpha = alpha;\n old.xrayShaded = alpha < 1 ? true : false;\n old.emissive = emissive;\n }\n });\n }\n\n update.to(this.ref).update((old) => {\n old.color = values;\n });\n\n for (const r of this.roots) {\n update.to(r).update((old) => {\n old.color.type = 'custom';\n });\n }\n\n update.commit();\n };\n\n updateRoot = async (values: PD.Values) => {\n await updateColors(this.plugin, values, this.cell.params?.values.tag, this.props.filter);\n\n const update = this.plugin.state.data.build();\n\n for (const r of this.roots) {\n if (r !== this.cell) {\n update.to(r).update((old) => {\n old.color.type = 'custom';\n });\n const others = getAllLeafGroups(this.plugin, r.params?.values.tag);\n for (const o of others) {\n update.to(o).update((old) => {\n old.color.type = 'custom';\n });\n }\n }\n }\n\n update.to(this.ref).update((old) => {\n old.color = values;\n });\n\n update.commit();\n };\n\n updateClip = (values: PD.Values) => {\n const update = this.plugin.state.data.build();\n const clipObjects = getClipObjects(values as SimpleClipProps, this.plugin.canvas3d!.boundingSphere);\n\n for (const r of this.allFilteredEntities) {\n update.to(r).update((old) => {\n if (old.type) {\n old.type.params.clip.objects = clipObjects;\n } else {\n old.clip.objects = clipObjects;\n }\n });\n }\n\n for (const g of this.allGroups) {\n update.to(g).update((old) => {\n old.clip = values;\n });\n }\n\n update.commit();\n };\n\n updateLod = (values: PD.Values) => {\n MesoscaleState.set(this.plugin, { graphics: 'custom' });\n (this.plugin.customState as MesoscaleExplorerState).graphicsMode = 'custom';\n\n const update = this.plugin.state.data.build();\n\n for (const r of this.allFilteredEntities) {\n update.to(r).update((old) => {\n if (old.type) {\n old.type.params.lodLevels = values.lodLevels;\n old.type.params.cellSize = values.cellSize;\n old.type.params.batchSize = values.batchSize;\n old.type.params.approximate = values.approximate;\n }\n });\n }\n\n for (const g of this.allGroups) {\n update.to(g).update((old) => {\n old.lod = values;\n });\n }\n\n update.commit();\n };\n\n update = (props: MesoscaleGroupProps) => {\n this.plugin.state.data.build().to(this.ref).update(props);\n };\n\n renderColor() {\n const color = this.cell.params?.values.color;\n if (this.cell.params?.values.color.type === 'uniform') {\n const style = {\n backgroundColor: Color.toStyle(color.value),\n minWidth: 32,\n width: 32,\n borderRight: `6px solid ${Color.toStyle(Color.lighten(color.value, color.lightness))}`,\n };\n return \n );\n\n const expand = (\n 0 || entities.length > 0 ? 'visible' : 'hidden' }}\n />\n );\n const color = (entities.length > 0 && !isRoot) && this.renderColor();\n const root = (isRoot && this.allGroups.length > 1) && (\n \n );\n const clip = (\n \n );\n const visibility = (\n \n );\n const loadColorButton = (depth === 0) && ;\n return (\n <>\n

\n {expand}\n {label}\n {root || color}\n {loadColorButton}\n {clip}\n {visibility}\n

\n {this.state.action === 'color' && (\n

\n \n \n \n

\n )}\n {this.state.action === 'clip' && (\n

\n \n \n \n \n

\n )}\n {this.state.action === 'root' && (\n

\n \n \n \n

\n )}\n {(!state.isCollapsed) && (\n <>\n {groups.map((c) => {\n return (\n \n );\n })}\n {this.filteredEntities.map((c) => {\n return ;\n })}\n \n )}\n \n );\n }\n}\n\nexport class EntityNode extends Node<{}, { action?: 'color' | 'clip'; isDisabled: boolean }> {\n state = {\n action: undefined,\n isDisabled: false,\n };\n\n clipMapping = createClipMapping(this);\n\n get groups() {\n return this.plugin.state.data.select(\n StateSelection.Generators.ofTransformer(MesoscaleGroup)\n .filter((c) => !!this.cell.transform.tags?.includes(c.params?.values.tag)),\n );\n }\n\n toggleVisible = (e: React.MouseEvent) => {\n e.preventDefault();\n PluginCommands.State.ToggleVisibility(this.plugin, { state: this.props.cell.parent!, ref: this.ref });\n e.currentTarget.blur();\n };\n\n toggleColor = (e?: React.MouseEvent) => {\n if (e?.ctrlKey) {\n this.updateLightness({ lightness: this.lightnessValue?.lightness ? 0 : DimLightness });\n e.preventDefault();\n } else {\n this.setState({ action: this.state.action === 'color' ? undefined : 'color' });\n }\n };\n\n toggleClip = () => {\n this.setState({ action: this.state.action === 'clip' ? undefined : 'clip' });\n };\n\n highlight = (e: React.MouseEvent) => {\n e.preventDefault();\n this.plugin.canvas3d?.mark({ loci: EveryLoci }, MarkerAction.RemoveHighlight);\n const repr = this.cell?.obj?.data.repr;\n if (repr) {\n this.plugin.canvas3d?.mark({ repr, loci: EveryLoci }, MarkerAction.Highlight);\n }\n e.currentTarget.blur();\n };\n\n clearHighlight = (e: React.MouseEvent) => {\n e.preventDefault();\n this.plugin.canvas3d?.mark({ loci: EveryLoci }, MarkerAction.RemoveHighlight);\n e.currentTarget.blur();\n };\n\n toggleSelect = (e: React.MouseEvent) => {\n e.preventDefault();\n const cell = this.cell as\n | StateObjectCell\n | undefined;\n if (!(cell?.obj?.data.sourceData instanceof Structure)) return;\n\n const loci = Structure.toStructureElementLoci(cell.obj.data.sourceData);\n this.plugin.managers.interactivity.lociSelects.toggle({ loci }, false);\n };\n\n center = (e: React.MouseEvent) => {\n e.preventDefault();\n const cell = this.cell as\n | StateObjectCell\n | undefined;\n if (!(cell?.obj?.data.sourceData instanceof Structure)) return;\n\n const loci = Structure.toStructureElementLoci(cell.obj.data.sourceData);\n centerLoci(this.plugin, loci);\n };\n\n handleClick = (e: React.MouseEvent) => {\n if (e.ctrlKey) {\n this.toggleSelect(e);\n } else {\n const d = getEntityDescription(this.plugin, this.cell);\n if (this.cell?.obj?.data.sourceData.state.models.length !== 0) {\n const repr = this.cell?.obj?.data.repr;\n if (repr) {\n // for fiber need to think how to handle.\n const aloci = repr.getAllLoci()[0];\n const locis = Loci.normalize(aloci, 'chainInstances') as StructureElement.Loci;\n const nChain = aloci.structure.state.unitSymmetryGroups.length;\n let index = MesoscaleState.get(this.plugin).index + 1;\n if (index * nChain >= locis.elements.length) index = 0;\n const elems = locis.elements.slice(index * nChain, (index + 1) * nChain); // end index is not included\n const loci = StructureElement.Loci(aloci.structure, elems);\n const sphere = Loci.getBoundingSphere(loci) || Sphere3D();\n const state = this.plugin.state.behaviors;\n const selections = state.select(StateSelection.Generators.ofTransformer(MesoFocusLoci));\n const params = selections.length === 1 ? selections[0].obj?.data.params : undefined;\n if (!params.centerOnly) {\n this.plugin.managers.camera.focusSphere(sphere, params);\n } else {\n const snapshot = this.plugin.canvas3d?.camera.getCenter(sphere.center);\n this.plugin.canvas3d?.requestCameraReset({ durationMs: params.durationMs, snapshot });\n }\n MesoscaleState.set(this.plugin, { index: index, focusInfo: `${d}` });\n }\n } else {\n this.center(e);\n MesoscaleState.set(this.plugin, { focusInfo: `${d}` });\n }\n }\n };\n\n get colorValue(): Color | undefined {\n if (this.cell.transform.params?.colorTheme?.params.value) {\n return this.cell.transform.params?.colorTheme?.params.value;\n } else if (this.cell.transform.params?.colorTheme?.name === 'illustrative') {\n return this.cell.transform.params?.colorTheme?.params.style.params.value;\n } else {\n return this.cell.transform.params?.colorTheme?.params.value ??\n this.cell.transform.params?.coloring?.params.color;\n }\n }\n\n get illustrativeValue(): { illustrative: boolean } | undefined {\n return {\n illustrative: (this.cell.transform.params?.colorTheme?.name === 'illustrative'),\n };\n }\n\n get lightnessValue(): { lightness: number } | undefined {\n if (this.cell.transform.params?.colorTheme?.name === 'illustrative') {\n return {\n lightness: this.cell.transform.params?.colorTheme?.params.style.params.lightness ?? 0,\n };\n } else {\n return {\n lightness: this.cell.transform.params?.colorTheme?.params.lightness ??\n this.cell.transform.params?.coloring?.params.lightness ?? 0,\n };\n }\n }\n\n get opacityValue(): { alpha: number } | undefined {\n return {\n alpha: this.cell.transform.params?.type?.params.alpha ?? this.cell.transform.params?.alpha ?? 1,\n };\n }\n\n get emissiveValue(): { emissive: number } | undefined {\n return {\n emissive: this.cell.transform.params?.type?.params.emissive ?? this.cell.transform.params?.emissive ?? 0,\n };\n }\n\n get clipValue(): Clip.Props | undefined {\n return this.cell.transform.params.type?.params.clip ?? this.cell.transform.params.clip;\n }\n\n get lodValue(): PD.Values | undefined {\n const p = this.cell.transform.params?.type?.params;\n if (!p) return;\n return {\n lodLevels: p.lodLevels,\n cellSize: p.cellSize,\n batchSize: p.batchSize,\n approximate: p.approximate,\n };\n }\n\n get patternValue(): { amplitude: number; frequency: number } | undefined {\n const p = this.cell.transform.params;\n if (p.type) return;\n return {\n amplitude: p.bumpAmplitude,\n frequency: p.bumpFrequency * 10,\n };\n }\n\n updateColor: ParamOnChange = ({ value }) => {\n const update = this.plugin.state.data.build();\n for (const g of this.groups) {\n update.to(g.transform.ref).update((old) => {\n old.color.type = 'custom';\n });\n }\n for (const r of this.roots) {\n update.to(r).update((old) => {\n old.color.type = 'custom';\n });\n }\n update.to(this.ref).update((old) => {\n if (old.colorTheme) {\n if (old.colorTheme.name === 'illustrative') {\n old.colorTheme.params.style.params.value = value;\n } else {\n old.colorTheme.params.value = value;\n }\n } else if (old.coloring) {\n old.coloring.params.color = value;\n }\n });\n update.commit();\n };\n\n updateIllustrative = (values: PD.Values) => {\n return this.plugin.build().to(this.ref).update((old) => {\n if (old.colorTheme) {\n if (old.colorTheme.name !== 'illustrative' && values.illustrative) {\n old.colorTheme = {\n name: 'illustrative',\n params: {\n style: {\n name: 'uniform',\n params: {\n value: old.colorTheme.params.value,\n lightness: old.colorTheme.params.lightness,\n },\n },\n },\n };\n } else if (old.colorTheme.name === 'illustrative' && !values.illustrative) {\n old.colorTheme = {\n name: 'uniform',\n params: {\n value: old.colorTheme.params.style.params.value,\n lightness: old.colorTheme.params.style.params.lightness,\n },\n };\n }\n }\n }).commit();\n };\n\n updateLightness = (values: PD.Values) => {\n return this.plugin.build().to(this.ref).update((old) => {\n if (old.colorTheme) {\n if (old.colorTheme.name === 'illustrative') {\n old.colorTheme.params.style.params.lightness = values.lightness;\n } else {\n old.colorTheme.params.lightness = values.lightness;\n }\n } else if (old.coloring) {\n old.coloring.params.lightness = values.lightness;\n }\n }).commit();\n };\n\n updateOpacity = (values: PD.Values) => {\n return this.plugin.build().to(this.ref).update((old) => {\n if (old.type) {\n old.type.params.alpha = values.alpha;\n old.type.params.xrayShaded = values.alpha < 1 ? 'inverted' : false;\n } else {\n old.alpha = values.alpha;\n old.xrayShaded = values.alpha < 1 ? true : false;\n }\n }).commit();\n };\n\n updateEmissive = (values: PD.Values) => {\n return this.plugin.build().to(this.ref).update((old) => {\n if (old.type) {\n old.type.params.emissive = values.emissive;\n } else {\n old.emissive = values.emissive;\n }\n }).commit();\n };\n\n updateClip = (props: Clip.Props) => {\n const params = this.cell.transform.params;\n const clip = params.type ? params.type.params.clip : params.clip;\n if (!PD.areEqual(Clip.Params, clip, props)) {\n this.plugin.build().to(this.ref).update((old) => {\n if (old.type) {\n old.type.params.clip = props;\n } else {\n old.clip = props;\n }\n }).commit();\n }\n };\n\n updateLod = (values: PD.Values) => {\n const params = this.cell.transform.params as StateTransformer.Params;\n if (!params.type) return;\n\n MesoscaleState.set(this.plugin, { graphics: 'custom' });\n (this.plugin.customState as MesoscaleExplorerState).graphicsMode = 'custom';\n\n if (\n !deepEqual(params.type.params.lodLevels, values.lodLevels) ||\n params.type.params.cellSize !== values.cellSize || params.type.params.batchSize !== values.batchSize ||\n params.type.params.approximate !== values.approximate\n ) {\n this.plugin.build().to(this.ref).update((old) => {\n old.type.params.lodLevels = values.lodLevels;\n old.type.params.cellSize = values.cellSize;\n old.type.params.batchSize = values.batchSize;\n old.type.params.approximate = values.approximate;\n }).commit();\n }\n };\n\n updatePattern = (values: PD.Values) => {\n return this.plugin.build().to(this.ref).update((old) => {\n if (!old.type) {\n old.bumpAmplitude = values.amplitude;\n old.bumpFrequency = values.frequency / 10;\n }\n }).commit();\n };\n\n render() {\n const cellState = this.cell.state;\n const disabled = this.cell.status !== 'error' && this.cell.status !== 'ok';\n const depth = this.props.depth;\n const colorValue = this.colorValue;\n const lightnessValue = this.lightnessValue;\n const illustrativeValue = this.illustrativeValue;\n const opacityValue = this.opacityValue;\n const emissiveValue = this.emissiveValue;\n const lodValue = this.lodValue;\n const patternValue = this.patternValue;\n\n const l = getEntityLabel(this.plugin, this.cell);\n const label = (\n \n {l}\n \n );\n\n const color = colorValue !== undefined && (\n \n );\n const clip = (\n \n );\n const visibility = (\n \n );\n\n return (\n <>\n

\n {label}\n {color}\n {clip}\n {visibility}\n

\n {this.state.action === 'color' && colorValue !== void 0 && (\n

\n \n \n \n \n \n \n {patternValue && (\n \n )}\n \n

\n )}\n {this.state.action === 'clip' && (\n

\n \n \n {lodValue && (\n \n )}\n \n

\n )}\n \n );\n }\n}\n",[],[152,170,185,364,371],[152,170,185,364],[152,170,185],{"_104":381,"_95":382,"_153":383,"_155":171,"_156":138,"_157":384,"_159":22,"_106":385,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":386,"_98":387},"d6c9b5a2-bdb6-11f0-bda3-42dde27851f2","viewer","d6c9b67e-bdb6-11f0-bda3-42dde27851f2",109,["D",1762725343366],[],[152,170,382],[152,170],{"_104":390,"_95":391,"_153":392,"_155":154,"_156":138,"_157":393,"_159":22,"_106":394,"_100":218,"_161":321,"_163":395,"_164":22,"_165":-5,"_166":396,"_98":397},"c8881e70-bdb6-11f0-953b-42dde27851f2","README.md","674d25ec-bdb6-11f0-8f4d-42dde27851f2",108,["D",1762725319395],"# Frontend\n\nThis directory contains the frontend TSX components for the Molstar Viewer applications.\n\n## Structure\n\n```\nfrontend/\n├── apps/ # Individual app components\n│ ├── viewer.tsx # Standard Mol* viewer\n│ ├── docking-viewer.tsx # Docking viewer\n│ ├── mesoscale-explorer.tsx # Mesoscale explorer\n│ └── mvs-stories.tsx # MVS Stories\n└── README.md # This file\n```\n\n## App Components\n\nEach app is a TSX component that returns a complete HTML document with:\n\n1. **HTML structure** - Full ``, ``, and `` tags\n2. **Metadata** - Character set, viewport, and title\n3. **Container div** - Where the Molstar viewer will be rendered\n4. **Module script** - Client-side JavaScript that imports and initializes Molstar\n\n### Example Structure\n\n```tsx\n/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nexport default function ViewerApp() {\n return (\n \n \n \n \n Mol* Viewer\n \n \n

Mol* Viewer

\n Loading...\n

\n \n \n \n\n",[],[401,177,99],{"_104":421,"_95":290,"_153":422,"_155":408,"_156":138,"_157":423,"_159":22,"_106":424,"_100":218,"_161":219,"_163":425,"_164":22,"_165":-5,"_166":426,"_98":427},"d29a6e14-bdc9-11f0-b67b-42dde27851f2","51aa3fe6-bdc9-11f0-9f6e-42dde27851f2",313,["D",1762733496778],"/**\n * Copyright (c) 2018-2020 mol* contributors, licensed under MIT, See LICENSE file for more info.\n *\n * @author David Sehnal \n * @author Alexander Rose \n */\n\nimport { Structure } from '../../mol-model/structure.ts';\nimport type { BuiltInTrajectoryFormat } from '../../mol-plugin-state/formats/trajectory.ts';\nimport { PluginStateObject as PSO, PluginStateTransform } from '../../mol-plugin-state/objects.ts';\nimport { createPluginUI } from '../../mol-plugin-ui/index.ts';\nimport { renderReact18 } from '../../mol-plugin-ui/react18.ts';\nimport type { PluginUIContext } from '../../mol-plugin-ui/context.ts';\nimport type { PluginLayoutControlsDisplay } from '../../mol-plugin/layout.ts';\nimport { DefaultPluginUISpec, type PluginUISpec } from '../../mol-plugin-ui/spec.ts';\nimport { PluginBehaviors } from '../../mol-plugin/behavior.ts';\nimport { PluginCommands } from '../../mol-plugin/commands.ts';\nimport { PluginConfig } from '../../mol-plugin/config.ts';\nimport { PluginSpec } from '../../mol-plugin/spec.ts';\nimport { StateObject } from '../../mol-state/index.ts';\nimport { Task } from '../../mol-task/index.ts';\nimport { Color } from '../../mol-util/color/index.ts';\nimport { ColorNames } from '../../mol-util/color/names.ts';\nimport { ParamDefinition as PD } from '../../mol-util/param-definition.ts';\nimport '../../mol-util/polyfill';\nimport { ObjectKeys } from '../../mol-util/type-helpers.ts';\nimport './index.html';\nimport { ShowButtons, StructurePreset, ViewportComponent } from './viewport.tsx';\n\nimport '../../mol-plugin-ui/skin/light.scss';\n\nexport { PLUGIN_VERSION as version } from '../../mol-plugin/version.ts';\nexport { setDebugMode, setProductionMode } from '../../mol-util/debug.ts';\nexport { Viewer as DockingViewer };\n\nconst DefaultViewerOptions = {\n extensions: ObjectKeys({}),\n layoutIsExpanded: true,\n layoutShowControls: true,\n layoutShowRemoteState: true,\n layoutControlsDisplay: 'reactive' as PluginLayoutControlsDisplay,\n layoutShowSequence: true,\n layoutShowLog: true,\n layoutShowLeftPanel: true,\n\n viewportShowExpand: PluginConfig.Viewport.ShowExpand.defaultValue,\n viewportShowControls: PluginConfig.Viewport.ShowControls.defaultValue,\n viewportShowSettings: PluginConfig.Viewport.ShowSettings.defaultValue,\n viewportShowSelectionMode: PluginConfig.Viewport.ShowSelectionMode.defaultValue,\n viewportShowAnimation: PluginConfig.Viewport.ShowAnimation.defaultValue,\n pluginStateServer: PluginConfig.State.DefaultServer.defaultValue,\n volumeStreamingServer: PluginConfig.VolumeStreaming.DefaultServer.defaultValue,\n pdbProvider: PluginConfig.Download.DefaultPdbProvider.defaultValue,\n emdbProvider: PluginConfig.Download.DefaultEmdbProvider.defaultValue,\n};\n\nclass Viewer {\n constructor(public plugin: PluginUIContext) {\n }\n\n static async create(\n elementOrId: string | HTMLElement,\n colors = [Color(0x992211), Color(0xDDDDDD)],\n showButtons = true,\n ) {\n const o = {\n ...DefaultViewerOptions,\n ...{\n layoutIsExpanded: false,\n layoutShowControls: false,\n layoutShowRemoteState: false,\n layoutShowSequence: true,\n layoutShowLog: false,\n layoutShowLeftPanel: true,\n\n viewportShowExpand: true,\n viewportShowControls: false,\n viewportShowSettings: false,\n viewportShowSelectionMode: false,\n viewportShowAnimation: false,\n },\n };\n const defaultSpec = DefaultPluginUISpec();\n\n const spec: PluginUISpec = {\n actions: defaultSpec.actions,\n behaviors: [\n PluginSpec.Behavior(PluginBehaviors.Representation.HighlightLoci, { mark: false }),\n PluginSpec.Behavior(PluginBehaviors.Representation.DefaultLociLabelProvider),\n PluginSpec.Behavior(PluginBehaviors.Camera.FocusLoci),\n\n PluginSpec.Behavior(PluginBehaviors.CustomProps.StructureInfo),\n PluginSpec.Behavior(PluginBehaviors.CustomProps.Interactions),\n PluginSpec.Behavior(PluginBehaviors.CustomProps.SecondaryStructure),\n ],\n animations: defaultSpec.animations,\n customParamEditors: defaultSpec.customParamEditors,\n layout: {\n initial: {\n isExpanded: o.layoutIsExpanded,\n showControls: o.layoutShowControls,\n controlsDisplay: o.layoutControlsDisplay,\n },\n },\n components: {\n ...defaultSpec.components,\n controls: {\n ...defaultSpec.components?.controls,\n top: o.layoutShowSequence ? undefined : 'none',\n bottom: o.layoutShowLog ? undefined : 'none',\n left: o.layoutShowLeftPanel ? undefined : 'none',\n },\n remoteState: o.layoutShowRemoteState ? 'default' : 'none',\n viewport: {\n view: ViewportComponent,\n },\n },\n config: [\n [PluginConfig.Viewport.ShowExpand, o.viewportShowExpand],\n [PluginConfig.Viewport.ShowControls, o.viewportShowControls],\n [PluginConfig.Viewport.ShowSettings, o.viewportShowSettings],\n [PluginConfig.Viewport.ShowSelectionMode, o.viewportShowSelectionMode],\n [PluginConfig.Viewport.ShowAnimation, o.viewportShowAnimation],\n [PluginConfig.State.DefaultServer, o.pluginStateServer],\n [PluginConfig.State.CurrentServer, o.pluginStateServer],\n [PluginConfig.VolumeStreaming.DefaultServer, o.volumeStreamingServer],\n [PluginConfig.Download.DefaultPdbProvider, o.pdbProvider],\n [PluginConfig.Download.DefaultEmdbProvider, o.emdbProvider],\n [ShowButtons, showButtons],\n ],\n };\n\n const element = typeof elementOrId === 'string' ? document.getElementById(elementOrId) : elementOrId;\n if (!element) throw new Error(`Could not get element with id '${elementOrId}'`);\n const plugin = await createPluginUI({ target: element, spec, render: renderReact18 });\n\n (plugin.customState as any) = {\n colorPalette: {\n name: 'colors',\n params: { list: { colors } },\n },\n };\n\n PluginCommands.Canvas3D.SetSettings(plugin, {\n settings: {\n renderer: {\n ...plugin.canvas3d!.props.renderer,\n backgroundColor: ColorNames.white,\n },\n camera: {\n ...plugin.canvas3d!.props.camera,\n helper: { axes: { name: 'off', params: {} } },\n },\n },\n });\n\n return new Viewer(plugin);\n }\n\n async loadStructuresFromUrlsAndMerge(\n sources: { url: string; format: BuiltInTrajectoryFormat; isBinary?: boolean }[],\n ) {\n const structures: { ref: string }[] = [];\n for (const { url, format, isBinary } of sources) {\n const data = await this.plugin.builders.data.download({ url, isBinary });\n const trajectory = await this.plugin.builders.structure.parseTrajectory(data, format);\n const model = await this.plugin.builders.structure.createModel(trajectory);\n const modelProperties = await this.plugin.builders.structure.insertModelProperties(model);\n const structure = await this.plugin.builders.structure.createStructure(modelProperties || model);\n const structureProperties = await this.plugin.builders.structure.insertStructureProperties(structure);\n\n structures.push({ ref: structureProperties?.ref || structure.ref });\n }\n\n // remove current structures from hierarchy as they will be merged\n // TODO only works with using loadStructuresFromUrlsAndMerge once\n // need some more API metho to work with the hierarchy\n this.plugin.managers.structure.hierarchy.updateCurrent(\n this.plugin.managers.structure.hierarchy.current.structures,\n 'remove',\n );\n\n const dependsOn = structures.map(({ ref }) => ref);\n const data = this.plugin.state.data.build().toRoot().apply(MergeStructures, { structures }, { dependsOn });\n const structure = await data.commit();\n const structureProperties = await this.plugin.builders.structure.insertStructureProperties(structure);\n this.plugin.behaviors.canvas3d.initialized.subscribe(async (v) => {\n await this.plugin.builders.structure.representation.applyPreset(\n structureProperties || structure,\n StructurePreset,\n );\n });\n }\n}\n\ntype MergeStructures = typeof MergeStructures;\nconst MergeStructures = PluginStateTransform.BuiltIn({\n name: 'merge-structures',\n display: { name: 'Merge Structures', description: 'Merge Structure' },\n from: PSO.Root,\n to: PSO.Molecule.Structure,\n params: {\n structures: PD.ObjectList(\n {\n ref: PD.Text(''),\n },\n ({ ref }) => ref,\n { isHidden: true },\n ),\n },\n})({\n apply({ params, dependencies }) {\n return Task.create('Merge Structures', async (ctx) => {\n if (params.structures.length === 0) return StateObject.Null;\n\n const first = dependencies![params.structures[0].ref].data as Structure;\n const builder = Structure.Builder({ masterModel: first.models[0] });\n for (const { ref } of params.structures) {\n const s = dependencies![ref].data as Structure;\n for (const unit of s.units) {\n // TODO invariantId\n builder.addUnit(unit.kind, unit.model, unit.conformation.operator, unit.elements, unit.traits);\n }\n }\n\n const structure = builder.getStructure();\n return new PSO.Molecule.Structure(structure, { label: 'Merged Structure' });\n });\n },\n});\n\n(window as any).DockingViewer = Viewer;\n",[],[401,177,290],{"_104":429,"_95":430,"_153":431,"_155":408,"_156":138,"_157":432,"_159":22,"_106":433,"_100":218,"_161":219,"_163":434,"_164":22,"_165":-5,"_166":435,"_98":436},"d2d4d874-bdc9-11f0-b6d9-42dde27851f2","viewport.tsx","51b6eca0-bdc9-11f0-b60c-42dde27851f2",322,["D",1762733496849],"/**\n * Copyright (c) 2020-2024 mol* contributors, licensed under MIT, See LICENSE file for more info.\n *\n * @author Alexander Rose \n */\n\nimport { InteractionsRepresentationProvider } from '../../mol-model-props/computed/representations/interactions.ts';\nimport { InteractionTypeColorThemeProvider } from '../../mol-model-props/computed/themes/interaction-type.ts';\nimport {\n presetStaticComponent,\n StructureRepresentationPresetProvider,\n} from '../../mol-plugin-state/builder/structure/representation-preset.ts';\nimport {\n StructureSelectionQueries,\n StructureSelectionQuery,\n} from '../../mol-plugin-state/helpers/structure-selection-query.ts';\nimport type { StructureRef } from '../../mol-plugin-state/manager/structure/hierarchy-state.ts';\nimport { PluginUIComponent } from '../../mol-plugin-ui/base.tsx';\nimport { LociLabels } from '../../mol-plugin-ui/controls.tsx';\nimport { Button } from '../../mol-plugin-ui/controls/common.tsx';\nimport { BackgroundTaskProgress } from '../../mol-plugin-ui/task.tsx';\nimport { Toasts } from '../../mol-plugin-ui/toast.tsx';\nimport { Viewport, ViewportControls } from '../../mol-plugin-ui/viewport.tsx';\nimport { PluginCommands } from '../../mol-plugin/commands.ts';\nimport { PluginConfig } from '../../mol-plugin/config.ts';\nimport type { PluginContext } from '../../mol-plugin/context.ts';\nimport { MolScriptBuilder as MS } from '../../mol-script/language/builder.ts';\nimport { StateObjectRef } from '../../mol-state/index.ts';\nimport { Color } from '../../mol-util/color/index.ts';\nimport { Material } from '../../mol-util/material.ts';\n\nfunction shinyStyle(plugin: PluginContext) {\n return PluginCommands.Canvas3D.SetSettings(plugin, {\n settings: {\n renderer: {\n ...plugin.canvas3d!.props.renderer,\n },\n postprocessing: {\n ...plugin.canvas3d!.props.postprocessing,\n occlusion: { name: 'off', params: {} },\n shadow: { name: 'off', params: {} },\n outline: { name: 'off', params: {} },\n },\n },\n });\n}\n\nfunction occlusionStyle(plugin: PluginContext) {\n return PluginCommands.Canvas3D.SetSettings(plugin, {\n settings: {\n renderer: {\n ...plugin.canvas3d!.props.renderer,\n },\n postprocessing: {\n ...plugin.canvas3d!.props.postprocessing,\n outline: {\n name: 'on',\n params: {\n scale: 1.0,\n threshold: 0.33,\n color: Color(0x0000),\n includeTransparent: true,\n },\n },\n shadow: { name: 'off', params: {} },\n },\n },\n });\n}\n\nconst ligandPlusSurroundings = StructureSelectionQuery(\n 'Surrounding Residues (5 \\u212B) of Ligand plus Ligand itself',\n MS.struct.modifier.union([\n MS.struct.modifier.includeSurroundings({\n 0: StructureSelectionQueries.ligand.expression,\n radius: 5,\n 'as-whole-residues': true,\n }),\n ]),\n);\n\nconst ligandSurroundings = StructureSelectionQuery(\n 'Surrounding Residues (5 \\u212B) of Ligand',\n MS.struct.modifier.union([\n MS.struct.modifier.exceptBy({\n 0: ligandPlusSurroundings.expression,\n by: StructureSelectionQueries.ligand.expression,\n }),\n ]),\n);\n\nconst PresetParams = {\n ...StructureRepresentationPresetProvider.CommonParams,\n};\n\nconst CustomMaterial = Material({ roughness: 0.2, metalness: 0 });\n\nexport const StructurePreset = StructureRepresentationPresetProvider({\n id: 'preset-structure',\n display: { name: 'Structure' },\n params: () => PresetParams,\n async apply(ref, params, plugin) {\n const structureCell = StateObjectRef.resolveAndCheck(plugin.state.data, ref);\n if (!structureCell) return {};\n\n const components = {\n ligand: await presetStaticComponent(plugin, structureCell, 'ligand'),\n polymer: await presetStaticComponent(plugin, structureCell, 'polymer'),\n };\n\n const { update, builder, typeParams } = StructureRepresentationPresetProvider.reprBuilder(plugin, params);\n const representations = {\n ligand: builder.buildRepresentation(update, components.ligand, {\n type: 'ball-and-stick',\n typeParams: { ...typeParams, material: CustomMaterial, sizeFactor: 0.35 },\n color: 'element-symbol',\n colorParams: { carbonColor: { name: 'element-symbol', params: {} } },\n }, { tag: 'ligand' }),\n polymer: builder.buildRepresentation(update, components.polymer, {\n type: 'cartoon',\n typeParams: { ...typeParams, material: CustomMaterial },\n color: 'chain-id',\n colorParams: { palette: (plugin.customState as any).colorPalette },\n }, { tag: 'polymer' }),\n };\n\n await update.commit({ revertOnError: true });\n await shinyStyle(plugin);\n plugin.managers.interactivity.setProps({ granularity: 'residue' });\n\n return { components, representations };\n },\n});\n\nexport const IllustrativePreset = StructureRepresentationPresetProvider({\n id: 'preset-illustrative',\n display: { name: 'Illustrative' },\n params: () => PresetParams,\n async apply(ref, params, plugin) {\n const structureCell = StateObjectRef.resolveAndCheck(plugin.state.data, ref);\n if (!structureCell) return {};\n\n const components = {\n ligand: await presetStaticComponent(plugin, structureCell, 'ligand'),\n polymer: await presetStaticComponent(plugin, structureCell, 'polymer'),\n };\n\n const { update, builder, typeParams } = StructureRepresentationPresetProvider.reprBuilder(plugin, params);\n const representations = {\n ligand: builder.buildRepresentation(update, components.ligand, {\n type: 'spacefill',\n typeParams: { ...typeParams, ignoreLight: true },\n color: 'element-symbol',\n colorParams: { carbonColor: { name: 'element-symbol', params: {} } },\n }, { tag: 'ligand' }),\n polymer: builder.buildRepresentation(update, components.polymer, {\n type: 'spacefill',\n typeParams: { ...typeParams, ignoreLight: true },\n color: 'illustrative',\n colorParams: { palette: (plugin.customState as any).colorPalette },\n }, { tag: 'polymer' }),\n };\n\n await update.commit({ revertOnError: true });\n await occlusionStyle(plugin);\n plugin.managers.interactivity.setProps({ granularity: 'residue' });\n\n return { components, representations };\n },\n});\n\nconst SurfacePreset = StructureRepresentationPresetProvider({\n id: 'preset-surface',\n display: { name: 'Surface' },\n params: () => PresetParams,\n async apply(ref, params, plugin) {\n const structureCell = StateObjectRef.resolveAndCheck(plugin.state.data, ref);\n const structure = structureCell?.obj?.data;\n if (!structureCell || !structure) return {};\n\n const components = {\n ligand: await presetStaticComponent(plugin, structureCell, 'ligand'),\n polymer: await presetStaticComponent(plugin, structureCell, 'polymer'),\n };\n\n const { update, builder, typeParams } = StructureRepresentationPresetProvider.reprBuilder(plugin, params);\n const representations = {\n ligand: builder.buildRepresentation(update, components.ligand, {\n type: 'ball-and-stick',\n typeParams: { ...typeParams, material: CustomMaterial, sizeFactor: 0.26 },\n color: 'element-symbol',\n colorParams: { carbonColor: { name: 'element-symbol', params: {} } },\n }, { tag: 'ligand' }),\n polymer: builder.buildRepresentation(update, components.polymer, {\n type: 'molecular-surface',\n typeParams: {\n ...typeParams,\n material: CustomMaterial,\n quality: 'custom',\n resolution: 0.5,\n doubleSided: true,\n },\n color: 'partial-charge',\n }, { tag: 'polymer' }),\n };\n\n await update.commit({ revertOnError: true });\n await shinyStyle(plugin);\n plugin.managers.interactivity.setProps({ granularity: 'residue' });\n\n return { components, representations };\n },\n});\n\nconst PocketPreset = StructureRepresentationPresetProvider({\n id: 'preset-pocket',\n display: { name: 'Pocket' },\n params: () => PresetParams,\n async apply(ref, params, plugin) {\n const structureCell = StateObjectRef.resolveAndCheck(plugin.state.data, ref);\n const structure = structureCell?.obj?.data;\n if (!structureCell || !structure) return {};\n\n const components = {\n ligand: await presetStaticComponent(plugin, structureCell, 'ligand'),\n surroundings: await plugin.builders.structure.tryCreateComponentFromSelection(\n structureCell,\n ligandSurroundings,\n `surroundings`,\n ),\n };\n\n const { update, builder, typeParams } = StructureRepresentationPresetProvider.reprBuilder(plugin, params);\n const representations = {\n ligand: builder.buildRepresentation(update, components.ligand, {\n type: 'ball-and-stick',\n typeParams: { ...typeParams, material: CustomMaterial, sizeFactor: 0.26 },\n color: 'element-symbol',\n colorParams: { carbonColor: { name: 'element-symbol', params: {} } },\n }, { tag: 'ligand' }),\n surroundings: builder.buildRepresentation(update, components.surroundings, {\n type: 'molecular-surface',\n typeParams: {\n ...typeParams,\n material: CustomMaterial,\n includeParent: true,\n quality: 'custom',\n resolution: 0.2,\n doubleSided: true,\n },\n color: 'partial-charge',\n }, { tag: 'surroundings' }),\n };\n\n await update.commit({ revertOnError: true });\n await shinyStyle(plugin);\n plugin.managers.interactivity.setProps({ granularity: 'element' });\n\n return { components, representations };\n },\n});\n\nconst InteractionsPreset = StructureRepresentationPresetProvider({\n id: 'preset-interactions',\n display: { name: 'Interactions' },\n params: () => PresetParams,\n async apply(ref, params, plugin) {\n const structureCell = StateObjectRef.resolveAndCheck(plugin.state.data, ref);\n const structure = structureCell?.obj?.data;\n if (!structureCell || !structure) return {};\n\n const components = {\n ligand: await presetStaticComponent(plugin, structureCell, 'ligand'),\n surroundings: await plugin.builders.structure.tryCreateComponentFromSelection(\n structureCell,\n ligandSurroundings,\n `surroundings`,\n ),\n interactions: await presetStaticComponent(plugin, structureCell, 'ligand'),\n };\n\n const { update, builder, typeParams } = StructureRepresentationPresetProvider.reprBuilder(plugin, params);\n const representations = {\n ligand: builder.buildRepresentation(update, components.ligand, {\n type: 'ball-and-stick',\n typeParams: { ...typeParams, material: CustomMaterial, sizeFactor: 0.3 },\n color: 'element-symbol',\n colorParams: { carbonColor: { name: 'element-symbol', params: {} } },\n }, { tag: 'ligand' }),\n ballAndStick: builder.buildRepresentation(update, components.surroundings, {\n type: 'ball-and-stick',\n typeParams: { ...typeParams, material: CustomMaterial, sizeFactor: 0.1, sizeAspectRatio: 1 },\n color: 'element-symbol',\n colorParams: { carbonColor: { name: 'element-symbol', params: {} } },\n }, { tag: 'ball-and-stick' }),\n interactions: builder.buildRepresentation(update, components.interactions, {\n type: InteractionsRepresentationProvider,\n typeParams: { ...typeParams, material: CustomMaterial, includeParent: true, parentDisplay: 'between' },\n color: InteractionTypeColorThemeProvider,\n }, { tag: 'interactions' }),\n label: builder.buildRepresentation(update, components.surroundings, {\n type: 'label',\n typeParams: { ...typeParams, material: CustomMaterial, background: false, borderWidth: 0.1 },\n color: 'uniform',\n colorParams: { value: Color(0x000000) },\n }, { tag: 'label' }),\n };\n\n await update.commit({ revertOnError: true });\n await shinyStyle(plugin);\n plugin.managers.interactivity.setProps({ granularity: 'element' });\n\n return { components, representations };\n },\n});\n\nexport const ShowButtons = PluginConfig.item('showButtons', true);\n\nexport class ViewportComponent extends PluginUIComponent {\n async _set(structures: readonly StructureRef[], preset: StructureRepresentationPresetProvider) {\n await this.plugin.managers.structure.component.clear(structures);\n await this.plugin.managers.structure.component.applyPreset(structures, preset);\n }\n\n set = async (preset: StructureRepresentationPresetProvider) => {\n await this._set(this.plugin.managers.structure.hierarchy.selection.structures, preset);\n };\n\n structurePreset = () => this.set(StructurePreset);\n illustrativePreset = () => this.set(IllustrativePreset);\n surfacePreset = () => this.set(SurfacePreset);\n pocketPreset = () => this.set(PocketPreset);\n interactionsPreset = () => this.set(InteractionsPreset);\n\n get showButtons() {\n return this.plugin.config.get(ShowButtons);\n }\n\n render() {\n const VPControls = this.plugin.spec.components?.viewport?.controls || ViewportControls;\n\n return (\n <>\n \n {this.showButtons && (\n

\n \n

\n {\n /*

\n \n

*/\n }\n

\n \n

\n )}\n \n \n

\n \n \n

\n \n );\n }\n}\n",[],[401,177,430],[401,177],{"_104":439,"_95":185,"_153":440,"_155":402,"_156":138,"_157":441,"_159":22,"_106":442,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":443,"_98":645},"d1eb34ee-bdc9-11f0-aa36-42dde27851f2","d1eb35c0-bdc9-11f0-aa36-42dde27851f2",302,["D",1762733495633],[444,470,554,577,602,611,620,628,636],{"_104":445,"_95":192,"_153":446,"_155":440,"_156":138,"_157":447,"_159":22,"_106":448,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":449,"_98":469},"d20fb972-bdc9-11f0-8403-42dde27851f2","d20fba4e-bdc9-11f0-8403-42dde27851f2",304,["D",1762733495876],[450,460],{"_104":451,"_95":452,"_153":453,"_155":446,"_156":138,"_157":454,"_159":22,"_106":455,"_100":456,"_161":219,"_163":457,"_164":22,"_165":-5,"_166":458,"_98":459},"d2cb5ec0-bdc9-11f0-b67b-42dde27851f2","camera.ts","c7694e3e-bdb5-11f0-a726-42dde27851f2",321,["D",1762733497099],2,"/**\n * Copyright (c) 2023-2025 mol* contributors, licensed under MIT, See LICENSE file for more info.\n *\n * @author Alexander Rose \n */\n\nimport { Loci } from '../../../mol-model/loci.ts';\nimport { ParamDefinition as PD } from '../../../mol-util/param-definition.ts';\nimport { PluginBehavior } from '../../../mol-plugin/behavior.ts';\nimport { ButtonsType, ModifiersKeys } from '../../../mol-util/input/input-observer.ts';\nimport { Binding } from '../../../mol-util/binding.ts';\nimport { PluginCommands } from '../../../mol-plugin/commands.ts';\nimport { Sphere3D } from '../../../mol-math/geometry.ts';\nimport { StructureElement } from '../../../mol-model/structure.ts';\n\nconst B = ButtonsType;\nconst M = ModifiersKeys;\nconst Trigger = Binding.Trigger;\nconst Key = Binding.TriggerKey;\n\nconst DefaultMesoFocusLociBindings = {\n clickCenter: Binding(\n [\n Trigger(B.Flag.Primary, M.create()),\n Trigger(B.Flag.Trigger),\n ],\n 'Camera center',\n 'Click element using ${triggers}',\n ),\n clickCenterFocus: Binding(\n [\n Trigger(B.Flag.Secondary, M.create()),\n ],\n 'Camera center and focus',\n 'Click element using ${triggers}',\n ),\n keyCenterOnly: Binding([Key('C')], 'Center Only Toggle', 'Press ${triggers}'),\n};\n\nexport const MesoFocusLociParams = {\n minRadius: PD.Numeric(8, { min: 1, max: 50, step: 1 }),\n extraRadius: PD.Numeric(4, { min: 1, max: 50, step: 1 }, {\n description: 'Value added to the bounding-sphere radius of the Loci',\n }),\n durationMs: PD.Numeric(250, { min: 0, max: 1000, step: 1 }, { description: 'Camera transition duration' }),\n centerOnly: PD.Boolean(true, { description: 'Keep current camera distance' }),\n bindings: PD.Value(DefaultMesoFocusLociBindings, { isHidden: true }),\n};\ntype MesoFocusLociProps = PD.Values;\n\nexport const MesoFocusLoci = PluginBehavior.create({\n name: 'camera-meso-focus-loci',\n category: 'interaction',\n ctor: class extends PluginBehavior.Handler {\n register(): void {\n this.subscribeObservable(this.ctx.behaviors.interaction.click, ({ current, button, modifiers }) => {\n const { canvas3d } = this.ctx;\n if (!canvas3d) return;\n\n const loci = Loci.normalize(current.loci, this.ctx.managers.interactivity.props.granularity);\n const sphere = Loci.getBoundingSphere(loci) || Sphere3D();\n\n const { clickCenter, clickCenterFocus } = this.params.bindings;\n const { durationMs, extraRadius, minRadius, centerOnly } = this.params;\n const radius = Math.max(sphere.radius + extraRadius, minRadius);\n\n if (Binding.match(clickCenter, button, modifiers)) {\n // left mouse button\n if (Loci.isEmpty(current.loci)) {\n PluginCommands.Camera.Reset(this.ctx, {});\n return;\n }\n if (StructureElement.Loci.is(current.loci)) {\n if (centerOnly) {\n const snapshot = canvas3d.camera.getCenter(sphere.center);\n canvas3d.requestCameraReset({ durationMs, snapshot });\n } else {\n this.ctx.managers.camera.focusSphere(sphere, this.params);\n }\n }\n } else if (Binding.match(clickCenterFocus, button, modifiers)) {\n // right mouse button\n if (Loci.isEmpty(current.loci)) {\n PluginCommands.Camera.Reset(this.ctx, {});\n return;\n }\n if (centerOnly) {\n const snapshot = canvas3d.camera.getCenter(sphere.center, radius);\n canvas3d.requestCameraReset({ durationMs, snapshot });\n } else {\n this.ctx.managers.camera.focusSphere(sphere, this.params);\n }\n }\n });\n\n this.subscribeObservable(this.ctx.behaviors.interaction.key, ({ code, key, modifiers }) => {\n if (!this.ctx.canvas3d) return;\n const b = { ...DefaultMesoFocusLociBindings, ...this.params.bindings };\n const { centerOnly } = this.params;\n\n if (Binding.matchKey(b.keyCenterOnly, code, modifiers, key)) {\n this.params.centerOnly = !centerOnly;\n }\n });\n }\n },\n params: () => MesoFocusLociParams,\n display: { name: 'Camera Meso Focus Loci on Canvas' },\n});\n",[],[401,185,192,452],{"_104":461,"_95":462,"_153":463,"_155":446,"_156":138,"_157":464,"_159":22,"_106":465,"_100":456,"_161":219,"_163":466,"_164":22,"_165":-5,"_166":467,"_98":468},"d2c5926a-bdc9-11f0-b01f-42dde27851f2","select.ts","c75f422c-bdb5-11f0-acd9-42dde27851f2",320,["D",1762733497062],"/**\n * Copyright (c) 2023-2025 mol* contributors, licensed under MIT, See LICENSE file for more info.\n *\n * @author Alexander Rose \n */\n\nimport { EveryLoci, Loci } from '../../../mol-model/loci.ts';\nimport { ParamDefinition as PD } from '../../../mol-util/param-definition.ts';\nimport { PluginBehavior } from '../../../mol-plugin/behavior.ts';\nimport { ButtonsType, ModifiersKeys } from '../../../mol-util/input/input-observer.ts';\nimport { Binding } from '../../../mol-util/binding.ts';\nimport { PluginStateObject as SO } from '../../../mol-plugin-state/objects.ts';\nimport { Structure, StructureElement } from '../../../mol-model/structure.ts';\nimport { StateSelection } from '../../../mol-state/index.ts';\nimport { StateTreeSpine } from '../../../mol-state/tree/spine.ts';\nimport type { Representation } from '../../../mol-repr/representation.ts';\nimport { MarkerAction } from '../../../mol-util/marker-action.ts';\nimport type { PluginContext } from '../../../mol-plugin/context.ts';\nimport { expandAllGroups, getCellDescription, getEveryEntity, MesoscaleState } from '../data/state.ts';\n\nconst B = ButtonsType;\nconst M = ModifiersKeys;\nconst Trigger = Binding.Trigger;\n\nconst DefaultMesoSelectLociBindings = {\n click: Binding(\n [\n Trigger(B.Flag.Primary, M.create()),\n Trigger(B.Flag.Trigger),\n ],\n 'Click',\n 'Click element using ${triggers}',\n ),\n clickToggleSelect: Binding(\n [\n Trigger(B.Flag.Primary, M.create({ shift: true })),\n Trigger(B.Flag.Primary, M.create({ control: true })),\n ],\n 'Toggle select',\n 'Click element using ${triggers}',\n ),\n hoverHighlightOnly: Binding(\n [\n Trigger(B.Flag.None, M.create({ shift: true })),\n Trigger(B.Flag.None, M.create({ control: true })),\n ],\n 'Highlight',\n 'Hover element using ${triggers}',\n ),\n};\nconst MesoSelectLociParams = {\n bindings: PD.Value(DefaultMesoSelectLociBindings, { isHidden: true }),\n};\ntype MesoSelectLociProps = PD.Values;\n\nexport const MesoSelectLoci = PluginBehavior.create({\n name: 'camera-meso-select-loci',\n category: 'interaction',\n ctor: class extends PluginBehavior.Handler {\n private spine: StateTreeSpine.Impl;\n private lociMarkProvider = (interactionLoci: Representation.Loci, action: MarkerAction) => {\n if (!this.ctx.canvas3d) return;\n this.ctx.canvas3d.mark(interactionLoci, action);\n };\n private applySelectMark(ref: string, clear?: boolean) {\n const cell = this.ctx.state.data.cells.get(ref);\n if (cell && SO.isRepresentation3D(cell.obj)) {\n this.spine.current = cell;\n const so = this.spine.getRootOfType(SO.Molecule.Structure);\n if (so) {\n if (clear) {\n this.lociMarkProvider({ loci: Structure.Loci(so.data) }, MarkerAction.Deselect);\n }\n const loci = this.ctx.managers.structure.selection.getLoci(so.data);\n this.lociMarkProvider({ loci }, MarkerAction.Select);\n }\n }\n }\n register(): void {\n this.subscribeObservable(this.ctx.behaviors.interaction.click, ({ current, button, modifiers }) => {\n if (!this.ctx.canvas3d || this.ctx.isBusy) return;\n\n const { click, clickToggleSelect } = this.params.bindings;\n if (Binding.match(clickToggleSelect, button, modifiers)) {\n if (Loci.isEmpty(current.loci)) {\n this.ctx.managers.interactivity.lociSelects.deselectAll();\n return;\n }\n const loci = Loci.normalize(\n current.loci,\n modifiers.control ? 'entity' : this.ctx.managers.interactivity.props.granularity,\n );\n this.ctx.managers.interactivity.lociSelects.toggle({ loci }, false);\n if (StructureElement.Loci.is(current.loci)) {\n const cell = this.ctx.helpers.substructureParent.get(current.loci.structure);\n const d = getCellDescription(cell!);\n MesoscaleState.set(this.ctx, { focusInfo: `${d}` });\n }\n }\n if (Binding.match(click, button, modifiers)) {\n if (Loci.isEmpty(current.loci)) {\n MesoscaleState.set(this.ctx, { focusInfo: '', filter: '' });\n return;\n }\n const snapshotKey = current.repr?.props?.snapshotKey?.trim() ?? '';\n if (snapshotKey) {\n this.ctx.managers.snapshot.applyKey(snapshotKey);\n } else {\n if (StructureElement.Loci.is(current.loci)) {\n const cell = this.ctx.helpers.substructureParent.get(current.loci.structure);\n const d = getCellDescription(cell!);\n MesoscaleState.set(this.ctx, { focusInfo: `${d}`, filter: `${cell?.obj?.label}` });\n expandAllGroups(this.ctx);\n }\n }\n }\n });\n this.ctx.managers.interactivity.lociSelects.addProvider(this.lociMarkProvider);\n\n this.subscribeObservable(this.ctx.behaviors.interaction.hover, ({ current, button, modifiers }) => {\n if (!this.ctx.canvas3d || this.ctx.isBusy) return;\n\n const pointerLock = !!this.ctx.canvas3dContext?.input.pointerLock;\n const { hoverHighlightOnly } = this.params.bindings;\n\n if (!pointerLock && Binding.match(hoverHighlightOnly, button, modifiers)) {\n if (Loci.isEmpty(current.loci)) {\n this.ctx.managers.interactivity.lociHighlights.clearHighlights();\n return;\n }\n if (StructureElement.Loci.is(current.loci)) {\n if (modifiers.control) {\n this.ctx.managers.interactivity.lociHighlights.highlightOnly({\n repr: current.repr,\n loci: EveryLoci,\n }, false);\n } else {\n const loci = Loci.normalize(\n current.loci,\n this.ctx.managers.interactivity.props.granularity,\n );\n this.ctx.managers.interactivity.lociHighlights.highlightOnly(\n { repr: current.repr, loci },\n false,\n );\n }\n }\n }\n\n if (Loci.isEmpty(current.loci)) {\n this.ctx.behaviors.labels.highlight.next({ labels: [] });\n this.ctx.canvas3d?.mark({ loci: EveryLoci }, MarkerAction.RemoveHighlight);\n } else {\n const labels: string[] = [];\n if (StructureElement.Loci.is(current.loci)) {\n const cell = this.ctx.helpers.substructureParent.get(current.loci.structure);\n const d = getCellDescription(cell!);\n labels.push(d);\n } else {\n const loci = Loci.normalize(current.loci, this.ctx.managers.interactivity.props.granularity);\n if (loci.kind === 'group-loci') {\n if ('shape' in current.loci && current.loci.shape.geometry.kind === 'text') {\n const qname = current.repr?.props.customText;\n // highlight protein with same name\n const entities = getEveryEntity(this.ctx, qname);\n for (const r of entities) {\n const repr = r.obj?.data.repr;\n if (repr) {\n this.ctx.canvas3d?.mark({ repr, loci: EveryLoci }, MarkerAction.Highlight);\n }\n }\n }\n labels.push(loci.shape.getLabel(0, 0));\n }\n }\n this.ctx.behaviors.labels.highlight.next({ labels });\n }\n });\n this.ctx.managers.interactivity.lociHighlights.addProvider(this.lociMarkProvider);\n\n let dimDisabled = false;\n\n this.subscribeObservable(this.ctx.behaviors.interaction.keyReleased, ({ code, modifiers }) => {\n if (!this.ctx.canvas3d) return;\n\n if (\n (code.startsWith('Shift') && !modifiers.control) || (code.startsWith('Control') && !modifiers.shift)\n ) {\n if (dimDisabled) {\n dimDisabled = false;\n this.ctx.canvas3d?.setProps({ renderer: { dimStrength: 1 } }, true);\n }\n this.ctx.managers.interactivity.lociHighlights.clearHighlights();\n }\n });\n\n this.subscribeObservable(this.ctx.behaviors.interaction.key, ({ modifiers }) => {\n if (!this.ctx.canvas3d) return;\n\n if (!dimDisabled && modifiers.control && modifiers.shift) {\n dimDisabled = true;\n this.ctx.canvas3d?.setProps({ renderer: { dimStrength: 0 } });\n }\n });\n\n this.subscribeObservable(this.ctx.state.events.object.created, ({ ref }) => this.applySelectMark(ref));\n\n // re-apply select-mark to all representation of an updated structure\n this.subscribeObservable(this.ctx.state.events.object.updated, ({ ref, obj, oldObj, oldData, action }) => {\n const cell = this.ctx.state.data.cells.get(ref);\n if (cell && SO.Molecule.Structure.is(cell.obj)) {\n const structure: Structure = obj.data;\n const oldStructure: Structure | undefined = action === 'recreate'\n ? oldObj?.data\n : action === 'in-place'\n ? oldData\n : undefined;\n if (\n oldStructure &&\n Structure.areEquivalent(structure, oldStructure) &&\n Structure.areHierarchiesEqual(structure, oldStructure)\n ) return;\n\n const reprs = this.ctx.state.data.select(\n StateSelection.children(ref).ofType(SO.Molecule.Structure.Representation3D),\n );\n for (const repr of reprs) this.applySelectMark(repr.transform.ref, true);\n }\n });\n }\n unregister() {\n this.ctx.managers.interactivity.lociSelects.removeProvider(this.lociMarkProvider);\n this.ctx.managers.interactivity.lociHighlights.removeProvider(this.lociMarkProvider);\n }\n constructor(ctx: PluginContext, params: MesoSelectLociProps) {\n super(ctx, params);\n this.spine = new StateTreeSpine.Impl(ctx.state.data.cells);\n }\n },\n params: () => MesoSelectLociParams,\n display: { name: 'Camera Meso Select Loci on Canvas' },\n});\n",[],[401,185,192,462],[401,185,192],{"_104":471,"_95":200,"_153":472,"_155":440,"_156":138,"_157":473,"_159":22,"_106":474,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":475,"_98":553},"d23e2316-bdc9-11f0-87fd-42dde27851f2","d23e23f2-bdc9-11f0-87fd-42dde27851f2",307,["D",1762733496178],[476,490,497,512,535,544],{"_104":477,"_95":207,"_153":478,"_155":472,"_156":138,"_157":479,"_159":22,"_106":480,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":481,"_98":489},"d27ae3d2-bdc9-11f0-a893-42dde27851f2","d27ae54e-bdc9-11f0-a893-42dde27851f2",311,["D",1762733496576],[482],{"_104":483,"_95":241,"_153":484,"_155":478,"_156":138,"_157":101,"_159":22,"_106":485,"_100":456,"_161":219,"_163":486,"_164":22,"_165":-5,"_166":487,"_98":488},"d3586612-bdc9-11f0-b6d9-42dde27851f2","c7ae4390-bdb5-11f0-acd9-42dde27851f2",["D",1762733498028],"/**\n * Copyright (c) 2019-2024 mol* contributors, licensed under MIT, See LICENSE file for more info.\n *\n * @author Alexander Rose \n * @author Ludovic Autin \n */\n\nimport type { PluginStateObject } from '../../../../mol-plugin-state/objects.ts';\nimport { StructureRepresentation3D } from '../../../../mol-plugin-state/transforms/representation.ts';\nimport type { PluginContext } from '../../../../mol-plugin/context.ts';\nimport { SpacefillRepresentationProvider } from '../../../../mol-repr/structure/representation/spacefill.ts';\nimport type { StateBuilder, StateObjectRef, StateObjectSelector } from '../../../../mol-state/index.ts';\nimport type { Color } from '../../../../mol-util/color/index.ts';\nimport { ColorNames } from '../../../../mol-util/color/names.ts';\nimport {\n getDistinctBaseColors,\n getDistinctGroupColors,\n getGraphicsModeProps,\n getMesoscaleGroupParams,\n type GraphicsMode,\n MesoscaleGroup,\n MesoscaleState,\n} from '../state.ts';\nimport { CellpackAssembly, CellpackStructure } from './model.ts';\n\nfunction getSpacefillParams(color: Color, sizeFactor: number, graphics: GraphicsMode, merge?: boolean) {\n const gmp = getGraphicsModeProps(graphics === 'custom' ? 'quality' : graphics);\n return {\n type: {\n name: 'spacefill',\n params: {\n ...SpacefillRepresentationProvider.defaultValues,\n ignoreHydrogens: false,\n instanceGranularity: true,\n ignoreLight: true,\n lodLevels: gmp.lodLevels,\n quality: 'lowest', // avoid 'auto', triggers boundary calc\n sizeFactor,\n clip: {\n variant: merge ? 'pixel' : 'instance',\n objects: [],\n },\n clipPrimitive: true,\n approximate: gmp.approximate,\n alphaThickness: gmp.alphaThickness,\n visuals: [merge ? 'structure-element-sphere' : 'element-sphere'],\n },\n },\n colorTheme: {\n name: 'uniform',\n params: {\n value: color,\n saturation: 0,\n lightness: 0,\n },\n },\n sizeTheme: {\n name: 'physical',\n params: {\n value: 1,\n },\n },\n };\n}\n\nfunction getSizeFactor(name: string): number {\n switch (name) {\n case 'dLDL':\n return 2.5;\n case 'iLDL':\n return 5;\n case 'NP_CA':\n case 'POL_CA':\n case 'FactorH1':\n case 'iIgM_Antibody_5mer':\n // case 'MG_271_272_273_274_192MER': // has a coarse and an atomic part\n return 2;\n default:\n return 1;\n }\n}\n\nexport async function createCellpackHierarchy(\n plugin: PluginContext,\n trajectory: StateObjectRef,\n) {\n const builder = plugin.builders.structure;\n const state = plugin.state.data;\n\n const model = await builder.createModel(trajectory, { modelIndex: 0 });\n const entities = model.data!.entities.data;\n\n const compGroups = new Map();\n const compIds = new Map }>();\n const compColors = new Map();\n\n const funcGroups = new Map();\n const funcIds = new Map();\n const funcColors = new Map();\n\n const graphicsMode = MesoscaleState.get(plugin).graphics;\n const groupParams = getMesoscaleGroupParams(graphicsMode);\n\n const base = await state.build()\n .to(model)\n .apply(CellpackAssembly, { id: '' })\n .commit();\n\n const compRoot = await state.build()\n .toRoot()\n .apply(MesoscaleGroup, {\n ...groupParams,\n root: true,\n index: -1,\n tag: 'comp:',\n label: 'compartment',\n color: {\n type: 'custom',\n illustrative: false,\n value: ColorNames.white,\n variability: 20,\n shift: 0,\n lightness: 0,\n alpha: 1,\n emissive: 0,\n },\n }, { tags: 'group:comp:', state: { isCollapsed: false, isHidden: groupParams.hidden } })\n .commit();\n\n const funcRoot = await state.build()\n .toRoot()\n .apply(MesoscaleGroup, {\n ...groupParams,\n root: true,\n index: -1,\n tag: 'func:',\n label: 'function',\n color: {\n type: 'custom',\n illustrative: false,\n value: ColorNames.white,\n variability: 20,\n shift: 0,\n lightness: 0,\n alpha: 1,\n emissive: 0,\n },\n }, { tags: 'group:func:', state: { isCollapsed: false, isHidden: groupParams.hidden } })\n .commit();\n\n if (entities._rowCount > 1) {\n for (let i = 0; i < entities._rowCount; i++) {\n const description = entities.pdbx_description.value(i)[0] || 'unknown compartment';\n const d = description.split('.');\n const n = d.slice(0, -1).join('.');\n const l = d.at(-1)!;\n if (!compIds.has(n)) {\n compIds.set(n, { idx: compIds.size, members: new Map() });\n }\n const cm = compIds.get(n)!;\n cm.members.set(l, cm.members.size);\n\n const f = entities.details.value(i) || 'unknown function';\n if (!funcIds.has(f)) {\n funcIds.set(f, { idx: funcIds.size, size: 0 });\n }\n funcIds.get(f)!.size += 1;\n }\n\n //\n\n const baseCompColors = getDistinctBaseColors(compIds.size, 0);\n const compIdEntries = Array.from(compIds.entries());\n for (let i = 0; i < compIdEntries.length; ++i) {\n const [n, m] = compIdEntries[i];\n const groupColors = getDistinctGroupColors(m.members.size, baseCompColors[i], 20, 0);\n compColors.set(n, groupColors);\n }\n\n //\n\n const baseFuncColors = getDistinctBaseColors(funcIds.size, 0);\n const funcIdEntries = Array.from(funcIds.entries());\n for (let i = 0; i < funcIdEntries.length; ++i) {\n const [n, m] = funcIdEntries[i];\n const groupColors = getDistinctGroupColors(m.size, baseFuncColors[i], 20, 0);\n funcColors.set(n, groupColors);\n }\n\n //\n\n for (let i = 0; i < entities._rowCount; i++) {\n const description = entities.pdbx_description.value(i)[0] || 'unknown compartment';\n const nodes = description.split('.');\n for (let j = 0, jl = nodes.length - 1; j < jl; ++j) {\n const n = nodes.slice(0, j + 1).join('.');\n const p = nodes.slice(0, j).join('.');\n if (!compGroups.has(n)) {\n const colorIdx = compIds.get(n)?.idx;\n const color = colorIdx !== undefined ? baseCompColors[colorIdx] : ColorNames.white;\n const label = nodes[j];\n const parent = compGroups.get(p) ?? compRoot;\n parent.cell!.state.isCollapsed = false;\n const group = await state.build()\n .to(parent)\n .apply(MesoscaleGroup, {\n ...groupParams,\n root: parent === compRoot,\n index: colorIdx,\n tag: `comp:${n}`,\n label,\n color: {\n type: 'generate',\n illustrative: false,\n value: color,\n variability: 20,\n shift: 0,\n lightness: 0,\n alpha: 1,\n emissive: 0,\n },\n }, {\n tags: [`group:comp:${n}`, `comp:${p}`],\n state: { isCollapsed: true, isHidden: groupParams.hidden },\n })\n .commit({ revertOnError: true });\n compGroups.set(n, group);\n }\n }\n\n const f = entities.details.value(i) || 'unknown function';\n if (!funcGroups.has(f)) {\n const colorIdx = funcIds.get(f)?.idx;\n const color = colorIdx !== undefined ? baseFuncColors[colorIdx] : ColorNames.white;\n const group = await state.build()\n .to(funcRoot)\n .apply(MesoscaleGroup, {\n ...groupParams,\n index: colorIdx,\n tag: `func:${f}`,\n label: f,\n color: {\n type: 'custom',\n illustrative: false,\n value: color,\n variability: 20,\n shift: 0,\n lightness: 0,\n alpha: 1,\n emissive: 0,\n },\n }, {\n tags: [`group:func:${f}`, 'func:'],\n state: { isCollapsed: true, isHidden: groupParams.hidden },\n })\n .commit({ revertOnError: true });\n funcGroups.set(f, group);\n }\n }\n\n //\n\n await state.transaction(async () => {\n try {\n const dependsOn = [base.ref];\n plugin.animationLoop.stop({ noDraw: true });\n let build: StateBuilder.Root | StateBuilder.To = state.build();\n for (let i = 0; i < entities._rowCount; i++) {\n const description = entities.pdbx_description.value(i)[0] || 'model';\n const d = description.split('.');\n const n = d.slice(0, -1).join('.');\n const l = d.at(-1)!;\n\n const f = entities.details.value(i) || 'unknown function';\n\n const color = compColors.get(n)![compIds.get(n)!.members.get(l)!];\n const sizeFactor = getSizeFactor(l);\n\n build = build\n .toRoot()\n .apply(CellpackStructure, { structureRef: base.ref, entityId: entities.id.value(i) }, {\n dependsOn,\n })\n .apply(StructureRepresentation3D, getSpacefillParams(color, sizeFactor, graphicsMode), {\n tags: [`comp:${n}`, `func:${f}`],\n });\n }\n await build.commit();\n } catch (e) {\n console.error(e);\n plugin.log.error(e);\n } finally {\n plugin.animationLoop.start();\n }\n }).run();\n } else {\n const dependsOn = [base.ref];\n\n const merge = base.data &&\n base.data.model.entities.data._rowCount === 1 &&\n base.data.unitSymmetryGroups.length > 100 &&\n base.data.unitSymmetryGroups.some((usg) => usg.units.length > 1);\n\n await state.build()\n .toRoot()\n .apply(CellpackStructure, { structureRef: base.ref, entityId: entities.id.value(0) }, { dependsOn })\n .apply(StructureRepresentation3D, getSpacefillParams(ColorNames.lightgray, 1, graphicsMode, merge), {\n tags: [`comp:`, `func:`],\n })\n .commit();\n }\n}\n",[],[401,185,200,207,241],[401,185,200,207],{"_104":491,"_95":226,"_153":492,"_155":472,"_156":138,"_157":493,"_159":22,"_106":494,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":495,"_98":496},"d28813f4-bdc9-11f0-a893-42dde27851f2","d2881520-bdc9-11f0-a893-42dde27851f2",312,["D",1762733496663],[],[401,185,200,226],{"_104":498,"_95":251,"_153":499,"_155":472,"_156":138,"_157":500,"_159":22,"_106":501,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":502,"_98":511},"d26aa0ee-bdc9-11f0-a893-42dde27851f2","d26aa1ca-bdc9-11f0-a893-42dde27851f2",310,["D",1762733496469],[503],{"_104":504,"_95":241,"_153":505,"_155":499,"_156":138,"_157":506,"_159":22,"_106":507,"_100":456,"_161":219,"_163":508,"_164":22,"_165":-5,"_166":509,"_98":510},"d33ab7de-bdc9-11f0-8738-42dde27851f2","c7a0a032-bdb5-11f0-b028-42dde27851f2",332,["D",1762733497829],"/**\n * Copyright (c) 2023-2024 mol* contributors, licensed under MIT, See LICENSE file for more info.\n *\n * @author Alexander Rose \n */\n\nimport { MmcifFormat } from '../../../../mol-model-formats/structure/mmcif.ts';\nimport type { PluginStateObject } from '../../../../mol-plugin-state/objects.ts';\nimport { StructureRepresentation3D } from '../../../../mol-plugin-state/transforms/representation.ts';\nimport type { PluginContext } from '../../../../mol-plugin/context.ts';\nimport { SpacefillRepresentationProvider } from '../../../../mol-repr/structure/representation/spacefill.ts';\nimport type { StateBuilder, StateObjectRef, StateObjectSelector } from '../../../../mol-state/index.ts';\nimport type { Clip } from '../../../../mol-util/clip.ts';\nimport type { Color } from '../../../../mol-util/color/index.ts';\nimport { ColorNames } from '../../../../mol-util/color/names.ts';\nimport {\n getDistinctBaseColors,\n getDistinctGroupColors,\n getGraphicsModeProps,\n getMesoscaleGroupParams,\n type GraphicsMode,\n MesoscaleGroup,\n MesoscaleState,\n} from '../state.ts';\nimport { MmcifAssembly, MmcifStructure } from './model.ts';\n\nfunction getSpacefillParams(color: Color, scaleFactor: number, graphics: GraphicsMode, clipVariant: Clip.Variant) {\n const gmp = getGraphicsModeProps(graphics === 'custom' ? 'quality' : graphics);\n return {\n type: {\n name: 'spacefill',\n params: {\n ...SpacefillRepresentationProvider.defaultValues,\n ignoreHydrogens: false,\n instanceGranularity: false,\n ignoreLight: true,\n lodLevels: gmp.lodLevels.map((l) => {\n return {\n ...l,\n stride: Math.max(1, Math.round(l.stride / Math.pow(scaleFactor, l.scaleBias))),\n };\n }),\n quality: 'lowest', // avoid 'auto', triggers boundary calc\n clip: {\n variant: clipVariant,\n objects: [],\n },\n clipPrimitive: true,\n approximate: gmp.approximate,\n alphaThickness: gmp.alphaThickness,\n },\n },\n colorTheme: {\n name: 'uniform',\n params: {\n value: color,\n saturation: 0,\n lightness: 0,\n },\n },\n sizeTheme: {\n name: 'physical',\n params: {\n value: 1,\n },\n },\n };\n}\n\nexport async function createMmcifHierarchy(\n plugin: PluginContext,\n trajectory: StateObjectRef,\n) {\n const builder = plugin.builders.structure;\n const state = plugin.state.data;\n\n const model = await builder.createModel(trajectory, { modelIndex: 0 });\n const { data: entities, subtype } = model.data!.entities;\n\n const sd = model.data?.sourceData;\n if (MmcifFormat.is(sd)) {\n const pdbId = sd.data.db.struct.entry_id.value(0);\n MesoscaleState.set(plugin, {\n description: sd.data.db.struct.title.value(0),\n link: pdbId ? `https://www.rcsb.org/structure/${pdbId}` : '',\n });\n }\n\n const spheresAvgRadius = new Map();\n if (model.data!.coarseHierarchy.isDefined) {\n const spheresCount = new Map();\n const spheresEntity_id = model.data!.coarseHierarchy.spheres.entity_id;\n const spheresRadius = model.data!.coarseConformation.spheres.radius;\n for (let i = 0, il = spheresEntity_id.rowCount; i < il; ++i) {\n const entitiId = spheresEntity_id.value(i);\n const radius = spheresRadius[i];\n if (!spheresCount.has(entitiId)) {\n spheresCount.set(entitiId, 1);\n spheresAvgRadius.set(entitiId, radius);\n } else {\n spheresCount.set(entitiId, spheresCount.get(entitiId)! + 1);\n spheresAvgRadius.set(entitiId, spheresAvgRadius.get(entitiId)! + radius);\n }\n }\n spheresAvgRadius.forEach((v, k) => {\n spheresAvgRadius.set(k, v / spheresCount.get(k)!);\n });\n }\n\n const entGroups = new Map();\n const entIds = new Map }>();\n const entColors = new Map();\n\n const graphicsMode = MesoscaleState.get(plugin).graphics;\n const groupParams = getMesoscaleGroupParams(graphicsMode);\n\n const base = await state.build()\n .to(model)\n .apply(MmcifAssembly, { id: '' })\n .commit();\n\n const units = base.data!.units;\n const willBeMerged = units.length > 1 && units.every((u) => u.conformation.operator.isIdentity);\n const clipVariant = willBeMerged ? 'pixel' : 'instance';\n\n const entRoot = await state.build()\n .toRoot()\n .apply(MesoscaleGroup, {\n ...groupParams,\n root: true,\n index: -1,\n tag: 'ent:',\n label: 'entity',\n color: {\n type: 'custom',\n illustrative: false,\n value: ColorNames.white,\n variability: 20,\n shift: 0,\n lightness: 0,\n alpha: 1,\n emissive: 0,\n },\n }, { tags: 'group:ent:', state: { isCollapsed: false, isHidden: groupParams.hidden } })\n .commit();\n\n const getEntityType = (i: number) => {\n if (entities.type.value(i) === 'water') return 'water' as const;\n return subtype.value(i) || 'unknown type';\n };\n\n for (let i = 0; i < entities._rowCount; i++) {\n const t = getEntityType(i);\n if (!entIds.has(t)) {\n entIds.set(t, { idx: entIds.size, members: new Map() });\n }\n const cm = entIds.get(t)!;\n cm.members.set(i, cm.members.size);\n }\n\n //\n\n const baseEntColors = getDistinctBaseColors(entIds.size, 0);\n const entIdEntries = Array.from(entIds.entries());\n for (let i = 0; i < entIdEntries.length; ++i) {\n const [t, m] = entIdEntries[i];\n const groupColors = getDistinctGroupColors(m.members.size, baseEntColors[i], 20, 0);\n entColors.set(t, groupColors);\n }\n\n for (let i = 0; i < entities._rowCount; i++) {\n const t = getEntityType(i);\n if (!entGroups.has(t)) {\n const colorIdx = entIds.get(t)?.idx;\n const color = colorIdx !== undefined ? baseEntColors[colorIdx] : ColorNames.white;\n const group = await state.build()\n .to(entRoot)\n .applyOrUpdateTagged(`group:ent:${t}`, MesoscaleGroup, {\n ...groupParams,\n index: colorIdx,\n tag: `ent:${t}`,\n label: t,\n color: {\n type: 'generate',\n illustrative: false,\n value: color,\n variability: 20,\n shift: 0,\n lightness: 0,\n alpha: 1,\n emissive: 0,\n },\n }, { tags: `ent:`, state: { isCollapsed: true, isHidden: groupParams.hidden } })\n .commit({ revertOnError: true });\n entGroups.set(t, group);\n }\n }\n\n //\n\n await state.transaction(async () => {\n try {\n const dependsOn = [base.ref];\n plugin.animationLoop.stop({ noDraw: true });\n let build: StateBuilder.Root | StateBuilder.To = state.build();\n for (let i = 0; i < entities._rowCount; i++) {\n const t = getEntityType(i);\n const color = entColors.get(t)![entIds.get(t)!.members.get(i)!];\n const scaleFactor = spheresAvgRadius.get(entities.id.value(i)) || 1;\n\n build = build\n .toRoot()\n .apply(MmcifStructure, { structureRef: base.ref, entityId: entities.id.value(i) }, { dependsOn })\n .apply(\n StructureRepresentation3D,\n getSpacefillParams(color, scaleFactor, graphicsMode, clipVariant),\n { tags: [`ent:${t}`] },\n );\n }\n await build.commit();\n } catch (e) {\n console.error(e);\n plugin.log.error(e);\n } finally {\n plugin.animationLoop.start();\n }\n }).run();\n}\n",[],[401,185,200,251,241],[401,185,200,251],{"_104":513,"_95":267,"_153":514,"_155":472,"_156":138,"_157":515,"_159":22,"_106":516,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":517,"_98":534},"d25b97de-bdc9-11f0-b6d9-42dde27851f2","d25b9888-bdc9-11f0-b6d9-42dde27851f2",309,["D",1762733496374],[518,526],{"_104":519,"_95":214,"_153":520,"_155":514,"_156":138,"_157":521,"_159":22,"_106":522,"_100":456,"_161":219,"_163":523,"_164":22,"_165":-5,"_166":524,"_98":525},"d3363f1a-bdc9-11f0-a9fc-42dde27851f2","c7943824-bdb5-11f0-8c7b-42dde27851f2",331,["D",1762733497799],"/**\n * Copyright (c) 2022-2023 mol* contributors, licensed under MIT, See LICENSE file for more info.\n *\n * @author Alexander Rose \n */\n\nimport type { Mat4 } from '../../../../mol-math/linear-algebra/3d/mat4.ts';\nimport { getMatrices, operatorGroupsProvider } from '../../../../mol-model-formats/structure/property/assembly.ts';\nimport {\n Structure,\n StructureElement,\n StructureProperties,\n type Trajectory,\n Unit,\n} from '../../../../mol-model/structure.ts';\nimport { Assembly } from '../../../../mol-model/structure/model/properties/symmetry.ts';\nimport { PluginStateObject as SO, PluginStateTransform } from '../../../../mol-plugin-state/objects.ts';\nimport { Task } from '../../../../mol-task/index.ts';\nimport type { Table } from '../../../../mol-data/db.ts';\nimport type { mmCIF_Schema } from '../../../../mol-io/reader/cif/schema/mmcif.ts';\nimport { MmcifFormat } from '../../../../mol-model-formats/structure/mmcif.ts';\nimport { arrayFind } from '../../../../mol-data/util.ts';\nimport { StateObject, StateTransformer } from '../../../../mol-state/index.ts';\nimport type { CifField } from '../../../../mol-io/reader/cif.ts';\nimport { ParamDefinition as PD } from '../../../../mol-util/param-definition.ts';\nimport { mergeUnits } from '../util.ts';\nimport { deepEqual } from '../../../../mol-util/index.ts';\n\nexport { StructureFromPetworld };\ntype StructureFromPetworld = typeof StructureFromPetworld;\nconst StructureFromPetworld = PluginStateTransform.BuiltIn({\n name: 'structure-from-petworld',\n display: { name: 'Structure from PetWorld', description: 'Create a molecular structure from PetWorld models.' },\n from: SO.Molecule.Trajectory,\n to: SO.Molecule.Structure,\n params: {\n modelIndex: PD.Numeric(0),\n entityIds: PD.Value([]),\n },\n})({\n apply({ a, params }) {\n return Task.create('Build Structure', async (ctx) => {\n const s = await buildModelsAssembly(a.data, '1', params.modelIndex, params.entityIds).runInContext(ctx);\n if (!s || !MmcifFormat.is(s.model.sourceData)) return StateObject.Null;\n\n const { frame } = s.model.sourceData.data;\n const pdbx_model = frame.categories.pdbx_model.getField('name')!;\n const pdbx_description = frame.categories.pdbx_model.getField('description')!;\n const description = pdbx_description\n ? pdbx_description.str(params.modelIndex)\n : Structure.elementDescription(s);\n const label = pdbx_model.str(params.modelIndex);\n const props = { label, description: description };\n return new SO.Molecule.Structure(s, props);\n });\n },\n update({ newParams, oldParams }) {\n return deepEqual(newParams, oldParams)\n ? StateTransformer.UpdateResult.Unchanged\n : StateTransformer.UpdateResult.Recreate;\n },\n dispose({ b }) {\n b?.data.customPropertyDescriptors.dispose();\n },\n});\n\nfunction buildModelsAssembly(trajectory: Trajectory, asmName: string, modelIndex: number, entitiyIds: string[]) {\n return Task.create('Build Models Assembly', async (ctx) => {\n const model = await Task.resolveInContext(trajectory.getFrameAtIndex(modelIndex), ctx);\n if (!MmcifFormat.is(model.sourceData)) return;\n\n const { db, frame } = model.sourceData.data;\n const PDB_model_num = frame.categories.pdbx_struct_assembly_gen.getField('PDB_model_num')!;\n\n // hack to cache models assemblies\n if (!(trajectory as any).__modelsAssemblies) {\n (trajectory as any).__modelsAssemblies = createModelsAssemblies(\n db.pdbx_struct_assembly,\n db.pdbx_struct_assembly_gen as StructAssemblyGen,\n db.pdbx_struct_oper_list,\n PDB_model_num,\n );\n }\n const modelsAssemblies = (trajectory as any).__modelsAssemblies as ModelsAssembly[];\n\n const modelsAssembly = arrayFind(modelsAssemblies, (ma) => ma.assembly.id.toLowerCase() === asmName);\n if (!modelsAssembly) throw new Error(`Models Assembly '${asmName}' is not defined.`);\n\n const { assembly } = modelsAssembly;\n const assembler = Structure.Builder();\n const g = assembly.operatorGroups[modelIndex];\n\n const structure = Structure.ofModel(model);\n const l = StructureElement.Location.create(structure);\n const units = structure.units.filter((u) => {\n l.unit = u;\n l.element = u.elements[0];\n return entitiyIds.includes(StructureProperties.entity.id(l));\n });\n const unit = mergeUnits(units, 0);\n\n for (const oper of g.operators) {\n assembler.addUnit(\n unit.kind,\n unit.model,\n oper,\n unit.elements,\n unit.traits | Unit.Trait.FastBoundary,\n unit.invariantId,\n );\n }\n\n return assembler.getStructure();\n });\n}\n\n//\n\ntype StructAssembly = Table;\ntype StructAssemblyGen = Table;\ntype StructOperList = Table;\n\ntype ModelsAssembly = { assembly: Assembly; modelNums: number[] };\n\nfunction createModelsAssemblies(\n pdbx_struct_assembly: StructAssembly,\n pdbx_struct_assembly_gen: StructAssemblyGen,\n pdbx_struct_oper_list: StructOperList,\n PDB_model_num: CifField,\n): ReadonlyArray {\n if (!pdbx_struct_assembly._rowCount) return [];\n\n const matrices = getMatrices(pdbx_struct_oper_list);\n const assemblies: ModelsAssembly[] = [];\n for (let i = 0; i < pdbx_struct_assembly._rowCount; i++) {\n assemblies[assemblies.length] = createModelsAssembly(\n pdbx_struct_assembly,\n pdbx_struct_assembly_gen,\n i,\n matrices,\n PDB_model_num,\n );\n }\n return assemblies;\n}\n\ntype Matrices = Map;\ntype Generator = { assemblyId: string; expression: string; asymIds: string[] };\n\nfunction createModelsAssembly(\n pdbx_struct_assembly: StructAssembly,\n pdbx_struct_assembly_gen: StructAssemblyGen,\n index: number,\n matrices: Matrices,\n PDB_model_num: CifField,\n): ModelsAssembly {\n const id = pdbx_struct_assembly.id.value(index);\n const details = pdbx_struct_assembly.details.value(index);\n const generators: Generator[] = [];\n const modelNums: number[] = [];\n\n const { assembly_id, oper_expression, asym_id_list } = pdbx_struct_assembly_gen;\n\n for (let i = 0, _i = pdbx_struct_assembly_gen._rowCount; i < _i; i++) {\n if (assembly_id.value(i) !== id) continue;\n generators[generators.length] = {\n assemblyId: id,\n expression: oper_expression.value(i),\n asymIds: asym_id_list.value(i),\n };\n modelNums[modelNums.length] = PDB_model_num.int(i);\n }\n\n const assembly = Assembly.create(id, details, operatorGroupsProvider(generators, matrices));\n\n return { assembly, modelNums };\n}\n",[],[401,185,200,267,214],{"_104":527,"_95":241,"_153":528,"_155":514,"_156":138,"_157":529,"_159":22,"_106":530,"_100":456,"_161":219,"_163":531,"_164":22,"_165":-5,"_166":532,"_98":533},"d34382d8-bdc9-11f0-b67b-42dde27851f2","c7973d80-bdb5-11f0-b3e3-42dde27851f2",333,["D",1762733497803],"/**\n * Copyright (c) 2022-2024 mol* contributors, licensed under MIT, See LICENSE file for more info.\n *\n * @author Alexander Rose \n */\n\nimport { type StateBuilder, StateObjectRef } from '../../../../mol-state/index.ts';\nimport { StructureFromPetworld } from './model.ts';\nimport type { Color } from '../../../../mol-util/color/index.ts';\nimport { SpacefillRepresentationProvider } from '../../../../mol-repr/structure/representation/spacefill.ts';\nimport { StructureRepresentation3D } from '../../../../mol-plugin-state/transforms/representation.ts';\nimport type { PluginContext } from '../../../../mol-plugin/context.ts';\nimport type { PluginStateObject } from '../../../../mol-plugin-state/objects.ts';\nimport {\n getDistinctBaseColors,\n getGraphicsModeProps,\n getMesoscaleGroupParams,\n type GraphicsMode,\n MesoscaleGroup,\n MesoscaleState,\n} from '../state.ts';\nimport { ColorNames } from '../../../../mol-util/color/names.ts';\nimport { MmcifFormat } from '../../../../mol-model-formats/structure/mmcif.ts';\nimport { Task } from '../../../../mol-task/index.ts';\n\nfunction getSpacefillParams(color: Color, graphics: GraphicsMode) {\n const gmp = getGraphicsModeProps(graphics === 'custom' ? 'quality' : graphics);\n return {\n type: {\n name: 'spacefill',\n params: {\n ...SpacefillRepresentationProvider.defaultValues,\n ignoreHydrogens: true,\n instanceGranularity: true,\n ignoreLight: true,\n lodLevels: gmp.lodLevels,\n quality: 'lowest', // avoid 'auto', triggers boundary calc\n clip: {\n variant: 'instance',\n objects: [],\n },\n clipPrimitive: true,\n approximate: gmp.approximate,\n alphaThickness: gmp.alphaThickness,\n },\n },\n colorTheme: {\n name: 'uniform',\n params: {\n value: color,\n saturation: 0,\n lightness: 0,\n },\n },\n sizeTheme: {\n name: 'physical',\n params: {\n scale: 1,\n },\n },\n };\n}\n\nexport async function createPetworldHierarchy(\n plugin: PluginContext,\n trajectory: StateObjectRef,\n) {\n const cell = StateObjectRef.resolveAndCheck(plugin.state.data, trajectory);\n const tr = cell?.obj?.data;\n if (!cell || !tr) return;\n\n if (!MmcifFormat.is(tr.representative.sourceData)) return;\n\n const membrane: { modelIndex: number; entityIds: string[] }[] = [];\n const other: { modelIndex: number; entityIds: string[] }[] = [];\n for (let i = 0; i < tr.frameCount; ++i) {\n const m = await Task.resolveInContext(tr.getFrameAtIndex(i));\n // cannot use m.properties.structAsymMap because petworld models\n // may assign the same asymId to multiple entities\n const { label_asym_id, label_entity_id, _rowCount } = m.atomicHierarchy.chains;\n const membraneIds: string[] = [];\n const otherIds: string[] = [];\n const seen = new Set();\n for (let i = 0; i < _rowCount; i++) {\n const entityId = label_entity_id.value(i);\n if (seen.has(entityId)) continue;\n\n const asymId = label_asym_id.value(i);\n if (asymId.startsWith('MEM')) {\n membraneIds.push(entityId);\n } else {\n otherIds.push(entityId);\n }\n seen.add(entityId);\n }\n if (membraneIds.length) {\n membrane.push({ modelIndex: i, entityIds: membraneIds });\n }\n if (otherIds.length) {\n other.push({ modelIndex: i, entityIds: otherIds });\n }\n }\n\n const state = plugin.state.data;\n const graphicsMode = MesoscaleState.get(plugin).graphics;\n const groupParams = getMesoscaleGroupParams(graphicsMode);\n\n const group = await state.build()\n .toRoot()\n .apply(MesoscaleGroup, {\n ...groupParams,\n root: true,\n index: -1,\n tag: `ent:`,\n label: 'entity',\n color: {\n type: 'generate',\n illustrative: false,\n value: ColorNames.white,\n variability: 20,\n shift: 0,\n lightness: 0,\n alpha: 1,\n emissive: 0,\n },\n }, { tags: ['group:ent:'], state: { isCollapsed: false, isHidden: groupParams.hidden } })\n .commit({ revertOnError: true });\n\n await state.build()\n .to(group)\n .apply(MesoscaleGroup, {\n ...groupParams,\n index: undefined,\n tag: `ent:mem`,\n label: 'Membrane',\n color: {\n type: 'uniform',\n illustrative: false,\n value: ColorNames.lightgrey,\n variability: 20,\n shift: 0,\n lightness: 0,\n alpha: 1,\n emissive: 0,\n },\n }, {\n tags: ['group:ent:mem', 'ent:', '__no_group_color__'],\n state: { isCollapsed: true, isHidden: groupParams.hidden },\n })\n .commit();\n\n const colors = getDistinctBaseColors(other.length, 0);\n\n await state.transaction(async () => {\n try {\n plugin.animationLoop.stop({ noDraw: true });\n let build: StateBuilder.Root | StateBuilder.To = state.build();\n for (let i = 0, il = membrane.length; i < il; ++i) {\n build = build\n .to(cell)\n .apply(StructureFromPetworld, membrane[i])\n .apply(StructureRepresentation3D, getSpacefillParams(ColorNames.lightgrey, graphicsMode), {\n tags: ['ent:mem', '__no_group_color__'],\n });\n }\n for (let i = 0, il = other.length; i < il; ++i) {\n build = build\n .to(cell)\n .apply(StructureFromPetworld, other[i])\n .apply(StructureRepresentation3D, getSpacefillParams(colors[i], graphicsMode), { tags: ['ent:'] });\n }\n await build.commit();\n } catch (e) {\n console.error(e);\n plugin.log.error(e);\n } finally {\n plugin.animationLoop.start();\n }\n }).run();\n}\n",[],[401,185,200,267,241],[401,185,200,267],{"_104":536,"_95":537,"_153":538,"_155":472,"_156":138,"_157":539,"_159":22,"_106":540,"_100":456,"_161":219,"_163":541,"_164":22,"_165":-5,"_166":542,"_98":543},"d31c5c58-bdc9-11f0-8403-42dde27851f2","state.ts","c790687a-bdb5-11f0-b3e3-42dde27851f2",329,["D",1762733497468],"/**\n * Copyright (c) 2023-2025 mol* contributors, licensed under MIT, See LICENSE file for more info.\n *\n * @author Alexander Rose \n */\n\nimport { PluginStateObject as PSO, PluginStateTransform } from '../../../mol-plugin-state/objects.ts';\nimport type { PluginContext } from '../../../mol-plugin/context.ts';\nimport { ParamDefinition as PD } from '../../../mol-util/param-definition.ts';\nimport { Task } from '../../../mol-task/index.ts';\nimport { Color } from '../../../mol-util/color/index.ts';\nimport { Spheres } from '../../../mol-geo/geometry/spheres/spheres.ts';\nimport { Clip } from '../../../mol-util/clip.ts';\nimport { escapeRegExp, stringToWords } from '../../../mol-util/string.ts';\nimport { Mat4, Vec3 } from '../../../mol-math/linear-algebra.ts';\nimport { ParamMapping } from '../../../mol-util/param-mapping.ts';\nimport type { EntityNode } from '../ui/entities.tsx';\nimport { distinctColors, type DistinctColorsProps } from '../../../mol-util/color/distinct.ts';\nimport type { Sphere3D } from '../../../mol-math/geometry.ts';\nimport { Hcl } from '../../../mol-util/color/spaces/hcl.ts';\nimport { type StateObjectCell, StateObjectRef, StateSelection } from '../../../mol-state/index.ts';\nimport {\n ShapeRepresentation3D,\n StructureRepresentation3D,\n} from '../../../mol-plugin-state/transforms/representation.ts';\nimport type { SpacefillRepresentationProvider } from '../../../mol-repr/structure/representation/spacefill.ts';\nimport { assertUnreachable } from '../../../mol-util/type-helpers.ts';\nimport type { MesoscaleExplorerState } from '../app.ts';\nimport { saturate } from '../../../mol-math/interpolate.ts';\nimport { Material } from '../../../mol-util/material.ts';\n\nfunction getHueRange(hue: number, variability: number) {\n let min = hue - variability;\n const minOverflow = min < 0 ? -min : 0;\n let max = hue + variability;\n if (max > 360) min -= max - 360;\n max += minOverflow;\n return [Math.max(0, min), Math.min(360, max)] as [number, number];\n}\n\nfunction getGrayscaleColors(count: number, luminance: number, variability: number) {\n const out: Color[] = [];\n for (let i = 0; i < count; ++i) {\n const l = saturate(luminance / 100);\n const v = saturate(variability / 180) * Math.random();\n const s = Math.random() > 0.5 ? 1 : -1;\n const d = Math.abs(l + s * v) % 1;\n out[i] = Color.fromNormalizedRgb(d, d, d);\n }\n return out;\n}\n\nexport function getDistinctGroupColors(\n count: number,\n color: Color,\n variability: number,\n shift: number,\n props?: Partial,\n) {\n const hcl = Hcl.fromColor(Hcl(), color);\n if (isNaN(hcl[0])) {\n return getGrayscaleColors(count, hcl[2], variability);\n }\n\n if (count === 1) {\n hcl[1] = 65;\n hcl[2] = 55;\n return [Hcl.toColor(hcl)];\n }\n\n const colors = distinctColors(count, {\n hue: getHueRange(hcl[0], variability),\n chroma: [30, 100],\n luminance: [50, 100],\n clusteringStepCount: 0,\n minSampleCount: 1000,\n sampleCountFactor: 100,\n sort: 'none',\n ...props,\n });\n\n if (shift !== 0) {\n const offset = Math.floor(shift / 100 * count);\n return [...colors.slice(offset), ...colors.slice(0, offset)];\n } else {\n return colors;\n }\n}\n\nconst Colors = [0x377eb8, 0xe41a1c, 0x4daf4a, 0x984ea3, 0xff7f00, 0xffff33, 0xa65628, 0xf781bf] as Color[];\n\nexport function getDistinctBaseColors(count: number, shift: number, props?: Partial): Color[] {\n let colors: Color[];\n if (count <= Colors.length) {\n colors = Colors.slice(0, count).map((e) => Array.isArray(e) ? e[0] : e);\n } else {\n colors = distinctColors(count, {\n hue: [1, 360],\n chroma: [25, 100],\n luminance: [30, 100],\n clusteringStepCount: 0,\n minSampleCount: 1000,\n sampleCountFactor: 100,\n sort: 'none',\n ...props,\n });\n }\n\n if (shift !== 0) {\n const offset = Math.floor(shift / 100 * count);\n return [...colors.slice(offset), ...colors.slice(0, offset)];\n } else {\n return colors;\n }\n}\n\nexport const ColorParams = {\n type: PD.Select('generate', PD.arrayToOptions(['generate', 'uniform', 'custom'])),\n illustrative: PD.Boolean(false, { description: 'Illustrative style', hideIf: (p) => p.type === 'custom' }),\n value: PD.Color(Color(0xFFFFFF), { hideIf: (p) => p.type === 'custom' }),\n variability: PD.Numeric(20, { min: 1, max: 180, step: 1 }, { hideIf: (p) => p.type !== 'generate' }),\n shift: PD.Numeric(0, { min: 0, max: 100, step: 1 }, { hideIf: (p) => !p.type.includes('generate') }),\n lightness: PD.Numeric(0, { min: -6, max: 6, step: 0.1 }, { hideIf: (p) => p.type === 'custom' }),\n alpha: PD.Numeric(1, { min: 0, max: 1, step: 0.01 }, { hideIf: (p) => p.type === 'custom' }),\n emissive: PD.Numeric(0, { min: 0, max: 1, step: 0.01 }, { hideIf: (p) => p.type === 'custom' }),\n};\nexport type ColorProps = PD.Values;\n\nexport const ColorValueParam = PD.Color(Color(0xFFFFFF));\n\nexport const RootParams = {\n type: PD.Select('custom', PD.arrayToOptions(['group-generate', 'group-uniform', 'generate', 'uniform', 'custom'])),\n illustrative: PD.Boolean(false, { description: 'Illustrative style', hideIf: (p) => p.type === 'custom' }),\n value: PD.Color(Color(0xFFFFFF), { hideIf: (p) => p.type !== 'uniform' }),\n variability: PD.Numeric(20, { min: 1, max: 180, step: 1 }, { hideIf: (p) => p.type !== 'group-generate' }),\n shift: PD.Numeric(0, { min: 0, max: 100, step: 1 }, { hideIf: (p) => !p.type.includes('generate') }),\n lightness: PD.Numeric(0, { min: -6, max: 6, step: 0.1 }, { hideIf: (p) => p.type === 'custom' }),\n alpha: PD.Numeric(1, { min: 0, max: 1, step: 0.01 }, { hideIf: (p) => p.type === 'custom' }),\n emissive: PD.Numeric(0, { min: 0, max: 1, step: 0.01 }, { hideIf: (p) => p.type === 'custom' }),\n};\n\nexport const LightnessParams = {\n lightness: PD.Numeric(0, { min: -6, max: 6, step: 0.1 }),\n};\nexport const DimLightness = 6;\n\nexport const IllustrativeParams = {\n illustrative: PD.Boolean(false, { description: 'Illustrative style' }),\n};\n\nexport const OpacityParams = {\n alpha: PD.Numeric(1, { min: 0, max: 1, step: 0.01 }),\n};\n\nexport const EmissiveParams = {\n emissive: PD.Numeric(0, { min: 0, max: 1, step: 0.01 }),\n};\n\nexport const celShaded = {\n celShaded: PD.Boolean(false, { description: 'Cel Shading light for stylized rendering of representations' }),\n};\n\nexport type celShadedProps = PD.Values;\n\nexport const PatternParams = {\n frequency: PD.Numeric(1, { min: 0, max: 1, step: 0.01 }),\n amplitude: PD.Numeric(1, { min: 0, max: 1, step: 0.01 }),\n};\n\nexport const StyleParams = {\n ignoreLight: PD.Boolean(false, { description: 'Ignore light for stylized rendering of representations' }),\n materialStyle: Material.getParam(),\n celShaded: PD.Boolean(false, { description: 'Cel Shading light for stylized rendering of representations' }),\n};\n\nexport const LodParams = {\n lodLevels: Spheres.Params.lodLevels,\n cellSize: Spheres.Params.cellSize,\n batchSize: Spheres.Params.batchSize,\n approximate: Spheres.Params.approximate,\n};\n\nexport const SimpleClipParams = {\n type: PD.Select('none', PD.objectToOptions(Clip.Type, (t) => stringToWords(t))),\n invert: PD.Boolean(false),\n position: PD.Group({\n x: PD.Numeric(0, { min: -100, max: 100, step: 1 }, { immediateUpdate: true }),\n y: PD.Numeric(0, { min: -100, max: 100, step: 1 }, { immediateUpdate: true }),\n z: PD.Numeric(0, { min: -100, max: 100, step: 1 }, { immediateUpdate: true }),\n }, { hideIf: (g) => g.type === 'none', isExpanded: true }),\n rotation: PD.Group({\n axis: PD.Vec3(Vec3.create(1, 0, 0)),\n angle: PD.Numeric(0, { min: -180, max: 180, step: 1 }, { immediateUpdate: true }),\n }, { hideIf: (g) => g.type === 'none', isExpanded: true }),\n scale: PD.Group({\n x: PD.Numeric(100, { min: 0, max: 100, step: 1 }, { immediateUpdate: true }),\n y: PD.Numeric(100, { min: 0, max: 100, step: 1 }, { immediateUpdate: true }),\n z: PD.Numeric(100, { min: 0, max: 100, step: 1 }, { immediateUpdate: true }),\n }, { hideIf: (g) => ['none', 'plane'].includes(g.type), isExpanded: true }),\n};\nexport type SimpleClipParams = typeof SimpleClipParams;\nexport type SimpleClipProps = PD.Values;\n\nexport function getClipObjects(values: SimpleClipProps, boundingSphere: Sphere3D): Clip.Props['objects'] {\n const { center, radius } = boundingSphere;\n\n const position = Vec3.clone(center);\n Vec3.add(\n position,\n position,\n Vec3.create(\n radius * values.position.x / 100,\n radius * values.position.y / 100,\n radius * values.position.z / 100,\n ),\n );\n\n const scale = Vec3.create(values.scale.x, values.scale.y, values.scale.z);\n Vec3.scale(scale, scale, 2 * radius / 100);\n\n return [{\n type: values.type,\n invert: values.invert,\n position,\n scale,\n rotation: values.rotation,\n transform: Mat4.identity(),\n }];\n}\n\nexport function createClipMapping(node: EntityNode) {\n return ParamMapping({\n params: SimpleClipParams,\n target: (ctx: PluginContext) => {\n return node.clipValue;\n },\n })({\n values(props, ctx) {\n if (!props || props.objects.length === 0) {\n return {\n type: 'none',\n invert: false,\n position: { x: 0, y: 0, z: 0 },\n rotation: { axis: Vec3.create(1, 0, 0), angle: 0 },\n scale: { x: 100, y: 100, z: 100 },\n };\n }\n\n const { center, radius } = node.plugin.canvas3d!.boundingSphere;\n const { invert, position, scale, rotation, type } = props.objects[0];\n\n const p = Vec3.clone(position);\n Vec3.sub(p, p, center);\n Vec3.scale(p, p, 100 / radius);\n Vec3.round(p, p);\n\n const s = Vec3.clone(scale);\n Vec3.scale(s, s, 100 / radius / 2);\n Vec3.round(s, s);\n\n return {\n type,\n invert,\n position: { x: p[0], y: p[1], z: p[2] },\n rotation,\n scale: { x: s[0], y: s[1], z: s[2] },\n };\n },\n update: (s, props) => {\n if (!props) return;\n\n const clipObjects = getClipObjects(s, node.plugin.canvas3d!.boundingSphere);\n props.objects = clipObjects;\n },\n apply: async (props, ctx) => {\n if (props) node.updateClip(props);\n },\n });\n}\n\nexport const MesoscaleGroupParams = {\n root: PD.Value(false, { isHidden: true }),\n index: PD.Value(-1, { isHidden: true }),\n tag: PD.Value('', { isHidden: true }),\n label: PD.Value('', { isHidden: true }),\n description: PD.Value('', { isHidden: true }),\n hidden: PD.Boolean(false),\n color: PD.Group(RootParams),\n lightness: PD.Numeric(0, { min: -6, max: 6, step: 0.1 }),\n alpha: PD.Numeric(1, { min: 0, max: 1, step: 0.01 }),\n emissive: PD.Numeric(0, { min: 0, max: 1, step: 0.01 }),\n lod: PD.Group(LodParams),\n clip: PD.Group(SimpleClipParams),\n};\nexport type MesoscaleGroupProps = PD.Values;\n\nexport class MesoscaleGroupObject extends PSO.Create({ name: 'Mesoscale Group', typeClass: 'Object' }) {}\n\nexport const MesoscaleGroup = PluginStateTransform.BuiltIn({\n name: 'mesoscale-group',\n display: { name: 'Mesoscale Group' },\n from: [PSO.Root, MesoscaleGroupObject],\n to: MesoscaleGroupObject,\n params: MesoscaleGroupParams,\n})({\n apply({ a, params }, plugin: PluginContext) {\n return Task.create('Apply Mesoscale Group', async () => {\n return new MesoscaleGroupObject({}, { label: params.label, description: params.description });\n });\n },\n});\n\nexport function getMesoscaleGroupParams(graphicsMode: GraphicsMode): MesoscaleGroupProps {\n const groupParams = PD.getDefaultValues(MesoscaleGroupParams);\n if (graphicsMode === 'custom') return groupParams;\n\n return {\n ...groupParams,\n lod: {\n ...groupParams.lod,\n ...getGraphicsModeProps(graphicsMode),\n },\n };\n}\n\n//\n\nexport type LodLevels = typeof SpacefillRepresentationProvider.defaultValues['lodLevels'];\n\nexport function getLodLevels(graphicsMode: Exclude): LodLevels {\n switch (graphicsMode) {\n case 'performance':\n return [\n { minDistance: 1, maxDistance: 300, overlap: 0, stride: 1, scaleBias: 1 },\n { minDistance: 300, maxDistance: 2000, overlap: 0, stride: 40, scaleBias: 3 },\n { minDistance: 2000, maxDistance: 6000, overlap: 0, stride: 150, scaleBias: 3 },\n { minDistance: 6000, maxDistance: 10000000, overlap: 0, stride: 300, scaleBias: 2.5 },\n ];\n case 'balanced':\n return [\n { minDistance: 1, maxDistance: 500, overlap: 0, stride: 1, scaleBias: 1 },\n { minDistance: 500, maxDistance: 2000, overlap: 0, stride: 15, scaleBias: 3 },\n { minDistance: 2000, maxDistance: 6000, overlap: 0, stride: 70, scaleBias: 2.7 },\n { minDistance: 6000, maxDistance: 10000000, overlap: 0, stride: 200, scaleBias: 2.5 },\n ];\n case 'quality':\n return [\n { minDistance: 1, maxDistance: 1000, overlap: 0, stride: 1, scaleBias: 1 },\n { minDistance: 1000, maxDistance: 4000, overlap: 0, stride: 10, scaleBias: 3 },\n { minDistance: 4000, maxDistance: 10000, overlap: 0, stride: 50, scaleBias: 2.7 },\n { minDistance: 10000, maxDistance: 10000000, overlap: 0, stride: 200, scaleBias: 2.3 },\n ];\n case 'ultra':\n return [\n { minDistance: 1, maxDistance: 5000, overlap: 0, stride: 1, scaleBias: 1 },\n { minDistance: 5000, maxDistance: 10000, overlap: 0, stride: 10, scaleBias: 3 },\n { minDistance: 10000, maxDistance: 30000, overlap: 0, stride: 50, scaleBias: 2.5 },\n { minDistance: 30000, maxDistance: 10000000, overlap: 0, stride: 200, scaleBias: 2 },\n ];\n default:\n assertUnreachable(graphicsMode);\n }\n}\n\nexport type GraphicsMode = 'ultra' | 'quality' | 'balanced' | 'performance' | 'custom';\n\nexport function getGraphicsModeProps(graphicsMode: Exclude) {\n return {\n lodLevels: getLodLevels(graphicsMode),\n approximate: graphicsMode !== 'quality' && graphicsMode !== 'ultra',\n alphaThickness: graphicsMode === 'performance' ? 15 : 12,\n };\n}\n\nexport function setGraphicsCanvas3DProps(ctx: PluginContext, graphics: GraphicsMode) {\n const pixelScale = graphics === 'balanced' ? 0.75 : graphics === 'performance' ? 0.5 : 1;\n\n ctx.canvas3dContext?.setProps({ pixelScale });\n\n ctx.canvas3d?.setProps({\n postprocessing: {\n sharpening: pixelScale < 1\n ? {\n name: 'on',\n params: { sharpness: 0.5, denoise: true },\n }\n : { name: 'off', params: {} },\n },\n });\n}\n\n//\n\nexport const MesoscaleStateParams = {\n filter: PD.Value('', { isHidden: true }),\n graphics: PD.Select(\n 'quality',\n PD.arrayToOptions(['ultra', 'quality', 'balanced', 'performance', 'custom'] as GraphicsMode[]),\n ),\n description: PD.Value('', { isHidden: true }),\n focusInfo: PD.Value('', { isHidden: true }),\n link: PD.Value('', { isHidden: true }),\n textSizeDescription: PD.Numeric(14, { min: 1, max: 100, step: 1 }, { isHidden: true }),\n index: PD.Value(-1, { isHidden: true }),\n};\n\nexport class MesoscaleStateObject\n extends PSO.Create({ name: 'Mesoscale State', typeClass: 'Object' }) {}\n\nconst MesoscaleStateTransform = PluginStateTransform.BuiltIn({\n name: 'mesoscale-state',\n display: { name: 'Mesoscale State' },\n from: PSO.Root,\n to: MesoscaleStateObject,\n params: MesoscaleStateParams,\n})({\n apply({ a, params }, plugin: PluginContext) {\n return Task.create('Apply Mesoscale State', async () => {\n return new MesoscaleStateObject(params);\n });\n },\n});\n\nexport { MesoscaleState };\ntype MesoscaleState = PD.Values;\nconst MesoscaleState = {\n async init(ctx: PluginContext) {\n const cell = ctx.state.data.selectQ((q) => q.ofType(MesoscaleStateObject))[0];\n if (cell) throw new Error('MesoscaleState already initialized');\n\n const customState = ctx.customState as MesoscaleExplorerState;\n const state = await ctx.state.data.build().toRoot().apply(MesoscaleStateTransform, {\n filter: '',\n graphics: customState.graphicsMode,\n }).commit();\n customState.stateRef = state.ref;\n },\n get(ctx: PluginContext): MesoscaleState {\n const ref = this.ref(ctx);\n return ctx.state.data.tryGetCellData(ref);\n },\n async set(ctx: PluginContext, props: Partial) {\n const ref = this.ref(ctx);\n await ctx.state.data.build().to(ref).update(MesoscaleStateTransform, (old) => Object.assign(old, props))\n .commit();\n },\n ref(ctx: PluginContext): string {\n const ref = (ctx.customState as MesoscaleExplorerState).stateRef;\n if (!ref) throw new Error('MesoscaleState not initialized');\n return ref;\n },\n has(ctx: PluginContext): boolean {\n const ref = (ctx.customState as MesoscaleExplorerState).stateRef || '';\n return ctx.state.data.cells.has(ref) ? true : false;\n },\n};\n\n//\n\nexport function getRoots(plugin: PluginContext): StateSelection.CellSeq> {\n const s = plugin.customState as MesoscaleExplorerState;\n if (!s.stateCache.roots) {\n s.stateCache.roots = plugin.state.data.select(StateSelection.Generators.rootsOfType(MesoscaleGroupObject));\n }\n return s.stateCache.roots;\n}\n\nexport function getGroups(\n plugin: PluginContext,\n tag?: string,\n): StateSelection.CellSeq> {\n const s = plugin.customState as MesoscaleExplorerState;\n const k = `groups-${tag || ''}`;\n if (!s.stateCache[k]) {\n const selector = tag !== undefined\n ? StateSelection.Generators.ofTransformer(MesoscaleGroup).withTag(tag)\n : StateSelection.Generators.ofTransformer(MesoscaleGroup);\n s.stateCache[k] = plugin.state.data.select(selector);\n }\n return s.stateCache[k];\n}\n\nfunction _getAllGroups(plugin: PluginContext, tag: string | undefined, list: StateObjectCell[]) {\n const groups = getGroups(plugin, tag);\n list.push(...groups);\n for (const g of groups) {\n _getAllGroups(plugin, g.params?.values.tag, list);\n }\n return list;\n}\n\nexport function getAllGroups(plugin: PluginContext, tag?: string) {\n return _getAllGroups(plugin, tag, []);\n}\n\nexport function getAllLeafGroups(plugin: PluginContext, tag: string) {\n const allGroups = getAllGroups(plugin, tag);\n allGroups.sort((a, b) => a.params?.values.index - b.params?.values.index);\n return allGroups.filter((g) => {\n return getEntities(plugin, g.params?.values.tag).length > 0;\n });\n}\n\ntype EntityCells = StateSelection.CellSeq<\n StateObjectCell\n>;\n\nexport function getEntities(plugin: PluginContext, tag?: string): EntityCells {\n const s = plugin.customState as MesoscaleExplorerState;\n const k = `entities-${tag || ''}`;\n if (!s.stateCache[k]) {\n const structureSelector = tag !== undefined\n ? StateSelection.Generators.ofTransformer(StructureRepresentation3D).withTag(tag)\n : StateSelection.Generators.ofTransformer(StructureRepresentation3D);\n const shapeSelector = tag !== undefined\n ? StateSelection.Generators.ofTransformer(ShapeRepresentation3D).withTag(tag)\n : StateSelection.Generators.ofTransformer(ShapeRepresentation3D);\n s.stateCache[k] = [\n ...plugin.state.data.select(structureSelector).filter((c) => c.obj!.data.sourceData.elementCount > 0),\n ...plugin.state.data.select(shapeSelector),\n ];\n }\n return s.stateCache[k];\n}\n\nfunction getFilterMatcher(filter: string) {\n return filter.startsWith('\"') && filter.endsWith('\"')\n ? new RegExp(`^${escapeRegExp(filter.substring(1, filter.length - 1))}$`, 'g')\n : new RegExp(escapeRegExp(filter), 'gi');\n}\n\nexport function getFilteredEntities(plugin: PluginContext, tag: string, filter: string) {\n if (!filter) return getEntities(plugin, tag);\n const matcher = getFilterMatcher(filter);\n return getEntities(plugin, tag).filter((c) => getEntityLabel(plugin, c).match(matcher) !== null);\n}\n\nfunction _getAllEntities(plugin: PluginContext, tag: string | undefined, list: EntityCells) {\n list.push(...getEntities(plugin, tag));\n for (const g of getGroups(plugin, tag)) {\n _getAllEntities(plugin, g.params?.values.tag, list);\n }\n return list;\n}\n\nexport function getAllEntities(plugin: PluginContext, tag?: string) {\n return _getAllEntities(plugin, tag, []);\n}\n\nexport function getAllFilteredEntities(plugin: PluginContext, tag: string, filter: string) {\n if (!filter) return getAllEntities(plugin, tag);\n const matcher = getFilterMatcher(filter);\n return getAllEntities(plugin, tag).filter((c) => getEntityLabel(plugin, c).match(matcher) !== null);\n}\n\nexport function getEveryEntity(plugin: PluginContext, filter?: string, tag?: string) {\n if (filter) {\n const matcher = getFilterMatcher(filter);\n return getAllEntities(plugin, tag).filter((c) => getEntityLabel(plugin, c).match(matcher) !== null);\n } else {\n return getAllEntities(plugin, tag);\n }\n}\n\nexport function getEntityLabel(plugin: PluginContext, cell: StateObjectCell) {\n return StateObjectRef.resolve(plugin.state.data, cell.transform.parent)?.obj?.label || 'Entity';\n}\n\nexport function getCellDescription(cell: StateObjectCell) {\n // markdown style for description\n return '**' + cell?.obj?.label + '**\\n\\n' + cell?.obj?.description;\n}\n\nexport function getEntityDescription(plugin: PluginContext, cell: StateObjectCell) {\n const s = StateObjectRef.resolve(plugin.state.data, cell.transform.parent);\n const d = getCellDescription(s!);\n return d;\n}\n\nexport async function updateStyle(\n plugin: PluginContext,\n options: { ignoreLight: boolean; material: Material; celShaded: boolean; illustrative: boolean },\n) {\n const update = plugin.state.data.build();\n const { ignoreLight, material, celShaded, illustrative } = options;\n\n const entities = getAllEntities(plugin);\n\n for (let j = 0; j < entities.length; ++j) {\n update.to(entities[j]).update((old) => {\n if (old.type) {\n const value = old.colorTheme.name === 'illustrative'\n ? old.colorTheme.params.style.params.value\n : old.colorTheme.params.value;\n const lightness = old.colorTheme.name === 'illustrative'\n ? old.colorTheme.params.style.params.lightness\n : old.colorTheme.params.lightness;\n if (illustrative) {\n old.colorTheme = {\n name: 'illustrative',\n params: { style: { name: 'uniform', params: { value, lightness } } },\n };\n } else {\n old.colorTheme = { name: 'uniform', params: { value, lightness } };\n }\n old.type.params.ignoreLight = ignoreLight;\n old.type.params.material = material;\n old.type.params.celShaded = celShaded;\n }\n });\n }\n\n await update.commit();\n}\n\nexport async function updateColors(plugin: PluginContext, values: PD.Values, tag: string, filter: string) {\n const update = plugin.state.data.build();\n const { type, illustrative, value, shift, lightness, alpha, emissive } = values;\n if (type === 'group-generate' || type === 'group-uniform') {\n const leafGroups = getAllLeafGroups(plugin, tag);\n const rootLeafGroups = getRoots(plugin).filter((g) =>\n g.params?.values.tag === tag && getEntities(plugin, g.params?.values.tag).length > 0\n );\n const groups = [...leafGroups, ...rootLeafGroups];\n const baseColors = getDistinctBaseColors(groups.length, shift);\n\n for (let i = 0; i < groups.length; ++i) {\n const g = groups[i];\n const entities = getFilteredEntities(plugin, g.params?.values.tag, filter);\n let groupColors: Color[] = [];\n\n if (type === 'group-generate') {\n const c = g.params?.values.color;\n groupColors = getDistinctGroupColors(entities.length, baseColors[i], c.variability, c.shift);\n }\n\n for (let j = 0; j < entities.length; ++j) {\n const c = type === 'group-generate' ? groupColors[j] : baseColors[i];\n update.to(entities[j]).update((old) => {\n if (old.type) {\n if (illustrative) {\n old.colorTheme = {\n name: 'illustrative',\n params: { style: { name: 'uniform', params: { value: c, lightness: lightness } } },\n };\n } else {\n old.colorTheme = { name: 'uniform', params: { value: c, lightness: lightness } };\n }\n old.type.params.alpha = alpha;\n old.type.params.xrayShaded = alpha < 1 ? 'inverted' : false;\n old.type.params.emissive = emissive;\n } else if (old.coloring) {\n old.coloring.params.color = c;\n old.coloring.params.lightness = lightness;\n old.alpha = alpha;\n old.xrayShaded = alpha < 1 ? true : false;\n old.emissive = emissive;\n }\n });\n }\n\n update.to(g.transform.ref).update((old) => {\n old.color.type = type === 'group-generate' ? 'generate' : 'uniform';\n old.color.illustrative = illustrative;\n old.color.value = baseColors[i];\n old.color.lightness = lightness;\n old.color.alpha = alpha;\n old.color.emissive = emissive;\n });\n }\n } else if (type === 'generate' || type === 'uniform') {\n const entities = getAllFilteredEntities(plugin, tag, filter);\n let groupColors: Color[] = [];\n\n if (type === 'generate') {\n groupColors = getDistinctBaseColors(entities.length, shift);\n }\n\n for (let j = 0; j < entities.length; ++j) {\n const c = type === 'generate' ? groupColors[j] : value;\n update.to(entities[j]).update((old) => {\n if (old.type) {\n if (illustrative) {\n old.colorTheme = {\n name: 'illustrative',\n params: { style: { name: 'uniform', params: { value: c, lightness: lightness } } },\n };\n } else {\n old.colorTheme = { name: 'uniform', params: { value: c, lightness: lightness } };\n }\n old.type.params.alpha = alpha;\n old.type.params.xrayShaded = alpha < 1 ? 'inverted' : false;\n old.type.params.emissive = emissive;\n } else if (old.coloring) {\n old.coloring.params.color = c;\n old.coloring.params.lightness = lightness;\n old.alpha = alpha;\n old.xrayShaded = alpha < 1 ? true : false;\n old.emissive = emissive;\n }\n });\n }\n\n const others = getAllLeafGroups(plugin, tag);\n for (const o of others) {\n update.to(o).update((old) => {\n old.color.type = type === 'generate' ? 'custom' : 'uniform';\n old.color.illustrative = illustrative;\n old.color.value = value;\n old.color.lightness = lightness;\n old.color.alpha = alpha;\n old.color.emissive = emissive;\n });\n }\n }\n\n await update.commit();\n}\n\nexport function expandAllGroups(plugin: PluginContext) {\n for (const g of getAllGroups(plugin)) {\n if (g.state.isCollapsed) {\n plugin.state.data.updateCellState(g.transform.ref, { isCollapsed: false });\n }\n }\n}\n",[],[401,185,200,537],{"_104":545,"_95":546,"_153":547,"_155":472,"_156":138,"_157":548,"_159":22,"_106":549,"_100":456,"_161":219,"_163":550,"_164":22,"_165":-5,"_166":551,"_98":552},"d34ef096-bdc9-11f0-a1dc-42dde27851f2","util.ts","c7a5aeb0-bdb5-11f0-b3e3-42dde27851f2",334,["D",1762733497951],"/**\n * Copyright (c) 2023 mol* contributors, licensed under MIT, See LICENSE file for more info.\n *\n * @author Alexander Rose \n */\n\nimport { OrderedSet, SortedArray } from '../../../mol-data/int.ts';\nimport { Box3D, GridLookup3D, type PositionData, Sphere3D } from '../../../mol-math/geometry.ts';\nimport { Vec3 } from '../../../mol-math/linear-algebra.ts';\nimport { type ElementIndex, Unit } from '../../../mol-model/structure.ts';\n\nexport function mergeUnits(units: readonly Unit[], id: number): Unit {\n const u = units[0];\n\n let start = -1 as ElementIndex, end = -1 as ElementIndex;\n let elements = SortedArray.Empty as SortedArray;\n\n for (let i = 0, il = units.length; i < il; ++i) {\n const e = units[i].elements;\n if (SortedArray.isRange(e)) {\n if (end !== -1 && e[0] === end + 1) {\n // extend range\n end = e[e.length - 1];\n } else {\n if (end !== -1) {\n // pending range\n elements = SortedArray.union(elements, SortedArray.ofRange(start, end));\n }\n // new range\n start = e[0];\n end = e[e.length - 1];\n }\n } else {\n if (end !== -1) {\n // pending range\n elements = SortedArray.union(elements, SortedArray.ofRange(start, end));\n start = -1 as ElementIndex, end = -1 as ElementIndex;\n }\n elements = SortedArray.union(elements, e);\n }\n }\n\n if (end !== -1) {\n // pending range\n elements = SortedArray.union(elements, SortedArray.ofRange(start, end));\n }\n\n return Unit.create(id, id, 0, u.traits | Unit.Trait.MultiChain, u.kind, u.model, u.conformation.operator, elements);\n}\n\nexport function partitionUnits(units: readonly Unit[], cellSize: number) {\n const unitCount = units.length;\n const mergedUnits: Unit[] = [];\n\n const box = Box3D.setEmpty(Box3D());\n const x = new Float32Array(unitCount);\n const y = new Float32Array(unitCount);\n const z = new Float32Array(unitCount);\n const indices = OrderedSet.ofBounds(0, unitCount);\n\n for (let i = 0, il = unitCount; i < il; ++i) {\n const v = units[i].boundary.sphere.center;\n x[i] = v[0];\n y[i] = v[1];\n z[i] = v[2];\n Box3D.add(box, v);\n }\n Box3D.expand(box, box, Vec3.create(1, 1, 1));\n\n const positionData: PositionData = { x, y, z, indices };\n const boundary = { box, sphere: Sphere3D.fromBox3D(Sphere3D(), box) };\n const lookup = GridLookup3D(positionData, boundary, Vec3.create(cellSize, cellSize, cellSize));\n\n const { array, offset, count } = lookup.buckets;\n\n for (let i = 0, il = offset.length; i < il; ++i) {\n const start = offset[i];\n const size = count[i];\n const cellUnits: Unit[] = [];\n for (let j = start, jl = start + size; j < jl; ++j) {\n cellUnits.push(units[array[j]]);\n }\n mergedUnits.push(mergeUnits(cellUnits, i));\n }\n\n return mergedUnits;\n}\n",[],[401,185,200,546],[401,185,200],{"_104":555,"_95":276,"_153":556,"_155":440,"_156":138,"_157":557,"_159":22,"_106":558,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":559,"_98":576},"d22f15e2-bdc9-11f0-8403-42dde27851f2","d22f16be-bdc9-11f0-8403-42dde27851f2",306,["D",1762733496082],[560],{"_104":561,"_95":283,"_153":562,"_155":556,"_156":138,"_157":563,"_159":22,"_106":564,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":565,"_98":575},"d24cd32a-bdc9-11f0-8403-42dde27851f2","d24cd3e8-bdc9-11f0-8403-42dde27851f2",308,["D",1762733496277],[566],{"_104":567,"_95":568,"_153":569,"_155":562,"_156":138,"_157":570,"_159":22,"_106":571,"_100":218,"_161":219,"_163":572,"_164":22,"_165":-5,"_166":573,"_98":574},"d2adb9b0-bdc9-11f0-b67b-42dde27851f2","snapshot-markdown.tsx","f02aed9a-bdb6-11f0-8647-42dde27851f2",316,["D",1762733496894],"/**\n * Copyright (c) 2025 mol* contributors, licensed under MIT, See LICENSE file for more info.\n *\n * @author David Sehnal \n */\n\nimport { BehaviorSubject, distinctUntilChanged, map } from 'rxjs';\nimport { PluginComponent } from '../../../mol-plugin-state/component.ts';\nimport { getMVSStoriesContext, type MVSStoriesContext } from '../context.ts';\nimport type { MVSStoriesViewerModel } from './viewer.tsx';\nimport { useBehavior } from '../../../mol-plugin-ui/hooks/use-behavior.ts';\nimport { createRoot } from 'react-dom/client';\nimport type { PluginStateSnapshotManager } from '../../../mol-plugin-state/manager/snapshots.ts';\nimport { PluginReactContext } from '../../../mol-plugin-ui/base.tsx';\nimport type { CSSProperties } from 'react';\nimport { Markdown } from '../../../mol-plugin-ui/controls/markdown.tsx';\n\nexport class MVSStoriesSnapshotMarkdownModel extends PluginComponent {\n readonly context: MVSStoriesContext;\n root: HTMLElement | undefined = undefined;\n\n state = new BehaviorSubject<{\n entry?: PluginStateSnapshotManager.Entry;\n index?: number;\n all: PluginStateSnapshotManager.Entry[];\n }>({ all: [] });\n\n get viewer() {\n return this.context.state.viewers.value?.find((v) => this.options?.viewerName === v.name);\n }\n\n sync() {\n const mng = this.viewer?.model.plugin?.managers.snapshot;\n this.state.next({\n entry: mng?.current,\n index: mng?.current ? mng?.getIndex(mng.current) : undefined,\n all: mng?.state.entries.toArray() ?? [],\n });\n }\n\n async mount(root: HTMLElement) {\n this.root = root;\n\n createRoot(root).render();\n\n let currentViewer: MVSStoriesViewerModel | undefined = undefined;\n let sub: { unsubscribe: () => void } | undefined = undefined;\n this.subscribe(\n this.context.state.viewers.pipe(\n map((xs) => xs.find((v) => this.options?.viewerName === v.name)),\n distinctUntilChanged((a, b) => a?.model === b?.model),\n ),\n (viewer) => {\n if (currentViewer !== viewer) {\n currentViewer = viewer?.model;\n sub?.unsubscribe();\n }\n if (!viewer) return;\n sub = this.subscribe(viewer.model.plugin?.managers.snapshot.events.changed, () => {\n this.sync();\n });\n this.sync();\n },\n );\n\n this.sync();\n }\n\n constructor(private options?: { context?: { name?: string; container?: object }; viewerName?: string }) {\n super();\n\n this.context = getMVSStoriesContext(options?.context);\n }\n}\n\nexport function MVSStoriesSnapshotMarkdownUI({ model }: { model: MVSStoriesSnapshotMarkdownModel }) {\n const state = useBehavior(model.state);\n const isLoading = useBehavior(model.context.state.isLoading);\n\n const style: CSSProperties = { display: 'flex', flexDirection: 'column', height: '100%' };\n const className = 'mvs-stories-markdown-explanation';\n\n if (isLoading) {\n return (\n

\n Loading...\n

\n );\n }\n\n if (state.all.length === 0) {\n return (\n

\n No snapshot loaded or no description available\n

\n );\n }\n\n return (\n

\n \n {typeof state.index === 'number' ? state.index + 1 : '-'}/{state.all.length}\n \n model.viewer?.model.plugin?.managers.snapshot.applyNext(-1)}\n style={{ flexGrow: 1, flexShrink: 0 }}\n >\n Prev\n \n model.viewer?.model.plugin?.managers.snapshot.applyNext(1)}\n style={{ flexGrow: 1, flexShrink: 0 }}\n >\n Next\n \n

\n \n {state.entry?.description ?? 'Description not available'}\n \n

\n );\n}\n\nexport class MVSStoriesSnapshotMarkdownViewer extends HTMLElement {\n private model: MVSStoriesSnapshotMarkdownModel | undefined = undefined;\n\n async connectedCallback() {\n this.model = new MVSStoriesSnapshotMarkdownModel({\n context: { name: this.getAttribute('context-name') ?? undefined },\n viewerName: this.getAttribute('viewer-name') ?? undefined,\n });\n await this.model.mount(this);\n }\n\n disconnectedCallback() {\n this.model?.dispose();\n this.model = undefined;\n }\n\n constructor() {\n super();\n }\n}\n\nglobalThis.customElements.define('mvs-stories-snapshot-markdown', MVSStoriesSnapshotMarkdownViewer);\n",[],[401,185,276,283,568],[401,185,276,283],[401,185,276],{"_104":578,"_95":364,"_153":579,"_155":440,"_156":138,"_157":580,"_159":22,"_106":581,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":582,"_98":601},"d220dafe-bdc9-11f0-8738-42dde27851f2","d220dba8-bdc9-11f0-8738-42dde27851f2",305,["D",1762733495986],[583,592],{"_104":584,"_95":585,"_153":586,"_155":579,"_156":138,"_157":587,"_159":22,"_106":588,"_100":456,"_161":219,"_163":589,"_164":22,"_165":-5,"_166":590,"_98":591},"d2e3f8fe-bdc9-11f0-b6d9-42dde27851f2","panels.tsx","c771012e-bdb5-11f0-8204-42dde27851f2",325,["D",1762733497263],"/**\n * Copyright (c) 2022-2025 mol* contributors, licensed under MIT, See LICENSE file for more info.\n *\n * @author Alexander Rose \n */\n\nimport { Mp4EncoderUI } from '../../../extensions/mp4-export/ui.tsx';\nimport { CollapsableControls, type CollapsableState, PluginUIComponent } from '../../../mol-plugin-ui/base.tsx';\nimport { SectionHeader } from '../../../mol-plugin-ui/controls/common.tsx';\nimport { ParameterControls } from '../../../mol-plugin-ui/controls/parameters.tsx';\nimport { PluginCommands } from '../../../mol-plugin/commands.ts';\nimport { StructureMeasurementsControls } from '../../../mol-plugin-ui/structure/measurements.tsx';\nimport type { MesoscaleExplorerState } from '../app.ts';\nimport { MesoscaleState } from '../data/state.ts';\nimport { EntityControls, FocusInfo, ModelInfo, SelectionInfo } from './entities.tsx';\nimport {\n DatabaseControls,\n ExampleControls,\n ExplorerInfo,\n LoaderControls,\n MesoQuickStylesControls,\n SessionControls,\n SnapshotControls,\n} from './states.tsx';\nimport { ParamDefinition as PD } from '../../../mol-util/param-definition.ts';\nimport { TuneSvg } from '../../../mol-plugin-ui/controls/icons.tsx';\nimport { RendererParams } from '../../../mol-gl/renderer.ts';\nimport { TrackballControlsParams } from '../../../mol-canvas3d/controls/trackball.ts';\nimport { XRManagerParams } from '../../../mol-canvas3d/helper/xr-manager.ts';\n\nconst Spacer = () =>

;\n\nconst ViewportParams = {\n renderer: PD.Group(RendererParams),\n trackball: PD.Group(TrackballControlsParams),\n xr: PD.Group(XRManagerParams, { label: 'XR' }),\n};\n\nclass ViewportSettingsUI extends CollapsableControls<{}, {}> {\n protected defaultState(): CollapsableState {\n return {\n header: 'Viewport Settings',\n isCollapsed: true,\n brand: { accent: 'cyan', svg: TuneSvg },\n };\n }\n\n protected renderControls(): JSX.Element | null {\n return (\n <>\n {this.plugin.canvas3d && this.plugin.canvas3dContext && (\n <>\n \n \n )}\n \n );\n }\n\n private setSettings = (p: { param: PD.Base; name: string; value: any }) => {\n PluginCommands.Canvas3D.SetSettings(this.plugin, { settings: { [p.name]: p.value } });\n };\n\n componentDidMount() {\n this.subscribe(this.plugin.events.canvas3d.settingsUpdated, () => this.forceUpdate());\n this.subscribe(this.plugin.layout.events.updated, () => this.forceUpdate());\n }\n}\n\nexport class LeftPanel extends PluginUIComponent {\n render() {\n const customState = this.plugin.customState as MesoscaleExplorerState;\n\n return (\n

\n {customState.driver && (\n <>\n \n \n \n )}\n \n \n \n\n \n \n \n\n {customState.examples?.length && (\n <>\n \n \n \n \n )}\n\n \n \n \n\n \n \n \n\n \n \n

\n );\n }\n}\n\nexport class RightPanel extends PluginUIComponent<{}, { isDisabled: boolean }> {\n state = {\n isDisabled: false,\n };\n\n get hasModelInfo() {\n return (\n MesoscaleState.has(this.plugin) &&\n !!(MesoscaleState.get(this.plugin).description ||\n MesoscaleState.get(this.plugin).link)\n );\n }\n\n get hasFocusInfo() {\n return (\n MesoscaleState.has(this.plugin) &&\n !!(MesoscaleState.get(this.plugin).focusInfo !== '')\n );\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 this.subscribe(this.plugin.managers.structure.selection.events.changed, (e) => {\n if (!this.state.isDisabled) {\n this.forceUpdate();\n }\n });\n }\n\n render() {\n return (\n

\n {this.hasModelInfo && (\n <>\n \n \n \n \n )}\n\n <>\n \n \n \n \n \n \n \n \n \n \n {this.hasFocusInfo && (\n <>\n \n \n \n \n )}\n

\n );\n }\n}\n",[],[401,185,364,585],{"_104":593,"_95":594,"_153":595,"_155":579,"_156":138,"_157":596,"_159":22,"_106":597,"_100":456,"_161":219,"_163":598,"_164":22,"_165":-5,"_166":599,"_98":600},"d2d90110-bdc9-11f0-b01f-42dde27851f2","states.tsx","c76ccff0-bdb5-11f0-acd9-42dde27851f2",323,["D",1762733497176],"/**\n * Copyright (c) 2022-2024 mol* contributors, licensed under MIT, See LICENSE file for more info.\n *\n * @author Alexander Rose \n */\n\nimport { MmcifFormat } from '../../../mol-model-formats/structure/mmcif.ts';\nimport { MmcifProvider } from '../../../mol-plugin-state/formats/trajectory.ts';\nimport { PluginStateObject } from '../../../mol-plugin-state/objects.ts';\nimport { Button, ExpandGroup, IconButton } from '../../../mol-plugin-ui/controls/common.tsx';\nimport {\n GetAppSvg,\n HelpOutlineSvg,\n Icon,\n MagicWandSvg,\n OpenInBrowserSvg,\n TourSvg,\n} from '../../../mol-plugin-ui/controls/icons.tsx';\nimport { CollapsableControls, PluginUIComponent } from '../../../mol-plugin-ui/base.tsx';\nimport { ApplyActionControl } from '../../../mol-plugin-ui/state/apply-action.tsx';\nimport {\n LocalStateSnapshotList,\n LocalStateSnapshotParams,\n LocalStateSnapshots,\n} from '../../../mol-plugin-ui/state/snapshots.tsx';\nimport { PluginCommands } from '../../../mol-plugin/commands.ts';\nimport type { PluginContext } from '../../../mol-plugin/context.ts';\nimport { StateAction, StateObjectRef, StateTransform } from '../../../mol-state/index.ts';\nimport { Task } from '../../../mol-task/index.ts';\nimport { Color } from '../../../mol-util/color/color.ts';\nimport { getFileNameInfo } from '../../../mol-util/file-info.ts';\nimport { ParamDefinition as PD } from '../../../mol-util/param-definition.ts';\nimport type { ExampleEntry, MesoscaleExplorerState } from '../app.ts';\nimport { createCellpackHierarchy } from '../data/cellpack/preset.ts';\nimport { createGenericHierarchy } from '../data/generic/preset.ts';\nimport { createMmcifHierarchy } from '../data/mmcif/preset.ts';\nimport { createPetworldHierarchy } from '../data/petworld/preset.ts';\nimport {\n getAllEntities,\n getEntityLabel,\n MesoscaleState,\n MesoscaleStateObject,\n setGraphicsCanvas3DProps,\n updateStyle,\n} from '../data/state.ts';\nimport { isTimingMode } from '../../../mol-util/debug.ts';\nimport { now } from '../../../mol-util/now.ts';\nimport { readFromFile } from '../../../mol-util/data-source.ts';\n\nfunction adjustPluginProps(ctx: PluginContext) {\n const customState = ctx.customState as MesoscaleExplorerState;\n\n ctx.managers.interactivity.setProps({ granularity: 'chain' });\n ctx.canvas3d?.setProps({\n multiSample: { mode: 'off' },\n cameraClipping: { far: false, minNear: 50 },\n sceneRadiusFactor: 2,\n renderer: {\n colorMarker: true,\n highlightColor: Color(0xffffff),\n highlightStrength: 0,\n selectColor: Color(0xffffff),\n selectStrength: 0,\n dimColor: Color(0xffffff),\n dimStrength: 1,\n markerPriority: 2,\n interiorColorFlag: false,\n interiorDarkening: 0.15,\n exposure: 1.1,\n xrayEdgeFalloff: 3,\n },\n marking: {\n enabled: true,\n highlightEdgeColor: Color(0x999999),\n selectEdgeColor: Color(0xffff00),\n highlightEdgeStrength: 1,\n selectEdgeStrength: 1,\n ghostEdgeStrength: 1,\n innerEdgeFactor: 2.5,\n edgeScale: 2,\n },\n postprocessing: {\n occlusion: {\n name: 'on',\n params: {\n samples: 32,\n multiScale: {\n name: 'on',\n params: {\n levels: [\n { radius: 2, bias: 1.0 },\n { radius: 5, bias: 1.0 },\n { radius: 8, bias: 1.0 },\n { radius: 11, bias: 1.0 },\n ],\n nearThreshold: 10,\n farThreshold: 1500,\n },\n },\n radius: 5,\n bias: 1,\n blurKernelSize: 11,\n blurDepthBias: 0.5,\n resolutionScale: 1,\n color: Color(0x000000),\n transparentThreshold: 0.4,\n },\n },\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 },\n illumination: {\n enabled: customState.illumination,\n firstStepSize: 0.1,\n rayDistance: 1024,\n },\n });\n\n const { graphics } = MesoscaleState.get(ctx);\n setGraphicsCanvas3DProps(ctx, graphics);\n}\n\nasync function createHierarchy(ctx: PluginContext, ref: string) {\n const parsed = await MmcifProvider.parse(ctx, ref);\n\n const tr = StateObjectRef.resolveAndCheck(ctx.state.data, parsed.trajectory)?.obj?.data;\n if (!tr) throw new Error('no trajectory');\n\n if (!MmcifFormat.is(tr.representative.sourceData)) {\n throw new Error('not mmcif');\n }\n\n const { frame, db } = tr.representative.sourceData.data;\n\n let hasCellpackAssemblyMethodDetails = false;\n const { method_details } = db.pdbx_struct_assembly;\n for (let i = 0, il = method_details.rowCount; i < il; ++i) {\n if (method_details.value(i).toUpperCase() === 'CELLPACK') {\n hasCellpackAssemblyMethodDetails = true;\n break;\n }\n }\n\n if (frame.categories.pdbx_model) {\n await createPetworldHierarchy(ctx, parsed.trajectory);\n } else if (\n frame.header.toUpperCase().includes('CELLPACK') ||\n hasCellpackAssemblyMethodDetails\n ) {\n await createCellpackHierarchy(ctx, parsed.trajectory);\n } else {\n await createMmcifHierarchy(ctx, parsed.trajectory);\n }\n}\n\nasync function reset(ctx: PluginContext) {\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.RemoveObject(ctx, { state: ctx.state.data, ref: StateTransform.RootRef });\n\n await MesoscaleState.init(ctx);\n adjustPluginProps(ctx);\n}\n\nexport async function loadExampleEntry(ctx: PluginContext, entry: ExampleEntry) {\n const { url, type } = entry;\n await loadUrl(ctx, url, type);\n MesoscaleState.set(ctx, {\n description: entry.description || entry.label,\n link: entry.link,\n });\n}\n\nexport async function loadUrl(ctx: PluginContext, url: string, type: 'molx' | 'molj' | 'cif' | 'bcif') {\n let startTime = 0;\n if (isTimingMode) {\n startTime = now();\n }\n if (type === 'molx' || type === 'molj') {\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.OpenUrl(ctx, { url, type });\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 } else {\n await reset(ctx);\n const isBinary = type === 'bcif';\n const data = await ctx.builders.data.download({ url, isBinary });\n await createHierarchy(ctx, data.ref);\n }\n if (isTimingMode) {\n const endTime = now();\n // Calculate the elapsed time\n const timeTaken = endTime - startTime;\n console.log(`Model loaded in ${timeTaken} milliseconds`);\n }\n}\n\nexport async function loadPdb(ctx: PluginContext, id: string) {\n await reset(ctx);\n const url = `https://models.rcsb.org/${id.toUpperCase()}.bcif`;\n const data = await ctx.builders.data.download({ url, isBinary: true });\n await createHierarchy(ctx, data.ref);\n}\n\nexport async function loadPdbIhm(ctx: PluginContext, id: string) {\n await reset(ctx);\n let url: string;\n // 4 character PDB id, TODO: support extended PDB ID\n if (id.match(/^[1-9][A-Z0-9]{3}$/i) !== null) {\n url = `https://pdb-ihm.org/bcif/${id.toLowerCase()}.bcif`;\n } else {\n const nId = id.toUpperCase().startsWith('PDBDEV_') ? id : `PDBDEV_${id.padStart(8, '0')}`;\n url = `https://pdb-ihm.org/bcif/${nId.toUpperCase()}.bcif`;\n }\n const data = await ctx.builders.data.download({ url, isBinary: true });\n await createHierarchy(ctx, data.ref);\n}\n\nasync function loadColors(ctx: PluginContext, file: File) {\n const colorData = await ctx.runTask(readFromFile(file, 'json'));\n\n const update = ctx.state.data.build();\n const allEntities = getAllEntities(ctx);\n\n for (const entityCell of allEntities) {\n const label = getEntityLabel(ctx, entityCell);\n const tags = entityCell.transform.tags;\n const fullname = (tags?.[0].replace('comp:', '') ?? '') + '.' + label;\n // test each tag, siwtch to uniform color\n if (fullname in colorData) {\n const { x, y, z } = colorData[fullname];\n const color = Color.fromRgb(x, y, z);\n update.to(entityCell).update((old) => {\n if (old.type) {\n old.colorTheme = {\n name: 'uniform',\n params: { value: color, lightness: old.colorTheme.params.lightness },\n };\n old.type.params.color = color;\n } else if (old.coloring) {\n old.coloring.params.color = color;\n }\n });\n }\n }\n await update.commit();\n}\n//\n\nexport const LoadDatabase = StateAction.build({\n display: { name: 'Database', description: 'Load from Database' },\n params: (a, ctx: PluginContext) => {\n return {\n source: PD.Select('pdb', PD.objectToOptions({ pdb: 'PDB', pdbIhm: 'PDB-IHM' })),\n entry: PD.Text(''),\n };\n },\n from: PluginStateObject.Root,\n})(({ params }, ctx: PluginContext) =>\n Task.create('Loading from database...', async (taskCtx) => {\n if (params.source === 'pdb') {\n await loadPdb(ctx, params.entry);\n } else if (params.source === 'pdbIhm') {\n await loadPdbIhm(ctx, params.entry);\n }\n })\n);\n\nexport const LoadExample = StateAction.build({\n display: { name: 'Load', description: 'Load an example' },\n params: (a, ctx: PluginContext) => {\n const entries = (ctx.customState as MesoscaleExplorerState).examples || [];\n return {\n entry: PD.Select(0, entries.map((s, i) => [i, s.label])),\n };\n },\n from: PluginStateObject.Root,\n})(({ params }, ctx: PluginContext) =>\n Task.create('Loading example...', async (taskCtx) => {\n const entries = (ctx.customState as MesoscaleExplorerState).examples || [];\n await loadExampleEntry(ctx, entries[params.entry]);\n })\n);\n\nexport const LoadModel = StateAction.build({\n display: { name: 'Load', description: 'Load a model' },\n params: {\n files: PD.FileList({\n accept: '.cif,.bcif,.cif.gz,.bcif.gz,.zip',\n multiple: true,\n description: 'mmCIF or Cellpack- or Petworld-style cif file.',\n label: 'File(s)',\n }),\n },\n from: PluginStateObject.Root,\n})(({ params }, ctx: PluginContext) =>\n Task.create('Loading model...', async (taskCtx) => {\n if (params.files === null || params.files.length === 0) {\n ctx.log.error('No file(s) selected');\n return;\n }\n\n await reset(ctx);\n\n const firstFile = params.files[0];\n const firstInfo = getFileNameInfo(firstFile.file!.name);\n\n if (firstInfo.name.endsWith('zip')) {\n try {\n await createGenericHierarchy(ctx, firstFile);\n } catch (e) {\n console.error(e);\n ctx.log.error(`Error opening file '${firstFile.name}'`);\n }\n } else {\n for (const file of params.files) {\n try {\n const info = getFileNameInfo(file.file!.name);\n if (!['cif', 'bcif'].includes(info.ext)) continue;\n\n const isBinary = ctx.dataFormats.binaryExtensions.has(info.ext);\n const { data } = await ctx.builders.data.readFile({ file, isBinary });\n await createHierarchy(ctx, data.ref);\n } catch (e) {\n console.error(e);\n ctx.log.error(`Error opening file '${file.name}'`);\n }\n }\n }\n })\n);\n\nexport class DatabaseControls extends PluginUIComponent {\n componentDidMount() {\n }\n\n render() {\n return (\n

\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",[],[401,185,364,594],[401,185,364],{"_104":603,"_95":604,"_153":605,"_155":440,"_156":138,"_157":606,"_159":22,"_106":607,"_100":456,"_161":219,"_163":608,"_164":22,"_165":-5,"_166":609,"_98":610},"d2ea4e84-bdc9-11f0-8403-42dde27851f2","app.ts","c779b698-bdb5-11f0-acd9-42dde27851f2",326,["D",1762733497287],"/**\n * Copyright (c) 2022-2025 mol* contributors, licensed under MIT, See LICENSE file for more info.\n *\n * @author Alexander Rose \n */\n\nimport { Mp4Export } from '../../extensions/mp4-export.ts';\nimport type { DataFormatProvider } from '../../mol-plugin-state/formats/provider.ts';\nimport { createPluginUI } from '../../mol-plugin-ui/index.ts';\nimport { renderReact18 } from '../../mol-plugin-ui/react18.ts';\nimport type { PluginUIContext } from '../../mol-plugin-ui/context.ts';\nimport { DefaultPluginUISpec, type PluginUISpec } from '../../mol-plugin-ui/spec.ts';\nimport { PluginConfig } from '../../mol-plugin/config.ts';\nimport type { PluginLayoutControlsDisplay } from '../../mol-plugin/layout.ts';\nimport { PluginSpec } from '../../mol-plugin/spec.ts';\nimport '../../mol-util/polyfill';\nimport { ObjectKeys } from '../../mol-util/type-helpers.ts';\nimport type { SaccharideCompIdMapType } from '../../mol-model/structure/structure/carbohydrates/constants.ts';\nimport { Backgrounds } from '../../extensions/backgrounds.ts';\nimport { LeftPanel, RightPanel } from './ui/panels.tsx';\nimport { Color } from '../../mol-util/color/index.ts';\nimport { SpacefillRepresentationProvider } from '../../mol-repr/structure/representation/spacefill.ts';\nimport { PluginBehaviors } from '../../mol-plugin/behavior.ts';\nimport { MesoFocusLoci } from './behavior/camera.ts';\nimport { type GraphicsMode, MesoscaleState } from './data/state.ts';\nimport { MesoSelectLoci } from './behavior/select.ts';\nimport type { Transparency } from '../../mol-gl/webgl/render-item.ts';\nimport { loadExampleEntry, LoadModel, loadPdb, loadPdbIhm, loadUrl, openState } from './ui/states.tsx';\nimport { Asset } from '../../mol-util/assets.ts';\nimport { AnimateCameraSpin } from '../../mol-plugin-state/animation/built-in/camera-spin.ts';\nimport { AnimateCameraRock } from '../../mol-plugin-state/animation/built-in/camera-rock.ts';\nimport { AnimateStateSnapshots } from '../../mol-plugin-state/animation/built-in/state-snapshots.ts';\nimport { MesoViewportSnapshotDescription } from './ui/entities.tsx';\n\nexport { PLUGIN_VERSION as version } from '../../mol-plugin/version.ts';\nexport { consoleStats, setDebugMode, setProductionMode, setTimingMode } from '../../mol-util/debug.ts';\n\nexport type ExampleEntry = {\n id: string;\n label: string;\n url: string;\n type: 'molx' | 'molj' | 'cif' | 'bcif';\n description?: string;\n link?: string;\n};\n\nexport type MesoscaleExplorerState = {\n examples?: ExampleEntry[];\n graphicsMode: GraphicsMode;\n illumination: boolean;\n stateRef?: string;\n driver?: any;\n stateCache: { [k: string]: any };\n};\n\n//\n\nconst Extensions = {\n 'backgrounds': PluginSpec.Behavior(Backgrounds),\n 'mp4-export': PluginSpec.Behavior(Mp4Export),\n};\n\nconst DefaultMesoscaleExplorerOptions = {\n customFormats: [] as [string, DataFormatProvider][],\n extensions: ObjectKeys(Extensions),\n layoutIsExpanded: true,\n layoutShowControls: true,\n layoutShowRemoteState: true,\n layoutControlsDisplay: 'reactive' as PluginLayoutControlsDisplay,\n layoutShowSequence: true,\n layoutShowLog: true,\n layoutShowLeftPanel: true,\n collapseLeftPanel: false,\n collapseRightPanel: false,\n disableAntialiasing: PluginConfig.General.DisableAntialiasing.defaultValue,\n pixelScale: PluginConfig.General.PixelScale.defaultValue,\n pickScale: PluginConfig.General.PickScale.defaultValue,\n transparency: 'blended' as Transparency,\n preferWebgl1: PluginConfig.General.PreferWebGl1.defaultValue,\n allowMajorPerformanceCaveat: PluginConfig.General.AllowMajorPerformanceCaveat.defaultValue,\n powerPreference: PluginConfig.General.PowerPreference.defaultValue,\n resolutionMode: PluginConfig.General.ResolutionMode.defaultValue,\n illumination: false,\n\n viewportShowExpand: PluginConfig.Viewport.ShowExpand.defaultValue,\n viewportShowControls: PluginConfig.Viewport.ShowControls.defaultValue,\n viewportShowSettings: PluginConfig.Viewport.ShowSettings.defaultValue,\n viewportShowSelectionMode: true,\n viewportShowAnimation: false,\n viewportShowTrajectoryControls: false,\n pluginStateServer: PluginConfig.State.DefaultServer.defaultValue,\n volumeStreamingServer: PluginConfig.VolumeStreaming.DefaultServer.defaultValue,\n volumeStreamingDisabled: !PluginConfig.VolumeStreaming.Enabled.defaultValue,\n pdbProvider: PluginConfig.Download.DefaultPdbProvider.defaultValue,\n emdbProvider: PluginConfig.Download.DefaultEmdbProvider.defaultValue,\n saccharideCompIdMapType: 'default' as SaccharideCompIdMapType,\n\n graphicsMode: 'quality' as GraphicsMode,\n driver: undefined,\n};\ntype MesoscaleExplorerOptions = typeof DefaultMesoscaleExplorerOptions;\n\nexport class MesoscaleExplorer {\n constructor(public plugin: PluginUIContext) {\n }\n\n async loadExample(id: string) {\n const entries = (this.plugin.customState as MesoscaleExplorerState).examples || [];\n const entry = entries.find((e) => e.id === id);\n if (entry !== undefined) {\n await loadExampleEntry(this.plugin, entry);\n }\n }\n\n async loadUrl(url: string, type: 'molx' | 'molj' | 'cif' | 'bcif') {\n await loadUrl(this.plugin, url, type);\n }\n\n async loadPdb(id: string) {\n await loadPdb(this.plugin, id);\n }\n\n /**\n * @deprecated Scheduled for removal in v5. Use {@link loadPdbIhm | loadPdbIhm(id: string)} instead.\n */\n async loadPdbDev(id: string) {\n await this.loadPdbIhm(id);\n }\n\n async loadPdbIhm(id: string) {\n await loadPdbIhm(this.plugin, id);\n }\n\n static async create(elementOrId: string | HTMLElement, options: Partial = {}) {\n const definedOptions = {} as any;\n // filter for defined properies only so the default values\n // are property applied\n for (const p of Object.keys(options) as (keyof MesoscaleExplorerOptions)[]) {\n if (options[p] !== void 0) definedOptions[p] = options[p];\n }\n\n const o: MesoscaleExplorerOptions = { ...DefaultMesoscaleExplorerOptions, ...definedOptions };\n const defaultSpec = DefaultPluginUISpec();\n\n const spec: PluginUISpec = {\n actions: defaultSpec.actions,\n behaviors: [\n PluginSpec.Behavior(PluginBehaviors.Camera.CameraAxisHelper),\n PluginSpec.Behavior(PluginBehaviors.Camera.CameraControls),\n PluginSpec.Behavior(PluginBehaviors.State.SnapshotControls),\n\n PluginSpec.Behavior(MesoFocusLoci),\n PluginSpec.Behavior(MesoSelectLoci),\n PluginSpec.Behavior(PluginBehaviors.Representation.SelectLoci),\n ...o.extensions.map((e) => Extensions[e]),\n ],\n animations: [\n AnimateCameraSpin,\n AnimateCameraRock,\n AnimateStateSnapshots,\n ],\n customParamEditors: defaultSpec.customParamEditors,\n customFormats: o?.customFormats,\n layout: {\n initial: {\n isExpanded: o.layoutIsExpanded,\n showControls: o.layoutShowControls,\n controlsDisplay: o.layoutControlsDisplay,\n regionState: {\n bottom: 'full',\n left: o.collapseLeftPanel ? 'collapsed' : 'full',\n right: o.collapseRightPanel ? 'hidden' : 'full',\n top: 'full',\n },\n },\n },\n components: {\n ...defaultSpec.components,\n controls: {\n ...defaultSpec.components?.controls,\n top: 'none',\n bottom: 'none',\n left: LeftPanel,\n right: RightPanel,\n },\n remoteState: 'none',\n viewport: {\n snapshotDescription: MesoViewportSnapshotDescription,\n },\n },\n config: [\n [PluginConfig.General.DisableAntialiasing, o.disableAntialiasing],\n [PluginConfig.General.PixelScale, o.pixelScale],\n [PluginConfig.General.PickScale, o.pickScale],\n [PluginConfig.General.Transparency, o.transparency],\n [PluginConfig.General.PreferWebGl1, o.preferWebgl1],\n [PluginConfig.General.AllowMajorPerformanceCaveat, o.allowMajorPerformanceCaveat],\n [PluginConfig.General.PowerPreference, o.powerPreference],\n [PluginConfig.General.ResolutionMode, o.resolutionMode],\n [PluginConfig.Viewport.ShowExpand, o.viewportShowExpand],\n [PluginConfig.Viewport.ShowControls, o.viewportShowControls],\n [PluginConfig.Viewport.ShowSettings, o.viewportShowSettings],\n [PluginConfig.Viewport.ShowSelectionMode, o.viewportShowSelectionMode],\n [PluginConfig.Viewport.ShowAnimation, o.viewportShowAnimation],\n [PluginConfig.Viewport.ShowTrajectoryControls, o.viewportShowTrajectoryControls],\n [PluginConfig.State.DefaultServer, o.pluginStateServer],\n [PluginConfig.State.CurrentServer, o.pluginStateServer],\n [PluginConfig.VolumeStreaming.DefaultServer, o.volumeStreamingServer],\n [PluginConfig.VolumeStreaming.Enabled, !o.volumeStreamingDisabled],\n [PluginConfig.Download.DefaultPdbProvider, o.pdbProvider],\n [PluginConfig.Download.DefaultEmdbProvider, o.emdbProvider],\n [PluginConfig.Structure.SaccharideCompIdMapType, o.saccharideCompIdMapType],\n ],\n };\n\n const element = typeof elementOrId === 'string' ? document.getElementById(elementOrId) : elementOrId;\n if (!element) throw new Error(`Could not get element with id '${elementOrId}'`);\n\n const plugin = await createPluginUI({\n target: element,\n spec,\n render: renderReact18,\n onBeforeUIRender: async (plugin) => {\n let examples: MesoscaleExplorerState['examples'] = undefined;\n try {\n examples = await plugin.fetch({ url: '../examples/list.json', type: 'json' }).run();\n // extend the array with file tour.json if it exists\n const tour = await plugin.fetch({ url: '../examples/tour.json', type: 'json' }).run();\n if (tour) {\n examples = examples?.concat(tour);\n }\n } catch (e) {\n console.log(e);\n }\n\n (plugin.customState as MesoscaleExplorerState) = {\n examples,\n graphicsMode: o.graphicsMode,\n illumination: o.illumination,\n driver: o.driver,\n stateCache: {},\n };\n\n await MesoscaleState.init(plugin);\n },\n });\n\n plugin.canvas3d?.setProps({\n renderer: {\n backgroundColor: Color(0x101010),\n },\n cameraFog: { name: 'off', params: {} },\n hiZ: { enabled: true },\n xr: {\n disablePostprocessing: false,\n sceneRadiusInMeters: 0.75,\n },\n });\n\n plugin.representation.structure.registry.clear();\n plugin.representation.structure.registry.add(SpacefillRepresentationProvider);\n\n plugin.state.setSnapshotParams({\n image: true,\n componentManager: false,\n structureSelection: true,\n });\n\n plugin.managers.lociLabels.clearProviders();\n\n plugin.managers.dragAndDrop.addHandler('mesoscale-explorer', (files) => {\n const sessions = files.filter((f) => {\n const fn = f.name.toLowerCase();\n return fn.endsWith('.molx') || fn.endsWith('.molj');\n });\n\n if (sessions.length > 0) {\n openState(plugin, sessions[0]);\n } else {\n plugin.runTask(plugin.state.data.applyAction(LoadModel, {\n files: files.map((f) => Asset.File(f)),\n }));\n }\n\n return true;\n });\n\n plugin.state.events.object.created.subscribe((e) => {\n (plugin.customState as MesoscaleExplorerState).stateCache = {};\n });\n\n plugin.state.events.object.removed.subscribe((e) => {\n (plugin.customState as MesoscaleExplorerState).stateCache = {};\n });\n\n return new MesoscaleExplorer(plugin);\n }\n\n handleResize() {\n this.plugin.layout.events.updated.next(void 0);\n }\n\n dispose() {\n this.plugin.dispose();\n }\n}\n",[],[401,185,604],{"_104":612,"_95":613,"_153":614,"_155":440,"_156":138,"_157":615,"_159":22,"_106":616,"_100":218,"_161":321,"_163":617,"_164":22,"_165":-5,"_166":618,"_98":619},"d2b8e222-bdc9-11f0-a1dc-42dde27851f2","embedded.html","f023a094-bdb6-11f0-b3ef-42dde27851f2",318,["D",1762733496973],"\n\n \n \n \n \n \n \n \n

\n \n \n \n

\n\n \n \n \n\n",[],[401,185,613],{"_104":621,"_95":99,"_153":622,"_155":440,"_156":138,"_157":623,"_159":22,"_106":624,"_100":456,"_161":321,"_163":625,"_164":22,"_165":-5,"_166":626,"_98":627},"d2de319e-bdc9-11f0-8ce7-42dde27851f2","c8426ee4-bdb5-11f0-8204-42dde27851f2",324,["D",1762733497212],"\n\n \n \n \n \n \n Mol* Mesoscale Explorer\n \n \n \n \n

\n \n \n \n \n \n\n",[],[401,185,99],{"_104":629,"_95":290,"_153":630,"_155":440,"_156":138,"_157":631,"_159":22,"_106":632,"_100":456,"_161":219,"_163":633,"_164":22,"_165":-5,"_166":634,"_98":635},"d2f014a4-bdc9-11f0-949d-42dde27851f2","c78ca44c-bdb5-11f0-acd9-42dde27851f2",327,["D",1762733497344],"/**\n * Copyright (c) 2022 mol* contributors, licensed under MIT, See LICENSE file for more info.\n *\n * @author Alexander Rose \n */\n\nimport './favicon.ico';\nimport './index.html';\nimport './style.scss';\nexport * from './app.ts';\n",[],[401,185,290],{"_104":637,"_95":638,"_153":639,"_155":440,"_156":138,"_157":640,"_159":22,"_106":641,"_100":456,"_161":321,"_163":642,"_164":22,"_165":-5,"_166":643,"_98":644},"d329339c-bdc9-11f0-949d-42dde27851f2","style.scss","c78800fe-bdb5-11f0-a726-42dde27851f2",330,["D",1762733497397],"@use 'sass:color';\n\n@use '../../mol-plugin-ui/skin/base/colors' with (\n $default-background: #2d3e50,\n $font-color: #edf1f2,\n $hover-font-color: #3b9ad9,\n $entity-current-font-color: #ffffff,\n $msp-btn-remove-background: #bf3a31,\n $msp-btn-remove-hover-font-color: #ffffff,\n $msp-btn-commit-on-font-color: #ffffff,\n $entity-badge-font-color: #ccd4e0,\n // used in LOG\n $log-message: #0cca5d,\n $log-info: #5e3673,\n $log-warning: #fcc937,\n $log-error: #fd354b,\n $logo-background: rgba(0, 0, 0, 0.75),\n $color-adjust-sign: -1,\n);\n\n@use '../../mol-plugin-ui/skin/base/base';\n@use '../../mol-plugin-ui/skin/base/vars' as *;\n\na {\n color: $font-color;\n &:hover {\n color: $hover-font-color;\n }\n}\n\n.msp-snapshot-description-me {\n background: color.change($default-background, $alpha: 0.5, $space: rgb);\n\n position: absolute;\n height: 50vh; // 50% of the viewport height\n left: 0;\n top: $control-spacing + $row-height;\n padding: (0.66 * $control-spacing) $control-spacing;\n\n resize: both; /* Allows resizing in both directions */\n overflow: auto; /* Adjust as needed */\n\n a {\n text-decoration: underline;\n cursor: pointer;\n color: $font-color;\n }\n\n ul, ol {\n padding-left: $control-spacing + 4px;\n }\n\n &.hidden {\n display: none;\n }\n\n &.shown {\n display: block; // or 'flex', 'grid', etc. depending on your layout\n }\n}\n",[],[401,185,638],[401,185],{"_104":647,"_95":648,"_153":649,"_155":402,"_156":138,"_157":650,"_159":22,"_106":651,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":652,"_98":662},"a4f6bbd4-bdc9-11f0-b194-42dde27851f2","styles","a4f6bc92-bdc9-11f0-b194-42dde27851f2",293,["D",1762733420212],[653],{"_104":654,"_95":655,"_153":656,"_155":649,"_156":138,"_157":657,"_159":22,"_106":658,"_100":32,"_161":321,"_163":659,"_164":22,"_165":-5,"_166":660,"_98":661},"b1b7e668-bdc9-11f0-bf35-42dde27851f2","molstar.css","b1b7e726-bdc9-11f0-bf35-42dde27851f2",296,["D",1762733441603],".msp-plugin{font-family:Helvetica Neue,Segoe UI,Helvetica,Source Sans Pro,Arial,sans-serif;font-size:14px;line-height:1.42857143;position:absolute;inset:0}.msp-plugin *{box-sizing:border-box}.msp-plugin [hidden],.msp-plugin template{display:none}.msp-plugin a{background-color:transparent}.msp-plugin a:active,.msp-plugin a:hover{outline:0}.msp-plugin abbr[title]{border-bottom:1px dotted}.msp-plugin b,.msp-plugin strong{font-weight:700}.msp-plugin small{font-size:80%}.msp-plugin img{border:0}.msp-plugin svg:not(:root){overflow:hidden}.msp-plugin button,.msp-plugin input,.msp-plugin optgroup,.msp-plugin select,.msp-plugin textarea{color:inherit;font:inherit;margin:0}.msp-plugin button{overflow:visible}.msp-plugin button,.msp-plugin select{text-transform:none}.msp-plugin button,.msp-plugin html input[type=button],.msp-plugin input[type=reset],.msp-plugin input[type=submit]{-webkit-appearance:button;cursor:pointer}.msp-plugin button[disabled],.msp-plugin html input[disabled]{cursor:default}.msp-plugin button::-moz-focus-inner,.msp-plugin input::-moz-focus-inner{border:0;padding:0}.msp-plugin input{line-height:normal}.msp-plugin input[type=checkbox],.msp-plugin input[type=radio]{box-sizing:border-box;padding:0}.msp-plugin input[type=number]::-webkit-inner-spin-button,.msp-plugin input[type=number]::-webkit-outer-spin-button{height:auto}.msp-plugin textarea{overflow:auto}.msp-plugin .msp-layout-expanded,.msp-plugin .msp-layout-standard{inset:0}.msp-plugin .msp-layout-standard{border:1px solid rgb(206.2804878049,200.5487804878,186.2195121951)}.msp-plugin .msp-layout-region{overflow:hidden}.msp-plugin .msp-layout-static,.msp-plugin .msp-layout-scrollable{position:absolute}.msp-plugin .msp-scrollable{overflow-y:auto}.msp-plugin .msp-scrollable-container{position:absolute;inset:0;overflow-y:auto}.msp-plugin .msp-layout-static{overflow:hidden}.msp-plugin .msp-layout-top .msp-layout-static,.msp-plugin .msp-layout-main .msp-layout-static,.msp-plugin .msp-layout-bottom .msp-layout-static,.msp-plugin .msp-layout-right .msp-layout-static{inset:0}.msp-plugin .msp-layout-right .msp-layout-scrollable{inset:43px 0 0}.msp-plugin .msp-layout-left .msp-layout-static{inset:0}.msp-plugin .msp-layout-standard-outside{position:absolute}.msp-plugin .msp-layout-standard-outside .msp-layout-main{position:absolute;inset:0}.msp-plugin .msp-layout-standard-outside .msp-layout-top{position:absolute;right:0;height:97px;top:-97px;width:50%;border-left:1px solid rgb(206.2804878049,200.5487804878,186.2195121951);border-bottom:1px solid rgb(206.2804878049,200.5487804878,186.2195121951)}.msp-plugin .msp-layout-standard-outside .msp-layout-bottom{position:absolute;left:0;right:0;height:97px;top:-97px;width:50%;border-bottom:1px solid rgb(206.2804878049,200.5487804878,186.2195121951)}.msp-plugin .msp-layout-standard-outside .msp-layout-right{position:absolute;width:50%;right:0;bottom:-295px;height:295px;border-left:1px solid rgb(206.2804878049,200.5487804878,186.2195121951);border-top:1px solid rgb(206.2804878049,200.5487804878,186.2195121951)}.msp-plugin .msp-layout-standard-outside .msp-layout-left{position:absolute;width:50%;left:0;bottom:-295px;height:295px;border-top:1px solid rgb(206.2804878049,200.5487804878,186.2195121951)}.msp-plugin .msp-layout-standard-outside .msp-layout-hide-right .msp-layout-right{display:none}.msp-plugin .msp-layout-standard-outside .msp-layout-hide-right .msp-layout-left{width:100%}.msp-plugin .msp-layout-standard-outside .msp-layout-hide-left .msp-layout-left{display:none}.msp-plugin .msp-layout-standard-outside .msp-layout-hide-left .msp-layout-right{width:100%;border-left:none}.msp-plugin .msp-layout-standard-outside .msp-layout-collapse-left .msp-layout-left{width:32px}.msp-plugin .msp-layout-standard-outside .msp-layout-collapse-left .msp-layout-right{left:32px;width:auto}.msp-plugin .msp-layout-standard-outside .msp-layout-hide-top .msp-layout-top{display:none}.msp-plugin .msp-layout-standard-outside .msp-layout-hide-top .msp-layout-bottom{width:100%;border-left:none}.msp-plugin .msp-layout-standard-outside .msp-layout-hide-bottom .msp-layout-bottom{display:none}.msp-plugin .msp-layout-standard-outside .msp-layout-hide-bottom .msp-layout-top{width:100%;border-left:none}.msp-plugin .msp-layout-standard-landscape{position:absolute}.msp-plugin .msp-layout-standard-landscape .msp-layout-main{position:absolute;inset:100px 300px 70px 330px}.msp-plugin .msp-layout-standard-landscape .msp-layout-top{position:absolute;left:330px;right:300px;height:100px;top:0;border-bottom:1px solid rgb(206.2804878049,200.5487804878,186.2195121951)}.msp-plugin .msp-layout-standard-landscape .msp-layout-bottom{position:absolute;left:330px;right:300px;height:70px;bottom:0;border-top:1px solid rgb(206.2804878049,200.5487804878,186.2195121951)}.msp-plugin .msp-layout-standard-landscape .msp-layout-right{position:absolute;width:300px;right:0;bottom:0;top:0;border-left:1px solid rgb(206.2804878049,200.5487804878,186.2195121951)}.msp-plugin .msp-layout-standard-landscape .msp-layout-left{position:absolute;width:330px;left:0;bottom:0;top:0;border-right:1px solid rgb(206.2804878049,200.5487804878,186.2195121951)}.msp-plugin .msp-layout-standard-landscape .msp-layout-hide-right .msp-layout-right{display:none}.msp-plugin .msp-layout-standard-landscape .msp-layout-hide-right .msp-layout-main,.msp-plugin .msp-layout-standard-landscape .msp-layout-hide-right .msp-layout-top,.msp-plugin .msp-layout-standard-landscape .msp-layout-hide-right .msp-layout-bottom{right:0}.msp-plugin .msp-layout-standard-landscape .msp-layout-hide-left .msp-layout-left{display:none}.msp-plugin .msp-layout-standard-landscape .msp-layout-hide-left .msp-layout-main,.msp-plugin .msp-layout-standard-landscape .msp-layout-hide-left .msp-layout-top,.msp-plugin .msp-layout-standard-landscape .msp-layout-hide-left .msp-layout-bottom{left:0}.msp-plugin .msp-layout-standard-landscape .msp-layout-collapse-left .msp-layout-left{width:32px}.msp-plugin .msp-layout-standard-landscape .msp-layout-collapse-left .msp-layout-main,.msp-plugin .msp-layout-standard-landscape .msp-layout-collapse-left .msp-layout-top,.msp-plugin .msp-layout-standard-landscape .msp-layout-collapse-left .msp-layout-bottom{left:32px}.msp-plugin .msp-layout-standard-landscape .msp-layout-hide-bottom .msp-layout-bottom{display:none}.msp-plugin .msp-layout-standard-landscape .msp-layout-hide-bottom .msp-layout-main{bottom:0}.msp-plugin .msp-layout-standard-landscape .msp-layout-hide-top .msp-layout-top{display:none}.msp-plugin .msp-layout-standard-landscape .msp-layout-hide-top .msp-layout-main{top:0}.msp-plugin .msp-layout-standard-portrait{position:absolute}.msp-plugin .msp-layout-standard-portrait .msp-layout-main{position:absolute;inset:97px 0 361px}.msp-plugin .msp-layout-standard-portrait .msp-layout-top{position:absolute;right:0;height:97px;top:0;width:50%;border-left:1px solid rgb(206.2804878049,200.5487804878,186.2195121951);border-bottom:1px solid rgb(206.2804878049,200.5487804878,186.2195121951)}.msp-plugin .msp-layout-standard-portrait .msp-layout-bottom{position:absolute;left:0;right:0;height:97px;width:50%;border-bottom:1px solid rgb(206.2804878049,200.5487804878,186.2195121951)}.msp-plugin .msp-layout-standard-portrait .msp-layout-right{position:absolute;width:50%;right:0;bottom:0;height:361px;border-left:1px solid rgb(206.2804878049,200.5487804878,186.2195121951);border-top:1px solid rgb(206.2804878049,200.5487804878,186.2195121951)}.msp-plugin .msp-layout-standard-portrait .msp-layout-left{position:absolute;width:50%;left:0;bottom:0;height:361px;border-top:1px solid rgb(206.2804878049,200.5487804878,186.2195121951)}.msp-plugin .msp-layout-standard-portrait .msp-layout-hide-right .msp-layout-right{display:none}.msp-plugin .msp-layout-standard-portrait .msp-layout-hide-right .msp-layout-left{width:100%}.msp-plugin .msp-layout-standard-portrait .msp-layout-hide-left .msp-layout-left{display:none}.msp-plugin .msp-layout-standard-portrait .msp-layout-hide-left .msp-layout-right{width:100%;border-left:none}.msp-plugin .msp-layout-standard-portrait .msp-layout-hide-right.msp-layout-hide-left .msp-layout-main{bottom:0}.msp-plugin .msp-layout-standard-portrait .msp-layout-collapse-left .msp-layout-left{width:32px}.msp-plugin .msp-layout-standard-portrait .msp-layout-collapse-left .msp-layout-right{left:32px;width:auto}.msp-plugin .msp-layout-standard-portrait .msp-layout-hide-top .msp-layout-top{display:none}.msp-plugin .msp-layout-standard-portrait .msp-layout-hide-top .msp-layout-bottom{width:100%;border-left:none}.msp-plugin .msp-layout-standard-portrait .msp-layout-hide-bottom .msp-layout-bottom{display:none}.msp-plugin .msp-layout-standard-portrait .msp-layout-hide-bottom .msp-layout-top{width:100%;border-left:none}.msp-plugin .msp-layout-standard-portrait .msp-layout-hide-top.msp-layout-hide-bottom .msp-layout-main{top:0}.msp-plugin .msp-layout-standard-reactive{position:absolute}@media (orientation: landscape),(min-width: 1000px){.msp-plugin .msp-layout-standard-reactive .msp-layout-main{position:absolute;inset:100px 300px 70px 330px}.msp-plugin .msp-layout-standard-reactive .msp-layout-top{position:absolute;left:330px;right:300px;height:100px;top:0;border-bottom:1px solid rgb(206.2804878049,200.5487804878,186.2195121951)}.msp-plugin .msp-layout-standard-reactive .msp-layout-bottom{position:absolute;left:330px;right:300px;height:70px;bottom:0;border-top:1px solid rgb(206.2804878049,200.5487804878,186.2195121951)}.msp-plugin .msp-layout-standard-reactive .msp-layout-right{position:absolute;width:300px;right:0;bottom:0;top:0;border-left:1px solid rgb(206.2804878049,200.5487804878,186.2195121951)}.msp-plugin .msp-layout-standard-reactive .msp-layout-left{position:absolute;width:330px;left:0;bottom:0;top:0;border-right:1px solid rgb(206.2804878049,200.5487804878,186.2195121951)}.msp-plugin .msp-layout-standard-reactive .msp-layout-hide-right .msp-layout-right{display:none}.msp-plugin .msp-layout-standard-reactive .msp-layout-hide-right .msp-layout-main,.msp-plugin .msp-layout-standard-reactive .msp-layout-hide-right .msp-layout-top,.msp-plugin .msp-layout-standard-reactive .msp-layout-hide-right .msp-layout-bottom{right:0}.msp-plugin .msp-layout-standard-reactive .msp-layout-hide-left .msp-layout-left{display:none}.msp-plugin .msp-layout-standard-reactive .msp-layout-hide-left .msp-layout-main,.msp-plugin .msp-layout-standard-reactive .msp-layout-hide-left .msp-layout-top,.msp-plugin .msp-layout-standard-reactive .msp-layout-hide-left .msp-layout-bottom{left:0}.msp-plugin .msp-layout-standard-reactive .msp-layout-collapse-left .msp-layout-left{width:32px}.msp-plugin .msp-layout-standard-reactive .msp-layout-collapse-left .msp-layout-main,.msp-plugin .msp-layout-standard-reactive .msp-layout-collapse-left .msp-layout-top,.msp-plugin .msp-layout-standard-reactive .msp-layout-collapse-left .msp-layout-bottom{left:32px}.msp-plugin .msp-layout-standard-reactive .msp-layout-hide-bottom .msp-layout-bottom{display:none}.msp-plugin .msp-layout-standard-reactive .msp-layout-hide-bottom .msp-layout-main{bottom:0}.msp-plugin .msp-layout-standard-reactive .msp-layout-hide-top .msp-layout-top{display:none}.msp-plugin .msp-layout-standard-reactive .msp-layout-hide-top .msp-layout-main{top:0}}@media (orientation: portrait) and (max-width: 1000px){.msp-plugin .msp-layout-standard-reactive .msp-layout-main{position:absolute;inset:97px 0 361px}.msp-plugin .msp-layout-standard-reactive .msp-layout-top{position:absolute;right:0;height:97px;top:0;width:50%;border-left:1px solid rgb(206.2804878049,200.5487804878,186.2195121951);border-bottom:1px solid rgb(206.2804878049,200.5487804878,186.2195121951)}.msp-plugin .msp-layout-standard-reactive .msp-layout-bottom{position:absolute;left:0;right:0;height:97px;width:50%;border-bottom:1px solid rgb(206.2804878049,200.5487804878,186.2195121951)}.msp-plugin .msp-layout-standard-reactive .msp-layout-right{position:absolute;width:50%;right:0;bottom:0;height:361px;border-left:1px solid rgb(206.2804878049,200.5487804878,186.2195121951);border-top:1px solid rgb(206.2804878049,200.5487804878,186.2195121951)}.msp-plugin .msp-layout-standard-reactive .msp-layout-left{position:absolute;width:50%;left:0;bottom:0;height:361px;border-top:1px solid rgb(206.2804878049,200.5487804878,186.2195121951)}.msp-plugin .msp-layout-standard-reactive .msp-layout-hide-right .msp-layout-right{display:none}.msp-plugin .msp-layout-standard-reactive .msp-layout-hide-right .msp-layout-left{width:100%}.msp-plugin .msp-layout-standard-reactive .msp-layout-hide-left .msp-layout-left{display:none}.msp-plugin .msp-layout-standard-reactive .msp-layout-hide-left .msp-layout-right{width:100%;border-left:none}.msp-plugin .msp-layout-standard-reactive .msp-layout-hide-right.msp-layout-hide-left .msp-layout-main{bottom:0}.msp-plugin .msp-layout-standard-reactive .msp-layout-collapse-left .msp-layout-left{width:32px}.msp-plugin .msp-layout-standard-reactive .msp-layout-collapse-left .msp-layout-right{left:32px;width:auto}.msp-plugin .msp-layout-standard-reactive .msp-layout-hide-top .msp-layout-top{display:none}.msp-plugin .msp-layout-standard-reactive .msp-layout-hide-top .msp-layout-bottom{width:100%;border-left:none}.msp-plugin .msp-layout-standard-reactive .msp-layout-hide-bottom .msp-layout-bottom{display:none}.msp-plugin .msp-layout-standard-reactive .msp-layout-hide-bottom .msp-layout-top{width:100%;border-left:none}.msp-plugin .msp-layout-standard-reactive .msp-layout-hide-top.msp-layout-hide-bottom .msp-layout-main{top:0}}.msp-plugin .msp-layout-expanded{position:fixed}@media (orientation: landscape){.msp-plugin .msp-layout-expanded .msp-layout-main{position:absolute;inset:100px 300px 70px 330px}.msp-plugin .msp-layout-expanded .msp-layout-top{position:absolute;left:330px;right:300px;height:100px;top:0;border-bottom:1px solid rgb(206.2804878049,200.5487804878,186.2195121951)}.msp-plugin .msp-layout-expanded .msp-layout-bottom{position:absolute;left:330px;right:300px;height:70px;bottom:0;border-top:1px solid rgb(206.2804878049,200.5487804878,186.2195121951)}.msp-plugin .msp-layout-expanded .msp-layout-right{position:absolute;width:300px;right:0;bottom:0;top:0;border-left:1px solid rgb(206.2804878049,200.5487804878,186.2195121951)}.msp-plugin .msp-layout-expanded .msp-layout-left{position:absolute;width:330px;left:0;bottom:0;top:0;border-right:1px solid rgb(206.2804878049,200.5487804878,186.2195121951)}.msp-plugin .msp-layout-expanded .msp-layout-hide-right .msp-layout-right{display:none}.msp-plugin .msp-layout-expanded .msp-layout-hide-right .msp-layout-main,.msp-plugin .msp-layout-expanded .msp-layout-hide-right .msp-layout-top,.msp-plugin .msp-layout-expanded .msp-layout-hide-right .msp-layout-bottom{right:0}.msp-plugin .msp-layout-expanded .msp-layout-hide-left .msp-layout-left{display:none}.msp-plugin .msp-layout-expanded .msp-layout-hide-left .msp-layout-main,.msp-plugin .msp-layout-expanded .msp-layout-hide-left .msp-layout-top,.msp-plugin .msp-layout-expanded .msp-layout-hide-left .msp-layout-bottom{left:0}.msp-plugin .msp-layout-expanded .msp-layout-collapse-left .msp-layout-left{width:32px}.msp-plugin .msp-layout-expanded .msp-layout-collapse-left .msp-layout-main,.msp-plugin .msp-layout-expanded .msp-layout-collapse-left .msp-layout-top,.msp-plugin .msp-layout-expanded .msp-layout-collapse-left .msp-layout-bottom{left:32px}.msp-plugin .msp-layout-expanded .msp-layout-hide-bottom .msp-layout-bottom{display:none}.msp-plugin .msp-layout-expanded .msp-layout-hide-bottom .msp-layout-main{bottom:0}.msp-plugin .msp-layout-expanded .msp-layout-hide-top .msp-layout-top{display:none}.msp-plugin .msp-layout-expanded .msp-layout-hide-top .msp-layout-main{top:0}}@media (orientation: portrait){.msp-plugin .msp-layout-expanded .msp-layout-main{position:absolute;inset:97px 0 361px}.msp-plugin .msp-layout-expanded .msp-layout-top{position:absolute;right:0;height:97px;top:0;width:50%;border-left:1px solid rgb(206.2804878049,200.5487804878,186.2195121951);border-bottom:1px solid rgb(206.2804878049,200.5487804878,186.2195121951)}.msp-plugin .msp-layout-expanded .msp-layout-bottom{position:absolute;left:0;right:0;height:97px;width:50%;border-bottom:1px solid rgb(206.2804878049,200.5487804878,186.2195121951)}.msp-plugin .msp-layout-expanded .msp-layout-right{position:absolute;width:50%;right:0;bottom:0;height:361px;border-left:1px solid rgb(206.2804878049,200.5487804878,186.2195121951);border-top:1px solid rgb(206.2804878049,200.5487804878,186.2195121951)}.msp-plugin .msp-layout-expanded .msp-layout-left{position:absolute;width:50%;left:0;bottom:0;height:361px;border-top:1px solid rgb(206.2804878049,200.5487804878,186.2195121951)}.msp-plugin .msp-layout-expanded .msp-layout-hide-right .msp-layout-right{display:none}.msp-plugin .msp-layout-expanded .msp-layout-hide-right .msp-layout-left{width:100%}.msp-plugin .msp-layout-expanded .msp-layout-hide-left .msp-layout-left{display:none}.msp-plugin .msp-layout-expanded .msp-layout-hide-left .msp-layout-right{width:100%;border-left:none}.msp-plugin .msp-layout-expanded .msp-layout-hide-right.msp-layout-hide-left .msp-layout-main{bottom:0}.msp-plugin .msp-layout-expanded .msp-layout-collapse-left .msp-layout-left{width:32px}.msp-plugin .msp-layout-expanded .msp-layout-collapse-left .msp-layout-right{left:32px;width:auto}.msp-plugin .msp-layout-expanded .msp-layout-hide-top .msp-layout-top{display:none}.msp-plugin .msp-layout-expanded .msp-layout-hide-top .msp-layout-bottom{width:100%;border-left:none}.msp-plugin .msp-layout-expanded .msp-layout-hide-bottom .msp-layout-bottom{display:none}.msp-plugin .msp-layout-expanded .msp-layout-hide-bottom .msp-layout-top{width:100%;border-left:none}.msp-plugin .msp-layout-expanded .msp-layout-hide-top.msp-layout-hide-bottom .msp-layout-main{top:0}}.msp-plugin ::-webkit-scrollbar{width:10px;height:10px}.msp-plugin ::-webkit-scrollbar-track{border-radius:0;background-color:#e9e6e0}.msp-plugin ::-webkit-scrollbar-thumb{border-radius:10px;background-color:#beb7a4;border:solid 1px transparent;background-clip:content-box}.msp-plugin .msp-form-control,.msp-plugin .msp-control-row select,.msp-plugin .msp-control-row button,.msp-plugin .msp-control-row input[type=text],.msp-plugin .msp-btn{display:block;width:100%;background:#f3f2ee;border:none;padding:0 10px;line-height:30px;height:32px;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-shadow:none;box-shadow:none;background-image:none}.msp-plugin .msp-form-control::-moz-placeholder,.msp-plugin .msp-control-row select::-moz-placeholder,.msp-plugin .msp-control-row button::-moz-placeholder,.msp-plugin .msp-control-row input[type=text]::-moz-placeholder,.msp-plugin .msp-btn::-moz-placeholder{color:#9c835f;opacity:1}.msp-plugin .msp-form-control:-ms-input-placeholder,.msp-plugin .msp-control-row select:-ms-input-placeholder,.msp-plugin .msp-control-row button:-ms-input-placeholder,.msp-plugin .msp-control-row input[type=text]:-ms-input-placeholder,.msp-plugin .msp-btn:-ms-input-placeholder{color:#9c835f}.msp-plugin .msp-form-control::-webkit-input-placeholder,.msp-plugin .msp-control-row select::-webkit-input-placeholder,.msp-plugin .msp-control-row button::-webkit-input-placeholder,.msp-plugin .msp-control-row input[type=text]::-webkit-input-placeholder,.msp-plugin .msp-btn::-webkit-input-placeholder{color:#9c835f}.msp-plugin .msp-form-control:hover,.msp-plugin .msp-control-row select:hover,.msp-plugin .msp-control-row button:hover,.msp-plugin .msp-control-row input[type=text]:hover,.msp-plugin .msp-btn:hover{color:#ae5d04;background-color:#e9e6e0;border:none;outline-offset:-1px!important;outline:1px solid rgb(200.993902439,194.6402439024,178.756097561)!important}.msp-plugin .msp-form-control:active,.msp-plugin .msp-control-row select:active,.msp-plugin .msp-control-row button:active,.msp-plugin .msp-control-row input[type=text]:active,.msp-plugin .msp-btn:active,.msp-plugin .msp-form-control:focus,.msp-plugin .msp-control-row select:focus,.msp-plugin .msp-control-row button:focus,.msp-plugin .msp-control-row input[type=text]:focus,.msp-plugin .msp-btn:focus{color:#332b1f;background-color:#f3f2ee;border:none;outline-offset:0;outline:none}.msp-plugin .msp-form-control[disabled],.msp-plugin .msp-control-row select[disabled],.msp-plugin .msp-control-row button[disabled],.msp-plugin .msp-control-row input[disabled][type=text],.msp-plugin [disabled].msp-btn,.msp-plugin .msp-form-control[readonly],.msp-plugin .msp-control-row select[readonly],.msp-plugin .msp-control-row button[readonly],.msp-plugin .msp-control-row input[readonly][type=text],.msp-plugin [readonly].msp-btn,fieldset[disabled] .msp-plugin .msp-form-control,fieldset[disabled] .msp-plugin .msp-control-row select,fieldset[disabled] .msp-plugin .msp-control-row button,fieldset[disabled] .msp-plugin .msp-control-row input[type=text],fieldset[disabled] .msp-plugin .msp-btn{background:#eeece7;opacity:.35}.msp-plugin .msp-btn,.msp-plugin .msp-control-row button{display:inline-block;margin-bottom:0;text-align:center;touch-action:manipulation;cursor:pointer;background-image:none;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding:0 10px;line-height:32px;border:none;-moz-box-sizing:border-box;box-sizing:border-box}.msp-plugin .msp-btn[disabled],.msp-plugin .msp-control-row button[disabled]{background:#eeece7;opacity:.35}.msp-plugin .msp-btn-block,.msp-plugin .msp-control-row button{display:block;width:100%}.msp-plugin .msp-btn,.msp-plugin .msp-control-row button,.msp-plugin .msp-btn:active,.msp-plugin .msp-btn-link:focus,.msp-plugin .msp-btn:hover{outline:none}.msp-plugin .msp-material-icon svg{display:inline-flex;vertical-align:middle;font-size:1.2em;margin-bottom:3px;fill:currentColor;width:1em;height:1em;flex-shrink:0;user-select:none}.msp-plugin .msp-btn-block>.msp-material-icon,.msp-plugin .msp-control-row button>.msp-material-icon{margin-left:0;margin-right:.4em}.msp-plugin .msp-btn-childless>.msp-material-icon{margin-left:0;margin-right:0}.msp-plugin .msp-btn-icon{border:none;height:32px;width:32px;line-height:32px;padding:0;text-align:center}.msp-plugin .msp-btn-icon:hover{color:#ae5d04;background-color:#e9e6e0;border:none;outline-offset:-1px!important;outline:1px solid rgb(200.993902439,194.6402439024,178.756097561)!important}.msp-plugin .msp-btn-icon[disabled],.msp-plugin .msp-btn-icon[disabled]:hover,.msp-plugin .msp-btn-icon[disabled]:active{color:#9c835f}.msp-plugin .msp-btn-icon-small{border:none;height:32px;width:20px;line-height:32px;padding:0;text-align:center}.msp-plugin .msp-btn-icon-small:hover{color:#ae5d04;background-color:#e9e6e0;border:none;outline-offset:-1px!important;outline:1px solid rgb(200.993902439,194.6402439024,178.756097561)!important}.msp-plugin .msp-btn-icon-small[disabled],.msp-plugin .msp-btn-icon-small[disabled]:hover,.msp-plugin .msp-btn-icon-small[disabled]:active{color:#9c835f}.msp-plugin .msp-btn-link{font-weight:400;border-radius:0}.msp-plugin .msp-btn-link,.msp-plugin .msp-btn-link:active,.msp-plugin .msp-btn-link.active,.msp-plugin .msp-btn-link[disabled],fieldset[disabled] .msp-plugin .msp-btn-link{background-color:transparent;-webkit-box-shadow:none;box-shadow:none}.msp-plugin .msp-btn-link,.msp-plugin .msp-btn-link:hover,.msp-plugin .msp-btn-link:focus,.msp-plugin .msp-btn-link:active{border-color:transparent}.msp-plugin .msp-btn-link:hover,.msp-plugin .msp-btn-link:focus{text-decoration:none;background-color:transparent}.msp-plugin .msp-btn-link[disabled]:hover,.msp-plugin .msp-btn-link[disabled]:focus,fieldset[disabled] .msp-plugin .msp-btn-link:hover,fieldset[disabled] .msp-plugin .msp-btn-link:focus{text-decoration:none}.msp-plugin .msp-btn-link .msp-icon{font-size:100%}.msp-plugin .msp-btn-link,.msp-plugin .msp-btn-link:active,.msp-plugin .msp-btn-link:focus{color:#332b1f;text-decoration:none}.msp-plugin .msp-btn-link:hover{color:#ae5d04;text-decoration:none}.msp-plugin .msp-btn-link-toggle-on{color:#332b1f}.msp-plugin .msp-btn-link-toggle-off,.msp-plugin .msp-btn-link-toggle-off:active,.msp-plugin .msp-btn-link-toggle-off:focus{color:#9c835f!important}.msp-plugin .msp-btn-link-toggle-on:hover{color:#ae5d04!important}.msp-plugin .msp-btn-link-toggle-off:hover{color:#dc9c56!important}.msp-plugin .msp-btn-action,.msp-plugin .msp-btn-action:active,.msp-plugin .msp-btn-action:focus{color:#332b1f;background:#f3f2ee}.msp-plugin .msp-btn-action:hover{color:#ae5d04;background:#f9f8f6}.msp-plugin .msp-btn-action[disabled],.msp-plugin .msp-btn-action[disabled]:hover,.msp-plugin .msp-btn-action[disabled]:active,.msp-plugin .msp-btn-action[disabled]:focus{color:#362e21}.msp-plugin .msp-btn-commit-on,.msp-plugin .msp-btn-commit-on:active,.msp-plugin .msp-btn-commit-on:focus{color:#974102;background:#f2f1ed}.msp-plugin .msp-btn-commit-on:hover{color:#ae5d04;background:#f8f7f4}.msp-plugin .msp-btn-commit-on[disabled],.msp-plugin .msp-btn-commit-on[disabled]:hover,.msp-plugin .msp-btn-commit-on[disabled]:active,.msp-plugin .msp-btn-commit-on[disabled]:focus{color:#9c4302}.msp-plugin .msp-btn-commit-off,.msp-plugin .msp-btn-commit-off:active,.msp-plugin .msp-btn-commit-off:focus{color:#332b1f;background:#f6f5f3}.msp-plugin .msp-btn-commit-off:hover{color:#ae5d04;background:#fcfbfa}.msp-plugin .msp-btn-commit-off[disabled],.msp-plugin .msp-btn-commit-off[disabled]:hover,.msp-plugin .msp-btn-commit-off[disabled]:active,.msp-plugin .msp-btn-commit-off[disabled]:focus{color:#362e21}.msp-plugin .msp-btn-remove:hover{color:#f2f4f7}.msp-plugin .msp-btn-commit-on:hover{color:#fc6c03}.msp-plugin .msp-btn-action{height:32px;line-height:32px}.msp-plugin input[type=file]{display:block}.msp-plugin input[type=range]{display:block;width:100%}.msp-plugin select[multiple],.msp-plugin select[size],.msp-plugin textarea.msp-form-control,.msp-plugin textarea.msp-btn{height:auto}.msp-plugin .msp-control-top-offset{margin-top:1px}.msp-plugin .msp-btn-commit{text-align:right;padding:0 10px 0 0;line-height:32px;border:none;overflow:hidden;font-weight:700}.msp-plugin .msp-btn-commit .msp-icon{display:block-inline;line-height:32px;width:32px;text-align:center}.msp-plugin select.msp-form-control,.msp-plugin .msp-control-row select,.msp-plugin select.msp-btn{background:none;background-color:#f3f2ee;background-size:8px 12px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC);background-repeat:no-repeat;background-position:right 10px center;padding-right:24px}.msp-plugin select.msp-form-control:-moz-focusring,.msp-plugin .msp-control-row select:-moz-focusring,.msp-plugin select.msp-btn:-moz-focusring{color:transparent;text-shadow:0 0 0 #332b1f}.msp-plugin .msp-default-bg{background:#eeece7}.msp-plugin .msp-transparent-bg{background:transparent}.msp-plugin .msp-no-hover-outline:hover{color:#ae5d04;background-color:inherit;border:none;outline-offset:0!important;outline:none!important}.msp-plugin .msp-icon-inline{margin-right:8px}.msp-plugin .msp-control-row{position:relative;height:32px;background:#eeece7;margin-top:1px}.msp-plugin .msp-control-row>span.msp-control-row-label,.msp-plugin .msp-control-row>button.msp-control-button-label{line-height:32px;display:block;width:120px;text-align:right;padding:0 10px;color:#63533c;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;cursor:default}.msp-plugin .msp-control-row>button.msp-control-button-label{background:#eeece7;cursor:pointer}.msp-plugin .msp-control-row .msp-control-current{background:#eeece7}.msp-plugin .msp-control-row>div.msp-control-row-ctrl{position:absolute;inset:0 0 0 120px}.msp-plugin .msp-control-row>div.msp-control-row-text{position:absolute;inset:0 0 0 120px;display:flex;align-items:center;padding:0 10px}.msp-plugin .msp-control-row>div{background:#f3f2ee}.msp-plugin .msp-control-row>.msp-flex-row,.msp-plugin .msp-control-row>.msp-state-image-row{background:#eeece7}.msp-plugin .msp-control-label-short>span{width:80px!important}.msp-plugin .msp-control-label-short>div:nth-child(2){left:80px!important}.msp-plugin .msp-control-col-2{float:left;width:50%}.msp-plugin .msp-control-twoline{height:64px!important}.msp-plugin .msp-control-group{position:relative}.msp-plugin .msp-toggle-button .msp-icon{display:inline-block;margin-right:6px}.msp-plugin .msp-toggle-button>div>button:hover{border-color:#e9e6e0!important;border:none;outline-offset:-1px!important;outline:1px solid rgb(200.993902439,194.6402439024,178.756097561)!important}.msp-plugin .msp-slider>div:first-child{position:absolute;inset:0 62px 0 18px;display:flex}.msp-plugin .msp-slider>div:last-child{position:absolute;height:32px;line-height:32px;text-align:center;right:0;width:50px;top:0;bottom:0}.msp-plugin .msp-slider-no-input>div:first-child{right:18px}.msp-plugin .msp-slider-no-input>div:last-child{visibility:hidden;width:0}.msp-plugin .msp-slider input[type=text]{padding-right:6px;padding-left:4px;font-size:80%;text-align:right}.msp-plugin .msp-slider2>div:first-child{position:absolute;height:32px;line-height:32px;text-align:center;left:0;width:25px;top:0;bottom:0;font-size:80%}.msp-plugin .msp-slider2>div:nth-child(2){position:absolute;inset:0 37px 0 35px;display:flex}.msp-plugin .msp-slider2>div:last-child{position:absolute;height:32px;line-height:32px;text-align:center;right:0;width:25px;top:0;bottom:0;font-size:80%}.msp-plugin .msp-slider2 input[type=text]{padding-right:4px;padding-left:4px;font-size:80%;text-align:center}.msp-plugin .msp-toggle-color-picker button{border:10px solid rgb(243.2865853659,241.9085365854,238.4634146341)!important;margin:0;text-align:center;padding-right:10px;padding-left:10px}.msp-plugin .msp-toggle-color-picker button:hover{border-color:#e9e6e0!important;border:none;outline-offset:-1px!important;outline:1px solid rgb(200.993902439,194.6402439024,178.756097561)!important}.msp-plugin .msp-toggle-color-picker .msp-color-picker{position:absolute;z-index:100000;background:#eeece7;border-top:1px solid #eeece7;padding-bottom:5px;width:100%}.msp-plugin .msp-toggle-color-picker-above .msp-color-picker{top:-85px;height:85px}.msp-plugin .msp-toggle-color-picker-below .msp-color-picker{top:32px;height:80px}.msp-plugin .msp-control-offset{padding-left:10px}.msp-plugin .msp-accent-offset{padding-left:1px;margin-left:8px;border-left:2px solid rgb(232.5914634146,139.3719512195,56.9085365854)}.msp-plugin .msp-control-group-wrapper{margin-bottom:0;margin-top:1px}.msp-plugin .msp-control-group-header{background:#eeece7}.msp-plugin .msp-control-group-header>button,.msp-plugin .msp-control-group-header div{padding-left:4px;text-align:left;height:24px!important;line-height:24px!important;font-size:85%!important;background:#eeece7!important;color:#63533c}.msp-plugin .msp-control-group-header .msp-icon{height:24px!important;line-height:24px!important}.msp-plugin .msp-control-group-header>span{padding-left:5px;line-height:21.3333333333px;font-size:70%;background:#eeece7;color:#63533c}.msp-plugin .msp-control-current{background:#eeece7}.msp-plugin .msp-control-group-footer{background:#e3e0d8;height:5px;font-size:1px;margin-top:1px}.msp-plugin .msp-control-group-expander{display:block;position:absolute;line-height:32px;padding:0;left:0;top:0;width:120px;text-align:left;background:transparent}.msp-plugin .msp-control-group-expander .msp-icon{line-height:29px;width:31px;text-align:center;font-size:100%}.msp-plugin .msp-plugin-layout_controls{position:absolute;left:10px;top:10px}.msp-plugin .msp-plugin-layout_controls>button:first-child{margin-right:6px}.msp-plugin .msp-empty-control{display:none}.msp-plugin .msp-control .msp-btn-block,.msp-plugin .msp-control .msp-control-row button,.msp-plugin .msp-control-row .msp-control button{margin-bottom:0;margin-top:0}.msp-plugin .msp-row-text{height:32px;position:relative;background:#eeece7;margin-top:1px}.msp-plugin .msp-row-text>div{line-height:32px;text-align:center;color:#63533c}.msp-plugin .msp-help span{display:none}.msp-plugin .msp-help:hover span{display:inline-block;background:linear-gradient(#eeece7,#eeece7cc)}.msp-plugin .msp-help-text{position:relative;background:#eeece7;margin-top:1px}.msp-plugin .msp-help-text>div{padding:5px 10px;text-align:left;color:#63533c}.msp-plugin .msp-help-text>p{padding:5px 10px;text-align:left;color:#63533c}.msp-plugin .msp-help-description{font-style:italic}.msp-plugin .msp-help-legend{padding-top:10px}.msp-plugin .msp-scale-legend>div{width:100%;height:30px}.msp-plugin .msp-scale-legend>div>span{padding:5px;color:#fff;font-weight:700;background-color:#0003}.msp-plugin .msp-table-legend>div{margin-right:5px;display:inline-flex}.msp-plugin .msp-table-legend>div .msp-table-legend-color{width:30px;height:20px}.msp-plugin .msp-table-legend>div .msp-table-legend-text{margin:0 5px}.msp-plugin .msp-image-preview{position:relative;background:#eeece7;margin-top:1px;padding:10px}.msp-plugin .msp-image-preview canvas{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.msp-plugin .msp-image-preview>span{margin-top:6px;display:block;text-align:center;font-size:80%;line-height:15px}.msp-plugin .msp-copy-image-wrapper{position:relative}.msp-plugin .msp-copy-image-wrapper div{font-weight:700;padding:3px;margin:1px 0;width:100%;background:#f3f2ee;text-align:center}.msp-plugin .msp-copy-image-wrapper img{margin-top:1px}.msp-plugin .msp-control-text-area-wrapper,.msp-plugin .msp-text-area-wrapper{position:relative}.msp-plugin .msp-control-text-area-wrapper textarea,.msp-plugin .msp-text-area-wrapper textarea{border:none;width:100%;height:100%;background:#f3f2ee;padding:5px 10px;resize:none;font-size:12px;line-height:16px}.msp-plugin .msp-control-text-area-wrapper{height:64px!important}.msp-plugin .msp-text-area-wrapper{height:96px!important}.msp-plugin .msp-help-row{position:relative;height:32px;background:#eeece7;margin-top:1px;display:table;width:100%}.msp-plugin .msp-help-row>span{width:120px;text-align:right;padding:3px 10px;color:#63533c;display:table-cell;font-weight:700;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;cursor:default}.msp-plugin .msp-help-row>div{background:#f3f2ee;position:relative;padding:3px 10px;display:table-cell}.msp-plugin .msp-canvas{width:100%;height:100%;background-color:#f3f2ee}.msp-plugin .msp-canvas text{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.msp-plugin .msp-canvas circle{stroke:#000;stroke-width:10;stroke-opacity:.3}.msp-plugin .msp-canvas circle:hover{fill:#ae5d04;stroke:#000;stroke-width:10px}.msp-plugin .msp-canvas .info{fill:#fff;stroke:#000;stroke-width:3}.msp-plugin .msp-canvas .show{visibility:visible}.msp-plugin .msp-canvas .hide{visibility:hidden}.msp-plugin .msp-canvas .delete-button rect{fill:#ed4337;stroke:#000}.msp-plugin .msp-canvas .delete-button text{stroke:#fff;fill:#fff}.msp-plugin .msp-canvas .delete-button:hover{stroke:#000;stroke-width:3;fill:#ff6961}.msp-plugin .msp-canvas .infoCircle:hover{fill:#4c66b2}.msp-plugin .msp-canvas:focus{outline:none}.msp-plugin .msp-log-wrap{position:absolute;inset:0;overflow:hidden}.msp-plugin .msp-log{position:absolute;inset:0 -20px 0 0;overflow-y:scroll;overflow-x:hidden;font-size:90%;background:#e0ddd4}.msp-plugin .msp-log{font-size:90%}.msp-plugin .msp-log ul{padding:0;margin:0}.msp-plugin .msp-log{color:#433829}.msp-plugin .msp-log li{clear:both;margin:0;background:#eeece7;position:relative}.msp-plugin .msp-log li:not(:last-child){border-bottom:1px solid rgb(206.2804878049,200.5487804878,186.2195121951)}.msp-plugin .msp-log .msp-log-entry{margin-left:110px;background:#ebe8e3;padding:3px 25px 3px 10px}.msp-plugin .msp-log .msp-log-timestamp{padding:3px 10px;float:left;text-align:right;width:110px;color:#726046;font-size:100%}.msp-plugin .msp-log .msp-log-timestamp small{font-size:100%}.msp-plugin .msp-log .label{margin-top:-3px;font-size:7pt}.msp-plugin .msp-log-entry-badge{position:absolute;left:0;top:0;bottom:0;width:6px}.msp-plugin .msp-log-entry-message{background:#0cca5d}.msp-plugin .msp-log-entry-info{background:#5e3673}.msp-plugin .msp-log-entry-error{background:#fd354b}.msp-plugin .msp-log-entry-warning{background:#fcc937}.msp-plugin .msp-slider-base{position:relative;height:14px;padding:5px 0;width:100%;border-radius:6px;align-self:center;box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}.msp-plugin .msp-slider-base *{box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}.msp-plugin .msp-slider-base-rail{position:absolute;width:100%;background-color:#e0ddd4;height:4px;border-radius:2px}.msp-plugin .msp-slider-base-track{position:absolute;left:0;height:4px;border-radius:6px;background-color:tint(#332b1f,60%)}.msp-plugin .msp-slider-base-handle{position:absolute;margin-left:-11px;margin-top:-9px;width:22px;height:22px;cursor:pointer;border-radius:50%;background-color:#332b1f;border:4px solid rgb(224.2548780488,220.637804878,211.5951219512)}.msp-plugin .msp-slider-base-handle:hover{background-color:#ae5d04}.msp-plugin .msp-slider-base-mark{position:absolute;top:18px;left:0;width:100%;font-size:12px}.msp-plugin .msp-slider-base-mark-text{position:absolute;display:inline-block;vertical-align:middle;text-align:center;cursor:pointer;color:#999}.msp-plugin .msp-slider-base-mark-text-active{color:#666}.msp-plugin .msp-slider-base-step{position:absolute;width:100%;height:4px;background:transparent}.msp-plugin .msp-slider-base-dot{position:absolute;bottom:-2px;margin-left:-4px;width:8px;height:8px;border:2px solid #e9e9e9;background-color:#fff;cursor:pointer;border-radius:50%;vertical-align:middle}.msp-plugin .msp-slider-base-dot:first-child{margin-left:-4px}.msp-plugin .msp-slider-base-dot:last-child{margin-left:-4px}.msp-plugin .msp-slider-base-dot-active{border-color:tint(#332b1f,50%)}.msp-plugin .msp-slider-base-disabled{background:#eeece7;opacity:.35}.msp-plugin .msp-slider-base-disabled .msp-slider-base-handle,.msp-plugin .msp-slider-base-disabled .msp-slider-base-dot{cursor:not-allowed}.msp-plugin .msp-slider-base-disabled .msp-slider-base-mark-text,.msp-plugin .msp-slider-base-disabled .msp-slider-base-dot{cursor:not-allowed!important}.msp-plugin .msp-markdown table{border:1px solid rgb(206.2804878049,200.5487804878,186.2195121951);border-collapse:collapse}.msp-plugin .msp-markdown th{text-align:left}.msp-plugin .msp-markdown th,.msp-plugin .msp-markdown td{border:1px solid rgb(206.2804878049,200.5487804878,186.2195121951);padding:4px 8px}.msp-plugin .msp-markdown img{max-width:100%;height:auto}.msp-plugin .msp-description{padding:10px;font-size:85%;background:#eeece7;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;font-weight:light;cursor:default}.msp-plugin .msp-description:not(:first-child){border-top:1px solid rgb(224.2548780488,220.637804878,211.5951219512)}.msp-plugin .msp-color-picker input{color:#000!important}.msp-plugin .msp-no-webgl{position:absolute;width:100%;height:100%;left:0;top:0;display:table;text-align:center;background:#eeece7}.msp-plugin .msp-no-webgl>div b{font-size:120%}.msp-plugin .msp-no-webgl>div{display:table-cell;vertical-align:middle;text-align:center;width:100%;height:100%}.msp-plugin .msp-loader-msp-btn-file{position:relative;overflow:hidden}.msp-plugin .msp-loader-msp-btn-file input[type=file]{position:absolute;top:0;right:0;min-width:100%;min-height:100%;font-size:100px;text-align:right;filter:alpha(opacity=0);opacity:0;outline:none;background:#fff;cursor:inherit;display:block}.msp-plugin .msp-controls-section{margin-bottom:10px}.msp-plugin .msp-combined-color-button{border:4px solid rgb(243.2865853659,241.9085365854,238.4634146341)!important;margin:0;text-align:center;padding-right:10px;padding-left:10px}.msp-plugin .msp-combined-color-button:hover{border-color:#e9e6e0!important;border:none;outline-offset:-1px!important;outline:1px solid rgb(200.993902439,194.6402439024,178.756097561)!important}.msp-plugin .msp-combined-color-swatch{width:100%;display:grid;grid-gap:1px;grid-template-columns:repeat(6,auto)}.msp-plugin .msp-combined-color-swatch .msp-btn:hover,.msp-plugin .msp-combined-color-swatch .msp-control-row button:hover,.msp-plugin .msp-control-row .msp-combined-color-swatch button:hover{outline-offset:-1px!important;outline:1px solid rgb(200.993902439,194.6402439024,178.756097561)!important}.msp-plugin .msp-action-select{position:relative}.msp-plugin .msp-action-select select{padding-left:42px}.msp-plugin .msp-action-select option:first-child{color:#63533c}.msp-plugin .msp-action-select>.msp-icon{display:block;top:0;left:10px;position:absolute;line-height:32px}.msp-plugin .msp-simple-help-section{height:28px;line-height:28px;margin-top:5px;margin-bottom:5px;padding:0 10px;font-weight:500;background:#eeece7;color:#332b1f}.msp-plugin .msp-left-panel-controls-buttons{position:absolute;width:32px;top:0;bottom:0;padding-top:10px;background:#eeece7}.msp-plugin .msp-left-panel-controls-buttons-bottom{position:absolute;bottom:0}.msp-plugin .msp-left-panel-controls-button-data-dirty{position:absolute;width:6px;height:6px;background:#e98b39;border-radius:3px;right:6px;bottom:6px}.msp-plugin .msp-left-panel-controls .msp-scrollable-container{left:33px}.msp-plugin .msp-mapped-parameter-group{position:relative}.msp-plugin .msp-mapped-parameter-group>.msp-control-row:first-child>div:nth-child(2){right:33px}.msp-plugin .msp-mapped-parameter-group>button:first-child{right:33px}.msp-plugin .msp-mapped-parameter-group>.msp-btn-icon{position:absolute;right:0;width:32px;top:0;padding:0}.msp-plugin .msp-shape-filled{fill:#332b1f;stroke:#332b1f}.msp-plugin .msp-shape-empty{fill:none;stroke:#332b1f}.msp-plugin .msp-no-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.msp-plugin .msp-25-lower-contrast-text{color:#826e4f}.msp-plugin .msp-expandable-group-color-stripe{position:absolute;left:0;top:30px;width:120px;height:2px}.msp-plugin .msp-section-header{height:32px;line-height:32px;margin-top:10px;margin-bottom:10px;text-align:right;padding:0 10px;font-weight:700;background:#eeece7;overflow:hidden;cursor:default}.msp-plugin .msp-section-header>.msp-icon{display:block;float:left}.msp-plugin .msp-section-header>small{font-weight:400}.msp-plugin .msp-current-header{height:32px;line-height:32px;margin-bottom:10px;text-align:center;font-weight:700;background:#eeece7}.msp-plugin .msp-flex-row,.msp-plugin .msp-state-image-row{margin-top:1px;background:#eeece7;display:flex;flex-direction:row;width:inherit;height:32px}.msp-plugin .msp-flex-row>.msp-flex-item,.msp-plugin .msp-state-image-row>.msp-flex-item{margin:0 1px 0 0;flex:1 1 auto;overflow:hidden}.msp-plugin .msp-flex-row>.msp-flex-item:last-child,.msp-plugin .msp-state-image-row>.msp-flex-item:last-child{margin-right:0}.msp-plugin .msp-flex-row>select,.msp-plugin .msp-state-image-row>select,.msp-plugin .msp-flex-row>button,.msp-plugin .msp-state-image-row>button{margin:0 1px 0 0;flex:1 1 auto;height:32px;overflow:hidden}.msp-plugin .msp-flex-row .msp-btn-icon,.msp-plugin .msp-state-image-row .msp-btn-icon,.msp-plugin .msp-flex-row .msp-btn-icon-small,.msp-plugin .msp-state-image-row .msp-btn-icon-small{flex:0 0 32px;max-width:32px}.msp-plugin .msp-flex-row>select,.msp-plugin .msp-state-image-row>select{background:none}.msp-plugin .msp-flex-row>select>option[value=_],.msp-plugin .msp-state-image-row>select>option[value=_]{display:none}.msp-plugin .msp-flex-row>select:last-child,.msp-plugin .msp-state-image-row>select:last-child,.msp-plugin .msp-flex-row>button:last-child,.msp-plugin .msp-state-image-row>button:last-child{margin-right:0}.msp-plugin .msp-flex-row>button.msp-control-button-label,.msp-plugin .msp-state-image-row>button.msp-control-button-label{background:#eeece7}.msp-plugin .msp-state-list{list-style:none}.msp-plugin .msp-state-list>li{position:relative;overflow:hidden}.msp-plugin .msp-state-list>li>button:first-child{text-align:left;border-left:10px solid rgb(212.6243902439,207.6390243902,195.1756097561)!important}.msp-plugin .msp-state-list>li>div{position:absolute;right:0;top:0}.msp-plugin .msp-state-image-row{height:96px;margin-top:0}.msp-plugin .msp-state-image-row>button{height:96px;padding:0}.msp-plugin .msp-state-image-row>button>img{min-height:96px;width:inherit;transform:translateY(-50%);top:50%;position:relative}.msp-plugin .msp-tree-row{position:relative;margin-top:0;margin-bottom:1px;background:transparent}.msp-plugin .msp-tree-row-current .msp-btn-tree-label>span{font-weight:700}.msp-plugin .msp-tree-row-current .msp-btn-tree-label{border-radius:0!important}.msp-plugin .msp-tree-row .msp-btn-tree-label{text-align:left;border-radius:0 0 0 8px;border-left-width:4px;border-left-style:solid}.msp-plugin .msp-tree-row .msp-btn-tree-label>small{color:#726046}.msp-plugin .msp-tree-updates-wrapper .msp-control-group-header:last-child{margin-bottom:1px}.msp-plugin .msp-viewport-top-left-controls{position:absolute;left:10px;top:10px}.msp-plugin .msp-viewport-top-left-controls .msp-traj-controls{line-height:32px;float:left;margin-right:10px;background-color:#f3f2ee}.msp-plugin .msp-viewport-top-left-controls .msp-traj-controls>span{color:#332b1f;margin-left:10px;margin-right:10px;font-size:85%;display:inline-block}.msp-plugin .msp-viewport-top-left-controls .msp-state-snapshot-viewport-controls{line-height:32px;float:left;margin-right:10px}.msp-plugin .msp-viewport-top-left-controls .msp-state-snapshot-viewport-controls>button{background-color:#f3f2ee}.msp-plugin .msp-viewport-top-left-controls .msp-state-snapshot-viewport-controls>select{display:inline-block;width:200px;margin-right:10px}.msp-plugin .msp-viewport-top-left-controls .msp-state-snapshot-animation-slider{position:relative;display:inline-block;width:120px;line-height:32px}.msp-plugin .msp-viewport-top-left-controls .msp-state-snapshot-animation-button{margin-left:10px}.msp-plugin .msp-viewport-top-left-controls .msp-animation-viewport-controls{line-height:32px;float:left;margin-right:10px;position:relative}.msp-plugin .msp-viewport-top-left-controls .msp-animation-viewport-controls>div:first-child{position:relative;display:inline-block}.msp-plugin .msp-viewport-top-left-controls .msp-animation-viewport-controls>div:first-child>button{position:relative}.msp-plugin .msp-viewport-top-left-controls .msp-animation-viewport-controls .msp-animation-viewport-controls-select{width:290px;position:absolute;left:0;margin-top:10px;background:#e0ddd4;z-index:10001}.msp-plugin .msp-viewport-top-left-controls .msp-animation-viewport-controls .msp-animation-viewport-controls-select .msp-control-row:first-child{margin-top:0}.msp-plugin .msp-selection-viewport-controls{position:relative;margin:10px auto 0;width:430px}.msp-plugin .msp-selection-viewport-controls-actions{position:absolute;width:100%;top:32px;background:#e0ddd4}.msp-plugin .msp-selection-viewport-controls>.msp-flex-row .msp-btn,.msp-plugin .msp-selection-viewport-controls>.msp-state-image-row .msp-btn,.msp-plugin .msp-selection-viewport-controls>.msp-flex-row .msp-control-row button,.msp-plugin .msp-control-row .msp-selection-viewport-controls>.msp-flex-row button,.msp-plugin .msp-selection-viewport-controls>.msp-state-image-row .msp-control-row button,.msp-plugin .msp-control-row .msp-selection-viewport-controls>.msp-state-image-row button{padding:0 5px}.msp-plugin .msp-selection-viewport-controls select.msp-form-control,.msp-plugin .msp-selection-viewport-controls select.msp-btn,.msp-plugin .msp-selection-viewport-controls .msp-control-row select,.msp-plugin .msp-control-row .msp-selection-viewport-controls select{padding:0 5px;text-align:center;background:#f3f2ee;flex:0 0 80px;text-overflow:ellipsis}.msp-plugin .msp-param-object-list-item{margin-top:1px;position:relative}.msp-plugin .msp-param-object-list-item>button{text-align:left}.msp-plugin .msp-param-object-list-item>button>span{font-weight:700}.msp-plugin .msp-param-object-list-item>div{position:absolute;right:0;top:0}.msp-plugin .msp-state-actions .msp-transform-wrapper:last-child{margin-bottom:10px}.msp-plugin .msp-button-row{display:flex;flex-direction:row;height:32px;width:inherit}.msp-plugin .msp-button-row>button{margin:0 1px 0 0;flex:1 1 auto;height:32px;text-align-last:center;background:none;padding:0 10px;overflow:hidden}.msp-plugin .msp-action-menu-options-no-header,.msp-plugin .msp-action-menu-options .msp-control-group-children{max-height:300px;overflow:hidden;overflow-y:auto}.msp-plugin .msp-action-menu-options .msp-control-row,.msp-plugin .msp-action-menu-options button,.msp-plugin .msp-action-menu-options .msp-icon,.msp-plugin .msp-action-menu-options .msp-flex-row,.msp-plugin .msp-action-menu-options .msp-state-image-row{height:24px;line-height:24px}.msp-plugin .msp-action-menu-options button{text-align:left}.msp-plugin .msp-action-menu-options .msp-action-menu-button{margin-top:1px;display:flex}.msp-plugin .msp-action-menu-options .msp-action-menu-button .msp-icon{margin-right:6px}.msp-plugin .msp-representation-entry{position:relative}.msp-plugin .msp-representation-entry>.msp-control-group-header>.msp-btn,.msp-plugin .msp-control-row .msp-representation-entry>.msp-control-group-header>button{font-weight:700}.msp-plugin .msp-representation-entry>.msp-control-group-header>.msp-icon,.msp-plugin .msp-representation-entry>.msp-control-group-header>.msp-btn-link{line-height:24px;height:24px}.msp-plugin .msp-control-group-presets-wrapper{position:absolute;right:0;top:0}.msp-plugin .msp-control-group-presets-wrapper .msp-control-group-header{background:transparent}.msp-plugin .msp-control-group-presets-wrapper button{background:transparent!important}.msp-plugin .msp-parameter-matrix input{flex:1 1 auto;min-width:0}.msp-plugin .msp-btn-apply-simple{text-align:left}.msp-plugin .msp-btn-apply-simple .msp-icon{margin-right:10px}.msp-plugin .msp-type-class-Root{border-left-color:#eeece7}.msp-plugin .msp-type-class-Group{border-left-color:#e98b39}.msp-plugin .msp-type-class-Data{border-left-color:#bfc8c9}.msp-plugin .msp-type-class-Object{border-left-color:#54d98c}.msp-plugin .msp-type-class-Representation3D{border-left-color:#4aa3df}.msp-plugin .msp-type-class-Behavior{border-left-color:#b07cc6}.msp-plugin .msp-accent-color-cyan{color:#bfc8c9}.msp-plugin .msp-accent-bg-cyan{background:#bfc8c9}.msp-plugin .msp-transform-header-brand-cyan{border-bottom:1px solid rgb(190.5846153846,200.3076923077,200.9153846154)}.msp-plugin .msp-transform-header-brand-cyan:active,.msp-plugin .msp-transform-header-brand-cyan:focus{border-bottom:1px solid rgb(190.5846153846,200.3076923077,200.9153846154)}.msp-plugin .msp-accent-color-red{color:#ef8b80}.msp-plugin .msp-accent-bg-red{background:#ef8b80}.msp-plugin .msp-transform-header-brand-red{border-bottom:1px solid rgb(239.3835616438,138.5273972603,128.1164383562)}.msp-plugin .msp-transform-header-brand-red:active,.msp-plugin .msp-transform-header-brand-red:focus{border-bottom:1px solid rgb(239.3835616438,138.5273972603,128.1164383562)}.msp-plugin .msp-accent-color-gray{color:#46637f}.msp-plugin .msp-accent-bg-gray{background:#46637f}.msp-plugin .msp-transform-header-brand-gray{border-bottom:1px solid rgb(70.1643835616,98.5,126.8356164384)}.msp-plugin .msp-transform-header-brand-gray:active,.msp-plugin .msp-transform-header-brand-gray:focus{border-bottom:1px solid rgb(70.1643835616,98.5,126.8356164384)}.msp-plugin .msp-accent-color-green{color:#54d98c}.msp-plugin .msp-accent-bg-green{background:#54d98c}.msp-plugin .msp-transform-header-brand-green{border-bottom:1px solid rgb(84.456,216.544,140.468)}.msp-plugin .msp-transform-header-brand-green:active,.msp-plugin .msp-transform-header-brand-green:focus{border-bottom:1px solid rgb(84.456,216.544,140.468)}.msp-plugin .msp-accent-color-purple{color:#b07cc6}.msp-plugin .msp-accent-bg-purple{background:#b07cc6}.msp-plugin .msp-transform-header-brand-purple{border-bottom:1px solid rgb(176.3389121339,124.4225941423,197.5774058577)}.msp-plugin .msp-transform-header-brand-purple:active,.msp-plugin .msp-transform-header-brand-purple:focus{border-bottom:1px solid rgb(176.3389121339,124.4225941423,197.5774058577)}.msp-plugin .msp-accent-color-blue{color:#4aa3df}.msp-plugin .msp-accent-bg-blue{background:#4aa3df}.msp-plugin .msp-transform-header-brand-blue{border-bottom:1px solid rgb(73.6589958159,162.989539749,222.8410041841)}.msp-plugin .msp-transform-header-brand-blue:active,.msp-plugin .msp-transform-header-brand-blue:focus{border-bottom:1px solid rgb(73.6589958159,162.989539749,222.8410041841)}.msp-plugin .msp-accent-color-orange{color:#e98b39}.msp-plugin .msp-accent-bg-orange{background:#e98b39}.msp-plugin .msp-transform-header-brand-orange{border-bottom:1px solid rgb(232.5914634146,139.3719512195,56.9085365854)}.msp-plugin .msp-transform-header-brand-orange:active,.msp-plugin .msp-transform-header-brand-orange:focus{border-bottom:1px solid rgb(232.5914634146,139.3719512195,56.9085365854)}.msp-plugin .msp-volume-channel-inline-controls>:first-child{position:absolute;left:0;top:0;height:32px;right:32px}.msp-plugin .msp-volume-channel-inline-controls .msp-slider>div:first-child{right:42px}.msp-plugin .msp-volume-channel-inline-controls .msp-slider>div:last-child{width:30px}.msp-plugin .msp-volume-channel-inline-controls>button{position:absolute;right:0;width:32px;top:0;padding:0}.msp-plugin .msp-volume-channel-inline-controls>button .msp-material-icon{margin-right:0}.msp-plugin .msp-list-unstyled{padding-left:0;list-style:none}.msp-plugin .msp-drag-drop-overlay{border:12px dashed #332b1f;background:#0000005c;display:flex;align-items:center;justify-content:center;position:absolute;inset:0;font-size:48px;font-weight:700}.msp-plugin .msp-task-state{line-height:32px}.msp-plugin .msp-task-state>span{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;cursor:default}.msp-plugin .msp-overlay-tasks{position:absolute;display:flex;inset:0;height:100%;width:100%;z-index:1000;justify-content:center;align-items:center;background:#00000040}.msp-plugin .msp-overlay-tasks .msp-task-state>div{height:32px;margin-top:1px;position:relative;width:100%;background:#eeece7}.msp-plugin .msp-overlay-tasks .msp-task-state>div>div{height:32px;line-height:32px;display:inline-block;padding:0 10px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;cursor:default;white-space:nowrap;background:#eeece7;position:absolute}.msp-plugin .msp-overlay-tasks .msp-task-state>div>button{display:inline-block;margin-top:-3px}.msp-plugin .msp-background-tasks{position:absolute;left:0;bottom:0;z-index:1000}.msp-plugin .msp-background-tasks .msp-task-state>div{height:32px;margin-top:1px;position:relative;width:100%;background:#eeece7}.msp-plugin .msp-background-tasks .msp-task-state>div>div{height:32px;line-height:32px;display:inline-block;padding:0 10px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;cursor:default;white-space:nowrap;background:#eeece7;position:absolute}.msp-plugin .msp-background-tasks .msp-task-state>div>button{display:inline-block;margin-top:-3px}.msp-plugin .msp-viewport{position:absolute;inset:0;background:#eeece7}.msp-plugin .msp-viewport .msp-btn-link{background:#0003}.msp-plugin .msp-viewport-expanded{position:fixed;z-index:1000}.msp-plugin .msp-viewport-host3d{position:absolute;inset:0;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-touch-callout:none;touch-action:manipulation}.msp-plugin .msp-viewport-host3d>canvas{background-color:#eeece7;background-image:linear-gradient(45deg,lightgrey 25%,transparent 25%,transparent 75%,lightgrey 75%,lightgrey),linear-gradient(45deg,lightgrey 25%,transparent 25%,transparent 75%,lightgrey 75%,lightgrey);background-size:60px 60px;background-position:0 0,30px 30px}.msp-plugin .msp-viewport-controls{position:absolute;right:10px;top:10px;width:32px}.msp-plugin .msp-viewport-controls-buttons{text-align:right;position:relative}.msp-plugin .msp-viewport-controls-buttons>div{position:relative;margin-bottom:4px}.msp-plugin .msp-viewport-controls-buttons button{padding:0;text-align:center;width:32px;position:relative}.msp-plugin .msp-viewport-controls-buttons .msp-btn-link-toggle-off{color:#9c835f}.msp-plugin .msp-viewport-controls-buttons .msp-btn-link:hover{color:#ae5d04}.msp-plugin .msp-semi-transparent-background{background:#eeece7;opacity:.5;position:absolute;top:0;left:0;width:100%;height:100%}.msp-plugin .msp-hover-box-wrapper{position:relative}.msp-plugin .msp-hover-box-wrapper .msp-hover-box-body{visibility:hidden;position:absolute;right:36px;top:0;width:100px;background-color:#eeece7}.msp-plugin .msp-hover-box-wrapper .msp-hover-box-spacer{visibility:hidden;position:absolute;right:32px;top:0;width:4px;height:32px}.msp-plugin .msp-hover-box-wrapper:hover .msp-hover-box-body,.msp-plugin .msp-hover-box-wrapper:hover .msp-hover-box-spacer{visibility:visible}.msp-plugin .msp-viewport-controls-panel{width:290px;top:0;right:36px;position:absolute;background:#e0ddd4}.msp-plugin .msp-viewport-controls-panel .msp-control-group-wrapper:first-child{padding-top:0}.msp-plugin .msp-viewport-controls-panel .msp-viewport-controls-panel-controls{overflow-y:auto;max-height:400px}.msp-plugin .msp-highlight-toast-wrapper{position:absolute;right:10px;bottom:10px;max-width:95%;z-index:10000}.msp-plugin .msp-highlight-info{color:#ae5d04;padding:3px 10px;background:#eeece7;opacity:90%;max-width:400px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;cursor:default}.msp-plugin .msp-highlight-markdown-row{padding-left:10px}.msp-plugin .msp-highlight-simple-row{text-align:right}.msp-plugin .msp-highlight-info-hr{margin-inline:0px;margin-block:3px;border:none;height:1px;background-color:#ae5d04}.msp-plugin .msp-highlight-info-additional{font-size:85%;display:inline-block;color:#fa911e}.msp-plugin .msp-snapshot-description-wrapper{background:#eeece780;position:absolute;left:0;top:42px;padding:6.6px 10px;max-height:224px;overflow:hidden;overflow-y:auto;width:max-content;max-width:400px}.msp-plugin .msp-snapshot-description-wrapper a{text-decoration:underline;cursor:pointer;color:#332b1f}.msp-plugin .msp-snapshot-description-wrapper ul,.msp-plugin .msp-snapshot-description-wrapper ol{padding-left:14px}.msp-plugin .msp-sequence{position:absolute;inset:0;background:#eeece7}.msp-plugin .msp-sequence-select{position:relative;height:24px;width:100%;margin-bottom:1px;background:#e0ddd4;text-align:left}.msp-plugin .msp-sequence-select>span{display:inline-block;line-height:24px;padding:0 10px;font-size:85%;font-weight:700;cursor:default}.msp-plugin .msp-sequence-select>select{display:inline-block;max-width:120px;width:auto;text-overflow:ellipsis;font-size:85%;height:24px;line-height:24px;background-size:6px 8px;background-color:#e0ddd4}.msp-plugin .msp-sequence-wrapper{word-break:break-word;padding:10px 10px 3px;user-select:none}.msp-plugin .msp-sequence-wrapper-non-empty{font-size:85%;line-height:180%;font-family:Courier New,monospace;background:#f3f2ee;width:100%;overflow-y:auto;overflow-x:hidden;position:absolute;inset:25px 0 0}.msp-plugin .msp-sequence-chain-label{margin-left:10px;margin-top:10px;user-select:none;color:#ae5d04;font-size:90%;line-height:90%;padding-left:.2em}.msp-plugin .msp-sequence-wrapper span{cursor:pointer}.msp-plugin .msp-sequence-wrapper .msp-sequence-residue-long{margin:0 .2em}.msp-plugin .msp-sequence-wrapper .msp-sequence-residue-long-begin{margin:0 .2em 0 0}.msp-plugin .msp-sequence-wrapper .msp-sequence-residue-focused{font-weight:700;text-decoration:underline}.msp-plugin .msp-sequence-wrapper .msp-sequence-label{color:#ae5d04;font-size:90%;line-height:90%;padding-bottom:1em;padding-left:.2em}.msp-plugin .msp-sequence-wrapper .msp-sequence-number{color:#ae5d04;word-break:keep-all;cursor:default;position:relative;top:-1.1em;left:3.1em;padding:0;margin-left:-3em;font-size:80%;pointer-events:none}.msp-plugin .msp-sequence-wrapper .msp-sequence-number-long{left:3.3em}.msp-plugin .msp-sequence-wrapper .msp-sequence-number-long-negative{left:2.7em}.msp-plugin .msp-sequence-wrapper .msp-sequence-number-negative{left:2.5em}.msp-plugin .msp-sequence-wrapper .msp-sequence-present{color:#332b1f}.msp-plugin .msp-sequence-wrapper .msp-sequence-missing{color:#b4a184;cursor:default}.msp-plugin .msp-transformer .msp-entity-badge{position:absolute;top:0;right:0;height:32px;line-height:32px;width:32px}.msp-plugin .msp-layout-right,.msp-plugin .msp-layout-left{background:#e0ddd4}.msp-plugin .msp-transformer-wrapper{position:relative}.msp-plugin .msp-transformer-wrapper .msp-entity-badge{left:0;top:0}.msp-plugin .msp-transformer-wrapper:first-child .msp-panel-description-content{top:33px}.msp-plugin .msp-transformer-wrapper:not(:first-child) .msp-panel-description-content{bottom:33px}.msp-plugin .msp-transform-wrapper{margin-bottom:10px}.msp-plugin .msp-transform-wrapper-collapsed,.msp-plugin .msp-transform-update-wrapper,.msp-plugin .msp-transform-update-wrapper-collapsed{margin-bottom:1px}.msp-plugin .msp-transform-update-wrapper>.msp-transform-header>button,.msp-plugin .msp-transform-update-wrapper-collapsed>.msp-transform-header>button{text-align:left;padding-left:32px;line-height:24px;background:#e9e6e0}.msp-plugin .msp-transform-wrapper>.msp-transform-header>button{text-align:left;background:#eeece7;font-weight:700;padding-right:5px}.msp-plugin .msp-transform-header{position:relative}.msp-plugin .msp-transform-header>button>small{font-weight:400;float:right}.msp-plugin .msp-transform-header>button>span:first-child{margin-right:10px}.msp-plugin .msp-transform-header>button:hover{color:#63533c}.msp-plugin .msp-transform-header-brand{margin-bottom:-1px}.msp-plugin .msp-transform-header-brand svg{fill:#332b1f;stroke:#332b1f}.msp-plugin .msp-transform-default-params{background:#eeece7;position:absolute;left:0;top:0;width:32px;padding:0}.msp-plugin .msp-transform-default-params:hover{background:#fff}.msp-plugin .msp-transform-apply-wrap{position:relative;margin-top:1px;width:100%;height:32px}.msp-plugin .msp-transform-refresh{width:87px;margin-left:33px;background:#eeece7;text-align:right}.msp-plugin .msp-transform-apply{display:block;position:absolute;left:120px;right:0;top:0}.msp-plugin .msp-transform-apply-wider{margin-left:33px}.msp-plugin .msp-data-beh{margin:10px 0!important}.msp-plugin .msp-toast-container{position:relative;z-index:1001}.msp-plugin .msp-toast-container .msp-toast-entry{color:#332b1f;background:#e0ddd4;position:relative;float:right;min-height:32px;margin-top:10px;border:1px solid rgb(206.2804878049,200.5487804878,186.2195121951);display:table}.msp-plugin .msp-toast-container .msp-toast-entry .msp-toast-title{height:100%;line-height:32px;padding:0 10px;background:#eeece7;font-weight:700;display:table-cell;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;font-weight:light;cursor:pointer}.msp-plugin .msp-toast-container .msp-toast-entry .msp-toast-message{padding:3px 42px 3px 10px;display:table-cell}.msp-plugin .msp-toast-container .msp-toast-entry .msp-toast-message a{text-decoration:none;color:#974102;font-weight:700}.msp-plugin .msp-toast-container .msp-toast-entry .msp-toast-message a:hover{text-decoration:underline;color:#fc6c03}.msp-plugin .msp-toast-container .msp-toast-entry .msp-toast-message a:active,.msp-plugin .msp-toast-container .msp-toast-entry .msp-toast-message a:focus{color:#974102;outline-offset:0;outline:none}.msp-plugin .msp-toast-container .msp-toast-entry .msp-toast-hide{position:absolute;width:42px;right:0;top:0;bottom:0}.msp-plugin .msp-toast-container .msp-toast-entry .msp-toast-hide .msp-btn-icon{background:transparent;position:absolute;inset:1px 0 0;width:100%;text-align:right;padding-right:5px}.msp-plugin .msp-logo{display:block;position:absolute;bottom:10px;right:10px;height:32px;width:100px;background-repeat:no-repeat;background-position:bottom right;background-size:auto;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFcAAAAgCAYAAABn7+QVAAAABGdBTUEAALGOfPtRkwAAACBjSFJNAACHDwAAjA8AAP1SAACBQAAAfXkAAOmLAAA85QAAGcxzPIV3AAAKL2lDQ1BJQ0MgUHJvZmlsZQAASMedlndUVNcWh8+9d3qhzTACUobeu8AA0nuTXkVhmBlgKAMOMzSxIaICEUVEmiJIUMSA0VAkVkSxEBRUsAckCCgxGEVULG9G1ouurLz38vL746xv7bP3ufvsvc9aFwCSpy+XlwZLAZDKE/CDPJzpEZFRdOwAgAEeYIApAExWRrpfsHsIEMnLzYWeIXICXwQB8HpYvAJw09AzgE4H/5+kWel8geiYABGbszkZLBEXiDglS5Auts+KmBqXLGYYJWa+KEERy4k5YZENPvsssqOY2ak8tojFOaezU9li7hXxtkwhR8SIr4gLM7mcLBHfErFGijCVK+I34thUDjMDABRJbBdwWIkiNhExiR8S5CLi5QDgSAlfcdxXLOBkC8SXcklLz+FzExIFdB2WLt3U2ppB9+RkpXAEAsMAJiuZyWfTXdJS05m8HAAW7/xZMuLa0kVFtjS1trQ0NDMy/apQ/3Xzb0rc20V6Gfi5ZxCt/4vtr/zSGgBgzIlqs/OLLa4KgM4tAMjd+2LTOACApKhvHde/ug9NPC+JAkG6jbFxVlaWEZfDMhIX9A/9T4e/oa++ZyQ+7o/y0F058UxhioAurhsrLSVNyKdnpDNZHLrhn4f4Hwf+dR4GQZx4Dp/DE0WEiaaMy0sQtZvH5gq4aTw6l/efmvgPw/6kxbkWidL4EVBjjIDUdSpAfu0HKAoRINH7xV3/o2+++DAgfnnhKpOLc//vN/1nwaXiJYOb8DnOJSiEzhLyMxf3xM8SoAEBSAIqkAfKQB3oAENgBqyALXAEbsAb+IMQEAlWAxZIBKmAD7JAHtgECkEx2An2gGpQBxpBM2gFx0EnOAXOg0vgGrgBboP7YBRMgGdgFrwGCxAEYSEyRIHkIRVIE9KHzCAGZA+5Qb5QEBQJxUIJEA8SQnnQZqgYKoOqoXqoGfoeOgmdh65Ag9BdaAyahn6H3sEITIKpsBKsBRvDDNgJ9oFD4FVwArwGzoUL4B1wJdwAH4U74PPwNfg2PAo/g+cQgBARGqKKGCIMxAXxR6KQeISPrEeKkAqkAWlFupE+5CYyiswgb1EYFAVFRxmibFGeqFAUC7UGtR5VgqpGHUZ1oHpRN1FjqFnURzQZrYjWR9ugvdAR6AR0FroQXYFuQrejL6JvoyfQrzEYDA2jjbHCeGIiMUmYtZgSzD5MG+YcZhAzjpnDYrHyWH2sHdYfy8QKsIXYKuxR7FnsEHYC+wZHxKngzHDuuCgcD5ePq8AdwZ3BDeEmcQt4Kbwm3gbvj2fjc/Cl+EZ8N/46fgK/QJAmaBPsCCGEJMImQiWhlXCR8IDwkkgkqhGtiYFELnEjsZJ4jHiZOEZ8S5Ih6ZFcSNEkIWkH6RDpHOku6SWZTNYiO5KjyALyDnIz+QL5EfmNBEXCSMJLgi2xQaJGokNiSOK5JF5SU9JJcrVkrmSF5AnJ65IzUngpLSkXKabUeqkaqZNSI1Jz0hRpU2l/6VTpEukj0lekp2SwMloybjJsmQKZgzIXZMYpCEWd4kJhUTZTGikXKRNUDFWb6kVNohZTv6MOUGdlZWSXyYbJZsvWyJ6WHaUhNC2aFy2FVko7ThumvVuitMRpCWfJ9iWtS4aWzMstlXOU48gVybXJ3ZZ7J0+Xd5NPlt8l3yn/UAGloKcQqJClsF/hosLMUupS26WspUVLjy+9pwgr6ikGKa5VPKjYrzinpKzkoZSuVKV0QWlGmabsqJykXK58RnlahaJir8JVKVc5q/KULkt3oqfQK+m99FlVRVVPVaFqveqA6oKatlqoWr5am9pDdYI6Qz1evVy9R31WQ0XDTyNPo0XjniZek6GZqLlXs09zXktbK1xrq1an1pS2nLaXdq52i/YDHbKOg84anQadW7oYXYZusu4+3Rt6sJ6FXqJejd51fVjfUp+rv09/0ABtYG3AM2gwGDEkGToZZhq2GI4Z0Yx8jfKNOo2eG2sYRxnvMu4z/mhiYZJi0mhy31TG1Ns037Tb9HczPTOWWY3ZLXOyubv5BvMu8xfL9Jdxlu1fdseCYuFnsdWix+KDpZUl37LVctpKwyrWqtZqhEFlBDBKGJet0dbO1husT1m/tbG0Edgct/nN1tA22faI7dRy7eWc5Y3Lx+3U7Jh29Xaj9nT7WPsD9qMOqg5MhwaHx47qjmzHJsdJJ12nJKejTs+dTZz5zu3O8y42Lutczrkirh6uRa4DbjJuoW7Vbo/c1dwT3FvcZz0sPNZ6nPNEe/p47vIc8VLyYnk1e816W3mv8+71IfkE+1T7PPbV8+X7dvvBft5+u/0erNBcwVvR6Q/8vfx3+z8M0A5YE/BjICYwILAm8EmQaVBeUF8wJTgm+Ejw6xDnkNKQ+6E6ocLQnjDJsOiw5rD5cNfwsvDRCOOIdRHXIhUiuZFdUdiosKimqLmVbiv3rJyItogujB5epb0qe9WV1QqrU1afjpGMYcaciEXHhsceiX3P9Gc2MOfivOJq42ZZLqy9rGdsR3Y5e5pjxynjTMbbxZfFTyXYJexOmE50SKxInOG6cKu5L5I8k+qS5pP9kw8lf0oJT2lLxaXGpp7kyfCSeb1pymnZaYPp+umF6aNrbNbsWTPL9+E3ZUAZqzK6BFTRz1S/UEe4RTiWaZ9Zk/kmKyzrRLZ0Ni+7P0cvZ3vOZK577rdrUWtZa3vyVPM25Y2tc1pXvx5aH7e+Z4P6hoINExs9Nh7eRNiUvOmnfJP8svxXm8M3dxcoFWwsGN/isaWlUKKQXziy1XZr3TbUNu62ge3m26u2fyxiF10tNimuKH5fwiq5+o3pN5XffNoRv2Og1LJ0/07MTt7O4V0Ouw6XSZfllo3v9tvdUU4vLyp/tSdmz5WKZRV1ewl7hXtHK30ru6o0qnZWva9OrL5d41zTVqtYu712fh9739B+x/2tdUp1xXXvDnAP3Kn3qO9o0GqoOIg5mHnwSWNYY9+3jG+bmxSaips+HOIdGj0cdLi32aq5+YjikdIWuEXYMn00+uiN71y/62o1bK1vo7UVHwPHhMeefh/7/fBxn+M9JxgnWn/Q/KG2ndJe1AF15HTMdiZ2jnZFdg2e9D7Z023b3f6j0Y+HTqmeqjkte7r0DOFMwZlPZ3PPzp1LPzdzPuH8eE9Mz/0LERdu9Qb2Dlz0uXj5kvulC31OfWcv210+dcXmysmrjKud1yyvdfRb9Lf/ZPFT+4DlQMd1q+tdN6xvdA8uHzwz5DB0/qbrzUu3vG5du73i9uBw6PCdkeiR0TvsO1N3U+6+uJd5b+H+xgfoB0UPpR5WPFJ81PCz7s9to5ajp8dcx/ofBz++P84af/ZLxi/vJwqekJ9UTKpMNk+ZTZ2adp++8XTl04ln6c8WZgp/lf619rnO8x9+c/ytfzZiduIF/8Wn30teyr889GrZq565gLlHr1NfL8wXvZF/c/gt423fu/B3kwtZ77HvKz/ofuj+6PPxwafUT5/+BQOY8/xvJtwPAAAACXBIWXMAAC4iAAAuIgGq4t2SAAANMElEQVRoQ92aB1xURx7H/69sY5eOFBELCipESsSC0RCMJRZMrICHGiMmGjWaqDk7YEsuGok5TS6xi56KGtsFG6jBiAYLKhqVc8GGBZG+fd97N+/twNJWFksS7/v5DG/nN/OG/fze/838Z4CA/wMCE9d9W8oQ3mUMBSojBTqWAuBQAweHIC56lanXHw8xJixM6qhQNcX1KuQykluyKzMPVxvF5XUh3hIpgFSiQz8AJBItSKU6sCsX55P9byLxxRKwYl3W5O6dg5o62IMRmcpyBBz87wNYcyH3R4iL+gh3+8MhHaTqYJKUKO2dPYTigIqza1MlLZLnzh3arQ/uZzVn14YOIGRyJWXrqgR5U6VI1kRJS92VBEEry+wrAnC3F04XL3cY4OMF7/p6weC2zSDQzQG3/IlM7dspdPmU0VxtLqYf5haM6HYOBYLVUwcXByQy92JxXioexUzFhT5cySn3TrjrC4WP3EsPHuPfZGJVZg4HCdt/wF0aT8LWUHT/jTpl4fZU3KNBSHytQ0D33uDR0qfjoqg3hmOpQU65d4u2cW4X6NCyJ1ZeIeKSFRC3p1q4kzYdmzr6Zk98p6rsj+rhi0KoFe5gIm53M/ypDhbNJQgC3kbTFUGSi+LiwmgsWyQ5zk9McESCZ8gEVHvF1kneWJI5CJT2SHWDbUQ0vNbEvqr4OClwCyZ+RzSQ+psomqOwUgOL5vL4BIdCi/aBvtJb3AdYsoirs0usnWfH1vbNOmPlFWHmWlve2DFB3t0nhvh0qm2wRRZuG+ksFyUlDe4qcbYRJ0H8v6NxSxVPNZcnPPJDIAlY8PWnXWVYqsPhZb3lDAfzW3T50xbmZ+MfyFhbRcr7yNj1EZ1gdb+O8DFvMKk7it4+ywYjY11k0s1po8KpmA4tITUmnHaWS5HBKJKr0aC5zXw6QJvgNzyhXDIZS3UgCN3UJq3fdLd188PKs3H8+Bjpvn2x/jv2TwnbsOezt3/YPavTss3TXXHzi4U3Vic/+H5gq+7rkLEkmgb5yWwVb3CnNiFAcD+aOtaGaMobmzrqLaoyIwlC11RkNB/JvPGCiGjQXJ43h8QCSRGzEqeG1Xmah77u48QCPdM7NBYrjSPveJg069i7H2UcjUpndWSZrZ3bFRfHlic8nL1TnezcM2Vyh0dLtsbnzdu8JHHW5qVt8G3Pj9qOT4RYluOE/UYllQZPCvFxMik1cbGRSKsbWwlKUPhxhDGxZJ25Ls28oX2X3k60HmZiqQqDTj+rqX8fB7lTC6xYT2569zA9Jb5m7xz8r3aB03uE9fpOFP7WYujZ/TPo22MSDOs1FT4ePBfG9ZvQsod/12kUJf190prli4YnJ6Mt2HOSMKICGLL/5su3Tn6wPxMYZE4lvMH/RAZP6NjaJGBsJSJIi3mrTg6d9bAYem05YSxS6WJgQdR2LFtnLk9oxFigRaKpq2aEuWMJDizu6UlQosltuo3FivU8zgyOkEhkRzz941u2CogDxyYhgMzDrWb4rMXN0Q36vN4TZr43XuTt0WyeoiR/MwqV509JqgzOSx+77zcw8nGM4UMx2r+5qYJpqpByHVztcc3E+QdFXJWx8dE78MgCDaZYldi5eIB/jwj577/+NB9VJ/GajmHj2nYZKpPZNW5aVJ9v2ULDwlaXdsvFYlvzpo1l9PD4yXUoKStAY3MgFjuAexNvcFA4C+32NgqY3HcofHFg18ioH1adRSHyjdBgCQJaQ/y2SFyzAIMKuSkp+1YAepIOGwZ1Bgo9UGu4gCK2z9ZfoEit3yMI1X8XxZwh+B2al2/7jOnfbsKqGaNeB7RYgmsAmvJi2LHkbwaC0baXyElKKpVe7f/JVlpsY4978Abp0PxsvqcSVVZfMGoud3Z44+HZ8vOeG2m3GWOkntNwK8CTgky4eiWJK9fqflUZJRe0jFirZmgvDSPu29or2PmdzhEgpkVC3/ziIpiRvL1ETUua74+NLed3aEnRg4IC3F2Edp6DNx/AmqxcXLMeFK0w3M8L1yxToTfCtCNZUKTRY8VMZv4TyC/VxFiM3OM7N0BudiaMW/g9VgBkto7QIWyYKDstaSEYGdo3dEQNY/n5/EbKJHBq2QPcOozBWk24K00UGgM3QuI2GisA5cVXIOdyYqHeKBo0cEDSaSwLLNu8TJ5968o6LQORI3oMETRPRycI9GrhkHH7Di/UjQpEvzYeQnlZKMQ0rB1Y/25+xO4M2Fl61/KcazTo4W5ONuRcOIUVEx3CI0Fqax8lljsO9w2tuTMuyksHVcHvwKHX2xIcU9aFsgmQEbR5MX50aztQYJzWu19NY3lmjp6pekIrxmbfvv6woLQQqwCBzZujn0SYqfbX5KkLGprVL51IXgMcW5VdgFgqh4DwkaR/WAxBi837Co5j4Hbmj3wucglL9cJy4ENKzRkVf5+q9Bqnpol9WKpDYuR0DfoKabcL8rGCotfBEQ0GLy41ewk81VyWIfYV3lNmXj2NNizVaNvtPfBBc2B1Hl07BKqi2xkkyf0HSxYg0D7eFn9G5rJ69EAYfXj4zgos1QtaYoq16G2qRCYWA0dw5oFqcb9cAyfvPG50ufq4FI/wdPg5t777+VKoNh1ZPzVbIAiWIwl69qm9G9Lad+kJFF5QKFosXCthjXrI/W0jsCw5G62+Tz0D5p8mU3sxrp7FWwClZKYcHWMawvKqvuf6PZh86HwBusW6VY0g/FzlEru0mHAsPB05mnN3X7sHKzNz+K91Df2o+VQIorDBVGz2lpPHvhobdvRy+v7ewT2HYrUmdy/tBU3po5Ren55MP7e+a6MP2F8aHLHXqr9ExO8Y46oQr08bFS6cflkD/1gT+wYLH1aeydGCSD8Q5ox5Ymo1YdUmgqTI2ZkpWziDToMVM0adCpRntrAERc/B0qvFImSsrWAsWdvYx/j1rkRtYNBGo+bbk9gnGKZ19Q0GgzgVlm4yJeQYq8ydsfb4eW158a6LaTuxYkaZuQN0mrLtb39y/KkL2V+Shdved7URrz9Wj7Fn7xfBuAOZuGbiTqkKRu09Y8HgtkFg5A3+qcpgq8zloUT0vItpyUZthXlq0amKQfnbTgNw5AIsvTos3o2SYGL10vAA0r8eY/mdV4nWgBUz26/eqWMwz7JeQeDrbIcM1idgyXpzp6xOyzHoVBuyUrdiBeD6ySQw6DVr+n9+XImlBmE5ggHOiGs8wleg0G7e8urEQwBNEuavywjpYY2BGse8oQ9QHjgM7bK0/ApfiWDslhOGEq1+NZZqwnH526/cOVbdYP7K13OelKcBY/O5ICKsNpeHFJMJ1zL2aVQlBaAqfgDKswdUKIFYhJutAqVqDznDI1xDdbRVFkkc6YzDQ9piqX448HNSmE+jitVq/mkU4OqzERd9sEJnGNJ/W7pgcGalsTp9FDLRdF5QGwJ0wNpEoAhOi0GGao0M8Fe+DkzpIEgYpMY9G2fuxMRj+axBvyrryEbITtsIjNGwcuDnvzzEzVahJ+gsVnURfTK/Vg6uYUDSNH8gVG/0Ltqy6E2FVNajjYf5WFNZ8AhQcvb88zxvsIEZzBvcV4hYYyQsiP4Jt9YPbyAycgcytM2qn4G/moz9qMpYnkaZK0CIv8y9cKQk72JqkYqAZVi1GmlAxXVGX3DdWHYGKwDurSLBxrb1yLRDo/ftTxkflpQyxW5lyhTJ97vm+azYNneWiCJ+HtxtICnCeTZ/wH0m9yaQHHNAEJ6X+ZGHeINLtLpIiIusP2JrwxspJyLyyzVL+WttY3kabe74xCNFBMd+xXDcl2MTfinBcqPggP5Kfe+bqimTomTwWkg8tPaNjLC3bX5CxtKljjqxViGzyfFrFfTFB/3GK3w9zTvd49eyobCsNGPvlCl1ziKeGWQwxI2sYWx2QamwsFWWcQfO4hbM9EgNLIiaK1zrofGRy8PQ34o1mmf+Hyz5/nub9Kprh4qVS4WzBR6SFEOLVv3hze7zYOiAFTDqveUQ03829O0yDJrYm8+Lr9+/AztOn1SxHPNy/xoqklxEi9qAo7kPq0rGvcIBaOIah3s0yDOZO/rro6rIxDP1Pi1rIBKABb3tiIqCw0fzL38GmvKbuMUyOoMODmf9Ct8d3l3CsfpByR9Pu4KbXg5zhjxBUZlSp8yPPoF7NIhwWG5jb5/h16kbltBrShLw+K4SCvOVCYt2no7HslWg7e9iW5fWcxVNvIGmGVMRGYEoO4zmykLhsBx3heTk4VSgW+lENSObQ8n9POSOHUEi90L97dHOlQKtXg9FFSVwu+A+XLmbx5Tp2F1qhvr7d7Ezb+MhBPjD8tdbNA+SSGSgYwmUGpFwo7AczuYX/an/iEdM6B3qKqbZAbguIKJQEZEosYSLi3efzsKyVZxd3/V1Cc0FisQMGsMAUqkBXfXoqgXChjlgF/LAfCiLOXfuQ5G2tDRcY5CGaRhxO41R4qJlRJSaEZVrjOLbapY6Z9BASkJswn18Sw2CVqx/t5ghncoZElQsBTqm8u+X3A0UaRm48gcD8D/XZskfp8IFSwAAAABJRU5ErkJggg==)}.msp-plugin .msp-plugin-content{color:#332b1f}.msp-plugin .msp-plugin-init-error{white-space:pre;margin:10px}.msp-plugin .msp-svg-text{fill:#332b1f}.msp-plugin{background:#eeece7}\n/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */\n/*# sourceMappingURL=molstar.css.map */\n",[],[401,648,655],[401,648],{"_104":664,"_95":382,"_153":665,"_155":402,"_156":138,"_157":666,"_159":22,"_106":667,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":668,"_98":703},"d1fc5396-bdc9-11f0-8738-42dde27851f2","d1fc5454-bdc9-11f0-8738-42dde27851f2",303,["D",1762733495745],[669,678,687,695],{"_104":670,"_95":604,"_153":671,"_155":665,"_156":138,"_157":672,"_159":22,"_106":673,"_100":674,"_161":219,"_163":675,"_164":22,"_165":-5,"_166":676,"_98":677},"d29fcff8-bdc9-11f0-9709-42dde27851f2","de1bade2-bdb6-11f0-ae59-42dde27851f2",314,["D",1762733496808],27,"/**\n * Copyright (c) 2018-2025 mol* contributors, licensed under MIT, See LICENSE file for more info.\n *\n * @author David Sehnal \n * @author Alexander Rose \n * @author Neli Fonseca \n * @author Adam Midlik \n */\n\nimport {\n // Extensions\n ANVILMembraneOrientation,\n AssemblySymmetry,\n AssemblySymmetryConfig,\n // Backgrounds,\n DnatcoNtCs,\n G3DFormat,\n G3dProvider,\n GeometryExport,\n MAQualityAssessment,\n MAQualityAssessmentConfig,\n ModelExport,\n Mp4Export,\n MolViewSpec,\n PDBeStructureQualityReport,\n QualityAssessment,\n QualityAssessmentPLDDTPreset,\n QualityAssessmentQmeanPreset,\n RCSBValidationReport,\n SbNcbrPartialCharges,\n SbNcbrPartialChargesPreset,\n SbNcbrPartialChargesPropertyProvider,\n SbNcbrTunnels,\n wwPDBChemicalComponentDictionary,\n wwPDBStructConnExtensionFunctions,\n ZenodoImport,\n // MVS\n loadMVS,\n loadMVSData,\n loadMVSX,\n type MolstarLoadingExtension,\n MVSData,\n // Types\n type SaccharideCompIdMapType,\n // Volume\n Volume,\n // Actions\n DownloadDensity,\n DownloadStructure,\n PdbDownloadProvider,\n // Hierarchy\n type PresetTrajectoryHierarchy,\n // Representation\n PresetStructureRepresentations,\n StructureRepresentationPresetProvider,\n // Formats\n type BuiltInCoordinatesFormat,\n type BuildInVolumeFormat,\n type BuiltInTopologyFormat,\n type BuiltInTrajectoryFormat,\n type DataFormatProvider,\n // Helpers\n createVolumeRepresentationParams,\n // Objects\n type PluginStateObject,\n // Transforms\n StateTransforms,\n TrajectoryFromModelAndCoordinates,\n // UI\n type PluginUIContext,\n createPluginUI,\n DefaultPluginUISpec,\n type PluginUISpec,\n renderReact18,\n // Plugin\n PluginCommands,\n PluginConfig,\n type PluginConfigItem,\n type PluginLayoutControlsDisplay,\n PluginSpec,\n type PluginState,\n // State\n StateObjectRef,\n type StateObjectSelector,\n // Task\n Task,\n // Util\n // Asset,\n Color,\n ObjectKeys,\n OpenFiles,\n StringLike,\n // Debug exports\n consoleStats,\n isDebugMode,\n isProductionMode,\n isTimingMode,\n // PLUGIN_VERSION as version,\n setDebugMode,\n setProductionMode,\n setTimingMode,\n} from \"jsr:@zachcp/molstar@5.3.18\";\n\nexport {\n // version,\n consoleStats,\n isDebugMode,\n isProductionMode,\n isTimingMode,\n setDebugMode,\n setProductionMode,\n setTimingMode,\n};\n\nconst CustomFormats = [[\"g3d\", G3dProvider] as const];\n\nexport const ExtensionMap = {\n // backgrounds: PluginSpec.Behavior(Backgrounds),\n \"dnatco-ntcs\": PluginSpec.Behavior(DnatcoNtCs),\n \"pdbe-structure-quality-report\": PluginSpec.Behavior(\n PDBeStructureQualityReport,\n ),\n \"assembly-symmetry\": PluginSpec.Behavior(AssemblySymmetry),\n \"rcsb-validation-report\": PluginSpec.Behavior(RCSBValidationReport),\n \"anvil-membrane-orientation\": PluginSpec.Behavior(ANVILMembraneOrientation),\n g3d: PluginSpec.Behavior(G3DFormat),\n \"model-export\": PluginSpec.Behavior(ModelExport),\n \"mp4-export\": PluginSpec.Behavior(Mp4Export),\n \"geo-export\": PluginSpec.Behavior(GeometryExport),\n \"ma-quality-assessment\": PluginSpec.Behavior(MAQualityAssessment),\n \"zenodo-import\": PluginSpec.Behavior(ZenodoImport),\n \"sb-ncbr-partial-charges\": PluginSpec.Behavior(SbNcbrPartialCharges),\n \"wwpdb-chemical-component-dictionary\": PluginSpec.Behavior(\n wwPDBChemicalComponentDictionary,\n ),\n mvs: PluginSpec.Behavior(MolViewSpec),\n tunnels: PluginSpec.Behavior(SbNcbrTunnels),\n};\n\nconst DefaultViewerOptions = {\n customFormats: CustomFormats as [string, DataFormatProvider][],\n extensions: ObjectKeys(ExtensionMap),\n disabledExtensions: [] as string[],\n layoutIsExpanded: true,\n layoutShowControls: true,\n layoutShowRemoteState: true,\n layoutControlsDisplay: \"reactive\" as PluginLayoutControlsDisplay,\n layoutShowSequence: true,\n layoutShowLog: true,\n layoutShowLeftPanel: true,\n collapseLeftPanel: false,\n collapseRightPanel: false,\n disableAntialiasing: PluginConfig.General.DisableAntialiasing.defaultValue,\n pixelScale: PluginConfig.General.PixelScale.defaultValue,\n pickScale: PluginConfig.General.PickScale.defaultValue,\n transparency: PluginConfig.General.Transparency.defaultValue,\n preferWebgl1: PluginConfig.General.PreferWebGl1.defaultValue,\n allowMajorPerformanceCaveat:\n PluginConfig.General.AllowMajorPerformanceCaveat.defaultValue,\n powerPreference: PluginConfig.General.PowerPreference.defaultValue,\n resolutionMode: PluginConfig.General.ResolutionMode.defaultValue,\n illumination: false,\n\n viewportShowReset: PluginConfig.Viewport.ShowReset.defaultValue,\n viewportShowScreenshotControls:\n PluginConfig.Viewport.ShowScreenshotControls.defaultValue,\n viewportShowControls: PluginConfig.Viewport.ShowControls.defaultValue,\n viewportShowExpand: PluginConfig.Viewport.ShowExpand.defaultValue,\n viewportShowToggleFullscreen:\n PluginConfig.Viewport.ShowToggleFullscreen.defaultValue,\n viewportShowSettings: PluginConfig.Viewport.ShowSettings.defaultValue,\n viewportShowSelectionMode:\n PluginConfig.Viewport.ShowSelectionMode.defaultValue,\n viewportShowAnimation: PluginConfig.Viewport.ShowAnimation.defaultValue,\n viewportShowTrajectoryControls:\n PluginConfig.Viewport.ShowTrajectoryControls.defaultValue,\n pluginStateServer: PluginConfig.State.DefaultServer.defaultValue,\n volumeStreamingServer:\n PluginConfig.VolumeStreaming.DefaultServer.defaultValue,\n volumeStreamingDisabled: !PluginConfig.VolumeStreaming.Enabled.defaultValue,\n pdbProvider: PluginConfig.Download.DefaultPdbProvider.defaultValue,\n emdbProvider: PluginConfig.Download.DefaultEmdbProvider.defaultValue,\n saccharideCompIdMapType: \"default\" as SaccharideCompIdMapType,\n rcsbAssemblySymmetryDefaultServerType:\n AssemblySymmetryConfig.DefaultServerType.defaultValue,\n rcsbAssemblySymmetryDefaultServerUrl:\n AssemblySymmetryConfig.DefaultServerUrl.defaultValue,\n rcsbAssemblySymmetryApplyColors:\n AssemblySymmetryConfig.ApplyColors.defaultValue,\n\n config: [] as [PluginConfigItem, any][],\n};\ntype ViewerOptions = typeof DefaultViewerOptions;\n\nexport class Viewer {\n constructor(public plugin: PluginUIContext) {}\n\n static async create(\n elementOrId: string | HTMLElement,\n options: Partial = {},\n ) {\n const definedOptions = {} as any;\n // filter for defined properies only so the default values\n // are property applied\n for (const p of Object.keys(options) as (keyof ViewerOptions)[]) {\n if (options[p] !== void 0) definedOptions[p] = options[p];\n }\n\n const o: ViewerOptions = { ...DefaultViewerOptions, ...definedOptions };\n const defaultSpec = DefaultPluginUISpec();\n\n const disabledExtension = new Set(o.disabledExtensions ?? []);\n\n const spec: PluginUISpec = {\n actions: defaultSpec.actions,\n behaviors: [\n ...defaultSpec.behaviors,\n ...o.extensions\n .filter((e) => !disabledExtension.has(e))\n .map((e) => ExtensionMap[e]),\n ],\n animations: [...(defaultSpec.animations || [])],\n customParamEditors: defaultSpec.customParamEditors,\n customFormats: o?.customFormats,\n layout: {\n initial: {\n isExpanded: o.layoutIsExpanded,\n showControls: o.layoutShowControls,\n controlsDisplay: o.layoutControlsDisplay,\n regionState: {\n bottom: \"full\",\n left: o.collapseLeftPanel ? \"collapsed\" : \"full\",\n right: o.collapseRightPanel ? \"hidden\" : \"full\",\n top: \"full\",\n },\n },\n },\n components: {\n ...defaultSpec.components,\n controls: {\n ...defaultSpec.components?.controls,\n top: o.layoutShowSequence ? undefined : \"none\",\n bottom: o.layoutShowLog ? undefined : \"none\",\n left: o.layoutShowLeftPanel ? undefined : \"none\",\n },\n remoteState: o.layoutShowRemoteState ? \"default\" : \"none\",\n },\n\n config: [\n [PluginConfig.General.DisableAntialiasing, o.disableAntialiasing],\n [PluginConfig.General.PixelScale, o.pixelScale],\n [PluginConfig.General.PickScale, o.pickScale],\n [PluginConfig.General.Transparency, o.transparency],\n [PluginConfig.General.PreferWebGl1, o.preferWebgl1],\n [\n PluginConfig.General.AllowMajorPerformanceCaveat,\n o.allowMajorPerformanceCaveat,\n ],\n [PluginConfig.General.PowerPreference, o.powerPreference],\n [PluginConfig.General.ResolutionMode, o.resolutionMode],\n [PluginConfig.Viewport.ShowReset, o.viewportShowReset],\n [\n PluginConfig.Viewport.ShowScreenshotControls,\n o.viewportShowScreenshotControls,\n ],\n [PluginConfig.Viewport.ShowControls, o.viewportShowControls],\n [PluginConfig.Viewport.ShowExpand, o.viewportShowExpand],\n [\n PluginConfig.Viewport.ShowToggleFullscreen,\n o.viewportShowToggleFullscreen,\n ],\n [PluginConfig.Viewport.ShowSettings, o.viewportShowSettings],\n [PluginConfig.Viewport.ShowSelectionMode, o.viewportShowSelectionMode],\n [PluginConfig.Viewport.ShowAnimation, o.viewportShowAnimation],\n [\n PluginConfig.Viewport.ShowTrajectoryControls,\n o.viewportShowTrajectoryControls,\n ],\n [PluginConfig.State.DefaultServer, o.pluginStateServer],\n [PluginConfig.State.CurrentServer, o.pluginStateServer],\n [PluginConfig.VolumeStreaming.DefaultServer, o.volumeStreamingServer],\n [PluginConfig.VolumeStreaming.Enabled, !o.volumeStreamingDisabled],\n [PluginConfig.Download.DefaultPdbProvider, o.pdbProvider],\n [PluginConfig.Download.DefaultEmdbProvider, o.emdbProvider],\n [\n PluginConfig.Structure.DefaultRepresentationPreset,\n ViewerAutoPreset.id,\n ],\n [\n PluginConfig.Structure.SaccharideCompIdMapType,\n o.saccharideCompIdMapType,\n ],\n [\n AssemblySymmetryConfig.DefaultServerType,\n o.rcsbAssemblySymmetryDefaultServerType,\n ],\n [\n AssemblySymmetryConfig.DefaultServerUrl,\n o.rcsbAssemblySymmetryDefaultServerUrl,\n ],\n [AssemblySymmetryConfig.ApplyColors, o.rcsbAssemblySymmetryApplyColors],\n ...(o.config ?? []),\n ],\n };\n\n const element =\n typeof elementOrId === \"string\"\n ? document.getElementById(elementOrId)\n : elementOrId;\n if (!element)\n throw new Error(`Could not get element with id '${elementOrId}'`);\n const plugin = await createPluginUI({\n target: element,\n spec,\n render: renderReact18,\n onBeforeUIRender: (plugin) => {\n // the preset needs to be added before the UI renders otherwise\n // \"Download Structure\" wont be able to pick it up\n plugin.builders.structure.representation.registerPreset(\n ViewerAutoPreset,\n );\n },\n });\n plugin.canvas3d?.setProps({ illumination: { enabled: o.illumination } });\n return new Viewer(plugin);\n }\n\n setRemoteSnapshot(id: string) {\n const url = `${this.plugin.config.get(PluginConfig.State.CurrentServer)}/get/${id}`;\n return PluginCommands.State.Snapshots.Fetch(this.plugin, { url });\n }\n\n loadSnapshotFromUrl(url: string, type: PluginState.SnapshotType) {\n return PluginCommands.State.Snapshots.OpenUrl(this.plugin, { url, type });\n }\n\n loadStructureFromUrl(\n url: string,\n format: BuiltInTrajectoryFormat = \"mmcif\",\n isBinary = false,\n options?: LoadStructureOptions & { label?: string },\n ) {\n const params = DownloadStructure.createDefaultParams(\n this.plugin.state.data.root.obj!,\n this.plugin,\n );\n return this.plugin.runTask(\n this.plugin.state.data.applyAction(DownloadStructure, {\n source: {\n name: \"url\",\n params: {\n url: Asset.Url(url),\n format: format as any,\n isBinary,\n label: options?.label,\n options: {\n ...params.source.params.options,\n representationParams: options?.representationParams as any,\n },\n },\n },\n }),\n );\n }\n\n async loadAllModelsOrAssemblyFromUrl(\n url: string,\n format: BuiltInTrajectoryFormat = \"mmcif\",\n isBinary = false,\n options?: LoadStructureOptions,\n ) {\n const plugin = this.plugin;\n\n const data = await plugin.builders.data.download(\n { url, isBinary },\n { state: { isGhost: true } },\n );\n const trajectory = await plugin.builders.structure.parseTrajectory(\n data,\n format,\n );\n\n await this.plugin.builders.structure.hierarchy.applyPreset(\n trajectory,\n \"all-models\",\n {\n useDefaultIfSingleModel: true,\n representationPresetParams: options?.representationParams,\n },\n );\n }\n\n async loadStructureFromData(\n data: string | number[],\n format: BuiltInTrajectoryFormat,\n options?: { dataLabel?: string },\n ) {\n const _data = await this.plugin.builders.data.rawData({\n data,\n label: options?.dataLabel,\n });\n const trajectory = await this.plugin.builders.structure.parseTrajectory(\n _data,\n format,\n );\n await this.plugin.builders.structure.hierarchy.applyPreset(\n trajectory,\n \"default\",\n );\n }\n\n loadPdb(pdb: string, options?: LoadStructureOptions) {\n const params = DownloadStructure.createDefaultParams(\n this.plugin.state.data.root.obj!,\n this.plugin,\n );\n const provider = this.plugin.config.get(\n PluginConfig.Download.DefaultPdbProvider,\n )!;\n return this.plugin.runTask(\n this.plugin.state.data.applyAction(DownloadStructure, {\n source: {\n name: \"pdb\" as const,\n params: {\n provider: {\n id: pdb,\n server: {\n name: provider,\n params: PdbDownloadProvider[provider].defaultValue as any,\n },\n },\n options: {\n ...params.source.params.options,\n representationParams: options?.representationParams as any,\n },\n },\n },\n }),\n );\n }\n\n /**\n * @deprecated Scheduled for removal in v5. Use {@link loadPdbIhm | loadPdbIhm(pdbIhm: string)} instead.\n */\n loadPdbDev(pdbDev: string) {\n return this.loadPdbIhm(pdbDev);\n }\n\n loadPdbIhm(pdbIhm: string) {\n const params = DownloadStructure.createDefaultParams(\n this.plugin.state.data.root.obj!,\n this.plugin,\n );\n return this.plugin.runTask(\n this.plugin.state.data.applyAction(DownloadStructure, {\n source: {\n name: \"pdb-ihm\" as const,\n params: {\n provider: {\n id: pdbIhm,\n encoding: \"bcif\",\n },\n options: params.source.params.options,\n },\n },\n }),\n );\n }\n\n loadEmdb(emdb: string, options?: { detail?: number }) {\n const provider = this.plugin.config.get(\n PluginConfig.Download.DefaultEmdbProvider,\n )!;\n return this.plugin.runTask(\n this.plugin.state.data.applyAction(DownloadDensity, {\n source: {\n name: \"pdb-emd-ds\" as const,\n params: {\n provider: {\n id: emdb,\n server: provider,\n },\n detail: options?.detail ?? 3,\n },\n },\n }),\n );\n }\n\n loadAlphaFoldDb(afdb: string) {\n const params = DownloadStructure.createDefaultParams(\n this.plugin.state.data.root.obj!,\n this.plugin,\n );\n return this.plugin.runTask(\n this.plugin.state.data.applyAction(DownloadStructure, {\n source: {\n name: \"alphafolddb\" as const,\n params: {\n provider: {\n id: afdb,\n encoding: \"bcif\",\n },\n options: {\n ...params.source.params.options,\n representation:\n \"preset-structure-representation-ma-quality-assessment-plddt\",\n },\n },\n },\n }),\n );\n }\n\n loadModelArchive(id: string) {\n const params = DownloadStructure.createDefaultParams(\n this.plugin.state.data.root.obj!,\n this.plugin,\n );\n return this.plugin.runTask(\n this.plugin.state.data.applyAction(DownloadStructure, {\n source: {\n name: \"modelarchive\" as const,\n params: {\n id,\n options: params.source.params.options,\n },\n },\n }),\n );\n }\n\n /**\n * @example Load X-ray density from volume server\n viewer.loadVolumeFromUrl({\n url: 'https://www.ebi.ac.uk/pdbe/densities/x-ray/1tqn/cell?detail=3',\n format: 'dscif',\n isBinary: true\n }, [{\n type: 'relative',\n value: 1.5,\n color: 0x3362B2\n }, {\n type: 'relative',\n value: 3,\n color: 0x33BB33,\n volumeIndex: 1\n }, {\n type: 'relative',\n value: -3,\n color: 0xBB3333,\n volumeIndex: 1\n }], {\n entryId: ['2FO-FC', 'FO-FC'],\n isLazy: true\n });\n * *********************\n * @example Load EM density from volume server\n viewer.loadVolumeFromUrl({\n url: 'https://maps.rcsb.org/em/emd-30210/cell?detail=6',\n format: 'dscif',\n isBinary: true\n }, [{\n type: 'relative',\n value: 1,\n color: 0x3377aa\n }], {\n entryId: 'EMD-30210',\n isLazy: true\n });\n */\n async loadVolumeFromUrl(\n {\n url,\n format,\n isBinary,\n }: { url: string; format: BuildInVolumeFormat; isBinary: boolean },\n isovalues: VolumeIsovalueInfo[],\n options?: { entryId?: string | string[]; isLazy?: boolean },\n ) {\n const plugin = this.plugin;\n\n if (!plugin.dataFormats.get(format)) {\n throw new Error(`Unknown density format: ${format}`);\n }\n\n if (options?.isLazy) {\n const update = this.plugin.build();\n update.toRoot().apply(StateTransforms.Data.LazyVolume, {\n url,\n format,\n entryId: options?.entryId,\n isBinary,\n isovalues: isovalues.map((v) => ({ alpha: 1, volumeIndex: 0, ...v })),\n });\n return update.commit();\n }\n\n return plugin.dataTransaction(async () => {\n const data = await plugin.builders.data.download(\n { url, isBinary },\n { state: { isGhost: true } },\n );\n\n const parsed = await plugin.dataFormats\n .get(format)!\n .parse(plugin, data, { entryId: options?.entryId });\n const firstVolume = (parsed.volume ||\n parsed\n .volumes[0]) as StateObjectSelector;\n if (!firstVolume?.isOk) throw new Error(\"Failed to parse any volume.\");\n\n const repr = plugin.build();\n for (const iso of isovalues) {\n const volume: StateObjectSelector =\n parsed.volumes?.[iso.volumeIndex ?? 0] ?? parsed.volume;\n const volumeData = volume.cell!.obj!.data;\n repr.to(volume).apply(\n StateTransforms.Representation.VolumeRepresentation3D,\n createVolumeRepresentationParams(this.plugin, firstVolume.data!, {\n type: \"isosurface\",\n typeParams: {\n alpha: iso.alpha ?? 1,\n isoValue: Volume.adjustedIsoValue(\n volumeData,\n iso.value,\n iso.type,\n ),\n },\n color: \"uniform\",\n colorParams: { value: iso.color },\n }),\n );\n }\n\n await repr.commit();\n });\n }\n\n loadFullResolutionEMDBMap(\n emdbId: string,\n options: { isoValue: Volume.IsoValue; color?: Color },\n ) {\n const plugin = this.plugin;\n const numericId = parseInt(emdbId.toUpperCase().replace(\"EMD-\", \"\"));\n const url = `https://ftp.ebi.ac.uk/pub/databases/emdb/structures/EMD-${numericId}/map/emd_${numericId}.map.gz`;\n\n return plugin.dataTransaction(async () => {\n const data = await plugin\n .build()\n .toRoot()\n .apply(\n StateTransforms.Data.Download,\n { url, isBinary: true, label: emdbId },\n {\n state: { isGhost: true },\n },\n )\n .apply(StateTransforms.Data.DeflateData)\n .commit();\n\n const parsed = await plugin.dataFormats\n .get(\"ccp4\")!\n .parse(plugin, data, { entryId: emdbId });\n const firstVolume = (parsed.volume ||\n parsed\n .volumes[0]) as StateObjectSelector;\n if (!firstVolume?.isOk) throw new Error(\"Failed to parse any volume.\");\n\n const volume: StateObjectSelector =\n parsed.volumes?.[0] ?? parsed.volume;\n await plugin\n .build()\n .to(volume)\n .apply(\n StateTransforms.Representation.VolumeRepresentation3D,\n createVolumeRepresentationParams(this.plugin, firstVolume.data!, {\n type: \"isosurface\",\n typeParams: { alpha: 1, isoValue: options.isoValue },\n color: \"uniform\",\n colorParams: { value: options.color ?? Color(0x33bb33) },\n }),\n )\n .commit();\n });\n }\n\n /**\n * @example\n * viewer.loadTrajectory({\n * model: { kind: 'model-url', url: 'villin.gro', format: 'gro' },\n * coordinates: { kind: 'coordinates-url', url: 'villin.xtc', format: 'xtc', isBinary: true },\n * preset: 'all-models' // or 'default'\n * });\n */\n async loadTrajectory(params: LoadTrajectoryParams) {\n const plugin = this.plugin;\n\n let model: StateObjectSelector;\n\n if (\n params.model.kind === \"model-data\" ||\n params.model.kind === \"model-url\"\n ) {\n const data =\n params.model.kind === \"model-data\"\n ? await plugin.builders.data.rawData({\n data: params.model.data,\n label: params.modelLabel,\n })\n : await plugin.builders.data.download({\n url: params.model.url,\n isBinary: params.model.isBinary,\n label: params.modelLabel,\n });\n\n const trajectory = await plugin.builders.structure.parseTrajectory(\n data,\n params.model.format ?? \"mmcif\",\n );\n model = await plugin.builders.structure.createModel(trajectory);\n } else {\n const data =\n params.model.kind === \"topology-data\"\n ? await plugin.builders.data.rawData({\n data: params.model.data,\n label: params.modelLabel,\n })\n : await plugin.builders.data.download({\n url: params.model.url,\n isBinary: params.model.isBinary,\n label: params.modelLabel,\n });\n\n const provider = plugin.dataFormats.get(params.model.format);\n const parsed = await provider!.parse(plugin, data);\n model = parsed.topology;\n }\n\n const data =\n params.coordinates.kind === \"coordinates-data\"\n ? await plugin.builders.data.rawData({\n data: params.coordinates.data,\n label: params.coordinatesLabel,\n })\n : await plugin.builders.data.download({\n url: params.coordinates.url,\n isBinary: params.coordinates.isBinary,\n label: params.coordinatesLabel,\n });\n\n const provider = plugin.dataFormats.get(params.coordinates.format);\n const coords = await provider!.parse(plugin, data);\n\n const trajectory = await plugin\n .build()\n .toRoot()\n .apply(\n TrajectoryFromModelAndCoordinates,\n {\n modelRef: model.ref,\n coordinatesRef: coords.ref,\n },\n { dependsOn: [model.ref, coords.ref] },\n )\n .commit();\n\n const preset = await plugin.builders.structure.hierarchy.applyPreset(\n trajectory,\n params.preset ?? \"default\",\n );\n\n return { model, coords, preset };\n }\n\n async loadMvsFromUrl(\n url: string,\n format: \"mvsj\" | \"mvsx\",\n options?: {\n appendSnapshots?: boolean;\n keepCamera?: boolean;\n extensions?: MolstarLoadingExtension[];\n },\n ) {\n if (format === \"mvsj\") {\n const data = await this.plugin.runTask(\n this.plugin.fetch({ url, type: \"string\" }),\n );\n const mvsData = MVSData.fromMVSJ(StringLike.toString(data));\n await loadMVS(this.plugin, mvsData, {\n sanityChecks: true,\n sourceUrl: url,\n ...options,\n });\n } else if (format === \"mvsx\") {\n const data = await this.plugin.runTask(\n this.plugin.fetch({ url, type: \"binary\" }),\n );\n await this.plugin.runTask(\n Task.create(\"Load MVSX file\", async (ctx) => {\n const parsed = await loadMVSX(this.plugin, ctx, data);\n await loadMVS(this.plugin, parsed.mvsData, {\n sanityChecks: true,\n sourceUrl: parsed.sourceUrl,\n ...options,\n });\n }),\n );\n } else {\n throw new Error(`Unknown MolViewSpec format: ${format}`);\n }\n }\n\n /** Load MolViewSpec from `data`.\n * If `format` is 'mvsj', `data` must be a string or a Uint8Array containing a UTF8-encoded string.\n * If `format` is 'mvsx', `data` must be a Uint8Array or a string containing base64-encoded binary data prefixed with 'base64,'. */\n loadMvsData(\n data: string | Uint8Array,\n format: \"mvsj\" | \"mvsx\",\n options?: {\n appendSnapshots?: boolean;\n keepCamera?: boolean;\n extensions?: MolstarLoadingExtension[];\n },\n ) {\n return loadMVSData(this.plugin, data, format, options);\n }\n\n loadFiles(files: File[]) {\n const sessions = files.filter((f) => {\n const fn = f.name.toLowerCase();\n return fn.endsWith(\".molx\") || fn.endsWith(\".molj\");\n });\n\n if (sessions.length > 0) {\n return PluginCommands.State.Snapshots.OpenFile(this.plugin, {\n file: sessions[0],\n });\n } else {\n return this.plugin.runTask(\n this.plugin.state.data.applyAction(OpenFiles, {\n files: files.map((f) => Asset.File(f)),\n format: { name: \"auto\", params: {} },\n visuals: true,\n }),\n );\n }\n }\n\n handleResize() {\n this.plugin.layout.events.updated.next(void 0);\n }\n\n dispose() {\n this.plugin.dispose();\n }\n}\n\nexport interface LoadStructureOptions {\n representationParams?: StructureRepresentationPresetProvider.CommonParams;\n}\n\nexport interface VolumeIsovalueInfo {\n type: \"absolute\" | \"relative\";\n value: number;\n color: Color;\n alpha?: number;\n volumeIndex?: number;\n}\n\nexport interface LoadTrajectoryParams {\n model:\n | {\n kind: \"model-url\";\n url: string;\n format?: BuiltInTrajectoryFormat /* mmcif */;\n isBinary?: boolean;\n }\n | {\n kind: \"model-data\";\n data: string | number[] | ArrayBuffer | Uint8Array;\n format?: BuiltInTrajectoryFormat /* mmcif */;\n }\n | {\n kind: \"topology-url\";\n url: string;\n format: BuiltInTopologyFormat;\n isBinary?: boolean;\n }\n | {\n kind: \"topology-data\";\n data: string | number[] | ArrayBuffer | Uint8Array;\n format: BuiltInTopologyFormat;\n };\n modelLabel?: string;\n coordinates:\n | {\n kind: \"coordinates-url\";\n url: string;\n format: BuiltInCoordinatesFormat;\n isBinary?: boolean;\n }\n | {\n kind: \"coordinates-data\";\n data: string | number[] | ArrayBuffer | Uint8Array;\n format: BuiltInCoordinatesFormat;\n };\n coordinatesLabel?: string;\n preset?: keyof PresetTrajectoryHierarchy;\n}\n\nexport const ViewerAutoPreset = StructureRepresentationPresetProvider({\n id: \"preset-structure-representation-viewer-auto\",\n display: {\n name: \"Automatic (w/ Annotation)\",\n group: \"Annotation\",\n description:\n \"Show standard automatic representation but colored by quality assessment (if available in the model).\",\n },\n isApplicable(a): boolean {\n return (\n !!a.data.models.some((m) => QualityAssessment.isApplicable(m, \"pLDDT\")) ||\n !!a.data.models.some((m) => QualityAssessment.isApplicable(m, \"qmean\"))\n );\n },\n params: () => StructureRepresentationPresetProvider.CommonParams,\n async apply(ref, params, plugin) {\n const structureCell = StateObjectRef.resolveAndCheck(\n plugin.state.data,\n ref,\n );\n const structure = structureCell?.obj?.data;\n if (!structureCell || !structure) return {};\n\n if (\n !!structure.models.some((m) => QualityAssessment.isApplicable(m, \"pLDDT\"))\n ) {\n return await QualityAssessmentPLDDTPreset.apply(ref, params, plugin);\n } else if (\n !!structure.models.some((m) => QualityAssessment.isApplicable(m, \"qmean\"))\n ) {\n return await QualityAssessmentQmeanPreset.apply(ref, params, plugin);\n } else if (\n !!structure.models.some((m) =>\n SbNcbrPartialChargesPropertyProvider.isApplicable(m),\n )\n ) {\n return await SbNcbrPartialChargesPreset.apply(ref, params, plugin);\n } else {\n return await PresetStructureRepresentations.auto.apply(\n ref,\n params,\n plugin,\n );\n }\n },\n});\n\nexport const PluginExtensions = {\n wwPDBStructConn: wwPDBStructConnExtensionFunctions,\n mvs: { MVSData, loadMVS, loadMVSData },\n modelArchive: {\n qualityAssessment: {\n config: MAQualityAssessmentConfig,\n },\n },\n};\n",[],[401,382,604],{"_104":679,"_95":680,"_153":681,"_155":665,"_156":138,"_157":682,"_159":22,"_106":683,"_100":218,"_161":219,"_163":684,"_164":22,"_165":-5,"_166":685,"_98":686},"d2b384b2-bdc9-11f0-853e-42dde27851f2","client.ts","811eada8-bdc8-11f0-89b8-42dde27851f2",317,["D",1762733496776],"/**\n * Copyright (c) 2018-2025 mol* contributors, licensed under MIT, See LICENSE file for more info.\n *\n * @author David Sehnal \n * @author Alexander Rose \n */\n\nimport { Viewer } from \"./app.ts\";\n\nwindow.addEventListener(\"DOMContentLoaded\", async () => {\n const container = document.getElementById(\"molstar-container\");\n if (container) {\n try {\n const viewer = await Viewer.create(container, {\n layoutIsExpanded: true,\n layoutShowControls: true,\n });\n console.log(\"Mol* Viewer loaded\", viewer);\n } catch (err) {\n console.error(\"Failed to initialize viewer:\", err);\n }\n }\n});\n",[],[401,382,680],{"_104":688,"_95":613,"_153":689,"_155":665,"_156":138,"_157":690,"_159":22,"_106":691,"_100":218,"_161":321,"_163":692,"_164":22,"_165":-5,"_166":693,"_98":694},"d2bfc7e0-bdc9-11f0-b67b-42dde27851f2","de23c1e4-bdb6-11f0-873e-42dde27851f2",319,["D",1762733496989],"\n\n \n \n \n \n Embedded Mol* Viewer\n \n \n \n \n

\n \n \n \n\n",[],[401,382,613],{"_104":696,"_95":99,"_153":697,"_155":665,"_156":138,"_157":698,"_159":22,"_106":699,"_100":218,"_161":321,"_163":700,"_164":22,"_165":-5,"_166":701,"_98":702},"d303221a-bdc9-11f0-9c88-42dde27851f2","de1697ee-bdb6-11f0-aae8-42dde27851f2",328,["D",1762733497038],"\n\n \n \n \n \n Mol* Viewer\n \n \n \n \n \n

\n \n \n \n \n \n\n",[],[401,382,99],[401,382],{"_104":705,"_95":706,"_153":707,"_155":402,"_156":138,"_157":708,"_159":22,"_106":709,"_100":218,"_161":219,"_163":710,"_164":22,"_165":-5,"_166":711,"_98":712},"a33be062-bdc9-11f0-bc34-42dde27851f2","docking-viewer-app.tsx","461b10dc-bdb6-11f0-bc3d-42dde27851f2",291,["D",1762733417151],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nexport default function DockingViewerApp() {\n return (\n \n \n \n \n Mol* Docking Viewer\n \n \n

Mol* Docking Viewer

Specialized viewer for molecular docking results

\n Loading...\n

\n \n \n \n );\n}\n",[],[401,769],{"_104":777,"_95":299,"_153":778,"_155":402,"_156":138,"_157":779,"_159":22,"_106":780,"_100":32,"_161":219,"_163":781,"_164":22,"_165":-5,"_166":782,"_98":783},"cba10a3c-bdc9-11f0-a9fc-42dde27851f2","cba10c76-bdc9-11f0-a9fc-42dde27851f2",300,["D",1762733485080],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Hono } from \"jsr:@hono/hono@4\";\nimport { renderToString } from \"https://esm.sh/react-dom@18.2.0/server?deps=react@18.2.0,react-dom@18.2.0\";\nimport { readFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport ViewerApp from \"./viewer-app.tsx\";\n\nconst app = new Hono();\n\napp.get(\"/viewer\", async (c) => {\n const molstarCss = await readFile(\n \"/routes/styles/molstar.css\",\n import.meta.url,\n );\n const html = renderToString();\n return c.html(html);\n});\n\nexport default app;\n",[],[401,299],[401],{"_104":786,"_95":787,"_153":788,"_155":-5,"_156":138,"_157":789,"_159":22,"_106":790,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":791,"_98":809},"39712268-bdb6-11f0-bee6-42dde27851f2","shared","3971233a-bdb6-11f0-bee6-42dde27851f2",91,["D",1762725079376],[792,800],{"_104":793,"_95":391,"_153":794,"_155":788,"_156":138,"_157":795,"_159":22,"_106":796,"_100":32,"_161":321,"_163":797,"_164":22,"_165":-5,"_166":798,"_98":799},"72e94b7e-bdb6-11f0-92a8-42dde27851f2","72e94c28-bdb6-11f0-92a8-42dde27851f2",103,["D",1762725175801],"# Shared\n\nThis directory contains shared types, utilities, and constants used across both backend and frontend code.\n\n## Structure\n\n```\nshared/\n├── types.ts # Shared TypeScript types and interfaces\n└── README.md # This file\n```\n\n## Types\n\n### MolstarAppConfig\n\nConfiguration options for initializing Molstar viewer instances:\n\n```typescript\ninterface MolstarAppConfig {\n layoutIsExpanded?: boolean;\n layoutShowControls?: boolean;\n layoutShowRemoteState?: boolean;\n layoutShowSequence?: boolean;\n layoutShowLog?: boolean;\n layoutShowLeftPanel?: boolean;\n collapseLeftPanel?: boolean;\n collapseRightPanel?: boolean;\n viewportShowExpand?: boolean;\n viewportShowControls?: boolean;\n viewportShowSettings?: boolean;\n viewportShowSelectionMode?: boolean;\n viewportShowAnimation?: boolean;\n viewportShowTrajectoryControls?: boolean;\n pdbProvider?: \"pdbe\" | \"rcsb\";\n emdbProvider?: \"pdbe\" | \"rcsb\";\n pixelScale?: number;\n pickScale?: number;\n transparency?: string;\n preferWebgl1?: boolean;\n allowMajorPerformanceCaveat?: boolean;\n powerPreference?: \"high-performance\" | \"low-power\" | \"default\";\n}\n```\n\n### StructureLoadOptions\n\nOptions for loading molecular structures:\n\n```typescript\ninterface StructureLoadOptions {\n url: string;\n format: string;\n isBinary?: boolean;\n label?: string;\n}\n```\n\n### VolumeLoadOptions\n\nOptions for loading volume/density data:\n\n```typescript\ninterface VolumeLoadOptions {\n url: string;\n format: string;\n isBinary?: boolean;\n isovalues?: Array<{\n type: \"relative\" | \"absolute\";\n value: number;\n color: number;\n alpha?: number;\n volumeIndex?: number;\n }>;\n}\n```\n\n### AppMetadata\n\nMetadata for each Molstar application:\n\n```typescript\ninterface AppMetadata {\n name: string;\n description: string;\n path: string;\n icon: string;\n}\n```\n\n### MOLSTAR_APPS\n\nArray of all available Molstar applications:\n\n```typescript\nconst MOLSTAR_APPS: AppMetadata[] = [\n {\n name: \"Viewer\",\n description: \"Standard Mol* viewer for visualizing molecular structures\",\n path: \"/viewer\",\n icon: \"🧬\",\n },\n {\n name: \"Docking Viewer\",\n description: \"Specialized viewer for molecular docking results\",\n path: \"/docking-viewer\",\n icon: \"🔬\",\n },\n {\n name: \"Mesoscale Explorer\",\n description: \"Explore mesoscale biological structures\",\n path: \"/mesoscale-explorer\",\n icon: \"🔭\",\n },\n {\n name: \"MVS Stories\",\n description: \"Interactive molecular visualization stories\",\n path: \"/mvs-stories\",\n icon: \"📖\",\n },\n];\n```\n\n## Usage\n\nImport shared types in both backend and frontend code:\n\n```typescript\nimport type { MolstarAppConfig, StructureLoadOptions } from \"../shared/types.ts\";\nimport { MOLSTAR_APPS } from \"../shared/types.ts\";\n```\n\n## Important Notes\n\n- Code in `shared/` must work in both server (Deno) and browser environments\n- Do NOT use Deno-specific APIs (like `Deno.env`) in shared code\n- Use ESM imports with `.ts` extensions for Val Town compatibility\n- All types should be exported for use in other parts of the application",[],[787,391],{"_104":801,"_95":802,"_153":803,"_155":788,"_156":138,"_157":804,"_159":22,"_106":805,"_100":32,"_161":219,"_163":806,"_164":22,"_165":-5,"_166":807,"_98":808},"399f7582-bdb6-11f0-bee6-42dde27851f2","types.ts","399f7654-bdb6-11f0-bee6-42dde27851f2",94,["D",1762725079679],"/**\n * Shared types for Molstar Viewer applications\n */\n\nexport interface MolstarAppConfig {\n layoutIsExpanded?: boolean;\n layoutShowControls?: boolean;\n layoutShowRemoteState?: boolean;\n layoutShowSequence?: boolean;\n layoutShowLog?: boolean;\n layoutShowLeftPanel?: boolean;\n collapseLeftPanel?: boolean;\n collapseRightPanel?: boolean;\n viewportShowExpand?: boolean;\n viewportShowControls?: boolean;\n viewportShowSettings?: boolean;\n viewportShowSelectionMode?: boolean;\n viewportShowAnimation?: boolean;\n viewportShowTrajectoryControls?: boolean;\n pdbProvider?: \"pdbe\" | \"rcsb\";\n emdbProvider?: \"pdbe\" | \"rcsb\";\n pixelScale?: number;\n pickScale?: number;\n transparency?: string;\n preferWebgl1?: boolean;\n allowMajorPerformanceCaveat?: boolean;\n powerPreference?: \"high-performance\" | \"low-power\" | \"default\";\n}\n\nexport interface StructureLoadOptions {\n url: string;\n format: string;\n isBinary?: boolean;\n label?: string;\n}\n\nexport interface VolumeLoadOptions {\n url: string;\n format: string;\n isBinary?: boolean;\n isovalues?: Array<{\n type: \"relative\" | \"absolute\";\n value: number;\n color: number;\n alpha?: number;\n volumeIndex?: number;\n }>;\n}\n\nexport interface AppMetadata {\n name: string;\n description: string;\n path: string;\n icon: string;\n}\n\nexport const MOLSTAR_APPS: AppMetadata[] = [\n {\n name: \"Viewer\",\n description: \"Standard Mol* viewer for visualizing molecular structures\",\n path: \"/viewer\",\n icon: \"🧬\",\n },\n {\n name: \"Docking Viewer\",\n description: \"Specialized viewer for molecular docking results\",\n path: \"/docking-viewer\",\n icon: \"🔬\",\n },\n {\n name: \"Mesoscale Explorer\",\n description: \"Explore mesoscale biological structures\",\n path: \"/mesoscale-explorer\",\n icon: \"🔭\",\n },\n {\n name: \"MVS Stories\",\n description: \"Interactive molecular visualization stories\",\n path: \"/mvs-stories\",\n icon: \"📖\",\n },\n];\n",[],[787,802],[787],{"_104":811,"_95":812,"_153":813,"_155":-5,"_156":138,"_157":814,"_159":22,"_106":815,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":816,"_98":817},"64110886-bdc9-11f0-887a-42dde27851f2","utils","6411094e-bdc9-11f0-887a-42dde27851f2",285,["D",1762733311330],[],[812],{"_104":819,"_95":820,"_153":821,"_155":-5,"_156":138,"_157":822,"_159":823,"_106":824,"_100":32,"_161":321,"_163":825,"_164":22,"_165":-5,"_166":826,"_98":827},"20a62286-bdb3-11f0-b9f8-42dde27851f2",".vtignore","20a6234e-bdb3-11f0-b9f8-42dde27851f2",22,true,["D",1762723749256],".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor",[],[820],{"_104":829,"_95":830,"_153":831,"_155":-5,"_156":138,"_157":832,"_159":823,"_106":833,"_100":32,"_161":321,"_163":834,"_164":22,"_165":-5,"_166":835,"_98":836},"20b8dc46-bdb3-11f0-901b-42dde27851f2","AGENTS.md","20b8dd18-bdb3-11f0-901b-42dde27851f2",24,["D",1762723749260],"You are an advanced assistant specialized in generating Val Town code.\n\n## Core Guidelines\n\n- Ask clarifying questions when requirements are ambiguous\n- Provide complete, functional solutions rather than skeleton implementations\n- Test your logic against edge cases before presenting the final solution\n- Ensure all code follows Val Town's specific platform requirements\n- If a section of code that you're working on is getting too complex, consider refactoring it into subcomponents\n\n## Code Standards\n\n- Generate code in TypeScript or TSX\n- Add appropriate TypeScript types and interfaces for all data structures\n- Prefer official SDKs or libraries than writing API calls directly\n- Ask the user to supply API or library documentation if you are at all unsure about it\n- **Never bake in secrets into the code** - always use environment variables\n- Include comments explaining complex logic (avoid commenting obvious operations)\n- Follow modern ES6+ conventions and functional programming practices if possible\n\n## Types of triggers\n\n### 1. HTTP Trigger\n\n- Create web APIs and endpoints\n- Handle HTTP requests and responses\n- Example structure:\n\n```ts\nexport default async function (req: Request) {\n return new Response(\"Hello World\");\n}\n```\n\nFiles that are HTTP triggers have http in their name like `foobar.http.tsx`\n\n### 2. Cron Triggers\n\n- Run on a schedule\n- Use cron expressions for timing\n- Example structure:\n\n```ts\nexport default async function () {\n // Scheduled task code\n}\n```\n\nFiles that are Cron triggers have cron in their name like `foobar.cron.tsx`\n\n### 3. Email Triggers\n\n- Process incoming emails\n- Handle email-based workflows\n- Example structure:\n\n```ts\nexport default async function (email: Email) {\n // Process email\n}\n```\n\nFiles that are Email triggers have email in their name like `foobar.email.tsx`\n\n\n## Val Town Standard Libraries\n\nVal Town provides several hosted services and utility functions.\n\n### Blob Storage\n\n```ts\nimport { blob } from \"https://esm.town/v/std/blob\";\nawait blob.setJSON(\"myKey\", { hello: \"world\" });\nlet blobDemo = await blob.getJSON(\"myKey\");\nlet appKeys = await blob.list(\"app_\");\nawait blob.delete(\"myKey\");\n```\n\n### SQLite\n\n```ts\nimport { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nconst TABLE_NAME = 'todo_app_users_2';\n// Create table - do this before usage and change table name when modifying schema\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS ${TABLE_NAME} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL\n)`);\n// Query data\nconst result = await sqlite.execute(`SELECT * FROM ${TABLE_NAME} WHERE id = ?`, [1]);\n```\n\nNote: When changing a SQLite table's schema, change the table's name (e.g., add _2 or _3) to create a fresh table.\n\n### OpenAI\n\n```ts\nimport { OpenAI } from \"https://esm.town/v/std/openai\";\nconst openai = new OpenAI();\nconst completion = await openai.chat.completions.create({\n messages: [\n { role: \"user\", content: \"Say hello in a creative way\" },\n ],\n model: \"gpt-4o-mini\",\n max_tokens: 30,\n});\n```\n\n### Email\n\n```ts\nimport { email } from \"https://esm.town/v/std/email\";\n// By default emails the owner of the val\nawait email({ \n subject: \"Hi\", \n text: \"Hi\", \n html: \"

Hi

\"\n});\n```\n\n## Val Town Utility Functions\n\nVal Town provides several utility functions to help with common project tasks.\n\n### Importing Utilities\n\nAlways import utilities with version pins to avoid breaking changes:\n\n```ts\nimport { parseProject, readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n```\n\n### Available Utilities\n\n\n#### **serveFile** - Serve project files with proper content types\n\nFor example, in Hono:\n\n```ts\n// serve all files in frontend/ and shared/\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n```\n\n#### **readFile** - Read files from within the project:\n\n```ts\n// Read a file from the project\nconst fileContent = await readFile(\"/frontend/index.html\", import.meta.url);\n```\n\n#### **listFiles** - List all files in the project\n\n```ts\nconst files = await listFiles(import.meta.url);\n```\n\n#### **parseProject** - Extract information about the current project from import.meta.url\n\nThis is useful for including info for linking back to a val, ie in \"view source\" urls:\n\n```ts\nconst projectVal = parseProject(import.meta.url);\nconsole.log(projectVal.username); // Owner of the project\nconsole.log(projectVal.name); // Project name\nconsole.log(projectVal.version); // Version number\nconsole.log(projectVal.branch); // Branch name\nconsole.log(projectVal.links.self.project); // URL to the project page\n```\n\nHowever, it's *extremely importing* to note that `parseProject` and other Standard Library utilities ONLY RUN ON THE SERVER.\nIf you need access to this data on the client, run it in the server and pass it to the client by splicing it into the HTML page\nor by making an API request for it.\n\n## Val Town Platform Specifics\n\n- **Redirects:** Use `return new Response(null, { status: 302, headers: { Location: \"/place/to/redirect\" }})` instead of `Response.redirect` which is broken\n- **Images:** Avoid external images or base64 images. Use emojis, unicode symbols, or icon fonts/libraries instead\n- **AI Image:** To inline generate an AI image use: `

`\n- **Storage:** DO NOT use the Deno KV module for storage\n- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods\n- **Weather Data:** Use open-meteo for weather data (doesn't require API keys) unless otherwise specified\n- **View Source:** Add a view source link by importing & using `import.meta.url.replace(\"ems.sh\", \"val.town)\"` (or passing this data to the client) and include `target=\"_top\"` attribute\n- **Error Debugging:** Add `` to HTML to capture client-side errors\n- **Error Handling:** Only use try...catch when there's a clear local resolution; Avoid catches that merely log or return 500s. Let errors bubble up with full context\n- **Environment Variables:** Use `Deno.env.get('keyname')` when you need to, but generally prefer APIs that don't require keys\n- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser\n- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites\n- **React Configuration:** When using React libraries, pin versions with `?deps=react@18.2.0,react-dom@18.2.0` and start the file with `/** @jsxImportSource https://esm.sh/react@18.2.0 */`\n- Ensure all React dependencies and sub-dependencies are pinned to the same version\n- **Styling:** Default to using TailwindCSS via `` unless otherwise specified\n\n## Project Structure and Design Patterns\n\n### Recommended Directory Structure\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Schema definitions\n│ │ ├── queries.ts # DB query functions\n│ │ └── README.md\n│ └── routes/ # Route modules\n│ ├── [route].ts\n│ └── static.ts # Static file serving\n│ ├── index.ts # Main entry point\n│ └── README.md\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx\n│ │ └── [Component].tsx\n│ ├── favicon.svg\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # Frontend JS entry point\n│ ├── README.md\n│ └── style.css\n├── README.md\n└── shared/\n ├── README.md\n └── utils.ts # Shared types and functions\n```\n\n### Backend (Hono) Best Practices\n\n- Hono is the recommended API framework\n- Main entry point should be `backend/index.ts`\n- **Static asset serving:** Use the utility functions to read and serve project files:\n ```ts\n import { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n \n // serve all files in frontend/ and shared/\n app.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\n app.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n \n // For index.html, often you'll want to bootstrap with initial data\n app.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Inject data to avoid extra round-trips\n const initialData = await fetchInitialData();\n const dataScript = ``;\n \n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n });\n ```\n- Create RESTful API routes for CRUD operations\n- Always include this snippet at the top-level Hono app to re-throwing errors to see full stack traces:\n ```ts\n // Unwrap Hono errors to see original error details\n app.onError((err, c) => {\n throw err;\n });\n ```\n\n### Database Patterns\n- Run migrations on startup or comment out for performance\n- Change table names when modifying schemas rather than altering\n- Export clear query functions with proper TypeScript typing\n\n## Common Gotchas and Solutions\n\n1. **Environment Limitations:** \n - Val Town runs on Deno in a serverless context, not Node.js\n - Code in `shared/` must work in both frontend and backend environments\n - Cannot use `Deno` keyword in shared code\n - Use `https://esm.sh` for imports that work in both environments\n\n2. **SQLite Peculiarities:**\n - Limited support for ALTER TABLE operations\n - Create new tables with updated schemas and copy data when needed\n - Always run table creation before querying\n\n3. **React Configuration:**\n - All React dependencies must be pinned to 18.2.0\n - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of React files\n - Rendering issues often come from mismatched React versions\n\n4. **File Handling:**\n - Val Town only supports text files, not binary\n - Use the provided utilities to read files across branches and forks\n - For files in the project, use `readFile` helpers\n\n5. **API Design:**\n - `fetch` handler is the entry point for HTTP vals\n - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`\n\n",[],[830],{"_104":838,"_95":839,"_153":840,"_155":-5,"_156":138,"_157":841,"_159":22,"_106":842,"_100":32,"_161":321,"_163":843,"_164":22,"_165":-5,"_166":844,"_98":845},"de2cf89a-bdb6-11f0-b060-42dde27851f2","CHANGELOG.md","de2cf976-bdb6-11f0-b060-42dde27851f2",152,["D",1762725355749],"# Changelog\n\nAll notable changes to the Molstar Viewer project will be documented in this file.\n\n## [2.0.0] - 2025-01-XX\n\n### Major Restructure - Val Town Native Architecture\n\nComplete restructure of the project to use Val Town best practices with proper routing, TSX components, and JSR imports.\n\n### Added\n\n- **New Project Structure**\n - `backend/` - Hono-based routing and server logic\n - `frontend/apps/` - TSX components for each Molstar application\n - `shared/` - Shared TypeScript types and utilities\n \n- **Four Molstar Applications**\n - `/viewer` - Standard Mol* viewer (fully ported)\n - `/docking-viewer` - Docking viewer (scaffolded)\n - `/mesoscale-explorer` - Mesoscale explorer (scaffolded)\n - `/mvs-stories` - MVS Stories viewer (scaffolded)\n\n- **Viewer App Features** (fully ported from `viewer/`)\n - Complete URL parameter support for configuration\n - Load structures by PDB ID, EMDB ID, AlphaFold DB ID\n - Load structures from custom URLs\n - Snapshot loading (local and remote)\n - MolViewSpec (MVS) support\n - Custom rendering options (pixel scale, transparency, illumination)\n - Provider selection (PDBe or RCSB)\n - Debug and timing modes\n - Error handling with user-friendly messages\n\n- **JSR Integration**\n - All Molstar imports use JSR protocol: `jsr:@zachcp/molstar@5.3.4`\n - Client-side module imports work directly in browser\n\n- **Documentation**\n - Comprehensive README files in each directory\n - URL parameter documentation for viewer app\n - Architecture and development guides\n - Example usage patterns\n\n### Changed\n\n- **Import System**\n - Migrated from `import * as Molstar from 'jsr:@zachcp/molstar'` to proper named imports\n - Changed from `https://jsr.io/` URLs to `jsr:` protocol\n - Now using: `import { Viewer } from \"jsr:@zachcp/molstar@5.3.4\"`\n\n- **Application Entry Point**\n - `index.tsx` now imports and exports the Hono app from `backend/index.tsx`\n - Centralized routing through Hono instead of individual endpoints\n\n- **Component Architecture**\n - Each app is now a standalone TSX component returning full HTML\n - Server-side rendering with `renderToString`\n - Client-side hydration with module scripts\n\n### Technical Details\n\n#### Backend (Hono)\n```tsx\nimport { Hono } from \"https://esm.sh/hono@4\";\nimport { renderToString } from \"https://esm.sh/react-dom@18.2.0/server\";\n\nconst app = new Hono();\napp.get(\"/viewer\", (c) => {\n const html = renderToString(ViewerApp());\n return c.html(html);\n});\n```\n\n#### Frontend (TSX)\n```tsx\n/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nexport default function ViewerApp() {\n return (\n \n ...\n \n

\n \n \n \n );\n}\n```\n\n### Server-Side Rendering\n\n- Routes use `renderToString` from React to server-render components\n- CSS is injected inline from compiled Molstar stylesheets\n- Client-side Molstar initialization happens via inline module scripts\n- This avoids issues with JSR imports in server-side contexts\n\n## 🔧 Development\n\n### Current Status\n\nThe project is currently scaffolded with:\n- ✅ Top-level route structure (Val Town blog style)\n- ✅ Main Hono app in `index.tsx`\n- ✅ Separate route files for each app\n- ✅ TSX components for each app\n- ✅ Viewer app fully functional with JSR imports\n- ✅ Compiled Molstar CSS integration\n- ⏳ Docking viewer (scaffolded)\n- ⏳ Mesoscale explorer (scaffolded)\n- ⏳ MVS Stories (scaffolded)\n\n### Key Implementation Details\n\n1. **CSS Handling**: Molstar CSS is read from `frontend/styles/molstar.css` and injected inline\n2. **Client-Side Initialization**: Molstar viewer is initialized in browser using inline `\n\n\n",[],[99],{"_104":891,"_95":327,"_153":892,"_155":-5,"_156":138,"_157":893,"_159":22,"_106":894,"_100":895,"_161":896,"_163":897,"_164":22,"_165":-5,"_166":898,"_98":899},"5bb014b6-bdc9-11f0-806e-42dde27851f2","0ef36fdc-a844-11f0-98c2-0224a6c84d84",284,["D",1762733297270],12,"http","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Hono } from \"jsr:@hono/hono@4\";\nimport homeRoutes from \"./routes/home.tsx\";\nimport viewerRoute from \"./routes/viewer.tsx\";\nimport dockingViewerRoute from \"./routes/docking-viewer.tsx\";\nimport mesoscaleExplorerRoute from \"./routes/mesoscale-explorer.tsx\";\nimport mvsStoriesRoute from \"./routes/mvs-stories.tsx\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Mount routes\napp.route(\"/\", homeRoutes);\napp.route(\"/\", viewerRoute);\napp.route(\"/\", dockingViewerRoute);\napp.route(\"/\", mesoscaleExplorerRoute);\napp.route(\"/\", mvsStoriesRoute);\n\n// Export the fetch handler for Val Town\nexport default app.fetch;\n",[],[327],{"_104":901,"_95":902,"_153":903,"_155":-5,"_156":138,"_157":904,"_159":22,"_106":905,"_100":906,"_161":219,"_163":907,"_164":22,"_165":-5,"_166":908,"_98":909},"54a50746-bdb3-11f0-aabd-42dde27851f2","molstar-viewer.tsx","d8b5e2ce-a843-11f0-9b40-0224a6c84d84",32,["D",1762723836492],16,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, {\n useEffect,\n useRef,\n} from \"https://esm.sh/react@18.2.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport { Viewer } from \"https://jsr.io/@zachcp/molstar\";\n\ninterface MolstarViewerProps {\n pdbId?: string;\n width?: string;\n height?: string;\n}\n\nconst MolstarViewer: React.FC = ({\n pdbId = \"1FAP\",\n width = \"100%\",\n height = \"600px\",\n}) => {\n const containerRef = useRef(null);\n\n useEffect(() => {\n if (!containerRef.current) return;\n\n const initViewer = async () => {\n try {\n // Clear container\n containerRef.current!.innerHTML = \"\";\n\n // Create viewer instance using JSR package\n const viewer = new Viewer(containerRef.current!, {\n layoutIsExpanded: false,\n layoutShowControls: true,\n layoutShowRemoteState: false,\n layoutShowSequence: true,\n layoutShowLog: false,\n layoutShowLeftPanel: true,\n viewportShowExpand: true,\n viewportShowSelectionMode: false,\n viewportShowAnimation: false,\n pdbProvider: \"rcsb\",\n emdbProvider: \"rcsb\",\n });\n\n // Load the PDB structure\n await viewer.loadStructureFromUrl(\n `https://files.rcsb.org/download/${pdbId}.pdb`,\n \"pdb\",\n );\n\n console.log(`Successfully loaded ${pdbId} structure`);\n } catch (error) {\n console.error(\"Error initializing Molstar viewer:\", error);\n if (containerRef.current) {\n containerRef.current.innerHTML = `\n

🧬 Molstar Viewer

Loading ${pdbId} structure...

\n If this takes too long, you can view the structure at\n \n RCSB PDB\n \n

\n \n

\n `;\n\n // Retry after a delay\n setTimeout(() => initViewer(), 2000);\n }\n }\n };\n\n // Add loading indicator initially\n if (containerRef.current) {\n containerRef.current.innerHTML = `\n

🧬 Initializing Molstar Viewer

Loading ${pdbId} structure...

\n \n

\n `;\n }\n\n initViewer();\n }, [pdbId]);\n\n return (\n \n );\n};\n\nconst App: React.FC = () => {\n return (\n

\n Molstar Viewer - 1FAP Structure\n

\n Displaying the 1FAP (HIV-1 protease) structure using Molstar Viewer v5.\n

\n\n \n\n \n

About 1FAP

\n 1FAP: HIV-1 protease complexed with the inhibitor CGP\n 53820\n

\n Resolution: 2.3 Å | Method: X-ray\n crystallography\n

\n Mouse controls: Left click + drag to rotate, right\n click + drag to zoom, middle click + drag to pan.\n

\n \n View detailed information on RCSB PDB →\n \n

\n \n );\n};\n\nexport default App;\n",[],[902],"files",[150,168,175,183,190,198,205,212,224,231,239,249,256,265,274,281,288,297,307,316,325,334,343,352,362,369,380,389,399,406,412,420,428,438,444,450,460,470,476,482,490,497,503,512,518,526,535,544,554,560,566,577,583,592,602,611,620,628,636,646,653,663,669,678,687,695,704,713,722,731,740,749,758,767,776,785,792,800,810,818,828,837,846,855,864,873,882,890,900],"counts",{"_914":32,"_915":218,"_916":32,"_917":918},"pulls","branches","forks","envVars",{"_919":32,"_920":32},"count","emptyCount","contents",[],{"_104":883,"_156":138,"_153":884,"_95":99,"_163":887,"_161":321,"_100":32,"_155":-5,"_106":924,"_157":885,"_165":-5,"_98":925},["D",1762723987281],[99],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":43,"_100":101,"_98":99,"_102":934,"_148":939,"_910":1207,"_321":1208,"_921":1211,"_1212":-5,"_1213":-5,"_1214":-5,"_1215":-5,"_1216":1217},{"_104":105,"_95":96,"_106":935,"_108":-5,"_109":22,"_110":111,"_112":-5,"_113":-5,"_14":114,"_115":-5,"_116":22,"_117":-5,"_118":32,"_16":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":936,"_132":937,"_135":938,"_147":22},["D",1760366740657],{"_93":94,"_130":131},{"_93":94,"_134":131,"_14":114},{"_100":137,"_95":43,"_104":138,"_139":105,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":96,"_146":94},[940,1024,1165,1174,1177,1180,1183,1186,1189,1192,1195,1198,1201,1204],{"_104":151,"_95":152,"_153":154,"_155":-5,"_156":138,"_157":158,"_159":22,"_106":160,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":941,"_98":1023},[942,1020],{"_104":169,"_95":170,"_153":171,"_155":154,"_156":138,"_157":172,"_159":22,"_106":173,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":943,"_98":1019},[944,947,1016],{"_104":176,"_95":177,"_153":178,"_155":171,"_156":138,"_157":179,"_159":22,"_106":180,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":945,"_98":946},[],[152,170,177],{"_104":184,"_95":185,"_153":186,"_155":171,"_156":138,"_157":187,"_159":22,"_106":188,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":948,"_98":1015},[949,952,979,1009],{"_104":191,"_95":192,"_153":193,"_155":186,"_156":138,"_157":194,"_159":22,"_106":195,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":950,"_98":951},[],[152,170,185,192],{"_104":199,"_95":200,"_153":201,"_155":186,"_156":138,"_157":202,"_159":22,"_106":203,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":953,"_98":978},[954,960,969,975],{"_104":206,"_95":207,"_153":208,"_155":201,"_156":138,"_157":209,"_159":22,"_106":210,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":955,"_98":959},[956],{"_104":213,"_95":214,"_153":215,"_155":208,"_156":138,"_157":216,"_159":22,"_106":217,"_100":218,"_161":219,"_163":220,"_164":22,"_165":-5,"_166":957,"_98":958},[],[152,170,185,200,207,214],[152,170,185,200,207],{"_104":225,"_95":226,"_153":227,"_155":201,"_156":138,"_157":228,"_159":22,"_106":229,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":961,"_98":968},[962,965],{"_104":232,"_95":214,"_153":233,"_155":227,"_156":138,"_157":234,"_159":22,"_106":235,"_100":218,"_161":219,"_163":236,"_164":22,"_165":-5,"_166":963,"_98":964},[],[152,170,185,200,226,214],{"_104":240,"_95":241,"_153":242,"_155":227,"_156":138,"_157":243,"_159":22,"_106":244,"_100":218,"_161":219,"_163":245,"_164":22,"_165":-5,"_166":966,"_98":967},[],[152,170,185,200,226,241],[152,170,185,200,226],{"_104":250,"_95":251,"_153":252,"_155":201,"_156":138,"_157":253,"_159":22,"_106":254,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":970,"_98":974},[971],{"_104":257,"_95":214,"_153":258,"_155":252,"_156":138,"_157":259,"_159":22,"_106":260,"_100":218,"_161":219,"_163":261,"_164":22,"_165":-5,"_166":972,"_98":973},[],[152,170,185,200,251,214],[152,170,185,200,251],{"_104":266,"_95":267,"_153":268,"_155":201,"_156":138,"_157":269,"_159":22,"_106":270,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":976,"_98":977},[],[152,170,185,200,267],[152,170,185,200],{"_104":275,"_95":276,"_153":277,"_155":186,"_156":138,"_157":278,"_159":22,"_106":279,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":980,"_98":1008},[981,990,993,996,999,1002,1005],{"_104":282,"_95":283,"_153":284,"_155":277,"_156":138,"_157":285,"_159":22,"_106":286,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":982,"_98":989},[983,986],{"_104":289,"_95":290,"_153":291,"_155":284,"_156":138,"_157":292,"_159":22,"_106":293,"_100":218,"_161":219,"_163":294,"_164":22,"_165":-5,"_166":984,"_98":985},[],[152,170,185,276,283,290],{"_104":298,"_95":299,"_153":300,"_155":284,"_156":138,"_157":301,"_159":22,"_106":302,"_100":218,"_161":219,"_163":303,"_164":22,"_165":-5,"_166":987,"_98":988},[],[152,170,185,276,283,299],[152,170,185,276,283],{"_104":308,"_95":309,"_153":310,"_155":277,"_156":138,"_157":311,"_159":22,"_106":312,"_100":218,"_161":219,"_163":313,"_164":22,"_165":-5,"_166":991,"_98":992},[],[152,170,185,276,309],{"_104":317,"_95":99,"_153":318,"_155":277,"_156":138,"_157":319,"_159":22,"_106":320,"_100":218,"_161":321,"_163":322,"_164":22,"_165":-5,"_166":994,"_98":995},[],[152,170,185,276,99],{"_104":326,"_95":327,"_153":328,"_155":277,"_156":138,"_157":329,"_159":22,"_106":330,"_100":218,"_161":219,"_163":331,"_164":22,"_165":-5,"_166":997,"_98":998},[],[152,170,185,276,327],{"_104":335,"_95":336,"_153":337,"_155":277,"_156":138,"_157":338,"_159":22,"_106":339,"_100":218,"_161":321,"_163":340,"_164":22,"_165":-5,"_166":1000,"_98":1001},[],[152,170,185,276,336],{"_104":344,"_95":345,"_153":346,"_155":277,"_156":138,"_157":347,"_159":22,"_106":348,"_100":218,"_161":321,"_163":349,"_164":22,"_165":-5,"_166":1003,"_98":1004},[],[152,170,185,276,345],{"_104":353,"_95":354,"_153":355,"_155":277,"_156":138,"_157":356,"_159":22,"_106":357,"_100":218,"_161":219,"_163":358,"_164":22,"_165":-5,"_166":1006,"_98":1007},[],[152,170,185,276,354],[152,170,185,276],{"_104":363,"_95":364,"_153":365,"_155":186,"_156":138,"_157":366,"_159":22,"_106":367,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":1010,"_98":1014},[1011],{"_104":370,"_95":371,"_153":372,"_155":365,"_156":138,"_157":373,"_159":22,"_106":374,"_100":218,"_161":219,"_163":375,"_164":22,"_165":-5,"_166":1012,"_98":1013},[],[152,170,185,364,371],[152,170,185,364],[152,170,185],{"_104":381,"_95":382,"_153":383,"_155":171,"_156":138,"_157":384,"_159":22,"_106":385,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":1017,"_98":1018},[],[152,170,382],[152,170],{"_104":390,"_95":391,"_153":392,"_155":154,"_156":138,"_157":393,"_159":22,"_106":394,"_100":218,"_161":321,"_163":395,"_164":22,"_165":-5,"_166":1021,"_98":1022},[],[152,391],[152],{"_104":400,"_95":401,"_153":402,"_155":-5,"_156":138,"_157":403,"_159":22,"_106":404,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":1025,"_98":1164},[1026,1038,1116,1122,1137,1140,1143,1146,1149,1152,1155,1158,1161],{"_104":407,"_95":177,"_153":408,"_155":402,"_156":138,"_157":409,"_159":22,"_106":410,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":1027,"_98":1037},[1028,1031,1034],{"_104":413,"_95":99,"_153":414,"_155":408,"_156":138,"_157":415,"_159":22,"_106":416,"_100":218,"_161":321,"_163":417,"_164":22,"_165":-5,"_166":1029,"_98":1030},[],[401,177,99],{"_104":421,"_95":290,"_153":422,"_155":408,"_156":138,"_157":423,"_159":22,"_106":424,"_100":218,"_161":219,"_163":425,"_164":22,"_165":-5,"_166":1032,"_98":1033},[],[401,177,290],{"_104":429,"_95":430,"_153":431,"_155":408,"_156":138,"_157":432,"_159":22,"_106":433,"_100":218,"_161":219,"_163":434,"_164":22,"_165":-5,"_166":1035,"_98":1036},[],[401,177,430],[401,177],{"_104":439,"_95":185,"_153":440,"_155":402,"_156":138,"_157":441,"_159":22,"_106":442,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":1039,"_98":1115},[1040,1049,1082,1091,1100,1103,1106,1109,1112],{"_104":445,"_95":192,"_153":446,"_155":440,"_156":138,"_157":447,"_159":22,"_106":448,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":1041,"_98":1048},[1042,1045],{"_104":451,"_95":452,"_153":453,"_155":446,"_156":138,"_157":454,"_159":22,"_106":455,"_100":456,"_161":219,"_163":457,"_164":22,"_165":-5,"_166":1043,"_98":1044},[],[401,185,192,452],{"_104":461,"_95":462,"_153":463,"_155":446,"_156":138,"_157":464,"_159":22,"_106":465,"_100":456,"_161":219,"_163":466,"_164":22,"_165":-5,"_166":1046,"_98":1047},[],[401,185,192,462],[401,185,192],{"_104":471,"_95":200,"_153":472,"_155":440,"_156":138,"_157":473,"_159":22,"_106":474,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":1050,"_98":1081},[1051,1057,1060,1066,1075,1078],{"_104":477,"_95":207,"_153":478,"_155":472,"_156":138,"_157":479,"_159":22,"_106":480,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":1052,"_98":1056},[1053],{"_104":483,"_95":241,"_153":484,"_155":478,"_156":138,"_157":101,"_159":22,"_106":485,"_100":456,"_161":219,"_163":486,"_164":22,"_165":-5,"_166":1054,"_98":1055},[],[401,185,200,207,241],[401,185,200,207],{"_104":491,"_95":226,"_153":492,"_155":472,"_156":138,"_157":493,"_159":22,"_106":494,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":1058,"_98":1059},[],[401,185,200,226],{"_104":498,"_95":251,"_153":499,"_155":472,"_156":138,"_157":500,"_159":22,"_106":501,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":1061,"_98":1065},[1062],{"_104":504,"_95":241,"_153":505,"_155":499,"_156":138,"_157":506,"_159":22,"_106":507,"_100":456,"_161":219,"_163":508,"_164":22,"_165":-5,"_166":1063,"_98":1064},[],[401,185,200,251,241],[401,185,200,251],{"_104":513,"_95":267,"_153":514,"_155":472,"_156":138,"_157":515,"_159":22,"_106":516,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":1067,"_98":1074},[1068,1071],{"_104":519,"_95":214,"_153":520,"_155":514,"_156":138,"_157":521,"_159":22,"_106":522,"_100":456,"_161":219,"_163":523,"_164":22,"_165":-5,"_166":1069,"_98":1070},[],[401,185,200,267,214],{"_104":527,"_95":241,"_153":528,"_155":514,"_156":138,"_157":529,"_159":22,"_106":530,"_100":456,"_161":219,"_163":531,"_164":22,"_165":-5,"_166":1072,"_98":1073},[],[401,185,200,267,241],[401,185,200,267],{"_104":536,"_95":537,"_153":538,"_155":472,"_156":138,"_157":539,"_159":22,"_106":540,"_100":456,"_161":219,"_163":541,"_164":22,"_165":-5,"_166":1076,"_98":1077},[],[401,185,200,537],{"_104":545,"_95":546,"_153":547,"_155":472,"_156":138,"_157":548,"_159":22,"_106":549,"_100":456,"_161":219,"_163":550,"_164":22,"_165":-5,"_166":1079,"_98":1080},[],[401,185,200,546],[401,185,200],{"_104":555,"_95":276,"_153":556,"_155":440,"_156":138,"_157":557,"_159":22,"_106":558,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":1083,"_98":1090},[1084],{"_104":561,"_95":283,"_153":562,"_155":556,"_156":138,"_157":563,"_159":22,"_106":564,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":1085,"_98":1089},[1086],{"_104":567,"_95":568,"_153":569,"_155":562,"_156":138,"_157":570,"_159":22,"_106":571,"_100":218,"_161":219,"_163":572,"_164":22,"_165":-5,"_166":1087,"_98":1088},[],[401,185,276,283,568],[401,185,276,283],[401,185,276],{"_104":578,"_95":364,"_153":579,"_155":440,"_156":138,"_157":580,"_159":22,"_106":581,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":1092,"_98":1099},[1093,1096],{"_104":584,"_95":585,"_153":586,"_155":579,"_156":138,"_157":587,"_159":22,"_106":588,"_100":456,"_161":219,"_163":589,"_164":22,"_165":-5,"_166":1094,"_98":1095},[],[401,185,364,585],{"_104":593,"_95":594,"_153":595,"_155":579,"_156":138,"_157":596,"_159":22,"_106":597,"_100":456,"_161":219,"_163":598,"_164":22,"_165":-5,"_166":1097,"_98":1098},[],[401,185,364,594],[401,185,364],{"_104":603,"_95":604,"_153":605,"_155":440,"_156":138,"_157":606,"_159":22,"_106":607,"_100":456,"_161":219,"_163":608,"_164":22,"_165":-5,"_166":1101,"_98":1102},[],[401,185,604],{"_104":612,"_95":613,"_153":614,"_155":440,"_156":138,"_157":615,"_159":22,"_106":616,"_100":218,"_161":321,"_163":617,"_164":22,"_165":-5,"_166":1104,"_98":1105},[],[401,185,613],{"_104":621,"_95":99,"_153":622,"_155":440,"_156":138,"_157":623,"_159":22,"_106":624,"_100":456,"_161":321,"_163":625,"_164":22,"_165":-5,"_166":1107,"_98":1108},[],[401,185,99],{"_104":629,"_95":290,"_153":630,"_155":440,"_156":138,"_157":631,"_159":22,"_106":632,"_100":456,"_161":219,"_163":633,"_164":22,"_165":-5,"_166":1110,"_98":1111},[],[401,185,290],{"_104":637,"_95":638,"_153":639,"_155":440,"_156":138,"_157":640,"_159":22,"_106":641,"_100":456,"_161":321,"_163":642,"_164":22,"_165":-5,"_166":1113,"_98":1114},[],[401,185,638],[401,185],{"_104":647,"_95":648,"_153":649,"_155":402,"_156":138,"_157":650,"_159":22,"_106":651,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":1117,"_98":1121},[1118],{"_104":654,"_95":655,"_153":656,"_155":649,"_156":138,"_157":657,"_159":22,"_106":658,"_100":32,"_161":321,"_163":659,"_164":22,"_165":-5,"_166":1119,"_98":1120},[],[401,648,655],[401,648],{"_104":664,"_95":382,"_153":665,"_155":402,"_156":138,"_157":666,"_159":22,"_106":667,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":1123,"_98":1136},[1124,1127,1130,1133],{"_104":670,"_95":604,"_153":671,"_155":665,"_156":138,"_157":672,"_159":22,"_106":673,"_100":674,"_161":219,"_163":675,"_164":22,"_165":-5,"_166":1125,"_98":1126},[],[401,382,604],{"_104":679,"_95":680,"_153":681,"_155":665,"_156":138,"_157":682,"_159":22,"_106":683,"_100":218,"_161":219,"_163":684,"_164":22,"_165":-5,"_166":1128,"_98":1129},[],[401,382,680],{"_104":688,"_95":613,"_153":689,"_155":665,"_156":138,"_157":690,"_159":22,"_106":691,"_100":218,"_161":321,"_163":692,"_164":22,"_165":-5,"_166":1131,"_98":1132},[],[401,382,613],{"_104":696,"_95":99,"_153":697,"_155":665,"_156":138,"_157":698,"_159":22,"_106":699,"_100":218,"_161":321,"_163":700,"_164":22,"_165":-5,"_166":1134,"_98":1135},[],[401,382,99],[401,382],{"_104":705,"_95":706,"_153":707,"_155":402,"_156":138,"_157":708,"_159":22,"_106":709,"_100":218,"_161":219,"_163":710,"_164":22,"_165":-5,"_166":1138,"_98":1139},[],[401,706],{"_104":714,"_95":715,"_153":716,"_155":402,"_156":138,"_157":717,"_159":22,"_106":718,"_100":218,"_161":219,"_163":719,"_164":22,"_165":-5,"_166":1141,"_98":1142},[],[401,715],{"_104":723,"_95":724,"_153":725,"_155":402,"_156":138,"_157":726,"_159":22,"_106":727,"_100":32,"_161":219,"_163":728,"_164":22,"_165":-5,"_166":1144,"_98":1145},[],[401,724],{"_104":732,"_95":733,"_153":734,"_155":402,"_156":138,"_157":735,"_159":22,"_106":736,"_100":218,"_161":219,"_163":737,"_164":22,"_165":-5,"_166":1147,"_98":1148},[],[401,733],{"_104":741,"_95":742,"_153":743,"_155":402,"_156":138,"_157":744,"_159":22,"_106":745,"_100":218,"_161":219,"_163":746,"_164":22,"_165":-5,"_166":1150,"_98":1151},[],[401,742],{"_104":750,"_95":751,"_153":752,"_155":402,"_156":138,"_157":753,"_159":22,"_106":754,"_100":218,"_161":219,"_163":755,"_164":22,"_165":-5,"_166":1153,"_98":1154},[],[401,751],{"_104":759,"_95":760,"_153":761,"_155":402,"_156":138,"_157":762,"_159":22,"_106":763,"_100":218,"_161":219,"_163":764,"_164":22,"_165":-5,"_166":1156,"_98":1157},[],[401,760],{"_104":768,"_95":769,"_153":770,"_155":402,"_156":138,"_157":771,"_159":22,"_106":772,"_100":456,"_161":219,"_163":773,"_164":22,"_165":-5,"_166":1159,"_98":1160},[],[401,769],{"_104":777,"_95":299,"_153":778,"_155":402,"_156":138,"_157":779,"_159":22,"_106":780,"_100":32,"_161":219,"_163":781,"_164":22,"_165":-5,"_166":1162,"_98":1163},[],[401,299],[401],{"_104":786,"_95":787,"_153":788,"_155":-5,"_156":138,"_157":789,"_159":22,"_106":790,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":1166,"_98":1173},[1167,1170],{"_104":793,"_95":391,"_153":794,"_155":788,"_156":138,"_157":795,"_159":22,"_106":796,"_100":32,"_161":321,"_163":797,"_164":22,"_165":-5,"_166":1168,"_98":1169},[],[787,391],{"_104":801,"_95":802,"_153":803,"_155":788,"_156":138,"_157":804,"_159":22,"_106":805,"_100":32,"_161":219,"_163":806,"_164":22,"_165":-5,"_166":1171,"_98":1172},[],[787,802],[787],{"_104":811,"_95":812,"_153":813,"_155":-5,"_156":138,"_157":814,"_159":22,"_106":815,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":1175,"_98":1176},[],[812],{"_104":819,"_95":820,"_153":821,"_155":-5,"_156":138,"_157":822,"_159":823,"_106":824,"_100":32,"_161":321,"_163":825,"_164":22,"_165":-5,"_166":1178,"_98":1179},[],[820],{"_104":829,"_95":830,"_153":831,"_155":-5,"_156":138,"_157":832,"_159":823,"_106":833,"_100":32,"_161":321,"_163":834,"_164":22,"_165":-5,"_166":1181,"_98":1182},[],[830],{"_104":838,"_95":839,"_153":840,"_155":-5,"_156":138,"_157":841,"_159":22,"_106":842,"_100":32,"_161":321,"_163":843,"_164":22,"_165":-5,"_166":1184,"_98":1185},[],[839],{"_104":847,"_95":848,"_153":849,"_155":-5,"_156":138,"_157":850,"_159":22,"_106":851,"_100":32,"_161":321,"_163":852,"_164":22,"_165":-5,"_166":1187,"_98":1188},[],[848],{"_104":856,"_95":857,"_153":858,"_155":-5,"_156":138,"_157":859,"_159":22,"_106":860,"_100":32,"_161":321,"_163":861,"_164":22,"_165":-5,"_166":1190,"_98":1191},[],[857],{"_104":865,"_95":391,"_153":866,"_155":-5,"_156":138,"_157":867,"_159":22,"_106":868,"_100":869,"_161":321,"_163":870,"_164":22,"_165":-5,"_166":1193,"_98":1194},[],[391],{"_104":874,"_95":875,"_153":876,"_155":-5,"_156":138,"_157":877,"_159":22,"_106":878,"_100":32,"_161":321,"_163":879,"_164":22,"_165":-5,"_166":1196,"_98":1197},[],[875],{"_104":883,"_95":99,"_153":884,"_155":-5,"_156":138,"_157":885,"_159":22,"_106":886,"_100":32,"_161":321,"_163":887,"_164":22,"_165":-5,"_166":1199,"_98":1200},[],[99],{"_104":891,"_95":327,"_153":892,"_155":-5,"_156":138,"_157":893,"_159":22,"_106":894,"_100":895,"_161":896,"_163":897,"_164":22,"_165":-5,"_166":1202,"_98":1203},[],[327],{"_104":901,"_95":902,"_153":903,"_155":-5,"_156":138,"_157":904,"_159":22,"_106":905,"_100":906,"_161":219,"_163":907,"_164":22,"_165":-5,"_166":1205,"_98":1206},[],[902],[940,942,944,947,949,952,954,956,960,962,965,969,971,975,979,981,983,986,990,993,996,999,1002,1005,1009,1011,1016,1020,1024,1026,1028,1031,1034,1038,1040,1042,1045,1049,1051,1053,1057,1060,1062,1066,1068,1071,1075,1078,1082,1084,1086,1091,1093,1096,1100,1103,1106,1109,1112,1116,1118,1122,1124,1127,1130,1133,1137,1140,1143,1146,1149,1152,1155,1158,1161,1165,1167,1170,1174,1177,1180,1183,1186,1189,1192,1195,1198,1201,1204],{"_104":883,"_95":99,"_153":884,"_155":-5,"_156":138,"_157":885,"_159":22,"_106":1209,"_100":32,"_161":321,"_163":887,"_164":22,"_165":-5,"_98":1210},["D",1762723987281],[99],[],"upstream","pull","ahead","behind","templates",[],"actionData","errors"]

zcpbx

MolstarViewer