[NOT ready for Review] Revamp lineage node

openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/LineageNodeLabelV1.tsx

@@ -25,6 +25,7 @@ import {
 import { getServiceIcon } from '../../../utils/TableUtils';
 import { SourceType } from '../../SearchedData/SearchedData.interface';
 import './lineage-node-label.less';
+import { LineageNodeLabelV1ConnectIcon } from './LineageNodeLabelV1ConnectIcon';
 
 interface LineageNodeLabelProps {
   node: SourceType;
@@ -42,7 +43,7 @@ const EntityLabel = ({ node }: Pick<LineageNodeLabelProps, 'node'>) => {
   }, [node]);
 
   return (
-    <Row className="items-center" wrap={false}>
+    <Row className="items-center entity-label-container" wrap={false}>
       <Col className="d-flex items-center" flex="auto">
         <div className="d-flex entity-button-icon m-r-xs">
           {getServiceIcon(node)}
@@ -52,7 +53,11 @@ const EntityLabel = ({ node }: Pick<LineageNodeLabelProps, 'node'>) => {
             className="m-b-0 d-block text-left text-grey-muted w-54"
             data-testid="entity-header-name"
             ellipsis={{ tooltip: true }}>
-            {node.name}
+            <div className="entity-header-name">
+              <Typography.Text className="entity-header-name-first">
+                {node.name}
+              </Typography.Text>
+            </div>
           </Typography.Text>
           <Typography.Text
             className="m-b-0 d-block text-left entity-header-display-name text-md font-medium w-54"
@@ -84,27 +89,22 @@ const LineageNodeLabelV1 = ({ node }: Pick<LineageNodeLabelProps, 'node'>) => {
 
   return (
     <div className="custom-node-label-container">
-      <div className="w-full m-0 p-x-md p-y-xs">
-        {breadcrumbs.length > 0 && (
-          <div className="d-flex gap-2 items-center m-b-xs lineage-breadcrumb">
-            {breadcrumbs.map((breadcrumb, index) => (
-              <Fragment key={breadcrumb.name}>
-                <Typography.Text
-                  className="text-grey-muted lineage-breadcrumb-item"
-                  ellipsis={{ tooltip: true }}>
-                  {breadcrumb.name}
-                </Typography.Text>
-                {index !== breadcrumbs.length - 1 && (
-                  <Typography.Text className="text-xss">
-                    {t('label.slash-symbol')}
-                  </Typography.Text>
-                )}
-              </Fragment>
-            ))}
-          </div>
-        )}
-
+      <div className="w-full m-0 p-x-md">
         <EntityLabel node={node} />
+        <div className="node-name"></div>
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            margin: '10px 0 15px 0',
+          }}>
+          {node.columns?.length > 0 && (
+            <div className="node-chip-label">
+              {node.columns?.length} columns
+            </div>
+          )}
+          <LineageNodeLabelV1ConnectIcon />
+        </div>
       </div>
     </div>
   );

openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/LineageNodeLabelV1ConnectIcon.tsx

@@ -0,0 +1,143 @@
+/*
+ *  Copyright 2025 Collate.
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+export const LineageNodeLabelV1ConnectIcon = () => (
+  <svg
+    width="28"
+    height="28"
+    viewBox="0 0 28 28"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <g filter="url(#filter0_dii_61_14797)">
+      <path
+        d="M2 7C2 3.68629 4.68629 1 8 1H20C23.3137 1 26 3.68629 26 7V19C26 22.3137 23.3137 25 20 25H8C4.68629 25 2 22.3137 2 19V7Z"
+        fill="white"
+      />
+      <path
+        d="M8 1.5H20C23.0376 1.5 25.5 3.96243 25.5 7V19C25.5 22.0376 23.0376 24.5 20 24.5H8C4.96243 24.5 2.5 22.0376 2.5 19V7C2.5 3.96243 4.96243 1.5 8 1.5Z"
+        stroke="rgb(204,206,209)"
+      />
+      <rect
+        x="-0.5"
+        y="0.5"
+        width="3.32009"
+        height="3.32"
+        rx="1.5"
+        transform="matrix(-1 0 0 1 20.1401 7)"
+        stroke="rgb(114,118,127)"
+      />
+      <rect
+        x="-0.5"
+        y="0.5"
+        width="3.32009"
+        height="3.32"
+        rx="1.5"
+        transform="matrix(-1 0 0 1 20.1401 14.68)"
+        stroke="rgb(114,118,127)"
+      />
+      <rect
+        x="-0.5"
+        y="0.5"
+        width="5"
+        height="5"
+        rx="1.5"
+        transform="matrix(-1 0 0 1 11.8599 10.5)"
+        stroke="rgb(114,118,127)"
+      />
+      <path
+        d="M16.6753 9.23022H15.7544C15.505 9.24172 15.0062 9.43712 15.0062 10.1268C15.0062 10.8164 15.0062 11.8624 15.0062 12.2992C15.0062 12.9544 14.6667 13.2302 14.2292 13.2302C13.7918 13.2302 13.011 13.2302 12.6753 13.2302"
+        stroke="rgb(114,118,127)"
+        stroke-linecap="round"
+      />
+      <path
+        d="M16.9995 17.5H16.0786C15.8292 17.4885 15.3304 17.2931 15.3304 16.6034C15.3304 15.9138 15.3304 14.8678 15.3304 14.431C15.3304 13.7759 14.9909 13.5 14.5535 13.5C14.1161 13.5 13.3352 13.5 12.9995 13.5"
+        stroke="rgb(114,118,127)"
+        stroke-linecap="round"
+      />
+    </g>
+    <defs>
+      <filter
+        id="filter0_dii_61_14797"
+        x="0"
+        y="0"
+        width="28"
+        height="28"
+        filterUnits="userSpaceOnUse"
+        color-interpolation-filters="sRGB">
+        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dy="1" />
+        <feGaussianBlur stdDeviation="1" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.05 0"
+        />
+        <feBlend
+          mode="normal"
+          in2="BackgroundImageFix"
+          result="effect1_dropShadow_61_14797"
+        />
+        <feBlend
+          mode="normal"
+          in="SourceGraphic"
+          in2="effect1_dropShadow_61_14797"
+          result="shape"
+        />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dy="-2" />
+        <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.05 0"
+        />
+        <feBlend
+          mode="normal"
+          in2="shape"
+          result="effect2_innerShadow_61_14797"
+        />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feMorphology
+          radius="1"
+          operator="erode"
+          in="SourceAlpha"
+          result="effect3_innerShadow_61_14797"
+        />
+        <feOffset />
+        <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.18 0"
+        />
+        <feBlend
+          mode="normal"
+          in2="effect2_innerShadow_61_14797"
+          result="effect3_innerShadow_61_14797"
+        />
+      </filter>
+    </defs>
+  </svg>
+);

openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/custom-node.less

@@ -168,7 +168,7 @@
   }
 
   .label-container {
-    background: @primary-1;
+    background: rgb(241, 248, 254);
   }
 
   .column-container {
@@ -259,7 +259,6 @@
   border-radius: 50% !important;
   border-color: @lineage-border !important;
   background: @white !important;
-  top: 43px !important; // Need to show handles on top half
 
   svg {
     color: @text-grey-muted;
@@ -328,3 +327,8 @@
   border: 1px solid @error-color;
   background-color: @white;
 }
+
+.entity-label-container {
+  margin-top: 8px;
+  margin-bottom: 12px;
+}

openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/lineage-node-label.less

@@ -31,3 +31,59 @@
     }
   }
 }
+
+/* Chip styling */
+.node-chip-label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  background: rgb(214, 231, 253);
+  border-radius: 16px;
+  padding: 2px 9px;
+  font-size: 12px;
+  font-weight: 500;
+  color: rgb(45, 91, 203);
+  transition: background 0.2s;
+}
+
+/* Add chevron using SVG background */
+.node-chip-label::after {
+  content: '';
+  width: 10px;
+  height: 10px;
+  background: no-repeat center / contain
+    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='rgb(45, 91, 203)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
+  color: rgb(45, 91, 203);
+}
+
+/* Hover effect */
+.node-chip-label:hover .label {
+  background: #dde;
+}
+
+.node-name::after {
+  content: '';
+  display: block;
+  width: 100%;
+  height: 1px;
+  background: rgb(235, 235, 235);
+  // background: rgb(214, 232, 253);
+}
+
+.entity-header-name {
+  display: flex;
+}
+
+.entity-header-name-first {
+  display: flex;
+}
+
+.entity-header-name-first::after {
+  content: '';
+  display: block;
+  width: 1px;
+  height: 12px;
+  background: rgb(165, 168, 174);
+  margin: 3px 8px;
+}