Right click on XB to download SMG file.

We do not have access to the web viewer. Open the SMG on composer.
Transformer options are default set to make the selected node the default smg view.

src/app/app.module.ts

@@ -7,6 +7,7 @@ import { AppComponent } from './app.component';
 import { HttpClientModule } from '@angular/common/http';
 import { TreeModule } from 'primeng/tree';
 import { DropdownModule } from 'primeng/dropdown';
+import { ContextMenuModule } from 'primeng/contextmenu';
 import { MainComponent } from './main/main.component';
 import { MainCenterComponent } from './main/main-center/main-center.component';
 import { TreeComponent } from './main/tree/tree.component';
@@ -22,6 +23,7 @@ import { FormsModule } from '@angular/forms';
     BrowserAnimationsModule,
     TreeModule,
     DropdownModule,
+    ContextMenuModule,
     HttpClientModule
   ],
   providers: [],

src/app/main/tree/tree.component.html

@@ -1,4 +1,12 @@
-<p-tree [value]="filesTree" selectionMode="single" (onNodeSelect)="nodeSelect($event)" (onNodeExpand)="loadNode($event)">
+<p-contextMenu #cm appendTo="body" [model]="contextMenu" ></p-contextMenu>
+
+<p-tree
+    [contextMenu]="cm"
+    [value]="filesTree"
+    selectionMode="single"
+    (onNodeSelect)="nodeSelect($event)"
+    (onNodeExpand)="loadNode($event)"
+    (onNodeContextMenuSelect)="nodeContextMenuSelect($event)">
     <ng-template let-node pTemplate="default">
         <div class="tree">
             <div class="flex-fill">{{ node.label }}</div>

src/app/main/tree/tree.component.ts

@@ -1,10 +1,10 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
-import { TreeNode } from 'primeng/api';
+import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
+import { TreeNode, MenuItem } from 'primeng/api';
 import { Subscription } from 'rxjs';
-import { NodeService } from 'src/app/services/node.service';
 import { TreeService } from 'src/app/services/tree.service';
 import { EndItemService } from 'src/app/services/enditem.service';
 import { GeiaService } from 'src/app/services/api/geia.service';
+import { ResourceService } from 'src/app/services/api/resource.service';
 
 @Component({
   selector: 'app-tree',
@@ -15,14 +15,17 @@ export class TreeComponent implements OnInit, OnDestroy {
 
   private dropdownSubscription: Subscription;
 
+  contextMenu: MenuItem[];
+  selectedMenuItem: TreeNode;
+
   selectedEndItem: string;
   filesTree: TreeNode[];
 
   constructor(
     private treeService: TreeService,
-    private nodeService: NodeService,
     private endItemService: EndItemService,
-    private geiaService: GeiaService
+    private geiaService: GeiaService,
+    private resourceService: ResourceService
   ) { }
 
   ngOnInit() {
@@ -31,7 +34,6 @@ export class TreeComponent implements OnInit, OnDestroy {
       const xbs = await this.geiaService.getTopLevelXBs(xa).toPromise();
       this.filesTree = this.mapXBsToTree(xbs);
     });
-    // this.nodeService.getFiles().then(files => (this.filesTree = files));
   }
 
   nodeSelect(event: { node: TreeNode }) {
@@ -52,27 +54,60 @@ export class TreeComponent implements OnInit, OnDestroy {
     event.node.children = ret;
   }
 
+  nodeContextMenuSelect(event: { originalEvent: MouseEvent, node: TreeNode }) {
+    this.selectedMenuItem = event.node;
+
+    const renderModelItem: MenuItem = {
+      label: 'View 3D Model',
+      icon: 'pi pi-info-circle',
+      command: async () => {
+        const smgName = this.getSmgName(this.endItemService.getFullEndItem(), this.selectedMenuItem.data.geia.lcn);
+        const res = await this.resourceService.getResourceSmg(smgName, {
+          setFocusedView: this.selectedMenuItem.data.viewName
+        }).toPromise();
+        const element = document.createElement('a');
+        element.href = URL.createObjectURL(new Blob([res]));
+        element.download = smgName;
+        element.click();
+      }
+    };
+
+    if (event.node.data.type !== 'XB') {
+      renderModelItem.disabled = true;
+    }
+
+    this.contextMenu = [
+      renderModelItem
+    ];
+  }
+
   ngOnDestroy() {
     this.dropdownSubscription.unsubscribe();
   }
 
   mapXBsToTree(xbs: any[]): TreeNode[] {
     const lcnStructure = this.endItemService.getFullEndItem().lcnStructure;
-    return xbs.map(xb => ({
-      label: `${this.lcnToString(xb.lcn, lcnStructure)} ${xb.lcnNomenclature}`,
-      leaf: this.isXBLeaf(xb),
-      data: {
-        geia: xb,
-        pdfName: 'radar.pdf'
-      }
-    }));
+    return xbs.map(xb => {
+      const viewName = `${this.lcnToString(xb.lcn, lcnStructure)} ${xb.lcnNomenclature}`;
+      return {
+        label: viewName,
+        leaf: this.isXBLeaf(xb),
+        data: {
+          type: 'XB',
+          geia: xb,
+          pdfName: 'radar.pdf',
+          viewName
+        }
+      };
+    });
   }
 
   mapCAsToTree(cas: any[]): TreeNode[] {
     return cas.map(ca => ({
       label: `${ca.taskCode} ${ca.taskIdentification}`,
       leaf: true,
       data: {
+        type: 'CA',
         geia: ca,
         pdfName: 'radar2.pdf'
       }
@@ -89,7 +124,7 @@ export class TreeComponent implements OnInit, OnDestroy {
     for (let i = 0; i < lcnStructure.length; i++) {
       const len = Number(lcnStructure.charAt(i));
       if (processed < lcn.length) {
-        acc.push(lcn.substr(processed, processed + len));
+        acc.push(lcn.substr(processed, len));
         processed += len;
       } else {
         break;
@@ -98,4 +133,12 @@ export class TreeComponent implements OnInit, OnDestroy {
     return acc.join('-');
   }
 
+  getSmgName(endItem: any, lcn: string) {
+    return `${endItem.endItemAcronymCode}_${this.getTopLevelLcn(lcn, endItem.lcnStructure)}.smg`;
+  }
+
+  getTopLevelLcn(lcn: string, lcnStructure: string) {
+    return lcn.substr(0, Number(lcnStructure.charAt(0)));
+  }
+
 }

src/app/model/TransformerOptions.ts

@@ -0,0 +1,3 @@
+export interface TransformerOptions {
+    setFocusedView?: string;
+}

src/app/services/api/api.service.ts

@@ -13,8 +13,8 @@ export class APIService {
         return this.http.get(`${this.baseURL}/${endpoint}`, options);
     }
 
-    _post(endpoint: string, body: any) {
-        return this.http.post(`${this.baseURL}/${endpoint}`, body);
+    _post(endpoint: string, body: any, options?: any) {
+        return this.http.post(`${this.baseURL}/${endpoint}`, body, options);
     }
 
     _put(endpoint: string, body: any) {

src/app/services/api/resource.service.ts

@@ -1,13 +1,16 @@
 import { APIService } from './api.service';
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
+import { TransformerOptions } from 'src/app/model/TransformerOptions';
 
 @Injectable({
     providedIn: 'root'
 })
 export class ResourceService extends APIService {
 
     baseEndpoint = 'resources';
+    pdfEndpoint = 'pdf';
+    smgEndpoint = 'smg';
 
     constructor(
         http: HttpClient
@@ -19,8 +22,8 @@ export class ResourceService extends APIService {
         return super._get(`${this.baseEndpoint}/${endpoint}`, options);
     }
 
-    post(endpoint: string, body: any) {
-        return super._post(`${this.baseEndpoint}/${endpoint}`, body);
+    post(endpoint: string, body: any, options?: any) {
+        return super._post(`${this.baseEndpoint}/${endpoint}`, body, options);
     }
 
     put(endpoint: string, body: any) {
@@ -35,7 +38,13 @@ export class ResourceService extends APIService {
         if (key == null) {
             throw new TypeError('Key must not be null!');
         }
-        return this.get(`pdf/${key}`, {
+        return this.get(`${this.pdfEndpoint}/${key}`, {
+            responseType: 'arraybuffer'
+        });
+    }
+
+    getResourceSmg(key: string, transformerOptions?: TransformerOptions) {
+        return this.post(`${this.smgEndpoint}/${key}`, transformerOptions, {
             responseType: 'arraybuffer'
         });
     }