chore: ESLint config for sorting imports (#141)

.changeset/warm-bags-lick.md

@@ -0,0 +1,5 @@
+---
+'@hyperdx/app': patch
+---
+
+Set up ESLint rule for sorting imports

.vscode/settings.json

@@ -1,5 +1,8 @@
 {
   "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll": true
+  },
   "[typescript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },

packages/app/.eslintrc.js

@@ -1,7 +1,7 @@
 module.exports = {
   root: true,
   parser: '@typescript-eslint/parser',
-  plugins: ['@typescript-eslint', 'prettier'],
+  plugins: ['simple-import-sort', '@typescript-eslint', 'prettier'],
   parserOptions: {
     tsconfigRootDir: __dirname,
     project: ['./tsconfig.json'],
@@ -20,5 +20,26 @@ module.exports = {
     'react/display-name': 'off',
     '@typescript-eslint/no-explicit-any': 'off',
     '@typescript-eslint/no-empty-function': 'off',
+    'simple-import-sort/imports': 'error',
+    'simple-import-sort/exports': 'error',
   },
+  overrides: [
+    {
+      files: ['**/*.js', '**/*.ts', '**/*.tsx'],
+      rules: {
+        'simple-import-sort/imports': [
+          'error',
+          {
+            groups: [
+              ['^react$', '^next', '^[a-z]', '^@'],
+              ['^\\.\\.(?!/?$)', '^\\.\\./?$'],
+              ['^\\./(?=.*/)(?!/?$)', '^\\.(?!/?$)', '^\\./?$'],
+              ['^.+\\.s?css$'],
+              ['^\\u0000'],
+            ],
+          },
+        ],
+      },
+    },
+  ],
 };

packages/app/package.json

@@ -110,6 +110,7 @@
     "eslint-config-next": "^12.3.3",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
     "jest": "^28.1.3",
     "ts-jest": "^28.0.7",
     "typescript": "^4.9.5"

packages/app/pages/_app.tsx

@@ -1,26 +1,24 @@
-import Head from 'next/head';
 import React, { useEffect } from 'react';
-import SSRProvider from 'react-bootstrap/SSRProvider';
 import type { AppProps } from 'next/app';
+import Head from 'next/head';
+import { NextAdapter } from 'next-query-params';
+import SSRProvider from 'react-bootstrap/SSRProvider';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { ReactQueryDevtools } from 'react-query/devtools';
 import { ToastContainer } from 'react-toastify';
-import { NextAdapter } from 'next-query-params';
 import { QueryParamProvider } from 'use-query-params';
-import { useConfirmModal } from '../src/useConfirm';
 
 import * as config from '../src/config';
+import { useConfirmModal } from '../src/useConfirm';
 import { QueryParamProvider as HDXQueryParamProvider } from '../src/useQueryParam';
 import { UserPreferencesProvider } from '../src/useUserPreferences';
 
 import 'react-toastify/dist/ReactToastify.css';
-
 import '../styles/globals.css';
 import '../styles/app.scss';
 import '../src/LandingPage.scss';
 
 const queryClient = new QueryClient();
-
 import HyperDX from '@hyperdx/browser';
 
 export default function MyApp({ Component, pageProps }: AppProps) {

packages/app/setup-jest.ts

@@ -1,4 +1,5 @@
-import '@testing-library/jest-dom';
 import setup from '@deploysentinel/jest-rtl-debugger/setup';
 
+import '@testing-library/jest-dom';
+
 setup();

packages/app/src/Alert.tsx

@@ -1,7 +1,8 @@
 import { sub } from 'date-fns';
 import { Form, FormSelectProps } from 'react-bootstrap';
+
 import api from './api';
-import type { AlertInterval, AlertChannelType } from './types';
+import type { AlertChannelType, AlertInterval } from './types';
 
 export function intervalToGranularity(interval: AlertInterval) {
   if (interval === '1m') return '1 minute' as const;

packages/app/src/AppNav.tsx

@@ -1,7 +1,9 @@
+import { useEffect, useState } from 'react';
 import Link from 'next/link';
-import cx from 'classnames';
-import { useQueryClient } from 'react-query';
 import Router, { useRouter } from 'next/router';
+import cx from 'classnames';
+import { Button } from 'react-bootstrap';
+import { useQueryClient } from 'react-query';
 import {
   NumberParam,
   StringParam,
@@ -10,15 +12,13 @@ import {
   withDefault,
 } from 'use-query-params';
 import HyperDX from '@hyperdx/browser';
-import { useEffect, useState } from 'react';
 
 import api from './api';
-import Logo from './Logo';
-import { API_SERVER_URL } from './config';
-import { useWindowSize } from './utils';
-import { Button } from 'react-bootstrap';
-import Icon from './Icon';
 import AuthLoadingBlocker from './AuthLoadingBlocker';
+import { API_SERVER_URL } from './config';
+import Icon from './Icon';
+import Logo from './Logo';
+import { useWindowSize } from './utils';
 
 const APP_PERFORMANCE_DASHBOARD_CONFIG = {
   id: '',

packages/app/src/AuthPage.tsx

@@ -1,16 +1,16 @@
-import { useForm, SubmitHandler } from 'react-hook-form';
-import { Button, Form } from 'react-bootstrap';
-import { NextSeo } from 'next-seo';
-import { API_SERVER_URL } from './config';
-import { useRouter } from 'next/router';
 import { useEffect } from 'react';
 import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { NextSeo } from 'next-seo';
 import cx from 'classnames';
+import { Button, Form } from 'react-bootstrap';
+import { SubmitHandler, useForm } from 'react-hook-form';
 
-import { PasswordCheck, CheckOrX } from './PasswordCheck';
-import LandingHeader from './LandingHeader';
-import * as config from './config';
 import api from './api';
+import { API_SERVER_URL } from './config';
+import * as config from './config';
+import LandingHeader from './LandingHeader';
+import { CheckOrX, PasswordCheck } from './PasswordCheck';
 
 type FormData = {
   email: string;

packages/app/src/AutocompleteInput.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { Form, InputGroup, OverlayTrigger } from 'react-bootstrap';
 import Fuse from 'fuse.js';
+import { Form, InputGroup, OverlayTrigger } from 'react-bootstrap';
 
 import { useDebounce } from './utils';
 

packages/app/src/ChartPage.tsx

@@ -1,24 +1,22 @@
-import Head from 'next/head';
-import { Button } from 'react-bootstrap';
-import { useQueryParam, StringParam, withDefault } from 'use-query-params';
 import { useCallback, useEffect, useState } from 'react';
-import { encodeArray, decodeArray } from 'serialize-query-params';
+import Head from 'next/head';
 import produce from 'immer';
+import { Button } from 'react-bootstrap';
+import { toast } from 'react-toastify';
+import type { QueryParamConfig } from 'serialize-query-params';
+import { decodeArray, encodeArray } from 'serialize-query-params';
+import { StringParam, useQueryParam, withDefault } from 'use-query-params';
 
-import { useQueryParam as useHDXQueryParam } from './useQueryParam';
+import AppNav from './AppNav';
+import { AggFn, ChartSeries, ChartSeriesForm } from './ChartUtils';
+import DSSelect from './DSSelect';
+import HDXLineChart from './HDXLineChart';
+import { LogTableWithSidePanel } from './LogTableWithSidePanel';
 import SearchTimeRangePicker, {
   parseTimeRangeInput,
 } from './SearchTimeRangePicker';
-import DSSelect from './DSSelect';
-import AppNav from './AppNav';
-
-import HDXLineChart from './HDXLineChart';
-import { ChartSeries, AggFn, ChartSeriesForm } from './ChartUtils';
-
-import type { QueryParamConfig } from 'serialize-query-params';
-import { LogTableWithSidePanel } from './LogTableWithSidePanel';
 import { parseTimeQuery, useTimeQuery } from './timeQuery';
-import { toast } from 'react-toastify';
+import { useQueryParam as useHDXQueryParam } from './useQueryParam';
 
 export const ChartSeriesParam: QueryParamConfig<ChartSeries[] | undefined> = {
   encode: (

packages/app/src/ChartUtils.tsx

@@ -1,12 +1,12 @@
 import { useMemo, useRef } from 'react';
+import { add } from 'date-fns';
 import Select from 'react-select';
 import AsyncSelect from 'react-select/async';
 
 import api from './api';
-import { add } from 'date-fns';
-import SearchInput from './SearchInput';
-import MetricTagFilterInput from './MetricTagFilterInput';
 import Checkbox from './Checkbox';
+import MetricTagFilterInput from './MetricTagFilterInput';
+import SearchInput from './SearchInput';
 
 export const SORT_ORDER = [
   { value: 'asc' as const, label: 'Ascending' },

packages/app/src/Clipboard.tsx

@@ -1,7 +1,7 @@
+import { useState } from 'react';
 import cx from 'classnames';
 import { Button } from 'react-bootstrap';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
-import { useState } from 'react';
 
 export default function Clipboard({
   text,

packages/app/src/ControllerSelect.tsx

@@ -1,8 +1,7 @@
+import type { Control } from 'react-hook-form';
 import { Controller } from 'react-hook-form';
 import Select from 'react-select';
 
-import type { Control } from 'react-hook-form';
-
 export default function ControllerSelect<
   Option extends { value: string | undefined; label: React.ReactNode },
 >({

packages/app/src/CreateLogAlertModal.tsx

@@ -1,28 +1,27 @@
+import { useEffect, useMemo, useState } from 'react';
 import { Button, Form, Modal } from 'react-bootstrap';
 import { Controller, useForm } from 'react-hook-form';
 import { toast } from 'react-toastify';
-import { useEffect, useMemo, useState } from 'react';
 
-import HDXLineChart from './HDXLineChart';
-import TabBar from './TabBar';
+import {
+  ALERT_CHANNEL_OPTIONS,
+  ALERT_INTERVAL_OPTIONS,
+  intervalToDateRange,
+  intervalToGranularity,
+  SlackChannelForm,
+} from './Alert';
 import api from './api';
 import { FieldSelect } from './ChartUtils';
-import { capitalizeFirstLetter } from './utils';
+import HDXLineChart from './HDXLineChart';
 import { genEnglishExplanation } from './queryv2';
-
+import TabBar from './TabBar';
 import type {
   AlertChannelType,
   AlertInterval,
   AlertType,
   LogView,
 } from './types';
-import {
-  intervalToGranularity,
-  intervalToDateRange,
-  ALERT_INTERVAL_OPTIONS,
-  ALERT_CHANNEL_OPTIONS,
-  SlackChannelForm,
-} from './Alert';
+import { capitalizeFirstLetter } from './utils';
 
 function AlertForm({
   alertId,

packages/app/src/DOMPlayer.tsx

@@ -1,8 +1,8 @@
-import throttle from 'lodash/throttle';
 import { useCallback, useEffect, useRef, useState } from 'react';
+import cx from 'classnames';
+import throttle from 'lodash/throttle';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { Replayer } from 'rrweb';
-import cx from 'classnames';
 
 import { useSearchEventStream } from './search';
 import { useDebugMode } from './utils';

packages/app/src/DashboardPage.tsx

@@ -1,4 +1,3 @@
-import Head from 'next/head';
 import {
   ForwardedRef,
   forwardRef,
@@ -8,12 +7,12 @@ import {
   useRef,
   useState,
 } from 'react';
-import RGL, { WidthProvider } from 'react-grid-layout';
-import produce from 'immer';
-import HDXMarkdownChart from './HDXMarkdownChart';
-import { Button, Form, Modal } from 'react-bootstrap';
-import { useHotkeys } from 'react-hotkeys-hook';
+import Head from 'next/head';
 import { useRouter } from 'next/router';
+import produce from 'immer';
+import { Button, Form, Modal } from 'react-bootstrap';
+import RGL, { WidthProvider } from 'react-grid-layout';
+import { useHotkeys } from 'react-hotkeys-hook';
 import { useQueryClient } from 'react-query';
 import { toast } from 'react-toastify';
 import {
@@ -23,37 +22,37 @@ import {
   withDefault,
 } from 'use-query-params';
 
-import HDXLineChart from './HDXLineChart';
-import AppNav from './AppNav';
-import SearchTimeRangePicker from './SearchTimeRangePicker';
-import { Granularity, convertDateRangeToGranularityString } from './ChartUtils';
-import { FloppyIcon, Histogram } from './SVGIcons';
-import SearchInput from './SearchInput';
-import { hashCode } from './utils';
-import TabBar from './TabBar';
-import HDXHistogramChart from './HDXHistogramChart';
 import api from './api';
-import { LogTableWithSidePanel } from './LogTableWithSidePanel';
-import { parseTimeQuery, useNewTimeQuery, useTimeQuery } from './timeQuery';
-import type { Alert } from './types';
+import AppNav from './AppNav';
+import { convertDateRangeToGranularityString, Granularity } from './ChartUtils';
+import type { Chart } from './EditChartForm';
 import {
-  EditSearchChartForm,
-  EditMarkdownChartForm,
   EditHistogramChartForm,
   EditLineChartForm,
+  EditMarkdownChartForm,
   EditNumberChartForm,
+  EditSearchChartForm,
   EditTableChartForm,
 } from './EditChartForm';
-import HDXNumberChart from './HDXNumberChart';
 import GranularityPicker from './GranularityPicker';
+import HDXHistogramChart from './HDXHistogramChart';
+import HDXLineChart from './HDXLineChart';
+import HDXMarkdownChart from './HDXMarkdownChart';
+import HDXNumberChart from './HDXNumberChart';
 import HDXTableChart from './HDXTableChart';
+import { LogTableWithSidePanel } from './LogTableWithSidePanel';
+import SearchInput from './SearchInput';
+import SearchTimeRangePicker from './SearchTimeRangePicker';
+import { FloppyIcon, Histogram } from './SVGIcons';
+import TabBar from './TabBar';
+import { parseTimeQuery, useNewTimeQuery, useTimeQuery } from './timeQuery';
+import type { Alert } from './types';
 import { useConfirm } from './useConfirm';
-
-import type { Chart } from './EditChartForm';
+import { hashCode } from './utils';
+import { ZIndexContext } from './zIndex';
 
 import 'react-grid-layout/css/styles.css';
 import 'react-resizable/css/styles.css';
-import { ZIndexContext } from './zIndex';
 
 const makeId = () => Math.floor(100000000 * Math.random()).toString(36);
 

packages/app/src/EditChartForm.tsx

@@ -1,27 +1,28 @@
-import { useMemo, useState, useEffect } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import produce from 'immer';
-import HDXMarkdownChart from './HDXMarkdownChart';
-import Select from 'react-select';
 import { Button, Form, InputGroup, Modal } from 'react-bootstrap';
-import * as config from './config';
-import type { Alert } from './types';
-import Checkbox from './Checkbox';
-import HDXLineChart from './HDXLineChart';
+import Select from 'react-select';
+
+import { intervalToGranularity } from './Alert';
 import {
   AGG_FNS,
   AggFn,
   ChartSeriesForm,
-  FieldSelect,
   convertDateRangeToGranularityString,
+  FieldSelect,
 } from './ChartUtils';
-import { hashCode, useDebounce } from './utils';
-import HDXHistogramChart from './HDXHistogramChart';
-import { LogTableWithSidePanel } from './LogTableWithSidePanel';
+import Checkbox from './Checkbox';
+import * as config from './config';
+import { METRIC_ALERTS_ENABLED } from './config';
 import EditChartFormAlerts from './EditChartFormAlerts';
+import HDXHistogramChart from './HDXHistogramChart';
+import HDXLineChart from './HDXLineChart';
+import HDXMarkdownChart from './HDXMarkdownChart';
 import HDXNumberChart from './HDXNumberChart';
 import HDXTableChart from './HDXTableChart';
-import { intervalToGranularity } from './Alert';
-import { METRIC_ALERTS_ENABLED } from './config';
+import { LogTableWithSidePanel } from './LogTableWithSidePanel';
+import type { Alert } from './types';
+import { hashCode, useDebounce } from './utils';
 
 export type Chart = {
   id: string;

packages/app/src/EditChartFormAlerts.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react';
-import { Form } from 'react-bootstrap';
-import { omit } from 'lodash';
 import produce from 'immer';
-import type { Alert } from './types';
+import { omit } from 'lodash';
+import { Form } from 'react-bootstrap';
 
 import {
-  ALERT_INTERVAL_OPTIONS,
   ALERT_CHANNEL_OPTIONS,
+  ALERT_INTERVAL_OPTIONS,
   SlackChannelForm,
 } from './Alert';
+import type { Alert } from './types';
 
 // Don't allow 1 minute alerts for charts
 const CHART_ALERT_INTERVAL_OPTIONS = omit(ALERT_INTERVAL_OPTIONS, '1m');

packages/app/src/FieldMultiSelect.tsx

@@ -1,4 +1,3 @@
-import AsyncSelect from 'react-select/async';
 import React, { MouseEventHandler, useMemo } from 'react';
 import {
   components,
@@ -7,12 +6,13 @@ import {
   OnChangeValue,
   Props,
 } from 'react-select';
+import AsyncSelect from 'react-select/async';
 import {
   SortableContainer,
   SortableContainerProps,
   SortableElement,
-  SortEndHandler,
   SortableHandle,
+  SortEndHandler,
 } from 'react-sortable-hoc';
 
 import { usePropertyOptions } from './ChartUtils';

packages/app/src/HDXHistogramChart.tsx

@@ -1,15 +1,15 @@
+import { memo, useCallback, useMemo, useRef } from 'react';
 import Link from 'next/link';
+import { useHotkeys } from 'react-hotkeys-hook';
 import {
+  Bar,
+  BarChart,
+  ResponsiveContainer,
+  Tooltip,
   XAxis,
   YAxis,
-  Tooltip,
-  ResponsiveContainer,
-  BarChart,
-  Bar,
 } from 'recharts';
 import { CategoricalChartState } from 'recharts/types/chart/generateCategoricalChart';
-import { memo, useCallback, useMemo, useRef } from 'react';
-import { useHotkeys } from 'react-hotkeys-hook';
 
 import api from './api';
 import { generateSearchUrl } from './utils';

packages/app/src/HDXLineChart.tsx

@@ -1,28 +1,27 @@
+import { memo, useEffect, useMemo, useRef, useState } from 'react';
+import Link from 'next/link';
+import cx from 'classnames';
+import { add, format } from 'date-fns';
+import pick from 'lodash/pick';
 import {
-  XAxis,
-  YAxis,
-  Tooltip,
-  ResponsiveContainer,
-  Line,
-  LineChart,
-  Legend,
-  ReferenceLine,
-  ReferenceArea,
-  Label,
   Bar,
   BarChart,
+  Label,
+  Legend,
+  Line,
+  LineChart,
+  ReferenceArea,
+  ReferenceLine,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
 } from 'recharts';
-import { memo, useEffect, useMemo, useRef, useState } from 'react';
-import { format, add } from 'date-fns';
-import cx from 'classnames';
-import Link from 'next/link';
-import pick from 'lodash/pick';
-
-import { AggFn, Granularity, convertGranularityToSeconds } from './ChartUtils';
-import { semanticKeyedColor, truncateMiddle, TIME_TOKENS } from './utils';
-import useUserPreferences, { TimeFormat } from './useUserPreferences';
 
 import api from './api';
+import { AggFn, convertGranularityToSeconds, Granularity } from './ChartUtils';
+import useUserPreferences, { TimeFormat } from './useUserPreferences';
+import { semanticKeyedColor, TIME_TOKENS, truncateMiddle } from './utils';
 
 function ExpandableLegendItem({ value, entry }: any) {
   const [expanded, setExpanded] = useState(false);

packages/app/src/HDXTableChart.tsx

@@ -1,3 +1,6 @@
+import { memo, useCallback, useMemo, useRef } from 'react';
+import { useRouter } from 'next/router';
+import cx from 'classnames';
 import {
   flexRender,
   getCoreRowModel,
@@ -5,12 +8,10 @@ import {
   useReactTable,
 } from '@tanstack/react-table';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { useCallback, useRef, useMemo, memo } from 'react';
-import cx from 'classnames';
-import { UNDEFINED_WIDTH } from './tableUtils';
-import { useRouter } from 'next/router';
+
 import api from './api';
 import { AggFn } from './ChartUtils';
+import { UNDEFINED_WIDTH } from './tableUtils';
 
 const Table = ({
   data,

packages/app/src/InstallInstructionsModal.tsx

@@ -1,8 +1,8 @@
 import cx from 'classnames';
 import { Button, Modal } from 'react-bootstrap';
 
-import Clipboard from './Clipboard';
 import api from './api';
+import Clipboard from './Clipboard';
 
 function CopyableValue({
   label = '',

packages/app/src/JoinTeamPage.tsx

@@ -1,7 +1,8 @@
-import { Button, Form } from 'react-bootstrap';
-import { NextSeo } from 'next-seo';
-import { API_SERVER_URL } from './config';
 import { useRouter } from 'next/router';
+import { NextSeo } from 'next-seo';
+import { Button, Form } from 'react-bootstrap';
+
+import { API_SERVER_URL } from './config';
 
 export default function JoinTeam() {
   const router = useRouter();

packages/app/src/LandingHeader.tsx

@@ -1,9 +1,9 @@
 import Link from 'next/link';
-import { Button, Container, Navbar, Nav, NavDropdown } from 'react-bootstrap';
+import { Button, Container, Nav, Navbar, NavDropdown } from 'react-bootstrap';
 
+import api from './api';
 import Logo from './Logo';
 import NavHoverDropdown from './NavHoverDropdown';
-import api from './api';
 
 export default function LandingHeader({ activeKey }: { activeKey: string }) {
   const { data: me } = api.useMe();

packages/app/src/LogSidePanel.tsx

@@ -1,59 +1,58 @@
-import Button from 'react-bootstrap/Button';
-import CopyToClipboard from 'react-copy-to-clipboard';
-import Drawer from 'react-modern-drawer';
-import Fuse from 'fuse.js';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import Link from 'next/link';
-import Timestamp from 'timestamp-nano';
 import cx from 'classnames';
+import { add, format } from 'date-fns';
+import Fuse from 'fuse.js';
 import get from 'lodash/get';
 import isPlainObject from 'lodash/isPlainObject';
 import mapValues from 'lodash/mapValues';
 import pickBy from 'lodash/pickBy';
-import stripAnsi from 'strip-ansi';
-import { ErrorBoundary } from 'react-error-boundary';
 import { Form, OverlayTrigger, Tooltip } from 'react-bootstrap';
-import { JSONTree } from 'react-json-tree';
-import { StringParam, withDefault } from 'serialize-query-params';
-import { add, format } from 'date-fns';
-import { toast } from 'react-toastify';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import Button from 'react-bootstrap/Button';
+import CopyToClipboard from 'react-copy-to-clipboard';
+import { ErrorBoundary } from 'react-error-boundary';
 import { useHotkeys } from 'react-hotkeys-hook';
+import { JSONTree } from 'react-json-tree';
+import Drawer from 'react-modern-drawer';
+import { toast } from 'react-toastify';
+import { StringParam, withDefault } from 'serialize-query-params';
+import stripAnsi from 'strip-ansi';
+import Timestamp from 'timestamp-nano';
 import { useQueryParam } from 'use-query-params';
-import type { StacktraceFrame, StacktraceBreadcrumb } from './types';
-import {
-  useShowMoreRows,
-  networkColumns,
-  stacktraceColumns,
-  breadcrumbColumns,
-  headerColumns,
-  StacktraceValue,
-  CollapsibleSection,
-  SectionWrapper,
-  NetworkBody,
-  LogSidePanelKbdShortcuts,
-} from './LogSidePanelElements';
-import { Table } from './components/Table';
 
+import { Table } from './components/Table';
 import api from './api';
+import { CurlGenerator } from './curlGenerator';
 import LogLevel from './LogLevel';
+import {
+  breadcrumbColumns,
+  CollapsibleSection,
+  headerColumns,
+  LogSidePanelKbdShortcuts,
+  NetworkBody,
+  networkColumns,
+  SectionWrapper,
+  stacktraceColumns,
+  StacktraceValue,
+  useShowMoreRows,
+} from './LogSidePanelElements';
 import SearchInput from './SearchInput';
+import SessionSubpanel from './SessionSubpanel';
 import TabBar from './TabBar';
 import TimelineChart from './TimelineChart';
-import SessionSubpanel from './SessionSubpanel';
+import { dateRangeToString } from './timeQuery';
+import type { StacktraceBreadcrumb, StacktraceFrame } from './types';
+import { Dictionary } from './types';
 import {
   formatDistanceToNowStrictShort,
   useFirstNonNullValue,
   useLocalStorage,
   useWindowSize,
 } from './utils';
-import { dateRangeToString } from './timeQuery';
+import { useZIndex, ZIndexContext } from './zIndex';
 
 import 'react-bootstrap-range-slider/dist/react-bootstrap-range-slider.css';
 import 'react-modern-drawer/dist/index.css';
-import { CurlGenerator } from './curlGenerator';
-import { Dictionary } from './types';
-import { ZIndexContext, useZIndex } from './zIndex';
-
 import styles from '../styles/LogSidePanel.module.scss';
 
 const HDX_BODY_FIELD = '_hdx_body';

packages/app/src/LogSidePanelElements.tsx

@@ -1,13 +1,15 @@
 import * as React from 'react';
 import { format } from 'date-fns';
-import { JSONTree } from 'react-json-tree';
-import type { StacktraceFrame, StacktraceBreadcrumb } from './types';
-import styles from '../styles/LogSidePanel.module.scss';
 import { CloseButton } from 'react-bootstrap';
-import { useLocalStorage } from './utils';
+import { JSONTree } from 'react-json-tree';
 import { ColumnDef, Row } from '@tanstack/react-table';
+
 import { TableCellButton } from './components/Table';
 import { UNDEFINED_WIDTH } from './tableUtils';
+import type { StacktraceBreadcrumb, StacktraceFrame } from './types';
+import { useLocalStorage } from './utils';
+
+import styles from '../styles/LogSidePanel.module.scss';
 
 export const CollapsibleSection = ({
   title,

packages/app/src/LogTable.tsx

@@ -1,34 +1,34 @@
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import cx from 'classnames';
+import { format } from 'date-fns';
+import { formatInTimeZone } from 'date-fns-tz';
+import curry from 'lodash/curry';
+import { Button, Modal } from 'react-bootstrap';
+import { CSVLink } from 'react-csv';
+import { useHotkeys } from 'react-hotkeys-hook';
+import stripAnsi from 'strip-ansi';
 import {
   ColumnDef,
   ColumnResizeMode,
   flexRender,
   getCoreRowModel,
-  TableOptions,
   Row as TableRow,
+  TableOptions,
   useReactTable,
 } from '@tanstack/react-table';
-import { formatInTimeZone } from 'date-fns-tz';
-import { format } from 'date-fns';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { useState, useCallback, useRef, useEffect, useMemo, memo } from 'react';
-import cx from 'classnames';
-import { Button, Modal } from 'react-bootstrap';
-import stripAnsi from 'strip-ansi';
-import { CSVLink } from 'react-csv';
-import curry from 'lodash/curry';
 
+import api from './api';
 import Checkbox from './Checkbox';
 import FieldMultiSelect from './FieldMultiSelect';
 import InstallInstructionsModal from './InstallInstructionsModal';
 import LogLevel from './LogLevel';
-import api from './api';
-import { useLocalStorage, usePrevious, useWindowSize } from './utils';
 import { useSearchEventStream } from './search';
-import { useHotkeys } from 'react-hotkeys-hook';
-import { TIME_TOKENS } from './utils';
-import useUserPreferences from './useUserPreferences';
-import type { TimeFormat } from './useUserPreferences';
 import { UNDEFINED_WIDTH } from './tableUtils';
+import type { TimeFormat } from './useUserPreferences';
+import useUserPreferences from './useUserPreferences';
+import { useLocalStorage, usePrevious, useWindowSize } from './utils';
+import { TIME_TOKENS } from './utils';
 
 import styles from '../styles/LogTable.module.scss';
 

packages/app/src/LogTableWithSidePanel.tsx

@@ -1,9 +1,9 @@
-import { useState, useCallback } from 'react';
+import { useCallback, useState } from 'react';
 import usePortal from 'react-useportal';
 
-import type { LogView } from './types';
 import LogSidePanel from './LogSidePanel';
 import LogTable from './LogTable';
+import type { LogView } from './types';
 import { useDisplayedColumns } from './useDisplayedColumns';
 
 export function LogTableWithSidePanel({

packages/app/src/PasswordResetPage.tsx

@@ -1,9 +1,10 @@
-import LandingHeader from './LandingHeader';
-import { Button, Form } from 'react-bootstrap';
-import { NextSeo } from 'next-seo';
-import { API_SERVER_URL } from './config';
-import { useRouter } from 'next/router';
 import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { NextSeo } from 'next-seo';
+import { Button, Form } from 'react-bootstrap';
+
+import { API_SERVER_URL } from './config';
+import LandingHeader from './LandingHeader';
 
 export default function PasswordResetPage({
   action,

packages/app/src/PatternSidePanel.tsx

@@ -1,15 +1,15 @@
-import Drawer from 'react-modern-drawer';
-import { useHotkeys } from 'react-hotkeys-hook';
 import { useCallback, useMemo, useState } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
+import Drawer from 'react-modern-drawer';
 import usePortal from 'react-useportal';
 import stripAnsi from 'strip-ansi';
 
 import LogSidePanel from './LogSidePanel';
 import { RawLogTable } from './LogTable';
 import { LogView } from './types';
+import { ZIndexContext } from './zIndex';
 
 import 'react-modern-drawer/dist/index.css';
-import { ZIndexContext } from './zIndex';
 
 export type Pattern = {
   pattern: string;

packages/app/src/PatternTable.tsx

@@ -1,3 +1,16 @@
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import cx from 'classnames';
+import {
+  Bar,
+  BarChart,
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import stripAnsi from 'strip-ansi';
 import {
   ColumnDef,
   flexRender,
@@ -6,26 +19,13 @@ import {
   useReactTable,
 } from '@tanstack/react-table';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { useState, useCallback, useRef, useEffect, useMemo, memo } from 'react';
-import cx from 'classnames';
-import stripAnsi from 'strip-ansi';
-import {
-  Line,
-  LineChart,
-  ResponsiveContainer,
-  XAxis,
-  YAxis,
-  Tooltip,
-  BarChart,
-  Bar,
-} from 'recharts';
 
-import LogLevel from './LogLevel';
 import api from './api';
-import { useWindowSize } from './utils';
-import { Pattern } from './PatternSidePanel';
 import { Granularity, timeBucketByGranularity } from './ChartUtils';
+import LogLevel from './LogLevel';
+import { Pattern } from './PatternSidePanel';
 import { UNDEFINED_WIDTH } from './tableUtils';
+import { useWindowSize } from './utils';
 
 const PatternTrendChartTooltip = (props: any) => {
   return null;

packages/app/src/PatternTableWithSidePanel.tsx

@@ -1,11 +1,10 @@
-import { useState, useCallback, memo } from 'react';
+import { memo, useCallback, useState } from 'react';
 import usePortal from 'react-useportal';
 
+import type { Pattern } from './PatternSidePanel';
 import PatternSidePanel from './PatternSidePanel';
 import PatternTable from './PatternTable';
 
-import type { Pattern } from './PatternSidePanel';
-
 function PatternTableWithSidePanel({
   config,
   isUTC,

packages/app/src/Playbar.tsx

@@ -1,15 +1,15 @@
-import Button from 'react-bootstrap/Button';
-import throttle from 'lodash/throttle';
-import ReactSlider from 'react-slider';
-import { OverlayTrigger, Tooltip } from 'react-bootstrap';
+import { useMemo, useRef, useState } from 'react';
 import { format } from 'date-fns';
-import { useMemo, useState, useRef } from 'react';
+import throttle from 'lodash/throttle';
+import { OverlayTrigger, Tooltip } from 'react-bootstrap';
+import Button from 'react-bootstrap/Button';
+import ReactSlider from 'react-slider';
 
 import Checkbox from './Checkbox';
+import { useSessionEvents } from './sessionUtils';
 import { getShortUrl, truncateText, useLocalStorage } from './utils';
 
 import 'react-bootstrap-range-slider/dist/react-bootstrap-range-slider.css';
-import { useSessionEvents } from './sessionUtils';
 
 function formatTs({
   ts,

packages/app/src/SaveSearchModal.tsx

@@ -1,4 +1,4 @@
-import { FormEvent, useState, useEffect } from 'react';
+import { FormEvent, useEffect, useState } from 'react';
 import { Button, Form, Modal } from 'react-bootstrap';
 import { toast } from 'react-toastify';
 

packages/app/src/SearchInput.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 
-import { genEnglishExplanation } from './queryv2';
 import api from './api';
 import AutocompleteInput from './AutocompleteInput';
+import { genEnglishExplanation } from './queryv2';
 
 export default function SearchInput({
   inputRef,

packages/app/src/SearchPage.tsx

@@ -1,52 +1,52 @@
+import {
+  FormEvent,
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import Head from 'next/head';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
+import { clamp, format, sub } from 'date-fns';
+import { formatInTimeZone } from 'date-fns-tz';
+import { Button } from 'react-bootstrap';
+import { ErrorBoundary } from 'react-error-boundary';
+import { useHotkeys } from 'react-hotkeys-hook';
+import { toast } from 'react-toastify';
 import {
-  BarChart,
   Bar,
+  BarChart,
+  ReferenceArea,
+  ResponsiveContainer,
+  Tooltip,
   XAxis,
   YAxis,
-  Tooltip,
-  ResponsiveContainer,
-  ReferenceArea,
 } from 'recharts';
 import {
-  useQueryParam,
   StringParam,
-  withDefault,
+  useQueryParam,
   useQueryParams,
+  withDefault,
 } from 'use-query-params';
-import {
-  FormEvent,
-  useState,
-  useCallback,
-  useRef,
-  useEffect,
-  useMemo,
-  memo,
-} from 'react';
-import { format, sub, clamp } from 'date-fns';
-import { formatInTimeZone } from 'date-fns-tz';
-import { toast } from 'react-toastify';
-import { useHotkeys } from 'react-hotkeys-hook';
-import { Button } from 'react-bootstrap';
-
-import 'react-modern-drawer/dist/index.css';
 
 import api from './api';
-import SearchTimeRangePicker from './SearchTimeRangePicker';
 import AppNav from './AppNav';
-import LogTable from './LogTable';
-import LogSidePanel from './LogSidePanel';
-import SearchInput from './SearchInput';
-import SaveSearchModal from './SaveSearchModal';
 import CreateLogAlertModal from './CreateLogAlertModal';
-import SearchPageActionBar from './SearchPageActionBar';
-import { useTimeQuery } from './timeQuery';
+import LogSidePanel from './LogSidePanel';
+import LogTable from './LogTable';
 import { MemoPatternTableWithSidePanel } from './PatternTableWithSidePanel';
-import { ErrorBoundary } from 'react-error-boundary';
+import SaveSearchModal from './SaveSearchModal';
+import SearchInput from './SearchInput';
+import SearchPageActionBar from './SearchPageActionBar';
+import SearchTimeRangePicker from './SearchTimeRangePicker';
+import { useTimeQuery } from './timeQuery';
 import { useDisplayedColumns } from './useDisplayedColumns';
 
+import 'react-modern-drawer/dist/index.css';
+
 const formatDate = (
   date: Date,
   isUTC: boolean,

packages/app/src/SearchPageActionBar.tsx

@@ -1,6 +1,6 @@
-import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
-import { Button } from 'react-bootstrap';
 import { useState } from 'react';
+import { Button } from 'react-bootstrap';
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 
 import { FloppyIcon } from './SVGIcons';
 import { useWindowSize } from './utils';

packages/app/src/SearchTimeRangePicker.tsx

@@ -1,14 +1,15 @@
-import { Form, InputGroup } from 'react-bootstrap';
-import cx from 'classnames';
-import { useRef, useEffect, useState } from 'react';
-import DatePicker from 'react-datepicker';
-import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
-import { endOfDay, format, sub } from 'date-fns';
+import { useEffect, useRef, useState } from 'react';
 import * as chrono from 'chrono-node';
+import cx from 'classnames';
+import { endOfDay, format, sub } from 'date-fns';
+import { Form, InputGroup } from 'react-bootstrap';
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
+import DatePicker from 'react-datepicker';
+import { useHotkeys } from 'react-hotkeys-hook';
+
+import { TimeFormat } from './useUserPreferences';
 
 import 'react-datepicker/dist/react-datepicker.css';
-import { useHotkeys } from 'react-hotkeys-hook';
-import { TimeFormat } from './useUserPreferences';
 
 export function parseTimeRangeInput(str: string): [Date | null, Date | null] {
   const parsedTimeResult = chrono.parse(str);

packages/app/src/SessionSidePanel.tsx

@@ -1,16 +1,16 @@
-import CopyToClipboard from 'react-copy-to-clipboard';
-import Drawer from 'react-modern-drawer';
-import { Button } from 'react-bootstrap';
-import { toast } from 'react-toastify';
-import { useHotkeys } from 'react-hotkeys-hook';
 import { useState } from 'react';
+import { Button } from 'react-bootstrap';
+import CopyToClipboard from 'react-copy-to-clipboard';
+import { useHotkeys } from 'react-hotkeys-hook';
+import Drawer from 'react-modern-drawer';
+import { toast } from 'react-toastify';
 
 import api from './api';
 import SessionSubpanel from './SessionSubpanel';
 import { formatDistanceToNowStrictShort } from './utils';
+import { ZIndexContext } from './zIndex';
 
 import 'react-modern-drawer/dist/index.css';
-import { ZIndexContext } from './zIndex';
 
 export default function SessionSidePanel({
   sessionId,

packages/app/src/SessionSubpanel.tsx

@@ -1,18 +1,18 @@
-import ReactDOM from 'react-dom';
-import throttle from 'lodash/throttle';
-import { NumberParam, StringParam, withDefault } from 'serialize-query-params';
-import { format } from 'date-fns';
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useVirtualizer } from '@tanstack/react-virtual';
+import { format } from 'date-fns';
+import throttle from 'lodash/throttle';
+import ReactDOM from 'react-dom';
+import { NumberParam, StringParam, withDefault } from 'serialize-query-params';
 import { useQueryParam } from 'use-query-params';
+import { useVirtualizer } from '@tanstack/react-virtual';
 
 import DOMPlayer from './DOMPlayer';
 import LogSidePanel from './LogSidePanel';
 import Playbar from './Playbar';
 import SearchInput from './SearchInput';
+import { useSessionEvents } from './sessionUtils';
 import TabBar from './TabBar';
 import { getShortUrl, usePrevious } from './utils';
-import { useSessionEvents } from './sessionUtils';
 
 function SessionEventList({
   config: { where, dateRange },

packages/app/src/SessionsPage.tsx

@@ -1,28 +1,28 @@
-import Head from 'next/head';
-import { Button, Form } from 'react-bootstrap';
-import {
-  useQueryParam,
-  StringParam,
-  withDefault,
-  useQueryParams,
-} from 'use-query-params';
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { NumberParam } from 'serialize-query-params';
+import Head from 'next/head';
+import { sub } from 'date-fns';
+import { Button, Form } from 'react-bootstrap';
 import { toast } from 'react-toastify';
+import { NumberParam } from 'serialize-query-params';
+import {
+  StringParam,
+  useQueryParam,
+  useQueryParams,
+  withDefault,
+} from 'use-query-params';
+import { useVirtualizer } from '@tanstack/react-virtual';
 
 import api from './api';
-import SearchTimeRangePicker from './SearchTimeRangePicker';
 import AppNav from './AppNav';
 import Dropdown from './Dropdown';
+import SearchInput from './SearchInput';
+import SearchTimeRangePicker from './SearchTimeRangePicker';
+import SessionSidePanel from './SessionSidePanel';
+import { parseTimeQuery, useTimeQuery } from './timeQuery';
 import {
   formatDistanceToNowStrictShort,
   formatHumanReadableDate,
 } from './utils';
-import { parseTimeQuery, useTimeQuery } from './timeQuery';
-import SearchInput from './SearchInput';
-import SessionSidePanel from './SessionSidePanel';
-import { sub } from 'date-fns';
-import { useVirtualizer } from '@tanstack/react-virtual';
 
 function SessionCard({
   email,

packages/app/src/TeamPage.tsx

@@ -1,24 +1,24 @@
+import { useState } from 'react';
 import Head from 'next/head';
 import Link from 'next/link';
 import {
   Badge,
   Button,
-  ToggleButton,
-  ToggleButtonGroup,
   Container,
   Form,
   Modal,
   Row,
   Spinner,
+  ToggleButton,
+  ToggleButtonGroup,
 } from 'react-bootstrap';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { toast } from 'react-toastify';
-import { useState } from 'react';
 
+import api from './api';
+import AppNav from './AppNav';
 import useUserPreferences from './useUserPreferences';
 import { TimeFormat } from './useUserPreferences';
-import AppNav from './AppNav';
-import api from './api';
 import { isValidUrl } from './utils';
 
 export default function TeamPage() {

packages/app/src/TimelineChart.tsx

@@ -1,7 +1,7 @@
+import { memo, RefObject, useEffect, useRef, useState } from 'react';
 import cx from 'classnames';
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import Tooltip from 'react-bootstrap/Tooltip';
-import { useEffect, useRef, useState, memo, RefObject } from 'react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 
 import { useDrag, usePrevious } from './utils';

packages/app/src/__test__/fixtures.ts

@@ -1,6 +1,6 @@
 import { Router } from 'next/router';
-import { LocationMock } from '@jedmao/location';
 import type { UrlObject } from 'url';
+import { LocationMock } from '@jedmao/location';
 
 type PartialRouter = Partial<Router>;
 

packages/app/src/__test__/timeQuery.test.tsx

@@ -1,17 +1,19 @@
+import * as React from 'react';
+import { useImperativeHandle } from 'react';
+import { useRouter } from 'next/router';
+import { NextAdapter } from 'next-query-params';
+import { QueryParamProvider } from 'use-query-params';
+import { LocationMock } from '@jedmao/location';
+import { render } from '@testing-library/react';
+
 import {
   getLiveTailTimeRange,
   useNewTimeQuery,
   type UseTimeQueryInputType,
   type UseTimeQueryReturnType,
 } from '../timeQuery';
-import { useRouter } from 'next/router';
-import { render } from '@testing-library/react';
-import * as React from 'react';
-import { useImperativeHandle } from 'react';
-import { QueryParamProvider } from 'use-query-params';
-import { NextAdapter } from 'next-query-params';
+
 import { TestRouter } from './fixtures';
-import { LocationMock } from '@jedmao/location';
 
 // Setting a fixed time of 10/03/23 at 12pm EDT
 const INITIAL_DATE_STRING =

packages/app/src/api.ts

@@ -1,5 +1,7 @@
 import Router from 'next/router';
+import type { HTTPError } from 'ky';
 import ky from 'ky-universal';
+import type { UseQueryOptions } from 'react-query';
 import {
   useInfiniteQuery,
   useMutation,
@@ -8,17 +10,14 @@ import {
 } from 'react-query';
 
 import { API_SERVER_URL } from './config';
-
 import type {
   AlertChannel,
   AlertInterval,
-  AlertType,
   AlertSource,
+  AlertType,
   LogView,
   Session,
 } from './types';
-import type { HTTPError } from 'ky';
-import type { UseQueryOptions } from 'react-query';
 
 type ApiAlertInput = {
   channel: AlertChannel;

packages/app/src/components/Table.tsx

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import cx from 'classnames';
 import {
-  useReactTable,
-  getCoreRowModel,
-  flexRender,
   ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
 } from '@tanstack/react-table';
+
 import { UNDEFINED_WIDTH } from '../tableUtils';
 
 import styles from './Table.module.scss';

packages/app/src/search.ts

@@ -1,6 +1,6 @@
-import { fetchEventSource } from '@microsoft/fetch-event-source';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { UseQueryOptions } from 'react-query';
+import { fetchEventSource } from '@microsoft/fetch-event-source';
 
 import { API_SERVER_URL } from './config';
 import { usePrevious } from './utils';

packages/app/src/timeQuery.ts

@@ -1,23 +1,24 @@
-import { useRouter } from 'next/router';
-import * as chrono from 'chrono-node';
 import {
-  useQueryParam,
-  StringParam,
-  withDefault,
-  NumberParam,
-  useQueryParams,
-} from 'use-query-params';
-import {
-  useState,
+  Dispatch,
+  SetStateAction,
   useCallback,
   useEffect,
   useMemo,
   useRef,
-  Dispatch,
-  SetStateAction,
+  useState,
 } from 'react';
-import { format, sub, startOfSecond, isValid } from 'date-fns';
+import { useRouter } from 'next/router';
+import * as chrono from 'chrono-node';
+import { format, isValid, startOfSecond, sub } from 'date-fns';
 import { formatInTimeZone } from 'date-fns-tz';
+import {
+  NumberParam,
+  StringParam,
+  useQueryParam,
+  useQueryParams,
+  withDefault,
+} from 'use-query-params';
+
 import { usePrevious } from './utils';
 
 const LIVE_TAIL_TIME_QUERY = 'Live Tail';

packages/app/src/useConfirm.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { atom, useAtomValue, useSetAtom } from 'jotai';
-import Modal from 'react-bootstrap/Modal';
 import Button from 'react-bootstrap/Button';
+import Modal from 'react-bootstrap/Modal';
 
 type ConfirmAtom = {
   message: string;

packages/app/src/useNextraSeoProps.ts

@@ -1,4 +1,5 @@
 import { useConfig } from 'nextra-theme-docs';
+
 import { useIsBlog, useIsDocs, useIsTerms } from './utils';
 
 export default function useNextraSeoProps() {

packages/app/src/useQueryParam.tsx

@@ -1,4 +1,3 @@
-import { useRouter } from 'next/router';
 import {
   createContext,
   useCallback,
@@ -6,6 +5,8 @@ import {
   useEffect,
   useState,
 } from 'react';
+import { useRouter } from 'next/router';
+
 import { usePrevious } from './utils';
 
 type QueryParamContextType = Record<string, any> & {

packages/app/src/useUserPreferences.tsx

@@ -1,4 +1,5 @@
-import React, { useContext, useState, useEffect } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
+
 import { useLocalStorage } from './utils';
 export type TimeFormat = '12h' | '24h';
 

packages/app/src/utils.tsx

@@ -1,7 +1,6 @@
-import { format as fnsFormat, formatDistanceToNowStrict } from 'date-fns';
+import { useEffect, useRef, useState } from 'react';
 import { useRouter } from 'next/router';
-import { useState, useEffect, useRef } from 'react';
-
+import { format as fnsFormat, formatDistanceToNowStrict } from 'date-fns';
 import type { MutableRefObject } from 'react';
 
 import { dateRangeToString } from './timeQuery';

yarn.lock

@@ -4655,7 +4655,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@>=16", "@types/react@>=16.9.11", "@types/react@^17", "@types/react@^17.0.52":
+"@types/react@*", "@types/react@17.0.52", "@types/react@>=16", "@types/react@>=16.9.11", "@types/react@^17", "@types/react@^17.0.52":
   version "17.0.52"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.52.tgz#10d8b907b5c563ac014a541f289ae8eaa9bf2e9b"
   integrity sha512-vwk8QqVODi0VaZZpDXQCmEmiOuyjEFPY7Ttaw5vjM112LOq37yz1CDJGrRJwA1fYEq4Iitd5rnjd1yWAc/bT+A==
@@ -7397,6 +7397,11 @@ eslint-plugin-react@^7.31.7:
     semver "^6.3.0"
     string.prototype.matchall "^4.0.8"
 
+eslint-plugin-simple-import-sort@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-simple-import-sort/-/eslint-plugin-simple-import-sort-10.0.0.tgz#cc4ceaa81ba73252427062705b64321946f61351"
+  integrity sha512-AeTvO9UCMSNzIHRkg8S6c3RPy5YEwKWSQPx3DYghLedo2ZQxowPFLGDN1AZ2evfg6r6mjBSZSLxLFsWSu3acsw==
+
 eslint-scope@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"