CODEWITHSUNDEEP
angulartypescriptmultithreadingparallel-processing
Zachary Demmel
Zachary Demmel

Reputation: 19

Multithreading/Parallel Processing in Typescript

I'm working on an angular project that has a fairly simple mat-table, and based on user input the cells get certain colors and additional text. Running all the updates on the functions sequentially works fine for smaller datasets, but when the table starts getting into the thousands of course the checks slow down immensely, so the idea is that all of those checks, or at least batches of them, need to be run in paralel

I'm fairly new to typescript and I've gotten thrown into it in a learn-as-you-go type of situation, so I'm not totally sure how to properly do paralell processing. So far I've tried async and promise.all, and none of it seems to have done it for me. I'm looking into a NPM package called paralell-promises, and I seem to recall using settimeout() during my time with vanilla javascript for something similar.

My question is what would be best practices to get the parallel function calls working?

Here's my code:

async setCellDisplay(tagName, upperLimit, lowerLimit){
        var valueColumns = document.getElementsByClassName(tagName + "_valueColumn");
        let valueColumnsArr = [].map.call(valueColumns, elem => elem);
        const result = await Promise.all(valueColumnsArr.map(async cell =>  this.setCellDisplayByValue(cell, tagName, upperLimit, lowerLimit, tagPercentAboveCount, tagPercentBelowCount, valueColumnsArr.length)));
        this.displayRowsByFilter();
}

async setCellDisplayByValue(valueColumn, tagName, upperLimit, lowerLimit){
        var stringValue = valueColumn.innerHTML;    
        if(stringValue != undefined){
                var row = valueColumn.parentElement;
                stringValue = stringValue.replace('▲', "").replace('▼', '').replace(' ', "");                 
                var value = parseFloat(stringValue);

                if(value != NaN){
                    $("#"+valueColumn.id).text(value.toFixed(4).toString());
                    $("#"+valueColumn.id).css("color", "black")
                    $("#"+valueColumn.id).removeClass(tagName + "_exceedLimitClass");

                    if(value > upperLimit){
                        $("#"+valueColumn.id).text("▲ " + value.toFixed(4));
                        $("#"+valueColumn.id).css("color", "green");
                        $("#"+valueColumn.id).removeClass(tagName + "_exceedLimitClass");
                    }

                    if(value < lowerLimit){
                        $("#"+valueColumn.id).text("▼ " + value.toFixed(4));
                        $("#"+valueColumn.id).css("color", "red");
                        $("#"+valueColumn.id).removeClass(tagName + "_exceedLimitClass");
                    }                   
                }                
            }
        this.displayRowsByFilter();
    }

Thanks for the help!

Upvotes: 1

Views: 2084

Answers (1)

Jimmy
Jimmy

Reputation: 1419

I don't know how your original code looks like but the code you posted with document.getElementsByClassName just doesn't feel right to me.

In angular, we hardly query DOM like that, most of the time, we let angular update it for us.
So my advise is writing "proper" angular first, then look for something like change detection onpush or run code outside zone. This is the common technique when you want to optimize angular code.

I wouldn't say chunking data or schedule by settimeout is wrong but it should be done in another way, innerhtml, parentElement, to me, just for pure js.

Upvotes: 1

Related Questions