@likec4/diagram 1.27.0 → 1.27.2

package/src/overlays/relationships-browser/_types.ts

@@ -83,6 +83,8 @@ export namespace RelationshipsBrowserTypes {
   // Extend the edge types provided by SharedFlowTypes with RelationshipsOfEdgeData
 
   export type EdgeData = Base.EdgeData<{
+    sourceFqn: Fqn
+    targetFqn: Fqn
     relations: NonEmptyArray<RelationId>
     color: Color | undefined
     label: string | null

package/src/overlays/relationships-browser/actor.ts

@@ -26,10 +26,11 @@ import { Base } from '../../base'
 import { MinZoom, ZIndexes } from '../../base/const'
 import { updateEdges } from '../../base/updateEdges'
 import { updateNodes } from '../../base/updateNodes'
+import { typedSystem } from '../../state/utils'
 import { centerXYInternalNode } from '../../utils'
-import type { LayoutRelationshipsViewResult } from './-useRelationshipsView'
 import type { RelationshipsBrowserTypes } from './_types'
 import { ViewPadding } from './const'
+import type { LayoutRelationshipsViewResult } from './layout'
 import { viewToNodesEdge } from './useViewToNodesEdges'
 
 type XYFLowInstance = ReactFlowInstance<RelationshipsBrowserTypes.Node, RelationshipsBrowserTypes.Edge>
@@ -247,6 +248,7 @@ export const relationshipsBrowserLogic = setup({
     layouter,
   },
   guards: {
+    hasViewId: ({ context }) => context.viewId !== null,
     isReady: ({ context }) => context.xyflow !== null && context.xystore !== null && context.layouted !== null,
     anotherSubject: ({ context, event }) => {
       if (event.type === 'update.view') {
@@ -393,10 +395,27 @@ export const relationshipsBrowserLogic = setup({
             }
           }),
         },
+        'xyflow.edgeClick': {
+          guard: 'hasViewId',
+          actions: enqueueActions(({ event, context, system, enqueue }) => {
+            if (
+              event.edge.selected || event.edge.data.relations.length > 1
+              // (context.xyedges.some(e => e.data.dimmed === true || e.data.dimmed === 'immediate') && !event.edge.data.dimmed)
+            ) {
+              enqueue.sendTo(typedSystem(system).overlaysActorRef!, {
+                type: 'open.relationshipDetails',
+                viewId: context.viewId!,
+                source: event.edge.data.sourceFqn,
+                target: event.edge.data.targetFqn,
+              })
+            }
+          }),
+        },
         'navigate.to': {
           actions: [
             assign({
               subject: ({ event }) => event.subject,
+              viewId: ({ event, context }) => event.viewId ?? context.viewId ?? null,
               navigateFromNode: ({ event }) => event.fromNode ?? null,
             }),
           ],
@@ -443,7 +462,7 @@ export const relationshipsBrowserLogic = setup({
               actions: [
                 assign({
                   xyedges: ({ context, event }) => {
-                    const hasDimmed = context.xyedges.some(edge => edge.data.dimmed === true)
+                    const hasDimmed = context.xyedges.some(edge => edge.data.dimmed !== false || edge.selected)
                     return context.xyedges.map(edge => {
                       if (edge.id === event.edge.id) {
                         return Base.setData(edge, {
@@ -451,25 +470,26 @@ export const relationshipsBrowserLogic = setup({
                           dimmed: false,
                         })
                       }
-                      return hasDimmed && !edge.data.dimmed && !edge.selected ? Base.setDimmed(edge, 'immediate') : edge
+                      return hasDimmed && !edge.selected ? Base.setDimmed(edge, 'immediate') : edge
                     })
                   },
                 }),
                 cancel('undim.edges'),
                 cancel('dim.nonhovered.edges'),
-                raise({ type: 'dim.nonhovered.edges' }, { id: 'dim.nonhovered.edges', delay: 100 }),
+                raise({ type: 'dim.nonhovered.edges' }, { id: 'dim.nonhovered.edges', delay: 200 }),
               ],
             },
             'xyflow.edgeMouseLeave': {
               actions: [
                 assign({
-                  xyedges: ({ context, event }) =>
-                    context.xyedges.map(edge => {
+                  xyedges: ({ context, event }) => {
+                    return context.xyedges.map(edge => {
                       if (edge.id === event.edge.id) {
                         return Base.setHovered(edge, false)
                       }
                       return edge
-                    }),
+                    })
+                  },
                 }),
                 cancel('dim.nonhovered.edges'),
                 raise({ type: 'undim.edges' }, { id: 'undim.edges', delay: 400 }),
@@ -477,18 +497,23 @@ export const relationshipsBrowserLogic = setup({
             },
             'dim.nonhovered.edges': {
               actions: assign({
-                xyedges: ({ context }) => context.xyedges.map(edge => Base.setDimmed(edge, edge.data.hovered !== true)),
+                xyedges: ({ context }) =>
+                  context.xyedges.map(edge =>
+                    edge.data.hovered
+                      ? edge
+                      : Base.setDimmed(edge, edge.data.dimmed === 'immediate' ? 'immediate' : true)
+                  ),
               }),
             },
             'undim.edges': {
               actions: assign({
                 xyedges: ({ context }) => {
-                  const hasSelected = context.xyedges.some(edge => edge.selected === true)
-                  if (hasSelected) {
-                    return context.xyedges.map(edge =>
-                      Base.setDimmed(edge, edge.selected !== true ? edge.data.dimmed || 'immediate' : false)
-                    )
-                  }
+                  // const hasSelected = context.xyedges.some(edge => edge.selected === true)
+                  // if (hasSelected) {
+                  //   return context.xyedges.map(edge =>
+                  //     Base.setDimmed(edge, edge.selected !== true ? 'immediate' : false)
+                  //   )
+                  // }
                   return context.xyedges.map(Base.setDimmed(false))
                 },
               }),

package/src/overlays/relationships-browser/custom/ElementActions.tsx

@@ -1,22 +1,24 @@
 import { IconFileSymlink, IconTransform, IconZoomScan } from '@tabler/icons-react'
 import { ElementActionButtons } from '../../../base/primitives'
 import type { NodeProps } from '../../../base/types'
-import { useEnabledFeature } from '../../../context/DiagramFeatures'
+import { useEnabledFeatures } from '../../../context/DiagramFeatures'
+import { useCurrentViewId } from '../../../hooks/useCurrentViewId'
 import { useDiagram } from '../../../hooks/useDiagram'
 import type { RelationshipsBrowserTypes as Types } from '../_types'
 import { useRelationshipsBrowser, useRelationshipsBrowserState } from '../hooks'
 
 type ElementActionsProps = NodeProps<Types.ElementNodeData>
 export const ElementActions = (props: ElementActionsProps) => {
-  const { enableNavigateTo, enableVscode } = useEnabledFeature('NavigateTo', 'Vscode')
+  const { enableNavigateTo, enableVscode } = useEnabledFeatures()
   const diagram = useDiagram()
+  const currentViewId = useCurrentViewId()
   const browser = useRelationshipsBrowser()
   const subject = useRelationshipsBrowserState(s => s.context.subject)
 
   const buttons = [] as ElementActionButtons.Item[]
 
   const { navigateTo, fqn } = props.data
-  if (navigateTo && enableNavigateTo) {
+  if (navigateTo && enableNavigateTo && currentViewId !== navigateTo) {
     buttons.push({
       key: 'navigate',
       icon: <IconZoomScan />,

package/src/overlays/relationships-browser/custom/edgeTypes.tsx

@@ -67,7 +67,7 @@ export const RelationshipEdge = customEdge<RelationshipsBrowserTypes.EdgeData>((
         label="This relationship is not included in the current view"
         // withinPortal={false}
         portalProps={{
-          target: `#${browser.rootElementId.replaceAll(':', '\\:')}`,
+          target: `#${browser.rootElementId}`,
         }}
         openDelay={800}
       >

package/src/overlays/relationships-browser/hooks.ts

@@ -4,8 +4,8 @@ import { useSelector } from '@xstate/react'
 import { shallowEqual } from 'fast-equals'
 import { createContext, useContext, useMemo, useTransition } from 'react'
 import type { OverlaysActorRef } from '../overlaysActor'
-import type { LayoutRelationshipsViewResult } from './-useRelationshipsView'
 import type { RelationshipsBrowserActorRef, RelationshipsBrowserSnapshot } from './actor'
+import type { LayoutRelationshipsViewResult } from './layout'
 
 export const RelationshipsBrowserActorContext = createContext<RelationshipsBrowserActorRef | null>(null)
 
@@ -27,7 +27,7 @@ export function useRelationshipsBrowser() {
   return useMemo(() => ({
     actor,
     get rootElementId(): string {
-      return `relationships-browser-${actor.sessionId}`
+      return `relationships-browser-${actor.sessionId.replaceAll(':', '_')}`
     },
     getState: () => actor.getSnapshot().context,
     send: actor.send,

package/src/overlays/relationships-browser/{-useRelationshipsView.ts → layout.ts}

@@ -218,6 +218,8 @@ export namespace LayoutRelationshipsViewResult {
     existsInCurrentView: boolean
   }
   export type Edge = DiagramEdge & {
+    sourceFqn: Fqn
+    targetFqn: Fqn
     sourceHandle: string
     targetHandle: string
     existsInCurrentView: boolean
@@ -239,6 +241,8 @@ export function layoutRelationshipsView(
     name: string
     source: string // node id
     target: string // node id
+    sourceFqn: Fqn
+    targetFqn: Fqn
     sourceHandle: string
     targetHandle: string
     relations: RelationshipModel[]
@@ -250,6 +254,8 @@ export function layoutRelationshipsView(
         toArray(data.incoming),
         map(r => ({
           id: r.source.id,
+          sourceFqn: r.source.id,
+          targetFqn: r.target.id,
           source: incomers.byId(r.source.id).graph,
           target: subjects.byId(r.target.id).graph,
           relation: r,
@@ -259,6 +265,8 @@ export function layoutRelationshipsView(
         toArray(data.outgoing),
         map(r => ({
           id: r.target.id,
+          sourceFqn: r.source.id,
+          targetFqn: r.target.id,
           source: subjects.byId(r.source.id).graph,
           target: outgoers.byId(r.target.id).graph,
           relation: r,
@@ -284,6 +292,8 @@ export function layoutRelationshipsView(
       }, name)
       edges.push({
         name,
+        sourceFqn: grouped[0].sourceFqn,
+        targetFqn: grouped[0].targetFqn,
         source: source.id,
         sourceHandle: source.id + '_out' + (g.node(source.id).outPorts.length - 1),
         target: target.id,
@@ -444,17 +454,6 @@ export function layoutRelationshipsView(
   const [subject] = [...subjects.root]
   invariant(subject, 'Subjects should not be empty')
   let subjectBounds = nodeBounds(subjects.graphNodes.get(subject.id).id)
-  // let subjectBounds = rest.reduce((bounds, el) => {
-  //   const elBounds = nodeBounds(subjects.graphNodes.get(el.id).id)
-  //   return {
-  //     position: {
-  //       x: Math.min(bounds.position.x, elBounds.position.x),
-  //       y: Math.min(bounds.position.y, elBounds.position.y),
-  //     },
-  //     width: Math.max(bounds.width, elBounds.width),
-  //     height: Math.max(bounds.height, elBounds.height),
-  //   }
-  // }, nodeBounds(subjects.graphNodes.get(subject.id).id))
 
   const nodes = nodeIds.map(({ id }): LayoutRelationshipsViewResult.Node => {
     const { element, inPorts, outPorts, column } = g.node(id)
@@ -513,7 +512,7 @@ export function layoutRelationshipsView(
     minX = Math.min(minX, position.x)
     minY = Math.min(minY, position.y)
 
-    const navigateTo = element.defaultView?.id ?? null
+    const navigateTo = scope ? ifind(element.scopedViews(), v => v.id !== scope.id)?.id ?? null : null
 
     const inheritFromNode = scope?.findNodeWithElement(element.id)
     const scopedAncestor = scope && !inheritFromNode
@@ -577,7 +576,16 @@ export function layoutRelationshipsView(
       if (!ename) {
         return acc
       }
-      const { name, source, target, relations, sourceHandle, targetHandle } = find(edges, e => e.name === ename)!
+      const {
+        name,
+        source,
+        sourceFqn,
+        target,
+        targetFqn,
+        relations,
+        sourceHandle,
+        targetHandle,
+      } = find(edges, e => e.name === ename)!
       const onlyRelation = only(relations)
       const label = onlyRelation?.title ?? 'untitled'
       const isMultiple = relations.length > 1
@@ -587,8 +595,10 @@ export function layoutRelationshipsView(
       // const edge = g.edge(name)
       acc.push({
         id: name as EdgeId,
+        sourceFqn,
         source: source as NodeId,
         sourceHandle,
+        targetFqn,
         target: target as NodeId,
         targetHandle,
         label: isMultiple ? `${relations.length} relationships` : label,

package/src/overlays/relationships-browser/useViewToNodesEdges.ts

@@ -9,8 +9,8 @@ import {
 import { useDeepCompareMemo } from '@react-hookz/web'
 import { hasAtLeast } from 'remeda'
 import { ZIndexes } from '../../base/const'
-import { LayoutRelationshipsViewResult } from './-useRelationshipsView'
 import type { RelationshipsBrowserTypes } from './_types'
+import { LayoutRelationshipsViewResult } from './layout'
 
 // const nodeZIndex = (node: DiagramNode) => node.level - (node.children.length > 0 ? 1 : 0)
 export function viewToNodesEdge(
@@ -183,6 +183,8 @@ export function viewToNodesEdge(
       // hidden: !visiblePredicate(edge),
       deletable: false,
       data: {
+        sourceFqn: edge.sourceFqn,
+        targetFqn: edge.targetFqn,
         relations: edge.relations,
         color: edge.color ?? 'gray',
         label: edge.label,

package/src/state/DiagramActorProvider.tsx

@@ -1,24 +1,37 @@
-import type { ViewId } from '@likec4/core'
+import type { ViewId, WhereOperator } from '@likec4/core'
+import { useDeepCompareEffect } from '@react-hookz/web'
 import { useActorRef, useSelector } from '@xstate/react'
 import { useStoreApi } from '@xyflow/react'
 import { shallowEqual } from 'fast-equals'
-import { type PropsWithChildren, useEffect, useMemo, useRef } from 'react'
+import { type PropsWithChildren, useEffect } from 'react'
 import { useDiagramEventHandlersRef } from '../context/DiagramEventHandlers'
 import { DiagramFeatures, useEnabledFeatures } from '../context/DiagramFeatures'
 import { DiagramActorSafeContext } from '../hooks/safeContext'
 import { useUpdateEffect } from '../hooks/useUpdateEffect'
 import type { Types } from '../likec4diagram/types'
+import { useViewToNodesEdges } from '../likec4diagram/useViewToNodesEdges'
 import { type Input, diagramMachine } from './diagram-machine'
 import { syncManualLayoutActorLogic } from './syncManualLayoutActor'
-import type { DiagramActorRef, DiagramActorSnapshot } from './types'
+import type { DiagramActorSnapshot } from './types'
 
-type ActorContextInput = Omit<Input, 'xystore' | 'features'>
-export function DiagramActorProvider({ input, children }: PropsWithChildren<{ input: ActorContextInput }>) {
+const selectToggledFeatures = (state: DiagramActorSnapshot) => state.context.toggledFeatures
+type ActorContextInput = Omit<Input, 'xystore' | 'xynodes' | 'xyedges'>
+export function DiagramActorProvider({
+  input: {
+    view,
+    ...inputs
+  },
+  where,
+  children,
+}: PropsWithChildren<{
+  input: ActorContextInput
+  where?: WhereOperator<string, string> | undefined
+}>) {
   const handlersRef = useDiagramEventHandlersRef()
   const xystore = useStoreApi<Types.Node, Types.Edge>()
 
-  const logic = useMemo(() => {
-    return diagramMachine.provide({
+  const actorRef = useActorRef(
+    diagramMachine.provide({
       actions: {
         'trigger:NavigateTo': ((_, { viewId }) => {
           handlersRef.current.onNavigateTo?.(viewId as ViewId)
@@ -41,68 +54,45 @@ export function DiagramActorProvider({ input, children }: PropsWithChildren<{ in
           },
         }),
       },
-    })
-  }, [handlersRef])
-
-  const actorRef = useActorRef(
-    logic,
+    }),
     {
-      id: `diagram:${input.view.id}`,
+      id: `diagram:${view.id}`,
       systemId: 'diagram',
       // ...inspector,
       input: {
         xystore,
-        ...input,
+        view,
+        ...inputs,
       },
     },
   )
 
-  return (
-    <DiagramActorSafeContext value={actorRef}>
-      <SyncStore input={input} actorRef={actorRef} />
-      <DiagramActorToggledFeatures actorRef={actorRef}>
-        {children}
-      </DiagramActorToggledFeatures>
-    </DiagramActorSafeContext>
-  )
-}
-
-const SyncStore = (
-  { input: { view, xyedges, xynodes, ...inputs }, actorRef }: { input: ActorContextInput; actorRef: DiagramActorRef },
-) => {
   const features = useEnabledFeatures()
   useUpdateEffect(() => {
     actorRef.send({ type: 'update.inputs', inputs })
-  }, [actorRef, inputs])
+  }, [inputs])
 
   useEffect(() => {
     actorRef.send({ type: 'update.features', features })
-  }, [actorRef, features])
+  }, [features])
 
-  const frameReq = useRef<number>(null)
+  const { xyedges, xynodes } = useViewToNodesEdges({
+    view,
+    where,
+    nodesSelectable: inputs.nodesSelectable,
+  })
 
-  useUpdateEffect(() => {
-    frameReq.current = requestAnimationFrame(() => {
-      frameReq.current = null
-      actorRef.send({ type: 'update.view', view, xyedges, xynodes })
-    })
-    return () => {
-      if (frameReq.current != null) {
-        cancelAnimationFrame(frameReq.current)
-      }
-      frameReq.current = null
-    }
-  }, [actorRef, view, xyedges, xynodes])
+  useDeepCompareEffect(() => {
+    actorRef.send({ type: 'update.view', view, xyedges, xynodes })
+  }, [view, xyedges, xynodes])
 
-  return null
-}
-
-const selectToggledFeatures = (state: DiagramActorSnapshot) => state.context.toggledFeatures
-function DiagramActorToggledFeatures({ children, actorRef }: PropsWithChildren<{ actorRef: DiagramActorRef }>) {
   const toggledFeatures = useSelector(actorRef, selectToggledFeatures, shallowEqual)
+
   return (
-    <DiagramFeatures overrides={toggledFeatures}>
-      {children}
-    </DiagramFeatures>
+    <DiagramActorSafeContext value={actorRef}>
+      <DiagramFeatures overrides={toggledFeatures}>
+        {children}
+      </DiagramFeatures>
+    </DiagramActorSafeContext>
   )
 }

package/src/state/assign.ts

@@ -391,8 +391,8 @@ export function updateActiveWalkthrough({ context }: ActionArg): Partial<Diagram
       })
     }),
     xynodes: context.xynodes.map(node => {
-      const active = step.source === node.id || step.target === node.id
-      return Base.setDimmed(node, !active)
+      const dimmed = step.source !== node.id && step.target !== node.id
+      return Base.setDimmed(node, dimmed)
     }),
   }
 }