show decoded by array as read only in form view

src/components/sequencing/form/ArgEditor.svelte

@@ -93,8 +93,8 @@
         }}
       />
     {/if}
-    {#if commandInfoMapper.isByteArrayArg(argInfo.node ?? null)}
-      <ByteArrayEditor value={argInfo.text ?? ''} {argDef} />
+    {#if argInfo.node && commandInfoMapper.isByteArrayArg(argInfo.node)}
+      <ByteArrayEditor value={argInfo.text ?? ''} argNode={argInfo.node} {commandInfoMapper} />
     {:else if isSymbol && isFswCommandArgumentEnum(argDef)}
       <div class="st-typography-small-caps">Reference</div>
       <EnumEditor

src/components/sequencing/form/ByteArrayEditor.svelte

@@ -1,10 +1,23 @@
 <svelte:options immutable={true} />
 
 <script lang="ts">
-  import type { FswCommandArgument } from '@nasa-jpl/aerie-ampcs';
+  import type { SyntaxNode } from '@lezer/common';
+  import type { CommandInfoMapper } from '../../../utilities/codemirror/commandInfoMapper';
+  import { decodeInt32Array } from '../../../utilities/codemirror/vml/vmlTreeUtils';
 
-  export let argDef: FswCommandArgument;
+  export let argNode: SyntaxNode;
+  export let commandInfoMapper: CommandInfoMapper;
   export let value: string;
+
+  let decodedValue: string;
+
+  $: {
+    const arrayNodes = commandInfoMapper.getByteArrayElements && commandInfoMapper.getByteArrayElements(argNode, value);
+    if (arrayNodes) {
+      decodedValue = decodeInt32Array(arrayNodes);
+    }
+  }
 </script>
 
-<input class="st-input w-100" spellcheck="false" bind:value title={argDef.description} disabled={true} />
+<input class="st-input w-100" spellcheck="false" bind:value title="encoded string" disabled={true} />
+<input class="st-input w-100" spellcheck="false" bind:value={decodedValue} title="decoded string" disabled={true} />

src/utilities/codemirror/commandInfoMapper.ts

@@ -14,6 +14,8 @@ export interface CommandInfoMapper {
   /** collects argument nodes from sub-tree of this command argument container */
   getArgumentsFromContainer(containerNode: SyntaxNode): SyntaxNode[];
 
+  getByteArrayElements?(node: SyntaxNode | null, arrayText: string): string[] | null;
+
   /** ascends parse tree to find scope to display in form editor */
   getContainingCommand(node: SyntaxNode | null): SyntaxNode | null;
 

src/utilities/codemirror/vml/vmlTooltip.ts

@@ -27,6 +27,7 @@ import {
   TOKEN_HEX_CONST,
   TOKEN_INT_CONST,
 } from './vmlConstants';
+import { decodeInt32Array } from './vmlTreeUtils';
 
 const sequenceEngineArgument: FswCommandArgumentInteger = {
   arg_type: 'integer',
@@ -128,15 +129,6 @@ export function vmlTooltip(commandDictionary: CommandDictionary | null): Extensi
   });
 }
 
-function decodeInt32Array(encoded: string[]) {
-  return encoded
-    .map(charAsHex => {
-      const n = Number(charAsHex);
-      return String.fromCodePoint((n >> 24) & 0xff, (n >> 16) & 0xff, (n >> 8) & 0xff, n & 0xff);
-    })
-    .join('');
-}
-
 function strTooltip(message: string, from: number, to: number) {
   return {
     above: true,

src/utilities/codemirror/vml/vmlTreeUtils.ts

@@ -25,6 +25,7 @@ import {
   RULE_VARIABLE_NAME_CONSTANT,
   RULE_VM_MANAGEMENT,
   TOKEN_COMMA,
+  TOKEN_HEX_CONST,
   TOKEN_INT_CONST,
   TOKEN_STRING_CONST,
 } from './vmlConstants';
@@ -76,6 +77,14 @@ export class VmlCommandInfoMapper implements CommandInfoMapper {
     return [];
   }
 
+  getByteArrayElements(node: SyntaxNode | null, arrayText: string): string[] | null {
+    const hexConsts: SyntaxNode[] | undefined = node?.getChild(RULE_BYTE_ARRAY)?.getChildren(TOKEN_HEX_CONST);
+    if (!node || !hexConsts) {
+      return null;
+    }
+    return hexConsts.map(hexNode => arrayText.slice(hexNode.from - node.from, hexNode.to - node.to));
+  }
+
   getContainingCommand(node: SyntaxNode | null): SyntaxNode | null {
     return getNearestAncestorNodeOfType(node, [RULE_TIME_TAGGED_STATEMENT]);
   }
@@ -177,3 +186,12 @@ export function getArgumentPosition(argNode: SyntaxNode): number {
       ?.findIndex(par => par.from === argNode.from && par.to === argNode.to) ?? -1
   );
 }
+
+export function decodeInt32Array(encoded: string[]) {
+  return encoded
+    .map(charAsHex => {
+      const n = Number(charAsHex);
+      return String.fromCodePoint((n >> 24) & 0xff, (n >> 16) & 0xff, (n >> 8) & 0xff, n & 0xff);
+    })
+    .join('');
+}