Skip to content

Commit 436503e

Browse files
northdpolecursoragent
northdpole
and
cursoragent
committed
Polish Explorer force-graph UX without regressing data load
Co-authored-by: Cursor <cursoragent@cursor.com>
1 parent 2d1aa47 commit 436503e

4 files changed

Lines changed: 766 additions & 251 deletions

File tree

‎application/frontend/src/pages/Explorer/visuals/force-graph/forceGraph.scss‎

Lines changed: 248 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,248 @@
1-
body {
2-
margin: 0;
3-
}
1+
.explorer-force-graph-page {
2+
--fg-control-bg: rgba(6, 10, 18, 0.9);
3+
--fg-border: rgba(148, 163, 184, 0.22);
4+
--fg-text: #e2e8f0;
5+
--fg-muted: #a4b1c2;
6+
--fg-nav-height: 4rem;
7+
--fg-nav-border: 1px;
8+
9+
height: calc(100dvh - var(--fg-nav-height) - var(--fg-nav-border));
10+
min-height: calc(100dvh - var(--fg-nav-height) - var(--fg-nav-border));
11+
display: flex;
12+
flex-direction: column;
13+
overflow: hidden;
14+
color: var(--fg-text);
15+
background: #02050d;
16+
}
17+
18+
@supports not (height: 100dvh) {
19+
.explorer-force-graph-page {
20+
height: calc(100vh - var(--fg-nav-height) - var(--fg-nav-border));
21+
min-height: calc(100vh - var(--fg-nav-height) - var(--fg-nav-border));
22+
}
23+
}
24+
25+
.explorer-force-graph-controls {
26+
position: relative;
27+
z-index: 90;
28+
flex-shrink: 0;
29+
display: flex;
30+
flex-direction: column;
31+
gap: 10px;
32+
padding: 12px 16px;
33+
border-bottom: 1px solid var(--fg-border);
34+
background: var(--fg-control-bg);
35+
backdrop-filter: blur(8px);
36+
}
37+
38+
.explorer-force-graph-controls__toggles,
39+
.explorer-force-graph-controls__filters,
40+
.explorer-force-graph-controls__meta {
41+
display: flex;
42+
align-items: stretch;
43+
gap: 10px;
44+
flex-wrap: wrap;
45+
}
46+
47+
.explorer-force-graph-controls__meta {
48+
color: var(--fg-muted);
49+
font-size: 0.88rem;
50+
letter-spacing: 0.01em;
51+
}
52+
53+
.explorer-force-graph-controls__meta strong {
54+
color: #f8fafc;
55+
font-weight: 700;
56+
}
57+
58+
.graph-chip.ui.checkbox {
59+
display: inline-flex;
60+
align-items: center;
61+
margin: 0;
62+
}
63+
64+
.graph-chip.ui.checkbox label {
65+
border: 1px solid rgba(148, 163, 184, 0.32);
66+
border-radius: 999px;
67+
color: #dbeafe;
68+
background: rgba(15, 23, 42, 0.72);
69+
font-size: 0.85rem;
70+
min-height: 36px;
71+
display: flex;
72+
align-items: center;
73+
padding: 0 14px 0 34px;
74+
transition: all 0.16s ease;
75+
}
76+
77+
.graph-chip.ui.checkbox input:checked ~ label {
78+
color: #f8fafc;
79+
border-color: rgba(147, 197, 253, 0.7);
80+
box-shadow: 0 0 0 1px rgba(147, 197, 253, 0.24);
81+
}
82+
83+
.graph-chip.ui.checkbox .box:before,
84+
.graph-chip.ui.checkbox label:before,
85+
.graph-chip.ui.checkbox .box:after,
86+
.graph-chip.ui.checkbox label:after {
87+
left: 10px;
88+
top: 50%;
89+
transform: translateY(-50%);
90+
}
91+
92+
.graph-chip--contains.ui.checkbox input:checked ~ label {
93+
border-color: rgba(45, 212, 191, 0.7);
94+
box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.3);
95+
}
96+
97+
.graph-chip--related.ui.checkbox input:checked ~ label {
98+
border-color: rgba(96, 165, 250, 0.7);
99+
box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.28);
100+
}
101+
102+
.graph-chip--linked.ui.checkbox input:checked ~ label {
103+
border-color: rgba(196, 181, 253, 0.72);
104+
box-shadow: 0 0 0 1px rgba(196, 181, 253, 0.28);
105+
}
106+
107+
.graph-select.ui.selection.dropdown {
108+
min-width: 220px;
109+
border-radius: 10px;
110+
border: 1px solid rgba(148, 163, 184, 0.35);
111+
background: rgba(15, 23, 42, 0.8);
112+
color: #dbeafe;
113+
}
114+
115+
.graph-select--wide.ui.selection.dropdown {
116+
min-width: 270px;
117+
}
118+
119+
.graph-select.ui.selection.dropdown .text,
120+
.graph-select.ui.selection.dropdown .default.text,
121+
.graph-select.ui.selection.dropdown > .dropdown.icon {
122+
color: #cbd5e1;
123+
}
124+
125+
.graph-select.ui.selection.dropdown .menu {
126+
z-index: 3000 !important;
127+
background: #0b1226;
128+
border: 1px solid rgba(148, 163, 184, 0.25);
129+
}
130+
131+
.graph-select.ui.selection.dropdown .menu > .item {
132+
color: #dbeafe;
133+
}
134+
135+
.graph-select.ui.selection.dropdown .menu > .item:hover {
136+
background: rgba(59, 130, 246, 0.18);
137+
}
138+
139+
.graph-chip--all.ui.checkbox label {
140+
border-color: rgba(147, 197, 253, 0.4);
141+
}
142+
143+
.explorer-force-graph-canvas {
144+
position: relative;
145+
z-index: 10;
146+
overflow: hidden;
147+
flex: 1;
148+
min-height: 0;
149+
background: #02050d;
150+
}
151+
152+
.explorer-force-graph-canvas > div {
153+
width: 100% !important;
154+
height: 100% !important;
155+
background: #02050d;
156+
}
157+
158+
.explorer-force-graph-canvas canvas {
159+
display: block;
160+
background: #02050d;
161+
}
162+
163+
.explorer-force-graph-empty {
164+
min-height: 500px;
165+
display: flex;
166+
align-items: center;
167+
justify-content: center;
168+
color: #a3b7d8;
169+
font-size: 1rem;
170+
}
171+
172+
.explorer-force-graph-legend {
173+
position: fixed;
174+
right: 16px;
175+
bottom: 16px;
176+
z-index: 4000;
177+
display: grid;
178+
gap: 6px;
179+
padding: 10px 12px;
180+
border-radius: 12px;
181+
border: 1px solid rgba(148, 163, 184, 0.28);
182+
background: rgba(8, 15, 32, 0.82);
183+
color: #dbeafe;
184+
font-size: 0.8rem;
185+
letter-spacing: 0.01em;
186+
pointer-events: none;
187+
}
188+
189+
.legend-row {
190+
display: flex;
191+
align-items: center;
192+
gap: 8px;
193+
}
194+
195+
.legend-swatch {
196+
width: 12px;
197+
height: 12px;
198+
border-radius: 999px;
199+
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
200+
}
201+
202+
.legend-swatch--contains {
203+
background: rgba(45, 212, 191, 0.85);
204+
}
205+
206+
.legend-swatch--related {
207+
background: rgba(96, 165, 250, 0.85);
208+
}
209+
210+
.legend-swatch--linked {
211+
background: rgba(196, 181, 253, 0.88);
212+
}
213+
214+
.explorer-full-load-progress {
215+
margin: 0 16px 8px;
216+
color: var(--fg-muted, #a4b1c2);
217+
font-size: 0.9rem;
218+
}
219+
220+
@media (max-width: 1024px) {
221+
.graph-select.ui.selection.dropdown,
222+
.graph-select--wide.ui.selection.dropdown {
223+
min-width: 200px;
224+
}
225+
}
226+
227+
@media (max-width: 760px) {
228+
.explorer-force-graph-controls {
229+
padding: 10px;
230+
gap: 8px;
231+
}
232+
233+
.graph-select.ui.selection.dropdown,
234+
.graph-select--wide.ui.selection.dropdown {
235+
width: 100%;
236+
min-width: 100%;
237+
}
238+
239+
.explorer-force-graph-controls__meta {
240+
font-size: 0.8rem;
241+
}
242+
243+
.explorer-force-graph-legend {
244+
right: 10px;
245+
bottom: 10px;
246+
font-size: 0.75rem;
247+
}
248+
}

0 commit comments

Comments
 (0)