Skip to content

Commit

Permalink
[dagit] Small changes to the asset catalog (#7993)
Browse files Browse the repository at this point in the history 
* Style improvements

* Move ReloadAllButton button up to the top

* Remove experimental “Disconnected edges” feature

Co-authored-by: bengotow <bgotow@elementl.com>
  • Loading branch information
@bengotow @OwenKephart
2 people authored and OwenKephart committed Jun 1, 2022
1 parent beba51d commit c53fe10
Show file tree
Hide file tree
Showing 10 changed files with 178 additions and 237 deletions.
88 changes: 1 addition & 87 deletions js_modules/dagit/packages/core/src/asset-graph/AssetEdges.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,8 @@ import {Colors} from '@dagster-io/ui';
import React from 'react';
import styled from 'styled-components/macro';

import {IPoint, isPointWayOffscreen} from '../graph/common';

import {ForeignNode} from './ForeignNode';
import {buildSVGPath} from './Utils';
import {AssetGraphLayout, AssetLayoutEdge, getForeignNodeDimensions} from './layout';
import {AssetLayoutEdge} from './layout';

export const AssetConnectedEdges: React.FC<{
edges: AssetLayoutEdge[];
Expand All @@ -25,83 +22,6 @@ export const AssetConnectedEdges: React.FC<{
);
};

// No use memoizing this because disconnected edges depend on `viewport`
export const AssetDisconnectedEdges: React.FC<{
layout: AssetGraphLayout;
highlighted: string | null;
setHighlighted: (h: string | null) => void;
onGoToPoint: (p: IPoint) => void;
viewport: {
top: number;
left: number;
bottom: number;
right: number;
};
}> = ({layout, viewport, highlighted, setHighlighted, onGoToPoint}) => {
const placedLabels: {[otherId: string]: IPoint} = {};
const offsetIncrements: {[anchorId: string]: number} = {};
const nodes: React.ReactNode[] = [];
const edges: React.ReactNode[] = [];

for (const e of layout.edges) {
const fromOff = isPointWayOffscreen(e.from, viewport);
const toOff = isPointWayOffscreen(e.to, viewport);

const anchor = fromOff && toOff ? null : fromOff ? e.to : toOff ? e.from : null;
const anchorId = anchor === e.to ? e.toId : e.fromId;
const other = anchor === e.to ? e.from : e.to;
const otherId = anchor === e.to ? e.fromId : e.toId;

if (!anchor) {
continue;
}
const angle = Math.atan2(other.y - anchor.y, other.x - anchor.x);
const increment = offsetIncrements[anchorId] || 0;
offsetIncrements[anchorId] = increment + 40;

const size = getForeignNodeDimensions(otherId);
const ray = {
x: anchor.x + Math.cos(angle) * (30 + size.width),
y: anchor.y + (anchor === e.from ? 50 : -50) + (anchor === e.from ? increment : -increment),
};

if (!placedLabels[otherId]) {
placedLabels[otherId] = ray;

nodes.push(
<foreignObject
key={`${e.fromId}->${e.toId}`}
x={ray.x - size.width / 2}
y={ray.y}
onMouseEnter={() => setHighlighted(otherId)}
onMouseLeave={() => setHighlighted(null)}
onClick={() => onGoToPoint(other)}
{...size}
>
<ForeignNode assetKey={{path: JSON.parse(otherId)}} backgroundColor="white" />
</foreignObject>,
);
}

edges.push(
<DashedStyledPath
key={`${e.fromId}->${e.toId}`}
d={buildSVGPath({source: anchor, target: placedLabels[otherId]})}
stroke={
e.fromId === highlighted || e.toId === highlighted ? Colors.Blue500 : 'rgba(0,0,0,0.2)'
}
/>,
);
}

return (
<>
{edges}
{nodes}
</>
);
};

export const AssetEdges: React.FC<{edges: AssetLayoutEdge[]; color: string}> = React.memo(
({edges, color}) => (
<>
Expand Down Expand Up @@ -134,9 +54,3 @@ const StyledPath = styled('path')`
stroke-width: 4;
fill: none;
`;

const DashedStyledPath = styled('path')`
stroke-width: 4;
stroke-dasharray: 2 4;
fill: none;
`;
90 changes: 52 additions & 38 deletions js_modules/dagit/packages/core/src/asset-graph/AssetGraphExplorer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import {
Body,
Box,
Checkbox,
Colors,
Icon,
MenuItem,
Mono,
NonIdealState,
Expand All @@ -25,11 +28,12 @@ import {
QueryRefreshState,
useQueryRefreshAtInterval,
} from '../app/QueryRefresh';
import {withMiddleTruncation} from '../app/Util';
import {LaunchAssetExecutionButton} from '../assets/LaunchAssetExecutionButton';
import {AssetKey} from '../assets/types';
import {SVGViewport} from '../graph/SVGViewport';
import {useAssetLayout} from '../graph/asyncGraphLayout';
import {closestNodeInDirection, isNodeOffscreen, isPointWayOffscreen} from '../graph/common';
import {closestNodeInDirection, isNodeOffscreen} from '../graph/common';
import {useDocumentTitle} from '../hooks/useDocumentTitle';
import {
GraphExplorerOptions,
Expand All @@ -51,8 +55,8 @@ import {PipelineSelector} from '../types/globalTypes';
import {GraphQueryInput} from '../ui/GraphQueryInput';
import {Loading} from '../ui/Loading';

import {AssetConnectedEdges, AssetDisconnectedEdges} from './AssetEdges';
import {AssetNode, AssetNodeMinimal} from './AssetNode';
import {AssetConnectedEdges} from './AssetEdges';
import {AssetNode, AssetNodeMinimal, NameMinimal} from './AssetNode';
import {ForeignNode} from './ForeignNode';
import {OmittedAssetsNotice} from './OmittedAssetsNotice';
import {SidebarAssetInfo} from './SidebarAssetInfo';
Expand Down Expand Up @@ -319,11 +323,6 @@ const AssetGraphExplorerWithData: React.FC<
}
};

const onGoToPoint = React.useCallback(
(p) => viewportEl.current?.zoomToSVGCoords(p.x, p.y, true),
[viewportEl],
);

const allBundleNames = React.useMemo(() => {
return Object.keys(identifyBundles(props.allAssetKeys.map((a) => JSON.stringify(a.path))));
}, [props.allAssetKeys]);
Expand Down Expand Up @@ -361,27 +360,7 @@ const AssetGraphExplorerWithData: React.FC<
>
{({scale: _scale}, viewportRect) => (
<SVGContainer width={layout.width} height={layout.height}>
<AssetConnectedEdges
highlighted={highlighted}
edges={
experiments
? layout.edges.filter(
(e) =>
!isPointWayOffscreen(e.from, viewportRect) &&
!isPointWayOffscreen(e.to, viewportRect),
)
: layout.edges
}
/>
{experiments && (
<AssetDisconnectedEdges
viewport={viewportRect}
layout={layout}
highlighted={highlighted}
setHighlighted={setHighlighted}
onGoToPoint={onGoToPoint}
/>
)}
<AssetConnectedEdges highlighted={highlighted} edges={layout.edges} />

{Object.values(layout.bundles)
.sort((a, b) => a.id.length - b.id.length)
Expand All @@ -401,13 +380,39 @@ const AssetGraphExplorerWithData: React.FC<
}}
>
<AssetNodeMinimal
color="rgba(248, 223, 196, 0.4)"
definition={{assetKey: {path}}}
fontSize={18 / _scale}
style={{
border: `${2 / _scale}px solid ${Colors.Gray300}`,
background: Colors.White,
}}
selected={selectedGraphNodes.some((g) =>
hasPathPrefix(g.assetKey.path, path),
)}
/>
>
<NameMinimal
style={{
fontSize: 18 / _scale,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
<div
style={{display: 'flex', gap: 3 / _scale, alignItems: 'center'}}
>
<Icon
name="folder"
size={Math.round(16 / _scale) as any}
style={{marginTop: 4}}
/>
{withMiddleTruncation(displayNameForAssetKey({path}), {
maxLength: 17,
})}
</div>
<Body style={{fontSize: 10 / _scale, color: Colors.Gray500}}>
{layout.bundleMapping[id].length} items
</Body>
</NameMinimal>
</AssetNodeMinimal>
</foreignObject>
);
}
Expand All @@ -427,8 +432,11 @@ const AssetGraphExplorerWithData: React.FC<
? (_scale - EXPERIMENTAL_MINI_SCALE) / 0.2
: 0,
fontWeight: 600,
display: 'flex',
gap: 6,
}}
>
<Icon name="folder" size={20} />
{displayNameForAssetKey({path: JSON.parse(id)})}
</Mono>
<div
Expand All @@ -437,8 +445,8 @@ const AssetGraphExplorerWithData: React.FC<
top: 24,
position: 'absolute',
borderRadius: 10,
border: `${3 / _scale}px dashed rgba(0,0,0,0.4)`,
background: `rgba(248, 223, 196, ${
border: `${3 / _scale}px dashed ${Colors.Gray300}`,
background: `rgba(223, 223, 223, ${
0.4 - Math.max(0, _scale - EXPERIMENTAL_MINI_SCALE) * 0.3
})`,
}}
Expand Down Expand Up @@ -487,10 +495,16 @@ const AssetGraphExplorerWithData: React.FC<
<ForeignNode assetKey={{path}} />
) : experiments && _scale < EXPERIMENTAL_MINI_SCALE ? (
<AssetNodeMinimal
definition={graphNode.definition}
style={{background: Colors.White}}
selected={selectedGraphNodes.includes(graphNode)}
fontSize={28}
/>
>
<NameMinimal style={{fontSize: 28}}>
{withMiddleTruncation(
displayNameForAssetKey(graphNode.definition.assetKey),
{maxLength: 17},
)}
</NameMinimal>
</AssetNodeMinimal>
) : (
<AssetNode
definition={graphNode.definition}
Expand Down

0 comments on commit c53fe10

Please sign in to comment.