Pv pin

openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-packetviewer/src/tools/PacketViewer/PacketViewer.vue

@@ -44,12 +44,15 @@
           single-line
           hide-details
           class="search"
+          data-test="search"
         />
       </v-card-title>
       <v-data-table
         :headers="headers"
         :items="rows"
         :search="search"
+        :custom-filter="filter"
+        :custom-sort="tableSort"
         :items-per-page="itemsPerPage"
         @update:items-per-page="itemsPerPage = $event"
         :footer-props="{
@@ -64,11 +67,29 @@
         dense
       >
         <template v-slot:item.name="{ item }">
-          {{ item.name }}<span v-if="item.derived">&nbsp;*</span>
+          <div @contextmenu="(event) => showContextMenu(event, item)">
+            <v-tooltip bottom :key="`${item.name}-${isPinned(item.name)}`">
+              <template v-slot:activator="{ on, attrs }">
+                <v-icon
+                  v-if="isPinned(item.name)"
+                  v-bind="attrs"
+                  v-on="on"
+                  class="pin-item"
+                >
+                  mdi-pin
+                </v-icon>
+              </template>
+              <span
+                >Pinned items remain at the top.<br />Right click to
+                unpin.</span
+              >
+            </v-tooltip>
+            {{ item.name }}<span v-if="item.derived">&nbsp;*</span>
+          </div>
         </template>
         <template v-slot:item.value="{ item }">
           <value-widget
-            :key="`${targetName}__${packetName}__${item.name}`"
+            :key="item.name"
             :value="item.value"
             :limits-state="item.limitsState"
             :counter="item.counter"
@@ -77,12 +98,24 @@
             :time-zone="timeZone"
           />
         </template>
-        <template v-slot:footer.prepend
-          >* indicates a&nbsp;
-          <a href="/tools/staticdocs/docs/configuration/telemetry#derived-items"
-            >DERIVED</a
-          >&nbsp;item</template
-        >
+        <template v-slot:footer.prepend>
+          <v-tooltip bottom close-delay="2000">
+            <template v-slot:activator="{ on, attrs }">
+              <v-icon v-bind="attrs" v-on="on" class="info-tooltip">
+                mdi-information-variant-circle
+              </v-icon>
+            </template>
+            <span>
+              Name with * indicates
+              <a
+                href="/tools/staticdocs/docs/configuration/telemetry#derived-items"
+                >DERIVED</a
+              >&nbsp;item<br />
+              Right click name to pin item<br />
+              Right click value for details / graph
+            </span>
+          </v-tooltip>
+        </template>
       </v-data-table>
     </v-card>
     <v-dialog
@@ -138,6 +171,23 @@
       :configKey="configKey"
       @success="saveConfiguration"
     />
+    <v-menu
+      v-model="contextMenuShown"
+      :position-x="x"
+      :position-y="y"
+      absolute
+      offset-y
+    >
+      <v-list>
+        <v-list-item
+          v-for="(item, index) in contextMenuOptions"
+          :key="index"
+          @click.stop="item.action"
+        >
+          <v-list-item-title>{{ item.title }}</v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </v-menu>
   </div>
 </template>
 
@@ -288,6 +338,11 @@ export default {
       menuItems: [],
       itemsPerPage: 20,
       api: null,
+      pinnedItems: [],
+      contextMenuShown: false,
+      itemName: '',
+      x: 0,
+      y: 0,
     }
   },
   watch: {
@@ -311,6 +366,9 @@ export default {
     itemsPerPage: function () {
       this.saveDefaultConfig(this.currentConfig)
     },
+    pinnedItems: function () {
+      this.saveDefaultConfig(this.currentConfig)
+    },
   },
   computed: {
     currentConfig: function () {
@@ -323,8 +381,41 @@ export default {
         derivedLast: this.derivedLast,
         valueType: this.valueType,
         itemsPerPage: this.itemsPerPage,
+        pinnedItems: this.pinnedItems,
       }
     },
+    contextMenuOptions: function () {
+      let options = []
+      if (this.isPinned(this.itemName)) {
+        options.push({
+          title: 'Unpin Item',
+          action: () => {
+            this.contextMenuShown = false
+            this.pinnedItems = this.pinnedItems.filter(
+              (item) =>
+                !(
+                  item.target === this.targetName &&
+                  item.packet === this.packetName &&
+                  item.item === this.itemName
+                ),
+            )
+          },
+        })
+      } else {
+        options.push({
+          title: 'Pin Item',
+          action: () => {
+            this.contextMenuShown = false
+            this.pinnedItems.push({
+              target: this.targetName,
+              packet: this.packetName,
+              item: this.itemName,
+            })
+          },
+        })
+      }
+      return options
+    },
   },
   created() {
     this.api = new OpenC3Api()
@@ -377,6 +468,66 @@ export default {
     }
   },
   methods: {
+    showContextMenu(e, item) {
+      e.preventDefault()
+      this.itemName = item.name
+      this.contextMenuShown = false
+      this.x = e.clientX
+      this.y = e.clientY
+      this.$nextTick(() => {
+        this.contextMenuShown = true
+      })
+    },
+    isPinned(name) {
+      return this.pinnedItems.find(
+        (item) =>
+          item.target === this.targetName &&
+          item.packet === this.packetName &&
+          item.item === name,
+      )
+    },
+    filter(value, search, _item) {
+      if (this.isPinned(value)) {
+        return true
+      } else {
+        return value.toString().indexOf(search.toUpperCase()) >= 0
+      }
+    },
+    tableSort(items, index, isDesc) {
+      // for each item in index, sort by that index
+      index.forEach((idx, i) => {
+        items.sort((a, b) => {
+          let aValue = a[idx]
+          let bValue = b[idx]
+
+          // For values just convert to float before sorting
+          // this will lead to a bunch of NaNs for non-numeric values
+          // but that's fine since they'll sort to the end
+          if (idx === 'value') {
+            aValue = parseFloat(aValue)
+            bValue = parseFloat(bValue)
+          }
+
+          if (aValue < bValue) {
+            return isDesc[i] ? 1 : -1
+          }
+          if (aValue > bValue) {
+            return isDesc[i] ? -1 : 1
+          }
+          return 0
+        })
+      })
+
+      // Finally sort the pinned values to the top
+      items.sort((a, b) => {
+        if (this.isPinned(a.name)) {
+          return -1
+        }
+        return 0
+      })
+
+      return items
+    },
     packetChanged(event) {
       this.api.get_target(event.targetName).then((target) => {
         this.ignoredItems = target.ignored_items
@@ -473,6 +624,7 @@ export default {
       this.derivedLast = false
       this.valueType = 'WITH_UNITS'
       this.itemsPerPage = 20
+      this.pinnedItems = []
     },
     applyConfig: function (config) {
       this.targetName = config.target
@@ -486,6 +638,7 @@ export default {
       this.valueType = config.valueType || 'WITH_UNITS'
       this.menus[1].radioGroup = valueTypeToRadioGroup[this.valueType]
       this.itemsPerPage = config.itemsPerPage || 20
+      this.pinnedItems = config.pinnedItems || []
     },
     openConfiguration: function (name, routed = false) {
       this.openConfigBase(name, routed, async (config) => {
@@ -517,3 +670,18 @@ export default {
   },
 }
 </script>
+
+<style scoped>
+.v-tooltip__content {
+  pointer-events: initial;
+}
+a {
+  color: var(--button-color-background-primary-default);
+}
+.pin-item {
+  float: left;
+}
+.info-tooltip {
+  margin-left: 10px;
+}
+</style>