Hook up run selection to GanttChart (dagster-io#26254)

## Summary & Motivation
Hook up the run selection syntax to `GanttChart.tsx` and add feature flag for run selection syntax.

## How I Tested These Changes
Existing tests should pass

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

@@ -5,6 +5,7 @@ export enum FeatureFlag {
   flagDisableAutoLoadDefaults = 'flagDisableAutoLoadDefaults',
   flagLegacyRunsPage = 'flagLegacyRunsPage',
   flagAssetSelectionSyntax = 'flagAssetSelectionSyntax',
+  flagRunSelectionSyntax = 'flagRunSelectionSyntax',
 
   // Flags for tests
   __TestFlagDefaultNone = '__TestFlagDefaultNone',

js_modules/dagster-ui/packages/ui-core/src/gantt/GanttChart.tsx

@@ -52,12 +52,14 @@ import {GanttChartTimescale} from './GanttChartTimescale';
 import {GanttStatusPanel} from './GanttStatusPanel';
 import {OptionsContainer, OptionsSpacer} from './VizComponents';
 import {ZoomSlider} from './ZoomSlider';
+import {RunGraphQueryItem} from './toGraphQueryItems';
 import {useGanttChartMode} from './useGanttChartMode';
 import {AppContext} from '../app/AppContext';
-import {GraphQueryItem, filterByQuery} from '../app/GraphQueryImpl';
+import {GraphQueryItem} from '../app/GraphQueryImpl';
 import {withMiddleTruncation} from '../app/Util';
 import {WebSocketContext} from '../app/WebSocketProvider';
 import {useThrottledMemo} from '../hooks/useThrottledMemo';
+import {filterRunSelectionByQuery} from '../run-selection/AntlrRunSelection';
 import {CancelRunButton} from '../runs/RunActionButtons';
 import {
   EMPTY_RUN_METADATA,
@@ -94,7 +96,7 @@ interface GanttChartProps {
   selection: StepSelection;
   focusedTime: number | null;
   runId: string;
-  graph: GraphQueryItem[];
+  graph: RunGraphQueryItem[];
   options?: Partial<GanttChartLayoutOptions>;
   metadata?: IRunMetadataDict;
   toolbarActions?: React.ReactChild;
@@ -121,7 +123,7 @@ export const GanttChart = (props: GanttChartProps) => {
 
   const cachedLayout = React.useRef<GanttChartLayout | null>(null);
   const cachedLayoutParams = React.useRef<BuildLayoutParams | null>(null);
-  const graphFiltered = filterByQuery(graph, selection.query);
+  const graphFiltered = filterRunSelectionByQuery(graph, selection.query);
   const layoutParams = React.useMemo(
     () => ({
       nodes: state.hideUnselectedSteps ? graphFiltered.all : graph,

js_modules/dagster-ui/packages/ui-core/src/gantt/__stories__/GanttChart.stories.tsx

@@ -3,7 +3,6 @@ import {Box, Button, CustomTooltipProvider} from '@dagster-io/ui-components';
 import {Meta} from '@storybook/react';
 import {useState} from 'react';
 
-import {GraphQueryItem} from '../../app/GraphQueryImpl';
 import {RunStatus, buildRun, buildRunGroup, buildRunStatsSnapshot} from '../../graphql/types';
 import {extractMetadataFromLogs} from '../../runs/RunMetadataProvider';
 import {RunMetadataProviderMessageFragment} from '../../runs/types/RunMetadataProvider.types';
@@ -13,6 +12,7 @@ import {RUN_GROUP_PANEL_QUERY} from '../RunGroupPanel';
 import * as Dynamic from '../__fixtures__/dynamic';
 import * as Retry from '../__fixtures__/retry';
 import * as Simple from '../__fixtures__/simple';
+import {RunGraphQueryItem} from '../toGraphQueryItems';
 import {RunGroupPanelQuery, RunGroupPanelQueryVariables} from '../types/RunGroupPanel.types';
 
 const R1_START = 1619468000;
@@ -72,7 +72,7 @@ const GanttTestCase = ({
   logs,
   focusedTime,
 }: {
-  graph: GraphQueryItem[];
+  graph: RunGraphQueryItem[];
   logs: RunMetadataProviderMessageFragment[];
   focusedTime: number;
 }) => {

js_modules/dagster-ui/packages/ui-core/src/gantt/toGraphQueryItems.tsx

@@ -6,7 +6,7 @@ import {StepKind} from '../graphql/types';
 import {IStepMetadata, IStepState} from '../runs/RunMetadataProvider';
 
 export type RunGraphQueryItem = GraphQueryItem & {
-  metadata: IStepMetadata | undefined;
+  metadata?: IStepMetadata;
 };
 
 /**

js_modules/dagster-ui/packages/ui-core/src/run-selection/AntlrRunSelection.ts

@@ -1,10 +1,13 @@
 import {CharStreams, CommonTokenStream} from 'antlr4ts';
+import {FeatureFlag} from 'shared/app/FeatureFlags.oss';
 
 import {AntlrRunSelectionVisitor} from './AntlrRunSelectionVisitor';
 import {AntlrInputErrorListener} from '../asset-selection/AntlrAssetSelection';
 import {RunGraphQueryItem} from '../gantt/toGraphQueryItems';
 import {RunSelectionLexer} from './generated/RunSelectionLexer';
 import {RunSelectionParser} from './generated/RunSelectionParser';
+import {featureEnabled} from '../app/Flags';
+import {filterByQuery} from '../app/GraphQueryImpl';
 
 type RunSelectionQueryResult = {
   all: RunGraphQueryItem[];
@@ -40,3 +43,18 @@ export const parseRunSelectionQuery = (
     return e as Error;
   }
 };
+
+export const filterRunSelectionByQuery = (
+  all_runs: RunGraphQueryItem[],
+  query: string,
+): RunSelectionQueryResult => {
+  if (featureEnabled(FeatureFlag.flagRunSelectionSyntax)) {
+    const result = parseRunSelectionQuery(all_runs, query);
+    if (result instanceof Error) {
+      // fall back to old behavior
+      return filterByQuery(all_runs, query);
+    }
+    return result;
+  }
+  return filterByQuery(all_runs, query);
+};