From 24cc92261314f41fb9a29063d00faa9f7137e415 Mon Sep 17 00:00:00 2001
From: bengotow <bgotow@elementl.com>
Date: Thu, 2 May 2024 10:01:58 -0500
Subject: [PATCH] [ui] Replace uses of replaceAlpha in asset graph, not
 possible with new vars

Fixes FE-341
---
 .../ui-components/src/palettes/Color.tsx      |  1 -
 .../ui-components/src/theme/color.tsx         | 23 ------------
 .../ui-core/src/asset-graph/AssetNode.tsx     | 36 +++++++++----------
 3 files changed, 18 insertions(+), 42 deletions(-)

diff --git a/js_modules/dagster-ui/packages/ui-components/src/palettes/Color.tsx b/js_modules/dagster-ui/packages/ui-components/src/palettes/Color.tsx
index 2ac58716a7567..76fd7318ce7a7 100644
--- a/js_modules/dagster-ui/packages/ui-components/src/palettes/Color.tsx
+++ b/js_modules/dagster-ui/packages/ui-components/src/palettes/Color.tsx
@@ -116,6 +116,5 @@ export {
   colorDataVizVioletAlt as dataVizVioletAlt,
   colorDataVizYellow as dataVizYellow,
   colorDataVizYellowAlt as dataVizYellowAlt,
-  replaceAlpha,
   colorBlueGradient as blueGradient,
 } from '../theme/color';
diff --git a/js_modules/dagster-ui/packages/ui-components/src/theme/color.tsx b/js_modules/dagster-ui/packages/ui-components/src/theme/color.tsx
index 53a74fd1457d4..cecbe7d7dacc5 100644
--- a/js_modules/dagster-ui/packages/ui-components/src/theme/color.tsx
+++ b/js_modules/dagster-ui/packages/ui-components/src/theme/color.tsx
@@ -1,29 +1,6 @@
 import {ColorName} from '../palettes/ColorName';
 import {colorNameToVar} from '../palettes/colorNameToVar';
 
-export function replaceAlpha(rgbaString: string, newAlpha: number) {
-  // Check if the input string is in the correct format
-  const rgbaRegex = /^rgba?\((\s*\d+\s*),(\s*\d+\s*),(\s*\d+\s*),(\s*[\d.]+\s*)\)$/;
-  const match = rgbaString.match(rgbaRegex);
-  if (!match) {
-    console.error('Invalid RGBA string format.');
-    return null;
-  }
-
-  // Extract RGB values
-  const red = parseInt(match[1]!.trim(), 10);
-  const green = parseInt(match[2]!.trim(), 10);
-  const blue = parseInt(match[3]!.trim(), 10);
-
-  // Ensure alpha value is within the range [0, 1]
-  const clampedAlpha = Math.max(0, Math.min(newAlpha, 1));
-
-  // Construct the new RGBA string with the updated alpha value
-  const newRgbaString = `rgba(${red},${green},${blue},${clampedAlpha})`;
-
-  return newRgbaString;
-}
-
 export const browserColorScheme = () => colorNameToVar[ColorName.BrowserColorScheme];
 export const colorKeylineDefault = () => colorNameToVar[ColorName.KeylineDefault];
 export const colorLinkDefault = () => colorNameToVar[ColorName.LinkDefault];
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 655e7d5f0b68d..3e13395a35954 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
@@ -362,19 +362,11 @@ const MinimalAssetNodeBox = styled.div<{
       ? `
       background-color: ${p.$background};
       &::after {
+        inset: 0;
         position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
         transform: translateX(-100%);
-        background-image: linear-gradient(90deg, ${Colors.replaceAlpha(
-          p.$background,
-          0,
-        )} 0, ${Colors.replaceAlpha(p.$background, 0)} 0%, ${Colors.replaceAlpha(
-          p.$background,
-          0.2,
-        )});
+        mask-image: linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3));
+        background: ${p.$background};
         animation: shimmer 1.5s infinite;
         content: '';
       }
@@ -390,15 +382,23 @@ const MinimalAssetNodeBox = styled.div<{
   ${(p) =>
     p.$isQueued
       ? `
+      border: none;
+      &::after {
+        inset: 0;
+        position: absolute;
         animation: pulse 0.75s infinite alternate; 
-        @keyframes pulse {
-          0% {
-            border-color: ${Colors.replaceAlpha(p.$border, 0.2)};
-          }
-          100% {
-            border-color: ${Colors.replaceAlpha(p.$border, 1)};
-          }
+        border-radius: 16px;
+        border: 4px solid ${p.$border};
+        content: '';
+      }
+      @keyframes pulse {
+        0% {
+          opacity: 0.2;
         }
+        100% {
+          opacity: 1;
+        }
+      }
       `
       : ''}
   border-radius: 16px;