From 635eb7e7da6ade16c21db76f053294523b6bb5d8 Mon Sep 17 00:00:00 2001
From: Marco Salazar <marco@elementl.com>
Date: Thu, 28 Sep 2023 06:46:50 -0400
Subject: [PATCH 1/6] basic refactoring

---
 .../packages/ui-core/src/asset-graph/sidebar/util.ts       | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 js_modules/dagster-ui/packages/ui-core/src/asset-graph/sidebar/util.ts

diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/sidebar/util.ts b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/sidebar/util.ts
new file mode 100644
index 0000000000000..b7f66f259f709
--- /dev/null
+++ b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/sidebar/util.ts
@@ -0,0 +1,7 @@
+export function nodeId(node: {path: string; id: string} | {id: string}) {
+  return 'path' in node ? node.path : node.id;
+}
+
+export function getDisplayName(node: GraphNode) {
+  return node.assetKey.path[node.assetKey.path.length - 1]!;
+}

From 304c0b5a578224fe6b6d62282460857e6906cf5e Mon Sep 17 00:00:00 2001
From: Marco Salazar <marco@elementl.com>
Date: Thu, 28 Sep 2023 07:07:56 -0400
Subject: [PATCH 2/6] import

---
 .../packages/ui-core/src/asset-graph/sidebar/Node.tsx           | 2 ++
 .../dagster-ui/packages/ui-core/src/asset-graph/sidebar/util.ts | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/sidebar/Node.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/sidebar/Node.tsx
index 7ac4fa3c26ed6..a95b46ad2a268 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/sidebar/Node.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/sidebar/Node.tsx
@@ -27,6 +27,8 @@ import {GraphData, GraphNode, tokenForAssetKey} from '../Utils';
 
 import {FolderNodeNonAssetType, StatusCaseDot, getDisplayName} from './util';
 
+import {getDisplayName} from './util';
+
 export const Node = ({
   graphData,
   node,
diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/sidebar/util.ts b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/sidebar/util.ts
index b7f66f259f709..ebb913b79aee6 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/sidebar/util.ts
+++ b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/sidebar/util.ts
@@ -1,3 +1,5 @@
+import {GraphNode} from '../Utils';
+
 export function nodeId(node: {path: string; id: string} | {id: string}) {
   return 'path' in node ? node.path : node.id;
 }

From a931c43e65efc7f089992e432e67731fbd738f01 Mon Sep 17 00:00:00 2001
From: Marco Salazar <marco@elementl.com>
Date: Thu, 28 Sep 2023 07:13:43 -0400
Subject: [PATCH 3/6] move types to util

---
 .../packages/ui-core/src/asset-graph/sidebar/Node.tsx    | 2 --
 .../packages/ui-core/src/asset-graph/sidebar/util.ts     | 9 ---------
 2 files changed, 11 deletions(-)
 delete mode 100644 js_modules/dagster-ui/packages/ui-core/src/asset-graph/sidebar/util.ts

diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/sidebar/Node.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/sidebar/Node.tsx
index a95b46ad2a268..7ac4fa3c26ed6 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/sidebar/Node.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/sidebar/Node.tsx
@@ -27,8 +27,6 @@ import {GraphData, GraphNode, tokenForAssetKey} from '../Utils';
 
 import {FolderNodeNonAssetType, StatusCaseDot, getDisplayName} from './util';
 
-import {getDisplayName} from './util';
-
 export const Node = ({
   graphData,
   node,
diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/sidebar/util.ts b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/sidebar/util.ts
deleted file mode 100644
index ebb913b79aee6..0000000000000
--- a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/sidebar/util.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import {GraphNode} from '../Utils';
-
-export function nodeId(node: {path: string; id: string} | {id: string}) {
-  return 'path' in node ? node.path : node.id;
-}
-
-export function getDisplayName(node: GraphNode) {
-  return node.assetKey.path[node.assetKey.path.length - 1]!;
-}

From 06457c805c6d9b554fa2c4725e9a7b52ce27a87b Mon Sep 17 00:00:00 2001
From: Marco Salazar <marco@elementl.com>
Date: Fri, 29 Sep 2023 01:25:38 -0400
Subject: [PATCH 4/6] button

---
 .../src/components/RefreshableCountdown.tsx   |   2 +-
 .../src/asset-data/AssetDataRefreshButton.tsx |  73 ++++++++++++
 .../src/asset-data/AssetLiveDataProvider.tsx  | 105 +++++++++++++++---
 .../src/asset-graph/AssetGraphExplorer.tsx    |   2 +
 .../ui-core/src/asset-graph/sidebar/Node.tsx  |   1 -
 5 files changed, 163 insertions(+), 20 deletions(-)
 create mode 100644 js_modules/dagster-ui/packages/ui-core/src/asset-data/AssetDataRefreshButton.tsx

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/RefreshableCountdown.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/RefreshableCountdown.tsx
index 841c1866961ce..4dc25b7ddb829 100644
--- a/js_modules/dagster-ui/packages/ui-components/src/components/RefreshableCountdown.tsx
+++ b/js_modules/dagster-ui/packages/ui-components/src/components/RefreshableCountdown.tsx
@@ -36,7 +36,7 @@ export const RefreshableCountdown = (props: Props) => {
   );
 };
 
-const RefreshButton = styled.button`
+export const RefreshButton = styled.button`
   border: none;
   cursor: pointer;
   padding: 8px;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-data/AssetDataRefreshButton.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-data/AssetDataRefreshButton.tsx
new file mode 100644
index 0000000000000..13b7628cd54c9
--- /dev/null
+++ b/js_modules/dagster-ui/packages/ui-core/src/asset-data/AssetDataRefreshButton.tsx
@@ -0,0 +1,73 @@
+import {Box, Button, Colors, Icon, RefreshButton, Tooltip} from '@dagster-io/ui-components';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import updateLocale from 'dayjs/plugin/updateLocale';
+import React from 'react';
+
+dayjs.extend(relativeTime);
+dayjs.extend(updateLocale);
+
+dayjs.updateLocale('en', {
+  relativeTime: {
+    future: 'in %s',
+    past: '%s ago',
+    s: '%d seconds',
+    m: 'a minute',
+    mm: '%d minutes',
+    h: 'an hour',
+    hh: '%d hours',
+    d: 'a day',
+    dd: '%d days',
+    M: 'a month',
+    MM: '%d months',
+    y: 'a year',
+    yy: '%d years',
+  },
+});
+
+export const AssetDataRefreshButton = ({
+  isRefreshing,
+  onRefresh,
+  oldestDataTimestamp,
+}: {
+  isRefreshing: boolean;
+  onRefresh: () => void;
+  oldestDataTimestamp: number;
+}) => {
+  return (
+    <Tooltip
+      content={
+        isRefreshing ? (
+          'Refreshing asset data…'
+        ) : (
+          <Box flex={{direction: 'column', gap: 4}}>
+            <TimeFromNowWithSeconds timestamp={oldestDataTimestamp} />
+            <div>Click to refresh now</div>
+          </Box>
+        )
+      }
+    >
+      <Button
+        icon={<Icon name="refresh" color={Colors.Gray400} />}
+        onClick={() => {
+          if (!isRefreshing) {
+            onRefresh();
+          }
+        }}
+      />
+    </Tooltip>
+  );
+};
+
+const TimeFromNowWithSeconds: React.FC<{timestamp: number}> = ({timestamp}) => {
+  const [text, setText] = React.useState(dayjs(timestamp).fromNow(true));
+  React.useEffect(() => {
+    const interval = setInterval(() => {
+      setText(dayjs(timestamp).fromNow(true));
+    }, 1000);
+    return () => {
+      clearInterval(interval);
+    };
+  }, [timestamp]);
+  return <>{text === '0s' ? 'Refreshing asset data…' : `Data is at most ${text} old`}</>;
+};
diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-data/AssetLiveDataProvider.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-data/AssetLiveDataProvider.tsx
index 39cc21c9027b8..4d7ca344bbb0d 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/asset-data/AssetLiveDataProvider.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/asset-data/AssetLiveDataProvider.tsx
@@ -14,6 +14,8 @@ import {AssetKeyInput} from '../graphql/types';
 import {isDocumentVisible, useDocumentVisibility} from '../hooks/useDocumentVisibility';
 import {useDidLaunchEvent} from '../runs/RunUtils';
 
+import {AssetDataRefreshButton} from './AssetDataRefreshButton';
+
 const _assetKeyListeners: Record<string, Array<DataForNodeListener>> = {};
 let providerListener = (_key: string, _data?: LiveDataForNode) => {};
 const _cache: Record<string, LiveDataForNode> = {};
@@ -56,11 +58,13 @@ export function useAssetsLiveData(assetKeys: AssetKeyInput[]) {
 
   return {
     liveDataByNode: data,
+
     refresh: React.useCallback(() => {
       _resetLastFetchedOrRequested(assetKeys);
       setNeedsImmediateFetch();
       setIsRefreshing(true);
     }, [setNeedsImmediateFetch, assetKeys]),
+
     refreshing: React.useMemo(() => {
       for (const key of assetKeys) {
         const stringKey = tokenForAssetKey(key);
@@ -120,6 +124,16 @@ const AssetLiveDataContext = React.createContext<{
   onUnsubscribed: () => {},
 });
 
+const AssetLiveDataRefreshContext = React.createContext<{
+  isGloballyRefreshing: boolean;
+  oldestDataTimestamp: number;
+  refresh: () => void;
+}>({
+  isGloballyRefreshing: false,
+  oldestDataTimestamp: Infinity,
+  refresh: () => {},
+});
+
 // Map of asset keys to their last fetched time and last requested time
 const lastFetchedOrRequested: Record<
   string,
@@ -143,6 +157,28 @@ export const AssetLiveDataProvider = ({children}: {children: React.ReactNode}) =
 
   const isDocumentVisible = useDocumentVisibility();
 
+  const [isGloballyRefreshing, setIsGloballyRefreshing] = React.useState(false);
+  const [oldestDataTimestamp, setOldestDataTimestamp] = React.useState(0);
+
+  const onUpdatingOrUpdated = React.useCallback(() => {
+    const allAssetKeys = Object.keys(_assetKeyListeners).filter(
+      (key) => _assetKeyListeners[key]?.length,
+    );
+    let isRefreshing = allAssetKeys.length ? true : false;
+    let oldestDataTimestamp = Infinity;
+    for (const key of allAssetKeys) {
+      if (lastFetchedOrRequested[key]?.fetched) {
+        isRefreshing = false;
+      }
+      oldestDataTimestamp = Math.min(
+        oldestDataTimestamp,
+        lastFetchedOrRequested[key]?.fetched ?? Infinity,
+      );
+    }
+    setIsGloballyRefreshing(isRefreshing);
+    setOldestDataTimestamp(oldestDataTimestamp === Infinity ? 0 : oldestDataTimestamp);
+  }, []);
+
   React.useEffect(() => {
     if (!isDocumentVisible) {
       return;
@@ -150,19 +186,19 @@ export const AssetLiveDataProvider = ({children}: {children: React.ReactNode}) =
     // Check for assets to fetch every 5 seconds to simplify logic
     // This means assets will be fetched at most 5 + SUBSCRIPTION_IDLE_POLL_RATE after their first fetch
     // but then will be fetched every SUBSCRIPTION_IDLE_POLL_RATE after that
-    const interval = setInterval(() => fetchData(client), 5000);
-    fetchData(client);
+    const interval = setInterval(() => fetchData(client, onUpdatingOrUpdated), 5000);
+    fetchData(client, onUpdatingOrUpdated);
     return () => {
       clearInterval(interval);
     };
-  }, [client, isDocumentVisible]);
+  }, [client, isDocumentVisible, onUpdatingOrUpdated]);
 
   React.useEffect(() => {
     if (!needsImmediateFetch) {
       return;
     }
     const timeout = setTimeout(() => {
-      fetchData(client);
+      fetchData(client, onUpdatingOrUpdated);
       setNeedsImmediateFetch(false);
       // Wait BATCHING_INTERVAL before doing fetch in case the component is unmounted quickly (eg. in the case of scrolling/filtering quickly)
     }, BATCHING_INTERVAL);
@@ -240,7 +276,19 @@ export const AssetLiveDataProvider = ({children}: {children: React.ReactNode}) =
         [],
       )}
     >
-      {children}
+      <AssetLiveDataRefreshContext.Provider
+        value={{
+          isGloballyRefreshing,
+          oldestDataTimestamp,
+          refresh: React.useCallback(() => {
+            setIsGloballyRefreshing(true);
+            _resetLastFetchedOrRequested();
+            setNeedsImmediateFetch(true);
+          }, [setNeedsImmediateFetch]),
+        }}
+      >
+        {children}
+      </AssetLiveDataRefreshContext.Provider>
     </AssetLiveDataContext.Provider>
   );
 };
@@ -250,6 +298,7 @@ async function _batchedQueryAssets(
   assetKeys: AssetKeyInput[],
   client: ApolloClient<any>,
   setData: (data: Record<string, LiveDataForNode>) => void,
+  onUpdatingOrUpdated: () => void,
 ) {
   // Bail if the document isn't visible
   if (!assetKeys.length || isFetching) {
@@ -263,6 +312,7 @@ async function _batchedQueryAssets(
       requested: requestTime,
     };
   });
+  onUpdatingOrUpdated();
   const data = await _queryAssetKeys(client, assetKeys);
   const fetchedTime = Date.now();
   assetKeys.forEach((key) => {
@@ -271,10 +321,11 @@ async function _batchedQueryAssets(
     };
   });
   setData(data);
+  onUpdatingOrUpdated();
   isFetching = false;
   const nextAssets = _determineAssetsToFetch();
   if (nextAssets.length) {
-    _batchedQueryAssets(nextAssets, client, setData);
+    _batchedQueryAssets(nextAssets, client, setData, onUpdatingOrUpdated);
   }
 }
 
@@ -333,19 +384,24 @@ function _determineAssetsToFetch() {
   return assetsWithoutData.concat(assetsToFetch).slice(0, BATCH_SIZE);
 }
 
-function fetchData(client: ApolloClient<any>) {
-  _batchedQueryAssets(_determineAssetsToFetch(), client, (data) => {
-    Object.entries(data).forEach(([key, assetData]) => {
-      const listeners = _assetKeyListeners[key];
-      providerListener(key, assetData);
-      if (!listeners) {
-        return;
-      }
-      listeners.forEach((listener) => {
-        listener(key, assetData);
+function fetchData(client: ApolloClient<any>, onUpdatingOrUpdated: () => void) {
+  _batchedQueryAssets(
+    _determineAssetsToFetch(),
+    client,
+    (data) => {
+      Object.entries(data).forEach(([key, assetData]) => {
+        const listeners = _assetKeyListeners[key];
+        providerListener(key, assetData);
+        if (!listeners) {
+          return;
+        }
+        listeners.forEach((listener) => {
+          listener(key, assetData);
+        });
       });
-    });
-  });
+    },
+    onUpdatingOrUpdated,
+  );
 }
 
 function getAllAssetKeysWithListeners(): AssetKeyInput[] {
@@ -370,3 +426,16 @@ export function _setCacheEntryForTest(assetKey: AssetKeyInput, data?: LiveDataFo
     });
   }
 }
+
+export function AssetLiveDataRefresh() {
+  const {isGloballyRefreshing, oldestDataTimestamp, refresh} = React.useContext(
+    AssetLiveDataRefreshContext,
+  );
+  return (
+    <AssetDataRefreshButton
+      isRefreshing={isGloballyRefreshing}
+      oldestDataTimestamp={oldestDataTimestamp}
+      onRefresh={refresh}
+    />
+  );
+}
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 523952f0985ab..8f474238079d0 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
@@ -17,6 +17,7 @@ import {useHistory} from 'react-router-dom';
 import styled from 'styled-components';
 
 import {useFeatureFlags} from '../app/Flags';
+import {AssetLiveDataRefresh} from '../asset-data/AssetLiveDataProvider';
 import {LaunchAssetExecutionButton} from '../assets/LaunchAssetExecutionButton';
 import {LaunchAssetObservationButton} from '../assets/LaunchAssetObservationButton';
 import {AssetKey} from '../assets/types';
@@ -428,6 +429,7 @@ const AssetGraphExplorerWithData: React.FC<WithDataProps> = ({
 
           <Box style={{position: 'absolute', right: 12, top: 8}}>
             <Box flex={{alignItems: 'center', gap: 12}}>
+              <AssetLiveDataRefresh />
               <LaunchAssetObservationButton
                 preferredJobName={explorerPath.pipelineName}
                 scope={
diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/sidebar/Node.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/sidebar/Node.tsx
index 7ac4fa3c26ed6..692af2d081561 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/sidebar/Node.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/sidebar/Node.tsx
@@ -123,7 +123,6 @@ export const Node = ({
               <div
                 onClick={(e) => {
                   e.stopPropagation();
-                  console.log('toggling open');
                   toggleOpen();
                 }}
                 style={{cursor: 'pointer'}}

From c4f2fea0f32f46a085a843433a132bc355eed9b5 Mon Sep 17 00:00:00 2001
From: Marco Salazar <marco@elementl.com>
Date: Fri, 29 Sep 2023 02:09:14 -0400
Subject: [PATCH 5/6] hook dep

---
 .../packages/ui-core/src/asset-data/AssetDataRefreshButton.tsx  | 2 +-
 .../packages/ui-core/src/asset-data/AssetLiveDataProvider.tsx   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-data/AssetDataRefreshButton.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-data/AssetDataRefreshButton.tsx
index 13b7628cd54c9..7e5b24fe96d43 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/asset-data/AssetDataRefreshButton.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/asset-data/AssetDataRefreshButton.tsx
@@ -1,4 +1,4 @@
-import {Box, Button, Colors, Icon, RefreshButton, Tooltip} from '@dagster-io/ui-components';
+import {Box, Button, Colors, Icon, Tooltip} from '@dagster-io/ui-components';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import updateLocale from 'dayjs/plugin/updateLocale';
diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-data/AssetLiveDataProvider.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-data/AssetLiveDataProvider.tsx
index 4d7ca344bbb0d..e79d4bce7b6c7 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/asset-data/AssetLiveDataProvider.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/asset-data/AssetLiveDataProvider.tsx
@@ -205,7 +205,7 @@ export const AssetLiveDataProvider = ({children}: {children: React.ReactNode}) =
     return () => {
       clearTimeout(timeout);
     };
-  }, [client, needsImmediateFetch]);
+  }, [client, needsImmediateFetch, onUpdatingOrUpdated]);
 
   React.useEffect(() => {
     providerListener = (stringKey, assetData) => {

From 51d97c20cd757b5ae7df6b9caa5711ee26d3f4f6 Mon Sep 17 00:00:00 2001
From: Marco polo <salazarm@users.noreply.github.com>
Date: Fri, 29 Sep 2023 13:28:40 -0400
Subject: [PATCH 6/6] [Asset graph] Revamp top bar (#16903)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary & Motivation

Requests from Josh:

- [x] Can we fix the alignment of the Selection box query row? Right now
it does not align with the items in the sidebar (designs below)
    - [x]  Put all items into a toolbar that matches the sidebar header
    - [x]  Stretch the query input to fill space
    - [x]  Add an info icon action that opens a dialog (see designs)
- [x] Add a “Clear query” action to make it easier to reset this field

## How I Tested These Changes
locally:
<img width="1496" alt="Screenshot 2023-09-29 at 2 57 04 AM"
src="https://github.com/dagster-io/dagster/assets/2286579/ff368fcf-f47e-42f7-80ab-64beec16ea98">
<img width="1496" alt="Screenshot 2023-09-29 at 2 46 53 AM"
src="https://github.com/dagster-io/dagster/assets/2286579/e5f0f945-bbc1-4782-a9d7-75fef52fd7a2">
<img width="869" alt="Screenshot 2023-09-29 at 2 46 44 AM"
src="https://github.com/dagster-io/dagster/assets/2286579/54f352ea-ba8a-4ab8-908c-b0841bea2aec">
---
 .../src/asset-graph/AssetGraphExplorer.tsx    |  91 +++++++++-----
 .../assets/LaunchAssetObservationButton.tsx   |   2 +-
 .../ui-core/src/ui/GraphQueryInput.tsx        | 117 ++++++++++++++++++
 3 files changed, 177 insertions(+), 33 deletions(-)

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 8f474238079d0..f5a93d4e31a0a 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
@@ -1,5 +1,4 @@
 import {
-  Box,
   Checkbox,
   Colors,
   NonIdealState,
@@ -8,6 +7,7 @@ import {
   Button,
   Icon,
   Tooltip,
+  TextInputContainer,
 } from '@dagster-io/ui-components';
 import pickBy from 'lodash/pickBy';
 import uniq from 'lodash/uniq';
@@ -427,27 +427,41 @@ const AssetGraphExplorerWithData: React.FC<WithDataProps> = ({
             </OptionsOverlay>
           )}
 
-          <Box style={{position: 'absolute', right: 12, top: 8}}>
-            <Box flex={{alignItems: 'center', gap: 12}}>
-              <AssetLiveDataRefresh />
-              <LaunchAssetObservationButton
-                preferredJobName={explorerPath.pipelineName}
-                scope={
-                  selectedDefinitions.length
-                    ? {selected: selectedDefinitions.filter((a) => a.isObservable)}
-                    : {all: allDefinitionsForMaterialize.filter((a) => a.isObservable)}
-                }
-              />
-              <LaunchAssetExecutionButton
-                preferredJobName={explorerPath.pipelineName}
-                scope={
-                  selectedDefinitions.length
-                    ? {selected: selectedDefinitions}
-                    : {all: allDefinitionsForMaterialize}
-                }
-              />
-            </Box>
-          </Box>
+          <TopbarWrapper>
+            <div>{fetchOptionFilters}</div>
+            <GraphQueryInput
+              type="asset_graph"
+              items={graphQueryItems}
+              value={explorerPath.opsQuery}
+              placeholder="Type an asset subset…"
+              onChange={(opsQuery) => onChangeExplorerPath({...explorerPath, opsQuery}, 'replace')}
+              popoverPosition="bottom-left"
+            />
+            <Button
+              onClick={() => {
+                onChangeExplorerPath({...explorerPath, opsQuery: ''}, 'push');
+              }}
+            >
+              Clear query
+            </Button>
+            <AssetLiveDataRefresh />
+            <LaunchAssetObservationButton
+              preferredJobName={explorerPath.pipelineName}
+              scope={
+                selectedDefinitions.length
+                  ? {selected: selectedDefinitions.filter((a) => a.isObservable)}
+                  : {all: allDefinitionsForMaterialize.filter((a) => a.isObservable)}
+              }
+            />
+            <LaunchAssetExecutionButton
+              preferredJobName={explorerPath.pipelineName}
+              scope={
+                selectedDefinitions.length
+                  ? {selected: selectedDefinitions}
+                  : {all: allDefinitionsForMaterialize}
+              }
+            />
+          </TopbarWrapper>
           <QueryOverlay>
             {showSidebar || !flagDAGSidebar ? null : (
               <Tooltip content="Show sidebar">
@@ -459,16 +473,6 @@ const AssetGraphExplorerWithData: React.FC<WithDataProps> = ({
                 />
               </Tooltip>
             )}
-            {fetchOptionFilters}
-
-            <GraphQueryInput
-              width={fetchOptionFilters ? '16vw' : undefined}
-              items={graphQueryItems}
-              value={explorerPath.opsQuery}
-              placeholder="Type an asset subset…"
-              onChange={(opsQuery) => onChangeExplorerPath({...explorerPath, opsQuery}, 'replace')}
-              popoverPosition="bottom-left"
-            />
           </QueryOverlay>
         </ErrorBoundary>
       }
@@ -588,3 +592,26 @@ const assetKeyTokensInRange = (
 
   return uniq(ledToTarget);
 };
+
+const TopbarWrapper = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: grid;
+  background: white;
+  grid-template-columns: auto 1fr auto auto auto auto;
+  gap: 12px;
+  align-items: center;
+  padding: 12px 15px;
+  border-bottom: 1px solid ${Colors.KeylineGray};
+  ${TextInputContainer} {
+    width: 100%;
+  }
+  > :nth-child(2) {
+    > * {
+      display: block;
+      width: 100%;
+    }
+  }
+`;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/LaunchAssetObservationButton.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/LaunchAssetObservationButton.tsx
index b73a39a8737f1..6f776ee048011 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/assets/LaunchAssetObservationButton.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/assets/LaunchAssetObservationButton.tsx
@@ -43,7 +43,7 @@ export const LaunchAssetObservationButton: React.FC<{
 
   const scopeAssets = 'selected' in scope ? scope.selected : scope.all;
   if (!scopeAssets.length) {
-    return <span />;
+    return <></>;
   }
 
   const count = scopeAssets.length > 1 ? ` (${scopeAssets.length})` : '';
diff --git a/js_modules/dagster-ui/packages/ui-core/src/ui/GraphQueryInput.tsx b/js_modules/dagster-ui/packages/ui-core/src/ui/GraphQueryInput.tsx
index c12411b9a59d6..1a685963a3042 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/ui/GraphQueryInput.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/ui/GraphQueryInput.tsx
@@ -11,6 +11,11 @@ import {
   Popover,
   TextInput,
   Tooltip,
+  Dialog,
+  DialogFooter,
+  DialogBody,
+  Table,
+  Tag,
 } from '@dagster-io/ui-components';
 import isEqual from 'lodash/isEqual';
 import uniq from 'lodash/uniq';
@@ -34,6 +39,7 @@ interface GraphQueryInputProps {
   popoverPosition?: PopoverPosition;
   className?: string;
   disabled?: boolean;
+  type?: 'asset_graph';
 
   linkToPreview?: {
     repoName: string;
@@ -320,6 +326,7 @@ export const GraphQueryInput = React.memo(
               disabled={props.disabled}
               value={pendingValue}
               icon="op_selector"
+              rightElement={props.type === 'asset_graph' ? <InfoIconDialog /> : undefined}
               strokeColor={intentToStrokeColor(props.intent)}
               autoFocus={props.autoFocus}
               placeholder={placeholderTextForItems(props.placeholder, props.items)}
@@ -423,6 +430,116 @@ export const GraphQueryInput = React.memo(
     isEqual(prevProps.presets, nextProps.presets),
 );
 
+const InfoIconDialog = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  return (
+    <>
+      <Dialog
+        isOpen={isOpen}
+        title="Query filter tips"
+        onClose={() => setIsOpen(false)}
+        style={{width: '743px', maxWidth: '80%'}}
+      >
+        <DialogBody>
+          <Box flex={{direction: 'column', gap: 10}}>
+            <div>Create custom filter queries to fine tune which assets appear in the graph.</div>
+            <CustomTable>
+              <thead>
+                <tr>
+                  <th>Query</th>
+                  <th>Description</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>
+                    <Tag>*</Tag>
+                  </td>
+                  <td>Render the entire lineage graph</td>
+                </tr>
+                <tr>
+                  <td>
+                    <Tag>*&quot;my_asset&quot;</Tag>
+                  </td>
+                  <td>Render the entire upstream lineage of my_asset</td>
+                </tr>
+                <tr>
+                  <td>
+                    <Tag>++&quot;my_asset&quot;</Tag>
+                  </td>
+                  <td>Render two layers upstream of my_asset</td>
+                </tr>
+                <tr>
+                  <td>
+                    <Tag>&quot;my_asset&quot;*</Tag>
+                  </td>
+                  <td>Render one layer upstream of my_asset</td>
+                </tr>
+                <tr>
+                  <td>
+                    <Tag>&quot;my_asset&quot;+</Tag>
+                  </td>
+                  <td>Render the entire downstream lineage of my_asset</td>
+                </tr>
+                <tr>
+                  <td>
+                    <Tag>&quot;my_asset&quot;++</Tag>
+                  </td>
+                  <td>Render two layers downstream of my_asset</td>
+                </tr>
+                <tr>
+                  <td>
+                    <Tag>+&quot;my_asset&quot;+</Tag>
+                  </td>
+                  <td>Render one layer upstream and downstream of my_asset</td>
+                </tr>
+                <tr>
+                  <td>
+                    <Tag>&quot;my_asset&quot; AND &quot;another&quot;</Tag>
+                  </td>
+                  <td>Render two disjointed lineage segments</td>
+                </tr>
+              </tbody>
+            </CustomTable>
+          </Box>
+        </DialogBody>
+        <DialogFooter topBorder>
+          <Button onClick={() => setIsOpen(false)} intent="primary">
+            Close
+          </Button>
+        </DialogFooter>
+      </Dialog>
+      <div
+        style={{cursor: 'pointer'}}
+        onClick={() => {
+          setIsOpen(true);
+        }}
+      >
+        <Icon name="info" />
+      </div>
+    </>
+  );
+};
+
+const CustomTable = styled(Table)`
+  border-left: none;
+
+  &&& tr {
+    &:last-child td {
+      box-shadow: inset 1px 1px 0 rgba(233, 232, 232, 1) !important;
+    }
+    &:last-child td:first-child,
+    td:first-child,
+    th:first-child {
+      vertical-align: middle;
+      box-shadow: inset 0 1px 0 ${Colors.KeylineGray} !important;
+    }
+  }
+  border: 1px solid ${Colors.KeylineGray};
+  border-top: none;
+  margin-bottom: 12px;
+`;
+
 const OpInfoWrap = styled.div`
   width: 350px;
   padding: 10px 16px 10px 16px;