;\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","deleted","label",[168,169,170,149],"frontend","mesoscale-explorer","ui","permalink","https://www.val.town/x/zcpbx/MolstarViewer/code/frontend/mesoscale-explorer/ui/panels.tsx","extension","actionData","errors"]