@ryanstark24/sfgraph-web 1.1.0
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.
- package/README.md +57 -0
- package/dist/__tests__/search-bounds.test.d.ts +2 -0
- package/dist/__tests__/search-bounds.test.d.ts.map +1 -0
- package/dist/__tests__/search-bounds.test.js +45 -0
- package/dist/__tests__/search-bounds.test.js.map +1 -0
- package/dist/api.d.ts +74 -0
- package/dist/api.d.ts.map +1 -0
- package/dist/api.js +355 -0
- package/dist/api.js.map +1 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -0
- package/dist/public/app.js +1001 -0
- package/dist/public/index.html +224 -0
- package/dist/public/styles.css +1063 -0
- package/dist/server.d.ts +17 -0
- package/dist/server.d.ts.map +1 -0
- package/dist/server.js +179 -0
- package/dist/server.js.map +1 -0
- package/package.json +47 -0
|
@@ -0,0 +1,224 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
6
|
+
<title>sfgraph · org explorer</title>
|
|
7
|
+
<link
|
|
8
|
+
rel="preconnect"
|
|
9
|
+
href="https://fonts.googleapis.com"
|
|
10
|
+
/>
|
|
11
|
+
<link
|
|
12
|
+
rel="preconnect"
|
|
13
|
+
href="https://fonts.gstatic.com"
|
|
14
|
+
crossorigin
|
|
15
|
+
/>
|
|
16
|
+
<link
|
|
17
|
+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
|
|
18
|
+
rel="stylesheet"
|
|
19
|
+
/>
|
|
20
|
+
<link rel="stylesheet" href="/styles.css" />
|
|
21
|
+
</head>
|
|
22
|
+
<body>
|
|
23
|
+
<!-- ambient backdrop: animated gradient blobs + grain -->
|
|
24
|
+
<div class="ambient" aria-hidden="true">
|
|
25
|
+
<div class="blob blob-a"></div>
|
|
26
|
+
<div class="blob blob-b"></div>
|
|
27
|
+
<div class="blob blob-c"></div>
|
|
28
|
+
<div class="grain"></div>
|
|
29
|
+
</div>
|
|
30
|
+
|
|
31
|
+
<!-- top bar -->
|
|
32
|
+
<header class="topbar glass">
|
|
33
|
+
<div class="brand">
|
|
34
|
+
<div class="logo-mark">
|
|
35
|
+
<span class="logo-glyph">sfg</span>
|
|
36
|
+
<span class="logo-pulse"></span>
|
|
37
|
+
</div>
|
|
38
|
+
<div class="brand-text">
|
|
39
|
+
<span class="brand-name">sfgraph</span>
|
|
40
|
+
<span class="brand-sub">explorer</span>
|
|
41
|
+
</div>
|
|
42
|
+
</div>
|
|
43
|
+
|
|
44
|
+
<nav class="tab-pill" role="tablist">
|
|
45
|
+
<button class="tab active" data-tab="trace">Trace</button>
|
|
46
|
+
<button class="tab" data-tab="overview">Overview</button>
|
|
47
|
+
<button class="tab" data-tab="schema">Schema</button>
|
|
48
|
+
<span class="tab-glow" id="tabGlow"></span>
|
|
49
|
+
</nav>
|
|
50
|
+
|
|
51
|
+
<div class="org-picker">
|
|
52
|
+
<label for="orgSel">ORG</label>
|
|
53
|
+
<div class="select-wrap">
|
|
54
|
+
<select id="orgSel">
|
|
55
|
+
<option value="">— pick an org —</option>
|
|
56
|
+
</select>
|
|
57
|
+
<svg class="chev" viewBox="0 0 12 12" aria-hidden="true">
|
|
58
|
+
<path d="M2.5 4.5l3.5 3.5 3.5-3.5" stroke="currentColor" stroke-width="1.4" fill="none" stroke-linecap="round" />
|
|
59
|
+
</svg>
|
|
60
|
+
</div>
|
|
61
|
+
<span class="org-meta" id="orgMeta"></span>
|
|
62
|
+
</div>
|
|
63
|
+
</header>
|
|
64
|
+
|
|
65
|
+
<!-- drawer toggle — sibling of drawer so it stays visible when collapsed.
|
|
66
|
+
Position is animated to follow the drawer's right edge when open,
|
|
67
|
+
then snap to the viewport left edge when closed. -->
|
|
68
|
+
<button class="drawer-toggle" id="drawerToggle" aria-label="toggle controls">
|
|
69
|
+
<svg class="ic-collapse" viewBox="0 0 16 16">
|
|
70
|
+
<path d="M10 4l-4 4 4 4" stroke="currentColor" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
|
71
|
+
</svg>
|
|
72
|
+
<svg class="ic-expand" viewBox="0 0 16 16">
|
|
73
|
+
<path d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
|
74
|
+
</svg>
|
|
75
|
+
</button>
|
|
76
|
+
|
|
77
|
+
<!-- side drawer with controls -->
|
|
78
|
+
<aside class="drawer glass" id="drawer">
|
|
79
|
+
<!-- TRACE -->
|
|
80
|
+
<section class="ctrl-panel active" data-ctrl="trace">
|
|
81
|
+
<div class="ctrl-head">
|
|
82
|
+
<h3>Trace</h3>
|
|
83
|
+
<p>Search any node and explore its neighbourhood.</p>
|
|
84
|
+
</div>
|
|
85
|
+
<div class="field">
|
|
86
|
+
<label>Qualified name</label>
|
|
87
|
+
<div class="search-wrap">
|
|
88
|
+
<input id="searchBox" type="search" placeholder="e.g. ApexClass:Account…" autocomplete="off" spellcheck="false" />
|
|
89
|
+
<kbd>↵</kbd>
|
|
90
|
+
</div>
|
|
91
|
+
<ul id="autocomplete" class="autocomplete"></ul>
|
|
92
|
+
</div>
|
|
93
|
+
<div class="field">
|
|
94
|
+
<label>Depth</label>
|
|
95
|
+
<div class="pill-group" id="depthGroup">
|
|
96
|
+
<button data-depth="1">1</button>
|
|
97
|
+
<button class="active" data-depth="2">2</button>
|
|
98
|
+
<button data-depth="3">3</button>
|
|
99
|
+
</div>
|
|
100
|
+
</div>
|
|
101
|
+
<div class="field">
|
|
102
|
+
<label>Relations</label>
|
|
103
|
+
<details class="multi-select">
|
|
104
|
+
<summary><span id="relCount">all</span> selected</summary>
|
|
105
|
+
<div id="relList" class="checklist"></div>
|
|
106
|
+
</details>
|
|
107
|
+
</div>
|
|
108
|
+
<button class="cta" id="traceGo">
|
|
109
|
+
<span>Render</span>
|
|
110
|
+
<svg viewBox="0 0 14 14"><path d="M3 7h8M7 3l4 4-4 4" stroke="currentColor" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
111
|
+
</button>
|
|
112
|
+
<p class="hint" id="traceHint"></p>
|
|
113
|
+
</section>
|
|
114
|
+
|
|
115
|
+
<!-- OVERVIEW -->
|
|
116
|
+
<section class="ctrl-panel" data-ctrl="overview">
|
|
117
|
+
<div class="ctrl-head">
|
|
118
|
+
<h3>Overview</h3>
|
|
119
|
+
<p>Render the entire org or filter by node type.</p>
|
|
120
|
+
</div>
|
|
121
|
+
<div class="field">
|
|
122
|
+
<label>Whole graph</label>
|
|
123
|
+
<button class="cta" id="fullGo">
|
|
124
|
+
<span>Render entire org</span>
|
|
125
|
+
<svg viewBox="0 0 14 14"><circle cx="7" cy="7" r="5.5" stroke="currentColor" stroke-width="1.4" fill="none"/><circle cx="7" cy="7" r="1.6" fill="currentColor"/></svg>
|
|
126
|
+
</button>
|
|
127
|
+
<p class="hint" id="fullHint"></p>
|
|
128
|
+
</div>
|
|
129
|
+
<div class="divider"></div>
|
|
130
|
+
<div class="field">
|
|
131
|
+
<label>Or filter by labels</label>
|
|
132
|
+
<div id="labelList" class="checklist labels"></div>
|
|
133
|
+
</div>
|
|
134
|
+
<div class="field">
|
|
135
|
+
<label>Node limit</label>
|
|
136
|
+
<input id="overviewLimit" type="number" min="100" max="15000" step="100" value="1500" />
|
|
137
|
+
</div>
|
|
138
|
+
<button class="cta secondary" id="overviewGo">
|
|
139
|
+
<span>Render filtered</span>
|
|
140
|
+
<svg viewBox="0 0 14 14"><path d="M3 7h8M7 3l4 4-4 4" stroke="currentColor" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
141
|
+
</button>
|
|
142
|
+
<p class="hint" id="overviewHint"></p>
|
|
143
|
+
</section>
|
|
144
|
+
|
|
145
|
+
<!-- SCHEMA -->
|
|
146
|
+
<section class="ctrl-panel" data-ctrl="schema">
|
|
147
|
+
<div class="ctrl-head">
|
|
148
|
+
<h3>Schema</h3>
|
|
149
|
+
<p>SObjects and every layer that touches them.</p>
|
|
150
|
+
</div>
|
|
151
|
+
<div class="field">
|
|
152
|
+
<label>Node limit</label>
|
|
153
|
+
<input id="schemaLimit" type="number" min="100" max="5000" step="100" value="2500" />
|
|
154
|
+
</div>
|
|
155
|
+
<button class="cta" id="schemaGo">
|
|
156
|
+
<span>Render</span>
|
|
157
|
+
<svg viewBox="0 0 14 14"><path d="M3 7h8M7 3l4 4-4 4" stroke="currentColor" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
158
|
+
</button>
|
|
159
|
+
<p class="hint" id="schemaHint"></p>
|
|
160
|
+
</section>
|
|
161
|
+
|
|
162
|
+
<!-- Legend (always visible) -->
|
|
163
|
+
<section class="legend">
|
|
164
|
+
<h4>Legend</h4>
|
|
165
|
+
<div id="legendList"></div>
|
|
166
|
+
</section>
|
|
167
|
+
</aside>
|
|
168
|
+
|
|
169
|
+
<!-- canvas -->
|
|
170
|
+
<main class="canvas-host">
|
|
171
|
+
<div id="graph"></div>
|
|
172
|
+
<div class="canvas-hint" id="canvasHint">
|
|
173
|
+
<div class="hint-inner">
|
|
174
|
+
<svg viewBox="0 0 48 48" aria-hidden="true">
|
|
175
|
+
<circle cx="24" cy="24" r="22" stroke="currentColor" stroke-width="1.2" fill="none" opacity="0.4"/>
|
|
176
|
+
<circle cx="24" cy="24" r="3" fill="currentColor"/>
|
|
177
|
+
</svg>
|
|
178
|
+
<div>
|
|
179
|
+
<strong>pick an org & render</strong>
|
|
180
|
+
<span>drag to orbit · scroll to zoom · click any node</span>
|
|
181
|
+
</div>
|
|
182
|
+
</div>
|
|
183
|
+
</div>
|
|
184
|
+
</main>
|
|
185
|
+
|
|
186
|
+
<!-- stats chip (bottom-left of canvas) -->
|
|
187
|
+
<div class="stats-chip glass" id="statsChip">
|
|
188
|
+
<span><b id="statNodes">0</b><em>nodes</em></span>
|
|
189
|
+
<span class="sep"></span>
|
|
190
|
+
<span><b id="statEdges">0</b><em>edges</em></span>
|
|
191
|
+
<span class="badge hidden" id="truncBadge">truncated</span>
|
|
192
|
+
</div>
|
|
193
|
+
|
|
194
|
+
<!-- inspector — has both collapse (chevron) and close (×). Collapse
|
|
195
|
+
shrinks to a slim rail showing just the label pill so context stays
|
|
196
|
+
visible without eating screen real estate; close fully hides. -->
|
|
197
|
+
<aside class="inspector glass hidden" id="inspector">
|
|
198
|
+
<div class="insp-controls">
|
|
199
|
+
<button class="icon-btn" id="inspectorCollapse" aria-label="collapse">
|
|
200
|
+
<svg viewBox="0 0 14 14" class="ic-coll">
|
|
201
|
+
<path d="M9 4l-4 3 4 3" stroke="currentColor" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
|
202
|
+
</svg>
|
|
203
|
+
<svg viewBox="0 0 14 14" class="ic-exp">
|
|
204
|
+
<path d="M5 4l4 3-4 3" stroke="currentColor" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
|
205
|
+
</svg>
|
|
206
|
+
</button>
|
|
207
|
+
<button class="icon-btn close" id="inspectorClose" aria-label="close">
|
|
208
|
+
<svg viewBox="0 0 14 14"><path d="M3 3l8 8M11 3l-8 8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
|
|
209
|
+
</button>
|
|
210
|
+
</div>
|
|
211
|
+
<div class="insp-head">
|
|
212
|
+
<span class="insp-pill" id="inspLabel">—</span>
|
|
213
|
+
<h2 id="inspName">—</h2>
|
|
214
|
+
</div>
|
|
215
|
+
<div class="insp-body" id="inspEdges"></div>
|
|
216
|
+
<button class="cta secondary" id="recenter">
|
|
217
|
+
<svg viewBox="0 0 14 14"><circle cx="7" cy="7" r="3" stroke="currentColor" stroke-width="1.4" fill="none"/><circle cx="7" cy="7" r="6" stroke="currentColor" stroke-width="1.4" fill="none" opacity="0.4"/></svg>
|
|
218
|
+
<span>re-center trace here</span>
|
|
219
|
+
</button>
|
|
220
|
+
</aside>
|
|
221
|
+
|
|
222
|
+
<script type="module" src="/app.js"></script>
|
|
223
|
+
</body>
|
|
224
|
+
</html>
|