Fully expand node title when selected and fix selection styling

KaotoIO · Oct 11, 2024 · be56339 · be56339
1 parent 3c68a4b
commit be56339
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 3 deletions.
diff --git a/packages/ui/src/components/Visualization/Custom/Node/CustomNode.scss b/packages/ui/src/components/Visualization/Custom/Node/CustomNode.scss
@@ -1,3 +1,5 @@
+/* stylelint-disable */
+
 .custom-node {
   &__image {
     display: flex;
@@ -21,8 +23,23 @@
   }
 }
 
-/* stylelint-disable-next-line selector-class-pattern */
 .custom-node__label--disabled {
   font-style: italic;
   text-decoration: line-through;
 }
+
+.custom-node__label {
+  z-index: 20;
+}
+
+/* Ensure selected state has higher specificity */
+.custom-node__label--selected, .custom-node__label--selected:hover {
+  --pf-topology__node__label__background--Stroke: var(--pf-topology__node--m-selected--node__label__background--Stroke);
+  --pf-topology__node__label__background--Fill: var(--pf-topology__node--m-selected--node__label__background--Fill);
+  --pf-topology__node__separator--Stroke: var(--pf-topology__node--m-selected--node__label__text--m-secondary--Fill);
+  --pf-topology__node__action-icon__icon--Color: var(--pf-topology__node--m-selected--action-icon__icon--Color);
+  --pf-topology__node__label__text--Fill: var(--pf-topology__node--m-selected--node__label__text--Fill);
+  --pf-topology__node__label__text--m-secondary--Fill: var(--pf-topology__node--m-selected--node__label__text--m-secondary--Fill);
+
+  z-index: 50;
+}
diff --git a/packages/ui/src/components/Visualization/Custom/Node/CustomNode.tsx b/packages/ui/src/components/Visualization/Custom/Node/CustomNode.tsx
@@ -5,8 +5,10 @@ import {
   DefaultNode,
   Node,
   NodeStatus,
+  ScaleDetailsLevel,
   WithSelectionProps,
   observer,
+  useSelection,
   withContextMenu,
   withSelection,
 } from '@patternfly/react-topology';
@@ -32,13 +34,19 @@ const CustomNode: FunctionComponent<CustomNodeProps> = observer(({ element, ...r
   const tooltipContent = vizNode?.getTooltipContent();
   const statusDecoratorTooltip = vizNode?.getNodeValidationText();
   const nodeStatus = !statusDecoratorTooltip || isDisabled ? NodeStatus.default : NodeStatus.warning;
+  const detailsLevel = element.getGraph().getDetailsLevel();
+  const [selected] = useSelection();
 
   return (
     <DefaultNode
       {...rest}
       element={element}
-      label={doTruncateLabel(label)}
-      labelClassName={clsx('custom-node__label', { 'custom-node__label--disabled': isDisabled })}
+      label={selected ? label : doTruncateLabel(label)}
+      scaleLabel={detailsLevel !== ScaleDetailsLevel.low}
+      labelClassName={clsx('custom-node__label', {
+        'custom-node__label--disabled': isDisabled,
+        'custom-node__label--selected': selected,
+      })}
       showStatusDecorator={!isDisabled}
       statusDecoratorTooltip={statusDecoratorTooltip}
       nodeStatus={nodeStatus}