ui: entity summary panel improvements (#9922)

* fixed bug where table constraints were not displaying in entity summary panel

* fixed summary panel not hiding in case of no results

* Changes made to improved the typescript type declaration as per comment
This commit is contained in:
Aniket Katkar 2023-01-27 18:45:12 +05:30 committed by GitHub
parent 192c992e21
commit 1ead5a8964
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 32 additions and 17 deletions

View File

@ -15,7 +15,11 @@ import { ReactNode } from 'react';
import { SummaryEntityType } from '../../../../enums/EntitySummary.enum';
import { ChartType } from '../../../../generated/entity/data/chart';
import { FeatureType } from '../../../../generated/entity/data/mlmodel';
import { Constraint, DataType } from '../../../../generated/entity/data/table';
import {
Constraint,
DataType,
TableConstraint,
} from '../../../../generated/entity/data/table';
import { TagLabel } from '../../../../generated/type/tagLabel';
export interface BasicEntityInfo {
@ -25,7 +29,8 @@ export interface BasicEntityInfo {
type?: DataType | ChartType | FeatureType | string;
tags?: TagLabel[];
description?: string;
constraint?: Constraint;
columnConstraint?: Constraint;
tableConstraints?: TableConstraint[];
children?: BasicEntityInfo[];
}

View File

@ -37,8 +37,8 @@ function SummaryListItem({
{isColumnsData &&
prepareConstraintIcon(
entityDetails.name,
entityDetails.constraint,
undefined,
entityDetails.columnConstraint,
entityDetails.tableConstraints,
'm-r-xss',
'14px'
)}

View File

@ -47,7 +47,7 @@ import { BasicTableInfo, TableSummaryProps } from './TableSummary.interface';
function TableSummary({ entityDetails }: TableSummaryProps) {
const { t } = useTranslation();
const [TableDetails, setTableDetails] = useState<Table>(entityDetails);
const [tableDetails, setTableDetails] = useState<Table>(entityDetails);
const [tableTests, setTableTests] = useState<TableTestsType>({
tests: [],
results: INITIAL_TEST_RESULT_SUMMARY,
@ -116,27 +116,27 @@ function TableSummary({ entityDetails }: TableSummaryProps) {
};
const overallSummary: OverallTableSummeryType[] | undefined = useMemo(() => {
if (isUndefined(TableDetails.profile)) {
if (isUndefined(tableDetails.profile)) {
return undefined;
}
return [
{
title: t('label.row-count'),
value: formatNumberWithComma(TableDetails?.profile?.rowCount ?? 0),
value: formatNumberWithComma(tableDetails?.profile?.rowCount ?? 0),
},
{
title: t('label.column-entity', {
entity: t('label.count'),
}),
value:
TableDetails?.profile?.columnCount ?? entityDetails.columns.length,
tableDetails?.profile?.columnCount ?? entityDetails.columns.length,
},
{
title: `${t('label.table-entity-text', {
entityText: t('label.sample'),
})} %`,
value: `${TableDetails?.profile?.profileSample ?? 100}%`,
value: `${tableDetails?.profile?.profileSample ?? 100}%`,
},
{
title: `${t('label.test-plural')} ${t('label.passed')}`,
@ -154,9 +154,9 @@ function TableSummary({ entityDetails }: TableSummaryProps) {
className: 'failed',
},
];
}, [TableDetails, tableTests]);
}, [tableDetails, tableTests]);
const { tableType, columns, tableQueries } = TableDetails;
const { tableType, columns, tableQueries } = tableDetails;
const basicTableInfo: BasicTableInfo = useMemo(
() => ({
@ -168,8 +168,13 @@ function TableSummary({ entityDetails }: TableSummaryProps) {
);
const formattedColumnsData: BasicEntityInfo[] = useMemo(
() => getFormattedEntityData(SummaryEntityType.COLUMN, columns),
[columns]
() =>
getFormattedEntityData(
SummaryEntityType.COLUMN,
columns,
tableDetails.tableConstraints
),
[columns, tableDetails]
);
useEffect(() => {
@ -187,7 +192,7 @@ function TableSummary({ entityDetails }: TableSummaryProps) {
<TableDataCardTitle
dataTestId="summary-panel-title"
searchIndex={SearchIndex.TABLE}
source={TableDetails}
source={tableDetails}
/>
</Col>
<Col span={24}>

View File

@ -227,6 +227,9 @@ const Explore: React.FC<ExploreProps> = ({
searchResults?.hits?.hits[0]._source as EntityDetailsType,
tab
);
} else {
setShowSummaryPanel(false);
setEntityDetails(undefined);
}
}, [tab, searchResults]);

View File

@ -20,7 +20,7 @@ import { SummaryEntityType } from '../enums/EntitySummary.enum';
import { Chart } from '../generated/entity/data/chart';
import { MlFeature } from '../generated/entity/data/mlmodel';
import { Task } from '../generated/entity/data/pipeline';
import { Column } from '../generated/entity/data/table';
import { Column, TableConstraint } from '../generated/entity/data/table';
import { Field } from '../generated/entity/data/topic';
import { getEntityName } from './CommonUtils';
import SVGIcons from './SvgUtils';
@ -29,7 +29,8 @@ const { Text } = Typography;
export const getFormattedEntityData = (
entityType: SummaryEntityType,
entityInfo?: Column[] | Field[] | Chart[] | Task[] | MlFeature[]
entityInfo?: Array<Column | Field | Chart | Task | MlFeature>,
tableConstraints?: TableConstraint[]
): BasicEntityInfo[] => {
if (isEmpty(entityInfo)) {
return [];
@ -42,7 +43,8 @@ export const getFormattedEntityData = (
type: column.dataType,
tags: column.tags,
description: column.description,
constraint: column.constraint,
columnConstraint: column.constraint,
tableConstraints: tableConstraints,
children: getFormattedEntityData(
SummaryEntityType.COLUMN,
column.children