diff --git a/catalog-rest-service/src/main/resources/ui/src/components/my-data-details/FrequentlyJoinedTables.tsx b/catalog-rest-service/src/main/resources/ui/src/components/my-data-details/FrequentlyJoinedTables.tsx index 012d1009c06..a9610b21e2b 100644 --- a/catalog-rest-service/src/main/resources/ui/src/components/my-data-details/FrequentlyJoinedTables.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/components/my-data-details/FrequentlyJoinedTables.tsx @@ -15,7 +15,7 @@ * limitations under the License. */ -import React, { FunctionComponent } from 'react'; +import React, { FunctionComponent, useEffect, useState } from 'react'; import { Link, useHistory } from 'react-router-dom'; import { getDatasetDetailsPath } from '../../constants/constants'; import PopOver from '../common/popover/PopOver'; @@ -27,20 +27,41 @@ type Props = { const viewCap = 3; +const getUniqueTablesWithCount = (tableFQNs: Props['tableList']) => { + return tableFQNs.reduce((resList, curr) => { + let duplicates = false; + for (const table of resList) { + if (table.fqn === curr.fqn) { + table.joinCount += curr.joinCount; + duplicates = true; + + break; + } + } + + return duplicates ? resList : [...resList, curr]; + }, [] as Props['tableList']); +}; + const FrequentlyJoinedTables: FunctionComponent = ({ header, tableList, }: Props) => { const history = useHistory(); + const [joinedTables, setJoinedTables] = useState([]); const handleTableClick = (fqn: string) => { history.push(getDatasetDetailsPath(fqn)); }; + useEffect(() => { + setJoinedTables(getUniqueTablesWithCount(tableList)); + }, [tableList]); + const additionalOptions = () => { return (
- {tableList?.slice(viewCap).map((table, index) => ( + {joinedTables?.slice(viewCap).map((table, index) => (
= ({
- {(tableList.length <= viewCap - ? tableList - : tableList.slice(0, viewCap) + {(joinedTables.length <= viewCap + ? joinedTables + : joinedTables.slice(0, viewCap) ).map((table, index) => { return (
= ({ ); })} - {tableList.length > viewCap && ( + {joinedTables.length > viewCap && (
= ({ theme="light" trigger="click"> - {`+ ${tableList.length - viewCap} more`} + {`+ ${joinedTables.length - viewCap} more`}
diff --git a/catalog-rest-service/src/main/resources/ui/src/pages/my-data-details/index.tsx b/catalog-rest-service/src/main/resources/ui/src/pages/my-data-details/index.tsx index e047244bfbb..127fb1e24df 100644 --- a/catalog-rest-service/src/main/resources/ui/src/pages/my-data-details/index.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/pages/my-data-details/index.tsx @@ -442,7 +442,7 @@ const MyDataDetailsPage = () => { {activeTab === 1 && (
-
+
Description diff --git a/catalog-rest-service/src/main/resources/ui/src/styles/tailwind.css b/catalog-rest-service/src/main/resources/ui/src/styles/tailwind.css index 45b73933080..eb87b7faf5e 100644 --- a/catalog-rest-service/src/main/resources/ui/src/styles/tailwind.css +++ b/catalog-rest-service/src/main/resources/ui/src/styles/tailwind.css @@ -157,7 +157,7 @@ } .tw-tag { - @apply tw-py-1 tw-px-3 tw-text-xs tw-font-normal tw-rounded-2xl tw-bg-gray-200; + @apply tw-py-1 tw-px-3 tw-text-xs tw-font-normal tw-rounded-2xl tw-bg-tag; } .tw-signin-button { diff --git a/catalog-rest-service/src/main/resources/ui/src/styles/temp.css b/catalog-rest-service/src/main/resources/ui/src/styles/temp.css index 66b81ef1937..4f35e1447c0 100644 --- a/catalog-rest-service/src/main/resources/ui/src/styles/temp.css +++ b/catalog-rest-service/src/main/resources/ui/src/styles/temp.css @@ -647,8 +647,7 @@ color: #5e5c58; } /* My data details page realted CSS */ -.sl-box.description, -.schema-description { +.sl-box.description { min-height: 138px; } diff --git a/catalog-rest-service/src/main/resources/ui/tailwind.config.js b/catalog-rest-service/src/main/resources/ui/tailwind.config.js index 2aeae21472c..5bb7adc1e90 100644 --- a/catalog-rest-service/src/main/resources/ui/tailwind.config.js +++ b/catalog-rest-service/src/main/resources/ui/tailwind.config.js @@ -101,6 +101,7 @@ module.exports = { }, minHeight: { 32: '8rem', + 168: '10.5rem', }, padding: { '5px': '5px',