TAT-125 create methodology page

index.html

@@ -14,7 +14,22 @@
       href="https://fonts.googleapis.com/css2?family=Fira+Sans+Extra+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
       rel="stylesheet"
     />
-
+    <script type="text/x-mathjax-config">
+      MathJax.Hub.Config({
+        extensions: ["tex2jax.js"],
+        jax: ["input/TeX", "output/HTML-CSS"],
+        tex2jax: {
+          inlineMath: [ ['$','$'], ["\\(","\\)"] ],
+          displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
+          processEscapes: true
+        },
+        "HTML-CSS": { fonts: ["TeX"] }
+      });
+    </script>
+    <script
+      type="text/javascript"
+      src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js"
+    ></script>
     <title>Top ATT&CK Techniques</title>
   </head>
   <!-- Google tag (gtag.js) -->

package.json

@@ -11,13 +11,14 @@
     "update": "node ./scripts/update_techniques.js"
   },
   "dependencies": {
-    "exceljs": "^4.4.0",
     "downloadjs": "^1.4.7",
+    "exceljs": "^4.4.0",
     "marked": "^12.0.1",
     "pinia": "^2.0.29",
     "primeicons": "^7.0.0",
     "primevue": "^3.49.1",
     "vue": "^3.2.37",
+    "vue-mathjax-next": "^0.0.6",
     "vue-router": "^4.1.6"
   },
   "devDependencies": {

src/components/MethodologySidebar.vue

@@ -0,0 +1,57 @@
+<template>
+    <div>
+        <ul>
+            <li v-for="(n, i) in 3" :key="i" class="list-item" :class="{ 'active': activeItemId === i }">
+                <div class="w-full" @click="$emit('setActiveIndex', i)">
+                    <span class="highlight">{{ this.methodologyList[i].name }}:</span>
+                    <span class="details">{{ this.methodologyList[i].description }}</span>
+                </div>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import { useCalculatorStore } from "../stores/calculator.store";
+export default defineComponent({
+    props: {
+        methodologyList: Array,
+        activeItemId: Number,
+    },
+    data() {
+        return {
+            calculatorStore: useCalculatorStore(),
+        };
+    },
+    methods: {
+    }
+});
+</script>
+
+<style scoped>
+.list-item {
+    @apply border-ctid-black border-[1px] -mt-[1px] px-5 py-3 cursor-pointer text-left;
+}
+
+.list-item.active {
+    @apply bg-ctid-navy text-white
+}
+
+.list-item.active .highlight {
+    @apply text-ctid-light-purple
+}
+
+.highlight {
+    @apply mr-1 uppercase font-medium text-lg;
+    font-family: "Fira Sans Extra Condensed", sans-serif;
+}
+
+.list-item i {
+    visibility: hidden;
+}
+
+.list-item:hover i {
+    visibility: visible;
+}
+</style>

src/components/TopTenSidebar.vue

@@ -1,15 +1,14 @@
 <template>
     <div>
         <ul>
-
             <li v-for="(technique, i) of rankedList?.slice(0, 10)" :key="i" class="list-item"
                 :class="{ 'active': activeItemId === i }">
-                <div class="w-full" @click="this.$parent.setActiveIndex(i)">
+                <div class="w-full" @click="$emit('setActiveIndex', i)">
                     {{ i + 1 }}.
                     <span class="ml-3 mr-1 highlight">{{ technique.tid }}</span>
                     {{ technique.name }}
                 </div>
-                <button @click="this.$parent.deleteTechnique(i)">
+                <button @click="$emit('deleteTechnique', i)">
                     <i class="pi pi-trash"></i>
                 </button>
             </li>

src/views/MethodologyPage.vue

@@ -1,17 +1,86 @@
 <template>
-  <div>
-    <div>This is the Methodology page</div>
-  </div>
+  <section class="w-5/6 mx-auto py-20 text-center">
+    <div class="pt-20">
+      <h1 class="uppercase font-bold text-5xl">Methodology</h1>
+      <p class="pt-4 lg:w-3/4 mx-auto">A prioritized list of MITRE ATT&amp;CK techniques should be actionable and driven
+        by threat intelligence. The Center’s methodology is composed of three different components - Actionability,
+        Choke
+        Point, and Prevalence. Algorithms for each component were created to determine a technique’s weight within a
+        specific component, and then each component weight is combined to give an overall weight. </p>
+    </div>
+    <div class="container-row">
+      <div class="lg:w-1/4">
+        <div class="w-full h-auto lg:border-0 border-[1px] border-ctid-black mb-4">
+          <MethodologySidebar :methodology-list="methodologyList" :active-item-id="activeItemId"
+            @set-active-index="(i) => activeItemId = i" />
+        </div>
+      </div>
+      <div class="lg:w-3/4">
+        <div class="calculator-details">
+          <div class="container-header">
+            <h2 class="text-left">
+              <span>
+                {{ methodologyList[activeItemId].name }}
+              </span>
+            </h2>
+          </div>
+          <div v-for="(item, i) of methodologyList" :key="i">
+            <MethodologyDetails :activeItemId="i" :methodologyList="methodologyList"
+              :class="{ hidden: activeItemId !== i }" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
+import MethodologySidebar from "../components/MethodologySidebar.vue"
+import MethodologyDetails from "../components/MethodologyDetails.vue"
 
 export default defineComponent({
+  components: { MethodologySidebar, MethodologyDetails },
   data() {
-    return {};
+    return {
+      activeItemId: 0,
+      methodologyList: [
+        { name: "Actionability", description: "The opportunity for a defender to detect or mitigate against each ATT&CK technique based on publicly available analytics and security controls" },
+        { name: "Choke Point", description: "A specific technique where many other techniques converge or diverge, and eliminating that specific technique would cause disruption to an adversary" },
+        { name: "Prevalence", description: "The frequency of which an attacker uses a specific ATT&CK technique over a period of time" },
+      ]
+    };
   },
 });
 </script>
 
-<style scoped></style>
+<style scoped>
+.container {
+  @apply h-auto mb-4
+}
+
+.container-body,
+.container-header {
+  @apply py-4 px-6
+}
+
+.container-body h3 {
+  @apply font-bold
+}
+
+.container-body p {
+  @apply mb-2 text-sm
+}
+
+img {
+  object-fit: contain;
+}
+
+.link-section h2 {
+  @apply font-bold text-left mt-4
+}
+
+.btn-primary {
+  @apply my-2
+}
+</style>

src/views/TopTenResults.vue

@@ -8,7 +8,8 @@
         </div>
         <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" />
+                <TopTenSidebar :ranked-list="rankedList" :activeItemId="activeItemId"
+                    @set-active-index="(i) => activeItemId = i" @delete-technique="(i) => deleteTechnique(i)" />
                 <button class="btn-primary mt-4" @click="download()">Download List</button>
             </div>
             <div class="col-span-2 h-full">
@@ -63,13 +64,10 @@ export default defineComponent({
         },
     },
     methods: {
-        setActiveIndex(index: number) {
-            this.activeItemId = index
-        },
         deleteTechnique(index: number) {
-            this.rankedList.splice(index, 1)
+            this.calculatorStore.removeTechnique(index)
             if (index < this.activeItemId) {
-                this.setActiveIndex(this.activeItemId - 1)
+                this.activeItemId = this.activeItemId - 1
             }
         },
         download() {