fix hex display of telemetry and event ids in gds gui (#288)

ids were showing decimal values with 0x prefix because js object
keys are always strings and String.toString(16) ignores the radix.
added formatHexId() utility and cast dict keys to Number on init.

Fixes nasa/fprime#4717

Author: dcpagotto

src/fprime_gds/flask/static/js/datastore.js

@@ -263,7 +263,7 @@ class DataStore {
         // because rendering of edit-views is still possible.
         let channels = {};
         for (let key in _dictionaries.channels) {
-            channels[key] = {id: key, time: null, datetime: null, val: null};
+            channels[key] = {id: Number(key), time: null, datetime: null, val: null};
         }
         Object.assign(this.channels, channels); // Forces new channel map into Vue maintaining the original object
         this.commands = _dictionaries.commands;

src/fprime_gds/flask/static/js/vue-support/channel.js

@@ -6,7 +6,7 @@
  *
  * @author mstarch
  */
-import {listExistsAndItemNameNotInList, timeToString} from "./utils.js"
+import {listExistsAndItemNameNotInList, timeToString, formatHexId} from "./utils.js"
 import "./fptable.js";
 import {_datastore, _dictionaries} from "../datastore.js";
 
@@ -66,9 +66,9 @@ Vue.component("channel-table", {
         columnify(item) {
             let template = _dictionaries.channels[item.id];
             if (item.time == null || item.val == null) {
-                return ["", "0x" + item.id.toString(16), template.full_name, ""];
+                return ["", formatHexId(item.id), template.full_name, ""];
             }
-            return [timeToString(item.time), "0x" + item.id.toString(16), template.full_name,
+            return [timeToString(item.time), formatHexId(item.id), template.full_name,
                 (typeof(item.display_text) !== "undefined")? item.display_text : item.val]
         },
         /**
@@ -150,7 +150,7 @@ Vue.component("channel-table", {
         clearChannels() {
             let channels = {}
             for (let key in _dictionaries.channels) {
-                channels[key] = {id: key, time: null, datetime: null, val: null};
+                channels[key] = {id: Number(key), time: null, datetime: null, val: null};
             }
             Object.assign(_datastore.channels, channels);
             this.$refs.fptable.send([]);

src/fprime_gds/flask/static/js/vue-support/event.js

@@ -7,7 +7,7 @@
  *
  * @author mstarch
  */
-import {listExistsAndItemNameNotInList, timeToString} from "./utils.js";
+import {listExistsAndItemNameNotInList, timeToString, formatHexId} from "./utils.js";
 import {_datastore,_dictionaries} from "../datastore.js";
 
 let OPREG = /Opcode (0x[0-9a-fA-F]+)/;
@@ -80,7 +80,7 @@ Vue.component("event-list", {
                 const msg = '<span title="' + groups[0] + '">' + command_mnemonic + '</span>'
                 display_text = display_text.replace(OPREG, msg);
             }
-            return [timeToString(item.time), "0x" + item.id.toString(16), template.full_name,
+            return [timeToString(item.time), formatHexId(item.id), template.full_name,
                 template.severity.value.replace("EventSeverity.", ""), display_text];
         },
         /**

src/fprime_gds/flask/static/js/vue-support/utils.js

@@ -444,3 +444,13 @@ export class ScrollHandler {
         return user_scrolled;
     }
 }
+
+// converts id to proper hex string, handles both number and string ids
+// since js object keys are always strings, .toString(16) on a string
+// just returns the string as-is wich causes the decimal-with-0x-prefix bug
+export function formatHexId(id) {
+    if (id == null) {
+        return "";
+    }
+    return "0x" + BigInt(id).toString(16);
+}