From 41a53946e12e653d96507285f5923345b8733fae Mon Sep 17 00:00:00 2001
From: Kent Huang <kent@infuseai.io>
Date: Fri, 27 Dec 2024 17:23:52 +0800
Subject: [PATCH 1/3] [Feature] DRC-980 Show tooltip on node selector input
 field

Signed-off-by: Kent Huang <kent@infuseai.io>
---
 .../components/lineage/LineageViewTopBar.tsx  | 80 ++++++++++++++-----
 1 file changed, 58 insertions(+), 22 deletions(-)

diff --git a/js/src/components/lineage/LineageViewTopBar.tsx b/js/src/components/lineage/LineageViewTopBar.tsx
index 6a9d0fd8..4b0b6793 100644
--- a/js/src/components/lineage/LineageViewTopBar.tsx
+++ b/js/src/components/lineage/LineageViewTopBar.tsx
@@ -21,6 +21,9 @@ import {
   Spacer,
   Text,
   Tooltip,
+  VStack,
+  Code,
+  Link,
 } from "@chakra-ui/react";
 
 import { FiPackage } from "react-icons/fi";
@@ -34,6 +37,28 @@ import { ChevronDownIcon } from "@chakra-ui/icons";
 import { trackHistoryAction } from "@/lib/api/track";
 import { DisableTooltipMessages } from "@/constants/tooltipMessage";
 
+const SelectFilterTooltip = () => {
+  return (
+    <VStack align={"start"} spacing={0}>
+      <Text fontSize="10pt" color={"gray.500"} pb={1}>
+        Select nodes by dbt node selector syntax
+      </Text>
+      <Text fontSize="8pt">
+        <Code fontSize={"8pt"}>model_name</Code> Select a node
+      </Text>
+      <Text fontSize="8pt">
+        <Code fontSize={"8pt"}>model_name+</Code> Select downstream nodes
+      </Text>
+      <Text fontSize="8pt">
+        <Code fontSize={"8pt"}>+model_name</Code> Select upstream nodes
+      </Text>
+      <Text fontSize="8pt">
+        <Code fontSize={"8pt"}>model*</Code> Select by wildcard
+      </Text>
+    </VStack>
+  );
+};
+
 const HistoryToggle = () => {
   const { isHistoryOpen, showHistory, closeHistory } = useRecceActionContext();
   return (
@@ -215,6 +240,7 @@ const NodeSelectionInput = (props: {
   value: string;
   onChange: (value: string) => void;
   isDisabled?: boolean;
+  tooltipComponent?: React.ReactNode;
 }) => {
   const [inputValue, setInputValue] = useState(props.value);
   const inputRef = useRef(null);
@@ -226,29 +252,38 @@ const NodeSelectionInput = (props: {
   }, [props.value]);
 
   return (
-    <Input
-      ref={inputRef}
-      height="24px"
-      fontSize="10pt"
-      placeholder="with selectors"
-      isDisabled={props.isDisabled}
-      value={inputValue}
-      onChange={(event) => {
-        setInputValue(event.target.value);
-      }}
-      onKeyUp={(event) => {
-        if (event.key === "Enter") {
-          props.onChange(inputValue);
-        } else if (event.key === "Escape") {
-          event.preventDefault();
-          setInputValue(props.value);
-          if (inputRef.current) {
-            (inputRef.current as any).blur();
+    <Tooltip
+      label={props.tooltipComponent}
+      placement="bottom-start"
+      defaultIsOpen={true}
+      color={"black"}
+      backgroundColor={"white"}
+      closeOnClick={false}
+    >
+      <Input
+        ref={inputRef}
+        height="24px"
+        fontSize="10pt"
+        placeholder="with selectors"
+        isDisabled={props.isDisabled}
+        value={inputValue}
+        onChange={(event) => {
+          setInputValue(event.target.value);
+        }}
+        onKeyUp={(event) => {
+          if (event.key === "Enter") {
+            props.onChange(inputValue);
+          } else if (event.key === "Escape") {
+            event.preventDefault();
+            setInputValue(props.value);
+            if (inputRef.current) {
+              (inputRef.current as any).blur();
+            }
           }
-        }
-      }}
-      onBlur={() => setInputValue(props.value)}
-    />
+        }}
+        onBlur={() => setInputValue(props.value)}
+      />
+    </Tooltip>
   );
 };
 
@@ -265,6 +300,7 @@ const SelectFilter = ({ isDisabled }: { isDisabled: boolean }) => {
           select: value ? value : undefined,
         });
       }}
+      tooltipComponent={<SelectFilterTooltip />}
     />
   );
 };

From b09d1ab6122f1da45519d4b8d48a515d131d4b8b Mon Sep 17 00:00:00 2001
From: Kent Huang <kent@infuseai.io>
Date: Mon, 30 Dec 2024 14:56:13 +0800
Subject: [PATCH 2/3] [Fix] Only display tooltip when single environment mode

Signed-off-by: Kent Huang <kent@infuseai.io>
---
 js/src/components/lineage/LineageViewTopBar.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/js/src/components/lineage/LineageViewTopBar.tsx b/js/src/components/lineage/LineageViewTopBar.tsx
index 4b0b6793..62fcb7de 100644
--- a/js/src/components/lineage/LineageViewTopBar.tsx
+++ b/js/src/components/lineage/LineageViewTopBar.tsx
@@ -36,6 +36,7 @@ import { findByRunType } from "../run/registry";
 import { ChevronDownIcon } from "@chakra-ui/icons";
 import { trackHistoryAction } from "@/lib/api/track";
 import { DisableTooltipMessages } from "@/constants/tooltipMessage";
+import { useRecceServerFlag } from "@/lib/hooks/useRecceServerFlag";
 
 const SelectFilterTooltip = () => {
   return (
@@ -243,6 +244,7 @@ const NodeSelectionInput = (props: {
   tooltipComponent?: React.ReactNode;
 }) => {
   const [inputValue, setInputValue] = useState(props.value);
+  const { data: flags } = useRecceServerFlag();
   const inputRef = useRef(null);
 
   useEffect(() => {
@@ -259,6 +261,7 @@ const NodeSelectionInput = (props: {
       color={"black"}
       backgroundColor={"white"}
       closeOnClick={false}
+      isDisabled={!flags?.single_env_onboarding}
     >
       <Input
         ref={inputRef}

From f649d157eb3e53ef832a9089bfd3532eff13af3e Mon Sep 17 00:00:00 2001
From: Kent Huang <kent@infuseai.io>
Date: Mon, 30 Dec 2024 17:11:09 +0800
Subject: [PATCH 3/3] [Fix] Code review issue to config zindex of tooltip

Signed-off-by: Kent Huang <kent@infuseai.io>
---
 js/src/components/lineage/LineageViewTopBar.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/js/src/components/lineage/LineageViewTopBar.tsx b/js/src/components/lineage/LineageViewTopBar.tsx
index 62fcb7de..d277af83 100644
--- a/js/src/components/lineage/LineageViewTopBar.tsx
+++ b/js/src/components/lineage/LineageViewTopBar.tsx
@@ -255,6 +255,15 @@ const NodeSelectionInput = (props: {
 
   return (
     <Tooltip
+      // Custom tooltip style
+      width={"300px"}
+      padding={2}
+      shadow={"md"}
+      borderWidth={1}
+      rounded={"md"}
+      styleConfig={{
+        zIndex: "dropdown",
+      }}
       label={props.tooltipComponent}
       placement="bottom-start"
       defaultIsOpen={true}