[dagit] Remove the Asset Grid prototype that was behind a feature flag (

#8109) Co-authored-by: bengotow <[email protected]>
dagster-io · May 31, 2022 · 62a2bd5 · 62a2bd5
1 parent c0bc315
commit 62a2bd5
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 786 deletions.
diff --git 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 && (
-              <Suggest<string>
-                inputProps={{placeholder: 'View a folder'}}
-                items={allBundleNames}
-                itemRenderer={(folder, props) => (
-                  <MenuItem
-                    text={displayNameForAssetKey({path: JSON.parse(folder)})}
-                    active={props.modifiers.active}
-                    onClick={props.handleClick}
-                    key={folder}
-                  />
-                )}
-                noResults={<MenuItem disabled={true} text="Loading..." />}
-                inputValueRenderer={(str) => str}
-                selectedItem=""
-                onItemSelect={(item) => {
-                  onChangeExplorerPath(
-                    {
-                      ...explorerPath,
-                      opsQuery: [
-                        explorerPath.opsQuery,
-                        `${displayNameForAssetKey({path: JSON.parse(item)})}/`,
-                      ]
-                        .filter(Boolean)
-                        .join(','),
-                    },
-                    'replace',
-                  );
-                }}
-              />
-            )}
           </QueryOverlay>
         </>
       }

diff --git 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 (
-      <AssetNodeContainer $selected={selected} $padded={padded}>
-        <AssetNodeBox $selected={selected}>
-          <Name>
-            <span style={{marginTop: 1}}>
-              <Icon name="asset" />
-            </span>
-            <div style={{overflow: 'hidden', textOverflow: 'ellipsis', marginTop: -1}}>
-              {displayName}
-            </div>
-            <div style={{flex: 1}} />
-            <div style={{maxWidth: ASSET_NODE_ANNOTATIONS_MAX_WIDTH}}>
-              {computeStatus === 'old' && (
-                <UpstreamNotice>
-                  upstream
-                  <br />
-                  changed
-                </UpstreamNotice>
-              )}
-            </div>
-          </Name>
-          {definition.description && !inAssetCatalog && (
-            <Description>{markdownToPlaintext(definition.description).split('\n')[0]}</Description>
-          )}
-          {computeName && displayName !== computeName && (
-            <Description>
-              <Box
-                flex={{gap: 4, alignItems: 'flex-end'}}
-                style={{marginLeft: -2, overflow: 'hidden'}}
-              >
-                <Icon name={definition.graphName ? 'job' : 'op'} size={16} />
-                <div style={{minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis'}}>
-                  {computeName}
-                </div>
-              </Box>
-            </Description>
-          )}
-
-          <Stats>
-            {lastMaterialization ? (
-              <StatsRow>
-                <span>Materialized</span>
-                <CaptionMono>
-                  <AssetRunLink
-                    runId={lastMaterialization.runId}
-                    event={{stepKey, timestamp: lastMaterialization.timestamp}}
-                  >
-                    <TimestampDisplay
-                      timestamp={Number(lastMaterialization.timestamp) / 1000}
-                      timeFormat={{showSeconds: false, showTimezone: false}}
-                    />
-                  </AssetRunLink>
-                </CaptionMono>
-              </StatsRow>
-            ) : (
-              <>
-                <StatsRow>
-                  <span>Materialized</span>
-                  <span>–</span>
-                </StatsRow>
-              </>
+  return (
+    <AssetNodeContainer $selected={selected}>
+      <AssetNodeBox $selected={selected}>
+        <Name>
+          <span style={{marginTop: 1}}>
+            <Icon name="asset" />
+          </span>
+          <div style={{overflow: 'hidden', textOverflow: 'ellipsis', marginTop: -1}}>
+            {displayName}
+          </div>
+          <div style={{flex: 1}} />
+          <div style={{maxWidth: ASSET_NODE_ANNOTATIONS_MAX_WIDTH}}>
+            {computeStatus === 'old' && (
+              <UpstreamNotice>
+                upstream
+                <br />
+                changed
+              </UpstreamNotice>
             )}
+          </div>
+        </Name>
+        {definition.description && !inAssetCatalog && (
+          <Description>{markdownToPlaintext(definition.description).split('\n')[0]}</Description>
+        )}
+        {computeName && displayName !== computeName && (
+          <Description>
+            <Box
+              flex={{gap: 4, alignItems: 'flex-end'}}
+              style={{marginLeft: -2, overflow: 'hidden'}}
+            >
+              <Icon name={definition.graphName ? 'job' : 'op'} size={16} />
+              <div style={{minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis'}}>
+                {computeName}
+              </div>
+            </Box>
+          </Description>
+        )}
+
+        <Stats>
+          {lastMaterialization ? (
             <StatsRow>
-              <span>Latest Run</span>
+              <span>Materialized</span>
               <CaptionMono>
-                <AssetLatestRunWithNotices liveData={liveData} stepKey={stepKey} />
+                <AssetRunLink
+                  runId={lastMaterialization.runId}
+                  event={{stepKey, timestamp: lastMaterialization.timestamp}}
+                >
+                  <TimestampDisplay
+                    timestamp={Number(lastMaterialization.timestamp) / 1000}
+                    timeFormat={{showSeconds: false, showTimezone: false}}
+                  />
+                </AssetRunLink>
               </CaptionMono>
             </StatsRow>
-          </Stats>
-          {definition.computeKind && (
-            <OpTags
-              minified={false}
-              style={{right: -2, paddingTop: 5}}
-              tags={[
-                {
-                  label: definition.computeKind,
-                  onClick: () => {
-                    window.requestAnimationFrame(() =>
-                      document.dispatchEvent(new Event('show-kind-info')),
-                    );
-                  },
-                },
-              ]}
-            />
+          ) : (
+            <>
+              <StatsRow>
+                <span>Materialized</span>
+                <span>–</span>
+              </StatsRow>
+            </>
           )}
-        </AssetNodeBox>
-      </AssetNodeContainer>
-    );
-  },
-  isEqual,
-);
+          <StatsRow>
+            <span>Latest Run</span>
+            <CaptionMono>
+              <AssetLatestRunWithNotices liveData={liveData} stepKey={stepKey} />
+            </CaptionMono>
+          </StatsRow>
+        </Stats>
+        {definition.computeKind && (
+          <OpTags
+            minified={false}
+            style={{right: -2, paddingTop: 5}}
+            tags={[
+              {
+                label: definition.computeKind,
+                onClick: () => {
+                  window.requestAnimationFrame(() =>
+                    document.dispatchEvent(new Event('show-kind-info')),
+                  );
+                },
+              },
+            ]}
+          />
+        )}
+      </AssetNodeBox>
+    </AssetNodeContainer>
+  );
+}, 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/asset-graph/useLiveDataForAssetKeys.tsx b/js_modules/dagit/packages/core/src/asset-graph/useLiveDataForAssetKeys.tsx
@@ -1,7 +1,7 @@
 import {gql, useQuery} from '@apollo/client';
 import React from 'react';
 
-import {AssetKeyInput, PipelineSelector} from '../types/globalTypes';
+import {AssetKeyInput} from '../types/globalTypes';
 
 import {ASSET_NODE_LIVE_FRAGMENT} from './AssetNode';
 import {buildLiveData, AssetDefinitionsForLiveData} from './Utils';

diff --git 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<AssetViewType>[] = [
     {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');
     }