Optimize lodash use for tree-shaking

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,15 +31,15 @@
   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';
 import { AppAnalyticsComponentDeps } from '../home';
 import { getCustomModal } from '../../custom_panels/helpers/modal_containers';
 import {
   observabilityID,
   observabilityTitle,
   pageStyles,
   UI_DATE_FORMAT,
 } from '../../../../common/constants/shared';
@@ -222,7 +222,7 @@
       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,10 +25,9 @@
 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';
 import { ServicesContent } from '../../trace_analytics/components/services/services_content';
 import {
   filtersToDsl,
@@ -43,7 +42,7 @@
   TAB_LOG_ID,
   TAB_LOG_TITLE,
   TAB_OVERVIEW_ID,
   TAB_OVERVIEW_TITLE,
   TAB_PANEL_ID,
   TAB_PANEL_TITLE,
   TAB_SERVICE_ID,
@@ -66,7 +65,7 @@
 import { TraceDetailFlyout } from './flyout_components/trace_detail_flyout';
 import { fetchAppById, initializeTabData } from '../helpers/utils';
 import { QueryManager } from '../../../../common/query_manager/ppl_query_manager';
 import { observabilityApplicationsID } from '../../../../common/constants/shared';
 
 const searchBarConfigs = {
   [TAB_EVENT_ID]: {
@@ -111,7 +110,7 @@
     updateApp,
     setAppConfigs,
     setToasts,
     toasts,
     setFilters,
     callback,
     queryManager,
@@ -136,7 +135,7 @@
   const [serviceFlyoutName, setServiceFlyoutName] = useState<string>('');
   const [traceFlyoutId, setTraceFlyoutId] = useState<string>('');
   const [spanFlyoutId, setSpanFlyoutId] = useState<string>('');
   const [spanDSL, setSpanDSL] = useState<any>({});
   const [totalSpans, setTotalSpans] = useState<number>(0);
   const [editVizId, setEditVizId] = useState<string>('');
   const [visWithAvailability, setVisWithAvailability] = useState<EuiSelectOption[]>([]);
@@ -159,7 +158,7 @@
     sessionStorage.setItem(`${application.name}EndTime`, newEndTime);
   };
 
   const addSpanFilter = (field: string, value: any) => {
     const newFilters = [...filters];
     const index = newFilters.findIndex(({ field: filterField }) => field === filterField);
     if (index === -1) {
@@ -285,7 +284,7 @@
     },
   ];
 
   const nameColumnAction = (item: any) => openServiceFlyout(item);
   const traceColumnAction = () => switchToTrace();
 
   const getService = () => {
@@ -312,7 +311,7 @@
     setSelectedTab(TAB_TRACE_ID);
   };
 
   const traceIdColumnAction = (item: any) => openTraceFlyout(item);
 
   const getTrace = () => {
     return (

public/components/application_analytics/components/configuration.tsx

@@ -24,7 +24,6 @@
   EuiTitle,
 } from '@elastic/eui';
 import { ApplicationRequestType, ApplicationType } from 'common/types/application_analytics';
-import { last } from 'lodash';
 import React, { useState } from 'react';
 
 interface ConfigProps {
@@ -40,7 +39,7 @@
   const {
     appId,
     application,
     parentBreadcrumbs,
     visWithAvailability,
     updateApp,
     switchToAvailability,
@@ -49,7 +48,7 @@
     application.availability.availabilityVisId || ''
   );
 
   const onAvailabilityVisChange = (event: any) => {
     setAvailabilityVisId(event.target.value);
     updateApp(appId, { availabilityVisId: event.target.value }, 'editAvailability');
   };

public/components/application_analytics/components/create.tsx

@@ -26,7 +26,6 @@
 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';
@@ -40,8 +39,8 @@
 import { fetchAppById } from '../helpers/utils';
 import {
   observabilityApplicationsID,
   observabilityID,
   observabilityTitle,
 } from '../../../../common/constants/shared';
 
 interface CreateAppProps extends AppAnalyticsComponentDeps {

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

@@ -13,7 +13,7 @@
   EuiText,
   EuiTitle,
 } from '@elastic/eui';
-import _ from 'lodash';
+import round from 'lodash/round';
 import React, { useEffect, useMemo, useState } from 'react';
 import {
   filtersToDsl,
@@ -49,10 +49,10 @@
     openSpanFlyout,
     mode,
   } = props;
   const [fields, setFields] = useState<any>({});
   const [serviceMap, setServiceMap] = useState<ServiceObject>({});
   const [total, setTotal] = useState(0);
   const [DSL, setDSL] = useState<any>({});
   const [serviceMapIdSelected, setServiceMapIdSelected] = useState<
     'latency' | 'error_rate' | 'throughput'
   >('latency');
@@ -79,7 +79,7 @@
       ),
       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 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';
@@ -202,7 +202,7 @@
     if (!isEmpty(savedVizIdsToDelete)) {
       savedObjects
         .deleteSavedObjectsList({ objectIdList: savedVizIdsToDelete })
         .then((res) => {
           deletePanelForApp(appPanelId);
         })
         .catch((err) => {
@@ -370,7 +370,7 @@
         setToast(message);
         return res;
       })
       .catch((err: any) => {
         setToast('Error occured while deleting application', 'danger');
         console.error(err);
       });

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 @@
   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,13 +33,13 @@
 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>
   );
 
   const onChange = (selectedOptions: any) => {
     setSelected(selectedOptions);
 
     const newContent = selectedOptions.map((option: EuiComboBoxOptionOption<string>) => (

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,
@@ -80,7 +80,7 @@
 const getIndices = async (dslService: DSLService): Promise<void> => {
   if (indicesFromBackend.length === 0) {
     const indices = (await dslService.fetchIndices()).filter(
       ({ index }: { index: any }) => !index.startsWith('.')
     );
     for (let i = 0; i < indices.length; i++) {
       indicesFromBackend.push({

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'