fix(ui) Add followup tweaks to updated analytics page

datahub-web-react/src/app/analyticsDashboardV2/components/AnalyticsPage.tsx

@@ -1,5 +1,5 @@
-import { Loader, PageTitle } from '@components';
-import { Alert, Select } from 'antd';
+import { Loader, PageTitle, SelectOption, SimpleSelect } from '@components';
+import { Alert } from 'antd';
 import React, { useState } from 'react';
 import styled from 'styled-components';
 
@@ -35,6 +35,9 @@ const PageContainer = styled.div<{ isV2: boolean; $isShowNavBarRedesign?: boolea
     }};
     padding: 24px;
     padding-bottom: 48px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
 `;
 
 const HighlightGroup = styled.div`
@@ -52,20 +55,14 @@ const DomainSection = styled.div`
     display: flex;
     flex-direction: column;
     gap: 16px;
-    padding: 24px 16px;
-`;
-
-const TitleContainer = styled.div`
-    margin-bottom: 8px;
 `;
 
 const FilterSection = styled.div`
     display: flex;
     align-items: center;
-    margin-bottom: 16px;
 `;
 
-const DomainSelect = styled(Select)`
+const DomainSelect = styled(SimpleSelect)`
     width: 220px;
 `;
 
@@ -76,12 +73,6 @@ const LoaderContainer = styled.div`
     min-height: 200px;
 `;
 
-const Divider = styled.div`
-    height: 1px;
-    background: ${(props) => props.theme.styles['border-color-default']};
-    margin: 32px 0;
-`;
-
 export const AnalyticsPage = () => {
     const isV2 = useIsThemeV2();
     const isShowNavBarRedesign = useShowNavBarRedesign();
@@ -105,7 +96,7 @@ export const AnalyticsPage = () => {
     });
     const [domain, setDomain] = useState('ALL');
 
-    const onDomainChange = (inputDomain) => setDomain(inputDomain);
+    const onDomainChange = (inputDomains) => setDomain(inputDomains[0]);
     const {
         loading: metadataAnalyticsLoading,
         error: metadataAnalyticsError,
@@ -123,6 +114,10 @@ export const AnalyticsPage = () => {
 
     const isLoading = highlightLoading || chartLoading || domainLoading || metadataAnalyticsLoading;
 
+    const domainOptions =
+        domainData?.listDomains?.domains?.map((d) => ({ value: d.urn, label: d?.properties?.name || '' })) || [];
+    const options: SelectOption[] = [{ value: 'ALL', label: 'All Domains' }, ...domainOptions];
+
     return (
         <PageContainer isV2={isV2} $isShowNavBarRedesign={isShowNavBarRedesign}>
             {isLoading && (
@@ -154,9 +149,7 @@ export const AnalyticsPage = () => {
                         ))}
 
                     <DomainSection>
-                        <TitleContainer>
-                            <PageTitle title="Domain Landscape Summary" variant="sectionHeader" />
-                        </TitleContainer>
+                        <PageTitle title="Domain Landscape Summary" variant="sectionHeader" />
                         <FilterSection>
                             {domainError && (
                                 <Alert
@@ -167,19 +160,15 @@ export const AnalyticsPage = () => {
                             <DomainSelect
                                 showSearch
                                 placeholder="Select domain"
-                                value={domain}
-                                onChange={onDomainChange}
-                                filterOption={(input, option) =>
-                                    option?.children?.toLowerCase()?.indexOf(input.toLowerCase()) >= 0
-                                }
-                            >
-                                <Select.Option value="ALL">All Domains</Select.Option>
-                                {domainData?.listDomains?.domains?.map((domainChoice) => (
-                                    <Select.Option value={domainChoice.urn} key={domainChoice.urn}>
-                                        {domainChoice?.properties?.name}
-                                    </Select.Option>
-                                ))}
-                            </DomainSelect>
+                                values={[domain]}
+                                onUpdate={onDomainChange}
+                                filterResultsByQuery
+                                options={options}
+                                isMultiSelect={false}
+                                onClear={undefined}
+                                showClear={false}
+                                width={220}
+                            />
                         </FilterSection>
                     </DomainSection>
 
@@ -195,7 +184,6 @@ export const AnalyticsPage = () => {
                         ?.filter((chartGroup) => chartGroup.groupId === 'DataHubUsageAnalytics')
                         .map((chartGroup) => (
                             <React.Fragment key={chartGroup.title}>
-                                <Divider />
                                 <ChartGroup chartGroup={{ ...chartGroup, title: 'Usage Analytics' }} />
                             </React.Fragment>
                         ))}

datahub-web-react/src/app/analyticsDashboardV2/components/ChartGroup.tsx

@@ -11,11 +11,7 @@ const Container = styled.div`
     display: flex;
     flex-direction: column;
     gap: 16px;
-    padding: 24px 16px;
-`;
-
-const TitleContainer = styled.div`
-    margin-bottom: 8px;
+    margin-bottom: 24px;
 `;
 
 const ChartCol = styled(Col)`
@@ -36,11 +32,7 @@ type Props = {
 export const ChartGroup = ({ chartGroup }: Props) => {
     return (
         <Container>
-            {chartGroup.title?.length > 0 && (
-                <TitleContainer>
-                    <PageTitle title={chartGroup.title} variant="sectionHeader" />
-                </TitleContainer>
-            )}
+            {chartGroup.title?.length > 0 && <PageTitle title={chartGroup.title} variant="sectionHeader" />}
             <Row gutter={[16, 16]}>
                 {chartGroup.charts.map((chart) => (
                     <ChartCol key={chart.title} sm={24} md={24} lg={8} xl={8}>

datahub-web-react/src/app/analyticsDashboardV2/components/Highlight.tsx

@@ -1,6 +1,5 @@
-import { Card, Text } from '@components';
+import { Card, Tooltip } from '@components';
 import React from 'react';
-import styled from 'styled-components';
 
 import { formatNumber } from '@app/shared/formatNumber';
 
@@ -11,47 +10,15 @@ type Props = {
     shortenValue?: boolean;
 };
 
-const TitleText = styled(Text)`
-    font-size: 16px;
-    font-weight: 600;
-    text-align: center;
-    margin-bottom: 8px;
-`;
-
-const ValueText = styled(Text)`
-    font-size: 36px;
-    font-weight: 700;
-    line-height: 1.2;
-`;
-
-const TrendText = styled(Text)`
-    margin-top: 8px;
-`;
-
-const ContentWrapper = styled.div`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    padding: 16px 8px;
-    gap: 4px;
-`;
-
 export const Highlight = ({ highlight, shortenValue }: Props) => {
     return (
-        <Card title="">
-            <ContentWrapper>
-                <TitleText color="gray">{highlight.title}</TitleText>
-                <ValueText color="violet">
-                    {(shortenValue && formatNumber(highlight.value)) || highlight.value}
-                </ValueText>
-                {highlight.body && (
-                    <TrendText color="gray" size="sm">
-                        {highlight.body}
-                    </TrendText>
-                )}
-            </ContentWrapper>
-        </Card>
+        <Tooltip title={highlight.body}>
+            <div>
+                <Card
+                    title={(shortenValue && formatNumber(highlight.value)) || highlight.value}
+                    subTitle={highlight.title}
+                />
+            </div>
+        </Tooltip>
     );
 };