From cb345be5a770df27913a7664674827e0c9464b07 Mon Sep 17 00:00:00 2001
From: t-curiekim <105448774+t-curiekim@users.noreply.github.com>
Date: Wed, 20 Jul 2022 09:32:32 -0700
Subject: [PATCH] split feature details into three columns (#491)

Split the feature details into three columns to prevent more scrolling
---
 ui/src/pages/feature/featureDetails.tsx | 38 ++++++++++++++-----------
 ui/src/site.css                         |  7 +++++
 2 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/ui/src/pages/feature/featureDetails.tsx b/ui/src/pages/feature/featureDetails.tsx
index 4d3f0ecf3..a363df036 100644
--- a/ui/src/pages/feature/featureDetails.tsx
+++ b/ui/src/pages/feature/featureDetails.tsx
@@ -23,11 +23,13 @@ function FeatureKey(props: { feature: Feature }) {
         <Col span={ 24 }>
             <Card className="card">
                 <Title level={ 4 }>Key</Title>
-                <p>Full Name: { keys[0].fullName }</p>
-                <p>Key Column: { keys[0].keyColumn }</p>
-                <p>Description: { keys[0].description }</p>
-                <p>Key Column Alias: { keys[0].keyColumnAlias }</p>
-                <p>Key Column Type: { keys[0].keyColumnType }</p>
+                <div className="feature-container">
+                  <p>Full Name: { keys[0].fullName }</p>
+                  <p>Key Column: { keys[0].keyColumn }</p>
+                  <p>Description: { keys[0].description }</p>
+                  <p>Key Column Alias: { keys[0].keyColumnAlias }</p>
+                  <p>Key Column Type: { keys[0].keyColumnType }</p>
+                </div>
             </Card>
         </Col>
     }
@@ -41,10 +43,12 @@ function FeatureType(props: { feature: Feature }) {
         <Col span={ 24 }>
             <Card className="card">
                 <Title level={ 4 }>Type</Title>
-                <p>Dimension Type: { type.dimensionType }</p>
-                <p>Tensor Category: { type.tensorCategory }</p>
-                <p>Type: { type.type }</p>
-                <p>Value Type: { type.valType }</p>
+                <div className="feature-container">
+                  <p>Dimension Type: { type.dimensionType }</p>
+                  <p>Tensor Category: { type.tensorCategory }</p>
+                  <p>Type: { type.type }</p>
+                  <p>Value Type: { type.valType }</p>
+                </div>
             </Card>
         </Col>
     }
@@ -58,13 +62,15 @@ function FeatureTransformation(props: { feature: Feature }) {
         <Col span={ 24 }>
             <Card className="card">
                 <Title level={ 4 }>Transformation</Title>
-              { transformation.transformExpr && <p>Expression: { transformation.transformExpr }</p> }
-              { transformation.filter && <p>Filter: { transformation.filter }</p> }
-              { transformation.aggFunc && <p>Aggregation: { transformation.aggFunc }</p> }
-              { transformation.limit && <p>Limit: { transformation.limit }</p> }
-              { transformation.groupBy && <p>Group By: { transformation.groupBy }</p> }
-              { transformation.window && <p>Window: { transformation.window }</p> }
-              { transformation.defExpr && <p>Expression: { transformation.defExpr }</p> }
+                <div className="feature-container">
+                  { transformation.transformExpr && <p>Expression: { transformation.transformExpr }</p> }
+                  { transformation.filter && <p>Filter: { transformation.filter }</p> }
+                  { transformation.aggFunc && <p>Aggregation: { transformation.aggFunc }</p> }
+                  { transformation.limit && <p>Limit: { transformation.limit }</p> }
+                  { transformation.groupBy && <p>Group By: { transformation.groupBy }</p> }
+                  { transformation.window && <p>Window: { transformation.window }</p> }
+                  { transformation.defExpr && <p>Expression: { transformation.defExpr }</p> }
+                </div>
             </Card>
         </Col>
     }
diff --git a/ui/src/site.css b/ui/src/site.css
index ef24f0420..02401e3bc 100644
--- a/ui/src/site.css
+++ b/ui/src/site.css
@@ -50,3 +50,10 @@
     padding: 4px 12px 7px;
 }
 
+.feature-container {
+    column-count: 3;
+}
+
+.feature-container p {
+    break-inside: avoid-column;
+}
\ No newline at end of file