From ee4ba436b20135b3b549044b7b8d12e7d7e80ef2 Mon Sep 17 00:00:00 2001 From: Shailesh Parmar Date: Thu, 9 Nov 2023 20:48:24 +0530 Subject: [PATCH 1/4] [UI] Data Insight Layout looks broken in case of large number of assets #13803 --- .../DataInsightDetail/DataInsightDetail.less | 4 + .../DataInsightDetail/DescriptionInsight.tsx | 255 ++++++++++-------- .../EntitySummaryProgressBar.component.tsx | 20 +- .../DataInsightDetail/OwnerInsight.tsx | 255 ++++++++++-------- .../PageViewsByEntitiesChart.tsx | 162 ++++++----- .../DataInsightDetail/TierInsight.tsx | 242 ++++++++++------- .../DataInsightDetail/TotalEntityInsight.tsx | 169 ++++++------ .../TotalEntityInsightSummary.component.tsx | 106 ++++++-- .../ui/src/constants/DataInsight.constants.ts | 2 +- .../pages/DataInsightPage/DataInsight.less | 18 ++ .../ui/src/utils/DataInsightUtils.tsx | 68 +++-- 11 files changed, 765 insertions(+), 536 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DataInsightDetail.less b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DataInsightDetail.less index cff15ee485c8..0b42acfdaea5 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DataInsightDetail.less +++ b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DataInsightDetail.less @@ -26,6 +26,10 @@ .ant-card-head { border-bottom: 1px solid @border-color; } + .custom-data-insight-tooltip-container { + max-height: 250px; + overflow-y: auto; + } } .ant-card-body { padding: 16px 16px; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DescriptionInsight.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DescriptionInsight.tsx index 5a519cea4af7..0f2d9e82ff0b 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DescriptionInsight.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DescriptionInsight.tsx @@ -11,15 +11,13 @@ * limitations under the License. */ -import { Card, Col, Row } from 'antd'; +import { Button, Card, Col, Row } from 'antd'; import { AxiosError } from 'axios'; -import { isEmpty, round, uniqueId } from 'lodash'; +import { includes, isEmpty, round, toLower } from 'lodash'; import React, { FC, useEffect, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { CartesianGrid, - Legend, - LegendProps, Line, LineChart, ResponsiveContainer, @@ -53,9 +51,11 @@ import { import { CustomTooltip, getGraphDataByEntityType, - renderLegend, + getRandomHexColor, + sortEntityByValue, } from '../../utils/DataInsightUtils'; import { showErrorToast } from '../../utils/ToastUtils'; +import Searchbar from '../common/searchbar/Searchbar'; import './DataInsightDetail.less'; import DataInsightProgressBar from './DataInsightProgressBar'; import { EmptyGraphPlaceholder } from './EmptyGraphPlaceholder'; @@ -79,9 +79,10 @@ const DescriptionInsight: FC = ({ const [totalEntitiesDescriptionByType, setTotalEntitiesDescriptionByType] = useState(); - const [isLoading, setIsLoading] = useState(false); + const [isLoading, setIsLoading] = useState(true); const [activeKeys, setActiveKeys] = useState([]); const [activeMouseHoverKey, setActiveMouseHoverKey] = useState(''); + const [searchEntityKeyWord, setSearchEntityKeyWord] = useState(''); const { data, @@ -97,6 +98,18 @@ const DescriptionInsight: FC = ({ ); }, [totalEntitiesDescriptionByType]); + const sortedEntitiesByValue = useMemo(() => { + return sortEntityByValue(entities, latestData); + }, [entities, latestData]); + + const rightSideEntityList = useMemo( + () => + sortedEntitiesByValue.filter((entity) => + includes(toLower(entity), toLower(searchEntityKeyWord)) + ), + [sortedEntitiesByValue, searchEntityKeyWord] + ); + const { t } = useTranslation(); const targetValue = useMemo(() => { @@ -125,16 +138,16 @@ const DescriptionInsight: FC = ({ } }; - const handleLegendClick: LegendProps['onClick'] = (event) => { + const handleLegendClick = (entity: string) => { setActiveKeys((prevActiveKeys) => - updateActiveChartFilter(event.dataKey, prevActiveKeys) + updateActiveChartFilter(entity, prevActiveKeys) ); }; - const handleLegendMouseEnter: LegendProps['onMouseEnter'] = (event) => { - setActiveMouseHoverKey(event.dataKey); + const handleLegendMouseEnter = (entity: string) => { + setActiveMouseHoverKey(entity); }; - const handleLegendMouseLeave: LegendProps['onMouseLeave'] = () => { + const handleLegendMouseLeave = () => { setActiveMouseHoverKey(''); }; @@ -142,111 +155,137 @@ const DescriptionInsight: FC = ({ fetchTotalEntitiesDescriptionByType(); }, [chartFilter]); + if (isLoading || data.length === 0) { + return ( + + }> + + + ); + } + return ( - }> - {data.length ? ( - - - - - - - - axisTickFormatter(value, '%') + id={dataInsightChartName}> + + + + + + + + axisTickFormatter(value, '%')} + /> + } + wrapperStyle={{ pointerEvents: 'auto' }} + /> + {entities.map((entity, i) => ( + - } /> - - renderLegend(props as LegendProps, activeKeys) + key={entity} + stroke={TOTAL_ENTITY_CHART_COLOR[i] ?? getRandomHexColor()} + strokeOpacity={ + isEmpty(activeMouseHoverKey) || + entity === activeMouseHoverKey + ? DEFAULT_CHART_OPACITY + : HOVER_CHART_OPACITY } - layout="horizontal" - verticalAlign="top" - wrapperStyle={{ left: '0px', top: '0px' }} - onClick={handleLegendClick} - onMouseEnter={handleLegendMouseEnter} - onMouseLeave={handleLegendMouseLeave} - /> - {entities.map((entity, i) => ( - - ))} - - - - - - - + ))} + + + + + + + + + + + + + + {rightSideEntityList.map((entity, i) => { + return ( + handleLegendClick(entity)} + onMouseEnter={() => handleLegendMouseEnter(entity)} + onMouseLeave={handleLegendMouseLeave}> + + + ); + })} + + + {activeKeys.length > 0 && ( + + - {entities.map((entity, i) => { - return ( - - - - ); - })} - - - - ) : ( - - )} + )} + + + ); }; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/EntitySummaryProgressBar.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/EntitySummaryProgressBar.component.tsx index 79fda36c5ebf..c74619330edc 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/EntitySummaryProgressBar.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/EntitySummaryProgressBar.component.tsx @@ -11,11 +11,14 @@ * limitations under the License. */ import { Col, Progress, Row, Typography } from 'antd'; +import classNames from 'classnames'; import { round } from 'lodash'; import React, { ReactNode } from 'react'; +import { GRAYED_OUT_COLOR } from '../../constants/constants'; type EntitySummaryProgressBarProps = { pluralize?: boolean; + isActive?: boolean; progress: number; entity: string; latestData: Record; @@ -24,6 +27,7 @@ type EntitySummaryProgressBarProps = { }; const EntitySummaryProgressBar = ({ + isActive = true, pluralize = true, entity, latestData, @@ -36,16 +40,24 @@ const EntitySummaryProgressBar = ({ }; return ( - + - + {pluralize ? pluralizeName(entity) : entity} - + {label ?? round(latestData[entity] || 0, 2)} @@ -56,7 +68,7 @@ const EntitySummaryProgressBar = ({ percent={progress} showInfo={false} size="small" - strokeColor={strokeColor} + strokeColor={isActive ? strokeColor : GRAYED_OUT_COLOR} /> diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/OwnerInsight.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/OwnerInsight.tsx index 01b7f041a269..ad8046d50021 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/OwnerInsight.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/OwnerInsight.tsx @@ -11,15 +11,13 @@ * limitations under the License. */ -import { Card, Col, Row } from 'antd'; +import { Button, Card, Col, Row } from 'antd'; import { AxiosError } from 'axios'; -import { isEmpty, round } from 'lodash'; +import { includes, isEmpty, round, toLower } from 'lodash'; import React, { FC, useEffect, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { CartesianGrid, - Legend, - LegendProps, Line, LineChart, ResponsiveContainer, @@ -53,9 +51,11 @@ import { import { CustomTooltip, getGraphDataByEntityType, - renderLegend, + getRandomHexColor, + sortEntityByValue, } from '../../utils/DataInsightUtils'; import { showErrorToast } from '../../utils/ToastUtils'; +import Searchbar from '../common/searchbar/Searchbar'; import './DataInsightDetail.less'; import DataInsightProgressBar from './DataInsightProgressBar'; import { EmptyGraphPlaceholder } from './EmptyGraphPlaceholder'; @@ -79,9 +79,10 @@ const OwnerInsight: FC = ({ const [totalEntitiesOwnerByType, setTotalEntitiesOwnerByType] = useState(); - const [isLoading, setIsLoading] = useState(false); + const [isLoading, setIsLoading] = useState(true); const [activeKeys, setActiveKeys] = useState([]); const [activeMouseHoverKey, setActiveMouseHoverKey] = useState(''); + const [searchEntityKeyWord, setSearchEntityKeyWord] = useState(''); const { data, @@ -105,6 +106,18 @@ const OwnerInsight: FC = ({ return undefined; }, [kpi]); + const sortedEntitiesByValue = useMemo(() => { + return sortEntityByValue(entities, latestData); + }, [entities, latestData]); + + const rightSideEntityList = useMemo( + () => + sortedEntitiesByValue.filter((entity) => + includes(toLower(entity), toLower(searchEntityKeyWord)) + ), + [sortedEntitiesByValue, searchEntityKeyWord] + ); + const { t } = useTranslation(); const fetchTotalEntitiesOwnerByType = async () => { @@ -125,15 +138,16 @@ const OwnerInsight: FC = ({ } }; - const handleLegendClick: LegendProps['onClick'] = (event) => { + const handleLegendClick = (entity: string) => { setActiveKeys((prevActiveKeys) => - updateActiveChartFilter(event.dataKey, prevActiveKeys) + updateActiveChartFilter(entity, prevActiveKeys) ); }; - const handleLegendMouseEnter: LegendProps['onMouseEnter'] = (event) => { - setActiveMouseHoverKey(event.dataKey); + + const handleLegendMouseEnter = (entity: string) => { + setActiveMouseHoverKey(entity); }; - const handleLegendMouseLeave: LegendProps['onMouseLeave'] = () => { + const handleLegendMouseLeave = () => { setActiveMouseHoverKey(''); }; @@ -141,112 +155,139 @@ const OwnerInsight: FC = ({ fetchTotalEntitiesOwnerByType(); }, [chartFilter]); + if (isLoading || data.length === 0) { + return ( + + }> + + + ); + } + return ( - }> - {data.length ? ( - - - - - - - - axisTickFormatter(value, '%') + loading={isLoading}> + + + + + + + + axisTickFormatter(value, '%')} + /> + } + wrapperStyle={{ pointerEvents: 'auto' }} + /> + {entities.map((entity, i) => ( + - } /> - - renderLegend(props as LegendProps, activeKeys) + key={entity} + stroke={TOTAL_ENTITY_CHART_COLOR[i] ?? getRandomHexColor()} + strokeOpacity={ + isEmpty(activeMouseHoverKey) || + entity === activeMouseHoverKey + ? DEFAULT_CHART_OPACITY + : HOVER_CHART_OPACITY } - layout="horizontal" - verticalAlign="top" - wrapperStyle={{ left: '0px', top: '0px' }} - onClick={handleLegendClick} - onMouseEnter={handleLegendMouseEnter} - onMouseLeave={handleLegendMouseLeave} + type="monotone" /> - {entities.map((entity, i) => ( - - ))} - - - - - - - + + + + + + + progress={Number(total)} + suffix={isPercentageGraph ? '%' : ''} + target={targetValue} + /> + + + + + + + {rightSideEntityList.map((entity, i) => { + return ( + handleLegendClick(entity)} + onMouseEnter={() => handleLegendMouseEnter(entity)} + onMouseLeave={handleLegendMouseLeave}> + + + ); + })} + + + {activeKeys.length > 0 && ( + + - {entities.map((entity, i) => { - return ( - - - - ); - })} - - - - ) : ( - - )} + )} + + + ); }; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/PageViewsByEntitiesChart.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/PageViewsByEntitiesChart.tsx index dc31f53174da..08c950a5b85a 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/PageViewsByEntitiesChart.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/PageViewsByEntitiesChart.tsx @@ -18,8 +18,6 @@ import React, { FC, useEffect, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { CartesianGrid, - Legend, - LegendProps, Line, LineChart, ResponsiveContainer, @@ -43,11 +41,10 @@ import { DataInsightChartType } from '../../generated/dataInsight/dataInsightCha import { PageViewsByEntities } from '../../generated/dataInsight/type/pageViewsByEntities'; import { ChartFilter } from '../../interface/data-insight.interface'; import { getAggregateChartData } from '../../rest/DataInsightAPI'; -import { updateActiveChartFilter } from '../../utils/ChartUtils'; import { CustomTooltip, getGraphDataByEntityType, - renderLegend, + sortEntityByValue, } from '../../utils/DataInsightUtils'; import { showErrorToast } from '../../utils/ToastUtils'; import './DataInsightDetail.less'; @@ -63,7 +60,7 @@ const PageViewsByEntitiesChart: FC = ({ chartFilter, selectedDays }) => { const [pageViewsByEntities, setPageViewsByEntities] = useState(); - const [isLoading, setIsLoading] = useState(false); + const [isLoading, setIsLoading] = useState(true); const [activeKeys, setActiveKeys] = useState([]); const [activeMouseHoverKey, setActiveMouseHoverKey] = useState(''); @@ -74,6 +71,9 @@ const PageViewsByEntitiesChart: FC = ({ chartFilter, selectedDays }) => { DataInsightChartType.PageViewsByEntities ); }, [pageViewsByEntities]); + const sortedEntitiesByValue = useMemo(() => { + return sortEntityByValue(entities, latestData); + }, [entities, latestData]); const { t } = useTranslation(); @@ -95,97 +95,89 @@ const PageViewsByEntitiesChart: FC = ({ chartFilter, selectedDays }) => { } }; - const handleLegendClick: LegendProps['onClick'] = (event) => { - setActiveKeys((prevActiveKeys) => - updateActiveChartFilter(event.dataKey, prevActiveKeys) - ); - }; - - const handleLegendMouseEnter: LegendProps['onMouseEnter'] = (event) => { - setActiveMouseHoverKey(event.dataKey); - }; - const handleLegendMouseLeave: LegendProps['onMouseLeave'] = () => { - setActiveMouseHoverKey(''); - }; - useEffect(() => { fetchPageViewsByEntities(); }, [chartFilter]); + if (isLoading || data.length === 0) { + return ( + + }> + + + ); + } + return ( - }> - {data.length ? ( - - - - - - - - } /> - - renderLegend(props as LegendProps, activeKeys) + loading={isLoading}> + + + + + + + + + } + wrapperStyle={{ pointerEvents: 'auto' }} + /> + + {entities.map((entity, i) => ( + - {entities.map((entity, i) => ( - - ))} - - - - - - - - ) : ( - - )} + ))} + + + + + setActiveMouseHoverKey(entity)} + onActiveKeysUpdate={(entities) => setActiveKeys(entities)} + /> + + ); }; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/TierInsight.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/TierInsight.tsx index f8c91f4ed3bf..3f0099fbb31d 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/TierInsight.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/TierInsight.tsx @@ -11,15 +11,13 @@ * limitations under the License. */ -import { Card, Col, Row } from 'antd'; +import { Button, Card, Col, Row } from 'antd'; import { AxiosError } from 'axios'; -import { isEmpty, round } from 'lodash'; +import { includes, isEmpty, round, toLower } from 'lodash'; import React, { FC, useEffect, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { CartesianGrid, - Legend, - LegendProps, Line, LineChart, ResponsiveContainer, @@ -53,10 +51,11 @@ import { import { CustomTooltip, getGraphDataByTierType, - renderLegend, + sortEntityByValue, } from '../../utils/DataInsightUtils'; import { getEntityName } from '../../utils/EntityUtils'; import { showErrorToast } from '../../utils/ToastUtils'; +import Searchbar from '../common/searchbar/Searchbar'; import './DataInsightDetail.less'; import DataInsightProgressBar from './DataInsightProgressBar'; import { EmptyGraphPlaceholder } from './EmptyGraphPlaceholder'; @@ -75,10 +74,21 @@ const TierInsight: FC = ({ chartFilter, selectedDays, tierTags }) => { const [isLoading, setIsLoading] = useState(true); const [activeKeys, setActiveKeys] = useState([]); const [activeMouseHoverKey, setActiveMouseHoverKey] = useState(''); + const [searchEntityKeyWord, setSearchEntityKeyWord] = useState(''); const { data, tiers, total, relativePercentage, latestData } = useMemo(() => { return getGraphDataByTierType(totalEntitiesByTier?.data ?? []); }, [totalEntitiesByTier]); + const sortedEntitiesByValue = useMemo(() => { + return sortEntityByValue(tiers, latestData); + }, [tiers, latestData]); + const rightSideEntityList = useMemo( + () => + sortedEntitiesByValue.filter((entity) => + includes(toLower(entity), toLower(searchEntityKeyWord)) + ), + [sortedEntitiesByValue, searchEntityKeyWord] + ); const { t } = useTranslation(); @@ -109,15 +119,16 @@ const TierInsight: FC = ({ chartFilter, selectedDays, tierTags }) => { } }; - const handleLegendClick: LegendProps['onClick'] = (event) => { + const handleLegendClick = (entity: string) => { setActiveKeys((prevActiveKeys) => - updateActiveChartFilter(event.dataKey, prevActiveKeys) + updateActiveChartFilter(entity, prevActiveKeys) ); }; - const handleLegendMouseEnter: LegendProps['onMouseEnter'] = (event) => { - setActiveMouseHoverKey(event.dataKey); + + const handleLegendMouseEnter = (entity: string) => { + setActiveMouseHoverKey(entity); }; - const handleLegendMouseLeave: LegendProps['onMouseLeave'] = () => { + const handleLegendMouseLeave = () => { setActiveMouseHoverKey(''); }; @@ -127,107 +138,132 @@ const TierInsight: FC = ({ chartFilter, selectedDays, tierTags }) => { } }, [chartFilter, tierTags]); + if (isLoading || data.length === 0) { + return ( + + }> + + + ); + } + return ( - }> - {data.length ? ( - - - - - - - axisTickFormatter(value, '%')} - /> - } /> - - renderLegend(props as LegendProps, activeKeys) + loading={isLoading}> + + + + + + + + axisTickFormatter(value, '%')} /> + } + wrapperStyle={{ pointerEvents: 'auto' }} + /> + {tiers.map((tier, i) => ( + - {tiers.map((tier, i) => ( - - ))} - - - - - - - + ))} + + + + + + + + + + + + + + {rightSideEntityList.map((tier, i) => { + return ( + handleLegendClick(tier)} + onMouseEnter={() => handleLegendMouseEnter(tier)} + onMouseLeave={handleLegendMouseLeave}> + + + ); + })} + + + {activeKeys.length > 0 && ( + + - {tiers.map((tiers, i) => { - return ( - - - - ); - })} - - - - ) : ( - - )} + )} + + + ); }; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/TotalEntityInsight.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/TotalEntityInsight.tsx index 6f93383bf0c9..ddad52bd5978 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/TotalEntityInsight.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/TotalEntityInsight.tsx @@ -18,8 +18,6 @@ import React, { FC, useEffect, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { CartesianGrid, - Legend, - LegendProps, Line, LineChart, ResponsiveContainer, @@ -45,14 +43,11 @@ import { } from '../../generated/dataInsight/dataInsightChartResult'; import { ChartFilter } from '../../interface/data-insight.interface'; import { getAggregateChartData } from '../../rest/DataInsightAPI'; -import { - axisTickFormatter, - updateActiveChartFilter, -} from '../../utils/ChartUtils'; +import { axisTickFormatter } from '../../utils/ChartUtils'; import { CustomTooltip, getGraphDataByEntityType, - renderLegend, + sortEntityByValue, } from '../../utils/DataInsightUtils'; import { showErrorToast } from '../../utils/ToastUtils'; import './DataInsightDetail.less'; @@ -81,6 +76,9 @@ const TotalEntityInsight: FC = ({ chartFilter, selectedDays }) => { }, [totalEntitiesByType]); const { t } = useTranslation(); + const sortedEntitiesByValue = useMemo(() => { + return sortEntityByValue(entities, latestData); + }, [entities, latestData]); const fetchTotalEntitiesByType = async () => { setIsLoading(true); @@ -100,99 +98,92 @@ const TotalEntityInsight: FC = ({ chartFilter, selectedDays }) => { } }; - const handleLegendClick: LegendProps['onClick'] = (event) => { - setActiveKeys((prevActiveKeys) => - updateActiveChartFilter(event.dataKey, prevActiveKeys) - ); - }; - const handleLegendMouseEnter: LegendProps['onMouseEnter'] = (event) => { - setActiveMouseHoverKey(event.dataKey); - }; - const handleLegendMouseLeave: LegendProps['onMouseLeave'] = () => { - setActiveMouseHoverKey(''); - }; - useEffect(() => { fetchTotalEntitiesByType(); }, [chartFilter]); + if (isLoading || data.length === 0) { + return ( + + }> + + + ); + } + return ( - }> - {data.length ? ( - - - - - - - axisTickFormatter(value)} /> - } /> - - renderLegend(props as LegendProps, activeKeys) + loading={isLoading}> + + + + + + + + axisTickFormatter(value)} /> + } + wrapperStyle={{ pointerEvents: 'auto' }} + /> + {entities.map((entity, i) => ( + - {entities.map((entity, i) => ( - - ))} - - - - - - - - ) : ( - - )} + ))} + + + + + setActiveMouseHoverKey(entity)} + onActiveKeysUpdate={(entities) => setActiveKeys(entities)} + /> + + ); }; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/TotalEntityInsightSummary.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/TotalEntityInsightSummary.component.tsx index 0ec375a02080..983dc242f5f5 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/TotalEntityInsightSummary.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/TotalEntityInsightSummary.component.tsx @@ -10,11 +10,16 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { Col, Row } from 'antd'; +import { Button, Col, Row } from 'antd'; import { Gutter } from 'antd/lib/grid/row'; -import React from 'react'; +import classNames from 'classnames'; +import { includes, toLower } from 'lodash'; +import React, { useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { TOTAL_ENTITY_CHART_COLOR } from '../../constants/DataInsight.constants'; +import { updateActiveChartFilter } from '../../utils/ChartUtils'; +import { sortEntityByValue } from '../../utils/DataInsightUtils'; +import Searchbar from '../common/searchbar/Searchbar'; import CustomStatistic from './CustomStatistic'; import EntitySummaryProgressBar from './EntitySummaryProgressBar.component'; @@ -25,20 +30,51 @@ type TotalEntityInsightSummaryProps = { entities: string[]; latestData: Record; gutter?: Gutter | [Gutter, Gutter]; + onActiveKeysUpdate?: (entity: string[]) => void; + onActiveKeyMouseHover?: (entity: string) => void; + activeKeys?: string[]; + allowFilter?: boolean; }; const TotalEntityInsightSummary = ({ total, + allowFilter = false, relativePercentage, selectedDays, entities, latestData, - gutter, + activeKeys, + onActiveKeysUpdate, + onActiveKeyMouseHover, }: TotalEntityInsightSummaryProps) => { const { t } = useTranslation(); + const [searchEntityKeyWord, setSearchEntityKeyWord] = useState(''); + + const sortedEntitiesByValue = useMemo(() => { + return sortEntityByValue(entities, latestData); + }, [entities, latestData]); + + const rightSideEntityList = useMemo( + () => + sortedEntitiesByValue.filter((entity) => + includes(toLower(entity), toLower(searchEntityKeyWord)) + ), + [sortedEntitiesByValue, searchEntityKeyWord] + ); + + const handleLegendClick = (entity: string) => { + onActiveKeysUpdate?.(updateActiveChartFilter(entity, activeKeys ?? [])); + }; + + const handleLegendMouseEnter = (entity: string) => { + onActiveKeyMouseHover?.(entity); + }; + const handleLegendMouseLeave = () => { + onActiveKeyMouseHover?.(''); + }; return ( - + - {entities.map((entity, i) => { - const progress = (latestData[entity] / Number(total)) * 100; + {allowFilter && ( + + + + )} + + + {rightSideEntityList.map((entity, i) => { + const progress = (latestData[entity] / Number(total)) * 100; + + return ( + handleLegendClick(entity)} + onMouseEnter={() => handleLegendMouseEnter(entity)} + onMouseLeave={handleLegendMouseLeave}> + + + ); + })} + + - return ( - - - - ); - })} + {activeKeys && activeKeys.length > 0 && allowFilter && ( + + + + )} ); }; diff --git a/openmetadata-ui/src/main/resources/ui/src/constants/DataInsight.constants.ts b/openmetadata-ui/src/main/resources/ui/src/constants/DataInsight.constants.ts index 4a8d1b5035a4..e919aaeb1ca0 100644 --- a/openmetadata-ui/src/main/resources/ui/src/constants/DataInsight.constants.ts +++ b/openmetadata-ui/src/main/resources/ui/src/constants/DataInsight.constants.ts @@ -34,7 +34,7 @@ export const DI_STRUCTURE = { rowContainerGutter: 32 as RowProps['gutter'], leftContainerSpan: 16, rightContainerSpan: 8, - rightRowGutter: [8, 16] as RowProps['gutter'], + rightRowGutter: [8, 0] as RowProps['gutter'], }; export const DATA_INSIGHT_GRAPH_COLORS = [ diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsight.less b/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsight.less index b984d13d441d..6432b33e756c 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsight.less +++ b/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsight.less @@ -156,3 +156,21 @@ } } } + +.entity-summary-container { + cursor: pointer; + &:hover { + background: @grey-1; + } + .non-active-details { + .entity-summary-name, + .entity-summary-value { + color: @grey-3; + } + } +} + +.chart-card-right-panel-container { + max-height: 375px; + overflow-y: auto; +} diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/DataInsightUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/DataInsightUtils.tsx index d5d2ff9c4468..06f3a0ec344a 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/DataInsightUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/DataInsightUtils.tsx @@ -164,28 +164,30 @@ export const CustomTooltip = (props: DataInsightChartTooltipProps) => { {timestamp}}> - {payload.map((entry, index) => ( -
  • - - - - - {startCase(entry.dataKey as string)} - - - {valueFormatter - ? valueFormatter(entry.value) - : getEntryFormattedValue( - entry.value, - entry.dataKey, - kpiTooltipRecord, - isPercentage - )} - -
    • - ))} +
      + {payload.map((entry, index) => ( +
    • + + + + + {startCase(entry.dataKey as string)} + + + {valueFormatter + ? valueFormatter(entry.value) + : getEntryFormattedValue( + entry.value, + entry.dataKey, + kpiTooltipRecord, + isPercentage + )} + +
      • + ))} +
    ); } @@ -679,3 +681,25 @@ export const getOptionalDataInsightTabFlag = (tab: DataInsightTabs) => { tab === DataInsightTabs.KPIS || tab === DataInsightTabs.DATA_ASSETS, }; }; + +export const sortEntityByValue = ( + entities: string[], + latestData: Record +) => { + const entityValues = entities.map((entity) => ({ + entity, + value: latestData[entity] ?? 0, + })); + + // Sort the entities based on their values in descending order + entityValues.sort((a, b) => b.value - a.value); + + // Extract the sorted entities without their values + return entityValues.map((entity) => entity.entity); +}; + +export const getRandomHexColor = () => { + const randomColor = Math.floor(Math.random() * 16777215).toString(16); + + return `#${randomColor}`; +}; From 84e4bb33ed77142d1c92f3d57adf672a5234e087 Mon Sep 17 00:00:00 2001 From: Shailesh Parmar Date: Thu, 9 Nov 2023 21:09:53 +0530 Subject: [PATCH 2/4] move height to constant variable in cost file --- .../components/DataInsightDetail/DailyActiveUsersChart.tsx | 3 ++- .../src/components/DataInsightDetail/DescriptionInsight.tsx | 3 ++- .../ui/src/components/DataInsightDetail/KPIChart.tsx | 5 +++-- .../ui/src/components/DataInsightDetail/OwnerInsight.tsx | 3 ++- .../DataInsightDetail/PageViewsByEntitiesChart.tsx | 3 ++- .../ui/src/components/DataInsightDetail/TierInsight.tsx | 3 ++- .../src/components/DataInsightDetail/TotalEntityInsight.tsx | 3 ++- .../main/resources/ui/src/constants/DataInsight.constants.ts | 2 ++ .../src/main/resources/ui/src/constants/constants.ts | 2 +- 9 files changed, 18 insertions(+), 9 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DailyActiveUsersChart.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DailyActiveUsersChart.tsx index dac6220f5d0c..c18cc08023c0 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DailyActiveUsersChart.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DailyActiveUsersChart.tsx @@ -32,6 +32,7 @@ import { BAR_CHART_MARGIN, DATA_INSIGHT_GRAPH_COLORS, DI_STRUCTURE, + GRAPH_HEIGHT, } from '../../constants/DataInsight.constants'; import { DataReportIndex } from '../../generated/dataInsight/dataInsightChart'; import { DataInsightChartType } from '../../generated/dataInsight/dataInsightChartResult'; @@ -106,7 +107,7 @@ const DailyActiveUsersChart: FC = ({ chartFilter, selectedDays }) => { {dailyActiveUsers.length ? ( - + = ({ diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/KPIChart.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/KPIChart.tsx index e317c43b9568..cfcc166909e2 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/KPIChart.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/KPIChart.tsx @@ -41,6 +41,7 @@ import { BAR_CHART_MARGIN, DATA_INSIGHT_GRAPH_COLORS, DI_STRUCTURE, + GRAPH_HEIGHT, } from '../../constants/DataInsight.constants'; import { ERROR_PLACEHOLDER_TYPE, SIZE } from '../../enums/common.enum'; import { @@ -214,8 +215,8 @@ const KPIChart: FC = ({ + height={GRAPH_HEIGHT} + id="kpi-chart"> = ({ diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/PageViewsByEntitiesChart.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/PageViewsByEntitiesChart.tsx index 08c950a5b85a..2f408b9fa7cd 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/PageViewsByEntitiesChart.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/PageViewsByEntitiesChart.tsx @@ -34,6 +34,7 @@ import { import { BAR_CHART_MARGIN, DI_STRUCTURE, + GRAPH_HEIGHT, TOTAL_ENTITY_CHART_COLOR, } from '../../constants/DataInsight.constants'; import { DataReportIndex } from '../../generated/dataInsight/dataInsightChart'; @@ -131,7 +132,7 @@ const PageViewsByEntitiesChart: FC = ({ chartFilter, selectedDays }) => { subHeader: t('message.data-insight-page-views'), }} /> - + diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/TierInsight.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/TierInsight.tsx index 3f0099fbb31d..716a69bb65a9 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/TierInsight.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/TierInsight.tsx @@ -34,6 +34,7 @@ import { import { BAR_CHART_MARGIN, DI_STRUCTURE, + GRAPH_HEIGHT, TOTAL_ENTITY_CHART_COLOR, } from '../../constants/DataInsight.constants'; import { DataReportIndex } from '../../generated/dataInsight/dataInsightChart'; @@ -176,7 +177,7 @@ const TierInsight: FC = ({ chartFilter, selectedDays, tierTags }) => { /> diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/TotalEntityInsight.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/TotalEntityInsight.tsx index ddad52bd5978..0fddb702c884 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/TotalEntityInsight.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/TotalEntityInsight.tsx @@ -34,6 +34,7 @@ import { import { BAR_CHART_MARGIN, DI_STRUCTURE, + GRAPH_HEIGHT, TOTAL_ENTITY_CHART_COLOR, } from '../../constants/DataInsight.constants'; import { DataReportIndex } from '../../generated/dataInsight/dataInsightChart'; @@ -137,7 +138,7 @@ const TotalEntityInsight: FC = ({ chartFilter, selectedDays }) => { diff --git a/openmetadata-ui/src/main/resources/ui/src/constants/DataInsight.constants.ts b/openmetadata-ui/src/main/resources/ui/src/constants/DataInsight.constants.ts index e919aaeb1ca0..8e40c4cd26e4 100644 --- a/openmetadata-ui/src/main/resources/ui/src/constants/DataInsight.constants.ts +++ b/openmetadata-ui/src/main/resources/ui/src/constants/DataInsight.constants.ts @@ -37,6 +37,8 @@ export const DI_STRUCTURE = { rightRowGutter: [8, 0] as RowProps['gutter'], }; +export const GRAPH_HEIGHT = 500; + export const DATA_INSIGHT_GRAPH_COLORS = [ '#E7B85D', '#416BB3', diff --git a/openmetadata-ui/src/main/resources/ui/src/constants/constants.ts b/openmetadata-ui/src/main/resources/ui/src/constants/constants.ts index 55e27bcd8da1..03c8d4ee94bd 100644 --- a/openmetadata-ui/src/main/resources/ui/src/constants/constants.ts +++ b/openmetadata-ui/src/main/resources/ui/src/constants/constants.ts @@ -36,7 +36,7 @@ export const TEXT_GREY_MUTED = '#757575'; export const SUCCESS_COLOR = '#008376'; export const DE_ACTIVE_COLOR = '#6B7280'; export const GRAPH_BACKGROUND_COLOR = '#f5f5f5'; -export const GRAYED_OUT_COLOR = '#CCCCCC'; +export const GRAYED_OUT_COLOR = '#959595'; export const GREEN_COLOR = '#28A745'; export const GREEN_COLOR_OPACITY_30 = '#28A74530'; export const BORDER_COLOR = '#0000001a'; From 19f2268b2fd0b4da1c72ac4ad9758d987b6c13ef Mon Sep 17 00:00:00 2001 From: Shailesh Parmar Date: Thu, 9 Nov 2023 22:07:06 +0530 Subject: [PATCH 3/4] fixed DI cypress --- .../ui/cypress/e2e/Pages/DataInsight.spec.js | 4 ++-- .../e2e/Pages/DataInsightSettings.spec.js | 18 +++++++++++------- .../ApplicationCard.component.tsx | 2 +- 3 files changed, 14 insertions(+), 10 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/cypress/e2e/Pages/DataInsight.spec.js b/openmetadata-ui/src/main/resources/ui/cypress/e2e/Pages/DataInsight.spec.js index 335541074b52..7ae3318ab563 100644 --- a/openmetadata-ui/src/main/resources/ui/cypress/e2e/Pages/DataInsight.spec.js +++ b/openmetadata-ui/src/main/resources/ui/cypress/e2e/Pages/DataInsight.spec.js @@ -111,7 +111,7 @@ describe('Data Insight feature', () => { interceptURL('GET', '/api/v1/apps?limit=*', 'apps'); interceptURL( 'GET', - '/api/v1/apps/name/DataInsightsApplication?fields=owner,pipelines', + '/api/v1/apps/name/DataInsightsApplication?*', 'dataInsightsApplication' ); interceptURL( @@ -128,7 +128,7 @@ describe('Data Insight feature', () => { cy.get('[data-menu-id*="integrations.apps"]').scrollIntoView().click(); verifyResponseStatusCode('@apps', 200); cy.get( - '[data-testid="data-insights-card"] [data-testid="config-btn"]' + '[data-testid="data-insights-application-card"] [data-testid="config-btn"]' ).click(); verifyResponseStatusCode('@dataInsightsApplication', 200); cy.get('[data-testid="deploy-button"]').click(); diff --git a/openmetadata-ui/src/main/resources/ui/cypress/e2e/Pages/DataInsightSettings.spec.js b/openmetadata-ui/src/main/resources/ui/cypress/e2e/Pages/DataInsightSettings.spec.js index d547d1eece7b..77cc15de743f 100644 --- a/openmetadata-ui/src/main/resources/ui/cypress/e2e/Pages/DataInsightSettings.spec.js +++ b/openmetadata-ui/src/main/resources/ui/cypress/e2e/Pages/DataInsightSettings.spec.js @@ -46,7 +46,7 @@ describe('Data Insight settings page should work properly', () => { 'triggerPipeline' ); cy.get( - '[data-testid="data-insights-card"] [data-testid="config-btn"]' + '[data-testid="data-insights-application-card"] [data-testid="config-btn"]' ).click(); verifyResponseStatusCode('@getDataInsightDetails', 200); cy.get('[data-testid="deploy-button"]').click(); @@ -67,7 +67,7 @@ describe('Data Insight settings page should work properly', () => { ); interceptURL('PATCH', '/api/v1/apps/*', 'updateApplication'); cy.get( - '[data-testid="data-insights-card"] [data-testid="config-btn"]' + '[data-testid="data-insights-application-card"] [data-testid="config-btn"]' ).click(); verifyResponseStatusCode('@getDataInsightDetails', 200); cy.get('[data-testid="edit-button"]').click(); @@ -93,7 +93,7 @@ describe('Data Insight settings page should work properly', () => { 'deleteApplication' ); cy.get( - '[data-testid="data-insights-card"] [data-testid="config-btn"]' + '[data-testid="data-insights-application-card"] [data-testid="config-btn"]' ).click(); verifyResponseStatusCode('@getDataInsightDetails', 200); cy.get('[data-testid="manage-button"]').click(); @@ -101,16 +101,18 @@ describe('Data Insight settings page should work properly', () => { cy.get('[data-testid="save-button"]').click(); verifyResponseStatusCode('@deleteApplication', 200); verifyResponseStatusCode('@getApplications', 200); - cy.get('[data-testid="data-insights-card"]').should('not.exist'); + cy.get('[data-testid="data-insights-application-card"]').should( + 'not.exist' + ); }); it('Install application', () => { interceptURL('GET', '/api/v1/apps/marketplace?limit=*', 'getMarketPlace'); - interceptURL('POST', '/api/v1/apps/install', 'installApplication'); + interceptURL('POST', '/api/v1/apps', 'installApplication'); cy.get('[data-testid="add-application"]').click(); verifyResponseStatusCode('@getMarketPlace', 200); cy.get( - '[data-testid="data-insights-card"] [data-testid="config-btn"]' + '[data-testid="data-insights-application-card"] [data-testid="config-btn"]' ).click(); cy.get('[data-testid="install-application"]').click(); cy.get('[data-testid="save-button"]').click(); @@ -119,6 +121,8 @@ describe('Data Insight settings page should work properly', () => { cy.get('[data-testid="deploy-button"]').click(); verifyResponseStatusCode('@installApplication', 201); verifyResponseStatusCode('@getApplications', 200); - cy.get('[data-testid="data-insights-card"]').should('be.visible'); + cy.get('[data-testid="data-insights-application-card"]').should( + 'be.visible' + ); }); }); diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Applications/ApplicationCard/ApplicationCard.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Applications/ApplicationCard/ApplicationCard.component.tsx index 2020d7d9c3df..366badc1542c 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Applications/ApplicationCard/ApplicationCard.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Applications/ApplicationCard/ApplicationCard.component.tsx @@ -39,7 +39,7 @@ const ApplicationCard = ({ className, 'application-card card-body-border-none' )} - data-testid={`${kebabCase(title)}-card`}> + data-testid={`${kebabCase(appName)}-card`}>
    From 7426eafe00656852916ebe839858a6a9c7466d80 Mon Sep 17 00:00:00 2001 From: Shailesh Parmar Date: Fri, 10 Nov 2023 11:49:03 +0530 Subject: [PATCH 4/4] fixed failing unit test --- .../DescriptionInsight.test.tsx | 51 ++++++++++--------- .../DataInsightDetail/OwnerInsight.test.tsx | 47 ++++++++--------- 2 files changed, 52 insertions(+), 46 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DescriptionInsight.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DescriptionInsight.test.tsx index da43d0958c6b..8fff542e6c30 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DescriptionInsight.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DescriptionInsight.test.tsx @@ -39,6 +39,7 @@ jest.mock('../../utils/DataInsightUtils', () => ({ getGraphDataByEntityType: jest .fn() .mockImplementation(() => DUMMY_GRAPH_DATA), + sortEntityByValue: jest.fn().mockImplementation((entities) => entities), })); jest.mock('./EntitySummaryProgressBar.component', () => { return jest.fn().mockImplementation(({ label, entity }) => ( @@ -58,18 +59,20 @@ jest.mock('react-i18next', () => ({ describe('Test DescriptionInsight Component', () => { it('Should render the graph', async () => { await act(async () => { - const { container } = render(); - const card = screen.getByTestId('entity-description-percentage-card'); + render(); + }); + const card = await screen.findByTestId( + 'entity-description-percentage-card' + ); - const graph = queryByAttribute( - 'id', - container, - `${mockProps.dataInsightChartName}-graph` - ); + const graph = queryByAttribute( + 'id', + card, + `${mockProps.dataInsightChartName}-graph` + ); - expect(card).toBeInTheDocument(); - expect(graph).toBeInTheDocument(); - }); + expect(card).toBeInTheDocument(); + expect(graph).toBeInTheDocument(); }); it('Should render the graph and progress bar even if one entity dont have values', async () => { @@ -77,21 +80,23 @@ describe('Test DescriptionInsight Component', () => { () => DUMMY_GRAPH_DATA_WITH_MISSING_ENTITY ); await act(async () => { - const { container } = render(); - const card = screen.getByTestId('entity-description-percentage-card'); + render(); + }); + const card = await screen.findByTestId( + 'entity-description-percentage-card' + ); - const graph = queryByAttribute( - 'id', - container, - `${mockProps.dataInsightChartName}-graph` - ); - const missingEntityValue = await screen.findByTestId('Table'); + const graph = queryByAttribute( + 'id', + card, + `${mockProps.dataInsightChartName}-graph` + ); + const missingEntityValue = await screen.findByTestId('Table'); - expect(card).toBeInTheDocument(); - expect(graph).toBeInTheDocument(); - expect(missingEntityValue).toBeInTheDocument(); - expect(missingEntityValue.textContent).toBe('0'); - }); + expect(card).toBeInTheDocument(); + expect(graph).toBeInTheDocument(); + expect(missingEntityValue).toBeInTheDocument(); + expect(missingEntityValue.textContent).toBe('0'); }); it('Should fetch data based on dataInsightChartName props', async () => { diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/OwnerInsight.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/OwnerInsight.test.tsx index bc91ca975297..5bb05fc2214b 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/OwnerInsight.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/OwnerInsight.test.tsx @@ -37,6 +37,7 @@ jest.mock('../../utils/DataInsightUtils', () => ({ getGraphDataByEntityType: jest .fn() .mockImplementation(() => DUMMY_GRAPH_DATA), + sortEntityByValue: jest.fn().mockImplementation((entities) => entities), })); jest.mock('./EntitySummaryProgressBar.component', () => { return jest.fn().mockImplementation(({ label, entity }) => ( @@ -59,18 +60,18 @@ jest.mock('react-i18next', () => ({ describe('Test DescriptionInsight Component', () => { it('Should render the graph', async () => { await act(async () => { - const { container } = render(); - const card = screen.getByTestId('entity-summary-card-percentage'); + render(); + }); + const card = await screen.findByTestId('entity-summary-card-percentage'); - const graph = queryByAttribute( - 'id', - container, - `${mockProps.dataInsightChartName}-graph` - ); + const graph = queryByAttribute( + 'id', + card, + `${mockProps.dataInsightChartName}-graph` + ); - expect(card).toBeInTheDocument(); - expect(graph).toBeInTheDocument(); - }); + expect(card).toBeInTheDocument(); + expect(graph).toBeInTheDocument(); }); it('Should render the graph and progress bar even if one entity dont have values', async () => { @@ -78,21 +79,21 @@ describe('Test DescriptionInsight Component', () => { () => DUMMY_GRAPH_DATA_WITH_MISSING_ENTITY ); await act(async () => { - const { container } = render(); - const card = screen.getByTestId('entity-summary-card-percentage'); + render(); + }); + const card = await screen.findByTestId('entity-summary-card-percentage'); - const graph = queryByAttribute( - 'id', - container, - `${mockProps.dataInsightChartName}-graph` - ); - const missingEntityValue = await screen.findByTestId('Table'); + const graph = queryByAttribute( + 'id', + card, + `${mockProps.dataInsightChartName}-graph` + ); + const missingEntityValue = await screen.findByTestId('Table'); - expect(card).toBeInTheDocument(); - expect(graph).toBeInTheDocument(); - expect(missingEntityValue).toBeInTheDocument(); - expect(missingEntityValue.textContent).toBe('0'); - }); + expect(card).toBeInTheDocument(); + expect(graph).toBeInTheDocument(); + expect(missingEntityValue).toBeInTheDocument(); + expect(missingEntityValue.textContent).toBe('0'); }); it('Should fetch data based on dataInsightChartName props', async () => {