refactor

js_modules/dagster-ui/packages/ui-core/src/app/DefaultFeatureFlags.oss.tsx

@@ -8,6 +8,9 @@ export const DEFAULT_FEATURE_FLAG_VALUES: Partial<Record<FeatureFlag, boolean>>
   [FeatureFlag.flagAssetSelectionSyntax]: new URLSearchParams(global?.location?.search ?? '').has(
     'new-asset-selection-syntax',
   ),
+  [FeatureFlag.flagRunSelectionSyntax]: new URLSearchParams(global?.location?.search ?? '').has(
+    'new-run-selection-syntax',
+  ),
 
   // Flags for tests
   [FeatureFlag.__TestFlagDefaultTrue]: true,

js_modules/dagster-ui/packages/ui-core/src/asset-selection/input/AssetSelectionInput.oss.tsx

@@ -2,12 +2,14 @@ import {Icons} from '@dagster-io/ui-components';
 import {useMemo} from 'react';
 import styled from 'styled-components';
 
-import {lintAssetSelection} from './AssetSelectionLinter';
 import {assertUnreachable} from '../../app/Util';
 import {AssetGraphQueryItem} from '../../asset-graph/useAssetGraphData';
 import {SelectionAutoCompleteInput, iconStyle} from '../../selection/SelectionAutoCompleteInput';
+import {createSelectionLinter} from '../../selection/createSelectionLinter';
 import {placeholderTextForItems} from '../../ui/GraphQueryInput';
 import {buildRepoPathForHuman} from '../../workspace/buildRepoAddress';
+import {AssetSelectionLexer} from '../generated/AssetSelectionLexer';
+import {AssetSelectionParser} from '../generated/AssetSelectionParser';
 
 import 'codemirror/addon/edit/closebrackets';
 import 'codemirror/lib/codemirror.css';
@@ -84,14 +86,19 @@ export const AssetSelectionInput = ({value, onChange, assets}: AssetSelectionInp
       code_location: codeLocations,
     };
   }, [assets]);
+
+  const linter = useMemo(
+    () => createSelectionLinter({Lexer: AssetSelectionLexer, Parser: AssetSelectionParser}),
+    [],
+  );
   return (
     <WrapperDiv>
       <SelectionAutoCompleteInput
         nameBase="key"
         attributesMap={attributesMap}
         placeholder={placeholderTextForItems('Type an asset subset…', assets)}
         functions={FUNCTIONS}
-        linter={lintAssetSelection}
+        linter={linter}
         value={value}
         onChange={onChange}
       />

js_modules/dagster-ui/packages/ui-core/src/selection/SelectionAutoCompleteInput.tsx

@@ -122,10 +122,12 @@ export const SelectionAutoCompleteInput = <T extends Record<string, string[]>, N
       });
     }
 
-    const editor = editorRef.current;
     return () => {
-      if (editor) {
-        editor.remove();
+      const cm = cmInstance.current;
+      if (cm) {
+        // Clean up the instance...
+        cm.closeHint();
+        cm.getWrapperElement()?.parentNode?.removeChild(cm.getWrapperElement());
       }
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -173,7 +175,7 @@ export const iconStyle = (img: string) => css`
   }
 `;
 
-const InputDiv = styled.div`
+export const InputDiv = styled.div`
   ${SelectionAutoCompleteInputCSS}
 `;
 

js_modules/dagster-ui/packages/ui-core/src/selection/createSelectionLinter.ts

@@ -0,0 +1,46 @@
+import {CharStreams, CommonTokenStream, Lexer, Parser, ParserRuleContext} from 'antlr4ts';
+import CodeMirror from 'codemirror';
+import {Linter} from 'codemirror/addon/lint/lint';
+
+import {CustomErrorListener} from './CustomErrorListener';
+
+type LexerConstructor = new (...args: any[]) => Lexer;
+type ParserConstructor = new (...args: any[]) => Parser & {
+  start: () => ParserRuleContext;
+};
+
+export function createSelectionLinter({
+  Lexer: LexerKlass,
+  Parser: ParserKlass,
+}: {
+  Lexer: LexerConstructor;
+  Parser: ParserConstructor;
+}): Linter<any> {
+  return (text: string) => {
+    const errorListener = new CustomErrorListener();
+
+    const inputStream = CharStreams.fromString(text);
+    const lexer = new LexerKlass(inputStream);
+
+    lexer.removeErrorListeners();
+    lexer.addErrorListener(errorListener);
+
+    const tokens = new CommonTokenStream(lexer);
+    const parser = new ParserKlass(tokens);
+
+    parser.removeErrorListeners(); // Remove default console error listener
+    parser.addErrorListener(errorListener);
+
+    parser.start();
+
+    // Map syntax errors to CodeMirror's lint format
+    const lintErrors = errorListener.getErrors().map((error) => ({
+      message: error.message.replace('<EOF>, ', ''),
+      severity: 'error',
+      from: CodeMirror.Pos(error.line, error.column),
+      to: CodeMirror.Pos(error.line, text.length),
+    }));
+
+    return lintErrors;
+  };
+}