-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
146 lines (132 loc) · 6.1 KB
/
Copy pathindex.html
File metadata and controls
146 lines (132 loc) · 6.1 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>FOLIO API Dependencies</title>
<link rel="stylesheet" href="/src/css/style.css">
</head>
<body>
<h1>FOLIO API Dependencies</h1>
<div id="tabs">
<button data-tab="table" class="tab-button active">📋 Table View</button>
<button data-tab="api-usage-count" class="tab-button">🔢 API Usage Count</button>
<button data-tab="api" class="tab-button">🔎 API Usage View</button>
<button data-tab="module-consumers" class="tab-button">🌐 Module Consumers</button>
<button data-tab="apps" class="tab-button">📦 Apps</button>
<button data-tab="app-dependencies" class="tab-button">🔗 App Dependencies</button>
</div>
<div id="view-table" class="tab-view active">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1em;">
<div style="position: relative; max-width: 400px;">
<input id="table-search" type="text" placeholder="Search module or API…" autocomplete="off" />
<button id="table-clear" style="
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
border: none;
background: transparent;
font-size: 16px;
cursor: pointer;
display: none;
" title="Clear">×</button>
<div id="table-dropdown" class="dropdown"></div>
</div>
<button id="export-table-csv" class="export-csv-btn" title="Export table data to CSV">
📊 Export CSV
</button>
</div>
<div id="table-match-count" style="margin-top: 0.5em; font-size: 14px;"></div>
<table id="dependency-table">
<thead>
<tr>
<th data-sort="module">Module</th>
<th data-sort="type">Type</th>
<th data-sort="api">API</th>
<th data-sort="version">Version(s)</th>
<th data-sort="apps">Part of App</th>
<th>Action</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div id="view-api" class="tab-view">
<div style="position: relative; max-width: 400px;">
<input id="api-select" type="text" placeholder="Start typing API name…" autocomplete="off"/>
<div id="api-dropdown" class="dropdown"></div>
</div>
<div id="api-details" style="margin-top: 1em;"></div>
</div>
<div id="view-api-usage-count" class="tab-view">
<h3>API Usage Counts</h3>
<div id="api-usage-count"></div>
</div>
<div id="view-module-consumers" class="tab-view">
<h3>Module Consumers Graph</h3>
<div style="position: relative; max-width: 400px;">
<input id="module-consumers-input" type="text" placeholder="Type module name…" autocomplete="off" />
<div id="module-consumers-dropdown" class="dropdown"></div>
</div>
<div id="module-consumers-graph" style="width: 100%; height: 600px;"></div>
</div>
<div id="view-apps" class="tab-view">
<h3>FOLIO Applications</h3>
<div style="position: relative; max-width: 400px; margin-bottom: 1em;">
<input id="app-search" type="text" placeholder="Search apps…" autocomplete="off" />
<button id="app-clear" style="
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
border: none;
background: transparent;
font-size: 16px;
cursor: pointer;
display: none;
" title="Clear">×</button>
</div>
<div id="apps-container"></div>
</div>
<div id="view-app-dependencies" class="tab-view">
<h3>App Dependencies Graph</h3>
<div class="app-dependencies-controls" style="margin: 15px 0; display: flex; gap: 10px; flex-wrap: wrap; align-items: center;">
<button id="app-deps-fit" class="graph-btn">Fit to View</button>
<button id="app-deps-reset" class="graph-btn">Reset Graph</button>
<button id="app-deps-layout-hierarchy" class="graph-btn">Hierarchical Layout</button>
<button id="app-deps-layout-circle" class="graph-btn">Circle Layout</button>
<button id="app-deps-export-png" class="graph-btn">Export PNG</button>
<label style="display: flex; align-items: center; gap: 5px; margin-left: auto;">
<input type="checkbox" id="app-deps-show-details" checked />
<span style="font-size: 14px;">Show module details on hover</span>
</label>
</div>
<div id="app-dependencies-graph" style="width: 100%; height: 700px; border: 1px solid #ddd; background: #fafafa;"></div>
<div id="app-dependencies-legend" style="margin-top: 15px; padding: 15px; background: #f9f9f9; border: 1px solid #ddd; border-radius: 4px;">
<h4 style="margin-top: 0;">Legend</h4>
<div style="display: flex; gap: 30px; flex-wrap: wrap;">
<div style="display: flex; align-items: center; gap: 8px;">
<div style="width: 20px; height: 20px; background: #2980b9; border-radius: 3px;"></div>
<span>Base platform apps</span>
</div>
<div style="display: flex; align-items: center; gap: 8px;">
<div style="width: 20px; height: 20px; background: #27ae60; border-radius: 3px;"></div>
<span>Complete platform apps</span>
</div>
<div style="display: flex; align-items: center; gap: 8px;">
<div style="width: 20px; height: 20px; background: #e74c3c; border-radius: 3px;"></div>
<span>Edge/Integration apps</span>
</div>
<div style="display: flex; align-items: center; gap: 8px;">
<div style="width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 15px solid #666;"></div>
<span>Dependency direction</span>
</div>
</div>
<p style="margin-top: 10px; font-size: 13px; color: #666;">
<strong>Tip:</strong> Click on a node to highlight its dependencies. Double-click to focus. Scroll to zoom. Drag to pan.
</p>
</div>
</div>
<script type="module" src="/src/app.ts"></script>
</body>
</html>