refactor(frontend): refactor frontend for new linting rules

Author: TBThomas56

frontend/relay-workflows-lib/lib/components/TasksFlow.tsx

@@ -204,7 +204,7 @@ const TasksFlow: React.FC<TasksFlowProps> = ({
           panOnDrag={true}
           preventScrolling={false}
           defaultViewport={defaultViewport}
-          fitView={false}
+          fitView={true}
           style={{ width: "100%", height: "100%", overflow: "auto" }}
         />
       )}

frontend/relay-workflows-lib/lib/components/WorkflowsContent.tsx

@@ -38,7 +38,7 @@ interface WorkflowsContentProps {
   onLimitChange: (limit: number) => void;
   updatePageInfo: (hasNextPage: boolean, endCursor: string | null) => void;
   isPaginated: boolean;
-  setIsPaginated: (b: boolean) => void;
+  setIsPaginated: (isPaginated: boolean) => void;
 }
 
 export default function WorkflowsContent({
@@ -60,6 +60,7 @@ export default function WorkflowsContent({
   const pageInfo = data.pageInfo;
   const fetchedWorkflows = data.nodes;
   const prevFetchedRef = useRef<string[]>([]);
+  const isPaginatedRef = useRef<boolean>(isPaginated);
 
   const [expandedWorkflows, setExpandedWorkflows] = useState<Set<string>>(
     new Set(),
@@ -74,12 +75,13 @@ export default function WorkflowsContent({
     const prevNames = prevFetchedRef.current;
     const fetchedChanged =
       JSON.stringify(currentNames) !== JSON.stringify(prevNames);
-    if (fetchedChanged && isPaginated) {
+    if (fetchedChanged && isPaginatedRef.current) {
       setTimeout(() => {
+        isPaginatedRef.current = false;
         setIsPaginated(false);
       }, 0);
     }
-  }, [isPaginated, fetchedWorkflows, setIsPaginated]);
+  }, [isPaginatedRef, fetchedWorkflows, setIsPaginated]);
 
   const handleToggleExpanded = (name: string) => {
     setExpandedWorkflows((prev) => {

frontend/relay-workflows-lib/lib/utils/workflowRelayUtils.ts

@@ -1,10 +1,13 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useMemo } from "react";
 import { useSearchParams } from "react-router-dom";
 import { Artifact, Task } from "workflows-lib";
 import { isWorkflowWithTasks } from "../utils/coreUtils";
 import { useFragment } from "react-relay";
 import { WorkflowTasksFragment } from "../graphql/WorkflowTasksFragment";
-import { WorkflowTasksFragment$key } from "../graphql/__generated__/WorkflowTasksFragment.graphql";
+import {
+  WorkflowTasksFragment$data,
+  WorkflowTasksFragment$key,
+} from "../graphql/__generated__/WorkflowTasksFragment.graphql";
 import { JSONObject } from "workflows-lib";
 import { SubmissionFormParametersFragment$data } from "../components/__generated__/SubmissionFormParametersFragment.graphql";
 
@@ -53,32 +56,37 @@ export function useSelectedTaskIds(): [string[], (tasks: string[]) => void] {
   return [selectedTaskIds, setSelectedTaskIds];
 }
 
+function setFetchedTasks(data: WorkflowTasksFragment$data): Task[] {
+  if (data.status && isWorkflowWithTasks(data.status)) {
+    return data.status.tasks.map((task: Task) => ({
+      id: task.id,
+      name: task.name,
+      status: task.status,
+      depends: [...(task.depends ?? [])],
+      artifacts: task.artifacts.map((artifact: Artifact) => ({
+        ...artifact,
+        parentTask: task.name,
+        parentTaskId: task.id,
+        key: `${task.id}-${artifact.name}`,
+      })),
+      workflow: data.name,
+      instrumentSession: data.visit,
+      stepType: task.stepType,
+    }));
+  }
+  return [];
+}
+
 export function useFetchedTasks(
   fragmentRef: WorkflowTasksFragment$key | null,
 ): Task[] {
-  const [fetchedTasks, setFetchedTasks] = useState<Task[]>([]);
   const data = useFragment(WorkflowTasksFragment, fragmentRef);
 
-  useEffect(() => {
-    if (data && data.status && isWorkflowWithTasks(data.status)) {
-      setFetchedTasks(
-        data.status.tasks.map((task: Task) => ({
-          id: task.id,
-          name: task.name,
-          status: task.status,
-          depends: [...(task.depends ?? [])],
-          artifacts: task.artifacts.map((artifact: Artifact) => ({
-            ...artifact,
-            parentTask: task.name,
-            parentTaskId: task.id,
-            key: `${task.id}-${artifact.name}`,
-          })),
-          workflow: data.name,
-          instrumentSession: data.visit,
-          stepType: task.stepType,
-        })),
-      );
+  const fetchedTasks: Task[] = useMemo(() => {
+    if (data == null) {
+      return [];
     }
+    return setFetchedTasks(data);
   }, [data]);
 
   return fetchedTasks;

frontend/relay-workflows-lib/lib/views/BaseSingleWorkflowView.tsx

@@ -34,15 +34,33 @@ export default function BaseSingleWorkflowView({
   taskIds,
   fragmentRef,
 }: BaseSingleWorkflowViewProps) {
-  const [artifactList, setArtifactList] = useState<Artifact[]>([]);
-  const [outputTaskIds, setOutputTaskIds] = useState<string[]>([]);
   const data = useFragment(BaseSingleWorkflowViewFragment, fragmentRef);
   const fetchedTasks = useFetchedTasks(data ?? null);
   const [selectedTaskIds, setSelectedTaskIds] = useSelectedTaskIds();
   const [filledTaskId, setFilledTaskId] = useState<string | null>(null);
 
   const taskTree = useMemo(() => buildTaskTree(fetchedTasks), [fetchedTasks]);
 
+  const outputTaskIds: string[] = useMemo(() => {
+    const newOutputTaskIds: string[] = [];
+    const traverse = (tasks: TaskNode[]) => {
+      const sortedTasks = [...tasks].sort((a, b) => a.id.localeCompare(b.id));
+      sortedTasks.forEach((taskNode) => {
+        if (
+          taskNode.children &&
+          taskNode.children.length === 0 &&
+          !newOutputTaskIds.includes(taskNode.id)
+        ) {
+          newOutputTaskIds.push(taskNode.id);
+        } else if (taskNode.children && taskNode.children.length > 0) {
+          traverse(taskNode.children);
+        }
+      });
+    };
+    traverse(taskTree);
+    return newOutputTaskIds;
+  }, [taskTree]);
+
   const handleSelectOutput = () => {
     setSelectedTaskIds(outputTaskIds);
   };
@@ -62,35 +80,15 @@ export default function BaseSingleWorkflowView({
     setSelectedTaskIds(taskIds ?? []);
   }, [taskIds, setSelectedTaskIds]);
 
-  useEffect(() => {
+  const artifactList: Artifact[] = useMemo(() => {
     const filteredTasks = selectedTaskIds.length
       ? selectedTaskIds
           .map((id) => fetchedTasks.find((task) => task.id === id))
           .filter((task): task is Task => !!task)
       : fetchedTasks;
-    setArtifactList(filteredTasks.flatMap((task) => task.artifacts));
+    return filteredTasks.flatMap((task) => task.artifacts);
   }, [selectedTaskIds, fetchedTasks]);
 
-  useEffect(() => {
-    const newOutputTaskIds: string[] = [];
-    const traverse = (tasks: TaskNode[]) => {
-      const sortedTasks = [...tasks].sort((a, b) => a.id.localeCompare(b.id));
-      sortedTasks.forEach((taskNode) => {
-        if (
-          taskNode.children &&
-          taskNode.children.length === 0 &&
-          !newOutputTaskIds.includes(taskNode.id)
-        ) {
-          newOutputTaskIds.push(taskNode.id);
-        } else if (taskNode.children && taskNode.children.length > 0) {
-          traverse(taskNode.children);
-        }
-      });
-    };
-    traverse(taskTree);
-    setOutputTaskIds(newOutputTaskIds);
-  }, [taskTree]);
-
   if (!data || !data.status) {
     return null;
   }

frontend/relay-workflows-lib/lib/views/WorkflowsListView.tsx

@@ -72,10 +72,14 @@ const WorkflowsListView: React.FC<WorkflowsListViewProps> = ({
     { fetchPolicy: "store-and-network" },
   );
 
-  const [isPaginated, setIsPaginated] = useState(false);
+  const isPaginated = useRef(false);
   const lastPage = useRef(currentPage);
   const lastLimit = useRef(selectedLimit);
 
+  const setIsPaginated = useCallback((value: boolean) => {
+    isPaginated.current = value;
+  }, []);
+
   const load = useCallback(() => {
     if (visit) {
       loadQuery(
@@ -98,7 +102,7 @@ const WorkflowsListView: React.FC<WorkflowsListViewProps> = ({
       currentPage !== lastPage.current ||
       selectedLimit !== lastLimit.current
     ) {
-      setIsPaginated(true);
+      isPaginated.current = true;
       lastPage.current = currentPage;
       lastLimit.current = selectedLimit;
     }
@@ -154,7 +158,7 @@ const WorkflowsListView: React.FC<WorkflowsListViewProps> = ({
                   onPageChange={goToPage}
                   onLimitChange={changeLimit}
                   updatePageInfo={updatePageInfo}
-                  isPaginated={isPaginated}
+                  isPaginated={isPaginated.current}
                   setIsPaginated={setIsPaginated}
                 />
               </Suspense>