chore(frontend): clean up lint errors and imports

frontend/src/asset-list/use-sorted-features.ts

@@ -4,7 +4,7 @@ import bbox from '@turf/bbox';
 import { ApiClient, FeatureListItemOut_float_ } from 'lib/api-client';
 import { BoundingBox } from 'lib/bounding-box';
 import { FieldSpec } from 'lib/data-map/view-layers';
-import _ from 'lodash';
+import pick from 'lodash/pick';
 import { useCallback, useEffect, useState } from 'react';
 
 const apiClient = new ApiClient({
@@ -69,7 +69,7 @@ export const useSortedFeatures = (
       const features = (response.items as FeatureListItemOut_float_[]).map(processFeature);
       setFeatures(features);
 
-      setPageInfo(_.pick(response, ['page', 'size', 'total']));
+      setPageInfo(pick(response, ['page', 'size', 'total']));
     } catch (error) {
       setError(error);
     }

frontend/src/config/assets/data-formats.ts

@@ -1,7 +1,7 @@
 import { HAZARDS_METADATA } from 'config/hazards/metadata';
 import { FieldSpec, FormatConfig } from 'lib/data-map/view-layers';
 import { isNullish, numFormat, numFormatMoney, paren } from 'lib/helpers';
-import _ from 'lodash';
+import startCase from 'lodash/startCase';
 
 function getSourceLabel(eadSource: string) {
   if (eadSource === 'all') return 'All Hazards';
@@ -43,7 +43,7 @@ const adaptationFieldLabels = {
 };
 
 function getAdaptationFieldLabel(field: string) {
-  return adaptationFieldLabels[field] || _.startCase(field);
+  return adaptationFieldLabels[field] || startCase(field);
 }
 
 function formatAdaptationValue(value: number, { field }: FieldSpec) {

frontend/src/details/features/damages/DamagesSection.tsx

@@ -5,7 +5,7 @@ import { HAZARD_DOMAINS } from 'config/hazards/domains';
 import { ExpectedDamage, ReturnPeriodDamage } from 'lib/api-client';
 import { downloadFile, titleCase, unique } from 'lib/helpers';
 import { useSelect } from 'lib/hooks/use-select';
-import _ from 'lodash';
+import fromPairs from 'lodash/fromPairs';
 import { useMemo } from 'react';
 import { DamageTable } from './DamageTable';
 import { RPDamageTable } from './RPDamageTable';
@@ -122,15 +122,15 @@ function prepareRPDamages(rpDamages: ReturnPeriodDamage[]) {
 }
 
 function orderDamages(damages: ExpectedDamageCell[]) {
-  const lookup = _.fromPairs(damages.map((d) => [d.key, d]));
+  const lookup = fromPairs(damages.map((d) => [d.key, d]));
 
   return DAMAGES_ORDERING.map(getDamageKey)
     .map((key) => lookup[key])
     .filter(Boolean);
 }
 
 function orderRPDamages(damages: RPDamageCell[]) {
-  const lookup = _.fromPairs(damages.map((d) => [d.key, d]));
+  const lookup = fromPairs(damages.map((d) => [d.key, d]));
 
   return RP_ORDERING.map(getRPDamageKey)
     .map((key) => lookup[key])

frontend/src/details/solutions/SolutionsSidebarContent.tsx

@@ -3,7 +3,7 @@ import { VECTOR_COLOR_MAPS } from 'config/color-maps';
 import { MARINE_HABITATS_LOOKUP } from 'config/solutions/domains';
 import { DataItem } from 'details/features/detail-components';
 import { colorMap } from 'lib/color-map';
-import _ from 'lodash';
+import startCase from 'lodash/startCase';
 import { ColorBox } from 'map/tooltip/content/ColorBox';
 import { FC } from 'react';
 import { habitatColorMap } from 'state/layers/marine';
@@ -24,7 +24,7 @@ export const SolutionsSidebarContent: FC<SolutionsSidebarContentProps> = ({
 }) => {
   return (
     <>
-      <Typography variant="body2">{_.startCase(solutionType)}</Typography>
+      <Typography variant="body2">{startCase(solutionType)}</Typography>
 
       {solutionType === 'terrestrial' && (
         <>

frontend/src/lib/controls/checkbox-tree/CheckboxTree.tsx

@@ -75,7 +75,7 @@ export function CheckboxTree<T>({
 }: {
   config: CheckboxTreeConfig<T>;
   nodes: TreeNode<T>[];
-  getLabel: (node: TreeNode<T>, checked: boolean) => any;
+  getLabel: (node: TreeNode<T>, checked: boolean) => string | JSX.Element;
   checkboxState: CheckboxTreeState;
   onCheckboxState: (state: CheckboxTreeState) => void;
   expanded: string[];

frontend/src/lib/controls/checkbox-tree/CheckboxTreeItem.tsx

@@ -19,7 +19,7 @@ export function CheckboxTreeItem<T>({
   root: TreeNode<T>;
   handleChange: (checked: boolean, node: TreeNode<T>) => void;
   checkboxState: CheckboxTreeState;
-  getLabel: (node: TreeNode<T>, checked: boolean) => any;
+  getLabel: (node: TreeNode<T>, checked: boolean) => string | JSX.Element;
   disableCheck?: boolean;
 }) {
   const indeterminate = checkboxState.indeterminate[root.id];

frontend/src/lib/controls/checkbox-tree/tree-node.ts

@@ -13,10 +13,10 @@ export type TreeNode<T> = {
  */
 export function dfs<T>(
   node: TreeNode<T>,
-  action: (node: TreeNode<T>) => any,
+  action: (node: TreeNode<T>) => number | void | false,
   skipRoot = false,
   order: 'pre' | 'post' = 'pre',
-): any {
+) {
   if (order === 'pre' && !skipRoot) {
     const continueTraversal = action(node);
 

frontend/src/lib/controls/data-params.ts

@@ -1,4 +1,6 @@
-import _ from 'lodash';
+import groupBy from 'lodash/groupBy';
+import mapValues from 'lodash/mapValues';
+import uniq from 'lodash/uniq';
 
 export type Param = any;
 export type ParamDomain<PT extends Param = Param> = PT[];
@@ -65,12 +67,12 @@ function getGroupKey<T>(keys: (keyof T)[]) {
 }
 
 function groupByMulti<T>(data: T[], properties: (keyof T)[]) {
-  return _.groupBy(data, getGroupKey(properties));
+  return groupBy(data, getGroupKey(properties));
 }
 
 function makeDependencyFunction<T extends object>(data: T[], param: keyof T, inputs: (keyof T)[]) {
   const grouped = groupByMulti(data, inputs);
-  const groupedDomains = _.mapValues(grouped, (g) => _.uniq(g.map((d) => d[param])));
+  const groupedDomains = mapValues(grouped, (g) => uniq(g.map((d) => d[param])));
 
   return (params: T) => groupedDomains[getGroupKey(inputs)(params)];
 }
@@ -93,7 +95,7 @@ export function inferDomainsFromData<T extends object>(data: T[]): ParamGroupDom
   const keys = Object.keys(data[0]);
   for (const key of keys) {
     const values = data.map((d) => d[key]);
-    domains[key] = _.uniq(values);
+    domains[key] = uniq(values);
   }
   return domains;
 }

frontend/src/lib/controls/params/value-label.ts

@@ -7,7 +7,7 @@ export function isValueLabel(value): value is ValueLabel {
   return typeof value === 'object' && 'value' in value && 'label' in value;
 }
 
-export function getValueLabel(value: any): ValueLabel {
+export function getValueLabel(value: ValueLabel | string): ValueLabel {
   if (isValueLabel(value)) {
     return value;
   }

frontend/src/lib/data-map/DataMap.tsx

@@ -1,4 +1,4 @@
-import _ from 'lodash';
+import difference from 'lodash/difference';
 import { FC, ReactNode, useCallback, useEffect, useMemo } from 'react';
 
 import { usePrevious } from '../hooks/use-previous';
@@ -53,11 +53,11 @@ export const DataMap: FC<DataMapProps> = ({
 
   useEffect(() => {
     // destroy removed data loaders to free up memory
-    const removedLoaders = _.difference(previousLoaders ?? [], dataLoaders);
+    const removedLoaders = difference(previousLoaders ?? [], dataLoaders);
     removedLoaders.forEach((dl) => dl.destroy());
 
     // subscribe to new data loaders to get notified when data is loaded
-    const addedLoaders = _.difference(dataLoaders, previousLoaders ?? []);
+    const addedLoaders = difference(dataLoaders, previousLoaders ?? []);
     addedLoaders.forEach((dl) => dl.subscribe(doTrigger));
 
     // if there was a change in data loaders, trigger an update to the data map

frontend/src/lib/data-map/MapContextProviderWithLimits.tsx

@@ -1,4 +1,4 @@
-import _ from 'lodash';
+import omit from 'lodash/omit';
 import { FC, ReactNode, useContext, useMemo } from 'react';
 import { MapContext, MapContextProps } from 'react-map-gl';
 
@@ -27,10 +27,10 @@ export const MapContextProviderWithLimits: FC<{
 
   // need to make a plain object out of viewport, and then assign the missing fields
   const plainViewport = Object.fromEntries(Object.entries(baseContext.viewport ?? {}));
-  const viewport: any = Object.assign(plainViewport, viewLimits);
+  const viewport: any = { ...plainViewport, ...viewLimits };
 
   const extendedContext = useMemo(
-    () => ({ ..._.omit(baseContext, 'viewport'), viewport }),
+    () => ({ ...omit(baseContext, 'viewport'), viewport }),
     [baseContext, viewport],
   );
   return <MapContext.Provider value={extendedContext}>{children}</MapContext.Provider>;

frontend/src/lib/data-map/interactions/interaction-state.ts

@@ -1,4 +1,4 @@
-import _ from 'lodash';
+import forEach from 'lodash/forEach';
 import { atom, atomFamily, selector } from 'recoil';
 
 import { isReset } from 'lib/recoil/is-reset';
@@ -55,7 +55,7 @@ export const allowedGroupLayersState = selector<AllowedGroupLayers>({
   set: ({ get, set, reset }, newAllowedGroups) => {
     const oldAllowedGroupLayers = get(allowedGroupLayersImpl);
     if (isReset(newAllowedGroups)) {
-      _.forEach(oldAllowedGroupLayers, (layers, group) => {
+      forEach(oldAllowedGroupLayers, (layers, group) => {
         reset(hoverState(group));
         reset(selectionState(group));
       });

frontend/src/lib/data-map/interactions/use-interactions.ts

@@ -1,6 +1,9 @@
 import DeckGL, { Deck, PickInfo } from 'deck.gl';
 import { readPixelsToArray } from '@luma.gl/core';
-import _ from 'lodash';
+import keyBy from 'lodash/keyBy';
+import filter from 'lodash/filter';
+import groupBy from 'lodash/groupBy';
+import mapValues from 'lodash/mapValues';
 import { useCallback, useEffect, useMemo } from 'react';
 import { useRecoilCallback, useSetRecoilState } from 'recoil';
 
@@ -115,7 +118,7 @@ export function useInteractions(
   const setInteractionGroupSelection = useSetInteractionGroupState(selectionState);
 
   const interactionGroupLookup = useMemo(
-    () => _.keyBy(interactionGroups, 'id'),
+    () => keyBy(interactionGroups, 'id'),
     [interactionGroups],
   );
 
@@ -127,19 +130,19 @@ export function useInteractions(
     [viewLayers],
   );
   const viewLayerLookup = useMemo(
-    () => _.keyBy(interactiveLayers, (layer) => layer.id),
+    () => keyBy(interactiveLayers, (layer) => layer.id),
     [interactiveLayers],
   );
   const activeGroups = useMemo(
-    () => _.groupBy(interactiveLayers, (viewLayer) => viewLayer.interactionGroup),
+    () => groupBy(interactiveLayers, (viewLayer) => viewLayer.interactionGroup),
     [interactiveLayers],
   );
 
   const setAllowedGroupLayers = useSetRecoilState(allowedGroupLayersState);
 
   useEffect(() => {
     setAllowedGroupLayers(
-      _.mapValues(activeGroups, (viewLayers) => viewLayers.map((viewLayer) => viewLayer.id)),
+      mapValues(activeGroups, (viewLayers) => viewLayers.map((viewLayer) => viewLayer.id)),
     );
   }, [activeGroups, setAllowedGroupLayers]);
 
@@ -218,7 +221,7 @@ export function useInteractions(
   const hoverPassGroups = useMemo(
     () =>
       new Set(
-        _.filter(
+        filter(
           interactionGroups,
           (group) => group.id === primaryGroup || group.usesAutoHighlight,
         ).map((group) => group.id),

frontend/src/lib/data-map/view-layers.ts

@@ -34,23 +34,23 @@ export interface ViewLayerFunctionOptions {
 }
 
 export interface DataManager {
-  getDataAccessor: (layer: string, fieldSpec: any) => (d: any) => any;
-  getDataLoader: (layer: string, fieldSpec: any) => DataLoader;
+  getDataAccessor: (layer: string, fieldSpec: FieldSpec) => Accessor<string>;
+  getDataLoader: (layer: string, fieldSpec: FieldSpec) => DataLoader;
 }
 
-export interface FormatConfig<D = any> {
+export interface FormatConfig<D = unknown> {
   getDataLabel: (fieldSpec: FieldSpec) => string;
   getValueFormatted: (value: D, fieldSpec: FieldSpec) => string;
 }
 
-export type ViewLayerDataAccessFunction = (fieldSpec: FieldSpec) => Accessor<any>;
+export type ViewLayerDataAccessFunction = (fieldSpec: FieldSpec) => Accessor<string>;
 export type ViewLayerDataFormatFunction = (fieldSpec: FieldSpec) => FormatConfig;
 export interface ViewLayer {
   id: string;
   params?: any;
   styleParams?: StyleParams;
   group: string;
-  fn: (options: ViewLayerFunctionOptions) => any;
+  fn: (options: ViewLayerFunctionOptions) => unknown;
   dataAccessFn?: ViewLayerDataAccessFunction;
   dataFormatsFn?: ViewLayerDataFormatFunction;
   legendDataFormatsFn?: ViewLayerDataFormatFunction;

frontend/src/lib/deck/props/color-map.ts

@@ -1,8 +1,8 @@
 import { colorCssToRgb } from 'lib/helpers';
-import _ from 'lodash';
+import memoize from 'lodash/memoize';
 import { Accessor, mergeTriggers, withTriggers } from './getters';
 
-const memoizedColorCssToRgb = _.memoize(colorCssToRgb);
+const memoizedColorCssToRgb = memoize(colorCssToRgb);
 
 export function dataColorMap<T>(dataSource: Accessor<T>, colorSource: Accessor<string, T>) {
   return withTriggers(

frontend/src/lib/deck/props/data-source.ts

@@ -1,11 +1,11 @@
-import _ from 'lodash';
+import memoize from 'lodash/memoize';
 import { MapboxGeoJSONFeature } from 'mapbox-gl';
 
 import { DataLoader } from 'lib/data-loader/data-loader';
 
 import { Accessor, withLoaderTriggers, withTriggers } from './getters';
 
-export const featureProperty = _.memoize(
+export const featureProperty = memoize(
   (field: string | Accessor<any, MapboxGeoJSONFeature>): Accessor<any, MapboxGeoJSONFeature> => {
     return typeof field === 'string' ? withTriggers((f) => f.properties[field], [field]) : field;
   },

frontend/src/lib/helpers.ts

@@ -1,5 +1,6 @@
 import * as d3 from 'd3-color';
-import _ from 'lodash';
+import mapValues from 'lodash/mapValues';
+import fromPairs from 'lodash/fromPairs';
 
 /**
  * Common helper functions
@@ -73,7 +74,7 @@ export function makeConfig<C, K extends string>(cfg: (C & { id: K })[]) {
 }
 
 export function makeColorConfig<K extends string>(cfg: Record<K, string>) {
-  return _.mapValues(cfg, (c) => ({ css: c, deck: colorCssToRgb(c) }));
+  return mapValues(cfg, (c) => ({ css: c, deck: colorCssToRgb(c) }));
 }
 
 // see discussion at https://stackoverflow.com/questions/23437476/in-typescript-how-to-check-if-a-string-is-numeric
@@ -86,7 +87,7 @@ export function truthyKeys<K extends string = string>(obj: Record<K, any>) {
 }
 
 export function fromKeys<K extends string, T>(keys: K[], values: T): Record<K, T> {
-  return _.fromPairs(keys.map((key) => [key, values])) as Record<K, T>;
+  return fromPairs(keys.map((key) => [key, values])) as Record<K, T>;
 }
 
 /**

frontend/src/lib/react/with-props.tsx

@@ -1,4 +1,4 @@
-import _ from 'lodash';
+import merge from 'lodash/merge';
 import { ComponentType, FC, memo } from 'react';
 
 /**
@@ -16,7 +16,7 @@ export function withProps<P, AppliedT extends Partial<P>>(
   displayName: string = 'WithProps',
 ): FC<Omit<P, keyof AppliedT> & Partial<AppliedT>> {
   const WithProps: FC<Omit<P, keyof AppliedT> & Partial<AppliedT>> = memo((props) => {
-    const mergedProps = _.merge({}, applyProps, props);
+    const mergedProps = merge({}, applyProps, props);
 
     return <ComponentClass {...(mergedProps as any)} />;
   });

frontend/src/lib/recoil/grouped-family.ts

@@ -1,4 +1,4 @@
-import _ from 'lodash';
+import fromPairs from 'lodash/fromPairs';
 import { selectorFamily, waitForAll } from 'recoil';
 import { RecoilReadableStateFamily } from './types';
 
@@ -14,7 +14,7 @@ export function groupedFamily<FVT, FPT>(
       (group) =>
       ({ get }) => {
         const groupParams = get(paramsFamily(group));
-        const deps = _.fromPairs(
+        const deps = fromPairs(
           groupParams.map((param) => [param, family(paramFn(group, param))]),
         );
         return get(waitForAll(deps));

frontend/src/map/tooltip/content/SolutionHoverDescription.tsx

@@ -3,7 +3,7 @@ import { VECTOR_COLOR_MAPS } from 'config/color-maps';
 import { MARINE_HABITATS_LOOKUP } from 'config/solutions/domains';
 import { DataItem } from 'details/features/detail-components';
 import { InteractionTarget, VectorTarget } from 'lib/data-map/interactions/use-interactions';
-import _ from 'lodash';
+import startCase from 'lodash/startCase';
 import { FC } from 'react';
 import { habitatColorMap } from 'state/layers/marine';
 import { landuseColorMap } from 'state/layers/terrestrial';
@@ -30,7 +30,7 @@ export const SolutionHoverDescription: FC<{
 
   return (
     <>
-      <Typography variant="body2">{_.startCase(viewLayer.id)}</Typography>
+      <Typography variant="body2">{startCase(viewLayer.id)}</Typography>
 
       {viewLayer.id === 'terrestrial' && (
         <>