From 41d87e49d2f3138cf5a11305ade0dbbc2ba3cf46 Mon Sep 17 00:00:00 2001 From: Jenny <32821331+jenny-s51@users.noreply.github.com> Date: Fri, 12 Apr 2024 10:23:36 -0400 Subject: [PATCH] Revert "feat(pipelines): Add ability to scale collapsed pipeline groups (#173)" This reverts commit 3c689e94a1ff39981522f9a3106ac4926cc30aa4. --- .../pipelineGroupsDemo/DemoTaskGroup.tsx | 61 +++++++++------- .../TaskGroupSourceAnchor.ts | 8 +-- .../TaskGroupTargetAnchor.ts | 8 +-- .../src/pipelines/components/anchors/index.ts | 2 - .../components/groups/DefaultTaskGroup.tsx | 72 ++++++------------- .../groups/DefaultTaskGroupCollapsed.tsx | 34 ++++++--- .../groups/DefaultTaskGroupExpanded.tsx | 59 ++++++++------- .../src/pipelines/components/groups/index.ts | 4 +- .../pipelines/components/nodes/TaskNode.tsx | 22 ++---- 9 files changed, 131 insertions(+), 139 deletions(-) rename packages/{module/src/pipelines/components/anchors => demo-app-ts/src/demos/pipelineGroupsDemo}/TaskGroupSourceAnchor.ts (61%) rename packages/{module/src/pipelines/components/anchors => demo-app-ts/src/demos/pipelineGroupsDemo}/TaskGroupTargetAnchor.ts (61%) diff --git a/packages/demo-app-ts/src/demos/pipelineGroupsDemo/DemoTaskGroup.tsx b/packages/demo-app-ts/src/demos/pipelineGroupsDemo/DemoTaskGroup.tsx index 31c4315e..86993844 100644 --- a/packages/demo-app-ts/src/demos/pipelineGroupsDemo/DemoTaskGroup.tsx +++ b/packages/demo-app-ts/src/demos/pipelineGroupsDemo/DemoTaskGroup.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { observer } from 'mobx-react'; import { + AnchorEnd, DagreLayoutOptions, DefaultTaskGroup, GraphElement, @@ -8,18 +9,27 @@ import { LabelPosition, Node, TOP_TO_BOTTOM, + useAnchor, + WithContextMenuProps, WithSelectionProps, + ShapeProps, + WithDragNodeProps, EdgeCreationTypes, - useHover, - ScaleDetailsLevel, - DEFAULT_LAYER, - Layer, - TOP_LAYER, GROUPS_LAYER } from '@patternfly/react-topology'; +import TaskGroupSourceAnchor from './TaskGroupSourceAnchor'; +import TaskGroupTargetAnchor from './TaskGroupTargetAnchor'; type DemoTaskGroupProps = { element: GraphElement; -} & WithSelectionProps; + collapsible?: boolean; + collapsedWidth?: number; + collapsedHeight?: number; + onCollapseChange?: (group: Node, collapsed: boolean) => void; + getCollapsedShape?: (node: Node) => React.FunctionComponent; + collapsedShadowOffset?: number; // defaults to 10 +} & WithContextMenuProps & + WithDragNodeProps & + WithSelectionProps; export const DEFAULT_TASK_WIDTH = 180; export const DEFAULT_TASK_HEIGHT = 32; @@ -31,32 +41,29 @@ const getEdgeCreationTypes = (): EdgeCreationTypes => ({ const DemoTaskGroup: React.FunctionComponent = ({ element, ...rest }) => { const verticalLayout = (element.getGraph().getLayoutOptions?.() as DagreLayoutOptions)?.rankdir === TOP_TO_BOTTOM; - const [hover, hoverRef] = useHover(); - const detailsLevel = element.getGraph().getDetailsLevel(); + useAnchor( + React.useCallback((node: Node) => new TaskGroupSourceAnchor(node, verticalLayout), [verticalLayout]), + AnchorEnd.source + ); + useAnchor( + React.useCallback((node: Node) => new TaskGroupTargetAnchor(node, verticalLayout), [verticalLayout]), + AnchorEnd.target + ); if (!isNode(element)) { return null; } - const groupLayer = element.isCollapsed() ? DEFAULT_LAYER : GROUPS_LAYER; - return ( - - - - - + ); }; diff --git a/packages/module/src/pipelines/components/anchors/TaskGroupSourceAnchor.ts b/packages/demo-app-ts/src/demos/pipelineGroupsDemo/TaskGroupSourceAnchor.ts similarity index 61% rename from packages/module/src/pipelines/components/anchors/TaskGroupSourceAnchor.ts rename to packages/demo-app-ts/src/demos/pipelineGroupsDemo/TaskGroupSourceAnchor.ts index ab9e4e6e..c082428b 100644 --- a/packages/module/src/pipelines/components/anchors/TaskGroupSourceAnchor.ts +++ b/packages/demo-app-ts/src/demos/pipelineGroupsDemo/TaskGroupSourceAnchor.ts @@ -1,11 +1,9 @@ -import { AbstractAnchor } from '../../../anchors'; -import { Point } from '../../../geom'; -import { Node } from '../../../types'; +import { AbstractAnchor, Point, Node } from '@patternfly/react-topology'; -export default class TaskGroupSourceAnchor extends AbstractAnchor { +export default class TaskGroupSourceAnchor extends AbstractAnchor { private vertical = false; - constructor(owner: Node, vertical: boolean = true) { + constructor(owner: E, vertical: boolean = true) { super(owner); this.vertical = vertical; } diff --git a/packages/module/src/pipelines/components/anchors/TaskGroupTargetAnchor.ts b/packages/demo-app-ts/src/demos/pipelineGroupsDemo/TaskGroupTargetAnchor.ts similarity index 61% rename from packages/module/src/pipelines/components/anchors/TaskGroupTargetAnchor.ts rename to packages/demo-app-ts/src/demos/pipelineGroupsDemo/TaskGroupTargetAnchor.ts index b2005ccf..c349cf72 100644 --- a/packages/module/src/pipelines/components/anchors/TaskGroupTargetAnchor.ts +++ b/packages/demo-app-ts/src/demos/pipelineGroupsDemo/TaskGroupTargetAnchor.ts @@ -1,11 +1,9 @@ -import { AbstractAnchor } from '../../../anchors'; -import { Node } from '../../../types'; -import { Point } from '../../../geom'; +import { AbstractAnchor, Point, Node } from '@patternfly/react-topology'; -export default class TaskGroupTargetAnchor extends AbstractAnchor { +export default class TaskGroupTargetAnchor extends AbstractAnchor { private vertical = false; - constructor(owner: Node, vertical = false) { + constructor(owner: E, vertical = false) { super(owner); this.vertical = vertical; } diff --git a/packages/module/src/pipelines/components/anchors/index.ts b/packages/module/src/pipelines/components/anchors/index.ts index f2b36405..6151e954 100644 --- a/packages/module/src/pipelines/components/anchors/index.ts +++ b/packages/module/src/pipelines/components/anchors/index.ts @@ -1,4 +1,2 @@ export { default as TaskNodeSourceAnchor } from './TaskNodeSourceAnchor'; export { default as TaskNodeTargetAnchor } from './TaskNodeTargetAnchor'; -export { default as TaskGroupSourceAnchor } from './TaskGroupSourceAnchor'; -export { default as TaskGroupTargetAnchor } from './TaskGroupTargetAnchor'; diff --git a/packages/module/src/pipelines/components/groups/DefaultTaskGroup.tsx b/packages/module/src/pipelines/components/groups/DefaultTaskGroup.tsx index 16700adf..695827f8 100644 --- a/packages/module/src/pipelines/components/groups/DefaultTaskGroup.tsx +++ b/packages/module/src/pipelines/components/groups/DefaultTaskGroup.tsx @@ -1,28 +1,22 @@ import * as React from 'react'; import { observer } from 'mobx-react'; -import { - OnSelect, - WithDndDragProps, - ConnectDragSource, - ConnectDropTarget, -} from '../../../behavior'; +import { OnSelect, WithDndDragProps, ConnectDragSource, ConnectDropTarget, WithSelectionProps } from '../../../behavior'; import { ShapeProps } from '../../../components'; import { Dimensions } from '../../../geom'; import { GraphElement, LabelPosition, BadgeLocation, isNode, Node } from '../../../types'; -import { action } from '../../../mobx-exports'; import { getEdgesFromNodes, getSpacerNodes } from '../../utils'; import DefaultTaskGroupCollapsed from './DefaultTaskGroupCollapsed'; import DefaultTaskGroupExpanded from './DefaultTaskGroupExpanded'; export interface EdgeCreationTypes { - spacerNodeType?: string; + spacerNodeType?: string, edgeType?: string; spacerEdgeType?: string; finallyNodeTypes?: string[]; finallyEdgeType?: string; } -export interface DefaultTaskGroupProps { +interface PipelinesDefaultGroupProps { /** Additional content added to the node */ children?: React.ReactNode; /** Additional classes added to the group */ @@ -39,10 +33,6 @@ export interface DefaultTaskGroupProps { dragging?: boolean; /** Flag if drag operation is a regroup operation */ dragRegroupable?: boolean; - /** Flag indicating the node should be scaled, best on hover of the node at lowest scale level */ - scaleNode?: boolean; - /** Flag to hide details at medium scale */ - hideDetailsAtMedium?: boolean; /** Flag if the user is hovering on the node */ hover?: boolean; /** Label for the node. Defaults to element.getLabel() */ @@ -55,8 +45,6 @@ export interface DefaultTaskGroupProps { labelPosition?: LabelPosition; /** The maximum length of the label before truncation */ truncateLength?: number; - /** Space between the label and the group. Defaults to 17 */ - labelOffset?: number; /** The Icon class to show in the label, ignored when labelIcon is specified */ labelIconClass?: string; /** The label icon component to show in the label, takes precedence over labelIconClass */ @@ -85,8 +73,6 @@ export interface DefaultTaskGroupProps { onCollapseChange?: (group: Node, collapsed: boolean) => void; /** Shape of the collapsed group */ getCollapsedShape?: (node: Node) => React.FunctionComponent; - /** Number of shadows to shop for collapse groups. Defaults to 2 */ - collapsedShadowCount?: number; /** Shadow offset for the collapsed group */ collapsedShadowOffset?: number; /** Flag if the element selected. Part of WithSelectionProps */ @@ -107,7 +93,7 @@ export interface DefaultTaskGroupProps { recreateLayoutOnCollapseChange?: boolean; /** Function to return types used to re-create edges on a group collapse/expand (should be the same as calls to getEdgesFromNodes) */ getEdgeCreationTypes?: () => { - spacerNodeType?: string; + spacerNodeType?: string, edgeType?: string; spacerEdgeType?: string; finallyNodeTypes?: string[]; @@ -115,21 +101,13 @@ export interface DefaultTaskGroupProps { }; } -type PipelinesDefaultGroupInnerProps = Omit & { element: Node }; +type PipelinesDefaultGroupInnerProps = Omit & { element: Node } & WithSelectionProps; -const DefaultTaskGroupInner: React.FunctionComponent = observer(({ - className, - element, - badge, - onCollapseChange, - collapsedShadowCount, - recreateLayoutOnCollapseChange, - getEdgeCreationTypes, - ...rest -}) => { +const DefaultTaskGroupInner: React.FunctionComponent = observer( + ({ className, element, onCollapseChange, recreateLayoutOnCollapseChange, getEdgeCreationTypes, ...rest }) => { const childCount = element.getAllNodeChildren().length; - const handleCollapse = action((group: Node, collapsed: boolean): void => { + const handleCollapse = (group: Node, collapsed: boolean): void => { if (collapsed && rest.collapsedWidth !== undefined && rest.collapsedHeight !== undefined) { group.setDimensions(new Dimensions(rest.collapsedWidth, rest.collapsedHeight)); } @@ -142,9 +120,9 @@ const DefaultTaskGroupInner: React.FunctionComponent n.type !== creationTypes.spacerNodeType).map((n) => ({ - ...n, - visible: true - })); + ...n, + visible: true + })); const spacerNodes = getSpacerNodes(pipelineNodes, creationTypes.spacerNodeType, creationTypes.finallyNodeTypes); const nodes = [...pipelineNodes, ...spacerNodes]; const edges = getEdgesFromNodes( @@ -155,22 +133,24 @@ const DefaultTaskGroupInner: React.FunctionComponent ); @@ -181,30 +161,24 @@ const DefaultTaskGroupInner: React.FunctionComponent ); } ); -const DefaultTaskGroup: React.FunctionComponent = ({ +const DefaultTaskGroup: React.FunctionComponent = ({ element, - badgeColor = '#f5f5f5', - badgeBorderColor = '#d2d2d2', - badgeTextColor = '#000000', ...rest -}: DefaultTaskGroupProps) => { +}: PipelinesDefaultGroupProps) => { if (!isNode(element)) { throw new Error('DefaultTaskGroup must be used only on Node elements'); } - return ; + return ; }; export default DefaultTaskGroup; diff --git a/packages/module/src/pipelines/components/groups/DefaultTaskGroupCollapsed.tsx b/packages/module/src/pipelines/components/groups/DefaultTaskGroupCollapsed.tsx index 4c93100b..54cb2758 100644 --- a/packages/module/src/pipelines/components/groups/DefaultTaskGroupCollapsed.tsx +++ b/packages/module/src/pipelines/components/groups/DefaultTaskGroupCollapsed.tsx @@ -1,19 +1,38 @@ import * as React from 'react'; import { observer } from 'mobx-react'; import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-alt-icon'; +import { WithDragNodeProps, WithSelectionProps, WithDndDropProps, WithContextMenuProps } from '../../../behavior'; import { CollapsibleGroupProps } from "../../../components"; -import { Node } from '../../../types'; +import { LabelPosition, BadgeLocation, Node } from '../../../types'; import { TaskNode } from '../nodes'; -import { TaskNodeProps } from '../nodes/TaskNode'; -export type DefaultTaskGroupCollapsedProps = { +type DefaultTaskGroupCollapsedProps = { + children?: React.ReactNode; + className?: string; element: Node; - shadowCount?: number; -} & Omit & CollapsibleGroupProps; + droppable?: boolean; + canDrop?: boolean; + dropTarget?: boolean; + dragging?: boolean; + hover?: boolean; + label?: string; // Defaults to element.getLabel() + secondaryLabel?: string; + showLabel?: boolean; // Defaults to true + labelPosition?: LabelPosition; // Defaults to bottom + truncateLength?: number; // Defaults to 13 + labelIconClass?: string; // Icon to show in label + labelIcon?: string; + labelIconPadding?: number; + badge?: string; + badgeColor?: string; + badgeTextColor?: string; + badgeBorderColor?: string; + badgeClassName?: string; + badgeLocation?: BadgeLocation; +} & CollapsibleGroupProps & WithDragNodeProps & WithSelectionProps & WithDndDropProps & WithContextMenuProps; const DefaultTaskGroupCollapsed: React.FunctionComponent = ({ element, - shadowCount = 2, collapsible, onCollapseChange, ...rest @@ -24,8 +43,7 @@ const DefaultTaskGroupCollapsed: React.FunctionComponent : undefined} onActionIconClick={() => onCollapseChange(element, false)} - shadowCount={shadowCount} - {...rest} + shadowCount={2} /> ); }; diff --git a/packages/module/src/pipelines/components/groups/DefaultTaskGroupExpanded.tsx b/packages/module/src/pipelines/components/groups/DefaultTaskGroupExpanded.tsx index 3b1adda8..0249a485 100644 --- a/packages/module/src/pipelines/components/groups/DefaultTaskGroupExpanded.tsx +++ b/packages/module/src/pipelines/components/groups/DefaultTaskGroupExpanded.tsx @@ -7,23 +7,44 @@ import NodeLabel from '../../../components/nodes/labels/NodeLabel'; import { Layer } from '../../../components/layers'; import { GROUPS_LAYER, TOP_LAYER } from '../../../const'; import { maxPadding, useCombineRefs, useHover } from '../../../utils'; +import { BadgeLocation, GraphElement, isGraph, LabelPosition, Node, NodeStyle } from '../../../types'; import { - AnchorEnd, - isGraph, - LabelPosition, - Node, - NodeStyle -} from '../../../types'; -import { - useAnchor, useDragNode, + WithContextMenuProps, + WithDndDropProps, + WithDragNodeProps, + WithSelectionProps } from '../../../behavior'; -import { DagreLayoutOptions, TOP_TO_BOTTOM } from '../../../layouts'; -import TaskGroupSourceAnchor from '../anchors/TaskGroupSourceAnchor'; -import TaskGroupTargetAnchor from '../anchors/TaskGroupTargetAnchor'; -import { DefaultTaskGroupProps } from './DefaultTaskGroup'; +import { CollapsibleGroupProps } from '../../../components'; + +type DefaultTaskGroupProps = { + className?: string; + element: GraphElement; + droppable?: boolean; + canDrop?: boolean; + dropTarget?: boolean; + dragging?: boolean; + hover?: boolean; + label?: string; // Defaults to element.getLabel() + secondaryLabel?: string; + showLabel?: boolean; // Defaults to true + labelPosition?: LabelPosition; + truncateLength?: number; // Defaults to 13 + badge?: string; + badgeColor?: string; + badgeTextColor?: string; + badgeBorderColor?: string; + badgeClassName?: string; + badgeLocation?: BadgeLocation; + labelOffset?: number; // Space between the label and the group + labelIconClass?: string; // Icon to show in label + labelIcon?: string; + labelIconPadding?: number; +} & Partial; + +type DefaultTaskGroupInnerProps = Omit & { element: Node }; -const DefaultTaskGroupExpanded: React.FunctionComponent & { element: Node }> = observer( +const DefaultTaskGroupExpanded: React.FunctionComponent = observer( ({ className, element, @@ -51,7 +72,7 @@ const DefaultTaskGroupExpanded: React.FunctionComponent { const [hovered, hoverRef] = useHover(); const [labelHover, labelHoverRef] = useHover(); @@ -59,7 +80,6 @@ const DefaultTaskGroupExpanded: React.FunctionComponent(hoverRef, dragNodeRef); const isHover = hover !== undefined ? hover : hovered; const labelPosition = element.getLabelPosition(); - const verticalLayout = (element.getGraph().getLayoutOptions?.() as DagreLayoutOptions)?.rankdir === TOP_TO_BOTTOM; let parent = element.getParent(); let altGroup = false; @@ -68,15 +88,6 @@ const DefaultTaskGroupExpanded: React.FunctionComponent new TaskGroupSourceAnchor(node, verticalLayout), [verticalLayout]), - AnchorEnd.source - ); - useAnchor( - React.useCallback((node: Node) => new TaskGroupTargetAnchor(node, verticalLayout), [verticalLayout]), - AnchorEnd.target - ); - const children = element.getNodes().filter((c) => c.isVisible()); // cast to number and coerce diff --git a/packages/module/src/pipelines/components/groups/index.ts b/packages/module/src/pipelines/components/groups/index.ts index a58f87d3..5298db5f 100644 --- a/packages/module/src/pipelines/components/groups/index.ts +++ b/packages/module/src/pipelines/components/groups/index.ts @@ -1,4 +1,2 @@ -export type { EdgeCreationTypes } from './DefaultTaskGroup'; export { default as DefaultTaskGroup } from './DefaultTaskGroup'; -export { default as DefaultTaskGroupExpanded } from './DefaultTaskGroupExpanded'; -export { default as DefaultTaskGroupCollapsed } from './DefaultTaskGroupCollapsed'; +export type { EdgeCreationTypes } from './DefaultTaskGroup'; diff --git a/packages/module/src/pipelines/components/nodes/TaskNode.tsx b/packages/module/src/pipelines/components/nodes/TaskNode.tsx index 6c1aa404..c92599bc 100644 --- a/packages/module/src/pipelines/components/nodes/TaskNode.tsx +++ b/packages/module/src/pipelines/components/nodes/TaskNode.tsx @@ -233,8 +233,7 @@ const TaskNodeInner: React.FC = observer(({ badgeStartX: 0, iconWidth: 0, iconStartX: 0, - leadIconStartX: 0, - offsetX: 0 + leadIconStartX: 0 }; } const height: number = textHeight + 2 * paddingY; @@ -304,25 +303,16 @@ const TaskNodeInner: React.FC = observer(({ ]); React.useEffect(() => { - const sourceEdges = element.getSourceEdges(); action(() => { - const indent = detailsLevel === ScaleDetailsLevel.high && !verticalLayout ? width - pillWidth : 0; + const sourceEdges = element.getSourceEdges(); sourceEdges.forEach(edge => { const data = edge.getData(); - if ((data?.indent ?? 0) !== indent) { - edge.setData({ ...(data || {}), indent }); - } + edge.setData({ + ...(data || {}), + indent: detailsLevel === ScaleDetailsLevel.high && !verticalLayout ? width - pillWidth : 0 + }); }); })(); - - return action(() => { - sourceEdges.forEach(edge => { - const data = edge.getData(); - if (data?.indent) { - edge.setData({...(data || {}), indent: 0}); - } - }); - }); }, [detailsLevel, element, pillWidth, verticalLayout, width]); const scale = element.getGraph().getScale();