From 35ed33af5f184935e79fb58e3b23bf800a9a0cf2 Mon Sep 17 00:00:00 2001
From: karanh37 <33024356+karanh37@users.noreply.github.com>
Date: Thu, 22 Jun 2023 22:59:36 +0530
Subject: [PATCH] feat(ui): lineage - allow pipelines to be added for table to
 topic and vice versa (#12088)

* fix: show columns button should only be visible for too many columns

* fix: allow pipeline edge for topic

* fix: lineage feedbacks

* fix: lineage feedbacks

* fix: review comments
---
 .../resources/ui/src/assets/svg/folder.svg    |  11 -
 .../CustomControls.component.tsx              |   1 +
 .../EntityLineage/CustomEdge.component.tsx    | 162 ++++++++-------
 .../CustomNode.component.test.tsx             | 164 ---------------
 .../EntityLineage/CustomNode.component.tsx    | 192 ------------------
 .../EntityLineage/CustomNodeV1.component.tsx  |   4 +-
 .../EntityLineage/EntityLineage.component.tsx |   7 +-
 .../components/EntityLineage/custom-node.less |  27 +++
 .../EntityLineage/entityLineage.style.less    |   2 +-
 .../GlossaryHeader.component.tsx              |   4 +-
 .../ui/src/components/Tag/Tags/tags.tsx       |   2 +-
 .../Tag/TagsV1/TagsV1.component.tsx           |   2 +-
 .../SummaryTagsDescription.component.tsx      |   2 +-
 .../ui/src/constants/PageHeaders.constant.ts  |   2 +-
 .../GlossaryLeftPanel.component.tsx           |   4 +-
 .../ui/src/pages/TagsPage/TagsPage.tsx        |   2 +-
 .../src/main/resources/ui/src/styles/app.less |   3 +
 .../src/main/resources/ui/src/styles/temp.css |   1 -
 .../main/resources/ui/src/styles/x-master.css |   5 -
 .../main/resources/ui/src/utils/SvgUtils.tsx  |   5 -
 .../resources/ui/src/utils/TableUtils.tsx     |  12 +-
 21 files changed, 136 insertions(+), 478 deletions(-)
 delete mode 100644 openmetadata-ui/src/main/resources/ui/src/assets/svg/folder.svg
 delete mode 100644 openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/CustomNode.component.test.tsx
 delete mode 100644 openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/CustomNode.component.tsx

diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/folder.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/folder.svg
deleted file mode 100644
index 03c0b414170..00000000000
--- a/openmetadata-ui/src/main/resources/ui/src/assets/svg/folder.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg viewBox="0 0 25 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_19596_44593)">
-<path d="M23.3002 4.75H6.50074C6.18249 4.75 5.87728 4.86853 5.65224 5.07951C5.42721 5.29048 5.30078 5.57663 5.30078 5.875C5.30078 6.17337 5.42721 6.45952 5.65224 6.67049C5.87728 6.88147 6.18249 7 6.50074 7H23.3002C23.6185 7 23.9237 6.88147 24.1487 6.67049C24.3737 6.45952 24.5002 6.17337 24.5002 5.875C24.5002 5.57663 24.3737 5.29048 24.1487 5.07951C23.9237 4.86853 23.6185 4.75 23.3002 4.75Z" fill="currentColor"/>
-<path d="M23.3 9.25H6.66857C5.89427 9.22356 5.14413 8.99035 4.5064 8.5778C3.86867 8.16525 3.36987 7.59053 3.06869 6.92125C2.89223 6.41389 2.84662 5.87454 2.93559 5.34745C3.02456 4.82036 3.24558 4.32057 3.58051 3.88908C3.91544 3.4576 4.35473 3.10672 4.86233 2.86526C5.36993 2.62379 5.93137 2.49861 6.50058 2.5H23.3C23.6183 2.5 23.9235 2.38147 24.1485 2.1705C24.3736 1.95952 24.5 1.67337 24.5 1.375C24.5 1.07663 24.3736 0.790483 24.1485 0.579505C23.9235 0.368526 23.6183 0.25 23.3 0.25H6.50058C5.70453 0.249905 4.91642 0.398327 4.18216 0.686621C3.4479 0.974915 2.78217 1.39732 2.22377 1.92922C1.66536 2.46112 1.22544 3.09188 0.929626 3.78476C0.633815 4.47764 0.488031 5.21878 0.500768 5.965V30.625C0.500768 30.9234 0.627192 31.2095 0.852229 31.4205C1.07727 31.6315 1.38248 31.75 1.70073 31.75H23.3C23.6183 31.75 23.9235 31.6315 24.1485 31.4205C24.3736 31.2095 24.5 30.9234 24.5 30.625V10.375C24.5 10.0766 24.3736 9.79048 24.1485 9.57951C23.9235 9.36853 23.6183 9.25 23.3 9.25ZM7.70054 11.5H10.1005V16.675L9.75247 16.3375C9.64092 16.2321 9.5082 16.1484 9.36198 16.0912C9.21575 16.0341 9.05891 16.0047 8.9005 16.0047C8.74209 16.0047 8.58525 16.0341 8.43902 16.0912C8.29279 16.1484 8.16008 16.2321 8.04853 16.3375L7.70054 16.675V11.5ZM22.1001 29.5H2.90069V10.2513C3.62005 10.7462 4.43513 11.1053 5.30061 11.3087V19.375C5.3018 19.5971 5.37308 19.8139 5.50547 19.9981C5.63787 20.1823 5.82545 20.3256 6.04459 20.41C6.26312 20.4962 6.50396 20.5197 6.73674 20.4776C6.96952 20.4356 7.18381 20.3299 7.35255 20.1737L8.9005 18.7112L10.4484 20.1737C10.5606 20.278 10.6935 20.3605 10.8397 20.4165C10.9859 20.4725 11.1425 20.5009 11.3004 20.5C11.4578 20.5038 11.614 20.473 11.7564 20.41C11.9755 20.3256 12.1631 20.1823 12.2955 19.9981C12.4279 19.8139 12.4992 19.5971 12.5004 19.375V11.5H22.1001V29.5Z" fill="currentColor"/>
-</g>
-<defs>
-<clipPath id="clip0_19596_44593">
-<rect width="25" height="32" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/CustomControls.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/CustomControls.component.tsx
index de14a8fead0..184ab12a39e 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/CustomControls.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/CustomControls.component.tsx
@@ -187,6 +187,7 @@ const CustomControls: FC<ControlProps> = ({
           <Space className="justify-end w-full" size={16}>
             <Button
               ghost
+              className="expand-btn"
               data-testid="expand-column"
               type="primary"
               onClick={onExpandColumnClick}>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/CustomEdge.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/CustomEdge.component.tsx
index 35fe400aabe..f18e0786d9c 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/CustomEdge.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/CustomEdge.component.tsx
@@ -12,7 +12,7 @@
  */
 
 import { Button } from 'antd';
-import React, { Fragment } from 'react';
+import React, { Fragment, useCallback } from 'react';
 import { EdgeProps, getBezierPath } from 'reactflow';
 import { ReactComponent as FunctionIcon } from '../../assets/svg/ic-function.svg';
 import { ReactComponent as PipelineIcon } from '../../assets/svg/pipeline-grey.svg';
@@ -87,12 +87,23 @@ export const CustomEdge = ({
     targetPosition,
   });
 
-  const isTableToTableEdge = () => {
-    const { sourceType, targetType } = data;
-
-    return sourceType === EntityType.TABLE && targetType === EntityType.TABLE;
+  const isPipelineEdgeAllowed = (
+    sourceType: EntityType,
+    targetType: EntityType
+  ) => {
+    return (
+      [EntityType.TABLE, EntityType.TOPIC].indexOf(sourceType) > -1 &&
+      [EntityType.TABLE, EntityType.TOPIC].indexOf(targetType) > -1
+    );
   };
 
+  const isColumnLineageAllowed =
+    !data.isColumnLineage &&
+    isPipelineEdgeAllowed(data.sourceType, data.targetType);
+  const hasLabel = data.label;
+  const isSelectedEditMode = selected && data.isEditMode;
+  const isSelected = selected;
+
   const getInvisiblePath = (path: string) => {
     return (
       <path
@@ -106,6 +117,61 @@ export const CustomEdge = ({
     );
   };
 
+  const getLineageEdgeIcon = useCallback(
+    (icon: React.ReactNode, dataTestId: string) => {
+      return (
+        <LineageEdgeIcon offset={3} x={edgeCenterX} y={edgeCenterY}>
+          <Button
+            className="d-flex justify-center items-center custom-edge-pipeline-button"
+            data-testid={dataTestId}
+            icon={icon}
+            type="primary"
+            onClick={(event) =>
+              data.isEditMode &&
+              data.addPipelineClick?.(event, rest as CustomEdgeData)
+            }
+          />
+        </LineageEdgeIcon>
+      );
+    },
+    [edgeCenterX, edgeCenterY, rest, data]
+  );
+
+  const getEditLineageIcon = useCallback(
+    (
+      dataTestId: string,
+      rotate: boolean,
+      onClick:
+        | ((
+            event: React.MouseEvent<HTMLElement, MouseEvent>,
+            data: CustomEdgeData
+          ) => void)
+        | undefined
+    ) => {
+      return (
+        <LineageEdgeIcon offset={offset} x={edgeCenterX} y={edgeCenterY}>
+          <Button
+            className="tw-cursor-pointer d-flex tw-z-9999"
+            data-testid={dataTestId}
+            icon={
+              <SVGIcons
+                alt="times-circle"
+                icon="icon-times-circle"
+                width="16px"
+              />
+            }
+            style={{
+              transform: rotate ? 'rotate(45deg)' : 'none',
+            }}
+            type="link"
+            onClick={(event) => onClick?.(event, rest as CustomEdgeData)}
+          />
+        </LineageEdgeIcon>
+      );
+    },
+    [offset, edgeCenterX, edgeCenterY, rest, data]
+  );
+
   return (
     <Fragment>
       <path
@@ -119,80 +185,20 @@ export const CustomEdge = ({
       {getInvisiblePath(invisibleEdgePath)}
       {getInvisiblePath(invisibleEdgePath1)}
 
-      {!data.isColumnLineage && isTableToTableEdge() ? (
-        data.label ? (
-          <LineageEdgeIcon offset={3} x={edgeCenterX} y={edgeCenterY}>
-            <Button
-              className="d-flex justify-center items-center custom-edge-pipeline-button"
-              data-testid="pipeline-label"
-              icon={<PipelineIcon />}
-              type="primary"
-              onClick={(event) =>
-                data.isEditMode &&
-                addPipelineClick?.(event, rest as CustomEdgeData)
-              }
-            />
-          </LineageEdgeIcon>
-        ) : (
-          selected &&
-          data.isEditMode && (
-            <LineageEdgeIcon offset={offset} x={edgeCenterX} y={edgeCenterY}>
-              <Button
-                className="tw-cursor-pointer d-flex tw-z-9999"
-                data-testid="add-pipeline"
-                icon={
-                  <SVGIcons
-                    alt="times-circle"
-                    icon="icon-times-circle"
-                    width="16px"
-                  />
-                }
-                style={{
-                  transform: 'rotate(45deg)',
-                }}
-                type="link"
-                onClick={(event) =>
-                  addPipelineClick?.(event, rest as CustomEdgeData)
-                }
-              />
-            </LineageEdgeIcon>
-          )
-        )
-      ) : data.isEditMode ? (
-        selected && (
-          <LineageEdgeIcon offset={offset} x={edgeCenterX} y={edgeCenterY}>
-            <Button
-              className="tw-cursor-pointer d-flex tw-z-9999"
-              data-testid="delete-button"
-              icon={
-                <SVGIcons
-                  alt="times-circle"
-                  icon="icon-times-circle"
-                  width="16px"
-                />
-              }
-              type="link"
-              onClick={(event) => onEdgeClick?.(event, rest as CustomEdgeData)}
-            />
-          </LineageEdgeIcon>
-        )
-      ) : (
+      {isColumnLineageAllowed &&
+        hasLabel &&
+        getLineageEdgeIcon(<PipelineIcon />, 'pipeline-label')}
+      {isColumnLineageAllowed &&
+        isSelectedEditMode &&
+        getEditLineageIcon('add-pipeline', true, addPipelineClick)}
+      {!isColumnLineageAllowed &&
+        isSelectedEditMode &&
+        isSelected &&
+        getEditLineageIcon('delete-button', false, onEdgeClick)}
+      {!isColumnLineageAllowed &&
         data.columnFunctionValue &&
-        data.isExpanded && (
-          <LineageEdgeIcon offset={3} x={edgeCenterX} y={edgeCenterY}>
-            <Button
-              className="d-flex justify-center items-center custom-edge-pipeline-button"
-              data-tesid="function-icon"
-              icon={<FunctionIcon />}
-              type="primary"
-              onClick={(event) =>
-                data.isEditMode &&
-                addPipelineClick?.(event, rest as CustomEdgeData)
-              }
-            />
-          </LineageEdgeIcon>
-        )
-      )}
+        data.isExpanded &&
+        getLineageEdgeIcon(<FunctionIcon />, 'function-icon')}
     </Fragment>
   );
 };
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/CustomNode.component.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/CustomNode.component.test.tsx
deleted file mode 100644
index 9cf0ec9af9f..00000000000
--- a/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/CustomNode.component.test.tsx
+++ /dev/null
@@ -1,164 +0,0 @@
-/*
- *  Copyright 2022 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.
- */
-
-import {
-  findAllByTestId,
-  findByTestId,
-  queryAllByTestId,
-  queryByTestId,
-  render,
-} from '@testing-library/react';
-import React from 'react';
-import { MemoryRouter } from 'react-router-dom';
-import { EntityLineageNodeType } from '../../enums/entity.enum';
-import CustomNode from './CustomNode.component';
-
-const mockTableColumns = [
-  {
-    name: 'product_id',
-    displayName: 'product_id',
-    dataType: 'NUMERIC',
-    dataTypeDisplay: 'numeric',
-    description:
-      'Unique identifier for the product. This column is the primary key for this table.',
-    fullyQualifiedName: 'bigquery_gcp.shopify.dim_product.product_id',
-    constraint: 'PRIMARY_KEY',
-    ordinalPosition: 1,
-  },
-  {
-    name: 'shop_id',
-    displayName: 'shop_id',
-    dataType: 'NUMERIC',
-    dataTypeDisplay: 'numeric',
-    description:
-      'ID of the store. This column is a foreign key reference to the shop_id column in the dim_shop table.',
-    fullyQualifiedName: 'bigquery_gcp.shopify.dim_product.shop_id',
-    ordinalPosition: 2,
-  },
-  {
-    name: 'title',
-    displayName: 'title',
-    dataType: 'VARCHAR',
-    dataLength: 100,
-    dataTypeDisplay: 'varchar',
-    description: 'Name of the product.',
-    fullyQualifiedName: 'bigquery_gcp.shopify.dim_product.title',
-    ordinalPosition: 3,
-  },
-  {
-    name: 'vendor',
-    displayName: 'vendor',
-    dataType: 'VARCHAR',
-    dataLength: 100,
-    dataTypeDisplay: 'varchar',
-    description:
-      'Name of the manufacturer, wholesaler, or other vendor of the product.',
-    fullyQualifiedName: 'bigquery_gcp.shopify.dim_product.vendor',
-    ordinalPosition: 4,
-  },
-  {
-    name: 'created_at',
-    displayName: 'created_at',
-    dataType: 'TIMESTAMP',
-    dataTypeDisplay: 'timestamp',
-    description:
-      'Date (ISO 8601) and time (UTC) when the product was added to the store. The format is YYYY-MM-DD HH:mm:ss (for example, 2016-02-05 17:04:01).',
-    fullyQualifiedName: 'bigquery_gcp.shopify.dim_product.created_at',
-    ordinalPosition: 5,
-  },
-  {
-    name: 'deleted_at',
-    displayName: 'deleted_at',
-    dataType: 'TIMESTAMP',
-    dataTypeDisplay: 'timestamp',
-    description:
-      'Date (ISO 8601) and time (UTC) when the product was deleted. The format is YYYY-MM-DD HH:mm:ss (for example, 2016-02-05 17:04:01).',
-    fullyQualifiedName: 'bigquery_gcp.shopify.dim_product.deleted_at',
-    ordinalPosition: 6,
-  },
-];
-
-const mockCustomNodeProp = {
-  id: 'node-1',
-  type: EntityLineageNodeType.DEFAULT,
-  selected: false,
-  isConnectable: false,
-  data: {
-    label: <p>label</p>,
-    columns: mockTableColumns,
-    isNewNode: undefined,
-    isExpanded: true,
-  },
-};
-
-jest.mock('../../utils/TableUtils', () => ({
-  getConstraintIcon: jest.fn(),
-}));
-
-jest.mock('reactflow', () => ({
-  Handle: jest.fn().mockReturnValue(<span>Handle</span>),
-  Position: {
-    Left: 'left',
-    Top: 'top',
-    Right: 'right',
-    Bottom: 'bottom',
-  },
-  useUpdateNodeInternals: jest.fn().mockImplementation(() => jest.fn()),
-}));
-
-describe('Test CustomNode Component', () => {
-  it('Check if CustomNode has all child elements', async () => {
-    const { container } = render(
-      <CustomNode
-        dragging={false}
-        xPos={0}
-        yPos={0}
-        zIndex={0}
-        {...mockCustomNodeProp}
-      />,
-      {
-        wrapper: MemoryRouter,
-      }
-    );
-
-    const nodeLabel = await findByTestId(container, 'node-label');
-    const tableColumns = await findAllByTestId(container, 'column');
-
-    expect(nodeLabel).toBeInTheDocument();
-    expect(tableColumns).toHaveLength(mockTableColumns.length);
-  });
-
-  it('Check if CustomNode has data columns as undefined', async () => {
-    const { container } = render(
-      <CustomNode
-        dragging={false}
-        xPos={0}
-        yPos={0}
-        zIndex={0}
-        {...mockCustomNodeProp}
-        data={{ ...mockCustomNodeProp.data, columns: undefined }}
-      />,
-      {
-        wrapper: MemoryRouter,
-      }
-    );
-
-    const nodeLabel = await findByTestId(container, 'node-label');
-    const labelSeparator = queryByTestId(container, 'label-separator');
-    const tableColumns = queryAllByTestId(container, 'column');
-
-    expect(nodeLabel).toBeInTheDocument();
-    expect(labelSeparator).not.toBeInTheDocument();
-    expect(tableColumns).toHaveLength(0);
-  });
-});
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/CustomNode.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/CustomNode.component.tsx
deleted file mode 100644
index ac1b4726221..00000000000
--- a/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/CustomNode.component.tsx
+++ /dev/null
@@ -1,192 +0,0 @@
-/*
- *  Copyright 2022 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.
- */
-
-import classNames from 'classnames';
-import { isEmpty } from 'lodash';
-import React, { CSSProperties, Fragment, useEffect } from 'react';
-import {
-  Handle,
-  HandleProps,
-  NodeProps,
-  Position,
-  useUpdateNodeInternals,
-} from 'reactflow';
-import { getEntityName } from 'utils/EntityUtils';
-import { EntityLineageNodeType } from '../../enums/entity.enum';
-import { getNodeRemoveButton } from '../../utils/EntityLineageUtils';
-import { getConstraintIcon } from '../../utils/TableUtils';
-import { ModifiedColumn } from './EntityLineage.interface';
-
-const handleStyles: CSSProperties = {
-  width: '20%',
-  height: '100%',
-  borderRadius: '3px',
-  position: 'absolute',
-  background: 'transparent',
-  border: 'none',
-};
-
-const leftHandleStyle: CSSProperties = {
-  ...handleStyles,
-  borderLeft: '5px solid #d9ceee',
-  left: -1,
-};
-
-const rightHandleStyle: CSSProperties = {
-  ...handleStyles,
-  borderRight: '5px solid #d9ceee',
-  right: -1,
-};
-
-const getHandle = (
-  nodeType: string,
-  isConnectable: HandleProps['isConnectable'],
-  id?: string
-) => {
-  if (nodeType === EntityLineageNodeType.OUTPUT) {
-    return (
-      <Handle
-        id={id}
-        isConnectable={isConnectable}
-        position={Position.Left}
-        style={leftHandleStyle}
-        type="target"
-      />
-    );
-  } else if (nodeType === EntityLineageNodeType.INPUT) {
-    return (
-      <Handle
-        id={id}
-        isConnectable={isConnectable}
-        position={Position.Right}
-        style={rightHandleStyle}
-        type="source"
-      />
-    );
-  } else if (nodeType === EntityLineageNodeType.NOT_CONNECTED) {
-    return null;
-  } else {
-    return (
-      <Fragment>
-        <Handle
-          id={id}
-          isConnectable={isConnectable}
-          position={Position.Left}
-          style={leftHandleStyle}
-          type="target"
-        />
-        <Handle
-          id={id}
-          isConnectable={isConnectable}
-          position={Position.Right}
-          style={rightHandleStyle}
-          type="source"
-        />
-      </Fragment>
-    );
-  }
-};
-
-const CustomNode = (props: NodeProps) => {
-  const updateNodeInternals = useUpdateNodeInternals();
-  const { data, type, isConnectable, selected, id } = props;
-  /* eslint-disable-next-line */
-  const {
-    label,
-    columns,
-    removeNodeHandler,
-    handleColumnClick,
-    isEditMode,
-    isExpanded,
-    isTraced,
-    selectedColumns = [],
-  } = data;
-
-  useEffect(() => {
-    updateNodeInternals(id);
-  }, [isEditMode, isExpanded]);
-
-  return (
-    <div className="nowheel custom-node">
-      {/* Node label could be simple text or reactNode */}
-      <div
-        className={classNames(
-          'custom-node-header',
-          selected || data.selected
-            ? 'custom-node-header-active'
-            : 'custom-node-header-normal',
-          { 'custom-node-header-tracing': isTraced }
-        )}
-        data-testid="node-label">
-        {getHandle(type, isConnectable)}
-        {label}{' '}
-        {selected && isEditMode
-          ? getNodeRemoveButton(() => {
-              removeNodeHandler?.(props);
-            })
-          : null}
-      </div>
-
-      {isExpanded && (
-        <div
-          className={classNames(
-            'custom-node-column-lineage',
-            selected || isTraced
-              ? 'custom-node-column-lineage-active'
-              : 'custom-node-column-lineage-normal',
-            {
-              'p-y-sm': !isEmpty(columns),
-            }
-          )}>
-          <section className="p-x-sm" id="table-columns">
-            <div className="custom-node-column-lineage-body">
-              {(Object.values(columns || {}) as ModifiedColumn[])?.map(
-                (column, index) => {
-                  const isColumnTraced = selectedColumns.includes(
-                    column.fullyQualifiedName
-                  );
-
-                  return (
-                    <div
-                      className={classNames(
-                        'custom-node-column-container',
-                        isColumnTraced
-                          ? 'custom-node-header-tracing'
-                          : 'custom-node-column-lineage-normal bg-white'
-                      )}
-                      data-testid="column"
-                      key={index}
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        handleColumnClick(column.fullyQualifiedName);
-                      }}>
-                      {getHandle(
-                        column.type,
-                        isConnectable,
-                        column.fullyQualifiedName
-                      )}
-                      {getConstraintIcon(column.constraint, 'tw-')}
-                      <p className="m-0">{getEntityName(column)}</p>
-                    </div>
-                  );
-                }
-              )}
-            </div>
-          </section>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default CustomNode;
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/CustomNodeV1.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/CustomNodeV1.component.tsx
index a51df8fc099..bcac6419c0f 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/CustomNodeV1.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/CustomNodeV1.component.tsx
@@ -103,8 +103,10 @@ const CustomNodeV1 = (props: NodeProps) => {
     updateNodeInternals(id);
     if (!isExpanded) {
       setShowAllColumns(false);
+    } else if (Object.values(columns).length < 5) {
+      setShowAllColumns(true);
     }
-  }, [isEditMode, isExpanded]);
+  }, [isEditMode, isExpanded, columns]);
 
   useEffect(() => {
     if (!isEmpty(columns)) {
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/EntityLineage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/EntityLineage.component.tsx
index 269273534e7..8694be24ebc 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/EntityLineage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/EntityLineage.component.tsx
@@ -38,7 +38,6 @@ import { useHistory, useParams } from 'react-router-dom';
 import ReactFlow, {
   addEdge,
   Background,
-  BackgroundVariant,
   Connection,
   Edge,
   getConnectedEdges,
@@ -1628,7 +1627,7 @@ const EntityLineageComponent: FunctionComponent<EntityLineageProp> = ({
             onPaneClick={onPaneClick}>
             {updatedLineageData && (
               <CustomControlsComponent
-                className="absolute top-1 right-1 bottom-full"
+                className="absolute top-1 right-1 bottom-full p-md"
                 deleted={deleted}
                 fitViewParams={{
                   minZoom: MIN_ZOOM_VALUE,
@@ -1654,9 +1653,7 @@ const EntityLineageComponent: FunctionComponent<EntityLineageProp> = ({
                 onOptionSelect={handleOptionSelect}
               />
             )}
-            {isEditMode && (
-              <Background gap={12} size={1} variant={BackgroundVariant.Lines} />
-            )}
+            <Background gap={12} size={1} />
           </ReactFlow>
         </ReactFlowProvider>
       </div>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/custom-node.less b/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/custom-node.less
index 0b87b091b20..509ed82f040 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/custom-node.less
+++ b/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/custom-node.less
@@ -23,6 +23,13 @@
   color: inherit;
 }
 
+.ant-btn.ant-btn-background-ghost.expand-btn {
+  background-color: white;
+  &:hover {
+    background-color: white;
+  }
+}
+
 .lineage-node-content {
   margin: 1px;
 }
@@ -89,6 +96,9 @@
     background: @primary-color-hover;
     border-top: 1px solid @border-color;
   }
+  .custom-node-header-tracing {
+    border: none;
+  }
 }
 
 .react-flow__handle.connectable {
@@ -113,6 +123,23 @@
   top: 38px; // Need to show handles on top half
 }
 
+.react-flow .lineage-column-node-handle {
+  width: 20px;
+  border-radius: 0;
+  border-color: @border-color;
+  background: @white;
+  top: 0;
+  height: 27px;
+  transform: none;
+  border: none;
+  &.react-flow__handle-left {
+    left: 0;
+  }
+  &.react-flow__handle-right {
+    right: 0;
+  }
+}
+
 .custom-node-column-container {
   display: flex;
   align-items: center;
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/entityLineage.style.less b/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/entityLineage.style.less
index 9ad7bbbca94..0855e7b5ac4 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/entityLineage.style.less
+++ b/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/entityLineage.style.less
@@ -31,7 +31,7 @@
 }
 
 .custom-node-header-tracing {
-  border-color: @primary-color;
+  border: 1px solid @primary-color;
   .react-flow__handle {
     border-color: @primary-color;
   }
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryHeader/GlossaryHeader.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryHeader/GlossaryHeader.component.tsx
index 532905698ab..ad9d2a919dc 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryHeader/GlossaryHeader.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryHeader/GlossaryHeader.component.tsx
@@ -14,7 +14,7 @@ import Icon, { DownOutlined } from '@ant-design/icons';
 import { Button, Col, Dropdown, Row, Space, Tooltip, Typography } from 'antd';
 import { ItemType } from 'antd/lib/menu/hooks/useItems';
 import { ReactComponent as EditIcon } from 'assets/svg/edit-new.svg';
-import { ReactComponent as IconFolder } from 'assets/svg/folder.svg';
+import { ReactComponent as GlossaryIcon } from 'assets/svg/glossary.svg';
 import { ReactComponent as ExportIcon } from 'assets/svg/ic-export.svg';
 import { ReactComponent as IconFlatDoc } from 'assets/svg/ic-flat-doc.svg';
 import { ReactComponent as ImportIcon } from 'assets/svg/ic-import.svg';
@@ -322,7 +322,7 @@ const GlossaryHeader = ({
             entityType={EntityType.GLOSSARY_TERM}
             icon={
               isGlossary ? (
-                <IconFolder
+                <GlossaryIcon
                   color={DE_ACTIVE_COLOR}
                   height={36}
                   name="folder"
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Tag/Tags/tags.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Tag/Tags/tags.tsx
index b0c6ee607ef..e73481abde1 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Tag/Tags/tags.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Tag/Tags/tags.tsx
@@ -12,6 +12,7 @@
  */
 
 import { Tag, Tooltip, Typography } from 'antd';
+import { ReactComponent as IconTag } from 'assets/svg/classification.svg';
 import classNames from 'classnames';
 import { FQN_SEPARATOR_CHAR } from 'constants/char.constants';
 import { ROUTES } from 'constants/constants';
@@ -21,7 +22,6 @@ import { useHistory } from 'react-router-dom';
 import { getTagDisplay, getTagTooltip } from 'utils/TagsUtils';
 import { ReactComponent as IconPage } from '../../../assets/svg/ic-flat-doc.svg';
 import { ReactComponent as PlusIcon } from '../../../assets/svg/plus-primary.svg';
-import { ReactComponent as IconTag } from '../../../assets/svg/tag-grey.svg';
 
 import { TAG_START_WITH } from 'constants/Tag.constants';
 import { TagProps } from './tags.interface';
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsV1/TagsV1.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsV1/TagsV1.component.tsx
index 14355e0d345..534d193e94d 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsV1/TagsV1.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsV1/TagsV1.component.tsx
@@ -19,9 +19,9 @@ import React, { useCallback, useMemo } from 'react';
 import { useHistory } from 'react-router-dom';
 import { getTagDisplay, getTagTooltip } from 'utils/TagsUtils';
 
+import { ReactComponent as IconTag } from 'assets/svg/classification.svg';
 import { reduceColorOpacity } from 'utils/CommonUtils';
 import { ReactComponent as IconPage } from '../../../assets/svg/ic-flat-doc.svg';
-import { ReactComponent as IconTag } from '../../../assets/svg/tag-grey.svg';
 import { TagsV1Props } from './TagsV1.interface';
 import './tagsV1.less';
 
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/SummaryTagsDescription/SummaryTagsDescription.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/SummaryTagsDescription/SummaryTagsDescription.component.tsx
index 8851b46c60b..18cd2eaf3a8 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/SummaryTagsDescription/SummaryTagsDescription.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/SummaryTagsDescription/SummaryTagsDescription.component.tsx
@@ -11,12 +11,12 @@
  *  limitations under the License.
  */
 import { Col, Divider, Row, Typography } from 'antd';
+import { ReactComponent as TagIcon } from 'assets/svg/classification.svg';
 import { EntityUnion } from 'components/Explore/explore.interface';
 import TagsViewer from 'components/Tag/TagsViewer/tags-viewer';
 import { TagLabel } from 'generated/type/tagLabel';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { ReactComponent as TagIcon } from '../../../assets/svg/tag-grey.svg';
 import RichTextEditorPreviewer from '../rich-text-editor/RichTextEditorPreviewer';
 
 const SummaryTagsDescription = ({
diff --git a/openmetadata-ui/src/main/resources/ui/src/constants/PageHeaders.constant.ts b/openmetadata-ui/src/main/resources/ui/src/constants/PageHeaders.constant.ts
index 593f7f1e418..65960550519 100644
--- a/openmetadata-ui/src/main/resources/ui/src/constants/PageHeaders.constant.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/constants/PageHeaders.constant.ts
@@ -55,7 +55,7 @@ export const PAGE_HEADERS = {
     subHeader: i18n.t('message.page-sub-header-for-databases'),
   },
   MESSAGING_SERVICES: {
-    header: i18n.t('label.messaging-plural'),
+    header: i18n.t('label.messaging'),
     subHeader: i18n.t('message.page-sub-header-for-messagings'),
   },
   DASHBOARD_SERVICES: {
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/Glossary/GlossaryLeftPanel/GlossaryLeftPanel.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/Glossary/GlossaryLeftPanel/GlossaryLeftPanel.component.tsx
index 9e9894eb36d..83aff0a784b 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/Glossary/GlossaryLeftPanel/GlossaryLeftPanel.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/Glossary/GlossaryLeftPanel/GlossaryLeftPanel.component.tsx
@@ -13,7 +13,7 @@
 
 import { Button, Col, Menu, MenuProps, Row, Typography } from 'antd';
 import { ItemType } from 'antd/lib/menu/hooks/useItems';
-import { ReactComponent as IconFolder } from 'assets/svg/folder.svg';
+import { ReactComponent as GlossaryIcon } from 'assets/svg/glossary.svg';
 import { ReactComponent as PlusIcon } from 'assets/svg/plus-primary.svg';
 import LeftPanelCard from 'components/common/LeftPanelCard/LeftPanelCard';
 import { usePermissionProvider } from 'components/PermissionProvider/PermissionProvider';
@@ -56,7 +56,7 @@ const GlossaryLeftPanel = ({ glossaries }: GlossaryLeftPanelProps) => {
         {
           key: glossary.name,
           label: getEntityName(glossary),
-          icon: <IconFolder height={16} width={16} />,
+          icon: <GlossaryIcon height={16} width={16} />,
         },
       ];
     }, [] as ItemType[]);
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TagsPage/TagsPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TagsPage/TagsPage.tsx
index 4630a73f838..efecf86b6ae 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TagsPage/TagsPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TagsPage/TagsPage.tsx
@@ -23,10 +23,10 @@ import {
   Typography,
 } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
+import { ReactComponent as IconTag } from 'assets/svg/classification.svg';
 import { ReactComponent as LockIcon } from 'assets/svg/closed-lock.svg';
 import { ReactComponent as IconDisableTag } from 'assets/svg/disable-tag.svg';
 import { ReactComponent as EditIcon } from 'assets/svg/edit-new.svg';
-import { ReactComponent as IconTag } from 'assets/svg/tag-grey.svg';
 import { AxiosError } from 'axios';
 import AppBadge from 'components/common/Badge/Badge.component';
 import Description from 'components/common/description/Description';
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/app.less b/openmetadata-ui/src/main/resources/ui/src/styles/app.less
index 2b7295dafc4..1a50b603bf4 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/app.less
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/app.less
@@ -404,6 +404,9 @@ a[href].link-text-grey,
 // lineage
 .lineage-card {
   height: calc(100vh - 240px);
+  > .ant-card-body {
+    padding: 0;
+  }
 }
 
 // Multiple label in a field with required
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/temp.css b/openmetadata-ui/src/main/resources/ui/src/styles/temp.css
index 554e34edaf9..e9091d0b1c5 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/temp.css
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/temp.css
@@ -842,7 +842,6 @@ body .list-option.rdw-option-active {
   display: none;
   border-right: 1px solid #d9ceee;
   transition: transform 0.3s ease-out;
-  margin-left: -16px;
 }
 
 .entity-lineage.sidebar.open {
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/x-master.css b/openmetadata-ui/src/main/resources/ui/src/styles/x-master.css
index 53caeb00098..f61bbf7edd8 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/x-master.css
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/x-master.css
@@ -691,11 +691,6 @@ body .profiler-graph .recharts-active-dot circle {
 .react-flow__node {
   min-width: max-content;
 }
-.react-flow__background {
-  background-image: url('../assets/img/graph-bg.png');
-  background-repeat: repeat;
-}
-
 .leaf-node .react-flow__handle {
   background-color: #6b7280;
 }
diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/SvgUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/SvgUtils.tsx
index fcc87a4de83..375b7ab66c7 100644
--- a/openmetadata-ui/src/main/resources/ui/src/utils/SvgUtils.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/SvgUtils.tsx
@@ -11,7 +11,6 @@
  *  limitations under the License.
  */
 
-import IconFlatFolder from 'assets/svg/folder.svg';
 import IconFlatDoc from 'assets/svg/ic-flat-doc.svg';
 import { omit } from 'lodash';
 import React, { FunctionComponent } from 'react';
@@ -1165,10 +1164,6 @@ const SVGIcons: FunctionComponent<Props> = ({ icon, ...props }: Props) => {
     case Icons.CONTAINER:
       IconComponent = IconContainer;
 
-      break;
-    case Icons.FLAT_FOLDER:
-      IconComponent = IconFlatFolder;
-
       break;
     case Icons.FLAT_DOC:
       IconComponent = IconFlatDoc;
diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/TableUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/TableUtils.tsx
index 10a864f13f2..89e0a5b7030 100644
--- a/openmetadata-ui/src/main/resources/ui/src/utils/TableUtils.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/TableUtils.tsx
@@ -14,9 +14,9 @@
 import Icon from '@ant-design/icons';
 import { Tooltip } from 'antd';
 import { ExpandableConfig } from 'antd/lib/table/interface';
-import { ReactComponent as IconFlatFolder } from 'assets/svg/folder.svg';
+import { ReactComponent as ClassificationIcon } from 'assets/svg/classification.svg';
+import { ReactComponent as GlossaryIcon } from 'assets/svg/glossary.svg';
 import { ReactComponent as ContainerIcon } from 'assets/svg/ic-storage.svg';
-import { ReactComponent as IconTag } from 'assets/svg/tag-grey.svg';
 import classNames from 'classnames';
 import { SourceType } from 'components/searched-data/SearchedData.interface';
 import { t } from 'i18next';
@@ -275,11 +275,11 @@ export const getEntityLink = (
 
 export const getServiceIcon = (source: SourceType) => {
   if (source.entityType === EntityType.GLOSSARY_TERM) {
-    return (
-      <IconFlatFolder className="h-7" style={{ color: DE_ACTIVE_COLOR }} />
-    );
+    return <GlossaryIcon className="h-7" style={{ color: DE_ACTIVE_COLOR }} />;
   } else if (source.entityType === EntityType.TAG) {
-    return <IconTag className="h-7" style={{ color: DE_ACTIVE_COLOR }} />;
+    return (
+      <ClassificationIcon className="h-7" style={{ color: DE_ACTIVE_COLOR }} />
+    );
   } else {
     return (
       <img