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
index 048ad9d89c176..3b3b15f25c7e8 100644
--- 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
@@ -11,6 +11,7 @@ import {
   Popover,
   useViewport,
   UnstyledButton,
+  TextInput,
 } from '@dagster-io/ui-components';
 import {useVirtualizer} from '@tanstack/react-virtual';
 import React from 'react';
@@ -32,179 +33,200 @@ type GroupNode = {
   id: string;
 };
 
-const indentColors = [
-  Colors.Blue100,
-  Colors.LightPurple,
-  Colors.Yellow200,
-  Colors.Gray300,
-  Colors.KeylineGray,
-];
+export const AssetGraphExplorerSidebar = React.memo(
+  ({
+    assetGraphData,
+    lastSelectedNode,
+    selectNode,
+  }: {
+    assetGraphData: GraphData;
+    lastSelectedNode: GraphNode;
+    selectNode: (e: React.MouseEvent<any>, nodeId: string) => void;
+  }) => {
+    const {rootGroupsWithRootNodes, nodeToGroupId} = React.useMemo(() => {
+      const nodeToGroupId: Record<string, string> = {};
+      const groups: Record<string, GroupNode> = {};
+      Object.entries(assetGraphData.nodes).forEach(([_, node]) => {
+        const groupName = node.definition.groupName;
+        const repositoryLocationName = node.definition.repository.location.name;
+        const repositoryName = node.definition.repository.name;
+        const groupId = `${groupName}@${repositoryName}@${repositoryLocationName}`;
+        groups[groupId] = groups[groupId] || {
+          nodes: [],
+          groupName,
+          repositoryLocationName,
+          repositoryName,
+          id: groupId,
+        };
+        groups[groupId]!.nodes.push(node.id);
+        nodeToGroupId[node.id] = groupId;
+      });
+      Object.entries(groups).forEach(([_, group]) => {
+        group.nodes = group.nodes
+          // Exclude nodes without data, these are nodes from another group which we don't have graph data for,
+          // We don't want those nodes to show up as roots in the sidebar
+          .filter(
+            (nodeId) =>
+              Object.keys(assetGraphData.upstream[nodeId] || {}).filter(
+                (id) => !!assetGraphData.nodes[id],
+              ).length === 0,
+          )
+          .sort((nodeA, nodeB) => COLLATOR.compare(nodeA, nodeB));
+      });
+      return {rootGroupsWithRootNodes: groups, nodeToGroupId};
+    }, [assetGraphData]);
 
-export const AssetGraphExplorerSidebar = ({
-  assetGraphData,
-  lastSelectedNode,
-  selectNode,
-}: {
-  assetGraphData: GraphData;
-  lastSelectedNode: GraphNode;
-  selectNode: (e: React.MouseEvent<any>, nodeId: string) => void;
-}) => {
-  const [openNodes, setOpenNodes] = React.useState<Set<string>>(() => new Set());
-  const {rootGroupsWithRootNodes, nodeToGroupId} = React.useMemo(() => {
-    const nodeToGroupId: Record<string, string> = {};
-    const groups: Record<string, GroupNode> = {};
-    Object.entries(assetGraphData.nodes).forEach(([_, node]) => {
-      const groupName = node.definition.groupName;
-      const repositoryLocationName = node.definition.repository.location.name;
-      const repositoryName = node.definition.repository.name;
-      const groupId = `${groupName}@${repositoryName}@${repositoryLocationName}`;
-      groups[groupId] = groups[groupId] || {
-        nodes: [],
-        groupName,
-        repositoryLocationName,
-        repositoryName,
-        id: groupId,
-      };
-      groups[groupId]!.nodes.push(node.id);
-      nodeToGroupId[node.id] = groupId;
-    });
-    Object.entries(groups).forEach(([_, group]) => {
-      group.nodes = group.nodes
-        .filter((nodeId) => !assetGraphData.upstream[nodeId])
-        .sort((nodeA, nodeB) => COLLATOR.compare(nodeA, nodeB));
+    const [openNodes, setOpenNodes] = React.useState<Set<string>>(() => {
+      const set = new Set<string>();
+      if (Object.keys(rootGroupsWithRootNodes).length === 1) {
+        set.add(Object.keys(rootGroupsWithRootNodes)[0]!);
+      }
+      return set;
     });
-    return {rootGroupsWithRootNodes: groups, nodeToGroupId};
-  }, [assetGraphData]);
 
-  const renderedNodes = React.useMemo(() => {
-    const queue = Object.entries(rootGroupsWithRootNodes).map(([_, {id}]) => ({level: 1, id}));
+    const renderedNodes = React.useMemo(() => {
+      const queue = Object.entries(rootGroupsWithRootNodes).map(([_, {id}]) => ({level: 1, id}));
 
-    const renderedNodes: {level: number; id: string}[] = [];
-    while (queue.length) {
-      const node = queue.shift()!;
-      renderedNodes.push(node);
-      if (openNodes.has(node.id)) {
-        const groupNode = rootGroupsWithRootNodes[node.id];
-        if (groupNode) {
-          const downstream = groupNode.nodes;
-          if (downstream.length) {
-            queue.unshift(...downstream.map((id) => ({level: 2, id})));
+      const renderedNodes: {level: number; id: string}[] = [];
+      while (queue.length) {
+        const node = queue.shift()!;
+        renderedNodes.push(node);
+        if (openNodes.has(node.id)) {
+          const groupNode = rootGroupsWithRootNodes[node.id];
+          let downstream;
+          if (groupNode) {
+            downstream = groupNode.nodes;
+          } else {
+            downstream = Object.keys(assetGraphData.downstream[node.id] || {});
           }
-        } else {
-          const downstream = assetGraphData.downstream[node.id];
           if (downstream) {
-            queue.unshift(...Object.keys(downstream).map((id) => ({level: node.level + 1, id})));
+            queue.unshift(...downstream.map((id) => ({level: node.level + 1, id})));
           }
         }
       }
-    }
-    return renderedNodes;
-  }, [assetGraphData.downstream, openNodes, rootGroupsWithRootNodes]);
-
-  const containerRef = React.useRef<HTMLDivElement | null>(null);
+      return renderedNodes.filter(
+        // Exclude nodes without data, these are nodes from another group which we don't have graph data for,
+        // We don't want those nodes to show up as leaf nodes in the sidebar
+        ({id}) => !!assetGraphData.nodes[id] || !!rootGroupsWithRootNodes[id],
+      );
+    }, [assetGraphData, openNodes, rootGroupsWithRootNodes]);
 
-  const rowVirtualizer = useVirtualizer({
-    count: renderedNodes.length,
-    getScrollElement: () => containerRef.current,
-    estimateSize: () => 32,
-    overscan: 5,
-  });
+    const containerRef = React.useRef<HTMLDivElement | null>(null);
+    const {containerProps, viewport} = useViewport();
 
-  const totalHeight = rowVirtualizer.getTotalSize();
-  const items = rowVirtualizer.getVirtualItems();
+    const rowVirtualizer = useVirtualizer({
+      count: renderedNodes.length,
+      getScrollElement: () => containerRef.current,
+      estimateSize: () => 34,
 
-  React.useLayoutEffect(() => {
-    requestAnimationFrame(() => {
-      rowVirtualizer.measure();
+      // TODO: Figure out why virtualizer isn't filling up all of the space automatically...
+      overscan: viewport.height / 34,
     });
-  }, [rowVirtualizer]);
 
-  const indexOfLastSelectedNode = React.useMemo(
-    () =>
-      lastSelectedNode ? renderedNodes.findIndex((node) => node.id === lastSelectedNode.id) : -1,
-    [renderedNodes, lastSelectedNode],
-  );
+    const totalHeight = rowVirtualizer.getTotalSize();
+    const items = rowVirtualizer.getVirtualItems();
 
-  React.useLayoutEffect(() => {
-    if (indexOfLastSelectedNode !== -1) {
-      rowVirtualizer.scrollToIndex(indexOfLastSelectedNode);
-    }
-  }, [indexOfLastSelectedNode, rowVirtualizer]);
-
-  React.useEffect(() => {
-    if (lastSelectedNode) {
-      setOpenNodes((nodes) => {
-        const nextOpenNodes = new Set(nodes);
-        nextOpenNodes.add(lastSelectedNode.id);
-        const upstreamQueue = Object.keys(assetGraphData.upstream[lastSelectedNode.id] ?? {});
-        while (upstreamQueue.length) {
-          const next = upstreamQueue.pop()!;
-          const nextUpstream = Object.keys(assetGraphData.upstream[next] ?? {});
-          upstreamQueue.push(...nextUpstream);
-          nextOpenNodes.add(next);
-        }
-        nextOpenNodes.add(nodeToGroupId[lastSelectedNode.id]!);
-        return nextOpenNodes;
-      });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [lastSelectedNode, nodeToGroupId[lastSelectedNode?.id ?? 0]]);
+    const indexOfLastSelectedNode = React.useMemo(
+      () =>
+        lastSelectedNode ? renderedNodes.findIndex((node) => node.id === lastSelectedNode.id) : -1,
+      [renderedNodes, lastSelectedNode],
+    );
 
-  const {containerProps, viewport} = useViewport();
+    React.useLayoutEffect(() => {
+      if (indexOfLastSelectedNode !== -1) {
+        rowVirtualizer.scrollToIndex(indexOfLastSelectedNode);
+      }
+    }, [indexOfLastSelectedNode, rowVirtualizer]);
 
-  React.useLayoutEffect(() => {
-    rowVirtualizer.measure();
-  }, [viewport.width, viewport.height, rowVirtualizer]);
+    React.useEffect(() => {
+      if (lastSelectedNode) {
+        setOpenNodes((nodes) => {
+          const nextOpenNodes = new Set(nodes);
+          nextOpenNodes.add(lastSelectedNode.id);
+          const upstreamQueue = Object.keys(assetGraphData.upstream[lastSelectedNode.id] ?? {});
+          while (upstreamQueue.length) {
+            const next = upstreamQueue.pop()!;
+            const nextUpstream = Object.keys(assetGraphData.upstream[next] ?? {});
+            upstreamQueue.push(...nextUpstream);
+            nextOpenNodes.add(next);
+          }
+          nextOpenNodes.add(nodeToGroupId[lastSelectedNode.id]!);
+          return nextOpenNodes;
+        });
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [lastSelectedNode, nodeToGroupId[lastSelectedNode?.id ?? 0]]);
 
-  return (
-    <Container
-      {...containerProps}
-      ref={(el) => {
-        if (el) {
-          containerProps.ref(el);
-          containerRef.current = el;
-        }
-      }}
-    >
-      <Inner $totalHeight={totalHeight}>
-        {items.map(({index, key, size, start, measureElement}) => {
-          const node = renderedNodes[index]!;
-          return (
-            <Row
-              $height={size}
-              $start={start}
-              key={key}
-              style={{overflow: 'visible'}}
-              ref={measureElement}
-            >
-              <Node
-                isOpen={openNodes.has(node.id)}
-                assetGraphData={assetGraphData}
-                node={(assetGraphData.nodes[node.id] ?? rootGroupsWithRootNodes[node.id])!}
-                level={node.level}
-                isSelected={lastSelectedNode?.id === node.id}
-                toggleOpen={() => {
-                  setOpenNodes((nodes) => {
-                    const openNodes = new Set(nodes);
-                    const isOpen = openNodes.has(node.id);
-                    if (isOpen) {
-                      openNodes.delete(node.id);
-                    } else {
-                      openNodes.add(node.id);
-                    }
-                    return openNodes;
-                  });
-                }}
-                selectNode={selectNode}
-                measureElement={measureElement}
-              />
-            </Row>
-          );
-        })}
-      </Inner>
-    </Container>
-  );
-};
+    return (
+      <Box flex={{direction: 'column'}} style={{height: '100%'}}>
+        <Box flex={{direction: 'column'}} padding={8}>
+          <SearchContainer>
+            <Box flex={{direction: 'row', gap: 4}}>
+              <Icon name="search" color={Colors.Gray200} size={20} />
+              <Box flex={{direction: 'column', grow: 1}}>
+                <SearchInput />
+              </Box>
+            </Box>
+          </SearchContainer>
+        </Box>
+        <Box flex={{grow: 1}}>
+          <Container
+            style={{width: '100%'}}
+            {...containerProps}
+            ref={(el) => {
+              if (el) {
+                console.log({el});
+                containerProps.ref(el);
+                containerRef.current = el;
+              }
+            }}
+          >
+            <Inner $totalHeight={totalHeight}>
+              {items.map(({index, key, size, start, measureElement}) => {
+                const node = renderedNodes[index]!;
+                const row = assetGraphData.nodes[node.id] ?? rootGroupsWithRootNodes[node.id];
+                setTimeout(measureElement, 100);
+                return (
+                  <Row
+                    $height={size}
+                    $start={start}
+                    key={key}
+                    style={{overflow: 'visible'}}
+                    ref={measureElement}
+                  >
+                    {row ? (
+                      <Node
+                        isOpen={openNodes.has(node.id)}
+                        assetGraphData={assetGraphData}
+                        node={row}
+                        level={node.level}
+                        isSelected={lastSelectedNode?.id === node.id}
+                        toggleOpen={() => {
+                          setOpenNodes((nodes) => {
+                            const openNodes = new Set(nodes);
+                            const isOpen = openNodes.has(node.id);
+                            if (isOpen) {
+                              openNodes.delete(node.id);
+                            } else {
+                              openNodes.add(node.id);
+                            }
+                            return openNodes;
+                          });
+                        }}
+                        selectNode={selectNode}
+                        measureElement={measureElement}
+                      />
+                    ) : null}
+                  </Row>
+                );
+              })}
+            </Inner>
+          </Container>
+        </Box>
+      </Box>
+    );
+  },
+);
 
 const Node = ({
   assetGraphData,
@@ -231,10 +253,16 @@ const Node = ({
     ? `${node.groupName ?? 'default'} in ${node.repositoryName}@${node.repositoryLocationName}`
     : node.assetKey.path[node.assetKey.path.length - 1]!;
 
-  const upstream = isGroupNode ? [] : Object.keys(assetGraphData.upstream[node.id] ?? {});
+  const upstream = isGroupNode
+    ? []
+    : Object.keys(assetGraphData.upstream[node.id] ?? {}).filter(
+        (id) => !!assetGraphData.nodes[id],
+      );
   const downstream = isGroupNode
     ? node.nodes
-    : Object.keys(assetGraphData.downstream[node.id] ?? {});
+    : Object.keys(assetGraphData.downstream[node.id] ?? {}).filter(
+        (id) => !!assetGraphData.nodes[id],
+      );
   const elementRef = React.useRef<HTMLDivElement | null>(null);
   React.useLayoutEffect(() => {
     setTimeout(() => {
@@ -251,92 +279,97 @@ const Node = ({
     <Box
       ref={elementRef}
       onClick={(e) => selectNode(e, node.id)}
-      border={{side: 'bottom', width: 1, color: Colors.KeylineGray}}
       style={{
         ...(downstream && !isGroupNode ? {cursor: 'pointer'} : {}),
-        ...(isSelected ? {background: Colors.LightPurple} : {}),
       }}
-      padding={{left: (8 * level) as any, right: 24}}
     >
-      <Box
-        padding={{vertical: 8, left: (downstream.length ? 0 : 20) as any}}
-        border={{side: 'left', width: 1, color: indentColors[level % indentColors.length]!}}
-        flex={{direction: 'row', gap: 4, alignItems: 'center'}}
-      >
-        {downstream.length ? (
-          <div onClick={toggleOpen} style={{cursor: 'pointer'}}>
-            <Icon
-              name="arrow_drop_down"
-              style={{transform: isOpen ? 'rotate(0deg)' : 'rotate(-90deg)'}}
-            />
-          </div>
-        ) : null}
-        <Box
-          flex={{
-            direction: 'row',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            gap: 12,
-            grow: 1,
-          }}
-        >
-          <div
-            data-tooltip={displayName}
-            data-tooltip-style={NameTooltipStyle}
-            style={{overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}}
-          >
-            {withMiddleTruncation(displayName, {maxLength: 30})}
-          </div>
-          <UpstreamDownstreamDialog
-            title="Downstream assets"
-            assets={downstream.map((id) => assetGraphData.nodes[id]!)}
-            isOpen={showDownstream}
-            close={() => {
-              setShowDownstream(false);
-            }}
-            selectNode={selectNode}
-          />
-          <UpstreamDownstreamDialog
-            title="Upstream assets"
-            assets={upstream.map((id) => assetGraphData.nodes[id]!)}
-            isOpen={showUpstream}
-            close={() => {
-              setShowUpstream(false);
+      <BoxWrapper level={level}>
+        <Box padding={{right: 12}} flex={{direction: 'row', gap: 2, alignItems: 'center'}}>
+          {downstream.length ? (
+            <div
+              onClick={(e) => {
+                e.stopPropagation();
+                toggleOpen();
+              }}
+              style={{cursor: 'pointer'}}
+            >
+              <Icon
+                name="arrow_drop_down"
+                style={{transform: isOpen ? 'rotate(0deg)' : 'rotate(-90deg)'}}
+              />
+            </div>
+          ) : null}
+          <Box
+            flex={{
+              direction: 'row',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              gap: 12,
+              grow: 1,
             }}
-            selectNode={selectNode}
-          />
-          <Popover
-            content={
-              <Menu>
-                {upstream.length ? (
-                  <MenuItem
-                    text={`View upstream (${upstream.length})`}
-                    onClick={() => {
-                      setShowUpstream(true);
-                    }}
-                  />
-                ) : null}
-                {downstream.length ? (
-                  <MenuItem
-                    text={`View downstream (${downstream.length})`}
-                    onClick={() => {
-                      setShowDownstream(true);
-                    }}
-                  />
-                ) : null}
-              </Menu>
-            }
-            hoverOpenDelay={100}
-            hoverCloseDelay={100}
-            placement="top"
-            shouldReturnFocusOnClose
+            padding={{horizontal: 12, vertical: 8}}
+            style={{borderRadius: '8px', ...(isSelected ? {background: Colors.Gray100} : {})}}
           >
-            <div style={{cursor: 'pointer'}}>
-              <Icon name="more_horiz" />
+            <div
+              data-tooltip={displayName}
+              data-tooltip-style={NameTooltipStyle}
+              style={{overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}}
+            >
+              {withMiddleTruncation(displayName, {maxLength: 30})}
             </div>
-          </Popover>
+            <UpstreamDownstreamDialog
+              title="Downstream assets"
+              assets={downstream}
+              assetGraphData={assetGraphData}
+              isOpen={showDownstream}
+              close={() => {
+                setShowDownstream(false);
+              }}
+              selectNode={selectNode}
+            />
+            <UpstreamDownstreamDialog
+              title="Upstream assets"
+              assets={upstream}
+              assetGraphData={assetGraphData}
+              isOpen={showUpstream}
+              close={() => {
+                setShowUpstream(false);
+              }}
+              selectNode={selectNode}
+            />
+            <Popover
+              content={
+                <Menu>
+                  {upstream.length ? (
+                    <MenuItem
+                      text={`View upstream (${upstream.length})`}
+                      onClick={() => {
+                        setShowUpstream(true);
+                      }}
+                    />
+                  ) : null}
+                  {downstream.length ? (
+                    <MenuItem
+                      text={`View downstream (${downstream.length})`}
+                      onClick={() => {
+                        setShowDownstream(true);
+                      }}
+                    />
+                  ) : null}
+                </Menu>
+              }
+              hoverOpenDelay={100}
+              hoverCloseDelay={100}
+              placement="right"
+              shouldReturnFocusOnClose
+            >
+              <div style={{cursor: 'pointer'}}>
+                <Icon name="expand_more" color={Colors.Gray500} />
+              </div>
+            </Popover>
+          </Box>
         </Box>
-      </Box>
+      </BoxWrapper>
     </Box>
   );
 };
@@ -344,12 +377,14 @@ const Node = ({
 const UpstreamDownstreamDialog = ({
   title,
   assets,
+  assetGraphData,
   isOpen,
   close,
   selectNode,
 }: {
   title: string;
-  assets: GraphNode[];
+  assets: string[];
+  assetGraphData: GraphData;
   isOpen: boolean;
   close: () => void;
   selectNode: (e: React.MouseEvent<any>, nodeId: string) => void;
@@ -357,19 +392,25 @@ const UpstreamDownstreamDialog = ({
   return (
     <Dialog isOpen={isOpen} onClose={close} title={title}>
       <DialogBody>
-        {assets.map((asset) => (
-          <UnstyledButton
-            key={asset.id}
-            onClick={(e) => {
-              selectNode(e, asset.id);
-              close();
-            }}
-          >
-            <DialogAssetButton padding={{vertical: 8, horizontal: 12}}>
-              {asset.assetKey.path[asset.assetKey.path.length - 1]}
-            </DialogAssetButton>
-          </UnstyledButton>
-        ))}
+        {assets.map((assetId) => {
+          const asset = assetGraphData.nodes[assetId];
+          if (!asset) {
+            return null;
+          }
+          return (
+            <UnstyledButton
+              key={asset.id}
+              onClick={(e) => {
+                selectNode(e, asset.id);
+                close();
+              }}
+            >
+              <DialogAssetButton padding={{vertical: 8, horizontal: 12}}>
+                {asset.assetKey.path[asset.assetKey.path.length - 1]}
+              </DialogAssetButton>
+            </UnstyledButton>
+          );
+        })}
       </DialogBody>
       <DialogFooter topBorder>
         <Button onClick={close} intent="primary">
@@ -386,3 +427,38 @@ const DialogAssetButton = styled(Box)`
     background: ${Colors.Gray100};
   }
 `;
+
+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: 12}} border={{side: 'left', width: 1, color: Colors.KeylineGray}}>
+          {sofar}
+        </Box>
+      );
+    }
+    return sofar;
+  }, [level, children]);
+
+  return <>{wrapper}</>;
+};
+
+const SearchInput = styled.input`
+  border: none;
+  color: ${Colors.Gray600};
+  font-size: 18px;
+  margin-left: 4px;
+  outline: none;
+  width: 100%;
+
+  &::placeholder {
+    color: ${Colors.Gray200};
+  }
+`;
+
+const SearchContainer = styled.div`
+  background-color: ${Colors.White};
+  border-radius: 4px;
+  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
+`;
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