Merge pull request #30 from waoai/performance-refactoring

Major Performance Enhancements and Refactoring

Author: seveibar

package.json

@@ -15,11 +15,12 @@
  "react-markdown": "^4.0.6",
  "react-monaco-editor": "^0.25.1",
  "react-remove-scroll": "^2.0.4",
- "react-select": "^2.2.0",
+ "react-select": "^3.0.8",
  "react-syntax-highlighter": "^12.2.1",
- "react-use": "^13.26.3",
+ "react-use": "^13.27.0",
  "seamless-immutable": "^7.1.4",
  "transformation-matrix-js": "^2.7.6",
+ "use-event-callback": "^0.1.0",
  "use-key-hook": "^1.3.0"
  },
  "peerDependencies": {

src/Annotator/index.js

@@ -11,6 +11,7 @@ import type {
 } from "../MainLayout/types"
 import SettingsProvider from "../SettingsProvider"
 import reducer from "./reducer"
+import makeImmutable from "seamless-immutable"
 
 type Props = {
  taskDescription: string,
@@ -28,7 +29,7 @@ type Props = {
  onExit: MainLayoutState => any
 }
 
-export default ({
+export const Annotator = ({
  images,
  allowedArea,
  selectedImage = images.length > 0 ? images[0].src : undefined,
@@ -43,24 +44,27 @@ export default ({
  taskDescription,
  onExit
 }: Props) => {
- const [state, dispatchToReducer] = useReducer(reducer, {
- showTags,
- allowedArea,
- selectedImage,
- showPointDistances,
- pointDistancePrecision,
- selectedTool: "select",
- mode: null,
- taskDescription,
- images,
- labelImages: imageClsList.length > 0 || imageTagList.length > 0,
- regionClsList,
- regionTagList,
- imageClsList,
- imageTagList,
- enabledTools,
- history: []
- })
+ const [state, dispatchToReducer] = useReducer(
+ reducer,
+ makeImmutable({
+ showTags,
+ allowedArea,
+ selectedImage,
+ showPointDistances,
+ pointDistancePrecision,
+ selectedTool: "select",
+ mode: null,
+ taskDescription,
+ images,
+ labelImages: imageClsList.length > 0 || imageTagList.length > 0,
+ regionClsList,
+ regionTagList,
+ imageClsList,
+ imageTagList,
+ enabledTools,
+ history: []
+ })
+ )
 
  const dispatch = (action: Action) => {
  if (
@@ -82,3 +86,5 @@ export default ({
  </SettingsProvider>
  )
 }
+
+export default Annotator

src/Crosshairs/index.js

@@ -2,7 +2,7 @@
 
 import React, { Fragment, useEffect, useState } from "react"
 
-export default ({
+export const Crosshairs = ({
  mousePosition,
  x,
  y
@@ -58,3 +58,5 @@ export default ({
  </Fragment>
  )
 }
+
+export default Crosshairs

src/DebugSidebarBox/index.js

@@ -3,7 +3,7 @@
 import React from "react"
 import SidebarBoxContainer from "../SidebarBoxContainer"
 
-export default ({ state, lastAction }: any) => {
+export const DebugSidebarBox = ({ state, lastAction }: any) => {
  const image = (state.images || []).find(
  img => img.src === state.selectedImage
  )
@@ -28,3 +28,5 @@ export default ({ state, lastAction }: any) => {
  </SidebarBoxContainer>
  )
 }
+
+export default DebugSidebarBox

src/Fullscreen/index.js

@@ -1,9 +1,11 @@
 // @flow
 
 import React from "react"
-import Fullscreen from "react-full-screen"
+import ReactFullscreen from "react-full-screen"
 
-export default props => {
+export const Fullscreen = props => {
  if (!props.enabled) return props.children
- return <Fullscreen {...props}>{props.children}</Fullscreen>
+ return <ReactFullscreen {...props}>{props.children}</ReactFullscreen>
 }
+
+export default Fullscreen

src/Header/index.js

@@ -21,7 +21,7 @@ type Props = {
  multipleImages?: boolean
 }
 
-export default ({
+export const Header = ({
  onHeaderButtonClick,
  title,
  inFullScreen,
@@ -53,3 +53,5 @@ export default ({
  </div>
  )
 }
+
+export default Header

src/HeaderButton/index.js

@@ -1,24 +1,37 @@
 // @flow
 
-import React, { createContext } from "react"
+import React, { memo, createContext, useContext } from "react"
+import { styled } from "@material-ui/core/styles"
 import Button from "@material-ui/core/Button"
+import useEventCallback from "use-event-callback"
+
+const StyledButton = styled(Button)({
+ width: 80,
+ margin: 2
+})
+
+const IconName = styled("div")({
+ fontWeight: "bold"
+})
 
 export const HeaderButtonContext = createContext()
 
-export default ({ name, Icon }: { name: string, Icon: any }) => {
- return (
- <HeaderButtonContext.Consumer>
- {({ onHeaderButtonClick }: any) => (
- <Button
-  onClick={() => onHeaderButtonClick(name)}
-  style={{ width: 80, margin: 2 }}
-  >
-  <div>
-  <Icon style={{}} />
- <div style={{ fontWeight: "bold" }}>{name}</div>
- </div>
- </Button>
-  )}
-  </HeaderButtonContext.Consumer>
- )
+const MemoizedHeaderButton = memo(
+ ({ name, Icon, onClick }) => (
+ <StyledButton onClick={onClick}>
+ <div>
+ <Icon />
+ <IconName>{name}</IconName>
+ </div>
+ </StyledButton>
+ ),
+ (prevProps, nextProps) => prevProps.name === nextProps.name
+)
+
+export const HeaderButton = ({ name, Icon }: { name: string, Icon: any }) => {
+ const { onHeaderButtonClick } = useContext(HeaderButtonContext)
+ const onClick = useEventCallback(() => onHeaderButtonClick(name))
+ return <MemoizedHeaderButton name={name} Icon={Icon} onClick={onClick} />
 }
+
+export default HeaderButton

src/HighlightBox/index.js

@@ -10,6 +10,7 @@ const useStyles = makeStyles({
  to: { strokeDashoffset: 100 }
  },
  highlightBox: {
+ zIndex: 2,
  transition: "opacity 500ms",
  "&:not(.highlighted)": {
  opacity: 0
@@ -32,7 +33,7 @@ const useStyles = makeStyles({
  }
 })
 
-export default ({
+export const HighlightBox = ({
  mouseEvents,
  dragWithPrimary,
  zoomWithPrimary,
@@ -106,3 +107,5 @@ export default ({
  </svg>
  )
 }
+
+export default HighlightBox

src/HistorySidebarBox/index.js

@@ -1,6 +1,6 @@
 // @flow
 
-import React, { setState } from "react"
+import React, { setState, memo } from "react"
 import { makeStyles } from "@material-ui/core/styles"
 import SidebarBoxContainer from "../SidebarBoxContainer"
 import HistoryIcon from "@material-ui/icons/History"
@@ -12,6 +12,7 @@ import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction"
 import UndoIcon from "@material-ui/icons/Undo"
 import moment from "moment"
 import { grey } from "@material-ui/core/colors"
+import isEqual from "lodash/isEqual"
 
 const useStyles = makeStyles({
  emptyText: {
@@ -23,7 +24,7 @@ const useStyles = makeStyles({
  }
 })
 
-export default ({
+export const HistorySidebarBox = ({
  history,
  onRestoreHistory
 }: {
@@ -60,3 +61,10 @@ export default ({
  </SidebarBoxContainer>
  )
 }
+
+export default memo(HistorySidebarBox, (prevProps, nextProps) =>
+ isEqual(
+ prevProps.history.map(a => [a.name, a.time]),
+ nextProps.history.map(a => [a.name, a.time])
+ )
+)

src/IconTools/index.js

@@ -1,6 +1,6 @@
 // @flow
 
-import React from "react"
+import React, { useMemo } from "react"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import {
  faArrowsAlt,
@@ -37,18 +37,22 @@ type Props = {
  onClickTool: string => any
 }
 
-export default ({
+const defaultTools = ["select", "create-point", "create-box", "create-polygon"]
+
+export const IconTools = ({
  showTags,
  selectedTool,
  onClickTool,
- enabledTools = ["select", "create-point", "create-box", "create-polygon"]
+ enabledTools = defaultTools
 }: Props) => {
  const classes = useStyles()
+ const selectedToolContextValue = useMemo(
+ () => ({ enabledTools, selectedTool, onClickTool }),
+ [enabledTools, selectedTool]
+ )
  return (
  <div className={classes.iconTools}>
- <SelectedTool.Provider
- value={{ enabledTools, selectedTool, onClickTool }}
- >
+ <SelectedTool.Provider value={selectedToolContextValue}>
  <SmallToolButton
  id="select"
  name="Select Region"
@@ -108,3 +112,5 @@ export default ({
  </div>
  )
 }
+
+export default IconTools