form editor, disabled download button, nested grid which may have roo… (

#1213) * form editor, disabled download button, nested grid which may have room for improvement * filter codemirror edit dispatching * remove redundant quotes on metadata and model values * leave whitespace when addining missing args, fix for missing time tag, warning cleanup * demonstration of quick fix actions on arg counts (#1214) * made grammar more flexible with directive ordering and misspelling, added some suggested fixes * cleaned up some diagnostic actions * lint @Locals and @INPUT_PARAMETERS
NASA-AMMOS · May 17, 2024 · 1fb70ad · 1fb70ad
1 parent f6b039f
commit 1fb70ad
Show file tree

Hide file tree

Showing 26 changed files with 959 additions and 120 deletions.
diff --git a/codemirror-lang-sequence/package.json b/codemirror-lang-sequence/package.json
@@ -15,7 +15,7 @@
     "build": "npm run clean && rollup -c",
     "clean": "rm -rf dist",
     "postinstall": "npm run build",
-    "test": "npm run build && mocha test/test.js"
+    "test": "npm run build && mocha test/*.js"
   },
   "dependencies": {
     "@codemirror/autocomplete": "^6.15.0",

diff --git a/codemirror-lang-sequence/src/index.ts b/codemirror-lang-sequence/src/index.ts
@@ -26,6 +26,7 @@ export const SeqLanguage = LRLanguage.define({
       }),
       styleTags({
         Boolean: t.bool,
+        GenericDirective: t.namespace,
         Global: t.namespace,
         HardwareCommands: t.namespace,
         IdDeclaration: t.namespace,

diff --git a/codemirror-lang-sequence/src/sequence.grammar b/codemirror-lang-sequence/src/sequence.grammar
@@ -1,11 +1,9 @@
 @top Sequence {
   (newLine | whiteSpace)?
-  commentLine* ~maybeComments
-  IdDeclaration?
-  commentLine* ~maybeComments
-  ParameterDeclaration?
-  commentLine* ~maybeComments
-  LocalDeclaration?
+  (
+    commentLine* ~maybeComments
+    (IdDeclaration | ParameterDeclaration | LocalDeclaration | GenericDirective)
+  )*
   commentLine* ~maybeComments
   Metadata?
   Commands?
@@ -14,14 +12,17 @@
 }
 
 // Potential Improvements
-// flexibility - allow indentation of directives
 // maintainability - use @specialize on directives
-// extensibility - add generic Directive { "@"identifier }
+// expressiveness - add activate, load and ground syntax
 
 @precedence {
   stemStart @cut
 }
 
+GenericDirective {
+  genericDirective (whiteSpace String)* newLine
+}
+
 IdDeclaration {
   idDirective whiteSpace String newLine
 }
@@ -148,10 +149,9 @@ Stem { !stemStart identifier }
   parameterDirective { "@INPUT_PARAMS" }
   metadataDirective { "@METADATA" }
   modelDirective { "@MODEL" }
+  genericDirective { "@"identifier }
 
-  @precedence {
-    newLine, whiteSpace
-  }
+  @precedence { newLine, whiteSpace }
 
   @precedence{ TimeAbsolute, TimeRelative, TimeEpoch, TimeComplete, identifier }
 
@@ -164,6 +164,7 @@ Stem { !stemStart identifier }
     localsDirective,
     parameterDirective,
     LoadAndGoDirective,
+    genericDirective,
     identifier
   }
 }
diff --git a/codemirror-lang-sequence/test/cases/errors.txt b/codemirror-lang-sequence/test/cases/errors.txt
@@ -39,3 +39,11 @@ Sequence(Commands(
   Command(Stem,Args(RepeatArg(⚠))),
   Command(Stem,Args(RepeatArg(⚠,Enum)))
 ))
+
+# locals with wrong value types
+
+@LOCALS "string_not_enum"
+
+==>
+
+Sequence(LocalDeclaration(⚠(String)))
diff --git a/codemirror-lang-sequence/test/cases/parse_tree.txt b/codemirror-lang-sequence/test/cases/parse_tree.txt
@@ -23,6 +23,22 @@ Sequence(
   )
 )
 
+# Generic directive
+
+@WRONG_LOAD_AND_GO
+
+C CMD_1
+
+==>
+
+Sequence(
+  GenericDirective,
+  Commands(
+    Command(TimeTag(TimeComplete),Stem,Args)
+  )
+)
+
+
 # Command with two string args
 
 FSW_CMD "hello" "world"

diff --git a/codemirror-lang-sequence/test/token.js b/codemirror-lang-sequence/test/token.js
@@ -35,7 +35,7 @@ describe('error positions', () => {
       testname: 'bad number arg',
     },
     {
-      first_error: 20,
+      first_error: 24,
       input: `COM 12345
   COM "dsa"
   @UNKNOWN DIRECTIVE`,
@@ -58,7 +58,9 @@ describe('error positions', () => {
 describe('seqfiles', () => {
   const seqDir = path.dirname(fileURLToPath(import.meta.url)) + '/sequences';
   for (const file of readdirSync(seqDir)) {
-    if (!/\.txt$/.test(file)) {continue};
+    if (!/\.txt$/.test(file)) {
+      continue;
+    }
 
     const name = /^[^.]*/.exec(file)[0];
     it(name, () => {
@@ -91,7 +93,6 @@ CMD0
       return {
         from,
         to: from + nodeText.length,
-
       };
     };
     const expectedCommentLocations = {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -59,6 +59,7 @@
     "d3-selection": "^3.0.0",
     "d3-shape": "^3.2.0",
     "d3-time": "^3.1.0",
+    "fastest-levenshtein": "^1.0.16",
     "graphql-ws": "^5.14.0",
     "json-source-map": "^0.6.1",
     "jszip": "^3.10.1",

diff --git a/src/components/sequencing/CommandTooltip.svelte b/src/components/sequencing/CommandTooltip.svelte
@@ -5,7 +5,7 @@
 
   export let command: FswCommand | HwCommand;
 
-  let commandExample: string;
+  $: commandExample = command.stem;
 
   $: if (command.type === 'hw_command') {
     commandExample = command.stem;

diff --git a/src/components/sequencing/SequenceEditor.svelte b/src/components/sequencing/SequenceEditor.svelte
@@ -6,12 +6,13 @@
   import { lintGutter } from '@codemirror/lint';
   import { Compartment, EditorState } from '@codemirror/state';
   import type { ViewUpdate } from '@codemirror/view';
+  import type { SyntaxNode } from '@lezer/common';
   import type { CommandDictionary } from '@nasa-jpl/aerie-ampcs';
   import { EditorView, basicSetup } from 'codemirror';
   import { seq } from 'codemirror-lang-sequence';
   import { debounce } from 'lodash-es';
   import { createEventDispatcher, onMount } from 'svelte';
-  import { commandDictionaries, userSequencesRows } from '../../stores/sequencing';
+  import { commandDictionaries, userSequenceEditorColumns, userSequencesRows } from '../../stores/sequencing';
   import type { User } from '../../types/app';
   import effects from '../../utilities/effects';
   import { seqJsonLinter } from '../../utilities/new-sequence-editor/seq-json-linter';
@@ -23,6 +24,7 @@
   import CssGridGutter from '../ui/CssGridGutter.svelte';
   import Panel from '../ui/Panel.svelte';
   import SectionTitle from '../ui/SectionTitle.svelte';
+  import SelectedCommand from './form/selected-command.svelte';
 
   export let readOnly: boolean = false;
   export let sequenceCommandDictionaryId: number | null = null;
@@ -48,6 +50,7 @@
   let editorSeqJsonView: EditorView;
   let editorSequenceDiv: HTMLDivElement;
   let editorSequenceView: EditorView;
+  let selectedNode: SyntaxNode | null;
 
   $: {
     if (editorSequenceView) {
@@ -122,8 +125,15 @@
     editorSeqJsonView.dispatch({ changes: { from: 0, insert: seqJsonStr, to: editorSeqJsonView.state.doc.length } });
 
     dispatch('sequence', sequence);
+
+    const updatedSelectionNode = tree.resolveInner(viewUpdate.state.selection.asSingle().main.from, -1);
+    // minimize triggering selected command view
+    if (selectedNode !== updatedSelectionNode) {
+      selectedNode = updatedSelectionNode;
+    }
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   function downloadSeqJson() {
     const a = document.createElement('a');
     a.href = URL.createObjectURL(new Blob([sequenceDefinition], { type: 'application/json' }));
@@ -132,34 +142,44 @@
   }
 </script>
 
-<CssGrid bind:rows={$userSequencesRows} minHeight={'0'}>
-  <Panel>
-    <svelte:fragment slot="header">
-      <SectionTitle>{title}</SectionTitle>
-
-      <div class="right">
-        <slot />
-      </div>
-    </svelte:fragment>
-
-    <svelte:fragment slot="body">
-      <div bind:this={editorSequenceDiv} />
-    </svelte:fragment>
-  </Panel>
-
-  <CssGridGutter track={1} type="row" />
-
-  <Panel>
-    <svelte:fragment slot="header">
-      <SectionTitle>Seq JSON (Read-only)</SectionTitle>
-
-      <div class="right">
-        <button class="st-button secondary ellipsis" on:click={downloadSeqJson}>Download</button>
-      </div>
-    </svelte:fragment>
-
-    <svelte:fragment slot="body">
-      <div bind:this={editorSeqJsonDiv} />
-    </svelte:fragment>
-  </Panel>
+<CssGrid bind:columns={$userSequenceEditorColumns} minHeight={'0'}>
+  <CssGrid bind:rows={$userSequencesRows} minHeight={'0'}>
+    <Panel>
+      <svelte:fragment slot="header">
+        <SectionTitle>{title}</SectionTitle>
+
+        <div class="right">
+          <slot />
+        </div>
+      </svelte:fragment>
+
+      <svelte:fragment slot="body">
+        <div bind:this={editorSequenceDiv} />
+      </svelte:fragment>
+    </Panel>
+
+    <CssGridGutter track={1} type="row" />
+
+    <Panel>
+      <svelte:fragment slot="header">
+        <SectionTitle>Seq JSON (Read-only)</SectionTitle>
+
+        <!-- <div class="right">
+          <button class="st-button secondary ellipsis" on:click={downloadSeqJson}>Download</button>
+        </div> -->
+      </svelte:fragment>
+
+      <svelte:fragment slot="body">
+        <div bind:this={editorSeqJsonDiv} />
+      </svelte:fragment>
+    </Panel>
+  </CssGrid>
+
+  <CssGridGutter track={1} type="column" />
+
+  {#if !!commandDictionary && !!selectedNode}
+    <SelectedCommand node={selectedNode} {commandDictionary} {editorSequenceView} />
+  {:else}
+    <div>Selected Command</div>
+  {/if}
 </CssGrid>
diff --git a/src/components/sequencing/SequenceForm.svelte b/src/components/sequencing/SequenceForm.svelte
@@ -80,6 +80,7 @@
     loadAdaptation(adaptation);
   });
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   async function getUserSequenceFromSeqJson() {
     const file: File = seqJsonFiles[0];
     const text = await file.text();
@@ -256,7 +257,7 @@
           }}
         />
       </fieldset>
-<!--
+      <!--
       <fieldset>
         <label for="seqJsonFile">Create Sequence from Seq JSON (optional)</label>
         <input

diff --git a/src/components/sequencing/form/add-missing-args-button.svelte b/src/components/sequencing/form/add-missing-args-button.svelte
@@ -0,0 +1,11 @@
+<svelte:options immutable={true} />
+
+<script lang="ts">
+  export let setInEditor: () => void;
+</script>
+
+<div>
+  <button on:click={setInEditor}>
+    Add Missing Arguments
+  </button>
+</div>