@tldiagram/core-ui 2.0.6 → 2.0.8

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,
+  }
+}

package/src/utils/technologyCatalog.ts

@@ -19,6 +19,11 @@ export function resolveWithBase(urlOrPath: string): string {
   if (urlOrPath.startsWith('http://') || urlOrPath.startsWith('https://') || urlOrPath.startsWith('data:')) {
     return urlOrPath
   }
+  const vscodeServerUrl = typeof window !== 'undefined' ? window.__TLD_SERVER_URL__?.replace(/\/+$/, '') : undefined
+  if (window.__TLD_VSCODE__ && vscodeServerUrl) {
+    const normalizedPath = urlOrPath.startsWith('/') ? urlOrPath : `/${urlOrPath}`
+    return `${vscodeServerUrl}${normalizedPath}`
+  }
 
   // When running inside the native mobile app (Capacitor), or inside an embedded webview
   // that serves content from localhost, avoid prefixing the app BASE_URL. Mobile builds and

package/src/utils/url.ts

@@ -9,6 +9,13 @@ export function resolveIconPath(path: string | null | undefined): string {
 
   // Absolute URLs and data URIs are returned as-is
   if (path.startsWith('http://') || path.startsWith('https://') || path.startsWith('data:')) return path
+  const vscodeServerUrl = typeof window !== 'undefined' ? window.__TLD_SERVER_URL__?.replace(/\/+$/, '') : undefined
+  const isVsCode = typeof window !== 'undefined' && !!window.__TLD_VSCODE__
+  if (isVsCode && vscodeServerUrl) {
+    const stripped = path.startsWith('/app/') ? path.slice('/app'.length) : path
+    const normalizedPath = stripped.startsWith('/') ? stripped : `/${stripped}`
+    return `${vscodeServerUrl}${normalizedPath}`
+  }
 
   // If running inside the native mobile app (Capacitor) OR inside an embedded
   // webview that serves content from localhost (e.g. Capacitor production webview),

package/src/utils/watchDiffSummary.test.ts

@@ -0,0 +1,95 @@
+import { describe, expect, it } from 'vitest'
+import type { WatchDiff } from '../api/client'
+import type { ExploreData } from '../types'
+import {
+  buildWatchDiffLocations,
+  changedResourceCount,
+  formatDiagramResourceSummary,
+  formatStatLine,
+  isWatchDiffChange,
+  summarizeWatchDiffs,
+  totalResourceCount,
+} from './watchDiffSummary'
+
+function diff(overrides: Partial<WatchDiff>): WatchDiff {
+  return {
+    id: 1,
+    version_id: 1,
+    owner_type: 'symbol',
+    owner_key: 'go:main.go:function:Main',
+    change_type: 'initialized',
+    resource_type: 'element',
+    resource_id: 101,
+    ...overrides,
+  }
+}
+
+describe('watch diff summary', () => {
+  const data: ExploreData = {
+    tree: [{
+      id: 1,
+      owner_element_id: null,
+      name: 'Root',
+      description: null,
+      level_label: null,
+      level: 1,
+      depth: 0,
+      created_at: '2024-01-01',
+      updated_at: '2024-01-01',
+      parent_view_id: null,
+      children: [],
+    }],
+    navigations: [],
+    views: {
+      1: {
+        placements: [{
+          id: 1,
+          view_id: 1,
+          element_id: 101,
+          position_x: 0,
+          position_y: 0,
+          name: 'Main',
+          description: null,
+          kind: 'service',
+          technology: null,
+          url: null,
+          logo_url: null,
+          technology_connectors: [],
+          tags: [],
+          has_view: false,
+          view_label: null,
+        }],
+        connectors: [],
+      },
+    },
+  }
+
+  it('does not describe clean initial resources as changed', () => {
+    const summary = summarizeWatchDiffs([
+      diff({ id: 1, change_type: 'initialized', resource_type: 'element', resource_id: 101 }),
+      diff({ id: 2, change_type: 'initialized', resource_type: 'element', resource_id: 102 }),
+      diff({ id: 3, change_type: 'initialized', resource_type: 'connector', resource_id: 201 }),
+    ])
+
+    expect(changedResourceCount(summary.elements)).toBe(0)
+    expect(totalResourceCount(summary.elements)).toBe(2)
+    expect(formatDiagramResourceSummary(summary)).toBe('3 initialized resources')
+    expect(formatStatLine('element', summary.elements)).toBe('2 elements initialized')
+    expect(isWatchDiffChange('initialized')).toBe(false)
+    expect(buildWatchDiffLocations(data, [
+      diff({ id: 1, change_type: 'initialized', resource_type: 'element', resource_id: 101 }),
+    ])).toEqual([])
+  })
+
+  it('keeps changed and initialized resources separate in labels', () => {
+    const summary = summarizeWatchDiffs([
+      diff({ id: 1, change_type: 'updated', resource_type: 'element', resource_id: 101 }),
+      diff({ id: 2, change_type: 'deleted', resource_type: 'connector', resource_id: 201 }),
+      diff({ id: 3, change_type: 'initialized', resource_type: 'element', resource_id: 102 }),
+    ])
+
+    expect(formatDiagramResourceSummary(summary)).toBe('2 changed, 1 initialized resources')
+    expect(formatStatLine('connector', summary.connectors)).toBe('1 connector changed')
+    expect(formatStatLine('element', summary.elements)).toBe('1 element changed, 1 element initialized')
+  })
+})

package/src/utils/watchDiffSummary.ts

@@ -31,11 +31,24 @@ export interface WatchDiffSummary {
   connectors: WatchResourceStat
 }
 
+export function changedResourceCount(stat: WatchResourceStat): number {
+  return stat.added + stat.updated + stat.deleted
+}
+
+export function totalResourceCount(stat: WatchResourceStat): number {
+  return changedResourceCount(stat) + stat.initialized
+}
+
 export function normalizeWatchChangeType(value: string): WatchChangeType {
   if (value === 'added' || value === 'updated' || value === 'deleted' || value === 'initialized') return value
   return 'updated'
 }
 
+export function isWatchDiffChange(value: string | null | undefined): boolean {
+  const change = normalizeWatchChangeType(value ?? '')
+  return change === 'added' || change === 'updated' || change === 'deleted'
+}
+
 export function emptyWatchResourceStat(): WatchResourceStat {
   return { added: 0, updated: 0, deleted: 0, initialized: 0, addedLines: 0, removedLines: 0 }
 }
@@ -64,13 +77,32 @@ export function summarizeWatchDiffs(diffs: WatchDiff[] | null | undefined): Watc
 }
 
 export function formatStatLine(label: string, stat: WatchResourceStat): string {
-  const total = stat.added + stat.updated + stat.deleted + stat.initialized
-  const parts = [`${total} ${label}${total === 1 ? '' : 's'} changed`]
+  const changed = changedResourceCount(stat)
+  const initialized = stat.initialized
+  const parts = []
+  if (changed > 0) parts.push(`${changed} ${label}${changed === 1 ? '' : 's'} changed`)
+  if (initialized > 0) parts.push(`${initialized} ${label}${initialized === 1 ? '' : 's'} initialized`)
+  if (parts.length === 0) parts.push(`0 ${label}s changed`)
   if (stat.addedLines > 0) parts.push(`+${stat.addedLines}`)
   if (stat.removedLines > 0) parts.push(`-${stat.removedLines}`)
   return parts.join(', ')
 }
 
+export function formatDiagramResourceSummary(summary: WatchDiffSummary): string {
+  const changed = changedResourceCount(summary.elements) + changedResourceCount(summary.connectors)
+  const initialized = summary.elements.initialized + summary.connectors.initialized
+  if (changed > 0 && initialized > 0) {
+    return `${changed} changed, ${initialized} initialized resources`
+  }
+  if (changed > 0) {
+    return `${changed} changed resource${changed === 1 ? '' : 's'}`
+  }
+  if (initialized > 0) {
+    return `${initialized} initialized resource${initialized === 1 ? '' : 's'}`
+  }
+  return 'No diagram resource changes'
+}
+
 export function formatTldStatLine(summary: WatchDiffSummary): string {
   return [
     formatStatLine('element', summary.elements),
@@ -131,6 +163,7 @@ export function buildWatchDiffLocations(data: ExploreData, diffs: WatchDiff[] |
 
   const locations: WatchDiffLocation[] = []
   ;(Array.isArray(diffs) ? diffs : []).forEach((diff) => {
+    if (!isWatchDiffChange(diff.change_type)) return
     if (!diff.resource_id) return
     const base = {
       changeType: normalizeWatchChangeType(diff.change_type),

package/src/vscode-entry.tsx

@@ -0,0 +1,56 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { ChakraProvider } from '@chakra-ui/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { MemoryRouter } from 'react-router-dom'
+import App from './App'
+import theme from './theme'
+import { ToastContainer } from './utils/toast'
+import { PlatformProvider } from './platform/PlatformContext'
+import { platform as localPlatform } from './platform/local'
+import './index.css'
+
+declare global {
+  interface Window {
+    __TLD_DIAGRAM_ID__?: number
+    __TLD_VSCODE__?: boolean
+    __TLD_VSCODE_API__?: {
+      postMessage: (msg: unknown) => void
+    }
+    __TLD_SERVER_URL__?: string
+  }
+}
+
+const diagramId = window.__TLD_DIAGRAM_ID__
+const initialPath = diagramId != null ? `/views/${diagramId}` : '/views'
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 5_000,
+      refetchOnWindowFocus: false,
+    },
+  },
+})
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <ChakraProvider theme={theme}>
+        <PlatformProvider platform={localPlatform}>
+          <MemoryRouter
+            initialEntries={[initialPath]}
+            future={{
+              v7_startTransition: true,
+              v7_relativeSplatPath: true,
+            }}
+          >
+            <App />
+          </MemoryRouter>
+          <ToastContainer />
+        </PlatformProvider>
+      </ChakraProvider>
+    </QueryClientProvider>
+  </StrictMode>,
+)
+