@puredesktop/puredesktop-ui-bridge 1.0.0-beta.1 → 2.1.0

package/src/components/common/people/RelationshipMap.tsx

@@ -1,362 +1,362 @@
-import type { KeyboardEvent, ReactElement } from 'react'
-import { useMemo } from 'react'
-import { styled } from 'styled-components'
-import { EntityPortrait } from './EntityPortrait.js'
-
-export type RelationshipMapNodeKind = 'person' | 'org'
-
-export interface RelationshipMapNode {
-  id: string
-  label: string
-  kind: RelationshipMapNodeKind
-  imageUrl?: string
-  active?: boolean
-}
-
-export interface RelationshipMapEdge {
-  id: string
-  from: string
-  to: string
-  label: string
-  title?: string
-}
-
-export interface RelationshipMapProps {
-  nodes: RelationshipMapNode[]
-  edges: RelationshipMapEdge[]
-  onSelectNode?: (id: string) => void
-  className?: string
-}
-
-interface PositionedNode extends RelationshipMapNode {
-  x: number
-  y: number
-  degree: number
-}
-
-const WIDTH = 720
-const HEIGHT = 360
-const CENTER_X = WIDTH / 2
-const CENTER_Y = HEIGHT / 2
-
-const Wrap = styled.div`
-  display: grid;
-  gap: 14px;
-`
-
-const GraphFrame = styled.div`
-  overflow: hidden;
-  border: 1px solid var(--platform-colors-border);
-  background: color-mix(
-    in srgb,
-    var(--platform-colors-surface) 84%,
-    transparent
-  );
-`
-
-const GraphSvg = styled.svg`
-  display: block;
-  width: 100%;
-  min-height: 280px;
-`
-
-const EdgeLine = styled.line<{ $active?: boolean }>`
-  stroke: ${({ $active }) =>
-    $active
-      ? 'var(--platform-colors-text)'
-      : 'var(--platform-colors-border)'};
-  stroke-width: ${({ $active }) => ($active ? 2 : 1.2)};
-  opacity: ${({ $active }) => ($active ? 0.54 : 0.82)};
-`
-
-const EdgeLabel = styled.text`
-  fill: var(--platform-colors-text-tertiary);
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 0.03em;
-  text-anchor: middle;
-  text-transform: uppercase;
-`
-
-const NodeGroup = styled.g<{ $interactive: boolean }>`
-  cursor: ${({ $interactive }) => ($interactive ? 'pointer' : 'default')};
-  outline: none;
-
-  &:focus-visible .node-shape {
-    stroke: var(--platform-colors-text);
-    stroke-width: 2.5;
-  }
-`
-
-const NodeShape = styled.circle<{
-  $kind: RelationshipMapNodeKind
-  $active?: boolean
-}>`
-  fill: ${({ $active }) =>
-    $active
-      ? 'var(--platform-colors-text)'
-      : 'var(--platform-colors-surface)'};
-  stroke: ${({ $active, $kind }) =>
-    $active
-      ? 'var(--platform-colors-text)'
-      : $kind === 'org'
-      ? 'var(--platform-colors-text-secondary)'
-      : 'var(--platform-colors-border)'};
-  stroke-width: ${({ $active }) => ($active ? 2 : 1.4)};
-`
-
-const NodeTextWrap = styled.div<{ $active?: boolean }>`
-  display: grid;
-  gap: 5px;
-  place-items: center;
-  width: 100%;
-  height: 100%;
-  color: ${({ $active }) =>
-    $active
-      ? 'var(--platform-colors-text-inverse)'
-      : 'var(--platform-colors-text)'};
-  font-size: 13px;
-  font-weight: 720;
-  line-height: 1.18;
-  overflow-wrap: anywhere;
-  text-align: center;
-`
-
-const NodeLabel = styled.span`
-  max-width: 100%;
-`
-
-const KindText = styled.text<{ $active?: boolean }>`
-  fill: ${({ $active }) =>
-    $active
-      ? 'var(--platform-colors-text)'
-      : 'var(--platform-colors-text-tertiary)'};
-  font-size: 10px;
-  font-weight: 760;
-  letter-spacing: 0.06em;
-  text-anchor: middle;
-  text-transform: uppercase;
-`
-
-const Empty = styled.div`
-  padding: 42px 24px;
-  color: var(--platform-colors-text-secondary);
-  font-size: 14px;
-  line-height: 1.5;
-  text-align: center;
-`
-
-const Ledger = styled.div`
-  display: grid;
-  gap: 0;
-`
-
-const LedgerRow = styled.div`
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
-  gap: 10px;
-  align-items: baseline;
-  padding: 8px 0;
-  border-bottom: 1px solid var(--platform-colors-border);
-  color: var(--platform-colors-text-secondary);
-  font-size: 13px;
-  line-height: 1.45;
-
-  &:last-child {
-    border-bottom: 0;
-  }
-
-  strong {
-    min-width: 0;
-    color: var(--platform-colors-text);
-    font-weight: 680;
-    overflow-wrap: anywhere;
-  }
-`
-
-const RelationLabel = styled.span`
-  color: var(--platform-colors-text-tertiary);
-  font-size: 10px;
-  font-weight: 760;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  white-space: nowrap;
-`
-
-export function RelationshipMap({
-  nodes,
-  edges,
-  onSelectNode,
-  className,
-}: RelationshipMapProps): ReactElement {
-  const positioned = useMemo(() => layoutNodes(nodes, edges), [nodes, edges])
-  const nodeMap = new Map(positioned.map(node => [node.id, node]))
-  const activeId = positioned.find(node => node.active)?.id
-
-  if (!nodes.length) {
-    return (
-      <Wrap className={className}>
-        <GraphFrame>
-          <Empty>No relationship map yet.</Empty>
-        </GraphFrame>
-      </Wrap>
-    )
-  }
-
-  return (
-    <Wrap className={className}>
-      <GraphFrame>
-        <GraphSvg viewBox={`0 0 ${WIDTH} ${HEIGHT}`} role="img">
-          <title>Relationship map</title>
-          {edges.map(edge => {
-            const from = nodeMap.get(edge.from)
-            const to = nodeMap.get(edge.to)
-            if (!from || !to) return null
-            const active = edge.from === activeId || edge.to === activeId
-            const midX = (from.x + to.x) / 2
-            const midY = (from.y + to.y) / 2
-            return (
-              <g key={edge.id}>
-                <EdgeLine
-                  x1={from.x}
-                  y1={from.y}
-                  x2={to.x}
-                  y2={to.y}
-                  $active={active}
-                />
-                {active ? (
-                  <EdgeLabel x={midX} y={midY - 7}>
-                    {edge.label}
-                  </EdgeLabel>
-                ) : null}
-              </g>
-            )
-          })}
-          {positioned.map(node => {
-            const radius = nodeRadius(node)
-            return (
-              <NodeGroup
-                key={node.id}
-                role="button"
-                tabIndex={onSelectNode ? 0 : -1}
-                aria-label={`${node.kind}: ${node.label}`}
-                $interactive={Boolean(onSelectNode)}
-                onClick={() => onSelectNode?.(node.id)}
-                onKeyDown={event => handleNodeKey(event, node.id, onSelectNode)}
-              >
-                <NodeShape
-                  className="node-shape"
-                  cx={node.x}
-                  cy={node.y}
-                  r={radius}
-                  $kind={node.kind}
-                  $active={node.active}
-                />
-                <foreignObject
-                  x={node.x - radius + 9}
-                  y={node.y - radius + 12}
-                  width={(radius - 9) * 2}
-                  height={(radius - 8) * 2}
-                >
-                  <NodeTextWrap $active={node.active}>
-                    {node.imageUrl ? (
-                      <EntityPortrait
-                        name={node.label}
-                        imageUrl={node.imageUrl}
-                        kind={node.kind}
-                      />
-                    ) : null}
-                    <NodeLabel>{node.label}</NodeLabel>
-                  </NodeTextWrap>
-                </foreignObject>
-                <KindText
-                  x={node.x}
-                  y={node.y + radius + 16}
-                  $active={node.active}
-                >
-                  {node.kind}
-                </KindText>
-              </NodeGroup>
-            )
-          })}
-        </GraphSvg>
-      </GraphFrame>
-      {edges.length ? (
-        <Ledger>
-          {edges.map(edge => (
-            <LedgerRow key={edge.id} title={edge.title}>
-              <strong>{nodeMap.get(edge.from)?.label ?? 'Someone'}</strong>
-              <RelationLabel>{edge.label}</RelationLabel>
-              <strong>{nodeMap.get(edge.to)?.label ?? 'someone'}</strong>
-            </LedgerRow>
-          ))}
-        </Ledger>
-      ) : null}
-    </Wrap>
-  )
-}
-
-function layoutNodes(
-  nodes: RelationshipMapNode[],
-  edges: RelationshipMapEdge[],
-): PositionedNode[] {
-  const degree = new Map(nodes.map(node => [node.id, 0]))
-  for (const edge of edges) {
-    degree.set(edge.from, (degree.get(edge.from) ?? 0) + 1)
-    degree.set(edge.to, (degree.get(edge.to) ?? 0) + 1)
-  }
-
-  const sorted = [...nodes].sort((a, b) => {
-    if (a.active) return -1
-    if (b.active) return 1
-    return (degree.get(b.id) ?? 0) - (degree.get(a.id) ?? 0)
-  })
-  const active = sorted.find(node => node.active)
-  const outer = active
-    ? sorted.filter(node => node.id !== active.id)
-    : sorted
-  const ringRadiusX = outer.length > 5 ? 245 : 215
-  const ringRadiusY = outer.length > 5 ? 116 : 104
-
-  const placed: PositionedNode[] = active
-    ? [
-        {
-          ...active,
-          x: CENTER_X,
-          y: CENTER_Y,
-          degree: degree.get(active.id) ?? 0,
-        },
-      ]
-    : []
-
-  outer.forEach((node, index) => {
-    const angle =
-      outer.length === 1
-        ? -Math.PI / 2
-        : -Math.PI / 2 + (index / outer.length) * Math.PI * 2
-    placed.push({
-      ...node,
-      x: CENTER_X + Math.cos(angle) * ringRadiusX,
-      y: CENTER_Y + Math.sin(angle) * ringRadiusY,
-      degree: degree.get(node.id) ?? 0,
-    })
-  })
-
-  return placed
-}
-
-function nodeRadius(node: PositionedNode): number {
-  if (node.active) return 62
-  return Math.min(54, 40 + node.degree * 4)
-}
-
-function handleNodeKey(
-  event: KeyboardEvent<SVGGElement>,
-  id: string,
-  onSelectNode: RelationshipMapProps['onSelectNode'],
-): void {
-  if (!onSelectNode) return
-  if (event.key !== 'Enter' && event.key !== ' ') return
-  event.preventDefault()
-  onSelectNode(id)
-}
+import type { KeyboardEvent, ReactElement } from 'react'
+import { useMemo } from 'react'
+import { styled } from 'styled-components'
+import { EntityPortrait } from './EntityPortrait.js'
+
+export type RelationshipMapNodeKind = 'person' | 'org'
+
+export interface RelationshipMapNode {
+  id: string
+  label: string
+  kind: RelationshipMapNodeKind
+  imageUrl?: string
+  active?: boolean
+}
+
+export interface RelationshipMapEdge {
+  id: string
+  from: string
+  to: string
+  label: string
+  title?: string
+}
+
+export interface RelationshipMapProps {
+  nodes: RelationshipMapNode[]
+  edges: RelationshipMapEdge[]
+  onSelectNode?: (id: string) => void
+  className?: string
+}
+
+interface PositionedNode extends RelationshipMapNode {
+  x: number
+  y: number
+  degree: number
+}
+
+const WIDTH = 720
+const HEIGHT = 360
+const CENTER_X = WIDTH / 2
+const CENTER_Y = HEIGHT / 2
+
+const Wrap = styled.div`
+  display: grid;
+  gap: 14px;
+`
+
+const GraphFrame = styled.div`
+  overflow: hidden;
+  border: 1px solid var(--platform-colors-border);
+  background: color-mix(
+    in srgb,
+    var(--platform-colors-surface) 84%,
+    transparent
+  );
+`
+
+const GraphSvg = styled.svg`
+  display: block;
+  width: 100%;
+  min-height: 280px;
+`
+
+const EdgeLine = styled.line<{ $active?: boolean }>`
+  stroke: ${({ $active }) =>
+    $active
+      ? 'var(--platform-colors-text)'
+      : 'var(--platform-colors-border)'};
+  stroke-width: ${({ $active }) => ($active ? 2 : 1.2)};
+  opacity: ${({ $active }) => ($active ? 0.54 : 0.82)};
+`
+
+const EdgeLabel = styled.text`
+  fill: var(--platform-colors-text-tertiary);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.03em;
+  text-anchor: middle;
+  text-transform: uppercase;
+`
+
+const NodeGroup = styled.g<{ $interactive: boolean }>`
+  cursor: ${({ $interactive }) => ($interactive ? 'pointer' : 'default')};
+  outline: none;
+
+  &:focus-visible .node-shape {
+    stroke: var(--platform-colors-text);
+    stroke-width: 2.5;
+  }
+`
+
+const NodeShape = styled.circle<{
+  $kind: RelationshipMapNodeKind
+  $active?: boolean
+}>`
+  fill: ${({ $active }) =>
+    $active
+      ? 'var(--platform-colors-text)'
+      : 'var(--platform-colors-surface)'};
+  stroke: ${({ $active, $kind }) =>
+    $active
+      ? 'var(--platform-colors-text)'
+      : $kind === 'org'
+      ? 'var(--platform-colors-text-secondary)'
+      : 'var(--platform-colors-border)'};
+  stroke-width: ${({ $active }) => ($active ? 2 : 1.4)};
+`
+
+const NodeTextWrap = styled.div<{ $active?: boolean }>`
+  display: grid;
+  gap: 5px;
+  place-items: center;
+  width: 100%;
+  height: 100%;
+  color: ${({ $active }) =>
+    $active
+      ? 'var(--platform-colors-text-inverse)'
+      : 'var(--platform-colors-text)'};
+  font-size: 13px;
+  font-weight: 720;
+  line-height: 1.18;
+  overflow-wrap: anywhere;
+  text-align: center;
+`
+
+const NodeLabel = styled.span`
+  max-width: 100%;
+`
+
+const KindText = styled.text<{ $active?: boolean }>`
+  fill: ${({ $active }) =>
+    $active
+      ? 'var(--platform-colors-text)'
+      : 'var(--platform-colors-text-tertiary)'};
+  font-size: 10px;
+  font-weight: 760;
+  letter-spacing: 0.06em;
+  text-anchor: middle;
+  text-transform: uppercase;
+`
+
+const Empty = styled.div`
+  padding: 42px 24px;
+  color: var(--platform-colors-text-secondary);
+  font-size: 14px;
+  line-height: 1.5;
+  text-align: center;
+`
+
+const Ledger = styled.div`
+  display: grid;
+  gap: 0;
+`
+
+const LedgerRow = styled.div`
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  gap: 10px;
+  align-items: baseline;
+  padding: 8px 0;
+  border-bottom: 1px solid var(--platform-colors-border);
+  color: var(--platform-colors-text-secondary);
+  font-size: 13px;
+  line-height: 1.45;
+
+  &:last-child {
+    border-bottom: 0;
+  }
+
+  strong {
+    min-width: 0;
+    color: var(--platform-colors-text);
+    font-weight: 680;
+    overflow-wrap: anywhere;
+  }
+`
+
+const RelationLabel = styled.span`
+  color: var(--platform-colors-text-tertiary);
+  font-size: 10px;
+  font-weight: 760;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  white-space: nowrap;
+`
+
+export function RelationshipMap({
+  nodes,
+  edges,
+  onSelectNode,
+  className,
+}: RelationshipMapProps): ReactElement {
+  const positioned = useMemo(() => layoutNodes(nodes, edges), [nodes, edges])
+  const nodeMap = new Map(positioned.map(node => [node.id, node]))
+  const activeId = positioned.find(node => node.active)?.id
+
+  if (!nodes.length) {
+    return (
+      <Wrap className={className}>
+        <GraphFrame>
+          <Empty>No relationship map yet.</Empty>
+        </GraphFrame>
+      </Wrap>
+    )
+  }
+
+  return (
+    <Wrap className={className}>
+      <GraphFrame>
+        <GraphSvg viewBox={`0 0 ${WIDTH} ${HEIGHT}`} role="img">
+          <title>Relationship map</title>
+          {edges.map(edge => {
+            const from = nodeMap.get(edge.from)
+            const to = nodeMap.get(edge.to)
+            if (!from || !to) return null
+            const active = edge.from === activeId || edge.to === activeId
+            const midX = (from.x + to.x) / 2
+            const midY = (from.y + to.y) / 2
+            return (
+              <g key={edge.id}>
+                <EdgeLine
+                  x1={from.x}
+                  y1={from.y}
+                  x2={to.x}
+                  y2={to.y}
+                  $active={active}
+                />
+                {active ? (
+                  <EdgeLabel x={midX} y={midY - 7}>
+                    {edge.label}
+                  </EdgeLabel>
+                ) : null}
+              </g>
+            )
+          })}
+          {positioned.map(node => {
+            const radius = nodeRadius(node)
+            return (
+              <NodeGroup
+                key={node.id}
+                role="button"
+                tabIndex={onSelectNode ? 0 : -1}
+                aria-label={`${node.kind}: ${node.label}`}
+                $interactive={Boolean(onSelectNode)}
+                onClick={() => onSelectNode?.(node.id)}
+                onKeyDown={event => handleNodeKey(event, node.id, onSelectNode)}
+              >
+                <NodeShape
+                  className="node-shape"
+                  cx={node.x}
+                  cy={node.y}
+                  r={radius}
+                  $kind={node.kind}
+                  $active={node.active}
+                />
+                <foreignObject
+                  x={node.x - radius + 9}
+                  y={node.y - radius + 12}
+                  width={(radius - 9) * 2}
+                  height={(radius - 8) * 2}
+                >
+                  <NodeTextWrap $active={node.active}>
+                    {node.imageUrl ? (
+                      <EntityPortrait
+                        name={node.label}
+                        imageUrl={node.imageUrl}
+                        kind={node.kind}
+                      />
+                    ) : null}
+                    <NodeLabel>{node.label}</NodeLabel>
+                  </NodeTextWrap>
+                </foreignObject>
+                <KindText
+                  x={node.x}
+                  y={node.y + radius + 16}
+                  $active={node.active}
+                >
+                  {node.kind}
+                </KindText>
+              </NodeGroup>
+            )
+          })}
+        </GraphSvg>
+      </GraphFrame>
+      {edges.length ? (
+        <Ledger>
+          {edges.map(edge => (
+            <LedgerRow key={edge.id} title={edge.title}>
+              <strong>{nodeMap.get(edge.from)?.label ?? 'Someone'}</strong>
+              <RelationLabel>{edge.label}</RelationLabel>
+              <strong>{nodeMap.get(edge.to)?.label ?? 'someone'}</strong>
+            </LedgerRow>
+          ))}
+        </Ledger>
+      ) : null}
+    </Wrap>
+  )
+}
+
+function layoutNodes(
+  nodes: RelationshipMapNode[],
+  edges: RelationshipMapEdge[],
+): PositionedNode[] {
+  const degree = new Map(nodes.map(node => [node.id, 0]))
+  for (const edge of edges) {
+    degree.set(edge.from, (degree.get(edge.from) ?? 0) + 1)
+    degree.set(edge.to, (degree.get(edge.to) ?? 0) + 1)
+  }
+
+  const sorted = [...nodes].sort((a, b) => {
+    if (a.active) return -1
+    if (b.active) return 1
+    return (degree.get(b.id) ?? 0) - (degree.get(a.id) ?? 0)
+  })
+  const active = sorted.find(node => node.active)
+  const outer = active
+    ? sorted.filter(node => node.id !== active.id)
+    : sorted
+  const ringRadiusX = outer.length > 5 ? 245 : 215
+  const ringRadiusY = outer.length > 5 ? 116 : 104
+
+  const placed: PositionedNode[] = active
+    ? [
+        {
+          ...active,
+          x: CENTER_X,
+          y: CENTER_Y,
+          degree: degree.get(active.id) ?? 0,
+        },
+      ]
+    : []
+
+  outer.forEach((node, index) => {
+    const angle =
+      outer.length === 1
+        ? -Math.PI / 2
+        : -Math.PI / 2 + (index / outer.length) * Math.PI * 2
+    placed.push({
+      ...node,
+      x: CENTER_X + Math.cos(angle) * ringRadiusX,
+      y: CENTER_Y + Math.sin(angle) * ringRadiusY,
+      degree: degree.get(node.id) ?? 0,
+    })
+  })
+
+  return placed
+}
+
+function nodeRadius(node: PositionedNode): number {
+  if (node.active) return 62
+  return Math.min(54, 40 + node.degree * 4)
+}
+
+function handleNodeKey(
+  event: KeyboardEvent<SVGGElement>,
+  id: string,
+  onSelectNode: RelationshipMapProps['onSelectNode'],
+): void {
+  if (!onSelectNode) return
+  if (event.key !== 'Enter' && event.key !== ' ') return
+  event.preventDefault()
+  onSelectNode(id)
+}