From 731e519fb30842d18e9e87a2ee7a96f9fcef9ba7 Mon Sep 17 00:00:00 2001
From: Sachin Chaurasiya <sachinchaurasiyachotey87@gmail.com>
Date: Thu, 9 Dec 2021 21:45:16 +0530
Subject: [PATCH] Fix #1626 Profiler should show primary key, non null column
 information in profiler tab (#1649)

* Fix #1626 Profiler should show primary key, non null column information in profiler tab

* Minor fix
---
 .../DatasetDetails.component.tsx              |   5 +-
 .../TableProfiler/TableProfiler.component.tsx | 110 ++++++++++--------
 .../resources/ui/src/utils/TableUtils.tsx     |   5 +-
 3 files changed, 68 insertions(+), 52 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DatasetDetails/DatasetDetails.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DatasetDetails/DatasetDetails.component.tsx
index 7b1e2e6f944..8827be984e6 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/DatasetDetails/DatasetDetails.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DatasetDetails/DatasetDetails.component.tsx
@@ -394,7 +394,10 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
             {activeTab === 2 && (
               <div className="tw-mt-4">
                 <TableProfiler
-                  columns={columns.map((col) => col.name)}
+                  columns={columns.map((col) => ({
+                    constraint: col.constraint as string,
+                    colName: col.name,
+                  }))}
                   tableProfiles={tableProfile}
                 />
               </div>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfiler.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfiler.component.tsx
index 72d7587bd0c..fb1aff61c82 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfiler.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfiler.component.tsx
@@ -15,11 +15,12 @@ import classNames from 'classnames';
 import React, { Fragment, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { Table, TableProfile } from '../../generated/entity/data/table';
+import { getConstraintIcon } from '../../utils/TableUtils';
 import TableProfilerGraph from './TableProfilerGraph.component';
 
 type Props = {
   tableProfiles: Table['tableProfile'];
-  columns: Array<string>;
+  columns: Array<{ constraint: string; colName: string }>;
 };
 
 type ProfilerGraphData = Array<{
@@ -45,7 +46,7 @@ const TableProfiler = ({ tableProfiles, columns }: Props) => {
   const columnSpecificData = columns.map((column) => {
     const data = modifiedData?.map((md) => {
       const currentColumn = md.columnProfile?.find(
-        (colProfile) => colProfile.name === column
+        (colProfile) => colProfile.name === column.colName
       );
 
       return { profilDate: md.profileDate, ...currentColumn, rows: md.rows };
@@ -85,19 +86,19 @@ const TableProfiler = ({ tableProfiles, columns }: Props) => {
                     <td
                       className="tw-relative tableBody-cell"
                       data-testid="tableBody-cell">
-                      <p className="tw-flex">
+                      <div className="tw-flex">
                         <span
                           className="tw-mr-2 tw-cursor-pointer"
                           onClick={() =>
                             setExpandedColumn((prevState) => ({
-                              name: col.name,
+                              name: col.name.colName,
                               isExpanded:
-                                prevState.name === col.name
+                                prevState.name === col.name.colName
                                   ? !prevState.isExpanded
                                   : true,
                             }))
                           }>
-                          {expandedColumn.name === col.name ? (
+                          {expandedColumn.name === col.name.colName ? (
                             expandedColumn.isExpanded ? (
                               <i className="fas fa-caret-down" />
                             ) : (
@@ -107,8 +108,16 @@ const TableProfiler = ({ tableProfiles, columns }: Props) => {
                             <i className="fas fa-caret-right" />
                           )}
                         </span>
-                        <span>{col.name}</span>
-                      </p>
+                        {colIndex === 0 && (
+                          <span className="tw-mr-3 tw--ml-2">
+                            {getConstraintIcon(
+                              col.name.constraint,
+                              'tw-relative'
+                            )}
+                          </span>
+                        )}
+                        <span>{col.name.colName}</span>
+                      </div>
                     </td>
                     <td className="tw-relative tableBody-cell profiler-graph">
                       <TableProfilerGraph
@@ -151,47 +160,50 @@ const TableProfiler = ({ tableProfiles, columns }: Props) => {
                     </td>
                   </tr>
                 </tbody>
-                {expandedColumn.name === col.name && expandedColumn.isExpanded && (
-                  <tbody>
-                    {col.data?.map((colData, index) => (
-                      <tr
-                        className={classNames(
-                          'tableBody-row tw-border-0 tw-border-l tw-border-r',
-                          {
-                            'tw-border-b':
-                              columnSpecificData.length - 1 === colIndex &&
-                              col.data?.length === index + 1,
-                          }
-                        )}
-                        key={index}>
-                        <td className="tw-relative tableBody-cell">
-                          <span className="tw-pl-6">{colData.profilDate}</span>
-                        </td>
-                        <td className="tw-relative tableBody-cell">
-                          <span className="tw-pl-6">{colData.rows}</span>
-                        </td>
-                        <td className="tw-relative tableBody-cell">
-                          {colData.uniqueProportion ?? 0}
-                        </td>
-                        <td className="tw-relative tableBody-cell">
-                          {colData.nullProportion ?? 0}
-                        </td>
-                        <td className="tw-relative tableBody-cell">
-                          {colData.min ?? 0}
-                        </td>
-                        <td className="tw-relative tableBody-cell">
-                          {colData.max ?? 0}
-                        </td>
-                        <td className="tw-relative tableBody-cell">
-                          {colData.median ?? 0}
-                        </td>
-                        <td className="tw-relative tableBody-cell">
-                          {colData.stddev ?? 0}
-                        </td>
-                      </tr>
-                    ))}
-                  </tbody>
-                )}
+                {expandedColumn.name === col.name.colName &&
+                  expandedColumn.isExpanded && (
+                    <tbody>
+                      {col.data?.map((colData, index) => (
+                        <tr
+                          className={classNames(
+                            'tableBody-row tw-border-0 tw-border-l tw-border-r',
+                            {
+                              'tw-border-b':
+                                columnSpecificData.length - 1 === colIndex &&
+                                col.data?.length === index + 1,
+                            }
+                          )}
+                          key={index}>
+                          <td className="tw-relative tableBody-cell">
+                            <span className="tw-pl-6">
+                              {colData.profilDate}
+                            </span>
+                          </td>
+                          <td className="tw-relative tableBody-cell">
+                            <span className="tw-pl-6">{colData.rows}</span>
+                          </td>
+                          <td className="tw-relative tableBody-cell">
+                            {colData.uniqueProportion ?? 0}
+                          </td>
+                          <td className="tw-relative tableBody-cell">
+                            {colData.nullProportion ?? 0}
+                          </td>
+                          <td className="tw-relative tableBody-cell">
+                            {colData.min ?? 0}
+                          </td>
+                          <td className="tw-relative tableBody-cell">
+                            {colData.max ?? 0}
+                          </td>
+                          <td className="tw-relative tableBody-cell">
+                            {colData.median ?? 0}
+                          </td>
+                          <td className="tw-relative tableBody-cell">
+                            {colData.stddev ?? 0}
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  )}
               </Fragment>
             );
           })}
diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/TableUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/TableUtils.tsx
index b4aef0d4363..4d126340c01 100644
--- a/openmetadata-ui/src/main/resources/ui/src/utils/TableUtils.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/TableUtils.tsx
@@ -11,6 +11,7 @@
  *  limitations under the License.
  */
 
+import classNames from 'classnames';
 import { EntityTags, TableDetail } from 'Models';
 import React from 'react';
 import AppState from '../AppState';
@@ -144,7 +145,7 @@ export const getFollowerDetail = (id: string) => {
   return follower;
 };
 
-export const getConstraintIcon = (constraint = '') => {
+export const getConstraintIcon = (constraint = '', className = '') => {
   let title: string, icon: string;
   switch (constraint) {
     case ConstraintTypes.PRIMARY_KEY:
@@ -174,7 +175,7 @@ export const getConstraintIcon = (constraint = '') => {
 
   return (
     <PopOver
-      className="tw-absolute tw-left-2"
+      className={classNames('tw-absolute tw-left-2', className)}
       position="bottom"
       size="small"
       title={title}