@tldiagram/core-ui 2.0.6 → 2.0.7

package/src/pages/InfiniteZoom.tsx

@@ -3,6 +3,7 @@ import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRe
 import { useLocation, useNavigate, useParams } from 'react-router-dom'
 import {
   Box,
+  Badge,
   Button,
   Center,
   HStack,
@@ -30,6 +31,14 @@ import CrossBranchControls from '../components/CrossBranchControls'
 import { primeWorkspaceGraphSnapshot } from '../crossBranch/store'
 import { WATCH_REPRESENTATION_UPDATED_EVENT } from '../components/WorkspacePanel'
 import { useWorkspaceVersionPreview } from '../context/WorkspaceVersionContext'
+import {
+  buildExploreDiffLens,
+  type ExploreDiffDetail,
+  type ExploreDiffLens,
+  type ExploreDiffTarget,
+} from '../utils/exploreDiffLens'
+import { getSourceEditor } from '../utils/sourceEditor'
+import { toast } from '../utils/toast'
 
 // ── Types ──────────────────────────────────────────────────────────
 interface Props {
@@ -71,8 +80,16 @@ function InfiniteZoomInner({ sharedToken, shareSlot }: Props, ref?: React.Ref<In
   } = useCrossBranchContextSettings(crossBranchSurface)
   const { preview: versionPreview, followTarget: versionFollowTarget } = useWorkspaceVersionPreview()
 
+  const diffVersionId = useMemo(() => {
+    if (sharedToken) return 0
+    const value = Number(new URLSearchParams(location.search).get('diffVersion') ?? 0)
+    return Number.isFinite(value) && value > 0 ? value : 0
+  }, [location.search, sharedToken])
   const cameraProfile = useMemo(() => new URLSearchParams(location.search).get('profile'), [location.search])
   const isDetailToOverviewProfile = sharedToken && cameraProfile === 'detail-to-overview'
+  const [diffLens, setDiffLens] = useState<ExploreDiffLens | null>(null)
+  const [diffLoading, setDiffLoading] = useState(false)
+  const [activeDiffTargetIndex, setActiveDiffTargetIndex] = useState(0)
 
   const initialCameraFrame = useMemo<ZUICameraFrame | undefined>(() => {
     return isDetailToOverviewProfile
@@ -248,6 +265,85 @@ function InfiniteZoomInner({ sharedToken, shareSlot }: Props, ref?: React.Ref<In
     return () => window.removeEventListener('message', handleMessage)
   }, [sharedToken])
 
+  useEffect(() => {
+    if (!data || !diffVersionId) {
+      setDiffLens(null)
+      setDiffLoading(false)
+      setActiveDiffTargetIndex(0)
+      return
+    }
+    let cancelled = false
+    setDiffLoading(true)
+    api.watch.diffs(diffVersionId)
+      .then((diffs) => {
+        if (cancelled) return
+        setDiffLens(buildExploreDiffLens(data, diffs, diffVersionId))
+        setActiveDiffTargetIndex(0)
+      })
+      .catch((error: unknown) => {
+        if (cancelled) return
+        setDiffLens(null)
+        toast({
+          title: 'Could not load diff map',
+          description: error instanceof Error ? error.message : 'The selected watch diff could not be loaded.',
+          status: 'error',
+        })
+      })
+      .finally(() => {
+        if (!cancelled) setDiffLoading(false)
+      })
+    return () => { cancelled = true }
+  }, [data, diffVersionId])
+
+  const activeDiffTarget = diffLens?.orderedTargets[activeDiffTargetIndex] ?? null
+
+  const focusDiffTarget = useCallback((target: ExploreDiffTarget | null | undefined) => {
+    if (!target?.viewId) return false
+    if (target.resourceType === 'element' && target.resourceId) {
+      return zuiRef.current?.focusElement(target.viewId, target.resourceId) ?? false
+    }
+    return zuiRef.current?.focusDiagram(target.viewId) ?? false
+  }, [])
+
+  useEffect(() => {
+    if (!canvasReady || !activeDiffTarget) return
+    const timer = window.setTimeout(() => {
+      focusDiffTarget(activeDiffTarget)
+    }, 80)
+    return () => window.clearTimeout(timer)
+  }, [activeDiffTarget, canvasReady, focusDiffTarget])
+
+  const navigateDiffTarget = useCallback((offset: number) => {
+    const count = diffLens?.orderedTargets.length ?? 0
+    if (count === 0) return
+    setActiveDiffTargetIndex((index) => (index + offset + count) % count)
+  }, [diffLens])
+
+  const exitDiffMode = useCallback(() => {
+    const params = new URLSearchParams(location.search)
+    params.set('view', 'explore')
+    params.delete('diffVersion')
+    params.delete('focus')
+    params.delete('element')
+    const suffix = params.toString()
+    navigate(`${location.pathname}${suffix ? `?${suffix}` : ''}`, { replace: true })
+  }, [location.pathname, location.search, navigate])
+
+  const openDiffSource = useCallback((detail: ExploreDiffDetail) => {
+    if (!detail.sourcePath) return
+    api.editor.open({
+      editor: getSourceEditor(),
+      file_path: detail.sourcePath,
+      line: detail.line ?? null,
+    }).catch((error: unknown) => {
+      toast({
+        title: 'Could not open source',
+        description: error instanceof Error ? error.message : 'The source editor command failed.',
+        status: 'error',
+      })
+    })
+  }, [])
+
   if (!loading && (!data || (data.tree ?? []).length === 0 || !hasPlacements)) {
     const noDiagrams = !data || (data.tree ?? []).length === 0
     return (
@@ -304,6 +400,7 @@ function InfiniteZoomInner({ sharedToken, shareSlot }: Props, ref?: React.Ref<In
             hiddenTags={hiddenTags}
             versionPreview={versionPreview}
             versionFollowTarget={versionFollowTarget}
+            diffLens={diffLens}
             crossBranchSettings={crossBranchSettings}
             hoverLocked={isTagsOpen}
           />
@@ -312,6 +409,119 @@ function InfiniteZoomInner({ sharedToken, shareSlot }: Props, ref?: React.Ref<In
           {data && !sharedToken && <ExploreOnboarding hasLinkedNodes={!!(data.navigations?.length > 0)} />}
           <MiniZoomOnboarding isVisible={showMiniOnboarding} onClose={dismissMiniOnboarding} />
 
+          {diffVersionId > 0 && (
+            <Box
+              position="absolute"
+              top={4}
+              right={4}
+              zIndex={14}
+              className="glass"
+              borderRadius="lg"
+              px={3}
+              py={2.5}
+              w={{ base: 'calc(100vw - 32px)', md: '340px' }}
+              maxW="calc(100vw - 32px)"
+              pointerEvents="auto"
+              opacity={showContent ? 1 : 0}
+              transition="opacity 0.3s"
+            >
+              <VStack align="stretch" spacing={2}>
+                <HStack justify="space-between" spacing={3}>
+                  <HStack spacing={2} minW={0}>
+                    <Badge colorScheme="blue" variant="subtle">Diff map</Badge>
+                    <Text fontSize="xs" color="gray.400" fontFamily="mono" flexShrink={0}>
+                      +{diffLens?.totalAddedLines ?? 0} -{diffLens?.totalRemovedLines ?? 0}
+                    </Text>
+                  </HStack>
+                  <Button size="xs" variant="ghost" color="gray.300" onClick={exitDiffMode}>
+                    Exit
+                  </Button>
+                </HStack>
+                <Text fontSize="xs" color="gray.200" noOfLines={1} minH="18px">
+                  {diffLoading
+                    ? 'Loading changed resources...'
+                    : activeDiffTarget
+                      ? `${activeDiffTargetIndex + 1} of ${diffLens?.orderedTargets.length ?? 0}: ${activeDiffTarget.label}`
+                      : 'No placed changed resources'}
+                </Text>
+                <HStack spacing={2}>
+                  <Button
+                    size="xs"
+                    variant="solid"
+                    bg="whiteAlpha.200"
+                    _hover={{ bg: 'whiteAlpha.300' }}
+                    flex={1}
+                    isDisabled={!diffLens?.orderedTargets.length}
+                    onClick={() => navigateDiffTarget(-1)}
+                  >
+                    Previous
+                  </Button>
+                  <Button
+                    size="xs"
+                    variant="solid"
+                    bg="whiteAlpha.200"
+                    _hover={{ bg: 'whiteAlpha.300' }}
+                    flex={1}
+                    isDisabled={!diffLens?.orderedTargets.length}
+                    onClick={() => navigateDiffTarget(1)}
+                  >
+                    Next
+                  </Button>
+                </HStack>
+              </VStack>
+            </Box>
+          )}
+
+          {diffLens && diffLens.unplacedTargets.length > 0 && (
+            <Box
+              position="absolute"
+              top={{ base: '150px', md: '132px' }}
+              right={4}
+              zIndex={13}
+              className="glass"
+              borderRadius="lg"
+              px={3}
+              py={3}
+              w={{ base: 'calc(100vw - 32px)', md: '340px' }}
+              maxH="260px"
+              overflowY="auto"
+              pointerEvents="auto"
+              data-zui-native-wheel="true"
+              sx={{ overscrollBehavior: 'contain', WebkitOverflowScrolling: 'touch', touchAction: 'pan-y' }}
+            >
+              <VStack align="stretch" spacing={2}>
+                <Text fontSize="11px" color="gray.400" fontWeight="700" textTransform="uppercase">
+                  Deleted or unplaced
+                </Text>
+                {diffLens.unplacedTargets.slice(0, 8).map((target) => (
+                  <Box key={target.key} borderTop="1px solid" borderColor="whiteAlpha.100" pt={2}>
+                    <HStack spacing={2} align="start">
+                      <Badge colorScheme={target.changeType === 'deleted' ? 'red' : 'yellow'} variant="subtle" fontSize="9px">
+                        {target.changeType}
+                      </Badge>
+                      <Box minW={0} flex={1}>
+                        <Text fontSize="xs" color="gray.100" noOfLines={1}>{target.label}</Text>
+                        {target.sourcePath && (
+                          <Text fontSize="10px" color="gray.500" fontFamily="mono" noOfLines={1}>{target.sourcePath}</Text>
+                        )}
+                      </Box>
+                      {target.sourcePath && (
+                        <Button size="xs" variant="ghost" color="var(--accent)" onClick={() => openDiffSource(target)}>
+                          Open
+                        </Button>
+                      )}
+                    </HStack>
+                  </Box>
+                ))}
+                {diffLens.unplacedTargets.length > 8 && (
+                  <Text fontSize="xs" color="gray.500">
+                    +{diffLens.unplacedTargets.length - 8} more
+                  </Text>
+                )}
+              </VStack>
+            </Box>
+          )}
+
           {/* Bottom toolbar */}
           <Box
             position="absolute"

package/src/utils/exploreDiffLens.test.ts

@@ -0,0 +1,185 @@
+import { describe, expect, it } from 'vitest'
+import type { WatchDiff } from '../api/client'
+import type { Connector, ExploreData, PlacedElement, ViewTreeNode } from '../types'
+import { buildExploreDiffLens, sourcePathFromDiff } from './exploreDiffLens'
+
+function viewNode(id: number, name: string, parentViewId: number | null = null, ownerElementId: number | null = null, children: ViewTreeNode[] = []): ViewTreeNode {
+  return {
+    id,
+    owner_element_id: ownerElementId,
+    name,
+    description: null,
+    level_label: null,
+    level: parentViewId ? 2 : 1,
+    depth: parentViewId ? 1 : 0,
+    created_at: '2024-01-01',
+    updated_at: '2024-01-01',
+    parent_view_id: parentViewId,
+    children,
+  }
+}
+
+function placed(viewId: number, elementId: number, name: string): PlacedElement {
+  return {
+    id: viewId * 1000 + elementId,
+    view_id: viewId,
+    element_id: elementId,
+    position_x: 0,
+    position_y: 0,
+    name,
+    description: null,
+    kind: 'service',
+    technology: null,
+    url: null,
+    logo_url: null,
+    technology_connectors: [],
+    tags: [],
+    has_view: false,
+    view_label: null,
+  }
+}
+
+function connector(id: number, viewId: number, source: number, target: number): Connector {
+  return {
+    id,
+    view_id: viewId,
+    source_element_id: source,
+    target_element_id: target,
+    label: 'calls',
+    description: null,
+    relationship: null,
+    direction: 'forward',
+    style: 'bezier',
+    url: null,
+    source_handle: null,
+    target_handle: null,
+    created_at: '2024-01-01',
+    updated_at: '2024-01-01',
+  }
+}
+
+function diff(overrides: Partial<WatchDiff>): WatchDiff {
+  return {
+    id: 1,
+    version_id: 9,
+    owner_type: 'symbol',
+    owner_key: 'go:services/api/main.go:function:Serve',
+    change_type: 'updated',
+    resource_type: 'element',
+    resource_id: 301,
+    summary: 'Serve',
+    added_lines: 3,
+    removed_lines: 1,
+    ...overrides,
+  }
+}
+
+describe('explore diff lens', () => {
+  const tree = [
+    viewNode(1, 'Root', null, null, [
+      viewNode(2, 'Payments', 1, 101),
+    ]),
+  ]
+  const data: ExploreData = {
+    tree,
+    navigations: [],
+    views: {
+      1: {
+        placements: [placed(1, 101, 'Payments'), placed(1, 102, 'Identity')],
+        connectors: [connector(501, 1, 101, 102)],
+      },
+      2: {
+        placements: [placed(2, 301, 'Checkout API'), placed(2, 302, 'Ledger')],
+        connectors: [connector(601, 2, 301, 302)],
+      },
+    },
+  }
+
+  it('keeps changed nodes, ancestor path, and sibling context', () => {
+    const lens = buildExploreDiffLens(data, [diff({})], 9)
+
+    expect(lens.changedElementIds.has(301)).toBe(true)
+    expect(lens.ancestorElementIds.has(101)).toBe(true)
+    expect(lens.siblingElementIds.has(302)).toBe(true)
+    expect(lens.siblingElementIds.has(102)).toBe(true)
+    expect(lens.contextElementIds.has(101)).toBe(true)
+    expect(lens.contextElementIds.has(302)).toBe(true)
+    expect(lens.contextElementIds.has(301)).toBe(false)
+  })
+
+  it('indexes connector changes and adjacent context connectors', () => {
+    const lens = buildExploreDiffLens(data, [diff({ resource_type: 'connector', resource_id: 601, summary: 'calls' })], 9)
+
+    expect(lens.connectorChanges.get(601)).toBe('updated')
+    expect(lens.contextElementIds.has(301)).toBe(true)
+    expect(lens.contextElementIds.has(302)).toBe(true)
+    expect(lens.contextConnectorIds.has(501)).toBe(true)
+  })
+
+  it('places missing resources into the unplaced tray', () => {
+    const lens = buildExploreDiffLens(data, [diff({ resource_id: 999, summary: 'Removed service', change_type: 'deleted' })], 9)
+
+    expect(lens.orderedTargets).toHaveLength(0)
+    expect(lens.unplacedTargets).toEqual([
+      expect.objectContaining({
+        resourceId: 999,
+        changeType: 'deleted',
+        label: 'Removed service',
+        unplaced: true,
+      }),
+    ])
+  })
+
+  it('keeps file-only changes available in the unplaced tray', () => {
+    const lens = buildExploreDiffLens(data, [
+      diff({
+        owner_type: 'file',
+        owner_key: 'services/api/main.go',
+        resource_type: 'file',
+        resource_id: undefined,
+        summary: 'services/api/main.go',
+      }),
+    ], 9)
+
+    expect(lens.unplacedTargets).toEqual([
+      expect.objectContaining({
+        resourceType: 'file',
+        label: 'services/api/main.go',
+        sourcePath: 'services/api/main.go',
+      }),
+    ])
+  })
+
+  it('preserves summaries, line deltas, and source paths', () => {
+    const lens = buildExploreDiffLens(data, [diff({})], 9)
+
+    expect(lens.elementLineDeltas.get(301)).toEqual({ added: 3, removed: 1 })
+    expect(lens.diffDetailsByResource.get('element:301')).toEqual(expect.objectContaining({
+      summary: 'Serve',
+      addedLines: 3,
+      removedLines: 1,
+      sourcePath: 'services/api/main.go',
+    }))
+    expect(lens.totalAddedLines).toBe(3)
+    expect(lens.totalRemovedLines).toBe(1)
+  })
+
+  it('ignores initialized resources as diff targets', () => {
+    const lens = buildExploreDiffLens(data, [
+      diff({ change_type: 'initialized', resource_type: 'element', resource_id: 301 }),
+      diff({ change_type: 'initialized', resource_type: 'connector', resource_id: 601 }),
+    ], 9)
+
+    expect(lens.orderedTargets).toHaveLength(0)
+    expect(lens.unplacedTargets).toHaveLength(0)
+    expect(lens.changedElementIds.size).toBe(0)
+    expect(lens.changedConnectorIds.size).toBe(0)
+    expect(lens.diffDetailsByResource.size).toBe(0)
+  })
+
+  it('extracts source paths from common owner key shapes', () => {
+    expect(sourcePathFromDiff({ owner_type: 'file', owner_key: 'cmd/root.go' })).toBe('cmd/root.go')
+    expect(sourcePathFromDiff({ owner_type: 'symbol', owner_key: 'go:internal/app/app.go:function:Run' })).toBe('internal/app/app.go')
+    expect(sourcePathFromDiff({ owner_type: 'reference', owner_key: 'symbol:go:a.go:function:A:go:b.go:function:B:call' })).toBe('a.go')
+  })
+})

package/src/utils/exploreDiffLens.ts

@@ -0,0 +1,262 @@
+import type { WatchDiff } from '../api/client'
+import type { Connector, ExploreData, PlacedElement, ViewTreeNode } from '../types'
+import { isWatchDiffChange, normalizeWatchChangeType, type WatchChangeType } from './watchDiffSummary'
+
+export interface ExploreDiffLineDelta {
+  added: number
+  removed: number
+}
+
+export interface ExploreDiffDetail {
+  key: string
+  resourceType: string
+  resourceId?: number
+  changeType: WatchChangeType
+  summary?: string
+  ownerType: string
+  ownerKey: string
+  language?: string
+  addedLines: number
+  removedLines: number
+  sourcePath?: string
+  line?: number
+}
+
+export interface ExploreDiffTarget extends ExploreDiffDetail {
+  label: string
+  viewId?: number
+  viewName?: string
+  unplaced: boolean
+}
+
+export interface ExploreDiffLens {
+  versionId: number
+  elementChanges: Map<number, WatchChangeType>
+  connectorChanges: Map<number, WatchChangeType>
+  elementLineDeltas: Map<number, ExploreDiffLineDelta>
+  diffDetailsByResource: Map<string, ExploreDiffDetail>
+  orderedTargets: ExploreDiffTarget[]
+  unplacedTargets: ExploreDiffTarget[]
+  changedElementIds: Set<number>
+  changedConnectorIds: Set<number>
+  ancestorElementIds: Set<number>
+  siblingElementIds: Set<number>
+  contextElementIds: Set<number>
+  contextConnectorIds: Set<number>
+  totalAddedLines: number
+  totalRemovedLines: number
+}
+
+export function diffResourceKey(resourceType: string | null | undefined, resourceId: number | null | undefined): string {
+  return `${resourceType || 'resource'}:${resourceId ?? 'unknown'}`
+}
+
+function flattenViews(nodes: ViewTreeNode[], out = new Map<number, ViewTreeNode>()): Map<number, ViewTreeNode> {
+  nodes.forEach((node) => {
+    out.set(node.id, node)
+    flattenViews(node.children ?? [], out)
+  })
+  return out
+}
+
+function firstPathLikePart(parts: string[], startIndex: number): string | undefined {
+  for (let i = startIndex; i < parts.length; i += 1) {
+    const part = parts[i]?.trim()
+    if (!part) continue
+    if (part.includes('/') || part.includes('\\') || part.includes('.')) return part.replace(/\\/g, '/')
+  }
+  return undefined
+}
+
+export function sourcePathFromDiff(diff: Pick<WatchDiff, 'owner_type' | 'owner_key'>): string | undefined {
+  const ownerType = diff.owner_type?.trim()
+  const ownerKey = diff.owner_key?.trim()
+  if (!ownerKey) return undefined
+  if (ownerType === 'file') return ownerKey.replace(/^file:/, '').replace(/\\/g, '/')
+  if (ownerKey.startsWith('file:')) return ownerKey.slice('file:'.length).replace(/\\/g, '/')
+
+  const parts = ownerKey.split(':')
+  if (ownerType === 'symbol' && parts.length >= 4) {
+    return parts[1]?.replace(/\\/g, '/')
+  }
+  if (ownerKey.startsWith('symbol:') && parts.length >= 5) {
+    return parts[2]?.replace(/\\/g, '/')
+  }
+  return firstPathLikePart(parts, 1)
+}
+
+function connectorName(connector: Connector): string {
+  return connector.label || connector.relationship || `connector ${connector.id}`
+}
+
+function targetBase(diff: WatchDiff): ExploreDiffDetail {
+  const addedLines = Math.max(0, diff.added_lines ?? 0)
+  const removedLines = Math.max(0, diff.removed_lines ?? 0)
+  const detail: ExploreDiffDetail = {
+    key: diffResourceKey(diff.resource_type, diff.resource_id),
+    resourceType: diff.resource_type || 'resource',
+    resourceId: diff.resource_id,
+    changeType: normalizeWatchChangeType(diff.change_type),
+    summary: diff.summary,
+    ownerType: diff.owner_type,
+    ownerKey: diff.owner_key,
+    language: diff.language,
+    addedLines,
+    removedLines,
+    sourcePath: sourcePathFromDiff(diff),
+  }
+  return detail
+}
+
+export function buildExploreDiffLens(data: ExploreData, diffs: WatchDiff[] | null | undefined, versionId: number): ExploreDiffLens {
+  const views = flattenViews(data.tree ?? [])
+  const viewByOwnerElement = new Map<number, ViewTreeNode>()
+  views.forEach((view) => {
+    if (view.owner_element_id != null) viewByOwnerElement.set(view.owner_element_id, view)
+  })
+
+  const placementsByElement = new Map<number, PlacedElement[]>()
+  const connectorsById = new Map<number, Connector>()
+  Object.values(data.views ?? {}).forEach((content) => {
+    ;(content.placements ?? []).forEach((placement) => {
+      const list = placementsByElement.get(placement.element_id) ?? []
+      list.push(placement)
+      placementsByElement.set(placement.element_id, list)
+    })
+    ;(content.connectors ?? []).forEach((connector) => {
+      connectorsById.set(connector.id, connector)
+    })
+  })
+
+  const elementChanges = new Map<number, WatchChangeType>()
+  const connectorChanges = new Map<number, WatchChangeType>()
+  const elementLineDeltas = new Map<number, ExploreDiffLineDelta>()
+  const diffDetailsByResource = new Map<string, ExploreDiffDetail>()
+  const orderedTargets: ExploreDiffTarget[] = []
+  const unplacedTargets: ExploreDiffTarget[] = []
+  const changedElementIds = new Set<number>()
+  const changedConnectorIds = new Set<number>()
+  const ancestorElementIds = new Set<number>()
+  const siblingElementIds = new Set<number>()
+  const contextElementIds = new Set<number>()
+  const contextConnectorIds = new Set<number>()
+  let totalAddedLines = 0
+  let totalRemovedLines = 0
+
+  const addContextForViewPath = (viewId: number) => {
+    let current = views.get(viewId)
+    while (current) {
+      const content = data.views[String(current.id)]
+      ;(content?.placements ?? []).forEach((placement) => {
+        siblingElementIds.add(placement.element_id)
+        contextElementIds.add(placement.element_id)
+      })
+      if (current.owner_element_id != null) {
+        ancestorElementIds.add(current.owner_element_id)
+        contextElementIds.add(current.owner_element_id)
+      }
+      current = current.parent_view_id != null ? views.get(current.parent_view_id) : undefined
+    }
+  }
+
+  ;(Array.isArray(diffs) ? diffs : []).forEach((diff) => {
+    if (!isWatchDiffChange(diff.change_type)) return
+    const detail = targetBase(diff)
+    totalAddedLines += detail.addedLines
+    totalRemovedLines += detail.removedLines
+    diffDetailsByResource.set(detail.key, detail)
+
+    if (diff.resource_type === 'element' && diff.resource_id) {
+      elementChanges.set(diff.resource_id, detail.changeType)
+      changedElementIds.add(diff.resource_id)
+      if (detail.addedLines > 0 || detail.removedLines > 0) {
+        elementLineDeltas.set(diff.resource_id, { added: detail.addedLines, removed: detail.removedLines })
+      }
+
+      const placements = placementsByElement.get(diff.resource_id) ?? []
+      if (placements.length === 0) {
+        const ownedView = viewByOwnerElement.get(diff.resource_id)
+        unplacedTargets.push({
+          ...detail,
+          label: detail.summary || `element ${diff.resource_id}`,
+          viewId: ownedView?.id,
+          viewName: ownedView?.name,
+          unplaced: true,
+        })
+      } else {
+        placements.forEach((placement) => {
+          const view = views.get(placement.view_id)
+          addContextForViewPath(placement.view_id)
+          orderedTargets.push({
+            ...detail,
+            key: `${detail.key}:view:${placement.view_id}`,
+            label: placement.name || detail.summary || `element ${diff.resource_id}`,
+            viewId: placement.view_id,
+            viewName: view?.name ?? `View ${placement.view_id}`,
+            unplaced: false,
+          })
+        })
+      }
+    } else if (diff.resource_type === 'connector' && diff.resource_id) {
+      connectorChanges.set(diff.resource_id, detail.changeType)
+      changedConnectorIds.add(diff.resource_id)
+      const connector = connectorsById.get(diff.resource_id)
+      if (connector) {
+        addContextForViewPath(connector.view_id)
+        contextElementIds.add(connector.source_element_id)
+        contextElementIds.add(connector.target_element_id)
+        orderedTargets.push({
+          ...detail,
+          label: connectorName(connector),
+          viewId: connector.view_id,
+          viewName: views.get(connector.view_id)?.name ?? `View ${connector.view_id}`,
+          unplaced: false,
+        })
+      } else {
+        unplacedTargets.push({
+          ...detail,
+          label: detail.summary || `connector ${diff.resource_id}`,
+          unplaced: true,
+        })
+      }
+    } else if (detail.sourcePath || diff.resource_type === 'file' || diff.owner_type === 'file') {
+      unplacedTargets.push({
+        ...detail,
+        label: detail.summary || detail.sourcePath || detail.ownerKey,
+        unplaced: true,
+      })
+    }
+  })
+
+  Object.values(data.views ?? {}).forEach((content) => {
+    ;(content.connectors ?? []).forEach((connector) => {
+      if (changedConnectorIds.has(connector.id)) return
+      if (contextElementIds.has(connector.source_element_id) || contextElementIds.has(connector.target_element_id)) {
+        contextConnectorIds.add(connector.id)
+      }
+    })
+  })
+
+  changedElementIds.forEach((id) => {
+    contextElementIds.delete(id)
+    siblingElementIds.delete(id)
+  })
+
+  return {
+    versionId,
+    elementChanges,
+    connectorChanges,
+    elementLineDeltas,
+    diffDetailsByResource,
+    orderedTargets,
+    unplacedTargets,
+    changedElementIds,
+    changedConnectorIds,
+    ancestorElementIds,
+    siblingElementIds,
+    contextElementIds,
+    contextConnectorIds,
+    totalAddedLines,
+    totalRemovedLines,
+  }
+}