@likec4/diagram 1.31.0 → 1.32.0

package/src/likec4diagram/custom/nodes/nodes.tsx

@@ -9,9 +9,10 @@ import {
   ElementDetailsButton,
   ElementNodeContainer,
   ElementShape,
+  ElementTags,
   ElementTitle,
 } from '../../../base/primitives'
-import { IfEnabled, IfNotReadOnly, useEnabledFeatures } from '../../../context/DiagramFeatures'
+import { useEnabledFeatures } from '../../../context/DiagramFeatures'
 import { useDiagram } from '../../../hooks/useDiagram'
 import type { Types } from '../../types'
 import { CompoundActions } from './CompoundActions'
@@ -57,63 +58,64 @@ export function CompoundDetailsButtonWithHandler(
   )
 }
 
-export const ElementNode = customNode<Types.ElementNodeData, 'element'>((props) => (
-  <ElementNodeContainer nodeProps={props}>
-    <ElementShape {...props} />
-    <ElementTitle {...props} />
-    <ElementActions {...props} />
-    <ElementDetailsButtonWithHandler {...props} />
-    <IfNotReadOnly>
-      <ElementToolbar {...props} />
-    </IfNotReadOnly>
-    <DefaultHandles />
-  </ElementNodeContainer>
-))
+export const ElementNode = customNode<Types.ElementNodeData, 'element'>(props => {
+  const { enableElementTags, enableReadOnly } = useEnabledFeatures()
+  return (
+    <ElementNodeContainer nodeProps={props}>
+      <ElementShape {...props} />
+      <ElementTitle {...props} />
+      {enableElementTags && <ElementTags {...props} />}
+      <ElementActions {...props} />
+      <ElementDetailsButtonWithHandler {...props} />
+      {!enableReadOnly && <ElementToolbar {...props} />}
+      <DefaultHandles />
+    </ElementNodeContainer>
+  )
+})
 ElementNode.displayName = 'ElementNode'
 
-export const DeploymentNode = customNode<Types.DeploymentElementNodeData, 'deployment'>((props) => (
-  <ElementNodeContainer nodeProps={props}>
-    <ElementShape {...props} />
-    <ElementTitle {...props} />
-    <DeploymentElementActions {...props} />
-    <ElementDetailsButtonWithHandler {...props} />
-    <IfNotReadOnly>
-      <DeploymentElementToolbar {...props} />
-    </IfNotReadOnly>
-    <DefaultHandles />
-  </ElementNodeContainer>
-))
+export const DeploymentNode = customNode<Types.DeploymentElementNodeData, 'deployment'>((props) => {
+  const { enableElementTags, enableReadOnly } = useEnabledFeatures()
+  return (
+    <ElementNodeContainer nodeProps={props}>
+      <ElementShape {...props} />
+      <ElementTitle {...props} />
+      {enableElementTags && <ElementTags {...props} />}
+      <DeploymentElementActions {...props} />
+      <ElementDetailsButtonWithHandler {...props} />
+      {!enableReadOnly && <DeploymentElementToolbar {...props} />}
+      <DefaultHandles />
+    </ElementNodeContainer>
+  )
+})
 DeploymentNode.displayName = 'DeploymentNode'
 
 export const CompoundElementNode = customNode<Types.CompoundElementNodeData, 'compound-element'>((props) => {
-  const diagram = useDiagram()
-
+  const { enableElementDetails, enableReadOnly } = useEnabledFeatures()
   return (
     <CompoundNodeContainer nodeProps={props}>
       <CompoundTitle {...props} />
       <CompoundActions {...props} />
-      <IfEnabled feature="ElementDetails">
-        <CompoundDetailsButtonWithHandler {...props} />
-      </IfEnabled>
-      <IfNotReadOnly>
-        <CompoundElementToolbar {...props} />
-      </IfNotReadOnly>
+      {enableElementDetails && <CompoundDetailsButtonWithHandler {...props} />}
+      {!enableReadOnly && <CompoundElementToolbar {...props} />}
       <DefaultHandles />
     </CompoundNodeContainer>
   )
 })
 CompoundElementNode.displayName = 'CompoundElementNode'
 
-export const CompoundDeploymentNode = customNode<Types.CompoundDeploymentNodeData, 'compound-deployment'>((props) => (
-  <CompoundNodeContainer nodeProps={props}>
-    <CompoundTitle {...props} />
-    <CompoundActions {...props} />
-    <IfNotReadOnly>
-      <CompoundDeploymentToolbar {...props} />
-    </IfNotReadOnly>
-    <DefaultHandles />
-  </CompoundNodeContainer>
-))
+export const CompoundDeploymentNode = customNode<Types.CompoundDeploymentNodeData, 'compound-deployment'>((props) => {
+  const { enableElementDetails, enableReadOnly } = useEnabledFeatures()
+  return (
+    <CompoundNodeContainer nodeProps={props}>
+      <CompoundTitle {...props} />
+      <CompoundActions {...props} />
+      {enableElementDetails && <CompoundDetailsButtonWithHandler {...props} />}
+      {!enableReadOnly && <CompoundDeploymentToolbar {...props} />}
+      <DefaultHandles />
+    </CompoundNodeContainer>
+  )
+})
 CompoundDeploymentNode.displayName = 'CompoundDeploymentNode'
 
 export const ViewGroupNode = customNode<Types.ViewGroupNodeData, 'view-group'>((props) => (

package/src/likec4diagram/custom/nodes/toolbar/_shared.tsx

@@ -1,4 +1,12 @@
-import { type Fqn, type NodeId, type ThemeColor, type ViewChange, defaultTheme, invariant } from '@likec4/core'
+import {
+  type DeploymentFqn,
+  type Fqn,
+  type NodeId,
+  type ThemeColor,
+  type ViewChange,
+  defaultTheme,
+  invariant,
+} from '@likec4/core'
 import { ActionIcon, Tooltip as MantineTooltip } from '@mantine/core'
 import { useCallbackRef } from '@mantine/hooks'
 import { IconFileSymlink, IconTransform } from '@tabler/icons-react'
@@ -45,7 +53,7 @@ export const Tooltip = MantineTooltip.withProps({
 })
 
 export function useHandlers(
-  target: Fqn,
+  target: Fqn | DeploymentFqn,
   props: NodeProps<Types.NodeData>,
 ) {
   const { onChange: triggerOnChange } = useDiagramEventHandlers()
@@ -113,7 +121,7 @@ export function BrowseRelationshipsButton({ fqn }: { fqn: Fqn }) {
   )
 }
 
-export function GoToSourceButton(props: MergeExclusive<{ elementId: Fqn }, { deploymentId: Fqn }>) {
+export function GoToSourceButton(props: MergeExclusive<{ elementId: Fqn }, { deploymentId: DeploymentFqn }>) {
   const { onOpenSource } = useDiagramEventHandlers()
   if (!onOpenSource) return null
   // const diagramApi = useDiagramStoreApi()

package/src/likec4diagram/types.ts

@@ -1,4 +1,4 @@
-import type { DiagramEdge, DiagramNode, Fqn, IconUrl, ViewId } from '@likec4/core'
+import type { DeploymentFqn, DiagramEdge, DiagramNode, Fqn, IconUrl, ViewId } from '@likec4/core/types'
 import type { XYPosition } from '@xyflow/system'
 import type { OptionalKeysOf, Simplify } from 'type-fest'
 import type { Base, ReactFlowEdge, ReactFlowNode } from '../base/types'
@@ -28,6 +28,7 @@ export namespace Types {
         | 'level'
         | 'height'
         | 'style'
+        | 'tags'
         | 'position'
       >
     >
@@ -59,7 +60,7 @@ export namespace Types {
     & LeafNodeData
     & {
       navigateTo: ViewId | null
-      deploymentFqn: Fqn
+      deploymentFqn: DeploymentFqn
       // If set - this node refers to a model element
       modelFqn: Fqn | null
     }
@@ -74,6 +75,7 @@ export namespace Types {
         | 'color'
         | 'shape'
         | 'style'
+        | 'tags'
         | 'position'
       >
     >
@@ -96,7 +98,7 @@ export namespace Types {
   }
 
   export type CompoundDeploymentNodeData = CompoundNodeData & {
-    deploymentFqn: Fqn
+    deploymentFqn: DeploymentFqn
     /**
      * If set - this node refers to a model element
      */

package/src/likec4diagram/ui/controls/Controls.tsx

@@ -3,12 +3,12 @@ import { ActionIconGroup, Badge, Box, Group, Loader, Stack } from '@mantine/core
 import { IconFileSymlink, IconFocusCentered, IconMenu2 } from '@tabler/icons-react'
 import { LayoutGroup, m } from 'motion/react'
 import { memo } from 'react'
+import { SearchControl } from '../../../components/SearchControl'
 import { useDiagramEventHandlers, useEnabledFeatures } from '../../../context'
 import { type ControlsCustomLayout, useControlsCustomLayout } from '../../../context/ControlsCustomLayout'
 import { useMantinePortalProps } from '../../../hooks'
 import { useDiagram, useDiagramContext, useDiagramSyncLayoutState } from '../../../hooks/useDiagram'
 import { stopPropagation } from '../../../utils'
-import { LikeC4Search } from '../search/LikeC4Search'
 import { ActionIcon, Tooltip } from './_shared'
 import { ChangeAutoLayoutButton } from './ChangeAutoLayoutButton'
 import { LayoutDriftNotification } from './LayoutDriftNotification'
@@ -68,8 +68,7 @@ const ControlsDefaultLayout: ControlsCustomLayout = ({
 )
 
 export const Controls = memo(() => {
-  const { viewId, hasLayoutDrift, viewportChanged, isNotActiveWalkthrough } = useDiagramContext(c => ({
-    viewId: c.view.id,
+  const { hasLayoutDrift, viewportChanged, isNotActiveWalkthrough } = useDiagramContext(c => ({
     hasLayoutDrift: c.view.hasLayoutDrift ?? false,
     viewportChanged: c.viewportChangedManually,
     isNotActiveWalkthrough: c.activeWalkthrough === null,
@@ -103,7 +102,14 @@ export const Controls = memo(() => {
             </ActionIcon>
           )}
           navigationButtons={enableNavigationButtons && <NavigationButtons />}
-          search={enableSearch && <LikeC4Search />}
+          search={enableSearch && (
+            <SearchControl
+              onClick={e => {
+                e.stopPropagation()
+                diagram.openSearch()
+              }}
+            />
+          )}
           syncInProgressBadge={<SyncLayoutBadge />}
           actionsGroup={
             <ActionIconGroup className={css.actionIconGroup} orientation="vertical">
@@ -112,6 +118,7 @@ export const Controls = memo(() => {
                   <ActionIcon
                     onClick={e => {
                       e.stopPropagation()
+                      const viewId = diagram.currentView.id
                       onOpenSource?.({ view: viewId })
                     }}>
                     <IconFileSymlink stroke={1.5} />

package/src/likec4diagram/ui/notation/NotationPanel.tsx

@@ -1,4 +1,4 @@
-import { type ComputedNode, type ElementNotation as ElementNotationData } from '@likec4/core'
+import { type ComputedNode, type NodeNotation as ElementNotationData } from '@likec4/core'
 import { css, cx, cx as clsx } from '@likec4/styles/css'
 import {
   ActionIcon,
@@ -122,7 +122,7 @@ const ElementNotation = ({ value }: { value: ElementNotationData }) => {
 
 const selector = (s: DiagramContext) => ({
   id: s.view.id,
-  notations: s.view.notation?.elements ?? [],
+  notations: s.view.notation?.nodes ?? [],
   isVisible: true,
   // isVisible: isNullish(s.focusedNodeId ?? s.activeWalkthrough),
 })

package/src/likec4diagram/useViewToNodesEdges.ts

@@ -1,26 +1,27 @@
 import {
   type DiagramEdge,
+  type DiagramNode,
   type DiagramView,
   type EdgeId,
   type Fqn,
   type NodeId,
   type WhereOperator,
-  DiagramNode,
-  ElementKind,
+  GroupElementKind,
   invariant,
   nonNullable,
   Queue,
   whereOperatorAsPredicate,
 } from '@likec4/core'
-import { useDeepCompareMemo } from '@react-hookz/web'
+import { useCustomCompareMemo } from '@react-hookz/web'
+import { deepEqual, shallowEqual } from 'fast-equals'
 import { hasAtLeast, pick } from 'remeda'
 import { ZIndexes } from '../base/const'
 import type { Types } from './types'
 
 // const nodeZIndex = (node: DiagramNode) => node.level - (node.children.length > 0 ? 1 : 0)
 function viewToNodesEdge(opts: {
-  view: Pick<DiagramView, 'id' | 'nodes' | 'edges' | '__'>
-  where: WhereOperator<string, string> | undefined
+  view: Pick<DiagramView, 'id' | 'nodes' | 'edges' | '_type'>
+  where: WhereOperator | null
   nodesSelectable: boolean
 }): {
   xynodes: Types.Node[]
@@ -30,7 +31,7 @@ function viewToNodesEdge(opts: {
     view,
     nodesSelectable: selectable,
   } = opts
-  const isDynamicView = view.__ === 'dynamic',
+  const isDynamicView = view._type === 'dynamic',
     xynodes = [] as Types.Node[],
     xyedges = [] as Types.Edge[],
     nodeLookup = new Map<Fqn, DiagramNode>()
@@ -73,7 +74,7 @@ function viewToNodesEdge(opts: {
   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 })
@@ -93,8 +94,8 @@ function viewToNodesEdge(opts: {
 
     const base = {
       id,
-      selectable: selectable && node.kind !== ElementKind.Group,
-      focusable: selectable && node.kind !== ElementKind.Group,
+      selectable: selectable && node.kind !== GroupElementKind,
+      focusable: selectable && node.kind !== GroupElementKind,
       deletable: false,
       position,
       zIndex: isCompound ? ZIndexes.Compound : ZIndexes.Element,
@@ -104,7 +105,7 @@ function viewToNodesEdge(opts: {
       },
       initialWidth: node.width,
       initialHeight: node.height,
-      hidden: node.kind !== ElementKind.Group && !visiblePredicate(node),
+      hidden: node.kind !== GroupElementKind && !visiblePredicate(node),
       ...(parent && {
         parentId: ns + parent.id,
       }),
@@ -119,6 +120,7 @@ function viewToNodesEdge(opts: {
       style: node.style,
       depth: node.depth ?? 0,
       icon: node.icon ?? 'none',
+      tags: node.tags ?? null,
       position: node.position,
     } satisfies Types.CompoundNodeData
 
@@ -135,11 +137,12 @@ function viewToNodesEdge(opts: {
       shape: node.shape,
       style: node.style,
       icon: node.icon ?? null,
+      tags: node.tags,
       position: node.position,
       isMultiple: node.style?.multiple ?? false,
     } satisfies Types.LeafNodeData
 
-    if (node.kind === ElementKind.Group) {
+    if (node.kind === GroupElementKind) {
       xynodes.push({
         ...base,
         type: 'view-group',
@@ -152,8 +155,8 @@ function viewToNodesEdge(opts: {
       continue
     }
 
-    const modelFqn = DiagramNode.modelRef(node)
-    const deploymentFqn = DiagramNode.deploymentRef(node)
+    const modelFqn = node.modelRef ?? null
+    const deploymentFqn = node.deploymentRef ?? null
     if (!modelFqn && !deploymentFqn) {
       console.error('Invalid node', node)
       throw new Error('Element should have either modelRef or deploymentRef')
@@ -269,29 +272,24 @@ function viewToNodesEdge(opts: {
     xyedges,
   }
 }
-
-export function useViewToNodesEdges({
-  view: {
-    id,
-    nodes,
-    edges,
-    __ = 'element',
-  },
-  ...opts
-}: {
+type ViewToNodesEdgeInput = {
   view: DiagramView
-  where: WhereOperator<string, string> | undefined
+  where: WhereOperator | null
   nodesSelectable: boolean
-}) {
-  return useDeepCompareMemo(() => {
-    return viewToNodesEdge({
-      view: {
-        id,
-        nodes,
-        edges,
-        __,
-      },
-      ...opts,
-    })
-  }, [id, __, nodes, edges, opts])
+}
+const viewToNodesEdgeEqual = (a: ViewToNodesEdgeInput, b: ViewToNodesEdgeInput) => (
+  a.view.id === b.view.id
+  && a.view._type === b.view._type
+  && a.nodesSelectable === b.nodesSelectable
+  && shallowEqual(a.view.nodes, b.view.nodes)
+  && shallowEqual(a.view.edges, b.view.edges)
+  && deepEqual(a.where, b.where)
+)
+
+export function useViewToNodesEdges(params: ViewToNodesEdgeInput) {
+  return useCustomCompareMemo(
+    () => viewToNodesEdge(params),
+    [params],
+    ([a], [b]) => !!a && !!b && viewToNodesEdgeEqual(a, b),
+  )
 }

package/src/likec4model/LikeC4ModelContext.ts

@@ -1,4 +1,4 @@
-import type { AnyAux, LikeC4Model } from '@likec4/core/model'
+import type { LikeC4Model } from '@likec4/core/model'
 import { createContext } from 'react'
 
-export const LikeC4ModelContext = createContext<LikeC4Model<AnyAux> | null>(null)
+export const LikeC4ModelContext = createContext<LikeC4Model<any> | null>(null)

package/src/likec4model/useLikeC4ElementsTree.ts

@@ -27,7 +27,7 @@ function buildNode(
  * If `viewId` is provided, returns the tree of elements in the view.
  */
 export function useLikeC4ElementsTree(viewId?: ViewId): LikeC4ModelTreeNodeData[] {
-  const model = useLikeC4Model(true)
+  const model = useLikeC4Model()
   return useMemo(() => {
     if (viewId) {
       const view = model.view(viewId)

package/src/likec4model/useLikeC4Model.ts

@@ -1,26 +1,28 @@
-import type { LikeC4Model } from '@likec4/core/model'
+import type { aux, LikeC4Model } from '@likec4/core/model'
 import { useContext } from 'react'
-import { isDefined, isNonNullish, isString } from 'remeda'
+import { isString } from 'remeda'
 import { LikeC4ModelContext } from './LikeC4ModelContext'
 
-export function useLikeC4Model(): LikeC4Model | null
-export function useLikeC4Model(strict: true): LikeC4Model
-export function useLikeC4Model(strict: boolean): LikeC4Model | null
-export function useLikeC4Model(strict: true, type: 'layouted'): LikeC4Model.Layouted
-export function useLikeC4Model(strict: true, type: 'computed'): LikeC4Model.Computed
-export function useLikeC4Model(strict: true, type: 'layouted' | 'computed' | undefined): LikeC4Model
-export function useLikeC4Model(strict: boolean, type: 'layouted'): LikeC4Model.Layouted | null
-export function useLikeC4Model(strict: boolean, type: 'computed'): LikeC4Model.Computed | null
-export function useLikeC4Model(strict: boolean, type: 'layouted' | 'computed' | undefined): LikeC4Model | null
-export function useLikeC4Model(strict?: boolean, type?: 'layouted' | 'computed') {
+export function useLikeC4Model<A extends aux.Any = aux.Unknown>(): LikeC4Model<A>
+export function useLikeC4Model<A extends aux.Any = aux.Unknown>(type: 'layouted'): LikeC4Model.Layouted<A>
+export function useLikeC4Model<A extends aux.Any = aux.Unknown>(type: 'computed'): LikeC4Model.Computed<A>
+// dprint-ignore
+export function useLikeC4Model<A extends aux.Any = aux.Unknown>(type: 'layouted' | 'computed' | undefined): LikeC4Model<A>
+export function useLikeC4Model(type?: 'layouted' | 'computed') {
   const model = useContext(LikeC4ModelContext)
 
-  if (isString(type) && isNonNullish(model) && model.type !== type) {
-    throw new Error(`Invalid LikeC4ModelContext, expected "${type}" but got "${model.type}" in context`)
+  if (!model) {
+    throw new Error('No LikeC4Model found in context')
   }
 
-  if (isDefined(strict) && strict === true && !model) {
-    throw new Error('No LikeC4Model found in context')
+  if (isString(type) && model.stage !== type) {
+    throw new Error(`Invalid LikeC4ModelContext, expected "${type}" but got "${model.stage}" in context`)
   }
+
   return model
 }
+
+export function useLikeC4Specification() {
+  const model = useLikeC4Model()
+  return model.$data.specification
+}

package/src/overlays/Overlays.tsx

@@ -1,13 +1,12 @@
 import { nonexhaustive } from '@likec4/core'
-import { Box, Button, Code, Group, Notification, ScrollAreaAutosize } from '@mantine/core'
-import { IconX } from '@tabler/icons-react'
 import { useSelector } from '@xstate/react'
 import { animate } from 'motion'
 import { AnimatePresence, LayoutGroup, useReducedMotionConfig } from 'motion/react'
-import { memo, useEffect, useMemo } from 'react'
-import { type FallbackProps, ErrorBoundary } from 'react-error-boundary'
+import { useEffect, useMemo } from 'react'
+import { ErrorBoundary } from 'react-error-boundary'
 import { isNonNullish } from 'remeda'
 import type { AnyActorRef } from 'xstate'
+import { ErrorFallback } from '../components/ErrorFallback'
 import { DiagramFeatures } from '../context'
 import { useXYStore } from '../hooks'
 import { ElementDetails } from './element-details/ElementDetails'
@@ -16,32 +15,6 @@ import { type OverlaysActorRef, type OverlaysActorSnapshot } from './overlaysAct
 import { RelationshipDetails } from './relationship-details/RelationshipDetails'
 import { RelationshipsBrowser } from './relationships-browser/RelationshipsBrowser'
 
-function Fallback({ error, resetErrorBoundary }: FallbackProps) {
-  const errorString = error instanceof Error ? error.message : 'Unknown error'
-  return (
-    <Box pos={'fixed'} top={0} left={0} w={'100%'} p={0} style={{ zIndex: 1000 }}>
-      <Notification
-        icon={<IconX style={{ width: 16, height: 16 }} />}
-        styles={{
-          icon: {
-            alignSelf: 'flex-start',
-          },
-        }}
-        color={'red'}
-        title={'Oops, something went wrong'}
-        p={'xl'}
-        withCloseButton={false}>
-        <ScrollAreaAutosize maw={'100%'} mah={400}>
-          <Code block>{errorString}</Code>
-        </ScrollAreaAutosize>
-        <Group gap={'xs'} mt="xl">
-          <Button color="gray" size="xs" variant="light" onClick={() => resetErrorBoundary()}>Reset</Button>
-        </Group>
-      </Notification>
-    </Box>
-  )
-}
-
 const selectOverlays = (s: OverlaysActorSnapshot) => {
   return s.context.overlays.map((overlay) => {
     switch (overlay.type) {
@@ -85,7 +58,7 @@ export function Overlays({ overlaysActorRef }: { overlaysActorRef: OverlaysActor
   const overlays = useSelector(overlaysActorRef, selectOverlays, compareSelectOverlays)
   const isMotionReduced = useReducedMotionConfig() ?? false
 
-  const isActiveOverlay = overlays.length > 0
+  const isActiveOverlay = overlays.some((overlay) => overlay.type === 'elementDetails')
 
   useEffect(() => {
     if (!xyflowRendererDom || isMotionReduced) return
@@ -136,7 +109,7 @@ export function Overlays({ overlaysActorRef }: { overlaysActorRef: OverlaysActor
 
   return (
     <DiagramFeatures.Overlays>
-      <ErrorBoundary FallbackComponent={Fallback} onReset={() => overlaysActorRef.send({ type: 'close.all' })}>
+      <ErrorBoundary FallbackComponent={ErrorFallback} onReset={() => overlaysActorRef.send({ type: 'close.all' })}>
         <LayoutGroup>
           <AnimatePresence>
             {overlaysReact}

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

@@ -1,14 +1,13 @@
 import {
+  type Any,
   type ComputedView,
   type DiagramView,
   type Element,
   type Fqn,
-  type LikeC4View,
   type NodeId,
+  type scalar,
   type ViewId,
-  isDeploymentView,
-  isScopedElementView,
-} from '@likec4/core'
+} from '@likec4/core/types'
 import { css, cx } from '@likec4/styles/css'
 import {
   type TextProps,
@@ -41,6 +40,7 @@ import type { Rect } from '@xyflow/system'
 import { type PanInfo, m, useDragControls, useMotionValue } from 'motion/react'
 import { type PropsWithChildren, useCallback, useRef, useState } from 'react'
 import { clamp, isNullish, map, only, partition, pipe } from 'remeda'
+import { ElementTag } from '../../base/primitives/element/ElementTags'
 import { Link } from '../../components/Link'
 import { DiagramFeatures, IconRenderer, IfEnabled } from '../../context'
 import { useUpdateEffect } from '../../hooks'
@@ -113,7 +113,7 @@ export function ElementDetailsCard({
     defaultValue: 'Properties',
   })
   const diagram = useDiagram()
-  const likec4model = useLikeC4Model(true)
+  const likec4model = useLikeC4Model()
   const viewModel = likec4model.view(viewId)
   const nodeModel = fromNode ? viewModel.findNode(fromNode) : viewModel.findNodeWithElement(fqn)
 
@@ -122,10 +122,7 @@ export function ElementDetailsCard({
   const [viewsOf, otherViews] = pipe(
     [...elementModel.views()],
     map(v => v.$view),
-    partition(view => {
-      const v = view as LikeC4View
-      return isScopedElementView(v) && v.viewOf === fqn
-    }),
+    partition(v => v._type === 'element' && v.viewOf === fqn),
   )
 
   let defaultView = nodeModel?.navigateTo?.$view ?? elementModel.defaultView?.$view ?? null
@@ -331,16 +328,26 @@ export function ElementDetailsCard({
               </div>
               <div style={{ flex: 1 }}>
                 <SmallLabel>tags</SmallLabel>
-                <Flex gap={4} flex={1} mt={6}>
+                <Flex gap={4} flex={1} mt={6} wrap="wrap">
                   {elementModel.tags.map((tag) => (
-                    <Badge key={tag} radius={'sm'} size="sm" fw={600} variant="gradient">#{tag}</Badge>
+                    <ElementTag
+                      key={tag}
+                      tag={tag}
+                      css={{
+                        cursor: 'pointer',
+                      }}
+                      onClick={e => {
+                        e.stopPropagation()
+                        diagram.openSearch(`#${tag}`)
+                      }}
+                    />
                   ))}
                   {elementModel.tags.length === 0 && <Badge radius={'sm'} size="sm" fw={600} color="gray">—</Badge>}
                 </Flex>
               </div>
               <ActionIconGroup
                 style={{
-                  alignSelf: 'flex-end',
+                  alignSelf: 'flex-start',
                 }}>
                 {defaultLink && (
                   <ActionIcon
@@ -454,7 +461,7 @@ export function ElementDetailsCard({
                           <ViewButton
                             key={view.id}
                             view={view}
-                            onNavigateTo={to => diagram.navigateTo(to, fromNode ?? undefined)} />
+                            onNavigateTo={to => diagram.navigateTo(to as scalar.ViewId, fromNode ?? undefined)} />
                         ))}
                       </Stack>
                     </Box>
@@ -467,7 +474,7 @@ export function ElementDetailsCard({
                           <ViewButton
                             key={view.id}
                             view={view}
-                            onNavigateTo={to => diagram.navigateTo(to, fromNode ?? undefined)} />
+                            onNavigateTo={to => diagram.navigateTo(to as scalar.ViewId, fromNode ?? undefined)} />
                         ))}
                       </Stack>
                     </Box>
@@ -501,18 +508,18 @@ export function ElementDetailsCard({
   )
 }
 
-const ViewButton = ({
+const ViewButton = <A extends Any>({
   view,
   onNavigateTo,
 }: {
-  view: ComputedView | DiagramView
-  onNavigateTo: OnNavigateTo
+  view: ComputedView<A> | DiagramView<A>
+  onNavigateTo: OnNavigateTo<A>
 }) => {
   return (
     <UnstyledButton className={styles.viewButton} onClick={e => onNavigateTo(view.id, e)}>
       <Group gap={6} align="start" wrap="nowrap">
         <ThemeIcon size={'sm'} variant="transparent">
-          {isDeploymentView(view)
+          {view._type === 'deployment'
             ? <IconStack2 stroke={1.8} />
             : <IconZoomScan stroke={1.8} />}
         </ThemeIcon>