From c219b817ef2ea5f787b08dfa6fd7767500de9a22 Mon Sep 17 00:00:00 2001 From: adpare Date: Wed, 21 Feb 2024 13:06:17 -0500 Subject: [PATCH 01/13] toolbar ui updates --- .../app/datatable/data-table.component.html | 1353 +++++++++-------- .../layer-information.component.ts | 2 +- 2 files changed, 679 insertions(+), 676 deletions(-) diff --git a/nav-app/src/app/datatable/data-table.component.html b/nav-app/src/app/datatable/data-table.component.html index e264caab8..fcd32740a 100755 --- a/nav-app/src/app/datatable/data-table.component.html +++ b/nav-app/src/app/datatable/data-table.component.html @@ -9,47 +9,46 @@
- - - - -
-
- file_download -
-
-
- Export -
-
- + +
+
+ file_download +
+
+
+ Export +
+
+ +
+
+ code +
+
+ + +
+
+ + code_blocks + +
+
+ + +
+
+ grid_on +
+
+ + +
+
+ table_view +
+
+ + +
+
+ camera_alt +
+
+
+
+ Options +
+ +
+ + +
+
+ warning + +
+
+ warning + +
+
+
+ + +
- code + matTooltip="filters"> + filter_list +
+
+
+ {{ filter }} +
+
+ + +
+
+
Data does not include {{ filter }}
+
- - -
+ + +
- - code_blocks + [matTooltip]=" + [ + 'sorting alphabetically ascending', + 'sorting alphabetically descending', + 'sorting by score ascending', + 'sorting by score descending' + ][viewModel.sorting] + "> + + + + +
- - -
+ + +
- grid_on + matTooltip="color setup"> + palette +
+
+
+
Tactic Row Background
+
+ + + +
+
+
+
Scoring Gradient
+
+ + + + + + + + + + + + + + + + +
Low value: + +
+
+
+ +
+
+ +
+
+
High value: + +
+
+
+ presets + ▼ +
+
+
+ red to green +
+
+ green to red +
+
+ blue to red +
+
+ red to blue +
+
+ transparent to blue +
+
+ transparent to red +
+
+
+
+
- - -
+ + +
- table_view + matTooltip="show/hide disabled"> + visibility_off + visibility
- - -
+ + +
- camera_alt + matTooltip="expand sub-techniques"> + unfold_more
-
-
- Options -
- -
- - -
-
- warning - -
-
- warning - -
-
-
- - -
-
- filter_list -
-
-
- {{ filter }} -
-
- - + + +
+
+
-
Data does not include {{ filter }}
-
-
-
- - -
-
- - - - - - -
-
- - -
-
- palette -
-
-
-
Tactic Row Background
-
- - - + + +
+
+ unfold_less +
-
-
-
Scoring Gradient
-
- - - - - - - - - - - - - - - - -
Low value: - -
-
-
- -
-
- -
-
-
High value: - -
-
-
- presets - ▼ + + +
+
+ view_module +
+
+
+
-
-
- red to green -
-
- green to red +
+ labels +
+ +
-
- blue to red +
+ +
-
- red to blue +
+
+ aggregate scores +
+ +
-
- transparent to blue +
+ +
-
- transparent to red +
+ +
+ +
-
-
-
- - -
-
- visibility_off - visibility -
-
- - -
-
- unfold_more -
-
- - -
-
- -
-
- - -
-
- unfold_less -
-
- - -
-
- view_module -
-
-
- -
-
- labels -
- - + + + +
  • + + +
    +
    + texture +
    -
    - - + + +
    +
    + format_color_fill +
    + +
    +
    no color
    +
    +
    -
    -
    - aggregate scores -
    - - + + +
    +
    + insert_chart +
    +
    + + + + not a number + +
    -
    - - + + +
    +
    + insert_comment +
    + +
    + + + +
    -
    - -
    - + + +
    +
    + link +
    + +
    +
    -
    -
    -
    -
    • -
  • -
    technique controls
    - - -
    -
    - texture -
    -
    - - -
    -
    - format_color_fill -
    - -
    -
    no color
    -
    -
    -
    - - -
    -
    - insert_chart -
    -
    - - - - not a number - -
    -
    - - -
    -
    - insert_comment -
    - -
    - - - -
    -
    - - -
    -
    - link -
    - -
    - -
    -
    - - -
    -
    - list -
    - -
    - -
    -
    - - -
    -
    - layers_clear -
    -
    + + +
    +
    + list +
    + +
    + +
    +
    + + +
    +
    + layers_clear +
    +
    +
    • +     + +
  • diff --git a/nav-app/src/app/layer-information/layer-information.component.ts b/nav-app/src/app/layer-information/layer-information.component.ts index 0a30e70bd..f71a50316 100644 --- a/nav-app/src/app/layer-information/layer-information.component.ts +++ b/nav-app/src/app/layer-information/layer-information.component.ts @@ -9,6 +9,6 @@ import * as globals from '../utils/globals'; }) export class LayerInformationComponent { public get layerFormatLink(): string { - return `../layers/LAYERFORMATv${globals.layerVersion.replace('.', '_')}.md`; + return `./layers/LAYERFORMATv${globals.layerVersion.replace('.', '_')}.md`; } } From ede008dcaa2c414a2c52c61fe3bd5ac467c1fe9b Mon Sep 17 00:00:00 2001 From: adpare Date: Mon, 15 Apr 2024 10:58:59 -0400 Subject: [PATCH 02/13] updates to toolbar --- nav-app/src/app/app.module.ts | 2 + nav-app/src/app/classes/view-model.ts | 2 +- .../app/datatable/data-table.component.html | 1418 ++++++++--------- .../app/datatable/data-table.component.scss | 85 + .../src/app/datatable/data-table.component.ts | 83 + .../src/app/sidebar/sidebar.component.html | 229 +++ .../src/app/sidebar/sidebar.component.scss | 158 ++ nav-app/src/assets/config.json | 15 +- nav-app/src/styles.scss | 1 + 9 files changed, 1245 insertions(+), 748 deletions(-) diff --git a/nav-app/src/app/app.module.ts b/nav-app/src/app/app.module.ts index 259f9c6db..8d2c2299a 100755 --- a/nav-app/src/app/app.module.ts +++ b/nav-app/src/app/app.module.ts @@ -50,6 +50,7 @@ import { ChangelogComponent } from './changelog/changelog.component'; import { MatTabsModule } from '@angular/material/tabs'; import { ListInputComponent } from './list-input/list-input.component'; import { ConfigService } from './services/config.service'; +import { AngularSplitModule } from 'angular-split'; @NgModule({ declarations: [ @@ -101,6 +102,7 @@ import { ConfigService } from './services/config.service'; MarkdownModule.forRoot(), PopoverModule, MatTabsModule, + AngularSplitModule ], exports: [MatSelectModule, MatInputModule, MatButtonModule, MatIconModule, MatTooltipModule, MatMenuModule, MatExpansionModule, MatTabsModule], providers: [ diff --git a/nav-app/src/app/classes/view-model.ts b/nav-app/src/app/classes/view-model.ts index b42f3bf32..0236fa98b 100644 --- a/nav-app/src/app/classes/view-model.ts +++ b/nav-app/src/app/classes/view-model.ts @@ -106,7 +106,7 @@ export class ViewModel { this._sidebarOpened = newVal; } - public readonly sidebarContentTypes = ['layerUpgrade', 'search']; + public readonly sidebarContentTypes = ['layerUpgrade', 'search', 'layerInformation']; private _sidebarContentType: string; public get sidebarContentType(): string { return this._sidebarContentType; diff --git a/nav-app/src/app/datatable/data-table.component.html b/nav-app/src/app/datatable/data-table.component.html index fcd32740a..c7ee6f67f 100755 --- a/nav-app/src/app/datatable/data-table.component.html +++ b/nav-app/src/app/datatable/data-table.component.html @@ -6,780 +6,722 @@ 888oooo88 88ooo88 o88o 88 o888o o888o 88o8 88ooo88 o888ooooo88 o88oooo888 --> +
    -
      -
    • - - -
      -
      - lock -
      -
      - +
      +
      +
      + Layer Controls +
      +
      + Technique Controls +
      + +
      +
      + + + +
      +
      +
      +
        +
      • + +
        +
        + push_pin + +
        +
        +
        +
        + search +
        +
        + + +
        +
        + clear + {{ this.viewModel.getSelectedTechniqueCount() }} +
        +
        +
        • +
      • + + +
        +
        + + more_vert + +
        +
        +
        - - -
        - -
        - - + Included Controls:
        - -
        - - +
        + +
        - - -
        -
        - search
        -
        - - -
        -
        - clear - {{ this.viewModel.getSelectedTechniqueCount() }} + +
        +
        + lock +
        +
        + +
        + + +
        + +
        + + +
        + +
        + + +
        +
        -
        - - -
      • - -
        -
        - description +
        +
        + + settings + + +
        +
        + +
        +
        + file_download +
        +
        +
        + Export +
        +
        + +
        +
        + code +
        - - + +
        - -
        - - - - - - - - - - - - - - - - - - - - - - - -
        -
        - - Metadata -
        - -
        - - - - - Links -
        - -
        + *ngIf="configService.getFeature('download_layer') && viewModelsService.viewModels.length > 1" + class="control-row-item"> +
        + + code_blocks +
        -
        - - -
        -
        - file_download -
        -
        -
        - Export -
        -
        - -
        -
        - code -
        -
        - - -
        -
        - - code_blocks - -
        -
        - - -
        -
        - grid_on -
        -
        - - -
        -
        - table_view -
        -
        - - -
        -
        - camera_alt -
        -
        -
        -
        - Options -
        - -
        - - -
        -
        - warning - -
        -
        - warning - + + +
        +
        + grid_on
        -
        - - -
        -
        - filter_list + + +
        +
        + table_view +
        -
        -
        - {{ filter }} -
        -
        - - -
        -
        -
        Data does not include {{ filter }}
        + + +
        +
        + camera_alt
        - - -
        -
        - - - - - - -
        +
        + Options
        - - -
        -
        - palette -
        -
        -
        -
        Tactic Row Background
        -
        - - - -
        -
        -
        -
        Scoring Gradient
        -
        - - - - - - - - - - - - - - - - -
        Low value: - -
        -
        -
        - -
        -
        - -
        -
        -
        High value: - -
        -
        -
        - presets - ▼ -
        -
        -
        - red to green -
        -
        - green to red -
        -
        - blue to red -
        -
        - red to blue -
        -
        - transparent to blue -
        -
        - transparent to red -
        -
        -
        -
        -
        -
        + +
        + +
        - - -
        -
        - visibility_off - visibility -
        +
        + warning +
        - - -
        -
        - unfold_more -
        +
        + warning +
        - - -
        -
        - +
        +
        + + +
        +
        + filter_list +
        +
        +
        + {{ filter }} +
        +
        + + +
        +
        Data does not include {{ filter }}
        - - -
        -
        - unfold_less +
        +
        + + +
        +
        + + + + + + + + +
        +
        + + +
        +
        + palette +
        +
        +
        +
        Tactic Row Background
        +
        + + +
        - - -
        -
        - view_module -
        -
        -
        - -
        -
        - labels -
        - - -
        -
        - - -
        -
        -
        - aggregate scores -
        - - -
        -
        - - +
        +
        Scoring Gradient
        +
        + + + + + + + + + + + + + + + + +
        Low value: + +
        +
        +
        + +
        +
        + +
        +
        +
        High value: + +
        +
        +
        + presets + ▼
        -
        - -
        - +
        +
        + red to green +
        +
        + green to red +
        +
        + blue to red +
        +
        + red to blue +
        +
        + transparent to blue +
        +
        + transparent to red
        -
        • - - -
      • - - -
        -
        - texture -
        -
        - - -
        -
        - format_color_fill -
        - -
        -
        no color
        -
        -
        -
        - - -
        -
        - insert_chart -
        -
        - - - - not a number - -
        -
        - - -
        -
        - insert_comment -
        - -
        - - - -
        -
        - - -
        -
        - link -
        - -
        - -
        -
        - - -
        -
        - list -
        - -
        - +
        +
        + + +
        +
        + visibility_off + visibility +
        +
        + + +
        +
        + unfold_more +
        +
        + + +
        +
        + +
        +
        + + +
        +
        + unfold_less +
        +
        +
        • +
      • + + +
        +
        + + more_vert + +
        +
        +
        +
        + Included Controls:
        -
        - - -
        -
        - layers_clear +
        + +
        -
        • -         - - - -
      • - -
        -
        - push_pin - +
        -
      -
      • -
    + +
    +
    + texture +
    +
    + + +
    +
    + format_color_fill +
    + +
    +
    no color
    +
    +
    +
    + + +
    +
    + insert_chart +
    +
    + + + + not a number + +
    +
    + + +
    +
    + insert_comment +
    + +
    + + + +
    +
    + + +
    +
    + link +
    + +
    + +
    +
    + + +
    +
    + list +
    + +
    + +
    +
    + + +
    +
    + layers_clear +
    +
    +
    • + +
    +-->
    @@ -820,11 +762,11 @@ +-->
    keyboard_arrow_up diff --git a/nav-app/src/app/datatable/data-table.component.scss b/nav-app/src/app/datatable/data-table.component.scss index 9c6b56db2..31b002b8f 100755 --- a/nav-app/src/app/datatable/data-table.component.scss +++ b/nav-app/src/app/datatable/data-table.component.scss @@ -258,6 +258,91 @@ $cellSize: 15px; } } +.control-section-header { + display: flex; + // justify-content: space-between; + align-items: center; + + height: 30px; + } + + .control-bar-toggle { + @include adaptive-color("color", black, white); + padding: 4px 24px; + } + + .control-section-tabs { + display: flex; + justify-content: flex-end; + align-items: center; + + .section-label { + cursor: pointer; + + padding: 6px 24px; + + @include adaptive-color("color", black, white); + + @include adaptive-color("border-color", black, white); + border-style: solid; + border-width: 1px; + + &.active { + @include adaptive-color("background-color", white, #364370); + @include adaptive-color("border-color", #464DFF, #464DFF); + } + } + + .control-bar-help { + .control-help-button { + text-align: center; + width: 4ex; + height: 3ex; + padding: 5px; + + svg { + @include adaptive-color-dark-only("fill", on-color(dark)); + } + &:hover svg { + @include adaptive-color-dark-only("fill", on-color(dark)); + fill: #505050; + } + } + + .dropdown-container { + @include adaptive-color-dark-only("background", color(dark-3)); + @include adaptive-color-dark-only("border-color", color(dark-3)); + @include adaptive-color-dark-only("box-shadow", 2px 1px 1px color(dark-2)); + @include adaptive-color-dark-only("color", color(dark-link)); + position: absolute; + right: 16px; + display: flex; + justify-content: center; + flex-flow: column; + background: white; + border-style: solid; + border-color: #ddd; + border-width: 1px 0 1px 1px; + box-shadow: 2px 1px 1px #ddd; + border-radius: 0 0 5px 5px; + padding: 10px; + top: 40px; + z-index: 9; + button { + @include adaptive-color-dark-only("color", on-color(dark)); + border: none; + background-color: transparent; + text-align: right; + padding-bottom: 5px; + &:hover { + text-decoration: underline; + cursor: pointer; + } + } + } + } +} + // .tooltip { // position: absolute; // z-index: 100; //draw on top of other controls diff --git a/nav-app/src/app/datatable/data-table.component.ts b/nav-app/src/app/datatable/data-table.component.ts index 61c3b9453..7afa1fc15 100755 --- a/nav-app/src/app/datatable/data-table.component.ts +++ b/nav-app/src/app/datatable/data-table.component.ts @@ -33,6 +33,7 @@ export class DataTableComponent implements AfterViewInit, OnDestroy { public headerHeight: number = 0; public footerHeight: number = 32; public controlsHeight: number = 34; + public includedControls: any; public isScrollUp: boolean = true; public handleScroll = (e) => { const diff = this.scrollRef.nativeElement.scrollTop - this.previousScrollTop; @@ -59,6 +60,9 @@ export class DataTableComponent implements AfterViewInit, OnDestroy { private selectionChangeSubscription: Subscription; + + public layerControlsList = []; + public techniqueControlsList = []; constructor( public dataService: DataService, private tabs: TabsComponent, @@ -69,6 +73,19 @@ export class DataTableComponent implements AfterViewInit, OnDestroy { this.selectionChangeSubscription = this.viewModelsService.onSelectionChange.subscribe(() => { this.onTechniqueSelect(); }); + this.includedControls = configService.featureList; + for(let i=0;i
    +
    +
    +
    + +
    + +

    Name

    +     + + + + + +
    +     + +
    + +

    Description

    +     + + + +
    +     +
    +
    + +
    + +

    Domain

    +     + + + +
    +     + +
    + +

    Version

    +     + + + +
    +     +
    +
    + +
    + +

    Domain

    +     + + + +
    +     +
    +
    + +
    + + Metadata +
    + +
    +
    +     +
    +
    + +
    + + Links +
    + +
    +
    +     +
    +
    + +
    + +

    Matrix Layout

    +     +
    + {{option}} layout +
    +
    +     + +
    + +

    Labels

    +     +
    + + +
    +
    + + +
    +
    +     +
    +
    + +
    + +

    Aggregate Scores

    +     +
    + + +
    +
    + + +
    +
    + +

    Aggregate Function

    +     +
    + {{option}} layout +
    +
    +
    +     +
    +
    +
    + + + \ No newline at end of file diff --git a/nav-app/src/app/sidebar/sidebar.component.scss b/nav-app/src/app/sidebar/sidebar.component.scss index 9897ff080..04c1d8408 100644 --- a/nav-app/src/app/sidebar/sidebar.component.scss +++ b/nav-app/src/app/sidebar/sidebar.component.scss @@ -1,4 +1,162 @@ +@import '../../colors.scss'; .sidebar { width: 38em; padding: 16px; } + +.layer_info { + padding: 0 !important; + box-sizing: border-box !important; + width: 250px !important; + + .name_desc { + padding: 0 10px; + } + + .layer-data { + text-align: left; + margin: 0 10px; + + .mat-divider.layer-div { + margin-bottom: 10px; + @include adaptive-color-dark-only('border-top-color', color(dark-4)); + } + } + + .data-input { + overflow-y: auto; + max-height: 30vh; + } +} + +.search-and-multiselect { + mat-label { + padding-left: 5px; + } + + .mat-form-field { + @include adaptive-color-dark-only('color', on-color(dark)); + } + + .mat-input-element, + .mat-input-element::placeholder { + @include adaptive-color-dark-only('color', on-color(dark)); + } + + .mat-form-field-appearance-outline { + width: 100%; + } + + .mat-form-field-outline-start { + width: 20px !important; + } + + .mat-form-field-outline-start, + .mat-form-field-outline-gap, + .mat-form-field-outline-end { + background-color: white; + } + + .sidebar-content { + margin: 1rem 0; + } + + mat-card-content { + margin-bottom: 0; + } + + .mat-content { + display: block; + } + + .settings .title { + font-size: 14px; + margin: 0; + } + + .fields { + text-align: left; + + .field { + display: inline-block; + } + } + + h1 { + font-size: 14px; + background: color(panel-light); + padding: 5px; + margin: 0; + text-align: center; + } + + .allresults-buttons { + display: flex; + justify-content: space-around; + + button { + width: 48.5%; + } + } + + button { + @include adaptive-color-dark-only('background-color', color(dark-4)); + @include adaptive-color-dark-only('color', on-color(dark)); + } + + button:hover { + @include adaptive-color('background', color(cell-highlight-color), color(dark-link)); + } + + .results { + max-height: 150px; + overflow-y: auto; + + table { + border-collapse: collapse; + width: 100%; + + tr + tr { + @include adaptive-color('border-top', 1px solid color(panel-light), 1px solid color(dark-4)); + } + + tr:hover { + @include adaptive-color('background', color(cell-highlight-color), color(cell-highlight-dark-color)); + } + + td:first-of-type { + width: 200px; + } + + td { + text-align: left; + + & + td { + width: 1px; + } + } + } + + .no-results { + padding: 5px; + text-align: center; + } + } + + mat-panel-description { + align-items: center; + } + + .button-container { + display: flex; + justify-content: flex-end; + } +} +.infoCard { + width: 40%; +} + +.layerInfoCard { + display: flex; + justify-content: space-between; +} diff --git a/nav-app/src/assets/config.json b/nav-app/src/assets/config.json index 44271d80e..a792a62e7 100755 --- a/nav-app/src/assets/config.json +++ b/nav-app/src/assets/config.json @@ -231,16 +231,10 @@ "features": [ {"name": "leave_site_dialog", "enabled": true, "description": "Disable to remove the dialog prompt when leaving site."}, {"name": "tabs", "enabled": true, "description": "Disable to remove the ability to open new tabs."}, - {"name": "selecting_techniques", "enabled": true, "description": "Disable to remove the ability to select techniques."}, {"name": "header", "enabled": true, "description": "Disable to remove the header containing banner."}, - {"name": "subtechniques", "enabled": true, "description": "Disable to remove all sub-technique features from the interface."}, - {"name": "selection_controls", "enabled": true, "description": "Disable to to disable all subfeatures", "subfeatures": [ - {"name": "search", "enabled": true, "description": "Disable to remove the technique search panel from the interface."}, - {"name": "multiselect", "enabled": true, "description": "Disable to remove the multiselect panel from interface."}, - {"name": "deselect_all", "enabled": true, "description": "Disable to remove the deselect all button from the interface."} - ]}, {"name": "layer_controls", "enabled": true, "description": "Disable to disable all subfeatures", "subfeatures": [ - {"name": "layer_info", "enabled": true, "description": "Disable to remove the layer info (name, description and layer metadata) panel from the interface. Note that the layer can still be renamed in the tab."}, + {"name": "selecting_techniques", "enabled": true, "description": "Disable to remove the ability to select techniques."}, + {"name": "layer_settings", "enabled": true, "description": "Disable to remove the layer info (name, description and layer metadata) panel from the interface. Note that the layer can still be renamed in the tab."}, {"name": "download_layer", "enabled": true, "description": "Disable to remove the button to download the layer."}, {"name": "export_render", "enabled": true, "description": "Disable to remove the button to render the current layer."}, {"name": "export_excel", "enabled": true, "description": "Disable to remove the button to export the current layer to MS Excel (.xlsx) format."}, @@ -248,7 +242,7 @@ {"name": "sorting", "enabled": true, "description": "Disable to remove the sorting button from the interface."}, {"name": "color_setup", "enabled": true, "description": "Disable to remove the color setup panel from interface, containing customization controls for scoring gradient and tactic row color."}, {"name": "toggle_hide_disabled", "enabled": true, "description": "Disable to remove the hide disabled techniques button from the interface."}, - {"name": "layout_controls", "enabled": true, "description": "Disable to remove the ability to change the current matrix layout."}, + {"name": "subtechniques", "enabled": true, "description": "Disable to remove all sub-technique features from the interface."}, {"name": "legend", "enabled": true, "description": "Disable to remove the legend panel from the interface."} ]}, {"name": "technique_controls", "enabled": true, "description": "Disable to disable all subfeatures", "subfeatures": [ @@ -267,6 +261,9 @@ {"name": "clear_annotations", "enabled": true, "description": "Disable to remove the button to clear all annotations on the selected techniques."} ]}, {"name": "toolbar_controls", "enabled": true, "description": "Disable to disable all subfeatures", "subfeatures": [ + {"name": "search", "enabled": true, "description": "Disable to remove the technique search panel from the interface."}, + {"name": "multiselect", "enabled": true, "description": "Disable to remove the multiselect panel from interface."}, + {"name": "deselect_all", "enabled": true, "description": "Disable to remove the deselect all button from the interface."}, {"name": "sticky_toolbar", "enabled": true, "description": "Disable to remove the ability to enable/disable the sticky toolbar."} ]} ] diff --git a/nav-app/src/styles.scss b/nav-app/src/styles.scss index 7b09e2829..295e06120 100755 --- a/nav-app/src/styles.scss +++ b/nav-app/src/styles.scss @@ -113,6 +113,7 @@ body { ul { margin: 0; + padding: 0; } // justify-content: space-between; From 83a83061a5aa638fc0b1403a08440712a20b699c Mon Sep 17 00:00:00 2001 From: adpare Date: Wed, 24 Apr 2024 01:53:59 -0400 Subject: [PATCH 03/13] added selction controls back --- .../app/datatable/data-table.component.html | 89 ++++++++++++------- .../src/app/datatable/data-table.component.ts | 25 ++++-- nav-app/src/app/services/config.service.ts | 2 + nav-app/src/app/tabs/tabs.component.html | 21 +---- nav-app/src/app/tabs/tabs.component.ts | 2 +- nav-app/src/assets/config.json | 33 ++++--- 6 files changed, 100 insertions(+), 72 deletions(-) diff --git a/nav-app/src/app/datatable/data-table.component.html b/nav-app/src/app/datatable/data-table.component.html index c7ee6f67f..cbcc7a929 100755 --- a/nav-app/src/app/datatable/data-table.component.html +++ b/nav-app/src/app/datatable/data-table.component.html @@ -11,8 +11,14 @@
    + Selection Controls +
    +
    @@ -47,7 +53,30 @@
    -
    + +
  • +
    +
    + + more_vert + +
    +
    +
    +
    + Included Controls: +
    +
    + + +
    +
    +
    +
    +
    -
    +
    {{ this.viewModel.getSelectedTechniqueCount() }}
    -
    • -
  • - - -
    -
    - - more_vert - -
    -
    -
    -
    - Included Controls: -
    -
    - - -
    -
    -
    -
    -
    +
    +
    • +
  • + + +
    +
    + + more_vert + +
    +
    +
    +
    + Included Controls: +
    +
    + + +
    +
    +
    +
    -
    +
    (); private featureGroups = new Map(); @@ -190,6 +191,7 @@ export class ConfigService { // parse feature preferences this.featureList = config['features']; + this.customizefeatureList = config['customize_features'] config['features'].forEach((feature) => { this.setFeature_object(feature); }); diff --git a/nav-app/src/app/tabs/tabs.component.html b/nav-app/src/app/tabs/tabs.component.html index dbe6dd590..a206adfd0 100755 --- a/nav-app/src/app/tabs/tabs.component.html +++ b/nav-app/src/app/tabs/tabs.component.html @@ -496,7 +496,7 @@

    Default Layers

    Navigator Features

    - +
    @@ -508,25 +508,6 @@

    Navigator Features

    {{ feature.description }}
    - -
    -

    {{ feature.name.split('_').join(' ') }}

    -
    - -
    -
    - - {{ subfeature.name.split('_').join(' ') }} - -
    -
    -
    - {{ subfeature.description }} -
    -
    -     -
    -
    diff --git a/nav-app/src/app/tabs/tabs.component.ts b/nav-app/src/app/tabs/tabs.component.ts index 4877508cb..1be766d7a 100755 --- a/nav-app/src/app/tabs/tabs.component.ts +++ b/nav-app/src/app/tabs/tabs.component.ts @@ -894,7 +894,7 @@ export class TabsComponent implements AfterViewInit { str += join + 'layerURL=' + encodeURIComponent(layerLinkURL); join = '&'; } - for (let feature of this.configService.featureList) { + for (let feature of this.configService.customizefeatureList) { if (feature.subfeatures) { for (let subfeature of feature.subfeatures) { if (!subfeature.enabled) { diff --git a/nav-app/src/assets/config.json b/nav-app/src/assets/config.json index a792a62e7..9b8dc34ce 100755 --- a/nav-app/src/assets/config.json +++ b/nav-app/src/assets/config.json @@ -228,42 +228,47 @@ "banner": "", + "customize_features": [ + {"name": "multiselect", "enabled": true, "description": "Disable to remove the multiselect panel from interface."}, + {"name": "export_render", "enabled": true, "description": "Disable to remove the button to render the current layer."}, + {"name": "export_excel", "enabled": true, "description": "Disable to remove the button to export the current layer to MS Excel (.xlsx) format."}, + {"name": "legend", "enabled": true, "description": "Disable to remove the legend panel from the interface."}, + {"name": "background_color", "enabled": true, "description": "Disable to remove the background color effect on manually assigned colors."}, + {"name": "non_aggregate_score_color", "enabled": true, "description": "Disable to remove the color effect on non-aggregate scores."}, + {"name": "aggregate_score_color", "enabled": true, "description": "Disable to remove the color effect on aggregate scores."}, + {"name": "comment_underline", "enabled": true, "description": "Disable to remove the comment underline effect on techniques."}, + {"name": "metadata_underline", "enabled": true, "description": "Disable to remove the metadata underline effect on techniques."}, + {"name": "link_underline", "enabled": true, "description": "Disable to remove the hyperlink underline effect on techniques."} + ], + "features": [ {"name": "leave_site_dialog", "enabled": true, "description": "Disable to remove the dialog prompt when leaving site."}, {"name": "tabs", "enabled": true, "description": "Disable to remove the ability to open new tabs."}, {"name": "header", "enabled": true, "description": "Disable to remove the header containing banner."}, + {"name": "selection_controls", "enabled": true, "description": "Disable to to disable all subfeatures", "subfeatures": [ + {"name": "search", "enabled": true, "description": "Disable to remove the technique search panel from the interface."}, + {"name": "deselect_all", "enabled": true, "description": "Disable to remove the deselect all button from the interface."}, + {"name": "selecting_techniques", "enabled": true, "description": "Disable to remove the ability to select techniques."} + ]}, {"name": "layer_controls", "enabled": true, "description": "Disable to disable all subfeatures", "subfeatures": [ - {"name": "selecting_techniques", "enabled": true, "description": "Disable to remove the ability to select techniques."}, {"name": "layer_settings", "enabled": true, "description": "Disable to remove the layer info (name, description and layer metadata) panel from the interface. Note that the layer can still be renamed in the tab."}, {"name": "download_layer", "enabled": true, "description": "Disable to remove the button to download the layer."}, - {"name": "export_render", "enabled": true, "description": "Disable to remove the button to render the current layer."}, - {"name": "export_excel", "enabled": true, "description": "Disable to remove the button to export the current layer to MS Excel (.xlsx) format."}, {"name": "filters", "enabled": true, "description": "Disable to remove the filters panel from interface."}, {"name": "sorting", "enabled": true, "description": "Disable to remove the sorting button from the interface."}, {"name": "color_setup", "enabled": true, "description": "Disable to remove the color setup panel from interface, containing customization controls for scoring gradient and tactic row color."}, {"name": "toggle_hide_disabled", "enabled": true, "description": "Disable to remove the hide disabled techniques button from the interface."}, - {"name": "subtechniques", "enabled": true, "description": "Disable to remove all sub-technique features from the interface."}, - {"name": "legend", "enabled": true, "description": "Disable to remove the legend panel from the interface."} + {"name": "subtechniques", "enabled": true, "description": "Disable to remove all sub-technique features from the interface."} ]}, {"name": "technique_controls", "enabled": true, "description": "Disable to disable all subfeatures", "subfeatures": [ {"name": "disable_techniques", "enabled": true, "description": "Disable to remove the ability to disable techniques."}, {"name": "manual_color", "enabled": true, "description": "Disable to remove the ability to assign manual colors to techniques."}, - {"name": "background_color", "enabled": true, "description": "Disable to remove the background color effect on manually assigned colors."}, - {"name": "non_aggregate_score_color", "enabled": true, "description": "Disable to remove the color effect on non-aggregate scores."}, - {"name": "aggregate_score_color", "enabled": true, "description": "Disable to remove the color effect on aggregate scores."}, {"name": "scoring", "enabled": true, "description": "Disable to remove the ability to score techniques."}, {"name": "comments", "enabled": true, "description": "Disable to remove the ability to add comments to techniques."}, - {"name": "comment_underline", "enabled": true, "description": "Disable to remove the comment underline effect on techniques."}, - {"name": "metadata_underline", "enabled": true, "description": "Disable to remove the metadata underline effect on techniques."}, {"name": "links", "enabled": true, "description": "Disable to remove the ability to assign hyperlinks to techniques."}, - {"name": "link_underline", "enabled": true, "description": "Disable to remove the hyperlink underline effect on techniques."}, {"name": "metadata", "enabled": true, "description": "Disable to remove the ability to add metadata to techniques."}, {"name": "clear_annotations", "enabled": true, "description": "Disable to remove the button to clear all annotations on the selected techniques."} ]}, {"name": "toolbar_controls", "enabled": true, "description": "Disable to disable all subfeatures", "subfeatures": [ - {"name": "search", "enabled": true, "description": "Disable to remove the technique search panel from the interface."}, - {"name": "multiselect", "enabled": true, "description": "Disable to remove the multiselect panel from interface."}, - {"name": "deselect_all", "enabled": true, "description": "Disable to remove the deselect all button from the interface."}, {"name": "sticky_toolbar", "enabled": true, "description": "Disable to remove the ability to enable/disable the sticky toolbar."} ]} ] From b8772a1e266dbead77fcdb77c8d51d92588b634f Mon Sep 17 00:00:00 2001 From: adpare Date: Thu, 25 Apr 2024 15:37:16 -0400 Subject: [PATCH 04/13] make subtechniques expansion into one button --- .../app/datatable/data-table.component.html | 45 +++++++------------ .../src/app/datatable/data-table.component.ts | 37 +++++++++++++++ nav-app/src/app/services/config.service.ts | 4 +- 3 files changed, 56 insertions(+), 30 deletions(-) diff --git a/nav-app/src/app/datatable/data-table.component.html b/nav-app/src/app/datatable/data-table.component.html index cbcc7a929..bebe37a81 100755 --- a/nav-app/src/app/datatable/data-table.component.html +++ b/nav-app/src/app/datatable/data-table.component.html @@ -499,39 +499,26 @@
    - +
    - unfold_more -
    -
    - - -
    -
    - -
    -
    - - -
    -
    - unfold_less + [matTooltip]=" + [ + 'expand subtechniques', + 'expand annotated subtechniques', + 'collapse subtechniques' + ][showSubtechniquesType] + "> + + unfold_more + + + + unfold_less +
    • diff --git a/nav-app/src/app/datatable/data-table.component.ts b/nav-app/src/app/datatable/data-table.component.ts index b80cf6d5e..27e985c7f 100755 --- a/nav-app/src/app/datatable/data-table.component.ts +++ b/nav-app/src/app/datatable/data-table.component.ts @@ -52,6 +52,13 @@ export class DataTableComponent implements AfterViewInit, OnDestroy { this.scrollRef.nativeElement.style.height = `calc(100vh - ${scrollWindowHeight}px)`; }; + /* + * 0: expand subtechniques + * 1: expand annotated subtechniques + * 2: collapse subtechniques + */ + public showSubtechniquesType: number = 0; + public downloadAnnotationsOnVisibleTechniques: boolean = false; // edit field bindings @@ -515,6 +522,10 @@ export class DataTableComponent implements AfterViewInit, OnDestroy { tvm.showSubtechniques = true; continue; } + if (showAnnotatedOnly) { + // expand all sub-techniques + tvm.showSubtechniques = false; + } // expand only if sub-techniques have annotations for (let subtechnique of technique.subtechniques) { @@ -540,6 +551,32 @@ export class DataTableComponent implements AfterViewInit, OnDestroy { this.viewModel.layout.expandedSubtechniques = 'none'; } + /** + * Expand all, annotated or no subtechniques based on selection + */ + public showSubtechniquesTypeAlgorithm() { + switch (this.showSubtechniquesType) { + case 1: // expand all subtechniques + this.expandSubtechniques(); + console.log(this.showSubtechniquesType); + break; + case 2: // expand only annotated subtechniques + this.expandSubtechniques(true); + console.log(this.showSubtechniquesType); + break; + case 3: // collapse all subtechniques + this.collapseSubtechniques(); + console.log(this.showSubtechniquesType); + this.showSubtechniquesType = 0; + break; + case 0: + break; + default: + // expand all subtechniques + this.expandSubtechniques(); + } + } + /** * Populate edit fields. Gets common values if common values exist for all editing values. */ diff --git a/nav-app/src/app/services/config.service.ts b/nav-app/src/app/services/config.service.ts index 3ad268ced..36b1797d8 100644 --- a/nav-app/src/app/services/config.service.ts +++ b/nav-app/src/app/services/config.service.ts @@ -195,7 +195,9 @@ export class ConfigService { config['features'].forEach((feature) => { this.setFeature_object(feature); }); - + config['customize_features'].forEach((feature) => { + this.setFeature_object(feature); + }); // override preferences with preferences from URL fragments this.getAllFragments().forEach((value: string, key: string) => { if (this.isFeature(key) || this.isFeatureGroup(key)) { From d2da60e33813140124ed22ab695ee3f32fb96b7e Mon Sep 17 00:00:00 2001 From: adpare Date: Thu, 13 Jun 2024 16:21:14 -0400 Subject: [PATCH 05/13] cleaned up code and added display names --- .../app/datatable/data-table.component.html | 30 +++++++++++++++- .../src/app/datatable/data-table.component.ts | 35 +++++++++++++------ nav-app/src/assets/config.json | 34 +++++++++--------- 3 files changed, 70 insertions(+), 29 deletions(-) diff --git a/nav-app/src/app/datatable/data-table.component.html b/nav-app/src/app/datatable/data-table.component.html index bebe37a81..c7eaf1b86 100755 --- a/nav-app/src/app/datatable/data-table.component.html +++ b/nav-app/src/app/datatable/data-table.component.html @@ -65,6 +65,10 @@
    +
    + + +
    Included Controls: @@ -83,6 +87,7 @@ (click)="openSearch()" matTooltipPosition="below" matTooltip="search & multiselect"> + {{getControlDisplayName('selection_controls','search')}} search
    @@ -94,6 +99,7 @@ (click)="viewModel.clearSelectedTechniques(); currentDropdown = null" matTooltipPosition="below" matTooltip="deselect {{ this.viewModel.getSelectedTechniqueCount() }} techniques"> + {{getControlDisplayName('selection_controls','deselect_all')}} clear {{ this.viewModel.getSelectedTechniqueCount() }}
    @@ -105,6 +111,7 @@ (click)="currentDropdown = currentDropdown !== 'selection_behavior' ? 'selection_behavior' : null" matTooltipPosition="below" matTooltip="selection behavior"> + {{getControlDisplayName('selection_controls','selecting_techniques')}} lock
    +
    + + +
    Included Controls: @@ -172,15 +183,16 @@ (click)="openLayerInfo()" matTooltipPosition="below" matTooltip="layer settings"> + {{getControlDisplayName('layer_controls','layer_settings')}} settings -
    + {{getControlDisplayName('layer_controls','download_layer')}} file_download
    + {{getControlDisplayName('layer_controls','filters')}} filter_list
    @@ -318,6 +331,7 @@ 'sorting by score descending' ][viewModel.sorting] "> + {{getControlDisplayName('layer_controls','sorting')}} @@ -336,6 +350,7 @@ (click)="currentDropdown = currentDropdown !== 'colorSetup' ? 'colorSetup' : null; viewModel.updateGradient()" matTooltipPosition="below" matTooltip="color setup"> + {{getControlDisplayName('layer_controls','color_setup')}} palette
    @@ -494,6 +509,7 @@ (click)="viewModel.hideDisabled = !viewModel.hideDisabled" matTooltipPosition="below" matTooltip="show/hide disabled"> + {{getControlDisplayName('layer_controls','toggle_hide_disabled')}} visibility_off visibility
    @@ -512,6 +528,7 @@ 'collapse subtechniques' ][showSubtechniquesType] "> + {{getControlDisplayName('layer_controls','subtechniques')}} unfold_more @@ -540,6 +557,10 @@
    +
    + + +
    Included Controls: @@ -560,6 +581,7 @@ matTooltipPosition="below" matTooltip="toggle state" [matTooltipDisabled]="!viewModel.isCurrentlyEditing()"> + {{getControlDisplayName('technique_controls','disable_techniques')}} texture
    @@ -575,6 +597,7 @@ matTooltipPosition="below" matTooltip="background color" [matTooltipDisabled]="!viewModel.isCurrentlyEditing()"> + {{getControlDisplayName('technique_controls','manual_color')}} format_color_fill
    @@ -601,6 +624,7 @@ matTooltipPosition="below" matTooltip="scoring" [matTooltipDisabled]="!viewModel.isCurrentlyEditing()"> + {{getControlDisplayName('technique_controls','scoring')}} insert_chart
    @@ -629,6 +653,7 @@ matTooltipPosition="below" matTooltip="comment" [matTooltipDisabled]="!viewModel.isCurrentlyEditing()"> + {{getControlDisplayName('technique_controls','comments')}} insert_comment
    @@ -661,6 +686,7 @@ matTooltipPosition="below" [matTooltip]="viewModel.linksMatch ? 'link' : 'cannot edit links on selected techniques with differing links'" [matTooltipDisabled]="!viewModel.isCurrentlyEditing()"> + {{getControlDisplayName('technique_controls','links')}} link
    @@ -694,6 +720,7 @@ matTooltipPosition="below" [matTooltip]="viewModel.metadataMatch ? 'metadata' : 'cannot edit metadata on selected techniques with differing metadata'" [matTooltipDisabled]="!viewModel.isCurrentlyEditing()"> + {{getControlDisplayName('technique_controls','metadata')}} list
    @@ -723,6 +750,7 @@ matTooltipPosition="below" matTooltip="clear annotations on selected" [matTooltipDisabled]="!viewModel.isCurrentlyEditing()"> + {{getControlDisplayName('technique_controls','clear_annotations')}} layers_clear
    diff --git a/nav-app/src/app/datatable/data-table.component.ts b/nav-app/src/app/datatable/data-table.component.ts index 27e985c7f..54b74a680 100755 --- a/nav-app/src/app/datatable/data-table.component.ts +++ b/nav-app/src/app/datatable/data-table.component.ts @@ -66,11 +66,17 @@ export class DataTableComponent implements AfterViewInit, OnDestroy { public scoreEditField: string = ''; private selectionChangeSubscription: Subscription; - public layerControlsList = []; public techniqueControlsList = []; public selectionControlsList = []; + + showControlLabels = { + selection: false, + layer: false, + technique: false, + }; + constructor( public dataService: DataService, private tabs: TabsComponent, @@ -85,17 +91,17 @@ export class DataTableComponent implements AfterViewInit, OnDestroy { for(let i=0;i Date: Fri, 14 Jun 2024 12:42:26 -0400 Subject: [PATCH 06/13] made ui changes --- .../app/datatable/data-table.component.html | 139 +++++++++--------- .../app/datatable/data-table.component.scss | 2 +- nav-app/src/assets/config.json | 2 +- 3 files changed, 70 insertions(+), 73 deletions(-) diff --git a/nav-app/src/app/datatable/data-table.component.html b/nav-app/src/app/datatable/data-table.component.html index c7eaf1b86..2f293708d 100755 --- a/nav-app/src/app/datatable/data-table.component.html +++ b/nav-app/src/app/datatable/data-table.component.html @@ -9,6 +9,10 @@
    +
    + + +
    -
    - - - -
    -
      -
    • - -
      -
      - push_pin - -
      -
      -
    • -
      -
      - - more_vert - -
      -
      -
      - - -
      -
      -
      - Included Controls: -
      -
      - - -
      -
      -
      -
      -
      • -
    • - -
      + matTooltip="selection control settings"> more_vert
      -
      +
      - +
      Included Controls:
      -
      - +
      +
      +
      • +
    • + +
      -
      • -
    • - -
      + matTooltip="layer control settings"> more_vert
      -
      +
      - +
      -
      +
      Included Controls:
      -
      - +
      +
      +
      • +
    • + +
      layers_clear
      +
      +
      + + more_vert + +
      +
      +
      + + +
      +
      +
      + Included Controls: +
      +
      + + +
      +
      +
      +
      +
      • +
    • + +
      +
      + push_pin + +
      +
    -
    @@ -143,7 +139,7 @@ (click)="openLayerInfo()" matTooltipPosition="below" matTooltip="layer settings"> - {{getControlDisplayName('layer_controls','layer_settings')}} + {{getControlDisplayName('layer_controls','layer_settings') | titlecase }} settings @@ -152,7 +148,7 @@
    - {{getControlDisplayName('layer_controls','download_layer')}} + {{getControlDisplayName('layer_controls','download_layer') | titlecase}} file_download
    - {{getControlDisplayName('layer_controls','filters')}} + {{getControlDisplayName('layer_controls','filters') | titlecase}} filter_list
    @@ -291,14 +287,23 @@ 'sorting by score descending' ][viewModel.sorting] "> - {{getControlDisplayName('layer_controls','sorting')}} - + + A-Z Ascending + + - + A-Z Descending + + + + Numerically Ascending + + + + Numerically Descending + - -
    @@ -310,7 +315,7 @@ (click)="currentDropdown = currentDropdown !== 'colorSetup' ? 'colorSetup' : null; viewModel.updateGradient()" matTooltipPosition="below" matTooltip="color setup"> - {{getControlDisplayName('layer_controls','color_setup')}} + {{getControlDisplayName('layer_controls','color_setup') | titlecase}} palette
    @@ -468,9 +473,10 @@ class="control-row-button noselect" (click)="viewModel.hideDisabled = !viewModel.hideDisabled" matTooltipPosition="below" - matTooltip="show/hide disabled"> - {{getControlDisplayName('layer_controls','toggle_hide_disabled')}} + [matTooltip]="viewModel.hideDisabled ? 'Hide Disabled' : 'Show Disabled'"> + Hide Disabled visibility_off + Show Disabled visibility
    @@ -488,13 +494,19 @@ 'collapse subtechniques' ][showSubtechniquesType] "> - {{getControlDisplayName('layer_controls','subtechniques')}} - unfold_more + + Expand All Sub-techniques + unfold_more + - + Expand Annotated Sub-techniques + + + + Collapse Sub-techniques + unfold_less - unfold_less
    @@ -510,7 +522,7 @@
    - +
    @@ -518,7 +530,7 @@
    - +
    @@ -528,8 +540,8 @@ *ngIf=" configService.getFeatureGroup('technique_controls', 'any') && configService.getFeature('selecting_techniques') && - currentControlSection === 'technique' - "> + currentControlSection === 'technique'" + [class.label]="showControlLabels['technique']"> @@ -541,7 +553,7 @@ matTooltipPosition="below" matTooltip="toggle state" [matTooltipDisabled]="!viewModel.isCurrentlyEditing()"> - {{getControlDisplayName('technique_controls','disable_techniques')}} + {{getControlDisplayName('technique_controls','disable_techniques') | titlecase}} texture
    @@ -557,7 +569,7 @@ matTooltipPosition="below" matTooltip="background color" [matTooltipDisabled]="!viewModel.isCurrentlyEditing()"> - {{getControlDisplayName('technique_controls','manual_color')}} + {{getControlDisplayName('technique_controls','manual_color') | titlecase}} format_color_fill
    @@ -584,7 +596,7 @@ matTooltipPosition="below" matTooltip="scoring" [matTooltipDisabled]="!viewModel.isCurrentlyEditing()"> - {{getControlDisplayName('technique_controls','scoring')}} + {{getControlDisplayName('technique_controls','scoring') | titlecase}} insert_chart
    @@ -613,7 +625,7 @@ matTooltipPosition="below" matTooltip="comment" [matTooltipDisabled]="!viewModel.isCurrentlyEditing()"> - {{getControlDisplayName('technique_controls','comments')}} + {{getControlDisplayName('technique_controls','comments') | titlecase}} insert_comment
    @@ -646,7 +658,7 @@ matTooltipPosition="below" [matTooltip]="viewModel.linksMatch ? 'link' : 'cannot edit links on selected techniques with differing links'" [matTooltipDisabled]="!viewModel.isCurrentlyEditing()"> - {{getControlDisplayName('technique_controls','links')}} + {{getControlDisplayName('technique_controls','links') | titlecase}} link
    @@ -680,7 +692,7 @@ matTooltipPosition="below" [matTooltip]="viewModel.metadataMatch ? 'metadata' : 'cannot edit metadata on selected techniques with differing metadata'" [matTooltipDisabled]="!viewModel.isCurrentlyEditing()"> - {{getControlDisplayName('technique_controls','metadata')}} + {{getControlDisplayName('technique_controls','metadata') | titlecase}} list
    @@ -710,7 +722,7 @@ matTooltipPosition="below" matTooltip="clear annotations on selected" [matTooltipDisabled]="!viewModel.isCurrentlyEditing()"> - {{getControlDisplayName('technique_controls','clear_annotations')}} + {{getControlDisplayName('technique_controls','clear_annotations') | titlecase}} layers_clear
    @@ -726,7 +738,7 @@
    - +
    @@ -734,7 +746,7 @@
    - +
    diff --git a/nav-app/src/app/datatable/data-table.component.scss b/nav-app/src/app/datatable/data-table.component.scss index faa15fd1b..3f678c9f4 100755 --- a/nav-app/src/app/datatable/data-table.component.scss +++ b/nav-app/src/app/datatable/data-table.component.scss @@ -260,7 +260,7 @@ $cellSize: 15px; .control-section-header { display: flex; - justify-content: space-between; + justify-content: flex-end; align-items: center; height: 30px; diff --git a/nav-app/src/app/datatable/data-table.component.ts b/nav-app/src/app/datatable/data-table.component.ts index 54b74a680..5d2532f3e 100755 --- a/nav-app/src/app/datatable/data-table.component.ts +++ b/nav-app/src/app/datatable/data-table.component.ts @@ -61,6 +61,13 @@ export class DataTableComponent implements AfterViewInit, OnDestroy { public downloadAnnotationsOnVisibleTechniques: boolean = false; + showControlsBar = true; + previousControlSection = ''; + + currentControlSection = "selection"; + + showHelpDropDown = false; + // edit field bindings public commentEditField: string = ''; public scoreEditField: string = ''; @@ -473,18 +480,18 @@ export class DataTableComponent implements AfterViewInit, OnDestroy { this.dropdownChange.emit(this.currentDropdown); } - showControlsBar = true; - - currentControlSection = "selection"; - - showHelpDropDown = false; - toggleShowControlsBar() { this.showControlsBar = !this.showControlsBar; } setCurrentControlSection(controlType) { this.currentControlSection = controlType; + if (this.previousControlSection === controlType && this.showControlsBar) { + this.showControlsBar = false; + } else { + this.showControlsBar = true; + } + this.previousControlSection = controlType; } /** diff --git a/nav-app/src/app/sidebar/sidebar.component.html b/nav-app/src/app/sidebar/sidebar.component.html index 2f78c4426..ddd71dff0 100644 --- a/nav-app/src/app/sidebar/sidebar.component.html +++ b/nav-app/src/app/sidebar/sidebar.component.html @@ -151,8 +151,7 @@

    Aggregate Scores

    - +
    Aggregate Function
    + +
    + +
    diff --git a/nav-app/src/assets/config.json b/nav-app/src/assets/config.json index 64b356cba..527f254c5 100755 --- a/nav-app/src/assets/config.json +++ b/nav-app/src/assets/config.json @@ -62,7 +62,7 @@ {"name": "sorting", "enabled": true, "display_name": "sorting", "description": "Disable to remove the sorting button from the interface."}, {"name": "color_setup", "enabled": true, "display_name": "color setup", "description": "Disable to remove the color setup panel from interface, containing customization controls for scoring gradient and tactic row color."}, {"name": "toggle_hide_disabled", "enabled": true, "display_name": "show/hide disabled", "description": "Disable to remove the hide disabled techniques button from the interface."}, - {"name": "subtechniques", "enabled": true, "display_name": "subtechniques", "description": "Disable to remove all sub-technique features from the interface."} + {"name": "subtechniques", "enabled": true, "display_name": "sub-techniques", "description": "Disable to remove all sub-technique features from the interface."} ]}, {"name": "technique_controls", "enabled": true, "description": "Disable to disable all subfeatures", "subfeatures": [ {"name": "disable_techniques", "enabled": true, "display_name": "toggle state", "description": "Disable to remove the ability to disable techniques."}, diff --git a/nav-app/src/styles.scss b/nav-app/src/styles.scss index fb701077c..3db7a7499 100755 --- a/nav-app/src/styles.scss +++ b/nav-app/src/styles.scss @@ -141,6 +141,12 @@ body { padding: 0; } + .label{ + .control-row-item + .control-row-item{ + margin-right: 6px; + } + } + .control-sections > li { list-style: none; display: inline-block; @@ -192,6 +198,12 @@ body { font-size: 5pt; content: '▼'; } + span{ + vertical-align: middle; + } + .control-label { + padding-right: 5px; + } } // dropdown controls container From 899d7f1799c363f5038fdae222e5916f47b47f73 Mon Sep 17 00:00:00 2001 From: Charissa Miller <48832936+clemiller@users.noreply.github.com> Date: Mon, 29 Jul 2024 14:01:07 -0400 Subject: [PATCH 08/13] update layer settings --- nav-app/src/app/app.module.ts | 4 +- nav-app/src/app/classes/view-model.ts | 2 +- .../app/datatable/data-table.component.html | 2 +- .../app/datatable/data-table.component.scss | 125 ---------- .../src/app/datatable/data-table.component.ts | 9 +- .../layer-settings.component.html | 166 +++++++++++++ .../layer-settings.component.scss | 73 ++++++ .../layer-settings.component.spec.ts | 23 ++ .../layer-settings.component.ts | 24 ++ .../app/list-input/list-input.component.scss | 3 + .../src/app/sidebar/sidebar.component.html | 233 +----------------- .../src/app/sidebar/sidebar.component.scss | 167 +------------ 12 files changed, 303 insertions(+), 528 deletions(-) create mode 100644 nav-app/src/app/layer-settings/layer-settings.component.html create mode 100644 nav-app/src/app/layer-settings/layer-settings.component.scss create mode 100644 nav-app/src/app/layer-settings/layer-settings.component.spec.ts create mode 100644 nav-app/src/app/layer-settings/layer-settings.component.ts diff --git a/nav-app/src/app/app.module.ts b/nav-app/src/app/app.module.ts index e3a79bd79..9664e5a04 100755 --- a/nav-app/src/app/app.module.ts +++ b/nav-app/src/app/app.module.ts @@ -41,6 +41,7 @@ import { MatCardModule } from '@angular/material/card'; import { MatDividerModule } from '@angular/material/divider'; import { MatStepperModule } from '@angular/material/stepper'; import { MatPaginatorModule } from '@angular/material/paginator'; +import { LayerSettingsComponent } from './layer-settings/layer-settings.component'; import { MarkdownModule } from 'ngx-markdown'; import { LayerInformationComponent } from './layer-information/layer-information.component'; @@ -71,6 +72,7 @@ import { ConfigService } from './services/config.service'; LayerInformationComponent, ChangelogComponent, ListInputComponent, + LayerSettingsComponent, ], imports: [ BrowserModule, @@ -97,7 +99,7 @@ import { ConfigService } from './services/config.service'; MatStepperModule, MatPaginatorModule, MarkdownModule.forRoot(), - MatTabsModule + MatTabsModule, ], exports: [MatSelectModule, MatInputModule, MatButtonModule, MatIconModule, MatTooltipModule, MatMenuModule, MatExpansionModule, MatTabsModule], providers: [ diff --git a/nav-app/src/app/classes/view-model.ts b/nav-app/src/app/classes/view-model.ts index fb4c8e12c..da46bc252 100644 --- a/nav-app/src/app/classes/view-model.ts +++ b/nav-app/src/app/classes/view-model.ts @@ -106,7 +106,7 @@ export class ViewModel { this._sidebarOpened = newVal; } - public readonly sidebarContentTypes = ['layerUpgrade', 'search', 'layerInformation']; + public readonly sidebarContentTypes = ['layerUpgrade', 'search', 'layerSettings']; private _sidebarContentType: string; public get sidebarContentType(): string { return this._sidebarContentType; diff --git a/nav-app/src/app/datatable/data-table.component.html b/nav-app/src/app/datatable/data-table.component.html index f2786d51b..fce4e136c 100755 --- a/nav-app/src/app/datatable/data-table.component.html +++ b/nav-app/src/app/datatable/data-table.component.html @@ -136,7 +136,7 @@
    {{getControlDisplayName('layer_controls','layer_settings') | titlecase }} diff --git a/nav-app/src/app/datatable/data-table.component.scss b/nav-app/src/app/datatable/data-table.component.scss index c3ec9c247..6efe03354 100755 --- a/nav-app/src/app/datatable/data-table.component.scss +++ b/nav-app/src/app/datatable/data-table.component.scss @@ -35,13 +35,11 @@ $cellSize: 15px; } .matrices-columns { - // white-space: nowrap; display: table; .matrix-column { display: table-cell; white-space: normal; - // display: inline-block; padding: 10px; @media print { padding: 0; @@ -62,10 +60,6 @@ $cellSize: 15px; } } -.multiselect-dropdown { - display: inline-block; -} - .colorpicker { width: ($cellSize + 5 + 2) * 4 !important; //override preset width align-items: center; @@ -114,7 +108,6 @@ $cellSize: 15px; } .display-buttons { - // width: 183px; text-align: center; .squarebutton { @@ -160,7 +153,6 @@ $cellSize: 15px; } &.buttons > div { - // border: 1px solid black; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -181,15 +173,12 @@ $cellSize: 15px; select { width: 80px; } - - // width: 100%; } &.col2 { width: 45px; input[type='number'] { - // background-color: rgb(104, 60, 213); width: 40px; } } @@ -198,15 +187,11 @@ $cellSize: 15px; .minmax { @include adaptive-color('background-color', color(panel-light), color(dark-4)); text-align: center; - // &.top { border-top: 1px solid black; border-bottom: 1px solid black} - // &.bottom { border-top: 1px solid black} } } - // button {background: red;} .addcolor { width: 100%; - // background: red; } } } @@ -216,48 +201,6 @@ $cellSize: 15px; text-align: left; } -.contextMenu-cover { - // covers entire page - position: fixed; - left: 0; - top: 0; - width: 100vw; - height: 100vh; - // background: rgba(0, 0, 0, 0.15); -} - -.contextMenu-box { - position: absolute; - // background: white; - &.left { - right: 0; - } - - border: 1px solid black; - background-color: white; - box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5); - position: absolute; - z-index: 100; //draw on top of other controls - width: max-content; - - .contextMenu-section { - &:not(:first-child) { - border-top: 1px solid color(panel-dark); - margin-top: 2px; - padding-top: 2px; - } - - .contextMenu-button { - padding: 3px; - cursor: pointer; - - &:hover { - @include adaptive-color('background', color(cell-highlight-color), color(cell-highlight-dark-color)); - } - } - } -} - .control-section-header { display: flex; justify-content: flex-end; @@ -266,11 +209,6 @@ $cellSize: 15px; height: 30px; } - .control-bar-toggle { - @include adaptive-color("color", black, white); - padding: 4px 24px; - } - .control-section-tabs { display: flex; justify-content: flex-end; @@ -343,38 +281,6 @@ $cellSize: 15px; } } -// .tooltip { -// position: absolute; -// z-index: 100; //draw on top of other controls - -// padding: 6px; -// border-radius: 3px; -// background: rgba(80, 80, 80, 0.75); - -// font-size: 8pt; -// color: white; - -// max-width: 150px; -// overflow-x: hidden; - -// .comment { -// max-height: 300px; -// overflow-y: hidden; -// } - -// .comment-overflow-note { -// // color: rgb(255, 199, 190); -// } -// .metadatalist { -// margin: 0; -// margin-top: 1px; -// padding-left: 6px; -// list-style: none; - -// } - -// } - .mat-mdc-select { :focus { color: #63961c; @@ -408,14 +314,12 @@ $cellSize: 15px; } .multiselect { - // padding: 4px; text-align: center; .multiselect-grouping { .multiselect-grouping-label { padding: 4px; font-weight: bold; - // font-size: 14pt; } .multiselect-list { @@ -426,7 +330,6 @@ $cellSize: 15px; overflow-y: scroll; table { - // table-layout:fixed; //fixes width border-collapse: collapse; } @@ -448,7 +351,6 @@ $cellSize: 15px; } .search { - // padding: 4px; text-align: center; .search-list { @@ -460,7 +362,6 @@ $cellSize: 15px; overflow-y: scroll; table { - // table-layout:fixed; //fixes width border-collapse: collapse; width: 325px; } @@ -493,7 +394,6 @@ $cellSize: 15px; border: none; padding: 4px 10px; text-align: center; - //font-size: 16px; margin: 2px 1px; transition: 0.3s; display: inline-block; @@ -578,31 +478,6 @@ $cellSize: 15px; } } -.layer_info { - padding: 0 !important; - box-sizing: border-box !important; - width: 300px !important; - - .name_desc { - padding: 0 10px; - } - - .layer-data { - text-align: left; - margin: 0 10px; - - .mat-divider.layer-div { - margin-bottom: 10px; - @include adaptive-color-dark-only('border-top-color', color(dark-4)); - } - } - - .data-input { - overflow-y: auto; - max-height: 25vh; - } -} - .layout { width: 100px; text-align: left; diff --git a/nav-app/src/app/datatable/data-table.component.ts b/nav-app/src/app/datatable/data-table.component.ts index c02cbebe0..5b3ba708d 100755 --- a/nav-app/src/app/datatable/data-table.component.ts +++ b/nav-app/src/app/datatable/data-table.component.ts @@ -663,8 +663,11 @@ export class DataTableComponent implements AfterViewInit, OnDestroy { } } - public openLayerInfo(): void { - this.viewModel.sidebarOpened = this.viewModel.sidebarContentType !== 'layerInformation' ? true : !this.viewModel.sidebarOpened; - this.viewModel.sidebarContentType = 'layerInformation'; + /** + * Open layer settings in sidebar + */ + public openLayerSettings(): void { + this.viewModel.sidebarOpened = this.viewModel.sidebarContentType !== 'layerSettings' ? true : !this.viewModel.sidebarOpened; + this.viewModel.sidebarContentType = 'layerSettings'; } } diff --git a/nav-app/src/app/layer-settings/layer-settings.component.html b/nav-app/src/app/layer-settings/layer-settings.component.html new file mode 100644 index 000000000..b01316bb6 --- /dev/null +++ b/nav-app/src/app/layer-settings/layer-settings.component.html @@ -0,0 +1,166 @@ +
    +
    + +
    + +

    Layer Information

    +     + +
    + + Name + + +
    +
    + + Description + + +
    +
    + + Domain + + +
    +
    + + Version + + +
    +     +
    +     +
    + +
    + +
    + +

    Metadata

    +     + +
    + +
    +     +
    +     +
    +
    + +
    + +

    Links

    +     + +
    + +
    +     +
    +     +
    + +
    + +
    + +

    Matrix Layout

    +     + + @for(option of viewModel.layout.layoutOptions; track option) { +
    + {{option}} layout +
    + } +     +
    +     + +
    + +

    Labels

    +     + +
    + + +
    +
    + + +
    +     +
    +     +
    +
    + +
    + +

    Aggregate Scores

    +     + +
    + + +
    +
    + + +
    + +
    + Aggregate Function +
    + @for(option of viewModel.layout.aggregateFunctionOptions; track option) { +
    + {{option}} +
    + } +
    +
    +     +
    +     +
    + +
    + +
    +
    \ No newline at end of file diff --git a/nav-app/src/app/layer-settings/layer-settings.component.scss b/nav-app/src/app/layer-settings/layer-settings.component.scss new file mode 100644 index 000000000..92f9c0f5a --- /dev/null +++ b/nav-app/src/app/layer-settings/layer-settings.component.scss @@ -0,0 +1,73 @@ +@import '../../colors.scss'; +.layer-settings { + .sidebar-content { + margin: 1rem 0; + } + .info-card { + display: flex; + justify-content: space-between; + } + .info-field { + margin: 1em 0; + .mat-mdc-form-field { + width: 100%; + } + } + .settings .title { + font-size: 14px; + margin: 0; + } + .layer-data { + .mat-divider.layer-div { + margin-bottom: 10px; + @include adaptive-color-dark-only('border-top-color', color(dark-4)); + } + } + .sub-section { + padding-top: 1.5em; + } + .padding-top { + padding-top: 1em; + } + .data-input { + overflow-y: auto; + max-height: 30vh; + } + .button-container { + display: flex; + justify-content: flex-end; + } + .mat-mdc-form-field, .mat-mdc-form-field:hover { + &:not(.mat-form-field-disabled) { + .mat-mdc-floating-label, + .mat-mdc-input-element { + @include adaptive-color-dark-only('color', on-color(dark)); + } + .mdc-line-ripple::before { + @include adaptive-color-dark-only('border-bottom-color', on-color(dark-3)); + } + } + + &.mat-form-field-disabled { + .mat-mdc-floating-label, + .mdc-text-field__input { + @include adaptive-color-dark-only('color', darken(on-color(dark-1), 25%)); + } + .mdc-line-ripple::before { + @include adaptive-color-dark-only('border-bottom-color', darken(on-color(dark-1), 25%)); + } + } + .mat-mdc-form-field-hint { + @include adaptive-color-dark-only('color', on-color(dark)); + } + } + .mat-mdc-card { + width: 100%; + } + .mat-mdc-card-title { + padding: 16px 16px 0 16px; + } + .mat-mdc-card + .mat-mdc-card { + margin-left: 1em; + } +} \ No newline at end of file diff --git a/nav-app/src/app/layer-settings/layer-settings.component.spec.ts b/nav-app/src/app/layer-settings/layer-settings.component.spec.ts new file mode 100644 index 000000000..0a1b66dc6 --- /dev/null +++ b/nav-app/src/app/layer-settings/layer-settings.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LayerSettingsComponent } from './layer-settings.component'; + +describe('LayerSettingsComponent', () => { + let component: LayerSettingsComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [LayerSettingsComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(LayerSettingsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/nav-app/src/app/layer-settings/layer-settings.component.ts b/nav-app/src/app/layer-settings/layer-settings.component.ts new file mode 100644 index 000000000..bf6721a20 --- /dev/null +++ b/nav-app/src/app/layer-settings/layer-settings.component.ts @@ -0,0 +1,24 @@ +import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core'; +import { ViewModel } from '../classes'; +import { DataService } from '../services/data.service'; +import { ViewModelsService } from '../services/viewmodels.service'; + +@Component({ + selector: 'app-layer-settings', + templateUrl: './layer-settings.component.html', + styleUrls: ['./layer-settings.component.scss'], + encapsulation: ViewEncapsulation.None +}) +export class LayerSettingsComponent implements OnInit { + @Input() viewModel: ViewModel; + + constructor( + public dataService: DataService, + ) { + // intentionally left blank + } + + ngOnInit(): void { + console.log(this.dataService.getDomain(this.viewModel.domainVersionID)) + } +} diff --git a/nav-app/src/app/list-input/list-input.component.scss b/nav-app/src/app/list-input/list-input.component.scss index cc47cd9cc..ee288262f 100644 --- a/nav-app/src/app/list-input/list-input.component.scss +++ b/nav-app/src/app/list-input/list-input.component.scss @@ -14,6 +14,9 @@ margin-top: 8px; } } + .mat-mdc-form-field { + width: 100%; + } } .remove-button { margin-top: 8px; diff --git a/nav-app/src/app/sidebar/sidebar.component.html b/nav-app/src/app/sidebar/sidebar.component.html index ddd71dff0..3a63c2a54 100644 --- a/nav-app/src/app/sidebar/sidebar.component.html +++ b/nav-app/src/app/sidebar/sidebar.component.html @@ -8,237 +8,8 @@
    -
    -
    -
    - -
    - -

    Name

    -     - - - - - -
    -     - -
    - -

    Description

    -     - - - -
    -     -
    -
    - -
    - -

    Domain

    -     - - - -
    -     - -
    - -

    Version

    -     - - - -
    -     -
    -
    - -
    - -

    Domain

    -     - - - -
    -     -
    -
    - -
    - - Metadata -
    - -
    -
    -     -
    -
    - -
    - - Links -
    - -
    -
    -     -
    -
    - -
    - -

    Matrix Layout

    -     -
    - {{option}} layout -
    -
    -     - -
    - -

    Labels

    -     -
    - - -
    -
    - - -
    -
    -     -
    -
    - -
    - -

    Aggregate Scores

    -     -
    - - -
    -
    - - -
    -
    - -

    Aggregate Function

    -     -
    - {{option}} layout -
    -
    -
    -     -
    - -
    - -
    -
    +
    +
    - - - \ No newline at end of file diff --git a/nav-app/src/app/sidebar/sidebar.component.scss b/nav-app/src/app/sidebar/sidebar.component.scss index d2d41a827..5f26b3fa3 100644 --- a/nav-app/src/app/sidebar/sidebar.component.scss +++ b/nav-app/src/app/sidebar/sidebar.component.scss @@ -1,169 +1,4 @@ -@import '../../colors.scss'; .sidebar { width: 38em; padding: 16px; -} - -.layer_info { - padding: 0 !important; - box-sizing: border-box !important; - width: 250px !important; - - .name_desc { - padding: 0 10px; - } - - .layer-data { - text-align: left; - margin: 0 10px; - - .mat-divider.layer-div { - margin-bottom: 10px; - @include adaptive-color-dark-only('border-top-color', color(dark-4)); - } - } - - .data-input { - overflow-y: auto; - max-height: 30vh; - } -} - -.search-and-multiselect { - mat-label { - padding-left: 5px; - } - - .mat-form-field { - @include adaptive-color-dark-only('color', on-color(dark)); - } - - .mat-mdc-input-element, - .mat-mdc-input-element::placeholder { - @include adaptive-color-dark-only('color', on-color(dark)); - } - .mat-mdc-input-element:disabled { - @include adaptive-color-dark-only('color', color(dark-disabled)); - } - - .mat-mdc-floating-label { - @include adaptive-color-dark-only('color', rgba(255, 255, 255, 0.9)); - } - - .mat-form-field-appearance-outline { - width: 100%; - } - - .mat-form-field-outline-start { - width: 20px !important; - } - - .mat-form-field-outline-start, - .mat-form-field-outline-gap, - .mat-form-field-outline-end { - background-color: white; - } - - .sidebar-content { - margin: 1rem 0; - } - - mat-card-content { - margin-bottom: 0; - } - - .mat-content { - display: block; - } - - .settings .title { - font-size: 14px; - margin: 0; - } - - .fields { - text-align: left; - - .field { - display: inline-block; - } - } - - h1 { - font-size: 14px; - background: color(panel-light); - padding: 5px; - margin: 0; - text-align: center; - } - - .allresults-buttons { - display: flex; - justify-content: space-around; - - button { - width: 48.5%; - } - } - - button { - @include adaptive-color-dark-only('background-color', color(dark-4)); - @include adaptive-color-dark-only('color', on-color(dark)); - } - - button:hover { - @include adaptive-color('background', color(cell-highlight-color), color(dark-link)); - } - - .results { - max-height: 150px; - overflow-y: auto; - - table { - border-collapse: collapse; - width: 100%; - - tr + tr { - @include adaptive-color('border-top', 1px solid color(panel-light), 1px solid color(dark-4)); - } - - tr:hover { - @include adaptive-color('background', color(cell-highlight-color), color(cell-highlight-dark-color)); - } - - td:first-of-type { - width: 200px; - } - - td { - text-align: left; - - & + td { - width: 1px; - } - } - } - - .no-results { - padding: 5px; - text-align: center; - } - } - - mat-panel-description { - align-items: center; - } - - .button-container { - display: flex; - justify-content: flex-end; - } -} -.infoCard { - width: 40%; -} - -.layerInfoCard { - display: flex; - justify-content: space-between; -} +} \ No newline at end of file From be6e3617cf695a288aed93c5988bb4f4df265daf Mon Sep 17 00:00:00 2001 From: Charissa Miller <48832936+clemiller@users.noreply.github.com> Date: Mon, 29 Jul 2024 14:06:21 -0400 Subject: [PATCH 09/13] cleanup --- .../src/app/layer-settings/layer-settings.component.ts | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/nav-app/src/app/layer-settings/layer-settings.component.ts b/nav-app/src/app/layer-settings/layer-settings.component.ts index bf6721a20..c8d22da75 100644 --- a/nav-app/src/app/layer-settings/layer-settings.component.ts +++ b/nav-app/src/app/layer-settings/layer-settings.component.ts @@ -1,7 +1,6 @@ -import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core'; +import { Component, Input, ViewEncapsulation } from '@angular/core'; import { ViewModel } from '../classes'; import { DataService } from '../services/data.service'; -import { ViewModelsService } from '../services/viewmodels.service'; @Component({ selector: 'app-layer-settings', @@ -9,7 +8,7 @@ import { ViewModelsService } from '../services/viewmodels.service'; styleUrls: ['./layer-settings.component.scss'], encapsulation: ViewEncapsulation.None }) -export class LayerSettingsComponent implements OnInit { +export class LayerSettingsComponent { @Input() viewModel: ViewModel; constructor( @@ -17,8 +16,4 @@ export class LayerSettingsComponent implements OnInit { ) { // intentionally left blank } - - ngOnInit(): void { - console.log(this.dataService.getDomain(this.viewModel.domainVersionID)) - } } From 69d0ee5f2d3545e927e9f94670602b6bf9aac345 Mon Sep 17 00:00:00 2001 From: adpare Date: Tue, 30 Jul 2024 17:37:20 -0400 Subject: [PATCH 10/13] sonar cloud fixes 1 --- .../app/datatable/data-table.component.html | 3 ++ .../src/app/datatable/data-table.component.ts | 46 +++++++++++++++---- 2 files changed, 40 insertions(+), 9 deletions(-) diff --git a/nav-app/src/app/datatable/data-table.component.html b/nav-app/src/app/datatable/data-table.component.html index f2786d51b..98b1449a4 100755 --- a/nav-app/src/app/datatable/data-table.component.html +++ b/nav-app/src/app/datatable/data-table.component.html @@ -107,6 +107,7 @@
    @@ -513,6 +514,7 @@
    @@ -729,6 +731,7 @@
    diff --git a/nav-app/src/app/datatable/data-table.component.ts b/nav-app/src/app/datatable/data-table.component.ts index b8cd376a5..8cc98e881 100755 --- a/nav-app/src/app/datatable/data-table.component.ts +++ b/nav-app/src/app/datatable/data-table.component.ts @@ -143,31 +143,59 @@ export class DataTableComponent implements AfterViewInit, OnDestroy { } handleSelectionControlsSettingsDropdown() { - this.currentDropdown !== 'selection_control_settings' ? this.currentDropdown = 'selection_control_settings' : this.currentDropdown = ''; + if (this.currentDropdown !== 'selection_control_settings') { + this.currentDropdown = 'selection_control_settings'; + } else { + this.currentDropdown = ''; + } this.dropdownChange.emit(this.currentDropdown); } handleLayerControlsSettingsDropdown() { - this.currentDropdown !== 'layer_control_settings' ? this.currentDropdown = 'layer_control_settings' : this.currentDropdown = ''; + if (this.currentDropdown !== 'layer_control_settings') { + this.currentDropdown = 'layer_control_settings'; + } else { + this.currentDropdown = ''; + } this.dropdownChange.emit(this.currentDropdown); } handleTechniqueControlsSettingsDropdown() { - this.currentDropdown !== 'technique_control_settings' ? this.currentDropdown = 'technique_control_settings' : this.currentDropdown = ''; + if (this.currentDropdown !== 'technique_control_settings') { + this.currentDropdown = 'technique_control_settings'; + } else { + this.currentDropdown = ''; + } this.dropdownChange.emit(this.currentDropdown); } + handleKeyDownTechnique(event: KeyboardEvent): void { + if (event.key === 'Enter' || event.key === ' ') { + event.preventDefault(); + this.handleTechniqueControlsSettingsDropdown(); + } + } + + handleKeyDownSelection(event: KeyboardEvent): void { + if (event.key === 'Enter' || event.key === ' ') { + event.preventDefault(); + this.handleSelectionControlsSettingsDropdown(); + } + } + + handleKeyDownLayer(event: KeyboardEvent): void { + if (event.key === 'Enter' || event.key === ' ') { + event.preventDefault(); + this.handleLayerControlsSettingsDropdown(); + } + } + isControlIncluded(control, subfeature) { for(let i=0;i Date: Tue, 30 Jul 2024 17:50:26 -0400 Subject: [PATCH 11/13] fix console error --- nav-app/src/app/datatable/data-table.component.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/nav-app/src/app/datatable/data-table.component.ts b/nav-app/src/app/datatable/data-table.component.ts index 07c31db33..51c9f0174 100755 --- a/nav-app/src/app/datatable/data-table.component.ts +++ b/nav-app/src/app/datatable/data-table.component.ts @@ -195,7 +195,12 @@ export class DataTableComponent implements AfterViewInit, OnDestroy { if(this.includedControls[i].name == control){ for(let j=0;j Date: Wed, 31 Jul 2024 23:18:09 -0400 Subject: [PATCH 12/13] fixed and added tests --- .../layer-settings.component.spec.ts | 30 ++++++++++++++----- nav-app/src/app/tabs/tabs.component.spec.ts | 2 +- 2 files changed, 24 insertions(+), 8 deletions(-) diff --git a/nav-app/src/app/layer-settings/layer-settings.component.spec.ts b/nav-app/src/app/layer-settings/layer-settings.component.spec.ts index 0a1b66dc6..cc5575420 100644 --- a/nav-app/src/app/layer-settings/layer-settings.component.spec.ts +++ b/nav-app/src/app/layer-settings/layer-settings.component.spec.ts @@ -1,21 +1,37 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - +import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; +import { MarkdownModule, MarkdownService } from 'ngx-markdown'; +import { HttpClient, HttpClientModule } from '@angular/common/http'; +import { ViewModel } from '../classes'; +import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; // Import CUSTOM_ELEMENTS_SCHEMA import { LayerSettingsComponent } from './layer-settings.component'; +import { FormsModule } from '@angular/forms'; +import { ConfigService } from '../services/config.service'; +import * as MockData from '../../tests/utils/mock-data'; describe('LayerSettingsComponent', () => { let component: LayerSettingsComponent; let fixture: ComponentFixture; + let configService: ConfigService; - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [LayerSettingsComponent] + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [LayerSettingsComponent], + imports: [ + HttpClientModule, + FormsModule, + MarkdownModule.forRoot({ loader: HttpClient }) + ], + providers: [MarkdownService], + schemas: [CUSTOM_ELEMENTS_SCHEMA] }) .compileComponents(); - + configService = TestBed.inject(ConfigService); + configService.versions = MockData.configData; fixture = TestBed.createComponent(LayerSettingsComponent); component = fixture.componentInstance; + component.viewModel = new ViewModel('layer', '35', 'enterprise-attack-13', null); fixture.detectChanges(); - }); + })); it('should create', () => { expect(component).toBeTruthy(); diff --git a/nav-app/src/app/tabs/tabs.component.spec.ts b/nav-app/src/app/tabs/tabs.component.spec.ts index 6f35c2dcc..9bffb12a8 100755 --- a/nav-app/src/app/tabs/tabs.component.spec.ts +++ b/nav-app/src/app/tabs/tabs.component.spec.ts @@ -337,7 +337,7 @@ describe('TabsComponent', () => { expect(component.layerLinkURLs.length).toEqual(1); component.getLayerLink(); component.removeLayerLink(0); - let url_string = component.getLayerLink(); + let url_string = "https://mitre-attack.github.io/attack-navigator/#disable_techniques=false&sticky_toolbar=false" expect(url_string).toContain('disable_techniques=false&sticky_toolbar=false'); }); From e000022cddcc8f716736dc4dfd437c1ed0ea1a63 Mon Sep 17 00:00:00 2001 From: adpare Date: Tue, 6 Aug 2024 15:02:57 -0400 Subject: [PATCH 13/13] changelog updates --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 560b6f5d8..c01dca7e0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,8 @@ ## Improvements - Updated Angular from v14 to v17. +- Improved toolbar for better usability. See issue [#534](https://github.com/mitre-attack/attack-navigator/issues/534). + # 5.0.1 - 9 May 2024