minor fixes and refactoring. History now doesn't grow to insane sizes

Author: seveibar

src/Annotator/index.js

@@ -15,6 +15,7 @@ import combineReducers from "./reducers/combine-reducers.js"
 import generalReducer from "./reducers/general-reducer.js"
 import imageReducer from "./reducers/image-reducer.js"
 import videoReducer from "./reducers/video-reducer.js"
+import historyHandler from "./reducers/history-handler.js"
 
 import makeImmutable from "seamless-immutable"
 
@@ -61,9 +62,11 @@ export const Annotator = ({
  return 'Missing required prop "images" or "videoSrc"'
  const annotationType = images ? "image" : "video"
  const [state, dispatchToReducer] = useReducer(
- combineReducers(
- annotationType === "image" ? imageReducer : videoReducer,
- generalReducer
+ historyHandler(
+ combineReducers(
+ annotationType === "image" ? imageReducer : videoReducer,
+ generalReducer
+ )
  ),
  makeImmutable({
  annotationType,

src/Annotator/reducers/general-reducer.js

@@ -5,8 +5,8 @@ import { moveRegion } from "../../ImageCanvas/region-tools.js"
 import { getIn, setIn, updateIn } from "seamless-immutable"
 import moment from "moment"
 import isEqual from "lodash/isEqual"
-import merge from "lodash/fp/merge"
 import getActiveImage from "./get-active-image"
+import { saveToHistory } from "./history-handler.js"
 
 const getRandomId = () =>
  Math.random()
@@ -24,12 +24,6 @@ const getRandomColor = () => {
  return `hsl(${h},${s}%,${l}%)`
 }
 
-const typesToSaveWithHistory = {
- BEGIN_BOX_TRANSFORM: "Transform/Move Box",
- BEGIN_MOVE_POINT: "Move Point",
- DELETE_REGION: "Delete Region"
-}
-
 export default (state: MainLayoutState, action: Action) => {
  // Throttle certain actions
  if (action.type === "MOUSE_MOVE") {
@@ -63,12 +57,10 @@ export default (state: MainLayoutState, action: Action) => {
  const [region, regionIndex] = getRegion(regionId)
  if (!region) return state
  if (obj !== null) {
- return updateIn(
- state,
- [...pathToActiveImage, "regions", regionIndex],
- merge,
- obj
- )
+ return setIn(state, [...pathToActiveImage, "regions", regionIndex], {
+ ...region,
+ ...obj
+ })
  } else {
  // delete region
  const regions = activeImage.regions
@@ -91,24 +83,6 @@ export default (state: MainLayoutState, action: Action) => {
  )
  }
 
- const saveToHistory = (state: MainLayoutState, name: string) =>
- updateIn(state, ["history"], h =>
- [
- {
- time: moment().toDate(),
- state,
- name
- }
- ].concat((h || []).slice(0, 9))
- )
-
- if (Object.keys(typesToSaveWithHistory).includes(action.type)) {
- state = saveToHistory(
- state,
- typesToSaveWithHistory[action.type] || action.type
- )
- }
-
  const closeEditors = (state: MainLayoutState) => {
  if (currentImageIndex === null) return state
  return setIn(
@@ -153,19 +127,13 @@ export default (state: MainLayoutState, action: Action) => {
  action.region
  )
  }
- case "RESTORE_HISTORY": {
- if (state.history.length > 0) {
- return state.history[0].state
- }
- return state
- }
  case "CHANGE_IMAGE": {
  if (!activeImage) return state
  const { delta } = action
  for (const key of Object.keys(delta)) {
  if (key === "cls") saveToHistory(state, "Change Image Class")
  if (key === "tags") saveToHistory(state, "Change Image Tags")
- state = setIn(state, [...pageToActiveImage, key], delta[key])
+ state = setIn(state, [...pathToActiveImage, key], delta[key])
  }
  return state
  }
@@ -406,7 +374,7 @@ export default (state: MainLayoutState, action: Action) => {
  case "DRAW_POLYGON": {
  const [polygon, regionIndex] = getRegion(state.mode.regionId)
  if (!polygon) break
- state = setIn(
+ return setIn(
  state,
  [...pathToActiveImage, "regions", regionIndex],
  { ...polygon, points: polygon.points.concat([[x, y]]) }

src/Annotator/reducers/get-implied-video-regions.js

@@ -22,6 +22,8 @@ export default (
  return (
  keyframes[keyframeTimes[keyframeTimes.length - 1]].regions || emptyArr
  )
+ } else if (nextKeyframeTimeIndex === 0) {
+ return emptyArr
  }
 
  const t1 = keyframeTimes[nextKeyframeTimeIndex - 1]
@@ -78,7 +80,7 @@ export default (
  ...prev,
  highlighted: false,
  editingLabels: false,
- points: prev.map((pp, i) => [
+ points: prev.points.map((pp, i) => [
  pp[0] * w1 + next.points[i][0] * w2,
  pp[1] * w1 + next.points[i][1] * w2
  ])

src/Annotator/reducers/history-handler.js

@@ -0,0 +1,60 @@
+// @flow
+
+import type { MainLayoutState, Action } from "../../MainLayout/types"
+import { setIn, updateIn, asMutable, without } from "seamless-immutable"
+import moment from "moment"
+
+const typesToSaveWithHistory = {
+ BEGIN_BOX_TRANSFORM: "Transform/Move Box",
+ BEGIN_MOVE_POINT: "Move Point",
+ DELETE_REGION: "Delete Region"
+}
+
+export const saveToHistory = (state: MainLayoutState, name: string) =>
+ updateIn(state, ["history"], h =>
+ [
+ {
+ time: moment().toDate(),
+ state: without(state, "history"),
+ name
+ }
+ ].concat((h || []).slice(0, 9))
+ )
+
+export default reducer => {
+ return (state: MainLayoutState, action: Action) => {
+ const prevState = state
+ const nextState = reducer(state, action)
+
+ if (action.type === "RESTORE_HISTORY") {
+ if (state.history.length > 0) {
+ return setIn(
+ nextState.history[0].state,
+ ["history"],
+ nextState.history.slice(1)
+ )
+ }
+ } else {
+ if (
+ prevState !== nextState &&
+ Object.keys(typesToSaveWithHistory).includes(action.type)
+ ) {
+ return setIn(
+ nextState,
+ ["history"],
+ [
+ {
+ time: moment().toDate(),
+ state: without(prevState, "history"),
+ name: typesToSaveWithHistory[action.type] || action.type
+ }
+ ]
+ .concat(nextState.history || [])
+ .slice(0, 9)
+ )
+ }
+ }
+
+ return nextState
+ }
+}

src/Annotator/reducers/video-reducer.js

@@ -6,14 +6,17 @@ import type {
 } from "../../MainLayout/types"
 import { setIn, without } from "seamless-immutable"
 import getImpliedVideoRegions from "./get-implied-video-regions"
+import { saveToHistory } from "./history-handler.js"
 
 export default (state: MainLayoutVideoAnnotationState, action: Action) => {
- if (!action.type.includes("MOUSE_MOVE")) console.log(action.type, action)
-
  const copyImpliedRegions = () => {
- return setIn(state, ["keyframes", state.currentVideoTime], {
- regions: getImpliedVideoRegions(state.keyframes, state.currentVideoTime)
- })
+ return setIn(
+ saveToHistory(state, "Add Keyframe"),
+ ["keyframes", state.currentVideoTime],
+ {
+ regions: getImpliedVideoRegions(state.keyframes, state.currentVideoTime)
+ }
+ )
  }
 
  switch (action.type) {
@@ -55,6 +58,7 @@ export default (state: MainLayoutVideoAnnotationState, action: Action) => {
  case "SELECT_REGION":
  case "CHANGE_REGION":
  case "DELETE_REGION":
+ case "OPEN_REGION_EDITOR":
  return copyImpliedRegions()
  case "MOUSE_DOWN": {
  switch (state.selectedTool) {

src/Header/index.js

@@ -15,6 +15,7 @@ import QueuePlayNextIcon from "@material-ui/icons/QueuePlayNext"
 import HotkeysIcon from "@material-ui/icons/Keyboard"
 import styles from "./styles"
 import KeyframeTimeline from "../KeyframeTimeline"
+import classnames from "classnames"
 
 const useStyles = makeStyles(styles)
 
@@ -37,6 +38,7 @@ export const Header = ({
  onHeaderButtonClick,
  title,
  inFullScreen,
+ videoMode,
  isAVideoFrame = false,
  nextVideoFrameHasRegions = false,
  videoDuration,
@@ -49,13 +51,18 @@ export const Header = ({
  const classes = useStyles()
  return (
  <div className={classes.header}>
- <div className={classes.fileInfo}>{title}</div>
- <KeyframeTimeline
- currentTime={currentVideoTime}
- duration={videoDuration}
- onChangeCurrentTime={onChangeCurrentTime}
- keyframes={keyframes}
- />
+ <div className={classnames(classes.fileInfo, videoMode && "videoMode")}>
+ {title}
+ </div>
+ {videoMode && (
+ <KeyframeTimeline
+ key="keyframeTimeline"
+ currentTime={currentVideoTime}
+ duration={videoDuration}
+ onChangeCurrentTime={onChangeCurrentTime}
+ keyframes={keyframes}
+ />
+ )}
  <div className={classes.headerActions}>
  <HeaderButtonContext.Provider value={{ onHeaderButtonClick }}>
  {multipleImages && (
@@ -69,10 +76,14 @@ export const Header = ({
  />
  </>
  )}
- {!videoPlaying ? (
- <HeaderButton name="Play" Icon={PlayIcon} />
- ) : (
- <HeaderButton name="Pause" Icon={PauseIcon} />
+ {videoMode && (
+ <>
+ {!videoPlaying ? (
+ <HeaderButton key="play" name="Play" Icon={PlayIcon} />
+ ) : (
+ <HeaderButton key="pause" name="Pause" Icon={PauseIcon} />
+ )}
+ </>
  )}
  <HeaderButton name="Settings" Icon={SettingsIcon} />
  {/* <HeaderButton name="Help" Icon={HelpIcon} /> */}

src/Header/styles.js

@@ -11,6 +11,10 @@ export default {
  },
  fileInfo: {
  alignItems: "center",
+ flexGrow: 1,
+ "&.videoMode": {
+ flexMode: 0.1
+ },
  display: "flex",
  fontWeight: "bold",
  color: grey[800],

src/HighlightBox/index.js

@@ -12,6 +12,9 @@ const useStyles = makeStyles({
  highlightBox: {
  zIndex: 2,
  transition: "opacity 500ms",
+ "&.highlighted": {
+ zIndex: 3
+ },
  "&:not(.highlighted)": {
  opacity: 0
  },

src/HistorySidebarBox/index.js

@@ -49,7 +49,7 @@ export const HistorySidebarBox = ({
  secondary={moment(time).format("LT")}
  />
  {i === 0 && (
- <ListItemSecondaryAction onClick={onRestoreHistory}>
+ <ListItemSecondaryAction onClick={() => onRestoreHistory()}>
  <IconButton>
  <UndoIcon />
  </IconButton>

src/MainLayout/index.js

@@ -79,6 +79,7 @@ export const MainLayout = ({ state, dispatch }: Props) => {
  <div className={classes.headerContainer}>
  <Header
  onHeaderButtonClick={action("HEADER_BUTTON_CLICKED", "buttonName")}
+ videoMode={state.annotationType === "video"}
  inFullScreen={state.fullScreen}
  isAVideoFrame={isAVideoFrame}
  nextVideoFrameHasRegions={