@likec4/diagram 1.30.0 → 1.32.0

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

@@ -1,4 +1,5 @@
-import type { Color, DiagramNode, Fqn, IconUrl, RelationId, RelationshipLineType, ViewId } from '@likec4/core'
+import type { Color, DiagramNode, Fqn, IconUrl, RelationId, RelationshipLineType, ViewId } from '@likec4/core/types'
+import type { Simplify } from 'type-fest'
 import type { Base, NonOptional, ReactFlowEdge, ReactFlowNode } from '../../base/types'
 
 export namespace RelationshipDetailsTypes {
@@ -11,7 +12,8 @@ export namespace RelationshipDetailsTypes {
     out: string[]
   }
 
-  export type ElementNodeData = Base.NodeData<
+  export type ElementNodeData =
+    & Base.NodeData
     & NonOptional<
       Pick<
         DiagramNode,
@@ -24,6 +26,7 @@ export namespace RelationshipDetailsTypes {
         | 'height'
         | 'navigateTo'
         | 'style'
+        | 'tags'
       >
     >
     & {
@@ -32,9 +35,9 @@ export namespace RelationshipDetailsTypes {
       icon: IconUrl
       ports: Ports
     }
-  >
 
-  export type CompoundNodeData = Base.NodeData<
+  export type CompoundNodeData =
+    & Base.NodeData
     & NonOptional<
       Pick<
         DiagramNode,
@@ -50,7 +53,6 @@ export namespace RelationshipDetailsTypes {
       icon?: IconUrl
       ports: Ports
     }
-  >
 
   export type ElementNode = ReactFlowNode<ElementNodeData, 'element'>
 
@@ -61,15 +63,17 @@ export namespace RelationshipDetailsTypes {
 
   // Extend the edge types provided by SharedFlowTypes with RelationshipsOfEdgeData
 
-  export type EdgeData = Base.EdgeData<{
-    relationId: RelationId
-    color: Color | undefined
-    label: string | null
-    technology?: string | undefined
-    description?: string | undefined
-    navigateTo: ViewId | null
-    line: RelationshipLineType
-  }>
+  export type EdgeData = Simplify<
+    Base.EdgeData & {
+      relationId: RelationId
+      color: Color | undefined
+      label: string | null
+      technology?: string | undefined
+      description?: string | undefined
+      navigateTo: ViewId | null
+      line: RelationshipLineType
+    }
+  >
 
   export type Edge = ReactFlowEdge<EdgeData, 'relationship'>
 }

package/src/overlays/relationship-details/custom/edgeTypes.tsx

@@ -7,12 +7,12 @@ import {
   EdgeLabelContainer,
   EdgePath,
 } from '../../../base/primitives'
-import { useEnabledFeature } from '../../../context'
+import { useEnabledFeatures } from '../../../context'
 import { useDiagram } from '../../../hooks/useDiagram'
 import type { RelationshipDetailsTypes } from '../_types'
 
 export const RelationshipEdge = customEdge<RelationshipDetailsTypes.EdgeData>((props) => {
-  const { enableNavigateTo } = useEnabledFeature('NavigateTo')
+  const { enableNavigateTo } = useEnabledFeatures()
   const {
     sourceX,
     targetY,

package/src/overlays/relationship-details/custom/nodeTypes.tsx

@@ -5,6 +5,7 @@ import {
   ElementDetailsButton,
   ElementNodeContainer,
   ElementShape,
+  ElementTags,
   ElementTitle,
 } from '../../../base/primitives'
 import { ElementActions } from './ElementActions'
@@ -12,6 +13,7 @@ import { ElementActions } from './ElementActions'
 import { Handle } from '@xyflow/react'
 import { Position } from '@xyflow/system'
 import type { NodeProps } from '../../../base'
+import { useEnabledFeatures } from '../../../context/DiagramFeatures'
 import { useDiagram } from '../../../hooks/useDiagram'
 import type { RelationshipDetailsTypes } from '../_types'
 
@@ -30,10 +32,12 @@ const ElementDetailsButtonWithHandler = (props: NodeProps<RelationshipDetailsTyp
 }
 
 export const ElementNode = customNode<RelationshipDetailsTypes.ElementNodeData>((props) => {
+  const { enableElementTags } = useEnabledFeatures()
   return (
     <ElementNodeContainer nodeProps={props}>
       <ElementShape {...props} />
       <ElementTitle {...props} />
+      {enableElementTags && <ElementTags {...props} />}
       <ElementDetailsButtonWithHandler {...props} />
       <ElementActions {...props} />
       <ElementPorts {...props} />

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

@@ -119,6 +119,7 @@ export function layoutResultToXYFlow(
               icon: node.icon ?? 'none',
               ports: node.ports,
               style: node.style,
+              tags: node.tags,
               ...navigateTo,
             },
           },

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

@@ -394,11 +394,13 @@ export function layoutRelationshipDetails(
     return {
       id: id as NodeId,
       parent: parentId as NodeId ?? null,
+      x: position.x,
+      y: position.y,
       position: [position.x, position.y],
       title: element.title,
       description: element.description,
       technology: element.technology,
-      tags: null,
+      tags: [...element.tags],
       links: null,
       color: inheritFromNodeOrAncestor?.color ?? element.color,
       shape: inheritFromNode?.shape ?? element.shape,

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

@@ -47,7 +47,7 @@ export const SelectElement = memo(() => {
 
   const root = useRef<HTMLDivElement>(null)
   const viewport = useRef<HTMLDivElement>(null)
-  const model = useLikeC4Model(true)
+  const model = useLikeC4Model()
   const subject = model.findElement(subjectId)
   const data = useLikeC4ElementsTree(scope === 'view' && viewId ? viewId : undefined)
   const tree = useTree({

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

@@ -7,7 +7,8 @@ import type {
   RelationId,
   RelationshipLineType,
   ViewId,
-} from '@likec4/core'
+} from '@likec4/core/types'
+import type { Simplify } from 'type-fest'
 import type { Base, NonOptional, ReactFlowEdge, ReactFlowNode } from '../../base/types'
 
 export namespace RelationshipsBrowserTypes {
@@ -21,7 +22,8 @@ export namespace RelationshipsBrowserTypes {
     out: string[]
   }
 
-  export type ElementNodeData = Base.NodeData<
+  export type ElementNodeData = Simplify<
+    & Base.NodeData
     & NonOptional<
       Pick<
         DiagramNode,
@@ -33,6 +35,7 @@ export namespace RelationshipsBrowserTypes {
         | 'style'
         | 'width'
         | 'height'
+        | 'tags'
         | 'navigateTo'
       >
     >
@@ -45,7 +48,8 @@ export namespace RelationshipsBrowserTypes {
     }
   >
 
-  export type CompoundNodeData = Base.NodeData<
+  export type CompoundNodeData = Simplify<
+    & Base.NodeData
     & NonOptional<
       Pick<
         DiagramNode,
@@ -71,9 +75,7 @@ export namespace RelationshipsBrowserTypes {
 
   // export type NonEmptyNode = ElementNode | CompoundNode
 
-  export type EmptyNodeData = Base.NodeData<{
-    column: Column
-  }>
+  export type EmptyNodeData = Base.NodeData & { column: Column }
 
   export type EmptyNode = ReactFlowNode<EmptyNodeData, 'empty'>
 
@@ -82,16 +84,18 @@ 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
-    navigateTo: ViewId | null
-    line: RelationshipLineType
-    existsInCurrentView: boolean
-  }>
+  export type EdgeData = Simplify<
+    Base.EdgeData & {
+      sourceFqn: Fqn
+      targetFqn: Fqn
+      relations: NonEmptyArray<RelationId>
+      color: Color | undefined
+      label: string | null
+      navigateTo: ViewId | null
+      line: RelationshipLineType
+      existsInCurrentView: boolean
+    }
+  >
 
   export type Edge = ReactFlowEdge<EdgeData, 'relationship'>
 }

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

@@ -186,7 +186,7 @@ export type Input = {
   // parentRef?: AnyActorRef| null
 }
 
-export type Context = Readonly<{
+export interface Context {
   subject: Fqn
   viewId: ViewId | null
   scope: 'global' | 'view'
@@ -200,7 +200,7 @@ export type Context = Readonly<{
   navigateFromNode: string | null
   xynodes: RelationshipsBrowserTypes.Node[]
   xyedges: RelationshipsBrowserTypes.Edge[]
-}>
+}
 
 export type Events =
   | { type: 'xyflow.init'; instance: XYFLowInstance; store: XYStoreApi }

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

@@ -9,14 +9,14 @@ import {
   EdgeLabelContainer,
   EdgePath,
 } from '../../../base/primitives'
-import { useEnabledFeature } from '../../../context'
+import { useEnabledFeatures } from '../../../context'
 import { useDiagram } from '../../../hooks/useDiagram'
 import type { RelationshipsBrowserTypes } from '../_types'
 import { useRelationshipsBrowser } from '../hooks'
 
 export const RelationshipEdge = customEdge<RelationshipsBrowserTypes.EdgeData>((props) => {
   const browser = useRelationshipsBrowser()
-  const { enableNavigateTo } = useEnabledFeature('NavigateTo')
+  const { enableNavigateTo } = useEnabledFeatures()
   const {
     id,
     data: {

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

@@ -1,6 +1,5 @@
 import { Handle } from '@xyflow/react'
 import { Position } from '@xyflow/system'
-import * as m from 'motion/react-m'
 import type { NodeProps } from '../../../base'
 import {
   CompoundNodeContainer,
@@ -9,8 +8,10 @@ import {
   ElementDetailsButton,
   ElementNodeContainer,
   ElementShape,
+  ElementTags,
   ElementTitle,
 } from '../../../base/primitives'
+import { useEnabledFeatures } from '../../../context/DiagramFeatures'
 import { useDiagram } from '../../../hooks/useDiagram'
 import type { RelationshipsBrowserTypes } from '../_types'
 import { ElementActions } from './ElementActions'
@@ -33,10 +34,12 @@ const ElementDetailsButtonWithHandler = (
 }
 
 export const ElementNode = customNode<RelationshipsBrowserTypes.ElementNodeData>((props) => {
+  const { enableElementTags } = useEnabledFeatures()
   return (
-    <ElementNodeContainer key={props.id} component={m.div} layoutId={props.id} nodeProps={props}>
+    <ElementNodeContainer key={props.id} layoutId={props.id} nodeProps={props}>
       <ElementShape {...props} />
       <ElementTitle {...props} />
+      {enableElementTags && <ElementTags {...props} />}
       <ElementDetailsButtonWithHandler {...props} />
       <ElementActions {...props} />
       <ElementPorts {...props} />

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

@@ -23,9 +23,10 @@ import {
   DefaultMap,
   ifind,
   invariant,
+  nonNullable,
   toArray,
 } from '@likec4/core'
-import type { AnyAux, ElementModel, LikeC4ViewModel, RelationshipModel } from '@likec4/core/model'
+import type { ElementModel, LikeC4ViewModel, RelationshipModel } from '@likec4/core/model'
 import {
   concat,
   filter,
@@ -216,7 +217,7 @@ export namespace LayoutRelationshipsViewResult {
 
 export function layoutRelationshipsView(
   data: RelationshipsViewData,
-  scope: LikeC4ViewModel<AnyAux> | null,
+  scope: LikeC4ViewModel | null,
 ): Omit<LayoutRelationshipsViewResult, 'subject'> {
   const g = createGraph()
 
@@ -459,12 +460,14 @@ export function layoutRelationshipsView(
       return {
         id: id as NodeId,
         parent: null,
+        x: position.x,
+        y: position.y,
         position: [position.x, position.y],
         title: 'empty node',
         description: null,
         technology: null,
-        tags: null,
-        links: null,
+        tags: [],
+        links: [],
         color: 'muted',
         shape: 'rectangle',
         style: {
@@ -508,11 +511,13 @@ export function layoutRelationshipsView(
     return {
       id: id as NodeId,
       parent: parentId as NodeId ?? null,
+      x: position.x,
+      y: position.y,
       position: [position.x, position.y],
       title: element.title,
       description: element.description,
       technology: element.technology,
-      tags: null,
+      tags: [...element.tags],
       links: null,
       color: inheritFromNodeOrAncestor?.color ?? element.color,
       shape: inheritFromNode?.shape ?? element.shape,
@@ -568,7 +573,7 @@ export function layoutRelationshipsView(
         relations,
         sourceHandle,
         targetHandle,
-      } = find(edges, e => e.name === ename)!
+      } = nonNullable(find(edges, e => e.name === ename))
       const onlyRelation = only(relations)
       const label = onlyRelation?.title ?? 'untitled'
       const isMultiple = relations.length > 1
@@ -602,7 +607,7 @@ export function useRelationshipsView(
   viewId: ViewId | null,
   scope: 'global' | 'view',
 ): LayoutRelationshipsViewResult {
-  const model = useLikeC4Model(true)
+  const model = useLikeC4Model()
   return useMemo(() => {
     const view = viewId ? model.findView(viewId) : null
     const data = layoutRelationshipsView(

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

@@ -1,7 +1,6 @@
 import {
   type Fqn,
-  DiagramNode,
-  ElementKind,
+  GroupElementKind,
   invariant,
   nonNullable,
   Queue,
@@ -47,7 +46,7 @@ export function viewToNodesEdge(
   let next: TraverseItem | undefined
   while ((next = queue.dequeue())) {
     const { node, parent } = next
-    const isCompound = hasAtLeast(node.children, 1) || node.kind == ElementKind.Group
+    const isCompound = hasAtLeast(node.children, 1) || node.kind == GroupElementKind
     if (isCompound) {
       for (const child of node.children) {
         queue.enqueue({ node: nodeById(child), parent: node })
@@ -83,7 +82,7 @@ export function viewToNodesEdge(
       }),
     } satisfies Omit<RelationshipsBrowserTypes.Node, 'data' | 'type'>
 
-    const fqn = DiagramNode.modelRef(node)
+    const fqn = node.modelRef ?? null
     // const deploymentRef = DiagramNode.deploymentRef(node)
     // if (!fqn) {
     //   console.error('Invalid node', node)
@@ -148,6 +147,7 @@ export function viewToNodesEdge(
               ports: node.ports,
               style: node.style,
               existsInCurrentView: node.existsInCurrentView,
+              tags: node.tags,
               ...navigateTo,
             },
           },

package/src/search/Search.tsx

@@ -0,0 +1,237 @@
+import { css } from '@likec4/styles/css'
+import { VStack } from '@likec4/styles/jsx'
+import { FocusTrap, Grid, GridCol, Group, ScrollArea, Title } from '@mantine/core'
+import {
+  useCallbackRef,
+  useHotkeys,
+} from '@mantine/hooks'
+import { useTimeoutEffect } from '@react-hookz/web'
+import { useSelector } from '@xstate/react'
+import { AnimatePresence, LayoutGroup } from 'motion/react'
+import { memo, useRef } from 'react'
+import { ErrorBoundary } from 'react-error-boundary'
+import { isTruthy } from 'remeda'
+import { ErrorFallback } from '../components/ErrorFallback'
+import { DiagramFeatures } from '../context/DiagramFeatures'
+import { Overlay } from '../overlays/overlay/Overlay'
+import { ElementsColumn } from './components/ElementsColumn'
+import { PickView } from './components/PickView'
+import { SearchByTags } from './components/SearchByTags'
+import { LikeC4SearchInput } from './components/SearchInput'
+import { focusToFirstFoundElement, moveFocusToSearchInput } from './components/utils'
+import { ViewsColumn } from './components/ViewsColum'
+import { SearchActorContext, usePickViewFor } from './hooks'
+import { type SearchActorRef, type SearchActorSnapshot } from './searchActor'
+
+const dialog = css({
+  backgroundColor: `[rgb(34 34 34 / var(--_opacity, 95%))]`,
+  _light: {
+    backgroundColor: `[rgb(250 250 250 / var(--_opacity, 95%))]`,
+  },
+  backdropFilter: 'auto',
+  backdropBlur: 'var(--_blur, 10px)',
+  //   base: `[rgb(34 34 34 / var(${backdropOpacity}))]`,
+  //   _light: `[rgb(255 255 255/ var(${backdropOpacity}))]`,
+  // },
+})
+
+const body = css({
+  // containerName: 'likec4-search',
+  // containerType: 'size',
+  // position: 'fixed',
+  // zIndex: 901,
+  // top: 0,
+  // left: 0,
+  width: '100%',
+  height: '100%',
+  maxHeight: '100vh',
+  overflow: 'hidden',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'stretch',
+  gap: 'sm',
+  paddingTop: 20,
+  paddingLeft: 16,
+  paddingRight: 16,
+  paddingBottom: 8,
+  background: '[transparent]',
+  // backgroundColor: {
+  //   _dark: `[rgb(34 34 34 / 0.95)]`,
+  //   _light: `[rgb(255 255 255/ 0.95)]`,
+  // },
+})
+
+const selectIsOpened = (s: SearchActorSnapshot) => !s.matches('inactive')
+
+export const Search = memo<{ searchActorRef: SearchActorRef }>(({ searchActorRef }) => {
+  const isOpened = useSelector(searchActorRef, selectIsOpened)
+
+  const openSearch = () => {
+    searchActorRef.send({ type: 'open' })
+  }
+
+  const sendClose = () => {
+    searchActorRef.send({ type: 'close' })
+  }
+
+  const afterCloseCbRef = useRef<(() => void)>(null)
+  const close = useCallbackRef((cb?: () => void) => {
+    afterCloseCbRef.current = cb ?? null
+    sendClose()
+  })
+  const onExitComplete = useCallbackRef(() => {
+    if (afterCloseCbRef.current) {
+      afterCloseCbRef.current()
+      afterCloseCbRef.current = null
+    }
+  })
+
+  useHotkeys([
+    ['mod+k', openSearch, {
+      preventDefault: true,
+    }],
+    ['mod+f', openSearch, {
+      preventDefault: true,
+    }],
+  ])
+
+  return (
+    <SearchActorContext
+      value={{
+        searchActorRef,
+        close,
+      }}>
+      <DiagramFeatures.Overlays>
+        <ErrorBoundary FallbackComponent={ErrorFallback} onReset={sendClose}>
+          <LayoutGroup>
+            <AnimatePresence onExitComplete={onExitComplete}>
+              {isOpened && (
+                <Overlay
+                  fullscreen
+                  withBackdrop={false}
+                  backdrop={{
+                    opacity: 0.9,
+                  }}
+                  classes={{
+                    dialog,
+                    body,
+                  }}
+                  openDelay={0}
+                  onClose={close}
+                  data-likec4-search="true"
+                >
+                  <SearchOverlay close={close} searchActorRef={searchActorRef} />
+                </Overlay>
+              )}
+            </AnimatePresence>
+          </LayoutGroup>
+        </ErrorBoundary>
+      </DiagramFeatures.Overlays>
+    </SearchActorContext>
+  )
+})
+
+const scrollArea = css({
+  height: [
+    '100%',
+    '100cqh',
+  ],
+  '& .mantine-ScrollArea-viewport': {
+    minHeight: '100%',
+    '& > div': {
+      minHeight: '100%',
+      height: '100%',
+    },
+  },
+})
+
+const SearchOverlay = ({ close, searchActorRef }: { close: () => void; searchActorRef: SearchActorRef }) => {
+  const pickViewFor = usePickViewFor()
+
+  useTimeoutEffect(() => {
+    if (isTruthy(searchActorRef.getSnapshot().context.openedWithSearch)) {
+      focusToFirstFoundElement()
+    }
+  }, 150)
+
+  return (
+    <FocusTrap>
+      <Group
+        className={'group'}
+        wrap="nowrap"
+        onClick={e => {
+          e.stopPropagation()
+          moveFocusToSearchInput()
+        }}>
+        <VStack flex={1} px={'sm'}>
+          <LikeC4SearchInput />
+          <SearchByTags />
+        </VStack>
+        {
+          /* <Box
+          css={{
+            alignSelf: 'flex-start',
+            flex: '0 0 auto',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            minHeight: 50,
+          }}>
+          <ActionIcon
+            size={'lg'}
+            variant="default"
+            onClick={(e) => {
+              e.stopPropagation()
+              close()
+            }}>
+            <IconX />
+          </ActionIcon>
+        </Box> */
+        }
+      </Group>
+      <Grid>
+        <GridCol span={6}>
+          <Title component={'div'} order={6} c="dimmed" pl="sm">Elements</Title>
+        </GridCol>
+        <GridCol span={6}>
+          <Title component={'div'} order={6} c="dimmed" pl="sm">Views</Title>
+        </GridCol>
+      </Grid>
+      <Grid
+        className={css({
+          containerName: 'likec4-search-elements',
+          containerType: 'size',
+          overflow: 'hidden',
+          flexGrow: 1,
+        })}>
+        <GridCol span={6}>
+          <ScrollArea
+            type="scroll"
+            className={scrollArea}
+            pr="xs"
+            scrollbars="y">
+            <AnimatePresence>
+              <LayoutGroup id="likec4-search-elements">
+                <ElementsColumn />
+              </LayoutGroup>
+            </AnimatePresence>
+          </ScrollArea>
+        </GridCol>
+        <GridCol span={6}>
+          <ScrollArea
+            type="scroll"
+            className={scrollArea}
+            pr="xs"
+            scrollbars="y">
+            <AnimatePresence>
+              <LayoutGroup id="likec4-search-views">
+                <ViewsColumn />
+              </LayoutGroup>
+            </AnimatePresence>
+          </ScrollArea>
+        </GridCol>
+      </Grid>
+      {pickViewFor && <PickView elementFqn={pickViewFor} />}
+    </FocusTrap>
+  )
+}

package/src/{likec4diagram/ui/search → search/components}/ElementsColumn.css.ts

@@ -14,7 +14,6 @@ export const treeRoot = css(
     containerName: 'likec4-tree',
   }),
   {
-    overflow: 'hidden',
     containerType: 'inline-size',
     height: '100%',
   },
@@ -65,40 +64,12 @@ export const elementId = css({
   },
 })
 
-// const iconSizeVar = `var(${iconSize}, 32px)`
 export const elementIcon = css({
   ['--likec4-icon-size']: '24px',
   [whenContainerIsNarrow]: {
     ['--likec4-icon-size']: '18px',
   },
 })
-//   flex: `0 0 ${iconSizeVar}`,
-//   height: iconSizeVar,
-//   width: iconSizeVar,
-//   display: 'flex',
-//   alignItems: 'center',
-//   justifyContent: 'center',
-//   alignSelf: 'flex-start',
-//   marginTop: 4,
-//   [`& svg, & img`]: {
-//     width: '100%',
-//     height: 'auto',
-//     maxHeight: '100%',
-//     pointerEvents: 'none',
-//   },
-//   [`& img`]: {
-//     objectFit: 'contain',
-//   },
-//   '&.likec4-shape-icon svg': {
-//     color: `[var(${iconColor})]`,
-//     width: '90%',
-//     strokeWidth: 1.5,
-//   },
-//   [iconSize]: '24px',
-//   [whenContainerIsNarrow]: {
-//     [iconSize]: '18px',
-//   },
-// })
 
 export const elementViewsCount = css({
   flex: 0,