@andespindola/brainlink 0.1.0-beta.19 → 0.1.0-beta.20
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.
|
@@ -38,6 +38,8 @@ select {
|
|
|
38
38
|
}
|
|
39
39
|
|
|
40
40
|
.workspace {
|
|
41
|
+
display: grid;
|
|
42
|
+
grid-template-rows: auto minmax(0, 1fr);
|
|
41
43
|
position: relative;
|
|
42
44
|
width: 100%;
|
|
43
45
|
height: 100%;
|
|
@@ -45,6 +47,28 @@ select {
|
|
|
45
47
|
min-height: 0;
|
|
46
48
|
}
|
|
47
49
|
|
|
50
|
+
.graph-header {
|
|
51
|
+
z-index: 5;
|
|
52
|
+
display: flex;
|
|
53
|
+
align-items: center;
|
|
54
|
+
gap: 12px;
|
|
55
|
+
min-height: 72px;
|
|
56
|
+
padding: 10px 16px;
|
|
57
|
+
border-bottom: 1px solid var(--line);
|
|
58
|
+
background: linear-gradient(180deg, rgba(17, 21, 27, 0.96) 0%, rgba(17, 21, 27, 0.86) 100%);
|
|
59
|
+
backdrop-filter: blur(8px);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.brand-block {
|
|
63
|
+
display: grid;
|
|
64
|
+
gap: 2px;
|
|
65
|
+
min-width: max-content;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.brand-block strong {
|
|
69
|
+
font-size: 18px;
|
|
70
|
+
}
|
|
71
|
+
|
|
48
72
|
#graph {
|
|
49
73
|
display: block;
|
|
50
74
|
width: 100%;
|
|
@@ -59,40 +83,25 @@ select {
|
|
|
59
83
|
cursor: grabbing;
|
|
60
84
|
}
|
|
61
85
|
|
|
62
|
-
.topbar {
|
|
63
|
-
position: absolute;
|
|
64
|
-
top: 18px;
|
|
65
|
-
left: 18px;
|
|
66
|
-
right: 18px;
|
|
67
|
-
display: flex;
|
|
68
|
-
align-items: center;
|
|
69
|
-
justify-content: space-between;
|
|
70
|
-
gap: 18px;
|
|
71
|
-
pointer-events: none;
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
.topbar > div {
|
|
75
|
-
display: flex;
|
|
76
|
-
align-items: center;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
.topbar strong {
|
|
80
|
-
font-size: 18px;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
86
|
.eyebrow {
|
|
84
87
|
color: var(--muted);
|
|
85
88
|
font-size: 12px;
|
|
86
89
|
}
|
|
87
90
|
|
|
88
91
|
.search {
|
|
89
|
-
|
|
90
|
-
|
|
92
|
+
flex: 1 1 320px;
|
|
93
|
+
min-width: 220px;
|
|
91
94
|
}
|
|
92
95
|
|
|
93
96
|
.agent-filter {
|
|
94
97
|
width: min(220px, 28vw);
|
|
95
|
-
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.header-actions {
|
|
101
|
+
display: flex;
|
|
102
|
+
align-items: center;
|
|
103
|
+
gap: 10px;
|
|
104
|
+
margin-left: auto;
|
|
96
105
|
}
|
|
97
106
|
|
|
98
107
|
.search input,
|
|
@@ -113,9 +122,6 @@ select {
|
|
|
113
122
|
}
|
|
114
123
|
|
|
115
124
|
.toolbar {
|
|
116
|
-
position: absolute;
|
|
117
|
-
left: 18px;
|
|
118
|
-
bottom: 18px;
|
|
119
125
|
display: flex;
|
|
120
126
|
gap: 8px;
|
|
121
127
|
}
|
|
@@ -136,12 +142,9 @@ select {
|
|
|
136
142
|
}
|
|
137
143
|
|
|
138
144
|
.floating-metrics {
|
|
139
|
-
position: absolute;
|
|
140
|
-
top: 66px;
|
|
141
|
-
left: 18px;
|
|
142
145
|
display: flex;
|
|
143
146
|
gap: 10px;
|
|
144
|
-
|
|
147
|
+
flex-wrap: wrap;
|
|
145
148
|
}
|
|
146
149
|
|
|
147
150
|
.metric-chip {
|
|
@@ -343,32 +346,35 @@ li small {
|
|
|
343
346
|
}
|
|
344
347
|
|
|
345
348
|
@media (max-width: 860px) {
|
|
346
|
-
.
|
|
349
|
+
.graph-header {
|
|
347
350
|
align-items: stretch;
|
|
348
|
-
flex-
|
|
351
|
+
flex-wrap: wrap;
|
|
352
|
+
padding: 10px 12px;
|
|
353
|
+
min-height: 0;
|
|
349
354
|
}
|
|
350
355
|
|
|
351
356
|
.search {
|
|
352
357
|
width: 100%;
|
|
358
|
+
flex-basis: 100%;
|
|
359
|
+
order: 3;
|
|
353
360
|
}
|
|
354
361
|
|
|
355
362
|
.agent-filter {
|
|
356
363
|
width: 100%;
|
|
357
364
|
}
|
|
358
365
|
|
|
366
|
+
.header-actions {
|
|
367
|
+
width: 100%;
|
|
368
|
+
margin-left: 0;
|
|
369
|
+
justify-content: space-between;
|
|
370
|
+
order: 4;
|
|
371
|
+
}
|
|
372
|
+
|
|
359
373
|
.content-dialog header {
|
|
360
374
|
align-items: stretch;
|
|
361
375
|
flex-direction: column;
|
|
362
376
|
}
|
|
363
377
|
|
|
364
|
-
.floating-metrics {
|
|
365
|
-
top: 116px;
|
|
366
|
-
right: 18px;
|
|
367
|
-
left: 18px;
|
|
368
|
-
justify-content: flex-start;
|
|
369
|
-
flex-wrap: wrap;
|
|
370
|
-
}
|
|
371
|
-
|
|
372
378
|
.metric-chip {
|
|
373
379
|
min-width: 82px;
|
|
374
380
|
}
|
|
@@ -9,38 +9,41 @@ export const createClientHtml = () => `<!doctype html>
|
|
|
9
9
|
<body>
|
|
10
10
|
<main class="shell">
|
|
11
11
|
<section class="workspace" aria-label="Knowledge graph">
|
|
12
|
-
<
|
|
13
|
-
|
|
14
|
-
<div>
|
|
12
|
+
<header class="graph-header" aria-label="Graph actions">
|
|
13
|
+
<div class="brand-block">
|
|
15
14
|
<strong>Brainlink</strong>
|
|
15
|
+
<span class="eyebrow">Knowledge Graph</span>
|
|
16
|
+
</div>
|
|
17
|
+
<div class="floating-metrics" aria-label="Graph totals">
|
|
18
|
+
<div class="metric-chip">
|
|
19
|
+
<strong id="nodeCount">0</strong>
|
|
20
|
+
<small>Notes</small>
|
|
21
|
+
</div>
|
|
22
|
+
<div class="metric-chip">
|
|
23
|
+
<strong id="edgeCount">0</strong>
|
|
24
|
+
<small>Links</small>
|
|
25
|
+
</div>
|
|
26
|
+
<div class="metric-chip">
|
|
27
|
+
<strong id="tagCount">0</strong>
|
|
28
|
+
<small>Tags</small>
|
|
29
|
+
</div>
|
|
16
30
|
</div>
|
|
17
31
|
<label class="search">
|
|
18
32
|
<input id="search" type="search" placeholder="Filter notes, tags or paths" autocomplete="off" />
|
|
19
33
|
</label>
|
|
20
|
-
<
|
|
21
|
-
<
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
<strong id="edgeCount">0</strong>
|
|
31
|
-
<small>Links</small>
|
|
34
|
+
<div class="header-actions">
|
|
35
|
+
<label class="agent-filter">
|
|
36
|
+
<select id="agent"></select>
|
|
37
|
+
</label>
|
|
38
|
+
<div class="toolbar" aria-label="Graph controls">
|
|
39
|
+
<button id="zoomIn" type="button" title="Zoom in">+</button>
|
|
40
|
+
<button id="zoomOut" type="button" title="Zoom out">-</button>
|
|
41
|
+
<button id="fit" type="button" title="Fit visible nodes">◎</button>
|
|
42
|
+
<button id="reset" type="button" title="Reset view">⌂</button>
|
|
43
|
+
</div>
|
|
32
44
|
</div>
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
<small>Tags</small>
|
|
36
|
-
</div>
|
|
37
|
-
</div>
|
|
38
|
-
<div class="toolbar" aria-label="Graph controls">
|
|
39
|
-
<button id="zoomIn" type="button" title="Zoom in">+</button>
|
|
40
|
-
<button id="zoomOut" type="button" title="Zoom out">-</button>
|
|
41
|
-
<button id="fit" type="button" title="Fit visible nodes">◎</button>
|
|
42
|
-
<button id="reset" type="button" title="Reset view">⌂</button>
|
|
43
|
-
</div>
|
|
45
|
+
</header>
|
|
46
|
+
<canvas id="graph" aria-label="Brainlink knowledge graph"></canvas>
|
|
44
47
|
</section>
|
|
45
48
|
</main>
|
|
46
49
|
<dialog id="contentDialog" class="content-dialog" aria-labelledby="contentTitle">
|
package/package.json
CHANGED