From 94d07b1517f75308268775556cf21673fee59694 Mon Sep 17 00:00:00 2001
From: Enya <enya@Enyas-MacBook-Pro.local>
Date: Mon, 25 Jul 2022 17:51:33 +0800
Subject: [PATCH 1/3] remove extra navigation icon and add control for search
 button

---
 ui/src/components/featureList.tsx            |  1 +
 ui/src/components/graph/graph.tsx            | 11 ++++++++---
 ui/src/components/graph/graphNodeDetails.tsx |  2 +-
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/ui/src/components/featureList.tsx b/ui/src/components/featureList.tsx
index 0a03eefd5..82ab0cbe5 100644
--- a/ui/src/components/featureList.tsx
+++ b/ui/src/components/featureList.tsx
@@ -221,6 +221,7 @@ const FeatureList: React.FC = () => {
         onPressEnter={onClickSearch}
       />
       <Button
+        disabled={!project}
         onClick={onClickSearch}
         type="primary"
         style={{ marginLeft: "5px" }}
diff --git a/ui/src/components/graph/graph.tsx b/ui/src/components/graph/graph.tsx
index 737a36da1..fb129c7f0 100644
--- a/ui/src/components/graph/graph.tsx
+++ b/ui/src/components/graph/graph.tsx
@@ -38,6 +38,10 @@ const Graph: React.FC<Props> = ({ data, nodeId }) => {
     setElements(layoutedElements);
   }, [layoutedElements, data, nodeId]);
 
+  const isFeature = (featureType: string) => {
+    return featureType === 'feathr_anchor_feature_v1' || featureType === 'feathr_derived_feature_v1'
+  }
+
   // Reset all node highlight status
   const resetHighlight = useCallback((): void => {
     if (!elements || elements.length === 0) {
@@ -108,7 +112,7 @@ const Graph: React.FC<Props> = ({ data, nodeId }) => {
             },
             data: {
               ...element.data,
-              active: element.id === node.id,
+              active: element.id === node.id && isFeature(element.data?.subtitle)
             },
           });
         }
@@ -164,8 +168,8 @@ const Graph: React.FC<Props> = ({ data, nodeId }) => {
           snapGrid={[15, 15]}
           zoomOnScroll={false}
           onLoad={onLoad}
-          onPaneClick={onPaneClick}
-          onElementClick={(_: ReactMouseEvent, element: Node | Edge): void => {
+          onPaneClick={onPaneClick}         
+          onElementClick={(_: ReactMouseEvent, element: Node | Edge): void => {           
             if (isNode(element)) {
               resetHighlight();
               highlightPath(element, false);
@@ -175,6 +179,7 @@ const Graph: React.FC<Props> = ({ data, nodeId }) => {
               });
             }
           }}
+          
           onNodeDragStop={onNodeDragStop}
           connectionLineType={ConnectionLineType.SmoothStep}
           nodeTypes={nodeTypes}
diff --git a/ui/src/components/graph/graphNodeDetails.tsx b/ui/src/components/graph/graphNodeDetails.tsx
index 09900ff42..989903850 100644
--- a/ui/src/components/graph/graphNodeDetails.tsx
+++ b/ui/src/components/graph/graphNodeDetails.tsx
@@ -47,7 +47,7 @@ const GraphNodeDetails: React.FC = () => {
         <Spin indicator={<LoadingOutlined style={{ fontSize: 24 }} spin />} />
       ) : (
         <div style={{ margin: "2%" }}>
-          {!feature && <p>Click on node to show metadata and metric details</p>}
+          {!feature && <p>Click on feature node to show metadata and metric details</p>}
           {feature?.attributes.transformation && (
             <Card>
               <title>Codestin Search App</title>

From c53df61fa76a3ac5eda46ed9bc9121be329ec494 Mon Sep 17 00:00:00 2001
From: Enya <enya@Enyas-MacBook-Pro.local>
Date: Mon, 25 Jul 2022 20:09:53 +0800
Subject: [PATCH 2/3] move 'isFeature' to utils and make node types enums

---
 ui/src/components/graph/graph.tsx            |  6 +-----
 ui/src/components/graph/graphNodeDetails.tsx |  8 +-------
 ui/src/components/graph/utils.ts             | 17 ++++++++++++++++-
 3 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/ui/src/components/graph/graph.tsx b/ui/src/components/graph/graph.tsx
index fb129c7f0..c061de223 100644
--- a/ui/src/components/graph/graph.tsx
+++ b/ui/src/components/graph/graph.tsx
@@ -19,7 +19,7 @@ import ReactFlow, {
 } from "react-flow-renderer";
 import { useSearchParams } from "react-router-dom";
 import LineageNode from "./graphNode";
-import { findNodeInElement, getLayoutedElements } from "./utils";
+import { findNodeInElement, getLayoutedElements, isFeature } from "./utils";
 
 const nodeTypes = {
   "custom-node": LineageNode,
@@ -38,10 +38,6 @@ const Graph: React.FC<Props> = ({ data, nodeId }) => {
     setElements(layoutedElements);
   }, [layoutedElements, data, nodeId]);
 
-  const isFeature = (featureType: string) => {
-    return featureType === 'feathr_anchor_feature_v1' || featureType === 'feathr_derived_feature_v1'
-  }
-
   // Reset all node highlight status
   const resetHighlight = useCallback((): void => {
     if (!elements || elements.length === 0) {
diff --git a/ui/src/components/graph/graphNodeDetails.tsx b/ui/src/components/graph/graphNodeDetails.tsx
index 989903850..30e7aa05a 100644
--- a/ui/src/components/graph/graphNodeDetails.tsx
+++ b/ui/src/components/graph/graphNodeDetails.tsx
@@ -4,6 +4,7 @@ import { fetchFeature } from "../../api";
 import { Feature } from "../../models/model";
 import { LoadingOutlined } from "@ant-design/icons";
 import { Card, Spin, Typography } from "antd";
+import { isFeature } from "./utils";
 
 const { Title } = Typography;
 
@@ -20,13 +21,6 @@ const GraphNodeDetails: React.FC = () => {
   const [feature, setFeature] = useState<Feature>();
   const [loading, setLoading] = useState<boolean>(false);
 
-  const isFeature = (featureType: string) => {
-    return (
-      featureType === "feathr_anchor_feature_v1" ||
-      featureType === "feathr_derived_feature_v1"
-    );
-  };
-
   useEffect(() => {
     const fetchFeatureData = async () => {
       setFeature(undefined);
diff --git a/ui/src/components/graph/utils.ts b/ui/src/components/graph/utils.ts
index 4fcda482f..582e4fd5e 100644
--- a/ui/src/components/graph/utils.ts
+++ b/ui/src/components/graph/utils.ts
@@ -182,7 +182,22 @@ const generateEdge = ({ obj, from, to }: GenerateEdgeProps): Edge => {
   };
 };
 
-export { generateEdge, generateNode, getLayoutedElements, getElements };
+const enum NodeTypes {
+  AllNodes = "all_nodes",
+  Source = "feathr_source_v1",
+  Anchor = "feathr_anchor_v1",
+  AnchorFeature = "feathr_anchor_feature_v1",
+  DerivedFeature = "feathr_derived_feature_v1"
+};
+
+const isFeature = (featureType: string) => {
+  return (
+    featureType === NodeTypes.AnchorFeature ||
+    featureType === NodeTypes.DerivedFeature
+  );
+};
+
+export { generateEdge, generateNode, getLayoutedElements, getElements, NodeTypes, isFeature };
 
 export const findNodeInElement = (
   nodeId: string | null,

From 513a04dd307d1260d77c26dfabf85407ba2cf591 Mon Sep 17 00:00:00 2001
From: Enya <enya@Enyas-MacBook-Pro.local>
Date: Tue, 26 Jul 2022 11:34:20 +0800
Subject: [PATCH 3/3] codes' details and formats improvement

---
 ui/src/components/graph/graph.tsx            | 11 ++++++-----
 ui/src/components/graph/graphNodeDetails.tsx |  6 ++++--
 ui/src/components/graph/utils.ts             | 17 +----------------
 ui/src/pages/feature/lineageGraph.tsx        | 11 ++++++-----
 ui/src/utils/utils.tsx                       | 15 +++++++++++++++
 5 files changed, 32 insertions(+), 28 deletions(-)

diff --git a/ui/src/components/graph/graph.tsx b/ui/src/components/graph/graph.tsx
index c061de223..65790e4a5 100644
--- a/ui/src/components/graph/graph.tsx
+++ b/ui/src/components/graph/graph.tsx
@@ -19,7 +19,8 @@ import ReactFlow, {
 } from "react-flow-renderer";
 import { useSearchParams } from "react-router-dom";
 import LineageNode from "./graphNode";
-import { findNodeInElement, getLayoutedElements, isFeature } from "./utils";
+import { findNodeInElement, getLayoutedElements } from "./utils";
+import { isFeature } from "../../utils/utils";
 
 const nodeTypes = {
   "custom-node": LineageNode,
@@ -108,7 +109,8 @@ const Graph: React.FC<Props> = ({ data, nodeId }) => {
             },
             data: {
               ...element.data,
-              active: element.id === node.id && isFeature(element.data?.subtitle)
+              active:
+                element.id === node.id && isFeature(element.data?.subtitle),
             },
           });
         }
@@ -164,8 +166,8 @@ const Graph: React.FC<Props> = ({ data, nodeId }) => {
           snapGrid={[15, 15]}
           zoomOnScroll={false}
           onLoad={onLoad}
-          onPaneClick={onPaneClick}         
-          onElementClick={(_: ReactMouseEvent, element: Node | Edge): void => {           
+          onPaneClick={onPaneClick}
+          onElementClick={(_: ReactMouseEvent, element: Node | Edge): void => {
             if (isNode(element)) {
               resetHighlight();
               highlightPath(element, false);
@@ -175,7 +177,6 @@ const Graph: React.FC<Props> = ({ data, nodeId }) => {
               });
             }
           }}
-          
           onNodeDragStop={onNodeDragStop}
           connectionLineType={ConnectionLineType.SmoothStep}
           nodeTypes={nodeTypes}
diff --git a/ui/src/components/graph/graphNodeDetails.tsx b/ui/src/components/graph/graphNodeDetails.tsx
index 30e7aa05a..1637adc05 100644
--- a/ui/src/components/graph/graphNodeDetails.tsx
+++ b/ui/src/components/graph/graphNodeDetails.tsx
@@ -4,7 +4,7 @@ import { fetchFeature } from "../../api";
 import { Feature } from "../../models/model";
 import { LoadingOutlined } from "@ant-design/icons";
 import { Card, Spin, Typography } from "antd";
-import { isFeature } from "./utils";
+import { isFeature } from "../../utils/utils";
 
 const { Title } = Typography;
 
@@ -41,7 +41,9 @@ const GraphNodeDetails: React.FC = () => {
         <Spin indicator={<LoadingOutlined style={{ fontSize: 24 }} spin />} />
       ) : (
         <div style={{ margin: "2%" }}>
-          {!feature && <p>Click on feature node to show metadata and metric details</p>}
+          {!feature && (
+            <p>Click on feature node to show metadata and metric details</p>
+          )}
           {feature?.attributes.transformation && (
             <Card>
               <title>Codestin Search App</title>
diff --git a/ui/src/components/graph/utils.ts b/ui/src/components/graph/utils.ts
index 582e4fd5e..4fcda482f 100644
--- a/ui/src/components/graph/utils.ts
+++ b/ui/src/components/graph/utils.ts
@@ -182,22 +182,7 @@ const generateEdge = ({ obj, from, to }: GenerateEdgeProps): Edge => {
   };
 };
 
-const enum NodeTypes {
-  AllNodes = "all_nodes",
-  Source = "feathr_source_v1",
-  Anchor = "feathr_anchor_v1",
-  AnchorFeature = "feathr_anchor_feature_v1",
-  DerivedFeature = "feathr_derived_feature_v1"
-};
-
-const isFeature = (featureType: string) => {
-  return (
-    featureType === NodeTypes.AnchorFeature ||
-    featureType === NodeTypes.DerivedFeature
-  );
-};
-
-export { generateEdge, generateNode, getLayoutedElements, getElements, NodeTypes, isFeature };
+export { generateEdge, generateNode, getLayoutedElements, getElements };
 
 export const findNodeInElement = (
   nodeId: string | null,
diff --git a/ui/src/pages/feature/lineageGraph.tsx b/ui/src/pages/feature/lineageGraph.tsx
index 50ef51e39..1f34b2090 100644
--- a/ui/src/pages/feature/lineageGraph.tsx
+++ b/ui/src/pages/feature/lineageGraph.tsx
@@ -8,6 +8,7 @@ import { FeatureLineage } from "../../models/model";
 import { LoadingOutlined } from "@ant-design/icons";
 import GraphNodeDetails from "../../components/graph/graphNodeDetails";
 import { getElements } from "../../components/graph/utils";
+import { FeatureType } from "../../utils/utils";
 
 const { Title } = Typography;
 const { TabPane } = Tabs;
@@ -67,13 +68,13 @@ const LineageGraph: React.FC = () => {
             value={featureType}
             onChange={(e) => toggleFeatureType(e.target.value)}
           >
-            <Radio.Button value="all_nodes">All Features</Radio.Button>
-            <Radio.Button value="feathr_source_v1"> Source </Radio.Button>
-            <Radio.Button value="feathr_anchor_v1">Anchor</Radio.Button>
-            <Radio.Button value="feathr_anchor_feature_v1">
+            <Radio.Button value={FeatureType.AllNodes}>All Nodes</Radio.Button>
+            <Radio.Button value={FeatureType.Source}> Source </Radio.Button>
+            <Radio.Button value={FeatureType.Anchor}>Anchor</Radio.Button>
+            <Radio.Button value={FeatureType.AnchorFeature}>
               Anchor Feature
             </Radio.Button>
-            <Radio.Button value="feathr_derived_feature_v1">
+            <Radio.Button value={FeatureType.DerivedFeature}>
               Derived Feature
             </Radio.Button>
           </Radio.Group>
diff --git a/ui/src/utils/utils.tsx b/ui/src/utils/utils.tsx
index bf2177fad..85bfd8f42 100644
--- a/ui/src/utils/utils.tsx
+++ b/ui/src/utils/utils.tsx
@@ -21,3 +21,18 @@ export const getMsalConfig = () => {
 
   return new PublicClientApplication(msalConfig);
 };
+
+export const enum FeatureType {
+  AllNodes = "all_nodes",
+  Source = "feathr_source_v1",
+  Anchor = "feathr_anchor_v1",
+  AnchorFeature = "feathr_anchor_feature_v1",
+  DerivedFeature = "feathr_derived_feature_v1",
+}
+
+export const isFeature = (featureType: string) => {
+  return (
+    featureType === FeatureType.AnchorFeature ||
+    featureType === FeatureType.DerivedFeature
+  );
+};