Optmise Disbursement layers on map

[ajeety4]

Product Description

Updates logic to create a single disbursement layer for lines connecting cases and mobile workers on map instead of one layer for each line. This significantly improves the map performance for higher assignments(>1k).

Technical Summary

Ticket

Feature Flag

Microplanning.

Safety Assurance

Safety story

Behind a feature flag and changes only relates to disbursement. Tested on local.

Automated test coverage

QA Plan

None

Rollback instructions

• This PR can be reverted after deploy with no further considerations

Labels & Review

• Risk label is set correctly
• The set of people pinged as reviewers is appropriate for the level of risk of the change

[Charl1996]

@ajeety4
Look good, but just one suggestion (feel free to evaluate and dispute it):

The handleDisbursementResults function iterates over all the users and cases, then the connectUserWithCasesOnMap iterates over all the users and cases again.

How about the following (note that I haven't tested it) - I removed the userToCasesList list to immediately construct the disbursementLinesSource (which would have been done in connectUserWithCasesOnMap), since we already have all the data we need to do so and we're skipping having to loop over all users/cases again:

        self.handleDisbursementResults = function (result) {
            // Clean stale disbursement results
            mapModel.removeDisbursementLayer();

            let groupId = 0;
            let disbursementLinesSource = [];
            Object.keys(result).forEach((userId) => {
                const user = mapModel.userMapItems().find((userModel) => {return userModel.itemId === userId;});
                mapModel.caseGroupsIndex[userId] = {groupId: groupId, item: user};

                let userToCases = {'user': user, 'cases': []};
                mapModel.caseMapItems().forEach((caseModel) => {
                    if (result[userId].includes(caseModel.itemId)) {
                        const lineCoordinates = [
                            [user.itemData.coordinates.lng, user.itemData.coordinates.lat],
                            [caseModel.itemData.coordinates.lng, caseModel.itemData.coordinates.lat],
                        ];
                        disbursementLinesSource.features.push(
                            {
                                type: 'Feature',
                                properties: {},
                                geometry: { type: 'LineString', coordinates: lineCoordinates },
                            }
                        );
                        
                        mapModel.caseGroupsIndex[caseModel.itemId] = {
                            groupId: groupId,
                            item: caseModel,
                            assignedUserId: userId,
                        };
                    }
                });
                userToCasesList.push(userToCases);
                groupId += 1;
            });
            addDisbursementLinesLayer(disbursementLinesSource);
            self.setBusy(false);
        };

[zandre-eng]

Looks good! Just a minor comment.

[ajeety4]

@ajeety4 Look good, but just one suggestion (feel free to evaluate and dispute it):

The handleDisbursementResults function iterates over all the users and cases, then the connectUserWithCasesOnMap iterates over all the users and cases again.

How about the following (note that I haven't tested it) - I removed the userToCasesList list to immediately construct the disbursementLinesSource (which would have been done in connectUserWithCasesOnMap), since we already have all the data we need to do so and we're skipping having to loop over all users/cases again:

        self.handleDisbursementResults = function (result) {
            // Clean stale disbursement results
            mapModel.removeDisbursementLayer();

            let groupId = 0;
            let disbursementLinesSource = [];
            Object.keys(result).forEach((userId) => {
                const user = mapModel.userMapItems().find((userModel) => {return userModel.itemId === userId;});
                mapModel.caseGroupsIndex[userId] = {groupId: groupId, item: user};

                let userToCases = {'user': user, 'cases': []};
                mapModel.caseMapItems().forEach((caseModel) => {
                    if (result[userId].includes(caseModel.itemId)) {
                        const lineCoordinates = [
                            [user.itemData.coordinates.lng, user.itemData.coordinates.lat],
                            [caseModel.itemData.coordinates.lng, caseModel.itemData.coordinates.lat],
                        ];
                        disbursementLinesSource.features.push(
                            {
                                type: 'Feature',
                                properties: {},
                                geometry: { type: 'LineString', coordinates: lineCoordinates },
                            }
                        );
                        
                        mapModel.caseGroupsIndex[caseModel.itemId] = {
                            groupId: groupId,
                            item: caseModel,
                            assignedUserId: userId,
                        };
                    }
                });
                userToCasesList.push(userToCases);
                groupId += 1;
            });
            addDisbursementLinesLayer(disbursementLinesSource);
            self.setBusy(false);
        };

Hey Charl , this is great point. The iteration is being done twice.
However the disbursement layer creation (and hence this source logic) is also called here from the review assignment . So in the favor of DRY and cleaner code, I think the iteration is fine in this case.

While looking through it, I did end up reusing the existing data structure and made some improvements. Changes are here