Merge remote-tracking branch 'origin/main'

Author: lazhenyi

README.md

@@ -43,6 +43,11 @@ JZHub’s use cases are designed to support researchers in open science and AI-d
 
 - Compliance and Governance for Sensitive Data: Manage sensitive data with access controls and compliance monitoring, ensuring ethical use in collaborative open science projects.
 
+## Enterprise Data Hub
+
+Enterprise data continues to grow exponentially, intensifying pressure on organizations to harness this valuable resource.   However, organizations find themselves unprepared to capture value from all this data, mainly because of disparate data sources and a lack of proper data sharing protocols.   Valuable enterprise data is often trapped in silos because of poor data sharing culture and inadequate infrastructure.   Current tooling for sharing data doesn’t cater to data consumers’ varying skill levels, hindering time to value from data.   Chief data officers and IT leaders must address this issue by shifting the mindset from creating ad hoc data projects to managing data as a product.
+
+JZHub, aka. JiaoZi Data Product Hub, enables Git protocol based data sharing across the organization and automates the delivery of data products to cater to the needs of data consumers of all skill levels.   It integrates with various source systems to simplify the onboarding of data products, no matter where data resides.   Data producers can use Git protocol to package, operationalize and share reusable data products, which could include datasets, AI models and notebooks.   Business users and other data consumers can then quickly and easily discover curated data products and have them delivered in a format optimized for their use case.   This can help reduce friction and improve the quality, reliability and discovery of valuable enterprise data.
 
 ## Getting Started
 

src/component/explore/ExploreItemHeader.tsx

@@ -56,7 +56,7 @@ export const ExploreItemHeader = ({setRtype, rtype, Filter, setFilter, search,se
                     <div className="search-filter-container">
                         <Menu>
                             <Menu.Target>
-                                <Button variant="outline" color="gray">
+                                <Button variant="outline" color="gray" className="fixed-size-button">
                                     {
                                         Filter === "public" ? "public" : Filter === "private" ? "private" : "Filter"
                                     } <IconChevronDown size={14} className="icon-right"/>

src/component/shell/header.tsx

@@ -40,23 +40,18 @@ export const AppHeader = (props: AppHeaderProps) => {
                             <Button className="app-header-right-create-target">+</Button>
                         </MenuTarget>
                         <MenuDropdown className="app-header-right-create">
-                            <MenuItem onClick={() => {
-                                nav("/product/new");
-                            }}>
-                                <RiGitRepositoryLine/><a>New Repository</a>
+                            <MenuItem onClick={() => nav("/product/new")}>
+                                <RiGitRepositoryLine /><a>New Repository</a>
                             </MenuItem>
-                            <MenuItem onClick={()=>{
-                                nav("/group/new");
-                            }}>
-                                <RiGroupLine/><a>New Group</a>
+                            <MenuItem onClick={() => nav("/group/new")}>
+                                <RiGroupLine /><a>New Group</a>
                             </MenuItem>
                         </MenuDropdown>
                     </Menu>
                 </div>
                 <div>
                     <div className="app-header-right-create-notify">
-                        <IoIosNotificationsOutline
-                        />
+                        <IoIosNotificationsOutline />
                     </div>
                 </div>
                 {

src/style/explore.css

@@ -44,6 +44,14 @@
             margin-right: 1rem;
         }
 
+        .fixed-size-button {
+            width: 95px;
+            height: 40px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
         .search-filter-container {
             display: flex;
             gap: 1rem;
@@ -72,13 +80,24 @@
     .explore-product {
         display: flex;
         flex-wrap: wrap;
-        max-height: 64px;
         border: 1px #efefef solid;
         border-radius: 5px;
         cursor: pointer;
+        padding: 5px;
+        height: auto;
+        min-height: 70px;
         .explore-product-avatar {
-            height: 60px;
-            margin: 0 0 0.125rem;
+            height: 50px;
+            width: 50px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin: 5px 0 0 5px;
+            img {
+                max-height: 100%;
+                max-width: 100%;
+                object-fit: contain;
+            }
         }
         .explore-product-title {
             display: flex;
@@ -114,13 +133,24 @@
     .explore-users {
         display: flex;
         flex-wrap: wrap;
-        max-height: 64px;
-        cursor: pointer;
         border: 1px #efefef solid;
         border-radius: 5px;
+        cursor: pointer;
+        padding: 5px;
+        height: auto;
+        min-height: 70px;
         .explore-users-avatar {
-            height: 60px;
-            margin: 0 0 0.125rem;
+            height: 50px;
+            width: 50px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin: 5px 0 0 5px;
+            img {
+                max-height: 100%;
+                max-width: 100%;
+                object-fit: contain;
+            }
         }
         .explore-users-title {
             display: flex;
@@ -153,16 +183,27 @@
             }
         }
     }
-    .explore-organization{
+    .explore-organization {
         display: flex;
         flex-wrap: wrap;
-        max-height: 64px;
         border: 1px #efefef solid;
-        cursor: pointer;
         border-radius: 5px;
+        cursor: pointer;
+        padding: 5px;
+        height: auto;
+        min-height: 70px;
         .explore-organization-avatar {
-            height: 60px;
-            margin: 0 0 0.125rem;
+            height: 50px;
+            width: 50px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin: 5px 0 0 5px;
+            img {
+                max-height: 100%;
+                max-width: 100%;
+                object-fit: contain;
+            }
         }
         .explore-organization-title {
             display: flex;
@@ -182,7 +223,6 @@
         .explore-organization-data {
             display: flex;
             flex-direction: row;
-            cursor: pointer;
             justify-content: flex-end;
             align-items: center;
             margin-left: auto;
@@ -196,4 +236,4 @@
             }
         }
     }
-}
+}

src/style/shell.css

@@ -44,26 +44,43 @@
         justify-content: flex-end;
         gap: 1rem;
 
+        > div {
+            width: 40px;
+            height: 40px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
         .app-header-right-create-target {
+            width: 100%;
+            height: 100%;
+            padding: 0;
+            display: flex;
+            font-size: 20px;
+            justify-content: center;
+            align-items: center;
             background: #ffffff;
             color: #000000;
             border: 1px #d4d4d4 solid;
         }
 
         .app-header-right-create-notify {
-            background: #ffffff;
-            color: #000000;
-            border: 1px #d4d4d4 solid;
-            padding: 8px 0.8rem;
-            border-radius: 3px;
+            width: 100%;
+            height: 100%;
             display: flex;
+            justify-content: center;
             align-items: center;
+            font-size: 20px;
+            border: 1px #d4d4d4 solid;
         }
 
         .app-header-right-create-notify:hover {
             background: #fafafa;
             color: black;
         }
+
+
     }
 
     .collapsed {
@@ -80,8 +97,6 @@
         background: #fafafa;
         color: black;
     }
-
-
 }
 
 .navbar {
@@ -123,4 +138,4 @@
             background: #f2f0f0;
         }
     }
-}
+}