Fix bugs breaking brush tool and unintended undo behavior (#378)

* Fix bug where switching tabs while using brush tool breaks brush + file loading changes * Fix bug where undo can break brush tool / panning * Delete edits.cy.js (not finished) File mistakenly staged in the commit. * Fix bug where Ctrl+Z always switches to Display * Change ENTER_TAB (does not need to specify tool) * Apply automatic changes Co-authored-by: ykevu <ykevu@users.noreply.github.com>
vanvalenlab · Sep 22, 2022 · ff98704 · ff98704
1 parent 26992b5
commit ff98704
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 10 deletions.
diff --git a/backend/deepcell_label/blueprints.py b/backend/deepcell_label/blueprints.py
@@ -122,11 +122,12 @@ def create_project_from_dropped_file():
     """
     start = timeit.default_timer()
     input_file = request.files.get('images')
+    axes = request.form['axes'] if 'axes' in request.form else None
     # axes = request.form['axes'] if 'axes' in request.form else DCL_AXES
     with tempfile.NamedTemporaryFile(delete=DELETE_TEMP) as f:
         f.write(input_file.read())
         f.seek(0)
-        loader = Loader(f)
+        loader = Loader(f, axes=axes)
         project = Project.create(loader)
     if not DELETE_TEMP:
         f.close()

diff --git a/frontend/src/Load/FileUpload.js b/frontend/src/Load/FileUpload.js
@@ -61,7 +61,7 @@ export default function FileUpload({ loadService }) {
       <Dropzone
         name='imageUploadInput'
         onDrop={(files) => send({ type: 'SET_UPLOAD_FILE', files })}
-        accept='image/png, image/tiff, application/zip, .npz, .trk'
+        accept='image/png, image/tiff, application/zip, .zip, .npz, .trk'
       >
         {({ getRootProps, getInputProps, fileRejections }) => (
           <section>

diff --git a/frontend/src/Project/EditControls/EditTabs.js b/frontend/src/Project/EditControls/EditTabs.js
@@ -1,10 +1,11 @@
 import { Paper, Tab, Tabs } from '@mui/material';
 import { useSelector } from '@xstate/react';
+import { bind } from 'mousetrap';
 import { useEffect } from 'react';
 import { useLabelMode, useSpots } from '../ProjectContext';
 
 const tabKeybinds = {
-  display: ['c', 'f', 'y', 'i', '0', 'z', 'o'],
+  display: ['c', 'f', 'y', 'i', '0', 'o'],
   segment: ['b', 'e', 'x', 'k', 'g', 't', 'w', 'm', 'q'],
   cells: ['Backspace', 'r', 's'],
 };
@@ -56,6 +57,8 @@ function EditTabs() {
         labelMode.send('EDIT_CELLS');
       }
     };
+    // Bind 'z' for edge case where Undo triggers DISPLAY
+    bind('z', () => labelMode.send('DISPLAY'));
     document.addEventListener('keydown', listener);
     return () => {
       document.removeEventListener('keydown', listener);

diff --git a/frontend/src/Project/EditControls/SegmentControls/ToolButtons/SelectButton.js b/frontend/src/Project/EditControls/SegmentControls/ToolButtons/SelectButton.js
@@ -9,7 +9,11 @@ function SelectButton(props) {
 
   const onClick = useCallback(() => segment.send({ type: 'SET_TOOL', tool: 'select' }), [segment]);
 
-  const tooltipText = <span>Click to select a label</span>;
+  const tooltipText = (
+    <span>
+      Click to select a label <kbd>V</kbd>
+    </span>
+  );
 
   return (
     <ToolButton

diff --git a/frontend/src/Project/service/canvasMachine.js b/frontend/src/Project/service/canvasMachine.js
@@ -59,9 +59,10 @@ const createCanvasMachine = ({ undoRef, eventBuses }) =>
             sx: ctx.sx,
             sy: ctx.sy,
             zoom: ctx.zoom,
+            panOnDrag: ctx.panOnDrag,
           })),
         },
-        RESTORE: { actions: ['restore', respond('RESTORED')] },
+        RESTORE: { actions: ['restore', respond('RESTORED'), send('RESTORE_DRAG')] },
         COORDINATES: {
           cond: 'newCoordinates',
           actions: ['setCoordinates', forwardTo('eventBus')],
@@ -83,6 +84,7 @@ const createCanvasMachine = ({ undoRef, eventBuses }) =>
                 panOnDrag: {
                   on: {
                     SET_PAN_ON_DRAG: { target: 'checkDrag', actions: 'setPanOnDrag' },
+                    RESTORE_DRAG: { target: 'checkDrag' },
                   },
                   initial: 'idle',
                   states: {
@@ -117,6 +119,7 @@ const createCanvasMachine = ({ undoRef, eventBuses }) =>
                     mouseup: { actions: 'sendToEventBus' },
                     mousemove: { actions: 'computeCoordinates' },
                     SET_PAN_ON_DRAG: { target: 'checkDrag', actions: 'setPanOnDrag' },
+                    RESTORE_DRAG: { target: 'checkDrag' },
                   },
                 },
               },

diff --git a/frontend/src/Project/service/edit/editMachine.js b/frontend/src/Project/service/edit/editMachine.js
@@ -56,7 +56,7 @@ const createEditMachine = ({ eventBuses, undoRef }) =>
           },
         },
         editSegment: {
-          entry: assign({ tool: 'editSegment' }),
+          entry: [assign({ tool: 'editSegment' }), send({ type: 'ENTER_TAB' })],
           on: {
             mouseup: { actions: forwardTo('editSegment') },
             mousedown: { actions: forwardTo('editSegment') },
@@ -103,6 +103,7 @@ const createEditMachine = ({ eventBuses, undoRef }) =>
         EDIT_SPOTS: 'editSpots',
 
         SET_PAN_ON_DRAG: { actions: forwardTo('canvas') },
+        ENTER_TAB: { actions: forwardTo('editSegment') },
       },
     },
     {

diff --git a/frontend/src/Project/service/edit/segment/editSegmentMachine.js b/frontend/src/Project/service/edit/segment/editSegmentMachine.js
@@ -69,15 +69,21 @@ const createEditSegmentMachine = (context) =>
           initial: 'pan',
           states: {
             pan: {
-              entry: sendParent({ type: 'SET_PAN_ON_DRAG', panOnDrag: true }),
+              entry: 'setPanOnDragTrue',
               on: {
-                SET_TOOL: { cond: 'isNoPanTool', target: 'noPan' },
+                // Undo edge case can cause POD=False in this state, so must reset in this case.
+                SET_TOOL: [
+                  { cond: 'isNoPanTool', target: 'noPan' },
+                  { actions: 'setPanOnDragTrue' },
+                ],
               },
             },
             noPan: {
-              entry: sendParent({ type: 'SET_PAN_ON_DRAG', panOnDrag: false }),
+              entry: 'setPanOnDragFalse',
               on: {
-                SET_TOOL: { cond: 'isPanTool', target: 'pan' },
+                SET_TOOL: [{ cond: 'isPanTool', target: 'pan' }, { actions: 'setPanOnDragFalse' }],
+                // Set POD=False when switching from other tab
+                ENTER_TAB: { actions: 'setPanOnDragFalse' },
               },
             },
           },
@@ -113,6 +119,8 @@ const createEditSegmentMachine = (context) =>
           send('EXIT', { to: ctx.tools[ctx.tool] }),
           assign({ tool: evt.tool }),
         ]),
+        setPanOnDragTrue: sendParent({ type: 'SET_PAN_ON_DRAG', panOnDrag: true }),
+        setPanOnDragFalse: sendParent({ type: 'SET_PAN_ON_DRAG', panOnDrag: false }),
         save: respond((ctx) => ({ type: 'RESTORE', tool: ctx.tool })),
         restore: assign({ tool: (_, evt) => evt.tool }),
         spawnTools: assign({