Merge 579110b into 3463ba8

vanvalenlab · Oct 27, 2021 · fb95688 · fb95688
2 parents 3463ba8 + 579110b
commit fb95688
Show file tree

Hide file tree

Showing 41 changed files with 654 additions and 488 deletions.
diff --git a/README.md b/README.md
diff --git a/screenshots/channelOptions.png b/screenshots/channelOptions.png
diff --git a/screenshots/deepcellLabelUI.png b/screenshots/deepcellLabelUI.png
diff --git a/screenshots/displayControls.png b/screenshots/displayControls.png
diff --git a/screenshots/multiChannelDisplayControls.png b/screenshots/multiChannelDisplayControls.png
diff --git a/screenshots/segmentControls.png b/screenshots/segmentControls.png
diff --git a/screenshots/segmentationDisplayControls.png b/screenshots/segmentationDisplayControls.png
diff --git a/screenshots/singleChannelDisplayControls.png b/screenshots/singleChannelDisplayControls.png
diff --git a/visualizer/src/Controls/ImageControls/FrameSlider.js b/visualizer/src/Controls/ImageControls/FrameSlider.js
@@ -1,6 +1,6 @@
 import { FormLabel, makeStyles, Slider, Tooltip } from '@material-ui/core';
 import { useSelector } from '@xstate/react';
-import { bind, unbind } from 'mousetrap';
+import { bind } from 'mousetrap';
 import React, { useEffect, useState } from 'react';
 import { useImage } from '../../ProjectContext';
 
@@ -21,10 +21,6 @@ function FrameSlider() {
     const nextFrame = (frame + 1) % numFrames;
     bind('a', () => image.send({ type: 'LOAD_FRAME', frame: prevFrame }));
     bind('d', () => image.send({ type: 'LOAD_FRAME', frame: nextFrame }));
-    return () => {
-      unbind('a');
-      unbind('d');
-    };
   }, [frame, image, numFrames]);
 
   const handleFrameChange = (event, newValue) => {

diff --git a/visualizer/src/Controls/ImageControls/LabeledControls/FeatureSelect.js b/visualizer/src/Controls/ImageControls/LabeledControls/FeatureSelect.js
@@ -2,7 +2,7 @@ import Grid from '@material-ui/core/Grid';
 import Select from '@material-ui/core/Select';
 import Tooltip from '@material-ui/core/Tooltip';
 import { useSelector } from '@xstate/react';
-import { bind, unbind } from 'mousetrap';
+import { bind } from 'mousetrap';
 import React, { useEffect } from 'react';
 import { useLabeled } from '../../../ProjectContext';
 
@@ -27,10 +27,6 @@ function FeatureSelect() {
     const nextFeature = (feature + 1) % numFeatures;
     bind('shift+f', () => labeled.send({ type: 'LOAD_FEATURE', feature: prevFeature }));
     bind('f', () => labeled.send({ type: 'LOAD_FEATURE', feature: nextFeature }));
-    return () => {
-      unbind('shift+f');
-      unbind('f');
-    };
   }, [labeled, feature, numFeatures]);
 
   return (

diff --git a/visualizer/src/Controls/ImageControls/LabeledControls/HighlightToggle.js b/visualizer/src/Controls/ImageControls/LabeledControls/HighlightToggle.js
@@ -3,7 +3,7 @@ import FormGroup from '@material-ui/core/FormGroup';
 import Switch from '@material-ui/core/Switch';
 import Tooltip from '@material-ui/core/Tooltip';
 import { useSelector } from '@xstate/react';
-import { bind, unbind } from 'mousetrap';
+import { bind } from 'mousetrap';
 import React, { useEffect, useRef } from 'react';
 import { useLabeled } from '../../../ProjectContext';
 
@@ -26,7 +26,13 @@ function HighlightToggle() {
 
   useEffect(() => {
     bind('h', () => labeled.send('TOGGLE_HIGHLIGHT'));
-    return () => unbind('h');
+    // const sendToggleHighlight = e => {
+    //   if (e.key === 'h') {
+    //     labeled.send('TOGGLE_HIGHLIGHT');
+    //   }
+    // };
+    // document.addEventListener('keydown', sendToggleHighlight);
+    // return () => document.removeEventListener('keydown', sendToggleHighlight);
   }, [labeled]);
 
   return (

diff --git a/visualizer/src/Controls/ImageControls/LabeledControls/OpacitySlider.js b/visualizer/src/Controls/ImageControls/LabeledControls/OpacitySlider.js
@@ -4,7 +4,7 @@ import Slider from '@material-ui/core/Slider';
 import Tooltip from '@material-ui/core/Tooltip';
 import Typography from '@material-ui/core/Typography';
 import { useSelector } from '@xstate/react';
-import { bind, unbind } from 'mousetrap';
+import { bind } from 'mousetrap';
 import React, { useEffect } from 'react';
 import { useLabeled } from '../../../ProjectContext';
 
@@ -37,7 +37,6 @@ function OpacitySlider() {
 
   useEffect(() => {
     bind('z', () => labeled.send('CYCLE_OPACITY'));
-    return () => unbind('z');
   }, [labeled]);
 
   return (

diff --git a/visualizer/src/Controls/ImageControls/LabeledControls/OutlineToggle.js b/visualizer/src/Controls/ImageControls/LabeledControls/OutlineToggle.js
@@ -3,7 +3,7 @@ import FormGroup from '@material-ui/core/FormGroup';
 import Switch from '@material-ui/core/Switch';
 import Tooltip from '@material-ui/core/Tooltip';
 import { useSelector } from '@xstate/react';
-import { bind, unbind } from 'mousetrap';
+import { bind } from 'mousetrap';
 import React, { useEffect, useRef } from 'react';
 import { useLabeled } from '../../../ProjectContext';
 
@@ -26,7 +26,6 @@ function OutlineToggle() {
 
   useEffect(() => {
     bind('o', () => labeled.send('TOGGLE_OUTLINE'));
-    return () => unbind('o');
   }, [labeled]);
 
   return (

diff --git a/visualizer/src/Controls/ImageControls/RawControls/ColorModeToggle.js b/visualizer/src/Controls/ImageControls/RawControls/ColorModeToggle.js
@@ -3,7 +3,7 @@ import FormControlLabel from '@material-ui/core/FormControlLabel';
 import Switch from '@material-ui/core/Switch';
 import Tooltip from '@material-ui/core/Tooltip';
 import { useSelector } from '@xstate/react';
-import { bind, unbind } from 'mousetrap';
+import { bind } from 'mousetrap';
 import React, { useCallback, useEffect, useRef } from 'react';
 import { useRaw } from '../../../ProjectContext';
 
@@ -22,7 +22,6 @@ function ColorModeToggle() {
 
   useEffect(() => {
     bind('y', onClick);
-    return () => unbind('y');
   }, [onClick]);
 
   const toggleTooltip = (

diff --git a/visualizer/src/Controls/ImageControls/RawControls/GrayscaleControls.js b/visualizer/src/Controls/ImageControls/RawControls/GrayscaleControls.js
@@ -7,7 +7,7 @@ import Slider from '@material-ui/core/Slider';
 import Switch from '@material-ui/core/Switch';
 import Tooltip from '@material-ui/core/Tooltip';
 import { useSelector } from '@xstate/react';
-import { bind, unbind } from 'mousetrap';
+import { bind } from 'mousetrap';
 import React, { useEffect, useRef } from 'react';
 import { useRaw } from '../../../ProjectContext';
 
@@ -39,7 +39,6 @@ const InvertToggle = ({ channel }) => {
 
   useEffect(() => {
     bind('i', () => channel.send('TOGGLE_INVERT'));
-    return () => unbind('i');
   }, [channel]);
 
   return (
@@ -83,10 +82,6 @@ const ChannelSelector = () => {
     const nextChannel = (channel + 1) % numChannels;
     bind('shift+c', () => raw.send({ type: 'LOAD_CHANNEL', channel: prevChannel }));
     bind('c', () => raw.send({ type: 'LOAD_CHANNEL', channel: nextChannel }));
-    return () => {
-      unbind('shift+c');
-      unbind('c');
-    };
   }, [raw, channel, numChannels]);
 
   return (
@@ -183,7 +178,6 @@ const GrayscaleControls = () => {
 
   useEffect(() => {
     bind('0', () => raw.send('RESET'));
-    return () => unbind('0');
   }, [raw]);
 
   return (

diff --git a/visualizer/src/Controls/Segment/ActionButtons/ActionButton.js b/visualizer/src/Controls/Segment/ActionButtons/ActionButton.js
@@ -1,7 +1,7 @@
 import MuiButton from '@material-ui/core/Button';
 import { makeStyles, withStyles } from '@material-ui/core/styles';
 import Tooltip from '@material-ui/core/Tooltip';
-import { bind, unbind } from 'mousetrap';
+import { bind } from 'mousetrap';
 import React, { useEffect } from 'react';
 
 export const useStyles = makeStyles(theme => ({
@@ -30,7 +30,6 @@ const ActionButton = ({ tooltipText, disabled, onClick, hotkey, ...other }) => {
 
   useEffect(() => {
     bind(hotkey, onClick);
-    return () => unbind(hotkey);
   }, [hotkey, onClick]);
 
   return (

diff --git a/visualizer/src/Controls/Segment/ActionButtons/AutofitButton.js b/visualizer/src/Controls/Segment/ActionButtons/AutofitButton.js
@@ -13,7 +13,7 @@ function AutofitButton(props) {
 
   const tooltipText = (
     <span>
-      Fits a label to a channel (<kbd>M</kbd>)
+      Fits a label to a channel <kbd>M</kbd>
     </span>
   );
 

diff --git a/visualizer/src/Controls/Segment/ActionButtons/DeleteButton.js b/visualizer/src/Controls/Segment/ActionButtons/DeleteButton.js
@@ -11,7 +11,7 @@ function DeleteButton(props) {
 
   const tooltipText = (
     <span>
-      Removes a label (<kbd>Del</kbd> or <kbd>Backspace</kbd>)
+      Removes a label <kbd>Del</kbd> or <kbd>Backspace</kbd>
     </span>
   );
 

diff --git a/visualizer/src/Controls/Segment/ActionButtons/GrowButton.js b/visualizer/src/Controls/Segment/ActionButtons/GrowButton.js
@@ -11,7 +11,7 @@ function GrowButton(props) {
 
   const tooltipText = (
     <span>
-      Expands a label by one pixel (<kbd>Shift</kbd> + <kbd>Q</kbd>)
+      Expands a label by one pixel <kbd>Shift</kbd> + <kbd>Q</kbd>
     </span>
   );
 

diff --git a/visualizer/src/Controls/Segment/ActionButtons/ReplaceButton.js b/visualizer/src/Controls/Segment/ActionButtons/ReplaceButton.js
@@ -11,7 +11,7 @@ function ReplaceButton(props) {
 
   const tooltipText = (
     <span>
-      Combines two labels (<kbd>Shift</kbd> + <kbd>R</kbd>)
+      Combines two labels <kbd>Shift</kbd> + <kbd>R</kbd>
     </span>
   );
 

diff --git a/visualizer/src/Controls/Segment/ActionButtons/ShrinkButton.js b/visualizer/src/Controls/Segment/ActionButtons/ShrinkButton.js
@@ -11,7 +11,7 @@ function ShrinkButton(props) {
 
   const tooltipText = (
     <span>
-      Contracts a label by one pixel (<kbd>Q</kbd>)
+      Contracts a label by one pixel <kbd>Q</kbd>
     </span>
   );
 

diff --git a/visualizer/src/Controls/Segment/ActionButtons/SwapButton.js b/visualizer/src/Controls/Segment/ActionButtons/SwapButton.js
@@ -11,7 +11,7 @@ function SwapButton(props) {
 
   const tooltipText = (
     <span>
-      Switches the position of two labels (<kbd>Shift</kbd> + <kbd>S</kbd>)
+      Switches the position of two labels <kbd>Shift</kbd> + <kbd>S</kbd>
     </span>
   );