@likec4/diagram 1.16.0 → 1.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.16.0",
+  "version": "1.17.0",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -31,21 +31,21 @@
   },
   "dependencies": {
     "@dagrejs/dagre": "^1.1.4",
-    "@likec4/core": "1.16.0",
+    "@likec4/core": "1.17.0",
     "@mantine/vanilla-extract": "7.13.4",
     "@react-hookz/web": "^24.0.4",
     "@tabler/icons-react": "3.17.0",
     "@vanilla-extract/css": "^1.16.0",
     "@vanilla-extract/css-utils": "^0.1.4",
     "@vanilla-extract/dynamic": "^2.1.2",
-    "@xyflow/react": "12.3.2",
-    "@xyflow/system": "0.0.43",
+    "@xyflow/react": "12.3.4",
+    "@xyflow/system": "0.0.45",
     "bezier-js": "^6.1.4",
     "clsx": "^2.1.1",
     "d3-shape": "^3.2.0",
-    "esm-env": "^1.0.0",
+    "esm-env": "^1.1.4",
     "fast-equals": "^5.0.1",
-    "framer-motion": "^11.11.10",
+    "framer-motion": "^11.11.11",
     "khroma": "^2.1.0",
     "remeda": "^2.16.0",
     "type-fest": "4.26.1",
@@ -58,7 +58,7 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@likec4/tsconfig": "1.16.0",
+    "@likec4/tsconfig": "1.17.0",
     "@mantine/core": "7.13.4",
     "@mantine/hooks": "7.13.4",
     "@types/bezier-js": "^4.1.3",

package/src/LikeC4CustomColors.tsx

@@ -1,33 +1,36 @@
-import { type ThemeColorValues } from '@likec4/core'
+import { type CustomColorDefinitions, type ThemeColorValues } from '@likec4/core'
 import { useMantineStyleNonce } from '@mantine/core'
 import { deepEqual } from 'fast-equals'
 import { memo } from 'react'
 import { entries } from 'remeda'
-import type { LikeC4CustomColorsProperties } from './LikeC4CustomColors.props'
 import { vars } from './theme-vars'
 
 type CSSVarFunction = `var(--${string})` | `var(--${string}, ${string | number} )`
 
-export const LikeC4CustomColors = memo<LikeC4CustomColorsProperties>(({ customColors }) => {
-  function toStyle(name: String, colorValues: ThemeColorValues): String {
-    const rules = new Array<String>(
-      ...entries(colorValues.elements).map(([key, value]) => `${stripCssVarReference(vars.element[key])}: ${value};`),
-      ...entries(colorValues.relationships).map(([key, value]) =>
-        `${stripCssVarReference(vars.relation[key])}: ${value};`
-      )
-    )
-      .join('\n')
-
-    return `:where([data-likec4-color=${name}]) {
-            ${rules}
-        }`
-  }
-
-  function stripCssVarReference(ref: CSSVarFunction): String {
-    const end = ref.indexOf(',')
-    return ref.substring(4, end == -1 ? ref.length - 1 : end)
-  }
+interface LikeC4CustomColorsProperties {
+  customColors: CustomColorDefinitions
+}
+
+function toStyle(name: String, colorValues: ThemeColorValues): String {
+  const rules = [
+    ...entries(colorValues.elements)
+      .map(([key, value]) => `${stripCssVarReference(vars.element[key])}: ${value};`),
+    ...entries(colorValues.relationships)
+      .map(([key, value]) => `${stripCssVarReference(vars.relation[key])}: ${value};`)
+  ]
+    .join('\n')
 
+  return `:where([data-likec4-color=${name}]) {
+  ${rules}
+}`
+}
+
+function stripCssVarReference(ref: CSSVarFunction): String {
+  const end = ref.indexOf(',')
+  return ref.substring(4, end == -1 ? ref.length - 1 : end)
+}
+
+export const LikeC4CustomColors = memo<LikeC4CustomColorsProperties>(({ customColors }) => {
   const styles = entries(customColors)
     .map(([name, color]) => toStyle(name, color))
     .join('\n')

package/src/LikeC4Diagram.props.ts

@@ -118,12 +118,6 @@ export interface LikeC4DiagramProperties {
    */
   background?: 'transparent' | 'solid' | XYBackground | undefined
 
-  /**
-   * Display hovercards with element links
-   * @default true
-   */
-  showElementLinks?: boolean | undefined
-
   /**
    * Display webview with diagram title / description
    * @default true
@@ -144,9 +138,9 @@ export interface LikeC4DiagramProperties {
 
   /**
    * Display dropdown with details on relationship's label click
-   * @default true
+   * @default false
    */
-  showRelationshipDetails?: boolean | undefined
+  enableRelationshipDetails?: boolean | undefined
 
   /**
    * If double click on a node should enable focus mode, i.e. highlight incoming/outgoing edges
@@ -154,12 +148,18 @@ export interface LikeC4DiagramProperties {
    */
   enableFocusMode?: boolean | undefined
 
+  /**
+   * Enable modal with element details
+   * @default false
+   */
+  enableElementDetails?: boolean | undefined
+
   /**
    * Experimental feature to browse relationships
    *
    * @default false
    */
-  enableRelationshipsBrowser?: boolean | undefined
+  enableRelationshipBrowser?: boolean | undefined
 
   /**
    * If Walkthrough for dynamic views should be enabled

package/src/LikeC4Diagram.tsx

@@ -1,18 +1,18 @@
-import type { DiagramView } from '@likec4/core'
 import { ReactFlowProvider as XYFlowProvider } from '@xyflow/react'
 import clsx from 'clsx'
-import { shallowEqual } from 'fast-equals'
-import { domMax, LazyMotion } from 'framer-motion'
+import { deepEqual, shallowEqual } from 'fast-equals'
 import { memo, useEffect, useRef } from 'react'
+import { isEmpty } from 'remeda'
 import { rootClassName } from './globals.css'
 import { useDiagramState } from './hooks/useDiagramState'
 import { LikeC4CustomColors } from './LikeC4CustomColors'
 import * as css from './LikeC4Diagram.css'
 import { type LikeC4DiagramEventHandlers, type LikeC4DiagramProperties } from './LikeC4Diagram.props'
 import { useLikeC4Model } from './likec4model'
-import { EnsureMantine } from './mantine/EnsureMantine'
 import { Overlays } from './overlays'
 import { DiagramContextProvider } from './state/DiagramContext'
+import { EnsureMantine } from './ui/EnsureMantine'
+import { FramerMotionConfig } from './ui/FramerMotionConfig'
 import { FitViewOnDiagramChange } from './xyflow/FitviewOnDiagramChange'
 import { SelectEdgesOnNodeFocus } from './xyflow/SelectEdgesOnNodeFocus'
 import type { XYFlowEdge, XYFlowNode } from './xyflow/types'
@@ -32,13 +32,13 @@ export function LikeC4Diagram({
   nodesDraggable = !readonly,
   background = 'dots',
   controls = !readonly,
-  showElementLinks = true,
   showDiagramTitle = true,
   showNotations = true,
-  showRelationshipDetails = true,
   enableDynamicViewWalkthrough = false,
   enableFocusMode = false,
-  enableRelationshipsBrowser = false,
+  enableElementDetails = false,
+  enableRelationshipDetails = enableElementDetails,
+  enableRelationshipBrowser = enableRelationshipDetails,
   initialWidth,
   initialHeight,
   keepAspectRatio = false,
@@ -74,43 +74,46 @@ export function LikeC4Diagram({
     if (hasLikec4model) {
       return
     }
-    if (showRelationshipDetails) {
+    if (enableRelationshipDetails) {
       console.warn('Invalid showRelationshipDetails=true, requires LikeC4ModelProvider')
     }
-    if (enableRelationshipsBrowser) {
-      console.warn('Invalid enableRelationshipsBrowser=true, requires LikeC4ModelProvider')
+    if (enableElementDetails) {
+      console.warn('Invalid enableElementDetails=true, requires LikeC4ModelProvider')
+    }
+    if (enableRelationshipBrowser) {
+      console.warn('Invalid enableRelationshipBrowser=true, requires LikeC4ModelProvider')
     }
   })
 
   return (
     <EnsureMantine>
-      <LazyMotion features={domMax} strict>
+      <FramerMotionConfig>
         <XYFlowProvider
           fitView={fitView}
           {...initialRef.current}
         >
-          {customColorsDefined(view) && <LikeC4CustomColors customColors={view.customColorDefinitions} />}
+          {!isEmpty(view.customColorDefinitions) && <LikeC4CustomColors customColors={view.customColorDefinitions} />}
           <DiagramContextProvider
             view={view}
             keepAspectRatio={keepAspectRatio}
             className={clsx(rootClassName, className)}
             readonly={readonly}
+            experimentalEdgeEditing={!readonly && experimentalEdgeEditing}
             pannable={pannable}
             zoomable={zoomable}
+            nodesDraggable={nodesDraggable}
+            nodesSelectable={nodesSelectable || enableFocusMode}
             hasLikeC4Model={hasLikec4model}
             fitViewEnabled={fitView}
             fitViewPadding={fitViewPadding}
             controls={controls}
-            showElementLinks={showElementLinks}
             showNavigationButtons={showNavigationButtons && !!onNavigateTo}
             showNotations={showNotations}
-            showRelationshipDetails={showRelationshipDetails && hasLikec4model}
-            nodesDraggable={nodesDraggable}
-            nodesSelectable={nodesSelectable}
-            experimentalEdgeEditing={experimentalEdgeEditing}
-            enableDynamicViewWalkthrough={enableDynamicViewWalkthrough}
             enableFocusMode={enableFocusMode}
-            enableRelationshipsBrowser={enableRelationshipsBrowser && hasLikec4model}
+            enableRelationshipDetails={enableRelationshipDetails && hasLikec4model}
+            enableElementDetails={enableElementDetails && hasLikec4model}
+            enableDynamicViewWalkthrough={enableDynamicViewWalkthrough}
+            enableRelationshipBrowser={enableRelationshipBrowser && hasLikec4model}
             // Apply where filter only in readonly mode
             whereFilter={readonly ? (where ?? null) : null}
             renderIcon={renderIcon ?? null}
@@ -134,7 +137,7 @@ export function LikeC4Diagram({
             />
           </DiagramContextProvider>
         </XYFlowProvider>
-      </LazyMotion>
+      </FramerMotionConfig>
     </EnsureMantine>
   )
 }
@@ -159,7 +162,7 @@ const LikeC4DiagramInnerMemo = /* @__PURE__ */ memo<LikeC4DiagramInnerProps>(fun
     pannable: s.pannable,
     fitView: s.fitViewEnabled,
     enableFocusMode: s.enableFocusMode,
-    enableOverlays: s.hasLikeC4Model && (s.enableRelationshipsBrowser || s.showRelationshipDetails)
+    enableOverlays: s.hasLikeC4Model && (s.enableRelationshipBrowser || s.enableElementDetails)
   }))
 
   return (
@@ -188,9 +191,5 @@ const LikeC4DiagramInnerMemo = /* @__PURE__ */ memo<LikeC4DiagramInnerProps>(fun
       )}
     </>
   )
-}, shallowEqual)
+}, deepEqual)
 LikeC4DiagramInnerMemo.displayName = 'LikeC4DiagramInnerMemo'
-
-function customColorsDefined(view: DiagramView) {
-  return Object.keys(view.customColorDefinitions).length > 0
-}

package/src/StaticLikeC4Diagram.tsx

@@ -9,7 +9,9 @@ export type StaticLikeC4DiagramProps = Pick<
   | 'fitView'
   | 'fitViewPadding'
   | 'background'
-  | 'showElementLinks'
+  | 'enableElementDetails'
+  | 'enableRelationshipDetails'
+  | 'enableRelationshipBrowser'
   | 'initialWidth'
   | 'initialHeight'
   | 'renderIcon'
@@ -20,7 +22,9 @@ export function StaticLikeC4Diagram({
   view,
   fitView = true,
   fitViewPadding = 0,
-  showElementLinks = true,
+  enableElementDetails = false,
+  enableRelationshipDetails = false,
+  enableRelationshipBrowser = enableRelationshipDetails,
   background = 'transparent',
   ...rest
 }: StaticLikeC4DiagramProps) {
@@ -34,12 +38,12 @@ export function StaticLikeC4Diagram({
       zoomable={false}
       controls={false}
       background={background}
-      showElementLinks={showElementLinks}
       showDiagramTitle={false}
       showNotations={false}
-      showRelationshipDetails={false}
+      enableElementDetails={enableElementDetails}
+      enableRelationshipDetails={enableRelationshipDetails}
+      enableRelationshipBrowser={enableRelationshipBrowser}
       enableDynamicViewWalkthrough={false}
-      enableRelationshipsBrowser={false}
       experimentalEdgeEditing={false}
       enableFocusMode={false}
       nodesSelectable={false}

package/src/overlays/OverlayContext.tsx

@@ -3,7 +3,7 @@ import type { DiagramState } from '../hooks'
 
 export const OverlayContext = createContext({} as {
   openOverlay: DiagramState['openOverlay']
-  close: () => void
+  close: (onClosed?: () => void) => void
 })
 
 export function useOverlayDialog() {

package/src/overlays/Overlays.css.ts

@@ -1,7 +1,7 @@
-import { createVar, globalStyle, keyframes, style } from '@vanilla-extract/css'
-import { mantine, vars, whereDark, xyvars } from '../theme-vars'
+import { createVar, globalStyle, style } from '@vanilla-extract/css'
+import { mantine, vars, whereDark, whereLight, xyvars } from '../theme-vars'
 
-const mixColor = createVar('mix-color')
+export const mixColor = createVar('mix-color')
 export const container = style({
   position: 'absolute',
   top: 0,
@@ -16,41 +16,46 @@ export const container = style({
   isolation: 'isolate',
   WebkitBackdropFilter: 'blur(var(--backdrop-blur))',
   backdropFilter: 'blur(var(--backdrop-blur))',
-  backgroundColor: `color-mix(in srgb, ${mantine.colors.body}, transparent var(--backdrop-opacity))`,
+  backgroundColor: `rgb(200 200 200 / var(--backdrop-opacity))`,
   vars: {
-    '--backdrop-blur': '3px',
-    '--backdrop-opacity': '50%',
-    [mixColor]: `black`,
-    [xyvars.edge.stroke]: vars.relation.lineColor,
-    [xyvars.edge.strokeSelected]: `color-mix(in srgb, ${vars.relation.lineColor}, ${mixColor} 35%)`,
-    [xyvars.edge.labelColor]: `color-mix(in srgb, ${vars.relation.labelColor}, rgba(255 255 255 / 0.85) 50%)`,
-    [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 30%)`
+    '--backdrop-blur': '0px',
+    '--backdrop-opacity': '0%',
+    [mixColor]: `black`
   },
   selectors: {
     [`${whereDark} &`]: {
+      backgroundColor: `rgb(36 36 36 / var(--backdrop-opacity))`,
       vars: {
-        [mixColor]: `white`,
-        [xyvars.edge.labelColor]: vars.relation.labelColor,
-        [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 50%)`
+        [mixColor]: `white`
       }
     }
   }
 })
 
-globalStyle(`:where(${container}) .react-flow__attribution`, {
-  display: 'none'
+export const cssReactflowMarker = style({})
+globalStyle(`.react-flow${cssReactflowMarker}`, {
+  vars: {
+    // [xyvars.background.color]: vars.likec4.background.color,
+    [xyvars.background.pattern.color]: vars.likec4.background.pattern.color
+  }
 })
-globalStyle(`:where(${container}) .react-flow__edge-text`, {
-  fontSize: 14
+
+globalStyle(`${whereDark} .react-flow${cssReactflowMarker}`, {
+  vars: {
+    [xyvars.edge.labelColor]: vars.relation.labelColor,
+    [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 50%)`
+  }
+})
+globalStyle(`:where(${cssReactflowMarker}) .react-flow__attribution`, {
+  display: 'none'
 })
-globalStyle(`:where(${container}) .react-flow__node-compound`, {
-  mixBlendMode: 'hard-light'
+globalStyle(`:where(${cssReactflowMarker}) .react-flow__edge-text`, {
+  fontSize: 16
 })
-
-globalStyle(`${container} .react-flow__edges > svg`, {
+globalStyle(`${cssReactflowMarker} .react-flow__edges > svg`, {
   mixBlendMode: 'plus-lighter'
 })
-globalStyle(`:where([data-mantine-color-scheme="light"]) ${container} .react-flow__edges > svg`, {
+globalStyle(`${whereLight} ${cssReactflowMarker} .react-flow__edges > svg`, {
   mixBlendMode: 'screen'
 })
 

package/src/overlays/Overlays.tsx

@@ -1,96 +1,118 @@
-import { ActionIcon, Box, FocusTrap } from '@mantine/core'
+import { ActionIcon, Box, FocusTrap, RemoveScroll } from '@mantine/core'
 import { useHotkeys } from '@mantine/hooks'
 import { IconX } from '@tabler/icons-react'
 import { ReactFlowProvider as XYFlowProvider } from '@xyflow/react'
 import { AnimatePresence, m } from 'framer-motion'
-import { memo, useMemo } from 'react'
+import { memo, type PropsWithChildren, useEffect, useMemo, useRef } from 'react'
+import { isNullish } from 'remeda'
 import { type DiagramState, useDiagramState, useDiagramStoreApi } from '../hooks/useDiagramState'
 import { EdgeDetailsXYFlow } from './edge-details/EdgeDetailsXYFlow'
-import { OverlayContext } from './OverlayContext'
+import { ElementDetailsCard } from './element-details/ElementDetailsCard'
+import { OverlayContext, useOverlayDialog } from './OverlayContext'
 import * as css from './Overlays.css'
-import { RelationshipsXYFlow } from './relationships-of/RelationshipsXYFlow'
+import { RelationshipsOverlay } from './relationships-of/RelationshipsOverlay'
+
 export const Overlays = memo(() => {
   const diagramStore = useDiagramStoreApi()
-  const activeOverlay = useDiagramState(s => s.activeOverlay)
+  const {
+    activeOverlay,
+    viewId
+  } = useDiagramState(s => ({
+    activeOverlay: s.activeOverlay,
+    viewId: s.view.id
+  }))
+
+  const onCloseCbRef = useRef<(() => void)>()
 
   const ctxValue = useMemo(() => ({
     openOverlay: ((overlay) => {
       diagramStore.getState().openOverlay(overlay)
     }) as DiagramState['openOverlay'],
-    close: () => {
+    close: (cb?: () => void) => {
+      onCloseCbRef.current = cb
       diagramStore.getState().closeOverlay()
     }
   }), [diagramStore])
 
+  const onExitComplete = () => {
+    onCloseCbRef.current?.()
+    onCloseCbRef.current = undefined
+  }
+
   const isActive = !!activeOverlay
   useHotkeys(
     isActive
       ? [
         ['Escape', (e) => {
-          e.stopImmediatePropagation()
-          diagramStore.getState().closeOverlay()
+          e.stopPropagation()
+          ctxValue.close()
         }, { preventDefault: true }]
       ]
       : []
   )
+
   return (
     <OverlayContext.Provider value={ctxValue}>
-      <AnimatePresence>
-        {activeOverlay && (
-          <Box
-            component={m.div}
-            className={css.container}
-            data-likec4-color="gray"
-            initial={{
-              '--backdrop-blur': '0px',
-              '--backdrop-opacity': '60%',
-              opacity: 0,
-              translateY: -15
-            }}
-            animate={{
-              '--backdrop-blur': '10px',
-              '--backdrop-opacity': '25%',
-              opacity: 1,
-              translateY: 0
-            }}
-            exit={{
-              '--backdrop-blur': '1px',
-              '--backdrop-opacity': '90%',
-              translateY: -5,
-              opacity: 0
-            }}
-          >
-            <FocusTrap>
-              {activeOverlay.relationshipsOf && (
-                <XYFlowProvider
-                  defaultNodes={[]}
-                  defaultEdges={[]}>
-                  <RelationshipsXYFlow subjectId={activeOverlay.relationshipsOf} />
-                </XYFlowProvider>
-              )}
-              {activeOverlay.edgeDetails && (
-                <XYFlowProvider
-                  defaultNodes={[]}
-                  defaultEdges={[]}>
-                  <EdgeDetailsXYFlow edgeId={activeOverlay.edgeDetails} />
-                </XYFlowProvider>
-              )}
-              <Box pos={'absolute'} top={'1rem'} right={'1rem'}>
-                <ActionIcon
-                  variant="default"
-                  // color="gray"
-                  size={'lg'}
-                  data-autofocus
-                  autoFocus
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    ctxValue.close()
-                  }}>
-                  <IconX />
-                </ActionIcon>
-              </Box>
-            </FocusTrap>
-          </Box>
+      <AnimatePresence initial={false} key={viewId} onExitComplete={onExitComplete}>
+        {activeOverlay?.elementDetails && (
+          <ElementDetailsCard key={'details card'} fqn={activeOverlay.elementDetails} />
+        )}
+      </AnimatePresence>
+      <AnimatePresence initial={false} onExitComplete={onExitComplete}>
+        {activeOverlay && isNullish(activeOverlay.elementDetails) && (
+          <RemoveScroll forwardProps>
+            <Box
+              component={m.div}
+              className={css.container}
+              data-likec4-color="gray"
+              initial={{
+                '--backdrop-blur': '0px',
+                '--backdrop-opacity': '0%',
+                opacity: 0,
+                translateY: -15
+              }}
+              animate={{
+                '--backdrop-blur': '10px',
+                '--backdrop-opacity': '70%',
+                opacity: 1,
+                translateY: 0
+              }}
+              exit={{
+                '--backdrop-blur': '1px',
+                '--backdrop-opacity': '0%',
+                translateY: -5,
+                opacity: 0,
+                transition: {
+                  duration: .2
+                }
+              }}
+            >
+              <FocusTrap>
+                {activeOverlay.relationshipsOf && <RelationshipsOverlay subjectId={activeOverlay.relationshipsOf} />}
+                {activeOverlay.edgeDetails && (
+                  <XYFlowProvider
+                    defaultNodes={[]}
+                    defaultEdges={[]}>
+                    <EdgeDetailsXYFlow edgeId={activeOverlay.edgeDetails} />
+                  </XYFlowProvider>
+                )}
+                <Box pos={'absolute'} top={'1rem'} right={'1rem'}>
+                  <ActionIcon
+                    variant="default"
+                    // color="gray"
+                    size={'lg'}
+                    // data-autofocus
+                    // autoFocus
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      ctxValue.close()
+                    }}>
+                    <IconX />
+                  </ActionIcon>
+                </Box>
+              </FocusTrap>
+            </Box>
+          </RemoveScroll>
         )}
       </AnimatePresence>
     </OverlayContext.Provider>
@@ -208,3 +230,33 @@ export const Overlays = memo(() => {
 //     </Box>
 //   )
 // }
+const OverlayDialog = ({ children }: PropsWithChildren) => {
+  const overlay = useOverlayDialog()
+  const ref = useRef<HTMLDialogElement>(null)
+  useEffect(() => {
+    ref.current?.showModal()
+  }, [])
+  return (
+    <m.dialog
+      ref={ref}
+      exit={{
+        opacity: 0,
+        transition: {
+          duration: .15
+        }
+      }}
+      onClick={e => {
+        if ((e.target as any)?.nodeName?.toUpperCase() === 'DIALOG') {
+          e.stopPropagation()
+          ref.current?.close()
+        }
+      }}
+      onClose={e => {
+        e.stopPropagation()
+        overlay.close()
+      }}
+    >
+      {children}
+    </m.dialog>
+  )
+}

package/src/overlays/edge-details/xyflow/ElementNode.tsx

@@ -27,6 +27,7 @@ type ElementNodeProps = NodeProps<XYFlowTypes.ElementNode>
 function selector(s: DiagramState) {
   return {
     currentViewId: s.view.id,
+    enableRelationshipBrowser: s.enableRelationshipBrowser,
     onNavigateTo: s.onNavigateTo,
     onOpenSource: s.onOpenSourceElement
   }
@@ -47,7 +48,8 @@ export function ElementNode({
   const {
     currentViewId,
     onNavigateTo,
-    onOpenSource
+    onOpenSource,
+    enableRelationshipBrowser
   } = useDiagramState(selector)
   return (
     <>
@@ -97,21 +99,22 @@ export function ElementNode({
             <Action
               onClick={(event) => {
                 event.stopPropagation()
-                setTimeout(() => onNavigateTo(navigateTo), 100)
-                overlay.close()
+                overlay.close(() => onNavigateTo(navigateTo))
               }}>
               <IconZoomScan stroke={1.8} style={{ width: '75%' }} />
             </Action>
           )}
-          <Action
-            onClick={(event) => {
-              event.stopPropagation()
-              overlay.openOverlay({
-                relationshipsOf: data.fqn
-              })
-            }}>
-            <IconTransform stroke={1.8} style={{ width: '72%' }} />
-          </Action>
+          {enableRelationshipBrowser && (
+            <Action
+              onClick={(event) => {
+                event.stopPropagation()
+                overlay.openOverlay({
+                  relationshipsOf: data.fqn
+                })
+              }}>
+              <IconTransform stroke={1.8} style={{ width: '72%' }} />
+            </Action>
+          )}
           {onOpenSource && (
             <Action
               onClick={(event) => {