@likec4/diagram 1.17.0 → 1.18.0

package/src/overlays/element-details/ElementDetailsCard.tsx

@@ -1,13 +1,15 @@
 import {
-  type ComputedView,
-  type DiagramNode,
+  ComputedNode,
+  ComputedView,
   type DiagramView,
-  type EdgeId,
   type Element,
   type Fqn,
   invariant,
+  isDeploymentView,
+  isScopedElementView,
+  type LikeC4View,
   type Link,
-  type ViewID
+  type ViewId
 } from '@likec4/core'
 import {
   ActionIcon,
@@ -37,20 +39,20 @@ import {
   Tooltip as MantineTooltip,
   UnstyledButton
 } from '@mantine/core'
-import { useViewportSize } from '@mantine/hooks'
-import { IconCheck, IconCopy, IconExternalLink, IconFileSymlink, IconZoomScan } from '@tabler/icons-react'
-import { useInternalNode } from '@xyflow/react'
+import { useSessionStorage, useViewportSize } from '@mantine/hooks'
+import { IconCheck, IconCopy, IconExternalLink, IconFileSymlink, IconStack2, IconZoomScan } from '@tabler/icons-react'
 import clsx from 'clsx'
 import { m, type PanInfo, useDragControls, useMotionValue } from 'framer-motion'
-import { type PropsWithChildren, type ReactNode, useCallback, useEffect, useRef, useState } from 'react'
-import { clamp, find, isNullish, map, only, partition, pick, pipe, unique } from 'remeda'
-import { useDiagramState, useDiagramStoreApi, useXYFlow } from '../../hooks'
+import { memo, type PropsWithChildren, useCallback, useEffect, useRef } from 'react'
+import { clamp, find, isNullish, map, only, partition, pick, pipe } from 'remeda'
+import { useDiagramState, useDiagramStoreApi, useXYFlow, useXYInternalNode } from '../../hooks'
 import type { ElementIconRenderer, OnNavigateTo } from '../../LikeC4Diagram.props'
-import { useLikeC4Model } from '../../likec4model'
+import { useLikeC4CurrentViewModel } from '../../likec4model'
 import { useOverlayDialog } from '../OverlayContext'
 import * as css from './ElementDetailsCard.css'
+import { TabPanelDeployments } from './TabPanelDeployments'
 import { TabPanelRelationships } from './TabPanelRelationships'
-import { TabElementStructure } from './TabPanelStructure'
+import { TabPanelStructure } from './TabPanelStructure'
 
 const Divider = MantineDivider.withProps({
   mb: 8,
@@ -88,62 +90,68 @@ type ElementDetailsCardProps = {
 
 const MIN_PADDING = 24
 
-export function ElementDetailsCard({ fqn }: ElementDetailsCardProps) {
+const TABS = ['Properties', 'Relationships', 'Views', 'Structure', 'Deployments'] as const
+type TabName = typeof TABS[number]
+
+export const ElementDetailsCard = memo(({ fqn }: ElementDetailsCardProps) => {
   const windowSize = useViewportSize()
   const windowWidth = windowSize.width || window.innerWidth || 1200,
     windowHeight = windowSize.height || window.innerHeight || 800
   const xyflow = useXYFlow()
-  const xynode = useInternalNode(fqn)
+  const xynode = useXYInternalNode(fqn)
   invariant(xynode, `XYNode with id ${fqn} not found`)
 
   const overlay = useOverlayDialog()
-  const [activeTab, setActiveTab] = useState<'Properties' | 'Relationships' | 'Views'>('Properties')
+  const [activeTab, setActiveTab] = useSessionStorage<TabName>({
+    key: `likec4:element-details:active-tab`,
+    defaultValue: 'Properties'
+  })
   const diagramApi = useDiagramStoreApi()
+  const viewModel = useLikeC4CurrentViewModel()
   const {
     view: currentView,
     renderIcon,
-    onNavigateTo,
-    onOpenSourceElement: onOpenSource
-  } = useDiagramState(pick(['view', 'renderIcon', 'onNavigateTo', 'onOpenSourceElement']))
-  const element = currentView.nodes.find(n => n.id === fqn)
-  invariant(element, `DiagramNode with fqn ${fqn} not found`)
-
-  const likec4Model = useLikeC4Model(true)
-  const elementModel = likec4Model.element(fqn)
-  const viewId = currentView.id
+    onOpenSource
+  } = useDiagramState(pick(['view', 'renderIcon', 'onNavigateTo', 'onOpenSource']))
+  const diagramNode = currentView.nodes.find(n => n.id === fqn)
+  invariant(diagramNode, `DiagramNode with fqn ${fqn} not found`)
+  const nodeModel = viewModel.findNode(fqn)
+  invariant(nodeModel && nodeModel.hasElement(), `NodeModel with fqn ${fqn} not found`)
+  const elementModel = nodeModel.element
+  const viewId = viewModel.id
 
   const elementIcon = ElementIcon({
-    element,
+    element: nodeModel.$node,
     viewId,
     renderIcon
   })
 
-  const incoming = elementModel.incoming().map(r => r.id)
-  const outgoing = elementModel.outgoing().map(r => r.id)
+  // const incoming = elementModel.incoming().map(r => r.id).toArray()
+  // const outgoing = elementModel.outgoing().map(r => r.id).toArray()
 
-  const findRelationIds = (edgeId: EdgeId) => currentView.edges.find((edge) => edge.id === edgeId)?.relations ?? []
+  // const incomingInView = unique(nodeModel.incoming().flatMap(e => e.$edge.relations).toArray())
+  // const outgoingInView = unique(nodeModel.outgoing().flatMap(e => e.$edge.relations).toArray())
 
-  const incomingInView = unique(element.inEdges.flatMap(findRelationIds))
-  const outgoingInView = unique(element.outEdges.flatMap(findRelationIds))
-
-  const notIncludedRelations = [
-    ...incoming,
-    ...outgoing
-  ].filter(r => !incomingInView.includes(r) && !outgoingInView.includes(r)).length
+  // const notIncludedRelations = [
+  //   ...incoming,
+  //   ...outgoing
+  // ].filter(r => !incomingInView.includes(r) && !outgoingInView.includes(r)).length
 
   const [viewsOf, otherViews] = pipe(
-    elementModel.views(),
-    map(v => v.view as ComputedView),
-    partition(v => v.__ !== 'dynamic' && v.viewOf === fqn)
+    [...elementModel.views()],
+    map(v => v.$view),
+    partition(view => {
+      const v = view as LikeC4View
+      return isScopedElementView(v) && v.viewOf === fqn
+    })
   )
 
-  const defaultView = element.navigateTo
-    ? likec4Model.view(element.navigateTo).view
-    : (find(viewsOf, v => v.id !== currentView.id) ?? null)
+  const defaultView = nodeModel.navigateTo?.$view
+    ?? find(viewsOf, v => v.id !== viewModel.id) ?? null
 
-  const defaultLink = element.links && only(element.links)
+  const defaultLink = only(nodeModel.links)
 
-  const onNavigateToCb = useCallback((toView: ViewID, e?: React.MouseEvent): void => {
+  const onNavigateToCb = useCallback((toView: ViewId, e?: React.MouseEvent): void => {
     e?.stopPropagation()
     const { onNavigateTo } = diagramApi.getState()
     if (!onNavigateTo) {
@@ -152,21 +160,21 @@ export function ElementDetailsCard({ fqn }: ElementDetailsCardProps) {
     overlay.close(() => {
       diagramApi.setState({
         lastOnNavigate: {
-          fromView: currentView.id,
+          fromView: viewModel.id,
           toView,
           fromNode: fqn
         }
       })
       onNavigateTo(toView)
     })
-  }, [fqn, currentView.id])
+  }, [fqn, viewModel.id])
   const controls = useDragControls()
 
-  const isCompound = element.children.length > 0
+  const isCompound = nodeModel.children.length > 0
 
   const fromPositon = xyflow.flowToScreenPosition({
-    x: xynode.internals.positionAbsolute.x + element.width / 2,
-    y: xynode.internals.positionAbsolute.y + (isCompound ? 0 : element.height / 2)
+    x: xynode.internals.positionAbsolute.x + diagramNode.width / 2,
+    y: xynode.internals.positionAbsolute.y + (isCompound ? 0 : diagramNode.height / 2)
   })
 
   const _width = Math.min(700, windowWidth - MIN_PADDING * 2)
@@ -272,14 +280,14 @@ export function ElementDetailsCard({ fqn }: ElementDetailsCardProps) {
               overlay.close()
             }
           }}
-          data-likec4-color={element.color}>
+          data-likec4-color={nodeModel.color}>
           <FocusTrap>
             <FocusTrapInitialFocus />
             <Box
               className={css.cardHeader}
               onPointerDown={e => controls.start(e)}>
-              <Group align="start" justify="space-between" gap={'sm'} mb={'sm'}>
-                <Group align="start" gap={'sm'} style={{ cursor: 'default' }}>
+              <Group align="start" justify="space-between" gap={'sm'} mb={'sm'} wrap="nowrap">
+                <Group align="start" gap={'sm'} style={{ cursor: 'default' }} wrap="nowrap">
                   {elementIcon}
                   <Box>
                     <Text
@@ -289,9 +297,9 @@ export function ElementDetailsCard({ fqn }: ElementDetailsCardProps) {
                       className={css.title}>
                       {elementModel.title}
                     </Text>
-                    {element.notation && (
+                    {nodeModel.$node.notation && (
                       <Text component="div" c={'dimmed'} fz={'sm'} fw={500} lh={1.3} lineClamp={1}>
-                        {element.notation}
+                        {nodeModel.$node.notation}
                       </Text>
                     )}
                   </Box>
@@ -304,18 +312,18 @@ export function ElementDetailsCard({ fqn }: ElementDetailsCardProps) {
                   }}
                 />
               </Group>
-              <Group align="baseline" gap={'sm'}>
+              <Group align="baseline" gap={'sm'} wrap="nowrap">
                 <Box>
                   <SmallLabel>kind</SmallLabel>
-                  <Badge radius={'sm'} size="sm" fw={600} color="gray">{element.kind}</Badge>
+                  <Badge radius={'sm'} size="sm" fw={600} color="gray">{elementModel.kind}</Badge>
                 </Box>
                 <Box flex={1}>
                   <SmallLabel>tags</SmallLabel>
                   <Flex gap={4} flex={1} mt={6}>
-                    {element.tags?.map((tag) => (
+                    {elementModel.tags.map((tag) => (
                       <Badge key={tag} radius={'sm'} size="sm" fw={600} variant="gradient">#{tag}</Badge>
                     ))}
-                    {!element.tags && <Badge radius={'sm'} size="sm" fw={600} color="gray">—</Badge>}
+                    {elementModel.tags.length === 0 && <Badge radius={'sm'} size="sm" fw={600} color="gray">—</Badge>}
                   </Flex>
                 </Box>
                 <ActionIconGroup
@@ -342,7 +350,9 @@ export function ElementDetailsCard({ fqn }: ElementDetailsCardProps) {
                         radius="sm"
                         onClick={e => {
                           e.stopPropagation()
-                          diagramApi.getState().onOpenSourceElement?.(fqn)
+                          diagramApi.getState().onOpenSource?.({
+                            element: elementModel.id
+                          })
                         }}
                       >
                         <IconFileSymlink stroke={1.8} style={{ width: '62%' }} />
@@ -377,40 +387,33 @@ export function ElementDetailsCard({ fqn }: ElementDetailsCardProps) {
                 panel: css.tabsPanel
               }}>
               <TabsList>
-                <TabsTab value="Properties">
-                  Properties
-                </TabsTab>
-                <TabsTab value="Relationships">
-                  Relationships
-                </TabsTab>
-                <TabsTab value="Views">
-                  Views
-                </TabsTab>
-                <TabsTab value="Structure">
-                  Structure
-                </TabsTab>
+                {TABS.map(tab => (
+                  <TabsTab key={tab} value={tab}>
+                    {tab}
+                  </TabsTab>
+                ))}
               </TabsList>
 
               <TabsPanel value="Properties">
                 <ScrollArea scrollbars="y" type="auto">
                   <Box className={css.propertiesGrid} pt={'xs'}>
                     <ElementProperty title="description" emptyValue="no description">
-                      {element.description}
+                      {elementModel.description}
                     </ElementProperty>
-                    {element.technology && (
+                    {elementModel.technology && (
                       <ElementProperty title="technology">
-                        {element.technology}
+                        {elementModel.technology}
                       </ElementProperty>
                     )}
-                    {element.links && (
+                    {elementModel.links.length > 0 && (
                       <>
                         <PropertyLabel>links</PropertyLabel>
                         <Stack gap={'xs'} align="flex-start">
-                          {element.links.map((link, i) => <ElementLink key={i} value={link} />)}
+                          {elementModel.links.map((link, i) => <ElementLink key={i} value={link} />)}
                         </Stack>
                       </>
                     )}
-                    {elementModel.element.metadata && <ElementMetata value={elementModel.element.metadata} />}
+                    {elementModel.$element.metadata && <ElementMetata value={elementModel.$element.metadata} />}
                   </Box>
                 </ScrollArea>
               </TabsPanel>
@@ -419,6 +422,7 @@ export function ElementDetailsCard({ fqn }: ElementDetailsCardProps) {
                 {activeTab === 'Relationships' && (
                   <TabPanelRelationships
                     element={elementModel}
+                    node={nodeModel}
                     currentView={currentView} />
                 )}
               </TabsPanel>
@@ -460,7 +464,13 @@ export function ElementDetailsCard({ fqn }: ElementDetailsCardProps) {
 
               <TabsPanel value="Structure">
                 <ScrollArea scrollbars="y" type="auto">
-                  <TabElementStructure element={elementModel} />
+                  <TabPanelStructure element={elementModel} />
+                </ScrollArea>
+              </TabsPanel>
+
+              <TabsPanel value="Deployments">
+                <ScrollArea scrollbars="y" type="auto">
+                  <TabPanelDeployments elementFqn={elementModel.id} />
                 </ScrollArea>
               </TabsPanel>
             </Tabs>
@@ -477,16 +487,17 @@ export function ElementDetailsCard({ fqn }: ElementDetailsCardProps) {
       </RemoveScroll>
     </m.dialog>
   )
-}
+})
+ElementDetailsCard.displayName = 'ElementDetailsCard'
 
 const ElementIcon = (
   { element, viewId, renderIcon: RenderIcon }: {
-    element: DiagramNode
+    element: ComputedNode
     viewId: string
     renderIcon: ElementIconRenderer | null
   }
 ) => {
-  if (!element.icon) {
+  if (!element.icon || element.icon === 'none') {
     return null
   }
   let icon = null as React.ReactNode
@@ -525,7 +536,9 @@ const ViewButton = ({
     <UnstyledButton className={css.viewButton} onClick={e => onNavigateTo(view.id, e)}>
       <Group gap={6} align="start" wrap="nowrap">
         <ThemeIcon size={'sm'} variant="transparent">
-          <IconZoomScan stroke={1.8} />
+          {isDeploymentView(view)
+            ? <IconStack2 stroke={1.8} />
+            : <IconZoomScan stroke={1.8} />}
         </ThemeIcon>
         <Box>
           <Text component="div" className={css.viewButtonTitle} lineClamp={1}>

package/src/overlays/element-details/TabPanelDeployments.css.ts

@@ -0,0 +1,69 @@
+import { rem, Text, ThemeIcon } from '@mantine/core'
+import { globalStyle, style } from '@vanilla-extract/css'
+import { easings, mantine, transitions, whereDark } from '../../theme-vars'
+
+export const treeNode = style({})
+globalStyle(`${treeNode}[data-level='1']`, {
+  marginBottom: rem(16)
+})
+
+export const treeNodeLabel = style({
+  cursor: 'default',
+  marginTop: 0,
+  marginBottom: 0
+})
+
+const label = style({
+  transition: transitions.fast,
+  color: mantine.colors.gray[7],
+  ':hover': {
+    transitionTimingFunction: easings.out
+  },
+  selectors: {
+    [`${whereDark} &`]: {
+      color: mantine.colors.dark[1]
+    }
+  }
+})
+globalStyle(`${label} > *`, {
+  transition: transitions.fast
+})
+globalStyle(`${label}:hover > :not([data-no-transform])`, {
+  transitionTimingFunction: easings.out,
+  transform: 'translateX(1px)'
+})
+globalStyle(`.mantine-Button-root:hover ${label} > :not([data-no-transform])`, {
+  transitionTimingFunction: easings.out,
+  transform: 'translateX(1px)'
+})
+
+export const nodeLabel = style([label, {}])
+
+export const instanceLabel = style([label, {
+  cursor: 'pointer',
+  width: '100%',
+  justifyContent: 'stretch',
+  flexWrap: 'nowrap',
+  height: rem(36),
+  paddingInlineStart: rem(16),
+  paddingInlineEnd: rem(10),
+  borderRadius: mantine.radius.sm,
+  alignItems: 'center',
+  color: mantine.colors.gray[7],
+  selectors: {
+    [`${whereDark} &`]: {
+      color: mantine.colors.gray.lightColor
+    }
+  },
+  ':hover': {
+    background: mantine.colors.gray.lightHover
+  }
+}])
+globalStyle(`${instanceLabel} .tabler-icon`, {
+  transition: transitions.fast,
+  width: '90%',
+  opacity: 0.65
+})
+// globalStyle(`.mantine-Button-root:hover ${instanceLabel} .tabler-icon`, {
+//   opacity: 0.8
+// })

package/src/overlays/element-details/TabPanelDeployments.tsx

@@ -0,0 +1,217 @@
+import type { Fqn, LikeC4Model } from '@likec4/core'
+import { Alert, Box, Button, Group, Menu, rem, Text, ThemeIcon, Tree, useTree } from '@mantine/core'
+import { IconInfoCircle, IconTarget, IconZoomScan } from '@tabler/icons-react'
+import { memo, type ReactNode, useEffect, useMemo } from 'react'
+import { useCurrentViewId, useDiagramStoreApi } from '../../hooks'
+import { useLikeC4ElementModel } from '../../likec4model/useLikeC4Model'
+import { stopPropagation } from '../../xyflow/utils'
+import * as css from './TabPanelDeployments.css'
+
+interface TreeNodeData {
+  label: ReactNode
+  value: string
+  type: 'node' | 'instance'
+  children: TreeNodeData[]
+}
+
+type TabPanelDeploymentsProps = {
+  elementFqn: Fqn
+}
+
+const DeploymentNodeRenderer = ({
+  node
+}: {
+  node: LikeC4Model.DeploymentNode
+}) => (
+  <Group className={css.nodeLabel} gap={6} align="baseline" wrap="nowrap">
+    <Text component="div" fz={11} c="dimmed">{node.kind}:</Text>
+    <Text component="div" fz={'sm'} fw={'500'}>{node.title}</Text>
+  </Group>
+)
+
+const DeployedInstanceRenderer = (
+  {
+    instance
+  }: {
+    instance: LikeC4Model.DeployedInstance
+  }
+) => {
+  const currentViewId = useCurrentViewId()
+  const diagramApi = useDiagramStoreApi()
+  const views = [...instance.views()]
+  return (
+    (
+      <Group className={css.instanceLabel} gap={4}>
+        <ThemeIcon color="gray" variant="transparent" size={'xs'} flex={0}>
+          <IconTarget stroke={1.2} />
+        </ThemeIcon>
+        <Text component="div" fz={'sm'} fw={'500'} flex={'1 1 100%'}>{instance.title}</Text>
+        <Box onClick={stopPropagation} pos={'relative'} data-no-transform flex={0}>
+          {views.length === 0 && (
+            <Button size="compact-xs" variant="transparent" color="gray" disabled>
+              no views
+            </Button>
+          )}
+          {views.length > 0 && (
+            <Menu
+              shadow="md"
+              withinPortal={false}
+              position="bottom-start"
+              offset={0}
+              // trigger={'click-hover'}
+              // openDelay={100}
+              // closeDelay={200}
+              closeOnClickOutside
+              clickOutsideEvents={['pointerdown', 'mousedown', 'click']}
+              closeOnEscape
+              trapFocus
+            >
+              <Menu.Target>
+                <Button size="compact-xs" variant="subtle" color="gray">
+                  {views.length} view{views.length > 1 ? 's' : ''}
+                </Button>
+              </Menu.Target>
+
+              <Menu.Dropdown>
+                {views.map(view => (
+                  <Menu.Item
+                    key={view.id}
+                    px={'xs'}
+                    py={4}
+                    disabled={view.id === currentViewId}
+                    leftSection={
+                      <ThemeIcon size={'sm'} variant="transparent" color="gray">
+                        <IconZoomScan stroke={1.8} opacity={0.65} />
+                      </ThemeIcon>
+                    }
+                    styles={{
+                      itemSection: {
+                        marginInlineEnd: rem(8)
+                      }
+                    }}
+                    onClick={e => {
+                      e.stopPropagation()
+                      diagramApi.getState().onNavigateTo?.(view.id)
+                    }}>
+                    {view.title}
+                  </Menu.Item>
+                ))}
+              </Menu.Dropdown>
+            </Menu>
+          )}
+        </Box>
+      </Group>
+    )
+  )
+}
+
+export const TabPanelDeployments = memo<TabPanelDeploymentsProps>(({ elementFqn }) => {
+  const element = useLikeC4ElementModel(elementFqn)
+  const deployments = [...element.deployments()]
+
+  const tree = useTree({
+    multiple: false
+  })
+
+  const data = useMemo(() => {
+    let roots = [] as TreeNodeData[]
+    let treeItems = new Map<string, TreeNodeData>()
+
+    for (const instance of element.deployments()) {
+      let instanceNode: TreeNodeData = {
+        label: <DeployedInstanceRenderer instance={instance} />,
+        value: instance.id,
+        type: 'instance' as const,
+        children: []
+      }
+      treeItems.set(instance.id, instanceNode)
+
+      let ancestor = instance.parent as LikeC4Model.DeploymentNode | null
+      while (ancestor) {
+        let ancestorNode = treeItems.get(ancestor.id)
+        if (ancestorNode) {
+          ancestorNode.children.push(instanceNode)
+          break
+        }
+        ancestorNode = {
+          label: <DeploymentNodeRenderer node={ancestor} />,
+          value: ancestor.id,
+          type: 'node' as const,
+          children: [instanceNode]
+        }
+        treeItems.set(ancestor.id, ancestorNode)
+        instanceNode = ancestorNode
+        ancestor = ancestor.parent
+      }
+
+      if (!ancestor && !roots.includes(instanceNode)) {
+        roots.push(instanceNode)
+      }
+    }
+    return roots
+  }, [element])
+
+  useEffect(() => {
+    tree.expandAllNodes()
+  }, [data])
+
+  if (deployments.length === 0) {
+    return (
+      <Alert variant="light" color="gray" icon={<IconInfoCircle />}>
+        This element does not have any deployments
+      </Alert>
+    )
+  }
+
+  return (
+    // <Box></Box>
+    <Tree
+      levelOffset={'sm'}
+      allowRangeSelection={false}
+      classNames={{
+        node: css.treeNode,
+        label: css.treeNodeLabel
+      }}
+      styles={{
+        root: {
+          position: 'relative',
+
+          width: 'min-content',
+          minWidth: 300
+        }
+      }}
+      data={data}
+      tree={tree}
+      renderNode={({ node, selected, elementProps, hasChildren }) => (
+        <Box
+          {...elementProps}
+          style={{
+            ...(!hasChildren && {
+              marginBottom: rem(4)
+            })
+          }}
+        >
+          {hasChildren
+            ? (
+              <Button
+                fullWidth
+                color={'gray'}
+                variant={selected ? 'transparent' : 'subtle'}
+                size="xs"
+                justify="flex-start"
+                styles={{
+                  root: {
+                    position: 'unset',
+                    paddingInlineStart: rem(16)
+                  }
+                }}
+              >
+                {node.label}
+              </Button>
+            )
+            : node.label}
+        </Box>
+      )}
+    />
+  )
+})

package/src/overlays/element-details/TabPanelRelationships.tsx

@@ -1,4 +1,4 @@
-import { type DiagramView, type EdgeId, type LikeC4Model, nameFromFqn, nonNullable } from '@likec4/core'
+import { type DiagramView, type LikeC4Model, nameFromFqn } from '@likec4/core'
 import { Box, Button, Group, Paper, SegmentedControl, Stack, Text, ThemeIcon } from '@mantine/core'
 import { useId } from '@mantine/hooks'
 import { IconArrowRight, IconExternalLink, IconInfoCircle } from '@tabler/icons-react'
@@ -14,26 +14,25 @@ import * as css from './TabPanelRelationships.css'
 
 type RelationshipsTabPanelProps = {
   currentView: DiagramView
-  element: LikeC4Model.ElementModel
+  node: LikeC4Model.Node
+  element: LikeC4Model.Element
 }
 
 export function TabPanelRelationships({
   currentView,
+  node,
   element
 }: RelationshipsTabPanelProps) {
   const layoutId = useId()
   const enableRelationshipBrowser = useDiagramState(s => s.enableRelationshipBrowser)
   const overlay = useOverlayDialog()
   const [scope, setScope] = useState<'global' | 'view'>('view')
-  const node = nonNullable(currentView.nodes.find((n) => n.id === element.id))
 
-  const incoming = element.incoming().map(r => r.id)
-  const outgoing = element.outgoing().map(r => r.id)
+  const incoming = element.incoming().map(r => r.id).toArray()
+  const outgoing = element.outgoing().map(r => r.id).toArray()
 
-  const findRelationIds = (edgeId: EdgeId) => currentView.edges.find((edge) => edge.id === edgeId)?.relations ?? []
-
-  const incomingInView = unique(node.inEdges.flatMap(findRelationIds))
-  const outgoingInView = unique(node.outEdges.flatMap(findRelationIds))
+  const incomingInView = unique(node.incoming().flatMap(e => e.$edge.relations).toArray())
+  const outgoingInView = unique(node.outgoing().flatMap(e => e.$edge.relations).toArray())
 
   const notIncludedRelations = [
     ...incoming,