@likec4/diagram 1.39.5 → 1.41.0

package/src/navigationpanel/walkthrough/DynamicViewControls.tsx

@@ -0,0 +1,125 @@
+import { invariant } from '@likec4/core'
+import type { DynamicViewDisplayVariant } from '@likec4/core/types'
+import { css } from '@likec4/styles/css'
+import { type ButtonProps, Button, SegmentedControl } from '@mantine/core'
+import {
+  IconPlayerPlayFilled,
+} from '@tabler/icons-react'
+import { type HTMLMotionProps } from 'motion/react'
+import * as m from 'motion/react-m'
+import { forwardRef } from 'react'
+import { useDiagram, useDiagramContext } from '../../hooks/useDiagram'
+import { Tooltip } from '../_common'
+import { useNavigationActor } from '../hooks'
+
+export const TriggerWalkthroughButton = forwardRef<HTMLButtonElement, ButtonProps & HTMLMotionProps<'button'>>((
+  props,
+  ref,
+) => (
+  <Button
+    variant="filled"
+    size="xs"
+    fw="500"
+    {...props}
+    ref={ref}
+    component={m.button}
+    layoutId={'trigger-dynamic-walkthrough'}
+    className={css({
+      flexShrink: 0,
+    })}
+  />
+))
+
+function StartWalkthroughButton({ onClick }: { onClick: () => void }) {
+  const diagram = useDiagram()
+  const actor = useNavigationActor()
+  return (
+    <Tooltip label="Start Dynamic View Walkthrough">
+      <TriggerWalkthroughButton
+        onClick={e => {
+          e.stopPropagation()
+          actor.closeDropdown()
+          diagram.startWalkthrough()
+        }}
+        size="compact-xs"
+        h={26}
+        classNames={{
+          label: css({
+            display: {
+              base: 'none',
+              '@/md': '[inherit]',
+            },
+          }),
+          section: css({
+            marginInlineStart: {
+              base: '0',
+              '@/md': '2',
+            },
+          }),
+        }}
+        rightSection={<IconPlayerPlayFilled size={10} />}
+      >
+        Start
+      </TriggerWalkthroughButton>
+    </Tooltip>
+  )
+}
+
+function DynamicViewModeSwitcher({
+  value,
+  onChange,
+}: {
+  value: DynamicViewDisplayVariant
+  onChange: (variant: DynamicViewDisplayVariant) => void
+}) {
+  return (
+    <m.div layout="position">
+      <SegmentedControl
+        size="xs"
+        value={value}
+        component={m.div}
+        onChange={variant => {
+          invariant(variant === 'diagram' || variant === 'sequence', 'Invalid dynamic view variant')
+          onChange(variant)
+        }}
+        classNames={{
+          label: css({
+            fontSize: 'xxs',
+          }),
+        }}
+        data={[
+          {
+            value: 'diagram',
+            label: 'Diagram',
+          },
+          {
+            value: 'sequence',
+            label: 'Sequence',
+          },
+        ]} />
+    </m.div>
+  )
+}
+
+export function DynamicViewControls() {
+  const dynamicViewVariant = useDiagramContext(c => c.dynamicViewVariant)
+  const diagram = useDiagram()
+  const actor = useNavigationActor()
+  return (
+    <>
+      <DynamicViewModeSwitcher
+        key="dynamic-view-mode-switcher"
+        value={dynamicViewVariant}
+        onChange={mode => {
+          diagram.switchDynamicViewVariant(mode)
+        }}
+      />
+      <StartWalkthroughButton
+        key="trigger-dynamic-walkthrough"
+        onClick={() => {
+          actor.closeDropdown()
+          diagram.startWalkthrough()
+        }} />
+    </>
+  )
+}

package/src/navigationpanel/walkthrough/index.tsx

@@ -1 +1,2 @@
-export { ActiveWalkthroughControls, StartWalkthroughButton } from './ActiveWalkthroughControls'
+export { ActiveWalkthroughControls } from './ActiveWalkthroughControls'
+export { DynamicViewControls } from './DynamicViewControls'

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

@@ -25,13 +25,19 @@ export const dialog = css({
 export const card = css({
   position: 'absolute',
   pointerEvents: 'all',
+  display: 'flex',
+  flexDirection: 'column',
+  padding: '4',
   gap: 'lg',
   justifyContent: 'stretch',
+  color: 'mantine.colors.text',
   backgroundColor: {
     base: 'mantine.colors.body',
     _dark: 'mantine.colors.dark[6]',
   },
-  border: `none`,
+  boxShadow: 'md',
+  overflow: 'hidden',
+  border: 'none',
   backgroundImage: `
     linear-gradient(180deg,
       color-mix(in srgb, var(--likec4-palette-fill) 60%, transparent),

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

@@ -16,7 +16,6 @@ import {
   ActionIconGroup,
   Badge,
   Box,
-  Card,
   CloseButton,
   Divider as MantineDivider,
   Flex,
@@ -48,7 +47,7 @@ import { DiagramFeatures, IconRenderer, IfEnabled } from '../../context'
 import { useUpdateEffect } from '../../hooks'
 import { useDiagram } from '../../hooks/useDiagram'
 import type { OnNavigateTo } from '../../LikeC4Diagram.props'
-import { useLikeC4Model } from '../../likec4model'
+import { useCurrentViewModel } from '../../likec4model'
 import { stopPropagation } from '../../utils'
 import * as styles from './ElementDetailsCard.css'
 import { TabPanelDeployments } from './TabPanelDeployments'
@@ -115,8 +114,7 @@ export function ElementDetailsCard({
     defaultValue: 'Properties',
   })
   const diagram = useDiagram()
-  const likec4model = useLikeC4Model()
-  const viewModel = likec4model.view(viewId)
+  const viewModel = useCurrentViewModel()
   const nodeModel = fromNode ? viewModel.findNode(fromNode) : viewModel.findNodeWithElement(fqn)
 
   const elementModel = viewModel.$model.element(fqn)
@@ -221,7 +219,7 @@ export function ElementDetailsCard({
    */
   useTimeoutEffect(() => {
     setOpened(true)
-  }, 200)
+  }, 220)
 
   return (
     <m.dialog
@@ -257,9 +255,7 @@ export function ElementDetailsCard({
       }}
     >
       <RemoveScroll forwardProps removeScrollBar={false}>
-        <Card
-          shadow="md"
-          component={m.div}
+        <m.div
           layout
           layoutRoot
           drag
@@ -292,13 +288,12 @@ export function ElementDetailsCard({
             },
           }}
           style={{
-            // `style` prop in Mantine doesn't accept motion values
-            width: width as any,
-            height: height as any,
+            width,
+            height,
           }}>
           <div className={styles.cardHeader} onPointerDown={e => controls.start(e)}>
-            <Group align="start" justify="space-between" gap={'sm'} mb={'sm'} wrap="nowrap">
-              <Group align="start" gap={'sm'} style={{ cursor: 'default' }} wrap="nowrap">
+            <HStack alignItems="start" justify="space-between" gap={'sm'} mb={'sm'} flexWrap="nowrap">
+              <HStack alignItems="start" gap={'sm'} style={{ cursor: 'default' }} flexWrap="nowrap">
                 {elementIcon}
                 <div>
                   <Text
@@ -312,15 +307,15 @@ export function ElementDetailsCard({
                     </Text>
                   )}
                 </div>
-              </Group>
+              </HStack>
               <CloseButton
                 size={'lg'}
                 onClick={e => {
                   e.stopPropagation()
                   close()
                 }} />
-            </Group>
-            <Group align="baseline" gap={'sm'} wrap="nowrap">
+            </HStack>
+            <HStack alignItems="baseline" gap={'sm'} flexWrap="nowrap">
               <div>
                 <SmallLabel>kind</SmallLabel>
                 <Badge
@@ -403,7 +398,7 @@ export function ElementDetailsCard({
                   </Tooltip>
                 )}
               </ActionIconGroup>
-            </Group>
+            </HStack>
           </div>
           <Tabs
             value={activeTab}
@@ -426,6 +421,12 @@ export function ElementDetailsCard({
             <TabsPanel value="Properties">
               <ScrollArea scrollbars="y" type="scroll" offsetScrollbars>
                 <Box className={styles.propertiesGrid} pt={'xs'}>
+                  {elementModel.hasSummary && (
+                    <>
+                      <PropertyLabel>summary</PropertyLabel>
+                      <MarkdownBlock value={elementModel.summary} />
+                    </>
+                  )}
                   <>
                     <PropertyLabel>description</PropertyLabel>
                     <MarkdownBlock
@@ -517,7 +518,7 @@ export function ElementDetailsCard({
             dragMomentum={false}
             onDrag={handleDrag}
             dragConstraints={{ top: 0, left: 0, right: 0, bottom: 0 }} />
-        </Card>
+        </m.div>
       </RemoveScroll>
     </m.dialog>
   )
@@ -609,12 +610,10 @@ function ElementMetata({
         {entries(metadata).map(([key, value]) => (
           <div
             key={key}
-            className={cx(
-              'group',
-              css({
-                display: 'contents',
-              }),
-            )}
+            style={{
+              display: 'contents',
+            }}
+            className={'group'}
           >
             <div
               className={css({
@@ -651,7 +650,7 @@ function ElementMetata({
                     fontSize: 'sm',
                     padding: 'xxs',
                     whiteSpace: 'pre',
-                    fontFamily: '[var(--mantine-font-family-monospace)]',
+                    fontFamily: 'mono',
                     userSelect: 'all',
                   })}>
                   {value}

package/src/overlays/relationship-details/RelationshipDetails.tsx

@@ -1,5 +1,5 @@
 import { type DiagramEdge, type DiagramView, invariant, isAncestor, nonNullable } from '@likec4/core'
-import { cx as clsx } from '@likec4/styles/css'
+import { cx } from '@likec4/styles/css'
 import { ActionIcon, Group } from '@mantine/core'
 import { useCallbackRef, useStateHistory } from '@mantine/hooks'
 import { IconChevronLeft, IconChevronRight, IconX } from '@tabler/icons-react'
@@ -145,7 +145,10 @@ const RelationshipDetailsInner = memo(() => {
       id={browser.rootElementId}
       nodes={nodes}
       edges={edges}
-      className={clsx(initialized ? 'initialized' : 'not-initialized')}
+      className={cx(
+        initialized ? 'initialized' : 'not-initialized',
+        'likec4-relationship-details',
+      )}
       nodeTypes={nodeTypes}
       edgeTypes={edgeTypes}
       onNodesChange={useCallbackRef((changes) => {

package/src/overlays/relationship-details/layout.ts

@@ -34,6 +34,7 @@ import {
   sortBy,
   tap,
 } from 'remeda'
+import type { Except } from 'type-fest'
 import type { RelationshipDetailsTypes } from './_types'
 import type { RelationshipDetailsViewData } from './compute'
 
@@ -218,14 +219,14 @@ export type LayoutResult = {
 }
 
 export namespace LayoutResult {
-  export type Node = Omit<DiagramNode, 'modelRef' | 'description' | 'deploymentRef' | 'inEdges' | 'outEdges'> & {
+  export type Node = Except<DiagramNode, 'modelRef' | 'description' | 'deploymentRef' | 'inEdges' | 'outEdges'> & {
     description: RichTextOrEmpty
     modelRef: Fqn
     column: RelationshipDetailsTypes.Column
     ports: RelationshipDetailsTypes.Ports
     // existsInCurrentView: boolean
   }
-  export type Edge = Omit<DiagramEdge, 'relations' | 'description'> & {
+  export type Edge = Except<DiagramEdge, 'relations' | 'description'> & {
     relationId: RelationId
     sourceHandle: string
     targetHandle: string
@@ -402,7 +403,7 @@ export function layoutRelationshipDetails(
       y: position.y,
       position: [position.x, position.y],
       title: element.title,
-      description: RichText.from(element.description),
+      description: element.summary,
       technology: element.technology,
       tags: [...element.tags],
       links: null,

package/src/overlays/relationships-browser/RelationshipsBrowser.tsx

@@ -1,6 +1,7 @@
 import { cx } from '@likec4/styles/css'
 import { ActionIcon, Group } from '@mantine/core'
 import { useCallbackRef, useStateHistory } from '@mantine/hooks'
+import { useRafEffect } from '@react-hookz/web'
 import { IconChevronLeft, IconChevronRight, IconX } from '@tabler/icons-react'
 import { Panel, ReactFlowProvider, useReactFlow, useStoreApi } from '@xyflow/react'
 import { shallowEqual } from 'fast-equals'
@@ -183,7 +184,7 @@ const RelationshipsBrowserInner = memo(() => {
     }
   }, [historySubjectId, browser])
 
-  useEffect(() => {
+  useRafEffect(() => {
     browser.updateView(layouted)
   }, [layouted, browser])
 

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

@@ -518,7 +518,7 @@ export function layoutRelationshipsView(
       y: position.y,
       position: [position.x, position.y],
       title: element.title,
-      description: RichText.from(element.description),
+      description: element.summary,
       technology: element.technology,
       tags: [...element.tags],
       links: null,

package/src/search/components/ElementsColumn.tsx

@@ -279,7 +279,7 @@ function ElementTreeNode(
             </Tooltip>
           </Group>
           <Highlight component="div" highlight={searchTerms} className={btn.description!} lineClamp={1}>
-            {element.description.text || 'No description'}
+            {element.summary.text || 'No description'}
           </Highlight>
         </Box>
 

package/src/state/DiagramActorProvider.tsx

@@ -1,32 +1,25 @@
-import type { DiagramView, WhereOperator } from '@likec4/core/types'
-import { useCustomCompareEffect } from '@react-hookz/web'
+import type { DiagramView, DynamicViewDisplayVariant, WhereOperator } from '@likec4/core/types'
+import { useCustomCompareEffect, useRafEffect } from '@react-hookz/web'
 import { useActorRef, useSelector } from '@xstate/react'
 import { useStoreApi } from '@xyflow/react'
 import { deepEqual, shallowEqual } from 'fast-equals'
-import { type PropsWithChildren, useEffect, useRef } from 'react'
+import { type PropsWithChildren, useMemo, useRef } from 'react'
 import { ErrorBoundary } from '../components/ErrorFallback'
 import { useDiagramEventHandlers } from '../context/DiagramEventHandlers'
 import { DiagramFeatures, useEnabledFeatures } from '../context/DiagramFeatures'
 import { useOnDiagramEvent } from '../custom'
 import { DiagramActorContextProvider } from '../hooks/safeContext'
-import { useCurrentViewId } from '../hooks/useCurrentViewId'
 import type { ViewPadding } from '../LikeC4Diagram.props'
+import { convertToXYFlow } from '../likec4diagram/convert-to-xyflow'
 import type { Types } from '../likec4diagram/types'
-import { useViewToNodesEdges } from '../likec4diagram/useViewToNodesEdges'
 import { CurrentViewModelContext } from '../likec4model/LikeC4ModelContext'
 import { useLikeC4Model } from '../likec4model/useLikeC4Model'
 import { type DiagramMachine, diagramMachine } from './diagram-machine'
 import { syncManualLayoutActorLogic } from './syncManualLayoutActor'
 import type { DiagramActorRef, DiagramActorSnapshot } from './types'
 
-const selectToggledFeatures = (state: DiagramActorSnapshot) => {
-  if (state.context.features.enableReadOnly || state.context.activeWalkthrough) {
-    return {
-      ...state.context.toggledFeatures,
-      enableReadOnly: true,
-    }
-  }
-  return state.context.toggledFeatures
+const selectDynamicViewVariant = (state: DiagramActorSnapshot) => {
+  return state.context.dynamicViewVariant
 }
 
 export function DiagramActorProvider({
@@ -37,6 +30,7 @@ export function DiagramActorProvider({
   nodesSelectable,
   where,
   children,
+  dynamicViewVariant: _defaultVariant,
 }: PropsWithChildren<{
   view: DiagramView
   zoomable: boolean
@@ -44,6 +38,7 @@ export function DiagramActorProvider({
   fitViewPadding: ViewPadding
   nodesSelectable: boolean
   where: WhereOperator | null
+  dynamicViewVariant: DynamicViewDisplayVariant | undefined
 }>) {
   const { handlersRef } = useDiagramEventHandlers()
   const xystore = useStoreApi<Types.Node, Types.Edge>()
@@ -76,6 +71,7 @@ export function DiagramActorProvider({
         pannable,
         fitViewPadding,
         nodesSelectable,
+        dynamicViewVariant: _defaultVariant,
       },
     },
   )
@@ -97,39 +93,56 @@ export function DiagramActorProvider({
     deepEqual,
   )
 
-  const { xyedges, xynodes } = useViewToNodesEdges({
-    view,
-    where,
-    nodesSelectable,
-  })
+  const dynamicViewVariant = useSelector(actorRef, selectDynamicViewVariant)
 
-  useEffect(() => {
-    actorRef.send({ type: 'update.view', view, xyedges, xynodes })
-  }, [view, xyedges, xynodes])
+  const update = useMemo(
+    () => convertToXYFlow({ view, where, nodesSelectable, dynamicViewVariant }),
+    [view, where, nodesSelectable, dynamicViewVariant],
+  )
 
-  const toggledFeatures = useSelector(actorRef, selectToggledFeatures, shallowEqual)
+  useRafEffect(() => {
+    actorRef.send({
+      type: 'update.view',
+      ...update,
+    })
+  }, [actorRef, update])
 
   return (
     <DiagramActorContextProvider value={actorRef}>
-      <DiagramFeatures overrides={toggledFeatures}>
-        <ErrorBoundary>
-          <CurrentViewModelProvider>
-            {children}
-          </CurrentViewModelProvider>
-        </ErrorBoundary>
-      </DiagramFeatures>
+      <ErrorBoundary>
+        <CurrentViewModelProvider actorRef={actorRef}>
+          {children}
+        </CurrentViewModelProvider>
+      </ErrorBoundary>
       <DiagramActorEventListener actorRef={actorRef} />
     </DiagramActorContextProvider>
   )
 }
 
-function CurrentViewModelProvider({ children }: PropsWithChildren) {
-  const viewId = useCurrentViewId()
+const selectViewIdAndToggledFeatures = (state: DiagramActorSnapshot) => {
+  if (state.context.features.enableReadOnly || state.context.activeWalkthrough) {
+    return {
+      viewId: state.context.view.id,
+      toggledFeatures: {
+        ...state.context.toggledFeatures,
+        enableReadOnly: true,
+      },
+    }
+  }
+  return {
+    viewId: state.context.view.id,
+    toggledFeatures: state.context.toggledFeatures,
+  }
+}
+function CurrentViewModelProvider({ children, actorRef }: PropsWithChildren<{ actorRef: DiagramActorRef }>) {
+  const { viewId, toggledFeatures } = useSelector(actorRef, selectViewIdAndToggledFeatures, deepEqual)
   const likec4model = useLikeC4Model()
   const viewmodel = likec4model.findView(viewId)
   return (
     <CurrentViewModelContext.Provider value={viewmodel}>
-      {children}
+      <DiagramFeatures overrides={toggledFeatures}>
+        {children}
+      </DiagramFeatures>
     </CurrentViewModelContext.Provider>
   )
 }
@@ -141,25 +154,7 @@ function DiagramActorEventListener({ actorRef }: { actorRef: DiagramActorRef })
   } = useDiagramEventHandlers()
 
   useOnDiagramEvent('openSource', ({ params }) => onOpenSource?.(params))
-
-  // onNavigateTo we defer the callback for better responsiveness
-  // (allowing animation to finish)
-  useEffect(() => {
-    if (!onNavigateTo) return
-    let frame: number
-
-    const subscription = actorRef.on('navigateTo', ({ viewId }) => {
-      cancelAnimationFrame(frame)
-      // Slightly defer callback for better responsiveness
-      frame = requestAnimationFrame(() => {
-        onNavigateTo(viewId)
-      })
-    })
-    return () => {
-      cancelAnimationFrame(frame)
-      subscription.unsubscribe()
-    }
-  }, [actorRef, onNavigateTo])
+  useOnDiagramEvent('navigateTo', ({ viewId }) => onNavigateTo?.(viewId))
 
   return null
 }

package/src/state/assign.ts

@@ -5,6 +5,7 @@ import { isEmpty, mergeDeep, omit } from 'remeda'
 import { assertEvent } from 'xstate'
 import { Base } from '../base/types'
 import type { Types } from '../likec4diagram/types'
+import { SeqParallelAreaColor } from '../likec4diagram/xyflow-sequence/const'
 import { type Vector, vector, VectorImpl } from '../utils/vector'
 import type { ActionArg, Context as DiagramContext } from './diagram-machine'
 
@@ -68,21 +69,25 @@ export function mergeXYNodesEdges({ context, event }: ActionArg): Partial<Diagra
     const currentEdges = context.xyedges
     xyedges = event.xyedges.map((update): Types.Edge => {
       const existing = currentEdges.find(n => n.id === update.id)
-      if (existing) {
+      if (existing && existing.type === update.type) {
         if (
           eq(existing.hidden ?? false, update.hidden ?? false)
           && eq(existing.data, update.data)
+          && eq(existing.source, update.source)
+          && eq(existing.target, update.target)
+          && eq(existing.sourceHandle, update.sourceHandle)
+          && eq(existing.targetHandle, update.targetHandle)
         ) {
           return existing
         }
         return {
-          ...existing,
+          ...omit(existing, ['sourceHandle', 'targetHandle']),
           ...update,
           data: {
             ...existing.data,
             ...update.data,
           },
-        }
+        } as Types.Edge
       }
       return update
     })
@@ -388,7 +393,7 @@ export function resetEdgeControlPoints({ context }: ActionArg): Partial<DiagramC
           ...edge.data,
           controlPoints: getControlPointForEdge(edge),
         },
-      })
+      } as Types.Edge)
     }),
   }
 }
@@ -401,11 +406,19 @@ export function updateActiveWalkthrough({ context }: ActionArg): Partial<Diagram
       const active = stepId === edge.id || (!!parallelPrefix && edge.id.startsWith(parallelPrefix))
       return Base.setData(edge, {
         active,
-        dimmed: !active,
+        dimmed: stepId !== edge.id,
       })
     }),
     xynodes: context.xynodes.map(node => {
       const dimmed = step.source !== node.id && step.target !== node.id
+      if (node.type === 'seq-parallel') {
+        return Base.setData(node, {
+          color: parallelPrefix === node.data.parallelPrefix
+            ? SeqParallelAreaColor.active
+            : SeqParallelAreaColor.default,
+          dimmed,
+        })
+      }
       return Base.setDimmed(node, dimmed)
     }),
   }