diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/TextInput.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/TextInput.tsx
index c50ce17e8a121..7b8e09869668a 100644
--- a/js_modules/dagster-ui/packages/ui-components/src/components/TextInput.tsx
+++ b/js_modules/dagster-ui/packages/ui-components/src/components/TextInput.tsx
@@ -56,7 +56,7 @@ export const TextInputContainerStyles = css`
   position: relative;
 `;
 
-export const TextInputContainer = styled.div<{$disabled: boolean}>`
+export const TextInputContainer = styled.div<{$disabled?: boolean}>`
   ${TextInputContainerStyles}
 
   > ${IconWrapper}:first-child {
diff --git a/js_modules/dagster-ui/packages/ui-components/src/index.ts b/js_modules/dagster-ui/packages/ui-components/src/index.ts
index cca86333fa3a5..0930eda54d044 100644
--- a/js_modules/dagster-ui/packages/ui-components/src/index.ts
+++ b/js_modules/dagster-ui/packages/ui-components/src/index.ts
@@ -50,6 +50,7 @@ export * from './components/styles';
 export * from './components/useSuggestionsForString';
 export * from './components/ErrorBoundary';
 export * from './components/useViewport';
+export * from './components/UnstyledButton';
 export * from './components/StyledRawCodeMirror';
 export * from './components/useDelayedState';
 
diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/Flags.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/Flags.tsx
index 7b2d81f1a598c..f41bc56ac09d7 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/app/Flags.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/app/Flags.tsx
@@ -14,6 +14,7 @@ export const FeatureFlag = {
   flagSidebarResources: 'flagSidebarResources' as const,
   flagHorizontalDAGs: 'flagHorizontalDAGs' as const,
   flagDisableAutoLoadDefaults: 'flagDisableAutoLoadDefaults' as const,
+  flagDAGSidebar: 'flagDAGSidebar' as const,
 };
 export type FeatureFlagType = keyof typeof FeatureFlag;
 
diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/UserSettingsDialog.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/UserSettingsDialog.tsx
index edc4803aebdbb..ceb9f51b36f9c 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/app/UserSettingsDialog.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/app/UserSettingsDialog.tsx
@@ -20,7 +20,7 @@ import {TimezoneSelect} from './time/TimezoneSelect';
 import {automaticLabel} from './time/browserTimezone';
 
 type OnCloseFn = (event: React.SyntheticEvent<HTMLElement>) => void;
-type VisibleFlag = {key: string; flagType: FeatureFlagType};
+type VisibleFlag = {key: string; label?: React.ReactNode; flagType: FeatureFlagType};
 
 interface DialogProps {
   isOpen: boolean;
@@ -43,7 +43,7 @@ export const UserSettingsDialog: React.FC<DialogProps> = ({isOpen, onClose, visi
 
 interface DialogContentProps {
   onClose: OnCloseFn;
-  visibleFlags: {key: string; flagType: FeatureFlagType}[];
+  visibleFlags: {key: string; label?: React.ReactNode; flagType: FeatureFlagType}[];
 }
 
 /**
@@ -138,8 +138,9 @@ const UserSettingsDialogContent: React.FC<DialogContentProps> = ({onClose, visib
             <Subheading>Experimental features</Subheading>
           </Box>
           <MetadataTable
-            rows={visibleFlags.map(({key, flagType}) => ({
+            rows={visibleFlags.map(({key, label, flagType}) => ({
               key,
+              label,
               value: (
                 <Checkbox
                   format="switch"
diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/getVisibleFeatureFlagRows.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/getVisibleFeatureFlagRows.tsx
index de4600e810695..c4e592c8308f1 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/app/getVisibleFeatureFlagRows.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/app/getVisibleFeatureFlagRows.tsx
@@ -1,3 +1,6 @@
+import {Box} from '@dagster-io/ui-components';
+import React from 'react';
+
 import {FeatureFlag} from './Flags';
 
 /**
@@ -32,4 +35,22 @@ export const getVisibleFeatureFlagRows = () => [
     key: 'Experimental horizontal asset DAGs',
     flagType: FeatureFlag.flagHorizontalDAGs,
   },
+  {
+    key: 'New asset lineage sidebar',
+    label: (
+      <Box flex={{direction: 'column'}}>
+        New asset lineage sidebar,
+        <div>
+          <a
+            href="https://github.com/dagster-io/dagster/discussions/16657"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Learn more
+          </a>
+        </div>
+      </Box>
+    ),
+    flagType: FeatureFlag.flagDAGSidebar,
+  },
 ];
diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorer.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorer.tsx
index 495215bbecca4..9b4c7477a03d7 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorer.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorer.tsx
@@ -5,6 +5,9 @@ import {
   NonIdealState,
   SplitPanelContainer,
   ErrorBoundary,
+  Button,
+  Icon,
+  Tooltip,
 } from '@dagster-io/ui-components';
 import pickBy from 'lodash/pickBy';
 import uniq from 'lodash/uniq';
@@ -17,7 +20,7 @@ import {QueryRefreshCountdown, QueryRefreshState} from '../app/QueryRefresh';
 import {LaunchAssetExecutionButton} from '../assets/LaunchAssetExecutionButton';
 import {LaunchAssetObservationButton} from '../assets/LaunchAssetObservationButton';
 import {AssetKey} from '../assets/types';
-import {SVGViewport} from '../graph/SVGViewport';
+import {DEFAULT_MAX_ZOOM, SVGViewport} from '../graph/SVGViewport';
 import {useAssetLayout} from '../graph/asyncGraphLayout';
 import {closestNodeInDirection} from '../graph/common';
 import {
@@ -38,6 +41,7 @@ import {GraphQueryInput} from '../ui/GraphQueryInput';
 import {Loading} from '../ui/Loading';
 
 import {AssetEdges} from './AssetEdges';
+import {AssetGraphExplorerSidebar} from './AssetGraphExplorerSidebar';
 import {AssetGraphJobSidebar} from './AssetGraphJobSidebar';
 import {AssetGroupNode} from './AssetGroupNode';
 import {AssetNode, AssetNodeMinimal} from './AssetNode';
@@ -136,11 +140,12 @@ const AssetGraphExplorerWithData: React.FC<WithDataProps> = ({
   applyingEmptyDefault,
   fetchOptions,
   fetchOptionFilters,
+  allAssetKeys,
 }) => {
   const findAssetLocation = useFindAssetLocation();
   const {layout, loading, async} = useAssetLayout(assetGraphData);
   const viewportEl = React.useRef<SVGViewport>();
-  const {flagHorizontalDAGs} = useFeatureFlags();
+  const {flagHorizontalDAGs, flagDAGSidebar} = useFeatureFlags();
 
   const [highlighted, setHighlighted] = React.useState<string | null>(null);
 
@@ -240,7 +245,10 @@ const AssetGraphExplorerWithData: React.FC<WithDataProps> = ({
     // focus on the selected node. (If selection was specified in the URL).
     // Don't animate this change.
     if (lastSelectedNode) {
-      // viewportEl.current.zoomToSVGBox(layout.nodes[lastSelectedNode.id].bounds, false);
+      const layoutNode = layout.nodes[lastSelectedNode.id];
+      if (layoutNode) {
+        viewportEl.current.zoomToSVGBox(layoutNode.bounds, false);
+      }
       viewportEl.current.focus();
     } else {
       viewportEl.current.autocenter(false);
@@ -262,17 +270,32 @@ const AssetGraphExplorerWithData: React.FC<WithDataProps> = ({
     const layoutWithoutExternalLinks = {...layout, nodes: pickBy(layout.nodes, hasDefinition)};
 
     const nextId = closestNodeInDirection(layoutWithoutExternalLinks, lastSelectedNode.id, dir);
-    const node = nextId && assetGraphData.nodes[nextId];
-    if (node && viewportEl.current) {
-      onSelectNode(e, node.assetKey, node);
-      viewportEl.current.zoomToSVGBox(layout.nodes[nextId]!.bounds, true);
-    }
+    selectNodeById(e, nextId);
   };
 
+  const selectNodeById = React.useCallback(
+    (e: React.MouseEvent<any> | React.KeyboardEvent<any>, nodeId?: string) => {
+      if (!nodeId) {
+        return;
+      }
+      const node = assetGraphData.nodes[nodeId];
+      if (node) {
+        onSelectNode(e, node.assetKey, node);
+        if (layout && viewportEl.current) {
+          viewportEl.current.zoomToSVGBox(layout.nodes[nodeId]!.bounds, true);
+        }
+      }
+    },
+    [assetGraphData.nodes, layout, onSelectNode],
+  );
+
   const allowGroupsOnlyZoomLevel = !!(layout && Object.keys(layout.groups).length);
 
-  return (
+  const [showSidebar, setShowSidebar] = React.useState(true);
+
+  const explorer = (
     <SplitPanelContainer
+      key="explorer"
       identifier="explorer"
       firstInitialPercent={70}
       firstMinSize={400}
@@ -281,7 +304,7 @@ const AssetGraphExplorerWithData: React.FC<WithDataProps> = ({
           {graphQueryItems.length === 0 ? (
             <EmptyDAGNotice nodeType="asset" isGraph />
           ) : applyingEmptyDefault ? (
-            <LargeDAGNotice nodeType="asset" anchorLeft={fetchOptionFilters ? '300px' : '40px'} />
+            <LargeDAGNotice nodeType="asset" anchorLeft="40px" />
           ) : Object.keys(assetGraphData.nodes).length === 0 ? (
             <EntirelyFilteredDAGNotice nodeType="asset" />
           ) : undefined}
@@ -301,7 +324,7 @@ const AssetGraphExplorerWithData: React.FC<WithDataProps> = ({
                 viewportEl.current?.autocenter(true);
                 e.stopPropagation();
               }}
-              maxZoom={1.2}
+              maxZoom={DEFAULT_MAX_ZOOM}
               maxAutocenterZoom={1.0}
             >
               {({scale}) => (
@@ -400,10 +423,7 @@ const AssetGraphExplorerWithData: React.FC<WithDataProps> = ({
             </OptionsOverlay>
           )}
 
-          <Box
-            flex={{direction: 'column', alignItems: 'flex-end', gap: 8}}
-            style={{position: 'absolute', right: 12, top: 8}}
-          >
+          <Box style={{position: 'absolute', right: 12, top: 8}}>
             <Box flex={{alignItems: 'center', gap: 12}}>
               <QueryRefreshCountdown
                 refreshState={liveDataRefreshState}
@@ -429,6 +449,16 @@ const AssetGraphExplorerWithData: React.FC<WithDataProps> = ({
             </Box>
           </Box>
           <QueryOverlay>
+            {showSidebar || !flagDAGSidebar ? null : (
+              <Tooltip content="Show sidebar">
+                <Button
+                  icon={<Icon name="panel_show_left" />}
+                  onClick={() => {
+                    setShowSidebar(true);
+                  }}
+                />
+              </Tooltip>
+            )}
             {fetchOptionFilters}
 
             <GraphQueryInput
@@ -466,6 +496,34 @@ const AssetGraphExplorerWithData: React.FC<WithDataProps> = ({
       }
     />
   );
+
+  if (showSidebar && flagDAGSidebar) {
+    return (
+      <SplitPanelContainer
+        key="explorer-wrapper"
+        identifier="explorer-wrapper"
+        firstMinSize={300}
+        firstInitialPercent={0}
+        first={
+          showSidebar ? (
+            <AssetGraphExplorerSidebar
+              allAssetKeys={allAssetKeys}
+              assetGraphData={assetGraphData}
+              lastSelectedNode={lastSelectedNode}
+              selectNode={selectNodeById}
+              explorerPath={explorerPath}
+              onChangeExplorerPath={onChangeExplorerPath}
+              hideSidebar={() => {
+                setShowSidebar(false);
+              }}
+            />
+          ) : null
+        }
+        second={explorer}
+      />
+    );
+  }
+  return explorer;
 };
 
 const SVGContainer = styled.svg`
diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorerFilters.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorerFilters.tsx
new file mode 100644
index 0000000000000..e423e614c3a51
--- /dev/null
+++ b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorerFilters.tsx
@@ -0,0 +1,114 @@
+import {Box, Icon} from '@dagster-io/ui-components';
+import React from 'react';
+
+import {AssetGroupSelector} from '../graphql/types';
+import {TruncatedTextWithFullTextOnHover} from '../nav/getLeftNavItemsForOption';
+import {useFilters} from '../ui/Filters';
+import {FilterObject} from '../ui/Filters/useFilter';
+import {useStaticSetFilter} from '../ui/Filters/useStaticSetFilter';
+import {DagsterRepoOption, WorkspaceContext} from '../workspace/WorkspaceContext';
+import {buildRepoAddress, buildRepoPathForHuman} from '../workspace/buildRepoAddress';
+
+export const AssetGraphExplorerFilters = React.memo(
+  ({
+    assetGroups,
+    visibleAssetGroups,
+    setGroupFilters,
+  }:
+    | {
+        assetGroups: AssetGroupSelector[];
+        visibleAssetGroups: AssetGroupSelector[];
+        setGroupFilters: (groups: AssetGroupSelector[]) => void;
+      }
+    | {assetGroups?: null; setGroupFilters?: null; visibleAssetGroups?: null}) => {
+    const {allRepos, visibleRepos, toggleVisible} = React.useContext(WorkspaceContext);
+
+    const visibleReposSet = React.useMemo(() => new Set(visibleRepos), [visibleRepos]);
+
+    const reposFilter = useStaticSetFilter<DagsterRepoOption>({
+      name: 'Repository',
+      icon: 'repo',
+      allValues: allRepos.map((repo) => ({
+        key: repo.repository.id,
+        value: repo,
+        match: [buildRepoPathForHuman(repo.repository.name, repo.repositoryLocation.name)],
+      })),
+      menuWidth: '300px',
+      renderLabel: ({value}) => (
+        <Box flex={{direction: 'row', gap: 4, alignItems: 'center'}}>
+          <Icon name="repo" />
+          <TruncatedTextWithFullTextOnHover
+            text={buildRepoPathForHuman(value.repository.name, value.repositoryLocation.name)}
+          />
+        </Box>
+      ),
+      getStringValue: (value) =>
+        buildRepoPathForHuman(value.repository.name, value.repositoryLocation.name),
+      initialState: visibleReposSet,
+      onStateChanged: (values) => {
+        allRepos.forEach((repo) => {
+          if (visibleReposSet.has(repo) !== values.has(repo)) {
+            toggleVisible([buildRepoAddress(repo.repository.name, repo.repositoryLocation.name)]);
+          }
+        });
+      },
+    });
+
+    const groupsFilter = useStaticSetFilter<AssetGroupSelector>({
+      name: 'Asset Groups',
+      icon: 'asset_group',
+      allValues: (assetGroups || []).map((group) => ({
+        key: group.groupName,
+        value:
+          visibleAssetGroups?.find(
+            (visibleGroup) =>
+              visibleGroup.groupName === group.groupName &&
+              visibleGroup.repositoryName === group.repositoryName &&
+              visibleGroup.repositoryLocationName === group.repositoryLocationName,
+          ) ?? group,
+        match: [group.groupName],
+      })),
+      menuWidth: '300px',
+      renderLabel: ({value}) => (
+        <Box flex={{direction: 'row', gap: 4, alignItems: 'center'}}>
+          <Icon name="repo" />
+          <TruncatedTextWithFullTextOnHover
+            tooltipText={
+              value.groupName +
+              ' - ' +
+              buildRepoPathForHuman(value.repositoryName, value.repositoryLocationName)
+            }
+            text={
+              <>
+                {value.groupName}
+                <span style={{opacity: 0.5, paddingLeft: '4px'}}>
+                  {buildRepoPathForHuman(value.repositoryName, value.repositoryLocationName)}
+                </span>
+              </>
+            }
+          />
+        </Box>
+      ),
+      getStringValue: (group) => group.groupName,
+      initialState: React.useMemo(() => new Set(visibleAssetGroups ?? []), [visibleAssetGroups]),
+      onStateChanged: (values) => {
+        if (setGroupFilters) {
+          setGroupFilters(Array.from(values));
+        }
+      },
+    });
+
+    const filters: FilterObject[] = [];
+    if (allRepos.length > 1) {
+      filters.push(reposFilter);
+    }
+    if (assetGroups) {
+      filters.push(groupsFilter);
+    }
+    const {button} = useFilters({filters});
+    if (allRepos.length <= 1 && !assetGroups) {
+      return null;
+    }
+    return button;
+  },
+);
diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorerSidebar.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorerSidebar.tsx
new file mode 100644
index 0000000000000..52fa3d7b1c7b7
--- /dev/null
+++ b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorerSidebar.tsx
@@ -0,0 +1,761 @@
+import {
+  Box,
+  Button,
+  Colors,
+  Dialog,
+  DialogBody,
+  DialogFooter,
+  Icon,
+  Menu,
+  MenuItem,
+  Popover,
+  TextInput,
+  MiddleTruncate,
+  useViewport,
+  MenuDivider,
+  Spinner,
+  ButtonGroup,
+  Tooltip,
+} from '@dagster-io/ui-components';
+import {useVirtualizer} from '@tanstack/react-virtual';
+import React from 'react';
+import styled from 'styled-components';
+
+import {showSharedToaster} from '../app/DomUtils';
+import {useMaterializationAction} from '../assets/LaunchAssetExecutionButton';
+import {AssetKey} from '../assets/types';
+import {ExplorerPath} from '../pipelines/PipelinePathUtils';
+import {Container, Inner, Row} from '../ui/VirtualizedTable';
+import {buildRepoPathForHuman} from '../workspace/buildRepoAddress';
+
+import {GraphData, GraphNode} from './Utils';
+
+const COLLATOR = new Intl.Collator(navigator.language, {sensitivity: 'base', numeric: true});
+
+type FolderNodeNonAssetType =
+  | {groupName: string; id: string; level: number}
+  | {locationName: string; id: string; level: number};
+
+type FolderNodeType = FolderNodeNonAssetType | {path: string; id: string; level: number};
+
+type TreeNodeType = {level: number; id: string; path: string};
+
+export const AssetGraphExplorerSidebar = React.memo(
+  ({
+    assetGraphData,
+    lastSelectedNode,
+    selectNode: _selectNode,
+    explorerPath,
+    onChangeExplorerPath,
+    allAssetKeys,
+    hideSidebar,
+  }: {
+    assetGraphData: GraphData;
+    lastSelectedNode: GraphNode;
+    selectNode: (e: React.MouseEvent<any> | React.KeyboardEvent<any>, nodeId: string) => void;
+    explorerPath: ExplorerPath;
+    onChangeExplorerPath: (path: ExplorerPath, mode: 'replace' | 'push') => void;
+    allAssetKeys: AssetKey[];
+    hideSidebar: () => void;
+  }) => {
+    const [selectWhenDataAvailable, setSelectWhenDataAvailable] = React.useState<
+      [React.MouseEvent<any> | React.KeyboardEvent<any>, string] | null
+    >(null);
+    const selectedNodeHasDataAvailable = selectWhenDataAvailable
+      ? !!assetGraphData.nodes[selectWhenDataAvailable[1]]
+      : false;
+
+    React.useEffect(() => {
+      if (selectWhenDataAvailable) {
+        const [e, id] = selectWhenDataAvailable;
+        _selectNode(e, id);
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectWhenDataAvailable, selectedNodeHasDataAvailable]);
+
+    const selectNode: typeof _selectNode = (e, id) => {
+      setSelectWhenDataAvailable([e, id]);
+      if (!assetGraphData.nodes[id]) {
+        try {
+          const path = JSON.parse(id);
+          const nextOpsQuery = `${explorerPath.opsQuery} \"${path[path.length - 1]}\"`;
+          onChangeExplorerPath(
+            {
+              ...explorerPath,
+              opsQuery: nextOpsQuery,
+            },
+            'push',
+          );
+        } catch (e) {
+          // Ignore errors. The selected node might be a group or code location so trying to JSON.parse the id will error.
+          // For asset nodes the id is always a JSON array
+        }
+      }
+    };
+    const [openNodes, setOpenNodes] = React.useState<Set<string>>(new Set());
+    const [selectedNode, setSelectedNode] = React.useState<
+      null | {id: string; path: string} | {id: string}
+    >(null);
+
+    const [viewType, setViewType] = React.useState<'tree' | 'folder'>('tree');
+
+    const rootNodes = React.useMemo(
+      () =>
+        Object.keys(assetGraphData.nodes)
+          .filter(
+            (id) =>
+              // When we filter to a subgraph, the nodes at the root aren't real roots, but since
+              // their upstream graph is cutoff we want to show them as roots in the sidebar.
+              // Find these nodes by filtering on whether there parent nodes are in assetGraphData
+              !Object.keys(assetGraphData.upstream[id] ?? {}).filter(
+                (id) => assetGraphData.nodes[id],
+              ).length,
+          )
+          .sort((a, b) =>
+            COLLATOR.compare(
+              getDisplayName(assetGraphData.nodes[a]!),
+              getDisplayName(assetGraphData.nodes[b]!),
+            ),
+          ),
+      [assetGraphData],
+    );
+
+    const treeNodes = React.useMemo(() => {
+      const queue = rootNodes.map((id) => ({level: 1, id, path: id}));
+
+      const treeNodes: TreeNodeType[] = [];
+      while (queue.length) {
+        const node = queue.shift()!;
+        treeNodes.push(node);
+        if (openNodes.has(node.path)) {
+          const downstream = Object.keys(assetGraphData.downstream[node.id] || {}).filter(
+            (id) => assetGraphData.nodes[id],
+          );
+          queue.unshift(
+            ...downstream.map((id) => ({level: node.level + 1, id, path: `${node.path}:${id}`})),
+          );
+        }
+      }
+      return treeNodes;
+    }, [assetGraphData.downstream, assetGraphData.nodes, openNodes, rootNodes]);
+
+    const folderNodes = React.useMemo(() => {
+      const folderNodes: FolderNodeType[] = [];
+
+      // Map of Code Locations -> Groups -> Assets
+      const codeLocationNodes: Record<
+        string,
+        {
+          locationName: string;
+          groups: Record<
+            string,
+            {
+              groupName: string;
+              assets: string[];
+            }
+          >;
+        }
+      > = {};
+      Object.entries(assetGraphData.nodes).forEach(([id, node]) => {
+        const locationName = node.definition.repository.location.name;
+        const repositoryName = node.definition.repository.name;
+        const groupName = node.definition.groupName || 'default';
+        const codeLocation = buildRepoPathForHuman(repositoryName, locationName);
+        codeLocationNodes[codeLocation] = codeLocationNodes[codeLocation] || {
+          locationName: codeLocation,
+          groups: {},
+        };
+        codeLocationNodes[codeLocation]!.groups[groupName] = codeLocationNodes[codeLocation]!
+          .groups[groupName] || {
+          groupName,
+          assets: [],
+        };
+        codeLocationNodes[codeLocation]!.groups[groupName]!.assets.push(id);
+      });
+      Object.entries(codeLocationNodes).forEach(([locationName, locationNode]) => {
+        folderNodes.push({locationName, id: locationName, level: 1});
+        if (openNodes.has(locationName)) {
+          Object.entries(locationNode.groups).forEach(([groupName, groupNode]) => {
+            const groupId = locationName + ':' + groupName;
+            folderNodes.push({groupName, id: groupId, level: 2});
+            if (openNodes.has(groupId)) {
+              groupNode.assets
+                .sort((a, b) => COLLATOR.compare(a, b))
+                .forEach((assetKey) => {
+                  folderNodes.push({
+                    id: assetKey,
+                    path: locationName + ':' + groupName + ':' + assetKey,
+                    level: 3,
+                  });
+                });
+            }
+          });
+        }
+      });
+
+      return folderNodes;
+    }, [assetGraphData.nodes, openNodes]);
+
+    const renderedNodes = viewType === 'tree' ? treeNodes : folderNodes;
+
+    const containerRef = React.useRef<HTMLDivElement | null>(null);
+
+    const rowVirtualizer = useVirtualizer({
+      count: renderedNodes.length,
+      getScrollElement: () => containerRef.current,
+      estimateSize: () => 28,
+      overscan: 10,
+    });
+
+    const totalHeight = rowVirtualizer.getTotalSize();
+    const items = rowVirtualizer.getVirtualItems();
+
+    React.useLayoutEffect(() => {
+      if (lastSelectedNode) {
+        setOpenNodes((prevOpenNodes) => {
+          if (viewType === 'folder') {
+            const nextOpenNodes = new Set(prevOpenNodes);
+            const assetNode = assetGraphData.nodes[lastSelectedNode.id];
+            if (assetNode) {
+              const locationName = buildRepoPathForHuman(
+                assetNode.definition.repository.name,
+                assetNode.definition.repository.location.name,
+              );
+              const groupName = assetNode.definition.groupName || 'default';
+              nextOpenNodes.add(locationName);
+              nextOpenNodes.add(locationName + ':' + groupName);
+            }
+            setSelectedNode({id: lastSelectedNode.id});
+            return nextOpenNodes;
+          }
+          let path = lastSelectedNode.id;
+          let currentId = lastSelectedNode.id;
+          let next: string | undefined;
+          while ((next = Object.keys(assetGraphData.upstream[currentId] ?? {})[0])) {
+            if (!assetGraphData.nodes[next]) {
+              break;
+            }
+            path = `${next}:${path}`;
+            currentId = next;
+          }
+
+          const nextOpenNodes = new Set(prevOpenNodes);
+
+          const nodesInPath = path.split(':');
+          let currentPath = nodesInPath[0]!;
+
+          nextOpenNodes.add(currentPath);
+          for (let i = 1; i < nodesInPath.length; i++) {
+            currentPath = `${currentPath}:${nodesInPath[i]}`;
+            nextOpenNodes.add(currentPath);
+          }
+          setSelectedNode({id: lastSelectedNode.id, path: currentPath});
+          return nextOpenNodes;
+        });
+      }
+    }, [
+      lastSelectedNode,
+      assetGraphData,
+      viewType,
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      lastSelectedNode &&
+        renderedNodes.findIndex((node) => nodeId(lastSelectedNode) === nodeId(node)),
+    ]);
+
+    const indexOfLastSelectedNode = React.useMemo(
+      () => {
+        if (!selectedNode) {
+          return -1;
+        }
+        if (viewType === 'tree') {
+          return 'path' in selectedNode
+            ? renderedNodes.findIndex((node) => 'path' in node && node.path === selectedNode.path)
+            : -1;
+        } else {
+          return renderedNodes.findIndex((node) => nodeId(node) === nodeId(selectedNode));
+        }
+      },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [viewType, renderedNodes, selectedNode],
+    );
+
+    React.useLayoutEffect(() => {
+      if (indexOfLastSelectedNode !== -1) {
+        rowVirtualizer.scrollToIndex(indexOfLastSelectedNode);
+      }
+    }, [indexOfLastSelectedNode, rowVirtualizer]);
+
+    return (
+      <div style={{display: 'grid', gridTemplateRows: 'auto auto minmax(0, 1fr)', height: '100%'}}>
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: '1fr auto',
+            gap: '6px',
+            padding: '12px 24px',
+            borderBottom: `1px solid ${Colors.KeylineGray}`,
+          }}
+        >
+          <ButtonGroupWrapper>
+            <ButtonGroup
+              activeItems={new Set([viewType])}
+              buttons={[
+                {id: 'tree', label: 'Tree view', icon: 'gantt_flat'},
+                {id: 'folder', label: 'Folder view', icon: 'folder_open'},
+              ]}
+              onClick={(id: 'tree' | 'folder') => {
+                setViewType(id);
+              }}
+            />
+          </ButtonGroupWrapper>
+          <Tooltip content="Hide sidebar">
+            <Button icon={<Icon name="panel_show_right" />} onClick={hideSidebar} />
+          </Tooltip>
+        </div>
+        <Box padding={{vertical: 8, horizontal: 24}}>
+          <SearchFilter
+            values={React.useMemo(() => {
+              return allAssetKeys.map((key) => ({
+                value: JSON.stringify(key.path),
+                label: key.path[key.path.length - 1]!,
+              }));
+            }, [allAssetKeys])}
+            onSelectValue={selectNode}
+          />
+        </Box>
+        <div>
+          <Container ref={containerRef}>
+            <Inner $totalHeight={totalHeight}>
+              {items.map(({index, key, size, start, measureElement}) => {
+                const node = renderedNodes[index]!;
+                const isCodelocationNode = 'locationName' in node;
+                const isGroupNode = 'groupName' in node;
+                const row =
+                  !isCodelocationNode && !isGroupNode ? assetGraphData.nodes[node.id] : node;
+                return (
+                  <Row
+                    $height={size}
+                    $start={start}
+                    key={key}
+                    style={{overflow: 'visible'}}
+                    ref={measureElement}
+                  >
+                    {row ? (
+                      <Node
+                        viewType={viewType}
+                        isOpen={openNodes.has(nodeId(node))}
+                        assetGraphData={assetGraphData}
+                        node={row}
+                        level={node.level}
+                        isSelected={
+                          selectedNode && 'path' in node && 'path' in selectedNode
+                            ? selectedNode.path === node.path
+                            : selectedNode?.id === node.id
+                        }
+                        toggleOpen={() => {
+                          setSelectedNode(node);
+                          setOpenNodes((nodes) => {
+                            const openNodes = new Set(nodes);
+                            const isOpen = openNodes.has(nodeId(node));
+                            if (isOpen) {
+                              openNodes.delete(nodeId(node));
+                            } else {
+                              openNodes.add(nodeId(node));
+                            }
+                            return openNodes;
+                          });
+                        }}
+                        selectNode={(e, id) => {
+                          selectNode(e, id);
+                        }}
+                        selectThisNode={(e) => {
+                          selectNode(e, node.id);
+                          setSelectedNode(node);
+                        }}
+                        explorerPath={explorerPath}
+                        onChangeExplorerPath={onChangeExplorerPath}
+                      />
+                    ) : null}
+                  </Row>
+                );
+              })}
+            </Inner>
+          </Container>
+        </div>
+      </div>
+    );
+  },
+);
+
+const Node = ({
+  assetGraphData,
+  node,
+  level,
+  toggleOpen,
+  selectNode,
+  isOpen,
+  isSelected,
+  selectThisNode,
+  explorerPath,
+  onChangeExplorerPath,
+  viewType,
+}: {
+  assetGraphData: GraphData;
+  node: GraphNode | FolderNodeNonAssetType;
+  level: number;
+  toggleOpen: () => void;
+  selectThisNode: (e: React.MouseEvent<any> | React.KeyboardEvent<any>) => void;
+  selectNode: (e: React.MouseEvent<any> | React.KeyboardEvent<any>, nodeId: string) => void;
+  isOpen: boolean;
+  isSelected: boolean;
+  explorerPath: ExplorerPath;
+  onChangeExplorerPath: (path: ExplorerPath, mode: 'replace' | 'push') => void;
+  viewType: 'tree' | 'folder';
+}) => {
+  const isGroupNode = 'groupName' in node;
+  const isLocationNode = 'locationName' in node;
+  const isAssetNode = !isGroupNode && !isLocationNode;
+
+  const displayName = React.useMemo(() => {
+    if (isAssetNode) {
+      return getDisplayName(node);
+    } else if (isGroupNode) {
+      return node.groupName;
+    } else {
+      return node.locationName;
+    }
+  }, [isAssetNode, isGroupNode, node]);
+
+  const upstream = Object.keys(assetGraphData.upstream[node.id] ?? {});
+  const downstream = Object.keys(assetGraphData.downstream[node.id] ?? {});
+  const elementRef = React.useRef<HTMLDivElement | null>(null);
+
+  const [showDownstreamDialog, setShowDownstreamDialog] = React.useState(false);
+  const [showUpstreamDialog, setShowUpstreamDialog] = React.useState(false);
+
+  function showDownstreamGraph() {
+    const path = JSON.parse(node.id);
+    const newQuery = `\"${path[path.length - 1]}\"*`;
+    const nextOpsQuery = explorerPath.opsQuery.includes(newQuery)
+      ? explorerPath.opsQuery
+      : `${explorerPath.opsQuery} ${newQuery}`;
+    onChangeExplorerPath(
+      {
+        ...explorerPath,
+        opsQuery: nextOpsQuery,
+      },
+      'push',
+    );
+  }
+
+  function showUpstreamGraph() {
+    const path = JSON.parse(node.id);
+    const newQuery = `*\"${path[path.length - 1]}\"`;
+    const nextOpsQuery = explorerPath.opsQuery.includes(newQuery)
+      ? explorerPath.opsQuery
+      : `${explorerPath.opsQuery} ${newQuery}`;
+    onChangeExplorerPath(
+      {
+        ...explorerPath,
+        opsQuery: nextOpsQuery,
+      },
+      'push',
+    );
+  }
+
+  const {onClick, loading, launchpadElement} = useMaterializationAction();
+
+  return (
+    <>
+      {launchpadElement}
+      <UpstreamDownstreamDialog
+        title="Downstream assets"
+        assets={downstream}
+        isOpen={showDownstreamDialog}
+        close={() => {
+          setShowDownstreamDialog(false);
+        }}
+        selectNode={(e, id) => {
+          selectNode(e, id);
+        }}
+      />
+      <UpstreamDownstreamDialog
+        title="Upstream assets"
+        assets={upstream}
+        isOpen={showUpstreamDialog}
+        close={() => {
+          setShowUpstreamDialog(false);
+        }}
+        selectNode={selectNode}
+      />
+      <Box ref={elementRef} onClick={selectThisNode}>
+        <BoxWrapper level={level}>
+          <Box padding={{right: 12}} flex={{direction: 'row', gap: 2, alignItems: 'center'}}>
+            {!isAssetNode ||
+            (viewType === 'tree' && downstream.filter((id) => assetGraphData.nodes[id]).length) ? (
+              <div
+                onClick={(e) => {
+                  e.stopPropagation();
+                  toggleOpen();
+                }}
+                style={{cursor: 'pointer'}}
+              >
+                <Icon
+                  name="arrow_drop_down"
+                  style={{transform: isOpen ? 'rotate(0deg)' : 'rotate(-90deg)'}}
+                />
+              </div>
+            ) : null}
+            <GrayOnHoverBox
+              flex={{
+                direction: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                gap: 6,
+                grow: 1,
+                shrink: 1,
+              }}
+              padding={{horizontal: 8, vertical: 5 as any}}
+              style={{
+                width: '100%',
+                borderRadius: '8px',
+                ...(isSelected ? {background: Colors.LightPurple} : {}),
+              }}
+            >
+              <div
+                style={{
+                  display: 'grid',
+                  gridTemplateColumns:
+                    isGroupNode || isLocationNode ? 'auto minmax(0, 1fr)' : 'minmax(0, 1fr)',
+                  gap: '6px',
+                }}
+              >
+                {isGroupNode ? <Icon name="asset_group" /> : null}
+                {isLocationNode ? <Icon name="folder_open" /> : null}
+                <MiddleTruncate text={displayName} />
+              </div>
+              {isAssetNode ? (
+                <div
+                  onClick={(e) => {
+                    // stop propagation outside of the popover to prevent parent onClick from being selected
+                    e.stopPropagation();
+                  }}
+                >
+                  <Popover
+                    content={
+                      <Menu>
+                        <MenuItem
+                          icon="materialization"
+                          text={
+                            <Box flex={{direction: 'row', alignItems: 'center', gap: 4}}>
+                              <span>Materialize</span>
+                              {loading ? <Spinner purpose="body-text" /> : null}
+                            </Box>
+                          }
+                          onClick={async (e) => {
+                            await showSharedToaster({
+                              intent: 'primary',
+                              message: 'Initiating materialization',
+                              icon: 'materialization',
+                            });
+                            onClick([node.assetKey], e, false);
+                          }}
+                        />
+                        {upstream.length || downstream.length ? <MenuDivider /> : null}
+                        {upstream.length ? (
+                          <MenuItem
+                            text="Show upstream graph"
+                            icon="arrow_back"
+                            onClick={showUpstreamGraph}
+                          />
+                        ) : null}
+                        {downstream.length ? (
+                          <MenuItem
+                            text="Show downstream graph"
+                            icon="arrow_forward"
+                            onClick={showDownstreamGraph}
+                          />
+                        ) : null}
+                      </Menu>
+                    }
+                    hoverOpenDelay={100}
+                    hoverCloseDelay={100}
+                    placement="right"
+                    shouldReturnFocusOnClose
+                  >
+                    <ExpandMore style={{cursor: 'pointer'}}>
+                      <Icon name="expand_more" color={Colors.Gray500} />
+                    </ExpandMore>
+                  </Popover>
+                </div>
+              ) : null}
+            </GrayOnHoverBox>
+          </Box>
+        </BoxWrapper>
+      </Box>
+    </>
+  );
+};
+
+const UpstreamDownstreamDialog = ({
+  title,
+  assets,
+  isOpen,
+  close,
+  selectNode,
+}: {
+  title: string;
+  assets: string[];
+  isOpen: boolean;
+  close: () => void;
+  selectNode: (e: React.MouseEvent<any> | React.KeyboardEvent<any>, nodeId: string) => void;
+}) => {
+  return (
+    <Dialog isOpen={isOpen} onClose={close} title={title}>
+      <DialogBody>
+        <Menu>
+          {assets.map((assetId) => {
+            const path = JSON.parse(assetId);
+            return (
+              <MenuItem
+                icon="asset"
+                text={path[path.length - 1]}
+                key={assetId}
+                onClick={(e) => {
+                  selectNode(e, assetId);
+                  close();
+                }}
+              />
+            );
+          })}
+        </Menu>
+      </DialogBody>
+      <DialogFooter topBorder>
+        <Button onClick={close} intent="primary">
+          Close
+        </Button>
+      </DialogFooter>
+    </Dialog>
+  );
+};
+
+const BoxWrapper = ({level, children}: {level: number; children: React.ReactNode}) => {
+  const wrapper = React.useMemo(() => {
+    let sofar = children;
+    for (let i = 0; i < level; i++) {
+      sofar = (
+        <Box
+          padding={{left: 8}}
+          margin={{left: 8}}
+          border={{side: 'left', width: 1, color: Colors.KeylineGray}}
+        >
+          {sofar}
+        </Box>
+      );
+    }
+    return sofar;
+  }, [level, children]);
+
+  return <>{wrapper}</>;
+};
+
+function getDisplayName(node: GraphNode) {
+  return node.assetKey.path[node.assetKey.path.length - 1]!;
+}
+
+const SearchFilter = <T,>({
+  values,
+  onSelectValue,
+}: {
+  values: {label: string; value: T}[];
+  onSelectValue: (e: React.MouseEvent<any>, value: T) => void;
+}) => {
+  const [searchValue, setSearchValue] = React.useState('');
+  const filteredValues = React.useMemo(() => {
+    if (searchValue) {
+      return values.filter(({label}) => label.toLowerCase().includes(searchValue.toLowerCase()));
+    }
+    return values;
+  }, [searchValue, values]);
+
+  const {viewport, containerProps} = useViewport();
+  return (
+    <Popover
+      placement="bottom-start"
+      targetTagName="div"
+      content={
+        searchValue ? (
+          <Box
+            style={{
+              width: viewport.width + 'px',
+              borderRadius: '8px',
+              maxHeight: 'min(500px, 50vw)',
+              overflow: 'auto',
+            }}
+          >
+            <Menu>
+              {filteredValues.length ? (
+                filteredValues.map((value) => (
+                  <MenuItem
+                    key={value.label}
+                    onClick={(e) => {
+                      onSelectValue(e, value.value);
+                      setSearchValue('');
+                    }}
+                    text={value.label}
+                  />
+                ))
+              ) : (
+                <Box padding={8}>No results</Box>
+              )}
+            </Menu>
+          </Box>
+        ) : (
+          <div />
+        )
+      }
+    >
+      <div style={{display: 'grid', gridTemplateColumns: '1fr'}}>
+        <TextInput
+          icon="search"
+          value={searchValue}
+          onChange={(e) => {
+            setSearchValue(e.target.value);
+          }}
+          placeholder="Search assets"
+          {...(containerProps as any)}
+        />
+      </div>
+    </Popover>
+  );
+};
+
+const ExpandMore = styled.div``;
+
+const GrayOnHoverBox = styled(Box)`
+  border-radius: 8px;
+  &:hover {
+    background: ${Colors.Gray100};
+    transition: background 100ms linear;
+    ${ExpandMore} {
+      visibility: visible;
+    }
+  }
+  ${ExpandMore} {
+    visibility: hidden;
+  }
+`;
+
+const ButtonGroupWrapper = styled.div`
+  > * {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    > * {
+      place-content: center;
+    }
+  }
+`;
+
+function nodeId(node: {path: string; id: string} | {id: string}) {
+  return 'path' in node ? node.path : node.id;
+}
diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetNode.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetNode.tsx
index a105c3bb98a48..9f1561cef6632 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetNode.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetNode.tsx
@@ -330,7 +330,7 @@ const NameTooltipCSS: CSSObject = {
   fontSize: 16.8,
 };
 
-const NameTooltipStyle = JSON.stringify({
+export const NameTooltipStyle = JSON.stringify({
   ...NameTooltipCSS,
   background: Colors.Blue50,
   border: `1px solid ${Colors.Blue100}`,
diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/Utils.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/Utils.tsx
index ffdf4a5c948ce..149762b469203 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/Utils.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/Utils.tsx
@@ -240,3 +240,21 @@ export const itemWithAssetKey = (key: {path: string[]}) => {
   const token = tokenForAssetKey(key);
   return (asset: {assetKey: {path: string[]}}) => tokenForAssetKey(asset.assetKey) === token;
 };
+
+export function walkTreeUpwards(
+  nodeId: string,
+  graphData: GraphData,
+  callback: (nodeId: string) => void,
+) {
+  // TODO
+  console.log({nodeId, graphData, callback});
+}
+
+export function walkTreeDownwards(
+  nodeId: string,
+  graphData: GraphData,
+  callback: (nodeId: string) => void,
+) {
+  // TODO
+  console.log({nodeId, graphData, callback});
+}
diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetGroupRoot.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetGroupRoot.tsx
index 5b744b9275156..ef3242eff5a9f 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetGroupRoot.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetGroupRoot.tsx
@@ -65,7 +65,7 @@ export const AssetGroupRoot: React.FC<{repoAddress: RepoAddress; tab: 'lineage'
   const onNavigateToSourceAssetNode = React.useCallback(
     (node: AssetLocation) => {
       if (node.groupName && node.repoAddress) {
-        history.replace(
+        history.push(
           workspacePathFromAddress(
             node.repoAddress,
             `/asset-groups/${node.groupName}/lineage/${node.assetKey.path
diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetNodeLineageGraph.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetNodeLineageGraph.tsx
index d729dd4656a50..3eab93656a98a 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetNodeLineageGraph.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetNodeLineageGraph.tsx
@@ -9,7 +9,7 @@ import {AssetGroupNode} from '../asset-graph/AssetGroupNode';
 import {AssetNodeMinimal, AssetNode} from '../asset-graph/AssetNode';
 import {AssetNodeLink} from '../asset-graph/ForeignNode';
 import {GraphData, LiveData, toGraphId} from '../asset-graph/Utils';
-import {SVGViewport} from '../graph/SVGViewport';
+import {DEFAULT_MAX_ZOOM, SVGViewport} from '../graph/SVGViewport';
 import {useAssetLayout} from '../graph/asyncGraphLayout';
 import {AssetKeyInput} from '../graphql/types';
 import {getJSONForKey} from '../hooks/useStateWithStorage';
@@ -64,8 +64,8 @@ export const AssetNodeLineageGraph: React.FC<{
         viewportEl.current?.autocenter(true);
         e.stopPropagation();
       }}
-      maxZoom={1.2}
-      maxAutocenterZoom={1.2}
+      maxZoom={DEFAULT_MAX_ZOOM}
+      maxAutocenterZoom={DEFAULT_MAX_ZOOM}
     >
       {({scale}) => (
         <SVGContainer width={layout.width} height={layout.height}>
diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetsGroupsGlobalGraphRoot.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetsGroupsGlobalGraphRoot.tsx
index 0cda0623eb016..1f348adccfc18 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetsGroupsGlobalGraphRoot.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetsGroupsGlobalGraphRoot.tsx
@@ -4,17 +4,17 @@ import * as React from 'react';
 import {useHistory, useParams} from 'react-router-dom';
 
 import {AssetGraphExplorer} from '../asset-graph/AssetGraphExplorer';
+import {AssetGraphExplorerFilters} from '../asset-graph/AssetGraphExplorerFilters';
 import {AssetGraphFetchScope} from '../asset-graph/useAssetGraphData';
 import {AssetLocation} from '../asset-graph/useFindAssetLocation';
 import {AssetGroupSelector} from '../graphql/types';
 import {useDocumentTitle} from '../hooks/useDocumentTitle';
 import {useQueryPersistedState} from '../hooks/useQueryPersistedState';
-import {RepoFilterButton} from '../instance/RepoFilterButton';
 import {ExplorerPath} from '../pipelines/PipelinePathUtils';
 import {ReloadAllButton} from '../workspace/ReloadAllButton';
 import {WorkspaceContext} from '../workspace/WorkspaceContext';
 
-import {AssetGroupSuggest, buildAssetGroupSelector} from './AssetGroupSuggest';
+import {buildAssetGroupSelector} from './AssetGroupSuggest';
 import {assetDetailsPathForKey} from './assetDetailsPathForKey';
 import {
   globalAssetGraphPathFromString,
@@ -27,7 +27,7 @@ interface AssetGroupRootParams {
 
 export const AssetsGroupsGlobalGraphRoot: React.FC = () => {
   const {0: path} = useParams<AssetGroupRootParams>();
-  const {allRepos, visibleRepos} = React.useContext(WorkspaceContext);
+  const {visibleRepos} = React.useContext(WorkspaceContext);
   const history = useHistory();
 
   const [filters, setFilters] = useQueryPersistedState<{groups: AssetGroupSelector[]}>({
@@ -103,14 +103,14 @@ export const AssetsGroupsGlobalGraphRoot: React.FC = () => {
       <AssetGraphExplorer
         fetchOptions={fetchOptions}
         fetchOptionFilters={
-          <>
-            {allRepos.length > 1 && <RepoFilterButton />}
-            <AssetGroupSuggest
-              assetGroups={assetGroups}
-              value={filters.groups || []}
-              onChange={(groups) => setFilters({...filters, groups})}
-            />
-          </>
+          <AssetGraphExplorerFilters
+            assetGroups={assetGroups}
+            visibleAssetGroups={React.useMemo(() => filters.groups || [], [filters.groups])}
+            setGroupFilters={React.useCallback((groups) => setFilters({...filters, groups}), [
+              filters,
+              setFilters,
+            ])}
+          />
         }
         options={{preferAssetRendering: true, explodeComposites: true}}
         explorerPath={globalAssetGraphPathFromString(path)}
diff --git a/js_modules/dagster-ui/packages/ui-core/src/graph/OpGraph.tsx b/js_modules/dagster-ui/packages/ui-core/src/graph/OpGraph.tsx
index 72fcfb6d581f7..ebca923fcd8b8 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/graph/OpGraph.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/graph/OpGraph.tsx
@@ -8,7 +8,7 @@ import {OpNameOrPath} from '../ops/OpNameOrPath';
 import {OpEdges} from './OpEdges';
 import {OpNode, OP_NODE_DEFINITION_FRAGMENT, OP_NODE_INVOCATION_FRAGMENT} from './OpNode';
 import {ParentOpNode, SVGLabeledParentRect} from './ParentOpNode';
-import {DETAIL_ZOOM, SVGViewport, SVGViewportInteractor} from './SVGViewport';
+import {DEFAULT_MAX_ZOOM, DETAIL_ZOOM, SVGViewport, SVGViewportInteractor} from './SVGViewport';
 import {OpGraphLayout} from './asyncGraphLayout';
 import {
   Edge,
@@ -199,7 +199,7 @@ export class OpGraph extends React.Component<OpGraphProps> {
       <SVGViewport
         ref={this.viewportEl}
         key={jobName}
-        maxZoom={1.2}
+        maxZoom={DEFAULT_MAX_ZOOM}
         defaultZoom="zoom-to-fit"
         interactor={interactor || SVGViewport.Interactors.PanAndZoom}
         graphWidth={layout.width}
diff --git a/js_modules/dagster-ui/packages/ui-core/src/graph/SVGViewport.tsx b/js_modules/dagster-ui/packages/ui-core/src/graph/SVGViewport.tsx
index a5f77c22b07b5..2a04c8a03e8f9 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/graph/SVGViewport.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/graph/SVGViewport.tsx
@@ -50,6 +50,7 @@ export const DETAIL_ZOOM = 0.75;
 const DEFAULT_ZOOM = 0.75;
 const DEFAULT_MAX_AUTOCENTER_ZOOM = 1;
 const DEFAULT_MIN_ZOOM = 0.17;
+export const DEFAULT_MAX_ZOOM = 1.2;
 
 const BUTTON_INCREMENT = 0.05;
 
@@ -433,7 +434,12 @@ export class SVGViewport extends React.Component<SVGViewportProps, SVGViewportSt
   }
 
   public zoomToSVGBox(box: IBounds, animate: boolean, newScale = this.state.scale) {
-    this.zoomToSVGCoords(box.x + box.width / 2, box.y + box.height / 2, animate, newScale);
+    this.zoomToSVGCoords(
+      box.x + box.width / 2,
+      box.y + box.height / 2,
+      animate,
+      newScale === this.getMinZoom() ? this.getMaxZoom() : newScale,
+    );
   }
 
   public zoomToSVGCoords(x: number, y: number, animate: boolean, scale = this.state.scale) {
diff --git a/js_modules/dagster-ui/packages/ui-core/src/nav/getLeftNavItemsForOption.tsx b/js_modules/dagster-ui/packages/ui-core/src/nav/getLeftNavItemsForOption.tsx
index 9ec8515d2c82f..19601decfab0b 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/nav/getLeftNavItemsForOption.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/nav/getLeftNavItemsForOption.tsx
@@ -119,7 +119,7 @@ const Label = styled.div<{$hasIcon: boolean}>`
   white-space: nowrap;
 `;
 
-const LabelTooltipStyles = JSON.stringify({
+export const LabelTooltipStyles = JSON.stringify({
   background: Colors.Gray100,
   filter: `brightness(97%)`,
   color: Colors.Gray900,
@@ -140,11 +140,18 @@ const TruncatingName = styled.div`
 
 export const TruncatedTextWithFullTextOnHover = React.forwardRef(
   (
-    {text, tooltipStyle, ...rest}: {text: string; tooltipStyle?: string},
+    {
+      text,
+      tooltipStyle,
+      tooltipText,
+      ...rest
+    }:
+      | {text: string; tooltipStyle?: string; tooltipText?: null}
+      | {text: React.ReactNode; tooltipStyle?: string; tooltipText: string},
     ref: React.ForwardedRef<HTMLDivElement>,
   ) => (
     <TruncatingName
-      data-tooltip={text}
+      data-tooltip={tooltipText ?? text}
       data-tooltip-style={tooltipStyle ?? LabelTooltipStyles}
       ref={ref}
       {...rest}
diff --git a/js_modules/dagster-ui/packages/ui-core/src/ui/Filters/FilterDropdown.tsx b/js_modules/dagster-ui/packages/ui-core/src/ui/Filters/FilterDropdown.tsx
index e11fd7f7085ff..99b9fd75bebce 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/ui/Filters/FilterDropdown.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/ui/Filters/FilterDropdown.tsx
@@ -250,7 +250,7 @@ export const FilterDropdown = ({filters, setIsOpen, setPortaledElements}: Filter
             <Container
               ref={parentRef}
               style={{
-                maxHeight: '500px',
+                maxHeight: `min(500px, 50vh)`,
                 overflowY: 'auto',
                 width: selectedFilter?.menuWidth || 'auto',
               }}