Skip to content

Commit 070ba01

Browse files
texodustexodus
committed
Add debug component
1 parent 2d3ac88 commit 070ba01

29 files changed

Lines changed: 942 additions & 123 deletions

File tree

‎examples/blocks/src/covid/index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,9 +43,9 @@
4343
sort: [["deathIncrease", "col desc"]],
4444
expressions: {
4545
[`Parsed "date" bucket by week`]: `var year := integer(floor("date" / 10000));
46-
var month := integer(floor("date" / 100)) - year * 100;
47-
var day := integer("date" % 100);
48-
bucket(date(year, month, day), \'W\')`,
46+
var month := integer(floor("date" / 100)) - year * 100;
47+
var day := integer("date" % 100);
48+
bucket(date(year, month, day), \'W\')`,
4949
},
5050
aggregates: {},
5151
};

‎examples/blocks/src/dataset/index.html‎

Lines changed: 249 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,249 @@
1+
<!--
2+
3+
Copyright (c) 2017, the Perspective Authors.
4+
5+
This file is part of the Perspective library, distributed under the terms of
6+
the Apache License 2.0. The full license can be found in the LICENSE file.
7+
8+
-->
9+
10+
<!DOCTYPE html>
11+
<html>
12+
<head>
13+
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
14+
15+
<script type="module" src="/node_modules/@finos/perspective-viewer/dist/cdn/perspective-viewer.js"></script>
16+
<script type="module" src="/node_modules/@finos/perspective-viewer-datagrid/dist/cdn/perspective-viewer-datagrid.js"></script>
17+
<script type="module" src="/node_modules/@finos/perspective-viewer-d3fc/dist/cdn/perspective-viewer-d3fc.js"></script>
18+
19+
<link rel="stylesheet" crossorigin="anonymous" href="/node_modules/@finos/perspective-viewer/dist/css/themes.css" />
20+
21+
<style>
22+
23+
perspective-viewer {
24+
flex: 1;
25+
margin: 24px;
26+
overflow: visible;
27+
}
28+
29+
#app {
30+
display: flex;
31+
flex-direction: column;
32+
position: absolute;
33+
top: 0;
34+
left: 0;
35+
right: 0;
36+
bottom: 0;
37+
background-color: #f2f4f6;
38+
}
39+
40+
#controls {
41+
display: flex;
42+
margin: 24px 24px 0px 40px;
43+
}
44+
45+
.range {
46+
position: relative;
47+
display: inline-flex;
48+
flex-direction: column;
49+
margin-right: 24px;
50+
}
51+
52+
span, input, button {
53+
font-family: "Open Sans";
54+
font-size: 12px;
55+
background: none;
56+
margin: 0px;
57+
border-color: #ccc;
58+
color: #666;
59+
padding: 6px 12px 6px 0px;
60+
}
61+
62+
input {
63+
height: 14px;
64+
border-width: 0px;
65+
border-style: solid;
66+
border-bottom-width: 1px;
67+
color: inherit;
68+
outline: none;
69+
}
70+
71+
input[type=range] {
72+
margin-top: 2px;
73+
}
74+
75+
input[type=number] {
76+
font-family: "Roboto Mono";
77+
}
78+
79+
input:focus {
80+
border-color: #1a7da1;
81+
}
82+
83+
input::placeholder {
84+
color: #ccc;
85+
}
86+
87+
button {
88+
border: 1px solid #ccc;
89+
text-transform: uppercase;
90+
text-align: center;
91+
text-decoration: none;
92+
display: inline-block;
93+
padding-left: 12px;
94+
height: 28px;
95+
outline: none;
96+
}
97+
98+
button:hover {
99+
cursor: pointer;
100+
}
101+
102+
#run {
103+
justify-self: center;
104+
margin-right: 24px;
105+
height: 83px;
106+
width: 80px;
107+
}
108+
109+
</style>
110+
</head>
111+
112+
<body>
113+
114+
<div id="app">
115+
<div id="controls">
116+
<button id="run">Run</button>
117+
<div class="range">
118+
<span>Rows</span>
119+
<input id="num_rows" min="25" max="1000000" type="number" placeholder="#" value="10000"></input>
120+
<input id="num_batches" min="1" max="100" type="number" placeholder="#" value="1"></input>
121+
</div>
122+
<div class="range">
123+
<span>Float columns</span>
124+
<input id="num_float" min="0" max="50" type="number" placeholder="#" value="5"></input>
125+
</div>
126+
<div class="range">
127+
<span>Integer columns</span>
128+
<input id="num_integer" min="0" max="50" type="number" placeholder="#" value="5"></input>
129+
</div>
130+
<div class="range">
131+
<span>String columns</span>
132+
<input id="num_string" min="0" max="50" type="number" placeholder="#" value="5"></input>
133+
<input id="num_strings" min="1" max="500" type="number" placeholder="Unique Strings" value="50"></input>
134+
</div>
135+
<div class="range">
136+
<span>Datetime columns</span>
137+
<input id="num_datetime" min="0" max="50" type="number" placeholder="#" value="5"></input>
138+
</div>
139+
<div class="range">
140+
<span>Bool columns</span>
141+
<input id="num_boolean" min="0" max="50" type="number" placeholder="#" value="1"></input>
142+
</div>
143+
</div>
144+
145+
<perspective-viewer
146+
editable
147+
id="viewer">
148+
149+
</perspective-viewer>
150+
</div>
151+
152+
<script type="module">
153+
154+
import perspective from "/node_modules/@finos/perspective/dist/cdn/perspective.js";
155+
const WORKER = perspective.worker();
156+
157+
const choose = x => x[Math.floor(Math.random() * x.length)];
158+
const range = (x, y) => Math.random() * (y - x) + x;
159+
const rand_string = () => Math.random().toString(36).substring(7);
160+
const strings = choices => new Array(choices).fill(null).map(rand_string);
161+
const colname = (name, x) => `${name.charAt(0).toUpperCase() + name.slice(1)} ${x}`;
162+
163+
function* col_iter() {
164+
for (const name of ["float", "integer", "string", "datetime", "boolean"]) {
165+
const ncols = window[`num_${name}`].value;
166+
for (let x = 0; x < ncols; x ++) {
167+
yield [name, x];;
168+
}
169+
}
170+
}
171+
172+
const assign = fn => {
173+
const obj = {};
174+
for (const [name, x] of col_iter()) {
175+
obj[colname(name, x)] = fn(name, x);
176+
}
177+
return obj;
178+
}
179+
180+
const new_schema = () => assign(x => x);
181+
182+
let STRINGS;
183+
function reset_strings_cache() {
184+
STRINGS = {};
185+
}
186+
187+
reset_strings_cache();
188+
189+
const get_dict = xs => {
190+
STRINGS[xs] = STRINGS[xs] || strings(parseInt(num_strings.value));
191+
return STRINGS[xs];
192+
}
193+
194+
const CELL_ARGS = {
195+
"float": () => range(-10, 10),
196+
"integer": () => Math.floor(range(-10, 10)),
197+
"string" : xs => choose(get_dict(xs)),
198+
"datetime": () => new Date(),
199+
"boolean": () => choose([true, false, null])
200+
};
201+
202+
const new_row = () => assign((name, x) => CELL_ARGS[name](x));
203+
204+
const gen_data = async () => {
205+
reset_strings_cache();
206+
let nrows = num_rows.value;
207+
let rows = [];
208+
const batch_size = Math.floor(nrows / num_batches.value);
209+
const tbl = await WORKER.table(new_schema());
210+
(function batch() {
211+
while (nrows > 0) {
212+
rows.push(new_row());
213+
nrows--;
214+
if (nrows % batch_size === 0) {
215+
tbl.update(rows);
216+
rows = [];
217+
setTimeout(batch, 100);
218+
break;
219+
}
220+
}
221+
})();
222+
return tbl;
223+
}
224+
225+
// GUI
226+
227+
const make_run_click_callback = (state) => async () => {
228+
const old_table = state.table
229+
state.table = gen_data();
230+
await window.viewer.load(state.table);
231+
if (old_table) {
232+
old_table.then(old_table => {
233+
if (old_table) {
234+
old_table.delete();
235+
}
236+
});
237+
}
238+
}
239+
240+
// Main
241+
242+
window.addEventListener("DOMContentLoaded", async function () {
243+
run.addEventListener("click", make_run_click_callback({}));
244+
run.dispatchEvent(new Event("click"));
245+
});
246+
247+
</script>
248+
</body>
249+
</html>

‎packages/perspective-viewer-datagrid/src/js/style_handlers/column_header.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ export function style_selected_column(regularTable, viewer, selectedColumn) {
5959
const title = titles[i];
6060
const editBtn = editBtns[i];
6161

62-
let open = title.innerText === selectedColumn;
62+
let open = title.textContent === selectedColumn;
6363
title.classList.toggle("psp-menu-open", open);
6464
editBtn.classList.toggle("psp-menu-open", open);
6565
if (this._config.columns.length > 1) {

‎rust/perspective-viewer/src/less/containers/tabs.less‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,11 @@
6262
}
6363
}
6464
}
65+
66+
#format-tab {
67+
overflow: scroll;
68+
}
69+
6570
.tab-content {
6671
@include scrollbar;
6772
flex: 1 1 auto;

‎rust/perspective-viewer/src/less/dom/scrollbar.less‎

Lines changed: 20 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -11,18 +11,25 @@
1111
// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
1212

1313
@mixin scrollbar {
14-
&::-webkit-scrollbar-thumb {
15-
border: 0 solid var(--icon--color);
16-
border-left-width: 1px;
17-
}
14+
&:hover {
15+
--fix: ;
16+
}
1817

19-
&::-webkit-scrollbar-thumb:hover {
20-
background-color: rgba(0, 0, 0, 0.1);
21-
}
18+
&::-webkit-scrollbar-thumb {
19+
border-radius: 2px;
20+
border: 2px solid transparent;
21+
box-shadow: inset 0px 0px 0 4px var(--inactive--color);
22+
}
2223

23-
&::-webkit-scrollbar,
24-
&::-webkit-scrollbar-corner {
25-
background-color: transparent;
26-
width: 6px;
27-
}
28-
}
24+
&:hover::-webkit-scrollbar-thumb {
25+
border: 1px solid transparent;
26+
box-shadow: inset 0px 0px 0 4px var(--inactive--color);
27+
}
28+
29+
&::-webkit-scrollbar,
30+
&::-webkit-scrollbar-corner {
31+
background-color: transparent;
32+
width: 6px;
33+
height: 6px;
34+
}
35+
}

‎rust/perspective-viewer/src/less/form/code-editor.less‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@
1010
// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
1111
// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
1212

13+
@import "dom/scrollbar.less";
14+
1315
:host {
1416
#editor {
1517
display: flex;
@@ -22,21 +24,24 @@
2224
}
2325

2426
#editor-inner {
27+
overflow: hidden;
2528
position: relative;
2629
display: flex;
2730
flex: 1 1 auto;
2831
}
2932

3033
#line_numbers {
31-
pointer-events: none;
32-
padding: 6px 0 6px 6px;
34+
color: var(--inactive--color);
35+
background-color: var(--plugin--background, white);
3336
box-sizing: border-box;
34-
font-weight: 400;
35-
font-family: var(--interface-monospace--font-family, monospace);
3637
display: flex;
3738
flex-direction: column;
39+
flex: 0 0 auto;
40+
font-family: var(--interface-monospace--font-family, monospace);
41+
font-weight: 400;
3842
overflow: hidden;
39-
background-color: var(--plugin--background, white);
43+
padding: 6px 0 6px 6px;
44+
pointer-events: none;
4045
span:after {
4146
color: var(--code-editor-error--color, red);
4247
white-space: pre;
@@ -50,7 +55,7 @@
5055
}
5156

5257
pre#content {
53-
margin: 0;
58+
margin: 0 6px 6px 0;
5459
padding: 6px 0;
5560
// margin-left: 36px;
5661
box-sizing: border-box;
@@ -100,8 +105,10 @@
100105
}
101106

102107
#textarea_editable {
108+
@include scrollbar;
109+
103110
position: absolute;
104-
width: calc(100% - 36px);
111+
width: 100%;
105112
height: 100%;
106113
font-family: var(--interface-monospace--font-family, monospace);
107114
font-size: 1em;

0 commit comments

Comments
 (0)