[feature] usage of web worker for background lint and query execution

package.json

@@ -1,6 +1,6 @@
 {
 	"scripts": {
-		"build": "webpack --progress --mode=production",
+		"build": "NODE_OPTIONS=--openssl-legacy-provider webpack --progress --mode=production",
 		"build-test": "webpack -p --progress --colors --mode=development",
 		"serve": "NODE_OPTIONS=--openssl-legacy-provider webpack-dev-server --hot --mode=development"
 	},
@@ -81,7 +81,9 @@
 		"webpack": "^4.42.0",
 		"webpack-bundle-analyzer": "^3.6.1",
 		"webpack-cli": "^3.3.11",
-		"webpack-dev-server": "^3.10.3"
+		"webpack-dev-server": "^3.10.3",
+		"uglifyjs-webpack-plugin": "^2.2.0",
+		"worker-loader": "^3.0.8"
 	},
 	"dependencies": {
 		"@fortawesome/fontawesome-svg-core": "^1.2.32",

src/calc2/components/calculator.scss

@@ -21,6 +21,16 @@
 	.exec-button.selection > .selection, .exec-button.selection > .query {
 		display: none;
 	}
+
+	.exec-button > .selection, .exec-button.selection > .query > svg[data-icon="spinner"] {
+		-webkit-animation:spin 1s linear infinite;
+    -moz-animation:spin 1s linear infinite;
+    animation:spin 1s linear infinite;
+	}
+
+	@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
+	@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
+	@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } } 
 
 	.exec-button.selection:not(.selection-selected) > .query {
 		display: inline;

src/calc2/components/editorBagalg.tsx

@@ -4,7 +4,7 @@
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import { EditorBase, getColumnNamesFromRaRoot, getHintsFromGroup } from 'calc2/components/editorBase';
+import { EditorBase, getColumnNamesFromRaRoot, getHintsFromGroup, getInitialQueryExecTimeout } from 'calc2/components/editorBase';
 import { Result } from 'calc2/components/result';
 import { Item } from 'calc2/components/toolbar';
 import { t, T } from 'calc2/i18n';
@@ -62,6 +62,8 @@ export class EditorBagalg extends React.Component<Props, State> {
 
 		return (
 			<EditorBase
+				editQueryTimeout
+				queryTimeout={getInitialQueryExecTimeout()}
 				exampleBags={group.exampleBags}
 				exampleRA={group.exampleRA}
 				exampleSql={group.exampleSQL}

src/calc2/components/editorBagalg.worker.ts

@@ -0,0 +1,142 @@
+import { Relation } from "db/exec/Relation";
+import {
+	parseRelalg,
+	relalgFromRelalgAstRoot,
+	replaceVariables,
+} from "db/relalg";
+import { getSerializeValueWithClassName } from "calc2/utils/worker-serde/serializer";
+import { deserializeFromParsedObj } from "calc2/utils/worker-serde/deserializer";
+import classes from "db/exec/classes";
+import { t } from "../i18n";
+
+/**
+ * Worker definition for parallel execution of our "db engine", this is intended as a way
+ * to reduce the processing overhead on the Main JS Thread for the Web Page,
+ * since this process is CPU intensive and may lock it during extensive amounts of time,
+ * causing page freezes, the usage of the worker can improve the user experience by handling this
+ * on a separated thread.
+ * - https://v4.webpack.js.org/loaders/worker-loader/
+ * - https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API
+ */
+const ctx: Worker & { terminated?: boolean } = self as any;
+const MAX_NUM_ROWS_ON_RESULT = 50_000_000;
+
+const relationsCache: Record<string, { [name: string]: Relation }> = {};
+
+function timeout(milliseconds: number) {
+	return new Promise((resolve) => setTimeout(resolve, milliseconds));
+}
+
+async function execRelalgText(
+	text: string,
+	relations: { [name: string]: Relation },
+	withResult: boolean
+) {
+	try {
+		// const start = performance.now();
+		const ast = parseRelalg(text, Object.keys(relations), false);
+		replaceVariables(ast, relations);
+
+		if (ast.child === null) {
+			if (ast.assignments.length > 0) {
+				return {
+					success: null,
+					error: "calc.messages.error-query-missing-assignments-found",
+				};
+			} else {
+				return { success: null, error: "calc.messages.error-query-missing" };
+			}
+		}
+		const root = relalgFromRelalgAstRoot(ast, relations);
+		root.check();
+		const result = withResult ? root.getResult(true) : null;
+		// this is used as a way to allow any terminate message to be processed before we
+		await timeout(0);
+		if (result) {
+			if (
+				ctx.terminated ||
+				result.getNumRows() * result.getNumCols() > MAX_NUM_ROWS_ON_RESULT
+			) {
+				return {
+					success: null,
+					error: "calc.messages.error-query-large-memory-usage",
+				};
+			}
+		}
+		return {
+			success: { root: getSerializeValueWithClassName(root), ast, result },
+			error: null,
+		};
+	} catch (error) {
+		return { success: null, error };
+	}
+}
+
+type MessageRelalg =
+	| {
+			type: "exec";
+			payload: {
+				text: string;
+				id: string;
+				groupName: string;
+				withResult: boolean;
+			};
+	  }
+	| {
+			type: "cacheRelations";
+			payload: {
+				relations: { [name: string]: Relation };
+				groupName: string;
+        id: string;
+			};
+	  }
+	| {
+			type: "terminated";
+	  };
+
+ctx.addEventListener("message", async (event: MessageEvent<MessageRelalg>) => {
+	if (!event) return;
+	console.log(event);
+	if (event.data.type === "terminated") {
+		ctx.terminated = true;
+	}
+	if (event.data.type === "exec") {
+		const relations = relationsCache[event.data.payload.groupName];
+		const result = await execRelalgText(
+			event.data.payload.text,
+			relations || {},
+			event.data.payload.withResult
+		);
+		postMessage({
+			...result,
+			id: event.data.payload.id,
+		});
+	}
+	if (event.data.type === "cacheRelations") {
+		if (
+			!event.data.payload.relations ||
+			!Object.keys(event.data.payload.relations).length
+		) {
+			postMessage({
+				success: null,
+				error: new Error("no relations to cache"),
+				id: event.data.payload.id,
+			});
+		} else {
+			for (const key of Object.keys(event.data.payload.relations)) {
+				event.data.payload.relations[key] = deserializeFromParsedObj(
+					event.data.payload.relations[key],
+					classes,
+					{}
+				);
+			}
+			relationsCache[event.data.payload.groupName] =
+				event.data.payload.relations;
+			postMessage({
+				error: null,
+				success: true,
+				id: event.data.payload.id,
+			});
+		}
+	}
+});