wip

src/viewer/helpers/preset.ts

@@ -35,7 +35,6 @@ import {
 import {
     createSelectionExpressions,
     normalizeTargets,
-    Range,
     SelectionExpression,
     Target,
     targetToLoci,
@@ -51,12 +50,12 @@ type BaseProps = {
 type ColorProp = {
     name: 'color',
     value: number,
-    positions: Range[]
+    targets: Target[]
 };
 
 export type PropsetProps = {
     kind: 'prop-set',
-    selection?: (Range & {
+    targets?: (Target & {
         matrix?: Mat4
     })[],
     representation: ColorProp[]
@@ -160,10 +159,9 @@ export const RcsbPreset = TrajectoryHierarchyPresetProvider({
         let representation: StructureRepresentationPresetProvider.Result | undefined = undefined;
 
         if (p.kind === 'prop-set') {
-
             // This creates a single structure from selections/transformations as specified
             const _structure = plugin.state.data.build().to(modelProperties)
-                .apply(FlexibleStructureFromModel, { selection: p.selection });
+                .apply(FlexibleStructureFromModel, { targets: p.targets });
             structure = await _structure.commit();
 
             const _structureProperties = plugin.state.data.build().to(structure)
@@ -175,13 +173,15 @@ export const RcsbPreset = TrajectoryHierarchyPresetProvider({
             for (const repr of p.representation) {
                 if (repr.name === 'color') {
                     const colorValue = repr.value;
-                    const positions = repr.positions;
-                    for (const range of positions) {
-                        if (!structure.data!.inheritedPropertyData.colors[range.label_asym_id])
-                            structure.data!.inheritedPropertyData.colors[range.label_asym_id] = new Map();
-                        const residues: number[] = (range.label_seq_id) ? toRange(range.label_seq_id.beg, range.label_seq_id.end) : [];
+                    const targets = repr.targets;
+                    for (const target of targets) {
+                        if (!target.label_asym_id) continue;
+
+                        if (!structure.data!.inheritedPropertyData.colors[target.label_asym_id])
+                            structure.data!.inheritedPropertyData.colors[target.label_asym_id] = new Map();
+                        const residues: number[] = (target.label_seq_range) ? toRange(target.label_seq_range.beg, target.label_seq_range.end) : [];
                         for (const num of residues) {
-                            structure.data!.inheritedPropertyData.colors[range.label_asym_id].set(num, colorValue);
+                            structure.data!.inheritedPropertyData.colors[target.label_asym_id].set(num, colorValue);
                         }
                     }
                 }
@@ -191,9 +191,9 @@ export const RcsbPreset = TrajectoryHierarchyPresetProvider({
             // creating structure selections to have multiple components per each flexible part
             const entryId = model.data!.entryId;
             let selectionExpressions: SelectionExpression[] = [];
-            if (p.selection) {
-                for (const range of p.selection) {
-                    selectionExpressions = selectionExpressions.concat(createSelectionExpressions(entryId, range));
+            if (p.targets) {
+                for (const target of p.targets) {
+                    selectionExpressions = selectionExpressions.concat(createSelectionExpressions(entryId, target));
                 }
             } else {
                 selectionExpressions = selectionExpressions.concat(createSelectionExpressions(entryId));

src/viewer/helpers/selection.ts

@@ -5,11 +5,23 @@ import { Expression } from 'molstar/lib/mol-script/language/expression';
 import { QueryContext, Structure, StructureElement, StructureSelection } from 'molstar/lib/mol-model/structure';
 import { compile } from 'molstar/lib/mol-script/runtime/query/compiler';
 
+export type Range = {
+    readonly beg: number
+    readonly end?: number
+}
+
 export type Target = {
     readonly auth_seq_id?: number
+    // readonly auth_seq_range?: Range
     readonly label_seq_id?: number
+    readonly label_seq_range?: Range
     readonly label_comp_id?: string
+    // readonly auth_asym_id?: string
     readonly label_asym_id?: string
+    /**
+     * Mol*-internal UUID of a model.
+     */
+    readonly modelId?: string
     /**
      * Mol*-internal representation, like 'ASM_2'. Enumerated in the order of appearance in the source file. Specify the
      * assemblyId when using this selector.
@@ -23,17 +35,17 @@ export type Target = {
     readonly structOperExpression?: string
 }
 
-export type Range = {
-    label_asym_id: string
-    label_seq_id?: { beg: number, end?: number }
+type SelectBase = {
+    readonly modelId: string
+    readonly label_asym_id: string
 }
-
-export const toRange = (start: number, end?: number) => {
-    if (!end) return [start];
-    const b = start < end ? start : end;
-    const e = start < end ? end : start;
-    return [...Array(e - b + 1)].map((_, i) => b + i);
-};
+export type SelectSingle = {
+    readonly label_seq_id: number
+} & SelectBase;
+export type SelectRange = {
+    readonly label_seq_range: Range
+} & SelectBase;
+export type SelectTarget = SelectSingle | SelectRange;
 
 export type SelectionExpression = {
     tag: string
@@ -81,13 +93,13 @@ function toOperatorName(structure: Structure, expression: string): string {
  * @param labelBase the base label that will appear in the UI (e.g., the entry ID)
  * @param selection a selection by Range or a set of Targets
  */
-export function createSelectionExpressions(labelBase: string, selection?: Range | Target[]): SelectionExpression[] {
+export function createSelectionExpressions(labelBase: string, selection?: Target | Target[]): SelectionExpression[] {
     if (selection) {
-        if ('label_asym_id' in selection && 'label_seq_id' in selection) {
-            const range = selection as Range;
-            const residues: number[] = (range.label_seq_id) ? toRange(range.label_seq_id.beg, range.label_seq_id.end) : [];
-            const test = rangeToTest(range.label_asym_id, residues);
-            const label = labelFromProps(labelBase, range);
+        if ('label_asym_id' in selection && 'label_seq_range' in selection) {
+            const target = selection as Target;
+            const residues: number[] = (target.label_seq_id) ? toRange(target.label_seq_range!.beg, target.label_seq_range!.end) : [];
+            const test = rangeToTest(target.label_asym_id!, residues);
+            const label = labelFromProps(labelBase, target.label_asym_id, residues);
             return [{
                 expression: MS.struct.generator.atomGroups(test),
                 label: `${label}`,
@@ -147,11 +159,17 @@ export function createSelectionExpressions(labelBase: string, selection?: Range
     }
 }
 
-const labelFromProps = (entryId: string, range: Range) => {
-    const residues: number[] = (range.label_seq_id) ? toRange(range.label_seq_id.beg, range.label_seq_id.end) : [];
-    return entryId + (range.label_asym_id ? `.${range.label_asym_id}` : '') +
-        (residues && residues.length > 0 ? `:${residues[0]}` : '') +
-        (residues && residues.length > 1 ? `-${residues[residues.length - 1]}` : '');
+export const toRange = (start: number, end?: number) => {
+    if (!end) return [start];
+    const b = start < end ? start : end;
+    const e = start < end ? end : start;
+    return [...Array(e - b + 1)].map((_, i) => b + i);
+};
+
+const labelFromProps = (entryId: string, label_asym_id?: string, range?: number[]) => {
+    return entryId + (label_asym_id ? `.${label_asym_id}` : '') +
+        (range && range.length > 0 ? `:${range[0]}` : '') +
+        (range && range.length > 1 ? `-${range[range.length - 1]}` : '');
 };
 
 export function rangeToTest(asymId: string, residues: number[]) {

src/viewer/helpers/superpose/flexible-structure.ts

@@ -19,33 +19,35 @@ const FlexibleStructureFromModel = PluginStateTransform.BuiltIn({
     isDecorator: true,
     params(a) {
         return {
-            selection: PD.Value<PropsetProps['selection']>([])
+            targets: PD.Value<PropsetProps['targets']>([])
         };
     }
 })({
     apply({ a, params }, plugin: PluginContext) {
         return Task.create('Build Flexible Structure', async ctx => {
             const base = await RootStructureDefinition.create(plugin, ctx, a.data);
-            const { selection } = params;
-            if (!selection?.length) return base;
+            const { targets } = params;
+            if (!targets?.length) return base;
 
             const selectChains: string[] = [];
             const selectBlocks: Structure[][] = [];
-            for (const p of selection) {
-                if (!selectChains.includes(p.label_asym_id)) {
-                    selectChains.push(p.label_asym_id);
+            for (const target of targets) {
+                if (!target.label_asym_id) continue;
+
+                if (!selectChains.includes(target.label_asym_id)) {
+                    selectChains.push(target.label_asym_id);
                     selectBlocks.push([]);
                 }
-                const residues: number[] = (p.label_seq_id) ? toRange(p.label_seq_id.beg, p.label_seq_id.end) : [];
-                const test = rangeToTest(p.label_asym_id, residues);
+                const residues: number[] = (target.label_seq_range) ? toRange(target.label_seq_range.beg, target.label_seq_range.end) : [];
+                const test = rangeToTest(target.label_asym_id, residues);
                 const expression = MS.struct.generator.atomGroups(test);
                 const { selection: sele } = StructureQueryHelper.createAndRun(base.data, expression);
                 const s = StructureSelection.unionStructure(sele);
-                if (!p.matrix) {
-                    selectBlocks[selectChains.indexOf(p.label_asym_id)].push(s);
+                if (!target.matrix) {
+                    selectBlocks[selectChains.indexOf(target.label_asym_id)].push(s);
                 } else {
-                    const ts = Structure.transform(s, p.matrix);
-                    selectBlocks[selectChains.indexOf(p.label_asym_id)].push(ts);
+                    const ts = Structure.transform(s, target.matrix);
+                    selectBlocks[selectChains.indexOf(target.label_asym_id)].push(ts);
                 }
             }
 

src/viewer/helpers/viewer.ts

@@ -4,19 +4,95 @@
  * @author Joan Segura <joan.segura@rcsb.org>
  */
 
-import {StructureRef} from 'molstar/lib/mol-plugin-state/manager/structure/hierarchy-state';
-import {Structure} from 'molstar/lib/mol-model/structure/structure';
-import {PluginContext} from 'molstar/lib/mol-plugin/context';
-import {Loci} from 'molstar/lib/mol-model/loci';
-import {StructureSelection} from 'molstar/lib/mol-model/structure/query';
-import {Script} from 'molstar/lib/mol-script/script';
-import {MolScriptBuilder} from 'molstar/lib/mol-script/language/builder';
-import {SetUtils} from 'molstar/lib/mol-util/set';
-import {StructureRepresentationRegistry} from 'molstar/lib/mol-repr/structure/registry';
-import {StructureSelectionQuery} from 'molstar/lib/mol-plugin-state/helpers/structure-selection-query';
+import { StructureRef } from 'molstar/lib/mol-plugin-state/manager/structure/hierarchy-state';
+import { Structure } from 'molstar/lib/mol-model/structure/structure';
+import { PluginContext } from 'molstar/lib/mol-plugin/context';
+import { Loci } from 'molstar/lib/mol-model/loci';
+import { StructureSelection } from 'molstar/lib/mol-model/structure/query';
+import { Script } from 'molstar/lib/mol-script/script';
+import { MolScriptBuilder as MS, MolScriptBuilder } from 'molstar/lib/mol-script/language/builder';
+import { SetUtils } from 'molstar/lib/mol-util/set';
+import { StructureRepresentationRegistry } from 'molstar/lib/mol-repr/structure/registry';
+import { StructureSelectionQuery } from 'molstar/lib/mol-plugin-state/helpers/structure-selection-query';
+import {
+    rangeToTest,
+    SelectRange,
+    SelectTarget,
+    Target,
+    targetToLoci, toRange
+} from './selection';
+
+export function setFocusFromRange(plugin: PluginContext, target: SelectRange) {
+    const data = getStructureWithModelId(plugin.managers.structure.hierarchy.current.structures, target);
+    if (!data) return;
+
+    return targetToLoci(target, data);
+}
 
-export namespace ViewerMethods {
+function getStructureWithModelId(structures: StructureRef[], target: { modelId: string }): Structure | undefined {
+    const structureRef = getStructureRefWithModelId(structures, target);
+    if (structureRef) return structureRef.cell?.obj?.data;
+}
+
+export function getStructureRefWithModelId(structures: StructureRef[], target: { modelId: string }): StructureRef | undefined {
+    for (const structure of structures) {
+        if (!structure.cell?.obj?.data?.units) continue;
+
+        const unit =  structure.cell.obj.data.units[0];
+        if (unit.model.id === target.modelId) return structure;
+    }
+}
+
+export function select(plugin: PluginContext, targets: SelectTarget | SelectTarget[], mode: 'select' | 'hover', modifier: 'add' | 'set') {
+
+}
+
+export function clearSelection(plugin: PluginContext, mode: 'select' | 'hover', target?: { modelId: string; } & Target) {
+    if (mode == null || mode === 'select') {
+        if (!target) {
+            plugin.managers.interactivity.lociSelects.deselectAll();
+        } else {
+            const data = getStructureWithModelId(plugin.managers.structure.hierarchy.current.structures, target);
+            if (!data) return;
 
+            const loci = targetToLoci(target, data);
+            plugin.managers.interactivity.lociSelects.deselect({ loci });
+        }
+    } else if (mode === 'hover') {
+        plugin.managers.interactivity.lociHighlights.clearHighlights();
+    }
+}
+
+export async function createComponent(plugin: PluginContext, componentLabel: string, targets: SelectTarget | SelectTarget[], representationType: StructureRepresentationRegistry.BuiltIn) {
+    for (const target of (Array.isArray(targets) ? targets : [targets])) {
+        const structureRef = getStructureRefWithModelId(plugin.managers.structure.hierarchy.current.structures, target);
+        if (!structureRef) throw 'createComponent error: model not found';
+
+        const test = 'label_seq_range' in target ?
+            rangeToTest(target.label_asym_id, toRange(target.label_seq_range.beg, target.label_seq_range.end)) :
+            void 0; // TODO
+        const sel = StructureSelectionQuery('innerQuery_' + Math.random().toString(36).substr(2),
+            MS.struct.generator.atomGroups(test));
+        await plugin.managers.structure.component.add({
+            selection: sel,
+            options: { checkExisting: false, label: componentLabel },
+            representation: representationType,
+        }, [structureRef]);
+    }
+}
+
+export function removeComponent(plugin: PluginContext, componentLabel: string) {
+    plugin.managers.structure.hierarchy.currentComponentGroups.forEach(c => {
+        for (const comp of c) {
+            if (comp.cell.obj?.label === componentLabel) {
+                plugin.managers.structure.hierarchy.remove(c);
+                break;
+            }
+        }
+    });
+}
+
+export namespace ViewerMethods {
     export function selectMultipleSegments(plugin: PluginContext, selection: Array<{modelId: string; asymId: string; begin: number; end: number;}>, mode: 'select'|'hover', modifier: 'add'|'set' ): void {
         if(modifier === 'set'){
             selection.forEach(sel=>{
@@ -39,24 +115,6 @@ export namespace ViewerMethods {
         }
     }
 
-    export function clearSelection(plugin: PluginContext, mode: 'select'|'hover', options?: {modelId: string; labelAsymId: string;}): void {
-        if(mode == null || mode === 'select') {
-            if(options == null){
-                plugin.managers.interactivity.lociSelects.deselectAll();
-            }else{
-                const data: Structure | undefined = ViewerMethods.getStructureWithModelId(plugin.managers.structure.hierarchy.current.structures, options.modelId);
-                if (data == null) return;
-                const sel: StructureSelection = Script.getStructureSelection(Q => Q.struct.generator.atomGroups({
-                    'chain-test': Q.core.rel.eq([options.labelAsymId, MolScriptBuilder.ammp('label_asym_id')])
-                }), data);
-                const loci: Loci = StructureSelection.toLociWithSourceUnits(sel);
-                plugin.managers.interactivity.lociSelects.deselect({loci});
-            }
-        }else if(mode === 'hover') {
-            plugin.managers.interactivity.lociHighlights.clearHighlights();
-        }
-    }
-
     export async function createComponentFromChain(plugin: PluginContext, componentLabel: string, structureRef: StructureRef, asymId: string, representationType: StructureRepresentationRegistry.BuiltIn): Promise<void>{
         const selection: StructureSelectionQuery = StructureSelectionQuery(
             'innerQuery_' + Math.random().toString(36).substr(2),
@@ -144,23 +202,6 @@ export namespace ViewerMethods {
         plugin.managers.structure.focus.setFromLoci(loci);
     }
 
-    export function getStructureRefWithModelId(structures: StructureRef[], modelId: string): StructureRef|undefined{
-        for(const structure of structures){
-            if(!structure.cell?.obj?.data?.units)
-                continue;
-            const unit =  structure.cell.obj.data.units[0];
-            const id: string = unit.model.id;
-            if(id === modelId)
-                return structure;
-        }
-    }
-
-    export function getStructureWithModelId(structures: StructureRef[], modelId: string): Structure|undefined{
-        const structureRef: StructureRef | undefined = getStructureRefWithModelId(structures, modelId);
-        if(structureRef != null)
-            return structureRef.cell?.obj?.data;
-    }
-
     export function getLociFromRange(plugin: PluginContext, modelId: string, asymId: string, begin: number, end: number): Loci | undefined {
         const data: Structure | undefined = getStructureWithModelId(plugin.managers.structure.hierarchy.current.structures, modelId);
         if (data == null) return;
@@ -186,16 +227,5 @@ export namespace ViewerMethods {
         ), data);
         return StructureSelection.toLociWithSourceUnits(sel);
     }
-
-    export function removeComponent(plugin: PluginContext, componentLabel: string): void{
-        plugin.managers.structure.hierarchy.currentComponentGroups.forEach(c=>{
-            for(const comp of c){
-                if(comp.cell.obj?.label === componentLabel) {
-                    plugin.managers.structure.hierarchy.remove(c);
-                    break;
-                }
-            }
-        });
-    }
 }
 

src/viewer/index.ts

@@ -28,8 +28,8 @@ import { ObjectKeys } from 'molstar/lib/mol-util/type-helpers';
 import { PluginLayoutControlsDisplay } from 'molstar/lib/mol-plugin/layout';
 import { SuperposeColorThemeProvider } from './helpers/superpose/color';
 import { encodeStructureData, downloadAsZipFile } from './helpers/export';
-import { ViewerMethods } from './helpers/viewer';
-import { StructureRef } from 'molstar/lib/mol-plugin-state/manager/structure/hierarchy-state';
+import { setFocusFromRange, removeComponent, clearSelection, createComponent, select } from './helpers/viewer';
+import { SelectRange, SelectTarget, Target } from './helpers/selection';
 import { StructureRepresentationRegistry } from 'molstar/lib/mol-repr/structure/registry';
 import { Mp4Export } from 'molstar/lib/extensions/mp4-export';
 import { DefaultPluginUISpec, PluginUISpec } from 'molstar/lib/mol-plugin-ui/spec';
@@ -257,63 +257,67 @@ export class Viewer {
         return downloadAsZipFile(this._plugin, content);
     }
 
-    public setFocus(modelId: string, asymId: string, begin: number, end: number): void;
-    public setFocus(...args: any[]): void{
-        if(args.length === 4)
-            ViewerMethods.setFocusFromRange(this._plugin, args[0], args[1], args[2], args[3]);
-        if(args.length === 2)
-            ViewerMethods.setFocusFromSet(this._plugin, args[0], args[1]);
+    setFocus(target: SelectRange) {
+        setFocusFromRange(this._plugin, target);
     }
 
-    public clearFocus(): void {
+    clearFocus(): void {
         this._plugin.managers.structure.focus.clear();
     }
 
-    public select(selection: Array<{modelId: string; asymId: string; position: number;}>, mode: 'select'|'hover', modifier: 'add'|'set'): void;
-    public select(selection: Array<{modelId: string; asymId: string; begin: number; end: number;}>, mode: 'select'|'hover', modifier: 'add'|'set'): void;
-    public select(modelId: string, asymId: string, position: number, mode: 'select'|'hover', modifier: 'add'|'set'): void;
-    public select(modelId: string, asymId: string, begin: number, end: number, mode: 'select'|'hover', modifier: 'add'|'set'): void;
-    public select(...args: any[]){
-        if(args.length === 3 && (args[0] as Array<{modelId: string; asymId: string; position: number;}>).length > 0 && typeof (args[0] as Array<{modelId: string; asymId: string; position: number;}>)[0].position === 'number'){
-            if(args[2] === 'set')
-                this.clearSelection('select');
-            (args[0] as Array<{modelId: string; asymId: string; position: number;}>).forEach(r=>{
-                ViewerMethods.selectSegment(this._plugin, r.modelId, r.asymId, r.position, r.position, args[1], 'add');
-            });
-        }else if(args.length === 3 && (args[0] as Array<{modelId: string; asymId: string; begin: number; end: number;}>).length > 0 && typeof (args[0] as Array<{modelId: string; asymId: string; begin: number; end: number;}>)[0].begin === 'number'){
-            ViewerMethods.selectMultipleSegments(this._plugin, args[0], args[1], args[2]);
-        }else if(args.length === 5){
-            ViewerMethods.selectSegment(this._plugin, args[0], args[1], args[2], args[2], args[3], args[4]);
-        }else if(args.length === 6){
-            ViewerMethods.selectSegment(this._plugin, args[0], args[1], args[2], args[3], args[4], args[5]);
-        }
+    select(targets: SelectTarget | SelectTarget[], mode: 'select' | 'hover', modifier: 'add' | 'set') {
+        select(this._plugin, targets, mode, modifier);
     }
 
-    public clearSelection(mode: 'select'|'hover', options?: {modelId: string; labelAsymId: string;}): void {
-        ViewerMethods.clearSelection(this._plugin, mode, options);
+    // public select(selection: Array<{modelId: string; asymId: string; position: number;}>, mode: 'select'|'hover', modifier: 'add'|'set'): void;
+    // public select(selection: Array<{modelId: string; asymId: string; begin: number; end: number;}>, mode: 'select'|'hover', modifier: 'add'|'set'): void;
+    // public select(modelId: string, asymId: string, position: number, mode: 'select'|'hover', modifier: 'add'|'set'): void;
+    // public select(modelId: string, asymId: string, begin: number, end: number, mode: 'select'|'hover', modifier: 'add'|'set'): void;
+    // public select(...args: any[]){
+    //     if(args.length === 3 && (args[0] as Array<{modelId: string; asymId: string; position: number;}>).length > 0 && typeof (args[0] as Array<{modelId: string; asymId: string; position: number;}>)[0].position === 'number'){
+    //         if(args[2] === 'set')
+    //             this.clearSelection('select');
+    //         (args[0] as Array<{modelId: string; asymId: string; position: number;}>).forEach(r=>{
+    //             ViewerMethods.selectSegment(this._plugin, r.modelId, r.asymId, r.position, r.position, args[1], 'add');
+    //         });
+    //     }else if(args.length === 3 && (args[0] as Array<{modelId: string; asymId: string; begin: number; end: number;}>).length > 0 && typeof (args[0] as Array<{modelId: string; asymId: string; begin: number; end: number;}>)[0].begin === 'number'){
+    //         ViewerMethods.selectMultipleSegments(this._plugin, args[0], args[1], args[2]);
+    //     }else if(args.length === 5){
+    //         ViewerMethods.selectSegment(this._plugin, args[0], args[1], args[2], args[2], args[3], args[4]);
+    //     }else if(args.length === 6){
+    //         ViewerMethods.selectSegment(this._plugin, args[0], args[1], args[2], args[3], args[4], args[5]);
+    //     }
+    // }
+
+    clearSelection(mode: 'select' | 'hover', target?: { modelId: string; target: Target }) {
+        clearSelection(this._plugin, mode, target);
     }
 
-    public async createComponent(componentLabel: string, modelId: string, asymId: string, representationType: StructureRepresentationRegistry.BuiltIn): Promise<void>;
-    public async createComponent(componentLabel: string, modelId: string, residues: Array<{asymId: string; position: number;}>, representationType: StructureRepresentationRegistry.BuiltIn): Promise<void>;
-    public async createComponent(componentLabel: string, modelId: string, residues: Array<{asymId: string; begin: number; end: number;}>, representationType: StructureRepresentationRegistry.BuiltIn): Promise<void>;
-    public async createComponent(componentLabel: string, modelId: string, asymId: string, begin: number, end: number, representationType: StructureRepresentationRegistry.BuiltIn): Promise<void>;
-    public async createComponent(...args: any[]): Promise<void>{
-        const structureRef: StructureRef | undefined = ViewerMethods.getStructureRefWithModelId(this._plugin.managers.structure.hierarchy.current.structures, args[1]);
-        if(structureRef == null)
-            throw 'createComponent error: model not found';
-        if (args.length === 4 && typeof args[2] === 'string') {
-            await ViewerMethods.createComponentFromChain(this._plugin, args[0], structureRef, args[2], args[3]);
-        } else if (args.length === 4 && args[2] instanceof Array && args[2].length > 0 && typeof args[2][0].position === 'number') {
-            await ViewerMethods.createComponentFromSet(this._plugin, args[0], structureRef, args[2], args[3]);
-        } else if (args.length === 4 && args[2] instanceof Array && args[2].length > 0 && typeof args[2][0].begin === 'number') {
-            await ViewerMethods.createComponentFromMultipleRange(this._plugin, args[0], structureRef, args[2], args[3]);
-        }else if (args.length === 6) {
-            await ViewerMethods.createComponentFromRange(this._plugin, args[0], structureRef, args[2], args[3], args[4], args[5]);
-        }
+    async createComponent(label: string, targets: SelectTarget | SelectTarget[], representationType: StructureRepresentationRegistry.BuiltIn) {
+        await createComponent(this._plugin, label, targets, representationType);
     }
 
-    public removeComponent(componentLabel: string): void{
-        ViewerMethods.removeComponent(this._plugin, componentLabel);
+    // public async createComponent(componentLabel: string, modelId: string, asymId: string, representationType: StructureRepresentationRegistry.BuiltIn): Promise<void>;
+    // public async createComponent(componentLabel: string, modelId: string, residues: Array<{asymId: string; position: number;}>, representationType: StructureRepresentationRegistry.BuiltIn): Promise<void>;
+    // public async createComponent(componentLabel: string, modelId: string, residues: Array<{asymId: string; begin: number; end: number;}>, representationType: StructureRepresentationRegistry.BuiltIn): Promise<void>;
+    // public async createComponent(componentLabel: string, modelId: string, asymId: string, begin: number, end: number, representationType: StructureRepresentationRegistry.BuiltIn): Promise<void>;
+    // public async createComponent(...args: any[]): Promise<void>{
+    //     const structureRef: StructureRef | undefined = ViewerMethods.getStructureRefWithModelId(this._plugin.managers.structure.hierarchy.current.structures, args[1]);
+    //     if(structureRef == null)
+    //         throw 'createComponent error: model not found';
+    //     if (args.length === 4 && typeof args[2] === 'string') {
+    //         await ViewerMethods.createComponentFromChain(this._plugin, args[0], structureRef, args[2], args[3]);
+    //     } else if (args.length === 4 && args[2] instanceof Array && args[2].length > 0 && typeof args[2][0].position === 'number') {
+    //         await ViewerMethods.createComponentFromSet(this._plugin, args[0], structureRef, args[2], args[3]);
+    //     } else if (args.length === 4 && args[2] instanceof Array && args[2].length > 0 && typeof args[2][0].begin === 'number') {
+    //         await ViewerMethods.createComponentFromMultipleRange(this._plugin, args[0], structureRef, args[2], args[3]);
+    //     }else if (args.length === 6) {
+    //         await ViewerMethods.createComponentFromRange(this._plugin, args[0], structureRef, args[2], args[3], args[4], args[5]);
+    //     }
+    // }
+
+    removeComponent(componentLabel: string): void{
+        removeComponent(this._plugin, componentLabel);
     }
 }