remove extra navigation icon and add control for search button

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" }}

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,
@@ -108,7 +108,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 +164,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 +175,7 @@ const Graph: React.FC<Props> = ({ data, nodeId }) => {
               });
             }
           }}
+
           onNodeDragStop={onNodeDragStop}
           connectionLineType={ConnectionLineType.SmoothStep}
           nodeTypes={nodeTypes}

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);
@@ -47,7 +41,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 level={4}>Transformation</Title>

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,