@likec4/diagram 1.41.0 → 1.42.0

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

@@ -1,64 +0,0 @@
-import { css, cx } from '@likec4/styles/css'
-
-export const treeNode = css({
-  [`&[data-level='1']`]: {
-    marginBottom: 'sm',
-  },
-})
-
-export const treeNodeLabel = css({
-  cursor: 'default',
-  marginTop: '0',
-  marginBottom: '0',
-})
-
-const label = css({
-  transition: 'fast',
-  color: 'mantine.colors.gray[7]',
-  _dark: {
-    color: 'mantine.colors.dark[1]',
-  },
-  '& > *': {
-    transition: 'fast',
-  },
-  _hover: {
-    transitionTimingFunction: 'out',
-    '& > :not([data-no-transform])': {
-      transitionTimingFunction: 'out',
-      transform: 'translateX(1px)',
-    },
-  },
-  //   '.mantine-Button-root:hover & > :not([data-no-transform])': {
-  // transitionTimingFunction: 'out',
-  //   transform: 'translateX(1px)',
-  //   },
-})
-
-export const nodeLabel = cx(label)
-
-export const instanceLabel = cx(
-  label,
-  css({
-    cursor: 'pointer',
-    width: '100%',
-    justifyContent: 'stretch',
-    flexWrap: 'nowrap',
-    height: '36px',
-    paddingInlineStart: '[16px]',
-    paddingInlineEnd: '2.5', // 10px
-    borderRadius: 'sm',
-    alignItems: 'center',
-    color: 'mantine.colors.gray[7]',
-    _dark: {
-      color: 'mantine.colors.gray.lightColor',
-    },
-    _hover: {
-      background: 'mantine.colors.gray.lightHover',
-    },
-    '& .tabler-icon': {
-      transition: 'fast',
-      width: '90%',
-      opacity: 0.65,
-    },
-  }),
-)

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

@@ -1,220 +0,0 @@
-import type { LikeC4Model } from '@likec4/core/model'
-import type { Fqn } from '@likec4/core/types'
-import { Alert, Box, Button, Group, Menu, rem, Text, ThemeIcon, Tree, useTree } from '@mantine/core'
-import { IconInfoCircle, IconTarget, IconZoomScan } from '@tabler/icons-react'
-import { type ReactNode, memo, useEffect, useMemo } from 'react'
-import { useDiagram } from '../../hooks/useDiagram'
-import { useLikeC4Model } from '../../likec4model/useLikeC4Model'
-import { stopPropagation } from '../../utils'
-import * as css from './TabPanelDeployments.css'
-
-interface TreeNodeData {
-  label: ReactNode
-  value: string
-  type: 'node' | 'instance'
-  children: TreeNodeData[]
-}
-
-type TabPanelDeploymentsProps = {
-  elementFqn: Fqn
-}
-
-const DeploymentNodeRenderer = ({
-  node,
-}: {
-  node: LikeC4Model.DeploymentNode
-}) => (
-  <Group className={css.nodeLabel} gap={6} align="baseline" wrap="nowrap">
-    <Text component="div" fz={11} c="dimmed">{node.kind}:</Text>
-    <Text component="div" fz={'sm'} fw={'500'}>{node.title}</Text>
-  </Group>
-)
-
-const DeployedInstanceRenderer = (
-  {
-    instance,
-  }: {
-    instance: LikeC4Model.DeployedInstance
-  },
-) => {
-  const diagram = useDiagram()
-  const currentViewId = diagram.currentView.id
-  const views = [...instance.views()]
-  return (
-    (
-      <Group className={css.instanceLabel} gap={4}>
-        <ThemeIcon color="gray" variant="transparent" size={'xs'} flex={0}>
-          <IconTarget stroke={1.2} />
-        </ThemeIcon>
-        <Text component="div" fz={'sm'} fw={'500'} flex={'1 1 100%'}>{instance.title}</Text>
-        <Box onClick={stopPropagation} pos={'relative'} data-no-transform flex={0}>
-          {views.length === 0 && (
-            <Button size="compact-xs" variant="transparent" color="gray" disabled>
-              no views
-            </Button>
-          )}
-          {views.length > 0 && (
-            <Menu
-              shadow="md"
-              withinPortal={false}
-              position="bottom-start"
-              offset={0}
-              // trigger={'click-hover'}
-              // openDelay={100}
-              // closeDelay={200}
-              closeOnClickOutside
-              clickOutsideEvents={['pointerdown', 'mousedown', 'click']}
-              closeOnEscape
-              trapFocus
-            >
-              <Menu.Target>
-                <Button size="compact-xs" variant="subtle" color="gray">
-                  {views.length} view{views.length > 1 ? 's' : ''}
-                </Button>
-              </Menu.Target>
-
-              <Menu.Dropdown>
-                {views.map(view => (
-                  <Menu.Item
-                    key={view.id}
-                    px={'xs'}
-                    py={4}
-                    disabled={view.id === currentViewId}
-                    leftSection={
-                      <ThemeIcon size={'sm'} variant="transparent" color="gray">
-                        <IconZoomScan stroke={1.8} opacity={0.65} />
-                      </ThemeIcon>
-                    }
-                    styles={{
-                      itemSection: {
-                        marginInlineEnd: rem(8),
-                      },
-                    }}
-                    onClick={e => {
-                      e.stopPropagation()
-                      diagram.navigateTo(view.id)
-                    }}>
-                    {view.title}
-                  </Menu.Item>
-                ))}
-              </Menu.Dropdown>
-            </Menu>
-          )}
-        </Box>
-      </Group>
-    )
-  )
-}
-
-const setHoveredNode = () => {}
-export const TabPanelDeployments = memo<TabPanelDeploymentsProps>(({ elementFqn }) => {
-  const element = useLikeC4Model().element(elementFqn)
-  const deployments = [...element.deployments()]
-
-  const tree = useTree({
-    multiple: false,
-  })
-  tree.setHoveredNode = setHoveredNode
-
-  const data = useMemo(() => {
-    let roots = [] as TreeNodeData[]
-    let treeItems = new Map<string, TreeNodeData>()
-
-    for (const instance of element.deployments()) {
-      let instanceNode: TreeNodeData = {
-        label: <DeployedInstanceRenderer instance={instance} />,
-        value: instance.id,
-        type: 'instance' as const,
-        children: [],
-      }
-      treeItems.set(instance.id, instanceNode)
-
-      let ancestor = instance.parent as LikeC4Model.DeploymentNode | null
-      while (ancestor) {
-        let ancestorNode = treeItems.get(ancestor.id)
-        if (ancestorNode) {
-          ancestorNode.children.push(instanceNode)
-          break
-        }
-        ancestorNode = {
-          label: <DeploymentNodeRenderer node={ancestor} />,
-          value: ancestor.id,
-          type: 'node' as const,
-          children: [instanceNode],
-        }
-        treeItems.set(ancestor.id, ancestorNode)
-        instanceNode = ancestorNode
-        ancestor = ancestor.parent
-      }
-
-      if (!ancestor && !roots.includes(instanceNode)) {
-        roots.push(instanceNode)
-      }
-    }
-    return roots
-  }, [element])
-
-  useEffect(() => {
-    tree.expandAllNodes()
-  }, [data])
-
-  if (deployments.length === 0) {
-    return (
-      <Alert variant="light" color="gray" icon={<IconInfoCircle />}>
-        This element does not have any deployments
-      </Alert>
-    )
-  }
-
-  return (
-    // <Box></Box>
-    <Tree
-      levelOffset={'sm'}
-      allowRangeSelection={false}
-      classNames={{
-        node: css.treeNode,
-        label: css.treeNodeLabel,
-      }}
-      styles={{
-        root: {
-          position: 'relative',
-
-          width: 'min-content',
-          minWidth: 300,
-        },
-      }}
-      data={data}
-      tree={tree}
-      renderNode={({ node, selected, elementProps, hasChildren }) => (
-        <Box
-          {...elementProps}
-          style={{
-            ...(!hasChildren && {
-              marginBottom: rem(4),
-            }),
-          }}
-        >
-          {hasChildren
-            ? (
-              <Button
-                fullWidth
-                color={'gray'}
-                variant={selected ? 'transparent' : 'subtle'}
-                size="xs"
-                justify="flex-start"
-                styles={{
-                  root: {
-                    position: 'unset',
-                    paddingInlineStart: rem(16),
-                  },
-                }}
-              >
-                {node.label}
-              </Button>
-            )
-            : node.label}
-        </Box>
-      )}
-    />
-  )
-})

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

@@ -1,102 +0,0 @@
-import { css } from '@likec4/styles/css'
-
-export const fqn = css({
-  display: 'inline-block',
-  fontSize: 'sm',
-  fontWeight: 500,
-  whiteSpace: 'nowrap',
-  padding: '[3px 6px]',
-  borderRadius: 3,
-  background: `var(--likec4-palette-fill)/75`,
-  lineHeight: 1.2,
-  color: 'var(--likec4-palette-hiContrast)',
-  // selectors: {
-  //   [`${whereDark} &`]: {
-  //   }
-  // }
-})
-
-export const relationshipStat = css({
-  _light: {
-    background: 'mantine.colors.gray[1]',
-    '&[data-missing': {},
-  },
-  // [`&[data-zero]`]: {
-  //   color: mantine.colors.dimmed
-  // },
-  // [`${whereLight} &[data-zero]`]: {
-  //   background: mantine.colors.gray[3]
-  // },
-  [`&[data-missing]`]: {
-    color: 'mantine.colors.orange[4]',
-    background: `mantine.colors.orange[8]/15`,
-    borderColor: `mantine.colors.orange[5]/20`,
-    _light: {
-      color: 'mantine.colors.orange[8]',
-    },
-  },
-})
-
-export const xyflow = css({
-  flex: '1 1 100%',
-  position: 'relative',
-  width: '100%',
-  height: '100%',
-  background: 'mantine.colors.body',
-  border: `1px solid {colors.mantine.colors.defaultBorder}`,
-  borderRadius: 'sm',
-  _light: {
-    borderColor: 'mantine.colors.gray[3]',
-    background: 'mantine.colors.gray[1]',
-  },
-})
-
-export const panelScope = css({
-  _before: {
-    content: '"scope:"',
-    position: 'absolute',
-    top: '0',
-    left: '2',
-    fontSize: 'xxs',
-    fontWeight: 500,
-    lineHeight: '1',
-    color: 'mantine.colors.dimmed',
-    opacity: 0.85,
-    transform: 'translateY(-100%) translateY(-2px)',
-  },
-  _light: {
-    '& .mantine-SegmentedControl-root': {
-      background: 'mantine.colors.gray[3]',
-    },
-  },
-})
-
-export const edgeNum = css({
-  display: 'inline-block',
-  fontSize: 'xl',
-  fontWeight: 600,
-  padding: '[1px 5px]',
-  minWidth: 24,
-  textAlign: 'center',
-  borderRadius: 'sm',
-  background: 'mantine.colors.dark[7]',
-  color: 'mantine.colors.defaultColor',
-  [`&[data-zero]`]: {
-    color: 'mantine.colors.dimmed',
-  },
-  [`&[data-missing]`]: {
-    color: 'mantine.colors.orange[4]',
-    background: `mantine.colors.orange[8]/20`,
-  },
-  // _light: {
-  //   background: 'mantine.colors.gray[4]',
-  //   color: 'mantine.colors.dark[6]',
-
-  //   [`&[data-zero]`]: {
-  //     background: 'mantine.colors.gray[3]',
-  //   },
-  //   [`&[data-missing]`]: {
-  //     color: 'mantine.colors.orange[8]',
-  //   },
-  // },
-})

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

@@ -1,186 +0,0 @@
-import { nameFromFqn } from '@likec4/core'
-import type { LikeC4Model } from '@likec4/core/model'
-import { ActionIcon, Box, Group, Paper, Stack, Text, ThemeIcon, Tooltip as MantineTooltip } from '@mantine/core'
-import { IconArrowRight, IconExternalLink, IconInfoCircle } from '@tabler/icons-react'
-import { useSelector } from '@xstate/react'
-import { useState } from 'react'
-import { unique } from 'remeda'
-import { useOverlaysActorRef } from '../../hooks/useOverlaysActor'
-import { RelationshipsBrowser } from '../relationships-browser/RelationshipsBrowser'
-import { useElementDetailsActorRef } from './actorContext'
-import * as css from './TabPanelRelationships.css'
-
-type RelationshipsTabPanelProps = {
-  node: LikeC4Model.Node | null
-  element: LikeC4Model.Element
-}
-
-const Tooltip = MantineTooltip.withProps({
-  color: 'dark',
-  fz: 'xs',
-  openDelay: 600,
-  closeDelay: 120,
-  label: '',
-  children: null,
-  offset: 8,
-  withinPortal: false,
-})
-
-export function TabPanelRelationships({
-  node,
-  element,
-}: RelationshipsTabPanelProps) {
-  const overlaysActor = useOverlaysActorRef()
-  const delailsActor = useElementDetailsActorRef()
-  const relationshipsBrowserActor = useSelector(delailsActor, s => s.children[`${delailsActor.id}-relationships`])
-  const [scope, setScope] = useState<'global' | 'view'>('view')
-
-  const incoming = [...element.incoming()].map(r => r.id)
-  const outgoing = [...element.outgoing()].map(r => r.id)
-
-  const incomingInView = node ? unique([...node.incoming()].flatMap(e => e.$edge.relations)) : []
-  const outgoingInView = node ? unique([...node.outgoing()].flatMap(e => e.$edge.relations)) : []
-
-  const notIncludedRelations = [
-    ...incoming,
-    ...outgoing,
-  ].filter(r => !incomingInView.includes(r) && !outgoingInView.includes(r)).length
-  return (
-    <Stack gap={'xs'} pos={'relative'} w={'100%'} h={'100%'}>
-      {(incoming.length + outgoing.length) > 0 && (
-        <Group gap={'xs'} wrap="nowrap" align="center">
-          <Box>
-            <Group gap={8} mb={4} wrap="nowrap">
-              <RelationshipsStat
-                title="incoming"
-                total={incoming.length}
-                included={incomingInView.length}
-              />
-              <ThemeIcon size={'sm'} variant="transparent" c="dimmed">
-                <IconArrowRight style={{ width: 16 }} />
-              </ThemeIcon>
-              <Text className={css.fqn}>{nameFromFqn(element.id)}</Text>
-              <ThemeIcon size={'sm'} variant="transparent" c="dimmed">
-                <IconArrowRight style={{ width: 16 }} />
-              </ThemeIcon>
-              <RelationshipsStat
-                title="outgoing"
-                total={outgoing.length}
-                included={outgoingInView.length}
-              />
-            </Group>
-          </Box>
-          {notIncludedRelations > 0 && (
-            <Tooltip label="Current view does not include some relationships">
-              <Group
-                mt={'xs'}
-                gap={6}
-                c="orange"
-                style={{ cursor: 'pointer' }}>
-                <IconInfoCircle style={{ width: 14 }} />
-                <Text fz="sm">
-                  {notIncludedRelations} relationship{notIncludedRelations > 1 ? 's are' : ' is'} hidden
-                </Text>
-              </Group>
-            </Tooltip>
-          )}
-        </Group>
-      )}
-
-      <Box className={css.xyflow}>
-        {relationshipsBrowserActor && (
-          <>
-            <RelationshipsBrowser actorRef={relationshipsBrowserActor} />
-            <Box pos={'absolute'} top={12} right={12}>
-              <ActionIcon
-                size="md"
-                variant="default"
-                radius="sm"
-                onClick={(e) => {
-                  e.stopPropagation()
-                  const {
-                    subject,
-                    scope,
-                    viewId,
-                  } = relationshipsBrowserActor.getSnapshot().context
-                  overlaysActor.send({
-                    type: 'open.relationshipsBrowser',
-                    subject: subject,
-                    scope,
-                    viewId,
-                  })
-                }}
-              >
-                <IconExternalLink stroke={1.6} style={{ width: '70%' }} />
-              </ActionIcon>
-            </Box>
-          </>
-        )}
-      </Box>
-    </Stack>
-  )
-}
-
-function RelationshipsStat({
-  title,
-  total,
-  included,
-}: {
-  title: string
-  total: number
-  included: number
-}) {
-  return (
-    <Paper
-      withBorder
-      shadow="none"
-      className={css.relationshipStat}
-      px="md"
-      py="xs"
-      radius="md"
-      mod={{
-        zero: total === 0,
-        missing: total !== included,
-      }}>
-      <Stack gap={4} align="flex-end">
-        <Text component="div" c={total !== included ? 'orange' : 'dimmed'} tt="uppercase" fw={600} fz={10} lh={1}>
-          {title}
-        </Text>
-        <Text fw={600} fz={'xl'} component="div" lh={1}>
-          {total !== included
-            ? (
-              <>
-                {included} / {total}
-              </>
-            )
-            : (
-              <>
-                {total}
-              </>
-            )}
-        </Text>
-        {
-          /* <ThemeIcon
-          color="gray"
-          variant="light"
-          style={{
-            color: stat.diff > 0 ? 'var(--mantine-color-teal-6)' : 'var(--mantine-color-red-6)'
-          }}
-          size={38}
-          radius="md"
-        >
-          <DiffIcon size="1.8rem" stroke={1.5} />
-        </ThemeIcon> */
-        }
-      </Stack>
-      {
-        /* <Text c="dimmed" fz="sm" mt="md">
-          <Text component="span" c={stat.diff > 0 ? 'teal' : 'red'} fw={700}>
-            {stat.diff}%
-          </Text>{' '}
-          {stat.diff > 0 ? 'increase' : 'decrease'} compared to last month
-        </Text> */
-      }
-    </Paper>
-  )
-}

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

@@ -1,36 +0,0 @@
-import { css } from '@likec4/styles/css'
-
-export const treeNodeLabel = css({
-  marginTop: 'sm',
-  marginBottom: 'sm',
-})
-
-export const elementLabel = css({
-  display: 'inline-flex',
-  transition: 'fast',
-  border: `1px dashed`,
-  borderColor: 'mantine.colors.defaultBorder',
-  borderRadius: 'sm',
-  px: 'md',
-  py: 'xs',
-  alignItems: 'center',
-  cursor: 'pointer',
-  color: 'mantine.colors.gray[7]',
-
-  _dark: {
-    color: 'mantine.colors.dark[1]',
-  },
-  '& > *': {
-    transition: 'fast',
-  },
-  _hover: {
-    transitionTimingFunction: 'out',
-    borderStyle: 'solid',
-    color: 'mantine.colors.defaultColor',
-    background: 'mantine.colors.defaultHover',
-    '& > *': {
-      transitionTimingFunction: 'out',
-      transform: 'translateX(1px)',
-    },
-  },
-})