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