#494 factored out the parsing model logic and moved to web worker to dont kill performances

Author: ddelpiano

webapp/Utils.js

@@ -61,7 +61,7 @@ const Utils = {
         }
 
         // skip the list element, e.g. "E"!
-        console.debug(`Skip ${item} at ${nextObject.label}`);
+        // console.debug(`Skip ${item} at ${nextObject.label}`);
         skipped = true;
       } else {
         skipped = false;

webapp/components/experiments/ExperimentEdit.js

@@ -26,6 +26,8 @@ import ParameterMenu from './ParameterMenu';
 import useStyles from './ExperimentEditStyle';
 import * as ExperimentHelper from './ExperimentHelper';
 import DialogBox from '../general/DialogBox';
+import workerCode from './workers/processExperimentData';
+
 const RANGE_VALUE = 0;
 const SUPPORTED_TYPES = [REAL_TYPE.INT, REAL_TYPE.FLOAT, REAL_TYPE.STR, REAL_TYPE.BOOL];
 const MAX_TRIALS = 100;
@@ -191,13 +193,13 @@ const ExperimentEdit = (props) => {
   const [experimentNameError, setExperimentNameError] = useState('');
   const [selectionParams, setSelectionParams] = useState([]);
   const [trialNumberErrorDialogOpen, setTrialNumberErrorDialogOpen] = useState({ condition: false, number: 1 });
+  const [paramsCounter, setParamsCounter] = useState(0);
 
   // Existing Experiment.
   const [experiment, setExperiment] = useState(null);
   const experiments = useSelector((state) => state.experiments.experiments);
 
   let numberOfTrials = 1;
-  // const dispatch = useDispatch();
   const validateParameter = (param) => {
     let updatedParam = param;
     if (param.type === LIST) {
@@ -253,20 +255,20 @@ const ExperimentEdit = (props) => {
   const getParameters = () => {
     ExperimentsApi.getParameters()
       .then((params) => {
-        const flattened = Utils.flatten(params);
-        const paramKeys = Object.keys(flattened);
-
-        const filteredKeys = paramKeys.filter((key) => {
-          // TODO: avoid to fetch field twice!
-          const field = Utils.getMetadataField(`netParams.${key}`);
-          if (field && SUPPORTED_TYPES.includes(field.type)) {
-            return true;
+        // eslint-disable-next-line prefer-template
+        // eslint-disable-next-line no-undef
+        const worker = new Worker(workerCode);
+        worker.onmessage = function (e) {
+          switch (e.data.resultMessage) {
+            case 'OK':
+              setSelectionParams(e.data.params.results);
+              worker.terminate();
+              break;
+            default:
+              console.error('worker processing metadata for autocomplete not working.');
           }
-          return false;
-        });
-
-        console.debug(`Size before ${paramKeys.length}, after: ${filteredKeys.length}`);
-        setSelectionParams(filteredKeys);
+        };
+        worker.postMessage({ message: 'process', params: { data: params, metadata: window.metadata } });
       });
   };
 

webapp/components/experiments/workers/processExperimentData.js

@@ -0,0 +1,105 @@
+const workerCode = () => {
+  // eslint-disable-next-line no-undef
+  self.onmessage = function (event) {
+    // The object that the web page sent is stored in the event.data property.
+    const Utils = {
+      getMetadataField (key, field = null) {
+        if (key === undefined) {
+          return null;
+        }
+
+        let currentObject;
+        let nextObject = event.data.params.metadata;
+        let skipped = false;
+
+        // eslint-disable-next-line no-restricted-syntax
+        key.split('.').forEach((item) => {
+          if (
+            currentObject != null
+            && currentObject?.container === true
+            && !(item in nextObject)
+          ) {
+            if (skipped) {
+              return null;
+            }
+
+            // skip the list element, e.g. "E"!
+            // console.debug(`Skip ${item} at ${nextObject.label}`);
+            skipped = true;
+          } else {
+            skipped = false;
+
+            if (item in nextObject) {
+              currentObject = nextObject[item];
+              if ('children' in currentObject) {
+                nextObject = currentObject.children;
+              }
+            } else {
+              currentObject = null;
+            }
+          }
+        });
+
+        if (currentObject) {
+          return field ? currentObject[field] : currentObject;
+        }
+
+        return null;
+      },
+
+      flatten (obj, path = '') {
+        if (!(obj instanceof Object)) {
+          // eslint-disable-next-line no-new-object
+          const newObj = new Object();
+          newObj[path.replace(/\.$/g, '')] = obj;
+          return newObj;
+        }
+
+        return Object.keys(obj).reduce(
+          (output, key) => (obj instanceof Array
+            ? Object.assign(output, Utils.flatten(obj[key], `${path}[${key}].`))
+            : Object.assign(output, Utils.flatten(obj[key], `${path + key}.`))),
+          {},
+        );
+      },
+    };
+
+    const REAL_TYPE = {
+      INT: 'int',
+      FLOAT: 'float',
+      BOOL: 'bool',
+      STR: 'str',
+      FUNC: 'func',
+      DICT: 'dict',
+      DICT_DICT: 'dict(dict)',
+    };
+    const SUPPORTED_TYPES = [
+      REAL_TYPE.INT,
+      REAL_TYPE.FLOAT,
+      REAL_TYPE.STR,
+      REAL_TYPE.BOOL,
+    ];
+    const { data } = event.data.params;
+    const flattened = Utils.flatten(data);
+    const paramKeys = Object.keys(flattened);
+    const filteredKeys = paramKeys.filter((key) => {
+      // TODO: avoid to fetch field twice!
+      const field = Utils.getMetadataField(`netParams.${key}`);
+      if (field && SUPPORTED_TYPES.includes(field.type)) {
+        return true;
+      }
+      return false;
+    });
+
+    // eslint-disable-next-line no-undef
+    postMessage({ resultMessage: 'OK', params: { results: filteredKeys } });
+  };
+};
+
+let code = workerCode.toString();
+code = code.substring(code.indexOf('{') + 1, code.lastIndexOf('}'));
+
+const blob = new Blob([code], { type: 'application/javascript' });
+const workerScript = window.URL.createObjectURL(blob);
+
+export default workerScript;