Issue #8: display name of region types

* display region type name instead of its description

* minor refactoring of internal implementation

src/apps/viewer/index.ts

@@ -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, 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, region: any, update: StateBuilder.To<any, any>, color: Color) {
-        const label: string = `${chain}.${region.auth_seq_ids.length}`;
-        const query: Expression = this.getQuery(chain, region.auth_seq_ids as number[]);
+    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 }