From 671f26cdb01732f0fb85502c42478eecfbaa36c3 Mon Sep 17 00:00:00 2001 From: bengotow Date: Wed, 24 Jul 2024 09:26:49 -0500 Subject: [PATCH] Add missing variables to AssetCatalogTable.requery [DAGSTER_BRANCH=bengotow-2024-07/partition-wipe] --- .../src/components/TagSelector.tsx | 3 + .../ui-core/src/assets/AssetsCatalogTable.tsx | 8 ++- .../assets/VirtualizedSimpleAssetKeyList.tsx | 5 +- .../src/assets/__tests__/AssetTables.test.tsx | 2 + ...Dialog.types.ts => useWipeAssets.types.ts} | 0 .../ui-core/src/assets/useWipeAssets.tsx | 2 +- .../OrdinalOrSingleRangePartitionSelector.tsx | 70 +++++++++++++------ 7 files changed, 65 insertions(+), 25 deletions(-) rename js_modules/dagster-ui/packages/ui-core/src/assets/types/{AssetWipeDialog.types.ts => useWipeAssets.types.ts} (100%) diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/TagSelector.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/TagSelector.tsx index 3f17ff9f7f025..1db7e8fb4e31f 100644 --- a/js_modules/dagster-ui/packages/ui-components/src/components/TagSelector.tsx +++ b/js_modules/dagster-ui/packages/ui-components/src/components/TagSelector.tsx @@ -234,6 +234,9 @@ export const TagSelectorContainer = styled.div` align-items: center; ${TextInputStyles} + + min-height: 32px; + padding: 4px 8px; `; const Placeholder = styled.div` 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 ff6875a1afeb1..316b14f25a9a6 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 @@ -62,7 +62,13 @@ export function useCachedAssets({ return {cacheManager}; } -const requery = () => [{query: ASSET_CATALOG_TABLE_QUERY, fetchPolicy: 'no-cache' as const}]; +const requery = () => [ + { + query: ASSET_CATALOG_TABLE_QUERY, + variables: {limit: DEFAULT_BATCH_LIMIT}, + fetchPolicy: 'no-cache' as const, + }, +]; export function useAllAssets({ batchLimit = DEFAULT_BATCH_LIMIT, diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/VirtualizedSimpleAssetKeyList.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/VirtualizedSimpleAssetKeyList.tsx index 16d08572a76c9..d77a5014098ab 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/VirtualizedSimpleAssetKeyList.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/VirtualizedSimpleAssetKeyList.tsx @@ -6,6 +6,7 @@ import {CSSProperties, useRef} from 'react'; import {displayNameForAssetKey} from '../asset-graph/Utils'; import {AssetKeyInput} from '../graphql/types'; import {Inner, Row} from '../ui/VirtualizedTable'; +import {CaptionMono, Mono} from '@dagster-io/ui-components'; export const VirtualizedSimpleAssetKeyList = ({ assetKeys, @@ -18,7 +19,7 @@ export const VirtualizedSimpleAssetKeyList = ({ const rowVirtualizer = useVirtualizer({ count: assetKeys.length, getScrollElement: () => parentRef.current, - estimateSize: () => 24, + estimateSize: () => 18, overscan: 10, }); @@ -32,7 +33,7 @@ export const VirtualizedSimpleAssetKeyList = ({ const assetKey = assetKeys[index]!; return ( - {displayNameForAssetKey(assetKey)} + {displayNameForAssetKey(assetKey)} ); })} diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/__tests__/AssetTables.test.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/__tests__/AssetTables.test.tsx index 7a8a0c2e10010..916a7928a027e 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/__tests__/AssetTables.test.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/__tests__/AssetTables.test.tsx @@ -12,6 +12,7 @@ import {mockViewportClientRect, restoreViewportClientRect} from '../../testing/m import {WorkspaceProvider} from '../../workspace/WorkspaceContext'; import {buildWorkspaceMocks} from '../../workspace/__fixtures__/Workspace.fixtures'; import {AssetPageHeader} from '../AssetPageHeader.oss'; +import {AssetWipeDialog} from '../AssetWipeDialog.oss'; import {AssetsCatalogTable} from '../AssetsCatalogTable'; import {AssetsGraphHeader} from '../AssetsGraphHeader.oss'; import AssetsOverviewRoot from '../AssetsOverviewRoot.oss'; @@ -60,6 +61,7 @@ describe('AssetTable', () => { value={{ components: { AssetPageHeader, + AssetWipeDialog, AppTopNavRightOfLogo, UserPreferences, AssetsOverview: AssetsOverviewRoot, diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/types/AssetWipeDialog.types.ts b/js_modules/dagster-ui/packages/ui-core/src/assets/types/useWipeAssets.types.ts similarity index 100% rename from js_modules/dagster-ui/packages/ui-core/src/assets/types/AssetWipeDialog.types.ts rename to js_modules/dagster-ui/packages/ui-core/src/assets/types/useWipeAssets.types.ts diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/useWipeAssets.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/useWipeAssets.tsx index 0c023f8018cfa..199f171c4cdda 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/useWipeAssets.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/useWipeAssets.tsx @@ -1,7 +1,7 @@ import {RefetchQueriesFunction, gql, useMutation} from '@apollo/client'; import {useLayoutEffect, useRef, useState} from 'react'; -import {AssetWipeMutation, AssetWipeMutationVariables} from './types/AssetWipeDialog.types'; +import {AssetWipeMutation, AssetWipeMutationVariables} from './types/useWipeAssets.types'; import {showCustomAlert} from '../app/CustomAlertProvider'; import {PYTHON_ERROR_FRAGMENT} from '../app/PythonErrorFragment'; import {PartitionsByAssetSelector} from '../graphql/types'; diff --git a/js_modules/dagster-ui/packages/ui-core/src/partitions/OrdinalOrSingleRangePartitionSelector.tsx b/js_modules/dagster-ui/packages/ui-core/src/partitions/OrdinalOrSingleRangePartitionSelector.tsx index 9d84b71d6eb2f..be5a60af7ed74 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/partitions/OrdinalOrSingleRangePartitionSelector.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/partitions/OrdinalOrSingleRangePartitionSelector.tsx @@ -8,9 +8,26 @@ import { PartitionDimensionSelection, PartitionHealthDimension, } from '../assets/usePartitionHealthData'; +import {PartitionDefinitionType} from '../graphql/types'; const NONE = {key: '', idx: -1}; +export function isPartitionDimensionSelectionValid(s: PartitionDimensionSelection) { + return ( + s.selectedKeys.length > 0 || + (s.selectedRanges.length === 1 && + s.selectedRanges[0]?.start.key && + s.selectedRanges[0]?.end.key) + ); +} + +/** + * This component allows the selection of a single range or list of keys in the dimension. + * The `selection` can be null (all keys), a valid PartitionDimensionSelection, or an + * or an invalid (incomplete) PartitionDimensionSelection. + * + * This component does not yet support creating new partitions of dynamic dimensions. + */ export const OrdinalOrSingleRangePartitionSelector = ({ dimension, selection, @@ -19,35 +36,40 @@ export const OrdinalOrSingleRangePartitionSelector = ({ }: { dimension: PartitionHealthDimension; selection?: PartitionDimensionSelection; - setSelection: (selected: PartitionDimensionSelection) => void; + setSelection: (selected: PartitionDimensionSelection | null) => void; health: PartitionStatusHealthSource; }) => { - const [mode, setMode] = useState<'ordinal' | 'range'>('ordinal'); + const [mode, setMode] = useState<'all' | 'ordinal' | 'range'>('all'); const keys = selection?.selectedKeys || []; const range = selection?.selectedRanges[0] || {start: NONE, end: NONE}; + const rangeAllowed = dimension.type === PartitionDefinitionType.TIME_WINDOW; + const partitionKeys = dimension.partitionKeys; return ( { - setSelection({dimension, selectedKeys: [], selectedRanges: []}); + setSelection(id === 'all' ? null : {dimension, selectedKeys: [], selectedRanges: []}); setMode(id); }} /> - {mode === 'ordinal' ? ( + {mode === 'ordinal' || (mode === 'all' && !rangeAllowed) ? ( - setSelection({dimension, selectedKeys, selectedRanges: []}) - } + setSelectedPartitions={(selectedKeys) => { + setSelection({dimension, selectedKeys, selectedRanges: []}); + setMode('ordinal'); + }} /> ) : ( + setSelectedPartitions={([selectedKey]) => { + setMode('range'); setSelection({ dimension, selectedKeys: [], selectedRanges: [ { start: selectedKey - ? {key: selectedKey, idx: dimension.partitionKeys.indexOf(selectedKey)} + ? {key: selectedKey, idx: partitionKeys.indexOf(selectedKey)} : NONE, end: range.end, }, ], - }) - } + }); + }} /> + setSelectedPartitions={([selectedKey]) => { + setMode('range'); setSelection({ dimension, selectedKeys: [], @@ -96,12 +124,12 @@ export const OrdinalOrSingleRangePartitionSelector = ({ { start: range.start, end: selectedKey - ? {key: selectedKey, idx: dimension.partitionKeys.indexOf(selectedKey)} + ? {key: selectedKey, idx: partitionKeys.indexOf(selectedKey)} : NONE, }, ], - }) - } + }); + }} /> )}