From 0d2a5c950c6b292c32c7013185cb43bce91b4282 Mon Sep 17 00:00:00 2001 From: Marco Salazar Date: Mon, 14 Apr 2025 13:43:17 -0400 Subject: [PATCH 01/10] remove selection syntax flag --- .../src/asset-graph/AssetGraphExplorer.tsx | 140 +++--------------- .../ui-core/src/asset-graph/AssetNode.tsx | 108 +++++++------- .../useAssetGraphExplorerFilters.oss.tsx | 41 ----- .../ui-core/src/assets/AssetTable.tsx | 31 +--- .../ui-core/src/assets/AssetsCatalogTable.tsx | 41 +---- .../packages/ui-core/src/graph/KindTags.tsx | 28 ++-- .../ui-core/src/ui/GraphQueryInput.tsx | 17 +-- .../src/workspace/VirtualizedAssetRow.tsx | 1 - .../ui-core/src/workspace/workspacePath.ts | 13 +- 9 files changed, 95 insertions(+), 325 deletions(-) delete mode 100644 js_modules/dagster-ui/packages/ui-core/src/asset-graph/useAssetGraphExplorerFilters.oss.tsx diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorer.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorer.tsx index 86b9d8926bd79..a394af768e225 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorer.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorer.tsx @@ -15,10 +15,7 @@ import pickBy from 'lodash/pickBy'; import uniq from 'lodash/uniq'; import without from 'lodash/without'; import * as React from 'react'; -import {useCallback, useLayoutEffect, useMemo, useRef, useState} from 'react'; -import {FeatureFlag} from 'shared/app/FeatureFlags.oss'; -import {AssetGraphAssetSelectionInput} from 'shared/asset-graph/AssetGraphAssetSelectionInput.oss'; -import {useAssetGraphExplorerFilters} from 'shared/asset-graph/useAssetGraphExplorerFilters.oss'; +import {useCallback, useMemo, useRef, useState} from 'react'; import {AssetSelectionInput} from 'shared/asset-selection/input/AssetSelectionInput.oss'; import {CreateCatalogViewButton} from 'shared/assets/CreateCatalogViewButton.oss'; import styled from 'styled-components'; @@ -53,7 +50,6 @@ import { useFullAssetGraphData, } from './useAssetGraphData'; import {AssetLocation, useFindAssetLocation} from './useFindAssetLocation'; -import {featureEnabled} from '../app/Flags'; import {AssetLiveDataRefreshButton} from '../asset-data/AssetLiveDataProvider'; import {LaunchAssetExecutionButton} from '../assets/LaunchAssetExecutionButton'; import {AssetKey} from '../assets/types'; @@ -61,10 +57,8 @@ import {DEFAULT_MAX_ZOOM} from '../graph/SVGConsts'; import {SVGViewport, SVGViewportRef} from '../graph/SVGViewport'; import {useAssetLayout} from '../graph/asyncGraphLayout'; import {closestNodeInDirection, isNodeOffscreen} from '../graph/common'; -import {AssetGroupSelector} from '../graphql/types'; import {usePreviousDistinctValue} from '../hooks/usePrevious'; import {useQueryAndLocalStoragePersistedState} from '../hooks/useQueryAndLocalStoragePersistedState'; -import {useUpdatingRef} from '../hooks/useUpdatingRef'; import { GraphExplorerOptions, OptionsOverlay, @@ -80,7 +74,6 @@ import { } from '../pipelines/GraphNotices'; import {ExplorerPath} from '../pipelines/PipelinePathUtils'; import {SyntaxError} from '../selection/CustomErrorListener'; -import {StaticSetFilter} from '../ui/BaseFilters/useStaticSetFilter'; import {IndeterminateLoadingBar} from '../ui/IndeterminateLoadingBar'; import {LoadingSpinner} from '../ui/Loading'; import {isIframe} from '../util/isIframe'; @@ -105,14 +98,11 @@ type Props = { export const MINIMAL_SCALE = 0.6; export const GROUPS_ONLY_SCALE = 0.15; -const DEFAULT_SET_HIDE_NODES_MATCH = (_node: AssetNodeForGraphQueryFragment) => true; - export const AssetGraphExplorer = React.memo((props: Props) => { const {fullAssetGraphData: currentFullAssetGraphData} = useFullAssetGraphData(props.fetchOptions); const previousFullAssetGraphData = usePreviousDistinctValue(currentFullAssetGraphData); const fullAssetGraphData = currentFullAssetGraphData ?? previousFullAssetGraphData; - const [hideNodesMatching, setHideNodesMatching] = useState(() => DEFAULT_SET_HIDE_NODES_MATCH); const { loading: graphDataLoading, @@ -120,56 +110,7 @@ export const AssetGraphExplorer = React.memo((props: Props) => { assetGraphData: currentAssetGraphData, graphQueryItems: currentGraphQueryItems, allAssetKeys: currentAllAssetKeys, - } = useAssetGraphData( - props.explorerPath.opsQuery, - useMemo( - () => ({ - ...props.fetchOptions, - hideNodesMatching: (node) => { - let hide = false; - if (props.fetchOptions.hideNodesMatching?.(node)) { - hide = true; - } - if (hideNodesMatching(node)) { - hide = true; - } - return hide; - }, - }), - [props.fetchOptions, hideNodesMatching], - ), - ); - - const {explorerPath, onChangeExplorerPath} = props; - - const explorerPathRef = useUpdatingRef(explorerPath); - - const {button, filterBar, groupsFilter, kindFilter, filterFn, filteredAssetsLoading} = - useAssetGraphExplorerFilters({ - nodes: React.useMemo( - () => (fullAssetGraphData ? Object.values(fullAssetGraphData.nodes) : []), - [fullAssetGraphData], - ), - loading: graphDataLoading, - viewType: props.viewType, - assetSelection: explorerPath.opsQuery, - setAssetSelection: React.useCallback( - (assetSelection: string) => { - onChangeExplorerPath( - { - ...explorerPathRef.current, - opsQuery: assetSelection, - }, - 'push', - ); - }, - [explorerPathRef, onChangeExplorerPath], - ), - }); - - useLayoutEffect(() => { - setHideNodesMatching(() => (node: AssetNodeForGraphQueryFragment) => !filterFn(node)); - }, [filterFn]); + } = useAssetGraphData(props.explorerPath.opsQuery, props.fetchOptions); const previousAssetGraphData = usePreviousDistinctValue(currentAssetGraphData); const previousGraphQueryItems = usePreviousDistinctValue(currentGraphQueryItems); @@ -179,10 +120,7 @@ export const AssetGraphExplorer = React.memo((props: Props) => { const graphQueryItems = currentGraphQueryItems ?? previousGraphQueryItems; const allAssetKeys = currentAllAssetKeys ?? previousAllAssetKeys; - if ( - (fetchResult.loading || graphDataLoading || filteredAssetsLoading) && - (!assetGraphData || !allAssetKeys) - ) { + if ((fetchResult.loading || graphDataLoading) && (!assetGraphData || !allAssetKeys)) { return ; } @@ -203,11 +141,7 @@ export const AssetGraphExplorer = React.memo((props: Props) => { fullAssetGraphData={fullAssetGraphData ?? assetGraphData} allAssetKeys={allAssetKeys} graphQueryItems={graphQueryItems} - filterBar={filterBar} - filterButton={button} - kindFilter={kindFilter} - groupsFilter={groupsFilter} - loading={filteredAssetsLoading || graphDataLoading || fetchResult.loading} + loading={graphDataLoading || fetchResult.loading} {...props} /> ); @@ -220,12 +154,7 @@ type WithDataProps = Props & { graphQueryItems: AssetGraphQueryItem[]; loading: boolean; - filterButton: React.ReactNode; - filterBar: React.ReactNode; viewType: AssetGraphViewType; - - kindFilter: StaticSetFilter; - groupsFilter: StaticSetFilter; }; const AssetGraphExplorerWithData = ({ @@ -239,11 +168,7 @@ const AssetGraphExplorerWithData = ({ graphQueryItems, fetchOptions, allAssetKeys, - filterButton, - filterBar, viewType, - kindFilter, - groupsFilter, loading: dataLoading, setHideEdgesToNodesOutsideQuery, }: WithDataProps) => { @@ -501,21 +426,9 @@ const AssetGraphExplorerWithData = ({ const [showSidebar, setShowSidebar] = React.useState(viewType === 'global'); const onFilterToGroup = (group: AssetGroup | GroupLayout) => { - if (featureEnabled(FeatureFlag.flagSelectionSyntax)) { - onChangeAssetSelection( - `group:"${group.groupName}" and code_location:"${group.repositoryLocationName}"`, - ); - } else { - groupsFilter?.setState( - new Set([ - { - groupName: group.groupName, - repositoryName: group.repositoryName, - repositoryLocationName: group.repositoryLocationName, - }, - ]), - ); - } + onChangeAssetSelection( + `group:"${group.groupName}" and code_location:"${group.repositoryLocationName}"`, + ); }; const svgViewport = layout ? ( @@ -691,7 +604,6 @@ const AssetGraphExplorerWithData = ({ @@ -788,34 +700,19 @@ const AssetGraphExplorerWithData = ({ /> )} - {featureEnabled(FeatureFlag.flagSelectionSyntax) ? null : ( -
{filterButton}
- )} - {featureEnabled(FeatureFlag.flagSelectionSyntax) ? ( - { - if (errors !== errorState) { - setErrorState(errors); - } - }} - /> - ) : ( - - )} + { + if (errors !== errorState) { + setErrorState(errors); + } + }} + /> - {featureEnabled(FeatureFlag.flagSelectionSyntax) ? ( - - ) : null} + {isIframe() ? null : ( )} - {featureEnabled(FeatureFlag.flagSelectionSyntax) ? null : filterBar} ; onChangeAssetSelection?: (selection: string) => void; } -export const AssetNode = React.memo( - ({definition, selected, kindFilter, onChangeAssetSelection}: Props) => { - const {liveData} = useAssetLiveData(definition.assetKey); - const hasChecks = (liveData?.assetChecks || []).length > 0; +export const AssetNode = React.memo(({definition, selected, onChangeAssetSelection}: Props) => { + const {liveData} = useAssetLiveData(definition.assetKey); + const hasChecks = (liveData?.assetChecks || []).length > 0; - const marginTopForCenteringNode = !hasChecks ? ASSET_NODE_STATUS_ROW_HEIGHT / 2 : 0; + const marginTopForCenteringNode = !hasChecks ? ASSET_NODE_STATUS_ROW_HEIGHT / 2 : 0; - return ( - - - - - - - - - - {definition.description ? ( - - {markdownToPlaintext(definition.description).split('\n')[0]} - - ) : ( - No description - )} - {definition.isPartitioned && definition.isMaterializable && ( - - )} - - - - {hasChecks && } - - - {definition.kinds.map((kind) => ( - - ))} + return ( + + + + + + + + + + {definition.description ? ( + + {markdownToPlaintext(definition.description).split('\n')[0]} + + ) : ( + No description + )} + {definition.isPartitioned && definition.isMaterializable && ( + + )} - - - ); - }, - isEqual, -); + + + {hasChecks && } + + + {definition.kinds.map((kind) => ( + + ))} + + + + ); +}, isEqual); export const AssetNameRow = ({definition}: {definition: AssetNodeFragment}) => { const displayName = definition.assetKey.path[definition.assetKey.path.length - 1]!; diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/useAssetGraphExplorerFilters.oss.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/useAssetGraphExplorerFilters.oss.tsx deleted file mode 100644 index b0dbe4a5e8ede..0000000000000 --- a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/useAssetGraphExplorerFilters.oss.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import {FeatureFlag} from 'shared/app/FeatureFlags.oss'; -import {AssetGraphFilterBar} from 'shared/asset-graph/AssetGraphFilterBar.oss'; -import {useAssetCatalogFiltering} from 'shared/assets/useAssetCatalogFiltering.oss'; - -import {AssetGraphViewType, GraphNode} from './Utils'; -import {featureEnabled} from '../app/Flags'; - -export type Props = { - nodes: GraphNode[]; - setAssetSelection: (selection: string) => void; - assetSelection: string; - viewType: AssetGraphViewType; - loading: boolean; -}; - -export function useAssetGraphExplorerFilters({ - nodes, - viewType, - assetSelection, - loading, - setAssetSelection, -}: Props) { - const ret = useAssetCatalogFiltering({ - assets: nodes, - includeRepos: viewType === AssetGraphViewType.GLOBAL, - loading, - enabled: !featureEnabled(FeatureFlag.flagSelectionSyntax), - }); - - return { - ...ret, - button: ret.filterButton, - filterBar: ( - - ), - }; -} diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetTable.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetTable.tsx index 0ca369fc22473..3685f56028be4 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetTable.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetTable.tsx @@ -24,7 +24,6 @@ import {QueryRefreshCountdown, RefreshState} from '../app/QueryRefresh'; import {useSelectionReducer} from '../hooks/useSelectionReducer'; import {InvalidSelectionQueryNotice} from '../pipelines/GraphNotices'; import {SyntaxError} from '../selection/CustomErrorListener'; -import {StaticSetFilter} from '../ui/BaseFilters/useStaticSetFilter'; import {VirtualizedAssetTable} from '../workspace/VirtualizedAssetTable'; type Asset = AssetTableFragment; @@ -38,12 +37,10 @@ interface Props { assets: Asset[]; refreshState: RefreshState; actionBarComponents: React.ReactNode; - belowActionBarComponents: React.ReactNode; + belowActionBarComponents?: React.ReactNode; prefixPath: string[]; displayPathForAsset: (asset: Asset) => string[]; assetSelection: string; - isFiltered: boolean; - kindFilter?: StaticSetFilter; isLoading: boolean; onChangeAssetSelection: (selection: string) => void; errorState?: SyntaxError[]; @@ -57,9 +54,7 @@ export const AssetTable = ({ prefixPath, displayPathForAsset, assetSelection, - isFiltered, view, - kindFilter, isLoading, onChangeAssetSelection, errorState, @@ -101,16 +96,9 @@ export const AssetTable = ({ icon="search" title="No matching assets" description={ - isFiltered ? ( -
- No assets matching {assetSelection} were found in the selected - filters -
- ) : ( -
- No assets matching {assetSelection} were found -
- ) +
+ No assets matching {assetSelection} were found +
} /> @@ -119,15 +107,7 @@ export const AssetTable = ({ return ( - + ); } @@ -154,7 +134,6 @@ export const AssetTable = ({ onRefresh={() => refreshState.refetch()} showRepoColumn view={view} - kindFilter={kindFilter} isLoading={isLoading} onChangeAssetSelection={onChangeAssetSelection} /> diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetsCatalogTable.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetsCatalogTable.tsx index 269207392185b..627c1573cd41b 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetsCatalogTable.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetsCatalogTable.tsx @@ -3,10 +3,7 @@ import * as React from 'react'; import {useCallback, useContext, useEffect, useLayoutEffect, useMemo, useState} from 'react'; import {useRouteMatch} from 'react-router-dom'; import {useSetRecoilState} from 'recoil'; -import {FeatureFlag} from 'shared/app/FeatureFlags.oss'; -import {AssetGraphFilterBar} from 'shared/asset-graph/AssetGraphFilterBar.oss'; import {CreateCatalogViewButton} from 'shared/assets/CreateCatalogViewButton.oss'; -import {useAssetCatalogFiltering} from 'shared/assets/useAssetCatalogFiltering.oss'; import {useFavoriteAssets} from 'shared/assets/useFavoriteAssets.oss'; import {AssetTable} from './AssetTable'; @@ -24,7 +21,6 @@ import { import {AssetViewType, useAssetView} from './useAssetView'; import {gql, useApolloClient} from '../apollo-client'; import {AppContext} from '../app/AppContext'; -import {featureEnabled} from '../app/Flags'; import {PYTHON_ERROR_FRAGMENT} from '../app/PythonErrorFragment'; import {PythonErrorInfo} from '../app/PythonErrorInfo'; import {FIFTEEN_SECONDS, useRefreshAtInterval} from '../app/QueryRefresh'; @@ -221,34 +217,21 @@ export const AssetsCatalogTable = ({ const {assets, loading: assetsLoading, query, error} = useAllAssets({groupSelector}); - const { - filteredAssets: partiallyFiltered, - filteredAssetsLoading, - isFiltered, - filterButton, - activeFiltersJsx, - kindFilter, - } = useAssetCatalogFiltering({ - assets, - loading: assetsLoading, - enabled: !featureEnabled(FeatureFlag.flagSelectionSyntax), - }); - const {favorites, loading: favoritesLoading} = useFavoriteAssets(); const penultimateAssets = useMemo(() => { if (!favorites) { - return partiallyFiltered; + return assets ?? []; } - return partiallyFiltered.filter((asset: AssetTableFragment) => + return (assets ?? []).filter((asset: AssetTableFragment) => favorites.has(tokenForAssetKey(asset.key)), ); - }, [favorites, partiallyFiltered]); + }, [favorites, assets]); const [errorState, setErrorState] = useState([]); const {filterInput, filtered, loading, assetSelection, setAssetSelection} = useAssetSelectionInput({ assets: penultimateAssets, - assetsLoading: !assets || filteredAssetsLoading || favoritesLoading, + assetsLoading: !assets || assetsLoading || favoritesLoading, onErrorStateChange: (errors) => { if (errors !== errorState) { setErrorState(errors); @@ -298,8 +281,7 @@ export const AssetsCatalogTable = ({ @@ -316,25 +298,14 @@ export const AssetsCatalogTable = ({ } }} /> - {featureEnabled(FeatureFlag.flagSelectionSyntax) ? null : filterButton} {filterInput} - {featureEnabled(FeatureFlag.flagSelectionSyntax) ? : null} + } - belowActionBarComponents={ - featureEnabled(FeatureFlag.flagSelectionSyntax) ? null : ( - - ) - } refreshState={refreshState} prefixPath={prefixPath || emptyArray} assetSelection={assetSelection} displayPathForAsset={displayPathForAsset} - kindFilter={kindFilter} onChangeAssetSelection={setAssetSelection} /> ); diff --git a/js_modules/dagster-ui/packages/ui-core/src/graph/KindTags.tsx b/js_modules/dagster-ui/packages/ui-core/src/graph/KindTags.tsx index eff0cac15fc7a..8e2900946426c 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/graph/KindTags.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/graph/KindTags.tsx @@ -1,12 +1,9 @@ import {CaptionMono, Tooltip} from '@dagster-io/ui-components'; import * as React from 'react'; -import {FeatureFlag} from 'shared/app/FeatureFlags.oss'; import {OpTags} from './OpTags'; -import {featureEnabled} from '../app/Flags'; import {DefinitionTag} from '../graphql/types'; import {linkToAssetTableWithKindFilter} from '../search/links'; -import {StaticSetFilter} from '../ui/BaseFilters/useStaticSetFilter'; export const LEGACY_COMPUTE_KIND_TAG = 'kind'; export const COMPUTE_KIND_TAG = 'dagster/compute_kind'; @@ -30,7 +27,6 @@ export const AssetKind = ({ kind, style, linkToFilteredAssetsTable: shouldLink, - currentPageFilter, onChangeAssetSelection, ...rest }: { @@ -40,13 +36,12 @@ export const AssetKind = ({ reduceText?: boolean; reversed?: boolean; linkToFilteredAssetsTable?: boolean; - currentPageFilter?: StaticSetFilter; onChangeAssetSelection?: (selection: string) => void; }) => { return ( Filter to {kind} assets @@ -63,25 +58,20 @@ export const AssetKind = ({ placement="bottom" > { + onChangeAssetSelection?.(`kind:"${kind}"`); + } + : shouldLink ? () => { - if (featureEnabled(FeatureFlag.flagSelectionSyntax) && onChangeAssetSelection) { - onChangeAssetSelection?.(`kind:"${kind}"`); - } else if (currentPageFilter) { - currentPageFilter.setState(new Set([kind, ...currentPageFilter.state])); - } + window.location.href = linkToAssetTableWithKindFilter(kind); } - : shouldLink - ? () => { - window.location.href = linkToAssetTableWithKindFilter(kind); - } - : () => {}, + : () => {}, }, ]} /> diff --git a/js_modules/dagster-ui/packages/ui-core/src/ui/GraphQueryInput.tsx b/js_modules/dagster-ui/packages/ui-core/src/ui/GraphQueryInput.tsx index a5178974be387..005d986cb1f60 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/ui/GraphQueryInput.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/ui/GraphQueryInput.tsx @@ -21,10 +21,8 @@ import isEqual from 'lodash/isEqual'; import uniq from 'lodash/uniq'; import * as React from 'react'; import {Link} from 'react-router-dom'; -import {FeatureFlag} from 'shared/app/FeatureFlags.oss'; import styled from 'styled-components'; -import {featureEnabled} from '../app/Flags'; import {GraphQueryItem, filterByQuery} from '../app/GraphQueryImpl'; import {dynamicKeyWithoutIndex, isDynamicStep} from '../gantt/DynamicStepSupport'; import {GraphExplorerSolidFragment} from '../pipelines/types/GraphExplorer.types'; @@ -107,23 +105,14 @@ export const placeholderTextForItems = (base: string, items: GraphQueryItem[]) = }; function key(name: string) { - if (featureEnabled(FeatureFlag.flagSelectionSyntax)) { - return `name:"${name}"`; - } - return name; + return `name:"${name}"`; } function traversal(direction: 'up' | 'down', levels?: number) { - if (featureEnabled(FeatureFlag.flagSelectionSyntax)) { - if (levels === undefined) { - return '+'; - } - return direction === 'up' ? `+${levels}` : `${levels}+`; - } if (levels === undefined) { - return '*'; + return '+'; } - return '+'.repeat(levels); + return direction === 'up' ? `+${levels}` : `${levels}+`; } const intentToStrokeColor = (intent: Intent | undefined) => { diff --git a/js_modules/dagster-ui/packages/ui-core/src/workspace/VirtualizedAssetRow.tsx b/js_modules/dagster-ui/packages/ui-core/src/workspace/VirtualizedAssetRow.tsx index 8dc08f1390fc2..7afe03ca461e0 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/workspace/VirtualizedAssetRow.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/workspace/VirtualizedAssetRow.tsx @@ -120,7 +120,6 @@ export const VirtualizedAssetRow = (props: AssetRowProps) => { reduceText kind={kind} style={{position: 'relative'}} - currentPageFilter={kindFilter} onChangeAssetSelection={onChangeAssetSelection} /> ))} diff --git a/js_modules/dagster-ui/packages/ui-core/src/workspace/workspacePath.ts b/js_modules/dagster-ui/packages/ui-core/src/workspace/workspacePath.ts index e3c1911c5b384..6e4ad34c8aa4e 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/workspace/workspacePath.ts +++ b/js_modules/dagster-ui/packages/ui-core/src/workspace/workspacePath.ts @@ -1,10 +1,8 @@ import {IconName} from '@dagster-io/ui-components'; -import {FeatureFlag} from 'shared/app/FeatureFlags.oss'; import {NO_LAUNCH_PERMISSION_MESSAGE} from 'shared/launchpad/LaunchRootExecutionButton.oss'; import {buildRepoPathForURL} from './buildRepoAddress'; import {RepoAddress} from './types'; -import {featureEnabled} from '../app/Flags'; import {isHiddenAssetGroupJob, tokenForAssetKey} from '../asset-graph/Utils'; import {globalAssetGraphPathToString} from '../assets/globalAssetGraphPathToString'; import {Run} from '../graphql/types'; @@ -67,14 +65,9 @@ export const workspacePipelineLinkForRun = ({ isJob, }: RunDetails) => { if (isHiddenAssetGroupJob(run.pipelineName)) { - let opsQuery; - if (featureEnabled(FeatureFlag.flagSelectionSyntax)) { - opsQuery = (run.assetSelection || []) - .map((key) => `key:"${tokenForAssetKey(key)}"`) - .join(' or '); - } else { - opsQuery = (run.assetSelection || []).map(tokenForAssetKey).join(', '); - } + const opsQuery = (run.assetSelection || []) + .map((key) => `key:"${tokenForAssetKey(key)}"`) + .join(' or '); return { disabledReason: null, From 730e4cfc1676fbbadeec9729f0c5ade270c08bf0 Mon Sep 17 00:00:00 2001 From: Marco Salazar Date: Mon, 14 Apr 2025 13:58:43 -0400 Subject: [PATCH 02/10] . --- .../packages/ui-core/src/workspace/VirtualizedAssetRow.tsx | 3 --- .../packages/ui-core/src/workspace/VirtualizedAssetTable.tsx | 4 ---- 2 files changed, 7 deletions(-) diff --git a/js_modules/dagster-ui/packages/ui-core/src/workspace/VirtualizedAssetRow.tsx b/js_modules/dagster-ui/packages/ui-core/src/workspace/VirtualizedAssetRow.tsx index 7afe03ca461e0..562e05548a4e5 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/workspace/VirtualizedAssetRow.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/workspace/VirtualizedAssetRow.tsx @@ -27,7 +27,6 @@ import {AssetKeyInput} from '../graphql/types'; import {RepositoryLink} from '../nav/RepositoryLink'; import {TimestampDisplay} from '../schedules/TimestampDisplay'; import {testId} from '../testing/testId'; -import {StaticSetFilter} from '../ui/BaseFilters/useStaticSetFilter'; import {HeaderCell, HeaderRow, Row, RowCell} from '../ui/VirtualizedTable'; const TEMPLATE_COLUMNS = '1.3fr 1fr 80px'; @@ -47,7 +46,6 @@ interface AssetRowProps { height: number; start: number; onRefresh: () => void; - kindFilter?: StaticSetFilter; onChangeAssetSelection?: (selection: string) => void; } @@ -65,7 +63,6 @@ export const VirtualizedAssetRow = (props: AssetRowProps) => { showCheckboxColumn = false, showRepoColumn, view = 'flat', - kindFilter, onChangeAssetSelection, } = props; diff --git a/js_modules/dagster-ui/packages/ui-core/src/workspace/VirtualizedAssetTable.tsx b/js_modules/dagster-ui/packages/ui-core/src/workspace/VirtualizedAssetTable.tsx index b742363a70ab4..45f9b7be8da09 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/workspace/VirtualizedAssetTable.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/workspace/VirtualizedAssetTable.tsx @@ -9,7 +9,6 @@ import { import {buildRepoAddress} from './buildRepoAddress'; import {AssetTableFragment} from '../assets/types/AssetTableFragment.types'; import {AssetViewType} from '../assets/useAssetView'; -import {StaticSetFilter} from '../ui/BaseFilters/useStaticSetFilter'; import {IndeterminateLoadingBar} from '../ui/IndeterminateLoadingBar'; import {Container, Inner} from '../ui/VirtualizedTable'; @@ -27,7 +26,6 @@ interface Props { onRefresh: () => void; showRepoColumn: boolean; view?: AssetViewType; - kindFilter?: StaticSetFilter; isLoading?: boolean; onChangeAssetSelection?: (selection: string) => void; } @@ -42,7 +40,6 @@ export const VirtualizedAssetTable = (props: Props) => { onRefresh, showRepoColumn, view = 'flat', - kindFilter, isLoading, onChangeAssetSelection, } = props; @@ -120,7 +117,6 @@ export const VirtualizedAssetTable = (props: Props) => { checked={checkedDisplayKeys.has(row.displayKey)} onToggleChecked={onToggleFactory(row.displayKey)} onRefresh={onRefresh} - kindFilter={kindFilter} onChangeAssetSelection={onChangeAssetSelection} /> ); From 5e7949c07ee73db224e0779e8757cf3f2a6967e7 Mon Sep 17 00:00:00 2001 From: Marco Salazar Date: Mon, 14 Apr 2025 17:09:11 -0400 Subject: [PATCH 03/10] add insights tab --- .../ui-components/src/components/Icon.tsx | 4 + .../src/icon-svgs/collapse_fullscreen.svg | 5 + .../src/icon-svgs/expand_fullscreen.svg | 5 + .../ui-core/src/app/AppTopNav/AppTopNav.tsx | 9 + .../src/app/AppTopNav/AppTopNavContext.tsx | 6 + .../src/asset-graph/AssetGraphExplorer.tsx | 53 +++-- .../ui-core/src/asset-graph/Utils.tsx | 1 + .../src/assets/AssetCatalogLineage.tsx | 79 +++++++ .../src/assets/AssetCatalogTableV2.tsx | 210 +++++++++++------- .../ui-core/src/assets/AssetsCatalog.tsx | 12 +- 10 files changed, 280 insertions(+), 104 deletions(-) create mode 100644 js_modules/dagster-ui/packages/ui-components/src/icon-svgs/collapse_fullscreen.svg create mode 100644 js_modules/dagster-ui/packages/ui-components/src/icon-svgs/expand_fullscreen.svg create mode 100644 js_modules/dagster-ui/packages/ui-core/src/app/AppTopNav/AppTopNavContext.tsx create mode 100644 js_modules/dagster-ui/packages/ui-core/src/assets/AssetCatalogLineage.tsx diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/Icon.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/Icon.tsx index e53c65fe3254a..eb281ed39bc46 100644 --- a/js_modules/dagster-ui/packages/ui-components/src/components/Icon.tsx +++ b/js_modules/dagster-ui/packages/ui-components/src/components/Icon.tsx @@ -73,6 +73,7 @@ import code_location from '../icon-svgs/code_location.svg'; import code_location_reload from '../icon-svgs/code_location_reload.svg'; import collapse from '../icon-svgs/collapse.svg'; import collapse_arrows from '../icon-svgs/collapse_arrows.svg'; +import collapse_fullscreen from '../icon-svgs/collapse_fullscreen.svg'; import column_lineage from '../icon-svgs/column_lineage.svg'; import column_schema from '../icon-svgs/column_schema.svg'; import compute_kind from '../icon-svgs/compute_kind.svg'; @@ -143,6 +144,7 @@ import execute from '../icon-svgs/execute.svg'; import executing from '../icon-svgs/executing.svg'; import expand from '../icon-svgs/expand.svg'; import expand_arrows from '../icon-svgs/expand_arrows.svg'; +import expand_fullscreen from '../icon-svgs/expand_fullscreen.svg'; import expand_less from '../icon-svgs/expand_less.svg'; import expand_more from '../icon-svgs/expand_more.svg'; import expectation from '../icon-svgs/expectation.svg'; @@ -488,6 +490,7 @@ export const Icons = { code_location, code_location_reload, collapse, + collapse_fullscreen, collapse_arrows, column_lineage, column_schema, @@ -559,6 +562,7 @@ export const Icons = { executing, expand, expand_arrows, + expand_fullscreen, expand_less, expand_more, expectation, diff --git a/js_modules/dagster-ui/packages/ui-components/src/icon-svgs/collapse_fullscreen.svg b/js_modules/dagster-ui/packages/ui-components/src/icon-svgs/collapse_fullscreen.svg new file mode 100644 index 0000000000000..5618859605d27 --- /dev/null +++ b/js_modules/dagster-ui/packages/ui-components/src/icon-svgs/collapse_fullscreen.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/js_modules/dagster-ui/packages/ui-components/src/icon-svgs/expand_fullscreen.svg b/js_modules/dagster-ui/packages/ui-components/src/icon-svgs/expand_fullscreen.svg new file mode 100644 index 0000000000000..ae7b0dbfe9d1d --- /dev/null +++ b/js_modules/dagster-ui/packages/ui-components/src/icon-svgs/expand_fullscreen.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/AppTopNav/AppTopNav.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/AppTopNav/AppTopNav.tsx index 3afbb7c18e65e..3039841d689fd 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/app/AppTopNav/AppTopNav.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/app/AppTopNav/AppTopNav.tsx @@ -1,6 +1,7 @@ import {Box, Colors, Icon, IconWrapper} from '@dagster-io/ui-components'; import * as React from 'react'; import {NavLink} from 'react-router-dom'; +import {useRecoilValue} from 'recoil'; import {AppTopNavRightOfLogo} from 'shared/app/AppTopNav/AppTopNavRightOfLogo.oss'; import styled from 'styled-components'; @@ -14,6 +15,7 @@ import { import {SearchDialog} from '../../search/SearchDialog'; import {LayoutContext} from '../LayoutProvider'; import {ShortcutHandler} from '../ShortcutHandler'; +import {isFullScreenAtom} from './AppTopNavContext'; interface Props { children?: React.ReactNode; @@ -22,6 +24,13 @@ interface Props { } export const AppTopNav = ({children, allowGlobalReload = false}: Props) => { + const isFullScreen = useRecoilValue(isFullScreenAtom); + return isFullScreen ? null : ( + {children} + ); +}; + +const AppTopNavImpl = ({children, allowGlobalReload = false}: Props) => { const {flagMarketplace} = useFeatureFlags(); const {reloading, tryReload} = useRepositoryLocationReload({ scope: 'workspace', diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/AppTopNav/AppTopNavContext.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/AppTopNav/AppTopNavContext.tsx new file mode 100644 index 0000000000000..e19b257974b1b --- /dev/null +++ b/js_modules/dagster-ui/packages/ui-core/src/app/AppTopNav/AppTopNavContext.tsx @@ -0,0 +1,6 @@ +import {atom} from 'recoil'; + +export const isFullScreenAtom = atom({ + key: 'isFullScreenAtom', + default: false, +}); diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorer.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorer.tsx index a394af768e225..e996c71870060 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorer.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorer.tsx @@ -93,6 +93,9 @@ type Props = { ) => void; viewType: AssetGraphViewType; setHideEdgesToNodesOutsideQuery?: (hideEdgesToNodesOutsideQuery: boolean) => void; + + isFullScreen?: boolean; + toggleFullScreen?: () => void; }; export const MINIMAL_SCALE = 0.6; @@ -161,6 +164,8 @@ const AssetGraphExplorerWithData = ({ options, setOptions, explorerPath, + isFullScreen, + toggleFullScreen, onChangeExplorerPath, onNavigateToSourceAssetNode: onNavigateToSourceAssetNode, assetGraphData, @@ -700,20 +705,40 @@ const AssetGraphExplorerWithData = ({ /> )} - - { - if (errors !== errorState) { - setErrorState(errors); - } - }} - /> - - - + {viewType === AssetGraphViewType.CATALOG ? ( + <> + {toggleFullScreen ? ( + +