Merge pull request #129 from karthikjeeyar/fix-label-position

fix: bring node labels to top layer on hover
patternfly · Jan 25, 2024 · d374319 · d374319
2 parents 4f416c8 + c5931bb
commit d374319
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 55 deletions.
diff --git a/packages/module/src/components/groups/DefaultGroupExpanded.tsx b/packages/module/src/components/groups/DefaultGroupExpanded.tsx
@@ -7,7 +7,7 @@ import styles from '../../css/topology-components';
 import CollapseIcon from '@patternfly/react-icons/dist/esm/icons/compress-alt-icon';
 import NodeLabel from '../nodes/labels/NodeLabel';
 import { Layer } from '../layers';
-import { GROUPS_LAYER } from '../../const';
+import { GROUPS_LAYER, TOP_LAYER } from '../../const';
 import { hullPath, maxPadding, useCombineRefs, useHover } from '../../utils';
 import { BadgeLocation, isGraph, Node, NodeShape, NodeStyle, PointTuple } from '../../types';
 import {
@@ -195,33 +195,35 @@ const DefaultGroupExpanded: React.FunctionComponent<DefaultGroupExpandedProps> =
         </g>
       </Layer>
       {showLabel && (label || element.getLabel()) && (
-        <NodeLabel
-          className={styles.topologyGroupLabel}
-          x={labelLocation.current[0]}
-          y={labelLocation.current[1] + (hulledOutline ? hullPadding(labelLocation.current) : 0) + 24}
-          paddingX={8}
-          paddingY={5}
-          dragRef={dragNodeRef ? dragLabelRef : undefined}
-          status={element.getNodeStatus()}
-          secondaryLabel={secondaryLabel}
-          truncateLength={truncateLength}
-          badge={badge}
-          badgeColor={badgeColor}
-          badgeTextColor={badgeTextColor}
-          badgeBorderColor={badgeBorderColor}
-          badgeClassName={badgeClassName}
-          badgeLocation={badgeLocation}
-          labelIconClass={labelIconClass}
-          labelIcon={labelIcon}
-          labelIconPadding={labelIconPadding}
-          onContextMenu={onContextMenu}
-          contextMenuOpen={contextMenuOpen}
-          hover={isHover || labelHover}
-          actionIcon={collapsible ? <CollapseIcon /> : undefined}
-          onActionIconClick={() => onCollapseChange(element, true)}
-        >
-          {label || element.getLabel()}
-        </NodeLabel>
+        <Layer id={isHover ? TOP_LAYER : undefined}>
+          <NodeLabel
+            className={styles.topologyGroupLabel}
+            x={labelLocation.current[0]}
+            y={labelLocation.current[1] + (hulledOutline ? hullPadding(labelLocation.current) : 0) + 24}
+            paddingX={8}
+            paddingY={5}
+            dragRef={dragNodeRef ? dragLabelRef : undefined}
+            status={element.getNodeStatus()}
+            secondaryLabel={secondaryLabel}
+            truncateLength={truncateLength}
+            badge={badge}
+            badgeColor={badgeColor}
+            badgeTextColor={badgeTextColor}
+            badgeBorderColor={badgeBorderColor}
+            badgeClassName={badgeClassName}
+            badgeLocation={badgeLocation}
+            labelIconClass={labelIconClass}
+            labelIcon={labelIcon}
+            labelIconPadding={labelIconPadding}
+            onContextMenu={onContextMenu}
+            contextMenuOpen={contextMenuOpen}
+            hover={isHover || labelHover}
+            actionIcon={collapsible ? <CollapseIcon /> : undefined}
+            onActionIconClick={() => onCollapseChange(element, true)}
+          >
+            {label || element.getLabel()}
+          </NodeLabel>
+        </Layer>
       )}
     </g>
   );

diff --git a/packages/module/src/components/nodes/DefaultNode.tsx b/packages/module/src/components/nodes/DefaultNode.tsx
@@ -17,6 +17,8 @@ import {
 } from '../../types';
 import { ConnectDragSource, ConnectDropTarget, OnSelect, WithDndDragProps } from '../../behavior';
 import Decorator from '../decorators/Decorator';
+import { Layer } from '../layers';
+import { TOP_LAYER } from '../../const';
 import { createSvgIdUrl, StatusModifier, useCombineRefs, useHover } from '../../utils';
 import NodeLabel from './labels/NodeLabel';
 import NodeShadows, { NODE_SHADOW_FILTER_ID_DANGER, NODE_SHADOW_FILTER_ID_HOVER } from './NodeShadows';
@@ -340,33 +342,35 @@ const DefaultNodeInner: React.FunctionComponent<DefaultNodeInnerProps> = observe
           />
         )}
         {showLabel && (label || element.getLabel()) && (
-          <g transform={`scale(${labelScale})`}>
-            <NodeLabel
-              className={css(styles.topologyNodeLabel, labelClassName)}
-              x={(nodeLabelPosition === LabelPosition.right ? width + 8 : width / 2) * labelPositionScale}
-              y={(nodeLabelPosition === LabelPosition.right ? height / 2 : height + 6) * labelPositionScale}
-              position={nodeLabelPosition}
-              paddingX={8}
-              paddingY={4}
-              secondaryLabel={secondaryLabel}
-              truncateLength={truncateLength}
-              status={status}
-              badge={badge}
-              badgeColor={badgeColor}
-              badgeTextColor={badgeTextColor}
-              badgeBorderColor={badgeBorderColor}
-              badgeClassName={badgeClassName}
-              badgeLocation={badgeLocation}
-              onContextMenu={onContextMenu}
-              contextMenuOpen={contextMenuOpen}
-              hover={isHover}
-              labelIconClass={labelIconClass}
-              labelIcon={labelIcon}
-              labelIconPadding={labelIconPadding}
-            >
-              {label || element.getLabel()}
-            </NodeLabel>
-          </g>
+          <Layer id={isHover ? TOP_LAYER : undefined}>
+            <g transform={`scale(${labelScale})`}>
+              <NodeLabel
+                className={css(styles.topologyNodeLabel, labelClassName)}
+                x={(nodeLabelPosition === LabelPosition.right ? width + 8 : width / 2) * labelPositionScale}
+                y={(nodeLabelPosition === LabelPosition.right ? height / 2 : height + 6) * labelPositionScale}
+                position={nodeLabelPosition}
+                paddingX={8}
+                paddingY={4}
+                secondaryLabel={secondaryLabel}
+                truncateLength={truncateLength}
+                status={status}
+                badge={badge}
+                badgeColor={badgeColor}
+                badgeTextColor={badgeTextColor}
+                badgeBorderColor={badgeBorderColor}
+                badgeClassName={badgeClassName}
+                badgeLocation={badgeLocation}
+                onContextMenu={onContextMenu}
+                contextMenuOpen={contextMenuOpen}
+                hover={isHover}
+                labelIconClass={labelIconClass}
+                labelIcon={labelIcon}
+                labelIconPadding={labelIconPadding}
+              >
+                {label || element.getLabel()}
+              </NodeLabel>
+            </g>
+          </Layer>
         )}
         {children}
       </g>