Skip to content

Commit 4af81f7

Browse files
texodustexodus
authored
Merge pull request #2800 from finos/docs-inline-export-css-fixes
Fix docs, inline builds, export, and workspace CSS
2 parents d47b4d6 + 8fc1f1d commit 4af81f7

14 files changed

Lines changed: 212 additions & 65 deletions

File tree

‎examples/blocks/src/nypd/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212

1313
import perspective from "/node_modules/@finos/perspective/dist/cdn/perspective.js";
1414

15-
let DATA_URL = "nypdccrb.arrow";
15+
let DATA_URL = "../../dist/nypd/nypdccrb.arrow";
1616

1717
let LAYOUTS = localStorage.getItem("layouts")
1818
? JSON.parse(localStorage.getItem("layouts"))

‎packages/perspective-esbuild-plugin/worker.js‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -98,8 +98,8 @@ exports.WorkerPlugin = function WorkerPlugin(options = {}) {
9898
}
9999
}
100100
101-
function run_single_threaded(code, e) {
102-
console.error("Running perspective in single-threaded mode due to error initializing Web Worker:", e);
101+
function run_single_threaded(code) {
102+
console.error("Running perspective in single-threaded mode");
103103
let f = Function("const self = arguments[0];" + code);
104104
const workers = [];
105105
const mains = [];
@@ -109,17 +109,16 @@ exports.WorkerPlugin = function WorkerPlugin(options = {}) {
109109
110110
export const initialize = async function () {
111111
try {
112-
const blob = new Blob([worker], {type: 'application/javascript'});
113-
const url = URL.createObjectURL(blob);
114-
return new Worker(url, {type: "module"});
115-
} catch (e) {
116112
if (window.location.protocol.startsWith("file")) {
117113
console.warn("file:// protocol does not support Web Workers");
114+
return run_single_threaded(worker);
118115
} else {
119-
console.error("Error instantiating Web Worker");
116+
const blob = new Blob([worker], {type: 'application/javascript'});
117+
const url = URL.createObjectURL(blob);
118+
return new Worker(url, {type: "module"});
120119
}
121-
122-
return run_single_threaded(worker, e);
120+
} catch (e) {
121+
console.error("Error instantiating engine", e);
123122
}
124123
};
125124

‎packages/perspective-workspace/build.js‎

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -107,36 +107,37 @@ async function build_all() {
107107
builder3.compile().get("injected.css")
108108
);
109109

110-
const builder = new BuildCss("./src/themes");
111-
add(
112-
builder,
113-
"icons.less",
114-
"@finos/perspective-viewer/src/themes/icons.less"
115-
);
116-
add(builder, "intl.less", "@finos/perspective-viewer/src/themes/intl.less");
117-
add(builder, "pro.less", "@finos/perspective-viewer/src/themes/pro.less");
118-
add(builder, "output.scss", "./src/themes/pro.less");
119-
fs.writeFileSync("dist/css/pro.css", builder.compile().get("output.css"));
110+
const pro = new BuildCss("./src/themes");
111+
add(pro, "icons.less", "@finos/perspective-viewer/src/themes/icons.less");
112+
add(pro, "intl.less", "@finos/perspective-viewer/src/themes/intl.less");
113+
add(pro, "pro.less", "@finos/perspective-viewer/src/themes/pro.less");
114+
add(pro, "output.scss", "./src/themes/pro.less");
115+
fs.writeFileSync("dist/css/pro.css", pro.compile().get("output.css"));
120116

121-
const builder2 = new BuildCss("./src/themes");
117+
const pro_dark = new BuildCss("./src/themes");
122118
add(
123-
builder2,
119+
pro_dark,
124120
"icons.less",
125121
"@finos/perspective-viewer/src/themes/icons.less"
126122
);
127123
add(
128-
builder2,
124+
pro_dark,
129125
"intl.less",
130126
"@finos/perspective-viewer/src/themes/intl.less"
131127
);
132-
add(builder2, "pro.less", "@finos/perspective-viewer/src/themes/pro.less");
133-
add(builder2, "@finos/perspective-viewer/src/themes/pro-dark.less");
134-
add(builder2, "pro-workspace.less", "./src/themes/pro.less");
135-
add(builder2, "@finos/perspective-viewer/src/themes/variables.less");
136-
add(builder2, "output.scss", "./src/themes/pro-dark.less");
128+
add(pro_dark, "pro.less", "@finos/perspective-viewer/src/themes/pro.less");
129+
add(
130+
pro_dark,
131+
"pro-dark.less",
132+
"@finos/perspective-viewer/src/themes/pro-dark.less"
133+
);
134+
// add(builder2, "@finos/perspective-viewer/src/themes/pro-dark.less");
135+
// add(builder2, "pro-workspace.less", "./src/themes/pro.less");
136+
// add(builder2, "@finos/perspective-viewer/src/themes/variables.less");
137+
add(pro_dark, "output.scss", "./src/themes/pro-dark.less");
137138
fs.writeFileSync(
138139
"dist/css/pro-dark.css",
139-
builder2.compile().get("output.css")
140+
pro_dark.compile().get("output.css")
140141
);
141142

142143
await Promise.all(BUILD.map(build)).catch(() => process.exit(1));

‎packages/perspective-workspace/src/themes/pro-dark.less‎

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

13-
@import url("ref://pro-workspace.less");
14-
@import url("ref://@finos/perspective-viewer/src/themes/pro-dark.less");
15-
@import url("ref://@finos/perspective-viewer/src/themes/variables.less");
13+
@grey60: #c5c9d0;
14+
@grey500: #3b3f46;
15+
@grey600: #2f3136;
16+
@grey700: #2a2c2f;
17+
@grey800: #242526;
1618

1719
perspective-workspace,
1820
perspective-workspace[theme="Pro Dark"],
@@ -41,8 +43,6 @@ perspective-workspace perspective-viewer[settings] {
4143
perspective-workspace {
4244
@include perspective-workspace-pro-base;
4345
@include perspective-viewer-pro-dark--colors;
44-
--column-drag-handle--mask-image: url("../../../../rust/perspective-viewer/src/svg/drag-handle.svg");
45-
--bookmarks--mask-image: url("../../../../rust/perspective-viewer/src/svg/bookmark-icon.svg");
4646

4747
background-color: #000202;
4848
color: white;
@@ -63,12 +63,70 @@ perspective-viewer[theme="Pro Dark"].workspace-master-widget {
6363
}
6464

6565
.p-Menu {
66-
// font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
67-
// font-weight: 300 !important;
68-
background: @grey700 !important;
69-
color: white !important;
70-
border: 1px solid @grey500 !important;
71-
72-
font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
66+
font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo",
67+
"Consolas", "Liberation Mono", monospace;
7368
font-weight: 300;
74-
}
69+
background: @grey700 !important;
70+
color: white !important;
71+
border: 1px solid @grey500 !important;
72+
}
73+
74+
@mixin perspective-workspace-pro-base {
75+
font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo",
76+
"Consolas", "Liberation Mono", monospace;
77+
--open-settings-button--content: "expand_more";
78+
--close-settings-button--content: "expand_less";
79+
--close-button--content: "\2715";
80+
--master-divider--background-color: #243136;
81+
--menu-maximize--content: "fullscreen";
82+
--menu-minimize--content: "fullscreen_exit";
83+
--menu-duplicate--content: "call_split";
84+
--menu-master--content: "cast";
85+
--menu-detail--content: "notes";
86+
--menu-export--content: "file_download";
87+
--menu-copy--content: "file_copy";
88+
--menu-reset--content: "autorenew";
89+
--menu-link--content: "link";
90+
--menu-unlink--content: "link_off";
91+
--menu-newmenu--content: "add";
92+
--menu-close--content: "close";
93+
--menu-new--content: "description";
94+
--menu-newview--content: "file_copy";
95+
96+
--workspace-tabbar--border: 1px solid var(--inactive--color);
97+
--workspace-tabbar--border-width: 0px 1px 1px 1px;
98+
--workspace-tabbar--border-radius: 0px 0px 6px 6px;
99+
--workspace-tabbar--border-color: var(--inactive--color);
100+
--workspace-tabbar-tab--border-width: 1px 1px 0px 1px;
101+
}
102+
103+
@mixin perspective-viewer-pro-dark--colors {
104+
background-color: #242526;
105+
color: white;
106+
--icon--color: white;
107+
--active--color: #2770a9;
108+
--error--color: #ff9485;
109+
--inactive--color: #61656e;
110+
--inactive--border-color: #4c505b;
111+
--plugin--background: #242526;
112+
--modal-target--background: rgba(255, 255, 255, 0.05);
113+
--active--background: rgba(39, 113, 170, 0.5);
114+
--expression--operator-color: #c5c9d0;
115+
--expression--function-color: #22a0ce;
116+
--expression--error-color: rgb(255, 136, 136);
117+
--calendar--filter: invert(1);
118+
--warning--color: #242526;
119+
--warning--background: var(--icon--color);
120+
121+
--select-arrow--background-image: var(
122+
--select-arrow-light--background-image
123+
);
124+
125+
// Syntax
126+
--code-editor-symbol--color: white;
127+
--code-editor-literal--color: #7dc3f0;
128+
--code-editor-operator--color: rgb(23, 166, 123);
129+
--code-editor-comment--color: rgb(204, 120, 48);
130+
--code-editor-column--color: #e18ee1;
131+
// --code-editor-unknown--color: rgb(204, 120, 48);
132+
}

‎packages/perspective-workspace/src/themes/pro.less‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -21,14 +21,12 @@ perspective-indicator[theme="Pro Light"] {
2121
perspective-workspace {
2222
@include perspective-workspace-pro-base;
2323
@include perspective-viewer-pro--colors;
24-
background-color: #DADADA;
25-
--column-drag-handle--mask-image: url("../../../../rust/perspective-viewer/src/svg/drag-handle.svg");
26-
--bookmarks--mask-image: url("../../../../rust/perspective-viewer/src/svg/bookmark-icon.svg");
24+
background-color: #dadada;
2725
}
2826

2927
.p-Menu {
3028
@include perspective-viewer-pro--colors;
31-
background-color: #FFFFFF;
29+
background-color: #ffffff;
3230
}
3331

3432
perspective-workspace perspective-viewer[settings] {
@@ -49,14 +47,16 @@ perspective-viewer[theme="Pro Light"].workspace-master-widget {
4947
background-color: #f2f4f6;
5048
--plugin--background: #f2f4f6;
5149
regular-table {
52-
td, th {
50+
td,
51+
th {
5352
border-color: #e0e4e9;
5453
}
5554
}
5655
}
5756

5857
@mixin perspective-workspace-pro-base {
59-
font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
58+
font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo",
59+
"Consolas", "Liberation Mono", monospace;
6060
--open-settings-button--content: "expand_more";
6161
--close-settings-button--content: "expand_less";
6262
--close-button--content: "\2715";
@@ -84,7 +84,8 @@ perspective-viewer[theme="Pro Light"].workspace-master-widget {
8484
}
8585

8686
.p-Menu {
87-
font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
87+
font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo",
88+
"Consolas", "Liberation Mono", monospace;
8889
font-weight: 300;
8990
color: #161616;
90-
}
91+
}

‎rust/perspective-js/src/ts/browser.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,12 +88,12 @@ export async function websocket(
8888
module: Promise<typeof psp>,
8989
url: string | URL
9090
) {
91-
const { Client } = await module;
9291
const ws = new WebSocket(url);
9392
let [sender, receiver] = invert_promise();
9493
ws.onopen = sender;
9594
ws.binaryType = "arraybuffer";
9695
await receiver;
96+
const { Client } = await module;
9797
const client = new Client(
9898
(proto: Uint8Array) => {
9999
const buffer = proto.slice().buffer;

‎rust/perspective-js/src/ts/perspective.inline.ts‎

Lines changed: 31 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,16 +18,42 @@ import * as wasm_module from "../../dist/pkg/perspective-js.js";
1818
import wasm_binary from "../../dist/pkg/perspective-js.wasm";
1919
import { load_wasm_stage_0 } from "@finos/perspective/src/ts/decompress.ts";
2020

21-
const module = await load_wasm_stage_0(wasm_binary as unknown as ArrayBuffer);
22-
await wasm_module.default(module);
23-
await wasm_module.init();
21+
import type * as psp from "../../dist/pkg/perspective-js.d.ts";
22+
23+
type WasmElement = {
24+
__wasm_module__: Promise<typeof psp>;
25+
};
26+
27+
export async function compile_perspective() {
28+
let elem = customElements.get(
29+
"perspective-viewer"
30+
) as unknown as WasmElement;
31+
32+
if (!elem) {
33+
console.warn(
34+
"No `<perspective-viewer>` Custom Element found, using inline `Client`."
35+
);
36+
37+
const module = await load_wasm_stage_0(
38+
wasm_binary as unknown as ArrayBuffer
39+
);
40+
41+
await wasm_module.default(module);
42+
await wasm_module.init();
43+
return wasm_module;
44+
}
45+
46+
return elem.__wasm_module__;
47+
}
2448

2549
export async function websocket(url: string | URL) {
26-
return await api.websocket(Promise.resolve(wasm_module), url);
50+
const wasm_module = compile_perspective();
51+
return await api.websocket(wasm_module, url);
2752
}
2853

2954
export async function worker() {
30-
return await api.worker.call(undefined, Promise.resolve(wasm_module));
55+
const wasm_module = compile_perspective();
56+
return await api.worker(wasm_module);
3157
}
3258

3359
export default { websocket, worker };

‎rust/perspective-server/build/main.rs‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,10 @@ pub fn copy_dir_all(
4141
}
4242

4343
fn main() -> Result<(), std::io::Error> {
44+
if std::env::var("DOCS_RS").is_ok() {
45+
return Ok(());
46+
}
47+
4448
let markdown = fs::read_to_string("./docs/lib.md")?;
4549
let markdown = Regex::new("<img src=\"(.+?)\"")
4650
.expect("regex")
@@ -54,10 +58,6 @@ fn main() -> Result<(), std::io::Error> {
5458
});
5559

5660
std::fs::write("docs/lib_gen.md", markdown.as_ref())?;
57-
if std::env::var("DOCS_RS").is_ok() {
58-
return Ok(());
59-
}
60-
6161
if std::env::var("CARGO_FEATURE_EXTERNAL_CPP").is_ok() {
6262
println!("cargo:warning=MESSAGE Building in development mode");
6363
let root_dir_env = std::env::var("PSP_ROOT_DIR").expect("Must set PSP_ROOT_DIR");

‎rust/perspective-viewer/build.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,16 @@ async function build_all() {
4040

4141
// JavaScript
4242
const BUILD = [
43+
{
44+
entryPoints: ["src/ts/perspective-viewer.ts"],
45+
format: "esm",
46+
plugins: [
47+
PerspectiveEsbuildPlugin({
48+
wasm: { inline: true },
49+
}),
50+
],
51+
outfile: "dist/esm/perspective-viewer.inline.js",
52+
},
4353
{
4454
entryPoints: ["src/ts/perspective-viewer.ts"],
4555
format: "esm",

‎rust/perspective-viewer/src/themes/icons.less‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
1212

1313
perspective-viewer,
14+
perspective-workspace,
1415
perspective-copy-menu,
1516
perspective-export-menu,
1617
perspective-dropdown,
@@ -77,6 +78,10 @@ perspective-string-column-style {
7778
--overflow-hint-icon--content: "!";
7879
--reset-button-icon--content: "refresh";
7980
--save-button-icon--content: "save";
81+
82+
// Workspace
83+
--column-drag-handle--mask-image: url("../svg/drag-handle.svg");
84+
--bookmarks--mask-image: url("../svg/bookmark-icon.svg");
8085
}
8186

8287
@mixin perspective-viewer-base--datagrid {

0 commit comments

Comments
 (0)