Merge pull request #4 from microsoft/refactor/remove_default_react_import

Remove default react import

src/arquero/ArqueroTable.tsx

@@ -3,7 +3,7 @@
  * Licensed under the MIT license. See LICENSE file in the project.
  */
 import { table } from 'arquero'
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 
 export interface ArqueroTableProps {
 	table: table

src/components/App/App.tsx

@@ -6,7 +6,7 @@ import { LazyCachingSwitch } from './LazyCachingSwitch'
 import { CommandBar } from './commands'
 import { usePresetData, useTestFiles, useUrlFiles } from './hooks'
 import { GraphViewerPage, DataManagerPage } from './pages'
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 import { HashRouter, Route } from 'react-router-dom'
 import styled from 'styled-components'
 

src/components/App/LazyCachingSwitch.tsx

@@ -2,7 +2,14 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import React, { useEffect, useMemo, useState } from 'react'
+import {
+	Children,
+	CSSProperties,
+	isValidElement,
+	useEffect,
+	useMemo,
+	useState,
+} from 'react'
 import { withRouter } from 'react-router-dom'
 
 /**
@@ -25,8 +32,8 @@ export const LazyCachingSwitch = withRouter(({ location, children }) => {
 		let isDirty = false
 		// first route match wins, mimicking behavior from Switch
 		let foundFirst = false
-		React.Children.forEach(children, child => {
-			if (!foundFirst && React.isValidElement(child)) {
+		Children.forEach(children, child => {
+			if (!foundFirst && isValidElement(child)) {
 				const { path } = child.props
 				const matched = location.pathname.match(`^${path}$`)
 				if (matched) {
@@ -47,11 +54,11 @@ export const LazyCachingSwitch = withRouter(({ location, children }) => {
 
 	// second iteration creates a set of rendered components from the cache, hidden if not matched
 	const rendered = useMemo(() => {
-		return React.Children.map(children, child => {
-			if (React.isValidElement(child)) {
+		return Children.map(children, child => {
+			if (isValidElement(child)) {
 				const { path } = child.props
 				const matched = location.pathname.match(`^${path}$`)
-				const style: React.CSSProperties = {}
+				const style: CSSProperties = {}
 				if (!matched) {
 					style.display = 'none'
 				}

src/components/App/PivotContent.tsx

@@ -4,7 +4,7 @@
  */
 import { BrowserOptions } from '../../types'
 import { Pivot, PivotItem } from '@fluentui/react'
-import React, { memo, useCallback } from 'react'
+import { memo, useCallback } from 'react'
 import styled from 'styled-components'
 // control style height for pivot items, doesn't seem like option in Pivot Style Props?
 import './Pivot.css'

src/components/App/commands/CommandBar.tsx

@@ -4,7 +4,7 @@
  */
 import { ModalButtons } from './modals/ModalButtons'
 import { Navigation } from './navigation'
-import React from 'react'
+
 import styled from 'styled-components'
 import { COMMANDBAR_HEIGHT, COMMANDBAR_MARGIN, PANEL_WIDTH } from '~/styles'
 

src/components/App/commands/modals/ModalButton.tsx

@@ -3,7 +3,7 @@
  * Licensed under the MIT license. See LICENSE file in the project.
  */
 import { IconButton } from '@fluentui/react'
-import React, { memo, useCallback } from 'react'
+import { memo, useCallback } from 'react'
 export interface ModalButtonProp extends ButtonOptions {
 	onClick: (title: string) => void
 }

src/components/App/commands/modals/ModalButtons.tsx

@@ -8,7 +8,7 @@ import { ModalButton, ButtonOptions } from './ModalButton'
 import { ModalContainer } from './ModalContainer'
 import { FileDropPanel } from './panels/FileDropPanel'
 import { SettingsContainer } from './panels/SettingsContainer'
-import React, { memo, useState, useCallback, useMemo } from 'react'
+import { memo, useState, useCallback, useMemo } from 'react'
 import styled from 'styled-components'
 
 const buttonMap: ButtonOptions[] = [

src/components/App/commands/modals/ModalContainer.tsx

@@ -14,7 +14,7 @@ import {
 	IIconProps,
 	Text,
 } from '@fluentui/react'
-import React, { memo } from 'react'
+import { memo } from 'react'
 import styled from 'styled-components'
 import { variants } from '~/styles'
 

src/components/App/commands/modals/panels/FileDropPanel.tsx

@@ -5,7 +5,7 @@
 import { QuickDrop } from '../../../../QuickDrop'
 import { FileUploadMessage } from './FileUploadMessage'
 import { DefaultButton } from '@fluentui/react'
-import React, { useCallback } from 'react'
+import { useCallback } from 'react'
 import styled from 'styled-components'
 import {
 	useArqueroBigTable,

src/components/App/commands/modals/panels/FileUploadMessage.tsx

@@ -3,7 +3,7 @@
  * Licensed under the MIT license. See LICENSE file in the project.
  */
 import { Separator } from '@fluentui/react'
-import React, { memo, useCallback } from 'react'
+import { memo, useCallback } from 'react'
 import styled from 'styled-components'
 import { DataFile } from '~/types'
 

src/components/App/commands/modals/panels/SettingsContainer.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import React, { useCallback } from 'react'
+import { useCallback } from 'react'
 import styled from 'styled-components'
 import { Settings } from '~/components/Settings'
 import { useSettings, useSettingsGroups } from '~/state'

src/components/App/commands/navigation/index.tsx

@@ -3,7 +3,7 @@
  * Licensed under the MIT license. See LICENSE file in the project.
  */
 import { RouterLinkIconButton } from '../../../../controls/RouterLinkIconButton'
-import React from 'react'
+
 import { useLocation } from 'react-router-dom'
 
 export const Navigation: React.FC = () => {

src/components/App/pages/DataManagerPage/DataManagerPage.tsx

@@ -4,15 +4,16 @@
  */
 import { FileList } from '../../../FileList'
 import { LeftSidePanel } from './LeftSidePanel'
-import React from 'react'
+import { FC, Suspense } from 'react'
+
 import styled from 'styled-components'
 
-export const DataManagerPage: React.FC = () => {
+export const DataManagerPage: FC = () => {
 	return (
 		<Container>
-			<React.Suspense fallback={<Placeholder />}>
+			<Suspense fallback={<Placeholder />}>
 				<LeftSidePanel />
-			</React.Suspense>
+			</Suspense>
 			<Content>
 				<DropContainer>
 					<FileList />

src/components/App/pages/DataManagerPage/LeftSidePanel.tsx

@@ -4,7 +4,7 @@
  */
 import { PreviewGraph } from '../../../PreviewGraph'
 import { QuickDrop } from '../../../QuickDrop'
-import React from 'react'
+
 import styled from 'styled-components'
 import { useSettings } from '~/state'
 import { PANEL_WIDTH } from '~/styles'

src/components/App/pages/GraphViewerPage/GraphPanel.tsx

@@ -4,7 +4,7 @@
  */
 import { GraphViewer } from '../../../GraphViewer'
 import { GraphRenderer } from '@graspologic/renderer'
-import React, { useCallback, memo } from 'react'
+import { useCallback, memo } from 'react'
 import styled from 'styled-components'
 import { useArqueroHoveredNodes } from '~/arquero'
 import { useDynamicCameraBounds, useInputGraph } from '~/hooks/graph'

src/components/App/pages/GraphViewerPage/GraphViewerPage.tsx

@@ -12,7 +12,7 @@ import {
 	useLayoutStyle,
 	useResizeHandlers,
 } from './hooks'
-import React, { useRef, useMemo, useState, memo } from 'react'
+import { Suspense, useRef, useMemo, useState, memo } from 'react'
 import { RndResizeStartCallback } from 'react-rnd'
 import styled from 'styled-components'
 
@@ -46,22 +46,22 @@ export const GraphViewerPage: React.FC = memo(function GraphViewerPage() {
 
 	return (
 		<Container ref={ref}>
-			<React.Suspense fallback={<Placeholder />}>
+			<Suspense fallback={<Placeholder />}>
 				<LeftSidePanel
 					style={leftSidePanelStyle}
 					height={height}
 					width={leftPanelWidth}
 				/>
-			</React.Suspense>
-			<React.Suspense fallback={<Placeholder />}>
+			</Suspense>
+			<Suspense fallback={<Placeholder />}>
 				<RightSidePanel style={rightSidePanelStyle} />
-			</React.Suspense>
+			</Suspense>
 			<GraphContainer style={graphContainerStyle}>
-				<React.Suspense fallback={<StyledSpinnner />}>
+				<Suspense fallback={<StyledSpinnner />}>
 					<GraphPanelContainer style={graphStyle}>
 						<GraphPanel width={width} height={graphHeight} />
 					</GraphPanelContainer>
-				</React.Suspense>
+				</Suspense>
 				<ResizableBrowser
 					width={browserWidth}
 					handleResizeStop={handleResizeStop}

src/components/App/pages/GraphViewerPage/ResizableBrowser.tsx

@@ -8,7 +8,7 @@ import { PivotContent } from '../../PivotContent'
 import { IPosition } from './hooks'
 import { DIRECTION } from './hooks/useResizeHandlers'
 import { IconButton } from '@fluentui/react'
-import React, { memo, useMemo, useCallback, useState } from 'react'
+import { memo, useMemo, useCallback, useState } from 'react'
 import { Rnd, RndResizeStartCallback } from 'react-rnd'
 import styled from 'styled-components'
 import { HEADER_HEIGHT } from '~/styles'

src/components/App/pages/GraphViewerPage/SidePanel/LeftSidePanel.tsx

@@ -7,7 +7,7 @@ import { BreadcrumbPanel } from './PanelComponents/BreadcrumbPanel'
 import { CommunityPanel } from './PanelComponents/CommunityPanel'
 import { useDimensions } from '@essex-js-toolkit/hooks'
 import { Text } from '@fluentui/react'
-import React, { useMemo, useRef, memo } from 'react'
+import { useMemo, useRef, memo } from 'react'
 import styled from 'styled-components'
 import { useArqueroHoveredNodes, useArqueroSelectedNodes } from '~/arquero'
 import { useDataBounds, useStaticInputGraph } from '~/hooks/graph'

src/components/App/pages/GraphViewerPage/SidePanel/PanelComponents/BreadcrumbPanel.tsx

@@ -8,7 +8,7 @@ import {
 	IBreadcrumbStyles,
 	IStyleFunctionOrObject,
 } from '@fluentui/react'
-import React, { useCallback, useEffect, useMemo } from 'react'
+import { useCallback, useEffect, useMemo } from 'react'
 import { ROOT_COMMUNITY_ID } from '~/constants'
 import {
 	useNavigationState,

src/components/App/pages/GraphViewerPage/SidePanel/PanelComponents/ColumnEditorPanel.tsx

@@ -4,7 +4,7 @@
  */
 import { ColumnEditor } from '../../../../../ColumnEditor'
 import { DefaultButton } from '@fluentui/react'
-import React, { useCallback } from 'react'
+import { useCallback } from 'react'
 import styled from 'styled-components'
 import {
 	useArqueroBigTable,

src/components/App/pages/GraphViewerPage/SidePanel/PanelComponents/CommunityPanel.tsx

@@ -3,7 +3,7 @@
  * Licensed under the MIT license. See LICENSE file in the project.
  */
 import { CommunityList } from '../../../../../CommunityList'
-import React from 'react'
+
 import { useArqueroVisibleCommunities } from '~/arquero'
 
 export const CommunityPanel: React.FC = () => {

src/components/App/pages/GraphViewerPage/SidePanel/PanelComponents/EdgeColorControlsPanel.tsx

@@ -3,7 +3,7 @@
  * Licensed under the MIT license. See LICENSE file in the project.
  */
 import { EdgeColorControls } from '../../../../../controls/EdgeColorControls'
-import React from 'react'
+
 import styled from 'styled-components'
 
 export const EdgeColorControlsPanel = () => {

src/components/App/pages/GraphViewerPage/SidePanel/PanelComponents/EdgeOpacityControlsPanel.tsx

@@ -3,7 +3,7 @@
  * Licensed under the MIT license. See LICENSE file in the project.
  */
 import { EdgeOpacityControls } from '../../../../../controls/EdgeOpacityControls'
-import React from 'react'
+
 import styled from 'styled-components'
 
 export const EdgeOpacityControlsPanel = () => {

src/components/App/pages/GraphViewerPage/SidePanel/PanelComponents/EdgeSizeControlsPanel.tsx

@@ -3,7 +3,7 @@
  * Licensed under the MIT license. See LICENSE file in the project.
  */
 import { EdgeSizeControls } from '../../../../../controls/EdgeSizeControls'
-import React from 'react'
+
 import styled from 'styled-components'
 
 export const EdgeSizeControlsPanel = () => {

src/components/App/pages/GraphViewerPage/SidePanel/PanelComponents/HierarchyNav.tsx

@@ -5,7 +5,7 @@
 import { ActionButton, IIconProps } from '@fluentui/react'
 import { SelectionState } from '@thematic/core'
 import { useThematic } from '@thematic/react'
-import React, { memo, useMemo, useCallback } from 'react'
+import { memo, useMemo, useCallback } from 'react'
 
 import './HierarchyNav.css'
 import styled from 'styled-components'

src/components/App/pages/GraphViewerPage/SidePanel/PanelComponents/Layout.tsx

@@ -5,7 +5,7 @@
 import { UmapLayout } from './UmapLayout'
 import { DefaultButton, Spinner, Toggle } from '@fluentui/react'
 import { all, not, table } from 'arquero'
-import React, { memo, useCallback, useState } from 'react'
+import { memo, useCallback, useState } from 'react'
 import styled from 'styled-components'
 import {
 	useArqueroBigTable,

src/components/App/pages/GraphViewerPage/SidePanel/PanelComponents/NodeColorControlsPanel.tsx

@@ -3,7 +3,7 @@
  * Licensed under the MIT license. See LICENSE file in the project.
  */
 import { NodeColorControls } from '../../../../../controls/NodeColorControls'
-import React from 'react'
+
 import styled from 'styled-components'
 
 export const NodeColorControlsPanel = () => {

src/components/App/pages/GraphViewerPage/SidePanel/PanelComponents/NodeDetailsPanel.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import React, { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import styled from 'styled-components'
 import { useHoveredNode, useSelectedCommunity } from '~/state'
 import { useVisibleNodeMap } from '~/state/caches'

src/components/App/pages/GraphViewerPage/SidePanel/PanelComponents/NodeHoverHeader.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 import styled from 'styled-components'
 import { useHoveredNode, useSelectedCommunity } from '~/state'
 import { useVisibleNodeMap } from '~/state/caches'

src/components/App/pages/GraphViewerPage/SidePanel/PanelComponents/NodeListItem.tsx

@@ -4,7 +4,7 @@
  */
 import { TableRowStyles } from '../../../../../CommunityList/types'
 import { SelectionState } from '@thematic/core'
-import React, { useCallback } from 'react'
+import { useCallback } from 'react'
 import styled from 'styled-components'
 
 interface CommunityRowProps {

src/components/App/pages/GraphViewerPage/SidePanel/PanelComponents/NodeOpacityControlsPanel.tsx

@@ -3,7 +3,7 @@
  * Licensed under the MIT license. See LICENSE file in the project.
  */
 import { NodeOpacityControls } from '../../../../../controls/NodeOpacityControls'
-import React from 'react'
+
 import styled from 'styled-components'
 
 export const NodeOpacityControlsPanel = () => {

src/components/App/pages/GraphViewerPage/SidePanel/PanelComponents/NodeSizeControlsPanel.tsx

@@ -3,7 +3,7 @@
  * Licensed under the MIT license. See LICENSE file in the project.
  */
 import { NodeSizeControls } from '../../../../../controls/NodeSizeControls'
-import React from 'react'
+
 import styled from 'styled-components'
 
 export const NodeSizeControlsPanel = () => {

src/components/App/pages/GraphViewerPage/SidePanel/PanelComponents/SearchItemHeader.tsx

@@ -3,7 +3,7 @@
  * Licensed under the MIT license. See LICENSE file in the project.
  */
 import { Text, MessageBar, MessageBarType } from '@fluentui/react'
-import React, { useState, useMemo } from 'react'
+import { useState, useMemo } from 'react'
 import styled from 'styled-components'
 
 interface ItemHeaderProps {

src/components/App/pages/GraphViewerPage/SidePanel/PanelComponents/SearchItems.tsx

@@ -25,7 +25,7 @@ import { NodeListItem } from './NodeListItem'
 import { SearchItemHeader } from './SearchItemHeader'
 import { Pivot, PivotItem } from '@fluentui/react'
 import { desc, from } from 'arquero'
-import React, { useCallback, useMemo } from 'react'
+import { useCallback, useMemo } from 'react'
 import styled from 'styled-components'
 
 const ItemStyles = {

src/components/App/pages/GraphViewerPage/SidePanel/PanelComponents/SearchPanel.tsx

@@ -17,7 +17,7 @@ import { SearchItems } from './SearchItems'
 import { SearchPanelHeader } from './SearchPanelHeader'
 import { CollapsiblePanel } from '@essex-js-toolkit/themed-components'
 import { op, table } from 'arquero'
-import React, { useCallback, useState, useMemo } from 'react'
+import { useCallback, useState, useMemo } from 'react'
 import styled from 'styled-components'
 
 export interface SearchByIndex {

src/components/App/pages/GraphViewerPage/SidePanel/PanelComponents/SearchPanelHeader.tsx

@@ -4,7 +4,7 @@
  */
 import { SearchBox, IconButton } from '@fluentui/react'
 import { useDebounceFn } from 'ahooks'
-import React, { useCallback } from 'react'
+import { useCallback } from 'react'
 import styled from 'styled-components'
 
 const searchBoxStyle = {

src/components/App/pages/GraphViewerPage/SidePanel/PanelComponents/UmapLayout.tsx

@@ -3,7 +3,7 @@
  * Licensed under the MIT license. See LICENSE file in the project.
  */
 import { DefaultButton } from '@fluentui/react'
-import React, { memo } from 'react'
+import { memo } from 'react'
 import { AUTOLAYOUT_URL } from '~/constants'
 
 export interface UmapLayoutProps {

src/components/App/pages/GraphViewerPage/SidePanel/RightSidePanel.tsx

@@ -25,7 +25,7 @@ import {
 	CollapsiblePanelContainer,
 } from '@essex-js-toolkit/themed-components'
 import { format } from 'd3-format'
-import React, { useCallback } from 'react'
+import { useCallback } from 'react'
 import styled from 'styled-components'
 import { useEdgeCount, useNodeCount } from '~/arquero'
 import { QuickDrop } from '~/components/QuickDrop'

src/components/App/pages/GraphViewerPage/StyledSpinner.tsx

@@ -3,7 +3,7 @@
  * Licensed under the MIT license. See LICENSE file in the project.
  */
 import { Spinner, SpinnerSize } from '@fluentui/react'
-import React from 'react'
+
 import { SPINNER_STYLE } from '~/styles'
 
 export const StyledSpinnner = () => {

src/components/App/pages/GraphViewerPage/hooks/useLayoutStyle.ts

@@ -2,7 +2,7 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 import { HEADER_HEIGHT } from '~/styles'
 interface ILayoutStyle {
 	leftSidePanelStyle: React.CSSProperties

src/components/App/pages/GraphViewerPage/hooks/useResizeHandlers.ts

@@ -3,7 +3,7 @@
  * Licensed under the MIT license. See LICENSE file in the project.
  */
 import { IPosition } from './useGraphDimensions'
-import React, { useCallback } from 'react'
+import { useCallback } from 'react'
 import { ResizableDelta, Position } from 'react-rnd'
 import { COMMANDBAR_HEIGHT } from '~/styles'
 export enum CSSFilter {

src/components/ColumnEditor/ColumnEditor.tsx

@@ -4,7 +4,7 @@
  */
 import { ColumnDef } from '../../types'
 import { IconButton } from '@fluentui/react'
-import React, { useCallback, useMemo } from 'react'
+import { useCallback, useMemo } from 'react'
 import styled from 'styled-components'
 import { useArqueroColumnList, useArqueroRemoveColumns } from '~/arquero'
 import { useNodeColorEncoding, useBrowserColumns } from '~/state'

src/components/CommunityLineup/CommunityLineup.tsx

@@ -4,7 +4,7 @@
  */
 import { ItemMap, CommunityLineupProps } from './types'
 import { ThematicLineup, ColumnConfig } from '@essex-js-toolkit/thematic-lineup'
-import React, { memo, useCallback, useMemo } from 'react'
+import { memo, useCallback, useMemo } from 'react'
 import styled from 'styled-components'
 import './CommunityLineup.css'
 import {

src/components/CommunityList/Cell/Bar.tsx

@@ -5,7 +5,7 @@
 import { useBarTextForegroundColor, useHoveredColor } from '../hooks'
 import { empty, zero, blank } from './common/defaultParams'
 import { CellComponentProps } from './common/types'
-import React from 'react'
+
 
 export const Bar: React.FC<CellComponentProps> = ({
 	community,

src/components/CommunityList/Cell/Cell.tsx

@@ -6,7 +6,7 @@ import { Column, ElementStyles, Mark } from '../types'
 import { Bar } from './Bar'
 import { Circle } from './Circle'
 import { Text } from './Text'
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 import { Community } from '~/types'
 
 interface CellProps {

src/components/CommunityList/Cell/Circle.tsx

@@ -5,7 +5,7 @@
 import { useHoveredColor } from '../hooks'
 import { empty, blank, zero } from './common/defaultParams'
 import { CellComponentProps } from './common/types'
-import React from 'react'
+
 
 export const Circle: React.FC<CellComponentProps> = ({
 	community,

src/components/CommunityList/Cell/Text.tsx

@@ -4,7 +4,7 @@
  */
 import { empty } from './common/defaultParams'
 import { CellComponentProps } from './common/types'
-import React from 'react'
+
 
 export const Text: React.FC<CellComponentProps> = ({ community, column }) => {
 	const { accessor = empty } = column

src/components/CommunityList/CommunityList.tsx

@@ -5,7 +5,7 @@
 import { CommunityRow } from './CommunityRow'
 import { useColumns } from './hooks'
 import { desc } from 'arquero'
-import React, { useMemo, useCallback } from 'react'
+import { useMemo, useCallback } from 'react'
 import styled from 'styled-components'
 import { CommunityCollection } from '~/arquero'
 import {

src/components/CommunityList/CommunityRow.tsx

@@ -6,7 +6,7 @@ import { Community } from '../../types'
 import { Cell } from './Cell'
 import { Column, CommunityRowStyles, TableRowStyles } from './types'
 import { SelectionState } from '@thematic/core'
-import React, { useCallback } from 'react'
+import { useCallback } from 'react'
 import styled from 'styled-components'
 
 interface CommunityRowProps {

src/components/CommunityList/types.ts

@@ -3,7 +3,7 @@
  * Licensed under the MIT license. See LICENSE file in the project.
  */
 import { Color } from '@thematic/color'
-import React from 'react'
+
 export enum Mark {
 	None,
 	Circle,

src/components/Export/Export.tsx

@@ -7,7 +7,7 @@ import { useCreateRenderer } from './hooks/useCreateRenderer'
 import { useSaveImage } from './hooks/useSaveImage'
 import { Spinner, ActionButton } from '@fluentui/react'
 import { GraphRenderer } from '@graspologic/renderer'
-import React, { useCallback, useState } from 'react'
+import { useCallback, useState } from 'react'
 import styled from 'styled-components'
 
 const DEFAULT_IMAGE_SETTINGS = {

src/components/Export/ImageSettings.tsx

@@ -4,7 +4,7 @@
  */
 import { NumberSpinButton } from '@essex-js-toolkit/themed-components'
 import { TextField } from '@fluentui/react'
-import React, { useCallback } from 'react'
+import { useCallback } from 'react'
 import styled from 'styled-components'
 
 export interface ImageSaveSettings {

src/components/Export/hooks/useCreateRenderer.tsx

@@ -5,7 +5,7 @@
 import { GraphViewer } from '../../GraphViewer'
 import { GraphRenderer } from '@graspologic/renderer'
 import { ThematicProvider, useThematic } from '@thematic/react'
-import React, { useEffect } from 'react'
+import { useEffect } from 'react'
 import ReactDOM from 'react-dom'
 import { useRecoilBridgeAcrossReactRoots_UNSTABLE } from 'recoil'
 import { useDynamicCameraBounds } from '~/hooks/graph'

src/components/Features/index.tsx

@@ -3,7 +3,7 @@
  * Licensed under the MIT license. See LICENSE file in the project.
  */
 import { Settings as AutoSettings } from '@essex-js-toolkit/themed-components'
-import React, { useCallback } from 'react'
+import { useCallback } from 'react'
 interface FeaturesProps {
 	settings: any
 	onChange?: (settings: any) => void

src/components/FileList/FileList.tsx

@@ -5,7 +5,7 @@
 import { DataFile } from '../../types'
 import { FileUploadMessage } from '../App/commands/modals/panels/FileUploadMessage'
 import { DefaultButton } from '@fluentui/react'
-import React, { useCallback, useState } from 'react'
+import { useCallback, useState } from 'react'
 import styled from 'styled-components'
 import {
 	useArqueroBigTable,

src/components/GraphViewer/index.tsx

@@ -26,7 +26,7 @@ import {
 	HighlightHoveredNode,
 } from '@graspologic/react'
 import { GraphRenderer } from '@graspologic/renderer'
-import React, { useCallback } from 'react'
+import { useCallback } from 'react'
 import styled from 'styled-components'
 import { NodeCollection } from '~/arquero'
 import {

src/components/Help/index.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import React from 'react'
+
 
 export const Help = () => {
 	return (

src/components/HierarchyBrowserPanel/HierarchyBrowserPanel.tsx

@@ -17,7 +17,7 @@ import {
 	ICardOverviewSettings,
 	ITableSettings,
 } from '@essex-js-toolkit/hierarchy-browser'
-import React, { memo, useMemo, useCallback } from 'react'
+import { memo, useMemo, useCallback } from 'react'
 import styled from 'styled-components'
 import { findNodesTableForParent } from '~/arquero'
 import {

src/components/Minimap/Minimap.tsx

@@ -15,7 +15,7 @@ import { useAOIBounds } from './hooks'
 import { usePlotTheme } from './hooks/theme'
 import { GraphContainer, InputGraph } from '@graspologic/graph'
 import { GraphView, NodeSetHighlight, Nodes } from '@graspologic/react'
-import React, { useCallback } from 'react'
+import { useCallback } from 'react'
 import styled from 'styled-components'
 import { NodeCollection } from '~/arquero'
 

src/components/Minimap/hooks/theme.ts

@@ -3,7 +3,7 @@
  * Licensed under the MIT license. See LICENSE file in the project.
  */
 import { useThematic } from '@thematic/react'
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 
 export function usePlotTheme(
 	width: number,

src/components/PreviewGraph/PreviewGraph.tsx

@@ -4,7 +4,7 @@
  */
 import { GraphViewer } from '../GraphViewer'
 import { useThematic } from '@thematic/react'
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 import { useInternedGraph } from '~/state/caches'
 
 export interface PreviewGraphProps {

src/components/QuickDrop/QuickDrop.tsx

@@ -7,7 +7,7 @@ import { FileDrop } from '../../controls/FileDrop'
 import { variants } from '../../styles'
 import { FileOrigin, ItemType } from '../../types'
 import { DefaultButton, Text } from '@fluentui/react'
-import React, { useCallback } from 'react'
+import { useCallback } from 'react'
 import styled from 'styled-components'
 import {
 	useArqueroAddTable,

src/components/Settings/index.tsx

@@ -3,7 +3,7 @@
  * Licensed under the MIT license. See LICENSE file in the project.
  */
 import { Settings as AutoSettings } from '@essex-js-toolkit/themed-components'
-import React, { useCallback } from 'react'
+import { useCallback } from 'react'
 interface SettingsProps {
 	settings: any
 	groups?: any

src/components/controls/EdgeColorControls/index.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import React from 'react'
+
 import styled from 'styled-components'
 import { useArqueroEdgeTable } from '~/arquero'
 import { ColorSelector } from '~/controls/ColorSelector/ColorSelector'

src/components/controls/EdgeOpacityControls/index.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import React from 'react'
+
 import styled from 'styled-components'
 import { useArqueroEdgeTable } from '~/arquero'
 import { NumericSelector } from '~/controls/NumericSelector'

src/components/controls/EdgeSizeControls/index.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import React from 'react'
+
 import styled from 'styled-components'
 import { useArqueroEdgeTable } from '~/arquero'
 import { NumericSelector } from '~/controls/NumericSelector'

src/components/controls/NodeColorControls/NodeColorControls.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import React from 'react'
+
 import { useArqueroVisibleNodesTable } from '~/arquero'
 import { ColorSelector } from '~/controls/ColorSelector'
 import { useNodeColorEncoding, useUpdateNodeColorEncoding } from '~/state'

src/components/controls/NodeOpacityControls/NodeOpacityControls.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import React from 'react'
+
 import styled from 'styled-components'
 import { useArqueroVisibleNodesTable } from '~/arquero'
 import { NumericSelector } from '~/controls/NumericSelector'

src/components/controls/NodeSizeControls/NodeSizeControls.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import React from 'react'
+
 import styled from 'styled-components'
 import { useArqueroVisibleNodesTable } from '~/arquero'
 import { NumericSelector } from '~/controls/NumericSelector'

src/components/legends/EdgeColorHeaderLegend.tsx

@@ -3,7 +3,7 @@
  * Licensed under the MIT license. See LICENSE file in the project.
  */
 import { HeaderLegend } from '../../controls/HeaderLegend'
-import React from 'react'
+
 import { useEdgeCount } from '~/arquero'
 import { useEdgeColorEncoding } from '~/state'
 

src/components/legends/EdgeOpacityHeaderLegend.tsx

@@ -3,7 +3,7 @@
  * Licensed under the MIT license. See LICENSE file in the project.
  */
 import { HeaderLegend } from '../../controls/HeaderLegend'
-import React from 'react'
+
 import { useEdgeCount } from '~/arquero'
 import { useEdgeOpacityEncoding } from '~/state'
 

src/components/legends/EdgeSizeHeaderLegend.tsx

@@ -3,7 +3,7 @@
  * Licensed under the MIT license. See LICENSE file in the project.
  */
 import { HeaderLegend } from '../../controls/HeaderLegend'
-import React from 'react'
+
 import { useEdgeCount } from '~/arquero'
 import { useEdgeSizeEncoding } from '~/state/vis'
 

src/components/legends/NodeColorHeaderLegend.tsx

@@ -3,7 +3,7 @@
  * Licensed under the MIT license. See LICENSE file in the project.
  */
 import { HeaderLegend } from '../../controls/HeaderLegend'
-import React from 'react'
+
 import { useNodeCount } from '~/arquero'
 import { useNodeColorEncoding } from '~/state'
 

src/components/legends/NodeOpacityHeaderLegend.tsx

@@ -3,7 +3,7 @@
  * Licensed under the MIT license. See LICENSE file in the project.
  */
 import { HeaderLegend } from '../../controls/HeaderLegend'
-import React from 'react'
+
 import { useNodeCount } from '~/arquero'
 import { useNodeOpacityEncoding } from '~/state'
 

src/components/legends/NodeSizeHeaderLegend.tsx

@@ -3,7 +3,7 @@
  * Licensed under the MIT license. See LICENSE file in the project.
  */
 import { HeaderLegend } from '../../controls/HeaderLegend'
-import React from 'react'
+
 
 import { useNodeCount } from '~/arquero'
 import { useNodeSizeEncoding } from '~/state'

src/controls/ColorSelector/ColorSelector.tsx

@@ -9,7 +9,7 @@ import { ScaledPicker } from './ScaledPicker'
 import { ThematicPalettePicker } from './ThematicPalettePicker'
 import { ColorSelectorProps } from './types'
 import { Pivot, PivotItem } from '@fluentui/react'
-import React, { useCallback } from 'react'
+import { useCallback } from 'react'
 import styled from 'styled-components'
 
 /**

src/controls/ColorSelector/ManualPicker.tsx

@@ -4,7 +4,7 @@
  */
 import { ColorSelectorProps } from './types'
 import { ColorPicker, IColor } from '@fluentui/react'
-import React, { useCallback } from 'react'
+import { useCallback } from 'react'
 import styled from 'styled-components'
 
 export const ManualPicker: React.FC<ColorSelectorProps> = ({

src/controls/ColorSelector/ScaledPicker.tsx

@@ -9,7 +9,7 @@ import { ColorSelectorProps } from './types'
 import { Dropdown } from '@fluentui/react'
 import { ScaleDropdown } from '@thematic/fluent'
 import { table } from 'arquero'
-import React, { useCallback, useMemo } from 'react'
+import { useCallback, useMemo } from 'react'
 import styled from 'styled-components'
 
 export const ScaledPicker: React.FC<ColorSelectorProps> = ({

src/controls/ColorSelector/ThematicPalettePicker.tsx

@@ -6,7 +6,7 @@ import { listThematicColors } from '../../utils/theme'
 import { ColorSelectorProps } from './types'
 import { getNamedSchemeColor } from '@thematic/color'
 import { useThematic } from '@thematic/react'
-import React, { useCallback, useMemo } from 'react'
+import { useCallback, useMemo } from 'react'
 import styled from 'styled-components'
 
 export const ThematicPalettePicker: React.FC<ColorSelectorProps> = ({

src/controls/DomainBrush/LegendAxis.tsx

@@ -6,7 +6,7 @@ import { rect, svg, text } from '@thematic/d3'
 import { useThematic } from '@thematic/react'
 import { scaleLinear } from 'd3-scale'
 import { select } from 'd3-selection'
-import React, { memo, useLayoutEffect, useRef, useState, useMemo } from 'react'
+import { memo, useLayoutEffect, useRef, useState, useMemo } from 'react'
 import styled from 'styled-components'
 import { chooseScale } from '~/thematic/chooseScale'
 

src/controls/DomainBrush/Sparkbar.tsx

@@ -8,7 +8,7 @@ import { useThematic } from '@thematic/react'
 import { brushX } from 'd3-brush'
 import { scaleLinear } from 'd3-scale'
 import { select } from 'd3-selection'
-import React, {
+import {
 	memo,
 	useCallback,
 	useLayoutEffect,

src/controls/DomainBrush/index.tsx

@@ -7,7 +7,7 @@ import { Sparkbar } from './Sparkbar'
 import { useDimensions } from '@essex-js-toolkit/hooks'
 import { Label, TextField } from '@fluentui/react'
 import { format } from 'd3-format'
-import React, { useCallback, useMemo, useRef } from 'react'
+import { useCallback, useMemo, useRef } from 'react'
 import styled from 'styled-components'
 
 interface DomainBrushProps {

src/controls/FileDrop/FileDrop.tsx

@@ -6,7 +6,7 @@ import { subHeaderLabel } from '../../styles'
 import { ItemType } from '../../types'
 import { useDrop } from './hooks'
 import { Text } from '@fluentui/react'
-import React from 'react'
+
 import { useDropzone } from 'react-dropzone'
 import styled from 'styled-components'
 

src/controls/HeaderLegend/ColorRangeText.tsx

@@ -5,7 +5,7 @@
 import { ColorEncoding } from '../../types'
 import { useIsNominal } from './hooks'
 import { format } from 'd3-format'
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 import styled from 'styled-components'
 import { getPrecision } from '~/arquero'
 

src/controls/HeaderLegend/Dashes.tsx

@@ -6,7 +6,7 @@ import { ColorEncoding, NumericEncoding } from '../../types'
 import { useLegendColorScale, useLegendNumericScale } from './hooks'
 import { useThematic } from '@thematic/react'
 import { scaleLinear } from 'd3-scale'
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 
 export interface DashesProps {
 	colorEncoding?: ColorEncoding

src/controls/HeaderLegend/Dots.tsx

@@ -6,7 +6,7 @@ import { ColorEncoding, NumericEncoding } from '../../types'
 import { useLegendColorScale, useLegendNumericScale } from './hooks'
 import { useThematic } from '@thematic/react'
 import { scaleLinear } from 'd3-scale'
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 
 export interface DotsProps {
 	colorEncoding?: ColorEncoding

src/controls/HeaderLegend/HeaderLegend.tsx

@@ -8,7 +8,7 @@ import { Dashes } from './Dashes'
 import { Dots } from './Dots'
 import { LegendLabel } from './LegendLabel'
 import { NumericRangeText } from './NumericRangeText'
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 import styled from 'styled-components'
 
 // TODO: width should flex

src/controls/HeaderLegend/LegendLabel.tsx

@@ -3,7 +3,7 @@
  * Licensed under the MIT license. See LICENSE file in the project.
  */
 import { DataBinding } from '../../types'
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 import styled from 'styled-components'
 
 export interface LegendLabelProps {

src/controls/HeaderLegend/NumericRangeText.tsx

@@ -3,7 +3,7 @@
  * Licensed under the MIT license. See LICENSE file in the project.
  */
 import { format } from 'd3-format'
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 import styled from 'styled-components'
 
 export interface NumericRangeTextProps {

src/controls/NominalLegend/VerticalNominalChips.tsx

@@ -5,7 +5,7 @@
 import { useThematicColorScale } from '../../hooks/graph'
 import { ColorEncoding } from '../../types'
 import { useThematic } from '@thematic/react'
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 
 const ITEM_GAP = 2
 

src/controls/NominalLegend/index.tsx

@@ -6,7 +6,7 @@ import { ColorEncoding } from '../../types'
 import { VerticalNominalChips } from './VerticalNominalChips'
 import { useDimensions } from '@essex-js-toolkit/hooks'
 import { Label } from '@fluentui/react'
-import React, { useRef } from 'react'
+import { useRef } from 'react'
 import styled from 'styled-components'
 
 const ITEM_HEIGHT = 16

src/controls/NumericDomainEditor/index.tsx

@@ -9,7 +9,7 @@ import { ScaleType } from '@thematic/core'
 import { ScaleTypeChoiceGroup } from '@thematic/fluent'
 import { table } from 'arquero'
 import { format } from 'd3-format'
-import React, { useCallback, useMemo } from 'react'
+import { useCallback, useMemo } from 'react'
 import styled from 'styled-components'
 import { useColumnHistogram, useColumnStats } from '~/arquero'
 

src/controls/NumericRangeEditor/index.tsx

@@ -6,7 +6,7 @@ import { Encoding } from '../../types'
 import { DomainBrush } from '../DomainBrush'
 import { Label } from '@fluentui/react'
 import { format } from 'd3-format'
-import React, { useCallback, useMemo } from 'react'
+import { useCallback, useMemo } from 'react'
 import styled from 'styled-components'
 
 export interface NumericRangeEditorProps {

src/controls/NumericSelector/ManualPicker.tsx

@@ -5,7 +5,7 @@
 import { NumericSelectorProps } from './types'
 import { Slider } from '@fluentui/react'
 import { useDebounceFn } from 'ahooks'
-import React, { useState } from 'react'
+import { useState } from 'react'
 import styled from 'styled-components'
 import './ManualPicker.css'
 

src/controls/NumericSelector/NumericSelector.tsx

@@ -7,7 +7,7 @@ import { ManualPicker } from './ManualPicker'
 import { ScaledPicker } from './ScaledPicker'
 import { NumericSelectorProps } from './types'
 import { Pivot, PivotItem } from '@fluentui/react'
-import React, { useCallback } from 'react'
+import { useCallback } from 'react'
 import styled from 'styled-components'
 
 /**

src/controls/NumericSelector/ScaledPicker.tsx

@@ -7,7 +7,7 @@ import { NumericRangeEditor } from '../NumericRangeEditor'
 import { NumericSelectorProps } from './types'
 import { Dropdown } from '@fluentui/react'
 import { table } from 'arquero'
-import React, { useCallback, useMemo } from 'react'
+import { useCallback, useMemo } from 'react'
 import styled from 'styled-components'
 import { columnTypes } from '~/arquero'
 

src/controls/RouterLinkIconButton/index.tsx

@@ -3,7 +3,7 @@
  * Licensed under the MIT license. See LICENSE file in the project.
  */
 import { IButtonProps, IconButton } from '@fluentui/react'
-import React, { useCallback } from 'react'
+import { useCallback } from 'react'
 import { RouteComponentProps, withRouter } from 'react-router-dom'
 
 interface RouterLinkIconButtonProps extends RouteComponentProps, IButtonProps {

src/controls/ToggleHeader/ToggleHeader.tsx

@@ -3,7 +3,7 @@
  * Licensed under the MIT license. See LICENSE file in the project.
  */
 import { Toggle } from '@fluentui/react'
-import React, { useCallback, useMemo } from 'react'
+import { useCallback, useMemo } from 'react'
 import styled from 'styled-components'
 
 interface ToggleHeaderProps {

src/index.tsx

@@ -6,7 +6,7 @@ import { App } from './components/App'
 import { useTheme } from './state'
 import { ThematicFluentProvider } from '@thematic/fluent'
 import { ApplicationStyles } from '@thematic/react'
-import React from 'react'
+
 import ReactDOM from 'react-dom'
 import { RecoilRoot } from 'recoil'
 import { ThemeProvider } from 'styled-components'

src/styles/fluent.ts

@@ -11,7 +11,7 @@ import {
 	ISpinnerStyleProps,
 	IStyleFunctionOrObject,
 } from '@fluentui/react'
-import React from 'react'
+
 
 export const COMMANDBAR_HEIGHT = 32
 export const COMMANDBAR_MARGIN = 12