From 494d03a51450003a40c134ec9c004168c10e1733 Mon Sep 17 00:00:00 2001
From: Blair Chen <blrchen@hotmail.com>
Date: Mon, 16 May 2022 17:12:30 +0800
Subject: [PATCH 1/2] Feathr UI: Display feature key and transformation
 expression in feature detail pages

---
 ui/src/models/model.ts                  | 22 +++++++----
 ui/src/pages/feature/featureDetails.tsx | 52 ++++++++++++-------------
 2 files changed, 41 insertions(+), 33 deletions(-)

diff --git a/ui/src/models/model.ts b/ui/src/models/model.ts
index 6b58ddcde..235855fc1 100644
--- a/ui/src/models/model.ts
+++ b/ui/src/models/model.ts
@@ -26,9 +26,7 @@ export interface FeatureAttributes {
   name: string;
   type: string;
   transformation: FeatureTransformation;
-  definition: string;
-  def: FeatureDef;
-  "def.sqlExpr": string;
+  key: FeatureKey[];
   window: string;
   input_anchor_features: InputAnchorFeatures[];
   input_derived_features: InputDerivedFeatures[]
@@ -42,12 +40,22 @@ export interface InputDerivedFeatures {
   uniqueAttributes: FeatureAttributes;
 }
 
-export interface FeatureDef {
-  sqlExpr: string;
+export interface FeatureTransformation {
+  transform_expr: string,
+  filter: string,
+  agg_func: string,
+  limit: string,
+  group_by: string,
+  window: string,
+  def_expr: string
 }
 
-export interface FeatureTransformation {
-  transform_expr: string
+export interface FeatureKey {
+  full_name: string,
+  key_column: string,
+  description: string,
+  key_column_alias: string,
+  key_column_type: string
 }
 
 export interface IDataSource {
diff --git a/ui/src/pages/feature/featureDetails.tsx b/ui/src/pages/feature/featureDetails.tsx
index dc8077092..eb6c034bb 100644
--- a/ui/src/pages/feature/featureDetails.tsx
+++ b/ui/src/pages/feature/featureDetails.tsx
@@ -78,56 +78,56 @@ const FeatureDetails: React.FC<Props> = () => {
   const renderFeature = (feature: FeatureAttributes): JSX.Element => {
     return (
       <div className="site-card-wrapper">
-        <Row gutter={ 16 }>
-          { feature?.type &&
+        <Row>
+          { feature?.key && feature.key.length > 0 &&
               <Col span={ 8 }>
-                  <Card title="Type" bordered={ false }>
-                    { feature.type }
+                  <Card title="Key" bordered={ false }>
+                      <p>full_name: { feature.key[0].full_name }</p>
+                      <p>key_column: { feature.key[0].key_column }</p>
+                      <p>description: { feature.key[0].description }</p>
+                      <p>key_column_alias: { feature.key[0].key_column_alias }</p>
+                      <p>key_column_type: { feature.key[0].key_column_type }</p>
                   </Card>
               </Col>
           }
-          { feature?.definition &&
+          { feature?.type &&
               <Col span={ 8 }>
-                  <Card title="Definition" bordered={ false }>
-                    { feature.definition }
+                  <Card title="Type" bordered={ false }>
+                    { feature.type }
                   </Card>
               </Col>
           }
-          { feature?.def &&
+          { feature?.transformation &&
               <Col span={ 8 }>
-                  <Card title="SQL Expression" bordered={ false }>
-                    { feature["def.sqlExpr"] }
+                  <Card title="Transformation" bordered={ false }>
+                    <p>transform_expr: { feature.transformation.transform_expr }</p>
+                    <p>filter: { feature.transformation.filter }</p>
+                    <p>agg_func: { feature.transformation.agg_func }</p>
+                    <p>limit: { feature.transformation.limit }</p>
+                    <p>group_by: { feature.transformation.group_by }</p>
+                    <p>window: { feature.transformation.window }</p>
+                    <p>def_expr: { feature.transformation.def_expr }</p>
                   </Card>
               </Col>
           }
+        </Row>
+        <Row>
           { feature?.input_anchor_features && feature?.input_anchor_features.length > 0 &&
-              <Col span={ 16 }>
+              <Col span={ 24 }>
                   <Card title="Input Anchor Features" bordered={ false }>
                     { renderInputFeatureList(feature.input_anchor_features) }
                   </Card>
               </Col>
           }
+        </Row>
+        <Row>
           { feature?.input_derived_features && feature?.input_derived_features.length > 0 &&
-              <Col span={ 16 }>
+              <Col span={ 24 }>
                   <Card title="Input Derived Features" bordered={ false }>
                     { renderInputFeatureList(feature.input_derived_features) }
                   </Card>
               </Col>
           }
-          { feature?.transformation &&
-              <Col span={ 8 }>
-                  <Card title="Transformation" bordered={ false }>
-                    { feature.transformation.transform_expr }
-                  </Card>
-              </Col>
-          }
-          { feature?.window &&
-              <Col span={ 8 }>
-                  <Card title="Window" bordered={ false }>
-                    { feature.window }
-                  </Card>
-              </Col>
-          }
         </Row>
       </div>
     )

From fc3f32786c99c5ea148f0de67e90ae1d57be0786 Mon Sep 17 00:00:00 2001
From: Blair Chen <blrchen@hotmail.com>
Date: Wed, 18 May 2022 01:30:59 +0800
Subject: [PATCH 2/2] Display "N/A" if transformation field is null

---
 ui/src/pages/feature/featureDetails.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/ui/src/pages/feature/featureDetails.tsx b/ui/src/pages/feature/featureDetails.tsx
index eb6c034bb..fef6f7f86 100644
--- a/ui/src/pages/feature/featureDetails.tsx
+++ b/ui/src/pages/feature/featureDetails.tsx
@@ -100,13 +100,13 @@ const FeatureDetails: React.FC<Props> = () => {
           { feature?.transformation &&
               <Col span={ 8 }>
                   <Card title="Transformation" bordered={ false }>
-                    <p>transform_expr: { feature.transformation.transform_expr }</p>
-                    <p>filter: { feature.transformation.filter }</p>
-                    <p>agg_func: { feature.transformation.agg_func }</p>
-                    <p>limit: { feature.transformation.limit }</p>
-                    <p>group_by: { feature.transformation.group_by }</p>
-                    <p>window: { feature.transformation.window }</p>
-                    <p>def_expr: { feature.transformation.def_expr }</p>
+                      <p>transform_expr: { feature.transformation.transform_expr ?? "N/A" }</p>
+                      <p>filter: { feature.transformation.filter ?? "N/A" }</p>
+                      <p>agg_func: { feature.transformation.agg_func ?? "N/A" }</p>
+                      <p>limit: { feature.transformation.limit ?? "N/A" }</p>
+                      <p>group_by: { feature.transformation.group_by ?? "N/A" }</p>
+                      <p>window: { feature.transformation.window ?? "N/A" }</p>
+                      <p>def_expr: { feature.transformation.def_expr ?? "N/A" }</p>
                   </Card>
               </Col>
           }