multiple improvements

harness · Dec 10, 2024 · af4663b · af4663b
1 parent 6b0f978
commit af4663b
Show file tree

Hide file tree

Showing 24 changed files with 175 additions and 147 deletions.
diff --git a/...ph-implementation/canvas/CanvasButton.tsx → ...h-implementation/canvas/canvas-button.tsx b/...ph-implementation/canvas/CanvasButton.tsx → ...h-implementation/canvas/canvas-button.tsx
diff --git a/...-implementation/canvas/CanvasControls.tsx → ...implementation/canvas/canvas-controls.tsx b/...-implementation/canvas/CanvasControls.tsx → ...implementation/canvas/canvas-controls.tsx
@@ -1,6 +1,6 @@
 import { useCanvasContext } from '@harnessio/pipeline-graph'
 
-import { CanvasButton } from './CanvasButton'
+import { CanvasButton } from './canvas-button'
 
 export function CanvasControls() {
   const { increase, decrease, fit } = useCanvasContext()

diff --git a/...ess/src/pages/pipeline-edit/components/graph-implementation/nodes/parallel-group-node.tsx b/...ess/src/pages/pipeline-edit/components/graph-implementation/nodes/parallel-group-node.tsx
@@ -1,4 +1,3 @@
-import { Tooltip, TooltipContent, TooltipTrigger } from '@harnessio/canary'
 import { ParallelNodeInternalType } from '@harnessio/pipeline-graph'
 
 import { CommonNodeDataType } from '../types/nodes'
@@ -18,12 +17,9 @@ export function ParallelGroupContentNode(props: {
     <>
       <div className="absolute inset-0 -z-10 rounded-xl border border-dashed border-borders-6"></div>
       <div className="absolute inset-0 flex h-9 items-center">
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <div className="m-3 h-9 cursor-default truncate pl-8 pt-2.5 text-primary-muted">{data.name}</div>
-          </TooltipTrigger>
-          <TooltipContent>{data.name}</TooltipContent>
-        </Tooltip>
+        <div title={data.name} className="m-3 h-9 cursor-default truncate pl-8 pt-2.5 text-primary-muted">
+          {data.name}
+        </div>
       </div>
       {children}
     </>

diff --git a/...tness/src/pages/pipeline-edit/components/graph-implementation/nodes/serial-group-node.tsx b/...tness/src/pages/pipeline-edit/components/graph-implementation/nodes/serial-group-node.tsx
@@ -1,4 +1,3 @@
-import { Tooltip, TooltipContent, TooltipTrigger } from '@harnessio/canary'
 import { SerialNodeInternalType } from '@harnessio/pipeline-graph'
 
 import { CommonNodeDataType } from '../types/nodes'
@@ -18,12 +17,9 @@ export function SerialGroupContentNode(props: {
     <>
       <div className="absolute inset-0 -z-10 rounded-xl border border-dashed border-borders-6 bg-primary-foreground/30"></div>
       <div className="absolute inset-0 flex h-9 items-center">
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <div className="m-3 h-9 cursor-default truncate pl-8 pt-2.5 text-primary-muted">{data.name}</div>
-          </TooltipTrigger>
-          <TooltipContent>{data.name}</TooltipContent>
-        </Tooltip>
+        <div title={data.name} className="m-3 h-9 cursor-default truncate pl-8 pt-2.5 text-primary-muted">
+          {data.name}
+        </div>
       </div>
       {children}
     </>

diff --git a/apps/gitness/src/pages/pipeline-edit/components/graph-implementation/nodes/step-node.tsx b/apps/gitness/src/pages/pipeline-edit/components/graph-implementation/nodes/step-node.tsx
@@ -1,6 +1,5 @@
 import cx from 'clsx'
 
-import { Tooltip, TooltipContent, TooltipTrigger } from '@harnessio/canary'
 import { LeafNodeInternalType } from '@harnessio/pipeline-graph'
 
 import { CommonNodeDataType } from '../types/nodes'
@@ -23,12 +22,9 @@ export function StepNode(props: { node: LeafNodeInternalType<StepNodeDataType> }
       })}
     >
       <div>{data?.icon}</div>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <div className="m-2 line-clamp-2 cursor-default text-primary">{data.name}</div>
-        </TooltipTrigger>
-        <TooltipContent>{data.name}</TooltipContent>
-      </Tooltip>
+      <div title={data.name} className="m-2 line-clamp-2 cursor-default text-primary">
+        {data.name}
+      </div>
     </div>
   )
 }
diff --git a/apps/gitness/src/pages/pipeline-edit/components/pipeline-studio-graph-view.tsx b/apps/gitness/src/pages/pipeline-edit/components/pipeline-studio-graph-view.tsx
@@ -14,7 +14,7 @@ import {
 
 import { usePipelineDataContext } from '../context/PipelineStudioDataProvider'
 import { StepDrawer, usePipelineViewContext } from '../context/PipelineStudioViewProvider'
-import { CanvasControls } from './graph-implementation/canvas/CanvasControls'
+import { CanvasControls } from './graph-implementation/canvas/canvas-controls'
 import { ContentNodeTypes } from './graph-implementation/content-node-types'
 import { EndNode } from './graph-implementation/nodes/end-node'
 import { StartNode } from './graph-implementation/nodes/start-node'

diff --git a/packages/pipeline-graph/examples/src/canvas/CanvasControls.tsx b/packages/pipeline-graph/examples/src/canvas/CanvasControls.tsx
@@ -1,4 +1,4 @@
-import { useCanvasContext } from '../../../src/context/CanvasProvider'
+import { useCanvasContext } from '../../../src/context/canvas-provider'
 import { CanvasButton } from './CanvasButton'
 
 export function CanvasControls() {

diff --git a/packages/pipeline-graph/examples/src/example1.tsx b/packages/pipeline-graph/examples/src/example1.tsx
@@ -20,7 +20,7 @@ import './sample-data/pipeline-data'
 
 import React from 'react'
 
-import { CanvasProvider } from '../../src/context/CanvasProvider'
+import { CanvasProvider } from '../../src/context/canvas-provider'
 import { AnyNodeInternal } from '../../src/types/nodes-internal'
 import { CanvasControls } from './canvas/CanvasControls'
 import { getIcon } from './parser/utils'

diff --git a/packages/pipeline-graph/examples/src/example2-animations.tsx b/packages/pipeline-graph/examples/src/example2-animations.tsx
@@ -3,7 +3,7 @@ import React, { useEffect, useRef, useState } from 'react'
 import { cloneDeep, get, last } from 'lodash-es'
 import { parse } from 'yaml'
 
-import { CanvasProvider } from '../../src/context/CanvasProvider'
+import { CanvasProvider } from '../../src/context/canvas-provider'
 import { PipelineGraph } from '../../src/pipeline-graph'
 import { NodeContent } from '../../src/types/node-content'
 import { AnyNodeType, ContainerNode, LeafNodeType } from '../../src/types/nodes'

diff --git a/packages/pipeline-graph/examples/src/example3-performance.tsx b/packages/pipeline-graph/examples/src/example3-performance.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { CanvasProvider } from '../../src/context/CanvasProvider'
+import { CanvasProvider } from '../../src/context/canvas-provider'
 import { PipelineGraph } from '../../src/pipeline-graph'
 import { NodeContent } from '../../src/types/node-content'
 import { ContainerNode } from '../../src/types/nodes'

diff --git a/packages/pipeline-graph/examples/src/nodes/parallel-group-node.tsx b/packages/pipeline-graph/examples/src/nodes/parallel-group-node.tsx
@@ -1,5 +1,7 @@
 import React from 'react'
 
+import cx from 'classnames'
+
 import { ParallelNodeInternalType } from '../../../src/types/nodes-internal'
 
 export interface ParallelGroupContentNodeDataType {
@@ -17,16 +19,21 @@ export function ParallelGroupNodeContent(props: {
   const { node, children } = props
   const data = node.data as ParallelGroupContentNodeDataType
 
+  const name = `Parallel - ${node.path} (${node.children.length})`
+
   return (
-    <div>
+    <div title={name}>
       <div
+        className={cx('border', { loading: data?.state === 'loading', selected: data?.selected })}
         style={{
           position: 'absolute',
-          inset: '0 0 0 0',
-          pointerEvents: 'none'
+          inset: 0,
+          zIndex: -1,
+          border: '1px dashed #454545',
+          borderRadius: '6px',
+          background: 'rgba(152, 150, 172, 0.01)'
         }}
-        className={data?.state === 'loading' ? 'loading' : ''}
-      ></div>
+      />
       <div
         style={{
           position: 'absolute',
@@ -49,7 +56,7 @@ export function ParallelGroupNodeContent(props: {
             paddingLeft: '30px'
           }}
         >
-          Parallel - {node.path} ({node.children.length})
+          {name}
         </span>
       </div>
       {children}

diff --git a/packages/pipeline-graph/examples/src/nodes/serial-group-node.tsx b/packages/pipeline-graph/examples/src/nodes/serial-group-node.tsx
@@ -1,5 +1,7 @@
 import React from 'react'
 
+import cx from 'classnames'
+
 import { SerialNodeInternalType } from '../../../src/types/nodes-internal'
 
 export interface SerialGroupContentNodeDataType {
@@ -17,8 +19,21 @@ export function SerialGroupNodeContent(props: {
   const { node, children } = props
   const data = node.data as SerialGroupContentNodeDataType
 
+  const name = `Serial - ${node.path} (${node.children.length})`
+
   return (
-    <div>
+    <div title={name}>
+      <div
+        className={cx('border', { loading: data?.state === 'loading', selected: data?.selected })}
+        style={{
+          position: 'absolute',
+          inset: 0,
+          zIndex: -1,
+          border: '1px dashed #454545',
+          borderRadius: '6px',
+          background: 'rgba(152, 150, 172, 0.01)'
+        }}
+      />
       <div
         style={{
           position: 'absolute',
@@ -41,7 +56,7 @@ export function SerialGroupNodeContent(props: {
             paddingLeft: '30px'
           }}
         >
-          Serial - {node.path} ({node.children.length})
+          {name}
         </span>
       </div>
       {children}

diff --git a/packages/pipeline-graph/examples/src/nodes/stage-node.tsx b/packages/pipeline-graph/examples/src/nodes/stage-node.tsx
@@ -19,8 +19,10 @@ export function SerialGroupContentNode(props: {
   const { node, children } = props
   const data = node.data as StageNodeContentType
 
+  const name = `Stage - ${node.path} (${node.children.length})`
+
   return (
-    <div>
+    <div title={name}>
       <div
         className={cx('border', { loading: data?.state === 'loading', selected: data?.selected })}
         style={{
@@ -54,7 +56,7 @@ export function SerialGroupContentNode(props: {
             paddingLeft: '30px'
           }}
         >
-          Stage - {node.path} ({node.children.length})
+          {name}
         </span>
       </div>
       {children}

diff --git a/packages/pipeline-graph/examples/src/nodes/step-node.tsx b/packages/pipeline-graph/examples/src/nodes/step-node.tsx
@@ -28,13 +28,17 @@ export function StepNode(props: { node: LeafNodeInternalType<StepNodeDataType> }
     background: 'linear-gradient(-47deg, rgba(152, 150, 172, 0.05) 0%, rgba(177, 177, 177, 0.15) 100%)'
   }
 
-  const scaleStyle = {}
+  const name = data?.name ?? 'Step'
 
   return (
-    <div style={style} className={cx('border', { loading: data.state === 'loading', selected: data.selected })}>
+    <div
+      title={name}
+      style={style}
+      className={cx('border', { loading: data.state === 'loading', selected: data.selected })}
+    >
       <div>{data?.icon}</div>
       <div style={{ margin: '10px' }} className={'node-text'}>
-        <span>{data?.name ?? 'Step'}</span>
+        <span>{name}</span>
         <br />
         <span className={'node-text'}>{props.node.path}</span>
       </div>

diff --git a/packages/pipeline-graph/src/components/canvas/canvas-utils.ts b/packages/pipeline-graph/src/components/canvas/canvas-utils.ts
@@ -26,7 +26,7 @@ export function calculateTransform(args: CalculateTransformArgs = {}) {
     currentScale = 1
   } = args
 
-  const matrix = createMatrix()
+  const matrix = new DOMMatrix()
     .translate(panX, panY)
     .translate(originX, originY)
     .translate(currentTranslateX, currentTranslateY)
@@ -40,7 +40,3 @@ export function calculateTransform(args: CalculateTransformArgs = {}) {
     scale: matrix.a
   }
 }
-
-function createMatrix(): SVGMatrix {
-  return new DOMMatrix()
-}
diff --git a/packages/pipeline-graph/src/components/canvas/canvas.tsx b/packages/pipeline-graph/src/components/canvas/canvas.tsx
@@ -1,15 +1,12 @@
 import React, { useEffect, useRef } from 'react'
 
-import { useCanvasContext } from '../../context/CanvasProvider'
+import { useCanvasContext } from '../../context/canvas-provider'
 import { calculateTransform, MousePoint } from './canvas-utils'
 
 import './canvas.css'
 
 export function Canvas({ children }: React.PropsWithChildren) {
-  const { config, setCanvasTransform, canvasTransform } = useCanvasContext()
-
-  const canvasTransformRef = useRef(canvasTransform)
-  canvasTransformRef.current = canvasTransform
+  const { setCanvasTransform, canvasTransformRef } = useCanvasContext()
 
   const mainRef = useRef<HTMLDivElement | null>(null)
 

diff --git a/packages/pipeline-graph/src/components/nodes/parallel-container.tsx b/packages/pipeline-graph/src/components/nodes/parallel-container.tsx
@@ -1,6 +1,6 @@
 import { useMemo, useRef } from 'react'
 
-import { useGraphContext } from '../../context/GraphProvider'
+import { useGraphContext } from '../../context/graph-provider'
 import { renderNode } from '../../render/render-node'
 import { RenderNodeContent } from '../../render/render-node-content'
 import { ContainerNodeProps } from '../../types/container-node'

diff --git a/packages/pipeline-graph/src/components/nodes/serial-container.tsx b/packages/pipeline-graph/src/components/nodes/serial-container.tsx
@@ -1,6 +1,6 @@
 import { useMemo, useRef } from 'react'
 
-import { useGraphContext } from '../../context/GraphProvider'
+import { useGraphContext } from '../../context/graph-provider'
 import { renderNode } from '../../render/render-node'
 import { RenderNodeContent } from '../../render/render-node-content'
 import { ContainerNodeProps } from '../../types/container-node'