1640 Relationships details overview

odd-platform-ui/src/components/DataEntityDetails/Overview/OverviewStats/OverviewRelationshipStats/OverviewRelationshipStats.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { type DataEntityDetails } from 'generated-sources';
+import { DataEntityTypeNameEnum } from 'generated-sources';
+import OverviewEntityRelationship from './OverviewRelationshipType/OverviewEntityRelationship';
+import OverviewGraphRelationship from './OverviewRelationshipType/OverviewGraphRelationship';
+
+interface OverviewRelationshipStatsProps {
+  dataEntityDetails: DataEntityDetails;
+}
+
+const OverviewRelationshipStats: React.FC<OverviewRelationshipStatsProps> = ({
+  dataEntityDetails,
+}) => {
+  switch (dataEntityDetails.type.name) {
+    case DataEntityTypeNameEnum.ENTITY_RELATIONSHIP:
+      return <OverviewEntityRelationship dataEntityDetails={dataEntityDetails} />;
+    case DataEntityTypeNameEnum.GRAPH_RELATIONSHIP:
+      return <OverviewGraphRelationship dataEntityDetails={dataEntityDetails} />;
+    default:
+      return null;
+  }
+};
+
+export default OverviewRelationshipStats;

odd-platform-ui/src/components/DataEntityDetails/Overview/OverviewStats/OverviewRelationshipStats/OverviewRelationshipStatsStyles.ts

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+import { Box } from '@mui/material';
+
+export const StatIconContainer = styled(Box)(({ theme }) => ({
+  fontSize: theme.typography.h5.fontSize,
+  color: theme.palette.texts.action,
+}));
+
+export const Tooltip = styled('div')(({ theme }) => ({
+  fontSize: '14px',
+  padding: theme.spacing(1),
+  maxWidth: '430px',
+  border: '1px solid',
+  borderRadius: '8px',
+  borderColor: theme.palette.border.primary,
+  boxShadow: theme.shadows[9],
+}));

odd-platform-ui/src/components/DataEntityDetails/Overview/OverviewStats/OverviewRelationshipStats/OverviewRelationshipType/OverviewEntityRelationship.tsx

@@ -0,0 +1,185 @@
+import React from 'react';
+import { Grid, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { DataEntityClassNameEnum, type DataEntityDetails } from 'generated-sources';
+import {
+  UpstreamIcon,
+  DownstreamIcon,
+  ActivityCreatedIcon,
+  ActivityDeletedIcon,
+} from 'components/shared/icons';
+import { EntityClassItem, AppTooltip } from 'components/shared/elements';
+import { useGetEDRRelationshipById } from 'lib/hooks/api/dataModelling/relatioships';
+import { RelationshipDatasetInfo } from 'components/shared/elements/Relationships/RelationshipDatasetInfo';
+import { StatIconContainer } from '../OverviewRelationshipStatsStyles';
+import { RelationshipIcon } from '../RelationshipIcon';
+import * as S from '../OverviewRelationshipStatsStyles';
+
+interface OverviewEntityRelationshipProps {
+  dataEntityDetails: DataEntityDetails;
+}
+
+const OverviewEntityRelationship: React.FC<OverviewEntityRelationshipProps> = ({
+  dataEntityDetails,
+}) => {
+  const { t } = useTranslation();
+  const displayedEntitiesNumber = 10;
+  const { data: relationshipDetails } = useGetEDRRelationshipById(dataEntityDetails.id);
+
+  const sources = relationshipDetails?.erdRelationship.fieldsPairs?.map(
+    ({ sourceDatasetFieldOddrn }) => ({
+      name: sourceDatasetFieldOddrn.split('/').pop(),
+      oddrn: sourceDatasetFieldOddrn,
+    })
+  );
+
+  const targets = relationshipDetails?.erdRelationship.fieldsPairs?.map(
+    ({ targetDatasetFieldOddrn }) => ({
+      name: targetDatasetFieldOddrn.split('/').pop(),
+      oddrn: targetDatasetFieldOddrn,
+    })
+  );
+
+  return (
+    <Grid container>
+      <Grid item xs={12} sx={{ mb: 1.25 }}>
+        <EntityClassItem
+          entityClassName={DataEntityClassNameEnum.RELATIONSHIP}
+          fullName
+        />
+      </Grid>
+      {relationshipDetails && (
+        <Grid item container flexWrap='nowrap' columnGap={1} sx={{ mb: 1.25 }}>
+          <Grid
+            item
+            container
+            xs={2}
+            direction='column'
+            alignItems='flex-start'
+            alignContent='flex-start'
+          >
+            <Typography variant='h4' sx={{ mb: 2 }}>
+              Parent:
+            </Typography>
+            <RelationshipDatasetInfo
+              dataEntityId={relationshipDetails.targetDataEntityId}
+              oddrn={relationshipDetails.targetDatasetOddrn}
+            />
+          </Grid>
+          <Grid item container xs={4} alignItems='center' justifyContent='center'>
+            <RelationshipIcon type={relationshipDetails.erdRelationship.cardinality} />
+          </Grid>
+          <Grid
+            item
+            container
+            xs={2}
+            direction='column'
+            alignItems='flex-start'
+            alignContent='flex-start'
+          >
+            <Typography variant='h4' sx={{ mb: 2 }}>
+              Child:
+            </Typography>
+            <RelationshipDatasetInfo
+              dataEntityId={relationshipDetails.sourceDataEntityId}
+              oddrn={relationshipDetails.sourceDatasetOddrn}
+            />
+          </Grid>
+          <Grid item container xs={2} alignItems='flex-start' alignContent='flex-start'>
+            <Typography variant='h4' sx={{ mb: 2 }}>
+              Cardinality:
+            </Typography>
+            {(relationshipDetails.erdRelationship.cardinality ?? '').replaceAll('_', ' ')}
+          </Grid>
+          <Grid
+            item
+            container
+            xs={2}
+            direction='column'
+            alignItems='flex-start'
+            alignContent='flex-start'
+          >
+            <Typography variant='h4' sx={{ mb: 2 }}>
+              Is Identifying:
+            </Typography>
+
+            {relationshipDetails.erdRelationship.isIdentifying ? (
+              <Grid container alignItems='center'>
+                <ActivityCreatedIcon sx={{ mr: 1 }} />
+                True
+              </Grid>
+            ) : (
+              <Grid container alignItems='center'>
+                <ActivityDeletedIcon sx={{ mr: 1 }} />
+                False
+              </Grid>
+            )}
+          </Grid>
+        </Grid>
+      )}
+
+      <Grid container flexWrap='nowrap' columnGap={1}>
+        <Grid item container xs={6} alignItems='flex-start' alignContent='flex-start'>
+          <Grid item container xs={12} alignItems='baseline'>
+            <StatIconContainer sx={{ mr: 1 }}>
+              <UpstreamIcon />
+            </StatIconContainer>
+            <Typography variant='h2' sx={{ mr: 0.5 }}>
+              {sources?.length || 0}
+            </Typography>
+            <Typography variant='h4'>Referenced Key</Typography>
+          </Grid>
+          <Grid
+            item
+            container
+            xs={12}
+            direction='column'
+            alignItems='flex-start'
+            sx={{ mt: 1 }}
+          >
+            {targets?.slice(0, displayedEntitiesNumber).map(target => (
+              <AppTooltip
+                key={target.oddrn}
+                title={<S.Tooltip>{target.oddrn}</S.Tooltip>}
+                checkForOverflow={false}
+              >
+                <Typography variant='h4'>{target.name}</Typography>
+              </AppTooltip>
+            ))}
+          </Grid>
+        </Grid>
+        <Grid item container xs={6} alignItems='flex-start' alignContent='flex-start'>
+          <Grid item container xs={12} alignItems='baseline'>
+            <StatIconContainer sx={{ mr: 1 }}>
+              <DownstreamIcon />
+            </StatIconContainer>
+            <Typography variant='h2' sx={{ mr: 0.5 }}>
+              {targets?.length || 0}
+            </Typography>
+            <Typography variant='h4'>Foreign Key</Typography>
+          </Grid>
+          <Grid
+            item
+            container
+            xs={12}
+            direction='column'
+            alignItems='flex-start'
+            sx={{ mt: 1 }}
+          >
+            {sources?.slice(0, displayedEntitiesNumber).map(target => (
+              <AppTooltip
+                key={target.oddrn}
+                title={<S.Tooltip>{target.oddrn}</S.Tooltip>}
+                checkForOverflow={false}
+              >
+                <Typography variant='h4'>{target.name}</Typography>
+              </AppTooltip>
+            ))}
+          </Grid>
+        </Grid>
+      </Grid>
+    </Grid>
+  );
+};
+
+export default OverviewEntityRelationship;

odd-platform-ui/src/components/DataEntityDetails/Overview/OverviewStats/OverviewRelationshipStats/OverviewRelationshipType/OverviewGraphRelationship.tsx

@@ -0,0 +1,112 @@
+import React from 'react';
+import { Grid, Typography } from '@mui/material';
+import { DataEntityClassNameEnum, type DataEntityDetails } from 'generated-sources';
+import { ActivityCreatedIcon, ActivityDeletedIcon } from 'components/shared/icons';
+import { EntityClassItem } from 'components/shared/elements';
+import { useGetGraphRelationshipById } from 'lib/hooks/api/dataModelling/relatioships';
+import { RelationshipDatasetInfo } from 'components/shared/elements/Relationships/RelationshipDatasetInfo';
+
+interface OverviewGraphRelationshipProps {
+  dataEntityDetails: DataEntityDetails;
+}
+
+const OverviewGraphRelationship: React.FC<OverviewGraphRelationshipProps> = ({
+  dataEntityDetails,
+}) => {
+  const { data: relationshipDetails } = useGetGraphRelationshipById(dataEntityDetails.id);
+
+  return (
+    <Grid container>
+      <Grid item xs={12} sx={{ mb: 1.25 }}>
+        <EntityClassItem
+          entityClassName={DataEntityClassNameEnum.RELATIONSHIP}
+          fullName
+        />
+      </Grid>
+      {relationshipDetails && (
+        <Grid item container flexWrap='nowrap' columnGap={1} sx={{ mb: 1.25 }}>
+          <Grid
+            item
+            container
+            xs={6}
+            direction='column'
+            alignItems='flex-start'
+            alignContent='flex-start'
+          >
+            <Typography variant='h4' sx={{ mb: 2 }}>
+              Source:
+            </Typography>
+            <RelationshipDatasetInfo
+              dataEntityId={relationshipDetails.sourceDataEntityId}
+              oddrn={relationshipDetails.sourceDatasetOddrn}
+            />
+          </Grid>
+          <Grid
+            item
+            container
+            xs={4}
+            direction='column'
+            alignItems='flex-start'
+            alignContent='flex-start'
+          >
+            <Typography variant='h4' sx={{ mb: 2 }}>
+              Target:
+            </Typography>
+            <RelationshipDatasetInfo
+              dataEntityId={relationshipDetails.targetDataEntityId}
+              oddrn={relationshipDetails.targetDatasetOddrn}
+            />
+          </Grid>
+          <Grid
+            item
+            container
+            xs={2}
+            direction='column'
+            alignItems='flex-start'
+            alignContent='flex-start'
+          >
+            <Typography variant='h4' sx={{ mb: 2 }}>
+              Is Directed:
+            </Typography>
+
+            {relationshipDetails.graphRelationship.isDirected ? (
+              <Grid container alignItems='center'>
+                <ActivityCreatedIcon sx={{ mr: 1 }} />
+                True
+              </Grid>
+            ) : (
+              <Grid container alignItems='center'>
+                <ActivityDeletedIcon sx={{ mr: 1 }} />
+                False
+              </Grid>
+            )}
+          </Grid>
+        </Grid>
+      )}
+      <Grid item container flexWrap='nowrap' columnGap={1} sx={{ mb: 1.25 }}>
+        <Grid
+          item
+          container
+          xs={6}
+          direction='column'
+          alignItems='flex-start'
+          alignContent='flex-start'
+        >
+          <Typography variant='h4' sx={{ mb: 1.25 }}>
+            Attributes:
+          </Typography>
+          {relationshipDetails?.graphRelationship.attributes?.map(attribute => (
+            <Grid container key={attribute.name} alignItems='center'>
+              <Typography variant='body1' sx={{ mr: 1 }}>
+                {attribute.name}:
+              </Typography>
+              <Typography variant='body1'>{attribute.value}</Typography>
+            </Grid>
+          ))}
+        </Grid>
+      </Grid>
+    </Grid>
+  );
+};
+
+export default OverviewGraphRelationship;