From a8b4beafc2e4a1b1a9e6f6ce0498d404bda57ceb Mon Sep 17 00:00:00 2001
From: Ryan Pratt <ryan.pratt@openc3.com>
Date: Thu, 12 Dec 2024 11:08:24 -0700
Subject: [PATCH 1/6] Don't toast API errors on login page

---
 .../packages/openc3-vue-common/src/plugins/notify/Toast.vue   | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/openc3-cosmos-init/plugins/packages/openc3-vue-common/src/plugins/notify/Toast.vue b/openc3-cosmos-init/plugins/packages/openc3-vue-common/src/plugins/notify/Toast.vue
index 8295cd2a2..2e292ebd7 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-vue-common/src/plugins/notify/Toast.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-vue-common/src/plugins/notify/Toast.vue
@@ -73,6 +73,7 @@ export default {
         message: 'Overall message here',
       },
       timeout: null,
+      noToastPaths: ['/login'],
     }
   },
   computed: {
@@ -103,6 +104,9 @@ export default {
   },
   methods: {
     toast: function (toastNotification, duration) {
+      if (this.noToastPaths.includes(window.location.pathname)) {
+        return
+      }
       if (duration === undefined) {
         duration = 5000
       }

From c2eecb247d7a237d40c4c87cf72af133f7cea38b Mon Sep 17 00:00:00 2001
From: Ryan Pratt <ryan.pratt@openc3.com>
Date: Thu, 12 Dec 2024 11:08:37 -0700
Subject: [PATCH 2/6] Fix tlmviewer errored screen overlay

---
 .../packages/openc3-vue-common/src/components/Openc3Screen.vue   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/openc3-cosmos-init/plugins/packages/openc3-vue-common/src/components/Openc3Screen.vue b/openc3-cosmos-init/plugins/packages/openc3-vue-common/src/components/Openc3Screen.vue
index 07a56ec92..c2462a7b2 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-vue-common/src/components/Openc3Screen.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-vue-common/src/components/Openc3Screen.vue
@@ -133,6 +133,7 @@
             :model-value="errors.length !== 0"
             opacity="0.8"
             absolute
+            attach
           />
           <vertical-widget
             :key="screenKey"

From 1157d01bcc16ae8e6d28f090e183c5f0485ac77b Mon Sep 17 00:00:00 2001
From: Ryan Pratt <ryan.pratt@openc3.com>
Date: Thu, 12 Dec 2024 11:16:03 -0700
Subject: [PATCH 3/6] Change cmdsender text field variants

---
 .../src/tools/CommandSender/CommandParameterEditor.vue        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdsender/src/tools/CommandSender/CommandParameterEditor.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdsender/src/tools/CommandSender/CommandParameterEditor.vue
index 539f74324..b06b149e2 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdsender/src/tools/CommandSender/CommandParameterEditor.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdsender/src/tools/CommandSender/CommandParameterEditor.vue
@@ -28,7 +28,7 @@
       @update:model-value="handleChange"
       hide-details
       density="compact"
-      variant="underlined"
+      variant="filled"
       data-test="cmd-param-value"
     />
     <div v-else class="d-flex align-center">
@@ -50,7 +50,7 @@
         disabled
         hide-details
         density="compact"
-        variant="underlined"
+        variant="outlined"
         min-width="60px"
         data-test="cmd-param-value"
       />

From 196cda95f049cb99e1ee6ac570368182b21aa256 Mon Sep 17 00:00:00 2001
From: Jason Thomas <jason@openc3.com>
Date: Fri, 13 Dec 2024 09:37:36 -0700
Subject: [PATCH 4/6] Fix TPIC for vertical layouts

---
 .../src/components/TargetPacketItemChooser.vue                | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/openc3-cosmos-init/plugins/packages/openc3-vue-common/src/components/TargetPacketItemChooser.vue b/openc3-cosmos-init/plugins/packages/openc3-vue-common/src/components/TargetPacketItemChooser.vue
index 4e8b234a8..48b71fd6a 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-vue-common/src/components/TargetPacketItemChooser.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-vue-common/src/components/TargetPacketItemChooser.vue
@@ -22,7 +22,7 @@
 
 <template>
   <div class="pt-4 pb-4">
-    <v-row no-gutters>
+    <v-row :no-gutters="!vertical">
       <v-col :cols="colSize" class="tpic-select pr-4" data-test="select-target">
         <v-autocomplete
           label="Select Target"
@@ -69,11 +69,13 @@
           v-model="selectedItemName"
         />
       </v-col>
+      <!-- min-width: 105px is enough to display a 2 digit index -->
       <v-col
         v-if="chooseItem && itemIsArray()"
         cols="1"
         class="tpic-select pr-4"
         data-test="array-index"
+        style="min-width: 105px"
       >
         <v-combobox
           label="Index"

From ff6960ca6742a30c27af985b3dab047eb968c98c Mon Sep 17 00:00:00 2001
From: Ryan Pratt <ryan.pratt@openc3.com>
Date: Fri, 13 Dec 2024 09:53:27 -0700
Subject: [PATCH 5/6] Delete ScreenOverviewDialog

---
 .../tools/TlmViewer/ScreenOverviewDialog.vue  | 219 ------------------
 1 file changed, 219 deletions(-)
 delete mode 100644 openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-tlmviewer/src/tools/TlmViewer/ScreenOverviewDialog.vue

diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-tlmviewer/src/tools/TlmViewer/ScreenOverviewDialog.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-tlmviewer/src/tools/TlmViewer/ScreenOverviewDialog.vue
deleted file mode 100644
index 612adb724..000000000
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-tlmviewer/src/tools/TlmViewer/ScreenOverviewDialog.vue
+++ /dev/null
@@ -1,219 +0,0 @@
-<!--
-# Copyright 2022 Ball Aerospace & Technologies Corp.
-# All Rights Reserved.
-#
-# This program is free software; you can modify and/or redistribute it
-# under the terms of the GNU Affero General Public License
-# as published by the Free Software Foundation; version 3 with
-# attribution addendums as found in the LICENSE.txt
-#
-# This program is distributed in the hope that it will be useful,
-# but WITHOUT ANY WARRANTY; without even the implied warranty of
-# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-# GNU Affero General Public License for more details.
-
-# Modified by OpenC3, Inc.
-# All changes Copyright 2022, OpenC3, Inc.
-# All Rights Reserved
-#
-# This file may also be used under the terms of a commercial license
-# if purchased from OpenC3, Inc.
--->
-
-<template>
-  <div>
-    <v-dialog v-model="show" width="800">
-      <v-card class="pa-3">
-        <v-toolbar>
-          <v-toolbar-title>Screens</v-toolbar-title>
-          <v-spacer />
-          <v-text-field
-            class="pa-2"
-            label="search"
-            v-model="search"
-            type="text"
-            data-test="search"
-            prepend-inner-icon="mdi-magnify"
-            clearable
-            variant="outlined"
-            density="compact"
-            clear-icon="mdi-close-circle-outline"
-            single-line
-            hide-details
-          />
-        </v-toolbar>
-        <v-card-text class="mt-2">
-          <v-row dense>
-            <v-select
-              label="Select Target"
-              hide-details
-              density="compact"
-              @update:model-value="targetNameChanged"
-              :items="targetNames"
-              item-title="label"
-              item-value="value"
-              v-model="selectedTargetName"
-              data-test="select-target"
-            />
-          </v-row>
-          <v-row dense>
-            <v-data-table
-              single-expand
-              show-expand
-              item-key="name"
-              class="elevation-1"
-              v-model:expanded="expanded"
-              :headers="screenHeaders"
-              :items="screens"
-              :search="search"
-              :items-per-page="5"
-              :items-per-page-options="[5]"
-            >
-              <template v-slot:item.actions="{ item }">
-                <v-tooltip location="top">
-                  <template v-slot:activator="{ props }">
-                    <div v-bind="props">
-                      <v-btn
-                        icon
-                        data-test="deleteScreenIcon"
-                        @click="() => deleteScreen(item)"
-                      >
-                        <v-icon> mdi-delete </v-icon>
-                      </v-btn>
-                    </div>
-                  </template>
-                  <span> Delete Screen </span>
-                </v-tooltip>
-              </template>
-              <template v-slot:expanded-item="{ headers, item }">
-                <td :colspan="headers.length">
-                  <v-textarea readonly rows="8" :model-value="item" />
-                </td>
-              </template>
-              <template v-slot:no-data>
-                <span>Currently no screens found for this Target</span>
-              </template>
-            </v-data-table>
-          </v-row>
-          <v-row>
-            <span class="ma-2 text-red" v-show="text" v-text="text" />
-          </v-row>
-        </v-card-text>
-      </v-card>
-    </v-dialog>
-  </div>
-</template>
-
-<script>
-import { OpenC3Api } from '@openc3/js-common/services'
-
-export default {
-  props: {
-    modelValue: Boolean,
-  },
-  data() {
-    return {
-      rules: {
-        required: (value) => !!value || 'Required',
-      },
-      ScreenHeaders: [
-        { text: 'Name', align: 'start', value: 'name' },
-        { text: 'Type', value: 'type' },
-        { text: 'Actions', value: 'actions', sortable: false },
-        { text: '', value: 'data-table-expand', sortable: false },
-      ],
-      targetNames: [],
-      selectedTargetName: '',
-      screens: [],
-      search: null,
-      expanded: [],
-      text: null,
-    }
-  },
-  created: function () {
-    const api = new OpenC3Api()
-    api
-      .get_target_names({ params: { scope: window.openc3Scope } })
-      .then((data) => {
-        for (let target of data) {
-          this.targets.push({ label: target, value: target })
-        }
-        if (!this.selectedTarget) {
-          this.selectedTarget = this.targets[0].value
-        }
-        this.updateScreens()
-      })
-      .catch((error) => {
-        if (error) {
-          const alertObject = {
-            text: `Failed to get targets. Error: ${error}`,
-            type: 'error',
-          }
-          this.$emit('alert', alertObject)
-        }
-      })
-  },
-  computed: {
-    error: function () {
-      return null
-    },
-    show: {
-      get() {
-        return this.modelValue
-      },
-      set(value) {
-        this.$emit('update:modelValue', value)
-      },
-    },
-    listData: function () {
-      if (!this.screens) return []
-      let screenId = 0
-      return this.screens.map((screen) => {
-        screenId += 1
-        return {
-          ...screen,
-          screenId,
-        }
-      })
-    },
-  },
-  methods: {
-    updateScreens() {
-      this.screens = []
-      Api.get('/openc3-api/screen/' + this.selectedTargetName).then(
-        (response) => {
-          for (let screen of response.data) {
-            this.screens.push(screen)
-          }
-        },
-      )
-    },
-    deleteScreen: function (screen) {
-      this.$dialog
-        .confirm(`Remove ${screen.name}`, {
-          okText: 'Delete',
-          cancelText: 'Cancel',
-        })
-        .then((dialog) => {
-          const updateObject = {
-            screenName: screen.name,
-            screenType: screen.type,
-            type: 'delete',
-          }
-          this.$emit('update', updateObject)
-        })
-        .catch((error) => {
-          if (error !== true) {
-            const alertObject = {
-              text: `Failed to delete screen ${screen.name} Error: ${error}`,
-              type: 'error',
-            }
-            this.$emit('alert', alertObject)
-          }
-        })
-    },
-  },
-}
-</script>
-
-<style scoped></style>

From 5aad83f56b8161578b9edd7d40b6f4d6ad40b921 Mon Sep 17 00:00:00 2001
From: Ryan Pratt <ryan.pratt@openc3.com>
Date: Fri, 13 Dec 2024 11:25:40 -0700
Subject: [PATCH 6/6] Fix graph ripple and width

---
 .../src/tools/TlmGrapher/TlmGrapher.vue       |  6 +-
 .../src/components/Graph.vue                  | 81 ++++++++++---------
 2 files changed, 48 insertions(+), 39 deletions(-)

diff --git a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-tlmgrapher/src/tools/TlmGrapher/TlmGrapher.vue b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-tlmgrapher/src/tools/TlmGrapher/TlmGrapher.vue
index b92e2ca02..f0220dab4 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-tlmgrapher/src/tools/TlmGrapher/TlmGrapher.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-tlmgrapher/src/tools/TlmGrapher/TlmGrapher.vue
@@ -80,8 +80,8 @@
                   data-test="pause-graph"
                   icon="mdi-pause"
                   size="large"
-                ></v-btn
-                ><v-spacer />
+                />
+                <v-spacer />
               </v-col>
             </v-row>
           </v-container>
@@ -673,7 +673,7 @@ i.v-icon.mdi-chevron-down {
   position: relative;
   cursor: pointer;
   border-radius: 6px;
-  margin: 5px;
+  margin: 6px;
 }
 .pulse {
   animation: pulse 1s infinite;
diff --git a/openc3-cosmos-init/plugins/packages/openc3-vue-common/src/components/Graph.vue b/openc3-cosmos-init/plugins/packages/openc3-vue-common/src/components/Graph.vue
index 9735e2d23..7232f6bd7 100644
--- a/openc3-cosmos-init/plugins/packages/openc3-vue-common/src/components/Graph.vue
+++ b/openc3-cosmos-init/plugins/packages/openc3-vue-common/src/components/Graph.vue
@@ -21,8 +21,8 @@
 -->
 
 <template>
-  <div>
-    <v-card @click="$emit('click')">
+  <div @click.prevent="$emit('click')">
+    <v-card>
       <v-toolbar
         height="24"
         class="pl-2 pr-2"
@@ -32,9 +32,9 @@
         <div v-show="errors.length !== 0" class="mx-2">
           <v-tooltip text="Errors" location="top">
             <template v-slot:activator="{ props }">
-              <v-icon v-bind="props" @click="errorDialog = true"
-                >mdi-alert</v-icon
-              >
+              <v-icon v-bind="props" @click="errorDialog = true">
+                mdi-alert
+              </v-icon>
             </template>
           </v-tooltip>
         </div>
@@ -45,13 +45,14 @@
               v-bind="props"
               @click="editGraph = true"
               data-test="edit-graph-icon"
-              >mdi-pencil</v-icon
             >
+              mdi-pencil
+            </v-icon>
           </template>
         </v-tooltip>
 
         <v-spacer />
-        <span>{{ title }}</span>
+        <span> {{ title }} </span>
         <v-spacer />
 
         <div v-show="expand">
@@ -61,15 +62,16 @@
                 v-bind="props"
                 @click="collapseAll"
                 data-test="collapse-all"
-                >mdi-arrow-collapse</v-icon
               >
+                mdi-arrow-collapse
+              </v-icon>
             </template>
           </v-tooltip>
           <v-tooltip v-else text="Expand" location="top">
             <template v-slot:activator="{ props }">
-              <v-icon v-bind="props" @click="expandAll" data-test="expand-all"
-                >mdi-arrow-expand</v-icon
-              >
+              <v-icon v-bind="props" @click="expandAll" data-test="expand-all">
+                mdi-arrow-expand
+              </v-icon>
             </template>
           </v-tooltip>
         </div>
@@ -81,8 +83,9 @@
                 v-bind="props"
                 @click="collapseWidth"
                 data-test="collapse-width"
-                >mdi-arrow-collapse-horizontal</v-icon
               >
+                mdi-arrow-collapse-horizontal
+              </v-icon>
             </template>
           </v-tooltip>
           <v-tooltip v-else text="Expand Width" location="top">
@@ -91,8 +94,9 @@
                 v-bind="props"
                 @click="expandWidth"
                 data-test="expand-width"
-                >mdi-arrow-expand-horizontal</v-icon
               >
+                mdi-arrow-expand-horizontal
+              </v-icon>
             </template>
           </v-tooltip>
         </div>
@@ -104,8 +108,9 @@
                 v-bind="props"
                 @click="collapseHeight"
                 data-test="collapse-height"
-                >mdi-arrow-collapse-vertical</v-icon
               >
+                mdi-arrow-collapse-vertical
+              </v-icon>
             </template>
           </v-tooltip>
           <v-tooltip v-else text="Expand Height" location="top">
@@ -114,8 +119,9 @@
                 v-bind="props"
                 @click="expandHeight"
                 data-test="expand-height"
-                >mdi-arrow-expand-vertical</v-icon
               >
+                mdi-arrow-expand-vertical
+              </v-icon>
             </template>
           </v-tooltip>
         </div>
@@ -126,8 +132,9 @@
               v-bind="props"
               @click="minMaxTransition"
               data-test="minimize-screen-icon"
-              >mdi-window-minimize</v-icon
             >
+              mdi-window-minimize
+            </v-icon>
           </template>
         </v-tooltip>
         <v-tooltip v-else text="Maximize" location="top">
@@ -136,8 +143,9 @@
               v-bind="props"
               @click="minMaxTransition"
               data-test="maximize-screen-icon"
-              >mdi-window-maximize</v-icon
             >
+              mdi-window-maximize
+            </v-icon>
           </template>
         </v-tooltip>
 
@@ -147,8 +155,9 @@
               v-bind="props"
               @click="$emit('close-graph')"
               data-test="close-graph-icon"
-              >mdi-close-box</v-icon
             >
+              mdi-close-box
+            </v-icon>
           </template>
         </v-tooltip>
       </v-toolbar>
@@ -185,7 +194,7 @@
     <v-dialog v-model="errorDialog" max-width="600">
       <v-toolbar height="24">
         <v-spacer />
-        <span>Errors</span>
+        <span> Errors </span>
         <v-spacer />
       </v-toolbar>
       <v-card class="pa-3">
@@ -251,19 +260,19 @@
         </v-list-subheader>
         <v-list-item @click="editItem = true">
           <template v-slot:prepend>
-            <v-icon icon="mdi-pencil"></v-icon>
+            <v-icon icon="mdi-pencil" />
           </template>
           <v-list-item-title> Edit </v-list-item-title>
         </v-list-item>
         <v-list-item @click="clearData([selectedItem])">
           <template v-slot:prepend>
-            <v-icon icon="mdi-eraser"></v-icon>
+            <v-icon icon="mdi-eraser" />
           </template>
           <v-list-item-title> Clear </v-list-item-title>
         </v-list-item>
         <v-list-item @click="removeItems([selectedItem])">
           <template v-slot:prepend>
-            <v-icon icon="mdi-delete"></v-icon>
+            <v-icon icon="mdi-delete" />
           </template>
           <v-list-item-title> Delete </v-list-item-title>
         </v-list-item>
@@ -280,24 +289,24 @@
     >
       <v-list>
         <v-list-item @click="moveLegend('top')">
-          <v-list-item-title style="cursor: pointer"
-            >Legend Top</v-list-item-title
-          >
+          <v-list-item-title style="cursor: pointer">
+            Legend Top
+          </v-list-item-title>
         </v-list-item>
         <v-list-item @click="moveLegend('bottom')">
-          <v-list-item-title style="cursor: pointer"
-            >Legend Bottom</v-list-item-title
-          >
+          <v-list-item-title style="cursor: pointer">
+            Legend Bottom
+          </v-list-item-title>
         </v-list-item>
         <v-list-item @click="moveLegend('left')">
-          <v-list-item-title style="cursor: pointer"
-            >Legend Left</v-list-item-title
-          >
+          <v-list-item-title style="cursor: pointer">
+            Legend Left
+          </v-list-item-title>
         </v-list-item>
         <v-list-item @click="moveLegend('right')">
-          <v-list-item-title style="cursor: pointer"
-            >Legend RIght</v-list-item-title
-          >
+          <v-list-item-title style="cursor: pointer">
+            Legend RIght
+          </v-list-item-title>
         </v-list-item>
       </v-list>
     </v-menu>
@@ -308,7 +317,7 @@
         location="top"
       >
         <template v-slot:activator="{ props }">
-          <v-icon v-bind="props">mdi-information-variant-circle</v-icon>
+          <v-icon v-bind="props"> mdi-information-variant-circle </v-icon>
         </template>
       </v-tooltip>
     </div>
@@ -1100,7 +1109,7 @@ export default {
           height = height / 2.0 + 10 // 5px padding top and bottom
         }
       }
-      let width = viewWidth - 50 // padding left and right
+      let width = viewWidth - 68 // padding left and right
       if (!this.fullWidth) {
         width = width / 2.0 - 10 // 5px padding left and right
       }