Merge pull request #125 from jeff-phillips-18/node-details-scale

fix: reduce node details when at low scale
patternfly · Dec 13, 2023 · 4f416c8 · 4f416c8
2 parents bf94564 + e18751c
commit 4f416c8
Show file tree

Hide file tree

Showing 6 changed files with 6 additions and 11 deletions.
diff --git a/packages/demo-app-ts/src/components/DemoFinallyNode.tsx b/packages/demo-app-ts/src/components/DemoFinallyNode.tsx
@@ -7,7 +7,6 @@ import {
   Layer,
   ScaleDetailsLevel,
   TOP_LAYER,
-  useDetailsLevel,
   useHover,
   WithContextMenuProps,
   WithSelectionProps
@@ -19,7 +18,7 @@ type DemoFinallyNodeProps = {
 
 const DemoFinallyNode: React.FunctionComponent<DemoFinallyNodeProps> = ({ ...props }) => {
   const [hover, hoverRef] = useHover();
-  const detailsLevel = useDetailsLevel();
+  const detailsLevel = props.element.getGraph().getDetailsLevel();
 
   return (
     <Layer id={detailsLevel !== ScaleDetailsLevel.high && hover ? TOP_LAYER : DEFAULT_LAYER}>

diff --git a/packages/demo-app-ts/src/components/DemoTaskNode.tsx b/packages/demo-app-ts/src/components/DemoTaskNode.tsx
@@ -9,7 +9,6 @@ import {
   ScaleDetailsLevel,
   TaskNode,
   TOP_LAYER,
-  useDetailsLevel,
   useHover,
   WhenDecorator,
   WithContextMenuProps,
@@ -33,7 +32,7 @@ const DemoTaskNode: React.FunctionComponent<DemoTaskNodeProps> = ({
   const nodeElement = element as Node;
   const data = element.getData();
   const [hover, hoverRef] = useHover();
-  const detailsLevel = useDetailsLevel();
+  const detailsLevel = element.getGraph().getDetailsLevel();
 
   const passedData = React.useMemo(() => {
     const newData = { ...data };

diff --git a/packages/demo-app-ts/src/components/StyleGroup.tsx b/packages/demo-app-ts/src/components/StyleGroup.tsx
@@ -12,7 +12,6 @@ import {
 } from '@patternfly/react-topology';
 import AlternateIcon from '@patternfly/react-icons/dist/esm/icons/regions-icon';
 import DefaultIcon from '@patternfly/react-icons/dist/esm/icons/builder-image-icon';
-import useDetailsLevel from '@patternfly/react-topology/dist/esm/hooks/useDetailsLevel';
 
 const ICON_PADDING = 20;
 
@@ -43,7 +42,7 @@ const StyleGroup: React.FunctionComponent<StyleGroupProps> = ({
 }) => {
   const groupElement = element as Node;
   const data = element.getData();
-  const detailsLevel = useDetailsLevel();
+  const detailsLevel = element.getGraph().getDetailsLevel();
 
   const getTypeIcon = (dataType?: DataTypes): any => {
     switch (dataType) {

diff --git a/packages/demo-app-ts/src/components/StyleNode.tsx b/packages/demo-app-ts/src/components/StyleNode.tsx
@@ -27,7 +27,6 @@ import FolderOpenIcon from '@patternfly/react-icons/dist/esm/icons/folder-open-i
 import BlueprintIcon from '@patternfly/react-icons/dist/esm/icons/blueprint-icon';
 import PauseCircle from '@patternfly/react-icons/dist/esm/icons/pause-circle-icon';
 import Thumbtack from '@patternfly/react-icons/dist/esm/icons/thumbtack-icon';
-import useDetailsLevel from '@patternfly/react-topology/dist/esm/hooks/useDetailsLevel';
 import { SVGIconProps } from '@patternfly/react-icons/dist/esm/createIcon';
 
 export enum DataTypes {
@@ -134,7 +133,7 @@ const StyleNode: React.FunctionComponent<StyleNodeProps> = ({
 }) => {
   const nodeElement = element as Node;
   const data = element.getData();
-  const detailsLevel = useDetailsLevel();
+  const detailsLevel = element.getGraph().getDetailsLevel();
   const [hover, hoverRef] = useHover();
 
   const passedData = React.useMemo(() => {

diff --git a/packages/demo-app-ts/src/utils/useDemoPipelineNodes.tsx b/packages/demo-app-ts/src/utils/useDemoPipelineNodes.tsx
@@ -262,7 +262,7 @@ export const useDemoPipelineNodes = (
       taskIconTooltip: showIcons ? 'Environment' : undefined,
       showContextMenu,
       columnGroup: TASK_STATUSES.length % STATUS_PER_ROW + 1,
-      showStatusState: false,
+      showStatusState: true,
       leadIcon: <ExternalLinkAltIcon width={16} height={16} />,
     };
 

diff --git a/packages/module/src/pipelines/components/nodes/TaskNode.tsx b/packages/module/src/pipelines/components/nodes/TaskNode.tsx
@@ -22,7 +22,6 @@ import NodeShadows, {
 } from '../../../components/nodes/NodeShadows';
 import LabelBadge from '../../../components/nodes/labels/LabelBadge';
 import LabelIcon from '../../../components/nodes/labels/LabelIcon';
-import useDetailsLevel from '../../../hooks/useDetailsLevel';
 import { useScaleNode } from '../../../hooks';
 
 const STATUS_ICON_SIZE = 16;
@@ -169,7 +168,7 @@ const TaskNodeInner: React.FC<TaskNodeInnerProps> = observer(({
   const badgeLabelTriggerRef = React.useRef();
   const [actionSize, actionRef] = useSize([actionIcon, paddingX]);
   const [contextSize, contextRef] = useSize([onContextMenu, paddingX]);
-  const detailsLevel = useDetailsLevel();
+  const detailsLevel = element.getGraph().getDetailsLevel();
 
   if (badgePopoverProps) {
     // eslint-disable-next-line no-console