From 1020a22f151a8b45f5016979a9df7e62472507f0 Mon Sep 17 00:00:00 2001
From: Blair Chen <blrchen@hotmail.com>
Date: Sun, 3 Jul 2022 17:38:33 +0800
Subject: [PATCH 1/2] UI style improvements

---
 ui/src/components/dataSourceList.tsx         |   1 -
 ui/src/components/featureList.tsx            |   2 +-
 ui/src/components/graph/graphNodeDetails.tsx |  45 ++--
 ui/src/components/header/header.tsx          |   3 +-
 ui/src/components/sidemenu/siteMenu.tsx      |  20 +-
 ui/src/models/model.ts                       |   6 +-
 ui/src/pages/dataSource/dataSources.tsx      |  19 +-
 ui/src/pages/feature/featureDetails.tsx      | 224 +++++++++++--------
 ui/src/pages/feature/features.tsx            |  31 ++-
 ui/src/pages/feature/lineageGraph.tsx        |  70 +++---
 ui/src/pages/feature/newFeature.tsx          |  11 +-
 ui/src/pages/jobs/jobs.tsx                   |   9 +-
 ui/src/pages/management/management.tsx       |  19 +-
 ui/src/pages/management/roleManagement.tsx   |  13 +-
 ui/src/pages/monitoring/monitoring.tsx       |  11 +-
 ui/src/site.css                              |  12 +
 16 files changed, 284 insertions(+), 212 deletions(-)

diff --git a/ui/src/components/dataSourceList.tsx b/ui/src/components/dataSourceList.tsx
index f395fee73..a191e266d 100644
--- a/ui/src/components/dataSourceList.tsx
+++ b/ui/src/components/dataSourceList.tsx
@@ -1,5 +1,4 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { LoadingOutlined } from "@ant-design/icons";
 import { Form, Select, Table } from "antd";
 import { DataSourceAttributes, DataSource } from "../models/model";
 import { fetchDataSources, fetchProjects } from "../api";
diff --git a/ui/src/components/featureList.tsx b/ui/src/components/featureList.tsx
index a0c7f78ef..d71cd9fef 100644
--- a/ui/src/components/featureList.tsx
+++ b/ui/src/components/featureList.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { Link, useNavigate } from "react-router-dom";
-import { DownOutlined, LoadingOutlined } from '@ant-design/icons';
+import { DownOutlined} from '@ant-design/icons';
 import { Button, Dropdown, Input, Menu, Select, Tooltip, Form, Table } from 'antd';
 import { Feature } from "../models/model";
 import { fetchProjects, fetchFeatures } from "../api";
diff --git a/ui/src/components/graph/graphNodeDetails.tsx b/ui/src/components/graph/graphNodeDetails.tsx
index 922c4b85f..b2da43195 100644
--- a/ui/src/components/graph/graphNodeDetails.tsx
+++ b/ui/src/components/graph/graphNodeDetails.tsx
@@ -3,7 +3,9 @@ import { useParams, useSearchParams } from "react-router-dom";
 import { fetchFeature } from '../../api';
 import { Feature } from "../../models/model";
 import { LoadingOutlined } from "@ant-design/icons";
-import { Card, Spin } from "antd";
+import { Card, Spin, Typography } from "antd";
+
+const { Title } = Typography;
 
 type Params = {
   project: string;
@@ -44,38 +46,41 @@ const GraphNodeDetails: React.FC = () => {
           : (<div style={ { margin: "2%" } }>
             { !feature && <p>Click on node to show metadata and metric details</p> }
             { feature?.attributes.transformation &&
-                <Card title="Transformation">
+                <Card>
+                  <title>Codestin Search App</title>
                   { feature.attributes.transformation.transform_expr &&
-                      <p>transform_expr: { feature.attributes.transformation.transform_expr }</p> }
+                      <p>Expression: { feature.attributes.transformation.transform_expr }</p> }
                   { feature.attributes.transformation.filter &&
-                      <p>filter: { feature.attributes.transformation.filter }</p> }
+                      <p>Filter { feature.attributes.transformation.filter }</p> }
                   { feature.attributes.transformation.agg_func &&
-                      <p>agg_func: { feature.attributes.transformation.agg_func }</p> }
+                      <p>Aggregation: { feature.attributes.transformation.agg_func }</p> }
                   { feature.attributes.transformation.limit &&
-                      <p>limit: { feature.attributes.transformation.limit }</p> }
+                      <p>Limit: { feature.attributes.transformation.limit }</p> }
                   { feature.attributes.transformation.group_by &&
-                      <p>group_by: { feature.attributes.transformation.group_by }</p> }
+                      <p>Group By: { feature.attributes.transformation.group_by }</p> }
                   { feature.attributes.transformation.window &&
-                      <p>window: { feature.attributes.transformation.window }</p> }
+                      <p>Window: { feature.attributes.transformation.window }</p> }
                   { feature.attributes.transformation.def_expr &&
-                      <p>def_expr: { feature.attributes.transformation.def_expr }</p> }
+                      <p>Expression: { feature.attributes.transformation.def_expr }</p> }
                 </Card>
             }
             { feature?.attributes.key && feature.attributes.key.length > 0 &&
-                <Card title="Key">
-                    <p>full_name: { feature.attributes.key[0].full_name }</p>
-                    <p>key_column: { feature.attributes.key[0].key_column }</p>
-                    <p>description: { feature.attributes.key[0].description }</p>
-                    <p>key_column_alias: { feature.attributes.key[0].key_column_alias }</p>
-                    <p>key_column_type: { feature.attributes.key[0].key_column_type }</p>
+                <Card>
+                    <title>Codestin Search App</title>
+                    <p>Full name: { feature.attributes.key[0].full_name }</p>
+                    <p>Description: { feature.attributes.key[0].description }</p>
+                    <p>Key column: { feature.attributes.key[0].key_column }</p>
+                    <p>Key column alias: { feature.attributes.key[0].key_column_alias }</p>
+                    <p>Key column type: { feature.attributes.key[0].key_column_type }</p>
                 </Card>
             }
             { feature?.attributes.type &&
-                <Card title="Type">
-                    <p>dimension_type: { feature.attributes.type.dimension_type }</p>
-                    <p>tensor_category: { feature.attributes.type.tensor_category }</p>
-                    <p>type: { feature.attributes.type.type }</p>
-                    <p>val_type: { feature.attributes.type.val_type }</p>
+                <Card>
+                    <title>Codestin Search App</title>
+                    <p>Dimension Type: { feature.attributes.type.dimensionType }</p>
+                    <p>Tensor Category: { feature.attributes.type.tensorCategory }</p>
+                    <p>Type: { feature.attributes.type.type }</p>
+                    <p>Value Type: { feature.attributes.type.valType }</p>
                 </Card>
             }
           </div>)
diff --git a/ui/src/components/header/header.tsx b/ui/src/components/header/header.tsx
index 9ff1e7b03..1d6063053 100644
--- a/ui/src/components/header/header.tsx
+++ b/ui/src/components/header/header.tsx
@@ -4,8 +4,7 @@ import { useAccount, useMsal } from "@azure/msal-react";
 import './header.css';
 import HeaderWidget from "./headerWidget";
 
-type Props = {};
-const Header: React.FC<Props> = () => {
+const Header: React.FC = () => {
   const { accounts } = useMsal();
   const account = useAccount(accounts[0] || {});
   return (
diff --git a/ui/src/components/sidemenu/siteMenu.tsx b/ui/src/components/sidemenu/siteMenu.tsx
index d99638756..3f829ebf7 100644
--- a/ui/src/components/sidemenu/siteMenu.tsx
+++ b/ui/src/components/sidemenu/siteMenu.tsx
@@ -1,30 +1,30 @@
-import { Layout, Menu } from 'antd';
-import { CopyOutlined, DatabaseOutlined, EyeOutlined, RocketOutlined} from '@ant-design/icons';
+import { Layout, Menu, Typography } from 'antd';
+import { CopyOutlined, DatabaseOutlined, EyeOutlined, RocketOutlined } from '@ant-design/icons';
 import { Link } from 'react-router-dom';
 
+const { Title} = Typography;
 const { Sider } = Layout;
+
 const SideMenu = () => {
   return (
-    <Sider>
-      <div style={ { fontSize: 'medium', color: 'white', margin: '10px', paddingLeft: '15px' } }>
-        Feathr Web UI
-      </div>
+    <Sider theme="dark">
+      <title>Codestin Search App</title>
       <Menu
         theme="dark"
         mode="inline"
         defaultSelectedKeys={ ['/'] }
         defaultOpenKeys={ ['/'] }
       >
-        <Menu.Item key="/dataSources" icon={ <DatabaseOutlined /> }>
+        <Menu.Item key="/dataSources" icon={ <DatabaseOutlined style={{fontSize: '20px', color: '#13a8a8'}}/> }>
           <Link to="/dataSources">Data Sources</Link>
         </Menu.Item>
-        <Menu.Item key="/features" icon={ <CopyOutlined /> }>
+        <Menu.Item key="/features" icon={ <CopyOutlined style={{fontSize: '20px', color: '#d89614'}}/> }>
           <Link to="/features">Features</Link>
         </Menu.Item>
-        <Menu.Item key="/jobs" icon={ <RocketOutlined /> }>
+        <Menu.Item key="/jobs" icon={ <RocketOutlined style={{fontSize: '20px', color: '#642ab5'}}/> }>
           <Link to="/jobs">Jobs</Link>
         </Menu.Item>
-        <Menu.Item key="/monitoring" icon={ <EyeOutlined /> }>
+        <Menu.Item key="/monitoring" icon={ <EyeOutlined style={{fontSize: '20px', color: '#e84749'}}/> }>
           <Link to="/monitoring">Monitoring</Link>
         </Menu.Item>
       </Menu>
diff --git a/ui/src/models/model.ts b/ui/src/models/model.ts
index 71937ad73..f2c984df6 100644
--- a/ui/src/models/model.ts
+++ b/ui/src/models/model.ts
@@ -19,10 +19,10 @@ export interface FeatureAttributes {
 }
 
 export interface FeatureType {
+  dimensionType: string[],
+  tensorCategory: string,
   type: string,
-  tensor_category: string,
-  dimension_type: string[],
-  val_type: string
+  valType: string
 }
 export interface FeatureTransformation {
   transform_expr: string,
diff --git a/ui/src/pages/dataSource/dataSources.tsx b/ui/src/pages/dataSource/dataSources.tsx
index 9203fefc2..ba89462c8 100644
--- a/ui/src/pages/dataSource/dataSources.tsx
+++ b/ui/src/pages/dataSource/dataSources.tsx
@@ -1,18 +1,17 @@
 import React from 'react';
-import { Card } from 'antd';
+import { Card, Typography } from 'antd';
 import DataSourceList from "../../components/dataSourceList";
 
-type Props = {};
+const { Title } = Typography;
 
-const DataSources: React.FC<Props> = () => {
+const DataSources: React.FC = () => {
   return (
-    <>
-      <div className="home" style={ { margin: "2%" } }>
-        <Card style={ { minWidth: '1000px' } }>
-          <DataSourceList />
-        </Card>
-      </div>
-    </>
+    <div className="page" >
+      <Card>
+        <title>Codestin Search App</title>
+        <DataSourceList />
+      </Card>
+    </div>
   );
 };
 
diff --git a/ui/src/pages/feature/featureDetails.tsx b/ui/src/pages/feature/featureDetails.tsx
index 919ede463..b6322a821 100644
--- a/ui/src/pages/feature/featureDetails.tsx
+++ b/ui/src/pages/feature/featureDetails.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Alert, Button, Card, Col, Row, Space, Spin } from 'antd';
+import { Alert, Button, Card, Col, Row, Space, Spin, Typography } from 'antd';
 import { LoadingOutlined } from '@ant-design/icons';
 import { useNavigate, useParams } from "react-router-dom";
 import { QueryStatus, useQuery } from "react-query";
@@ -7,11 +7,121 @@ import { AxiosError } from 'axios';
 import { fetchFeature } from '../../api';
 import { Feature } from "../../models/model";
 
+const { Title } = Typography;
+
+function FeatureKey(props: { feature: Feature }) {
+  return <>
+    { props.feature.attributes.key && props.feature.attributes.key.length > 0 &&
+        <Col span={ 24 }>
+            <Card className="card">
+                <title>Codestin Search App</title>
+                <p>Full name: { props.feature.attributes.key[0].full_name }</p>
+                <p>Key column: { props.feature.attributes.key[0].key_column }</p>
+                <p>Description: { props.feature.attributes.key[0].description }</p>
+                <p>Key column alias: { props.feature.attributes.key[0].key_column_alias }</p>
+                <p>key column type: { props.feature.attributes.key[0].key_column_type }</p>
+            </Card>
+        </Col>
+    }
+  </>;
+}
+
+function FeatureType(props: { feature: Feature }) {
+  return <>
+    { props.feature.attributes.type &&
+        <Col span={ 24 }>
+            <Card className="card">
+                <title>Codestin Search App</title>
+                <p>Dimension Type: { props.feature.attributes.type.dimensionType }</p>
+                <p>Tensor Category: { props.feature.attributes.type.tensorCategory }</p>
+                <p>Type: { props.feature.attributes.type.type }</p>
+                <p>Value Type: { props.feature.attributes.type.valType }</p>
+            </Card>
+        </Col>
+    }
+  </>;
+}
+
+function FeatureTransformation(props: { feature: Feature }) {
+  return <>
+    { props.feature.attributes.transformation &&
+        <Col span={ 24 }>
+            <Card className="card">
+                <title>Codestin Search App</title>
+              { props.feature.attributes.transformation.transform_expr &&
+                  <p>Expression: { props.feature.attributes.transformation.transform_expr }</p> }
+              { props.feature.attributes.transformation.filter &&
+                  <p>Filter: { props.feature.attributes.transformation.filter }</p> }
+              { props.feature.attributes.transformation.agg_func &&
+                  <p>Aggregation: { props.feature.attributes.transformation.agg_func }</p> }
+              { props.feature.attributes.transformation.limit &&
+                  <p>Limit: { props.feature.attributes.transformation.limit }</p> }
+              { props.feature.attributes.transformation.group_by &&
+                  <p>Group By: { props.feature.attributes.transformation.group_by }</p> }
+              { props.feature.attributes.transformation.window &&
+                  <p>Window: { props.feature.attributes.transformation.window }</p> }
+              { props.feature.attributes.transformation.def_expr &&
+                  <p>Expression: { props.feature.attributes.transformation.def_expr }</p> }
+            </Card>
+        </Col>
+    }
+  </>;
+}
+
+function InputAnchorFeatures(props: { project: string, feature: Feature }) {
+  const navigate = useNavigate();
+  return <>
+    { props.feature.attributes._input_anchor_features && props.feature.attributes._input_anchor_features.length > 0 &&
+        <Col span={ 24 }>
+            <Card style={ {
+              marginTop: "15px",
+              marginRight: "15px",
+              minWidth: "1000px",
+              boxShadow: "5px 8px 15px 5px rgba(208, 216, 243, 0.6)",
+              borderRadius: "8px"
+            } }>
+                <title>Codestin Search App</title>
+              {
+                props.feature.attributes._input_anchor_features.map((input_feature) =>
+                  <Button type="link" onClick={ () => {
+                    navigate(`/projects/${ props.project }/features/${ input_feature.id }`)
+                  } }>{ input_feature.attributes.name }</Button>)
+              }
+            </Card>
+        </Col>
+    }
+  </>;
+}
+
+function InputDerivedFeatures(props: { project: string, feature: Feature }) {
+  const navigate = useNavigate();
+  return <>
+    { props.feature.attributes._input_derived_features && props.feature.attributes._input_derived_features.length > 0 &&
+        <Col span={ 24 }>
+            <Card style={ {
+              marginTop: "15px",
+              marginRight: "15px",
+              minWidth: "1000px",
+              boxShadow: "5px 8px 15px 5px rgba(208, 216, 243, 0.6)",
+              borderRadius: "8px"
+            } }>
+                <title>Codestin Search App</title>
+              {
+                props.feature.attributes._input_derived_features.map((input_feature) =>
+                  <Button type="link" onClick={ () => {
+                    navigate(`/projects/${ props.project }/features/${ input_feature.id }`)
+                  } }>{ input_feature.attributes.name }</Button>)
+              }
+            </Card>
+        </Col>
+    }
+  </>;
+}
+
 type Params = {
   project: string;
   featureId: string;
 }
-
 const FeatureDetails: React.FC = () => {
   const { project, featureId } = useParams() as Params;
   const navigate = useNavigate();
@@ -27,89 +137,6 @@ const FeatureDetails: React.FC = () => {
     navigate(lineageUrl);
   }
 
-  const renderCommandButtons = () => {
-    return (
-      <div>
-        <Space>
-          <Button type="primary" onClick={ () => openLineageWindow() }>
-            View Lineage
-          </Button>
-        </Space>
-      </div>
-    )
-  }
-
-  const renderFeature = (feature: Feature): JSX.Element => {
-    return (
-      <div className="site-card-wrapper">
-        <Row>
-          { feature.attributes.key && feature.attributes.key.length > 0 &&
-              <Col span={ 8 }>
-                  <Card title="Key" bordered={ false }>
-                      <p>full_name: { feature.attributes.key[0].full_name }</p>
-                      <p>key_column: { feature.attributes.key[0].key_column }</p>
-                      <p>description: { feature.attributes.key[0].description }</p>
-                      <p>key_column_alias: { feature.attributes.key[0].key_column_alias }</p>
-                      <p>key_column_type: { feature.attributes.key[0].key_column_type }</p>
-                  </Card>
-              </Col>
-          }
-          { feature.attributes.type &&
-              <Col span={ 8 }>
-                  <Card title="Type" bordered={ false }>
-                      <p>dimension_type: { feature.attributes.type.dimension_type }</p>
-                      <p>tensor_category: { feature.attributes.type.tensor_category }</p>
-                      <p>type: { feature.attributes.type.type }</p>
-                      <p>val_type: { feature.attributes.type.val_type }</p>
-                  </Card>
-              </Col>
-          }
-          { feature.attributes.transformation &&
-              <Col span={ 8 }>
-                  <Card title="Transformation" bordered={ false }>
-                      <p>transform_expr: { feature.attributes.transformation.transform_expr ?? "N/A" }</p>
-                      <p>filter: { feature.attributes.transformation.filter ?? "N/A" }</p>
-                      <p>agg_func: { feature.attributes.transformation.agg_func ?? "N/A" }</p>
-                      <p>limit: { feature.attributes.transformation.limit ?? "N/A" }</p>
-                      <p>group_by: { feature.attributes.transformation.group_by ?? "N/A" }</p>
-                      <p>window: { feature.attributes.transformation.window ?? "N/A" }</p>
-                      <p>def_expr: { feature.attributes.transformation.def_expr ?? "N/A" }</p>
-                  </Card>
-              </Col>
-          }
-        </Row>
-        <Row>
-          { feature.attributes._input_anchor_features && feature.attributes._input_anchor_features.length > 0 &&
-              <Col span={ 24 }>
-                  <Card title="Input Anchor Features" bordered={ false }>
-                    {
-                      feature.attributes._input_anchor_features.map((feature) =>
-                        <Button type="link" onClick={ () => {
-                          navigate(`/projects/${ project }/features/${ feature.id }`)
-                        } }>{ feature.attributes.name }</Button>)
-                    }
-                  </Card>
-              </Col>
-          }
-        </Row>
-        <Row>
-          { feature.attributes._input_derived_features && feature.attributes._input_derived_features.length > 0 &&
-              <Col span={ 24 }>
-                  <Card title="Input Derived Features" bordered={ false }>
-                    {
-                      feature.attributes._input_derived_features.map((feature) =>
-                        <Button type="link" onClick={ () => {
-                          navigate(`/projects/${ project }/features/${ feature.id }`)
-                        } }>{ feature.attributes.name }</Button>)
-                    }
-                  </Card>
-              </Col>
-          }
-        </Row>
-      </div>
-    )
-  }
-
   const render = (status: QueryStatus): JSX.Element => {
     switch (status) {
       case "error":
@@ -149,17 +176,34 @@ const FeatureDetails: React.FC = () => {
           );
         } else {
           return (
-            <Card title={ data.displayText }>
-              { renderCommandButtons() }
-              { renderFeature(data) }
-            </Card>
+            <>
+              <Card>
+                <title>Codestin Search App</title>
+                <div>
+                  <Space>
+                    <Button type="primary" onClick={ () => openLineageWindow() }>
+                      View Lineage
+                    </Button>
+                  </Space>
+                </div>
+                <div>
+                  <Row>
+                    <InputAnchorFeatures project={ project } feature={ data } />
+                    <InputDerivedFeatures project={ project } feature={ data } />
+                    <FeatureTransformation feature={ data } />
+                    <FeatureKey feature={ data } />
+                    <FeatureType feature={ data } />
+                  </Row>
+                </div>
+              </Card>
+            </>
           );
         }
     }
   }
 
   return (
-    <div style={ { margin: "2%" } }>
+    <div className="page">
       { render(status) }
     </div>
   );
diff --git a/ui/src/pages/feature/features.tsx b/ui/src/pages/feature/features.tsx
index 15d011832..ff5d2522f 100644
--- a/ui/src/pages/feature/features.tsx
+++ b/ui/src/pages/feature/features.tsx
@@ -1,30 +1,29 @@
 import React from 'react';
-import { Button, Card, Space } from 'antd';
+import { Button, Card, Space, Typography } from 'antd';
 import { useNavigate } from "react-router-dom";
 import FeatureList from "../../components/featureList";
 
-type Props = {};
+const { Title } = Typography;
 
-const Features: React.FC<Props> = () => {
+const Features: React.FC = () => {
   const navigate = useNavigate();
   const onCreateFeatureClick = () => {
     navigate('/new-feature');
   };
 
   return (
-    <>
-      <div className="home" style={ { margin: "2%" } }>
-        <Card style={ { minWidth: '1000px' } }>
-          <Space style={ { marginBottom: 16 } }>
-            <Button type="primary" onClick={ onCreateFeatureClick }
-                    style={ { position: "absolute", right: "12px", top: "56px" } }>
-              + Create Feature
-            </Button>
-          </Space>
-          <FeatureList />
-        </Card>
-      </div>
-    </>
+    <div className="page" >
+      <Card>
+        <title>Codestin Search App</title>
+        <Space style={ { marginBottom: 16 } }>
+          <Button type="primary" onClick={ onCreateFeatureClick }
+                  style={ { position: "absolute", right: "12px", top: "56px" } }>
+            + Create Feature
+          </Button>
+        </Space>
+        <FeatureList />
+      </Card>
+    </div>
   );
 };
 
diff --git a/ui/src/pages/feature/lineageGraph.tsx b/ui/src/pages/feature/lineageGraph.tsx
index 5035a7fa9..443f10910 100644
--- a/ui/src/pages/feature/lineageGraph.tsx
+++ b/ui/src/pages/feature/lineageGraph.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Card, Col, Radio, Row, Spin } from 'antd';
+import { Card, Col, Radio, Row, Spin, Tabs } from 'antd';
 import { useParams, useSearchParams } from "react-router-dom";
 import { Elements } from 'react-flow-renderer';
 import Graph from "../../components/graph/graph";
@@ -94,35 +94,47 @@ const LineageGraph: React.FC = () => {
       return type;
     });
   };
-
+  const { TabPane } = Tabs;
   return (
-    <Card title={ "Lineage" }>
-      <div>
-        <Radio.Group 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">Anchor Feature</Radio.Button>
-          <Radio.Button value="feathr_derived_feature_v1">Derived Feature</Radio.Button>
-        </Radio.Group>
-      </div>
-      <div>
-        {
-          loading
-            ? (<Spin indicator={ <LoadingOutlined style={ { fontSize: 24 } } spin /> } />)
-            : (
-              <Row>
-                <Col flex="2">
-                  <Graph data={ elements } nodeId={ nodeId } />
-                </Col>
-                <Col flex="1">
-                  <GraphNodeDetails></GraphNodeDetails>
-                </Col>
-              </Row>
-            )
-        }
-      </div>
-    </Card>
+    <div className="page">
+      <Card title={ "Lineage" }>
+        <div>
+          <Radio.Group 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">Anchor Feature</Radio.Button>
+            <Radio.Button value="feathr_derived_feature_v1">Derived Feature</Radio.Button>
+          </Radio.Group>
+        </div>
+        <div>
+          {
+            loading
+              ? (<Spin indicator={ <LoadingOutlined style={ { fontSize: 24 } } spin /> } />)
+              : (
+                <Row>
+                  <Col flex="2">
+                    <Graph data={ elements } nodeId={ nodeId } />
+                  </Col>
+                  <Col flex="1">
+                    <Tabs defaultActiveKey="1">
+                      <TabPane tab="Metadata" key="1">
+                        <GraphNodeDetails></GraphNodeDetails>
+                      </TabPane>
+                      <TabPane tab="Metrics" key="2">
+                        <p>Under construction</p>
+                      </TabPane>
+                      <TabPane tab="Jobs" key="3">
+                        <p>Under construction</p>
+                      </TabPane>
+                    </Tabs>
+                  </Col>
+                </Row>
+              )
+          }
+        </div>
+      </Card>
+    </div>
   );
 }
 
diff --git a/ui/src/pages/feature/newFeature.tsx b/ui/src/pages/feature/newFeature.tsx
index 5499cefdd..fe69c3ad0 100644
--- a/ui/src/pages/feature/newFeature.tsx
+++ b/ui/src/pages/feature/newFeature.tsx
@@ -1,13 +1,14 @@
 import React from 'react';
-import { Card } from 'antd';
+import { Card, Typography } from 'antd';
 import FeatureForm from '../../components/featureForm';
 
-type Props = {};
+const { Title } = Typography;
 
-const NewFeature: React.FC<Props> = () => {
+const NewFeature: React.FC = () => {
   return (
-    <div style={ { "margin": "2%" } }>
-      <Card title="Create Feature">
+    <div className="page">
+      <Card>
+        <title>Codestin Search App</title>
         <FeatureForm isNew={ true } editMode={ true } />
       </Card>
     </div>
diff --git a/ui/src/pages/jobs/jobs.tsx b/ui/src/pages/jobs/jobs.tsx
index 99c4117d7..117663191 100644
--- a/ui/src/pages/jobs/jobs.tsx
+++ b/ui/src/pages/jobs/jobs.tsx
@@ -1,12 +1,13 @@
 import React from 'react';
-import { Card} from 'antd';
+import { Card, Typography } from 'antd';
 
-type Props = {};
+const { Title } = Typography;
 
-const Jobs: React.FC<Props> = () => {
+const Jobs: React.FC = () => {
   return (
-    <div className="home" style={ { margin: "2%" } }>
+    <div className="page">
       <Card style={ { minWidth: '1000px' } }>
+        <title>Codestin Search App</title>
         Under construction
       </Card>
     </div>
diff --git a/ui/src/pages/management/management.tsx b/ui/src/pages/management/management.tsx
index 3788fd84c..1fed4d0d9 100644
--- a/ui/src/pages/management/management.tsx
+++ b/ui/src/pages/management/management.tsx
@@ -1,18 +1,17 @@
 import React from 'react';
-import { Card } from 'antd';
+import { Card, Typography } from 'antd';
 import UserRoles from '../../components/userRoles';
 
-type Props = {};
+const { Title } = Typography;
 
-const Management: React.FC<Props> = () => {
+const Management: React.FC = () => {
   return (
-    <>
-      <div className="home" style={{ margin: "2%" }}>
-        <Card style={{ minWidth: '1000px' }}>
-          <UserRoles />
-        </Card>
-      </div>
-    </>
+    <div className="page">
+      <Card style={ { minWidth: '1000px' } }>
+        <title>Codestin Search App</title>
+        <UserRoles />
+      </Card>
+    </div>
   );
 };
 
diff --git a/ui/src/pages/management/roleManagement.tsx b/ui/src/pages/management/roleManagement.tsx
index a2261c0b2..5abb0ff1a 100644
--- a/ui/src/pages/management/roleManagement.tsx
+++ b/ui/src/pages/management/roleManagement.tsx
@@ -1,17 +1,18 @@
 import React from 'react';
-import { Card } from 'antd';
+import { Card, Typography } from 'antd';
 import RoleManagementForm from '../../components/roleManagementForm';
 
-type Props = {};
+const { Title } = Typography;
 
-const RoleManagement: React.FC<Props> = () => {
+const RoleManagement: React.FC = () => {
   return (
-    <div style={ { "margin": "2%" } }>
-      <Card title="Role Management">
+    <div className="page">
+      <Card>
+        <title>Codestin Search App</title>
         <RoleManagementForm isNew={ true } editMode={ true } />
       </Card>
     </div>
   );
 };
 
-export default RoleManagement;
\ No newline at end of file
+export default RoleManagement;
diff --git a/ui/src/pages/monitoring/monitoring.tsx b/ui/src/pages/monitoring/monitoring.tsx
index 1f8bc2047..1cce8abd1 100644
--- a/ui/src/pages/monitoring/monitoring.tsx
+++ b/ui/src/pages/monitoring/monitoring.tsx
@@ -1,12 +1,13 @@
 import React from 'react';
-import { Card} from 'antd';
+import { Card, Typography } from 'antd';
 
-type Props = {};
+const { Title } = Typography;
 
-const Monitoring: React.FC<Props> = () => {
+const Monitoring: React.FC = () => {
   return (
-    <div className="home" style={ { margin: "2%" } }>
-      <Card style={ { minWidth: '1000px' } }>
+    <div className="page">
+      <Card>
+        <title>Codestin Search App</title>
         Under construction
       </Card>
     </div>
diff --git a/ui/src/site.css b/ui/src/site.css
index 0882a413b..ef24f0420 100644
--- a/ui/src/site.css
+++ b/ui/src/site.css
@@ -1,3 +1,15 @@
+.page {
+    margin: 1%;
+}
+
+.card {
+    margin-top: 15px;
+    margin-right: 15px;
+    min-width: 1000px;
+    box-shadow: 5px 8px 15px 5px rgba(208, 216, 243, 0.6);
+    border-radius: 8px;
+}
+
 .lineage-graph {
     margin-top: 1.5rem;
 }

From 83c2c6d68994fbdb8ab295a09f7b06341ab323da Mon Sep 17 00:00:00 2001
From: Blair Chen <blrchen@hotmail.com>
Date: Sun, 3 Jul 2022 17:47:07 +0800
Subject: [PATCH 2/2] Append project name in lineage page title

---
 ui/src/pages/feature/lineageGraph.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/ui/src/pages/feature/lineageGraph.tsx b/ui/src/pages/feature/lineageGraph.tsx
index 443f10910..0ba733550 100644
--- a/ui/src/pages/feature/lineageGraph.tsx
+++ b/ui/src/pages/feature/lineageGraph.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Card, Col, Radio, Row, Spin, Tabs } from 'antd';
+import { Card, Col, Radio, Row, Spin, Tabs, Typography } from 'antd';
 import { useParams, useSearchParams } from "react-router-dom";
 import { Elements } from 'react-flow-renderer';
 import Graph from "../../components/graph/graph";
@@ -9,6 +9,9 @@ import { FeatureLineage } from "../../models/model";
 import { LoadingOutlined } from "@ant-design/icons";
 import GraphNodeDetails from "../../components/graph/graphNodeDetails";
 
+const { Title } = Typography;
+const { TabPane } = Tabs;
+
 type Params = {
   project: string;
 }
@@ -94,10 +97,11 @@ const LineageGraph: React.FC = () => {
       return type;
     });
   };
-  const { TabPane } = Tabs;
+
   return (
     <div className="page">
-      <Card title={ "Lineage" }>
+      <Card>
+        <title>Codestin Search App</title>
         <div>
           <Radio.Group value={ featureType } onChange={ e => toggleFeatureType(e.target.value) }>
             <Radio.Button value="all_nodes">All Features</Radio.Button>