[ui] Support manual node and group positioning in the Asset Graph

.gitignore

@@ -193,3 +193,4 @@ exponent.txt
 .erk/scratch/
 .impl/
 .erk/config.local.toml
+.superpowers/

js_modules/ui-core/src/app/Route.tsx

@@ -1,4 +1,5 @@
 import {ComponentProps, ReactNode, memo, useLayoutEffect, useMemo} from 'react';
+// eslint-disable-next-line dagster-rules/no-react-router-route
 import {Route as ReactRouterRoute, useRouteMatch} from 'react-router-dom';
 import {useSetRecoilState} from 'recoil';
 

js_modules/ui-core/src/asset-graph/AssetNode.tsx

@@ -15,6 +15,7 @@ import {AssetNodeHealthRow} from './AssetNodeHealthRow';
 import {AssetNodeMenuProps, useAssetNodeMenu} from './AssetNodeMenu';
 import {assetNodeLatestEventContent, buildAssetNodeStatusContent} from './AssetNodeStatusContent';
 import {ContextMenuWrapper} from './ContextMenuWrapper';
+import {ManualPositionHandle} from './ManualPositionHandle';
 import {LiveDataForNode, LiveDataForNodeWithStaleData} from './Utils';
 import {withMiddleTruncation} from '../app/Util';
 import {useAssetAutomationData} from '../asset-data/AssetAutomationDataProvider';
@@ -40,6 +41,10 @@ interface Props2025 {
   selected: boolean;
   facets: Set<AssetNodeFacet>;
   onChangeAssetSelection?: (selection: string) => void;
+  isManuallyPositioned?: boolean;
+  isDragging?: boolean;
+  onDragStart?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  onResetPosition?: () => void;
 }
 
 export const ASSET_NODE_HOVER_EXPAND_HEIGHT = 3;
@@ -60,6 +65,10 @@ export const AssetNodeWithLiveData = ({
   selected,
   facets,
   onChangeAssetSelection,
+  isManuallyPositioned,
+  isDragging,
+  onDragStart,
+  onResetPosition,
   liveData,
   automationData,
   assetHealthEnabled,
@@ -68,7 +77,7 @@ export const AssetNodeWithLiveData = ({
   assetHealthEnabled: boolean;
 }) => {
   return (
-    <AssetNodeContainer $selected={selected}>
+    <AssetNodeContainer $selected={selected} style={{position: 'relative'}}>
       {facets.has(AssetNodeFacet.UnsyncedTag) ? (
         <Box
           flex={{direction: 'row', justifyContent: 'space-between', alignItems: 'center'}}
@@ -86,7 +95,13 @@ export const AssetNodeWithLiveData = ({
         <div style={{minHeight: ASSET_NODE_HOVER_EXPAND_HEIGHT}} />
       )}
       <AssetNodeBox $selected={selected} $isMaterializable={definition.isMaterializable}>
-        <AssetNameRow definition={definition} />
+        <AssetNameRow
+          definition={definition}
+          isDragging={!!isDragging}
+          isManuallyPositioned={!!isManuallyPositioned}
+          onDragStart={onDragStart}
+          onResetPosition={onResetPosition}
+        />
         {facets.has(AssetNodeFacet.Description) && (
           <AssetNodeRow label={null}>
             {definition.description ? (
@@ -434,7 +449,19 @@ export const AutomationConditionEvaluationLink = ({
   );
 };
 
-export const AssetNameRow = ({definition}: {definition: AssetNodeFragment}) => {
+export const AssetNameRow = ({
+  definition,
+  isDragging = false,
+  isManuallyPositioned = false,
+  onDragStart,
+  onResetPosition,
+}: {
+  definition: AssetNodeFragment;
+  isDragging?: boolean;
+  isManuallyPositioned?: boolean;
+  onDragStart?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  onResetPosition?: () => void;
+}) => {
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const displayName = definition.assetKey.path[definition.assetKey.path.length - 1]!;
 
@@ -453,6 +480,14 @@ export const AssetNameRow = ({definition}: {definition: AssetNodeFragment}) => {
         })}
       </div>
       <div style={{flex: 1}} />
+      {onDragStart ? (
+        <ManualPositionHandle
+          isDragging={isDragging}
+          isManuallyPositioned={isManuallyPositioned}
+          onDragStart={onDragStart}
+          onReset={onResetPosition}
+        />
+      ) : null}
     </AssetName>
   );
 };
@@ -490,6 +525,10 @@ type AssetNodeMinimalProps = {
   definition: AssetNodeFragment;
   facets: Set<AssetNodeFacet> | null;
   height: number;
+  isManuallyPositioned?: boolean;
+  isDragging?: boolean;
+  onDragStart?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  onResetPosition?: () => void;
 };
 
 export const AssetNodeMinimal = (props: AssetNodeMinimalProps) => {
@@ -505,6 +544,10 @@ export const AssetNodeMinimalWithHealth = ({
   facets,
   height,
   selected,
+  isManuallyPositioned,
+  isDragging,
+  onDragStart,
+  onResetPosition,
 }: AssetNodeMinimalProps) => {
   const {isMaterializable, assetKey} = definition;
   const {liveData} = useAssetLiveData(assetKey);
@@ -549,7 +592,7 @@ export const AssetNodeMinimalWithHealth = ({
   }
 
   return (
-    <MinimalAssetNodeContainer $selected={selected} style={{paddingTop}}>
+    <MinimalAssetNodeContainer $selected={selected} style={{paddingTop, position: 'relative'}}>
       <Tooltip content={displayName} canShow={displayName.length > 14} position="top">
         <MinimalAssetNodeBox
           $selected={selected}
@@ -560,6 +603,15 @@ export const AssetNodeMinimalWithHealth = ({
           $isQueued={!!queuedRuns}
           $height={nodeHeight}
         >
+          {onDragStart ? (
+            <ManualPositionHandle
+              placement="edge"
+              isDragging={!!isDragging}
+              isManuallyPositioned={!!isManuallyPositioned}
+              onDragStart={onDragStart}
+              onReset={onResetPosition}
+            />
+          ) : null}
           {isChanged ? (
             <MinimalNodeChangedDot changedReasons={definition.changedReasons} assetKey={assetKey} />
           ) : null}
@@ -578,6 +630,10 @@ export const AssetNodeMinimalWithoutHealth = ({
   facets,
   height,
   selected,
+  isManuallyPositioned,
+  isDragging,
+  onDragStart,
+  onResetPosition,
 }: AssetNodeMinimalProps) => {
   const {isMaterializable, assetKey} = definition;
   const {liveData} = useAssetLiveData(assetKey);
@@ -613,7 +669,7 @@ export const AssetNodeMinimalWithoutHealth = ({
   }
 
   return (
-    <MinimalAssetNodeContainer $selected={selected} style={{paddingTop}}>
+    <MinimalAssetNodeContainer $selected={selected} style={{paddingTop, position: 'relative'}}>
       <Tooltip content={displayName} canShow={displayName.length > 14} position="top">
         <MinimalAssetNodeBox
           $selected={selected}
@@ -624,6 +680,15 @@ export const AssetNodeMinimalWithoutHealth = ({
           $isQueued={!!queuedRuns}
           $height={nodeHeight}
         >
+          {onDragStart ? (
+            <ManualPositionHandle
+              placement="edge"
+              isDragging={!!isDragging}
+              isManuallyPositioned={!!isManuallyPositioned}
+              onDragStart={onDragStart}
+              onReset={onResetPosition}
+            />
+          ) : null}
           {isChanged ? (
             <MinimalNodeChangedDot changedReasons={definition.changedReasons} assetKey={assetKey} />
           ) : null}

js_modules/ui-core/src/asset-graph/CollapsedGroupNode.tsx

@@ -17,6 +17,7 @@ import styled from 'styled-components';
 import {AssetDescription, NameTooltipCSS} from './AssetNode';
 import {StatusCase} from './AssetNodeStatusContent';
 import {ContextMenuWrapper} from './ContextMenuWrapper';
+import {ManualPositionHandle} from './ManualPositionHandle';
 import {GraphNode} from './Utils';
 import {GroupLayout} from './layout';
 import {groupAssetsByStatus} from './util';
@@ -85,13 +86,21 @@ export const CollapsedGroupNode = ({
   toggleSelectAllNodes,
   preferredJobName,
   onFilterToGroup,
+  isManuallyPositioned,
+  isDragging,
+  onDragStart,
+  onResetPosition,
 }: {
   minimal: boolean;
   onExpand: () => void;
   toggleSelectAllNodes?: (e: React.MouseEvent) => void;
   group: GroupLayout & {assetCount: number; assets: GraphNode[]};
   preferredJobName: string;
   onFilterToGroup: () => void;
+  isManuallyPositioned?: boolean;
+  isDragging?: boolean;
+  onDragStart?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  onResetPosition?: () => void;
 }) => {
   const {menu, dialog} = useGroupNodeContextMenu({
     onFilterToGroup,
@@ -113,6 +122,14 @@ export const CollapsedGroupNode = ({
         <CollapsedGroupNodeBox $minimal={minimal}>
           <Box padding={{top: 8, bottom: 4, left: 12, right: 8}} flex={{}}>
             <GroupNodeNameAndRepo group={group} minimal={minimal} />
+            {onDragStart ? (
+              <ManualPositionHandle
+                isDragging={!!isDragging}
+                isManuallyPositioned={!!isManuallyPositioned}
+                onDragStart={onDragStart}
+                onReset={onResetPosition}
+              />
+            ) : null}
             <Box padding={{vertical: 4}}>
               <Icon name="unfold_more" />
             </Box>

js_modules/ui-core/src/asset-graph/ExpandedGroupNode.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 
 import {GroupNodeNameAndRepo, useGroupNodeContextMenu} from './CollapsedGroupNode';
 import {ContextMenuWrapper} from './ContextMenuWrapper';
+import {ManualPositionHandle} from './ManualPositionHandle';
 import {GraphNode} from './Utils';
 import {GroupLayout} from './layout';
 import {SVGRelativeContainerForSafari} from '../graph/SVGComponents';
@@ -16,6 +17,10 @@ export const ExpandedGroupNode = ({
   preferredJobName,
   onFilterToGroup,
   setHighlighted,
+  isManuallyPositioned,
+  isDragging,
+  onDragStart,
+  onResetPosition,
 }: {
   group: GroupLayout & {assets: GraphNode[]};
   minimal: boolean;
@@ -24,6 +29,10 @@ export const ExpandedGroupNode = ({
   preferredJobName?: string;
   onFilterToGroup?: () => void;
   setHighlighted: (ids: string[] | null) => void;
+  isManuallyPositioned?: boolean;
+  isDragging?: boolean;
+  onDragStart?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  onResetPosition?: () => void;
 }) => {
   const {menu, dialog} = useGroupNodeContextMenu({
     onFilterToGroup,
@@ -47,6 +56,14 @@ export const ExpandedGroupNode = ({
           }}
         >
           <GroupNodeNameAndRepo group={group} minimal={minimal} />
+          {onDragStart ? (
+            <ManualPositionHandle
+              isDragging={!!isDragging}
+              isManuallyPositioned={!!isManuallyPositioned}
+              onDragStart={onDragStart}
+              onReset={onResetPosition}
+            />
+          ) : null}
           {onCollapse && (
             <Box padding={{vertical: 4}}>
               <Icon name="unfold_less" />