cleanup some minor usability items (#1288)

src/components/sequencing/SequenceEditor.svelte

@@ -212,14 +212,14 @@
   function downloadSeqJson() {
     const a = document.createElement('a');
     a.href = URL.createObjectURL(new Blob([editorSeqJsonView.state.doc.toString()], { type: 'application/json' }));
-    a.download = sequenceName;
+    a.download = sequenceName + '.json';
     a.click();
   }
 
   function downloadSeqN() {
     const a = document.createElement('a');
     a.href = URL.createObjectURL(new Blob([editorSequenceView.state.doc.toString()], { type: 'text/plain' }));
-    a.download = sequenceName;
+    a.download = sequenceName + '.txt';
     a.click();
   }
 
@@ -254,27 +254,23 @@
 
         <div class="right">
           <button
-            use:tooltip={{ content: `Copy to clipboard`, placement: 'top' }}
+            use:tooltip={{ content: `Copy sequence contents as SeqN to clipboard`, placement: 'top' }}
             class="st-button icon-button secondary ellipsis"
-            style={' margin-right: 5px; '}
             on:click={copySeqNClipboard}><ClipboardIcon /> SeqN</button
           >
           <button
-            use:tooltip={{ content: `Copy to clipboard`, placement: 'top' }}
+            use:tooltip={{ content: `Copy sequence contents as JSON to clipboard`, placement: 'top' }}
             class="st-button icon-button secondary ellipsis"
-            style={'margin-left: 5px; margin-right: 15px; '}
             on:click={copySeqJsonToClipboard}><ClipboardIcon /> JSON</button
           >
           <button
-            use:tooltip={{ content: `Download Seq.json`, placement: 'top' }}
+            use:tooltip={{ content: `Download sequence contents as SeqN`, placement: 'top' }}
             class="st-button icon-button secondary ellipsis"
-            style={' margin-left: 15px; margin-right: 2px;'}
             on:click|stopPropagation={downloadSeqN}><SaveIcon /> SeqN</button
           >
           <button
-            use:tooltip={{ content: `Download Seq.json`, placement: 'top' }}
+            use:tooltip={{ content: `Download sequence contents as Seq.json`, placement: 'top' }}
             class="st-button icon-button secondary ellipsis"
-            style={' margin-left: 2px; margin-right: 10px;'}
             on:click|stopPropagation={downloadSeqJson}><SaveIcon /> JSON</button
           >
         </div>
@@ -336,5 +332,6 @@
     align-items: center;
     column-gap: 5px;
     display: flex;
+    margin: 2px;
   }
 </style>

src/components/sequencing/form/ArgTitle.svelte

@@ -2,21 +2,48 @@
 
 <script lang="ts">
   import type { FswCommandArgument } from '@nasa-jpl/aerie-ampcs';
-  import { isFswCommandArgumentRepeat } from './utils';
+  import {
+    isFswCommandArgumentFloat,
+    isFswCommandArgumentInteger,
+    isFswCommandArgumentRepeat,
+    isFswCommandArgumentUnsigned,
+    isFswCommandArgumentVarString,
+  } from './utils';
 
   export let argDef: FswCommandArgument;
 
+  function compactType(argDef: FswCommandArgument) {
+    if (isFswCommandArgumentUnsigned(argDef)) {
+      return `U${argDef.bit_length}`;
+    } else if (isFswCommandArgumentInteger(argDef)) {
+      return `I${argDef.bit_length}`;
+    } else if (isFswCommandArgumentFloat(argDef)) {
+      return `F${argDef.bit_length}`;
+    } else if (isFswCommandArgumentVarString(argDef)) {
+      return `String`;
+    }
+
+    return '';
+  }
+
   function getArgTitle(argDef: FswCommandArgument) {
-    if ('units' in argDef) {
-      return `${argDef.name} - (${argDef.units})`;
-    } else if (
+    if (
       isFswCommandArgumentRepeat(argDef) &&
       typeof argDef.repeat?.max === 'number' &&
       typeof argDef.repeat?.min === 'number'
     ) {
       return `${argDef.name} - [${argDef.repeat?.min}, ${argDef.repeat?.max}] sets`;
     }
-    return argDef.name;
+
+    let compactTypeInfo = compactType(argDef);
+    if (compactTypeInfo) {
+      compactTypeInfo = ` [${compactTypeInfo}]`;
+    }
+    const base = `${argDef.name}${compactTypeInfo}`;
+    if ('units' in argDef) {
+      return `${base} - (${argDef.units})`;
+    }
+    return base;
   }
 </script>
 

src/routes/sequencing/+layout.svelte

@@ -1,6 +1,7 @@
 <svelte:options immutable={true} />
 
 <script lang="ts">
+  import PhoenixIcon from '../../assets/aerie-phoenix-logo.svg?component';
   import Nav from '../../components/app/Nav.svelte';
   import CssGrid from '../../components/ui/CssGrid.svelte';
   import type { PageData } from './$types';
@@ -10,7 +11,10 @@
 
 <CssGrid rows="var(--nav-header-height) calc(100vh - var(--nav-header-height))">
   <Nav user={data.user}>
-    <span class="sequencing-title" slot="title">Sequencing</span>
+    <span class="sequencing-title" slot="title"
+      ><span class="app-icon"><PhoenixIcon height={16} /></span>
+      Phoenix Sequencing</span
+    >
   </Nav>
   <slot />
 </CssGrid>

src/utilities/new-sequence-editor/sequence-linter.ts

@@ -103,13 +103,10 @@ export function sequenceLinter(
     variables.push(...parameterValidation.variables);
     diagnostics.push(...parameterValidation.diagnostics);
 
-    const variableMap = variables.reduce(
-      (vMap: VariableMap, variable: VariableDeclaration) => ({
-        ...vMap,
-        [variable.name]: variable,
-      }),
-      {},
-    );
+    const variableMap: VariableMap = {};
+    for (const variable of variables) {
+      variableMap[variable.name] = variable;
+    }
 
     // Validate command type mixing
     diagnostics.push(...validateCommandTypeMixing(treeNode));
@@ -995,11 +992,21 @@ export function sequenceLinter(
 
     switch (dictArgType) {
       case 'enum':
-        if (argType !== 'String' && argType !== 'Enum') {
+        if (argType === 'Enum') {
+          if (!variables[argText]) {
+            // TODO -- potentially check that variable types match usage
+            diagnostics.push({
+              from: argNode.from,
+              message: `Unrecognized variable name ${argText}`,
+              severity: 'error',
+              to: argNode.to,
+            });
+          }
+        } else if (argType !== 'String') {
           diagnostics.push({
             actions: [],
             from: argNode.from,
-            message: `Incorrect type - expected 'enum' but got ${argType}`,
+            message: `Incorrect type - expected double quoted 'enum' but got ${argType}`,
             severity: 'error',
             to: argNode.to,
           });
@@ -1026,22 +1033,6 @@ export function sequenceLinter(
               break;
             }
           }
-          if (argType === 'Enum') {
-            diagnostics.push({
-              actions: [
-                {
-                  apply(view, from, to) {
-                    view.dispatch({ changes: { from, insert: `"${argText}"`, to } });
-                  },
-                  name: `Add quotes around ${argText}`,
-                },
-              ],
-              from: argNode.from,
-              message: `Enum should be a "string"`,
-              severity: 'error',
-              to: argNode.to,
-            });
-          }
         }
         break;
       case 'float':
@@ -1078,13 +1069,15 @@ export function sequenceLinter(
               to: argNode.to,
             });
           }
-        } else if (argType === 'Enum' && !variables[argText]) {
-          diagnostics.push({
-            from: argNode.from,
-            message: `Unrecognized variable name ${argType}`,
-            severity: 'error',
-            to: argNode.to,
-          });
+        } else if (argType === 'Enum') {
+          if (!variables[argText]) {
+            diagnostics.push({
+              from: argNode.from,
+              message: `Unrecognized variable name ${argText}`,
+              severity: 'error',
+              to: argNode.to,
+            });
+          }
         } else {
           diagnostics.push({
             from: argNode.from,

src/utilities/new-sequence-editor/sequence-tooltip.ts

@@ -11,7 +11,9 @@ import type {
 } from '@nasa-jpl/aerie-ampcs';
 import ArgumentTooltip from '../../components/sequencing/ArgumentTooltip.svelte';
 import CommandTooltip from '../../components/sequencing/CommandTooltip.svelte';
+import { isFswCommandArgumentRepeat } from '../../components/sequencing/form/utils';
 import { getCustomArgDef } from './extension-points';
+import { TOKEN_REPEAT_ARG } from './sequencer-grammar-constants';
 
 /**
  * Searches up through a node's ancestors to find a node by the given name.
@@ -112,12 +114,31 @@ export function sequenceTooltip(
 
         let i = 0;
         argNode = argsNode.firstChild;
-        // TODO tooltips in repeats
         while (argNode) {
-          // if (argNode.name === TOKEN_REPEAT_ARG) {
-          //   let repeatArg = argNode.firstChild;
-
-          // }
+          const argDef = fswCommand.arguments[i];
+          if (argNode.name === TOKEN_REPEAT_ARG && isFswCommandArgumentRepeat(argDef) && argDef.repeat) {
+            let repeatArgNode = argNode.firstChild;
+            let j = 0;
+            while (repeatArgNode) {
+              if (repeatArgNode.from === from && repeatArgNode.to === to) {
+                const arg = argDef.repeat.arguments[j % argDef.repeat.arguments.length];
+                if (arg) {
+                  return {
+                    above: true,
+                    create() {
+                      const dom = document.createElement('div');
+                      new ArgumentTooltip({ props: { arg, commandDictionary }, target: dom });
+                      return { dom };
+                    },
+                    end: to,
+                    pos: from,
+                  };
+                }
+              }
+              repeatArgNode = repeatArgNode.nextSibling;
+              ++j;
+            }
+          }
 
           if (argNode.from === from && argNode.to === to) {
             const arg = getCustomArgDef(
@@ -128,7 +149,6 @@ export function sequenceTooltip(
               channelDictionary,
             );
 
-            // TODO. Type check arg for type found in AST so we do not show tooltips incorrectly.
             if (arg) {
               return {
                 above: true,