Merge branch 'master' of github.com:scalableminds/webknossos into split-setting-components

Author: hotzenklotz

frontend/javascripts/admin/voxelytics/task_list_view.tsx

@@ -36,7 +36,7 @@ import {
   formatTimeInterval,
   formatTimeIntervalStrict,
 } from "libs/format_utils";
-import { useSearchParams, useUpdateEvery, useWkSelector } from "libs/react_hooks";
+import { useUpdateEvery, useWkSelector } from "libs/react_hooks";
 import { notEmpty } from "libs/utils";
 import MiniSearch from "minisearch";
 import React, { useEffect, useMemo, useState } from "react";
@@ -254,6 +254,7 @@ export default function TaskListView({
   isLoading,
   onToggleExpandedMetaTaskKey,
   onReload,
+  runId,
 }: {
   report: VoxelyticsWorkflowReport;
   tasksWithHierarchy: Array<VoxelyticsTaskConfigWithHierarchy>;
@@ -262,10 +263,10 @@ export default function TaskListView({
   isLoading: boolean;
   onToggleExpandedMetaTaskKey: (v: string) => void;
   onReload: () => void;
+  runId: string | null;
 }) {
   const { modal } = App.useApp();
   const [searchQuery, setSearchQuery] = useState("");
-  const { runId } = useSearchParams();
   const navigate = useNavigate();
 
   // expandedTask = state of the collapsible list
@@ -566,7 +567,9 @@ export default function TaskListView({
             }}
           />
           {foreignWorkflow != null ? (
-            <Link to={`/workflows/${foreignWorkflow[0]}?runId=${foreignWorkflow[1]}`}>
+            <Link
+              to={`/workflows/${foreignWorkflow[0]}/run/${encodeURIComponent(foreignWorkflow[1])}`}
+            >
               {task.taskName}
               &nbsp;
               <ExportOutlined />
@@ -679,13 +682,12 @@ export default function TaskListView({
               </Button>
               <Select
                 value={runId ?? ""}
-                onChange={(value) =>
+                onChange={(value) => {
+                  const basePath = `/workflows/${report.workflow.hash}`;
                   navigate(
-                    value === ""
-                      ? removeUrlParam(location, "runId")
-                      : addUrlParam(location, "runId", value),
-                  )
-                }
+                    value === "" ? `${basePath}` : `${basePath}/run/${encodeURIComponent(value)}`,
+                  );
+                }}
                 popupMatchSelectWidth={false}
                 styles={{
                   root: {

frontend/javascripts/admin/voxelytics/workflow_list_view.tsx

@@ -201,7 +201,7 @@ export default function WorkflowListView() {
                     {run.workflowName} ({run.workflowHash})
                   </Link>
                 ) : (
-                  <Link to={`/workflows/${run.workflowHash}?runId=${encodeURIComponent(run.id)}`}>
+                  <Link to={`/workflows/${run.workflowHash}/run/${encodeURIComponent(run.id)}`}>
                     {run.name}
                   </Link>
                 ),

frontend/javascripts/admin/voxelytics/workflow_view.tsx

@@ -1,13 +1,12 @@
+import { useQuery } from "@tanstack/react-query";
 import { isWorkflowAccessibleBySwitching } from "admin/api/organization";
 import { getVoxelyticsWorkflow } from "admin/rest_api";
 import BrainSpinner, { BrainSpinnerWithError } from "components/brain_spinner";
-import { usePolling, useSearchParams, useWkSelector } from "libs/react_hooks";
-import Toast from "libs/toast";
+import { useSearchParams, useWkSelector } from "libs/react_hooks";
 import sortBy from "lodash-es/sortBy";
 import { useEffect, useMemo, useState } from "react";
 import { useParams } from "react-router-dom";
 import {
-  type APIOrganization,
   VoxelyticsRunState,
   type VoxelyticsTaskConfig,
   type VoxelyticsTaskConfigWithHierarchy,
@@ -22,12 +21,6 @@ import TabTitle from "viewer/view/components/tab_title_component";
 import TaskListView from "./task_list_view";
 import { VX_POLLING_INTERVAL } from "./utils";
 
-type LoadingState =
-  | { status: "PENDING" }
-  | { status: "READY" }
-  | { status: "LOADING" }
-  | { status: "FAILED"; error: Error; organizationToSwitchTo?: APIOrganization };
-
 function lexicographicalTopologicalSort(
   nodes: Array<VoxelyticsWorkflowDagNode>,
   edges: Array<VoxelyticsWorkflowDagEdge>,
@@ -318,12 +311,10 @@ function shouldCollapseId(id: string, expandedKeys: Record<string, boolean>): [s
 }
 
 export default function WorkflowView() {
-  const { workflowHash = "" } = useParams();
+  const { workflowHash = "", runId } = useParams();
   const { metatask } = useSearchParams();
   const user = useWkSelector((state) => state.activeUser);
 
-  const [loadingState, setLoadingState] = useState<LoadingState>({ status: "PENDING" });
-  const [report, setReport] = useState<VoxelyticsWorkflowReport | null>(null);
   // expandedMetaTaskKeys holds the meta tasks which should be expanded
   // in the left-side DAG. The right-side task listing will always show
   // all tasks (but in a hierarchical manner if meta tasks exist).
@@ -342,34 +333,36 @@ export default function WorkflowView() {
     setExpandedMetaTaskKeys(sortedKeys);
   };
 
-  async function loadData() {
-    try {
-      setLoadingState({ status: "LOADING" });
-      let _report = parseReport(await getVoxelyticsWorkflow(workflowHash, null));
-      if (metatask != null) {
-        // If a meta task is passed via a GET parameter,
-        // the entire report is filtered so that only the tasks of the given
-        // meta task are shown (left-hand as well as right-hand side).
-        _report = selectMetaTask(_report, metatask);
-      }
-      setReport(_report);
-      setLoadingState({ status: "READY" });
-    } catch (err) {
-      try {
-        const organization =
-          user != null ? await isWorkflowAccessibleBySwitching(workflowHash) : null;
-        setLoadingState({
-          status: "FAILED",
-          organizationToSwitchTo: organization ?? undefined,
-          error: err as Error,
-        });
-      } catch (accessibleBySwitchingError) {
-        Toast.error("Could not load workflow report.");
-        console.error(accessibleBySwitchingError);
-        setLoadingState({ status: "FAILED", error: accessibleBySwitchingError as Error });
-      }
-    }
-  }
+  const {
+    data: report,
+    isLoading,
+    isError,
+    refetch,
+  } = useQuery({
+    queryKey: ["voxelyticsWorkflow", workflowHash],
+    queryFn: async () => await getVoxelyticsWorkflow(workflowHash, null),
+    // If a meta task is passed via a URL parameter, the entire report is filtered so that only the
+    // tasks of the given meta task are shown (left-hand as well as right-hand side).
+    select: (data) => {
+      const parsedReport = parseReport(data);
+      return metatask != null ? selectMetaTask(parsedReport, metatask) : parsedReport;
+    },
+    refetchInterval: (query) => {
+      const data = query.state.data;
+      return data == null || data.runs.some((run) => run.state === VoxelyticsRunState.RUNNING)
+        ? (VX_POLLING_INTERVAL ?? false)
+        : false;
+    },
+    staleTime: 0, // disable caching
+    gcTime: 0, // disable garbage collection
+    retry: false,
+  });
+
+  const { data: accessibleOrganization } = useQuery({
+    queryKey: ["voxelyticsWorkflowAccess", workflowHash],
+    queryFn: () => isWorkflowAccessibleBySwitching(workflowHash),
+    enabled: isError && user != null,
+  });
 
   useEffect(() => {
     if (report != null) {
@@ -391,23 +384,11 @@ export default function WorkflowView() {
     [report],
   );
 
-  usePolling(
-    loadData,
-    // Only poll while the workflow is still running, but also load a report
-    // if it wasn't loaded before or the workflow hash changed
-    report == null ||
-      report.workflow.hash !== workflowHash ||
-      report.runs.some((run) => run.state === VoxelyticsRunState.RUNNING)
-      ? VX_POLLING_INTERVAL
-      : null,
-    [workflowHash],
-  );
-
-  if (loadingState.status === "FAILED" && user != null) {
+  if (isError && user != null) {
     return (
       <BrainSpinnerWithError
         gotUnhandledError={false}
-        organizationToSwitchTo={loadingState.organizationToSwitchTo}
+        organizationToSwitchTo={accessibleOrganization ?? undefined}
         entity="workflow"
       />
     );
@@ -425,8 +406,9 @@ export default function WorkflowView() {
         expandedMetaTaskKeys={expandedMetaTaskKeys}
         onToggleExpandedMetaTaskKey={handleToggleExpandedMetaTaskKey}
         openMetatask={metatask}
-        onReload={loadData}
-        isLoading={loadingState.status === "LOADING"}
+        runId={runId ?? null}
+        onReload={refetch}
+        isLoading={isLoading}
       />
     </div>
   );

frontend/javascripts/router/router.tsx

@@ -457,6 +457,27 @@ const routes = createRoutesFromElements(
     />
     <Route
       path="/workflows/:workflowHash"
+      loader={({ params, request }) => {
+        const url = new URL(request.url);
+        const runId = url.searchParams.get("runId");
+        if (runId) {
+          url.searchParams.delete("runId");
+          const search = url.searchParams.toString();
+
+          return redirect(
+            `/workflows/${params.workflowHash}/run/${encodeURIComponent(runId)}${search ? `?${search}` : ""}`,
+          );
+        }
+        return null;
+      }}
+      element={
+        <SecuredRoute>
+          <AsyncWorkflowView />
+        </SecuredRoute>
+      }
+    />
+    <Route
+      path="/workflows/:workflowHash/run/:runId"
       element={
         <SecuredRoute>
           <AsyncWorkflowView />