improving chart & dashboard entity page rendering (#5864)

Co-authored-by: John Joyce <john@acryl.io>

datahub-web-react/src/app/entity/chart/ChartEntity.tsx

@@ -1,7 +1,7 @@
 import { LineChartOutlined } from '@ant-design/icons';
 import * as React from 'react';
 
-import { Chart, EntityType, SearchResult } from '../../../types.generated';
+import { Chart, EntityType, LineageDirection, SearchResult } from '../../../types.generated';
 import { Entity, EntityCapabilityType, IconStyleType, PreviewType } from '../Entity';
 import { ChartPreview } from './preview/ChartPreview';
 import { GetChartQuery, useGetChartQuery, useUpdateChartMutation } from '../../../graphql/chart.generated';
@@ -12,7 +12,6 @@ import { SidebarOwnerSection } from '../shared/containers/profile/sidebar/Owners
 import { GenericEntityProperties } from '../shared/types';
 import { EntityProfile } from '../shared/containers/profile/EntityProfile';
 import { PropertiesTab } from '../shared/tabs/Properties/PropertiesTab';
-import { ChartInputsTab } from '../shared/tabs/Entity/ChartInputsTab';
 import { ChartDashboardsTab } from '../shared/tabs/Entity/ChartDashboardsTab';
 import { getDataForEntityType } from '../shared/containers/profile/utils';
 import { SidebarDomainSection } from '../shared/containers/profile/sidebar/Domain/SidebarDomainSection';
@@ -98,6 +97,9 @@ export class ChartEntity implements Entity<Chart> {
                 {
                     name: 'Lineage',
                     component: LineageTab,
+                    properties: {
+                        defaultDirection: LineageDirection.Upstream,
+                    },
                     display: {
                         visible: (_, _1) => true,
                         enabled: (_, chart: GetChartQuery) => {
@@ -107,15 +109,6 @@ export class ChartEntity implements Entity<Chart> {
                         },
                     },
                 },
-
-                {
-                    name: 'Inputs',
-                    component: ChartInputsTab,
-                    display: {
-                        visible: (_, _1) => true,
-                        enabled: (_, chart: GetChartQuery) => (chart?.chart?.inputs?.total || 0) > 0,
-                    },
-                },
                 {
                     name: 'Dashboards',
                     component: ChartDashboardsTab,

datahub-web-react/src/app/entity/dashboard/DashboardEntity.tsx

@@ -6,7 +6,7 @@ import {
     useGetDashboardQuery,
     useUpdateDashboardMutation,
 } from '../../../graphql/dashboard.generated';
-import { Dashboard, EntityType, OwnershipType, SearchResult } from '../../../types.generated';
+import { Dashboard, EntityType, LineageDirection, OwnershipType, SearchResult } from '../../../types.generated';
 import { Entity, EntityCapabilityType, IconStyleType, PreviewType } from '../Entity';
 import { EntityProfile } from '../shared/containers/profile/EntityProfile';
 import { SidebarOwnerSection } from '../shared/containers/profile/sidebar/Ownership/SidebarOwnerSection';
@@ -82,6 +82,16 @@ export class DashboardEntity implements Entity<Dashboard> {
                 component: DashboardStatsSummarySubHeader,
             }}
             tabs={[
+                {
+                    name: 'Charts',
+                    component: DashboardChartsTab,
+                    display: {
+                        visible: (_, dashboard: GetDashboardQuery) =>
+                            (dashboard?.dashboard?.charts?.total || 0) > 0 ||
+                            (dashboard?.dashboard?.datasets?.total || 0) === 0,
+                        enabled: (_, dashboard: GetDashboardQuery) => (dashboard?.dashboard?.charts?.total || 0) > 0,
+                    },
+                },
                 {
                     name: 'Documentation',
                     component: DocumentationTab,
@@ -93,6 +103,9 @@ export class DashboardEntity implements Entity<Dashboard> {
                 {
                     name: 'Lineage',
                     component: LineageTab,
+                    properties: {
+                        defaultDirection: LineageDirection.Upstream,
+                    },
                     display: {
                         visible: (_, _1) => true,
                         enabled: (_, dashboard: GetDashboardQuery) => {
@@ -103,16 +116,6 @@ export class DashboardEntity implements Entity<Dashboard> {
                         },
                     },
                 },
-                {
-                    name: 'Charts',
-                    component: DashboardChartsTab,
-                    display: {
-                        visible: (_, dashboard: GetDashboardQuery) =>
-                            (dashboard?.dashboard?.charts?.total || 0) > 0 ||
-                            (dashboard?.dashboard?.datasets?.total || 0) === 0,
-                        enabled: (_, dashboard: GetDashboardQuery) => (dashboard?.dashboard?.charts?.total || 0) > 0,
-                    },
-                },
                 {
                     name: 'Datasets',
                     component: DashboardDatasetsTab,

datahub-web-react/src/app/entity/shared/tabs/Entity/ChartInputsTab.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import { useBaseEntity } from '../../EntityContext';
-import { EntityType } from '../../../../../types.generated';
-import { EntityList } from './components/EntityList';
-import { useEntityRegistry } from '../../../../useEntityRegistry';
-
-export const ChartInputsTab = () => {
-    const entity = useBaseEntity() as any;
-    const chart = entity && entity.chart;
-    const inputs = chart?.inputs?.relationships.map((relationship) => relationship.entity);
-    const entityRegistry = useEntityRegistry();
-    const totalInputs = chart?.inputs?.total || 0;
-    const title = `Found ${totalInputs} input ${
-        totalInputs === 1
-            ? entityRegistry.getEntityName(EntityType.Dataset)
-            : entityRegistry.getCollectionName(EntityType.Dataset)
-    }`;
-    return <EntityList title={title} type={EntityType.Dataset} entities={inputs || []} />;
-};

datahub-web-react/src/app/entity/shared/tabs/Lineage/LineageTab.tsx

@@ -26,11 +26,15 @@ const StyledButton = styled(Button)<{ isSelected: boolean }>`
     `}
 `;
 
-export const LineageTab = () => {
+export const LineageTab = ({
+    properties = { defaultDirection: LineageDirection.Downstream },
+}: {
+    properties?: { defaultDirection: LineageDirection };
+}) => {
     const { urn, entityType } = useEntityData();
     const history = useHistory();
     const entityRegistry = useEntityRegistry();
-    const [lineageDirection, setLineageDirection] = useState<string>(LineageDirection.Downstream);
+    const [lineageDirection, setLineageDirection] = useState<string>(properties.defaultDirection);
 
     const routeToLineage = useCallback(() => {
         history.push(getEntityPath(entityType, urn, entityRegistry, true, false));