Remove lodash dependency from UI (#2193)

* remove lodash * Remove lodash from dependencies * Modified deepCopy function
apache · Nov 27, 2023 · d5295c8 · d5295c8
1 parent 4b019a8
commit d5295c8
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 7 deletions.
diff --git a/ui/angular.json b/ui/angular.json
@@ -18,7 +18,7 @@
             "main": "src/main.ts",
             "tsConfig": "src/tsconfig.app.json",
             "polyfills": "src/polyfills.ts",
-            "allowedCommonJsDependencies": ["lodash", "codemirror"],
+            "allowedCommonJsDependencies": ["codemirror"],
             "assets": [
               "src/assets",
               {

diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -73,7 +73,6 @@
     "jshint": "^2.13.6",
     "konva": "9.2.0",
     "leaflet": "1.9.3",
-    "lodash": "4.17.21",
     "material-icons": "^1.13.1",
     "ngx-color-picker": "^14.0.0",
     "ngx-echarts": "^15.0.3",

diff --git a/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.component.ts b/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.component.ts
@@ -44,7 +44,6 @@ import {
 import { EditorService } from '../../services/editor.service';
 import { DialogService, PanelType } from '@streampipes/shared-ui';
 import { CompatibleElementsComponent } from '../../dialog/compatible-elements/compatible-elements.component';
-import { cloneDeep } from 'lodash';
 import { Subscription } from 'rxjs';
 import { JsplumbFactoryService } from '../../services/jsplumb-factory.service';
 
@@ -160,21 +159,21 @@ export class PipelineElementOptionsComponent implements OnInit, OnDestroy {
     }
 
     initRecs(pipelineElementDomId) {
-        const clonedModel: PipelineElementConfig[] = cloneDeep(
+        const clonedModel: PipelineElementConfig[] = this.deepCopy(
             this.rawPipelineModel,
         );
         const currentPipeline = this.objectProvider.makePipeline(clonedModel);
         this.editorService
             .recommendPipelineElement(currentPipeline, pipelineElementDomId)
             .subscribe(result => {
                 if (result.success) {
-                    this.possibleElements = cloneDeep(
+                    this.possibleElements = this.deepCopy(
                         this.pipelineElementRecommendationService.collectPossibleElements(
                             this.allElements,
                             result.possibleElements,
                         ),
                     );
-                    this.recommendedElements = cloneDeep(
+                    this.recommendedElements = this.deepCopy(
                         this.pipelineElementRecommendationService.populateRecommendedList(
                             this.allElements,
                             result.recommendedElements,
@@ -225,4 +224,28 @@ export class PipelineElementOptionsComponent implements OnInit, OnDestroy {
     ngOnDestroy(): void {
         this.pipelineElementConfiguredObservable.unsubscribe();
     }
+
+    deepCopy(obj) {
+        let clone: any = {};
+        if (
+            obj === null ||
+            typeof obj !== 'object' ||
+            Array.isArray(obj) ||
+            obj === undefined
+        ) {
+            return obj;
+        }
+
+        if (Array.isArray(obj)) {
+            clone = obj.map(item => this.deepCopy(item));
+        }
+
+        for (const key in obj) {
+            if (obj.hasOwnProperty(key)) {
+                clone[key] = this.deepCopy(obj[key]);
+            }
+        }
+
+        return clone;
+    }
 }