@things-factory/integration-ui 9.0.28 → 9.0.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/client/analysis/graph-data.ts +2 -2
  2. package/client/analysis/graph-viewer.ts +58 -43
  3. package/dist-client/analysis/graph-data.d.ts +2 -2
  4. package/dist-client/analysis/graph-data.js.map +1 -1
  5. package/dist-client/analysis/graph-viewer.d.ts +2 -0
  6. package/dist-client/analysis/graph-viewer.js +51 -30
  7. package/dist-client/analysis/graph-viewer.js.map +1 -1
  8. package/dist-client/tsconfig.tsbuildinfo +1 -1
  9. package/dist-server/tsconfig.tsbuildinfo +1 -1
  10. package/package.json +3 -3
package/client/analysis/graph-data.ts CHANGED
@@ -15,8 +15,8 @@ export interface Node {
15
15
  id: string
16
16
  labels: string[]
17
17
  properties: { [key: string]: any }
18
- x?: number
19
- y?: number
18
+ x: number
19
+ y: number
20
20
  fx?: number | null
21
21
  fy?: number | null
22
22
  icon?: string
package/client/analysis/graph-viewer.ts CHANGED
@@ -11,6 +11,8 @@ export class GraphViewer {
11
11
  private options: any
12
12
  private svgScale
13
13
  private svgTranslate
14
+ private svgContainer: any
15
+ private zoom: any
14
16
 
15
17
  public simulation: any
16
18
 
@@ -35,33 +37,41 @@ export class GraphViewer {
35
37
  }
36
38
 
37
39
  private init(selector: any) {
38
- this.svg = d3
40
+ // SVG 컨테이너 생성
41
+ const svgContainer = d3
39
42
  .select(selector)
40
43
  .append('svg')
41
44
  .attr('width', '100%')
42
45
  .attr('height', '100%')
43
46
  .attr('class', 'graph-viewer')
44
- .call(
45
- d3.zoom().on('zoom', (event, d) => {
46
- var scale = event.transform.k,
47
- translate = [event.transform.x, event.transform.y]
48
47
 
49
- if (this.svgTranslate) {
50
- translate[0] += this.svgTranslate[0]
51
- translate[1] += this.svgTranslate[1]
52
- }
48
+ // 줌 동작 정의 (마우스 중심 줌 자동 지원)
49
+ const zoom = d3
50
+ .zoom()
51
+ .scaleExtent([0.1, 10])
52
+ .on('zoom', event => {
53
+ // D3가 자동으로 계산한 transform을 그대로 사용 (마우스 중심 줌)
54
+ this.svg.attr('transform', event.transform)
55
+ })
53
56
 
54
- if (this.svgScale) {
55
- scale *= this.svgScale
56
- }
57
+ // SVG 컨테이너에 줌 적용
58
+ svgContainer.call(zoom)
57
59
 
58
- this.svg.attr('transform', 'translate(' + translate[0] + ', ' + translate[1] + ') scale(' + scale + ')')
59
- })
60
- )
61
- .on('dblclick.zoom', null)
62
- .append('g') // 그룹 요소 추가
63
- .attr('width', '100%')
64
- .attr('height', '100%')
60
+ // 기본 더블클릭 줌 비활성화
61
+ svgContainer.on('dblclick.zoom', null)
62
+
63
+ // 배경 더블클릭 시 zoomFit 실행
64
+ svgContainer.on('dblclick', event => {
65
+ event.preventDefault()
66
+ this.zoomFit()
67
+ })
68
+
69
+ // 실제 그래프 내용을 담을 그룹 생성
70
+ this.svg = svgContainer.append('g').attr('class', 'graph-container').attr('width', '100%').attr('height', '100%')
71
+
72
+ // SVG 컨테이너 참조 저장 (zoomFit에서 사용)
73
+ this.svgContainer = svgContainer
74
+ this.zoom = zoom
65
75
 
66
76
  // Define arrow markers for graph links
67
77
  this.svg
@@ -114,10 +124,7 @@ export class GraphViewer {
114
124
  this.tick()
115
125
  })
116
126
  .on('end', () => {
117
- if (this.options.zoomFit && this.needZoomFit) {
118
- this.needZoomFit = false
119
- this.zoomFit()
120
- }
127
+ // 자동 zoomFit 제거 - 더블클릭으로만 실행
121
128
  })
122
129
 
123
130
  return simulation
@@ -251,7 +258,8 @@ export class GraphViewer {
251
258
  this.options.onNodeDoubleClick(d)
252
259
  }
253
260
  })
254
- .on('mouseenter', (event, d) => {
261
+ .on('mouseenter', function (this: any, event: any, d: any) {
262
+ d3.select(this).style('background', '#f0f0f0')
255
263
  event.target.dispatchEvent(
256
264
  new CustomEvent('node-mouseenter', {
257
265
  detail: d,
@@ -259,7 +267,8 @@ export class GraphViewer {
259
267
  })
260
268
  )
261
269
  })
262
- .on('mouseleave', (event, d) => {
270
+ .on('mouseleave', function (this: any, event: any, d: any) {
271
+ d3.select(this).style('background', 'white')
263
272
  event.target.dispatchEvent(
264
273
  new CustomEvent('node-mouseleave', {
265
274
  detail: d,
@@ -369,26 +378,32 @@ export class GraphViewer {
369
378
  }
370
379
 
371
380
  zoomFit() {
372
- var bounds = this.svg.node().getBBox(),
373
- parent = this.svg.node().parentElement.parentElement,
374
- fullWidth = parent.clientWidth,
375
- fullHeight = parent.clientHeight,
376
- width = bounds.width,
377
- height = bounds.height,
378
- midX = bounds.x + width / 2,
379
- midY = bounds.y + height / 2
380
-
381
- if (width === 0 || height === 0) {
382
- return // nothing to fit
383
- }
381
+ if (!this.svg || !this.svgContainer) return
382
+
383
+ const bounds = this.svg.node()?.getBBox()
384
+ const svgNode = this.svgContainer.node()
385
+
386
+ if (!bounds || !svgNode) return
387
+
388
+ const rect = svgNode.getBoundingClientRect()
389
+ const fullWidth = rect.width
390
+ const fullHeight = rect.height
391
+
392
+ if (bounds.width === 0 || bounds.height === 0) return
393
+
394
+ const padding = 50
395
+ const scale = Math.min((fullWidth - padding) / bounds.width, (fullHeight - padding) / bounds.height) * 0.85
396
+
397
+ const centerX = bounds.x + bounds.width / 2
398
+ const centerY = bounds.y + bounds.height / 2
384
399
 
385
- this.svgScale = 0.85 / Math.max(width / fullWidth, height / fullHeight)
386
- this.svgTranslate = [fullWidth / 2 - this.svgScale * midX, fullHeight / 2 - this.svgScale * midY]
400
+ const transform = d3.zoomIdentity
401
+ .translate(fullWidth / 2, fullHeight / 2)
402
+ .scale(scale)
403
+ .translate(-centerX, -centerY)
387
404
 
388
- this.svg.attr(
389
- 'transform',
390
- 'translate(' + this.svgTranslate[0] + ', ' + this.svgTranslate[1] + ') scale(' + this.svgScale + ')'
391
- )
405
+ // D3의 줌 상태를 직접 업데이트하여 이후 휠스크롤이 올바르게 작동하도록 함
406
+ this.svgContainer.transition().duration(750).call(this.zoom.transform, transform)
392
407
  }
393
408
 
394
409
  size() {
package/dist-client/analysis/graph-data.d.ts CHANGED
@@ -16,8 +16,8 @@ export interface Node {
16
16
  properties: {
17
17
  [key: string]: any;
18
18
  };
19
- x?: number;
20
- y?: number;
19
+ x: number;
20
+ y: number;
21
21
  fx?: number | null;
22
22
  fy?: number | null;
23
23
  icon?: string;
package/dist-client/analysis/graph-data.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"graph-data.js","sourceRoot":"","sources":["../../client/analysis/graph-data.ts"],"names":[],"mappings":"","sourcesContent":["export interface GraphData {\n results: Array<{\n columns: string[]\n data: Array<{\n graph: {\n nodes: Node[]\n relationships: Relationship[]\n }\n }>\n }>\n errors: any[]\n}\n\nexport interface Node {\n id: string\n labels: string[]\n properties: { [key: string]: any }\n x?: number\n y?: number\n fx?: number | null\n fy?: number | null\n icon?: string\n}\n\nexport interface Relationship {\n id: string\n type: string\n startNode: string\n endNode: string\n source?: Node\n target?: Node\n properties: { [key: string]: any }\n linknum?: number\n}\n"]}
1
+ {"version":3,"file":"graph-data.js","sourceRoot":"","sources":["../../client/analysis/graph-data.ts"],"names":[],"mappings":"","sourcesContent":["export interface GraphData {\n results: Array<{\n columns: string[]\n data: Array<{\n graph: {\n nodes: Node[]\n relationships: Relationship[]\n }\n }>\n }>\n errors: any[]\n}\n\nexport interface Node {\n id: string\n labels: string[]\n properties: { [key: string]: any }\n x: number\n y: number\n fx?: number | null\n fy?: number | null\n icon?: string\n}\n\nexport interface Relationship {\n id: string\n type: string\n startNode: string\n endNode: string\n source?: Node\n target?: Node\n properties: { [key: string]: any }\n linknum?: number\n}\n"]}
package/dist-client/analysis/graph-viewer.d.ts CHANGED
@@ -10,6 +10,8 @@ export declare class GraphViewer {
10
10
  private options;
11
11
  private svgScale;
12
12
  private svgTranslate;
13
+ private svgContainer;
14
+ private zoom;
13
15
  simulation: any;
14
16
  constructor(_selector: any, _options: any);
15
17
  private init;
package/dist-client/analysis/graph-viewer.js CHANGED
@@ -23,27 +23,35 @@ export class GraphViewer {
23
23
  this.init(_selector);
24
24
  }
25
25
  init(selector) {
26
- this.svg = d3
26
+ // SVG 컨테이너 생성
27
+ const svgContainer = d3
27
28
  .select(selector)
28
29
  .append('svg')
29
30
  .attr('width', '100%')
30
31
  .attr('height', '100%')
31
- .attr('class', 'graph-viewer')
32
- .call(d3.zoom().on('zoom', (event, d) => {
33
- var scale = event.transform.k, translate = [event.transform.x, event.transform.y];
34
- if (this.svgTranslate) {
35
- translate[0] += this.svgTranslate[0];
36
- translate[1] += this.svgTranslate[1];
37
- }
38
- if (this.svgScale) {
39
- scale *= this.svgScale;
40
- }
41
- this.svg.attr('transform', 'translate(' + translate[0] + ', ' + translate[1] + ') scale(' + scale + ')');
42
- }))
43
- .on('dblclick.zoom', null)
44
- .append('g') // 그룹 요소 추가
45
- .attr('width', '100%')
46
- .attr('height', '100%');
32
+ .attr('class', 'graph-viewer');
33
+ // 줌 동작 정의 (마우스 중심 줌 자동 지원)
34
+ const zoom = d3
35
+ .zoom()
36
+ .scaleExtent([0.1, 10])
37
+ .on('zoom', event => {
38
+ // D3가 자동으로 계산한 transform을 그대로 사용 (마우스 중심 줌)
39
+ this.svg.attr('transform', event.transform);
40
+ });
41
+ // SVG 컨테이너에 줌 적용
42
+ svgContainer.call(zoom);
43
+ // 기본 더블클릭 줌 비활성화
44
+ svgContainer.on('dblclick.zoom', null);
45
+ // 배경 더블클릭 시 zoomFit 실행
46
+ svgContainer.on('dblclick', event => {
47
+ event.preventDefault();
48
+ this.zoomFit();
49
+ });
50
+ // 실제 그래프 내용을 담을 그룹 생성
51
+ this.svg = svgContainer.append('g').attr('class', 'graph-container').attr('width', '100%').attr('height', '100%');
52
+ // SVG 컨테이너 참조 저장 (zoomFit에서 사용)
53
+ this.svgContainer = svgContainer;
54
+ this.zoom = zoom;
47
55
  // Define arrow markers for graph links
48
56
  this.svg
49
57
  .append('defs')
@@ -85,10 +93,7 @@ export class GraphViewer {
85
93
  this.tick();
86
94
  })
87
95
  .on('end', () => {
88
- if (this.options.zoomFit && this.needZoomFit) {
89
- this.needZoomFit = false;
90
- this.zoomFit();
91
- }
96
+ // 자동 zoomFit 제거 - 더블클릭으로만 실행
92
97
  });
93
98
  return simulation;
94
99
  }
@@ -194,13 +199,15 @@ export class GraphViewer {
194
199
  this.options.onNodeDoubleClick(d);
195
200
  }
196
201
  })
197
- .on('mouseenter', (event, d) => {
202
+ .on('mouseenter', function (event, d) {
203
+ d3.select(this).style('background', '#f0f0f0');
198
204
  event.target.dispatchEvent(new CustomEvent('node-mouseenter', {
199
205
  detail: d,
200
206
  bubbles: true
201
207
  }));
202
208
  })
203
- .on('mouseleave', (event, d) => {
209
+ .on('mouseleave', function (event, d) {
210
+ d3.select(this).style('background', 'white');
204
211
  event.target.dispatchEvent(new CustomEvent('node-mouseleave', {
205
212
  detail: d,
206
213
  bubbles: true
@@ -291,13 +298,27 @@ export class GraphViewer {
291
298
  d.fy = null;
292
299
  }
293
300
  zoomFit() {
294
- var bounds = this.svg.node().getBBox(), parent = this.svg.node().parentElement.parentElement, fullWidth = parent.clientWidth, fullHeight = parent.clientHeight, width = bounds.width, height = bounds.height, midX = bounds.x + width / 2, midY = bounds.y + height / 2;
295
- if (width === 0 || height === 0) {
296
- return; // nothing to fit
297
- }
298
- this.svgScale = 0.85 / Math.max(width / fullWidth, height / fullHeight);
299
- this.svgTranslate = [fullWidth / 2 - this.svgScale * midX, fullHeight / 2 - this.svgScale * midY];
300
- this.svg.attr('transform', 'translate(' + this.svgTranslate[0] + ', ' + this.svgTranslate[1] + ') scale(' + this.svgScale + ')');
301
+ if (!this.svg || !this.svgContainer)
302
+ return;
303
+ const bounds = this.svg.node()?.getBBox();
304
+ const svgNode = this.svgContainer.node();
305
+ if (!bounds || !svgNode)
306
+ return;
307
+ const rect = svgNode.getBoundingClientRect();
308
+ const fullWidth = rect.width;
309
+ const fullHeight = rect.height;
310
+ if (bounds.width === 0 || bounds.height === 0)
311
+ return;
312
+ const padding = 50;
313
+ const scale = Math.min((fullWidth - padding) / bounds.width, (fullHeight - padding) / bounds.height) * 0.85;
314
+ const centerX = bounds.x + bounds.width / 2;
315
+ const centerY = bounds.y + bounds.height / 2;
316
+ const transform = d3.zoomIdentity
317
+ .translate(fullWidth / 2, fullHeight / 2)
318
+ .scale(scale)
319
+ .translate(-centerX, -centerY);
320
+ // D3의 줌 상태를 직접 업데이트하여 이후 휠스크롤이 올바르게 작동하도록 함
321
+ this.svgContainer.transition().duration(750).call(this.zoom.transform, transform);
301
322
  }
302
323
  size() {
303
324
  return {
package/dist-client/analysis/graph-viewer.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"graph-viewer.js","sourceRoot":"","sources":["../../client/analysis/graph-viewer.ts"],"names":[],"mappings":"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","sourcesContent":["import * as d3 from 'd3'\nimport { Node, Relationship, GraphData } from './graph-data.js'\n\nexport class GraphViewer {\n private svg: any\n private svgNodes: any\n private svgRelationships: any\n private nodes: Node[] = []\n private relationships: Relationship[] = []\n private needZoomFit = true\n private options: any\n private svgScale\n private svgTranslate\n\n public simulation: any\n\n constructor(_selector: any, _options: any) {\n this.options = {\n arrowSize: 4,\n colors: this.colors(),\n highlight: undefined,\n infoPanel: true,\n minCollision: undefined,\n graphData: undefined,\n dataUrl: undefined,\n nodeOutlineFillColor: undefined,\n nodeRadius: 25,\n relationshipColor: '#a5abb6',\n zoomFit: false,\n classes2colors: {},\n numClasses: 0,\n ..._options\n }\n this.init(_selector)\n }\n\n private init(selector: any) {\n this.svg = d3\n .select(selector)\n .append('svg')\n .attr('width', '100%')\n .attr('height', '100%')\n .attr('class', 'graph-viewer')\n .call(\n d3.zoom().on('zoom', (event, d) => {\n var scale = event.transform.k,\n translate = [event.transform.x, event.transform.y]\n\n if (this.svgTranslate) {\n translate[0] += this.svgTranslate[0]\n translate[1] += this.svgTranslate[1]\n }\n\n if (this.svgScale) {\n scale *= this.svgScale\n }\n\n this.svg.attr('transform', 'translate(' + translate[0] + ', ' + translate[1] + ') scale(' + scale + ')')\n })\n )\n .on('dblclick.zoom', null)\n .append('g') // 그룹 요소 추가\n .attr('width', '100%')\n .attr('height', '100%')\n\n // Define arrow markers for graph links\n this.svg\n .append('defs')\n .append('marker')\n .attr('id', 'arrow')\n .attr('viewBox', '0 -5 10 10')\n .attr('refX', 10)\n .attr('refY', 0)\n .attr('markerWidth', 6)\n .attr('markerHeight', 6)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M0,-5L10,0L0,5')\n .attr('fill', this.options.relationshipColor)\n\n this.svgNodes = this.svg.append('g').attr('class', 'nodes')\n this.svgRelationships = this.svg.append('g').attr('class', 'relationships')\n this.simulation = this.initSimulation()\n\n if (this.options.graphData) {\n this.updateWithGraphData(this.options.graphData)\n }\n }\n\n initSimulation() {\n const x = this.svg.node().parentElement.parentElement.clientWidth / 2\n const y = this.svg.node().parentElement.parentElement.clientHeight / 2\n\n var simulation = d3\n .forceSimulation()\n .force(\n 'collide',\n d3\n .forceCollide()\n .radius(d => {\n return this.options.minCollision\n })\n .iterations(2)\n )\n .force('charge', d3.forceManyBody())\n .force(\n 'link',\n d3.forceLink().id(d => {\n return d.id\n })\n )\n .force('center', d3.forceCenter(x, y))\n .on('tick', () => {\n this.tick()\n })\n .on('end', () => {\n if (this.options.zoomFit && this.needZoomFit) {\n this.needZoomFit = false\n this.zoomFit()\n }\n })\n\n return simulation\n }\n\n private tick() {\n this.svgNodes.selectAll('.node').attr('transform', (d: any) => `translate(${d.x}, ${d.y})`)\n\n this.svgRelationships\n .selectAll('.relationship')\n .attr('x1', (d: any) => this.calculateIntersection(d.source, d.target).x1)\n .attr('y1', (d: any) => this.calculateIntersection(d.source, d.target).y1)\n .attr('x2', (d: any) => this.calculateIntersection(d.source, d.target).x2)\n .attr('y2', (d: any) => this.calculateIntersection(d.source, d.target).y2)\n\n this.svgRelationships.selectAll('.relationship-text').attr('transform', (d: any) => {\n const midX =\n (this.calculateIntersection(d.source, d.target).x1 + this.calculateIntersection(d.source, d.target).x2) / 2\n const midY =\n (this.calculateIntersection(d.source, d.target).y1 + this.calculateIntersection(d.source, d.target).y2) / 2\n return `translate(${midX}, ${midY})`\n })\n }\n\n private calculateIntersection(source, target) {\n const dx = target.x - source.x\n const dy = target.y - source.y\n const distance = Math.sqrt(dx * dx + dy * dy)\n const ratio = (distance - this.options.nodeRadius) / distance\n\n const x1 = source.x + dx * (this.options.nodeRadius / distance)\n const y1 = source.y + dy * (this.options.nodeRadius / distance)\n const x2 = target.x - dx * (this.options.nodeRadius / distance)\n const y2 = target.y - dy * (this.options.nodeRadius / distance)\n\n return { x1, y1, x2, y2 }\n }\n\n private colors() {\n return [\n '#68bdf6', // light blue\n '#6dce9e', // green #1\n '#faafc2', // light pink\n '#f2baf6', // purple\n '#ff928c', // light red\n '#fcea7e', // light yellow\n '#ffc766', // light orange\n '#405f9e', // navy blue\n '#a5abb6', // dark gray\n '#78cecb', // green #2,\n '#b88cbb', // dark purple\n '#ced2d9', // light gray\n '#e84646', // dark red\n '#fa5f86', // dark pink\n '#ffab1a', // dark orange\n '#fcda19', // dark yellow\n '#797b80', // black\n '#c9d96f', // pistachio\n '#47991f', // green #3\n '#70edee', // turquoise\n '#ff75ea' // pink\n ]\n }\n\n updateWithGraphData(graphData: GraphData) {\n this.nodes = graphData.results[0].data[0].graph.nodes\n this.relationships = graphData.results[0].data[0].graph.relationships\n\n this.relationships.forEach(rel => {\n const sourceNode = this.nodes.find(node => node.id === rel.startNode)\n const targetNode = this.nodes.find(node => node.id === rel.endNode)\n\n if (!sourceNode || !targetNode) {\n console.warn(`Node not found for relationship: ${rel.id}`)\n return\n }\n\n rel.source = sourceNode\n rel.target = targetNode\n })\n\n this.updateNodesAndRelationships()\n }\n\n private updateNodesAndRelationships() {\n this.needZoomFit = true\n\n this.svgNodes.selectAll('.node').remove()\n this.svgRelationships.selectAll('.relationship').remove()\n this.svgRelationships.selectAll('.relationship-text').remove()\n\n this.appendNodesToGraph()\n this.appendRelationshipsToGraph()\n\n this.simulation.nodes(this.nodes)\n ;(this.simulation.force('link') as d3.ForceLink<Node, Relationship>).links(this.relationships)\n\n // 시뮬레이션을 강제로 재시작하여 레이아웃이 적절히 재정렬되도록 함\n this.simulation.alpha(1).restart()\n }\n\n private appendNodesToGraph() {\n const nodeEnter = this.svgNodes\n .selectAll('.node')\n .data(this.nodes, (d: any) => d.id)\n .enter()\n .append('g')\n .attr('class', d => {\n var highlight,\n i,\n classes = 'node',\n label = d.labels[0]\n\n if (d.icon) {\n classes += ' node-icon'\n }\n\n return classes\n })\n .on('click', (event, d) => {\n d.fx = d.fy = null\n\n if (typeof this.options.onNodeClick === 'function') {\n this.options.onNodeClick(d)\n }\n })\n .on('dblclick', (event, d) => {\n this.stickNode(event, d)\n\n if (typeof this.options.onNodeDoubleClick === 'function') {\n this.options.onNodeDoubleClick(d)\n }\n })\n .on('mouseenter', (event, d) => {\n event.target.dispatchEvent(\n new CustomEvent('node-mouseenter', {\n detail: d,\n bubbles: true\n })\n )\n })\n .on('mouseleave', (event, d) => {\n event.target.dispatchEvent(\n new CustomEvent('node-mouseleave', {\n detail: d,\n bubbles: true\n })\n )\n })\n .call(\n d3\n .drag()\n .on('start', this.dragStarted.bind(this))\n .on('drag', this.dragged.bind(this))\n .on('end', this.dragEnded.bind(this))\n )\n\n nodeEnter\n .append('circle')\n .attr('class', 'outline')\n .attr('r', this.options.nodeRadius)\n .style('fill', d => this.class2color(d.labels[0]))\n .style('stroke', d => this.class2darkenColor(d.labels[0]))\n .style('stroke-width', 2)\n\n nodeEnter\n .append('text')\n .attr('class', 'text icon')\n .attr('x', 0)\n .attr('y', 0)\n .attr('text-anchor', 'middle')\n .attr('dominant-baseline', 'central')\n .attr('font-family', 'Material Symbols Outlined')\n .attr('font-size', '24px')\n .attr('fill', '#000')\n .text(d => this.getNodeIcon(d))\n\n nodeEnter\n .append('text')\n .attr('dy', 40)\n .attr('text-anchor', 'middle')\n .text(d => d.properties.name || d.id)\n }\n\n stickNode(event: d3.event, d) {\n d.fx = event.x\n d.fy = event.y\n }\n\n private appendRelationshipsToGraph() {\n const relationshipEnter = this.svgRelationships\n .selectAll('.relationship')\n .data(\n this.relationships.filter(rel => rel.source && rel.target),\n d => d.id\n )\n .enter()\n .append('g')\n .attr('class', 'relationship-group')\n\n relationshipEnter\n .append('line')\n .attr('class', 'relationship')\n .style('stroke', this.options.relationshipColor)\n .style('stroke-width', 2)\n .attr('marker-end', 'url(#arrow)')\n\n relationshipEnter\n .append('text')\n .attr('class', 'relationship-text')\n .attr('fill', '#000000')\n .attr('font-size', '8px')\n .attr('pointer-events', 'none')\n .attr('text-anchor', 'middle')\n .text(d => d.type)\n }\n\n private getNodeIcon(d: Node): string {\n return d.icon || ''\n }\n\n private class2color(cls: string) {\n if (!this.options.classes2colors[cls]) {\n this.options.classes2colors[cls] = this.options.colors[this.options.numClasses % this.options.colors.length]\n this.options.numClasses++\n }\n return this.options.classes2colors[cls]\n }\n\n private class2darkenColor(cls: string) {\n return d3.rgb(this.class2color(cls)).darker(1)\n }\n\n private dragStarted(event: any, d: Node) {\n if (!event.active) this.simulation.alphaTarget(0.3).restart()\n d.fx = d.x\n d.fy = d.y\n }\n\n private dragged(event: any, d: Node) {\n d.fx = event.x\n d.fy = event.y\n }\n\n private dragEnded(event: any, d: Node) {\n if (!event.active) this.simulation.alphaTarget(0)\n d.fx = null\n d.fy = null\n }\n\n zoomFit() {\n var bounds = this.svg.node().getBBox(),\n parent = this.svg.node().parentElement.parentElement,\n fullWidth = parent.clientWidth,\n fullHeight = parent.clientHeight,\n width = bounds.width,\n height = bounds.height,\n midX = bounds.x + width / 2,\n midY = bounds.y + height / 2\n\n if (width === 0 || height === 0) {\n return // nothing to fit\n }\n\n this.svgScale = 0.85 / Math.max(width / fullWidth, height / fullHeight)\n this.svgTranslate = [fullWidth / 2 - this.svgScale * midX, fullHeight / 2 - this.svgScale * midY]\n\n this.svg.attr(\n 'transform',\n 'translate(' + this.svgTranslate[0] + ', ' + this.svgTranslate[1] + ') scale(' + this.svgScale + ')'\n )\n }\n\n size() {\n return {\n nodes: this.nodes.length,\n relationships: this.relationships.length\n }\n }\n}\n"]}
1
+ {"version":3,"file":"graph-viewer.js","sourceRoot":"","sources":["../../client/analysis/graph-viewer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,IAAI,CAAA;AAGxB,MAAM,OAAO,WAAW;IAetB,YAAY,SAAc,EAAE,QAAa;QAXjC,UAAK,GAAW,EAAE,CAAA;QAClB,kBAAa,GAAmB,EAAE,CAAA;QAClC,gBAAW,GAAG,IAAI,CAAA;QAUxB,IAAI,CAAC,OAAO,GAAG;YACb,SAAS,EAAE,CAAC;YACZ,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE;YACrB,SAAS,EAAE,SAAS;YACpB,SAAS,EAAE,IAAI;YACf,YAAY,EAAE,SAAS;YACvB,SAAS,EAAE,SAAS;YACpB,OAAO,EAAE,SAAS;YAClB,oBAAoB,EAAE,SAAS;YAC/B,UAAU,EAAE,EAAE;YACd,iBAAiB,EAAE,SAAS;YAC5B,OAAO,EAAE,KAAK;YACd,cAAc,EAAE,EAAE;YAClB,UAAU,EAAE,CAAC;YACb,GAAG,QAAQ;SACZ,CAAA;QACD,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;IACtB,CAAC;IAEO,IAAI,CAAC,QAAa;QACxB,cAAc;QACd,MAAM,YAAY,GAAG,EAAE;aACpB,MAAM,CAAC,QAAQ,CAAC;aAChB,MAAM,CAAC,KAAK,CAAC;aACb,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC;aACrB,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC;aACtB,IAAI,CAAC,OAAO,EAAE,cAAc,CAAC,CAAA;QAEhC,2BAA2B;QAC3B,MAAM,IAAI,GAAG,EAAE;aACZ,IAAI,EAAE;aACN,WAAW,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;aACtB,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE;YAClB,4CAA4C;YAC5C,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;QAC7C,CAAC,CAAC,CAAA;QAEJ,iBAAiB;QACjB,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAEvB,iBAAiB;QACjB,YAAY,CAAC,EAAE,CAAC,eAAe,EAAE,IAAI,CAAC,CAAA;QAEtC,uBAAuB;QACvB,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,KAAK,CAAC,EAAE;YAClC,KAAK,CAAC,cAAc,EAAE,CAAA;YACtB,IAAI,CAAC,OAAO,EAAE,CAAA;QAChB,CAAC,CAAC,CAAA;QAEF,sBAAsB;QACtB,IAAI,CAAC,GAAG,GAAG,YAAY,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,iBAAiB,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;QAEjH,gCAAgC;QAChC,IAAI,CAAC,YAAY,GAAG,YAAY,CAAA;QAChC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;QAEhB,uCAAuC;QACvC,IAAI,CAAC,GAAG;aACL,MAAM,CAAC,MAAM,CAAC;aACd,MAAM,CAAC,QAAQ,CAAC;aAChB,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC;aACnB,IAAI,CAAC,SAAS,EAAE,YAAY,CAAC;aAC7B,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC;aAChB,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;aACf,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;aACtB,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC;aACvB,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC;aACtB,MAAM,CAAC,MAAM,CAAC;aACd,IAAI,CAAC,GAAG,EAAE,gBAAgB,CAAC;aAC3B,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAA;QAE/C,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAA;QAC3D,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,eAAe,CAAC,CAAA;QAC3E,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,cAAc,EAAE,CAAA;QAEvC,IAAI,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,CAAC;YAC3B,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAA;QAClD,CAAC;IACH,CAAC;IAED,cAAc;QACZ,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,aAAa,CAAC,aAAa,CAAC,WAAW,GAAG,CAAC,CAAA;QACrE,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,aAAa,CAAC,aAAa,CAAC,YAAY,GAAG,CAAC,CAAA;QAEtE,IAAI,UAAU,GAAG,EAAE;aAChB,eAAe,EAAE;aACjB,KAAK,CACJ,SAAS,EACT,EAAE;aACC,YAAY,EAAE;aACd,MAAM,CAAC,CAAC,CAAC,EAAE;YACV,OAAO,IAAI,CAAC,OAAO,CAAC,YAAY,CAAA;QAClC,CAAC,CAAC;aACD,UAAU,CAAC,CAAC,CAAC,CACjB;aACA,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,aAAa,EAAE,CAAC;aACnC,KAAK,CACJ,MAAM,EACN,EAAE,CAAC,SAAS,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE;YACpB,OAAO,CAAC,CAAC,EAAE,CAAA;QACb,CAAC,CAAC,CACH;aACA,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;aACrC,EAAE,CAAC,MAAM,EAAE,GAAG,EAAE;YACf,IAAI,CAAC,IAAI,EAAE,CAAA;QACb,CAAC,CAAC;aACD,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE;YACd,6BAA6B;QAC/B,CAAC,CAAC,CAAA;QAEJ,OAAO,UAAU,CAAA;IACnB,CAAC;IAEO,IAAI;QACV,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAM,EAAE,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAA;QAE3F,IAAI,CAAC,gBAAgB;aAClB,SAAS,CAAC,eAAe,CAAC;aAC1B,IAAI,CAAC,IAAI,EAAE,CAAC,CAAM,EAAE,EAAE,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC;aACzE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAM,EAAE,EAAE,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC;aACzE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAM,EAAE,EAAE,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC;aACzE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAM,EAAE,EAAE,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAA;QAE5E,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,oBAAoB,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAM,EAAE,EAAE;YACjF,MAAM,IAAI,GACR,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAA;YAC7G,MAAM,IAAI,GACR,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAA;YAC7G,OAAO,aAAa,IAAI,KAAK,IAAI,GAAG,CAAA;QACtC,CAAC,CAAC,CAAA;IACJ,CAAC;IAEO,qBAAqB,CAAC,MAAM,EAAE,MAAM;QAC1C,MAAM,EAAE,GAAG,MAAM,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAA;QAC9B,MAAM,EAAE,GAAG,MAAM,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAA;QAC9B,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAA;QAC7C,MAAM,KAAK,GAAG,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,GAAG,QAAQ,CAAA;QAE7D,MAAM,EAAE,GAAG,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,GAAG,QAAQ,CAAC,CAAA;QAC/D,MAAM,EAAE,GAAG,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,GAAG,QAAQ,CAAC,CAAA;QAC/D,MAAM,EAAE,GAAG,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,GAAG,QAAQ,CAAC,CAAA;QAC/D,MAAM,EAAE,GAAG,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,GAAG,QAAQ,CAAC,CAAA;QAE/D,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAA;IAC3B,CAAC;IAEO,MAAM;QACZ,OAAO;YACL,SAAS,EAAE,aAAa;YACxB,SAAS,EAAE,WAAW;YACtB,SAAS,EAAE,aAAa;YACxB,SAAS,EAAE,SAAS;YACpB,SAAS,EAAE,YAAY;YACvB,SAAS,EAAE,eAAe;YAC1B,SAAS,EAAE,eAAe;YAC1B,SAAS,EAAE,YAAY;YACvB,SAAS,EAAE,YAAY;YACvB,SAAS,EAAE,YAAY;YACvB,SAAS,EAAE,cAAc;YACzB,SAAS,EAAE,aAAa;YACxB,SAAS,EAAE,WAAW;YACtB,SAAS,EAAE,YAAY;YACvB,SAAS,EAAE,cAAc;YACzB,SAAS,EAAE,cAAc;YACzB,SAAS,EAAE,QAAQ;YACnB,SAAS,EAAE,YAAY;YACvB,SAAS,EAAE,WAAW;YACtB,SAAS,EAAE,YAAY;YACvB,SAAS,CAAC,OAAO;SAClB,CAAA;IACH,CAAC;IAED,mBAAmB,CAAC,SAAoB;QACtC,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAA;QACrD,IAAI,CAAC,aAAa,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa,CAAA;QAErE,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YAC/B,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,GAAG,CAAC,SAAS,CAAC,CAAA;YACrE,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,GAAG,CAAC,OAAO,CAAC,CAAA;YAEnE,IAAI,CAAC,UAAU,IAAI,CAAC,UAAU,EAAE,CAAC;gBAC/B,OAAO,CAAC,IAAI,CAAC,oCAAoC,GAAG,CAAC,EAAE,EAAE,CAAC,CAAA;gBAC1D,OAAM;YACR,CAAC;YAED,GAAG,CAAC,MAAM,GAAG,UAAU,CAAA;YACvB,GAAG,CAAC,MAAM,GAAG,UAAU,CAAA;QACzB,CAAC,CAAC,CAAA;QAEF,IAAI,CAAC,2BAA2B,EAAE,CAAA;IACpC,CAAC;IAEO,2BAA2B;QACjC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAA;QAEvB,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,CAAA;QACzC,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,MAAM,EAAE,CAAA;QACzD,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,oBAAoB,CAAC,CAAC,MAAM,EAAE,CAAA;QAE9D,IAAI,CAAC,kBAAkB,EAAE,CAAA;QACzB,IAAI,CAAC,0BAA0B,EAAE,CAAA;QAEjC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAChC;QAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,MAAM,CAAsC,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;QAE9F,sCAAsC;QACtC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,EAAE,CAAA;IACpC,CAAC;IAEO,kBAAkB;QACxB,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ;aAC5B,SAAS,CAAC,OAAO,CAAC;aAClB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAM,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;aAClC,KAAK,EAAE;aACP,MAAM,CAAC,GAAG,CAAC;aACX,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,EAAE;YACjB,IAAI,SAAS,EACX,CAAC,EACD,OAAO,GAAG,MAAM,EAChB,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;YAErB,IAAI,CAAC,CAAC,IAAI,EAAE,CAAC;gBACX,OAAO,IAAI,YAAY,CAAA;YACzB,CAAC;YAED,OAAO,OAAO,CAAA;QAChB,CAAC,CAAC;aACD,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;YACxB,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,GAAG,IAAI,CAAA;YAElB,IAAI,OAAO,IAAI,CAAC,OAAO,CAAC,WAAW,KAAK,UAAU,EAAE,CAAC;gBACnD,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,CAAA;YAC7B,CAAC;QACH,CAAC,CAAC;aACD,EAAE,CAAC,UAAU,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;YAC3B,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;YAExB,IAAI,OAAO,IAAI,CAAC,OAAO,CAAC,iBAAiB,KAAK,UAAU,EAAE,CAAC;gBACzD,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAA;YACnC,CAAC;QACH,CAAC,CAAC;aACD,EAAE,CAAC,YAAY,EAAE,UAAqB,KAAU,EAAE,CAAM;YACvD,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,YAAY,EAAE,SAAS,CAAC,CAAA;YAC9C,KAAK,CAAC,MAAM,CAAC,aAAa,CACxB,IAAI,WAAW,CAAC,iBAAiB,EAAE;gBACjC,MAAM,EAAE,CAAC;gBACT,OAAO,EAAE,IAAI;aACd,CAAC,CACH,CAAA;QACH,CAAC,CAAC;aACD,EAAE,CAAC,YAAY,EAAE,UAAqB,KAAU,EAAE,CAAM;YACvD,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,YAAY,EAAE,OAAO,CAAC,CAAA;YAC5C,KAAK,CAAC,MAAM,CAAC,aAAa,CACxB,IAAI,WAAW,CAAC,iBAAiB,EAAE;gBACjC,MAAM,EAAE,CAAC;gBACT,OAAO,EAAE,IAAI;aACd,CAAC,CACH,CAAA;QACH,CAAC,CAAC;aACD,IAAI,CACH,EAAE;aACC,IAAI,EAAE;aACN,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;aACxC,EAAE,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;aACnC,EAAE,CAAC,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CACxC,CAAA;QAEH,SAAS;aACN,MAAM,CAAC,QAAQ,CAAC;aAChB,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC;aACxB,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC;aAClC,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;aACjD,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;aACzD,KAAK,CAAC,cAAc,EAAE,CAAC,CAAC,CAAA;QAE3B,SAAS;aACN,MAAM,CAAC,MAAM,CAAC;aACd,IAAI,CAAC,OAAO,EAAE,WAAW,CAAC;aAC1B,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;aACZ,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;aACZ,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC;aAC7B,IAAI,CAAC,mBAAmB,EAAE,SAAS,CAAC;aACpC,IAAI,CAAC,aAAa,EAAE,2BAA2B,CAAC;aAChD,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC;aACzB,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC;aACpB,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAA;QAEjC,SAAS;aACN,MAAM,CAAC,MAAM,CAAC;aACd,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC;aACd,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC;aAC7B,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,CAAC,CAAA;IACzC,CAAC;IAED,SAAS,CAAC,KAAe,EAAE,CAAC;QAC1B,CAAC,CAAC,EAAE,GAAG,KAAK,CAAC,CAAC,CAAA;QACd,CAAC,CAAC,EAAE,GAAG,KAAK,CAAC,CAAC,CAAA;IAChB,CAAC;IAEO,0BAA0B;QAChC,MAAM,iBAAiB,GAAG,IAAI,CAAC,gBAAgB;aAC5C,SAAS,CAAC,eAAe,CAAC;aAC1B,IAAI,CACH,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,MAAM,IAAI,GAAG,CAAC,MAAM,CAAC,EAC1D,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CACV;aACA,KAAK,EAAE;aACP,MAAM,CAAC,GAAG,CAAC;aACX,IAAI,CAAC,OAAO,EAAE,oBAAoB,CAAC,CAAA;QAEtC,iBAAiB;aACd,MAAM,CAAC,MAAM,CAAC;aACd,IAAI,CAAC,OAAO,EAAE,cAAc,CAAC;aAC7B,KAAK,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC;aAC/C,KAAK,CAAC,cAAc,EAAE,CAAC,CAAC;aACxB,IAAI,CAAC,YAAY,EAAE,aAAa,CAAC,CAAA;QAEpC,iBAAiB;aACd,MAAM,CAAC,MAAM,CAAC;aACd,IAAI,CAAC,OAAO,EAAE,mBAAmB,CAAC;aAClC,IAAI,CAAC,MAAM,EAAE,SAAS,CAAC;aACvB,IAAI,CAAC,WAAW,EAAE,KAAK,CAAC;aACxB,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC;aAC9B,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC;aAC7B,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAA;IACtB,CAAC;IAEO,WAAW,CAAC,CAAO;QACzB,OAAO,CAAC,CAAC,IAAI,IAAI,EAAE,CAAA;IACrB,CAAC;IAEO,WAAW,CAAC,GAAW;QAC7B,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,CAAC;YACtC,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;YAC5G,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,CAAA;QAC3B,CAAC;QACD,OAAO,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,GAAG,CAAC,CAAA;IACzC,CAAC;IAEO,iBAAiB,CAAC,GAAW;QACnC,OAAO,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;IAChD,CAAC;IAEO,WAAW,CAAC,KAAU,EAAE,CAAO;QACrC,IAAI,CAAC,KAAK,CAAC,MAAM;YAAE,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,CAAA;QAC7D,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAA;QACV,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAA;IACZ,CAAC;IAEO,OAAO,CAAC,KAAU,EAAE,CAAO;QACjC,CAAC,CAAC,EAAE,GAAG,KAAK,CAAC,CAAC,CAAA;QACd,CAAC,CAAC,EAAE,GAAG,KAAK,CAAC,CAAC,CAAA;IAChB,CAAC;IAEO,SAAS,CAAC,KAAU,EAAE,CAAO;QACnC,IAAI,CAAC,KAAK,CAAC,MAAM;YAAE,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC,CAAA;QACjD,CAAC,CAAC,EAAE,GAAG,IAAI,CAAA;QACX,CAAC,CAAC,EAAE,GAAG,IAAI,CAAA;IACb,CAAC;IAED,OAAO;QACL,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,YAAY;YAAE,OAAM;QAE3C,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,EAAE,OAAO,EAAE,CAAA;QACzC,MAAM,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA;QAExC,IAAI,CAAC,MAAM,IAAI,CAAC,OAAO;YAAE,OAAM;QAE/B,MAAM,IAAI,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAA;QAC5C,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAA;QAC5B,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,CAAA;QAE9B,IAAI,MAAM,CAAC,KAAK,KAAK,CAAC,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC;YAAE,OAAM;QAErD,MAAM,OAAO,GAAG,EAAE,CAAA;QAClB,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,SAAS,GAAG,OAAO,CAAC,GAAG,MAAM,CAAC,KAAK,EAAE,CAAC,UAAU,GAAG,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,IAAI,CAAA;QAE3G,MAAM,OAAO,GAAG,MAAM,CAAC,CAAC,GAAG,MAAM,CAAC,KAAK,GAAG,CAAC,CAAA;QAC3C,MAAM,OAAO,GAAG,MAAM,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,GAAG,CAAC,CAAA;QAE5C,MAAM,SAAS,GAAG,EAAE,CAAC,YAAY;aAC9B,SAAS,CAAC,SAAS,GAAG,CAAC,EAAE,UAAU,GAAG,CAAC,CAAC;aACxC,KAAK,CAAC,KAAK,CAAC;aACZ,SAAS,CAAC,CAAC,OAAO,EAAE,CAAC,OAAO,CAAC,CAAA;QAEhC,4CAA4C;QAC5C,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,CAAA;IACnF,CAAC;IAED,IAAI;QACF,OAAO;YACL,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM;YACxB,aAAa,EAAE,IAAI,CAAC,aAAa,CAAC,MAAM;SACzC,CAAA;IACH,CAAC;CACF","sourcesContent":["import * as d3 from 'd3'\nimport { Node, Relationship, GraphData } from './graph-data.js'\n\nexport class GraphViewer {\n private svg: any\n private svgNodes: any\n private svgRelationships: any\n private nodes: Node[] = []\n private relationships: Relationship[] = []\n private needZoomFit = true\n private options: any\n private svgScale\n private svgTranslate\n private svgContainer: any\n private zoom: any\n\n public simulation: any\n\n constructor(_selector: any, _options: any) {\n this.options = {\n arrowSize: 4,\n colors: this.colors(),\n highlight: undefined,\n infoPanel: true,\n minCollision: undefined,\n graphData: undefined,\n dataUrl: undefined,\n nodeOutlineFillColor: undefined,\n nodeRadius: 25,\n relationshipColor: '#a5abb6',\n zoomFit: false,\n classes2colors: {},\n numClasses: 0,\n ..._options\n }\n this.init(_selector)\n }\n\n private init(selector: any) {\n // SVG 컨테이너 생성\n const svgContainer = d3\n .select(selector)\n .append('svg')\n .attr('width', '100%')\n .attr('height', '100%')\n .attr('class', 'graph-viewer')\n\n // 줌 동작 정의 (마우스 중심 줌 자동 지원)\n const zoom = d3\n .zoom()\n .scaleExtent([0.1, 10])\n .on('zoom', event => {\n // D3가 자동으로 계산한 transform을 그대로 사용 (마우스 중심 줌)\n this.svg.attr('transform', event.transform)\n })\n\n // SVG 컨테이너에 줌 적용\n svgContainer.call(zoom)\n\n // 기본 더블클릭 줌 비활성화\n svgContainer.on('dblclick.zoom', null)\n\n // 배경 더블클릭 시 zoomFit 실행\n svgContainer.on('dblclick', event => {\n event.preventDefault()\n this.zoomFit()\n })\n\n // 실제 그래프 내용을 담을 그룹 생성\n this.svg = svgContainer.append('g').attr('class', 'graph-container').attr('width', '100%').attr('height', '100%')\n\n // SVG 컨테이너 참조 저장 (zoomFit에서 사용)\n this.svgContainer = svgContainer\n this.zoom = zoom\n\n // Define arrow markers for graph links\n this.svg\n .append('defs')\n .append('marker')\n .attr('id', 'arrow')\n .attr('viewBox', '0 -5 10 10')\n .attr('refX', 10)\n .attr('refY', 0)\n .attr('markerWidth', 6)\n .attr('markerHeight', 6)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M0,-5L10,0L0,5')\n .attr('fill', this.options.relationshipColor)\n\n this.svgNodes = this.svg.append('g').attr('class', 'nodes')\n this.svgRelationships = this.svg.append('g').attr('class', 'relationships')\n this.simulation = this.initSimulation()\n\n if (this.options.graphData) {\n this.updateWithGraphData(this.options.graphData)\n }\n }\n\n initSimulation() {\n const x = this.svg.node().parentElement.parentElement.clientWidth / 2\n const y = this.svg.node().parentElement.parentElement.clientHeight / 2\n\n var simulation = d3\n .forceSimulation()\n .force(\n 'collide',\n d3\n .forceCollide()\n .radius(d => {\n return this.options.minCollision\n })\n .iterations(2)\n )\n .force('charge', d3.forceManyBody())\n .force(\n 'link',\n d3.forceLink().id(d => {\n return d.id\n })\n )\n .force('center', d3.forceCenter(x, y))\n .on('tick', () => {\n this.tick()\n })\n .on('end', () => {\n // 자동 zoomFit 제거 - 더블클릭으로만 실행\n })\n\n return simulation\n }\n\n private tick() {\n this.svgNodes.selectAll('.node').attr('transform', (d: any) => `translate(${d.x}, ${d.y})`)\n\n this.svgRelationships\n .selectAll('.relationship')\n .attr('x1', (d: any) => this.calculateIntersection(d.source, d.target).x1)\n .attr('y1', (d: any) => this.calculateIntersection(d.source, d.target).y1)\n .attr('x2', (d: any) => this.calculateIntersection(d.source, d.target).x2)\n .attr('y2', (d: any) => this.calculateIntersection(d.source, d.target).y2)\n\n this.svgRelationships.selectAll('.relationship-text').attr('transform', (d: any) => {\n const midX =\n (this.calculateIntersection(d.source, d.target).x1 + this.calculateIntersection(d.source, d.target).x2) / 2\n const midY =\n (this.calculateIntersection(d.source, d.target).y1 + this.calculateIntersection(d.source, d.target).y2) / 2\n return `translate(${midX}, ${midY})`\n })\n }\n\n private calculateIntersection(source, target) {\n const dx = target.x - source.x\n const dy = target.y - source.y\n const distance = Math.sqrt(dx * dx + dy * dy)\n const ratio = (distance - this.options.nodeRadius) / distance\n\n const x1 = source.x + dx * (this.options.nodeRadius / distance)\n const y1 = source.y + dy * (this.options.nodeRadius / distance)\n const x2 = target.x - dx * (this.options.nodeRadius / distance)\n const y2 = target.y - dy * (this.options.nodeRadius / distance)\n\n return { x1, y1, x2, y2 }\n }\n\n private colors() {\n return [\n '#68bdf6', // light blue\n '#6dce9e', // green #1\n '#faafc2', // light pink\n '#f2baf6', // purple\n '#ff928c', // light red\n '#fcea7e', // light yellow\n '#ffc766', // light orange\n '#405f9e', // navy blue\n '#a5abb6', // dark gray\n '#78cecb', // green #2,\n '#b88cbb', // dark purple\n '#ced2d9', // light gray\n '#e84646', // dark red\n '#fa5f86', // dark pink\n '#ffab1a', // dark orange\n '#fcda19', // dark yellow\n '#797b80', // black\n '#c9d96f', // pistachio\n '#47991f', // green #3\n '#70edee', // turquoise\n '#ff75ea' // pink\n ]\n }\n\n updateWithGraphData(graphData: GraphData) {\n this.nodes = graphData.results[0].data[0].graph.nodes\n this.relationships = graphData.results[0].data[0].graph.relationships\n\n this.relationships.forEach(rel => {\n const sourceNode = this.nodes.find(node => node.id === rel.startNode)\n const targetNode = this.nodes.find(node => node.id === rel.endNode)\n\n if (!sourceNode || !targetNode) {\n console.warn(`Node not found for relationship: ${rel.id}`)\n return\n }\n\n rel.source = sourceNode\n rel.target = targetNode\n })\n\n this.updateNodesAndRelationships()\n }\n\n private updateNodesAndRelationships() {\n this.needZoomFit = true\n\n this.svgNodes.selectAll('.node').remove()\n this.svgRelationships.selectAll('.relationship').remove()\n this.svgRelationships.selectAll('.relationship-text').remove()\n\n this.appendNodesToGraph()\n this.appendRelationshipsToGraph()\n\n this.simulation.nodes(this.nodes)\n ;(this.simulation.force('link') as d3.ForceLink<Node, Relationship>).links(this.relationships)\n\n // 시뮬레이션을 강제로 재시작하여 레이아웃이 적절히 재정렬되도록 함\n this.simulation.alpha(1).restart()\n }\n\n private appendNodesToGraph() {\n const nodeEnter = this.svgNodes\n .selectAll('.node')\n .data(this.nodes, (d: any) => d.id)\n .enter()\n .append('g')\n .attr('class', d => {\n var highlight,\n i,\n classes = 'node',\n label = d.labels[0]\n\n if (d.icon) {\n classes += ' node-icon'\n }\n\n return classes\n })\n .on('click', (event, d) => {\n d.fx = d.fy = null\n\n if (typeof this.options.onNodeClick === 'function') {\n this.options.onNodeClick(d)\n }\n })\n .on('dblclick', (event, d) => {\n this.stickNode(event, d)\n\n if (typeof this.options.onNodeDoubleClick === 'function') {\n this.options.onNodeDoubleClick(d)\n }\n })\n .on('mouseenter', function (this: any, event: any, d: any) {\n d3.select(this).style('background', '#f0f0f0')\n event.target.dispatchEvent(\n new CustomEvent('node-mouseenter', {\n detail: d,\n bubbles: true\n })\n )\n })\n .on('mouseleave', function (this: any, event: any, d: any) {\n d3.select(this).style('background', 'white')\n event.target.dispatchEvent(\n new CustomEvent('node-mouseleave', {\n detail: d,\n bubbles: true\n })\n )\n })\n .call(\n d3\n .drag()\n .on('start', this.dragStarted.bind(this))\n .on('drag', this.dragged.bind(this))\n .on('end', this.dragEnded.bind(this))\n )\n\n nodeEnter\n .append('circle')\n .attr('class', 'outline')\n .attr('r', this.options.nodeRadius)\n .style('fill', d => this.class2color(d.labels[0]))\n .style('stroke', d => this.class2darkenColor(d.labels[0]))\n .style('stroke-width', 2)\n\n nodeEnter\n .append('text')\n .attr('class', 'text icon')\n .attr('x', 0)\n .attr('y', 0)\n .attr('text-anchor', 'middle')\n .attr('dominant-baseline', 'central')\n .attr('font-family', 'Material Symbols Outlined')\n .attr('font-size', '24px')\n .attr('fill', '#000')\n .text(d => this.getNodeIcon(d))\n\n nodeEnter\n .append('text')\n .attr('dy', 40)\n .attr('text-anchor', 'middle')\n .text(d => d.properties.name || d.id)\n }\n\n stickNode(event: d3.event, d) {\n d.fx = event.x\n d.fy = event.y\n }\n\n private appendRelationshipsToGraph() {\n const relationshipEnter = this.svgRelationships\n .selectAll('.relationship')\n .data(\n this.relationships.filter(rel => rel.source && rel.target),\n d => d.id\n )\n .enter()\n .append('g')\n .attr('class', 'relationship-group')\n\n relationshipEnter\n .append('line')\n .attr('class', 'relationship')\n .style('stroke', this.options.relationshipColor)\n .style('stroke-width', 2)\n .attr('marker-end', 'url(#arrow)')\n\n relationshipEnter\n .append('text')\n .attr('class', 'relationship-text')\n .attr('fill', '#000000')\n .attr('font-size', '8px')\n .attr('pointer-events', 'none')\n .attr('text-anchor', 'middle')\n .text(d => d.type)\n }\n\n private getNodeIcon(d: Node): string {\n return d.icon || ''\n }\n\n private class2color(cls: string) {\n if (!this.options.classes2colors[cls]) {\n this.options.classes2colors[cls] = this.options.colors[this.options.numClasses % this.options.colors.length]\n this.options.numClasses++\n }\n return this.options.classes2colors[cls]\n }\n\n private class2darkenColor(cls: string) {\n return d3.rgb(this.class2color(cls)).darker(1)\n }\n\n private dragStarted(event: any, d: Node) {\n if (!event.active) this.simulation.alphaTarget(0.3).restart()\n d.fx = d.x\n d.fy = d.y\n }\n\n private dragged(event: any, d: Node) {\n d.fx = event.x\n d.fy = event.y\n }\n\n private dragEnded(event: any, d: Node) {\n if (!event.active) this.simulation.alphaTarget(0)\n d.fx = null\n d.fy = null\n }\n\n zoomFit() {\n if (!this.svg || !this.svgContainer) return\n\n const bounds = this.svg.node()?.getBBox()\n const svgNode = this.svgContainer.node()\n\n if (!bounds || !svgNode) return\n\n const rect = svgNode.getBoundingClientRect()\n const fullWidth = rect.width\n const fullHeight = rect.height\n\n if (bounds.width === 0 || bounds.height === 0) return\n\n const padding = 50\n const scale = Math.min((fullWidth - padding) / bounds.width, (fullHeight - padding) / bounds.height) * 0.85\n\n const centerX = bounds.x + bounds.width / 2\n const centerY = bounds.y + bounds.height / 2\n\n const transform = d3.zoomIdentity\n .translate(fullWidth / 2, fullHeight / 2)\n .scale(scale)\n .translate(-centerX, -centerY)\n\n // D3의 줌 상태를 직접 업데이트하여 이후 휠스크롤이 올바르게 작동하도록 함\n this.svgContainer.transition().duration(750).call(this.zoom.transform, transform)\n }\n\n size() {\n return {\n nodes: this.nodes.length,\n relationships: this.relationships.length\n }\n }\n}\n"]}