remove membrane UI component

src/viewer/helpers/preset.ts

@@ -18,7 +18,14 @@ import { Structure, StructureSelection, QueryContext, StructureElement } from 'm
 import { compile } from 'molstar/lib/mol-script/runtime/query/compiler';
 import { InitVolumeStreaming } from 'molstar/lib/mol-plugin/behavior/dynamic/volume-streaming/transformers';
 import { ViewerState } from '../types';
-import { StateSelection, StateObjectSelector, StateObject, StateTransformer, StateObjectRef } from 'molstar/lib/mol-state';
+import {
+    StateSelection,
+    StateObjectSelector,
+    StateObject,
+    StateTransformer,
+    StateObjectRef,
+    StateAction
+} from 'molstar/lib/mol-state';
 import { VolumeStreaming } from 'molstar/lib/mol-plugin/behavior/dynamic/volume-streaming/behavior';
 import { Mat4 } from 'molstar/lib/mol-math/linear-algebra';
 import { CustomStructureProperties } from 'molstar/lib/mol-plugin-state/transforms/model';
@@ -27,8 +34,9 @@ import { StructureRepresentationRegistry } from 'molstar/lib/mol-repr/structure/
 import { StructureSelectionQueries as Q } from 'molstar/lib/mol-plugin-state/helpers/structure-selection-query';
 import { PluginCommands } from 'molstar/lib/mol-plugin/commands';
 import { InteractivityManager } from 'molstar/lib/mol-plugin-state/manager/interactivity';
-import { EnableMembraneOrientation } from '../ui/membrane';
 import { MembraneOrientationProvider } from 'molstar/lib/extensions/anvil/prop';
+import { Task } from 'molstar/lib/mol-task';
+import { MembraneOrientationPreset } from 'molstar/lib/extensions/anvil/behavior';
 
 type Target = {
     readonly auth_seq_id?: number
@@ -355,6 +363,12 @@ export const RcsbPreset = TrajectoryHierarchyPresetProvider({
     }
 });
 
+const EnableMembraneOrientation = StateAction.build({
+    from: PluginStateObject.Molecule.Structure,
+})(({ a, ref, state }, plugin: PluginContext) => Task.create('Enable Membrane Orientation', async ctx => {
+    await MembraneOrientationPreset.apply(ref, Object.create(null), plugin);
+}));
+
 export function createSelectionExpression(entryId: string, range?: Range): SelectionExpression[] {
     if (range) {
         const residues: number[] = (range.label_seq_id) ? toRange(range.label_seq_id.beg, range.label_seq_id.end) : [];

src/viewer/index.html

@@ -288,7 +288,10 @@
                 },
                 {
                     id: '1BRR',
-                    info: 'membrane: X-RAY STRUCTURE OF THE BACTERIORHODOPSIN TRIMER/LIPID COMPLEX'
+                    info: 'membrane: X-RAY STRUCTURE OF THE BACTERIORHODOPSIN TRIMER/LIPID COMPLEX',
+                    props: {
+                        kind: 'membrane'
+                    }
                 },
                 {
                     id: '3SN6',

src/viewer/index.ts

@@ -64,7 +64,6 @@ const DefaultViewerProps = {
     showSessionControls: false,
     showStructureSourceControls: true,
     showSuperpositionControls: true,
-    showMembraneOrientationControls: false,
     modelUrlProviders: [
         (pdbId: string) => ({
             url: `//models.rcsb.org/${pdbId.toLowerCase()}.bcif`,
@@ -155,7 +154,6 @@ export class Viewer {
             showSessionControls: o.showSessionControls,
             showStructureSourceControls: o.showStructureSourceControls,
             showSuperpositionControls: o.showSuperpositionControls,
-            showMembraneOrientationControls: o.showMembraneOrientationControls,
             modelLoader: new ModelLoader(this.plugin),
             collapsed: new BehaviorSubject<CollapsedState>({
                 selection: true,
@@ -164,8 +162,7 @@ export class Viewer {
                 superposition: true,
                 component: false,
                 volume: true,
-                custom: true,
-                membrane: true
+                custom: true
             })
         };
 

src/viewer/types.ts

@@ -40,7 +40,6 @@ export type CollapsedState = {
     component: boolean
     volume: boolean
     custom: boolean
-    membrane: boolean
 }
 
 export interface ViewerState {
@@ -49,7 +48,6 @@ export interface ViewerState {
     showSessionControls: boolean
     showStructureSourceControls: boolean
     showSuperpositionControls: boolean
-    showMembraneOrientationControls: boolean
     modelLoader: ModelLoader
     collapsed: BehaviorSubject<CollapsedState>
 }

src/viewer/ui/controls.tsx

@@ -16,7 +16,6 @@ import { StructureComponentControls } from 'molstar/lib/mol-plugin-ui/structure/
 import { VolumeStreamingControls } from 'molstar/lib/mol-plugin-ui/structure/volume';
 import { SessionControls } from './session';
 import { StrucmotifSubmitControls } from './strucmotif';
-import { MembraneOrientationControls } from './membrane';
 
 export class StructureTools extends PluginUIComponent {
     get customState() {
@@ -36,7 +35,6 @@ export class StructureTools extends PluginUIComponent {
             {this.customState.showSuperpositionControls && <StructureSuperpositionControls initiallyCollapsed={collapsed.superposition} />}
             <StructureComponentControls initiallyCollapsed={collapsed.component} />
             <VolumeStreamingControls header='Density' initiallyCollapsed={collapsed.volume} />
-            {this.customState.showMembraneOrientationControls && <MembraneOrientationControls initiallyCollapsed={collapsed.membrane} />}
             <CustomStructureControls initiallyCollapsed={collapsed.custom} />
         </>;
     }

src/viewer/ui/membrane.tsx

@@ -1,166 +0,0 @@
-/**
- * Copyright (c) 2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
- *
- * @author Sebastian Bittrich <sebastian.bittrich@rcsb.org>
- */
-
-import { CollapsableControls, CollapsableState } from 'molstar/lib/mol-plugin-ui/base';
-import { StateTransform } from 'molstar/lib/mol-state/transform';
-import { StructureHierarchyManager } from 'molstar/lib/mol-plugin-state/manager/structure/hierarchy';
-import { ApplyActionControl } from 'molstar/lib/mol-plugin-ui/state/apply-action';
-import { CheckSvg } from 'molstar/lib/mol-plugin-ui/controls/icons';
-import { StateAction, StateSelection } from 'molstar/lib/mol-state';
-import { PluginStateObject } from 'molstar/lib/mol-plugin-state/objects';
-import { PluginContext } from 'molstar/lib/mol-plugin/context';
-import { Task } from 'molstar/lib/mol-task';
-import { MembraneOrientationPreset, tryCreateMembraneOrientation } from 'molstar/lib/extensions/anvil/behavior';
-import { ParameterControls } from 'molstar/lib/mol-plugin-ui/controls/parameters';
-import { ParamDefinition as PD } from 'molstar/lib/mol-util/param-definition';
-import {
-    MembraneOrientation,
-    MembraneOrientationProps,
-    MembraneOrientationProvider
-} from 'molstar/lib/extensions/anvil/prop';
-
-interface MembraneOrientationControlState extends CollapsableState {
-    isBusy: boolean
-    error: boolean
-}
-
-/**
- * The component that exposes the ANVIL functionality.
- */
-export class MembraneOrientationControls extends CollapsableControls<{}, MembraneOrientationControlState> {
-    protected defaultState() {
-        return {
-            header: 'Membrane Layer',
-            isCollapsed: false,
-            isBusy: false,
-            isHidden: true,
-            brand: { accent:  'gray' as const, svg: MembraneIconSvg },
-            error: false
-        };
-    }
-
-    componentDidMount() {
-        this.subscribe(this.plugin.managers.structure.hierarchy.behaviors.selection, () => {
-            this.setState({
-                isHidden: !this.canEnable(),
-                description: StructureHierarchyManager.getSelectedStructuresDescription(this.plugin)
-            });
-        });
-        this.subscribe(this.plugin.state.events.cell.stateUpdated, e => {
-            if (StateTransform.hasTag(e.cell.transform, MembraneOrientation.Tag.Representation)) this.forceUpdate();
-        });
-        this.subscribe(this.plugin.behaviors.state.isBusy, v => {
-            this.setState({ isBusy: v });
-        });
-    }
-
-    get pivot() {
-        return this.plugin.managers.structure.hierarchy.selection.structures[0];
-    }
-
-    canEnable() {
-        const { selection } = this.plugin.managers.structure.hierarchy;
-        if (selection.structures.length !== 1) return false;
-        const pivot = this.pivot.cell;
-        if (!pivot.obj) return false;
-        // TODO check if delegate makes sense
-        return true;
-    }
-
-    renderEnable() {
-        const pivot = this.pivot;
-        if (!pivot.cell.parent) return null;
-        return <ApplyActionControl state={pivot.cell.parent} action={EnableMembraneOrientation} initiallyCollapsed={true} nodeRef={pivot.cell.transform.ref} simpleApply={{ header: 'Enable', icon: CheckSvg }} />;
-    }
-
-    get params() {
-        const structure = this.pivot.cell.obj?.data;
-        return PD.clone(structure ? MembraneOrientationProvider.getParams(structure) : MembraneOrientationProvider.defaultParams);
-    }
-
-    get values() {
-        const structure = this.pivot.cell.obj?.data;
-        if (structure) {
-            return MembraneOrientationProvider.props(structure);
-        } else {
-            return PD.getDefaultValues(MembraneOrientationProvider.defaultParams);
-        }
-    }
-
-    async updateMembraneOrientation(values: MembraneOrientationProps) {
-        const s = this.pivot;
-        const currValues = MembraneOrientationProvider.props(s.cell.obj!.data);
-        if (PD.areEqual(MembraneOrientationProvider.defaultParams, currValues, values)) return;
-
-        if (s.properties) {
-            const b = this.plugin.state.data.build();
-            b.to(s.properties.cell).update(old => {
-                old.properties[MembraneOrientationProvider.descriptor.name] = values;
-            });
-            await b.commit();
-        } else {
-            const pd = this.plugin.customStructureProperties.getParams(s.cell.obj?.data);
-            const params = PD.getDefaultValues(pd);
-            params.properties[MembraneOrientationProvider.descriptor.name] = values;
-            await this.plugin.builders.structure.insertStructureProperties(s.cell, params);
-        }
-
-        for (const components of this.plugin.managers.structure.hierarchy.currentComponentGroups) {
-            tryCreateMembraneOrientation(this.plugin, s.cell);
-            await this.plugin.managers.structure.component.updateRepresentationsTheme(components, {});
-        }
-    }
-
-    paramsOnChange = (options: MembraneOrientationProps) => {
-        this.updateMembraneOrientation(options);
-    }
-
-    get hasMembraneOrientation() {
-        return !this.pivot.cell.parent || !!StateSelection.findTagInSubtree(this.pivot.cell.parent.tree, this.pivot.cell.transform.ref, MembraneOrientation.Tag.Representation);
-    }
-
-    get enable() {
-        return !this.hasMembraneOrientation;
-    }
-
-    renderParams() {
-        return <>
-            <ParameterControls params={this.params} values={this.values} onChangeValues={this.paramsOnChange} />
-        </>;
-    }
-
-    renderControls() {
-        if (!this.pivot) return null;
-        if (this.enable) return this.renderEnable();
-        return this.renderParams();
-    }
-}
-
-export const EnableMembraneOrientation = StateAction.build({
-    from: PluginStateObject.Molecule.Structure,
-})(({ a, ref, state }, plugin: PluginContext) => Task.create('Enable Membrane Orientation', async ctx => {
-    await MembraneOrientationPreset.apply(ref, Object.create(null), plugin);
-}));
-
-const _MembraneIcon = <svg width='24px' height='24px' viewBox='0 0 12 12'>
-    <rect x="6.71" y="2.45" width="1.96" height="7.1" ry=".979" fill="none" strokeLinejoin="round"/>
-    <rect x="3.33" y="2.45" width="1.96" height="7.1" ry=".979" fill="none" strokeLinejoin="round"/>
-    <g>
-        <ellipse cx="1.77" cy="4.64" rx=".456" ry=".456"/>
-        <ellipse cx=".685" cy="4.64" rx=".456" ry=".456"/>
-        <ellipse cx=".685" cy="7.36" rx=".456" ry=".456"/>
-        <ellipse cx="1.77" cy="7.36" rx=".456" ry=".456"/>
-        <ellipse cx="9.19" cy="7.36" rx=".456" ry=".456"/>
-        <ellipse cx="11.3" cy="7.36" rx=".456" ry=".456"/>
-        <ellipse cx="10.3" cy="4.64" rx=".456" ry=".456"/>
-        <ellipse cx="9.19" cy="4.64" rx=".456" ry=".456"/>
-        <ellipse cx="2.86" cy="4.64" rx=".456" ry=".456"/>
-        <ellipse cx="2.86" cy="7.36" rx=".456" ry=".456"/>
-        <ellipse cx="10.3" cy="7.36" rx=".456" ry=".456"/>
-        <ellipse cx="11.3" cy="4.64" rx=".456" ry=".456"/>
-    </g>
-</svg>;
-export function MembraneIconSvg() { return _MembraneIcon; }