From ebbeeaadaeda157fbe852eb7a85d24f7e4732892 Mon Sep 17 00:00:00 2001
From: arobbins <arobbins@mitre.org>
Date: Wed, 5 Jun 2024 14:12:22 -0400
Subject: [PATCH 1/4] feat(TAT-92): use primevue SplitButton to add another
 download option to create navigator layers with top 10 technique scores

---
 src/components/DownloadListButton.vue | 112 ++++++++++++++++++++++++++
 src/components/TopTenSidebar.vue      |   8 --
 src/index.css                         |  10 +++
 src/views/TopTenResults.vue           |  38 ++-------
 4 files changed, 127 insertions(+), 41 deletions(-)
 create mode 100644 src/components/DownloadListButton.vue

diff --git a/src/components/DownloadListButton.vue b/src/components/DownloadListButton.vue
new file mode 100644
index 0000000..3729838
--- /dev/null
+++ b/src/components/DownloadListButton.vue
@@ -0,0 +1,112 @@
+<template>
+    <div>
+        <SplitButton label="Download" @click="downloadAsJson" :model="items" />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import ArrowRight from "@/assets/arrow-right.svg";
+import { type Technique, type ExportedTechnique } from "@/data/DataTypes";
+import SplitButton from "primevue/splitbutton";
+import downloadjs from "downloadjs";
+
+export default defineComponent({
+    components: {
+        SplitButton
+    },
+    props: {
+        rankedList: {
+            type: Array<Technique>,
+            required: true
+        },
+    },
+    data() {
+        return {
+            ArrowRight,
+            items: [
+                {
+                    label: 'Download as JSON',
+                    command: () => {
+                        this.downloadAsJson()
+                    }
+                },
+                {
+                    label: 'Download as Navigator Layer',
+                    command: () => {
+                        this.downloadAsNavigatorLayer()
+                    }
+                }
+            ]
+        };
+    },
+    methods: {
+        downloadAsJson() {
+            const parsedList = [] as Array<ExportedTechnique>;
+
+            this.rankedList.slice(0, 10).forEach((technique, i) => {
+                const t = {
+                    rank: i + 1,
+                    tid: technique.tid,
+                    name: technique.name,
+                    description: technique.description,
+                    url: technique.url,
+                    detection: technique.detection,
+                    score: technique.adjusted_score,
+                    network_score: technique.network_score,
+                    process_score: technique.process_score,
+                    file_score: technique.file_score,
+                    cloud_score: technique.cloud_score,
+                    hardware_score: technique.hardware_score,
+                    mitigations: technique.mitigations,
+                    subtechniques: technique.subtechniques,
+                    actionability_score: technique.actionability_score,
+                    choke_point_score: technique.choke_point_score,
+                    prevalence_score: technique.prevalence_score,
+                }
+                parsedList.push(t);
+            })
+            downloadjs(JSON.stringify(parsedList, null, 4), "TopTenTechniques.json", JSON)
+        },
+        downloadAsNavigatorLayer() {
+            const gradient = ["#ffe766", "#ffaf66"]
+            const layer = {
+                "name": "Top 10 ATT&CK Techniques",
+                "versions": {
+                    "navigator": "4.8.0",
+                    "layer": "4.5",
+                    "attack": 10.1,
+                },
+                "sorting": 3,
+                "description": "Top ATT&CK Techniques heatmap overview of ATT&CK",
+                "domain": "enterprise-attack",
+                "techniques": [] as Array<{
+                    techniqueID: string;
+                    score: number;
+                    comment: string;
+                    metadata: never[];
+                }>,
+                "gradient": {
+                    "colors": gradient,
+                    "minValue": 0,
+                    "maxValue": 1
+                },
+            }
+            for (const technique of this.rankedList.slice(0, 10)) {
+                const t = {
+                    "techniqueID": technique.tid,
+                    "score": technique.adjusted_score,
+                    "comment": "",
+                    "metadata": [],
+                }
+                layer.techniques.push(t)
+            }
+            layer.gradient.minValue = Math.min(...layer.techniques.map(o => o.score));
+            layer.gradient.maxValue = Math.max(...layer.techniques.map(o => o.score));
+            downloadjs(JSON.stringify(layer, null, 4), "TopTenTechniquesNavigatorLayer.json", JSON)
+        }
+    },
+});
+</script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/src/components/TopTenSidebar.vue b/src/components/TopTenSidebar.vue
index 84e6679..67e4df2 100644
--- a/src/components/TopTenSidebar.vue
+++ b/src/components/TopTenSidebar.vue
@@ -20,7 +20,6 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import { useCalculatorStore } from "../stores/calculator.store";
 import { type Technique } from "@/data/DataTypes";
 export default defineComponent({
     props: {
@@ -33,13 +32,6 @@ export default defineComponent({
             default: 0,
         }
     },
-    data() {
-        return {
-            calculatorStore: useCalculatorStore(),
-        };
-    },
-    methods: {
-    }
 });
 </script>
 
diff --git a/src/index.css b/src/index.css
index 2737132..fc9ab97 100644
--- a/src/index.css
+++ b/src/index.css
@@ -148,3 +148,13 @@ h1, h2, h3, h4, h5, h6 {
 .p-menubar-root-list {
     @apply w-60 -ml-40
 }
+.p-splitbutton.p-component {
+    @apply w-full bg-ctid-navy hover:bg-ctid-dark-navy text-white rounded-none p-4 my-4 ;
+}
+.p-splitbutton .p-button-label {
+    @apply uppercase font-bold text-lg hover:text-ctid-light-purple;
+    font-family: "Fira Sans Extra Condensed", sans-serif;
+}
+.p-splitbutton .p-button-icon {
+    @apply hover:text-ctid-light-purple
+}
\ No newline at end of file
diff --git a/src/views/TopTenResults.vue b/src/views/TopTenResults.vue
index e4140a2..3f82dee 100644
--- a/src/views/TopTenResults.vue
+++ b/src/views/TopTenResults.vue
@@ -9,7 +9,7 @@
         <div class="lg:grid hidden grid-cols-3 gap-4 w-5/6 mx-auto calculator-box auto-rows-fr">
             <div class="col-span-1 calculator-list">
                 <TopTenSidebar :ranked-list="rankedList" :activeItemId="activeItemId" />
-                <button class="btn-primary mt-4" @click="download()">Download List</button>
+                <DownloadListButton :ranked-list="rankedList" />
             </div>
             <div class="col-span-2 h-full">
                 <div class="calculator-details">
@@ -30,7 +30,7 @@
         </div>
         <div class="w-5/6 mx-auto lg:hidden block">
             <TopTenAccordion :ranked-list="rankedList" :activeItemId="activeItemId" />
-            <button class="btn-primary mt-10" @click="download()">Download List</button>
+            <DownloadListButton :ranked-list="rankedList" />
         </div>
     </div>
 </template>
@@ -42,11 +42,11 @@ import TopTenSidebar from "../components/TopTenSidebar.vue"
 import TopTenDetails from "../components/TopTenDetails.vue"
 import TopTenAccordion from "../components/TopTenAccordion.vue"
 import SystemScoreSection from "../components/SystemScoreSection.vue"
-import downloadjs from "downloadjs";
-import type { ExportedTechnique, Technique } from "@/data/DataTypes";
+import type { Technique } from "@/data/DataTypes";
+import DownloadListButton from "../components/DownloadListButton.vue";
 
 export default defineComponent({
-    components: { TopTenSidebar, TopTenDetails, TopTenAccordion, SystemScoreSection },
+    components: { TopTenSidebar, TopTenDetails, TopTenAccordion, SystemScoreSection, DownloadListButton },
     data() {
         return {
             calculatorStore: useCalculatorStore(),
@@ -72,34 +72,6 @@ export default defineComponent({
                 this.setActiveIndex(this.activeItemId - 1)
             }
         },
-        download() {
-            const parsedList = [] as Array<ExportedTechnique>;
-
-            this.rankedList.slice(0, 10).forEach((technique, i) => {
-                const t = {
-                    rank: i + 1,
-                    tid: technique.tid,
-                    name: technique.name,
-                    description: technique.description,
-                    url: technique.url,
-                    detection: technique.detection,
-                    score: technique.adjusted_score,
-                    network_score: technique.network_score,
-                    process_score: technique.process_score,
-                    file_score: technique.file_score,
-                    cloud_score: technique.cloud_score,
-                    hardware_score: technique.hardware_score,
-                    mitigations: technique.mitigations,
-                    subtechniques: technique.subtechniques,
-                    actionability_score: technique.actionability_score,
-                    choke_point_score: technique.choke_point_score,
-                    prevalence_score: technique.prevalence_score,
-                }
-                parsedList.push(t);
-            })
-
-            downloadjs(JSON.stringify(parsedList, null, 4), "TopTenTechniques.json", JSON)
-        },
         setRankedList() {
             let filteredList = structuredClone(toRaw(this.calculatorStore.techniques));
             filteredList = this.applyScores(filteredList)

From 1c78dcceaa366fa1bd516e70da509e1a361f6ddb Mon Sep 17 00:00:00 2001
From: arobbins <arobbins@mitre.org>
Date: Thu, 6 Jun 2024 14:52:35 -0400
Subject: [PATCH 2/4] feat(TAT-92): Add score information to navigator comments

---
 src/components/DownloadListButton.vue | 30 ++++++++++++++++++++-------
 src/index.css                         | 10 ++++-----
 2 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/src/components/DownloadListButton.vue b/src/components/DownloadListButton.vue
index 3729838..048dfa0 100644
--- a/src/components/DownloadListButton.vue
+++ b/src/components/DownloadListButton.vue
@@ -10,6 +10,7 @@ import ArrowRight from "@/assets/arrow-right.svg";
 import { type Technique, type ExportedTechnique } from "@/data/DataTypes";
 import SplitButton from "primevue/splitbutton";
 import downloadjs from "downloadjs";
+import { useCalculatorStore } from "@/stores/calculator.store";
 
 export default defineComponent({
     components: {
@@ -23,6 +24,7 @@ export default defineComponent({
     },
     data() {
         return {
+            calculatorStore: useCalculatorStore(),
             ArrowRight,
             items: [
                 {
@@ -69,7 +71,7 @@ export default defineComponent({
             downloadjs(JSON.stringify(parsedList, null, 4), "TopTenTechniques.json", JSON)
         },
         downloadAsNavigatorLayer() {
-            const gradient = ["#ffe766", "#ffaf66"]
+            const gradient = ["#FFDDBD", "#ffaf66"]
             const layer = {
                 "name": "Top 10 ATT&CK Techniques",
                 "versions": {
@@ -89,21 +91,33 @@ export default defineComponent({
                 "gradient": {
                     "colors": gradient,
                     "minValue": 0,
-                    "maxValue": 1
+                    "maxValue": 3
                 },
             }
-            for (const technique of this.rankedList.slice(0, 10)) {
+            this.rankedList.forEach((technique, i) => {
+                let description = ` Rank: ${i + 1}`;
+                for (const monitoringType of Object.keys(this.calculatorStore.systemScore)) {
+                    if (technique[`${monitoringType}_score`]) {
+                        description += `\n ${monitoringType.charAt(0).toUpperCase() + monitoringType.slice(1)} Score: ${parseFloat(technique[`${monitoringType}_score`]).toFixed(2)}`
+                    }
+                }
+                description += `\n Actionability Score: ${technique.actionability_score?.toFixed(2)}\n Choke Point Score: ${technique.choke_point_score?.toFixed(2)}\n Prevalence Score: ${technique.prevalence_score?.toFixed(2)}`
+
                 const t = {
                     "techniqueID": technique.tid,
                     "score": technique.adjusted_score,
-                    "comment": "",
+                    "comment": description,
                     "metadata": [],
                 }
+                if (i > 9) {
+                    t.color = "#FFFFFF"
+                }
                 layer.techniques.push(t)
-            }
-            layer.gradient.minValue = Math.min(...layer.techniques.map(o => o.score));
-            layer.gradient.maxValue = Math.max(...layer.techniques.map(o => o.score));
-            downloadjs(JSON.stringify(layer, null, 4), "TopTenTechniquesNavigatorLayer.json", JSON)
+            })
+
+            layer.gradient.minValue = layer.techniques[9].score
+            layer.gradient.maxValue = layer.techniques[0].score
+            downloadjs(JSON.stringify(layer, null, 4), "TopTechniquesNavigatorLayer.json", JSON)
         }
     },
 });
diff --git a/src/index.css b/src/index.css
index fc9ab97..1c05292 100644
--- a/src/index.css
+++ b/src/index.css
@@ -149,12 +149,12 @@ h1, h2, h3, h4, h5, h6 {
     @apply w-60 -ml-40
 }
 .p-splitbutton.p-component {
-    @apply w-full bg-ctid-navy hover:bg-ctid-dark-navy text-white rounded-none p-4 my-4 ;
+    @apply w-full bg-ctid-navy text-white rounded-none my-4 ;
 }
-.p-splitbutton .p-button-label {
-    @apply uppercase font-bold text-lg hover:text-ctid-light-purple;
+.p-splitbutton .p-splitbutton-defaultbutton {
+    @apply uppercase font-bold text-lg hover:text-ctid-light-purple hover:bg-ctid-dark-navy p-4;
     font-family: "Fira Sans Extra Condensed", sans-serif;
 }
-.p-splitbutton .p-button-icon {
-    @apply hover:text-ctid-light-purple
+.p-splitbutton .p-button-icon-only.p-splitbutton-menubutton {
+    @apply hover:text-ctid-light-purple hover:bg-ctid-dark-navy px-2
 }
\ No newline at end of file

From ee68fe2db123f60415452d20972d131205565ca7 Mon Sep 17 00:00:00 2001
From: arobbins <arobbins@mitre.org>
Date: Fri, 7 Jun 2024 14:30:23 -0400
Subject: [PATCH 3/4] feat(TAT-92): break up strings for usability, fix
 typescript type error, and remove unnecessary code

---
 src/components/DownloadListButton.vue | 24 +++++++++++++++---------
 src/components/SystemScoreSection.vue |  8 ++++----
 src/stores/calculator.store.ts        | 10 ++++++----
 src/views/TopTenResults.vue           |  5 +++--
 4 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/src/components/DownloadListButton.vue b/src/components/DownloadListButton.vue
index 048dfa0..778b838 100644
--- a/src/components/DownloadListButton.vue
+++ b/src/components/DownloadListButton.vue
@@ -1,16 +1,13 @@
 <template>
-    <div>
-        <SplitButton label="Download" @click="downloadAsJson" :model="items" />
-    </div>
+    <SplitButton label="Download" @click="downloadAsJson" :model="items" />
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import ArrowRight from "@/assets/arrow-right.svg";
 import { type Technique, type ExportedTechnique } from "@/data/DataTypes";
 import SplitButton from "primevue/splitbutton";
 import downloadjs from "downloadjs";
-import { useCalculatorStore } from "@/stores/calculator.store";
+import { useCalculatorStore, type CalculatorStore } from "@/stores/calculator.store";
 
 export default defineComponent({
     components: {
@@ -25,7 +22,6 @@ export default defineComponent({
     data() {
         return {
             calculatorStore: useCalculatorStore(),
-            ArrowRight,
             items: [
                 {
                     label: 'Download as JSON',
@@ -87,6 +83,7 @@ export default defineComponent({
                     score: number;
                     comment: string;
                     metadata: never[];
+                    color: string;
                 }>,
                 "gradient": {
                     "colors": gradient,
@@ -94,20 +91,29 @@ export default defineComponent({
                     "maxValue": 3
                 },
             }
+            type SystemScoreKeys = (keyof CalculatorStore["systemScoreObj"])[];
             this.rankedList.forEach((technique, i) => {
                 let description = ` Rank: ${i + 1}`;
-                for (const monitoringType of Object.keys(this.calculatorStore.systemScore)) {
+                for (const monitoringType of Object.keys(this.calculatorStore.systemScore) as SystemScoreKeys) {
+                    // add each score value to navigator comments:
                     if (technique[`${monitoringType}_score`]) {
-                        description += `\n ${monitoringType.charAt(0).toUpperCase() + monitoringType.slice(1)} Score: ${parseFloat(technique[`${monitoringType}_score`]).toFixed(2)}`
+                        const monitorType = monitoringType.charAt(0).toUpperCase() + monitoringType.slice(1);
+                        const monitorTypeScore = technique[`${monitoringType}_score`].toFixed(2);
+                        description += `\n${monitorType} Score: ${monitorTypeScore}`;
                     }
                 }
-                description += `\n Actionability Score: ${technique.actionability_score?.toFixed(2)}\n Choke Point Score: ${technique.choke_point_score?.toFixed(2)}\n Prevalence Score: ${technique.prevalence_score?.toFixed(2)}`
+                const actionability = `Actionability Score: ${technique.actionability_score?.toFixed(2)}`
+                const chokePoint = `Choke Point Score: ${technique.choke_point_score?.toFixed(2)}`
+                const prevalence = `Prevalence Score: ${technique.prevalence_score?.toFixed(2)}`
+
+                description += `\n ${actionability}\n ${chokePoint}\n ${prevalence}`
 
                 const t = {
                     "techniqueID": technique.tid,
                     "score": technique.adjusted_score,
                     "comment": description,
                     "metadata": [],
+                    "color": ""
                 }
                 if (i > 9) {
                     t.color = "#FFFFFF"
diff --git a/src/components/SystemScoreSection.vue b/src/components/SystemScoreSection.vue
index 3aff80d..38df428 100644
--- a/src/components/SystemScoreSection.vue
+++ b/src/components/SystemScoreSection.vue
@@ -7,12 +7,12 @@
         </button>
     </div>
     <div class="system-score-row">
-        <div v-for="monitoringType of Object.keys(this.calculatorStore.systemScore)" :key="monitoringType"
+        <div v-for="monitoringType of Object.keys(calculatorStore.systemScore)" :key="monitoringType"
             class="w-max inline-block mr-4">
             <span class="highlight">{{ getScoreText(monitoringType) }}</span>
             {{ monitoringType }} Monitoring
         </div>
-        <div v-for="filter of Object.keys(this.calculatorStore.activeFilters)" :key="filter" class="inline-block">
+        <div v-for="filter of Object.keys(calculatorStore.activeFilters)" :key="filter" class="inline-block">
             <span class="mr-4 w-max inline-block">
                 {{ filter }}:
                 <span class="highlight">{{ getFilterText(filter) }}</span>
@@ -40,11 +40,11 @@ export default defineComponent({
         };
     },
     methods: {
-        getScoreText(key) {
+        getScoreText(key: string) {
             if (this.calculatorStore.systemScore[key].label === "None") { return "No" }
             return this.calculatorStore.systemScore[key].label
         },
-        getFilterText(key) {
+        getFilterText(key: string) {
             if (this.calculatorStore.activeFiltersObj[key].size < 1) {
                 return `All ${key} Controls`
             }
diff --git a/src/stores/calculator.store.ts b/src/stores/calculator.store.ts
index 1387688..6d224d6 100644
--- a/src/stores/calculator.store.ts
+++ b/src/stores/calculator.store.ts
@@ -61,10 +61,10 @@ export const useCalculatorStore = defineStore("calculator", {
   },
   actions: {
     updateActiveFilters(filterValues: {
-      nist: [];
-      cis: [];
-      detection: [];
-      os: [];
+      nist: Set<string>;
+      cis: Set<string>;
+      detection: Set<string>;
+      os: Set<string>;
     }) {
       this.activeFiltersObj = filterValues;
     },
@@ -145,3 +145,5 @@ export const useCalculatorStore = defineStore("calculator", {
     },
   },
 });
+// Define Calculator Store Type
+export type CalculatorStore = ReturnType<typeof useCalculatorStore>;
diff --git a/src/views/TopTenResults.vue b/src/views/TopTenResults.vue
index 3f82dee..87765ae 100644
--- a/src/views/TopTenResults.vue
+++ b/src/views/TopTenResults.vue
@@ -37,7 +37,7 @@
 
 <script lang="ts">
 import { defineComponent, toRaw } from "vue";
-import { useCalculatorStore } from "../stores/calculator.store";
+import { useCalculatorStore, type CalculatorStore } from "../stores/calculator.store";
 import TopTenSidebar from "../components/TopTenSidebar.vue"
 import TopTenDetails from "../components/TopTenDetails.vue"
 import TopTenAccordion from "../components/TopTenAccordion.vue"
@@ -120,7 +120,8 @@ export default defineComponent({
             return false;
         },
         applyScores(filteredList: Array<Technique>) {
-            for (const monitoringType of Object.keys(this.scores)) {
+            type SystemScoreKeys = (keyof CalculatorStore["systemScoreObj"])[];
+            for (const monitoringType of Object.keys(this.scores) as SystemScoreKeys) {
                 const adjustment = this.scores[monitoringType].value;
                 filteredList = filteredList.map((technique) => {
                     if (technique[`${monitoringType}_coverage`]) {

From b3b8024e3503d70584b555deb9e8106a83e00dae Mon Sep 17 00:00:00 2001
From: arobbins <arobbins@mitre.org>
Date: Thu, 13 Jun 2024 16:07:08 -0400
Subject: [PATCH 4/4] feat(TAT-92): fix bug after merging in change to
 actionability

---
 src/components/DownloadListButton.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/DownloadListButton.vue b/src/components/DownloadListButton.vue
index 778b838..8b3870d 100644
--- a/src/components/DownloadListButton.vue
+++ b/src/components/DownloadListButton.vue
@@ -102,7 +102,7 @@ export default defineComponent({
                         description += `\n${monitorType} Score: ${monitorTypeScore}`;
                     }
                 }
-                const actionability = `Actionability Score: ${technique.actionability_score?.toFixed(2)}`
+                const actionability = `Actionability Score: ${technique.actionability_score?.combined_score?.toFixed(2)}`
                 const chokePoint = `Choke Point Score: ${technique.choke_point_score?.toFixed(2)}`
                 const prevalence = `Prevalence Score: ${technique.prevalence_score?.toFixed(2)}`