feat: implement Initial Interface

src/mappings_editor/src/App.vue

@@ -4,9 +4,11 @@
     <div id="app-body" ref="body" :style="gridLayout">
       <div class="frame left">
         <div class="resize-handle" @pointerdown="startResize($event, Handle.Left)"></div>
-        <ViewFilterSidebar id="view-filter-sidebar"/>
+        <ViewFilterSidebar id="view-filter-sidebar" @execute="onExecute"/>
       </div>
       <div class="frame center">
+        <MappingFileSearch id="file-search" :editor="activeEditor" />
+        <MappingFileViewControl id="file-editor" :editor="activeEditor" @execute="onExecute" />
       </div>
       <div class="frame right">
         <div class="resize-handle" @pointerdown="startResize($event, Handle.Right)"></div>
@@ -26,11 +28,14 @@ import { useApplicationStore } from "./stores/ApplicationStore";
 import { defineComponent, markRaw, ref } from "vue";
 import { Browser, OperatingSystem, clamp } from "./assets/scripts/Utilities";
 import type { Command } from "./assets/scripts/Application";
+import type { MappingFileEditor } from "./assets/scripts/MappingFileEditor";
 // Components
 import AppTitleBar from "./components/Elements/AppTitleBar.vue";
 import AppHotkeyBox from "./components/Elements/AppHotkeyBox.vue";
 import AppFooterBar from "./components/Elements/AppFooterBar.vue";
 import ViewFilterSidebar from "./components/Elements/ViewFilterSidebar.vue";
+import MappingFileSearch from "./components/Controls/MappingFileSearch.vue";
+import MappingFileViewControl from "./components/Controls/MappingFileViewControl.vue";
 
 enum Handle {
   Center = 0,
@@ -76,6 +81,16 @@ export default defineComponent({
       }
     },
 
+    /**
+     * Returns the active file editor.
+     * @returns
+     *  The active file editor.
+     */
+    activeEditor(): MappingFileEditor {
+      // Have to cast because Pinia seems to struggle with type inference
+      return this.application.activeEditor as MappingFileEditor;
+    }
+
   },
   methods: {
 
@@ -174,8 +189,9 @@ export default defineComponent({
     this.onResizeObserver?.disconnect();
   },
   components: {
-    AppTitleBar, AppHotkeyBox, 
-    AppFooterBar, ViewFilterSidebar
+    AppTitleBar, AppHotkeyBox,
+    AppFooterBar, ViewFilterSidebar,
+    MappingFileSearch, MappingFileViewControl,
   }
 });
 
@@ -249,6 +265,18 @@ ul {
   border-right: solid 1px #333333;
 }
 
+#file-search {
+  height: 90px;
+  width: 100%;
+}
+
+#file-editor {
+  flex: 1;
+  width: 100%;
+  padding-left: 30px;
+  box-sizing: border-box;
+}
+
 #app-footer-bar {
   width: 100%;
   height: 100%;
@@ -273,7 +301,9 @@ ul {
 }
 
 .frame.center {
-  grid-column: 3;
+  display: flex;
+  flex-direction: column;
+  grid-column: 2;
 }
 
 .frame.right {

src/mappings_editor/src/assets/configuration/app.config.serializer.ts

@@ -29,19 +29,19 @@ export class UniversalSchemaMappingFileSerializer extends MappingFileSerializer
                 contact                 : obj.author_contact,
                 comments                : obj.comments,
                 references              : obj.references,
-                attack_object_id        : obj.source_id,
-                attack_object_name      : obj.source_text,
-                attack_object_version   : osv !== undefined && osv !== fsv ? osv : undefined,
-                capability_id           : obj.target_id,
-                capability_description  : obj.target_text,
-                capability_version      : otv !== undefined && otv !== ftv ? otv : undefined,
+                attack_object_id        : obj.target_id,
+                attack_object_name      : obj.target_text,
+                attack_object_version   : otv !== undefined && otv !== ftv ? otv : undefined,
+                capability_id           : obj.source_id,
+                capability_description  : obj.source_text,
+                capability_version      : osv !== undefined && osv !== fsv ? osv : undefined,
                 mapping_type            : obj.mapping_type,
                 group                   : obj.mapping_group,
                 status                  : obj.mapping_status
             });
         }
         // Parse domain and version
-        const [attackDomain, attackVersion] = file.source_version.split(/@/);
+        const [attackDomain, attackVersion] = file.target_version.split(/@/);
         // Parse mapping types
         const mapping_types = Object.entries(file.mapping_types).map(
             ([id, obj]) => ({ id, ...obj })
@@ -61,9 +61,8 @@ export class UniversalSchemaMappingFileSerializer extends MappingFileSerializer
                 organization                     : file.author_organization,
                 creation_date                    : file.creation_date.toString(),
                 last_update                      : file.modified_date.toString(),
-                mapping_framework                : file.target_framework,
-                mapping_framework_version        : file.target_version,
-                mapping_framework_version_schema : "",
+                mapping_framework                : file.source_framework,
+                mapping_framework_version        : file.source_version,
                 mapping_types,
                 groups
             },
@@ -83,13 +82,12 @@ export class UniversalSchemaMappingFileSerializer extends MappingFileSerializer
         const mapping_objects = [];
         for(const obj of json.mapping_objects) {
             mapping_objects.push({
-                source_id        : obj.attack_object_id,
-                source_text      : obj.attack_object_name,
-                source_version   : obj.attack_object_version,
-                source_framework : "mitre_attack",
-                target_id        : obj.capability_id,
-                target_text      : obj.capability_description,
-                target_version   : obj.capability_version,
+                source_id        : obj.capability_id,
+                source_text      : obj.capability_description,
+                source_version   : obj.capability_version,
+                target_id        : obj.attack_object_id,
+                target_text      : obj.attack_object_name,
+                target_version   : obj.attack_object_version,
                 mapping_type     : obj.mapping_type,
                 mapping_group    : obj.group,
                 mapping_status   : obj.status ?? "complete",
@@ -110,16 +108,17 @@ export class UniversalSchemaMappingFileSerializer extends MappingFileSerializer
         ));
         // Define mapping statuses
         const mapping_statuses = {
-            "complete"    : "Complete",
-            "in_progress" : "In Progress"
+            "complete"     : "Complete",
+            "in_progress"  : "In Progress",
+            "non_mappable" : "Non-Mappable"
         }
         // Parse metadata
         const mappingFileExport = { 
             version               : meta.mapping_version,
-            source_framework      : "mitre_attack",
-            source_version        : `${ meta.technology_domain }@${ meta.attack_version }`,
-            target_framework      : meta.mapping_framework,
-            target_version        : meta.mapping_framework_version,
+            source_framework      : meta.mapping_framework,
+            source_version        : meta.mapping_framework_version,
+            target_framework      : "mitre_attack",
+            target_version        : `${ meta.technology_domain }@${ meta.attack_version }`,
             author                : meta.author,
             author_contact        : meta.contact,
             author_organization   : meta.organization,
@@ -145,7 +144,6 @@ type UniversalSchemaMappingFile = {
         technology_domain: string,
         mapping_framework: string,
         mapping_framework_version: string,
-        mapping_framework_version_schema: string,
         author: string | null,
         contact: string | null,
         organization: string | null,

src/mappings_editor/src/assets/fonts/dm_mono.css

@@ -0,0 +1,18 @@
+/* latin-ext */
+@font-face {
+  font-family: 'DM Mono';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url(./DM-Mono-Latin-Ext.woff2) format('woff2');
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'DM Mono';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url(./DM-Mono-Latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

src/mappings_editor/src/assets/scripts/Application/Commands/FileManagement/LoadFile.ts

@@ -34,7 +34,6 @@ export class LoadFile extends AppCommand {
      * Executes the command.
      */
     public execute(): void {
-        console.log(this._editor);
         this._context.activeEditor = this._editor;
     }
 

src/mappings_editor/src/assets/scripts/Application/Commands/MappingFileEditor/MappingFileEditor.ts

@@ -0,0 +1,26 @@
+import { AppCommand } from "../AppCommand";
+import { UndoEditorCommand } from "./UndoEditorCommand";
+import { RedoEditorCommand } from "./RedoEditorCommand";
+import type { MappingFileEditor } from "@/assets/scripts/MappingFileEditor";
+
+/**
+ * Undoes the last editor command.
+ * @param editor
+ *  The {@link MappingFileEditor}.
+ * @returns
+ *  A command that represents the action.
+ */
+export function undoEditorCommand(editor: MappingFileEditor): AppCommand {
+    return new UndoEditorCommand(editor);
+}
+
+/**
+ * Redoes the last undone editor command.
+ * @param editor
+ *  The {@link MappingFileEditor}.
+ * @returns
+ *  A command that represents the action.
+ */
+export function redoEditorCommand(editor: MappingFileEditor): AppCommand {
+    return new RedoEditorCommand(editor);
+}

src/mappings_editor/src/assets/scripts/Application/Commands/MappingFileEditor/RedoEditorCommand.ts

@@ -0,0 +1,30 @@
+import { AppCommand } from "../AppCommand";
+import type { MappingFileEditor } from "@/assets/scripts/MappingFileEditor";
+
+export class RedoEditorCommand extends AppCommand {
+
+    /**
+     * The editor to apply the redo operation to.
+     */
+    private _editor: MappingFileEditor;
+
+
+    /**
+     * Redoes the last undone editor command.
+     * @param editor
+     *  The {@link MappingFileEditor}.
+     */
+    constructor(editor: MappingFileEditor) {
+        super();
+        this._editor = editor;
+    }
+
+
+    /**
+     * Executes the command.
+     */
+    public execute(): void {
+        this._editor.redo();
+    }
+
+}

src/mappings_editor/src/assets/scripts/Application/Commands/MappingFileEditor/UndoEditorCommand.ts

@@ -0,0 +1,30 @@
+import { AppCommand } from "../AppCommand";
+import type { MappingFileEditor } from "@/assets/scripts/MappingFileEditor";
+
+export class UndoEditorCommand extends AppCommand {
+
+    /**
+     * The editor to apply the undo operation to.
+     */
+    private _editor: MappingFileEditor;
+
+
+    /**
+     * Undoes the last editor command.
+     * @param editor
+     *  The {@link MappingFileEditor}.
+     */
+    constructor(editor: MappingFileEditor) {
+        super();
+        this._editor = editor;
+    }
+
+
+    /**
+     * Executes the command.
+     */
+    public execute(): void {
+        this._editor.undo();
+    }
+
+}

src/mappings_editor/src/assets/scripts/Application/Commands/MappingFileEditor/index.ts

@@ -0,0 +1 @@
+export * from "./MappingFileEditor";

src/mappings_editor/src/assets/scripts/Application/Commands/index.ts

@@ -1,5 +1,6 @@
 export * from "./ApplicationSettings";
 export * from "./FileManagement";
+export * from "./MappingFileEditor";
 export * from "./ViewManagement";
 export * from "./AppCommand";
 export * from "./Command";