Pull request #4: Feature 8 tmdet extension

Merge in UN/molstar from feature_8_tmdet_extension to master

* commit '65501dfb435cb5429f63ba7d4190110c3616836e':
  Issue #8: display name of region types
  Issue #8: regions with descriptions
  Issue #8: expect radius from backend

src/apps/viewer/index.ts

@@ -93,7 +93,7 @@ export class Viewer {
             //       Can we send a precalculated value by our backend?
             //
             // (NOTE: the TMDET extension calculates and sets it during applying preset)
-            radius: 15
+            radius: regionDescriptors[ 'radius' ]
         };
         membrane.planePoint2[2] *= -1;
 
@@ -130,8 +130,7 @@ export class Viewer {
             for(let regionKey in chain.regions) {
               const update = this.plugin.build();
               const region = chain.regions[regionKey];
-              let color: Color = Color.fromArray(region.color, 0);
-              this.applyColor(chain.chain_id, region.auth_ids, update.to(structure), color);
+              this.createRegionRepresentation(chain.chain_id, region, update.to(structure));
               update.commit();
             }
 
@@ -143,13 +142,14 @@ export class Viewer {
         requestAnimationFrame(() => this.plugin.canvas3d?.requestCameraReset());
     }
 
-    private applyColor(chain: string, auth_seq_ids: number[], update: StateBuilder.To<any, any>, color: Color) {
-        const label: string = `${chain}.${auth_seq_ids.length}`;
-        const query: Expression = this.getQuery(chain, auth_seq_ids);
+    private createRegionRepresentation(chain: string, region: any, update: StateBuilder.To<any, any>) {
+        const regionLabel: string = `${chain} | ${region.name}`;
+        const color: Color = Color.fromArray(region.color, 0);
+        const query: Expression = this.getQuery(chain, region.auth_ids as number[]);
 
         // based on https://github.com/molstar/molstar/issues/209
         update
-            .apply(StateTransforms.Model.StructureSelectionFromExpression, { label: label, expression: query })
+            .apply(StateTransforms.Model.StructureSelectionFromExpression, { label: regionLabel, expression: query })
             .apply(StateTransforms.Representation.StructureRepresentation3D, createStructureRepresentationParams(this.plugin, update.selector.data, {
                 color: 'uniform',
                 colorParams: { value: color }