@likec4/diagram 1.16.0 → 1.17.0

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

@@ -0,0 +1,106 @@
+import { globalStyle, style } from '@vanilla-extract/css'
+import { mantine, vars, whereDark, whereLight } from '../../theme-vars'
+
+export const fqn = style({
+  display: 'inline-block',
+  fontSize: mantine.fontSizes.sm,
+  fontWeight: 500,
+  whiteSpace: 'nowrap',
+  padding: '3px 6px',
+  borderRadius: 3,
+  background: `color-mix(in srgb , ${vars.element.fill},  transparent 25%)`,
+  lineHeight: 1.2,
+  color: vars.element.hiContrast
+  // selectors: {
+  //   [`${whereDark} &`]: {
+  //   }
+  // }
+})
+
+export const relationshipStat = style({
+  selectors: {
+    [`${whereLight} &`]: {
+      background: mantine.colors.gray[1]
+    },
+    // [`&[data-zero]`]: {
+    //   color: mantine.colors.dimmed
+    // },
+    // [`${whereLight} &[data-zero]`]: {
+    //   background: mantine.colors.gray[3]
+    // },
+    [`&[data-missing]`]: {
+      color: mantine.colors.orange[4],
+      background: `color-mix(in srgb, ${mantine.colors.orange[8]} 15%, transparent)`,
+      borderColor: `color-mix(in srgb, ${mantine.colors.orange[5]} 20%, transparent)`
+    },
+    [`${whereLight} &[data-missing]`]: {
+      color: mantine.colors.orange[8]
+    }
+  }
+})
+
+export const xyflow = style({
+  flex: '1 1 100%',
+  position: 'relative',
+  width: '100%',
+  height: '100%',
+  background: mantine.colors.body,
+  border: `1px solid ${mantine.colors.defaultBorder}`,
+  borderRadius: mantine.radius.sm,
+  selectors: {
+    [`${whereLight} &`]: {
+      borderColor: mantine.colors.gray[3],
+      background: mantine.colors.gray[1]
+    }
+  }
+})
+
+export const panelScope = style({
+  ':before': {
+    content: 'scope:',
+    position: 'absolute',
+    top: 0,
+    left: 8,
+    fontSize: 9,
+    fontWeight: 500,
+    lineHeight: 1,
+    color: mantine.colors.dimmed,
+    opacity: 0.85,
+    transform: 'translateY(-100%) translateY(-2px)'
+  }
+})
+
+globalStyle(`${whereLight} ${panelScope} .mantine-SegmentedControl-root`, {
+  background: mantine.colors.gray[3]
+})
+
+export const edgeNum = style({
+  display: 'inline-block',
+  fontSize: mantine.fontSizes.xl,
+  fontWeight: 600,
+  padding: '1px 5px',
+  minWidth: 24,
+  textAlign: 'center',
+  borderRadius: mantine.radius.sm,
+  background: mantine.colors.dark[7],
+  color: mantine.colors.defaultColor,
+  selectors: {
+    [`${whereLight} &`]: {
+      background: mantine.colors.gray[4],
+      color: mantine.colors.dark[6]
+    },
+    [`&[data-zero]`]: {
+      color: mantine.colors.dimmed
+    },
+    [`${whereLight} &[data-zero]`]: {
+      background: mantine.colors.gray[3]
+    },
+    [`&[data-missing]`]: {
+      color: mantine.colors.orange[4],
+      background: `color-mix(in srgb, ${mantine.colors.orange[8]} 20%, transparent)`
+    },
+    [`${whereLight} &[data-missing]`]: {
+      color: mantine.colors.orange[8]
+    }
+  }
+})

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

@@ -0,0 +1,201 @@
+import { type DiagramView, type EdgeId, type LikeC4Model, nameFromFqn, nonNullable } from '@likec4/core'
+import { Box, Button, Group, Paper, SegmentedControl, Stack, Text, ThemeIcon } from '@mantine/core'
+import { useId } from '@mantine/hooks'
+import { IconArrowRight, IconExternalLink, IconInfoCircle } from '@tabler/icons-react'
+import { Panel } from '@xyflow/react'
+import { LayoutGroup } from 'framer-motion'
+import { useState } from 'react'
+import { unique } from 'remeda'
+import { useDiagramState } from '../../hooks'
+import { useOverlayDialog } from '../OverlayContext'
+import { RelationshipsXYFlow } from '../relationships-of/RelationshipsXYFlow'
+import { useLayoutedRelationships } from '../relationships-of/use-layouted-relationships'
+import * as css from './TabPanelRelationships.css'
+
+type RelationshipsTabPanelProps = {
+  currentView: DiagramView
+  element: LikeC4Model.ElementModel
+}
+
+export function TabPanelRelationships({
+  currentView,
+  element
+}: RelationshipsTabPanelProps) {
+  const layoutId = useId()
+  const enableRelationshipBrowser = useDiagramState(s => s.enableRelationshipBrowser)
+  const overlay = useOverlayDialog()
+  const [scope, setScope] = useState<'global' | 'view'>('view')
+  const node = nonNullable(currentView.nodes.find((n) => n.id === element.id))
+
+  const incoming = element.incoming().map(r => r.id)
+  const outgoing = element.outgoing().map(r => r.id)
+
+  const findRelationIds = (edgeId: EdgeId) => currentView.edges.find((edge) => edge.id === edgeId)?.relations ?? []
+
+  const incomingInView = unique(node.inEdges.flatMap(findRelationIds))
+  const outgoingInView = unique(node.outEdges.flatMap(findRelationIds))
+
+  const notIncludedRelations = [
+    ...incoming,
+    ...outgoing
+  ].filter(r => !incomingInView.includes(r) && !outgoingInView.includes(r)).length
+
+  const {
+    edges,
+    nodes,
+    bounds
+  } = useLayoutedRelationships(element.id, currentView, scope)
+
+  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 && (
+            <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>
+          )}
+        </Group>
+      )}
+
+      <Box className={css.xyflow}>
+        <LayoutGroup id={layoutId}>
+          <RelationshipsXYFlow
+            subjectId={element.id}
+            bounds={bounds}
+            nodes={nodes}
+            edges={edges}
+            view={currentView}
+            elementsSelectable={false}
+          >
+            <Panel position="top-left" className={css.panelScope}>
+              <SegmentedControl
+                size="xs"
+                withItemsBorders={false}
+                value={scope}
+                onChange={setScope as any}
+                data={[
+                  { label: 'Global', value: 'global' },
+                  { label: 'View', value: 'view' }
+                ]}
+              />
+            </Panel>
+            {enableRelationshipBrowser && (
+              <Panel position="top-right">
+                <Button
+                  size="compact-sm"
+                  variant="default"
+                  fz={'xs'}
+                  fw={500}
+                  rightSection={<IconExternalLink stroke={1.6} style={{ width: 16 }} />}
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    overlay.close(() => {
+                      overlay.openOverlay({
+                        relationshipsOf: element.id
+                      })
+                    })
+                  }}
+                >
+                  Open
+                </Button>
+              </Panel>
+            )}
+          </RelationshipsXYFlow>
+        </LayoutGroup>
+      </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

@@ -0,0 +1,36 @@
+import { globalStyle, style } from '@vanilla-extract/css'
+import { easings, mantine, transitions, whereDark } from '../../theme-vars'
+
+export const treeNodeLabel = style({
+  marginTop: mantine.spacing.sm,
+  marginBottom: mantine.spacing.sm
+})
+
+export const elementLabel = style({
+  display: 'inline-flex',
+  transition: transitions.fast,
+  border: `1px dashed ${mantine.colors.defaultBorder}`,
+  borderRadius: mantine.radius.sm,
+  padding: `${mantine.spacing.xs} ${mantine.spacing.md}`,
+  alignItems: 'center',
+  cursor: 'pointer',
+  color: mantine.colors.gray[7],
+  ':hover': {
+    transitionTimingFunction: easings.out,
+    borderStyle: 'solid',
+    color: mantine.colors.defaultColor,
+    background: mantine.colors.defaultHover
+  },
+  selectors: {
+    [`${whereDark} &`]: {
+      color: mantine.colors.dark[1]
+    }
+  }
+})
+globalStyle(`${elementLabel} > *`, {
+  transition: transitions.fast
+})
+globalStyle(`${elementLabel}:hover > *`, {
+  transitionTimingFunction: easings.out,
+  transform: 'translateX(1px)'
+})

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

@@ -0,0 +1,120 @@
+import type { LikeC4Model } from '@likec4/core'
+import { Alert, Anchor, Box, Pill, Text, Tree, useTree } from '@mantine/core'
+import { IconInfoCircle } from '@tabler/icons-react'
+import { type ReactNode, useEffect, useMemo } from 'react'
+import * as css from './TabPanelStructure.css'
+
+interface ElementTreeNodeData {
+  label: ReactNode
+  value: string
+  element: LikeC4Model.ElementModel
+  type: 'ancestor' | 'current' | 'descedant'
+  children: TreeNodeData[]
+}
+
+interface MessageNodeData {
+  label: ReactNode
+  value: string
+  type: 'message'
+  children: TreeNodeData[]
+}
+
+type TreeNodeData = ElementTreeNodeData | MessageNodeData
+
+type TabElementStructureProps = {
+  element: LikeC4Model.ElementModel
+}
+
+const ElementLabel = ({
+  element
+}: { element: LikeC4Model.ElementModel; type: 'ancestor' | 'current' | 'descedant' }) => (
+  <Box className={css.elementLabel}>
+    <Text component="div" fz={'sm'} fw={'500'}>{element.title}</Text>
+  </Box>
+)
+
+// const Render = ({
+//   node
+// }: RenderTreeNodePayload) => {
+// }
+
+export function TabElementStructure({
+  element
+}: TabElementStructureProps) {
+  const tree = useTree({
+    multiple: false
+  })
+
+  const data = useMemo(() => {
+    let seq = 1
+
+    const messageNode = (label: ReactNode): MessageNodeData => ({
+      label,
+      value: `msg${seq++}`,
+      type: 'message',
+      children: []
+    })
+
+    const current: TreeNodeData = {
+      label: <ElementLabel type="current" element={element} />,
+      value: element.id,
+      element,
+      type: 'current',
+      children: element.children().map((child): TreeNodeData => ({
+        label: <ElementLabel type="descedant" element={child} />,
+        value: child.id,
+        element: child,
+        type: 'descedant',
+        children: []
+      }))
+    }
+    if (current.children.length === 0) {
+      current.children.push(
+        messageNode(<Pill radius={'sm'}>no nested</Pill>)
+      )
+    }
+    let ancestor = element.ancestors().reduce((acc, parent) => ({
+      label: <ElementLabel type="ancestor" element={parent} />,
+      value: parent.id,
+      element: parent,
+      type: 'ancestor' as const,
+      children: [acc]
+    }), current)
+
+    return [
+      ancestor
+    ]
+  }, [element])
+
+  useEffect(() => {
+    tree.expandAllNodes()
+  }, [data])
+
+  return (
+    <>
+      <Alert variant="light" color="orange" title="In development" icon={<IconInfoCircle />}>
+        We need your feedback. Share your thoughts and ideas -{' '}
+        <Anchor
+          fz="sm"
+          fw={500}
+          underline="hover"
+          c={'orange'}
+          href="https://github.com/likec4/likec4/discussions/"
+          target="_blank">
+          GitHub discussions
+        </Anchor>
+      </Alert>
+      <Tree
+        levelOffset={'xl'}
+        allowRangeSelection={false}
+        expandOnClick={false}
+        expandOnSpace={false}
+        classNames={{
+          label: css.treeNodeLabel
+        }}
+        data={data}
+        tree={tree}
+      />
+    </>
+  )
+}

package/src/overlays/relationships-of/RelationshipsOverlay.tsx

@@ -0,0 +1,185 @@
+import { type Fqn } from '@likec4/core'
+import { Box, Button, Group, SegmentedControl, Space, Text } from '@mantine/core'
+import { useLocalStorage, useStateHistory } from '@mantine/hooks'
+import { IconArrowLeft, IconArrowRight } from '@tabler/icons-react'
+import { Panel } from '@xyflow/react'
+import { memo, useEffect } from 'react'
+import { useDiagramState } from '../../hooks/useDiagramState'
+import { useOverlayDialog } from '../OverlayContext'
+import { RelationshipsXYFlow } from './RelationshipsXYFlow'
+import { SelectElement } from './SelectElement'
+import { useLayoutedRelationships } from './use-layouted-relationships'
+
+export const RelationshipsOverlay = memo<{ subjectId: Fqn }>(function RelationshipsOverlay({ subjectId }) {
+  const view = useDiagramState(s => s.view)
+  const [_scope, setScope] = useLocalStorage<'global' | 'view'>({
+    key: 'likec4:scope-relationships-of',
+    getInitialValueInEffect: false,
+    defaultValue: 'view'
+  })
+  const {
+    notIncludedRelations,
+    viewIncludesSubject,
+    edges,
+    nodes,
+    subject,
+    bounds
+  } = useLayoutedRelationships(subjectId, view, _scope)
+  const scope = viewIncludesSubject ? _scope : 'global'
+  const showSubjectWarning = !viewIncludesSubject && _scope === 'view'
+  const [historySubjectId, historyOps, { history, current }] = useStateHistory(subjectId)
+
+  const overlay = useOverlayDialog()
+
+  useEffect(() => {
+    if (historySubjectId !== subjectId) {
+      historyOps.set(subjectId)
+    }
+  }, [subjectId])
+
+  useEffect(() => {
+    if (historySubjectId !== subjectId) {
+      overlay.openOverlay({
+        relationshipsOf: historySubjectId
+      })
+    }
+  }, [historySubjectId])
+
+  return (
+    <RelationshipsXYFlow
+      nodes={nodes}
+      edges={edges}
+      bounds={bounds}
+      view={view}
+      subjectId={subjectId}
+      viewportPadding={0.2}
+      onNodeClick={(e, node) => {
+        e.stopPropagation()
+        if (node.type === 'empty') return
+        // lastClickedNodeRef.current = node
+        overlay.openOverlay({
+          relationshipsOf: node.data.fqn
+        })
+      }}
+    >
+      <Panel position="top-center">
+        <Group gap={'xs'} wrap={'nowrap'}>
+          <Button
+            leftSection={<IconArrowLeft stroke={3} size={14} />}
+            color="dimmed"
+            variant="subtle"
+            style={{
+              visibility: current > 0 ? 'visible' : 'hidden',
+              padding: '0.25rem 0.75rem'
+            }}
+            styles={{
+              label: {
+                fontWeight: 400
+              },
+              section: {
+                marginInlineEnd: 6
+              }
+            }}
+            size="sm"
+            onClick={(e) => {
+              e.stopPropagation()
+              historyOps.back()
+            }}>
+            Back
+          </Button>
+          <Space w={2} />
+          <Group gap={'xs'} pos={'relative'} wrap="nowrap" flex={'1 0 auto'}>
+            <Box fz={'sm'} fw={'400'} style={{ whiteSpace: 'nowrap', userSelect: 'none' }}>Relationships of</Box>
+            <Box flex={'1 0 auto'}>
+              <SelectElement
+                scope={scope}
+                subject={subject.element}
+                onSelect={fqn =>
+                  overlay.openOverlay({
+                    relationshipsOf: fqn
+                  })}
+                viewId={view.id} />
+            </Box>
+            <SegmentedControl
+              flex={'1 0 auto'}
+              size="xs"
+              withItemsBorders={false}
+              value={scope}
+              onChange={setScope as any}
+              data={[
+                { label: 'Global', value: 'global' },
+                { label: 'Current view', value: 'view', disabled: !viewIncludesSubject }
+              ]}
+            />
+            {showSubjectWarning && (
+              <Box
+                pos={'absolute'}
+                top={'calc(100% + .5rem)'}
+                left={'50%'}
+                w={'max-content'}
+                style={{
+                  transform: 'translateX(-50%)',
+                  textAlign: 'center',
+                  cursor: 'pointer'
+                }}
+                onClick={(e) => {
+                  e.stopPropagation()
+                  setScope('global')
+                }}
+              >
+                <Text fw={500} size="xs" c="orange" component="div">
+                  Current view doesn't include this element, switched to Global
+                </Text>
+              </Box>
+            )}
+            {viewIncludesSubject && scope === 'view' && notIncludedRelations > 0 && (
+              <Box
+                pos={'absolute'}
+                top={'calc(100% + .5rem)'}
+                left={'50%'}
+                w={'max-content'}
+                style={{
+                  transform: 'translateX(-50%)',
+                  textAlign: 'center',
+                  cursor: 'pointer'
+                }}
+                onClick={(e) => {
+                  e.stopPropagation()
+                  setScope('global')
+                }}
+              >
+                <Text fw={500} size="xs" c="orange" component="div">
+                  View does not include {notIncludedRelations}{' '}
+                  relationship{notIncludedRelations > 1 ? 's' : ''}. Switch to Global to compare
+                </Text>
+              </Box>
+            )}
+          </Group>
+          <Button
+            rightSection={<IconArrowRight stroke={3} size={14} />}
+            color="dimmed"
+            variant="subtle"
+            style={{
+              visibility: current + 1 < history.length ? 'visible' : 'hidden',
+              padding: '0.25rem 0.75rem'
+            }}
+            styles={{
+              label: {
+                fontWeight: 400
+              },
+              section: {
+                marginInlineStart: 4
+              }
+            }}
+            size="sm"
+            onClick={(e) => {
+              e.stopPropagation()
+              historyOps.forward()
+            }}>
+            Forward
+          </Button>
+        </Group>
+      </Panel>
+    </RelationshipsXYFlow>
+  )
+})