Skip to content

Commit

Permalink
Merge pull request #2800 from finos/docs-inline-export-css-fixes
Browse files Browse the repository at this point in the history
Fix docs, inline builds, export, and workspace CSS
  • Loading branch information
texodus authored Oct 22, 2024
2 parents d47b4d6 + 8fc1f1d commit 4af81f7
Show file tree
Hide file tree
Showing 14 changed files with 212 additions and 65 deletions.
2 changes: 1 addition & 1 deletion examples/blocks/src/nypd/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@

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

let DATA_URL = "nypdccrb.arrow";
let DATA_URL = "../../dist/nypd/nypdccrb.arrow";

let LAYOUTS = localStorage.getItem("layouts")
? JSON.parse(localStorage.getItem("layouts"))
Expand Down
17 changes: 8 additions & 9 deletions packages/perspective-esbuild-plugin/worker.js
Original file line number Diff line number Diff line change
Expand Up @@ -98,8 +98,8 @@ exports.WorkerPlugin = function WorkerPlugin(options = {}) {
}
}
function run_single_threaded(code, e) {
console.error("Running perspective in single-threaded mode due to error initializing Web Worker:", e);
function run_single_threaded(code) {
console.error("Running perspective in single-threaded mode");
let f = Function("const self = arguments[0];" + code);
const workers = [];
const mains = [];
Expand All @@ -109,17 +109,16 @@ exports.WorkerPlugin = function WorkerPlugin(options = {}) {
export const initialize = async function () {
try {
const blob = new Blob([worker], {type: 'application/javascript'});
const url = URL.createObjectURL(blob);
return new Worker(url, {type: "module"});
} catch (e) {
if (window.location.protocol.startsWith("file")) {
console.warn("file:// protocol does not support Web Workers");
return run_single_threaded(worker);
} else {
console.error("Error instantiating Web Worker");
const blob = new Blob([worker], {type: 'application/javascript'});
const url = URL.createObjectURL(blob);
return new Worker(url, {type: "module"});
}
return run_single_threaded(worker, e);
} catch (e) {
console.error("Error instantiating engine", e);
}
};
Expand Down
39 changes: 20 additions & 19 deletions packages/perspective-workspace/build.js
Original file line number Diff line number Diff line change
Expand Up @@ -107,36 +107,37 @@ async function build_all() {
builder3.compile().get("injected.css")
);

const builder = new BuildCss("./src/themes");
add(
builder,
"icons.less",
"@finos/perspective-viewer/src/themes/icons.less"
);
add(builder, "intl.less", "@finos/perspective-viewer/src/themes/intl.less");
add(builder, "pro.less", "@finos/perspective-viewer/src/themes/pro.less");
add(builder, "output.scss", "./src/themes/pro.less");
fs.writeFileSync("dist/css/pro.css", builder.compile().get("output.css"));
const pro = new BuildCss("./src/themes");
add(pro, "icons.less", "@finos/perspective-viewer/src/themes/icons.less");
add(pro, "intl.less", "@finos/perspective-viewer/src/themes/intl.less");
add(pro, "pro.less", "@finos/perspective-viewer/src/themes/pro.less");
add(pro, "output.scss", "./src/themes/pro.less");
fs.writeFileSync("dist/css/pro.css", pro.compile().get("output.css"));

const builder2 = new BuildCss("./src/themes");
const pro_dark = new BuildCss("./src/themes");
add(
builder2,
pro_dark,
"icons.less",
"@finos/perspective-viewer/src/themes/icons.less"
);
add(
builder2,
pro_dark,
"intl.less",
"@finos/perspective-viewer/src/themes/intl.less"
);
add(builder2, "pro.less", "@finos/perspective-viewer/src/themes/pro.less");
add(builder2, "@finos/perspective-viewer/src/themes/pro-dark.less");
add(builder2, "pro-workspace.less", "./src/themes/pro.less");
add(builder2, "@finos/perspective-viewer/src/themes/variables.less");
add(builder2, "output.scss", "./src/themes/pro-dark.less");
add(pro_dark, "pro.less", "@finos/perspective-viewer/src/themes/pro.less");
add(
pro_dark,
"pro-dark.less",
"@finos/perspective-viewer/src/themes/pro-dark.less"
);
// add(builder2, "@finos/perspective-viewer/src/themes/pro-dark.less");
// add(builder2, "pro-workspace.less", "./src/themes/pro.less");
// add(builder2, "@finos/perspective-viewer/src/themes/variables.less");
add(pro_dark, "output.scss", "./src/themes/pro-dark.less");
fs.writeFileSync(
"dist/css/pro-dark.css",
builder2.compile().get("output.css")
pro_dark.compile().get("output.css")
);

await Promise.all(BUILD.map(build)).catch(() => process.exit(1));
Expand Down
84 changes: 71 additions & 13 deletions packages/perspective-workspace/src/themes/pro-dark.less
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,11 @@
// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

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

perspective-workspace,
perspective-workspace[theme="Pro Dark"],
Expand Down Expand Up @@ -41,8 +43,6 @@ perspective-workspace perspective-viewer[settings] {
perspective-workspace {
@include perspective-workspace-pro-base;
@include perspective-viewer-pro-dark--colors;
--column-drag-handle--mask-image: url("../../../../rust/perspective-viewer/src/svg/drag-handle.svg");
--bookmarks--mask-image: url("../../../../rust/perspective-viewer/src/svg/bookmark-icon.svg");

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

.p-Menu {
// font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
// font-weight: 300 !important;
background: @grey700 !important;
color: white !important;
border: 1px solid @grey500 !important;

font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo",
"Consolas", "Liberation Mono", monospace;
font-weight: 300;
}
background: @grey700 !important;
color: white !important;
border: 1px solid @grey500 !important;
}

@mixin perspective-workspace-pro-base {
font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo",
"Consolas", "Liberation Mono", monospace;
--open-settings-button--content: "expand_more";
--close-settings-button--content: "expand_less";
--close-button--content: "\2715";
--master-divider--background-color: #243136;
--menu-maximize--content: "fullscreen";
--menu-minimize--content: "fullscreen_exit";
--menu-duplicate--content: "call_split";
--menu-master--content: "cast";
--menu-detail--content: "notes";
--menu-export--content: "file_download";
--menu-copy--content: "file_copy";
--menu-reset--content: "autorenew";
--menu-link--content: "link";
--menu-unlink--content: "link_off";
--menu-newmenu--content: "add";
--menu-close--content: "close";
--menu-new--content: "description";
--menu-newview--content: "file_copy";

--workspace-tabbar--border: 1px solid var(--inactive--color);
--workspace-tabbar--border-width: 0px 1px 1px 1px;
--workspace-tabbar--border-radius: 0px 0px 6px 6px;
--workspace-tabbar--border-color: var(--inactive--color);
--workspace-tabbar-tab--border-width: 1px 1px 0px 1px;
}

@mixin perspective-viewer-pro-dark--colors {
background-color: #242526;
color: white;
--icon--color: white;
--active--color: #2770a9;
--error--color: #ff9485;
--inactive--color: #61656e;
--inactive--border-color: #4c505b;
--plugin--background: #242526;
--modal-target--background: rgba(255, 255, 255, 0.05);
--active--background: rgba(39, 113, 170, 0.5);
--expression--operator-color: #c5c9d0;
--expression--function-color: #22a0ce;
--expression--error-color: rgb(255, 136, 136);
--calendar--filter: invert(1);
--warning--color: #242526;
--warning--background: var(--icon--color);

--select-arrow--background-image: var(
--select-arrow-light--background-image
);

// Syntax
--code-editor-symbol--color: white;
--code-editor-literal--color: #7dc3f0;
--code-editor-operator--color: rgb(23, 166, 123);
--code-editor-comment--color: rgb(204, 120, 48);
--code-editor-column--color: #e18ee1;
// --code-editor-unknown--color: rgb(204, 120, 48);
}
17 changes: 9 additions & 8 deletions packages/perspective-workspace/src/themes/pro.less
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,12 @@ perspective-indicator[theme="Pro Light"] {
perspective-workspace {
@include perspective-workspace-pro-base;
@include perspective-viewer-pro--colors;
background-color: #DADADA;
--column-drag-handle--mask-image: url("../../../../rust/perspective-viewer/src/svg/drag-handle.svg");
--bookmarks--mask-image: url("../../../../rust/perspective-viewer/src/svg/bookmark-icon.svg");
background-color: #dadada;
}

.p-Menu {
@include perspective-viewer-pro--colors;
background-color: #FFFFFF;
background-color: #ffffff;
}

perspective-workspace perspective-viewer[settings] {
Expand All @@ -49,14 +47,16 @@ perspective-viewer[theme="Pro Light"].workspace-master-widget {
background-color: #f2f4f6;
--plugin--background: #f2f4f6;
regular-table {
td, th {
td,
th {
border-color: #e0e4e9;
}
}
}

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

.p-Menu {
font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo",
"Consolas", "Liberation Mono", monospace;
font-weight: 300;
color: #161616;
}
}
2 changes: 1 addition & 1 deletion rust/perspective-js/src/ts/browser.ts
Original file line number Diff line number Diff line change
Expand Up @@ -88,12 +88,12 @@ export async function websocket(
module: Promise<typeof psp>,
url: string | URL
) {
const { Client } = await module;
const ws = new WebSocket(url);
let [sender, receiver] = invert_promise();
ws.onopen = sender;
ws.binaryType = "arraybuffer";
await receiver;
const { Client } = await module;
const client = new Client(
(proto: Uint8Array) => {
const buffer = proto.slice().buffer;
Expand Down
36 changes: 31 additions & 5 deletions rust/perspective-js/src/ts/perspective.inline.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,16 +18,42 @@ import * as wasm_module from "../../dist/pkg/perspective-js.js";
import wasm_binary from "../../dist/pkg/perspective-js.wasm";
import { load_wasm_stage_0 } from "@finos/perspective/src/ts/decompress.ts";

const module = await load_wasm_stage_0(wasm_binary as unknown as ArrayBuffer);
await wasm_module.default(module);
await wasm_module.init();
import type * as psp from "../../dist/pkg/perspective-js.d.ts";

type WasmElement = {
__wasm_module__: Promise<typeof psp>;
};

export async function compile_perspective() {
let elem = customElements.get(
"perspective-viewer"
) as unknown as WasmElement;

if (!elem) {
console.warn(
"No `<perspective-viewer>` Custom Element found, using inline `Client`."
);

const module = await load_wasm_stage_0(
wasm_binary as unknown as ArrayBuffer
);

await wasm_module.default(module);
await wasm_module.init();
return wasm_module;
}

return elem.__wasm_module__;
}

export async function websocket(url: string | URL) {
return await api.websocket(Promise.resolve(wasm_module), url);
const wasm_module = compile_perspective();
return await api.websocket(wasm_module, url);
}

export async function worker() {
return await api.worker.call(undefined, Promise.resolve(wasm_module));
const wasm_module = compile_perspective();
return await api.worker(wasm_module);
}

export default { websocket, worker };
8 changes: 4 additions & 4 deletions rust/perspective-server/build/main.rs
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,10 @@ pub fn copy_dir_all(
}

fn main() -> Result<(), std::io::Error> {
if std::env::var("DOCS_RS").is_ok() {
return Ok(());
}

let markdown = fs::read_to_string("./docs/lib.md")?;
let markdown = Regex::new("<img src=\"(.+?)\"")
.expect("regex")
Expand All @@ -54,10 +58,6 @@ fn main() -> Result<(), std::io::Error> {
});

std::fs::write("docs/lib_gen.md", markdown.as_ref())?;
if std::env::var("DOCS_RS").is_ok() {
return Ok(());
}

if std::env::var("CARGO_FEATURE_EXTERNAL_CPP").is_ok() {
println!("cargo:warning=MESSAGE Building in development mode");
let root_dir_env = std::env::var("PSP_ROOT_DIR").expect("Must set PSP_ROOT_DIR");
Expand Down
10 changes: 10 additions & 0 deletions rust/perspective-viewer/build.js
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,16 @@ async function build_all() {

// JavaScript
const BUILD = [
{
entryPoints: ["src/ts/perspective-viewer.ts"],
format: "esm",
plugins: [
PerspectiveEsbuildPlugin({
wasm: { inline: true },
}),
],
outfile: "dist/esm/perspective-viewer.inline.js",
},
{
entryPoints: ["src/ts/perspective-viewer.ts"],
format: "esm",
Expand Down
5 changes: 5 additions & 0 deletions rust/perspective-viewer/src/themes/icons.less
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

perspective-viewer,
perspective-workspace,
perspective-copy-menu,
perspective-export-menu,
perspective-dropdown,
Expand Down Expand Up @@ -77,6 +78,10 @@ perspective-string-column-style {
--overflow-hint-icon--content: "!";
--reset-button-icon--content: "refresh";
--save-button-icon--content: "save";

// Workspace
--column-drag-handle--mask-image: url("../svg/drag-handle.svg");
--bookmarks--mask-image: url("../svg/bookmark-icon.svg");
}

@mixin perspective-viewer-base--datagrid {
Expand Down
6 changes: 1 addition & 5 deletions rust/perspective-viewer/src/themes/pro-dark.less
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

@import "icons.less";
@import "intl.less";

@import url("ref://pro.less");

Expand Down Expand Up @@ -72,11 +73,6 @@ perspective-string-column-style[theme="Pro Dark"] {
--select-arrow-light--background-image
);

// Column type indicators
--float--column-type--color: #7dc3f0;
--string--column-type--color: #ff9485;
--date--column-type--color: @green50;
--boolean--column-type--color: @orange50;

// Syntax
--code-editor-symbol--color: white;
Expand Down
Loading

0 comments on commit 4af81f7

Please sign in to comment.