1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181 | Type: graph-model
Purpose: Demonstrate how different dependency types (business service, technical service, application, infrastructure) form layers in an IT management graph, showing cross-layer dependencies
Node types:
1. Business Service (:BusinessService - pink circles, large)
- Layer: Top (customer-facing)
- Properties: name, revenue_impact, SLA_tier
- Examples: "Online Banking", "E-Commerce", "Customer Portal"
2. Technical Service (:TechnicalService - purple hexagons, medium)
- Layer: Mid-upper (internal services)
- Properties: name, api_version, usage_count
- Examples: "Auth Service", "Payment Gateway", "Notification Hub"
3. Application (:Application - light blue rounded squares, medium)
- Layer: Mid-lower (running software)
- Properties: name, version, language
- Examples: "Web Frontend", "API Server", "Batch Processor"
4. Database (:Database - orange cylinders, medium)
- Layer: Mid-lower (data tier)
- Properties: name, db_type, size_gb
- Examples: "CustomerDB", "OrderDB", "SessionStore"
5. Server (:Server - gray rectangles, small)
- Layer: Bottom (infrastructure)
- Properties: hostname, cpu_cores, ram_gb
- Examples: "web-prod-01", "db-prod-02"
6. Datacenter (:Datacenter - green triangles, small)
- Layer: Foundation (physical)
- Properties: name, region, tier
- Examples: "DC-East-1", "DC-West-1"
Sample graph structure (30 nodes in hierarchical layers):
Layer 1 - Business Services (3 nodes):
- "Online Banking"
- "E-Commerce Platform"
- "Customer Portal"
Layer 2 - Technical Services (4 nodes):
- "Auth Service"
- "Payment Gateway"
- "Notification Hub"
- "Analytics Engine"
Layer 3 - Applications (8 nodes):
- "Web Frontend"
- "Mobile API"
- "Admin Dashboard"
- "Background Worker"
- "API Gateway"
- "Search Service"
- "Recommendation Engine"
- "Reporting Service"
Layer 4 - Databases (6 nodes):
- "CustomerDB"
- "OrderDB"
- "ProductDB"
- "SessionStore"
- "AnalyticsDB"
- "ConfigDB"
Layer 5 - Servers (6 nodes):
- "web-prod-01"
- "web-prod-02"
- "api-prod-01"
- "db-prod-01"
- "db-prod-02"
- "cache-prod-01"
Layer 6 - Datacenters (3 nodes):
- "DC-East-1"
- "DC-West-1"
- "DC-Central-1"
Relationships (cross-layer connections):
- Business Service → SUPPORTS → Technical Service
- Business Service → SUPPORTS → Application
- Technical Service → DEPENDS_ON → Application
- Application → DEPENDS_ON → Application
- Application → DEPENDS_ON → Database
- Application → HOSTED_ON → Server
- Database → HOSTED_ON → Server
- Server → LOCATED_IN → Datacenter
Layout algorithm: Hierarchical layout with strict layering
- Layer 1 (Business Services) at top
- Layer 2 (Technical Services) below
- Layer 3 (Applications) middle
- Layer 4 (Databases) mid-lower
- Layer 5 (Servers) near bottom
- Layer 6 (Datacenters) at foundation
- Edges flow downward showing dependency direction
Interactive features:
- Layer toggle buttons:
- [ ] Show Business Service Layer
- [x] Show Technical Service Layer (default on)
- [x] Show Application Layer (default on)
- [x] Show Database Layer (default on)
- [x] Show Infrastructure Layer (default on)
- [x] Show Datacenter Layer (default on)
- Dependency type filter:
- Checkbox: "Service Dependencies" (SUPPORTS relationships)
- Checkbox: "Application Dependencies" (DEPENDS_ON between apps)
- Checkbox: "Infrastructure Dependencies" (HOSTED_ON, LOCATED_IN)
- Checkbox: "Show all relationships"
- Click node: Highlight complete dependency stack
- If business service clicked: Show all layers supporting it down to datacenters
- If application clicked: Show upstream services and downstream infrastructure
- If server clicked: Show all applications hosted and upstream services
- Use gradient highlighting (bright to dim) showing dependency flow
- Button: "Show Critical Path"
- Identifies longest end-to-end path from business service to datacenter
- Highlights in yellow/orange with hop count badges
- Shows total latency if available in properties
- Button: "Blast Radius from Layer"
- Dropdown: Select layer (Business, Technical, Application, Infrastructure)
- Click any node in that layer
- Highlights all upstream dependencies (what it needs)
- Highlights all downstream dependents (what needs it)
- Shows count in each layer
- Hover node: Show layer information
- Display: "Layer: Application (3 of 6)"
- Show all properties
- Show dependency count: "3 upstream, 5 downstream"
Statistics panel (bottom):
- Nodes per layer: Business(3), Technical(4), Application(8), Database(6), Server(6), DC(3)
- Total relationships: X
- Average dependencies per node: Y
- Longest dependency chain: Z hops
- Cross-datacenter dependencies: W (potential latency issues)
Visual styling:
- Layer background shading: Alternating light/dark backgrounds for each layer
- Layer separators: Horizontal dashed lines between layers
- Node colors: By type (pink/purple/blue/orange/gray/green as specified)
- Node sizes: Larger at higher layers (business services biggest, DCs smallest)
- Edge colors:
- Pink: Service dependencies (SUPPORTS)
- Blue: Application dependencies (DEPENDS_ON)
- Gray: Infrastructure dependencies (HOSTED_ON, LOCATED_IN)
- Edge thickness: Thicker for higher criticality
Educational callouts:
- "Notice the layered architecture: Business → Technical → Application → Infrastructure"
- "Dependencies flow downward: Upper layers depend on lower layers"
- "Failures propagate upward: Infrastructure failures affect all higher layers"
- "Each layer has different stakeholders and concerns"
- "Click any node to see its complete dependency stack across all layers!"
Legend (top-right):
- Layer indicators with colors
- Node types per layer
- Relationship types with colors
- Criticality indicators
Canvas size: 1200x900px with bottom panel (150px) for statistics
Color scheme:
- Pink: Business services (customer value)
- Purple: Technical services (internal APIs)
- Light blue: Applications (running software)
- Orange: Databases (data tier)
- Gray: Servers (compute)
- Green: Datacenters (physical foundation)
- Edge colors: Pink (service), Blue (application), Gray (infrastructure)
Implementation: vis-network JavaScript library with hierarchical layout enforcing layers, layer filtering, cross-layer traversal highlighting, interactive exploration with re-centering
|