Optimize lodash use for tree-shaking (#1828)

Signed-off-by: Miki <[email protected]>

package.json

@@ -61,6 +61,7 @@
     "lint-staged": "^13.1.0"
   },
   "resolutions": {
+    "@types/react": "^16.14.23",
     "react-syntax-highlighter": "^15.4.3",
     "prismjs": "^1.22.0",
     "trim": "^1.0.0",

public/components/application_analytics/components/app_table.tsx

@@ -31,7 +31,7 @@ import {
   EuiTitle,
   EuiToolTip,
 } from '@elastic/eui';
-import _ from 'lodash';
+import truncate from 'lodash/truncate';
 import React, { ReactElement, useEffect, useState } from 'react';
 import moment from 'moment';
 import { DeleteModal } from '../../common/helpers/delete_modal';
@@ -222,7 +222,7 @@ export function AppTable(props: AppTableProps) {
       truncateText: true,
       render: (value, record) => (
         <EuiLink data-test-subj={`${record.name}ApplicationLink`} href={`#/${record.id}`}>
-          {_.truncate(record.name, { length: 100 })}
+          {truncate(record.name, { length: 100 })}
         </EuiLink>
       ),
     },

public/components/application_analytics/components/application.tsx

@@ -25,7 +25,6 @@ import TimestampUtils from 'public/services/timestamp/timestamp';
 import React, { ReactChild, useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
-import { last } from 'lodash';
 import { VisualizationType } from 'common/types/custom_panels';
 import { TracesContent } from '../../../components/trace_analytics/components/traces/traces_content';
 import { DashboardContent } from '../../../components/trace_analytics/components/dashboard/dashboard_content';

public/components/application_analytics/components/configuration.tsx

@@ -24,7 +24,6 @@ import {
   EuiTitle,
 } from '@elastic/eui';
 import { ApplicationRequestType, ApplicationType } from 'common/types/application_analytics';
-import { last } from 'lodash';
 import React, { useState } from 'react';
 
 interface ConfigProps {

public/components/application_analytics/components/create.tsx

@@ -26,7 +26,6 @@ import {
 import DSLService from 'public/services/requests/dsl';
 import React, { ReactChild, useEffect, useState } from 'react';
 import PPLService from 'public/services/requests/ppl';
-import { last } from 'lodash';
 import { AppAnalyticsComponentDeps } from '../home';
 import { TraceConfig } from './config_components/trace_config';
 import { ServiceConfig } from './config_components/service_config';

public/components/application_analytics/components/flyout_components/service_detail_flyout.tsx

@@ -13,7 +13,7 @@ import {
   EuiText,
   EuiTitle,
 } from '@elastic/eui';
-import _ from 'lodash';
+import round from 'lodash/round';
 import React, { useEffect, useMemo, useState } from 'react';
 import {
   filtersToDsl,
@@ -79,7 +79,7 @@ export function ServiceDetailFlyout(props: ServiceFlyoutProps) {
       ),
       getListItem(
         'Error rate',
-        fields.error_rate !== undefined ? _.round(fields.error_rate, 2).toString() + '%' : '-'
+        fields.error_rate !== undefined ? round(fields.error_rate, 2).toString() + '%' : '-'
       ),
       getListItem('Throughput', fields.throughput !== undefined ? fields.throughput : '-'),
       getListItem('Traces', fields.traces === 0 || fields.traces ? fields.traces : '-'),

public/components/application_analytics/home.tsx

@@ -12,7 +12,7 @@ import SavedObjects from 'public/services/saved_objects/event_analytics/saved_ob
 import TimestampUtils from 'public/services/timestamp/timestamp';
 import { EuiGlobalToastList, EuiLink } from '@elastic/eui';
 import { Toast } from '@elastic/eui/src/components/toast/global_toast_list';
-import { isEmpty, last } from 'lodash';
+import isEmpty from 'lodash/isEmpty';
 import { useDispatch } from 'react-redux';
 import { AppTable } from './components/app_table';
 import { Application } from './components/application';

public/components/common/debounced_component/debounced_component.tsx

@@ -4,7 +4,7 @@
  */
 
 import React, { useState, useMemo, useEffect, memo, FunctionComponent } from 'react';
-import { debounce } from 'lodash';
+import debounce from 'lodash/debounce';
 
 /**
  * debouncedComponent wraps the specified React component, returning a component which

public/components/common/helpers/ppl_reference_flyout.tsx

@@ -19,7 +19,7 @@ import {
   EuiTitle,
 } from '@elastic/eui';
 import { PPL_DOCUMENTATION_URL } from '../../../../common/constants/shared';
-import _ from 'lodash';
+import find from 'lodash/find';
 import React, { useState } from 'react';
 import { FlyoutContainers } from '../flyout_containers';
 import { Group1, Group2, Group3 } from './ppl_docs/groups';
@@ -33,7 +33,7 @@ type Props = {
 export const PPLReferenceFlyout = ({ module, closeFlyout }: Props) => {
   const allOptionsStatic = [{ label: 'Overview', value: overview }, Group1, Group2, Group3];
   const defaultOption =
-    module === 'explorer' ? [allOptionsStatic[0]] : [_.find(Group1.options, ['label', 'where'])];
+    module === 'explorer' ? [allOptionsStatic[0]] : [find(Group1.options, ['label', 'where'])];
   const [selectedOptions, setSelected] = useState(defaultOption);
   const [flyoutContent, setFlyoutContent] = useState(
     <EuiMarkdownFormat>{defaultOption[0].value}</EuiMarkdownFormat>

public/components/common/query_utils/index.ts

@@ -5,7 +5,7 @@
 
 import dateMath from '@elastic/datemath';
 import { Moment } from 'moment-timezone';
-import _, { isEmpty } from 'lodash';
+import isEmpty from 'lodash/isEmpty';
 import { SearchMetaData } from '../../event_analytics/redux/slices/search_meta_data_slice';
 import {
   PPL_DEFAULT_PATTERN_REGEX_FILETER,

public/components/common/search/autocomplete_logic.ts

@@ -4,7 +4,7 @@
  */
 
 import DSLService from 'public/services/requests/dsl';
-import { isEmpty } from 'lodash';
+import isEmpty from 'lodash/isEmpty';
 import { getDataValueQuery } from './queries/data_queries';
 import {
   statsCommands,

public/components/common/search/direct_search.tsx

@@ -19,7 +19,8 @@ import {
   EuiToolTip,
 } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
-import { isEmpty, isEqual } from 'lodash';
+import isEmpty from 'lodash/isEmpty';
+import isEqual from 'lodash/isEqual';
 import React, { useEffect, useState } from 'react';
 import { batch, useDispatch, useSelector } from 'react-redux';
 import {

public/components/common/search/request_handler.tsx

@@ -3,7 +3,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import _ from 'lodash';
 import { CoreStart } from '../../../../../../src/core/public';
 
 const DSL_ROUTE = '/api/dsl/search';

public/components/common/search/search.tsx

@@ -20,7 +20,7 @@ import {
   EuiText,
   EuiToolTip,
 } from '@elastic/eui';
-import { isEqual } from 'lodash';
+import isEqual from 'lodash/isEqual';
 import React, { useEffect, useState } from 'react';
 import { batch, useDispatch, useSelector } from 'react-redux';
 import { QUERY_LANGUAGE } from '../../../../common/constants/data_sources';

public/components/custom_panels/custom_panel_table.tsx

@@ -31,7 +31,8 @@ import {
 } from '@elastic/eui';
 import React, { ReactElement, useEffect, useState } from 'react';
 import moment from 'moment';
-import _ from 'lodash';
+import last from 'lodash/last';
+import truncate from 'lodash/truncate';
 import { useHistory, useLocation } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import { coreRefs } from '../../framework/core_refs';
@@ -315,8 +316,8 @@ export const CustomPanelTable = ({
       sortable: true,
       truncateText: true,
       render: (value, record) => (
-        <EuiLink href={`${_.last(parentBreadcrumbs)!.href}${record.id}`}>
-          {_.truncate(value, { length: 100 })}
+        <EuiLink href={`${last(parentBreadcrumbs)!.href}${record.id}`}>
+          {truncate(value, { length: 100 })}
         </EuiLink>
       ),
     },

public/components/custom_panels/custom_panel_view.tsx

@@ -25,11 +25,11 @@ import {
   OnTimeChangeProps,
   ShortDate,
 } from '@elastic/eui';
-import { last } from 'lodash';
+import last from 'lodash/last';
+import isEmpty from 'lodash/isEmpty';
 import React, { useEffect, useState } from 'react';
 import { DurationRange } from '@elastic/eui/src/components/date_picker/types';
 import moment from 'moment';
-import _ from 'lodash';
 import { useDispatch } from 'react-redux';
 import DSLService from '../../services/requests/dsl';
 import { CoreStart } from '../../../../../src/core/public';
@@ -392,7 +392,7 @@ export const CustomPanelView = (props: CustomPanelViewProps) => {
         (error: VizContainerError) => setToast(error.errorMessage, 'danger')
       );
 
-      if (!_.isEmpty(visData)) {
+      if (!isEmpty(visData)) {
         const moreIndices = parseForIndices(visData.query);
         for (let j = 0; j < moreIndices.length; j++) {
           if (!indices.includes(moreIndices[j])) {

public/components/custom_panels/custom_panel_view_so.tsx

@@ -27,7 +27,7 @@ import {
   ShortDate,
 } from '@elastic/eui';
 import { DurationRange } from '@elastic/eui/src/components/date_picker/types';
-import { last } from 'lodash';
+import last from 'lodash/last';
 import moment from 'moment';
 import React, { useCallback, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';

public/components/custom_panels/helpers/utils.tsx

@@ -5,7 +5,11 @@
 
 import { ShortDate } from '@elastic/eui';
 import { DurationRange } from '@elastic/eui/src/components/date_picker/types';
-import _, { forEach, isEmpty, min } from 'lodash';
+import differenceWith from 'lodash/differenceWith';
+import forEach from 'lodash/forEach';
+import isEmpty from 'lodash/isEmpty';
+import isEqual from 'lodash/isEqual';
+import min from 'lodash/min';
 import { Moment } from 'moment-timezone';
 import React from 'react';
 import { Layout } from 'react-grid-layout';
@@ -215,7 +219,7 @@ export const renderSavedVisualization = async ({
   setIsLoading(true);
   setIsError({} as VizContainerError);
 
-  if (_.isEmpty(visualization)) {
+  if (isEmpty(visualization)) {
     setIsLoading(false);
     return;
   }
@@ -724,7 +728,7 @@ export const displayVisualization = (metaData: any, data: any, type: string) =>
 
   metaData.userConfigs = parseMetadataUserConfig(metaData.userConfigs);
   const dataConfig = { ...(metaData.userConfigs?.dataConfig || {}) };
-  const hasBreakdowns = !_.isEmpty(dataConfig.breakdowns);
+  const hasBreakdowns = !isEmpty(dataConfig.breakdowns);
   const realTimeParsedStats = {
     ...getDefaultVisConfig(new QueryManager().queryParser().parse(metaData.query).getStats()),
   };
@@ -733,8 +737,8 @@ export const displayVisualization = (metaData: any, data: any, type: string) =>
 
   // filter out breakdowns from dimnesions
   if (hasBreakdowns) {
-    finalDimensions = _.differenceWith(finalDimensions, breakdowns, (dimn, brkdwn) =>
-      _.isEqual(removeBacktick(dimn.name), removeBacktick(brkdwn.name))
+    finalDimensions = differenceWith(finalDimensions, breakdowns, (dimn, brkdwn) =>
+      isEqual(removeBacktick(dimn.name), removeBacktick(brkdwn.name))
     );
   }
 

public/components/custom_panels/panel_modules/panel_grid/panel_grid.tsx

@@ -4,7 +4,8 @@
  */
 /* eslint-disable react-hooks/exhaustive-deps */
 
-import _ from 'lodash';
+import reject from 'lodash/reject';
+import omit from 'lodash/omit';
 import React, { useEffect, useState } from 'react';
 import { Layout, Responsive, WidthProvider } from 'react-grid-layout';
 import useObservable from 'react-use/lib/useObservable';
@@ -130,7 +131,7 @@ export const PanelGrid = (props: PanelGridProps) => {
 
   // remove visualization from panel in edit mode
   const removeVisualization = (visualizationId: string) => {
-    const newVisualizationList = _.reject(panelVisualizations, {
+    const newVisualizationList = reject(panelVisualizations, {
       id: visualizationId,
     });
     mergeLayoutAndVisualizations(postEditLayout, newVisualizationList, setPanelVisualizations);
@@ -164,7 +165,7 @@ export const PanelGrid = (props: PanelGridProps) => {
   useEffect(() => {
     if (editActionType === 'save') {
       const visualizationParams = postEditLayout.map((layout) =>
-        _.omit(layout, ['static', 'moved'])
+        omit(layout, ['static', 'moved'])
       );
       saveVisualizationLayouts(panelId, visualizationParams);
       if (updateAvailabilityVizId) {

public/components/custom_panels/panel_modules/panel_grid/panel_grid_so.tsx

@@ -4,7 +4,9 @@
  */
 /* eslint-disable react-hooks/exhaustive-deps */
 
-import _, { forEach } from 'lodash';
+import forEach from 'lodash/forEach';
+import reject from 'lodash/reject';
+import omit from 'lodash/omit';
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { Layout, Responsive, WidthProvider } from 'react-grid-layout';
@@ -129,7 +131,7 @@ export const PanelGridSO = (props: PanelGridProps) => {
 
   // remove visualization from panel in edit mode
   const removeVisualization = (visualizationId: string) => {
-    const newVisualizationList = _.reject(panelVisualizations, {
+    const newVisualizationList = reject(panelVisualizations, {
       id: visualizationId,
     });
     mergeLayoutAndVisualizations(postEditLayout, newVisualizationList, setPanelVisualizations);
@@ -174,7 +176,7 @@ export const PanelGridSO = (props: PanelGridProps) => {
   useEffect(() => {
     if (editActionType === 'save') {
       const visualizationParams = postEditLayout.map((layout) =>
-        _.omit(layout, ['static', 'moved'])
+        omit(layout, ['static', 'moved'])
       );
       saveVisualizationLayouts(panelId, visualizationParams);
       if (updateAvailabilityVizId) {

public/components/custom_panels/panel_modules/visualization_container/visualization_container.tsx

@@ -25,7 +25,7 @@ import {
   EuiToolTip,
 } from '@elastic/eui';
 import React, { useEffect, useMemo, useState } from 'react';
-import { isEmpty } from 'lodash';
+import isEmpty from 'lodash/isEmpty';
 import { useSelector } from 'react-redux';
 import {
   displayVisualization,

public/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout.tsx

@@ -32,7 +32,7 @@ import {
   EuiToolTip,
   ShortDate,
 } from '@elastic/eui';
-import _ from 'lodash';
+import isEmpty from 'lodash/isEmpty';
 import React, { useEffect, useState } from 'react';
 import { CoreStart } from '../../../../../../../src/core/public';
 import { CUSTOM_PANELS_API_PREFIX } from '../../../../../common/constants/custom_panels';
@@ -382,7 +382,7 @@ export const VisaulizationFlyout = ({
           <EuiFlexItem>
             {previewLoading ? (
               <EuiLoadingChart size="xl" mono className="visualization-loading-chart-preview" />
-            ) : !_.isEmpty(isPreviewError) ? (
+            ) : !isEmpty(isPreviewError) ? (
               <div className="visualization-error-div">
                 <EuiIcon type="alert" color="danger" size="s" />
                 <EuiSpacer size="s" />

public/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout_so.tsx

@@ -32,7 +32,7 @@ import {
   EuiToolTip,
   ShortDate,
 } from '@elastic/eui';
-import _ from 'lodash';
+import isEmpty from 'lodash/isEmpty';
 import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { CoreStart } from '../../../../../../../src/core/public';
@@ -364,7 +364,7 @@ export const VisaulizationFlyoutSO = ({
           <EuiFlexItem>
             {previewLoading ? (
               <EuiLoadingChart size="xl" mono className="visualization-loading-chart-preview" />
-            ) : !_.isEmpty(isPreviewError) ? (
+            ) : !isEmpty(isPreviewError) ? (
               <div className="visualization-error-div">
                 <EuiIcon type="alert" color="danger" size="s" />
                 <EuiSpacer size="s" />

public/components/custom_panels/redux/panel_slice.ts

@@ -6,7 +6,7 @@
 import { createSelector, createSlice } from '@reduxjs/toolkit';
 import { concat, from, Observable, of } from 'rxjs';
 import { map, mergeMap, toArray } from 'rxjs/operators';
-import { forEach } from 'lodash';
+import forEach from 'lodash/forEach';
 import {
   createDemoPanel,
   CUSTOM_PANELS_API_PREFIX,

public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/materialized_view/column_expression.tsx

@@ -14,7 +14,7 @@ import {
   EuiPopover,
 } from '@elastic/eui';
 import producer from 'immer';
-import _ from 'lodash';
+import filter from 'lodash/filter';
 import React, { useState } from 'react';
 import { ACCELERATION_AGGREGRATION_FUNCTIONS } from '../../../../../../../../../common/constants/data_sources';
 import {
@@ -51,7 +51,7 @@ export const ColumnExpression = ({
 
   const onDeleteColumnExpression = () => {
     const newColumnExpresionValue = [
-      ..._.filter(columnExpressionValues, (o) => o.id !== currentColumnExpressionValue.id),
+      ...filter(columnExpressionValues, (o) => o.id !== currentColumnExpressionValue.id),
     ];
     setAccelerationFormData(
       producer((accData) => {

public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/materialized_view/materialized_view_builder.tsx

@@ -12,7 +12,7 @@ import {
   htmlIdGenerator,
 } from '@elastic/eui';
 import producer from 'immer';
-import { map } from 'lodash';
+import map from 'lodash/map';
 import React, { useEffect, useState } from 'react';
 import {
   AggregationFunctionType,

public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/skipping_index/add_fields_modal.tsx

@@ -14,7 +14,7 @@ import {
   EuiTableFieldDataColumnType,
 } from '@elastic/eui';
 import producer from 'immer';
-import _ from 'lodash';
+import differenceBy from 'lodash/differenceBy';
 import React, { useState } from 'react';
 import {
   CreateAccelerationForm,
@@ -66,7 +66,7 @@ export const AddFieldsModal = ({
 
       <EuiModalBody>
         <EuiInMemoryTable
-          items={_.differenceBy(
+          items={differenceBy(
             accelerationFormData.dataTableFields,
             accelerationFormData.skippingIndexQueryData,
             'id'