From 5d10ec981c8d169452309f976e9aad2a2a5f8961 Mon Sep 17 00:00:00 2001
From: Ray Liu <ray.liu@umccr.org>
Date: Thu, 5 Dec 2024 16:34:01 +1100
Subject: [PATCH 1/5] add timeline and comment module in sequence runs

---
 src/api/sequenceRun.ts                        |  93 ++++-
 src/api/types/sequence-run.d.ts               | 241 ++++++++++++-
 src/components/common/buttons/Button.tsx      |  13 +-
 src/components/common/timelines/Timeline.tsx  |   8 +-
 .../sequenceRuns/SequenceRunDetailsDrawer.tsx |  36 +-
 .../sequenceRuns/SequenceRunTable.tsx         | 123 ++++---
 .../sequenceRuns/SequenceRunTimeline.tsx      | 325 ++++++++++++++++++
 7 files changed, 751 insertions(+), 88 deletions(-)
 create mode 100644 src/modules/runs/components/sequenceRuns/SequenceRunTimeline.tsx

diff --git a/src/api/sequenceRun.ts b/src/api/sequenceRun.ts
index 57d70ed..8cab2f8 100644
--- a/src/api/sequenceRun.ts
+++ b/src/api/sequenceRun.ts
@@ -1,8 +1,13 @@
 import config from '@/config';
-import createClient from 'openapi-fetch';
+import createClient, { ParamsOption } from 'openapi-fetch';
 import type { paths, components } from './types/sequence-run';
-import { useSuspenseQuery, useQuery } from '@tanstack/react-query';
-import { authMiddleware, UseSuspenseQueryOptions, UseQueryOptions } from './utils';
+import { useSuspenseQuery, useQuery, useMutation } from '@tanstack/react-query';
+import {
+  authMiddleware,
+  UseSuspenseQueryOptions,
+  UseQueryOptions,
+  UseMutationOptions,
+} from './utils';
 import { env } from '@/utils/commonUtils';
 
 const client = createClient<paths>({ baseUrl: config.apiEndpoint.sequenceRun });
@@ -30,15 +35,70 @@ export function createSequenceRunFetchingHook<K extends keyof paths>(path: K) {
   };
 }
 
-export function createSequenceRunQueryHook<K extends keyof paths>(path: K) {
-  return function ({ params, reactQuery }: UseQueryOptions<paths[typeof path]['get']>) {
+export function createSequenceRunQueryHook<
+  K extends keyof paths,
+  M extends keyof paths[K] & 'get',
+  R = paths[K][M] extends { responses: { 200: { content: { 'application/json': infer T } } } }
+    ? T
+    : never,
+>(path: K) {
+  const versionedPath = getVersionedPath(path);
+  return function ({
+    params,
+    reactQuery,
+    signal,
+  }: Omit<UseQueryOptions<paths[K][M]>, 'queryKey' | 'queryFn'> & { signal?: AbortSignal }) {
+    return useQuery<R, Error, R, [K, typeof params]>({
+      ...reactQuery,
+      queryKey: [versionedPath, params],
+      queryFn: async ({ signal: querySignal }) => {
+        // @ts-expect-error: params is dynamic type type for openapi-fetch
+        const { data } = await client.GET(versionedPath, {
+          params: params as ParamsOption<paths[K][M]>,
+          signal: signal || querySignal,
+        });
+        return data as R;
+      },
+    });
+  };
+}
+
+export function createSequenceRunPostMutationHook<K extends keyof paths>(path: K) {
+  return function ({ params, reactQuery, body }: UseMutationOptions<paths[typeof path]['post']>) {
     const versionedPath = getVersionedPath(path);
-    return useQuery({
+    return useMutation({
       ...reactQuery,
-      queryKey: [path, params],
-      queryFn: async ({ signal }) => {
+      mutationFn: async () => {
         // @ts-expect-error: params is dynamic type type for openapi-fetch
-        const { data } = await client.GET(versionedPath, { params, signal });
+        const { data } = await client.POST(versionedPath, { params, body: body });
+        return data;
+      },
+    });
+  };
+}
+
+export function createSequenceRunPatchMutationHook<K extends keyof paths>(path: K) {
+  return function ({ params, reactQuery, body }: UseMutationOptions<paths[typeof path]['patch']>) {
+    const versionedPath = getVersionedPath(path);
+    return useMutation({
+      ...reactQuery,
+      mutationFn: async () => {
+        // @ts-expect-error: params is dynamic type type for openapi-fetch
+        const { data } = await client.PATCH(versionedPath, { params, body: body });
+        return data;
+      },
+    });
+  };
+}
+
+export function createSequenceRunDeleteMutationHook<K extends keyof paths>(path: K) {
+  return function ({ params, reactQuery }: UseMutationOptions<paths[typeof path]['delete']>) {
+    const versionedPath = getVersionedPath(path);
+    return useMutation({
+      ...reactQuery,
+      mutationFn: async () => {
+        // @ts-expect-error: params is dynamic type type for openapi-fetch
+        const { data } = await client.DELETE(versionedPath, { params });
         return data;
       },
     });
@@ -49,3 +109,18 @@ export type SequenceRunModel = components['schemas']['Sequence'];
 
 export const useSequenceRunListModel = createSequenceRunQueryHook('/api/v1/sequence/');
 export const useSequenceRunDetailModel = createSequenceRunQueryHook('/api/v1/sequence/{id}/');
+export const useSequenceRunStateListModel = createSequenceRunQueryHook(
+  '/api/v1/sequence/{orcabusId}/state/'
+);
+export const useSequenceRunCommentListModel = createSequenceRunQueryHook(
+  '/api/v1/sequence/{orcabusId}/comment/'
+);
+export const useSequenceRunCommentCreateModel = createSequenceRunPostMutationHook(
+  '/api/v1/sequence/{orcabusId}/comment/'
+);
+export const useSequenceRunCommentUpdateModel = createSequenceRunPatchMutationHook(
+  '/api/v1/sequence/{orcabusId}/comment/{id}/'
+);
+export const useSequenceRunCommentDeleteModel = createSequenceRunDeleteMutationHook(
+  '/api/v1/sequence/{orcabusId}/comment/{id}/soft_delete/'
+);
diff --git a/src/api/types/sequence-run.d.ts b/src/api/types/sequence-run.d.ts
index 4c4875f..350775d 100644
--- a/src/api/types/sequence-run.d.ts
+++ b/src/api/types/sequence-run.d.ts
@@ -20,6 +20,70 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/api/v1/sequence/{orcabusId}/comment/": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get: operations["apiV1SequenceCommentList"];
+        put?: never;
+        post: operations["apiV1SequenceCommentCreate"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/v1/sequence/{orcabusId}/comment/{id}/": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch: operations["apiV1SequenceCommentPartialUpdate"];
+        trace?: never;
+    };
+    "/api/v1/sequence/{orcabusId}/comment/{id}/soft_delete/": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        post?: never;
+        delete: operations["apiV1SequenceCommentSoftDeleteDestroy"];
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/v1/sequence/{orcabusId}/state/": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get: operations["apiV1SequenceStateList"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/api/v1/sequence/{id}/": {
         parameters: {
             query?: never;
@@ -27,6 +91,7 @@ export interface paths {
             path?: never;
             cookie?: never;
         };
+        /** @description Since we have custom orcabus_id prefix for each model, we need to remove the prefix before retrieving it. */
         get: operations["apiV1SequenceRetrieve"];
         put?: never;
         post?: never;
@@ -40,6 +105,17 @@ export interface paths {
 export type webhooks = Record<string, never>;
 export interface components {
     schemas: {
+        Comment: {
+            readonly orcabusId: string;
+            comment: string;
+            associationId: string;
+            /** Format: date-time */
+            readonly createdAt: string;
+            createdBy: string;
+            /** Format: date-time */
+            readonly updatedAt: string;
+            isDeleted?: boolean;
+        };
         PaginatedSequenceList: {
             links: {
                 /**
@@ -60,8 +136,19 @@ export interface components {
             };
             results: components["schemas"]["Sequence"][];
         };
+        PatchedComment: {
+            readonly orcabusId?: string;
+            comment?: string;
+            associationId?: string;
+            /** Format: date-time */
+            readonly createdAt?: string;
+            createdBy?: string;
+            /** Format: date-time */
+            readonly updatedAt?: string;
+            isDeleted?: boolean;
+        };
         Sequence: {
-            readonly id: number;
+            readonly orcabusId: string;
             instrumentRunId: string;
             runVolumeName: string;
             runFolderPath: string;
@@ -76,6 +163,17 @@ export interface components {
             sampleSheetName?: string | null;
             sequenceRunId?: string | null;
             sequenceRunName?: string | null;
+            v1pre3Id?: string | null;
+            icaProjectId?: string | null;
+            apiUrl?: string | null;
+        };
+        State: {
+            readonly orcabusId: string;
+            status: string;
+            /** Format: date-time */
+            timestamp: string;
+            comment?: string | null;
+            sequence: string;
         };
         /**
          * @description * `STARTED` - Started
@@ -97,14 +195,34 @@ export interface operations {
     apiV1SequenceList: {
         parameters: {
             query?: {
+                apiUrl?: string | null;
+                endTime?: string | null;
+                flowcellBarcode?: string | null;
+                icaProjectId?: string | null;
+                instrumentRunId?: string;
+                orcabusId?: string;
                 /** @description Which field to use when ordering the results. */
                 ordering?: string;
                 /** @description A page number within the paginated result set. */
                 page?: number;
+                reagentBarcode?: string | null;
                 /** @description Number of results to return per page. */
                 rowsPerPage?: number;
+                runDataUri?: string;
+                runFolderPath?: string;
+                runVolumeName?: string;
+                sampleSheetName?: string | null;
                 /** @description A search term. */
                 search?: string;
+                sequenceRunId?: string | null;
+                sequenceRunName?: string | null;
+                startTime?: string;
+                /** @description * `STARTED` - Started
+                 *     * `FAILED` - Failed
+                 *     * `SUCCEEDED` - Succeeded
+                 *     * `ABORTED` - Aborted */
+                status?: "STARTED" | "FAILED" | "SUCCEEDED" | "ABORTED";
+                v1pre3Id?: string | null;
             };
             header?: never;
             path?: never;
@@ -122,13 +240,130 @@ export interface operations {
             };
         };
     };
+    apiV1SequenceCommentList: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                orcabusId: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Comment"][];
+                };
+            };
+        };
+    };
+    apiV1SequenceCommentCreate: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                orcabusId: string;
+            };
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/x-www-form-urlencoded": components["schemas"]["Comment"];
+                "multipart/form-data": components["schemas"]["Comment"];
+                "application/json": components["schemas"]["Comment"];
+            };
+        };
+        responses: {
+            201: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Comment"];
+                };
+            };
+        };
+    };
+    apiV1SequenceCommentPartialUpdate: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                id: string;
+                orcabusId: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: {
+            content: {
+                "application/x-www-form-urlencoded": components["schemas"]["PatchedComment"];
+                "multipart/form-data": components["schemas"]["PatchedComment"];
+                "application/json": components["schemas"]["PatchedComment"];
+            };
+        };
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["Comment"];
+                };
+            };
+        };
+    };
+    apiV1SequenceCommentSoftDeleteDestroy: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                id: string;
+                orcabusId: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description No response body */
+            204: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
+    apiV1SequenceStateList: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                orcabusId: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["State"][];
+                };
+            };
+        };
+    };
     apiV1SequenceRetrieve: {
         parameters: {
             query?: never;
             header?: never;
             path: {
-                /** @description A unique integer value identifying this sequence. */
-                id: number;
+                id: string;
             };
             cookie?: never;
         };
diff --git a/src/components/common/buttons/Button.tsx b/src/components/common/buttons/Button.tsx
index 2024843..f7e2a52 100644
--- a/src/components/common/buttons/Button.tsx
+++ b/src/components/common/buttons/Button.tsx
@@ -1,8 +1,9 @@
 import { FC, ReactNode, MouseEventHandler } from 'react';
+import { classNames } from '@/utils/commonUtils';
 
 export interface ButtonProps {
   type?: 'primary' | 'secondary' | 'light' | 'green' | 'red' | 'yellow' | 'gray';
-  size?: 'sm' | 'md' | 'lg';
+  size?: 'xs' | 'sm' | 'md' | 'lg';
   rounded?: boolean;
   children: ReactNode;
   onClick?: MouseEventHandler<HTMLButtonElement>;
@@ -58,6 +59,7 @@ const Button: FC<ButtonProps> = ({
   };
 
   const sizeStyles: { [key: string]: string } = {
+    xs: ' text-xs px-2 py-1 ',
     sm: ' text-sm px-3 py-1.5 ',
     md: ' text-md px-4 py-2 ',
     lg: ' text-lg px-5 py-2.5 ',
@@ -69,7 +71,14 @@ const Button: FC<ButtonProps> = ({
   return (
     <button
       type='button'
-      className={`${className} ${baseStyles} ${typeStyles[type]} ${sizeStyles[size]} ${roundedStyles} ${disabledStyles} `}
+      className={classNames(
+        baseStyles,
+        typeStyles[type],
+        sizeStyles[size],
+        roundedStyles,
+        disabledStyles,
+        className
+      )}
       onClick={onClick}
       disabled={disabled}
     >
diff --git a/src/components/common/timelines/Timeline.tsx b/src/components/common/timelines/Timeline.tsx
index 7213dd1..0fa997a 100644
--- a/src/components/common/timelines/Timeline.tsx
+++ b/src/components/common/timelines/Timeline.tsx
@@ -16,11 +16,11 @@ export interface TimelineEvent {
 
 export interface TimelineProps {
   timeline: TimelineEvent[];
-  handldEventClick: (event: TimelineEvent) => void;
+  handldEventClick: (event: TimelineEvent) => void | undefined;
   selectId?: string;
 }
 
-const Timeline: FC<TimelineProps> = ({ timeline, handldEventClick, selectId = '' }) => {
+const Timeline: FC<TimelineProps> = ({ timeline, handldEventClick = undefined, selectId = '' }) => {
   const [selectedEventId, setSelectedEventId] = useState<string>(timeline[0]?.id || '');
   useEffect(() => {
     if (selectId) {
@@ -39,7 +39,9 @@ const Timeline: FC<TimelineProps> = ({ timeline, handldEventClick, selectId = ''
 
   const handleTimelineEventClick = (event: TimelineEvent) => {
     setSelectedEventId(event.id || '');
-    handldEventClick(event);
+    if (handldEventClick) {
+      handldEventClick(event);
+    }
   };
 
   return (
diff --git a/src/modules/runs/components/sequenceRuns/SequenceRunDetailsDrawer.tsx b/src/modules/runs/components/sequenceRuns/SequenceRunDetailsDrawer.tsx
index 99c38a4..0090bac 100644
--- a/src/modules/runs/components/sequenceRuns/SequenceRunDetailsDrawer.tsx
+++ b/src/modules/runs/components/sequenceRuns/SequenceRunDetailsDrawer.tsx
@@ -1,15 +1,15 @@
 import { FC, useState, useEffect, useMemo } from 'react';
-import { SequenceRunModel, useSequenceRunDetailModel } from '@/api/sequenceRun';
+import { useSequenceRunDetailModel } from '@/api/sequenceRun';
 import { SideDrawer } from '@/components/common/drawers';
 import { sleep } from '@/utils/commonUtils';
 import { JsonToList } from '@/components/common/json-to-table';
+import { ContentTabs } from '@/components/navigation/tabs';
+import SequenceRunTimeline from './SequenceRunTimeline';
 interface SequenceRunDetailsDrawerProps {
-  selectedSequenceRunData: SequenceRunModel | null;
   selectedSequenceRunId: string;
   onCloseDrawer?: () => void;
 }
 const SequenceRunDetailsDrawer: FC<SequenceRunDetailsDrawerProps> = ({
-  selectedSequenceRunData,
   selectedSequenceRunId,
   onCloseDrawer,
 }) => {
@@ -17,9 +17,9 @@ const SequenceRunDetailsDrawer: FC<SequenceRunDetailsDrawerProps> = ({
 
   const { data: sequenceRunDetail, isFetching: isFetchingSequenceRunDetail } =
     useSequenceRunDetailModel({
-      params: { path: { id: Number(selectedSequenceRunId) } },
+      params: { path: { id: selectedSequenceRunId } },
       reactQuery: {
-        enabled: !!selectedSequenceRunId && !selectedSequenceRunData,
+        enabled: !!selectedSequenceRunId,
       },
     });
 
@@ -29,7 +29,7 @@ const SequenceRunDetailsDrawer: FC<SequenceRunDetailsDrawerProps> = ({
     }
   }, [selectedSequenceRunId]);
 
-  const selectedSequenceRun = selectedSequenceRunData || sequenceRunDetail;
+  const selectedSequenceRun = sequenceRunDetail;
 
   const sequenceRunDetailData = useMemo(() => {
     return selectedSequenceRun
@@ -55,18 +55,36 @@ const SequenceRunDetailsDrawer: FC<SequenceRunDetailsDrawerProps> = ({
   return (
     <SideDrawer
       title='Sequence Run Details'
-      subtitle={selectedSequenceRunData?.sequenceRunName || ''}
+      subtitle={selectedSequenceRun?.sequenceRunName || ''}
       isOpen={isOpen}
       onClose={handleCloseDrawer}
       size='medium'
     >
-      <div className='h-full'>
+      <ContentTabs
+        tabs={[
+          {
+            label: 'Details',
+            content: (
+              <JsonToList
+                title='Details'
+                data={sequenceRunDetailData}
+                isFetchingData={isFetchingSequenceRunDetail}
+              />
+            ),
+          },
+          {
+            label: 'timeline',
+            content: <SequenceRunTimeline selectedSequenceRunId={selectedSequenceRunId} />,
+          },
+        ]}
+      />
+      {/* <div className='h-full'>
         <JsonToList
           title='Details'
           data={sequenceRunDetailData}
           isFetchingData={isFetchingSequenceRunDetail}
         />
-      </div>
+      </div> */}
     </SideDrawer>
   );
 };
diff --git a/src/modules/runs/components/sequenceRuns/SequenceRunTable.tsx b/src/modules/runs/components/sequenceRuns/SequenceRunTable.tsx
index 5dba47e..79659c4 100644
--- a/src/modules/runs/components/sequenceRuns/SequenceRunTable.tsx
+++ b/src/modules/runs/components/sequenceRuns/SequenceRunTable.tsx
@@ -3,11 +3,11 @@ import { Table, TableData } from '@/components/tables';
 import { Column } from '@/components/tables/Table';
 import { classNames } from '@/utils/commonUtils';
 import { useState, ReactNode } from 'react';
-import { Link } from 'react-router-dom';
+// import { Link } from 'react-router-dom';
 import { useQueryParams } from '@/hooks/useQueryParams';
 import { DEFAULT_PAGE_SIZE } from '@/utils/constant';
 import { dayjs } from '@/utils/dayjs';
-import { ClipboardIcon } from '@heroicons/react/24/outline';
+// import { ClipboardIcon } from '@heroicons/react/24/outline';
 import { Badge } from '@/components/common/badges';
 import SequenceRunDetailsDrawer from './SequenceRunDetailsDrawer';
 const SequenceRunTable = () => {
@@ -55,7 +55,7 @@ const SequenceRunTable = () => {
                 )}
                 onClick={() => {
                   setSelectedSequenceRun(sequenceRunRowData as SequenceRunModel);
-                  setQueryParams({ sequenceRunId: sequenceRunRowData.id });
+                  setQueryParams({ sequenceRunId: sequenceRunRowData.orcabusId });
                 }}
               >
                 {instrumentRunId as string}
@@ -98,64 +98,64 @@ const SequenceRunTable = () => {
         );
       },
     },
-    {
-      header: 'Bcl Convert',
-      accessor: 'bclConvertStatus',
-      cell: (status: unknown) => {
-        return (
-          <Badge status={(status as string) || 'UNKNOWN'}>
-            {(status || 'UNKNOWN') as ReactNode}
-          </Badge>
-        );
-      },
-    },
-    {
-      header: '',
-      accessor: 'instrumentRunId',
-      cell: (instrumentRunId: unknown) => {
-        if (!instrumentRunId) {
-          return <div>-</div>;
-        } else {
-          return (
-            <div className='flex flex-row items-center'>
-              {/* <Link
-                to={`sequence/${instrumentRunId}/details`}
-                className={classNames(
-                  'flex flex-row items-center text-sm font-medium hover:text-blue-700 text-blue-500'
-                )}
-              >
-                <TableCellsIcon
-                  className='h-5 w-5 pr-1 shrink-0 text-blue-500'
-                  aria-hidden='true'
-                />
-                Details
-              </Link> */}
-              {/* <Link
-              to={`sequence/${instrumentRunId}/diagram`}
-              className={classNames(
-                'flex flex-row items-center text-sm font-medium hover:text-blue-700 text-blue-500'
-              )}
-            >
-              <RectangleGroupIcon
-                className='h-5 w-5 pr-1 shrink-0 text-blue-500'
-                aria-hidden='true'
-              />
-              Diagram
-            </Link> */}
-              <Link
-                to={`sequence/${instrumentRunId}/report`}
-                className={classNames(
-                  'flex flex-row items-center text-sm font-medium hover:text-blue-700 text-blue-500'
-                )}
-              >
-                <ClipboardIcon className='h-5 w-5 pr-1 shrink-0 text-blue-500' aria-hidden='true' />
-                Report
-              </Link>
-            </div>
-          );
-        }
-      },
-    },
+    // {
+    //   header: 'Bcl Convert',
+    //   accessor: 'bclConvertStatus',
+    //   cell: (status: unknown) => {
+    //     return (
+    //       <Badge status={(status as string) || 'UNKNOWN'}>
+    //         {(status || 'UNKNOWN') as ReactNode}
+    //       </Badge>
+    //     );
+    //   },
+    // },
+    // {
+    //   header: '',
+    //   accessor: 'instrumentRunId',
+    //   cell: (instrumentRunId: unknown) => {
+    //     if (!instrumentRunId) {
+    //       return <div>-</div>;
+    //     } else {
+    //       return (
+    //         <div className='flex flex-row items-center'>
+    //           {/* <Link
+    //             to={`sequence/${instrumentRunId}/details`}
+    //             className={classNames(
+    //               'flex flex-row items-center text-sm font-medium hover:text-blue-700 text-blue-500'
+    //             )}
+    //           >
+    //             <TableCellsIcon
+    //               className='h-5 w-5 pr-1 shrink-0 text-blue-500'
+    //               aria-hidden='true'
+    //             />
+    //             Details
+    //           </Link> */}
+    //           {/* <Link
+    //           to={`sequence/${instrumentRunId}/diagram`}
+    //           className={classNames(
+    //             'flex flex-row items-center text-sm font-medium hover:text-blue-700 text-blue-500'
+    //           )}
+    //         >
+    //           <RectangleGroupIcon
+    //             className='h-5 w-5 pr-1 shrink-0 text-blue-500'
+    //             aria-hidden='true'
+    //           />
+    //           Diagram
+    //         </Link> */}
+    //           <Link
+    //             to={`sequence/${instrumentRunId}/report`}
+    //             className={classNames(
+    //               'flex flex-row items-center text-sm font-medium hover:text-blue-700 text-blue-500'
+    //             )}
+    //           >
+    //             <ClipboardIcon className='h-5 w-5 pr-1 shrink-0 text-blue-500' aria-hidden='true' />
+    //             Report
+    //           </Link>
+    //         </div>
+    //       );
+    //     }
+    //   },
+    // },
   ];
   return (
     <div>
@@ -180,7 +180,6 @@ const SequenceRunTable = () => {
 
       {(getQueryParams().sequenceRunId || selectedSequenceRun) && (
         <SequenceRunDetailsDrawer
-          selectedSequenceRunData={selectedSequenceRun}
           selectedSequenceRunId={getQueryParams().sequenceRunId}
           onCloseDrawer={onCloseDrawer}
         />
diff --git a/src/modules/runs/components/sequenceRuns/SequenceRunTimeline.tsx b/src/modules/runs/components/sequenceRuns/SequenceRunTimeline.tsx
new file mode 100644
index 0000000..8812606
--- /dev/null
+++ b/src/modules/runs/components/sequenceRuns/SequenceRunTimeline.tsx
@@ -0,0 +1,325 @@
+import {
+  useSequenceRunStateListModel,
+  useSequenceRunCommentListModel,
+  useSequenceRunCommentCreateModel,
+  useSequenceRunCommentUpdateModel,
+  useSequenceRunCommentDeleteModel,
+} from '@/api/sequenceRun';
+import { useState, useEffect, useMemo } from 'react';
+import { dayjs } from '@/utils/dayjs';
+import Badge, { getBadgeType } from '@/components/common/badges/Badge';
+import { Tooltip } from '@/components/common/tooltips';
+import { WrenchIcon, TrashIcon, ChatBubbleBottomCenterTextIcon } from '@heroicons/react/24/outline';
+import { getUsername } from '@/utils/commonUtils';
+import { Timeline } from '@/components/common/timelines';
+import { statusBackgroundColor } from '@/components/common/badges/StatusBadge';
+import { BackdropWithText } from '@/components/common/backdrop';
+import { Button } from '@/components/common/buttons';
+import { PlusIcon } from '@heroicons/react/20/solid';
+import { Dialog } from '@/components/dialogs';
+import { Textarea } from '@headlessui/react';
+import { useAuthContext } from '@/context/AmplifyAuthContext';
+import toaster from '@/components/common/toaster';
+
+const SequenceRunTimeline = ({ selectedSequenceRunId }: { selectedSequenceRunId: string }) => {
+  const { user } = useAuthContext();
+
+  const [selectedSequenceRunID, setSelectedSequenceRunId] = useState<string>(selectedSequenceRunId);
+  const [isOpenAddCommentDialog, setIsOpenAddCommentDialog] = useState<boolean>(false);
+  const [isOpenUpdateCommentDialog, setIsOpenUpdateCommentDialog] = useState<boolean>(false);
+  const [isOpenDeleteCommentDialog, setIsOpenDeleteCommentDialog] = useState<boolean>(false);
+  const [commentId, setCommentId] = useState<string | null>(null);
+  const [comment, setComment] = useState<string>('');
+
+  useEffect(() => {
+    setSelectedSequenceRunId(selectedSequenceRunId);
+  }, [selectedSequenceRunId]);
+
+  const { data: sequenceRunStateDetail, isFetching: isFetchingSequenceRunStateDetail } =
+    useSequenceRunStateListModel({
+      params: { path: { orcabusId: selectedSequenceRunID } },
+      reactQuery: {
+        enabled: !!selectedSequenceRunID,
+      },
+    });
+
+  const {
+    data: sequenceRunCommentsDetail,
+    isFetching: isFetchingSequenceRunComments,
+    refetch: refetchSequenceRunComment,
+  } = useSequenceRunCommentListModel({
+    params: { path: { orcabusId: selectedSequenceRunID } },
+    reactQuery: {
+      enabled: !!selectedSequenceRunID,
+    },
+  });
+
+  const SequenceRunStateTimelineData = useMemo(() => {
+    return sequenceRunStateDetail?.map((state) => ({
+      id: state.orcabusId || '',
+      content: (
+        <div className='flex flex-row gap-2 text-sm text-gray-500 group'>
+          <div>Status Updated</div>
+          <Badge status={state.status}>{state.status}</Badge>
+        </div>
+      ),
+      datetime: dayjs(state.timestamp).format('YYYY-MM-DD HH:mm'),
+      comment: state.comment || '',
+      status: state.status,
+      iconBackground: statusBackgroundColor(getBadgeType(state.status)),
+      payloadId: '',
+      eventType: 'stateChange' as const,
+    }));
+  }, [sequenceRunStateDetail]);
+
+  const SequenceRunCommentTimelineData = useMemo(() => {
+    return sequenceRunCommentsDetail?.map((comment) => ({
+      id: comment.orcabusId || '',
+      content: (
+        <div className='flex flex-row gap-2 text-sm text-gray-500 group'>
+          <div className='font-medium text-nowrap'>{`${getUsername(comment.createdBy)} `}</div>
+          <div className='text-gray-500 text-nowrap'>made a new</div>
+          <Badge type='unknown'>Comment</Badge>
+          {comment.comment && (
+            <div className='opacity-0 group-hover:opacity-100 flex flex-row gap-2'>
+              <Tooltip text='Update' position='top' background='white'>
+                <WrenchIcon
+                  className='w-4 h-4 cursor-pointer stroke-gray-500'
+                  onClick={() => {
+                    setCommentId(comment.orcabusId);
+                    setComment(comment.comment);
+                    setIsOpenUpdateCommentDialog(true);
+                  }}
+                />
+              </Tooltip>
+              <Tooltip text='Delete' position='top' background='white'>
+                <TrashIcon
+                  className='w-4 h-4 cursor-pointer stroke-gray-500'
+                  onClick={() => {
+                    setCommentId(comment.orcabusId);
+                    setIsOpenDeleteCommentDialog(true);
+                  }}
+                />
+              </Tooltip>
+            </div>
+          )}
+        </div>
+      ),
+      datetime: dayjs(comment.createdAt).format('YYYY-MM-DD HH:mm'),
+      type: 'comment',
+      comment: comment.comment || '',
+      eventType: 'comment' as const,
+      iconBackground: 'bg-green-100',
+    }));
+  }, [sequenceRunCommentsDetail]);
+
+  const timelineData = useMemo(() => {
+    return [
+      ...(SequenceRunStateTimelineData || []),
+      ...(SequenceRunCommentTimelineData || []),
+    ].sort((a, b) => (dayjs(a.datetime).isBefore(dayjs(b.datetime)) ? -1 : 1));
+  }, [SequenceRunStateTimelineData, SequenceRunCommentTimelineData]);
+
+  const {
+    mutate: createSequenceRunComment,
+    isSuccess: isCreatedSequenceRunComment,
+    isError: isErrorCreatingSequenceRunComment,
+    reset: resetCreateSequenceRunComment,
+  } = useSequenceRunCommentCreateModel({
+    params: { path: { orcabusId: selectedSequenceRunID } },
+    body: {
+      comment: comment,
+      createdBy: user?.email,
+    },
+  });
+
+  const handleAddComment = () => {
+    createSequenceRunComment();
+    setIsOpenAddCommentDialog(false);
+  };
+
+  useEffect(() => {
+    if (isCreatedSequenceRunComment) {
+      toaster.success({ title: 'Comment added successfully' });
+      refetchSequenceRunComment();
+      resetCreateSequenceRunComment();
+      setComment('');
+    }
+
+    if (isErrorCreatingSequenceRunComment) {
+      toaster.error({ title: 'Error adding comment' });
+      resetCreateSequenceRunComment();
+    }
+  }, [
+    isCreatedSequenceRunComment,
+    isErrorCreatingSequenceRunComment,
+    refetchSequenceRunComment,
+    resetCreateSequenceRunComment,
+  ]);
+
+  const {
+    mutate: updateSequenceRunComment,
+    isSuccess: isUpdatedSequenceRunComment,
+    isError: isErrorUpdatingSequenceRunComment,
+    reset: resetUpdateSequenceRunComment,
+  } = useSequenceRunCommentUpdateModel({
+    params: { path: { orcabusId: selectedSequenceRunID as string, id: commentId as string } },
+    body: {
+      comment: comment,
+      createdBy: user?.email,
+    },
+    reactQuery: {
+      enabled: !!commentId,
+    },
+  });
+
+  const handleUpdateComment = () => {
+    updateSequenceRunComment();
+    setIsOpenUpdateCommentDialog(false);
+  };
+
+  useEffect(() => {
+    if (isUpdatedSequenceRunComment) {
+      toaster.success({ title: 'Comment updated successfully' });
+      refetchSequenceRunComment();
+      resetUpdateSequenceRunComment();
+      setComment('');
+    }
+
+    if (isErrorUpdatingSequenceRunComment) {
+      toaster.error({ title: 'Error updating comment' });
+      resetUpdateSequenceRunComment();
+    }
+  }, [
+    isUpdatedSequenceRunComment,
+    refetchSequenceRunComment,
+    resetUpdateSequenceRunComment,
+    isErrorUpdatingSequenceRunComment,
+  ]);
+
+  const {
+    mutate: deleteSequenceRunComment,
+    isSuccess: isDeletedSequenceRunComment,
+    isError: isErrorDeletingSequenceRunComment,
+    reset: resetDeleteSequenceRunComment,
+  } = useSequenceRunCommentDeleteModel({
+    params: { path: { orcabusId: selectedSequenceRunID as string, id: commentId as string } },
+    body: {},
+  });
+
+  const handleDeleteComment = () => {
+    deleteSequenceRunComment();
+    setIsOpenDeleteCommentDialog(false);
+  };
+
+  useEffect(() => {
+    if (isDeletedSequenceRunComment) {
+      toaster.success({ title: 'Comment deleted successfully' });
+      refetchSequenceRunComment();
+      resetDeleteSequenceRunComment();
+      setComment('');
+    }
+
+    if (isErrorDeletingSequenceRunComment) {
+      toaster.error({ title: 'Error deleting comment' });
+      resetDeleteSequenceRunComment();
+    }
+  }, [
+    isDeletedSequenceRunComment,
+    refetchSequenceRunComment,
+    resetDeleteSequenceRunComment,
+    isErrorDeletingSequenceRunComment,
+  ]);
+
+  return (
+    <div>
+      {(isFetchingSequenceRunStateDetail || isFetchingSequenceRunComments) && (
+        <BackdropWithText text='Loading Status data...' />
+      )}
+      <div className='flex flex-row py-4'>
+        <Button
+          type='gray'
+          size='xs'
+          rounded
+          onClick={() => {
+            setIsOpenAddCommentDialog(true);
+          }}
+          className='ring-2 ring-gray-300'
+        >
+          <PlusIcon className='w-4 h-4' />
+          Add Comment
+        </Button>
+      </div>
+      <Timeline timeline={timelineData || [{ id: 'loading' }]} />
+      <Dialog
+        TitleIcon={ChatBubbleBottomCenterTextIcon}
+        open={isOpenAddCommentDialog}
+        title='Add Comment'
+        content={
+          <div className='flex flex-col gap-2'>
+            <div className='text-sm font-semibold'>Comment</div>
+            <Textarea
+              value={comment}
+              onChange={(e) => setComment(e.target.value)}
+              className='border-gray-400 rounded-md border-[1px] py-1.5 px-3 text-sm/6'
+            />
+          </div>
+        }
+        onClose={() => {
+          setIsOpenAddCommentDialog(false);
+          setComment('');
+        }}
+        closeBtn={{
+          label: 'Close',
+          onClick: () => {
+            setIsOpenAddCommentDialog(false);
+          },
+        }}
+        confirmBtn={{ label: 'Add Comment', onClick: handleAddComment }}
+      />
+      <Dialog
+        TitleIcon={ChatBubbleBottomCenterTextIcon}
+        open={isOpenUpdateCommentDialog}
+        title='Update Comment'
+        content={
+          <div className='flex flex-col gap-2'>
+            <div className='text-sm font-semibold'>Comment</div>
+            <Textarea
+              value={comment}
+              onChange={(e) => setComment(e.target.value)}
+              className='border-gray-400 rounded-md border-[1px] py-1.5 px-3 text-sm/6'
+            />
+          </div>
+        }
+        onClose={() => {
+          setIsOpenUpdateCommentDialog(false);
+        }}
+        closeBtn={{
+          label: 'Close',
+          onClick: () => {
+            setIsOpenUpdateCommentDialog(false);
+          },
+        }}
+        confirmBtn={{ label: 'Update Comment', onClick: handleUpdateComment }}
+      />
+      <Dialog
+        TitleIcon={ChatBubbleBottomCenterTextIcon}
+        open={isOpenDeleteCommentDialog}
+        title='Delete Comment'
+        content={<div>Delete Comment</div>}
+        onClose={() => {
+          setIsOpenDeleteCommentDialog(false);
+        }}
+        closeBtn={{
+          label: 'Close',
+          onClick: () => {
+            setIsOpenDeleteCommentDialog(false);
+          },
+        }}
+        confirmBtn={{ label: 'Delete Comment', onClick: handleDeleteComment }}
+      />
+    </div>
+  );
+};
+
+export default SequenceRunTimeline;

From c7c2377c58e843d8576a97afc1723a369726cad0 Mon Sep 17 00:00:00 2001
From: Ray Liu <ray.liu@umccr.org>
Date: Thu, 5 Dec 2024 16:47:36 +1100
Subject: [PATCH 2/5] delete bugs fix

---
 src/components/common/timelines/Timeline.tsx           |  2 +-
 .../components/sequenceRuns/SequenceRunTimeline.tsx    | 10 ++++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/common/timelines/Timeline.tsx b/src/components/common/timelines/Timeline.tsx
index 0fa997a..d9b0081 100644
--- a/src/components/common/timelines/Timeline.tsx
+++ b/src/components/common/timelines/Timeline.tsx
@@ -16,7 +16,7 @@ export interface TimelineEvent {
 
 export interface TimelineProps {
   timeline: TimelineEvent[];
-  handldEventClick: (event: TimelineEvent) => void | undefined;
+  handldEventClick?: (event: TimelineEvent) => void;
   selectId?: string;
 }
 
diff --git a/src/modules/runs/components/sequenceRuns/SequenceRunTimeline.tsx b/src/modules/runs/components/sequenceRuns/SequenceRunTimeline.tsx
index 8812606..62715f7 100644
--- a/src/modules/runs/components/sequenceRuns/SequenceRunTimeline.tsx
+++ b/src/modules/runs/components/sequenceRuns/SequenceRunTimeline.tsx
@@ -204,7 +204,9 @@ const SequenceRunTimeline = ({ selectedSequenceRunId }: { selectedSequenceRunId:
     reset: resetDeleteSequenceRunComment,
   } = useSequenceRunCommentDeleteModel({
     params: { path: { orcabusId: selectedSequenceRunID as string, id: commentId as string } },
-    body: {},
+    body: {
+      createdBy: user?.email,
+    },
   });
 
   const handleDeleteComment = () => {
@@ -306,7 +308,11 @@ const SequenceRunTimeline = ({ selectedSequenceRunId }: { selectedSequenceRunId:
         TitleIcon={ChatBubbleBottomCenterTextIcon}
         open={isOpenDeleteCommentDialog}
         title='Delete Comment'
-        content={<div>Delete Comment</div>}
+        content={
+          <div>
+            <div>Are you sure you want to delete this comment?</div>
+          </div>
+        }
         onClose={() => {
           setIsOpenDeleteCommentDialog(false);
         }}

From 034ebcf6a607ce06492510e7d8c86227ceb8604d Mon Sep 17 00:00:00 2001
From: Ray Liu <ray.liu@umccr.org>
Date: Thu, 5 Dec 2024 16:52:14 +1100
Subject: [PATCH 3/5] add body in the delete api call for verification

---
 src/api/sequenceRun.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/api/sequenceRun.ts b/src/api/sequenceRun.ts
index 8cab2f8..f948cf9 100644
--- a/src/api/sequenceRun.ts
+++ b/src/api/sequenceRun.ts
@@ -92,13 +92,13 @@ export function createSequenceRunPatchMutationHook<K extends keyof paths>(path:
 }
 
 export function createSequenceRunDeleteMutationHook<K extends keyof paths>(path: K) {
-  return function ({ params, reactQuery }: UseMutationOptions<paths[typeof path]['delete']>) {
+  return function ({ params, reactQuery, body }: UseMutationOptions<paths[typeof path]['delete']>) {
     const versionedPath = getVersionedPath(path);
     return useMutation({
       ...reactQuery,
       mutationFn: async () => {
         // @ts-expect-error: params is dynamic type type for openapi-fetch
-        const { data } = await client.DELETE(versionedPath, { params });
+        const { data } = await client.DELETE(versionedPath, { params, body: body });
         return data;
       },
     });

From 41c195df4bf1dfb41cdee7a58712caff81744011 Mon Sep 17 00:00:00 2001
From: Ray Liu <ray.liu@umccr.org>
Date: Fri, 6 Dec 2024 10:10:12 +1100
Subject: [PATCH 4/5] add rerun login in workflow Run detail page

---
 src/api/_mock/mockDataTransfer.ts             |  44 ---
 src/api/_mock/mockFastQData.ts                |  37 --
 src/api/_mock/mockLibraryData.ts              | 343 ------------------
 src/api/_mock/mockTestData.ts                 |  69 ----
 src/api/_mock/mockWorkflowData.ts             |   1 -
 src/api/workflow.ts                           |   5 +
 src/components/common/buttons/IconButton.tsx  |  48 +++
 src/components/common/buttons/index.tsx       |   3 +-
 .../common/select/IconMultipleSelect.tsx      |   6 +-
 .../navigation/tabs/ContentTabs.tsx           |   2 +-
 .../runs/Pages/WorkflowRunsDetails.tsx        |  11 +-
 .../workflowRuns/WorkflowRunContext.tsx       |  21 ++
 .../workflowRuns/WorkflowRunDetailsTable.tsx  | 124 ++++++-
 .../workflowRuns/WorkflowRunTimeline.tsx      |  10 +-
 src/stories/Button.stories.tsx                |  18 +-
 src/stories/Charts.stories.tsx                |  10 +-
 src/stories/Diagram.stories.tsx               |   2 +-
 .../_mock/mockScatterPlotData.ts              |   5 +-
 src/{api => stories}/_mock/mockSeedData.ts    |   0
 src/stories/_mock/mockWorkflowData.ts         |   5 +
 .../_mock/mockWorkflowRunData.ts              |  26 +-
 .../_mock/mockWorkflowStatusData.ts           |   0
 22 files changed, 243 insertions(+), 547 deletions(-)
 delete mode 100644 src/api/_mock/mockDataTransfer.ts
 delete mode 100644 src/api/_mock/mockFastQData.ts
 delete mode 100644 src/api/_mock/mockLibraryData.ts
 delete mode 100644 src/api/_mock/mockTestData.ts
 delete mode 100644 src/api/_mock/mockWorkflowData.ts
 create mode 100644 src/components/common/buttons/IconButton.tsx
 create mode 100644 src/modules/runs/components/workflowRuns/WorkflowRunContext.tsx
 rename src/{api => stories}/_mock/mockScatterPlotData.ts (99%)
 rename src/{api => stories}/_mock/mockSeedData.ts (100%)
 create mode 100644 src/stories/_mock/mockWorkflowData.ts
 rename src/{api => stories}/_mock/mockWorkflowRunData.ts (89%)
 rename src/{api => stories}/_mock/mockWorkflowStatusData.ts (100%)

diff --git a/src/api/_mock/mockDataTransfer.ts b/src/api/_mock/mockDataTransfer.ts
deleted file mode 100644
index 773968d..0000000
--- a/src/api/_mock/mockDataTransfer.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-// const workflowType = [
-//   'bcl_convert',
-//   'wgs_alignment_qc',
-//   'wts_alignment_qc',
-//   'wts_tumor_only',
-//   'wgs_tumor_normal',
-//   'umccrise',
-//   'rnasum',
-//   'star_alignment',
-//   'oncoanalyser_wts',
-//   'oncoanalyser_wgs',
-//   'oncoanalyser_wgts_existing_both',
-//   'sash',
-//   'tso_ctdna_tumor_only',
-// ];
-
-// const subjectsList = [
-//   'SBJ05545',
-//   'SBJ05551',
-//   'SBJ05550',
-//   'SBJ05549',
-//   'SBJ00006',
-//   'SBJ05554',
-//   'SBJ05553',
-//   'SBJ05552',
-//   'SBJ05548',
-//   'SBJ05547',
-//   'SBJ05546',
-//   'SBJ05462',
-//   'SBJ05360',
-//   'SBJ05359',
-//   'SBJ05358',
-//   'SBJ05357',
-//   'SBJ05356',
-//   'SBJ05355',
-//   'SBJ05354',
-//   'SBJ05353',
-//   'SBJ04947',
-//   'SBJ04895',
-//   'SBJ04404',
-//   'SBJ03149',
-//   'SBJ00027',
-//   'SBJ00005',
-// ];
diff --git a/src/api/_mock/mockFastQData.ts b/src/api/_mock/mockFastQData.ts
deleted file mode 100644
index a85284e..0000000
--- a/src/api/_mock/mockFastQData.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-interface GeneratedData {
-  [key: string]: string;
-}
-
-const generateFastqDataArray = (numRecords: number): GeneratedData[] => {
-  const dataArray: GeneratedData[] = [];
-
-  for (let i = 0; i < numRecords; i++) {
-    const record: GeneratedData = {
-      SubjectID: `SBJ${Math.floor(10000 + Math.random() * 90000).toString()}`,
-      LibraryID: `L${Math.floor(1000000 + Math.random() * 9000000).toString()}`,
-      SampleID: `PRJ${Math.floor(1000000 + Math.random() * 9000000).toString()}`,
-      size_num: (Math.floor(Math.random() * 50) + 20).toString(),
-      size_chr: `${(Math.floor(Math.random() * 20) + 10).toFixed(1)}G`,
-      Type: 'WGS',
-      Phenotype: 'normal',
-      Workflow: 'qc',
-      Assay: 'TsqNano',
-      path: `gds://production/primary_data/0000_A00000_0000_AAAAAA/${Math.random().toString(36).substring(7)}/WGS_TsqNano/Sample_${i}.fastq.gz`,
-      topup: Math.random() > 0.5 ? 'True' : 'False',
-      rgid: `${Math.random().toString(36).substring(7)}.${Math.random().toString(36).substring(7)}.4`,
-      read: (Math.floor(Math.random() * 2) + 1).toString(),
-      lane: (Math.floor(Math.random() * 8) + 1).toString(),
-      sbj_url: `<a href=https://test.org/subjects/SBJ${Math.floor(10000 + Math.random() * 90000).toString()}/overview style='background-color:#${Math.floor(Math.random() * 16777215).toString(16)}'>SBJ${Math.floor(10000 + Math.random() * 90000).toString()}</a>`,
-    };
-
-    dataArray.push(record);
-  }
-
-  return dataArray;
-};
-
-export default generateFastqDataArray;
-
-// Example usage:
-// const generatedData = generateDataArray(5); // Generates an array of 5 objects
-// console.log(generatedData);
diff --git a/src/api/_mock/mockLibraryData.ts b/src/api/_mock/mockLibraryData.ts
deleted file mode 100644
index 5db0520..0000000
--- a/src/api/_mock/mockLibraryData.ts
+++ /dev/null
@@ -1,343 +0,0 @@
-import { v4 as uuidv4 } from 'uuid'; // Assume UUID for generating unique identifiers
-
-interface LibraryData {
-  id: number;
-  library_id: string;
-  sample_name: string;
-  sample_id: string;
-  external_sample_id: string;
-  subject_id: string;
-  external_subject_id: string;
-  phenotype: string;
-  quality: string;
-  source: string;
-  project_name: string;
-  project_owner: string;
-  experiment_id: string;
-  type: string;
-  assay: string;
-  override_cycles: string;
-  workflow: string;
-  coverage: string;
-  truseqindex: string;
-}
-
-// Define the enum for different library types
-export enum LibraryType {
-  WGS = 'WGS',
-  WTS = 'WTS',
-  ctTSO = 'ctTSO',
-  ctDNA = 'ctDNA',
-}
-
-// Define the enum for workflow run types
-enum WorkflowType {
-  DRAGEN_WGS_QC = 'DRAGEN_WGS_QC',
-  TUMOR_NORMAL = 'TUMOR_NORMAL',
-  UMCCRISE = 'UMCCRISE',
-  ONCOANALYSER_WGS = 'ONCOANALYSER_WGS',
-  SASH = 'SASH',
-  ONCOANALYSER_WGTS_BOTH = 'ONCOANALYSER_WGTS_BOTH',
-  DRAGEN_WTS_QC = 'DRAGEN_WTS_QC',
-  DRAGEN_WTS = 'DRAGEN_WTS',
-  RNASUM = 'RNASUM',
-  STAR_ALIGNMENT = 'STAR_ALIGNMENT',
-  ONCOANALYSER_WTS = 'ONCOANALYSER_WTS',
-  DRAGEN_TSO_CTDNA = 'DRAGEN_TSO_CTDNA',
-}
-
-// Mapping of library types to available workflow types
-const WORKFLOW_PIPELINE: Record<LibraryType, WorkflowType[]> = {
-  [LibraryType.WGS]: [
-    WorkflowType.DRAGEN_WGS_QC,
-    WorkflowType.TUMOR_NORMAL,
-    WorkflowType.UMCCRISE,
-    WorkflowType.ONCOANALYSER_WGS,
-    WorkflowType.SASH,
-    WorkflowType.ONCOANALYSER_WGTS_BOTH,
-  ],
-  [LibraryType.WTS]: [
-    WorkflowType.DRAGEN_WTS_QC,
-    WorkflowType.DRAGEN_WTS,
-    WorkflowType.RNASUM,
-    WorkflowType.STAR_ALIGNMENT,
-    WorkflowType.ONCOANALYSER_WTS,
-    WorkflowType.ONCOANALYSER_WGTS_BOTH,
-  ],
-  [LibraryType.ctTSO]: [WorkflowType.DRAGEN_TSO_CTDNA, WorkflowType.UMCCRISE],
-  [LibraryType.ctDNA]: [WorkflowType.DRAGEN_TSO_CTDNA, WorkflowType.UMCCRISE],
-} as Record<string, WorkflowType[]>;
-
-enum WorkflowStatus {
-  Requested = 'Requested',
-  Queued = 'Queued',
-  Initializing = 'Initializing',
-  PreparingInputs = 'Preparing Inputs',
-  InProgress = 'In Progress',
-  GeneratingOutputs = 'Generating outputs',
-  Aborting = 'Aborting',
-  Aborted = 'Aborted',
-  Failed = 'Failed',
-  Succeeded = 'Succeeded',
-}
-
-export interface WorkflowRun {
-  id: number;
-  portal_run_id: string;
-  type_name: string;
-  wfr_id: string;
-  wfl_id: string;
-  wfv_id: string;
-  version: string;
-  input: string;
-  start: string;
-  wfr_name: string;
-  output: string;
-  end: string;
-  end_status: WorkflowStatus;
-  notified: boolean;
-  sequence_run: number;
-  batch_run: number;
-}
-
-interface LibraryRunData {
-  id: number;
-  library_id: string;
-  instrument_run_id: string;
-  run_id: string;
-  lane: number;
-  override_cycles: string;
-  coverage_yield: null | number;
-  qc_pass: boolean;
-  qc_status: null | string;
-  valid_for_analysis: boolean;
-  workflows: number[];
-}
-
-// Mock Library Data Generation
-export const generateMockLibraryData = (count: number, libraryType: LibraryType): LibraryData[] => {
-  return Array.from({ length: count }, (_, i) => ({
-    id: 8877 + i,
-    library_id: `L${new Date().getFullYear()}${Math.floor(1000 + Math.random() * 9000)}`,
-    sample_name: `Sample${i}`,
-    sample_id: `SampleID${i}`,
-    external_sample_id: `External${i}`,
-    subject_id: `Subject${i}`,
-    external_subject_id: `ExternalSubject${i}`,
-    phenotype: 'N/A',
-    quality: 'High',
-    source: 'Synthetic',
-    project_name: 'GenomeProject',
-    project_owner: 'GenomicsLab',
-    experiment_id: uuidv4(),
-    type: libraryType, // All entries will have the specified library type
-    assay: 'Sequencing',
-    override_cycles: 'Y151;I8;I8;Y151',
-    workflow: 'qc',
-    coverage: `${Math.random() * 100}`,
-    truseqindex: `Index${i}`,
-  }));
-};
-
-// Generating mock workflow run data
-// export const generateMockWorkflowRunData = (
-//   count: number,
-//   libraryType: LibraryType
-// ): WorkflowRun[] => {
-//   const finalStatuses = [WorkflowStatus.Aborted, WorkflowStatus.Failed, WorkflowStatus.Succeeded];
-//   const possibleWorkflows = WORKFLOW_PIPELINE[libraryType];
-
-//   return Array.from({ length: count }, (_, i) => {
-//     const isFinal = Math.random() < 0.3;
-//     const status = isFinal
-//       ? finalStatuses[Math.floor(Math.random() * finalStatuses.length)]
-//       : WorkflowStatus.InProgress;
-//     const type_name = possibleWorkflows[Math.floor(Math.random() * possibleWorkflows.length)];
-
-//     return {
-//       id: 6500 + i,
-//       portal_run_id: `20230423${Math.floor(Math.random() * 1000000)}`,
-//       type_name,
-//       wfr_id: `wfr.${Math.random().toString(36).substring(7)}`,
-//       wfl_id: `wfl.${Math.random().toString(36).substring(7)}`,
-//       wfv_id: `wfv.${Math.random().toString(36).substring(7)}`,
-//       version: `${Math.floor(Math.random() * 5)}.${Math.floor(Math.random() * 10)}.0--${Math.floor(Math.random() * 10)}--${Math.random().toString(36).substring(2, 8)}`,
-//       input: JSON.stringify({ data: 'Sample input data for the workflow' }),
-//       start: new Date().toISOString(),
-//       wfr_name: `workflow_run_${i}`,
-//       output: JSON.stringify({ data: 'Sample output data for the workflow' }),
-//       end: new Date().toISOString(),
-//       end_status: status,
-//       notified: true,
-//       sequence_run: Math.floor(Math.random() * 1000),
-//       batch_run: Math.floor(Math.random() * 100),
-//     };
-//   });
-// };
-
-// Define a helper to generate mock workflow run details
-// export const generateWorkflowRunDetails = (workflowName: string): WorkflowRun => {
-//   return {
-//     id: Math.floor(Math.random() * 10000),
-//     portal_run_id: uuidv4(),
-//     type_name: workflowName,
-//     version: `${Math.random().toFixed(2)}--release`,
-//     start: new Date().toISOString(),
-//     end: new Date().toISOString(),
-//     end_status: [
-//       'Requested',
-//       'Queued',
-//       'Initializing',
-//       'Preparing Inputs',
-//       'In Progress',
-//       'Generating outputs',
-//       'Aborting',
-//       'Aborted',
-//       'Failed',
-//       'Succeeded',
-//     ][Math.floor(Math.random() * 10)],
-//     notified: Math.random() > 0.5,
-//   };
-// };
-
-// Mock Library Run Data Generation
-//
-// Updated Mock Library Run Data Generation
-// export const generateMockLibraryRunData = (libraries: LibraryData[]): LibraryRunData[] => {
-//   return libraries.flatMap((library) => {
-//     const numberOfRuns = Math.floor(Math.random() * 5) + 1; // Random number of runs per library
-//     const workflowsForType = WORKFLOW_PIPELINE[library.type]; // Fetch workflows based on library type
-
-//     return Array.from({ length: numberOfRuns }, (_, i) => {
-//       const workflowDetailsObject = workflowsForType.reduce(
-//         (details, workflow) => {
-//           details[workflow] = generateWorkflowRunDetails(workflow);
-//           return details;
-//         },
-//         {} as { [key: string]: WorkflowRun }
-//       );
-
-//       return {
-//         id: 12500 + i,
-//         library_id: library.library_id,
-//         instrument_run_id: `Run${Math.floor(Math.random() * 1000)}`,
-//         run_id: uuidv4(),
-//         lane: Math.ceil(Math.random() * 8), // Random lane number
-//         override_cycles: library.override_cycles,
-//         coverage_yield: null,
-//         qc_pass: Math.random() > 0.5,
-//         qc_status: null,
-//         valid_for_analysis: Math.random() > 0.5,
-//         workflows: workflowsForType.map((_, idx) => 6788 + idx), // Generate workflow IDs
-//         libraryDetails: library,
-//         workflowsDetails: workflowDetailsObject, // Object of workflow details
-//       };
-//     });
-//   });
-// };
-
-//   // Example usage
-//   const libraries = generateMockLibraryData(10);
-//   const workflows = generateMockWorkflowRunData(20);
-//   const libraryRuns = generateMockLibraryRunData(libraries, workflows, 10);
-
-//   console.log(libraryRuns);
-//   console.log(libraries);
-//   console.log(workflows);
-
-export const generateMockLibraryRunData = (
-  count: number,
-  libraryType: LibraryType
-): LibraryRunData[] => {
-  const libraries = generateMockLibraryData(count, libraryType); // Generate specific library data first
-
-  return libraries.flatMap((library) => {
-    const numberOfRuns = Math.floor(Math.random() * 5) + 1; // Random number of runs per library
-    const workflowsForType = WORKFLOW_PIPELINE[library.type]; // Fetch workflows based on library type
-
-    return Array.from({ length: numberOfRuns }, (_, i) => {
-      const workflowDetailsObject = workflowsForType.reduce(
-        (details, workflow) => {
-          details[workflow] = generateWorkflowRunDetails(workflow);
-          return details;
-        },
-        {} as { [key: string]: WorkflowRunData }
-      );
-
-      return {
-        id: 12500 + i,
-        library_id: library.library_id,
-        instrument_run_id: `Run${Math.floor(Math.random() * 1000)}`,
-        run_id: uuidv4(),
-        lane: Math.ceil(Math.random() * 8), // Random lane number
-        override_cycles: library.override_cycles,
-        coverage_yield: null,
-        qc_pass: Math.random() > 0.5,
-        qc_status: null,
-        valid_for_analysis: Math.random() > 0.5,
-        workflows: workflowsForType.map((_, idx) => 6788 + idx), // Generate workflow IDs
-        libraryDetails: library,
-        workflowsDetails: workflowDetailsObject, // Object of workflow details
-      };
-    });
-  });
-};
-
-// Generate workflow details for a given workflow type
-export const generateWorkflowRunDetails = (workflowType: string): WorkflowRunData => {
-  return {
-    id: Math.floor(Math.random() * 1000),
-    portal_run_id: uuidv4(),
-    type_name: workflowType,
-    version: '1.0.0',
-    start: new Date().toISOString(),
-    end: new Date().toISOString(),
-    end_status: [
-      'Requested',
-      'Queued',
-      'Initializing',
-      'Preparing Inputs',
-      'In Progress',
-      'Generating outputs',
-      'Aborting',
-      'Aborted',
-      'Failed',
-      'Succeeded',
-    ][Math.floor(Math.random() * 10)],
-    notified: Math.random() > 0.5,
-  };
-};
-
-// LibraryData and WorkflowRunData interfaces need to be defined
-//   interface LibraryData {
-//     id: number;
-//     library_id: string;
-//     sample_name: string;
-//     sample_id: string;
-//     external_sample_id: string;
-//     subject_id: string;
-//     external_subject_id: string;
-//     phenotype: string;
-//     quality: string;
-//     source: string;
-//     project_name: string;
-//     project_owner: string;
-//     experiment_id: string;
-//     type: LibraryType;
-//     assay: string;
-//     override_cycles: string;
-//     workflow: string;
-//     coverage: string;
-//     truseqindex: string;
-//   }
-
-interface WorkflowRunData {
-  id: number;
-  portal_run_id: string;
-  type_name: string;
-  version: string;
-  start: string;
-  end: string;
-  end_status: string;
-  notified: boolean;
-}
diff --git a/src/api/_mock/mockTestData.ts b/src/api/_mock/mockTestData.ts
deleted file mode 100644
index 5ef4a43..0000000
--- a/src/api/_mock/mockTestData.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-export const generateGanttData = (
-  count: number
-): { startDate: Date; endDate: Date; taskName: string }[] => {
-  const tasks = [];
-  const taskNames = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
-  let currentDate = new Date('Sun Dec 09 2012 00:00:00 EST');
-
-  for (let i = 0; i < count; i++) {
-    const taskDurationHours = Math.floor(Math.random() * 4) + 1; // Tasks last between 1 and 4 hours
-    const overlap = Math.floor(Math.random() * 3); // Up to 2 hours overlap
-    const taskName = `${taskNames.charAt(i % 26)} Job`; // Cycle through 'A Job' to 'Z Job'
-
-    const startDate = new Date(currentDate.getTime() - overlap * 3600000);
-    const endDate = new Date(startDate.getTime() + taskDurationHours * 3600000);
-
-    tasks.push({ startDate, endDate, taskName });
-
-    // Update currentDate to the end of the current task for the next task
-    currentDate = new Date(endDate.getTime());
-  }
-
-  return tasks;
-};
-
-export const generateMockGanttData = (
-  tasksData: { name: string; value: number }[]
-): { [key: string]: { startDate: Date; endDate: Date; taskName: string }[] } => {
-  const ganttData: { [key: string]: { startDate: Date; endDate: Date; taskName: string }[] } = {};
-
-  tasksData.forEach((task) => {
-    ganttData[task.name] = generateGanttData(task.value);
-  });
-
-  return ganttData;
-};
-
-// we need generate gannt data for the data, like bcl_convert need 1 gannt data, tso_ctdna_tumor_only need 6 gannt data
-// const data = [
-//   { name: 'bcl_convert', value: 1 },
-//   { name: 'tso_ctdna_tumor_only', value: 6 },
-//   { name: 'wgs_alignment_qc', value: 22 },
-//   { name: 'wts_alignment_qc', value: 16 },
-//   { name: 'wts_tumor_only', value: 4 },
-//   { name: 'wgs_tumor_normal', value: 4 },
-//   { name: 'umccrise', value: 4 },
-//   { name: 'rnasum', value: 4 },
-//   { name: 'star_alignment', value: 4 },
-//   { name: 'oncoanalyser_wts', value: 4 },
-//   { name: 'oncoanalyser_wgs', value: 4 },
-//   { name: 'oncoanalyser_wgts_existing_both', value: 4 },
-//   { name: 'sash', value: 4 },
-// ];
-
-// example opuput:
-// {
-//   bcl_convert: [
-//     {  startDate: '2022-09-09T14:00:00.000Z', endDate: '2022-09-09T15:00:00.000Z', taskName: 'A Job' }
-//   ],
-//   tso_ctdna_tumor_only: [
-//     { startDate: '2022-09-09T15:00:00.000Z', endDate: '2022-09-09T17:00:00.000Z', taskName: 'B Job' },
-//     { startDate: '2022-09-09T14:00:00.000Z', endDate: '2022-09-09T15:00:00.000Z', taskName: 'A Job' },
-//     { startDate: '2022-09-09T13:00:00.000Z', endDate: '2022-09-09T14:00:00.000Z', taskName: 'Z Job' },
-//     { startDate: '2022-09-09T12:00:00.000Z', endDate: '2022-09-09T13:00:00.000Z', taskName: 'Y Job' },
-//     { startDate: '2022-09-09T11:00:00.000Z', endDate: '2022-09-09T12:00:00.000Z', taskName: 'X Job' },
-//     { startDate: '2022-09-09T10:00:00.000Z', endDate: '2022-09-09T11:00:00.000Z', taskName: 'W Job' }
-//   ],
-//   wgs_alignment_qc: [
-//     { startDate: '2022-09-09T17:00:00.000Z', endDate: '2022-09-09T19:00:00.000Z', taskName: 'C Job' },
-//     { startDate: '2022-09-09T16:00:00.000Z', endDate: '2022-09-09T17:00:00.000Z', taskName: 'B Job' },...
diff --git a/src/api/_mock/mockWorkflowData.ts b/src/api/_mock/mockWorkflowData.ts
deleted file mode 100644
index 624859f..0000000
--- a/src/api/_mock/mockWorkflowData.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const mockWorkflowData = {};
diff --git a/src/api/workflow.ts b/src/api/workflow.ts
index 1bf9137..57cf63a 100644
--- a/src/api/workflow.ts
+++ b/src/api/workflow.ts
@@ -174,3 +174,8 @@ export const useAnalysisRunListModel = createWorkflowQueryHook('/api/v1/analysis
 export const useAnalysisRunDetailModel = createWorkflowQueryHook(
   '/api/v1/analysisrun/{orcabusId}/'
 );
+
+// rerun
+export const useWorkflowRunRerunModel = createWorkflowPostMutationHook(
+  '/api/v1/workflowrun/{orcabusId}/rerun/'
+);
diff --git a/src/components/common/buttons/IconButton.tsx b/src/components/common/buttons/IconButton.tsx
new file mode 100644
index 0000000..cfb3e9a
--- /dev/null
+++ b/src/components/common/buttons/IconButton.tsx
@@ -0,0 +1,48 @@
+import { FC, ReactNode, MouseEventHandler } from 'react';
+import { Tooltip } from '@/components/common/tooltips';
+
+export interface IconButtonProps {
+  icon: ReactNode;
+  tooltip?: string;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  type?: 'primary' | 'secondary' | 'light' | 'green' | 'red' | 'yellow' | 'gray';
+  disabled?: boolean;
+  className?: string;
+  tooltipPosition?: 'top' | 'bottom' | 'left' | 'right';
+  tooltipBackground?: 'gray' | 'white';
+}
+
+const IconButton: FC<IconButtonProps> = ({
+  icon,
+  tooltip,
+  onClick,
+  disabled = false,
+  className = '',
+  tooltipPosition = 'top',
+  tooltipBackground = 'white',
+}) => {
+  const baseIconButtonStyles =
+    'p-1.5 rounded-md text-gray-400 hover:text-gray-600 hover:bg-gray-100';
+
+  const button = (
+    <button
+      onClick={onClick}
+      disabled={disabled}
+      className={`${baseIconButtonStyles} ${className}`}
+    >
+      {icon}
+    </button>
+  );
+
+  if (tooltip) {
+    return (
+      <Tooltip text={tooltip} position={tooltipPosition} background={tooltipBackground}>
+        {button}
+      </Tooltip>
+    );
+  }
+
+  return button;
+};
+
+export default IconButton;
diff --git a/src/components/common/buttons/index.tsx b/src/components/common/buttons/index.tsx
index 9080b3e..80a2677 100644
--- a/src/components/common/buttons/index.tsx
+++ b/src/components/common/buttons/index.tsx
@@ -1,4 +1,5 @@
 import Button from './Button';
 import ButtonGroup from './ButtonGroup';
+import IconButton from './IconButton';
 
-export { Button, ButtonGroup };
+export { Button, ButtonGroup, IconButton };
diff --git a/src/components/common/select/IconMultipleSelect.tsx b/src/components/common/select/IconMultipleSelect.tsx
index 8bdd69b..a11b0ad 100644
--- a/src/components/common/select/IconMultipleSelect.tsx
+++ b/src/components/common/select/IconMultipleSelect.tsx
@@ -44,14 +44,14 @@ const IconMultipleSelect: FC<IconMultipleSelectProps> = ({
   }, [selectedItemValues]);
 
   const hasSelected = useMemo(
-    () => selected.length > 0 && selected.some((item) => item !== selectAllOptionValue),
+    () => selected?.length > 0 && selected.some((item) => item !== selectAllOptionValue),
     [selected, selectAllOptionValue]
   );
 
   const selectedValues = useMemo(
     () =>
       options
-        .filter((option) => selected.includes(option.value))
+        .filter((option) => selected?.includes(option.value?.toString().split('.')[1]))
         .map(
           (option) => option.label + (option.secondaryLabel ? ` (${option.secondaryLabel})` : '')
         ),
@@ -105,7 +105,7 @@ const IconMultipleSelect: FC<IconMultipleSelectProps> = ({
               <Field className={classNames('flex items-center w-full', 'hover:bg-gray-100')}>
                 <Checkbox
                   as='button'
-                  checked={selected.some((item) => item === option.value)}
+                  checked={selected?.some((item) => item === option.value)}
                   onChange={(checked) => {
                     if (checked) {
                       const isSelectAll = option.value === selectAllOptionValue;
diff --git a/src/components/navigation/tabs/ContentTabs.tsx b/src/components/navigation/tabs/ContentTabs.tsx
index c16c1de..2564184 100644
--- a/src/components/navigation/tabs/ContentTabs.tsx
+++ b/src/components/navigation/tabs/ContentTabs.tsx
@@ -10,7 +10,7 @@ export interface TabsProps {
   selectedLabel?: string;
 }
 
-export const Tabs: FC<TabsProps> = ({ tabs, selectedLabel = tabs[0].label }) => {
+export const Tabs: FC<TabsProps> = ({ tabs, selectedLabel = tabs[0]?.label ?? '' }) => {
   const [selectedTabIndex, setSelectedTabIndex] = useState(
     tabs.findIndex((tab) => tab.label === selectedLabel)
   );
diff --git a/src/modules/runs/Pages/WorkflowRunsDetails.tsx b/src/modules/runs/Pages/WorkflowRunsDetails.tsx
index c7aded3..a9e22a9 100644
--- a/src/modules/runs/Pages/WorkflowRunsDetails.tsx
+++ b/src/modules/runs/Pages/WorkflowRunsDetails.tsx
@@ -1,13 +1,16 @@
 import WorkflowRunTimeline from '../components/workflowRuns/WorkflowRunTimeline';
 import WorkflowRunDetailsTable from '../components/workflowRuns/WorkflowRunDetailsTable';
+import { WorkflowRunProvider } from '../components/workflowRuns/WorkflowRunContext';
 
 const WorkflowRunDetails = () => {
   return (
-    <div className='flex flex-col gap-4 h-full w-full'>
-      <WorkflowRunDetailsTable />
+    <WorkflowRunProvider>
+      <div className='flex flex-col gap-4 h-full w-full'>
+        <WorkflowRunDetailsTable />
 
-      <WorkflowRunTimeline />
-    </div>
+        <WorkflowRunTimeline />
+      </div>
+    </WorkflowRunProvider>
   );
 };
 
diff --git a/src/modules/runs/components/workflowRuns/WorkflowRunContext.tsx b/src/modules/runs/components/workflowRuns/WorkflowRunContext.tsx
new file mode 100644
index 0000000..243c287
--- /dev/null
+++ b/src/modules/runs/components/workflowRuns/WorkflowRunContext.tsx
@@ -0,0 +1,21 @@
+import { createContext, FC, PropsWithChildren, ReactElement, useContext, useState } from 'react';
+
+const WorkflowRunContext = createContext({
+  refreshWorkflowRuns: false,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  setRefreshWorkflowRuns: (value: boolean) => {},
+});
+
+export const WorkflowRunProvider: FC<PropsWithChildren> = ({ children }): ReactElement => {
+  const [refreshWorkflowRuns, setRefreshWorkflowRuns] = useState<boolean>(false);
+
+  return (
+    <WorkflowRunContext.Provider value={{ refreshWorkflowRuns, setRefreshWorkflowRuns }}>
+      {children}
+    </WorkflowRunContext.Provider>
+  );
+};
+
+export const useWorkflowRunContext = () => {
+  return useContext(WorkflowRunContext);
+};
diff --git a/src/modules/runs/components/workflowRuns/WorkflowRunDetailsTable.tsx b/src/modules/runs/components/workflowRuns/WorkflowRunDetailsTable.tsx
index d3c12a5..405a7eb 100644
--- a/src/modules/runs/components/workflowRuns/WorkflowRunDetailsTable.tsx
+++ b/src/modules/runs/components/workflowRuns/WorkflowRunDetailsTable.tsx
@@ -1,12 +1,20 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { Link, useParams } from 'react-router-dom';
-import { useWorkflowRunDetailModel } from '@/api/workflow';
+import { useWorkflowRunDetailModel, useWorkflowRunRerunModel } from '@/api/workflow';
 import { JsonToList } from '@/components/common/json-to-table';
 import { Table } from '@/components/tables';
 import { classNames } from '@/utils/commonUtils';
+import Skeleton from 'react-loading-skeleton';
+import { IconDropdown } from '@/components/common/dropdowns';
+import toaster from '@/components/common/toaster';
+import { Dialog } from '@/components/dialogs';
+import { ArrowPathIcon } from '@heroicons/react/24/outline';
+import { useWorkflowRunContext } from './WorkflowRunContext';
 
 const WorkflowRunDetailsTable = () => {
   const { orcabusId } = useParams();
+  const [isOpenRerunWorkflowDialog, setIsOpenRerunWorkflowDialog] = useState<boolean>(false);
+  const { setRefreshWorkflowRuns } = useWorkflowRunContext();
 
   const { data: workflowRunDetail, isFetching: isFetchingWorkflowRunDetail } =
     useWorkflowRunDetailModel({
@@ -36,6 +44,39 @@ const WorkflowRunDetailsTable = () => {
     [workflowRunDetail]
   );
 
+  const {
+    mutate: rerunWorkflow,
+    isSuccess: isRerunWorkflowSuccess,
+    isError: isErrorRerunWorkflow,
+    reset: resetRerunWorkflow,
+  } = useWorkflowRunRerunModel({
+    params: { path: { orcabusId: orcabusId as string } },
+    body: {},
+    reactQuery: {
+      enabled: !!orcabusId,
+    },
+  });
+
+  const handleRerunWorkflow = () => {
+    setIsOpenRerunWorkflowDialog(false);
+    rerunWorkflow();
+    resetRerunWorkflow();
+  };
+
+  useEffect(() => {
+    if (isRerunWorkflowSuccess) {
+      toaster.success({ title: 'Workflow rerun successfully' });
+      setIsOpenRerunWorkflowDialog(false);
+      resetRerunWorkflow();
+      setRefreshWorkflowRuns(true);
+    }
+    if (isErrorRerunWorkflow) {
+      toaster.error({ title: 'Error rerunning workflow' });
+      setIsOpenRerunWorkflowDialog(false);
+      resetRerunWorkflow();
+    }
+  }, [isRerunWorkflowSuccess, isErrorRerunWorkflow, resetRerunWorkflow, setRefreshWorkflowRuns]);
+
   const librariesTableData = useMemo(
     () =>
       workflowRunDetail && workflowRunDetail.libraries.length > 0
@@ -76,23 +117,72 @@ const WorkflowRunDetailsTable = () => {
   );
 
   return (
-    <div className='pt-4 w-full flex flex-row gap-2'>
-      <div className='flex-1'>
-        <JsonToList
-          // title='Details'
-          data={detailsData}
-          isFetchingData={isFetchingWorkflowRunDetail}
-        />
+    <div className='pt-4 w-full flex flex-col gap-2'>
+      {/* title */}
+      <div className='flex-1 flex flex-row gap-2 items-center px-2'>
+        {isFetchingWorkflowRunDetail ? (
+          <div className='flex-1'>
+            <Skeleton height={20} />
+          </div>
+        ) : (
+          <div className='flex-1 text-lg font-medium'>{workflowRunDetail?.workflowRunName}</div>
+        )}
+        <div>
+          <IconDropdown
+            items={[{ label: 'Rerun', onClick: () => setIsOpenRerunWorkflowDialog(true) }]}
+            className='bg-magpie-light-50'
+          />
+        </div>
       </div>
-      <div className='flex-1'>
-        <Table
-          // tableHeader='Libraries'
-          inCard={true}
-          columns={librariesTableColumns}
-          tableData={librariesTableData}
-          isFetchingData={isFetchingWorkflowRunDetail}
-        />
+
+      {/* details */}
+      <div className='flex flex-row gap-2 px-2'>
+        <div className='flex-1'>
+          <JsonToList
+            // title='Details'
+            data={detailsData}
+            isFetchingData={isFetchingWorkflowRunDetail}
+          />
+        </div>
+
+        {/* libraries */}
+        <div className='flex-1'>
+          <Table
+            // tableHeader='Libraries'
+            inCard={true}
+            columns={librariesTableColumns}
+            tableData={librariesTableData}
+            isFetchingData={isFetchingWorkflowRunDetail}
+          />
+        </div>
       </div>
+
+      <Dialog
+        TitleIcon={ArrowPathIcon}
+        title='Rerun Workflow'
+        open={isOpenRerunWorkflowDialog}
+        content={
+          <div>
+            <div className='text-lg font-medium'>{workflowRunDetail?.workflowRunName || ''}</div>
+            <div className='mt-2 text-sm text-red-500'>
+              <span className='font-medium'>Note:</span> This action will rerun this workflow and
+              mark the current run as &apos;DEPRECATED&apos;.
+            </div>
+            <div className='mt-2 text-sm text-gray-500 font-medium'>
+              Are you sure you want to rerun this workflow?
+            </div>
+          </div>
+        }
+        onClose={() => setIsOpenRerunWorkflowDialog(false)}
+        closeBtn={{
+          label: 'Close',
+          onClick: () => setIsOpenRerunWorkflowDialog(false),
+        }}
+        confirmBtn={{
+          label: 'Rerun',
+          onClick: handleRerunWorkflow,
+        }}
+      />
     </div>
   );
 };
diff --git a/src/modules/runs/components/workflowRuns/WorkflowRunTimeline.tsx b/src/modules/runs/components/workflowRuns/WorkflowRunTimeline.tsx
index 8658fa1..38cbee7 100644
--- a/src/modules/runs/components/workflowRuns/WorkflowRunTimeline.tsx
+++ b/src/modules/runs/components/workflowRuns/WorkflowRunTimeline.tsx
@@ -32,11 +32,12 @@ import { getBadgeType, statusBackgroundColor } from '@/components/common/badges'
 import { dayjs } from '@/utils/dayjs';
 import { classNames, getUsername } from '@/utils/commonUtils';
 import { BackdropWithText } from '@/components/common/backdrop';
+import { useWorkflowRunContext } from './WorkflowRunContext';
 
 const WorkflowRunTimeline = () => {
   const { orcabusId } = useParams();
   const { user } = useAuthContext();
-
+  const { refreshWorkflowRuns, setRefreshWorkflowRuns } = useWorkflowRunContext();
   const [currentState, setCurrentState] = useState<string | null>(null);
   const [selectedPayloadId, setSelectedPayloadId] = useState<string | null>(null);
   const [selectedState, setSelectedState] = useState<string | null>(null);
@@ -62,6 +63,13 @@ const WorkflowRunTimeline = () => {
     },
   });
 
+  useEffect(() => {
+    if (refreshWorkflowRuns) {
+      refetchWorkflowState();
+      setRefreshWorkflowRuns(false);
+    }
+  }, [refreshWorkflowRuns, refetchWorkflowState, setRefreshWorkflowRuns]);
+
   const {
     data: workflowCommentData,
     isFetching: isFetchingWorkflowComment,
diff --git a/src/stories/Button.stories.tsx b/src/stories/Button.stories.tsx
index 20fd140..66e3845 100644
--- a/src/stories/Button.stories.tsx
+++ b/src/stories/Button.stories.tsx
@@ -1,8 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
-import { Button } from '@/components/common/buttons';
+import { Button, IconButton } from '@/components/common/buttons';
 import { ButtonProps } from '@/components/common/buttons/Button';
-import { CheckCircleIcon, PlusIcon } from '@heroicons/react/20/solid';
+import { IconButtonProps } from '@/components/common/buttons/IconButton';
+import { CheckCircleIcon, PlusIcon, ArrowDownOnSquareIcon } from '@heroicons/react/20/solid';
 import { Spinner } from '@/components/common/spinner';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
@@ -83,3 +84,16 @@ export const CircularButtons: Story = {
     className: '!p-2 !m-0',
   },
 };
+
+// Update the story type
+export const IconButtonStory: StoryObj<IconButtonProps> = {
+  render: () => (
+    <IconButton
+      onClick={() => console.log('testing')}
+      icon={<ArrowDownOnSquareIcon className='h-5 w-5' />}
+      tooltip='Export'
+      tooltipPosition='top'
+      tooltipBackground='white'
+    />
+  ),
+};
diff --git a/src/stories/Charts.stories.tsx b/src/stories/Charts.stories.tsx
index 141f720..e411b31 100644
--- a/src/stories/Charts.stories.tsx
+++ b/src/stories/Charts.stories.tsx
@@ -1,12 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { PieChart, GanttChart, ScatterplotMatrix, StackedBarChart } from '@/components/charts';
-
-import {
-  generateMockWorkflowRunData,
-  groupBySubjectAndCount,
-} from '@/api/_mock/mockWorkflowRunData';
-import { workflowTypeData } from '@/api/_mock/mockSeedData';
-import { scatterPlotData } from '@/api/_mock/mockScatterPlotData';
+import { generateMockWorkflowRunData, groupBySubjectAndCount } from './_mock/mockWorkflowRunData';
+import { workflowTypeData } from './_mock/mockSeedData';
+import { scatterPlotData } from './_mock/mockScatterPlotData';
 
 const ganttData = generateMockWorkflowRunData();
 
diff --git a/src/stories/Diagram.stories.tsx b/src/stories/Diagram.stories.tsx
index cae3f80..58fa8ca 100644
--- a/src/stories/Diagram.stories.tsx
+++ b/src/stories/Diagram.stories.tsx
@@ -1,6 +1,6 @@
 import { WorkflowDiagram } from '@/components/diagrams';
 import type { Meta, StoryObj } from '@storybook/react';
-import { mockStatusData } from '@/api/_mock/mockWorkflowStatusData';
+import { mockStatusData } from './_mock/mockWorkflowStatusData';
 
 const meta: Meta = {
   title: 'Components/Diagrams',
diff --git a/src/api/_mock/mockScatterPlotData.ts b/src/stories/_mock/mockScatterPlotData.ts
similarity index 99%
rename from src/api/_mock/mockScatterPlotData.ts
rename to src/stories/_mock/mockScatterPlotData.ts
index 2e43259..2fe5dd3 100644
--- a/src/api/_mock/mockScatterPlotData.ts
+++ b/src/stories/_mock/mockScatterPlotData.ts
@@ -1,3 +1,6 @@
+interface ScatterPlotData {
+  [name: string]: string | number | null;
+}
 export const columns = [
   'species',
   'island',
@@ -8,7 +11,7 @@ export const columns = [
   'sex',
 ];
 
-export const scatterPlotData = [
+export const scatterPlotData: ScatterPlotData[] = [
   {
     species: 'Adelie',
     island: 'Torgersen',
diff --git a/src/api/_mock/mockSeedData.ts b/src/stories/_mock/mockSeedData.ts
similarity index 100%
rename from src/api/_mock/mockSeedData.ts
rename to src/stories/_mock/mockSeedData.ts
diff --git a/src/stories/_mock/mockWorkflowData.ts b/src/stories/_mock/mockWorkflowData.ts
new file mode 100644
index 0000000..57a3dc3
--- /dev/null
+++ b/src/stories/_mock/mockWorkflowData.ts
@@ -0,0 +1,5 @@
+interface TaskInput {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [key: string]: any;
+}
+export const mockWorkflowData: Record<string, TaskInput[]> = {};
diff --git a/src/api/_mock/mockWorkflowRunData.ts b/src/stories/_mock/mockWorkflowRunData.ts
similarity index 89%
rename from src/api/_mock/mockWorkflowRunData.ts
rename to src/stories/_mock/mockWorkflowRunData.ts
index 03492b5..5b22826 100644
--- a/src/api/_mock/mockWorkflowRunData.ts
+++ b/src/stories/_mock/mockWorkflowRunData.ts
@@ -41,7 +41,7 @@ interface TaskOutput {
   taskName: string;
   libraryIds: string[];
   endStatus: string;
-  subjectId?: string;
+  subjectId: string;
 }
 
 const extractAnchorText = (htmlString: string): string => {
@@ -82,16 +82,21 @@ const groupTasksByPortalRunId = (tasks: any[]) => {
 //   endStatus: string;
 // }
 
+interface TaskInput {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [key: string]: any;
+}
+
 interface TaskRunData {
   [taskName: string]: TaskOutput[];
 }
 
 export const generateMockWorkflowRunData = () => {
-  const tasksData = { ...mockWorkflowData };
+  const tasksData: { [key: string]: TaskInput[] } = { ...mockWorkflowData };
   Object.keys(tasksData).forEach((key) => {
     tasksData[key] = groupTasksByPortalRunId(tasksData[key]);
   });
-  return tasksData as unknown as TaskRunData;
+  return tasksData as TaskRunData;
 };
 
 // Assuming the file exports mockData array
@@ -108,6 +113,9 @@ export function groupBySubjectAndCount(): SubjectWorkflowCount {
   const result: SubjectWorkflowCount = {};
 
   Object.keys(mockWorkflowData).forEach((workflowType) => {
+    console.log(`Processing workflow type: ${workflowType}`);
+    console.log(`Data for workflow:`, mockWorkflowData[workflowType]);
+
     mockWorkflowData[workflowType].forEach((item) => {
       const subjectID = extractAnchorText(item.SubjectID);
 
@@ -125,15 +133,3 @@ export function groupBySubjectAndCount(): SubjectWorkflowCount {
   console.log(result);
   return result;
 }
-
-//{
-//   SBJ05554: {
-//     bcl_convert: 2,
-//     wgs_alignment_qc: 1,
-//   },
-//   SBJ05555: {
-//     bcl_convert: 1,
-//     wgs_alignment_qc: 3,
-//   },
-//   // More subjects...
-// }
diff --git a/src/api/_mock/mockWorkflowStatusData.ts b/src/stories/_mock/mockWorkflowStatusData.ts
similarity index 100%
rename from src/api/_mock/mockWorkflowStatusData.ts
rename to src/stories/_mock/mockWorkflowStatusData.ts

From f0e030c325605f7b88d41c1badeba97f18fadbd8 Mon Sep 17 00:00:00 2001
From: Ray Liu <ray.liu@umccr.org>
Date: Thu, 12 Dec 2024 14:39:38 +1100
Subject: [PATCH 5/5] add deprecated state in the rerun logic

---
 .../workflowRuns/WorkflowRunDetailsTable.tsx  |  36 +++++-
 .../workflowRuns/WorkflowRunTimeline.tsx      | 117 ++++++++----------
 2 files changed, 89 insertions(+), 64 deletions(-)

diff --git a/src/modules/runs/components/workflowRuns/WorkflowRunDetailsTable.tsx b/src/modules/runs/components/workflowRuns/WorkflowRunDetailsTable.tsx
index 2cf142d..26aef02 100644
--- a/src/modules/runs/components/workflowRuns/WorkflowRunDetailsTable.tsx
+++ b/src/modules/runs/components/workflowRuns/WorkflowRunDetailsTable.tsx
@@ -4,6 +4,7 @@ import {
   useWorkflowRunDetailModel,
   useWorkflowRunRerunValidateModel,
   useWorkflowRunRerunModel,
+  useWorkflowRunStateCreateModel,
 } from '@/api/workflow';
 import { JsonToList } from '@/components/common/json-to-table';
 import { Table } from '@/components/tables';
@@ -15,8 +16,10 @@ import { Dialog } from '@/components/dialogs';
 import { ArrowPathIcon } from '@heroicons/react/24/outline';
 import { useWorkflowRunContext } from './WorkflowRunContext';
 import { Checkbox } from '@/components/common/checkbox';
+import { useAuthContext } from '@/context/AmplifyAuthContext';
 
 const WorkflowRunDetailsTable = () => {
+  const { user } = useAuthContext();
   const { orcabusId } = useParams();
   const [isOpenRerunWorkflowDialog, setIsOpenRerunWorkflowDialog] = useState<boolean>(false);
   const { setRefreshWorkflowRuns } = useWorkflowRunContext();
@@ -79,11 +82,13 @@ const WorkflowRunDetailsTable = () => {
 
   const handleRerunWorkflow = () => {
     rerunWorkflow();
+    if (isDeprecated) {
+      handleMarkAsDeprecated();
+    }
     setIsOpenRerunWorkflowDialog(false);
   };
 
   useEffect(() => {
-    console.log('isRerunWorkflowSuccess', isRerunWorkflowSuccess);
     if (isRerunWorkflowSuccess) {
       toaster.success({ title: 'Workflow rerun successfully' });
       setIsOpenRerunWorkflowDialog(false);
@@ -101,6 +106,35 @@ const WorkflowRunDetailsTable = () => {
     }
   }, [isRerunWorkflowSuccess, isErrorRerunWorkflow, resetRerunWorkflow, setRefreshWorkflowRuns]);
 
+  const {
+    mutate: createWorkflowRunState,
+    isSuccess: isCreatedWorkflowRunState,
+    isError: isErrorCreatingWorkflowRunState,
+    reset: resetCreateWorkflowRunState,
+  } = useWorkflowRunStateCreateModel({
+    params: { path: { orcabusId: orcabusId?.split('.')[1] as string } },
+    body: {
+      status: 'DEPRECATED',
+      comment: 'Workflow run marked as DEPRECATED as rerun this workflow',
+      createdBy: user?.email,
+    },
+  });
+
+  const handleMarkAsDeprecated = () => {
+    createWorkflowRunState();
+  };
+
+  useEffect(() => {
+    if (isCreatedWorkflowRunState) {
+      toaster.success({ title: 'Workflow run marked as DEPRECATED' });
+      resetCreateWorkflowRunState();
+    }
+    if (isErrorCreatingWorkflowRunState) {
+      toaster.error({ title: 'Error marking workflow run as DEPRECATED' });
+      resetCreateWorkflowRunState();
+    }
+  }, [isCreatedWorkflowRunState, resetCreateWorkflowRunState, isErrorCreatingWorkflowRunState]);
+
   const librariesTableData = useMemo(
     () =>
       workflowRunDetail && workflowRunDetail.libraries.length > 0
diff --git a/src/modules/runs/components/workflowRuns/WorkflowRunTimeline.tsx b/src/modules/runs/components/workflowRuns/WorkflowRunTimeline.tsx
index dc23d51..5d8c7e6 100644
--- a/src/modules/runs/components/workflowRuns/WorkflowRunTimeline.tsx
+++ b/src/modules/runs/components/workflowRuns/WorkflowRunTimeline.tsx
@@ -54,12 +54,6 @@ const WorkflowRunTimeline = () => {
 
   const [isReverseOrder, setIsReverseOrder] = useState<boolean>(false);
 
-  // we are now support multiple state creation, not only for resolved state
-  // so we need change resolved to add a new state type to the state timeline
-  //  valid_states_map = {
-  //     'RESOLVED': ['FAILED'],
-  //     'DEPRECATED': ['SUCCEEDED']
-  // }
   const [isOpenAddStateDialog, setIsOpenAddStateDialog] = useState<boolean>(false);
   const [stateStatus, setStateStatus] = useState<string | null>(null);
   const [isOpenUpdateStateDialog, setIsOpenUpdateStateDialog] = useState<boolean>(false);
@@ -104,10 +98,7 @@ const WorkflowRunTimeline = () => {
 
   const workflowLastState = workflowStateData?.[workflowStateData.length - 1]?.status;
 
-  //  valid_states_map = {
-  //     'RESOLVED': ['FAILED'],
-  //     'DEPRECATED': ['SUCCEEDED']
-  // }
+  // check if the last state is valid for state creation
   const isValidCreateState = Object.entries(workflowRunStateValidMapData || {}).some(([, value]) =>
     (value as string[]).includes(workflowLastState || '')
   );
@@ -120,43 +111,41 @@ const WorkflowRunTimeline = () => {
   const workflowStateTimelineData = useMemo(
     () =>
       workflowStateData
-        ? workflowStateData
-            .map((state) => ({
-              id: state.orcabusId,
-              content: (
-                <div className='flex flex-row gap-2 text-sm text-gray-500 group'>
-                  <div>Status Updated</div>
-                  <Badge status={state.status}>{state.status}</Badge>
-                  {Object.keys(workflowRunStateValidMapData || {}).includes(state.status) && (
-                    <div className='opacity-0 group-hover:opacity-100'>
-                      <Tooltip
-                        text='Update the Resolved Event Comment'
-                        position='top'
-                        background='white'
-                      >
-                        <WrenchIcon
-                          className='w-4 h-4 cursor-pointer stroke-gray-500'
-                          onClick={() => {
-                            setStateId(state.orcabusId);
-                            setStateComment(state.comment || '');
-                            setIsOpenUpdateStateDialog(true);
-                          }}
-                        />
-                      </Tooltip>
-                    </div>
-                  )}
-                </div>
-              ),
-              datetime: dayjs(state.timestamp).format('YYYY-MM-DD HH:mm'),
-              comment: state.comment || '',
-              status: state.status,
-              iconBackground: statusBackgroundColor(getBadgeType(state.status)),
-              payloadId: state?.payload || '',
-              eventType: 'stateChange' as const,
-            }))
-            .reverse()
+        ? workflowStateData.map((state) => ({
+            id: state.orcabusId,
+            content: (
+              <div className='flex flex-row gap-2 text-sm text-gray-500 group'>
+                <div>Status Updated</div>
+                <Badge status={state.status}>{state.status}</Badge>
+                {Object.keys(workflowRunStateValidMapData || {}).includes(state.status) && (
+                  <div className='opacity-0 group-hover:opacity-100'>
+                    <Tooltip
+                      text='Update the Resolved Event Comment'
+                      position='top'
+                      background='white'
+                    >
+                      <WrenchIcon
+                        className='w-4 h-4 cursor-pointer stroke-gray-500'
+                        onClick={() => {
+                          setStateId(state.orcabusId);
+                          setStateComment(state.comment || '');
+                          setIsOpenUpdateStateDialog(true);
+                        }}
+                      />
+                    </Tooltip>
+                  </div>
+                )}
+              </div>
+            ),
+            datetime: dayjs(state.timestamp).format('YYYY-MM-DD HH:mm'),
+            comment: state.comment || '',
+            status: state.status,
+            iconBackground: statusBackgroundColor(getBadgeType(state.status)),
+            payloadId: state?.payload || '',
+            eventType: 'stateChange' as const,
+          }))
         : [],
-    [workflowStateData]
+    [workflowStateData, workflowRunStateValidMapData]
   );
   const workflowCommentTimelineData = useMemo(
     () =>
@@ -270,7 +259,7 @@ const WorkflowRunTimeline = () => {
   } = useWorkflowRunStateCreateModel({
     params: { path: { orcabusId: orcabusId?.split('.')[1] as string } },
     body: {
-      status: validState,
+      status: stateStatus,
       comment: stateComment,
       createdBy: user?.email,
     },
@@ -433,8 +422,6 @@ const WorkflowRunTimeline = () => {
     isErrorUpdatingWorkflowRunState,
   ]);
 
-  console.log(validState);
-
   return (
     <div>
       {(isFetchingWorkflowState || isFetchingWorkflowComment) && (
@@ -443,17 +430,21 @@ const WorkflowRunTimeline = () => {
       <div className='flex flex-row pb-4'>
         <div className='flex-1'>
           <div className='pb-4 flex flex-col gap-2'>
-            <div className='flex flex-row gap-2 items-center'>
-              <div className='text-base font-semibold '>Timeline</div>
-              <Tooltip text='Reverse order' position='top' background='white'>
-                {/* TODO: toggle reverse order */}
-                <ArrowsUpDownIcon
-                  className='w-4 h-4 cursor-pointer stroke-gray-500'
-                  onClick={() => {
-                    setIsReverseOrder(!isReverseOrder);
-                  }}
-                />
-              </Tooltip>
+            <div className='flex items-center gap-3'>
+              <h2 className='text-lg font-semibold text-gray-900'>Timeline</h2>
+              <div className='flex items-center gap-1'>
+                <span className='text-sm text-gray-500'>
+                  {workflowRuntimelineData.length} events
+                </span>
+                <span className='text-sm text-gray-400'>•</span>
+                <button
+                  onClick={() => setIsReverseOrder(!isReverseOrder)}
+                  className='inline-flex items-center gap-1.5 text-sm text-gray-600 hover:text-gray-900 transition-colors'
+                >
+                  <ArrowsUpDownIcon className='w-4 h-4' />
+                  <span>{isReverseOrder ? 'Oldest First' : 'Latest First'}</span>
+                </button>
+              </div>
             </div>
 
             <div className='flex flex-row gap-2 items-end'>
@@ -607,6 +598,7 @@ const WorkflowRunTimeline = () => {
             onClose={() => {
               setIsOpenAddStateDialog(false);
               setStateComment('');
+              setStateStatus(null);
             }}
             closeBtn={{
               label: 'Close',
@@ -743,15 +735,14 @@ const WorkflowRunTimeline = () => {
                     value={stateComment}
                     onChange={(e) => setStateComment(e.target.value)}
                     placeholder='Write your state comment here...'
-                    className='min-h-[120px] w-full rounded-lg border border-gray-300 shadow-sm 
-           focus:border-blue-500 focus:ring-blue-500 
-           text-sm text-gray-900 p-3'
+                    className='min-h-[120px] w-full rounded-lg border border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm text-gray-900 p-3'
                   />
                 </div>
               </div>
             }
             onClose={() => {
               setIsOpenUpdateStateDialog(false);
+              setStateComment('');
             }}
             confirmBtn={{ label: 'Update State', onClick: handleUpdateState }}
           ></Dialog>