Optimized imports

src/Annotator/index.js

@@ -1,18 +1,12 @@
 // @flow
 
-import type {
- Action,
- Image,
- MainLayoutState,
- Mode,
- ToolEnum,
-} from "../MainLayout/types"
+import type { Action, Image, MainLayoutState } from "../MainLayout/types"
+import type { Node } from "react"
 import React, { useEffect, useReducer } from "react"
 import makeImmutable, { without } from "seamless-immutable"
 
 import type { KeypointsDefinition } from "../ImageCanvas/region-tools"
 import MainLayout from "../MainLayout"
-import type { Node } from "react"
 import SettingsProvider from "../SettingsProvider"
 import combineReducers from "./reducers/combine-reducers.js"
 import generalReducer from "./reducers/general-reducer.js"

src/Annotator/poses.story.js

@@ -1,6 +1,6 @@
 // @flow
 
-import React, { useState } from "react"
+import React from "react"
 
 import { storiesOf } from "@storybook/react"
 import { action as actionAddon } from "@storybook/addon-actions"

src/Annotator/reducers/general-reducer.js

@@ -1,8 +1,7 @@
 // @flow
-import type { MainLayoutState, Action } from "../../MainLayout/types"
+import type { Action, MainLayoutState } from "../../MainLayout/types"
 import { moveRegion } from "../../ImageCanvas/region-tools.js"
-import { getIn, setIn, updateIn } from "seamless-immutable"
-import moment from "moment"
+import { getIn, setIn } from "seamless-immutable"
 import isEqual from "lodash/isEqual"
 import getActiveImage from "./get-active-image"
 import { saveToHistory } from "./history-handler.js"

src/Annotator/reducers/history-handler.js

@@ -1,7 +1,7 @@
 // @flow
 
-import type { MainLayoutState, Action } from "../../MainLayout/types"
-import { setIn, updateIn, asMutable, without } from "seamless-immutable"
+import type { Action, MainLayoutState } from "../../MainLayout/types"
+import { setIn, updateIn, without } from "seamless-immutable"
 import moment from "moment"
 
 const typesToSaveWithHistory = {

src/Annotator/reducers/image-reducer.js

@@ -1,9 +1,6 @@
 // @flow
 
-import type {
- MainLayoutImageAnnotationState,
- Action,
-} from "../../MainLayout/types"
+import type { Action, MainLayoutImageAnnotationState } from "../../MainLayout/types"
 import { setIn } from "seamless-immutable"
 import getActiveImage from "./get-active-image"
 

src/Annotator/reducers/video-reducer.js

@@ -1,9 +1,6 @@
 // @flow
 
-import type {
- MainLayoutVideoAnnotationState,
- Action,
-} from "../../MainLayout/types"
+import type { Action, MainLayoutVideoAnnotationState } from "../../MainLayout/types"
 import { setIn, without } from "seamless-immutable"
 import getImpliedVideoRegions from "./get-implied-video-regions"
 import { saveToHistory } from "./history-handler.js"

src/ClassSelectionMenu/index.js

@@ -1,6 +1,5 @@
 import React, { useEffect } from "react"
-import { styled } from "@mui/material/styles"
-import { createTheme, ThemeProvider } from "@mui/material/styles"
+import { createTheme, styled, ThemeProvider } from "@mui/material/styles"
 import Box from "@mui/material/Box"
 import * as muiColors from "@mui/material/colors"
 import SidebarBoxContainer from "../SidebarBoxContainer"

src/DemoSite/index.js

@@ -1,6 +1,5 @@
 // @flow
 import React, { useState } from "react"
-import ReactDOM from "react-dom"
 import Editor, { examples } from "./Editor"
 import Annotator from "../Annotator"
 import ErrorBoundaryDialog from "./ErrorBoundaryDialog.js"

src/DemoSite/index.story.js

@@ -3,7 +3,6 @@
 import React from "react"
 
 import { storiesOf } from "@storybook/react"
-import { action } from "@storybook/addon-actions"
 
 import DemoSite from "./"
 

src/HistorySidebarBox/index.js

@@ -1,6 +1,6 @@
 // @flow
 
-import React, { setState, memo } from "react"
+import React, { memo } from "react"
 import { makeStyles } from "@mui/styles"
 import { createTheme, ThemeProvider } from "@mui/material/styles"
 import SidebarBoxContainer from "../SidebarBoxContainer"
@@ -14,7 +14,6 @@ import UndoIcon from "@mui/icons-material/Undo"
 import moment from "moment"
 import { grey } from "@mui/material/colors"
 import isEqual from "lodash/isEqual"
-import Box from "@mui/material/Box"
 
 const theme = createTheme()
 const useStyles = makeStyles((theme) => ({

src/ImageCanvas/index.js

@@ -1,23 +1,10 @@
 // @flow weak
 
-import React, {
- useRef,
- useState,
- useLayoutEffect,
- useEffect,
- useMemo,
-} from "react"
 import type { Node } from "react"
+import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react"
 import { Matrix } from "transformation-matrix-js"
 import Crosshairs from "../Crosshairs"
-import type {
- Region,
- Point,
- Polygon,
- Box,
- Keypoints,
- KeypointsDefinition,
-} from "./region-tools.js"
+import type { Box, Keypoints, Point, Polygon, Region } from "./region-tools.js"
 import { makeStyles } from "@mui/styles"
 import { createTheme, ThemeProvider } from "@mui/material/styles"
 import styles from "./styles"

src/ImageCanvas/styles.js

@@ -1,5 +1,3 @@
-import { grey } from "@mui/material/colors"
-
 export default {
  canvas: { width: "100%", height: "100%", position: "relative", zIndex: 1 },
  zoomIndicator: {

src/ImageMask/index.js

@@ -1,7 +1,6 @@
 // @flow
 
-import React, { useState, useEffect, useMemo, useRef } from "react"
-import { colorInts } from "../colors"
+import React, { useEffect, useMemo, useState } from "react"
 import { useDebounce } from "react-use"
 import loadImage from "./load-image"
 import autoseg from "autoseg/webworker"

src/ImageSelectorSidebarBox/index.js

@@ -9,7 +9,6 @@ import { grey } from "@mui/material/colors"
 import List from "@mui/material/List"
 import ListItem from "@mui/material/ListItem"
 import ListItemText from "@mui/material/ListItemText"
-import Avatar from "@mui/material/Avatar"
 import isEqual from "lodash/isEqual"
 
 const theme = createTheme()

src/KeyframeTimeline/index.js

@@ -1,8 +1,7 @@
 // @flow weak
 
-import React, { useMemo, useState, useEffect } from "react"
-import { styled } from "@mui/material/styles"
-import { createTheme, ThemeProvider } from "@mui/material/styles"
+import React, { useEffect, useMemo, useState } from "react"
+import { createTheme, styled, ThemeProvider } from "@mui/material/styles"
 import range from "lodash/range"
 import * as colors from "@mui/material/colors"
 import useMeasure from "react-use-measure"

src/KeyframesSelectorSidebarBox/index.js

@@ -6,8 +6,7 @@ import SidebarBoxContainer from "../SidebarBoxContainer"
 import * as colors from "@mui/material/colors"
 import getTimeString from "../KeyframeTimeline/get-time-string.js"
 import TrashIcon from "@mui/icons-material/Delete"
-import { styled } from "@mui/material/styles"
-import { createTheme, ThemeProvider } from "@mui/material/styles"
+import { createTheme, styled, ThemeProvider } from "@mui/material/styles"
 
 const theme = createTheme()
 const KeyframeRow = styled("div")(({ theme }) => ({

src/LandingPage/index.js

@@ -2,10 +2,8 @@
 
 import React from "react"
 import Button from "@mui/material/Button"
-import { styled } from "@mui/material/styles"
-import { createTheme, ThemeProvider } from "@mui/material/styles"
+import { createTheme, styled, ThemeProvider } from "@mui/material/styles"
 import * as colors from "@mui/material/colors"
-import Grid from "@mui/material/Grid"
 import Markdown from "react-markdown"
 import GitHubButton from "react-github-btn"
 import "./github-markdown.css"

src/MainLayout/icon-dictionary.js

@@ -3,20 +3,17 @@
 import React from "react"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import {
- faArrowsAlt,
- faMousePointer,
- faExpandArrowsAlt,
- faGripLines,
- faTag,
- faPaintBrush,
+ faChartLine,
  faCrosshairs,
  faDrawPolygon,
- faVectorSquare,
+ faEdit,
+ faGripLines,
  faHandPaper,
- faSearch,
  faMask,
- faEdit,
- faChartLine,
+ faMousePointer,
+ faSearch,
+ faTag,
+ faVectorSquare
 } from "@fortawesome/free-solid-svg-icons"
 import FullscreenIcon from "@mui/icons-material/Fullscreen"
 import AccessibilityNewIcon from "@mui/icons-material/AccessibilityNew"

src/MainLayout/index.js

@@ -2,19 +2,17 @@
 
 import type { Action, MainLayoutState } from "./types"
 import { FullScreen, useFullScreenHandle } from "react-full-screen"
+import type { Node } from "react"
 import React, { useCallback, useRef } from "react"
 import { makeStyles } from "@mui/styles"
-import { createTheme, ThemeProvider } from "@mui/material/styles"
-import { styled } from "@mui/material/styles"
+import { createTheme, styled, ThemeProvider } from "@mui/material/styles"
 
 import ClassSelectionMenu from "../ClassSelectionMenu"
 import DebugBox from "../DebugSidebarBox"
 import HistorySidebarBox from "../HistorySidebarBox"
 import ImageCanvas from "../ImageCanvas"
-import ImageSelector from "../ImageSelectorSidebarBox"
 import KeyframeTimeline from "../KeyframeTimeline"
 import KeyframesSelector from "../KeyframesSelectorSidebarBox"
-import type { Node } from "react"
 import RegionSelector from "../RegionSelectorSidebarBox"
 import SettingsDialog from "../SettingsDialog"
 import TagsSidebarBox from "../TagsSidebarBox"

src/MainLayout/types.js

@@ -1,17 +1,15 @@
 // @flow
 
 import type {
- Region,
- Polygon,
  Box,
- Point,
- KeypointsDefinition,
- Keypoints,
  KeypointDefinition,
+ Keypoints,
+ KeypointsDefinition,
+ Point,
+ Polygon,
+ Region
 } from "../ImageCanvas/region-tools.js"
 
-import type { Node } from "react"
-
 export type ToolEnum =
  | "select"
  | "pan"

src/PointDistances/index.js

@@ -1,8 +1,7 @@
 // @flow weak
 
 import React, { Fragment } from "react"
-import { styled } from "@mui/material/styles"
-import { createTheme, ThemeProvider } from "@mui/material/styles"
+import { createTheme, styled, ThemeProvider } from "@mui/material/styles"
 
 const theme = createTheme()
 const Svg = styled("svg")(({ theme }) => ({

src/PreventScrollToParents/index.js

@@ -2,8 +2,7 @@
 
 import React, { useState } from "react"
 import { RemoveScroll } from "react-remove-scroll"
-import { styled } from "@mui/material/styles"
-import { createTheme, ThemeProvider } from "@mui/material/styles"
+import { createTheme, styled, ThemeProvider } from "@mui/material/styles"
 import useEventCallback from "use-event-callback"
 
 const theme = createTheme()

src/PreventScrollToParents/index.story.js

@@ -3,7 +3,6 @@
 import React from "react"
 
 import { storiesOf } from "@storybook/react"
-import { action } from "@storybook/addon-actions"
 
 import RemoveScrollOnChildren from "./"
 

src/RegionLabel/index.js

@@ -1,6 +1,6 @@
 // @flow
 
-import React, { useRef, memo } from "react"
+import React, { memo, useRef } from "react"
 import Paper from "@mui/material/Paper"
 import { makeStyles } from "@mui/styles"
 import { createTheme, ThemeProvider } from "@mui/material/styles"

src/RegionSelectAndTransformBoxes/index.js

@@ -1,7 +1,6 @@
 import React, { Fragment, memo } from "react"
 import HighlightBox from "../HighlightBox"
-import { styled } from "@mui/material/styles"
-import { createTheme, ThemeProvider } from "@mui/material/styles"
+import { createTheme, styled, ThemeProvider } from "@mui/material/styles"
 import PreventScrollToParents from "../PreventScrollToParents"
 import Tooltip from "@mui/material/Tooltip"
 

src/RegionSelectorSidebarBox/index.js

@@ -1,10 +1,9 @@
 // @flow
 
-import React, { Fragment, useState, memo } from "react"
+import React, { memo, useState } from "react"
 import SidebarBoxContainer from "../SidebarBoxContainer"
 import { makeStyles } from "@mui/styles"
-import { createTheme, ThemeProvider } from "@mui/material/styles"
-import { styled } from "@mui/material/styles"
+import { createTheme, styled, ThemeProvider } from "@mui/material/styles"
 import { grey } from "@mui/material/colors"
 import RegionIcon from "@mui/icons-material/PictureInPicture"
 import Grid from "@mui/material/Grid"

src/RegionSelectorSidebarBox/styles.js

@@ -1,4 +1,4 @@
-import { grey, blue, orange, purple } from "@mui/material/colors"
+import { blue, grey } from "@mui/material/colors"
 
 export default {
  container: {

src/Shortcuts/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react"
+import React, { useEffect, useState } from "react"
 import SidebarBoxContainer from "../SidebarBoxContainer"
 import { setIn } from "seamless-immutable"
 import ShortcutField from "./ShortcutField"

src/Sidebar/index.js

@@ -4,7 +4,6 @@ import React from "react"
 import { styled } from "@mui/styles"
 import { createTheme, ThemeProvider } from "@mui/material/styles"
 import TaskDescription from "../TaskDescriptionSidebarBox"
-import ImageSelector from "../ImageSelectorSidebarBox"
 import RegionSelector from "../RegionSelectorSidebarBox"
 import History from "../HistorySidebarBox"
 import DebugBox from "../DebugSidebarBox"

src/SidebarBoxContainer/index.js

@@ -1,12 +1,8 @@
 // @flow
 
-import React, { useState, memo } from "react"
-import Paper from "@mui/material/Paper"
+import React, { memo, useState } from "react"
 import { makeStyles } from "@mui/styles"
 import { createTheme, ThemeProvider } from "@mui/material/styles"
-import ExpandIcon from "@mui/icons-material/ExpandMore"
-import IconButton from "@mui/material/IconButton"
-import Collapse from "@mui/material/Collapse"
 import { grey } from "@mui/material/colors"
 import classnames from "classnames"
 import useEventCallback from "use-event-callback"

src/SmallToolButton/index.js

@@ -1,6 +1,6 @@
 // @flow
 
-import React, { createContext, useContext, memo } from "react"
+import React, { createContext, memo, useContext } from "react"
 import IconButton from "@mui/material/IconButton"
 import Tooltip from "@mui/material/Tooltip"
 import { blue } from "@mui/material/colors"

src/TagsSidebarBox/index.js

@@ -1,6 +1,6 @@
 // @flow
 
-import React, { useMemo, memo } from "react"
+import React, { memo, useMemo } from "react"
 import SidebarBoxContainer from "../SidebarBoxContainer"
 import StyleIcon from "@mui/icons-material/Style"
 import { grey } from "@mui/material/colors"

src/TaskDescriptionSidebarBox/index.js

@@ -3,8 +3,7 @@
 import React, { memo } from "react"
 import SidebarBoxContainer from "../SidebarBoxContainer"
 import DescriptionIcon from "@mui/icons-material/Description"
-import { styled } from "@mui/material/styles"
-import { createTheme, ThemeProvider } from "@mui/material/styles"
+import { createTheme, styled, ThemeProvider } from "@mui/material/styles"
 import { grey } from "@mui/material/colors"
 import Markdown from "react-markdown"
 

src/Theme/index.js

@@ -1,7 +1,7 @@
 // @flow
 
 import React from "react"
-import { ThemeProvider, createTheme } from "@mui/material/styles"
+import { createTheme, ThemeProvider } from "@mui/material/styles"
 import { makeStyles } from "@mui/styles"
 
 const useStyles = makeStyles((theme) => ({