Feature/#181 layer upgrade UI update

nav-app/src/app/data.service.ts

@@ -28,11 +28,7 @@ export class DataService {
     public versions: any[] = [];
 
     public subtechniquesEnabled: boolean = true;
-    public versionChangelog?: VersionChangelog<Technique>;
-
-    private _sidebarOpened: boolean;
-    public get sidebarOpened(): boolean { return this._sidebarOpened; };
-    public set sidebarOpened(newVal: boolean) { this._sidebarOpened = newVal; };
+    public versionChangelog?: VersionChangelog<Technique>;å
 
     public readonly sidebarContentTypes = ['layerUpgrade', 'search'];
     private _sidebarContentType: string;

nav-app/src/app/datatable/data-table.component.html

@@ -507,12 +507,12 @@
 o88o  8  o88o o88o  o888o o888o    o888o  88o8 o888o o88o  o888o
                                                                  -->
 <div class="matrices">
-    <mat-drawer-container autosize>
-        <mat-drawer-content>
-            <div oncontextmenu="return false">
-                <div class="spinner" *ngIf="!dataService.getDomain(viewModel.domainID).dataLoaded">
-                    <mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
-                </div>
+    <div oncontextmenu="return false">
+        <div class="spinner" *ngIf="!dataService.getDomain(viewModel.domainID).dataLoaded">
+            <mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
+        </div>
+        <mat-drawer-container autosize>
+            <mat-drawer-content>
                 <div class="matrices-columns">
                     <div class="matrix-column" *ngFor="let matrix of dataService.getDomain(viewModel.domainID).matrices">
                         <div *ngIf="dataService.getDomain(viewModel.domainID).matrices.length > 1" class="matrix-name">{{matrix.name}}</div>
@@ -527,12 +527,12 @@
                         </div>
                     </div>
                 </div>
-            </div>
-        </mat-drawer-content>
-        <mat-drawer mode="side" position="end" #sidebar [opened]="dataService.sidebarOpened">
-            <sidebar [viewModel]="viewModel"></sidebar>
-        </mat-drawer>
-    </mat-drawer-container>
+            </mat-drawer-content>
+            <mat-drawer mode="side" position="end" #sidebar [opened]="viewModel.sidebarOpened">
+                <sidebar [viewModel]="viewModel"></sidebar>
+            </mat-drawer>
+        </mat-drawer-container>
+    </div>
 </div>
 
 

nav-app/src/app/sidebar/layer-upgrade/layer-upgrade.component.ts

@@ -1,4 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
+import { ViewModel } from '../../viewmodels.service';
 import { BaseStix, DataService, Technique, VersionChangelog } from '../../data.service';
 
 @Component({
@@ -8,6 +9,7 @@ import { BaseStix, DataService, Technique, VersionChangelog } from '../../data.s
 })
 export class LayerUpgradeComponent implements OnInit {
     @Input() changelog: VersionChangelog<BaseStix>;
+    @Input() viewModel: ViewModel;
     public showUnannotated: boolean = false;
     public sections: string[] = [
         "additions", "changes", "minor_changes",
@@ -31,7 +33,7 @@ export class LayerUpgradeComponent implements OnInit {
 
     public upgradeLayer(): void {
         // close sidebar
-        this.dataService.sidebarOpened = !this.dataService.sidebarOpened;
+        this.viewModel.sidebarOpened = !this.viewModel.sidebarOpened;
     }
 
     public getIDs(object: Technique) {

nav-app/src/app/sidebar/sidebar.component.html

@@ -1,6 +1,6 @@
 <div class="sidebar">
-    <div *ngIf="dataService.sidebarContentType === 'layerUpgrade' && dataService.versionChangelog">
-        <layer-upgrade [changelog]="dataService.versionChangelog"></layer-upgrade>
+    <div *ngIf="dataService.versionChangelog">
+        <layer-upgrade [viewModel]="viewModel" [changelog]="dataService.versionChangelog"></layer-upgrade>
     </div>
     <div *ngIf="viewModel">
         <div *ngIf="dataService.sidebarContentType === 'search'">

nav-app/src/app/sidebar/sidebar.component.ts

@@ -1,19 +1,18 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { DataService } from '../data.service';
-import { ViewModel } from "../viewmodels.service";
+import { ViewModel } from '../viewmodels.service';
 
 @Component({
-  selector: 'sidebar',
-  templateUrl: './sidebar.component.html',
-  styleUrls: ['./sidebar.component.scss']
+    selector: 'sidebar',
+    templateUrl: './sidebar.component.html',
+    styleUrls: ['./sidebar.component.scss']
 })
 export class SidebarComponent implements OnInit {
-  // The ViewModel being used by this data-table
-  @Input() viewModel?: ViewModel;
+    @Input() viewModel: ViewModel;
 
-  constructor(public dataService: DataService) { }
+    constructor(public dataService: DataService) { }
 
-  ngOnInit(): void {
-  }
+    ngOnInit(): void {
+    }
 
 }

nav-app/src/app/tabs/tabs.component.ts

@@ -554,6 +554,7 @@ export class TabsComponent implements AfterContentInit, AfterViewInit {
                             });
                         } else {
                             this.dataService.compareVersions(versions.previous, versions.latest);
+                            viewModel.sidebarOpened = true;
                             viewModel.deSerialize(string);
                             viewModel.loadVMData();
                         }

nav-app/src/app/viewmodels.service.ts

@@ -382,6 +382,10 @@ export class ViewModel {
     techIDtoUIDMap: Object = {};
     techUIDtoIDMap: Object = {};
 
+    private _sidebarOpened: boolean;
+    public get sidebarOpened(): boolean { return this._sidebarOpened; };
+    public set sidebarOpened(newVal: boolean) { this._sidebarOpened = newVal; };
+
     constructor(name: string, uid: string, domainID: string, private dataService: DataService) {
         this.domainID = domainID;
         console.log("initializing ViewModel '" + name + "'");