@things-factory/integration-ui 7.0.33 → 7.0.35

package/client/analysis/node.ts

@@ -0,0 +1,73 @@
+import { Node } from './graph-data'
+import * as d3 from 'd3'
+import { class2color, class2darkenColor } from './utils'
+
+export function appendNodeToGraph(
+  svgNodes: d3.Selection<SVGGElement, unknown, HTMLElement, any>, // 타입 지정
+  nodes: Node[],
+  options: any
+) {
+  const nodeEnter = svgNodes
+    .selectAll<SVGGElement, Node>('.node')
+    .data(nodes, d => d.id)
+    .enter()
+    .append('g')
+    .attr('class', d => {
+      let classes = 'node'
+      if (d.icon) classes += ' node-icon'
+      if (d.image) classes += ' node-image'
+      if (options.highlight) {
+        options.highlight.forEach((highlight: any) => {
+          if (d.labels[0] === highlight.class && d.properties[highlight.property] === highlight.value) {
+            classes += ' node-highlighted'
+          }
+        })
+      }
+      return classes
+    })
+    .call(
+      d3
+        .drag<SVGGElement, Node>() // 제네릭 타입 지정
+        .on('start', (event, d) => dragStarted(event, d, options.simulation))
+        .on('drag', (event, d) => dragged(event, d))
+        .on('end', (event, d) => dragEnded(event, d, options.simulation))
+    )
+
+  nodeEnter
+    .append('circle')
+    .attr('r', options.nodeRadius)
+    .style('fill', d => class2color(options.classes2colors, d.labels[0], options.colors, options.numClasses))
+    .style('stroke', d =>
+      class2darkenColor(class2color(options.classes2colors, d.labels[0], options.colors, options.numClasses))
+    )
+    .style('stroke-width', 2)
+
+  nodeEnter
+    .append('text')
+    .attr('dy', 4)
+    .attr('text-anchor', 'middle')
+    .text(d => d.properties.name || d.id)
+
+  return nodeEnter
+}
+
+function dragStarted(
+  event: d3.D3DragEvent<SVGGElement, Node, any>,
+  d: Node,
+  simulation: d3.Simulation<Node, undefined>
+) {
+  if (!event.active) simulation.alphaTarget(0.3).restart()
+  d.fx = d.x
+  d.fy = d.y
+}
+
+function dragged(event: d3.D3DragEvent<SVGGElement, Node, any>, d: Node) {
+  d.fx = event.x
+  d.fy = event.y
+}
+
+function dragEnded(event: d3.D3DragEvent<SVGGElement, Node, any>, d: Node, simulation: d3.Simulation<Node, undefined>) {
+  if (!event.active) simulation.alphaTarget(0)
+  d.fx = null
+  d.fy = null
+}

package/client/analysis/relationship.ts

@@ -0,0 +1,19 @@
+import { Relationship } from './graph-data'
+import * as d3 from 'd3'
+
+export function appendRelationshipToGraph(
+  svgRelationships: d3.Selection<SVGGElement, unknown, HTMLElement, any>, // 타입 지정
+  relationships: Relationship[],
+  options: any
+) {
+  const relationshipEnter = svgRelationships
+    .selectAll<SVGLineElement, Relationship>('.relationship')
+    .data(relationships, d => d.id)
+    .enter()
+    .append('line')
+    .attr('class', 'relationship')
+    .style('stroke', '#aaa')
+    .style('stroke-width', 2)
+
+  return relationshipEnter
+}

package/client/analysis/utils.ts

@@ -0,0 +1,41 @@
+import * as d3 from 'd3'
+
+export function class2color(
+  classes2colors: Record<string, string>,
+  cls: string,
+  colors: string[],
+  numClasses: number
+): string {
+  if (!classes2colors[cls]) {
+    classes2colors[cls] = colors[numClasses % colors.length]
+  }
+  return classes2colors[cls]
+}
+
+export function class2darkenColor(color: string): string {
+  return d3.rgb(color).darker(1).toString()
+}
+
+export function unitaryVector(source: any, target: any, newLength?: number) {
+  const length =
+    Math.sqrt(Math.pow(target.x - source.x, 2) + Math.pow(target.y - source.y, 2)) / Math.sqrt(newLength || 1)
+  return {
+    x: (target.x - source.x) / length,
+    y: (target.y - source.y) / length
+  }
+}
+
+export function unitaryNormalVector(source: any, target: any, newLength?: number) {
+  const vector = unitaryVector(source, target, newLength)
+  return rotate({ x: 0, y: 0 }, vector, 90)
+}
+
+export function rotate(center: { x: number; y: number }, point: { x: number; y: number }, angle: number) {
+  const radians = (Math.PI / 180) * angle
+  const cos = Math.cos(radians)
+  const sin = Math.sin(radians)
+  return {
+    x: cos * (point.x - center.x) + sin * (point.y - center.y) + center.x,
+    y: cos * (point.y - center.y) - sin * (point.x - center.x) + center.y
+  }
+}

package/client/pages/integration-analysis.ts

@@ -1,13 +1,14 @@
 import '../analysis/graph-viewer'
 
 import gql from 'graphql-tag'
-import { css, html } from 'lit'
+import { css, html, nothing } from 'lit'
 import { customElement, query, state } from 'lit/decorators.js'
 
 import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { PageView } from '@operato/shell'
 import { ScrollbarStyles } from '@operato/styles'
+import { GraphData, Node, Relationship } from 'analysis/graph-data'
 import { GraphViewer } from '../analysis/graph-viewer'
 import { GraphViewerStyles } from '../analysis/graph-viewer-style'
 
@@ -18,6 +19,8 @@ export class IntegrationAnalysis extends localize(i18next)(PageView) {
     ScrollbarStyles,
     css`
       :host {
+        position: relative;
+
         display: flex;
         flex-direction: column;
 
@@ -31,98 +34,107 @@ export class IntegrationAnalysis extends localize(i18next)(PageView) {
         margin: 0;
         padding: 0;
       }
+
+      .graph-info {
+        position: absolute;
+        top: 10px;
+        left: 10px;
+        opacity: 0.8;
+      }
     `
   ]
 
-  @state() analysis: any
-  @state() graphViewer?: GraphViewer
+  @state() private graphViewer?: GraphViewer
+  @state() private analysis?: { nodes: Node[]; relationships: Relationship[] }
+  @state() private info?: { cls: string; property: string; value: string } | null
 
   @query('[graph-container]') container!: HTMLDivElement
+  @query('[node-info]') nodeInfo!: HTMLAnchorElement
 
   get context() {
     return {
       title: i18next.t('text.integration analysis'),
+      search: {
+        handler: search => this.onSearch(search)
+      },
       help: 'integration/ui/integration-analysis'
     }
   }
 
   render() {
-    return html`<div graph-container></div>`
+    const info = this.info
+
+    return html`
+      <div
+        graph-container
+        @node-mouseenter=${(e: CustomEvent) => console.log(e.detail)}
+        @node-mouseleave=${(e: CustomEvent) => console.log(e.detail)}
+      ></div>
+      <div class="graph-info">
+        ${info
+          ? html`<a href="#" class="${info.cls}" node-info><strong>${info.property}</strong>${info.value}</a>`
+          : nothing}
+      </div>
+    `
   }
 
   updated(changes) {
     if (changes.has('analysis')) {
-      this.graphViewer = new GraphViewer(this.container, {
-        highlight: [
-          {
-            class: 'Connection',
-            property: 'missing',
-            value: true
-          },
-          {
-            class: 'Scenario',
-            property: 'missing',
-            value: true
-          },
-          {
-            class: 'Tag',
-            property: 'missing',
-            value: true
-          }
-        ],
-        icons: {
-          Connection: 'gear',
-          Scenario: 'birthday-cake',
-          Tag: 'paw'
-        },
-        // images: {
-        //   Address: 'img/twemoji/1f3e0.svg',
-        //   BirthDate: 'img/twemoji/1f5d3.svg',
-        //   Cookie: 'img/twemoji/1f36a.svg',
-        //   CreditCard: 'img/twemoji/1f4b3.svg',
-        //   Device: 'img/twemoji/1f4bb.svg',
-        //   Email: 'img/twemoji/2709.svg',
-        //   Git: 'img/twemoji/1f5c3.svg',
-        //   Github: 'img/twemoji/1f5c4.svg',
-        //   icons: 'img/twemoji/1f38f.svg',
-        //   Ip: 'img/twemoji/1f4cd.svg',
-        //   Issues: 'img/twemoji/1f4a9.svg',
-        //   Language: 'img/twemoji/1f1f1-1f1f7.svg',
-        //   Options: 'img/twemoji/2699.svg',
-        //   Password: 'img/twemoji/1f511.svg',
-        //   'Project|name|d3': 'img/twemoji/32-20e3.svg',
-        //   User: 'img/twemoji/1f600.svg'
-        // },
-        minCollision: 60,
-        graphData: {
-          results: [
+      if (!this.graphViewer) {
+        this.graphViewer = new GraphViewer(this.container, {
+          highlight: [
+            {
+              class: 'Connection',
+              property: 'missing',
+              value: true
+            },
+            {
+              class: 'Scenario',
+              property: 'missing',
+              value: true
+            },
             {
-              columns: ['Connection', 'Scenario', 'Tag'],
-              data: [
-                {
-                  graph: this.analysis
-                }
-              ]
+              class: 'Tag',
+              property: 'missing',
+              value: true
             }
           ],
+          minCollision: 60,
+          graphData: {
+            results: [
+              {
+                columns: [],
+                data: [
+                  {
+                    graph: this.analysis
+                  }
+                ]
+              }
+            ],
+            errors: []
+          },
+          nodeRadius: 25,
+          onNodeDoubleClick: node => {
+            switch (node.id) {
+              case '25':
+                // Google
+                window.open(node.properties.url, '_blank')
+                break
+              default:
+                break
+            }
+          },
+          zoomFit: true
+        })
+      } else {
+        this.graphViewer.updateWithGraphData({
+          results: [{ columns: [], data: [{ graph: this.analysis! }] }],
           errors: []
-        },
-        nodeRadius: 25,
-        onNodeDoubleClick: node => {
-          switch (node.id) {
-            case '25':
-              // Google
-              window.open(node.properties.url, '_blank')
-              break
-            default:
-              var maxNodes = 5,
-                data = this.graphViewer!.randomD3Data(node, maxNodes)
-              this.graphViewer!.updateWithD3Data(data)
-              break
-          }
-        },
-        zoomFit: true
-      })
+        })
+      }
+    }
+
+    if (changes.has('info') && this.info) {
     }
   }
 
@@ -148,4 +160,81 @@ export class IntegrationAnalysis extends localize(i18next)(PageView) {
 
     this.analysis = response.data.integrationAnalysis
   }
+
+  async onSearch(search: string) {
+    if (!this.graphViewer) {
+      return
+    }
+
+    if (!search) {
+      this.graphViewer.updateWithGraphData({
+        results: [{ columns: [], data: [{ graph: this.analysis! }] }],
+        errors: []
+      })
+      return
+    }
+
+    const { nodes = [], relationships = [] } = this.analysis || {}
+
+    // 검색어와 일치하는 노드를 필터링
+    const matchingNodes = nodes.filter(node => {
+      return node.properties.name && node.properties.name.toLowerCase().includes(search.toLowerCase())
+    })
+
+    if (matchingNodes.length === 0) {
+      this.graphViewer.updateWithGraphData({
+        results: [{ columns: [], data: [{ graph: { nodes: [], relationships: [] } }] }],
+        errors: []
+      })
+      return
+    }
+
+    // 1차로 연결된 노드와 관계를 찾기 위해 관련된 노드 ID를 추적
+    const relatedNodeIds = new Set<string>()
+    const filteredNodes = [] as Node[]
+    const filteredRelationships = [] as Relationship[]
+
+    matchingNodes.forEach(node => {
+      relatedNodeIds.add(node.id)
+      filteredNodes.push(node)
+
+      relationships.forEach(relationship => {
+        const { source, target } = relationship || {}
+        if (source!.id === node.id || target!.id === node.id) {
+          relatedNodeIds.add(source!.id)
+          relatedNodeIds.add(target!.id)
+          filteredRelationships.push(relationship!)
+        }
+      })
+    })
+
+    // 관련된 노드 추가
+    relatedNodeIds.forEach(nodeId => {
+      const node = nodes.find(n => n.id === nodeId)
+      if (node) {
+        filteredNodes.push(node)
+      }
+    })
+
+    // 새로운 GraphData 구성
+    const filteredGraphData: GraphData = {
+      results: [
+        {
+          columns: [],
+          data: [
+            {
+              graph: {
+                nodes: filteredNodes,
+                relationships: filteredRelationships
+              }
+            }
+          ]
+        }
+      ],
+      errors: []
+    }
+
+    // GraphViewer 업데이트
+    this.graphViewer.updateWithGraphData(filteredGraphData)
+  }
 }

package/dist-client/analysis/graph-data.d.ts

@@ -0,0 +1,36 @@
+export interface GraphData {
+    results: Array<{
+        columns: string[];
+        data: Array<{
+            graph: {
+                nodes: Node[];
+                relationships: Relationship[];
+            };
+        }>;
+    }>;
+    errors: any[];
+}
+export interface Node {
+    id: string;
+    labels: string[];
+    properties: {
+        [key: string]: any;
+    };
+    x?: number;
+    y?: number;
+    fx?: number | null;
+    fy?: number | null;
+    icon?: string;
+}
+export interface Relationship {
+    id: string;
+    type: string;
+    startNode: string;
+    endNode: string;
+    source?: Node;
+    target?: Node;
+    properties: {
+        [key: string]: any;
+    };
+    linknum?: number;
+}

package/dist-client/analysis/graph-data.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=graph-data.js.map

package/dist-client/analysis/graph-data.js.map

@@ -0,0 +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-old.d.ts

@@ -0,0 +1,110 @@
+export declare class GraphViewer {
+    simulation: any;
+    private container;
+    private info;
+    private node;
+    private nodes;
+    private relationship;
+    private relationshipOutline;
+    private relationshipOverlay;
+    private relationshipText;
+    private relationships;
+    private selector;
+    private svg;
+    private svgNodes;
+    private svgRelationships;
+    private svgScale;
+    private svgTranslate;
+    private classes2colors;
+    private justLoaded;
+    private numClasses;
+    private options;
+    constructor(_selector: any, _options: any);
+    appendGraph(container: any): void;
+    appendImageToNode(node: any): any;
+    appendInfoPanel(container: any): any;
+    appendInfoElement(cls: any, isNode: any, property: any, value?: any): void;
+    appendInfoElementClass(cls: any, node: any): void;
+    appendInfoElementProperty(cls: any, property: any, value: any): void;
+    appendInfoElementRelationship(cls: any, relationship: any): void;
+    appendNode(): any;
+    appendNodeToGraph(): any;
+    appendOutlineToNode(node: any): any;
+    appendBoxToNode(node: any): any;
+    appendRingToNode(node: any): any;
+    appendTextToNode(node: any): any;
+    appendRelationship(): any;
+    appendOutlineToRelationship(r: any): any;
+    appendOverlayToRelationship(r: any): any;
+    appendTextToRelationship(r: any): any;
+    appendRelationshipToGraph(): {
+        outline: any;
+        overlay: any;
+        relationship: any;
+        text: any;
+    };
+    class2color(cls: any): any;
+    class2darkenColor(cls: any): any;
+    clearInfo(): void;
+    color(): any;
+    colors(): string[];
+    contains(array: any, id: any): boolean;
+    defaultColor(): any;
+    defaultDarkenColor(): any;
+    dragEnded(event: any, d: any): void;
+    dragged(event: any, d: any): void;
+    dragStarted(event: any, d: any): void;
+    extend(obj1: any, obj2: any): {};
+    icon(d: any): any;
+    image(d: any): any;
+    init(_selector: any, _options: any): void;
+    initSimulation(): any;
+    loadGraphData(): void;
+    loadGraphDataFromUrl(dataUrl: any): void;
+    merge(target: any, source: any): void;
+    graphDataToD3Data(data: any): {
+        nodes: any[];
+        relationships: any[];
+    };
+    randomD3Data(d: any, maxNodesToGenerate: any): {
+        nodes: any[];
+        relationships: any[];
+    };
+    randomLabel(): string;
+    rotate(cx: any, cy: any, x: any, y: any, angle: any): {
+        x: any;
+        y: any;
+    };
+    rotatePoint(c: any, p: any, angle: any): {
+        x: any;
+        y: any;
+    };
+    rotation(source: any, target: any): number;
+    size(): {
+        nodes: any;
+        relationships: any;
+    };
+    stickNode(event: any, d: any): void;
+    tick(): void;
+    tickNodes(): void;
+    tickRelationships(): void;
+    tickRelationshipsOutlines(): void;
+    tickRelationshipsOverlays(): void;
+    tickRelationshipsTexts(): void;
+    toString(d: any): any;
+    unitaryNormalVector(source: any, target: any, newLength?: any): {
+        x: any;
+        y: any;
+    };
+    unitaryVector(source: any, target: any, newLength?: any): {
+        x: number;
+        y: number;
+    };
+    updateWithD3Data(d3Data: any): void;
+    updateWithGraphData(graphData: any): void;
+    updateInfo(d: any): void;
+    updateNodes(n: any): void;
+    updateNodesAndRelationships(n: any, r: any): void;
+    updateRelationships(r: any): void;
+    zoomFit(transitionDuration: any): void;
+}