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

View File

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

View File

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

View File

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

View File

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