Feature/#204 consolidate search and multiselect

CHANGELOG.md

@@ -1,3 +1,6 @@
+# v4.4 - changes staged on develop
+- Added combined techniques search and multiselect feature in sidebar. See issue [#204](https://github.com/mitre-attack/attack-navigator/issues/204). 
+
 # v4.3 - 29 April 2021
 ## New Features
 - Added aggregate scores. Aggregate scores are computed using the score of the technique and all sub-techniques using an "aggregate function" -- min, max, average, or sum. The aggregate score is used to determine the color of the technique in place of the technique's score. Aggregate scores are an optional feature and can be enabled in the "matrix configuration" dropdown. See issue [#269](https://github.com/mitre-attack/attack-navigator/issues/269).

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

@@ -1,13 +1,2 @@
-<!--The content below is only a placeholder and can be replaced.-->
-<!-- <div *ngIf="techniques && tactics"> -->
-<tabs>
-    <!-- <tab [tabTitle]="'grid'">
-        <DataTable></DataTable>
-    </tab> -->
-</tabs>
+<tabs></tabs>
 <span style="font-size: 7pt">MITRE ATT&CK&reg; Navigator v{{nav_version}}</span>
-
-<!-- </div> -->
-<!-- <div *ngIf="!techniques && !tactics">
-    loading...
-</div> -->

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

@@ -2,6 +2,7 @@ import { Component, ViewChild, DoCheck, HostListener } from '@angular/core';
 import { TabsComponent } from './tabs/tabs.component';
 import { ConfigService } from './config.service';
 import * as globals from "./globals";
+import { DataService } from './data.service';
 
 @Component({
     selector: 'app-root',
@@ -30,6 +31,4 @@ export class AppComponent {
             return false;
         }
     }
-
-
 }

nav-app/src/app/app.module.ts

@@ -14,6 +14,8 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatExpansionModule } from '@angular/material/expansion';
+import { MatSidenavModule } from '@angular/material/sidenav';
+
 import { ColorPickerModule } from 'ngx-color-picker';
 import { HttpClientModule } from '@angular/common/http';
 
@@ -27,11 +29,13 @@ import { MatrixSideComponent } from './matrix/matrix-side/matrix-side.component'
 import { MatrixFlatComponent } from './matrix//matrix-flat/matrix-flat.component';
 import { MatrixMiniComponent } from './matrix//matrix-mini/matrix-mini.component';
 import { TooltipComponent } from './matrix/technique-cell/tooltip/tooltip.component';
-import { MultiselectComponent } from './multiselect/multiselect.component';
-import { TechniquesSearchComponent } from './techniques-search/techniques-search.component';
+import { SearchAndMultiselectComponent } from './search-and-multiselect/search-and-multiselect.component';
 import { ContextmenuComponent } from './matrix/technique-cell/contextmenu/contextmenu.component';
 import { TacticCellComponent } from './matrix/tactic-cell/tactic-cell.component';
 import { VersionUpgradeComponent } from './version-upgrade/version-upgrade.component';
+import { SidebarComponent } from './sidebar/sidebar.component';
+import { MatCardModule } from "@angular/material/card";
+import { MatDividerModule } from "@angular/material/divider";
 
 
 @NgModule({
@@ -46,11 +50,11 @@ import { VersionUpgradeComponent } from './version-upgrade/version-upgrade.compo
     MatrixFlatComponent,
     MatrixMiniComponent,
     TooltipComponent,
-    MultiselectComponent,
-    TechniquesSearchComponent,
+    SearchAndMultiselectComponent,
     ContextmenuComponent,
     TacticCellComponent,
     VersionUpgradeComponent,
+    SidebarComponent
   ],
   imports: [
     BrowserModule,
@@ -68,6 +72,9 @@ import { VersionUpgradeComponent } from './version-upgrade/version-upgrade.compo
     MatExpansionModule,
     MatDialogModule,
     ColorPickerModule,
+    MatSidenavModule,
+    MatCardModule,
+    MatDividerModule
   ],
   exports: [
       MatSelectModule,

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

@@ -43,14 +43,20 @@ export class DataService {
      */
     parseBundle(domain: Domain, stixBundles: any[]): void {
         let platforms = new Set<String>();
+        let seenIDs = new Set<String>();
         for (let bundle of stixBundles) {
             let techniqueSDOs = [];
             let matrixSDOs = [];
             let idToTechniqueSDO = new Map<string, any>();
             let idToTacticSDO = new Map<string, any>();
             for (let sdo of bundle.objects) { //iterate through stix domain objects in the bundle
-                // ignore deprecated and revoked objects in the bundle
-                if (sdo.x_mitre_deprecated || sdo.revoked) continue; 
+                // ignore deprecated and revoked objects in the bundle?
+                if (sdo.x_mitre_deprecated || sdo.revoked) continue;
+
+                // filter out duplicates
+                if (!seenIDs.has(sdo.id)) seenIDs.add(sdo.id)
+                else continue;
+
                 // parse according to type
                 switch(sdo.type) {
                     case "intrusion-set":
@@ -133,16 +139,18 @@ export class DataService {
                 }
                 domain.techniques.push(new Technique(techniqueSDO, subtechniques, this));
             }
-            
+
             //create matrices, which also creates tactics and filters techniques
             for (let matrixSDO of matrixSDOs) {
                 domain.matrices.push(new Matrix(matrixSDO, idToTacticSDO, domain.techniques, this));
             }
-            
+
             // parse platforms
             for (let technique of domain.techniques) {
-                for (let platform of technique.platforms) {
-                    platforms.add(platform)
+                if (technique.platforms) {
+                    for (let platform of technique.platforms) {
+                        platforms.add(platform)
+                    }
                 }
             }
             for (let subtechnique of domain.subtechniques) {
@@ -302,9 +310,9 @@ export class DataService {
     }
 }
 
-/** 
+/**
  * Common attributes for STIX objects
- */ 
+ */
 export abstract class BaseStix {
     public readonly id: string;          // STIX ID
     public readonly attackID: string;    // ATT&CK ID
@@ -376,15 +384,14 @@ export class Technique extends BaseStix {
         this.platforms = stixSDO.x_mitre_platforms;
       	if (stixSDO.x_mitre_data_sources !== undefined)
 		      this.datasources = stixSDO.x_mitre_data_sources.toString();
-	      else
+	    else
 		      this.datasources = "";
         this.tactics = stixSDO.kill_chain_phases.map((phase) => phase.phase_name);
 
         this.subtechniques = subtechniques;
         for (let subtechnique of this.subtechniques) {
             subtechnique.parent = this;
         }
-
     }
 
     /**
@@ -472,7 +479,7 @@ export class Mitigation extends BaseStix {
         let rels = this.dataService.getDomain(domainID).relationships.mitigates;
         if (rels.has(this.id)) {
             return rels.get(this.id);
-        } 
+        }
         else return [];
     }
     /**
@@ -522,10 +529,10 @@ export class Domain {
     public relationships: any = {
         // subtechnique subtechnique-of technique
         // ID of technique to [] of subtechnique IDs
-        subtechniques_of: new Map<string, string[]>(), 
+        subtechniques_of: new Map<string, string[]>(),
         // group uses technique
         // ID of group to [] of technique IDs
-        group_uses: new Map<string, string[]>(), 
+        group_uses: new Map<string, string[]>(),
         // group uses technique
         // ID of group to [] of technique IDs
         software_uses: new Map<string, string[]>(),

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

@@ -40,33 +40,14 @@
             <!-- Search -->
             <div *ngIf="configService.getFeature('search')" class="control-row-item">
 
-                <div class="control-row-button dropdown noselect"
-                    (click)="currentDropdown = currentDropdown !== 'search' ? 'search' : null;"
+                <div class="control-row-button noselect"
+                    (click)="(viewModel.sidebarOpened = (viewModel.sidebarContentType !== 'search') ? true : !viewModel.sidebarOpened) && (viewModel.sidebarContentType = 'search')"
                     matTooltipPosition="below"
                     matTooltip="search">
                     <img src="assets/icons/ic_search_black_24px.svg"/>
                 </div>
-
-                <div class="dropdown-container search" *ngIf="currentDropdown === 'search'" #dropdown [class.left]="checkalign(dropdown)">
-                    <app-techniques-search [viewModel]="viewModel"></app-techniques-search>
-                </div>
-            </div>
-
-
-            <!-- Multi-select -->
-            <div *ngIf="configService.getFeature('multiselect')" class="control-row-item">
-                <div class="control-row-button dropdown noselect"
-                    (click)="currentDropdown = currentDropdown !== 'multiselect' ? 'multiselect' : null;"
-                    matTooltipPosition="below"
-                    matTooltip="multi-select">
-                    <img src="assets/icons/ic_playlist_add_black_24px.svg"/>
-                </div>
-                <div class="dropdown-container multiselect" *ngIf="currentDropdown === 'multiselect'" #dropdown [class.left]="checkalign(dropdown)">
-                    <app-multiselect [viewModel]="viewModel"></app-multiselect>
-                </div>
             </div>
 
-
             <!-- deselect all -->
             <div *ngIf="configService.getFeature('deselect_all')" class="control-row-item">
                 <div class="control-row-button noselect"
@@ -535,26 +516,34 @@
  88  888  88    8oooo88    888      888  88o    888     88 888
 o88o  8  o88o o88o  o888o o888o    o888o  88o8 o888o o88o  o888o
                                                                  -->
-
-<div class="matrices" oncontextmenu="return false">
+<div class="matrices">
+    <div oncontextmenu="return false">
         <div class="spinner" *ngIf="!dataService.getDomain(viewModel.domainID).dataLoaded">
             <mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
         </div>
-        <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>
-                <div *ngIf="viewModel.layout.layout == 'side'">
-                    <matrix-side [matrix]="matrix" [viewModel]="viewModel" (selectionChanged)="onTechniqueSelect()"></matrix-side>
-                </div>
-                <div *ngIf="viewModel.layout.layout == 'flat'">
-                    <matrix-flat [matrix]="matrix" [viewModel]="viewModel" (selectionChanged)="onTechniqueSelect()"></matrix-flat>
-                </div>
-                <div *ngIf="viewModel.layout.layout == 'mini'">
-                    <matrix-mini [matrix]="matrix" [viewModel]="viewModel" (selectionChanged)="onTechniqueSelect()"></matrix-mini>
+        <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>
+                        <div *ngIf="viewModel.layout.layout == 'side'">
+                            <matrix-side [matrix]="matrix" [viewModel]="viewModel" (selectionChanged)="onTechniqueSelect()"></matrix-side>
+                        </div>
+                        <div *ngIf="viewModel.layout.layout == 'flat'">
+                            <matrix-flat [matrix]="matrix" [viewModel]="viewModel" (selectionChanged)="onTechniqueSelect()"></matrix-flat>
+                        </div>
+                        <div *ngIf="viewModel.layout.layout == 'mini'">
+                            <matrix-mini [matrix]="matrix" [viewModel]="viewModel" (selectionChanged)="onTechniqueSelect()"></matrix-mini>
+                        </div>
+                    </div>
                 </div>
-            </div>
-        </div>
+            </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/datatable/data-table.component.scss

@@ -405,6 +405,7 @@ $panel-light: lighten($panel-dark, 8%);
 }
 
 .legendBar {
+    z-index: 999;
     position: fixed;
     bottom: 0;
     right: 0;
@@ -472,4 +473,3 @@ $panel-light: lighten($panel-dark, 8%);
         }
     }
 }
-

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

@@ -16,7 +16,7 @@ declare var tinycolor: any; //use tinycolor2
 
 import * as FileSaver from 'file-saver';
 import { ColorPickerModule } from 'ngx-color-picker';
-import { TechniquesSearchComponent } from '../techniques-search/techniques-search.component';
+import { SearchAndMultiselectComponent } from '../search-and-multiselect/search-and-multiselect.component';
 import { TmplAstVariable } from '@angular/compiler';
 
 @Component({
@@ -37,7 +37,6 @@ export class DataTableComponent implements AfterViewInit {
 
     currentDropdown: string = ""; //current dropdown menu
 
-
     //////////////////////////////////////////////////////////
     // Stringifies the current view model into a json string//
     // stores the string as a blob                          //
@@ -50,7 +49,7 @@ export class DataTableComponent implements AfterViewInit {
         let filename = this.viewModel.name.replace(/ /g, "_") + ".json";
         // FileSaver.saveAs(blob, this.viewModel.name.replace(/ /g, "_") + ".json");
         this.saveBlob(blob, filename);
-        
+
     }
 
     saveBlob(blob, filename){
@@ -75,8 +74,8 @@ export class DataTableComponent implements AfterViewInit {
         var workbook = new Excel.Workbook();
         let domain = this.dataService.getDomain(this.viewModel.domainID);
         for (let matrix of domain.matrices) {
-            var worksheet = workbook.addWorksheet(matrix.name + " (v" + domain.getVersion() + ")");  
-                      
+            var worksheet = workbook.addWorksheet(matrix.name + " (v" + domain.getVersion() + ")");
+
             // create tactic columns
             let columns = this.viewModel.filterTactics(matrix.tactics, matrix).map(tactic => { return {header: this.getDisplayName(tactic), key: tactic.name} });
             worksheet.columns = columns;
@@ -234,10 +233,10 @@ export class DataTableComponent implements AfterViewInit {
         }
     }
 
-    constructor(public dataService: DataService, 
-                private tabs: TabsComponent, 
-                private sanitizer: DomSanitizer, 
-                private viewModelsService: ViewModelsService, 
+    constructor(public dataService: DataService,
+                private tabs: TabsComponent,
+                private sanitizer: DomSanitizer,
+                private viewModelsService: ViewModelsService,
                 public configService: ConfigService) { }
 
     /**
@@ -273,7 +272,7 @@ export class DataTableComponent implements AfterViewInit {
      * @param  addToSelection add to the technique selection (shift key) or replace selection?
      */
     onTechniqueSelect(technique, addToSelection, eventX, eventY): void {
-        
+
         if (!this.viewModel.isCurrentlyEditing()) {
             if (["comment", "score", "colorpicker"].includes(this.currentDropdown)) this.currentDropdown = ""; //remove technique control dropdowns, because everything was deselected
             return;