@likec4/diagram 1.18.0 → 1.19.0

package/src/controls/action-buttons/ActionButtons.tsx

@@ -0,0 +1,138 @@
+import type { Fqn } from '@likec4/core'
+import { IconFileSymlink, IconId, IconTransform, IconZoomScan } from '@tabler/icons-react'
+import { useCallback } from 'react'
+import { useDiagramState, useDiagramStoreApi } from '../../hooks'
+import { type ActionButtonProps, ActionButton } from './ActionButton'
+
+export type NodeActionButtonProps = Omit<ActionButtonProps, 'onClick' | 'IconComponent' | 'tooltipLabel'> & {
+  fqn: Fqn
+}
+
+// Browse Relationships
+
+export const BrowseRelationshipsButton = ({
+  fqn,
+  ...props
+}: NodeActionButtonProps) => {
+  const {
+    openOverlay,
+  } = useDiagramState(s => ({
+    openOverlay: s.openOverlay,
+  }))
+
+  const onBrowseRelationships = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation()
+    openOverlay({ relationshipsOf: fqn })
+  }, [openOverlay, fqn])
+
+  return (
+    <ActionButton
+      {...props}
+      onClick={onBrowseRelationships}
+      IconComponent={IconTransform}
+      tooltipLabel="Browse relationships"
+    />
+  )
+}
+
+// Navigate to
+// It triggers the onNavigateTo event from the xynode (node should have a navigateTo property)
+export type NavigateToButtonProps = Omit<ActionButtonProps, 'onClick' | 'IconComponent' | 'tooltipLabel'> & {
+  xynodeId: string
+}
+export const NavigateToButton = ({
+  xynodeId,
+  ...props
+}: NavigateToButtonProps) => {
+  const store = useDiagramStoreApi()
+
+  const onNavigateTo = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation()
+    store.getState().triggerOnNavigateTo(xynodeId, e)
+  }, [store, xynodeId])
+
+  return (
+    <ActionButton
+      {...props}
+      onClick={onNavigateTo}
+      IconComponent={IconZoomScan}
+      tooltipLabel="Open scoped view"
+    />
+  )
+}
+
+// Open details
+const VariantsDetailsBtn = {
+  idle: {
+    '--ai-bg': 'var(--ai-bg-idle)',
+    scale: 1,
+    opacity: 0.5,
+    originX: 0.45,
+    originY: 0.55,
+  },
+  selected: {},
+  hovered: {
+    scale: 1.2,
+    opacity: 0.7,
+  },
+  'hovered:details': {
+    scale: 1.44,
+    opacity: 1,
+  },
+  'tap:details': {
+    scale: 1.15,
+  },
+}
+VariantsDetailsBtn['selected'] = VariantsDetailsBtn['hovered']
+
+export const OpenDetailsButton = ({
+  fqn,
+  ...props
+}: NodeActionButtonProps) => {
+  const {
+    openOverlay,
+  } = useDiagramState(s => ({
+    openOverlay: s.openOverlay,
+  }))
+
+  const onOpenDetails = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation()
+    openOverlay({ elementDetails: fqn })
+  }, [openOverlay, fqn])
+
+  return (
+    <ActionButton
+      variants={VariantsDetailsBtn}
+      onClick={onOpenDetails}
+      IconComponent={IconId}
+      tooltipLabel="Open details"
+      data-animate-target="details"
+      {...props}
+    />
+  )
+}
+
+// Open element source
+
+export const OpenSourceButton = ({
+  fqn,
+  ...props
+}: NodeActionButtonProps) => {
+  const diagramApi = useDiagramStoreApi()
+
+  const onOpenSource = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation()
+    diagramApi.getState().onOpenSource?.({
+      element: fqn,
+    })
+  }, [diagramApi, fqn])
+
+  return (
+    <ActionButton
+      {...props}
+      onClick={onOpenSource}
+      IconComponent={IconFileSymlink}
+      tooltipLabel="Open source"
+    />
+  )
+}

package/src/hooks/useXYFlow.ts

@@ -1,15 +1,15 @@
 import { useInternalNode, useNodesData, useReactFlow, useStore, useStoreApi } from '@xyflow/react'
 import { deepEqual, shallowEqual } from 'fast-equals'
 import { useCallback } from 'react'
-import type { XYFlowEdge, XYFlowNode, XYFlowState } from '../xyflow/types'
+import type { DiagramFlowTypes } from '../xyflow/types'
 
-export const useXYFlow = useReactFlow<XYFlowNode, XYFlowEdge>
+export const useXYFlow = useReactFlow<DiagramFlowTypes.Node, DiagramFlowTypes.Edge>
 
-export const useXYNodesData = useNodesData<XYFlowNode>
-export const useXYInternalNode = useInternalNode<XYFlowNode>
+export const useXYNodesData = useNodesData<DiagramFlowTypes.Node>
+export const useXYInternalNode = useInternalNode<DiagramFlowTypes.Node>
 
 export function useXYStore<StateSlice = unknown>(
-  selector: (state: XYFlowState) => StateSlice,
+  selector: (state: DiagramFlowTypes.XYFlowState) => StateSlice,
   equalityFn?: (a: StateSlice, b: StateSlice) => boolean
 ): StateSlice {
   return useStore(
@@ -17,15 +17,15 @@ export function useXYStore<StateSlice = unknown>(
     equalityFn ?? shallowEqual
   )
 }
-export const useXYStoreApi = useStoreApi<XYFlowNode, XYFlowEdge>
+export const useXYStoreApi = useStoreApi<DiagramFlowTypes.Node, DiagramFlowTypes.Edge>
 export type XYStoreApi = ReturnType<typeof useXYStoreApi>
 
-export function useXYEdgesData(edgeIds: string[]): Pick<XYFlowEdge, 'id' | 'data'>[] {
+export function useXYEdgesData(edgeIds: string[]): Pick<DiagramFlowTypes.Edge, 'id' | 'data'>[] {
   const ids = edgeIds.join(',')
   const edgesData = useXYStore(
     useCallback(
       (s) => {
-        const data = [] as Pick<XYFlowEdge, 'id' | 'data'>[]
+        const data = [] as Pick<DiagramFlowTypes.Edge, 'id' | 'data'>[]
         for (const id of edgeIds) {
           const edge = s.edgeLookup.get(id)
           if (edge) {

package/src/index.ts

@@ -1,20 +1,26 @@
 import '@xyflow/react/dist/style.css'
 
 export { LikeC4Diagram } from './LikeC4Diagram'
+export type { LikeC4DiagramProps } from './LikeC4Diagram'
+
 export {
   useLikeC4DiagramView,
+  useLikeC4ElementModel,
+  useLikeC4ElementsTree,
   useLikeC4Model,
   useLikeC4View,
   useLikeC4ViewModel,
-  useLikeC4Views
-} from './likec4model/useLikeC4Model'
+  useLikeC4Views,
+} from './likec4model'
 export { LikeC4ModelProvider } from './LikeC4ModelProvider'
-export { StaticLikeC4Diagram } from './StaticLikeC4Diagram'
 
 export { useSetState } from './hooks/useSetState'
 export { useUpdateEffect } from './hooks/useUpdateEffect'
-export type * from './LikeC4Diagram'
+export { vars, xyvars } from './theme-vars'
+
 export type * from './LikeC4Diagram.props'
-export type * from './LikeC4ModelProvider'
-export type * from './StaticLikeC4Diagram'
+
 export type * from './xyflow/types'
+
+export { StaticLikeC4Diagram } from './StaticLikeC4Diagram'
+export type { StaticLikeC4DiagramProps } from './StaticLikeC4Diagram'

package/src/likec4model/index.ts

@@ -1,2 +1,12 @@
-export * from './useLikeC4ElementsTree'
-export * from './useLikeC4Model'
+export {
+  useLikeC4ElementsTree,
+} from './useLikeC4ElementsTree'
+export {
+  useLikeC4CurrentViewModel,
+  useLikeC4DiagramView,
+  useLikeC4ElementModel,
+  useLikeC4Model,
+  useLikeC4View,
+  useLikeC4ViewModel,
+  useLikeC4Views,
+} from './useLikeC4Model'

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

@@ -11,8 +11,10 @@ import {
   ViewportPortal
 } from '@xyflow/react'
 import { memo, useEffect } from 'react'
+import { only } from 'remeda'
 import { useDiagramStoreApi } from '../../hooks/useDiagramState'
-import type { XYFlowTypes } from './_types'
+import type { SharedFlowTypes } from '../shared/xyflow/_types'
+import type { EdgeDetailsFlowTypes } from './_types'
 import { SelectEdge } from './SelectEdge'
 import * as css from './SelectEdge.css'
 import { useLayoutedEdgeDetails, ZIndexes } from './use-layouted-edge-details'
@@ -28,7 +30,7 @@ const edgeTypes = {
   relation: RelationshipEdge
 }
 
-const resetDimmedAndHovered = (xyflow: ReactFlowInstance<XYFlowTypes.Node, XYFlowTypes.Edge>) => {
+const resetDimmedAndHovered = (xyflow: ReactFlowInstance<SharedFlowTypes.Node, EdgeDetailsFlowTypes.Edge>) => {
   xyflow.setEdges(edges =>
     edges.map(edge => ({
       ...edge,
@@ -49,12 +51,12 @@ const resetDimmedAndHovered = (xyflow: ReactFlowInstance<XYFlowTypes.Node, XYFlo
           dimmed: false,
           hovered: false
         }
-      }) as XYFlowTypes.Node
+      }) as SharedFlowTypes.Node
     )
   )
 }
 
-const animateEdge = (node: XYFlowTypes.Node, animated = true) => (edges: XYFlowTypes.Edge[]) => {
+const animateEdge = (node: SharedFlowTypes.Node, animated = true) => (edges: EdgeDetailsFlowTypes.Edge[]) => {
   return edges.map(edge => {
     const isConnected = edge.source === node.id || edge.target === node.id || isAncestor(node.id, edge.source)
       || isAncestor(node.id, edge.target)
@@ -78,8 +80,8 @@ export const EdgeDetailsXYFlow = memo<{ edgeId: EdgeId }>(function EdgeDetailsXY
 
   const boundsRef = useSyncedRef(bounds)
 
-  const xyflow = useReactFlow<XYFlowTypes.Node, XYFlowTypes.Edge>()
-  const xystore = useStoreApi<XYFlowTypes.Node, XYFlowTypes.Edge>()
+  const xyflow = useReactFlow<SharedFlowTypes.Node, EdgeDetailsFlowTypes.Edge>()
+  const xystore = useStoreApi<SharedFlowTypes.Node, EdgeDetailsFlowTypes.Edge>()
 
   const fitview = useDebouncedCallback(
     () => {
@@ -115,8 +117,8 @@ export const EdgeDetailsXYFlow = memo<{ edgeId: EdgeId }>(function EdgeDetailsXY
 
   return (
     <ReactFlow
-      defaultEdges={[] as XYFlowTypes.Edge[]}
-      defaultNodes={[] as XYFlowTypes.Node[]}
+      defaultEdges={[] as EdgeDetailsFlowTypes.Edge[]}
+      defaultNodes={[] as SharedFlowTypes.Node[]}
       nodeTypes={nodeTypes}
       edgeTypes={edgeTypes}
       defaultMarkerColor="var(--xy-edge-stroke)"
@@ -168,7 +170,7 @@ export const EdgeDetailsXYFlow = memo<{ edgeId: EdgeId }>(function EdgeDetailsXY
               ...n.data,
               dimmed: n.id !== edge.source && n.id !== edge.target
             }
-          } as XYFlowTypes.Node))
+          } as SharedFlowTypes.Node))
         )
       }}
       onEdgeMouseLeave={() => {
@@ -194,9 +196,13 @@ export const EdgeDetailsXYFlow = memo<{ edgeId: EdgeId }>(function EdgeDetailsXY
       // }}
       onEdgeClick={(e, edge) => {
         e.stopPropagation()
-        diagramStore.getState().onOpenSource?.({
-          relation: edge.data.relationId
-        })
+        // edge-details only ever deals with edges that represent only one relation
+        let relationId = only(edge.data.relations)?.id
+        if (relationId) {
+          diagramStore.getState().onOpenSource?.({
+            relation: relationId
+          })
+        }
       }}
       // onEdgeClick={(e, edge) => {
       //   e.stopPropagation()

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

@@ -1,42 +1,18 @@
-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'
+import type { AddEdgeData } from '../../utils/types'
+import type { SharedFlowTypes } from '../shared/xyflow/_types'
 
-export namespace XYFlowTypes {
-  type NodeProps = {
-    fqn: Fqn
-    element: Pick<ComputedNode, 'color' | 'title' | 'description' | 'shape' | 'kind'>
-    ports: {
-      in: string[]
-      out: string[]
-    }
-    navigateTo: ViewId | null
-    hovered?: boolean
-    /**
-     * Whether the node is dimmed
-     * 'immediate' means that the node is dimmed without delay
-     */
-    dimmed?: 'immediate' | boolean
-  }
-
-  export type ElementNode = SetRequired<ReactFlowNode<NodeProps, 'element'>, 'type'>
-
-  export type CompoundNode = SetRequired<ReactFlowNode<NodeProps, 'compound'>, 'type'>
+export namespace EdgeDetailsFlowTypes {
 
-  export type Node = ElementNode | CompoundNode
-
-  export type Edge = Omit<ReactFlowEdge, 'data' | 'type'> & {
-    data: {
-      technology: string | null
-      description: string | null
-      relationId: RelationId
-      // relation: Relation
-      navigateTo: ViewId | null
-      hovered?: boolean
-      dimmed?: boolean
-    }
-    type: 'relation'
+  /**
+   * Data that is exclusive to the edge-details overlay. It will be merged into the edge types
+   * provided by SharedFlowTypes.
+   */
+  type EdgeDetailsEdgeData = {
+    technology: string | null
+    description: string | null
   }
 
-  export type Instance = ReactFlowInstance<Node, Edge>
+  // Extend the edge types provided by SharedFlowTypes with EdgeDetailsEdgeData
+
+  export type Edge = AddEdgeData<SharedFlowTypes.Edge, EdgeDetailsEdgeData>
 }

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

@@ -1,5 +1,6 @@
 import dagre, { type GraphLabel, type Label } from '@dagrejs/dagre'
 import {
+  type AbstractRelation,
   compareFqnHierarchically,
   compareRelations,
   type DiagramEdge,
@@ -16,7 +17,8 @@ import { useMemo } from 'react'
 import { filter, first, forEach, isTruthy, map, pipe, prop, reverse, sort, sortBy, takeWhile } from 'remeda'
 import { useDiagramState } from '../../hooks/useDiagramState'
 import { useLikeC4Model } from '../../likec4model'
-import type { XYFlowTypes } from './_types'
+import type { SharedFlowTypes } from '../shared/xyflow/_types'
+import type { EdgeDetailsFlowTypes } from './_types'
 
 /**
  * All constants related to the layout
@@ -67,16 +69,16 @@ function createGraph() {
 type Context = {
   g: dagre.graphlib.Graph
   diagramNodes: Map<Fqn, DiagramNode>
-  xynodes: Map<Fqn, XYFlowTypes.Node>
+  xynodes: Map<Fqn, SharedFlowTypes.NonEmptyNode>
   edge: DiagramEdge
-  edges: XYFlowTypes.Edge[]
+  edges: EdgeDetailsFlowTypes.Edge[]
 }
 const sized = (height: number = Sizes.hodeHeight) => ({
   width: Sizes.nodeWidth,
   height
 })
 
-const graphId = (node: XYFlowTypes.Node) => ({
+const graphId = (node: SharedFlowTypes.Node) => ({
   id: node.id,
   port: node.type === 'compound' ? `${node.id}::port` : node.id,
   body: `${node.id}`,
@@ -86,7 +88,7 @@ const graphId = (node: XYFlowTypes.Node) => ({
 function nodeData(
   element: LikeC4Model.Element,
   ctx: Context
-): Omit<XYFlowTypes.Node['data'], 'column'> {
+): SharedFlowTypes.OverlayNodeData {
   // We try to inherit style from existing diagram node
   let diagramNode = ctx.diagramNodes.get(element.id)
 
@@ -117,10 +119,10 @@ function nodeData(
 }
 
 function createNode(
-  nodeType: XYFlowTypes.Node['type'],
+  nodeType: SharedFlowTypes.NonEmptyNode['type'],
   element: LikeC4Model.Element,
   ctx: Context
-): XYFlowTypes.Node {
+): SharedFlowTypes.Node {
   let node = ctx.xynodes.get(element.id)
   if (node) {
     return node
@@ -135,7 +137,7 @@ function createNode(
     found => found ? createNode('compound', found, ctx) : null
   )
 
-  const xynode: XYFlowTypes.Node = {
+  const xynode: SharedFlowTypes.NonEmptyNode = {
     type: nodeType,
     id: element.id,
     position: { x: 0, y: 0 },
@@ -181,7 +183,7 @@ function createNode(
  * And return a function to get node bounds for xyflow
  */
 function applyDagreLayout(g: dagre.graphlib.Graph) {
-  type NodeBounds = Required<Pick<XYFlowTypes.Node, 'position' | 'width' | 'height'>>
+  type NodeBounds = Required<Pick<SharedFlowTypes.Node, 'position' | 'width' | 'height'>>
   dagre.layout(g)
   return function nodeBounds(nodeId: string, relativeTo?: string): NodeBounds {
     const { x, y, width, height } = g.node(nodeId)
@@ -215,8 +217,8 @@ function layout(
 ): {
   view: DiagramView
   edge: DiagramEdge
-  nodes: XYFlowTypes.Node[]
-  edges: XYFlowTypes.Edge[]
+  nodes: SharedFlowTypes.Node[]
+  edges: EdgeDetailsFlowTypes.Edge[]
   bounds: { x: number; y: number; width: number; height: number }
 } {
   const edge = view.edges.find(e => e.id === edgeId)
@@ -231,7 +233,7 @@ function layout(
       return {
         source: relation.source.id,
         target: relation.target.id,
-        relation: relation.$relationship
+        relation: relation.$relationship as AbstractRelation
       }
     })
     .sort(compareRelations)
@@ -272,7 +274,7 @@ function layout(
     target.data.ports.in.push(source.id)
 
     g.setEdge(graphId(source).port, graphId(target).port)
-    const edge: XYFlowTypes.Edge = {
+    const edge: EdgeDetailsFlowTypes.Edge = {
       id: relation.id,
       type: 'relation',
       source: source.id,
@@ -280,7 +282,7 @@ function layout(
       sourceHandle: target.id,
       targetHandle: source.id,
       data: {
-        relationId: relation.id,
+        relations: [relation],
         navigateTo: relation.navigateTo ?? null,
         technology: relation.technology ?? null,
         description: relation.description ?? null

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

@@ -1,15 +1,11 @@
-import { Text as MantineText } from '@mantine/core'
 import { Handle, type NodeProps, Position } from '@xyflow/react'
 import clsx from 'clsx'
 import { m } from 'framer-motion'
-import type { XYFlowTypes } from '../_types'
+import type { SharedFlowTypes } from '../../shared/xyflow/_types'
 import * as css from './styles.css'
+import { Text } from '../../../controls/Text'
 
-const Text = MantineText.withProps({
-  component: 'div'
-})
-
-type CompoundNodeProps = NodeProps<XYFlowTypes.CompoundNode>
+type CompoundNodeProps = NodeProps<SharedFlowTypes.CompoundNode>
 
 export function CompoundNode({
   data: {
@@ -71,10 +67,6 @@ export function CompoundNode({
             top: `${16 + 20 * i}px`
           }} />
       ))}
-      {
-        /* <Handle type="target" position={Position.Left}/>
-      <Handle type="source" position={Position.Right}/> */
-      }
     </>
   )
 }

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

@@ -1,4 +1,4 @@
-import { ActionIcon, Box, Group, Text as MantineText } from '@mantine/core'
+import { ActionIcon, Box, Group } from '@mantine/core'
 import { IconFileSymlink, IconTransform, IconZoomScan } from '@tabler/icons-react'
 import { Handle, type NodeProps, Position } from '@xyflow/react'
 import clsx from 'clsx'
@@ -7,8 +7,9 @@ import { type DiagramState, useDiagramState } from '../../../hooks'
 import { ElementShapeSvg } from '../../../xyflow/nodes/element/ElementShapeSvg'
 import { stopPropagation } from '../../../xyflow/utils'
 import { useOverlayDialog } from '../../OverlayContext'
-import type { XYFlowTypes } from '../_types'
+import type { SharedFlowTypes } from '../../shared/xyflow/_types'
 import * as css from './styles.css'
+import { Text } from '../../../controls/Text'
 
 const Action = ActionIcon.withProps({
   className: 'nodrag nopan ' + css.navigateBtn,
@@ -18,11 +19,7 @@ const Action = ActionIcon.withProps({
   onPointerDownCapture: stopPropagation
 })
 
-const Text = MantineText.withProps({
-  component: 'div'
-})
-
-type ElementNodeProps = NodeProps<XYFlowTypes.ElementNode>
+type ElementNodeProps = NodeProps<SharedFlowTypes.ElementNode>
 
 function selector(s: DiagramState) {
   return {
@@ -150,10 +147,6 @@ export function ElementNode({
             top: `${15 + (i + 1) * ((h - 30) / (ports.in.length + 1))}px`
           }} />
       ))}
-      {
-        /* <Handle type="target" position={Position.Left} />
-      <Handle type="source" position={Position.Right} /> */
-      }
     </>
   )
 }

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

@@ -5,15 +5,15 @@ import clsx from 'clsx'
 import { useDiagramState } from '../../../hooks/useDiagramState'
 import { stopPropagation } from '../../../xyflow/utils'
 import { useOverlayDialog } from '../../OverlayContext'
-import type { XYFlowTypes } from '../_types'
+import * as css from '../../shared/xyflow/RelationshipEdge.css'
+import type { EdgeDetailsFlowTypes } from '../_types'
 import { ZIndexes } from '../use-layouted-edge-details'
-import * as css from './styles.css'
 
 export function RelationshipEdge({
   data,
   label,
   ...props
-}: EdgeProps<XYFlowTypes.Edge>) {
+}: EdgeProps<EdgeDetailsFlowTypes.Edge>) {
   const overlay = useOverlayDialog()
   const onNavigateTo = useDiagramState(s => s.onNavigateTo)
   const [edgePath, labelX, labelY] = getBezierPath(props)

package/src/overlays/edge-details/xyflow/styles.css.ts

@@ -1,6 +1,5 @@
 import { globalStyle, style } from '@vanilla-extract/css'
-import { mantine, transitions, vars, whereDark, xyvars } from '../../../theme-vars'
-import { mixColor } from '../../Overlays.css'
+import { mantine, vars } from '../../../theme-vars'
 
 export const elementNode = style({
   width: '100%',
@@ -84,63 +83,6 @@ export const cssShapeSvg = style({
   zIndex: -1
 })
 
-const DimmedTransitionDelay = '400ms'
-
-export const edgeContainer = style({
-  opacity: 1,
-  transition: transitions.fast,
-  vars: {
-    [xyvars.edge.stroke]: vars.relation.lineColor,
-    [xyvars.edge.strokeSelected]: `color-mix(in srgb, ${vars.relation.lineColor}, ${mixColor} 35%)`,
-    [xyvars.edge.labelColor]: `color-mix(in srgb, ${vars.relation.labelColor}, rgba(255 255 255 / 0.85) 50%)`,
-    [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 20%)`
-  },
-  selectors: {
-    [`&[data-edge-dimmed='true']`]: {
-      opacity: 0.2,
-      transitionDelay: DimmedTransitionDelay
-    },
-    [`&[data-edge-dimmed='immediate']`]: {
-      opacity: 0.2
-    },
-    [`${whereDark} &`]: {
-      vars: {
-        [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 50%)`
-      }
-    }
-  }
-})
-
-export const edgeLabel = style([edgeContainer, {
-  padding: '2px 5px',
-  fontFamily: vars.likec4.font,
-  position: 'absolute',
-  cursor: 'pointer',
-  width: 'fit-content',
-  color: xyvars.edge.labelColor,
-  backgroundColor: xyvars.edge.labelBgColor,
-  borderRadius: 4,
-  // everything inside EdgeLabelRenderer has no pointer events by default
-  // if you have an interactive element, set pointer-events: all
-  pointerEvents: 'all',
-  textWrap: 'pretty',
-  whiteSpace: 'preserve-breaks'
-}])
-
-export const edgeLabelText = style({
-  textAlign: 'center',
-  whiteSpaceCollapse: 'preserve-breaks',
-  fontSize: mantine.fontSizes.md,
-  lineHeight: mantine.lineHeights.xs
-})
-
-export const edgeLabelTechnology = style({
-  textAlign: 'center',
-  whiteSpaceCollapse: 'preserve-breaks',
-  fontSize: mantine.fontSizes.sm,
-  lineHeight: 1
-})
-
 export const navigateBtnBox = style({
   zIndex: 100,
   position: 'absolute',