diff --git a/frontend/relay-workflows-lib/lib/components/TasksFlow.tsx b/frontend/relay-workflows-lib/lib/components/TasksFlow.tsx
index e5e77bd03..f2379240e 100644
--- a/frontend/relay-workflows-lib/lib/components/TasksFlow.tsx
+++ b/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" }}
         />
       )}
diff --git a/frontend/relay-workflows-lib/lib/components/WorkflowsContent.tsx b/frontend/relay-workflows-lib/lib/components/WorkflowsContent.tsx
index 187b694ee..86ce2abeb 100644
--- a/frontend/relay-workflows-lib/lib/components/WorkflowsContent.tsx
+++ b/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) => {
diff --git a/frontend/relay-workflows-lib/lib/query-components/RetriggerWorkflow.tsx b/frontend/relay-workflows-lib/lib/query-components/RetriggerWorkflow.tsx
index 2f26b011e..c60c19a15 100644
--- a/frontend/relay-workflows-lib/lib/query-components/RetriggerWorkflow.tsx
+++ b/frontend/relay-workflows-lib/lib/query-components/RetriggerWorkflow.tsx
@@ -46,7 +46,6 @@ const RetriggerWorkflowBase: React.FC<RetriggerWorkflowProps> = ({
   return templateName ? (
     <Tooltip title="Rerun workflow">
       <NavLink
-        title="Rerun workflow"
         to={`/templates/${templateName}/${visitToText(
           instrumentSession,
         )}-${workflowName}`}
diff --git a/frontend/relay-workflows-lib/lib/utils/workflowRelayUtils.ts b/frontend/relay-workflows-lib/lib/utils/workflowRelayUtils.ts
index aa76a7f75..2e3f3d300 100644
--- a/frontend/relay-workflows-lib/lib/utils/workflowRelayUtils.ts
+++ b/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;
diff --git a/frontend/relay-workflows-lib/lib/views/BaseSingleWorkflowView.tsx b/frontend/relay-workflows-lib/lib/views/BaseSingleWorkflowView.tsx
index 9e2690cd9..644771abf 100644
--- a/frontend/relay-workflows-lib/lib/views/BaseSingleWorkflowView.tsx
+++ b/frontend/relay-workflows-lib/lib/views/BaseSingleWorkflowView.tsx
@@ -34,8 +34,6 @@ 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();
@@ -43,6 +41,26 @@ export default function BaseSingleWorkflowView({
 
   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;
   }
diff --git a/frontend/relay-workflows-lib/lib/views/WorkflowsListView.tsx b/frontend/relay-workflows-lib/lib/views/WorkflowsListView.tsx
index 4b25307d2..a4d038706 100644
--- a/frontend/relay-workflows-lib/lib/views/WorkflowsListView.tsx
+++ b/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>
diff --git a/frontend/relay-workflows-lib/stories/components/WorkflowsContent.stories.tsx b/frontend/relay-workflows-lib/stories/components/WorkflowsContent.stories.tsx
index e8ecb6af3..565a99a16 100644
--- a/frontend/relay-workflows-lib/stories/components/WorkflowsContent.stories.tsx
+++ b/frontend/relay-workflows-lib/stories/components/WorkflowsContent.stories.tsx
@@ -68,6 +68,5 @@ export const Default: Story = {
     onPageChange: () => {},
     onLimitChange: () => {},
     updatePageInfo: () => {},
-    setIsPaginated: () => {},
   },
 };
diff --git a/frontend/relay-workflows-lib/tests/components/BaseWorkflowRelay.test.tsx b/frontend/relay-workflows-lib/tests/components/BaseWorkflowRelay.test.tsx
index 890b0f7e0..d47331f20 100644
--- a/frontend/relay-workflows-lib/tests/components/BaseWorkflowRelay.test.tsx
+++ b/frontend/relay-workflows-lib/tests/components/BaseWorkflowRelay.test.tsx
@@ -78,8 +78,8 @@ describe("BaseWorkflowRelay", () => {
     expect(screen.queryByText("even")).not.toBeVisible();
 
     await user.click(accordionButton);
-
     expect(accordionButton).toHaveAttribute("aria-expanded", "true");
-    expect(screen.getByText("even")).toBeVisible();
+    expect(screen.getByText("React Flow")).toBeVisible();
+    expect(screen.getByText("even")).toBeInTheDocument();
   });
 });
diff --git a/frontend/relay-workflows-lib/tests/components/TasksFlow.test.tsx b/frontend/relay-workflows-lib/tests/components/TasksFlow.test.tsx
index 4e440db94..f9bff5169 100644
--- a/frontend/relay-workflows-lib/tests/components/TasksFlow.test.tsx
+++ b/frontend/relay-workflows-lib/tests/components/TasksFlow.test.tsx
@@ -112,7 +112,7 @@ describe("TasksFlow Component", () => {
         nodes: mockLayoutedNodes,
         edges: mockLayoutedEdges,
         // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-        nodeTypes: expect.objectContaining({ custom: expect.any(Function) }),
+        nodeTypes: { custom: expect.any(Function) },
         nodesDraggable: false,
         nodesConnectable: false,
         elementsSelectable: true,
@@ -121,7 +121,7 @@ describe("TasksFlow Component", () => {
         zoomOnDoubleClick: false,
         panOnDrag: true,
         preventScrolling: false,
-        fitView: false,
+        fitView: true,
         style: { width: "100%", overflow: "auto", height: "100%" },
       }),
       {},
diff --git a/frontend/workflows-lib/lib/components/common/PaginationControls.tsx b/frontend/workflows-lib/lib/components/common/PaginationControls.tsx
index 935644844..9e44fe8ca 100644
--- a/frontend/workflows-lib/lib/components/common/PaginationControls.tsx
+++ b/frontend/workflows-lib/lib/components/common/PaginationControls.tsx
@@ -42,11 +42,12 @@ export default function PaginationControls({
         boundaryCount={0}
       />
       <FormControl sx={{ width: 80 }}>
-        <InputLabel id="workflows-limit-label">Workflows Limit</InputLabel>
+        <InputLabel id="workflows-limit-label">Limit</InputLabel>
         <Select
           labelId="workflows-limit-label"
           id="workflows-limit-select"
           size="small"
+          label="Limit"
           value={selectedLimit.toString()}
           onChange={(e) => {
             onLimitChange(Number(e.target.value));
diff --git a/frontend/workflows-lib/lib/components/template/controls/ScanRangeInput.tsx b/frontend/workflows-lib/lib/components/template/controls/ScanRangeInput.tsx
index ed4bf611a..b4f70d9b9 100644
--- a/frontend/workflows-lib/lib/components/template/controls/ScanRangeInput.tsx
+++ b/frontend/workflows-lib/lib/components/template/controls/ScanRangeInput.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "react";
+import { useReducer } from "react";
 import {
   Box,
   InputAdornment,
@@ -10,6 +10,12 @@ import { InfoOutlined } from "@mui/icons-material";
 import { validateScanRange } from "../../../utils/validationUtils";
 import { ScanRange } from "../../../types";
 
+export interface RawScanRange {
+  excludedRaw: string;
+  start: string;
+  end: string;
+}
+
 export interface ScanRangeInputProps {
   name: string;
   value: ScanRange;
@@ -35,77 +41,82 @@ const ScanRangeInput = ({
   visible = true,
   id,
 }: ScanRangeInputProps) => {
-  const [scanRange, setScanRange] = useState({
-    start: String(value.start),
-    end: String(value.end),
-  });
-
-  const [excludedRaw, setExcludedRaw] = useState(
-    (value.excluded ?? []).join(", "),
-  );
-  const [componentError, setComponentError] = useState({
-    start: "",
-    end: "",
-    excluded: "",
-  });
-
-  const [hasUserEditedExcluded, setHasUserEditedExcluded] = useState(false);
+  interface ScanRangeState {
+    componentError: {
+      start: string;
+      end: string;
+      excluded: string;
+    };
+    rawRange: RawScanRange;
+  }
+
+  type ScanRangeType = "start" | "end" | "excluded";
+
+  interface ScanRangeAction {
+    type: ScanRangeType;
+    payload: string;
+  }
+
+  function scanRangeReducer(
+    state: ScanRangeState,
+    action: ScanRangeAction,
+  ): ScanRangeState {
+    const newState = { ...state };
+
+    switch (action.type) {
+      case "start":
+        newState.rawRange.start = action.payload;
+        break;
+      case "end":
+        newState.rawRange.end = action.payload;
+        break;
+      case "excluded":
+        newState.rawRange.excludedRaw = action.payload;
+        break;
+      default:
+        return state;
+    }
 
-  const validateAndUpdate = useCallback(() => {
-    const result = validateScanRange(
-      scanRange.start,
-      scanRange.end,
-      excludedRaw,
-    );
-    setComponentError(result.errors);
+    const result = validateScanRange(newState.rawRange);
+    newState.componentError = result.errors;
 
     if (result.parsed) {
-      const current: ScanRange = {
-        start: Number(scanRange.start),
-        end: Number(scanRange.end),
+      const scanRangeValue = {
+        start: result.parsed.start,
+        end: result.parsed.end,
         excluded: result.parsed.excluded,
       };
-
-      const isEqual =
-        current.start === value.start &&
-        current.end === value.end &&
-        JSON.stringify(current.excluded) ===
-          JSON.stringify(value.excluded ?? []);
-
-      if (!isEqual) {
-        handleChange(name, result.parsed);
-      }
-    }
-  }, [scanRange, excludedRaw, handleChange, name, value]);
-
-  const handleFieldChange =
-    (field: keyof typeof scanRange) =>
-    (event: React.ChangeEvent<HTMLInputElement>) => {
-      setScanRange({ ...scanRange, [field]: event.target.value });
-    };
-
-  const handleExcludedChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setExcludedRaw(event.target.value);
-    setHasUserEditedExcluded(true);
-  };
-
-  useEffect(() => {
-    setScanRange({
-      start: String(value.start),
-      end: String(value.end),
-    });
-
-    if (!hasUserEditedExcluded) {
-      setExcludedRaw((value.excluded ?? []).join(", "));
+      handleChange(name, scanRangeValue);
     }
-  }, [value.start, value.end, value.excluded, hasUserEditedExcluded]);
 
-  useEffect(() => {
-    validateAndUpdate();
-  }, [scanRange, excludedRaw, validateAndUpdate]);
+    return newState;
+  }
+
+  const [scanRange, dispatch] = useReducer(scanRangeReducer, {
+    componentError: {
+      start: "",
+      end: "",
+      excluded: "",
+    },
+    rawRange: {
+      excludedRaw: Array.isArray(value.excluded)
+        ? value.excluded.join(", ")
+        : "",
+      start: String(value.start || ""),
+      end: String(value.end || ""),
+    },
+  });
 
   if (!visible) return null;
 
+  const handleScanRangeChange =
+    (
+      type: ScanRangeType,
+    ): React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> =>
+    (event) => {
+      dispatch({ type: type, payload: event.target.value });
+    };
+
   return (
     <Box
       id={id}
@@ -140,13 +151,13 @@ const ScanRangeInput = ({
         <TextField
           type="number"
           label="Start"
-          value={scanRange.start}
-          onChange={handleFieldChange("start")}
-          error={!!componentError.start}
-          helperText={componentError.start || " "}
+          value={scanRange.rawRange.start}
+          onChange={handleScanRangeChange("start")}
+          error={!!scanRange.componentError.start}
+          helperText={scanRange.componentError.start || " "}
           disabled={!enabled}
           slotProps={{
-            htmlInput: { step: 1 },
+            htmlInput: { step: 1, min: 0 },
             formHelperText: {
               sx: { minHeight: "3em", whiteSpace: "pre-wrap" },
             },
@@ -160,13 +171,13 @@ const ScanRangeInput = ({
         <TextField
           type="number"
           label="End"
-          value={scanRange.end}
-          onChange={handleFieldChange("end")}
-          error={!!componentError.end}
-          helperText={componentError.end || " "}
+          value={scanRange.rawRange.end}
+          onChange={handleScanRangeChange("end")}
+          error={!!scanRange.componentError.end}
+          helperText={scanRange.componentError.end || " "}
           disabled={!enabled}
           slotProps={{
-            htmlInput: { step: 1 },
+            htmlInput: { step: 1, min: 0 },
             formHelperText: {
               sx: { minHeight: "3em", whiteSpace: "pre-wrap" },
             },
@@ -179,10 +190,10 @@ const ScanRangeInput = ({
 
         <TextField
           label="Excluded"
-          value={excludedRaw}
-          onChange={handleExcludedChange}
-          error={!!componentError.excluded}
-          helperText={componentError.excluded || " "}
+          value={scanRange.rawRange.excludedRaw}
+          onChange={handleScanRangeChange("excluded")}
+          error={!!scanRange.componentError.excluded}
+          helperText={scanRange.componentError.excluded || " "}
           disabled={!enabled}
           slotProps={{
             formHelperText: {
diff --git a/frontend/workflows-lib/lib/components/template/jsonforms/JsonFormsScanRangeRenderer.tsx b/frontend/workflows-lib/lib/components/template/jsonforms/JsonFormsScanRangeRenderer.tsx
index 75764e68b..bced3acab 100644
--- a/frontend/workflows-lib/lib/components/template/jsonforms/JsonFormsScanRangeRenderer.tsx
+++ b/frontend/workflows-lib/lib/components/template/jsonforms/JsonFormsScanRangeRenderer.tsx
@@ -5,7 +5,6 @@ import { withJsonFormsControlProps } from "@jsonforms/react";
 import { ControlProps } from "@jsonforms/core";
 import ScanRangeInput from "../controls/ScanRangeInput";
 import { ScanRange } from "../../../types";
-import { useEffect, useState } from "react";
 
 const ScanRangeControl = ({
   data,
@@ -19,29 +18,18 @@ const ScanRangeControl = ({
   visible,
   id,
 }: ControlProps) => {
-  const [localValue, setLocalValue] = useState<ScanRange>({
-    start: data?.start,
-    end: data?.end,
-    excluded: data?.excluded ?? [],
-  });
-
   const handleBufferedChange = (_: string, value: ScanRange) => {
-    setLocalValue(value);
     handleChange(path, value);
   };
 
-  useEffect(() => {
-    setLocalValue({
-      start: data?.start,
-      end: data?.end,
-      excluded: data?.excluded ?? [],
-    });
-  }, [data]);
-
   return (
     <ScanRangeInput
       name={path}
-      value={localValue}
+      value={{
+        start: data?.start,
+        end: data?.end,
+        excluded: data?.excluded ?? [],
+      }}
       handleChange={handleBufferedChange}
       label={label}
       description={description}
diff --git a/frontend/workflows-lib/lib/components/workflow/ScrollableImages.tsx b/frontend/workflows-lib/lib/components/workflow/ScrollableImages.tsx
index e421c6dd9..e09ffbed5 100644
--- a/frontend/workflows-lib/lib/components/workflow/ScrollableImages.tsx
+++ b/frontend/workflows-lib/lib/components/workflow/ScrollableImages.tsx
@@ -120,7 +120,7 @@ const ScrollableImages = ({
     };
   }, [handlePrev, handleNext]);
 
-  useEffect(() => {
+  useCallback(() => {
     if (currentIndex >= imageListLength && imageListLength) {
       setCurrentIndexWrapper(imageListLength - 1);
     }
diff --git a/frontend/workflows-lib/lib/components/workflow/TaskInfo.tsx b/frontend/workflows-lib/lib/components/workflow/TaskInfo.tsx
index 00a14052d..7a3bfadc5 100644
--- a/frontend/workflows-lib/lib/components/workflow/TaskInfo.tsx
+++ b/frontend/workflows-lib/lib/components/workflow/TaskInfo.tsx
@@ -9,7 +9,7 @@ import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 import { ArtifactFilteredList } from "./ArtifactFilteredList";
 import type { Artifact } from "workflows-lib";
 import { ImageInfo, ScrollableImages } from "./ScrollableImages";
-import { useState, useEffect, useMemo } from "react";
+import { useState, useMemo } from "react";
 import { FuzzySearchBar } from "./FuzzySearchBar";
 import { FileTypeDropdown } from "./FileTypeDropdown";
 import Fuse from "fuse.js";
@@ -25,9 +25,6 @@ export const TaskInfo: React.FC<TaskInfoProps> = ({
 }) => {
   const [searchQuery, setSearchQuery] = useState<string>("");
   const [selectedFileTypes, setSelectedFileTypes] = useState<string[]>([]);
-  const [filteredArtifactList, setFilteredArtifactList] = useState<Artifact[]>(
-    [],
-  );
 
   const fileTypes = useMemo(() => {
     const types = artifactList
@@ -40,7 +37,7 @@ export const TaskInfo: React.FC<TaskInfoProps> = ({
     return types;
   }, [artifactList]);
 
-  useEffect(() => {
+  const filteredArtifactList: Artifact[] = useMemo(() => {
     let filtered = artifactList;
 
     if (selectedFileTypes.length > 0) {
@@ -63,7 +60,7 @@ export const TaskInfo: React.FC<TaskInfoProps> = ({
       filtered = results.map((result) => result.item);
     }
 
-    setFilteredArtifactList(filtered);
+    return filtered;
   }, [searchQuery, selectedFileTypes, artifactList]);
 
   const imageArtifactsInfos: ImageInfo[] = useMemo(() => {
diff --git a/frontend/workflows-lib/lib/utils/validationUtils.ts b/frontend/workflows-lib/lib/utils/validationUtils.ts
index ab9c4eaf6..e416331e6 100644
--- a/frontend/workflows-lib/lib/utils/validationUtils.ts
+++ b/frontend/workflows-lib/lib/utils/validationUtils.ts
@@ -1,3 +1,4 @@
+import { RawScanRange } from "../components/template/controls/ScanRangeInput";
 import { ScanRange } from "../types";
 
 export const isStrictPositiveInteger = (value: string): boolean =>
@@ -50,22 +51,22 @@ export interface ScanRangeValidationResult {
 }
 
 export const validateScanRange = (
-  startStr: string,
-  endStr: string,
-  excludedRaw: string,
+  scanRange: RawScanRange,
 ): ScanRangeValidationResult => {
-  const validStart = isStrictPositiveInteger(startStr);
-  const validEnd = isStrictPositiveInteger(endStr);
+  const validStart = isStrictPositiveInteger(scanRange.start);
+  const validEnd = isStrictPositiveInteger(scanRange.end);
 
-  const newStart = parseInt(startStr, 10);
-  const newEnd = parseInt(endStr, 10);
+  const newStart = parseInt(scanRange.start, 10);
+  const newEnd = parseInt(scanRange.end, 10);
 
   let excludedScans: number[] = [];
   let excludedError = "";
 
   try {
     excludedScans =
-      excludedRaw.trim() === "" ? [] : parseExcludedScans(excludedRaw);
+      scanRange.excludedRaw.trim() === ""
+        ? []
+        : parseExcludedScans(scanRange.excludedRaw);
     const outOfRange = excludedScans.filter(
       (num) => num < newStart || num > newEnd,
     );
diff --git a/frontend/workflows-lib/tests/functions/validationUtils.test.ts b/frontend/workflows-lib/tests/functions/validationUtils.test.ts
index 8227ff5c3..3caf07a06 100644
--- a/frontend/workflows-lib/tests/functions/validationUtils.test.ts
+++ b/frontend/workflows-lib/tests/functions/validationUtils.test.ts
@@ -1,3 +1,4 @@
+import { RawScanRange } from "../../lib/components/template/controls/ScanRangeInput";
 import {
   isStrictPositiveInteger,
   parseExcludedScans,
@@ -65,60 +66,100 @@ describe("parseExcludedScans", () => {
 
 describe("validateScanRange", () => {
   it("validates correct input", () => {
-    const result = validateScanRange("1", "10", "3, 4, 5");
+    const result = validateScanRange({
+      start: "1",
+      end: "10",
+      excludedRaw: "3, 4, 5",
+    } as RawScanRange);
     expect(result.errors).toEqual({ start: "", end: "", excluded: "" });
     expect(result.parsed).toEqual({ start: 1, end: 10, excluded: [3, 4, 5] });
   });
 
   it("returns error for invalid start", () => {
-    const result = validateScanRange("abc", "10", "3, 4");
+    const result = validateScanRange({
+      start: "abc",
+      end: "10",
+      excludedRaw: "3, 4",
+    } as RawScanRange);
     expect(result.errors.start).toBe("Start must be a positive integer");
     expect(result.parsed).toBeUndefined();
   });
 
   it("returns error for invalid end", () => {
-    const result = validateScanRange("1", "abc", "3, 4");
+    const result = validateScanRange({
+      start: "1",
+      end: "abc",
+      excludedRaw: "3, 4",
+    } as RawScanRange);
     expect(result.errors.end).toBe("End must be a positive integer");
     expect(result.parsed).toBeUndefined();
   });
 
   it("returns error when end < start", () => {
-    const result = validateScanRange("10", "5", "3, 4");
+    const result = validateScanRange({
+      start: "10",
+      end: "5",
+      excludedRaw: "3, 4",
+    } as RawScanRange);
     expect(result.errors.end).toBe("End cannot be less than start");
     expect(result.parsed).toBeUndefined();
   });
 
   it("returns error for excluded values out of range", () => {
-    const result = validateScanRange("1", "5", "2, 6");
+    const result = validateScanRange({
+      start: "1",
+      end: "5",
+      excludedRaw: "2, 6",
+    } as RawScanRange);
     expect(result.errors.excluded).toBe("Excluded values out of range");
     expect(result.parsed).toBeUndefined();
   });
 
   it("returns error for invalid excluded format", () => {
-    const result = validateScanRange("1", "10", "abc");
+    const result = validateScanRange({
+      start: "1",
+      end: "10",
+      excludedRaw: "abc",
+    } as RawScanRange);
     expect(result.errors.excluded).toBe("Must be positive integers or ranges");
     expect(result.parsed).toBeUndefined();
   });
 
   it("returns empty excluded array for empty input", () => {
-    const result = validateScanRange("1", "10", "");
+    const result = validateScanRange({
+      start: "1",
+      end: "10",
+      excludedRaw: "",
+    } as RawScanRange);
     expect(result.errors.excluded).toBe("");
     expect(result.parsed?.excluded).toEqual([]);
   });
   it("handles duplicates", () => {
-    const result = validateScanRange("1", "10", "1, 1, 9");
+    const result = validateScanRange({
+      start: "1",
+      end: "10",
+      excludedRaw: "1, 1, 9",
+    } as RawScanRange);
     expect(result.errors).toEqual({ start: "", end: "", excluded: "" });
     expect(result.parsed?.excluded).toEqual([1, 9]);
   });
 
   it("handles overlapping ranges", () => {
-    const result = validateScanRange("1", "10", "3-5, 4-6");
+    const result = validateScanRange({
+      start: "1",
+      end: "10",
+      excludedRaw: "3-5, 4-6",
+    });
     expect(result.errors).toEqual({ start: "", end: "", excluded: "" });
     expect(result.parsed?.excluded).toEqual([3, 4, 5, 6]);
   });
 
   it("handles mixed excluded input", () => {
-    const result = validateScanRange("1", "10", "3, 3-5, [4, 5]");
+    const result = validateScanRange({
+      start: "1",
+      end: "10",
+      excludedRaw: "3, 3-5, [4, 5]",
+    });
     expect(result.errors).toEqual({ start: "", end: "", excluded: "" });
     expect(result.parsed?.excluded).toEqual([3, 4, 5]);
   });