Avoid sudden dataset reordering in dashboard (#4640)

* tmp: avoid reordering of datasets * Merge branch 'master' of github.com:scalableminds/webknossos into avoid-ds-reordering * clean up * update changelog * fix linting * undo memoization of getLayerByName * Merge branch 'master' into avoid-ds-reordering
scalableminds · Jun 8, 2020 · 01ea8a3 · 01ea8a3
1 parent 3e114c3
commit 01ea8a3
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 10 deletions.
diff --git a/CHANGELOG.unreleased.md b/CHANGELOG.unreleased.md
@@ -20,11 +20,10 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 
 ### Fixed
 
-
+- Fixed that the dataset list in the dashboard could reorder its items asynchronously which could be very annoying for the user. [#4640](https://github.com/scalableminds/webknossos/pull/4640)
 - Improved resilience when refreshing datasets while a datastore is down. [#4636](https://github.com/scalableminds/webknossos/pull/4636)
 - Fixed a bug where requesting volume tracing fallback layer data from webknossos-connect failed. [#4644](https://github.com/scalableminds/webknossos/pull/4644)
 
-
 ### Removed
 
 -

diff --git a/docs/keyboard_shortcuts.md b/docs/keyboard_shortcuts.md
@@ -74,7 +74,7 @@ Find all available keyboard & mouse shortcuts for webKnossos listed below.
 | --------------------------------- | ----------------------------------------------------------- |
 | Left Mouse Drag or Arrow Keys     | Move (Move Mode) / Add To Current Cell (Trace / Brush Mode) |
 | SHIFT + Left Click                | Select Active Cell                                          |
-| CTRL + Left Mouse Drag            | Add Empty Voxels To Current Cell (in Trace / Brush Mode)    |
+| CTRL + Left Mouse Drag            | Add Empty Voxels To Current Cell (in Trace / Brush Mode); i.e., does not overwrite other cells    |
 | Right Mouse Drag                  | Remove Voxels From Current Cell                             |
 | CTRL + Right Mouse Drag           | Remove Voxels From Any Cell                                 |
 | Alt + Mouse Move                  | Move                                                        |

diff --git a/frontend/javascripts/dashboard/dataset/dataset_cache_provider.js b/frontend/javascripts/dashboard/dataset/dataset_cache_provider.js
@@ -8,11 +8,16 @@ import { handleGenericError } from "libs/error_handling";
 import UserLocalStorage from "libs/user_local_storage";
 import * as Utils from "libs/utils";
 
+type Options = {
+  datasetFilteringMode?: DatasetFilteringMode,
+  applyUpdatePredicate?: (datasets: Array<APIMaybeUnimportedDataset>) => boolean,
+};
+
 type Context = {
   datasets: Array<APIMaybeUnimportedDataset>,
   isLoading: boolean,
   checkDatasets: () => Promise<void>,
-  fetchDatasets: (datasetFilteringMode?: DatasetFilteringMode) => Promise<void>,
+  fetchDatasets: (options?: Options) => Promise<void>,
 };
 
 const wkDatasetsCacheKey = "wk.datasets";
@@ -38,9 +43,10 @@ export const DatasetCacheContext = createContext<Context>({
 export default function DatasetCacheProvider({ children }: { children: Node }) {
   const [datasets, setDatasets] = useState(datasetCache.get());
   const [isLoading, setIsLoading] = useState(false);
-  async function fetchDatasets(
-    datasetFilteringMode?: DatasetFilteringMode = "onlyShowReported",
-  ): Promise<void> {
+  async function fetchDatasets(options?: Options = {}): Promise<void> {
+    const datasetFilteringMode = options.datasetFilteringMode || "onlyShowReported";
+    const applyUpdatePredicate = options.applyUpdatePredicate || (_datasets => true);
+
     try {
       setIsLoading(true);
       const mapFilterModeToUnreportedParameter = {
@@ -52,7 +58,9 @@ export default function DatasetCacheProvider({ children }: { children: Node }) {
         mapFilterModeToUnreportedParameter[datasetFilteringMode],
       );
       datasetCache.set(newDatasets);
-      setDatasets(newDatasets);
+      if (applyUpdatePredicate(newDatasets)) {
+        setDatasets(newDatasets);
+      }
     } catch (error) {
       handleGenericError(error);
     } finally {

diff --git a/frontend/javascripts/dashboard/dataset_view.js b/frontend/javascripts/dashboard/dataset_view.js
@@ -56,7 +56,18 @@ function DatasetView(props: Props) {
     if (state.datasetFilteringMode != null) {
       setDatasetFilteringMode(state.datasetFilteringMode);
     }
-    context.fetchDatasets();
+    context.fetchDatasets({
+      applyUpdatePredicate: _newDatasets => {
+        // Only update the datasets when there are none currently.
+        // This avoids sudden changes in the dataset table (since
+        // a cached version is already shown). As a result, the
+        // dataset list is outdated a bit (shows the list of the
+        // last page load). Since a simple page refresh (or clicking
+        // the Refresh button) will show a newer version, this is acceptable.
+        const updateDatasets = context.datasets.length === 0;
+        return updateDatasets;
+      },
+    });
   }, []);
 
   useEffect(() => {
@@ -151,7 +162,7 @@ function DatasetView(props: Props) {
     <Radio
       onChange={() => {
         setDatasetFilteringMode(key);
-        context.fetchDatasets(key);
+        context.fetchDatasets({ datasetFilteringMode: key });
       }}
       checked={datasetFilteringMode === key}
     >