chore: Replace lodash with ES6 funcs

Summary:
This is the last usage of lodash in our codebase.
After this removal our vendor bundle goes from 5.98MB to 5.91MB

Test Plan: Ran the dev UI, ensured that charts still render as expected.

Reviewers: nlanam, zasgar, michelle, #third_party_approvers

Reviewed By: zasgar, #third_party_approvers

Signed-off-by: Vihang Mehta <vihang@pixielabs.ai>

Differential Revision: https://phab.corp.pixielabs.ai/D12360

GitOrigin-RevId: 0d153e31ca887265b12bfad822d49e4bbd82f1a3

src/ui/package.json

@@ -22,7 +22,6 @@
     "@testing-library/react-hooks": "^8.0.0",
     "@types/d3": "^5.7.2",
     "@types/jest": "^27.0.2",
-    "@types/lodash": "^4.14.150",
     "@types/numeral": "^0.0.27",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.5",
@@ -115,7 +114,6 @@
     "history": "^4.10.1",
     "jose": "^4.9.3",
     "launchdarkly-react-client-sdk": "^2.20.0",
-    "lodash": "^4.17.21",
     "monaco-editor": "0.20.0",
     "mustache": "^4.2.0",
     "numeral": "^2.0.6",

src/ui/src/containers/live-widgets/vega/vega.tsx

@@ -23,7 +23,6 @@ import * as React from 'react';
 import { Theme, useTheme } from '@mui/material/styles';
 import { createStyles, makeStyles } from '@mui/styles';
 import { useFlags } from 'launchdarkly-react-client-sdk';
-import * as _ from 'lodash';
 import { Vega as ReactVega } from 'react-vega';
 import { View } from 'vega-typings';
 
@@ -110,14 +109,21 @@ function getCleanerForSemanticType(semType: SemanticType) {
 }
 
 function cleanInputData(relation: Relation, data: Array<Record<string, unknown>>) {
-  const columnToCleaner = _.fromPairs(relation.getColumnsList().map((colInfo) => {
+  const columnToCleaner = Object.fromEntries(relation.getColumnsList().map((colInfo) => {
     const colName = colInfo.getColumnName();
     const colST = colInfo.getColumnSemanticType();
     return [colName, getCleanerForSemanticType(colST)];
   }));
-  return data.map((row: any) => _.mapValues(row, (val, key) => (
-    columnToCleaner[key] ? columnToCleaner[key](val) : val
-  )));
+  return data.map((row: any) => {
+    return Object.fromEntries(
+      Object.entries(row).map(([key, val]) => {
+        if (columnToCleaner[key]) {
+          return [key, columnToCleaner[key](val)];
+        }
+        return [key, val];
+      }),
+    );
+  });
 }
 
 const Vega = React.memo((props: VegaProps) => {
@@ -248,12 +254,12 @@ const Vega = React.memo((props: VegaProps) => {
         hoveredSeries: value,
       }));
     },
-    [REVERSE_SELECT_SIGNAL]: (name, value) => {
+    [REVERSE_SELECT_SIGNAL]: (_name, value) => {
       if (!value) {
         return;
       }
       setLegendInteractState((state) => {
-        if (_.includes(state.selectedSeries, value)) {
+        if (state.selectedSeries.includes(value)) {
           return { ...state, selectedSeries: state.selectedSeries.filter((s) => s !== value) };
         }
         return { ...state, selectedSeries: [...state.selectedSeries, value] };

src/ui/yarn.lock

@@ -3623,7 +3623,6 @@ __metadata:
     "@testing-library/react-hooks": ^8.0.0
     "@types/d3": ^5.7.2
     "@types/jest": ^27.0.2
-    "@types/lodash": ^4.14.150
     "@types/numeral": ^0.0.27
     "@types/react": ^18.0.9
     "@types/react-dom": ^18.0.5
@@ -3683,7 +3682,6 @@ __metadata:
     jose: ^4.9.3
     launchdarkly-react-client-sdk: ^2.20.0
     license-checker: ^25.0.1
-    lodash: ^4.17.21
     mini-css-extract-plugin: ^1.3.1
     monaco-editor: 0.20.0
     monaco-editor-webpack-plugin: ^1.9.0
@@ -4450,13 +4448,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/lodash@npm:^4.14.150":
-  version: 4.14.168
-  resolution: "@types/lodash@npm:4.14.168"
-  checksum: 3326966ee089debde7a7d819e13b64991756e879945852c3357df14a7be837130f697c2cb451be9dd599eb7213fed0975bc9ca0f8f56b46fa73c46a83815b79c
-  languageName: node
-  linkType: hard
-
 "@types/mime@npm:^1":
   version: 1.3.2
   resolution: "@types/mime@npm:1.3.2"