JenniferSoft Design Docs

Appearance

RelationTree ​

MSA 분석을 위한 연관된 트랜잭션들을 트리 구조로 시각화하는 컴포넌트입니다.

개요 ​

RelationTree는 트랜잭션 간의 관계를 계층적 트리 구조로 표현하며, 각 노드는 트랜잭션 또는 애플리케이션을 나타냅니다. 사용자는 드래그, 줌, 노드 선택 등의 인터랙션을 통해 복잡한 MSA 구조를 효과적으로 분석할 수 있습니다.

Props 인터페이스 ​

typescript
interface Props {
    width: number; // 컴포넌트 전체 너비
    height: number; // 컴포넌트 전체 높이
    screenWidth: number; // 뷰포트 너비
    screenHeight: number; // 뷰포트 높이
    children: RelationTreeData[]; // 트리 데이터
    globalScale?: number; // 전역 스케일 (기본값: 1)
    selectedId?: string; // 선택된 노드 ID
    focusedId?: string; // 포커스된 노드 ID
    useResizer?: boolean; // 리사이저 사용 여부 (기본값: false)
    useKeyboard?: boolean; // 키보드 사용 여부 (기본값: false)
    useSimpleTooltip?: boolean; // 간단한 툴팁 사용 여부 (기본값: false)
}

interface RelationTreeData extends ApiRelationData {
    rootId?: string;
    type: 'TRANSACTION' | 'APPLICATION';
    id: string;
    name: string;
    children?: RelationTreeData[];
    startTime: number;
    relation: ApiTransactionRelationData | ApiApplicationRelationData;
}

이벤트 ​

  • select: 노드 선택 시 발생 - (nodeId: string) => void
  • focus: 노드 포커스 시 발생 - (nodeId: string) => void

기본 사용법 ​

vue
<template>
    <RelationTree
        :width="800"
        :height="600"
        :screen-width="800"
        :screen-height="600"
        :children="relationData"
        :use-resizer="true"
        :global-scale="0.7"
        @select="onNodeSelect"
        @focus="onNodeFocus"
    />
</template>

<script setup lang="ts">
import { RelationTree } from '@jennifersoft/apm-components';
import type { RelationTreeData } from '@jennifersoft/apm-components';

const relationData: RelationTreeData[] = [
    // 관계 데이터...
];

const onNodeSelect = (nodeId: string) => {
    console.log('Selected node:', nodeId);
};

const onNodeFocus = (nodeId: string) => {
    console.log('Focused node:', nodeId);
};
</script>

인터랙티브 데모 ​

<div class="control-group">
  <label>
    Global Scale: 0.7
    <input
      type="range"
      v-model="globalScale"
      min="0.3"
      max="1.5"
      step="0.1"
    />
  </label>
</div>

<div class="control-group" v-if="selectedNodeId">
  <span class="selected-info">Selected: </span>
</div>

주요 기능 ​

1. 스케일 컨트롤 ​

  • 마우스 휠: 확대/축소
  • 스케일 컨트롤러: 우상단 버튼으로 정밀 조정
  • globalScale prop: 초기 스케일 설정

2. 드래그 앤 팬 ​

  • 마우스 드래그: 뷰포트 이동
  • 자동 센터링: 루트 노드 기준 자동 정렬

3. 노드 인터랙션 ​

  • 호버: 노드 정보 툴팁 표시
  • 클릭: 노드 선택 (select 이벤트 발생)
  • 포커스: 키보드 네비게이션 지원

4. 툴팁 모드 ​

  • 기본 툴팁: 상세한 메트릭 정보 표시
  • 간단한 툴팁: 핵심 정보만 표시

고급 사용법 ​

키보드 네비게이션 활성화 ​

vue
<template>
    <RelationTree
        :use-keyboard="true"
        @focus="onNodeFocus"
        v-bind="otherProps"
    />
</template>

특정 노드 미리 선택 ​

vue
<template>
    <RelationTree
        :selected-id="'target-node-id'"
        :focused-id="'focused-node-id'"
        v-bind="otherProps"
    />
</template>

커스텀 크기 설정 ​

vue
<script setup>
import { SizeInRelationTree } from '@jennifersoft/apm-components';

const CUSTOM_WIDTH = 1200;
const CUSTOM_HEIGHT = 800;

const adjustedWidth = computed(
    () => CUSTOM_WIDTH - SizeInRelationTree.MARGIN * 2
);
const adjustedHeight = computed(
    () => CUSTOM_HEIGHT - SizeInRelationTree.MARGIN * 2
);
</script>

데이터 구조 ​

관계 트리 데이터는 다음과 같은 구조를 가져야 합니다:

typescript
interface RelationTreeData {
    type: 'TRANSACTION' | 'APPLICATION';
    id: string;
    name: string;
    startTime: number;
    children?: RelationTreeData[];
    relation: {
        domainId: number;
        domainName: string;
        instId: number;
        instanceName: string;
        elapsedTime: number;
        sqlTime: number;
        externalCallTime: number;
        methodTime: number;
        errorTypeOrZero: number;
        stacked: boolean;
        async: boolean;
    };
}

성능 최적화 ​

  1. 대용량 데이터: 가상화를 통한 렌더링 최적화
  2. 스로틀링: 드래그/줌 이벤트 스로틀링 적용
  3. 메모리 관리: 컴포넌트 언마운트 시 리소스 정리

의존성 ​

  • Vue 3 Composition API
  • D3.js (hierarchy, tree, shape)
  • @vueuse/core (throttle, timeout 유틸리티)
  • @jennifersoft/apm-apis (타입 정의)