Implement data sandboxing updates (#20258)

## Summary & Motivation

Implements updates to data sandboxing [more
context](https://linear.app/dagster-labs/issue/FE-201/implement-data-sandboxing-ui-updates)

## How I Tested These Changes

Asset graph:
![Screenshot 2024-03-06 at 1 01
18 PM](https://github.com/dagster-io/dagster/assets/2286579/709e24c0-eb26-42cd-ab96-bdceeb23246d)
![Screenshot 2024-03-06 at 1 01
14 PM](https://github.com/dagster-io/dagster/assets/2286579/8248c1de-f8c9-482d-a496-af34c3dffd93)

Asset catalog:
![Screenshot 2024-03-06 at 1 43
52 PM](https://github.com/dagster-io/dagster/assets/2286579/ba201b68-b27c-40c8-94e7-5d11bf8cf15c)

js_modules/dagster-ui/packages/ui-components/src/components/Icon.tsx

@@ -106,6 +106,7 @@ import menu_book from '../icon-svgs/menu_book.svg';
 import more_horiz from '../icon-svgs/more_horiz.svg';
 import ms_teams from '../icon-svgs/ms_teams.svg';
 import multi_asset from '../icon-svgs/multi_asset.svg';
+import new_in_branch from '../icon-svgs/new_in_branch.svg';
 import nightlight from '../icon-svgs/nightlight.svg';
 import no_access from '../icon-svgs/no_access.svg';
 import observation from '../icon-svgs/observation.svg';
@@ -310,6 +311,7 @@ export const Icons = {
   menu,
   menu_book,
   more_horiz,
+  new_in_branch,
   nightlight,
   no_access,
   people,

js_modules/dagster-ui/packages/ui-core/src/app/Flags.tsx

@@ -13,6 +13,7 @@ export const FeatureFlag = {
   flagDisableAutoLoadDefaults: 'flagDisableAutoLoadDefaults' as const,
   flagUseNewAutomationPage: 'flagUseNewAutomationPage' as const,
   flagUseNewOverviewPage: 'flagUseNewOverviewPage' as const,
+  flagExperimentalBranchDiff: 'flagExperimentalBranchDiff' as const,
 };
 export type FeatureFlagType = keyof typeof FeatureFlag;
 

js_modules/dagster-ui/packages/ui-core/src/asset-data/AssetLiveDataProvider.tsx

@@ -166,6 +166,7 @@ export const ASSET_NODE_LIVE_FRAGMENT = gql`
         }
       }
     }
+    changedReasons
     freshnessInfo {
       ...AssetNodeLiveFreshnessInfo
     }

js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetNode.tsx

@@ -15,7 +15,8 @@ import {AssetNodeFragment} from './types/AssetNode.types';
 import {withMiddleTruncation} from '../app/Util';
 import {useAssetLiveData} from '../asset-data/AssetLiveDataProvider';
 import {PartitionCountTags} from '../assets/AssetNodePartitionCounts';
-import {StaleReasonsTags} from '../assets/Stale';
+import {ChangedReasonsTag, MinimalNodeChangedDot} from '../assets/ChangedReasons';
+import {MinimalNodeStaleDot, StaleReasonsTag, isAssetStale} from '../assets/Stale';
 import {AssetChecksStatusSummary} from '../assets/asset-checks/AssetChecksStatusSummary';
 import {assetDetailsPathForKey} from '../assets/assetDetailsPathForKey';
 import {AssetComputeKindTag} from '../graph/OpTags';
@@ -34,7 +35,13 @@ export const AssetNode = React.memo(({definition, selected}: Props) => {
 
   return (
     <AssetInsetForHoverEffect>
-      <AssetTopTags definition={definition} liveData={liveData} />
+      <Box flex={{direction: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
+        <StaleReasonsTag liveData={liveData} assetKey={definition.assetKey} include="upstream" />
+        <ChangedReasonsTag
+          changedReasons={liveData?.changedReasons}
+          assetKey={definition.assetKey}
+        />
+      </Box>
       <AssetNodeContainer $selected={selected}>
         <AssetNodeBox $selected={selected} $isSource={isSource}>
           <AssetName $isSource={isSource}>
@@ -63,7 +70,6 @@ export const AssetNode = React.memo(({definition, selected}: Props) => {
             {definition.isPartitioned && !definition.isSource && (
               <PartitionCountTags definition={definition} liveData={liveData} />
             )}
-            <StaleReasonsTags liveData={liveData} assetKey={definition.assetKey} include="self" />
           </Box>
 
           <AssetNodeStatusRow definition={definition} liveData={liveData} />
@@ -77,17 +83,6 @@ export const AssetNode = React.memo(({definition, selected}: Props) => {
   );
 }, isEqual);
 
-interface AssetTopTagsProps {
-  definition: AssetNodeFragment;
-  liveData?: LiveDataForNode;
-}
-
-const AssetTopTags = ({definition, liveData}: AssetTopTagsProps) => (
-  <Box flex={{gap: 4}} padding={{left: 4}} style={{height: 24}}>
-    <StaleReasonsTags liveData={liveData} assetKey={definition.assetKey} include="upstream" />
-  </Box>
-);
-
 const AssetNodeRowBox = styled(Box)`
   white-space: nowrap;
   line-height: 12px;
@@ -181,6 +176,9 @@ export const AssetNodeMinimal = ({
   const {border, background} = buildAssetNodeStatusContent({assetKey, definition, liveData});
   const displayName = assetKey.path[assetKey.path.length - 1]!;
 
+  const isChanged = liveData?.changedReasons?.length;
+  const isStale = isAssetStale(liveData);
+
   return (
     <AssetInsetForHoverEffect>
       <MinimalAssetNodeContainer $selected={selected} style={{paddingTop: height / 2 - 50}}>
@@ -196,6 +194,15 @@ export const AssetNodeMinimal = ({
             $background={background}
             $border={border}
           >
+            {isChanged ? (
+              <MinimalNodeChangedDot
+                changedReasons={liveData.changedReasons!}
+                assetKey={assetKey}
+              />
+            ) : null}
+            {isStale ? (
+              <MinimalNodeStaleDot assetKey={assetKey} liveData={liveData} include="upstream" />
+            ) : null}
             <AssetNodeSpinnerContainer>
               <AssetLatestRunSpinner liveData={liveData} purpose="section" />
             </AssetNodeSpinnerContainer>
@@ -219,6 +226,7 @@ export const ASSET_NODE_FRAGMENT = gql`
     graphName
     hasMaterializePermission
     jobNames
+    changedReasons
     opNames
     opVersion
     description

js_modules/dagster-ui/packages/ui-core/src/asset-graph/Utils.tsx

@@ -14,7 +14,7 @@ import {
   AssetNodeLiveMaterializationFragment,
   AssetNodeLiveObservationFragment,
 } from '../asset-data/types/AssetLiveDataProvider.types';
-import {RunStatus, StaleStatus} from '../graphql/types';
+import {ChangeReason, RunStatus, StaleStatus} from '../graphql/types';
 
 /**
  * IMPORTANT: This file is used by the WebWorker so make sure we don't indirectly import React or anything that relies on window/document
@@ -154,6 +154,7 @@ export interface LiveDataForNode {
   staleStatus: StaleStatus | null;
   staleCauses: AssetGraphLiveQuery['assetNodes'][0]['staleCauses'];
   assetChecks: AssetCheckLiveFragment[];
+  changedReasons?: Array<ChangeReason>;
   partitionStats: {
     numMaterialized: number;
     numMaterializing: number;
@@ -165,6 +166,7 @@ export interface LiveDataForNode {
 
 export const MISSING_LIVE_DATA: LiveDataForNode = {
   unstartedRunIds: [],
+  changedReasons: [],
   inProgressRunIds: [],
   runWhichFailedToMaterialize: null,
   freshnessInfo: null,
@@ -217,6 +219,7 @@ export const buildLiveDataForNode = (
 
   return {
     lastMaterialization,
+    changedReasons: assetNode.changedReasons,
     lastMaterializationRunStatus:
       latestRunForAsset && lastMaterialization?.runId === latestRunForAsset?.id
         ? latestRunForAsset.status