Gapped annotation bug fix

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rcsb/rcsb-saguaro-3d",
-  "version": "0.0.31",
+  "version": "0.0.32",
   "description": "RCSB Molstar/Saguaro Web App",
   "main": "build/dist/RcsbFv3DBuilder.js",
   "files": [
@@ -63,7 +63,7 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-icons": "^3.11.0",
-    "rxjs": "^6.6.3",
+    "rxjs": "^6.6.6",
     "sass-loader": "^7.3.1",
     "style-loader": "^1.2.1",
     "ts-loader": "^6.2.2",
@@ -74,12 +74,12 @@
     "webpack-cli": "^3.3.12"
   },
   "dependencies": {
-    "@rcsb/rcsb-molstar": "^1.3.0-beta.saguaro.1",
+    "@rcsb/rcsb-molstar": "^1.6.0",
     "@rcsb/rcsb-saguaro": "^1.6.0",
-    "@rcsb/rcsb-saguaro-app": "^1.2.1",
+    "@rcsb/rcsb-saguaro-app": "^1.2.2",
     "@types/react": "^17.0.0",
     "@types/react-select": "^3.0.11",
-    "molstar": "^1.3.1",
+    "molstar": "^2.0.5",
     "react-select": "^3.0.8"
   },
   "bugs": {

src/RcsbFvSequence/SequenceViews/AssemblyView/AssemblyView.tsx

@@ -24,7 +24,7 @@ import {
     StructureSelectionQuery
 } from 'molstar/lib/mol-plugin-state/helpers/structure-selection-query';
 import {StructureRepresentationRegistry} from "molstar/lib/mol-repr/structure/registry";
-import Expression from "molstar/lib/mol-script/language/expression";
+import {Expression} from "molstar/lib/mol-script/language/expression";
 
 export interface AssemblyViewInterface {
     entryId: string;
@@ -108,7 +108,12 @@ export class AssemblyView extends AbstractView<AssemblyViewInterface & AbstractV
                     if((y-x)<this.createComponentThreshold){
                         this.currentSelectedComponentId = this.currentLabelAsymId +":"+ (x === y ? x.toString() : x.toString()+"-"+y.toString());
                         setTimeout(()=>{
-                            this.props.plugin.createComponent(this.currentSelectedComponentId, this.currentModelId, this.currentLabelAsymId, x, y, 'ball-and-stick').then(()=>{
+                            this.props.plugin.createComponent(
+                                this.currentSelectedComponentId,
+                                this.currentModelId,
+                                processGaps(this.currentModelId, this.currentLabelAsymId, e),
+                                'ball-and-stick'
+                            ).then(()=>{
                                 if(x === y)
                                     setTimeout(()=>{
                                         this.props.plugin.setFocus(this.currentModelId, this.currentLabelAsymId, x, y);
@@ -143,7 +148,7 @@ export class AssemblyView extends AbstractView<AssemblyViewInterface & AbstractV
                             'add'
                         );
                     }else {
-                        this.props.plugin.select(this.currentModelId, this.currentLabelAsymId, selection[0].begin, selection[0].end ?? selection[0].begin, 'hover', 'set');
+                        this.props.plugin.select(processMultipleGaps(this.currentModelId, this.currentLabelAsymId, selection), 'hover', 'set');
                     }
                 }
             },
@@ -256,7 +261,7 @@ export class AssemblyView extends AbstractView<AssemblyViewInterface & AbstractV
                 );
                 this.props.selection.addSelectionFromRegion(this.currentModelId, this.currentLabelAsymId, {begin:x, end:y, isEmpty: true, source: 'sequence'}, 'select');
             }else{
-                this.props.plugin.select(this.currentModelId, this.currentLabelAsymId,x,y, 'select', 'add');
+                this.props.plugin.select(processGaps(this.currentModelId, this.currentLabelAsymId, e), 'select', 'add');
                 this.props.selection.addSelectionFromRegion(this.currentModelId, this.currentLabelAsymId, {begin:x, end:y, source: 'sequence'}, 'select');
             }
         });
@@ -361,3 +366,32 @@ export class AssemblyView extends AbstractView<AssemblyViewInterface & AbstractV
     }*/
 
 }
+
+function processGaps(modelId: string, asymId: string, e: RcsbFvTrackDataElementInterface): Array<{modelId: string; asymId: string; begin: number; end: number;}>{
+    const regions: Array<{modelId: string; asymId: string; begin: number; end: number;}> = new Array<{modelId: string; asymId: string; begin: number; end: number}>();
+    let lastIndex: number = e.begin;
+    e.gaps?.forEach((g)=>{
+        regions.push({
+            modelId: modelId,
+            asymId: asymId,
+            begin: lastIndex,
+            end: g.begin
+        });
+        lastIndex = g.end;
+    });
+    regions.push({
+        modelId: modelId,
+        asymId: asymId,
+        begin: lastIndex,
+        end: e.end ?? e.begin
+    });
+    return regions;
+}
+
+function processMultipleGaps(modelId: string, asymId: string, list: Array<RcsbFvTrackDataElementInterface>): Array<{modelId: string; asymId: string; begin: number; end: number;}>{
+    let regions: Array<{modelId: string; asymId: string; begin: number; end: number;}> = new Array<{modelId: string; asymId: string; begin: number; end: number}>();
+    list.forEach(e=>{
+        regions = regions.concat(processGaps(modelId, asymId, e));
+    });
+    return regions;
+}

src/RcsbFvStructure/StructurePlugins/MolstarPlugin.ts

@@ -142,11 +142,14 @@ export class MolstarPlugin extends AbstractPlugin implements SaguaroPluginInterf
 
     public select(modelId:string, asymId: string, begin: number, end: number, mode: 'select'|'hover', operation:'add'|'set'): void;
     public select(selection: Array<{modelId:string; asymId: string; position: number;}>, mode: 'select'|'hover', operation:'add'|'set'): void;
+    public select(selection: Array<{modelId:string; asymId: string; begin: number; end: number;}>, mode: 'select'|'hover', operation:'add'|'set'): void;
     public select(...args: any[]): void{
         if(args.length === 6){
             this.selectRange(args[0],args[1],args[2],args[3],args[4],args[5]);
-        }else if(args.length === 3){
+        }else 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'){
             this.selectSet(args[0],args[1],args[2]);
+        }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'){
+            this.selectMultipleRanges(args[0],args[1],args[2]);
         }
     }
     private selectRange(modelId:string, asymId: string, begin: number, end: number, mode: 'select'|'hover', operation:'add'|'set'): void {
@@ -164,6 +167,13 @@ export class MolstarPlugin extends AbstractPlugin implements SaguaroPluginInterf
         this.plugin.select(selection.map(r=>{return{modelId: this.getModelId(r.modelId), position:r.position, asymId: r.asymId}}), mode, operation);
         this.innerSelectionFlag = false;
     }
+    private selectMultipleRanges(selection: Array<{modelId:string; asymId: string; begin: number; end:number;}>, mode: 'select'|'hover', operation:'add'|'set'): void {
+        if(mode == null || mode === 'select') {
+            this.innerSelectionFlag = true;
+        }
+        this.plugin.select(selection.map(r=>{return{modelId: this.getModelId(r.modelId), begin:r.begin, end: r.end, asymId: r.asymId}}), mode, operation);
+        this.innerSelectionFlag = false;
+    }
     public clearSelection(mode:'select'|'hover', option?:{modelId:string; labelAsymId:string;}): void {
         if(mode === 'select') {
             this.plugin.clearFocus();
@@ -216,6 +226,7 @@ export class MolstarPlugin extends AbstractPlugin implements SaguaroPluginInterf
     public async createComponent(componentLabel: string, modelId:string, asymId: string, begin: number, end : number, representationType: StructureRepresentationRegistry.BuiltIn): Promise<void>;
     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(...args: any[]): Promise<void> {
         this.removeComponent(args[0]);
         this.componentVisibility.set(args[0], true);

src/RcsbFvStructure/StructurePlugins/SaguaroPluginInterface.ts

@@ -20,10 +20,12 @@ export interface SaguaroPluginInterface extends SaguaroPluginPublicInterface{
 export interface SaguaroPluginPublicInterface {
     select(modelId:string, asymId: string, x: number, y: number, mode: 'select'|'hover', operation:'set'|'add'): void;
     select(selection: Array<{modelId:string; asymId: string; position: number;}>, mode: 'select'|'hover', operation:'add'|'set'): void;
+    select(selection: Array<{modelId:string; asymId: string; begin: number; end:number;}>, mode: 'select'|'hover', operation:'add'|'set'): void;
     clearSelection: (mode:'select'|'hover', option?:{modelId:string; labelAsymId:string;}) => void;
     createComponent(componentId: string, modelId:string, asymId: string, begin: number, end : number, representationType: StructureRepresentationRegistry.BuiltIn): Promise<void>;
     createComponent(componentId: string, modelId:string, asymId: string, representationType: StructureRepresentationRegistry.BuiltIn): Promise<void>;
     createComponent(componentId: string, modelId:string, residues: Array<{asymId: string; position: number;}>, representationType: StructureRepresentationRegistry.BuiltIn): Promise<void>;
+    createComponent(componentId: string, modelId:string, residues: Array<{asymId: string; begin: number; end: number;}>, representationType: StructureRepresentationRegistry.BuiltIn): Promise<void>;
     colorComponent(componentId: string, color: ColorTheme.BuiltIn): Promise<void>;
     removeComponent: (componentId?: string) => void;
     isComponent: (componentId: string) => boolean;