update frontend to use split operators

client-tauri/src/pages/Dynamic.tsx

@@ -1,11 +1,10 @@
 import { Link } from "react-router-dom";
 
 import { BaseSyntheticEvent, useRef, useState } from "react";
-import { Operator } from "@stirling-pdf/shared-operations/src/functions";
+import { Operator, OperatorSchema } from "@stirling-pdf/shared-operations/src/functions";
-import i18next from "i18next";
 import Joi from "@stirling-tools/joi";
 import { BuildFields } from "../components/fields/BuildFields";
-import { listOperatorNames } from "@stirling-pdf/shared-operations/src/workflow/operatorAccessor";
+import { getOperatorByName, getSchemaByName, listOperatorNames } from "@stirling-pdf/shared-operations/src/workflow/operatorAccessor";
 import { PdfFile, RepresentationType } from "@stirling-pdf/shared-operations/src/wrappers/PdfFile";
 import { Action } from "@stirling-pdf/shared-operations/declarations/Action";
 
@@ -13,7 +12,10 @@ function Dynamic() {
     const [schemaDescription, setSchemaDescription] = useState<Joi.Description>();
 
     const operators = listOperatorNames();
+
+    const activeOperatorName = useRef<string>();
     const activeOperator = useRef<typeof Operator>();
+    const activeSchema = useRef<OperatorSchema>();
 
     async function selectionChanged(s: BaseSyntheticEvent) {
         const selectedValue = s.target.value;
@@ -23,36 +25,28 @@ function Dynamic() {
             return;
         }
 
-        console.log("Loading namespaces for", selectedValue);
+        getSchemaByName(selectedValue).then(async schema => {
-        await i18next.loadNamespaces(selectedValue, (err, t) => {
+            if(schema) {
-            if (err) throw err;
+                const description = schema.schema.describe();
-            console.log(t);
+                activeOperatorName.current = selectedValue;
-        });
+                activeOperator.current = await getOperatorByName(selectedValue);
-        console.log("Loading namespaces done");
+                activeSchema.current = schema;
 
-        console.log("Loading modules for", selectedValue);
+                // This will update children
-        const LoadingModule = import(`@stirling-pdf/shared-operations/src/functions/${selectedValue}`) as Promise<{ [key: string]: typeof Operator }>;
+                setSchemaDescription(description);
-        LoadingModule.then((Module) => {
+            }
-            const Operator = Module[capitalizeFirstLetter(selectedValue)];
-            const description = Operator.schema.describe();
-            console.log(Operator.schema);
-            console.log(description);
-
-            activeOperator.current = Operator;
-            // This will update children
-            setSchemaDescription(description);
         });
     }
 
     async function handleSubmit(e: BaseSyntheticEvent) {
         console.clear();
-        if(!activeOperator.current) {
+        if(!activeOperatorName.current || !activeOperator.current || !activeSchema.current) {
             throw new Error("Please select an Operator in the Dropdown");
         }
 
         const formData = new FormData(e.target);
         const values = Object.fromEntries(formData.entries());
-        let action: Action = {type: activeOperator.current.type, values: values};
+        let action: Action = {type: activeOperatorName.current, values: values};
 
         // Validate PDF File
 
@@ -76,7 +70,7 @@ function Dynamic() {
             }
         }
 
-        const validationResults = activeOperator.current.schema.validate({input: inputs, values: action.values});
+        const validationResults = activeSchema.current.schema.validate({input: inputs, values: action.values});
 
         if(validationResults.error) {
             console.error({error: "Validation failed", details: validationResults.error.message}, validationResults.error.stack);
@@ -87,8 +81,7 @@ function Dynamic() {
             operation.run(validationResults.value.input, (progress) => {
                 console.log("OperationProgress: " + progress.operationProgress, "CurFileProgress: " + progress.curFileProgress);
             }).then(async pdfFiles => {
-                console.log("Done");
+                console.log("Result", pdfFiles);
-                console.log(pdfFiles);
 
                 for await (const pdfFile of (pdfFiles as PdfFile[])) {
                     var blob = new Blob([await pdfFile.uint8Array], {type: "application/pdf"});
@@ -99,10 +92,6 @@ function Dynamic() {
         }
     };
 
-    function capitalizeFirstLetter(string: String) {
-        return string.charAt(0).toUpperCase() + string.slice(1);
-    }
-
     return (
         <div>
             <h2>Dynamic test page for operators</h2>

server-node/src/routes/api/dynamic-operations-controller.ts

@@ -2,7 +2,7 @@ import express, { Request, Response } from "express";
 const router = express.Router();
 import multer from "multer";
 const upload = multer();
-import { getOperatorByName } from "@stirling-pdf/shared-operations/src/workflow/operatorAccessor";
+import { getOperatorByName, getSchemaByName } from "@stirling-pdf/shared-operations/src/workflow/operatorAccessor";
 
 import { PdfFile } from "@stirling-pdf/shared-operations/src/wrappers/PdfFile";
 import { respondWithPdfFiles } from "../../utils/response-utils";
@@ -30,19 +30,26 @@ async function handleEndpoint(req: Request, res: Response) {
     }
     const pdfFiles: PdfFile[] = validationResults.value;
 
-    const operator = await getOperatorByName(req.params.func);
+    const schema = await getSchemaByName(req.params.func);
 
-    if(operator) {
+    if(schema) {
         const action: Action = {type: req.params.func, values: req.body};
 
-        const validationResults = operator.schema.validate({input: pdfFiles, values: action.values});
+        const validationResults = schema.schema.validate({input: pdfFiles, values: action.values});
 
         if(validationResults.error) {
             res.status(400).json({error: "Value validation failed", details: validationResults.error.message});
         }
         else {
             action.values = validationResults.value.values;
-            const operation = new operator(action);
+            
+            const Operator = await getOperatorByName(req.params.func);
+            if(!Operator) {
+                res.status(400).json({error: `the operator of type ${req.params.func} does not exist`});
+                return
+            }
+
+            const operation = new Operator(action);
             operation.run(validationResults.value.input, (progress) => {}).then(pdfFiles => {
                 respondWithPdfFiles(res, pdfFiles, req.params.func + "_result");
             });

shared-operations/src/workflow/operatorAccessor.ts

@@ -19,7 +19,7 @@ export async function getSchemaByName(name: string): Promise<OperatorSchema | un
     // Check if exists
     if(!compileTimeOperatorList.find(e => e.basename == name)) return;
 
-    i18next.loadNamespaces(name, (err, t) => { if (err) throw err; console.log(t) });
+    await i18next.loadNamespaces(name, (err) => { if (err) throw err; });
     const loadedModule = await import("../functions/" + name + ".schema.ts");
     const schema = loadedModule.default;
     if(!schema) {