@likec4/diagram 1.17.1 → 1.18.0

package/src/overlays/Overlays.tsx

@@ -1,9 +1,10 @@
-import { ActionIcon, Box, FocusTrap, RemoveScroll } from '@mantine/core'
+import { ActionIcon, Box, Button, FocusTrap, Group, Notification, RemoveScroll, Text } 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, type PropsWithChildren, useEffect, useMemo, useRef } from 'react'
+import { ErrorBoundary, type FallbackProps } from 'react-error-boundary'
 import { isNullish } from 'remeda'
 import { type DiagramState, useDiagramState, useDiagramStoreApi } from '../hooks/useDiagramState'
 import { EdgeDetailsXYFlow } from './edge-details/EdgeDetailsXYFlow'
@@ -12,6 +13,36 @@ import { OverlayContext, useOverlayDialog } from './OverlayContext'
 import * as css from './Overlays.css'
 import { RelationshipsOverlay } from './relationships-of/RelationshipsOverlay'
 
+function Fallback({ error, resetErrorBoundary }: FallbackProps) {
+  // Call resetErrorBoundary() to reset the error boundary and retry the render.
+  const errorString = error instanceof Error ? error.message : 'Unknown error'
+  return (
+    <Box className={css.container} p={'lg'}>
+      <Notification
+        icon={<IconX style={{ width: 16, height: 16 }} />}
+        styles={{
+          icon: {
+            alignSelf: 'flex-start'
+          }
+        }}
+        color={'red'}
+        title={'Oops, something went wrong'}
+        py={'lg'}
+        withCloseButton={false}>
+        <Text
+          style={{
+            whiteSpace: 'preserve-breaks'
+          }}>
+          {errorString}
+        </Text>
+        <Group gap={'xs'} mt="sm">
+          <Button color="gray" size="xs" variant="light" onClick={() => resetErrorBoundary()}>Reset</Button>
+        </Group>
+      </Notification>
+    </Box>
+  )
+}
+
 export const Overlays = memo(() => {
   const diagramStore = useDiagramStoreApi()
   const {
@@ -53,68 +84,70 @@ export const Overlays = memo(() => {
 
   return (
     <OverlayContext.Provider value={ctxValue}>
-      <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>
+      <ErrorBoundary FallbackComponent={Fallback} onReset={() => ctxValue.close()}>
+        <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>
+      </ErrorBoundary>
     </OverlayContext.Provider>
   )
 })

package/src/overlays/edge-details/EdgeDetailsXYFlow.tsx

@@ -194,7 +194,9 @@ export const EdgeDetailsXYFlow = memo<{ edgeId: EdgeId }>(function EdgeDetailsXY
       // }}
       onEdgeClick={(e, edge) => {
         e.stopPropagation()
-        diagramStore.getState().onOpenSourceRelation?.(edge.data.relation.id)
+        diagramStore.getState().onOpenSource?.({
+          relation: edge.data.relationId
+        })
       }}
       // onEdgeClick={(e, edge) => {
       //   e.stopPropagation()

package/src/overlays/edge-details/_types.ts

@@ -1,4 +1,4 @@
-import type { ComputedNode, Fqn, Relation, ViewID } from '@likec4/core'
+import type { ComputedNode, Fqn, RelationId, ViewId } from '@likec4/core'
 import type { Edge as ReactFlowEdge, Node as ReactFlowNode, ReactFlowInstance } from '@xyflow/react'
 import type { SetRequired } from 'type-fest'
 
@@ -10,7 +10,7 @@ export namespace XYFlowTypes {
       in: string[]
       out: string[]
     }
-    navigateTo: ViewID | null
+    navigateTo: ViewId | null
     hovered?: boolean
     /**
      * Whether the node is dimmed
@@ -27,7 +27,11 @@ export namespace XYFlowTypes {
 
   export type Edge = Omit<ReactFlowEdge, 'data' | 'type'> & {
     data: {
-      relation: Relation
+      technology: string | null
+      description: string | null
+      relationId: RelationId
+      // relation: Relation
+      navigateTo: ViewId | null
       hovered?: boolean
       dimmed?: boolean
     }

package/src/overlays/edge-details/use-layouted-edge-details.ts

@@ -84,7 +84,7 @@ const graphId = (node: XYFlowTypes.Node) => ({
 })
 
 function nodeData(
-  element: LikeC4Model.ElementModel,
+  element: LikeC4Model.Element,
   ctx: Context
 ): Omit<XYFlowTypes.Node['data'], 'column'> {
   // We try to inherit style from existing diagram node
@@ -93,7 +93,7 @@ function nodeData(
   // Ansector separetely, because we want to inherit
   // color from it if there is no diagram node
   const ancestor = diagramNode ?? pipe(
-    element.ancestors(),
+    element.ancestors().toArray(),
     map(ancestor => ctx.diagramNodes.get(ancestor.id)),
     filter(isTruthy),
     first()
@@ -104,11 +104,11 @@ function nodeData(
     element: {
       kind: element.kind,
       title: diagramNode?.title ?? element.title,
-      description: diagramNode?.description ?? element.element.description,
+      description: diagramNode?.description ?? element.description,
       color: diagramNode?.color ?? ancestor?.color ?? element.color,
       shape: diagramNode?.shape ?? element.shape
     },
-    navigateTo: diagramNode?.navigateTo ?? first(element.viewsOf())?.id ?? null,
+    navigateTo: diagramNode?.navigateTo ?? first(element.scopedViews().take(1).toArray())?.id ?? null,
     ports: {
       in: [],
       out: []
@@ -118,7 +118,7 @@ function nodeData(
 
 function createNode(
   nodeType: XYFlowTypes.Node['type'],
-  element: LikeC4Model.ElementModel,
+  element: LikeC4Model.Element,
   ctx: Context
 ): XYFlowTypes.Node {
   let node = ctx.xynodes.get(element.id)
@@ -129,7 +129,7 @@ function createNode(
 
   // Create parent node
   const parent = pipe(
-    element.ancestors(),
+    element.ancestors().toArray(),
     takeWhile(ancestor => !isAncestor(ancestor.id, ctx.edge.source) && !isAncestor(ancestor.id, ctx.edge.target)),
     first(),
     found => found ? createNode('compound', found, ctx) : null
@@ -225,10 +225,14 @@ function layout(
 
   const relations = edge.relations
     .map(r => {
-      const relation = likec4model.relationship(r).relationship
-      all.add(relation.source)
-      all.add(relation.target)
-      return relation
+      const relation = likec4model.relationship(r)
+      all.add(relation.source.id)
+      all.add(relation.target.id)
+      return {
+        source: relation.source.id,
+        target: relation.target.id,
+        relation: relation.$relationship
+      }
     })
     .sort(compareRelations)
     .reverse()
@@ -258,10 +262,10 @@ function layout(
     g.setDefaultEdgeLabel(() => ({ width: 250 }))
   }
 
-  for (const relation of relations) {
-    const source = ctx.xynodes.get(relation.source)
+  for (const { relation, ...points } of relations) {
+    const source = ctx.xynodes.get(points.source)
     invariant(source, 'source node not found')
-    const target = ctx.xynodes.get(relation.target)
+    const target = ctx.xynodes.get(points.target)
     invariant(target, 'target node not found')
 
     source.data.ports.out.push(target.id)
@@ -276,7 +280,10 @@ function layout(
       sourceHandle: target.id,
       targetHandle: source.id,
       data: {
-        relation
+        relationId: relation.id,
+        navigateTo: relation.navigateTo ?? null,
+        technology: relation.technology ?? null,
+        description: relation.description ?? null
       },
       label: relation.title,
       zIndex: ZIndexes.edge,

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

@@ -29,7 +29,7 @@ function selector(s: DiagramState) {
     currentViewId: s.view.id,
     enableRelationshipBrowser: s.enableRelationshipBrowser,
     onNavigateTo: s.onNavigateTo,
-    onOpenSource: s.onOpenSourceElement
+    onOpenSource: s.onOpenSource
   }
 }
 
@@ -119,7 +119,9 @@ export function ElementNode({
             <Action
               onClick={(event) => {
                 event.stopPropagation()
-                onOpenSource(data.fqn)
+                onOpenSource({
+                  element: data.fqn
+                })
               }}>
               <IconFileSymlink stroke={1.8} style={{ width: '72%' }} />
             </Action>

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

@@ -2,7 +2,7 @@ import { ActionIcon, Box, Stack, Text } from '@mantine/core'
 import { IconZoomScan } from '@tabler/icons-react'
 import { BaseEdge, EdgeLabelRenderer, type EdgeProps, getBezierPath } from '@xyflow/react'
 import clsx from 'clsx'
-import { useDiagramState, useDiagramStoreApi } from '../../../hooks/useDiagramState'
+import { useDiagramState } from '../../../hooks/useDiagramState'
 import { stopPropagation } from '../../../xyflow/utils'
 import { useOverlayDialog } from '../../OverlayContext'
 import type { XYFlowTypes } from '../_types'
@@ -17,7 +17,7 @@ export function RelationshipEdge({
   const overlay = useOverlayDialog()
   const onNavigateTo = useDiagramState(s => s.onNavigateTo)
   const [edgePath, labelX, labelY] = getBezierPath(props)
-  const navigateTo = data.relation.navigateTo
+  const navigateTo = data.navigateTo
   return (
     <>
       <g
@@ -51,10 +51,10 @@ export function RelationshipEdge({
               {label}
             </Text>
           )}
-          {data.relation.technology && (
+          {data.technology && (
             <Text component={'div'} className={css.edgeLabelTechnology}>
               {'[ '}
-              {data.relation.technology}
+              {data.technology}
               {' ]'}
             </Text>
           )}