[pac] UI refactor

js_modules/dagster-ui/packages/ui-core/src/assets/AssetPartitionList.tsx

@@ -1,139 +1,38 @@
-import {Box, Colors, MiddleTruncate} from '@dagster-io/ui-components';
-import {useVirtualizer} from '@tanstack/react-virtual';
-import {useEffect, useRef} from 'react';
-
-import {AssetListContainer, AssetListRow} from './AssetEventList';
 import {AssetPartitionStatus, assetPartitionStatusesToStyle} from './AssetPartitionStatus';
-import {Inner} from '../ui/VirtualizedTable';
+import {PartitionListSelector, PartitionStatusDot} from './PartitionListSelector';
 
 export interface AssetPartitionListProps {
   partitions: string[];
   statusForPartition: (dimensionKey: string) => AssetPartitionStatus[];
   focusedDimensionKey?: string;
   setFocusedDimensionKey?: (dimensionKey: string | undefined) => void;
 }
+
+const STATUS_ORDER: AssetPartitionStatus[] = [
+  AssetPartitionStatus.MISSING,
+  AssetPartitionStatus.FAILED,
+  AssetPartitionStatus.MATERIALIZING,
+  AssetPartitionStatus.MATERIALIZED,
+];
+
 export const AssetPartitionList = ({
   focusedDimensionKey,
   setFocusedDimensionKey,
   statusForPartition,
   partitions,
 }: AssetPartitionListProps) => {
-  const parentRef = useRef<HTMLDivElement | null>(null);
-
-  const rowVirtualizer = useVirtualizer({
-    count: partitions.length,
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    getItemKey: (idx) => partitions[idx]!,
-    getScrollElement: () => parentRef.current,
-    estimateSize: () => 36,
-    overscan: 10,
-  });
-  const totalHeight = rowVirtualizer.getTotalSize();
-  const items = rowVirtualizer.getVirtualItems();
-
-  useEffect(() => {
-    if (focusedDimensionKey && partitions.indexOf(focusedDimensionKey) !== -1) {
-      rowVirtualizer.scrollToIndex(partitions.indexOf(focusedDimensionKey), {
-        behavior: 'auto',
-        align: 'auto',
-      });
-    }
-  }, [focusedDimensionKey, rowVirtualizer, partitions]);
-
   return (
-    <AssetListContainer
-      ref={parentRef}
-      tabIndex={-1}
-      onKeyDown={(e) => {
-        const shift = {ArrowDown: 1, ArrowUp: -1}[e.key];
-        if (!setFocusedDimensionKey || !shift || !focusedDimensionKey || e.isDefaultPrevented()) {
-          return;
-        }
-        const nextIdx = partitions.indexOf(focusedDimensionKey) + shift;
-        const next = partitions[nextIdx];
-        if (next) {
-          e.preventDefault();
-          setFocusedDimensionKey(next);
-        }
-      }}
-    >
-      <Inner $totalHeight={totalHeight}>
-        {items.map(({index, key, size, start}) => {
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          const dimensionKey = partitions[index]!;
-          const state = statusForPartition(dimensionKey);
-          return (
-            <AssetListRow
-              key={key}
-              $height={size}
-              $start={start}
-              $focused={dimensionKey === focusedDimensionKey}
-              onClick={(e) => {
-                // If you're interacting with something in the row, don't trigger a focus change.
-                // Since focus is stored in the URL bar this overwrites any link click navigation.
-                // We could alternatively e.preventDefault() on every link but it's easy to forget.
-                if (e.target instanceof HTMLElement && e.target.closest('a')) {
-                  return;
-                }
-                setFocusedDimensionKey?.(
-                  focusedDimensionKey !== dimensionKey ? dimensionKey : undefined,
-                );
-              }}
-            >
-              <Box
-                style={{height: size}}
-                padding={{left: 24, right: 12}}
-                flex={{direction: 'column', justifyContent: 'center', gap: 8}}
-                border="bottom"
-              >
-                <Box flex={{gap: 4, direction: 'row', alignItems: 'center'}}>
-                  <div
-                    style={{flex: 1, minWidth: 0}}
-                    data-tooltip={dimensionKey}
-                    data-tooltip-style={PartitionTooltipStyle}
-                  >
-                    <MiddleTruncate text={dimensionKey} />
-                  </div>
-                  {/* Note: we could just state.map, but we want these in a particular order*/}
-                  {state.includes(AssetPartitionStatus.MISSING) && (
-                    <AssetPartitionStatusDot status={[AssetPartitionStatus.MISSING]} />
-                  )}
-                  {state.includes(AssetPartitionStatus.FAILED) && (
-                    <AssetPartitionStatusDot status={[AssetPartitionStatus.FAILED]} />
-                  )}
-                  {state.includes(AssetPartitionStatus.MATERIALIZING) && (
-                    <AssetPartitionStatusDot status={[AssetPartitionStatus.MATERIALIZING]} />
-                  )}
-                  {state.includes(AssetPartitionStatus.MATERIALIZED) && (
-                    <AssetPartitionStatusDot status={[AssetPartitionStatus.MATERIALIZED]} />
-                  )}
-                </Box>
-              </Box>
-            </AssetListRow>
-          );
-        })}
-      </Inner>
-    </AssetListContainer>
+    <PartitionListSelector
+      partitions={partitions}
+      statusForPartition={statusForPartition}
+      focusedDimensionKey={focusedDimensionKey}
+      setFocusedDimensionKey={setFocusedDimensionKey}
+      statusesToStyle={assetPartitionStatusesToStyle}
+      statusOrder={STATUS_ORDER}
+    />
   );
 };
 
 export const AssetPartitionStatusDot = ({status}: {status: AssetPartitionStatus[]}) => (
-  <div
-    style={{
-      width: 10,
-      height: 10,
-      borderRadius: '100%',
-      flexShrink: 0,
-      ...assetPartitionStatusesToStyle(status),
-    }}
-  />
+  <PartitionStatusDot status={status} statusesToStyle={assetPartitionStatusesToStyle} />
 );
-
-const PartitionTooltipStyle = JSON.stringify({
-  background: Colors.backgroundLight(),
-  border: `1px solid ${Colors.borderDefault()}`,
-  color: Colors.textDefault(),
-  fontSize: '14px',
-  top: 0,
-  left: 0,
-});

js_modules/dagster-ui/packages/ui-core/src/assets/AssetPartitionStatusCheckboxes.tsx

@@ -1,7 +1,5 @@
-import {Box, Checkbox} from '@dagster-io/ui-components';
-
 import {AssetPartitionStatus, assetPartitionStatusToText} from './AssetPartitionStatus';
-import {testId} from '../testing/testId';
+import {PartitionStatusCheckboxes} from './PartitionStatusCheckboxes';
 
 export const AssetPartitionStatusCheckboxes = ({
   counts,
@@ -17,22 +15,13 @@ export const AssetPartitionStatusCheckboxes = ({
   disabled?: boolean;
 }) => {
   return (
-    <Box flex={{direction: 'row', alignItems: 'center', gap: 12}} style={{overflow: 'hidden'}}>
-      {allowed.map((status) => (
-        <Checkbox
-          key={status}
-          data-testid={testId(`partition-status-${status}-checkbox`)}
-          disabled={disabled}
-          style={{marginBottom: 0, marginLeft: 10, minWidth: 200}}
-          checked={value.includes(status) && !disabled}
-          label={`${assetPartitionStatusToText(status)} (${counts[status]})`}
-          onChange={() =>
-            onChange(
-              value.includes(status) ? value.filter((v) => v !== status) : [...value, status],
-            )
-          }
-        />
-      ))}
-    </Box>
+    <PartitionStatusCheckboxes
+      counts={counts}
+      value={value}
+      onChange={onChange}
+      allowed={allowed}
+      statusToText={assetPartitionStatusToText}
+      disabled={disabled}
+    />
   );
 };