From ce88f662418417c28e6c882d6cacfce536795640 Mon Sep 17 00:00:00 2001 From: bengotow Date: Tue, 31 May 2022 11:41:53 -0500 Subject: [PATCH] [dagit] Remove the Asset Grid prototype that was behind a feature flag (#8109) Co-authored-by: bengotow --- .../src/asset-graph/AssetGraphExplorer.tsx | 38 -- .../core/src/asset-graph/AssetNode.tsx | 199 +++--- .../core/src/assets/AssetViewModeSwitch.tsx | 8 - .../core/src/assets/InstanceAssetGrid.tsx | 623 ------------------ .../dagit/packages/core/src/graph/OpEdges.tsx | 9 +- .../core/src/instance/InstanceRoot.tsx | 4 - 6 files changed, 96 insertions(+), 785 deletions(-) delete mode 100644 js_modules/dagit/packages/core/src/assets/InstanceAssetGrid.tsx diff --git a/js_modules/dagit/packages/core/src/asset-graph/AssetGraphExplorer.tsx b/js_modules/dagit/packages/core/src/asset-graph/AssetGraphExplorer.tsx index 4cc5929255b7c..b8d7f6a2129fe 100644 --- a/js_modules/dagit/packages/core/src/asset-graph/AssetGraphExplorer.tsx +++ b/js_modules/dagit/packages/core/src/asset-graph/AssetGraphExplorer.tsx @@ -4,11 +4,9 @@ import { Checkbox, Colors, Icon, - MenuItem, Mono, NonIdealState, SplitPanelContainer, - Suggest, } from '@dagster-io/ui'; import flatMap from 'lodash/flatMap'; import isEqual from 'lodash/isEqual'; @@ -68,7 +66,6 @@ import { isSourceAsset, tokenForAssetKey, displayNameForAssetKey, - identifyBundles, buildComputeStatusData, } from './Utils'; import {AssetGraphLayout} from './layout'; @@ -322,10 +319,6 @@ const AssetGraphExplorerWithData: React.FC< } }; - const allBundleNames = React.useMemo(() => { - return Object.keys(identifyBundles(props.allAssetKeys.map((a) => JSON.stringify(a.path)))); - }, [props.allAssetKeys]); - const computeStatuses = React.useMemo( () => (assetGraphData ? buildComputeStatusData(assetGraphData, liveDataByNode) : {}), [assetGraphData, liveDataByNode], @@ -585,37 +578,6 @@ const AssetGraphExplorerWithData: React.FC< onChange={(opsQuery) => onChangeExplorerPath({...explorerPath, opsQuery}, 'replace')} popoverPosition="bottom-left" /> - {allBundleNames.length > 0 && ( - - inputProps={{placeholder: 'View a folder'}} - items={allBundleNames} - itemRenderer={(folder, props) => ( - - )} - noResults={} - inputValueRenderer={(str) => str} - selectedItem="" - onItemSelect={(item) => { - onChangeExplorerPath( - { - ...explorerPath, - opsQuery: [ - explorerPath.opsQuery, - `${displayNameForAssetKey({path: JSON.parse(item)})}/`, - ] - .filter(Boolean) - .join(','), - }, - 'replace', - ); - }} - /> - )} } diff --git a/js_modules/dagit/packages/core/src/asset-graph/AssetNode.tsx b/js_modules/dagit/packages/core/src/asset-graph/AssetNode.tsx index ea2505af38401..cebcadda978b6 100644 --- a/js_modules/dagit/packages/core/src/asset-graph/AssetNode.tsx +++ b/js_modules/dagit/packages/core/src/asset-graph/AssetNode.tsx @@ -6,7 +6,6 @@ import {Link} from 'react-router-dom'; import styled from 'styled-components/macro'; import {withMiddleTruncation} from '../app/Util'; -import {AssetKey} from '../assets/types'; import {NodeHighlightColors} from '../graph/OpNode'; import {OpTags} from '../graph/OpTags'; import {linkToRunEvent, titleForRun} from '../runs/RunUtils'; @@ -29,114 +28,110 @@ export const AssetNode: React.FC<{ liveData?: LiveDataForNode; computeStatus?: ComputeStatus; selected: boolean; - padded?: boolean; inAssetCatalog?: boolean; -}> = React.memo( - ({definition, selected, liveData, inAssetCatalog, computeStatus, padded = true}) => { - const firstOp = definition.opNames.length ? definition.opNames[0] : null; - const computeName = definition.graphName || definition.opNames[0] || null; +}> = React.memo(({definition, selected, liveData, inAssetCatalog, computeStatus}) => { + const firstOp = definition.opNames.length ? definition.opNames[0] : null; + const computeName = definition.graphName || definition.opNames[0] || null; - // Used for linking to the run with this step highlighted. We only support highlighting - // a single step, so just use the first one. - const stepKey = firstOp || ''; + // Used for linking to the run with this step highlighted. We only support highlighting + // a single step, so just use the first one. + const stepKey = firstOp || ''; - const displayName = withMiddleTruncation(displayNameForAssetKey(definition.assetKey), { - maxLength: ASSET_NODE_NAME_MAX_LENGTH, - }); + const displayName = withMiddleTruncation(displayNameForAssetKey(definition.assetKey), { + maxLength: ASSET_NODE_NAME_MAX_LENGTH, + }); - const {lastMaterialization} = liveData || MISSING_LIVE_DATA; + const {lastMaterialization} = liveData || MISSING_LIVE_DATA; - return ( - - - - - - -
- {displayName} -
-
-
- {computeStatus === 'old' && ( - - upstream -
- changed - - )} -
- - {definition.description && !inAssetCatalog && ( - {markdownToPlaintext(definition.description).split('\n')[0]} - )} - {computeName && displayName !== computeName && ( - - - -
- {computeName} -
- - - )} - - - {lastMaterialization ? ( - - Materialized - - - - - - - ) : ( - <> - - Materialized - – - - + return ( + + + + + + +
+ {displayName} +
+
+
+ {computeStatus === 'old' && ( + + upstream +
+ changed + )} +
+ + {definition.description && !inAssetCatalog && ( + {markdownToPlaintext(definition.description).split('\n')[0]} + )} + {computeName && displayName !== computeName && ( + + + +
+ {computeName} +
+ + + )} + + + {lastMaterialization ? ( - Latest Run + Materialized - + + + - - {definition.computeKind && ( - { - window.requestAnimationFrame(() => - document.dispatchEvent(new Event('show-kind-info')), - ); - }, - }, - ]} - /> + ) : ( + <> + + Materialized + – + + )} - - - ); - }, - isEqual, -); + + Latest Run + + + + + + {definition.computeKind && ( + { + window.requestAnimationFrame(() => + document.dispatchEvent(new Event('show-kind-info')), + ); + }, + }, + ]} + /> + )} + + + ); +}, isEqual); export const AssetNodeMinimal: React.FC<{ selected: boolean; @@ -218,21 +213,17 @@ const BoxColors = { Stats: 'rgba(236, 236, 248, 1)', }; -export const AssetNodeContainer = styled.div<{$selected: boolean; $padded?: boolean}>` +const AssetNodeContainer = styled.div<{$selected: boolean}>` outline: ${(p) => (p.$selected ? `2px dashed ${NodeHighlightColors.Border}` : 'none')}; border-radius: 6px; outline-offset: -1px; background: ${(p) => (p.$selected ? NodeHighlightColors.Background : 'white')}; inset: 0; - - ${(p) => - p.$padded && - ` padding: 4px; margin-top: 10px; margin-right: 4px; margin-left: 4px; - margin-bottom: 2px;`} + margin-bottom: 2px; `; export const AssetNodeBox = styled.div<{$selected: boolean}>` diff --git a/js_modules/dagit/packages/core/src/assets/AssetViewModeSwitch.tsx b/js_modules/dagit/packages/core/src/assets/AssetViewModeSwitch.tsx index 67d132cb42939..85ad99870870a 100644 --- a/js_modules/dagit/packages/core/src/assets/AssetViewModeSwitch.tsx +++ b/js_modules/dagit/packages/core/src/assets/AssetViewModeSwitch.tsx @@ -2,30 +2,22 @@ import {ButtonGroup, ButtonGroupItem} from '@dagster-io/ui'; import * as React from 'react'; import {useHistory} from 'react-router-dom'; -import {useFeatureFlags} from '../app/Flags'; - import {AssetViewType, useAssetView} from './useAssetView'; export const AssetViewModeSwitch = () => { const history = useHistory(); const [view, _setView] = useAssetView(); - const {flagExperimentalAssetDAG} = useFeatureFlags(); const buttons: ButtonGroupItem[] = [ {id: 'graph', icon: 'gantt_waterfall', tooltip: 'Graph view'}, {id: 'flat', icon: 'view_list', tooltip: 'List view'}, {id: 'directory', icon: 'folder', tooltip: 'Folder view'}, ]; - if (flagExperimentalAssetDAG) { - buttons.unshift({id: 'grid', icon: 'source', tooltip: 'Grid view'}); - } const setView = (view: AssetViewType) => { _setView(view); if (view === 'graph') { history.push('/instance/asset-graph'); - } else if (view === 'grid') { - history.push('/instance/asset-grid'); } else if (history.location.pathname !== '/instance/assets') { history.push('/instance/assets'); } diff --git a/js_modules/dagit/packages/core/src/assets/InstanceAssetGrid.tsx b/js_modules/dagit/packages/core/src/assets/InstanceAssetGrid.tsx deleted file mode 100644 index 71fdaa8efb661..0000000000000 --- a/js_modules/dagit/packages/core/src/assets/InstanceAssetGrid.tsx +++ /dev/null @@ -1,623 +0,0 @@ -import {Box, Colors, FontFamily, Heading, PageHeader} from '@dagster-io/ui'; -import dagre from 'dagre'; -import flatMap from 'lodash/flatMap'; -import keyBy from 'lodash/keyBy'; -import uniqBy from 'lodash/uniqBy'; -import * as React from 'react'; -import {useParams} from 'react-router'; -import {Link} from 'react-router-dom'; -import styled from 'styled-components/macro'; - -import {FIFTEEN_SECONDS, useQueryRefreshAtInterval} from '../app/QueryRefresh'; -import {AssetNodeBox, AssetNodeContainer, AssetNode} from '../asset-graph/AssetNode'; -import { - buildSVGPath, - displayNameForAssetKey, - GraphData, - identifyBundles, - tokenForAssetKey, -} from '../asset-graph/Utils'; -import {useAssetGraphData} from '../asset-graph/useAssetGraphData'; -import {useLiveDataForAssetKeys} from '../asset-graph/useLiveDataForAssetKeys'; -import {useViewport} from '../gantt/useViewport'; -import { - instanceAssetsExplorerPathFromString, - instanceAssetsExplorerPathToURL, -} from '../pipelines/PipelinePathUtils'; -import {LoadingSpinner} from '../ui/Loading'; -import {ReloadAllButton} from '../workspace/ReloadAllButton'; - -import {AssetViewModeSwitch} from './AssetViewModeSwitch'; - -const INSET = 20; -const PADDING = 30; - -export const InstanceAssetGrid: React.FC = () => { - const params = useParams(); - const explorerPath = instanceAssetsExplorerPathFromString(params[0]); - const {assetGraphData} = useAssetGraphData(null, explorerPath.opsQuery || '*'); - - return ( - - Assets} - right={} - /> - - - - - - ); -}; - -interface Box { - id: string; - contentIds: string[]; - layout: {top: number; left: number; width: number; height: number}; -} - -const runMinimalDagreLayout = ( - bundles: {[prefixId: string]: string[]}, - edges: {from: string; to: string}[], -) => { - const g = new dagre.graphlib.Graph({compound: true}); - - g.setGraph({ - rankdir: 'TB', - marginx: 0, - marginy: 0, - nodesep: 20, - edgesep: 10, - ranksep: 20, - }); - g.setDefaultEdgeLabel(() => ({})); - for (const [node, contentIds] of Object.entries(bundles)) { - g.setNode(node, {width: 250, height: contentIds.length ? 40 : 108}); - } - for (const edge of edges) { - g.setEdge({v: edge.from, w: edge.to}, {weight: 1}); - } - - dagre.layout(g); - - const boxes = Object.entries(bundles).map(([bundleId, contentIds]) => { - const {x, y, width, height} = g.node(bundleId); - return {id: bundleId, contentIds, layout: {top: y, left: x, width, height}}; - }); - - // Note: This is important for other algorithms we run later, but we want to - // do it in the layer that is cached. - boxes.sort((a, b) => a.id.localeCompare(b.id)); - - return {boxes}; -}; - -function alignToGrid(boxes: Box[], viewportWidth: number) { - if (viewportWidth === 0) { - return; - } - // Make Dagre's layout more "grid compatible" by centering each row and - // wrapping rows so they don't scroll offscreen - const splitWidth = viewportWidth - 40; - const itemsPerRow = Math.round(splitWidth / 280); - const itemWidth = (splitWidth - (itemsPerRow - 1) * PADDING) / itemsPerRow; - - const rows: {top: number; items: Box[]}[] = []; - for (const box of boxes) { - if (rows[rows.length - 1]?.top === box.layout.top) { - rows[rows.length - 1].items.push(box); - } else { - rows.push({items: [box], top: box.layout.top}); - } - } - - let x = -1; - let y = INSET; - - for (const {items} of rows) { - const centeringOffset = - items.length < itemsPerRow ? (splitWidth - items.length * (itemWidth + PADDING)) / 2 : 0; - - for (const box of items) { - x++; - if (x >= itemsPerRow) { - y += box.layout.height + PADDING; - x = 0; - } - box.layout.width = itemWidth; - box.layout.left = INSET + centeringOffset + x * (itemWidth + PADDING); - box.layout.top = y; - } - y += items[0].layout.height + PADDING; - x = -1; - } -} - -function flattenToGrid(boxes: Box[], viewportWidth: number) { - if (viewportWidth === 0) { - return; - } - // Try to arrange the bundles so the downstream ones are generally lower in the grid. - // Algorithm: Iterate through the folders and insert each into the result set such that - // it is before things that depend on it and after things that it depends on. - // If we can't satisfy these (bi-directional deps are possible), we put at the midpoint. - - const splitWidth = viewportWidth - 40; - const itemsPerRow = Math.round(splitWidth / 280); - const itemWidth = (splitWidth - (itemsPerRow - 1) * PADDING) / itemsPerRow; - - let x = -1; - let y = INSET; - const centeringOffset = - boxes.length < itemsPerRow ? (splitWidth - boxes.length * (itemWidth + PADDING)) / 2 : 0; - - boxes.forEach((box) => { - x++; - if (x >= itemsPerRow) { - x = 0; - y += box.layout.height + PADDING; - } - box.layout.top = y; - box.layout.left = INSET + centeringOffset + x * (itemWidth + PADDING); - box.layout.width = itemWidth; - }); -} - -function expandBoxes(layout: Layout, expanded: string | null, viewportWidth: number) { - // Find the box we want to expand - const boxIdx = layout.boxes.findIndex((b) => b.id === expanded); - if (boxIdx === -1) { - return {boxes: layout.boxes, shadows: []}; - } - - const boxes: Box[] = JSON.parse(JSON.stringify(layout.boxes)); - const box = boxes[boxIdx]!; - const shadow = { - top: box.layout.top + box.layout.height + PADDING / 2, - height: 0, - }; - const toPushDown = boxes.filter((b) => b.layout.top >= shadow.top); - - const contentsWithChildren: {[id: string]: string[]} = {}; - box.contentIds.forEach((c) => (contentsWithChildren[c] = [])); - - const contentsEdges = uniqBy( - layout.edges - .filter((e) => contentsWithChildren[e.from] && contentsWithChildren[e.to]) - .map((e) => ({ - from: contentsWithChildren[e.from] ? e.from : layout.bundleForAssetId[e.from], - to: contentsWithChildren[e.to] ? e.to : layout.bundleForAssetId[e.to], - })), - JSON.stringify, - ); - const contents = - contentsEdges.length > 0 && box.contentIds.length < 100 - ? runMinimalDagreLayout(contentsWithChildren, contentsEdges) - : { - boxes: Object.entries(contentsWithChildren).map(([bundleId, contentIds]) => ({ - id: bundleId, - contentIds, - layout: {top: 0, left: 0, width: 250, height: 108}, - })), - }; - - if (contentsEdges.length === 0 || contents.boxes.length > 10) { - flattenToGrid(contents.boxes, viewportWidth); - } else { - alignToGrid(contents.boxes, viewportWidth); - } - - // Add the nodes for the childern - boxes.splice(boxIdx, 0, ...contents.boxes); - for (const box of contents.boxes) { - box.layout.top += shadow.top; - } - - // Push the nodes beneath the shadow down - const contentBottom = Math.max(...contents.boxes.map((b) => b.layout.top + b.layout.height)); - shadow.height = contentBottom - shadow.top + PADDING / 2; - toPushDown.forEach((box) => (box.layout.top += shadow.height)); - - return {boxes, shadows: [shadow]}; -} - -type Layout = ReturnType; - -const NONE_BUNDLE = '["none"]'; - -function useAssetGridLayout(assetGraphData: GraphData | null, viewportWidth: number) { - return React.useMemo(() => { - if (!assetGraphData) { - return {bundles: {}, bundleForAssetId: {}, boxes: [], edges: []}; - } - - const assetIds = Object.keys(assetGraphData.nodes); - const bundles = identifyBundles(assetIds); - const bundleForAssetId: {[assetId: string]: string} = {}; - for (const [bundleId, childrenIds] of Object.entries(bundles)) { - childrenIds.forEach((c) => (bundleForAssetId[c] = bundleId)); - } - - const unbundledAssetIds = assetIds.filter((id) => !bundleForAssetId[id]); - if (unbundledAssetIds.length) { - bundles[NONE_BUNDLE] = unbundledAssetIds; - bundles[NONE_BUNDLE].forEach((id) => (bundleForAssetId[id] = NONE_BUNDLE)); - } - - const edges = flatMap(Object.entries(assetGraphData.downstream), ([from, downstreams]) => - Object.keys(downstreams).map((to) => ({from, to})), - ); - - const {boxes} = runMinimalDagreLayout( - bundles, - uniqBy( - edges.map((e) => ({from: bundleForAssetId[e.from], to: bundleForAssetId[e.to]})), - JSON.stringify, - ), - ); - if (boxes.length > 10) { - flattenToGrid(boxes, viewportWidth); - } else { - alignToGrid(boxes, viewportWidth); - } - - return {bundles, bundleForAssetId, boxes, edges}; - }, [assetGraphData, viewportWidth]); -} - -const AssetGrid: React.FC<{ - assetGraphData: GraphData | null; -}> = ({assetGraphData}) => { - const [highlighted, setHighlighted] = React.useState(null); - const [expanded, setExpanded] = React.useState(null); - const {viewport, containerProps} = useViewport(); - const layout = useAssetGridLayout(assetGraphData, viewport.width); - const {edges, bundleForAssetId} = layout; - const {boxes, shadows} = React.useMemo(() => expandBoxes(layout, expanded, viewport.width), [ - layout, - expanded, - viewport.width, - ]); - - const expandedAssetKeys = - boxes.find((b) => b.id === expanded)?.contentIds.map((id) => ({path: JSON.parse(id)})) || []; - - const {liveResult, liveDataByNode} = useLiveDataForAssetKeys( - assetGraphData?.nodes, - expandedAssetKeys, - ); - - useQueryRefreshAtInterval(liveResult, FIFTEEN_SECONDS); - - if (!assetGraphData) { - return ; - } - - const renderedIds = keyBy( - boxes.filter((b) => expanded !== b.id), - (b) => b.id, - ); - const renderedEdges = uniqBy( - edges.map((e) => ({ - from: renderedIds[e.from] ? e.from : bundleForAssetId[e.from] || e.from, - to: renderedIds[e.to] ? e.to : bundleForAssetId[e.to] || e.to, - })), - JSON.stringify, - ); - - const bottom = Math.max( - ...shadows.map((s) => s.top + s.height), - ...boxes.map((b) => b.layout.top + b.layout.height), - ); - - return ( -
- {shadows.map((shadow) => ( -
- ))} -
- {boxes - .filter((b) => !b.contentIds.length) - .map((box) => ( -
setHighlighted(box.id)} - onMouseLeave={() => setHighlighted(null)} - > - -
- ))} -
- -
- {boxes - .filter((b) => b.contentIds.length) - .map((box) => ( - setExpanded(expanded === box.id ? null : box.id)} - /> - ))} -
-
- ); -}; - -const AssetGridEdges = ({ - boxes, - edges, - highlighted, - expanded, -}: { - boxes: Box[]; - highlighted: string | null; - expanded: string | null; - edges: {from: string; to: string}[]; -}) => { - const highlightedEdges = - highlighted && highlighted !== expanded - ? edges.filter((e) => e.from === highlighted || e.to === highlighted) - : []; - - const expandedChildren = boxes.find((b) => b.id === expanded)?.contentIds || []; - const expandedEdges = edges.filter( - (e) => expandedChildren.includes(e.from) || expandedChildren.includes(e.to), - ); - - const showBaseEdgeHintsAlways = expandedEdges.length === 0; // && boxes.length < 30 - const showExpandedEdgeHintsAlways = expandedEdges.length > 0; - - const width = Math.max(...boxes.map((b) => b.layout.width + b.layout.left)); - const height = Math.max(...boxes.map((b) => b.layout.height + b.layout.top)); - - return ( - - {showBaseEdgeHintsAlways && ( - - )} - - {showExpandedEdgeHintsAlways && ( - - )} - - {highlightedEdges.length > 0 && ( - e.to === highlighted)} - color={Colors.Olive500} - zIndex={1} - width={width} - height={height} - /> - )} - {highlightedEdges.length > 0 && ( - e.from === highlighted)} - color={Colors.Blue500} - zIndex={1} - width={width} - height={height} - /> - )} - - ); -}; - -const StyledPathSet: React.FC<{ - boxes: Box[]; - edges: {from: string; to: string}[]; - color: string; - zIndex: number; - width: number; - height: number; -}> = React.memo(({boxes, edges, color, zIndex, width, height}) => { - const pointForAssetId = (bundleId: string) => { - const box = boxes.find((b) => b.id === bundleId); - if (!box) { - console.log(bundleId); - return {x: 0, y: 0}; - } - const {width, height, left, top} = box.layout; - return {x: left + width / 2, y: top + height / 2}; - }; - const stackings = {left: 0, right: 0}; - - const dForEdge = (edge: {from: string; to: string}) => { - const source = pointForAssetId(edge.from); - source.x += boxes[0].layout.width / 2 - 24; - const target = pointForAssetId(edge.to); - target.x -= boxes[0].layout.width / 2 - 24; - - if (source.y < target.y) { - target.y -= 30; - } else if (source.y > target.y) { - target.y += 30; //boxes[0].layout.height / 2 - stackings.bottom++ * 10; - } else { - if (source.x < target.x) { - target.x -= 30; - source.y += stackings.left; - target.y += stackings.left; - stackings.left += 7; - } else if (source.x > target.x) { - target.x += 30; - source.y += stackings.right; - target.y += stackings.right; - stackings.right += 7; - } - } - return buildSVGPath({source, target}); - }; - - const markerId = React.useRef(`arrow${Math.random()}`); - - return ( - - - - - - - {edges.map((edge, idx) => ( - - ))} - - ); -}); - -const StyledPath = styled('path')` - stroke-width: 4; - fill: none; -`; - -const AssetGridItem = ({ - box, - expanded, - highlighted, - setHighlighted, - toggleExpanded, -}: { - box: Box; - highlighted: boolean; - setHighlighted: (s: string | null) => void; - expanded: boolean; - toggleExpanded: () => void; -}) => { - return ( - setHighlighted(box.id)} - onMouseLeave={() => setHighlighted(null)} - onClick={() => toggleExpanded()} - > - -
-
- -
-
- {displayNameForAssetKey({path: JSON.parse(box.id)})} -
-
-
{box.contentIds.length} items
- `, - opNames: [], - })} - > - View Graph - -
-
- - - ); -}; diff --git a/js_modules/dagit/packages/core/src/graph/OpEdges.tsx b/js_modules/dagit/packages/core/src/graph/OpEdges.tsx index d075cdcf77fd3..ebb64fdcfd224 100644 --- a/js_modules/dagit/packages/core/src/graph/OpEdges.tsx +++ b/js_modules/dagit/packages/core/src/graph/OpEdges.tsx @@ -1,21 +1,14 @@ -import {pathVerticalDiagonal} from '@vx/shape'; import * as React from 'react'; import styled from 'styled-components/macro'; import {weakmapMemoize} from '../app/Util'; +import {buildSVGPath} from '../asset-graph/Utils'; import {OpGraphLayout, OpLayout, OpLayoutEdge} from './asyncGraphLayout'; import {OpGraphOpFragment} from './types/OpGraphOpFragment'; export type Edge = {a: string; b: string}; -const buildSVGPath = pathVerticalDiagonal({ - source: (s: any) => s.source, - target: (s: any) => s.target, - x: (s: any) => s.x, - y: (s: any) => s.y, -}); - const buildSVGPaths = weakmapMemoize((edges: OpLayoutEdge[], nodes: {[name: string]: OpLayout}) => edges.map(({from, to}) => { const sourceOutput = nodes[from.opName].outputs[from.edgeName]; diff --git a/js_modules/dagit/packages/core/src/instance/InstanceRoot.tsx b/js_modules/dagit/packages/core/src/instance/InstanceRoot.tsx index 30344d0004a4f..54b3fa6c1ce3f 100644 --- a/js_modules/dagit/packages/core/src/instance/InstanceRoot.tsx +++ b/js_modules/dagit/packages/core/src/instance/InstanceRoot.tsx @@ -5,7 +5,6 @@ import {Redirect, Route, Switch, useLocation} from 'react-router-dom'; import {AssetEntryRoot} from '../assets/AssetEntryRoot'; import {AssetsCatalogRoot} from '../assets/AssetsCatalogRoot'; import {InstanceAssetGraphExplorer} from '../assets/InstanceAssetGraphExplorer'; -import {InstanceAssetGrid} from '../assets/InstanceAssetGrid'; import {RunRoot} from '../runs/RunRoot'; import {RunsRoot} from '../runs/RunsRoot'; import {SnapshotRoot} from '../snapshots/SnapshotRoot'; @@ -26,9 +25,6 @@ export const InstanceRoot = () => { - - -