Fix duplicating annotations via toggling show archived annotations bu…

…tton and fix downsample modal rendering errors (#6058) * fix duplicating annotations via toggling show archieved button * fix rendering error upon selecting down sample modal fix downsample modal not being visible * add changelog entries * apply pr feedback && avoid another race condition in explorative annotations view * fix spelling
scalableminds · Feb 28, 2022 · 1dd5f62 · 1dd5f62
1 parent fe54d5d
commit 1dd5f62
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 39 deletions.
diff --git a/CHANGELOG.unreleased.md b/CHANGELOG.unreleased.md
@@ -18,6 +18,8 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 - Improved stability and speed of volume annotations when annotating large areas. [#6055](https://github.com/scalableminds/webknossos/pull/6055)
 
 ### Fixed
+- Fixed a bug that led to crashing the layer settings once the icon for the downsample modal was clicked. [#6058](https://github.com/scalableminds/webknossos/pull/6058)
+- Fixed a bug where toggling between not archived and archived annotations in the "My Annotation" of the dashboard led to inconsistent states and duplicates of annotations. [#6058](https://github.com/scalableminds/webknossos/pull/6058)
 - Fixed a bug where deactivated users would still be listed as allowed to access the datasets of their team. [#6070](https://github.com/scalableminds/webknossos/pull/6070)
 - Fix occasionally "disappearing" data. [#6055](https://github.com/scalableminds/webknossos/pull/6055)
 

diff --git a/frontend/javascripts/dashboard/explorative_annotations_view.js b/frontend/javascripts/dashboard/explorative_annotations_view.js
@@ -99,45 +99,38 @@ class ExplorativeAnnotationsView extends React.PureComponent<Props, State> {
   };
 
   componentDidMount() {
-    this.setState(persistence.load(this.props.history));
-    this.fetchNextPage(0);
+    this.setState(persistence.load(this.props.history), () => this.fetchNextPage(0));
   }
 
-  componentDidUpdate() {
+  componentDidUpdate(_prevProps, prevState) {
     persistence.persist(this.props.history, this.state);
+    if (this.state.shouldShowArchivedTracings !== prevState.shouldShowArchivedTracings) {
+      this.fetchNextPage(0);
+    }
   }
 
   getCurrentModeState = () =>
     this.state.shouldShowArchivedTracings
       ? this.state.archivedModeState
       : this.state.unarchivedModeState;
 
-  setModeState = modeShape => {
-    const { shouldShowArchivedTracings } = this.state;
-    this.setState(prevState => {
-      const newSubState = {
-        // $FlowIssue[exponential-spread] See https://github.com/facebook/flow/issues/8299
-        ...prevState[shouldShowArchivedTracings ? "archivedModeState" : "unarchivedModeState"],
-        ...modeShape,
-      };
-      return {
-        // $FlowIssue[invalid-computed-prop] See https://github.com/facebook/flow/issues/8299
-        [shouldShowArchivedTracings ? "archivedModeState" : "unarchivedModeState"]: newSubState,
-      };
-    });
-  };
+  setModeState = (modeShape, addToArchivedTracings) =>
+    this.addToShownTracings(modeShape, addToArchivedTracings);
 
-  setOppositeModeState = modeShape => {
-    const { shouldShowArchivedTracings } = this.state;
+  setOppositeModeState = (modeShape, addToArchivedTracings) =>
+    this.addToShownTracings(modeShape, !addToArchivedTracings);
+
+  addToShownTracings = (modeShape, addToArchivedTracings) => {
+    const mode = addToArchivedTracings ? "archivedModeState" : "unarchivedModeState";
     this.setState(prevState => {
       const newSubState = {
         // $FlowIssue[exponential-spread] See https://github.com/facebook/flow/issues/8299
-        ...prevState[shouldShowArchivedTracings ? "unarchivedModeState" : "archivedModeState"],
+        ...prevState[mode],
         ...modeShape,
       };
       return {
         // $FlowIssue[invalid-computed-prop] See https://github.com/facebook/flow/issues/8299
-        [shouldShowArchivedTracings ? "unarchivedModeState" : "archivedModeState"]: newSubState,
+        [mode]: newSubState,
       };
     });
   };
@@ -146,19 +139,24 @@ class ExplorativeAnnotationsView extends React.PureComponent<Props, State> {
     // this refers not to the pagination of antd but to the pagination of querying data from SQL
     const showArchivedTracings = this.state.shouldShowArchivedTracings;
     const previousTracings = this.getCurrentModeState().tracings;
-
+    if (this.getCurrentModeState().loadedAllTracings) {
+      return;
+    }
     try {
       this.setState({ isLoading: true });
       const tracings =
         this.props.userId != null
           ? await getCompactAnnotationsForUser(this.props.userId, showArchivedTracings, pageNumber)
           : await getCompactAnnotations(showArchivedTracings, pageNumber);
 
-      this.setModeState({
-        tracings: previousTracings.concat(tracings),
-        lastLoadedPage: pageNumber,
-        loadedAllTracings: tracings.length !== pageLength || tracings.length === 0,
-      });
+      this.setModeState(
+        {
+          tracings: previousTracings.concat(tracings),
+          lastLoadedPage: pageNumber,
+          loadedAllTracings: tracings.length !== pageLength || tracings.length === 0,
+        },
+        showArchivedTracings,
+      );
     } catch (error) {
       handleGenericError(error);
     } finally {
@@ -190,17 +188,24 @@ class ExplorativeAnnotationsView extends React.PureComponent<Props, State> {
     }
 
     const newTracings = this.getCurrentTracings().filter(t => t.id !== tracing.id);
+    const { shouldShowArchivedTracings } = this.state;
 
     if (type === "finish") {
-      this.setModeState({ tracings: newTracings });
-      this.setOppositeModeState({
-        tracings: [newTracing].concat(this.state.archivedModeState.tracings),
-      });
+      this.setModeState({ tracings: newTracings }, shouldShowArchivedTracings);
+      this.setOppositeModeState(
+        {
+          tracings: [newTracing].concat(this.state.archivedModeState.tracings),
+        },
+        shouldShowArchivedTracings,
+      );
     } else {
-      this.setModeState({ tracings: newTracings });
-      this.setOppositeModeState({
-        tracings: [newTracing].concat(this.state.unarchivedModeState.tracings),
-      });
+      this.setModeState({ tracings: newTracings }, shouldShowArchivedTracings);
+      this.setOppositeModeState(
+        {
+          tracings: [newTracing].concat(this.state.unarchivedModeState.tracings),
+        },
+        shouldShowArchivedTracings,
+      );
     }
   };
 
@@ -210,8 +215,8 @@ class ExplorativeAnnotationsView extends React.PureComponent<Props, State> {
     }
 
     const hasVolumeTracing = getVolumeDescriptors(tracing).length > 0;
-    const { typ, id } = tracing;
-    if (!this.state.shouldShowArchivedTracings) {
+    const { typ, id, state } = tracing;
+    if (state === "Active") {
       return (
         <div>
           <Link to={`/annotations/${typ}/${id}`}>
@@ -272,7 +277,7 @@ class ExplorativeAnnotationsView extends React.PureComponent<Props, State> {
       }
     });
 
-    this.setModeState({ tracings: newTracings });
+    this.setModeState({ tracings: newTracings }, this.state.shouldShowArchivedTracings);
 
     editAnnotation(tracing.id, tracing.typ, { name }).then(() => {
       Toast.success(messages["annotation.was_edited"]);

diff --git a/frontend/javascripts/oxalis/view/left-border-tabs/layer_settings_tab.js b/frontend/javascripts/oxalis/view/left-border-tabs/layer_settings_tab.js
@@ -715,7 +715,7 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps, State> {
 
     return (
       <Tooltip title="Open Dialog to Downsample Volume Data">
-        <LinkButton onClick={this.showDownsampleVolumeModal}>
+        <LinkButton onClick={() => this.showDownsampleVolumeModal(volumeTracing)}>
           <img
             src="/assets/images/icon-downsampling.svg"
             style={{

diff --git a/frontend/javascripts/oxalis/view/left-border-tabs/modals/downsample_volume_modal.js b/frontend/javascripts/oxalis/view/left-border-tabs/modals/downsample_volume_modal.js
@@ -32,6 +32,7 @@ export default function DownsampleVolumeModal({
       footer={null}
       width={800}
       maskClosable={false}
+      visible
     >
       <p>
         This annotation does not have volume annotation data in all resolutions. Consequently,