Skip to content

Commit ae7a734

Browse files
Aayush AgrawalAayush Agrawal
Aayush Agrawal
authored and
Aayush Agrawal
committed
knowledge graph
1 parent 8fbd1ef commit ae7a734

5 files changed

Lines changed: 1819 additions & 0 deletions

File tree

‎_data/navigation.yml‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ wiki:
88
url: /about/
99
- title: Wiki Index
1010
url: /wiki/
11+
- title: Knowledge Graph
12+
url: /wiki/knowledge-graph/
1113
- title: Contribute
1214
url: /docs/index/
1315
- title: Software Bootcamp
@@ -471,6 +473,8 @@ wiki:
471473
main:
472474
- title: Wiki
473475
url: /wiki/
476+
- title: Knowledge Graph
477+
url: /wiki/knowledge-graph/
474478
- title: About
475479
url: /about/
476480
- title: Contribute

‎_test_knowledge_graph.html‎

Lines changed: 254 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,254 @@
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>Knowledge Graph - Test</title>
7+
<style>
8+
* { margin: 0; padding: 0; box-sizing: border-box; }
9+
body { background: #0a0e17; overflow: hidden; }
10+
11+
:root {
12+
--kg-bg: #0a0e17;
13+
--kg-surface: rgba(22,27,34,0.92);
14+
--kg-border: #1e2733;
15+
--kg-text: #c9d1d9;
16+
--kg-text-muted: #8b949e;
17+
--kg-accent: #58a6ff;
18+
}
19+
20+
#kg-wrapper {
21+
position: relative;
22+
width: 100vw;
23+
height: 100vh;
24+
background: var(--kg-bg);
25+
overflow: hidden;
26+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
27+
}
28+
29+
#kg-wrapper::before {
30+
content: '';
31+
position: absolute;
32+
top: 0; left: 0; right: 0; bottom: 0;
33+
background:
34+
radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.15), transparent),
35+
radial-gradient(1px 1px at 30% 70%, rgba(255,255,255,0.1), transparent),
36+
radial-gradient(1px 1px at 50% 10%, rgba(255,255,255,0.12), transparent),
37+
radial-gradient(1px 1px at 70% 50%, rgba(255,255,255,0.08), transparent),
38+
radial-gradient(1px 1px at 90% 80%, rgba(255,255,255,0.14), transparent),
39+
radial-gradient(1px 1px at 15% 90%, rgba(255,255,255,0.1), transparent),
40+
radial-gradient(1px 1px at 85% 30%, rgba(255,255,255,0.11), transparent),
41+
radial-gradient(600px 600px at 50% 50%, rgba(30,50,80,0.15), transparent);
42+
pointer-events: none;
43+
z-index: 0;
44+
}
45+
46+
#kg-toolbar {
47+
position: absolute;
48+
top: 0; left: 0; right: 0;
49+
z-index: 10;
50+
display: flex;
51+
align-items: center;
52+
gap: 12px;
53+
padding: 12px 20px;
54+
background: linear-gradient(180deg, rgba(10,14,23,0.95) 0%, rgba(10,14,23,0.7) 100%);
55+
backdrop-filter: blur(12px);
56+
border-bottom: 1px solid var(--kg-border);
57+
flex-wrap: wrap;
58+
}
59+
60+
#kg-toolbar-title {
61+
font-size: 16px;
62+
font-weight: 700;
63+
color: #fff;
64+
letter-spacing: 0.5px;
65+
margin-right: 8px;
66+
white-space: nowrap;
67+
}
68+
#kg-toolbar-title span { color: var(--kg-accent); }
69+
70+
.kg-search-wrap { position: relative; flex: 0 0 240px; }
71+
#kg-search {
72+
width: 100%;
73+
padding: 7px 32px 7px 12px;
74+
background: rgba(255,255,255,0.06);
75+
border: 1px solid var(--kg-border);
76+
border-radius: 8px;
77+
color: var(--kg-text);
78+
font-size: 13px;
79+
outline: none;
80+
transition: border-color 0.2s, background 0.2s;
81+
}
82+
#kg-search:focus { border-color: var(--kg-accent); background: rgba(255,255,255,0.09); }
83+
#kg-search::placeholder { color: var(--kg-text-muted); }
84+
#kg-search-clear {
85+
display: none; position: absolute; right: 8px; top: 50%;
86+
transform: translateY(-50%);
87+
background: none; border: none; color: var(--kg-text-muted);
88+
cursor: pointer; font-size: 16px; line-height: 1; padding: 2px;
89+
}
90+
#kg-search-clear:hover { color: var(--kg-text); }
91+
92+
#kg-search-no-results {
93+
display: none;
94+
position: absolute;
95+
top: 50%; left: 50%;
96+
transform: translate(-50%, -50%);
97+
z-index: 12;
98+
color: var(--kg-text-muted);
99+
font-size: 14px;
100+
text-align: center;
101+
pointer-events: none;
102+
}
103+
104+
#kg-filter-row {
105+
display: flex; align-items: center; gap: 6px; flex: 1;
106+
overflow-x: auto; scrollbar-width: none;
107+
mask-image: linear-gradient(to right, black 0, black calc(100% - 20px), transparent 100%);
108+
-webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 20px), transparent 100%);
109+
}
110+
#kg-filter-row::-webkit-scrollbar { display: none; }
111+
#kg-filters { display: flex; gap: 4px; flex-wrap: nowrap; padding-right: 12px; }
112+
.kg-filter-pill {
113+
padding: 3px 10px; border-radius: 12px; font-size: 10px; font-weight: 600;
114+
cursor: pointer; border: 1.5px solid var(--pill-color);
115+
background: transparent; color: var(--pill-color);
116+
white-space: nowrap; transition: all 0.2s;
117+
text-transform: uppercase; letter-spacing: 0.3px;
118+
}
119+
.kg-filter-pill.active { background: var(--pill-color); color: #0a0e17; }
120+
.kg-filter-pill:hover { opacity: 0.85; }
121+
.kg-filter-pill:focus-visible { outline: 2px solid var(--kg-accent); outline-offset: 2px; }
122+
123+
#kg-reset-filters {
124+
padding: 3px 10px; border-radius: 8px; font-size: 10px; font-weight: 600;
125+
cursor: pointer; border: 1px solid var(--kg-border);
126+
background: rgba(255,255,255,0.05); color: var(--kg-text-muted);
127+
white-space: nowrap; transition: all 0.2s; flex-shrink: 0;
128+
}
129+
#kg-reset-filters:hover { background: rgba(255,255,255,0.1); color: var(--kg-text); }
130+
131+
#kg-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; }
132+
#kg-svg { display: block; touch-action: none; }
133+
.kg-node:focus { outline: none; }
134+
.kg-node:focus-visible { outline: 2px solid var(--kg-accent); outline-offset: 2px; }
135+
136+
#kg-tooltip {
137+
display: none; position: fixed; z-index: 20;
138+
background: rgba(22,27,34,0.96); border: 1px solid var(--kg-border);
139+
border-radius: 10px; padding: 12px 16px; pointer-events: none;
140+
backdrop-filter: blur(8px); box-shadow: 0 8px 32px rgba(0,0,0,0.4);
141+
min-width: 160px; max-width: 320px;
142+
}
143+
.kg-tooltip-title { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 4px; }
144+
.kg-tooltip-cat { font-size: 11px; font-weight: 600; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
145+
.kg-tooltip-conn { font-size: 11px; color: var(--kg-text-muted); }
146+
.kg-tooltip-relations { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--kg-border); }
147+
.kg-tooltip-rel { font-size: 10px; color: var(--kg-text); padding: 2px 0; line-height: 1.4; }
148+
.kg-tooltip-rel-arrow { color: var(--kg-accent); margin-right: 2px; }
149+
.kg-tooltip-rel-label { color: var(--kg-text-muted); font-style: italic; }
150+
.kg-tooltip-rel-more { color: var(--kg-text-muted); font-style: italic; }
151+
152+
#kg-legend {
153+
position: absolute; bottom: 48px; right: 16px; z-index: 10;
154+
background: var(--kg-surface); border: 1px solid var(--kg-border);
155+
border-radius: 12px; padding: 12px 16px; backdrop-filter: blur(12px);
156+
max-height: 340px; overflow-y: auto; transition: all 0.3s ease;
157+
scrollbar-width: thin; scrollbar-color: var(--kg-border) transparent;
158+
}
159+
#kg-legend::-webkit-scrollbar { width: 6px; }
160+
#kg-legend::-webkit-scrollbar-track { background: transparent; }
161+
#kg-legend::-webkit-scrollbar-thumb { background: var(--kg-border); border-radius: 3px; }
162+
#kg-legend.collapsed { max-height: 0; padding: 0 16px; border-color: transparent; overflow: hidden; }
163+
#kg-legend-toggle {
164+
position: absolute; bottom: 48px; right: 148px; z-index: 11;
165+
padding: 5px 14px; border-radius: 8px; font-size: 11px; font-weight: 600;
166+
cursor: pointer; border: 1px solid var(--kg-border);
167+
background: var(--kg-surface); color: var(--kg-text-muted);
168+
backdrop-filter: blur(8px); transition: all 0.2s;
169+
}
170+
#kg-legend-toggle:hover { color: var(--kg-text); }
171+
.kg-legend-item { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
172+
.kg-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
173+
.kg-legend-label { font-size: 11px; color: var(--kg-text); white-space: nowrap; }
174+
175+
#kg-stats-bar {
176+
position: absolute; bottom: 0; left: 0; right: 0; z-index: 10;
177+
padding: 10px 20px;
178+
background: linear-gradient(0deg, rgba(10,14,23,0.95) 0%, rgba(10,14,23,0.6) 100%);
179+
backdrop-filter: blur(8px); border-top: 1px solid var(--kg-border);
180+
display: flex; align-items: center; justify-content: center;
181+
}
182+
#kg-stats { font-size: 12px; color: var(--kg-text-muted); display: flex; align-items: center; gap: 6px; }
183+
.kg-stat-sep { opacity: 0.3; font-size: 8px; }
184+
.kg-stat-hint { color: var(--kg-text-muted); opacity: 0.6; }
185+
186+
#kg-loading {
187+
position: absolute; top: 50%; left: 50%;
188+
transform: translate(-50%, -50%); z-index: 15;
189+
text-align: center; color: var(--kg-text-muted); transition: opacity 0.6s;
190+
}
191+
#kg-loading.hidden { opacity: 0; pointer-events: none; }
192+
.kg-loading-spinner {
193+
width: 40px; height: 40px; border: 3px solid var(--kg-border);
194+
border-top-color: var(--kg-accent); border-radius: 50%;
195+
margin: 0 auto 16px; animation: kg-spin 0.8s linear infinite;
196+
}
197+
@keyframes kg-spin { to { transform: rotate(360deg); } }
198+
199+
@media (prefers-reduced-motion: reduce) {
200+
.kg-loading-spinner { animation: none; }
201+
*, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
202+
}
203+
204+
@media (max-width: 768px) {
205+
#kg-toolbar { padding: 8px 12px; gap: 8px; }
206+
.kg-search-wrap { flex: 0 0 160px; }
207+
#kg-toolbar-title { font-size: 14px; }
208+
#kg-legend { bottom: 44px; right: 8px; }
209+
#kg-legend-toggle { bottom: 44px; right: 130px; }
210+
.kg-filter-pill { font-size: 9px; padding: 2px 7px; }
211+
}
212+
</style>
213+
</head>
214+
<body>
215+
<div id="kg-wrapper">
216+
<div id="kg-loading" aria-live="polite">
217+
<div class="kg-loading-spinner"></div>
218+
<div>Initializing Knowledge Graph...</div>
219+
</div>
220+
221+
<div id="kg-toolbar" role="toolbar" aria-label="Graph controls">
222+
<div id="kg-toolbar-title">Robotics <span>Knowledge Graph</span></div>
223+
<div class="kg-search-wrap">
224+
<input id="kg-search" type="text" role="searchbox" aria-label="Search articles" placeholder="Search articles..." autocomplete="off" spellcheck="false" />
225+
<button id="kg-search-clear" aria-label="Clear search">&times;</button>
226+
</div>
227+
<div id="kg-filter-row">
228+
<div id="kg-filters" role="group" aria-label="Category filters"></div>
229+
<button id="kg-reset-filters">Reset</button>
230+
</div>
231+
</div>
232+
233+
<div id="kg-container">
234+
<svg id="kg-svg"></svg>
235+
</div>
236+
237+
<div id="kg-search-no-results" aria-live="polite">No matching articles found</div>
238+
<div id="kg-tooltip" role="tooltip" aria-live="polite"></div>
239+
240+
<div id="kg-legend" role="region" aria-label="Category legend">
241+
<div id="kg-legend-content"></div>
242+
</div>
243+
<button id="kg-legend-toggle" aria-expanded="true" aria-controls="kg-legend">Hide</button>
244+
245+
<div id="kg-stats-bar">
246+
<div id="kg-stats" role="status"></div>
247+
</div>
248+
</div>
249+
250+
<script src="https://d3js.org/d3.v7.min.js"></script>
251+
<script src="assets/js/knowledge-graph-data.js"></script>
252+
<script src="assets/js/knowledge-graph.js"></script>
253+
</body>
254+
</html>

0 commit comments

Comments
 (0)