From ab97176aeb94a5337e994d80220fd9d36456944e Mon Sep 17 00:00:00 2001
From: henrychoy <hchoy@mitre.org>
Date: Mon, 23 Dec 2024 11:24:51 -0500
Subject: [PATCH 1/6] feat: right nav drawer

---
 src/frontend/src/App.vue                    | 32 ++++++++++++++---
 src/frontend/src/assets/main.css            |  1 +
 src/frontend/src/stores/LoginStore.ts       |  3 +-
 src/frontend/src/views/CreateExperiment.vue | 38 +++++++++++++++++----
 src/frontend/src/views/ExperimentsView.vue  |  2 ++
 5 files changed, 64 insertions(+), 12 deletions(-)

diff --git a/src/frontend/src/App.vue b/src/frontend/src/App.vue
index ca1e8a32f..30f961bd7 100644
--- a/src/frontend/src/App.vue
+++ b/src/frontend/src/App.vue
@@ -1,9 +1,28 @@
 <template>
-  <NavBar class="fixed-top" style="z-index: 999;" />
-  <main :class="isMobile ? 'q-ma-md' : 'q-ma-xl'" style="margin-top: 75px;">
+  <q-layout view="hHh lpR fFf">
+
+    <q-header>
+      <NavBar />
+    </q-header>
+
+    <q-drawer v-model="store.showRightDrawer" side="right" bordered :width="200">
+      <!-- drawer content -->
+    </q-drawer>
+
+    <q-page-container>
+      <div
+        :class="isMobile ? 'q-ma-md' : 'q-ma-xl'" 
+        :style="{ 'margin-top': isMobile ? '10px' : '25px', height: '100' }"
+      >
+        <router-view />
+      </div>
+    </q-page-container>
+
+  </q-layout>
+
+  <!-- <main :class="isMobile ? 'q-ma-md' : 'q-ma-xl'" style="margin-top: 75px;">
     <RouterView />
-  </main>
-  <!-- <AccessibilityTest /> -->
+  </main> -->
 </template>
 
 <script setup lang="ts">
@@ -11,7 +30,10 @@
   import NavBar from '@/components/NavBar.vue'
   import AccessibilityTest from '@/components/AccessibilityTest.vue'
   import { useQuasar } from 'quasar'
-  import { computed, provide } from 'vue'
+  import { computed, provide, ref } from 'vue'
+  import { useLoginStore } from '@/stores/LoginStore'
+
+  const store = useLoginStore()
   
   const route = useRoute()
 
diff --git a/src/frontend/src/assets/main.css b/src/frontend/src/assets/main.css
index d33396368..88d96fd15 100644
--- a/src/frontend/src/assets/main.css
+++ b/src/frontend/src/assets/main.css
@@ -110,6 +110,7 @@ h1 {
   font-size: clamp(1rem, 10vw, 4rem) !important;
   line-height: 1 !important;
   font-weight: 400 !important;
+  margin-top: 0;
 }
 
 h2 {
diff --git a/src/frontend/src/stores/LoginStore.ts b/src/frontend/src/stores/LoginStore.ts
index 8e0bcd6f7..f04401ae5 100644
--- a/src/frontend/src/stores/LoginStore.ts
+++ b/src/frontend/src/stores/LoginStore.ts
@@ -44,11 +44,12 @@ export const useLoginStore = defineStore('login', () => {
     files: {},
   })
   
+  const showRightDrawer = ref(false)
 
   // computed()'s are getters
 
   // function()'s are actions
   
 
-  return { loggedInUser, loggedInGroup, groups, users, savedForms };
+  return { loggedInUser, loggedInGroup, groups, users, savedForms, showRightDrawer };
 })
\ No newline at end of file
diff --git a/src/frontend/src/views/CreateExperiment.vue b/src/frontend/src/views/CreateExperiment.vue
index 7a959594c..5de15a2dc 100644
--- a/src/frontend/src/views/CreateExperiment.vue
+++ b/src/frontend/src/views/CreateExperiment.vue
@@ -1,8 +1,27 @@
 <template>
-  <PageTitle 
-    :title="title"
-  />
-  <div :class="`row ${isMedium ? '' : 'q-mx-xl'} q-my-lg`">
+  <div class="row">
+    <div class="q-mr-xl">
+      <PageTitle 
+        :title="title"
+        class="col"
+      />
+    </div>
+    <q-card 
+      flat 
+      bordered 
+
+      class="q-px-lg"
+    >
+      <q-toggle
+        v-model="store.showRightDrawer"
+        left-label
+        label="View History"
+        class="custom-toggle"
+      />
+    </q-card>
+  </div>
+
+  <div :class="`row q-my-lg`">
     <div :class="`${isMobile ? 'col-12' : 'col-5'} q-mr-xl`">
       <fieldset>
         <legend>Basic Info</legend>
@@ -85,7 +104,7 @@
     </fieldset>
   </div>
 
-  <div :class="`${isMobile ? '' : 'q-mx-xl'} float-right q-mb-lg`">
+  <div :class="`float-right`">
       <q-btn  
         to="/experiments"
         color="negative" 
@@ -303,4 +322,11 @@
     router.push(toPath.value)
   }
 
-</script>
\ No newline at end of file
+</script>
+
+
+<style scoped>
+::v-deep(.custom-toggle .q-toggle__thumb) {
+  background-color: red !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/frontend/src/views/ExperimentsView.vue b/src/frontend/src/views/ExperimentsView.vue
index 312253f63..619cf8902 100644
--- a/src/frontend/src/views/ExperimentsView.vue
+++ b/src/frontend/src/views/ExperimentsView.vue
@@ -123,5 +123,7 @@
     }
   }
 
+  const toggleRightDrawer = ref(false)
+
 
 </script>

From ce75bca5da0e3a93f95b7a17ef29c2c90217003b Mon Sep 17 00:00:00 2001
From: henrychoy <hchoy@mitre.org>
Date: Mon, 30 Dec 2024 13:09:36 -0500
Subject: [PATCH 2/6] feat: add working experiment history drawer

---
 src/frontend/src/App.vue                      | 15 +++-
 src/frontend/src/components/SnapshotList.vue  | 85 ++++++++++++++++++
 .../src/components/TableComponent.vue         | 87 ++++++++++++++-----
 src/frontend/src/dialogs/LeaveFormDialog.vue  |  4 +-
 src/frontend/src/router/index.ts              |  3 +-
 src/frontend/src/stores/LoginStore.ts         |  3 +-
 src/frontend/src/views/CreateExperiment.vue   | 60 +++++++++----
 src/frontend/src/views/CreateJob.vue          |  2 +-
 8 files changed, 212 insertions(+), 47 deletions(-)
 create mode 100644 src/frontend/src/components/SnapshotList.vue

diff --git a/src/frontend/src/App.vue b/src/frontend/src/App.vue
index 30f961bd7..18ecb044b 100644
--- a/src/frontend/src/App.vue
+++ b/src/frontend/src/App.vue
@@ -5,8 +5,8 @@
       <NavBar />
     </q-header>
 
-    <q-drawer v-model="store.showRightDrawer" side="right" bordered :width="200">
-      <!-- drawer content -->
+    <q-drawer v-model="store.showRightDrawer" side="right" bordered :width="240">
+      <SnapshotList />
     </q-drawer>
 
     <q-page-container>
@@ -30,8 +30,9 @@
   import NavBar from '@/components/NavBar.vue'
   import AccessibilityTest from '@/components/AccessibilityTest.vue'
   import { useQuasar } from 'quasar'
-  import { computed, provide, ref } from 'vue'
+  import { computed, provide, watch } from 'vue'
   import { useLoginStore } from '@/stores/LoginStore'
+  import SnapshotList from './components/SnapshotList.vue'
 
   const store = useLoginStore()
   
@@ -50,4 +51,12 @@
   provide('isMobile', isMobile)
   provide('isMedium', isMedium)
 
+  watch(route, (to) => {
+    // on every route change, close snapshot drawer if open
+    if(store.showRightDrawer) {
+      store.showRightDrawer = false
+      store.selectedSnapshot = null
+    }
+  })
+
 </script>
\ No newline at end of file
diff --git a/src/frontend/src/components/SnapshotList.vue b/src/frontend/src/components/SnapshotList.vue
new file mode 100644
index 000000000..c30efea6f
--- /dev/null
+++ b/src/frontend/src/components/SnapshotList.vue
@@ -0,0 +1,85 @@
+<template>
+  <TableComponent
+    :rows="snapshots"
+    :columns="columns"
+    v-model:selected="selected"
+    title="Snapshots"
+    :hideCreateBtn="true"
+    :hideDeleteBtn="true"
+    :hideEditBtn="true"
+    :hideSearch="true"
+    :disableRadio="true"
+    rowKey="snapshot"
+    :showAll="true"
+    style="margin-top: 0; height: calc(100vh - 50px);"
+  >
+    <template #body-cell-timestamp="props">
+      {{
+        new Intl.DateTimeFormat('en-US', { 
+          year: '2-digit', 
+          month: '2-digit', 
+          day: '2-digit', 
+          hour: 'numeric', 
+          minute: 'numeric', 
+          hour12: true 
+        }).format(new Date(props.row.snapshotCreatedOn))
+      }}
+      <q-chip
+        v-if="props.row.latestSnapshot"
+        label="latest"
+        size="md"
+        dense
+        color="orange"
+        text-color="white"
+      />
+    </template>
+  </TableComponent>
+</template>
+
+<script setup>
+import { useLoginStore } from '@/stores/LoginStore'
+import { useRoute } from 'vue-router'
+import TableComponent from '@/components/TableComponent.vue'
+import { ref, watch } from 'vue'
+import * as api from '@/services/dataApi'
+
+const store = useLoginStore()
+const route = useRoute()
+
+const snapshots = ref([])
+const selected = ref([])
+
+async function getSnapshots() {
+  try {
+    const res = await api.getSnapshots(route.meta.type, route.params.id)
+    snapshots.value = res.data.data.reverse()
+    console.log('snapshots = ', snapshots.value)
+    // selectedSnapshot.value = snapshots.value[0]
+    // selectedSnapshotIndex.value = 0
+    // loadSnapshot(snapshots.value[0], 0)
+  } catch(err) {
+    console.warn(err)
+  }
+}
+
+watch(() => store.showRightDrawer, (history) => {
+  if(history) {
+    getSnapshots()
+  } else {
+    store.selectedSnapshot = null
+  }
+})
+
+watch(selected, (newVal) => {
+  if(newVal.length > 0) {
+    store.selectedSnapshot = newVal[0]
+  }
+})
+
+const columns = [
+  { name: 'timestamp', label: 'Created On', align: 'left', field: 'snapshotCreatedOn', sortable: true, },
+]
+
+
+
+</script>
\ No newline at end of file
diff --git a/src/frontend/src/components/TableComponent.vue b/src/frontend/src/components/TableComponent.vue
index 737b89cfa..5c9cbd721 100644
--- a/src/frontend/src/components/TableComponent.vue
+++ b/src/frontend/src/components/TableComponent.vue
@@ -7,14 +7,16 @@
     :filter="filter"
     selection="single"
     v-model:selected="selected"
-    row-key="id"
-    :class="`q-mt-lg ${isMobile ? '' : '' }`"
+    :row-key="props.rowKey"
+    :class="'q-mt-lg'"
     flat
     bordered
     dense
     v-model:pagination="pagination"
     @request="onRequest"
-    :rows-per-page-options="[5,10,15,20,25,50,0]"
+    :tabindex="props.disableSelect ? '' : '0'"
+    @keydown="keydown"
+    :rows-per-page-options="props.showAll ? [0] : [5,10,15,20,25,50,0]"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -29,11 +31,12 @@
         :class="`${getSelectedColor(props.selected)} cursor-pointer` " 
         :props="props"
         @click="handleClick(props)"
+        style="padding-left: 50px;"
       >
         <q-td v-for="col in props.cols" :key="col.name" :props="props">
           <q-radio 
             v-model="radioSelected" 
-            :val="props.row.id"
+            :val="props.row[props.rowKey || 'id']"
             v-if="col.name === 'radio'" 
             @click="handleClick(props)"
           />
@@ -165,19 +168,25 @@
   
   const isMobile = inject('isMobile')
 
-  const props = defineProps([
-    'columns', 
-    'rows', 
-    'title', 
-    'showExpand',
-    'hideCreateBtn',
-    'hideEditBtn', 
-    'hideDeleteBtn', 
-    'showToggleDraft', 
-    'hideSearch', 
-    'disableSelect', 
-    'rightCaption'
-  ])
+  const props = defineProps({
+  columns: Array,
+  rows: Array,
+  title: String,
+  showExpand: Boolean,
+  hideCreateBtn: Boolean,
+  hideEditBtn: Boolean,
+  hideDeleteBtn: Boolean,
+  showToggleDraft: Boolean,
+  hideSearch: Boolean,
+  disableSelect: Boolean,
+  rightCaption: String,
+  showAll: Boolean,
+  disableRadio: Boolean,
+  rowKey: {
+    type: String,
+    default: 'id'
+  },
+})
   const emit = defineEmits([
     'edit', 
     'delete', 
@@ -189,7 +198,7 @@
 
   const finalColumns = computed(() => {
     let defaultColumns = [ ...props.columns ]
-    if(!props.disableSelect) {
+    if(!props.disableSelect  && !props.disableRadio) {
       defaultColumns.unshift({ name: 'radio', align: 'center', sortable: false, label: 'Select', headerStyle: 'width: 100px' })
     }
     if(props.showExpand) {
@@ -221,26 +230,36 @@
 
   function handleClick(tableProps) {
     if(props.disableSelect) return
-    tableProps.selected = !tableProps.selected
-    radioSelected.value = tableProps.row.id
+    // tableProps.selected = !tableProps.selected
+    tableProps.selected = true
+    radioSelected.value = tableProps.row[props.rowKey]
   }
 
   watch(selected, (newVal) => {
     if(newVal.length === 0) radioSelected.value = ''
   })
 
+  watch(() => props.rows, (newVal) => {
+    // when viewing history, auto select first (latest) row
+    if (newVal.length > 0 && props.rowKey === 'snapshot') {
+      if (tableRef.value && newVal[0]) {
+        selected.value = [newVal[0]]
+      }
+    }
+  }, { deep: true })
+
   watch(showDrafts, (newVal, oldVal) => {
     if(newVal !== oldVal) selected.value = []
   })
 
   function getSelectedColor(selected) {
     if(darkMode.value && selected) return 'bg-deep-purple-10'
-    else if(selected) return 'bg-blue-grey-1'
+    // else if(selected) return 'bg-blue-grey-1'
   }
 
   const pagination = ref({
     page: 1,
-    rowsPerPage: 15,
+    rowsPerPage: props.showAll ? 0 : 15,
     sortBy: '',
     descending: false,
   })
@@ -281,4 +300,28 @@
     return new Date(dateString).toLocaleString('en-US', options)
   }
 
+  function keydown(event) {
+  // Ensure there are rows to navigate
+  if (!props.rows || props.rows.length === 0) return;
+
+  // Get the current index of the selected row
+  const currentIndex = props.rows.findIndex(row => row[props.rowKey] === selected.value[0]?.[props.rowKey])
+
+  if (event.key === 'ArrowUp') {
+    // Navigate to the previous row (if not at the first row)
+    if (currentIndex > 0) {
+      const prevRow = props.rows[currentIndex - 1]
+      selected.value = [prevRow]
+      radioSelected.value = prevRow[props.rowKey]
+    }
+  } else if (event.key === 'ArrowDown') {
+    // Navigate to the next row (if not at the last row)
+    if (currentIndex < props.rows.length - 1) {
+      const nextRow = props.rows[currentIndex + 1]
+      selected.value = [nextRow]
+      radioSelected.value = nextRow[props.rowKey]
+    }
+  }
+}
+
 </script>
diff --git a/src/frontend/src/dialogs/LeaveFormDialog.vue b/src/frontend/src/dialogs/LeaveFormDialog.vue
index fa86288d4..26b18089c 100644
--- a/src/frontend/src/dialogs/LeaveFormDialog.vue
+++ b/src/frontend/src/dialogs/LeaveFormDialog.vue
@@ -4,7 +4,9 @@
     @emitSubmit="$emit('leaveForm')"
     :hideDraftBtn="true"
   >
-    <template #title>Leave <span class="text-capitalize">{{ type }}</span> Form?</template>
+    <template #title>
+      <span class="text-capitalize">Leave {{ type }} Form?</span>
+    </template>
     <q-card-section class="q-pt-none">
       You are about to leave the {{ type }} form and have unsaved changes. <br>
       All changes will be lost.  Continue?
diff --git a/src/frontend/src/router/index.ts b/src/frontend/src/router/index.ts
index b7d16b2bd..7a3b15ff9 100644
--- a/src/frontend/src/router/index.ts
+++ b/src/frontend/src/router/index.ts
@@ -54,7 +54,8 @@ const router = createRouter({
     },
     {
       path: '/experiments/:id',
-      component: () => import('../views/CreateExperiment.vue')
+      component: () => import('../views/CreateExperiment.vue'),
+      meta: { type: 'experiments' }
     },
     {
       path: '/groups',
diff --git a/src/frontend/src/stores/LoginStore.ts b/src/frontend/src/stores/LoginStore.ts
index f04401ae5..42e6ec350 100644
--- a/src/frontend/src/stores/LoginStore.ts
+++ b/src/frontend/src/stores/LoginStore.ts
@@ -45,11 +45,12 @@ export const useLoginStore = defineStore('login', () => {
   })
   
   const showRightDrawer = ref(false)
+  const selectedSnapshot = ref()
 
   // computed()'s are getters
 
   // function()'s are actions
   
 
-  return { loggedInUser, loggedInGroup, groups, users, savedForms, showRightDrawer };
+  return { loggedInUser, loggedInGroup, groups, users, savedForms, showRightDrawer, selectedSnapshot };
 })
\ No newline at end of file
diff --git a/src/frontend/src/views/CreateExperiment.vue b/src/frontend/src/views/CreateExperiment.vue
index 5de15a2dc..1bb1c231c 100644
--- a/src/frontend/src/views/CreateExperiment.vue
+++ b/src/frontend/src/views/CreateExperiment.vue
@@ -1,24 +1,22 @@
 <template>
   <div class="row">
-    <div class="q-mr-xl">
+    <div>
       <PageTitle 
         :title="title"
-        class="col"
       />
     </div>
-    <q-card 
-      flat 
-      bordered 
-
-      class="q-px-lg"
+    <q-chip
+      v-if="route.params.id !== 'new'"
+      style="margin-top: 28px;"
+      class="q-ml-lg"
     >
       <q-toggle
         v-model="store.showRightDrawer"
         left-label
         label="View History"
-        class="custom-toggle"
+        color="orange"
       />
-    </q-card>
+    </q-chip>
   </div>
 
   <div :class="`row q-my-lg`">
@@ -34,6 +32,7 @@
               :rules="[requiredRule]"
               class="q-mb-sm q-mt-md"
               aria-required="true"
+              :disable="history"
             >
               <template v-slot:before>
                 <label :class="`field-label`">Name:</label>
@@ -50,6 +49,7 @@
               dense
               :rules="[requiredRule]"
               aria-required="true"
+              :disable="history"
             >
               <template v-slot:before>
                 <div class="field-label">Group:</div>
@@ -61,6 +61,7 @@
               v-model.trim="experiment.description"
               class="q-mb-sm q-mt-sm"
               type="textarea"
+              :disable="history"
             >
               <template v-slot:before>
                 <label :class="`field-label`">Description:</label>
@@ -70,10 +71,11 @@
         </div>
       </fieldset>
     </div>
-    <fieldset :class="`${isMobile ? 'col-12 q-mt-lg' : 'col'}`">
+    <fieldset :class="`${isMobile ? 'col-12 q-mt-lg' : 'col'}`" :disabled="history">
       <legend>Entrypoint</legend>
       <div class="q-ma-lg">
         <q-select
+          v-if="!history"
           outlined
           dense
           v-model="experiment.entrypoints"
@@ -87,19 +89,31 @@
           :options="entrypoints"
           @filter="getEntrypoints"
           class="q-mb-md"
+          :disable="history"
         >
           <template v-slot:before>
             <div class="field-label">Entrypoints:</div>
           </template>  
         </q-select>
 
-        <q-btn 
+        <q-btn
+          v-if="!history"
           color="primary"
           icon="add"
           label="Create new Entry Point"
           class="q-mt-lg"
           @click="router.push('/entrypoints/new')" 
         />
+
+        <div class="row items-center" v-if="history">
+          <q-icon
+            name="sym_o_info"
+            size="2.5em"
+            color="grey"
+            class="q-mr-sm"
+          />
+          <caption>Entrypoints are not part of Experiment snapshots</caption>
+        </div>
       </div>
     </fieldset>
   </div>
@@ -116,6 +130,7 @@
         @click="submit()" 
         color="primary" 
         label="Submit Experiment"
+        :disable="history"
       />
     </div>
 
@@ -292,7 +307,7 @@
 
   onBeforeRouteLeave((to, from, next) => {
     toPath.value = to.path
-    if(confirmLeave.value || !valuesChanged.value) {
+    if(confirmLeave.value || !valuesChanged.value || history.value) {
       next(true)
     } else if(route.params.id === 'new') {
       leaveForm()
@@ -322,11 +337,20 @@
     router.push(toPath.value)
   }
 
-</script>
+  const history = computed(() => {
+    return store.showRightDrawer
+  })
 
+  watch(() => store.selectedSnapshot, (newVal) => {
+    if(newVal) {
+      experiment.value = {
+        name: newVal.name,
+        group: newVal.group,
+        description: newVal.description
+      }
+    } else {
+      getExperiment()
+    }
+  })
 
-<style scoped>
-::v-deep(.custom-toggle .q-toggle__thumb) {
-  background-color: red !important;
-}
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/src/frontend/src/views/CreateJob.vue b/src/frontend/src/views/CreateJob.vue
index e893dca98..a3070b45f 100644
--- a/src/frontend/src/views/CreateJob.vue
+++ b/src/frontend/src/views/CreateJob.vue
@@ -193,7 +193,7 @@
     </fieldset>
   </div>
 
-  <div :class="`${isMobile ? '' : 'q-mx-xl'} float-right q-mb-lg`">
+  <div :class="`float-right q-mb-lg`">
       <q-btn  
         :to="expJobOrAllJobs === 'allJobs' ? `/jobs` : `/experiments/${route.params.id}/jobs`"
         color="negative" 

From 2cd0bb8e7e7622e5acf2fca58a8217bb3da0ebce Mon Sep 17 00:00:00 2001
From: henrychoy <hchoy@mitre.org>
Date: Mon, 30 Dec 2024 14:48:08 -0500
Subject: [PATCH 3/6] feat: re-use SnapshotList in queue dialog

---
 src/frontend/src/components/SnapshotList.vue |  31 ++++-
 src/frontend/src/dialogs/QueueDialog.vue     | 128 +++----------------
 2 files changed, 45 insertions(+), 114 deletions(-)

diff --git a/src/frontend/src/components/SnapshotList.vue b/src/frontend/src/components/SnapshotList.vue
index c30efea6f..3f9b5ff02 100644
--- a/src/frontend/src/components/SnapshotList.vue
+++ b/src/frontend/src/components/SnapshotList.vue
@@ -3,7 +3,7 @@
     :rows="snapshots"
     :columns="columns"
     v-model:selected="selected"
-    title="Snapshots"
+    :title="props.maxHeight ? '' : 'Snapshots'"
     :hideCreateBtn="true"
     :hideDeleteBtn="true"
     :hideEditBtn="true"
@@ -11,7 +11,11 @@
     :disableRadio="true"
     rowKey="snapshot"
     :showAll="true"
-    style="margin-top: 0; height: calc(100vh - 50px);"
+    :style="{ 
+      marginTop: '0', 
+      maxHeight: props.maxHeight ? props.maxHeight + 'px' : '',
+      height: props.maxHeight ? '' : 'calc(100vh - 50px)'
+    }"
   >
     <template #body-cell-timestamp="props">
       {{
@@ -43,6 +47,8 @@ import TableComponent from '@/components/TableComponent.vue'
 import { ref, watch } from 'vue'
 import * as api from '@/services/dataApi'
 
+const props = defineProps(['showDialogHistory', 'type', 'id', 'maxHeight'])
+
 const store = useLoginStore()
 const route = useRoute()
 
@@ -54,9 +60,16 @@ async function getSnapshots() {
     const res = await api.getSnapshots(route.meta.type, route.params.id)
     snapshots.value = res.data.data.reverse()
     console.log('snapshots = ', snapshots.value)
-    // selectedSnapshot.value = snapshots.value[0]
-    // selectedSnapshotIndex.value = 0
-    // loadSnapshot(snapshots.value[0], 0)
+  } catch(err) {
+    console.warn(err)
+  }
+}
+
+async function getDialogSnapshots() {
+  try {
+    const res = await api.getSnapshots(props.type, props.id)
+    snapshots.value = res.data.data.reverse()
+    console.log('snapshots = ', snapshots.value)
   } catch(err) {
     console.warn(err)
   }
@@ -70,6 +83,14 @@ watch(() => store.showRightDrawer, (history) => {
   }
 })
 
+watch(() => props.showDialogHistory, (history) => {
+  if(history) {
+    getDialogSnapshots()
+  } else {
+    store.selectedSnapshot = null
+  }
+})
+
 watch(selected, (newVal) => {
   if(newVal.length > 0) {
     store.selectedSnapshot = newVal[0]
diff --git a/src/frontend/src/dialogs/QueueDialog.vue b/src/frontend/src/dialogs/QueueDialog.vue
index 8c565743d..47db0f00c 100644
--- a/src/frontend/src/dialogs/QueueDialog.vue
+++ b/src/frontend/src/dialogs/QueueDialog.vue
@@ -13,9 +13,10 @@
         {{editQueue ? 'Edit Queue' : 'Register Queue'}}
       </label>
     </template>
-    <div class="row no-wrap">
+    <div class="row">
       <!-- this is the form col -->
-      <div 
+      <div
+        class="col-auto" 
         style="width: 500px;"
         :style="{ 
           pointerEvents: history ? 'none' : 'auto', 
@@ -72,66 +73,24 @@
         <!-- <q-inner-loading :showing="history" size="0px" /> -->
       </div>
       <!-- this is the history col -->
-      <q-card 
-        v-if="history" 
-        style="width: 240px; max-height: 263px; overflow: auto;"
-        flat
-        bordered
-        class="q-ml-sm col"
-      >
-        <q-list bordered separator>
-          <q-item
-            v-for="(snapshot, i) in snapshots"
-            tag="label" 
-            v-ripple
-            dense
-            clickable
-            @click="loadSnapshot(snapshot, i)"
-            @keydown="keydown"
-            :class="`${getSelectedColor(selectedSnapshotIndex === i)} cursor-pointer` " 
-          >
-            <!-- <q-item-section avatar>
-              <q-radio
-                v-model="selectedSnapshot"
-                :val="snapshot"
-                @update:model-value="loadSnapshot(snapshot)"
-              />
-            </q-item-section> -->
-            <q-item-section>
-              <q-item-label>
-                {{
-                  new Intl.DateTimeFormat('en-US', { 
-                    year: '2-digit', 
-                    month: '2-digit', 
-                    day: '2-digit', 
-                    hour: 'numeric', 
-                    minute: 'numeric', 
-                    hour12: true 
-                  }).format(new Date(snapshot.snapshotCreatedOn))
-                }}
-                <q-chip
-                  v-if="snapshot.latestSnapshot"
-                  label="latest"
-                  size="md"
-                  dense
-                  color="orange"
-                  text-color="white"
-                />
-              </q-item-label>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
+       <!-- TODO: figure out how to make this not stretch the height without explicitly specifying maxHeight   -->
+      <SnapshotList 
+        v-show="history"
+        :showDialogHistory="history"
+        type="queues"
+        :id="props.editQueue.id"
+        maxHeight="264"
+        class="q-ml-md"
+      />
     </div>
   </DialogComponent>
 </template>
 
 <script setup>
-  import { ref, watch, computed } from 'vue'
+  import { ref, watch } from 'vue'
   import DialogComponent from './DialogComponent.vue'
   import { useLoginStore } from '@/stores/LoginStore.ts'
-  import * as api from '@/services/dataApi'
-  import { useQuasar } from 'quasar'
+  import SnapshotList from '../components/SnapshotList.vue'
 
   const store = useLoginStore()
 
@@ -148,13 +107,6 @@
   const group = ref('')
   const description = ref('')
 
-  function loadSnapshot(snapshot, index) {
-    selectedSnapshotIndex.value = index
-    name.value = snapshot.name
-    group.value = snapshot.group
-    description.value = snapshot.description
-  }
-
   watch(showDialog, (newVal) => {
     if(newVal) {
       name.value = props.editQueue.name
@@ -165,7 +117,6 @@
       name.value = ''
       description.value = ''
       history.value = false
-      snapshots.value = []
     }
   })
 
@@ -189,57 +140,16 @@
 
   const history = ref(false)
 
-  const snapshots = ref([])
-  const selectedSnapshot = ref()
-  const selectedSnapshotIndex = ref()
-
-  async function getSnapshots() {
-    try {
-      const res = await api.getSnapshots('queues', props.editQueue.id)
-      snapshots.value = res.data.data.reverse()
-      selectedSnapshot.value = snapshots.value[0]
-      selectedSnapshotIndex.value = 0
-      loadSnapshot(snapshots.value[0], 0)
-    } catch(err) {
-      console.warn(err)
-    }
-  }
-
-  watch(history, (newVal) => {
+  watch(() => store.selectedSnapshot, (newVal) => {
     if(newVal) {
-      getSnapshots()
+      name.value = newVal.name
+      group.value = newVal.group
+      description.value = newVal.description
     } else {
-      selectedSnapshotIndex.value = 0
       name.value = props.editQueue.name
-      description.value = props.editQueue.description
       group.value = props.editQueue.group
+      description.value = props.editQueue.description
     }
   })
 
-  const $q = useQuasar()
-
-  const darkMode = computed(() => {
-    if($q.dark.mode === 'auto') {
-      return window.matchMedia('(prefers-color-scheme: dark)').matches
-    }
-    return $q.dark.mode
-  })
-
-  function getSelectedColor(selected) {
-    if(darkMode.value && selected) return 'bg-deep-purple-10'
-    else if(selected) return 'bg-blue-grey-2'
-  }
-
-  function keydown(event) {
-    if(event.key === 'ArrowUp' && selectedSnapshotIndex.value > 0) {
-      const newIndex = selectedSnapshotIndex.value - 1
-      loadSnapshot(snapshots.value[newIndex], newIndex)
-    }
-    else if(event.key === 'ArrowDown' && selectedSnapshotIndex.value < snapshots.value.length - 1) {
-      const newIndex = selectedSnapshotIndex.value + 1
-      loadSnapshot(snapshots.value[newIndex], newIndex)
-    }
-  }
-
-
 </script>
\ No newline at end of file

From f81113ebe2219ef789d1213bc231be440fa052a8 Mon Sep 17 00:00:00 2001
From: henrychoy <hchoy@mitre.org>
Date: Mon, 30 Dec 2024 15:02:58 -0500
Subject: [PATCH 4/6] fix: remove unused variable

---
 src/frontend/src/views/ExperimentsView.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/frontend/src/views/ExperimentsView.vue b/src/frontend/src/views/ExperimentsView.vue
index 619cf8902..312253f63 100644
--- a/src/frontend/src/views/ExperimentsView.vue
+++ b/src/frontend/src/views/ExperimentsView.vue
@@ -123,7 +123,5 @@
     }
   }
 
-  const toggleRightDrawer = ref(false)
-
 
 </script>

From 21cd290a756bbbc8b6b73df6b6f3d978fb46a885 Mon Sep 17 00:00:00 2001
From: henrychoy <hchoy@mitre.org>
Date: Wed, 8 Jan 2025 11:30:58 -0500
Subject: [PATCH 5/6] fix: dynamically set maxHeight for list

---
 src/frontend/src/dialogs/QueueDialog.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/dialogs/QueueDialog.vue b/src/frontend/src/dialogs/QueueDialog.vue
index 47db0f00c..eee7a366f 100644
--- a/src/frontend/src/dialogs/QueueDialog.vue
+++ b/src/frontend/src/dialogs/QueueDialog.vue
@@ -23,6 +23,7 @@
           opacity: history ? .65 : 1, 
           cursor: history ? 'not-allowed' : 'default' 
         }"
+        ref="formCol"
       >
         <div class="row items-center">
           <label class="col-3 q-mb-lg" id="queueName">
@@ -73,13 +74,12 @@
         <!-- <q-inner-loading :showing="history" size="0px" /> -->
       </div>
       <!-- this is the history col -->
-       <!-- TODO: figure out how to make this not stretch the height without explicitly specifying maxHeight   -->
       <SnapshotList 
         v-show="history"
         :showDialogHistory="history"
         type="queues"
         :id="props.editQueue.id"
-        maxHeight="264"
+        :maxHeight="formCol?.clientHeight"
         class="q-ml-md"
       />
     </div>
@@ -152,4 +152,6 @@
     }
   })
 
+  const formCol = ref()
+
 </script>
\ No newline at end of file

From 1614e0ec83c79d37155080dd44d55a28eb65c7e2 Mon Sep 17 00:00:00 2001
From: henrychoy <hchoy@mitre.org>
Date: Wed, 8 Jan 2025 16:29:32 -0500
Subject: [PATCH 6/6] fix: make dialogs responsive

---
 src/frontend/src/App.vue                     |  5 +
 src/frontend/src/assets/main.css             |  2 +-
 src/frontend/src/dialogs/DialogComponent.vue |  6 +-
 src/frontend/src/dialogs/QueueDialog.vue     | 99 ++++++++++----------
 4 files changed, 58 insertions(+), 54 deletions(-)

diff --git a/src/frontend/src/App.vue b/src/frontend/src/App.vue
index 18ecb044b..9f8e804b2 100644
--- a/src/frontend/src/App.vue
+++ b/src/frontend/src/App.vue
@@ -40,6 +40,10 @@
 
   const $q = useQuasar()
 
+  const isExtraSmall = computed(() => {
+    return $q.screen.xs
+  })
+
   const isMobile = computed(() => {
     return $q.screen.sm || $q.screen.xs
   })
@@ -50,6 +54,7 @@
   
   provide('isMobile', isMobile)
   provide('isMedium', isMedium)
+  provide('isExtraSmall', isExtraSmall)
 
   watch(route, (to) => {
     // on every route change, close snapshot drawer if open
diff --git a/src/frontend/src/assets/main.css b/src/frontend/src/assets/main.css
index 88d96fd15..50bfefca1 100644
--- a/src/frontend/src/assets/main.css
+++ b/src/frontend/src/assets/main.css
@@ -121,7 +121,7 @@ h2 {
 
 .field-label {
   width: 100px;
-  font-size: 1rem;
+  font-size: .6em;
   color: black;
 }
 
diff --git a/src/frontend/src/dialogs/DialogComponent.vue b/src/frontend/src/dialogs/DialogComponent.vue
index a16a7487c..a537065fc 100644
--- a/src/frontend/src/dialogs/DialogComponent.vue
+++ b/src/frontend/src/dialogs/DialogComponent.vue
@@ -1,6 +1,6 @@
 <template>
   <q-dialog v-model="showDialog" aria-labelledby="modalTitle" :persistent="persistent">
-    <q-card flat style="min-width: 500px; max-width: 80%;">
+    <q-card flat :style="{ 'min-width': isMedium ? '50%' : '30%' }">
       <q-form @submit="$emit('emitSubmit')">
         <q-card-section class="bg-primary text-white q-mb-md">
           <div class="text-h6 row justify-between">
@@ -37,11 +37,13 @@
 </template>
 
 <script setup>
-  import { ref } from 'vue'
+  import { inject } from 'vue'
   const showDialog = defineModel('showDialog')
   defineEmits(['emitSubmit', 'emitCancel', 'emitSaveDraft'])
   const props = defineProps(['hideDraftBtn', 'persistent', 'showHistoryToggle', 'disableConfirm'])
 
   const history = defineModel('history')
 
+  const isMedium = inject('isMedium')
+
 </script>
\ No newline at end of file
diff --git a/src/frontend/src/dialogs/QueueDialog.vue b/src/frontend/src/dialogs/QueueDialog.vue
index eee7a366f..a8736e85c 100644
--- a/src/frontend/src/dialogs/QueueDialog.vue
+++ b/src/frontend/src/dialogs/QueueDialog.vue
@@ -16,8 +16,7 @@
     <div class="row">
       <!-- this is the form col -->
       <div
-        class="col-auto" 
-        style="width: 500px;"
+        :class="`${isExtraSmall ? 'col-12 q-mb-md' : 'col'}`"
         :style="{ 
           pointerEvents: history ? 'none' : 'auto', 
           opacity: history ? .65 : 1, 
@@ -25,53 +24,49 @@
         }"
         ref="formCol"
       >
-        <div class="row items-center">
-          <label class="col-3 q-mb-lg" id="queueName">
-            Queue Name:
-          </label>
-          <q-input 
-            class="col q-mb-xs" 
-            outlined 
-            dense 
-            v-model.trim="name"  
-            autofocus 
-            :rules="[requiredRule]" 
-            aria-labelledby="queueName"
-            aria-required="true"
-          />
-        </div>
-        <div class="row items-center q-mb-xs">
-          <label class="col-3 q-mb-lg" id="pluginGroup">
-            Group:
-          </label>
-          <q-select
-            class="col"
-            outlined 
-            v-model="group" 
-            :options="store.groups"
-            option-label="name"
-            option-value="id"
-            emit-value
-            map-options
-            dense
-            :rules="[requiredRule]"
-            aria-labelledby="pluginGroup"
-            aria-required="true"
-          />
-        </div>
-        <div class="row items-center">
-          <label class="col-3" id="description">
-            Description:
-          </label>
-          <q-input
-            class="col"
-            v-model.trim="description"
-            outlined
-            type="textarea"
-            aria-labelledby="description"
-          />
-        </div>
-        <!-- <q-inner-loading :showing="history" size="0px" /> -->
+        <q-input 
+          class="q-mb-xs" 
+          outlined 
+          dense 
+          v-model.trim="name"  
+          autofocus 
+          :rules="[requiredRule]" 
+          id="queueName"
+          aria-required="true"
+        >
+          <template #before>
+            <label for="queueName" class="field-label">Queue Name:</label>
+          </template>
+        </q-input>
+        <q-select
+          class="q-mb-xs"
+          outlined 
+          v-model="group" 
+          :options="store.groups"
+          option-label="name"
+          option-value="id"
+          emit-value
+          map-options
+          dense
+          :rules="[requiredRule]"
+          id="pluginGroup"
+          aria-required="true"
+        >
+          <template #before>
+            <label for="pluginGroup" class="field-label">Group:</label>
+          </template>
+        </q-select>
+        <q-input
+          v-model.trim="description"
+          outlined
+          type="textarea"
+          id="description"
+          dense
+        >
+          <template #before>
+            <label for="description" class="field-label">Description:</label>
+          </template>
+        </q-input>
       </div>
       <!-- this is the history col -->
       <SnapshotList 
@@ -80,20 +75,22 @@
         type="queues"
         :id="props.editQueue.id"
         :maxHeight="formCol?.clientHeight"
-        class="q-ml-md"
+        :class="`${isExtraSmall ? 'col-12' : 'col-sm-auto q-ml-md'}`"
       />
     </div>
   </DialogComponent>
 </template>
 
 <script setup>
-  import { ref, watch } from 'vue'
+  import { ref, watch, inject } from 'vue'
   import DialogComponent from './DialogComponent.vue'
   import { useLoginStore } from '@/stores/LoginStore.ts'
   import SnapshotList from '../components/SnapshotList.vue'
 
   const store = useLoginStore()
 
+  const isExtraSmall = inject('isExtraSmall')
+
   const props = defineProps(['editQueue'])
   const emit = defineEmits(['addQueue', 'updateQueue', 'saveDraft'])