Merge remote-tracking branch 'origin/Preview' into dev

Author: salimkanoun

package-lock.json

@@ -0,0 +1,28 @@
+import { previewInstance } from "../../services/instances"
+import { useCustomQuery } from "../../utils"
+
+type PreviewInstanceProps = {
+    instanceUID: string
+}
+const PreviewInstance = ({ instanceUID }: PreviewInstanceProps) => {
+
+    const { data } = useCustomQuery<any, string>(
+        ['instances', instanceUID, 'preview'],
+        () => previewInstance(instanceUID),
+        {
+            select: (data: any) => {
+                return URL.createObjectURL(data);
+            },
+            staleTime : 100000,
+            gcTime : 100000
+        }
+
+    )
+
+    return (
+        <img className="w-full h-full" src={data}/>
+    )
+
+}
+
+export default PreviewInstance

src/content/series/PreviewInstance.tsx

@@ -0,0 +1,108 @@
+/**
+ * Component for a modal to preview a series
+ * @name PreviewSeries
+ */
+
+import React, { ChangeEvent, useMemo, useState } from "react";
+import { getInstancesOfSeries } from "../../services/orthanc";
+import { useCustomQuery } from "../../utils";
+
+import { Input, Modal, Spinner } from "../../ui";
+import PreviewInstance from "./PreviewInstance";
+import { Instances } from "../../utils/types";
+
+type PreviewSeriesProps = {
+    seriesId: string;
+    onClose: () => void;
+    show: boolean;
+}
+
+const PreviewSeries: React.FC<PreviewSeriesProps> = ({ seriesId, onClose, show }) => {
+
+    const [rows, setRows] = useState(1)
+    const [columns, setColumns] = useState(3)
+
+    const [imageIndex, setImageIndex] = useState(0)
+
+    const pageSize = useMemo(() => {
+        return rows * columns
+    }, [rows, columns])
+
+    const { data: instanceUIDs, isLoading } = useCustomQuery(
+        ['series', seriesId, 'instances'],
+        () => getInstancesOfSeries(seriesId),
+        {
+            select: (instances: Instances[]) => {
+                return instances.sort((a, b) => a.indexInSeries - b.indexInSeries)
+            }
+        }
+    )
+
+    const selectedInstanceUIDs = useMemo(() => {
+        if (!instanceUIDs) return null
+        const start = Math.max(imageIndex, 0)
+        const end = Math.min(start + (pageSize - 1), instanceUIDs.length - 1)
+        console.log(start, end)
+        const selectedUIDs = []
+        for (let i = start; i <= end; i++) {
+            selectedUIDs.push(instanceUIDs[i])
+        }
+
+        return selectedUIDs
+
+    }, [pageSize, imageIndex, instanceUIDs])
+
+    if (isLoading) return <Spinner />
+
+    const handleColumnChange = (event: ChangeEvent<HTMLInputElement>) => {
+        setColumns(Number(event.target.value));
+    };
+
+    const handleRowChange = (event: ChangeEvent<HTMLInputElement>) => {
+        setRows(Number(event.target.value));
+    };
+
+    return (
+        <Modal show={show} size='xl'>
+            <Modal.Header onClose={onClose} >
+                <Modal.Title>Preview Series</Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+                <div className={"flex w-full h-full"} style={{ display: 'grid', gridTemplateColumns: `repeat(${columns}, 1fr)`, gridTemplateRows: `repeat(${rows}, 1fr)` }}>
+                    {
+                        selectedInstanceUIDs?.map((instance: Instances) => {
+                            return <PreviewInstance key={instance.id} instanceUID={instance.id} />
+                        })
+                    }
+                </div>
+                <input className="w-full" type="range" value={imageIndex} min={0} max={(instanceUIDs?.length ?? 1) - 1} onChange={(event: ChangeEvent<HTMLInputElement>) => setImageIndex(Number(event.target.value))} />
+                <div className={"flex w-full justify-center"}>
+                    <div className="flex gap-3">
+                        <Input
+                            label="Columns :"
+                            type="number"
+                            id="number"
+                            name="columns"
+                            min={0}
+                            max={10}
+                            value={columns}
+                            onChange={handleColumnChange}
+                        />
+                        <Input
+                            label="Rows :"
+                            type="number"
+                            id="number"
+                            name="rows"
+                            min={1}
+                            max={10}
+                            value={rows}
+                            onChange={handleRowChange}
+                        />
+                    </div>
+                </div>
+            </Modal.Body>
+        </Modal>
+    );
+};
+
+export default PreviewSeries;

src/content/series/PreviewSeries.tsx

@@ -1,6 +1,6 @@
 // SeriesActions.tsx
 import React from 'react';
-import { FaEdit, FaTrash } from "react-icons/fa";
+import { FaEdit, FaEye, FaTrash } from "react-icons/fa";
 import { Series } from "../../utils/types";
 import DropdownButton from '../../ui/menu/DropDownButton';
 
@@ -23,6 +23,12 @@ const SeriesActions: React.FC<SeriesActionsProps> = ({ series, onActionClick })
             color: 'red',
             action: () => onActionClick('delete', series)
         },
+        {
+            label: 'Preview Series',
+            icon: <FaEye />,
+            color: 'green',
+            action: () => onActionClick('preview', series),
+        },
     ];
 
     const handleClick = (e: React.MouseEvent) => {

src/content/series/SeriesActions.tsx

@@ -8,6 +8,7 @@ import { getSeriesOfStudy, deleteSeries } from '../../services/orthanc';
 import { Series } from '../../utils/types';
 import SeriesTable from './SeriesTable';
 import EditSeries from './EditSeries';
+import PreviewSeries from './PreviewSeries';
 import { useConfirm } from '../../services/ConfirmContextProvider';
 import { useCustomToast } from '../../utils/toastify';
 import { Spinner } from '../../ui';
@@ -18,6 +19,7 @@ interface SeriesRootProps {
 
 const SeriesRoot: React.FC<SeriesRootProps> = ({ studyId }) => {
   const [editingSeries, setEditingSeries] = useState<Series | null>(null);
+  const [previewSeries, setPreviewSeries] = useState<Series | null>(null);
 
   const { confirm } = useConfirm();
   const { toastSuccess, toastError } = useCustomToast();
@@ -49,6 +51,10 @@ const SeriesRoot: React.FC<SeriesRootProps> = ({ studyId }) => {
     setEditingSeries(series);
   };
 
+  const handlePreviewSeries = (series: Series) => {
+    setPreviewSeries(series);
+  }
+
   const handleDeleteSeries = async (seriesId: string) => {
     const confirmContent = (
       <div className="italic">
@@ -70,6 +76,9 @@ const SeriesRoot: React.FC<SeriesRootProps> = ({ studyId }) => {
       case 'delete':
         handleDeleteSeries(series.id);
         break;
+      case 'preview':
+        handlePreviewSeries(series);
+        break;
       default:
         console.log(`Unhandled action: ${action}`);
     }
@@ -100,6 +109,13 @@ const SeriesRoot: React.FC<SeriesRootProps> = ({ studyId }) => {
           show={!!editingSeries}
         />
       )}
+      {previewSeries && (
+        <PreviewSeries
+          seriesId={previewSeries.id}
+          onClose={() => setPreviewSeries(null)}
+          show={!!previewSeries}
+          />
+      )}
     </div>
   );
 };

src/content/series/SeriesRoot.tsx

@@ -1,6 +1,6 @@
 // StudyActions.tsx
 import React from 'react';
-import { FaEdit, FaTrash } from "react-icons/fa";
+import { FaEdit, FaEye, FaTrash } from "react-icons/fa";
 import { StudyMainDicomTags } from "../../utils/types";
 import DropdownButton from '../../ui/menu/DropDownButton';
 
@@ -23,6 +23,12 @@ const StudyActions: React.FC<StudyActionsProps> = ({ study, onActionClick }) =>
             color: 'red',
             action: () => onActionClick('delete', study.id)
         },
+        {
+            label: 'Preview Study',
+            icon: <FaEye />,
+            color: 'green',
+            action: () => onActionClick('preview', study.id)
+        },
     ];
 
     const handleClick = (e: React.MouseEvent) => {

src/content/studies/PreviewStudy.tsx

@@ -3,6 +3,7 @@ import { useCustomMutation } from '../../utils/reactQuery';
 import { deleteStudy } from '../../services/orthanc';
 import StudyTable from './StudyTable';
 import EditStudy from './EditStudy';
+// import PreviewStudy from './PreviewStudy';
 import { useConfirm } from '../../services/ConfirmContextProvider';
 import { useCustomToast } from '../../utils/toastify';
 import Patient from '../../model/Patient';
@@ -13,9 +14,9 @@ type StudyRootProps = {
     onStudySelected?: (studyId: string) => void;
 }
 
-const StudyRoot: React.FC<StudyRootProps> = ({ patient, onStudyUpdated, onStudySelected}) => {
+const StudyRoot: React.FC<StudyRootProps> = ({ patient, onStudyUpdated, onStudySelected }) => {
     const [editingStudy, setEditingStudy] = useState<string | null>(null);
-   
+
     const { confirm } = useConfirm();
     const { toastSuccess, toastError } = useCustomToast();
 
@@ -33,11 +34,11 @@ const StudyRoot: React.FC<StudyRootProps> = ({ patient, onStudyUpdated, onStudyS
                 onStudyUpdated();
             },
             onError: (error: any) => {
-                toastError('Failed to delete study: ' + error); 
+                toastError('Failed to delete study: ' + error);
             },
         }
     );
-   
+
     const handleRowClick = (studyId: string) => {
         onStudySelected && onStudySelected(studyId);
     }
@@ -49,7 +50,7 @@ const StudyRoot: React.FC<StudyRootProps> = ({ patient, onStudyUpdated, onStudyS
                 <span className="text-xl not-italic font-bold text-primary">{studyId} ?</span>
             </div>
         );
-        if (await confirm({content: confirmContent})) {
+        if (await confirm({ content: confirmContent })) {
             mutateDeleteStudy({ id: studyId });
         }
     };
@@ -62,9 +63,12 @@ const StudyRoot: React.FC<StudyRootProps> = ({ patient, onStudyUpdated, onStudyS
             case 'delete':
                 handleDeleteStudy(studyId);
                 break;
+            case 'preview':
+                // handlePreviewStudy(studyId);
+                break;
             default:
                 break;
-            }
+        }
     };
 
 
@@ -87,6 +91,13 @@ const StudyRoot: React.FC<StudyRootProps> = ({ patient, onStudyUpdated, onStudyS
                     show={!!editingStudy}
                 />
             )}
+            {/* {previewStudy && (
+                <PreviewStudy
+                    studyId={previewStudy.id}
+                    onClose={() => setPreviewStudy(null)}
+                    show={!!previewStudy}
+                />
+            )} */}
         </div>
     );
 };

src/content/studies/StudyActions.tsx

@@ -34,4 +34,15 @@ export const createDicom = (content: string[], tags: object = {}, parentOrthancI
         }).catch(error => {
             console.error(error)
         })
+}
+
+
+export const previewInstance = (instanceUID : string) : Promise<any>=> {
+
+    return axios.get('/api/instances/'+instanceUID+'/preview',  {responseType : "blob"})
+        .then((response) => {
+            return response.data
+        }).catch(error => {
+            console.error(error)
+        })
 }

src/content/studies/StudyRoot.tsx

@@ -1,5 +1,5 @@
 import axios from "axios";
-import { Patient, Study, Series, PatientPayload, OrthancResponse, StudyPayload, SeriesPayload } from '../utils/types';
+import { Patient, Study, Series, PatientPayload, OrthancResponse, StudyPayload, SeriesPayload, Instances } from '../utils/types';
 
 export const getOrthancSystem = (): Promise<unknown> => {
   return axios.get("/api/system").then(response => response.data)
@@ -178,6 +178,39 @@ export const getSeriesOfStudy = (studyId: string): Promise<Series[]> => {
     });
 };
 
+export const getInstancesOfSeries = (seriesId: string) => {
+  return axios.get(`/api/series/${seriesId}/instances`)
+    .then((response: any): Instances[] => {
+      const mappedData = response.data.map((data: any) : Instances => ({
+        fileSize: data.FileSize,
+        fileUuid: data.FileUuid,
+        id: data.ID,
+        indexInSeries: data.IndexInSeries,
+        labels: data.Labels,
+        mainDicomTags: {
+          acquisitionNumber: data.MainDicomTags.AcquisitionNumber,
+          imageComments: data.MainDicomTags.ImageComments,
+          imageOrientationPatient: data.MainDicomTags.ImageOrientationPatient,
+          imagePositionPatient: data.MainDicomTags.ImagePositionPatient,
+          instanceCreationDate: data.MainDicomTags.InstanceCreationDate,
+          instanceCreationTime: data.MainDicomTags.InstanceCreationTime,
+          instanceNumber: data.MainDicomTags.InstanceNumber,
+          sopInstanceUID: data.MainDicomTags.SopInstanceUID
+        },
+        parentSeries: data.ParentSeries,
+        type: data.Type
+      }));
+      return mappedData;
+    }).catch((error: any) => {
+      if (error.response) {
+        console.error("Error response:", error.response);
+        throw error.response;
+      }
+      console.error("Error:", error);
+      throw error;
+    });
+}
+
 
 export const modifyPatient = (patientId: string, patient: PatientPayload): Promise<OrthancResponse> => {
   const patientPayloadUpdate = {
@@ -244,7 +277,7 @@ export const modifySeries = (seriesId: string, series: SeriesPayload): Promise<O
   const seriesPayloadUpdate = {
     Replace: {
       ImageOrientationPatient: series.replace.imageOrientationPatient,
-      Manufacturer : series.replace.manufacturer,
+      Manufacturer: series.replace.manufacturer,
       Modality: series.replace.modality,
       OperatorsName: series.replace.operatorsName,
       ProtocolName: series.replace.protocolName,
@@ -277,7 +310,7 @@ export const modifySeries = (seriesId: string, series: SeriesPayload): Promise<O
       throw error;
     });
 }
-      
+
 export const getPatient = (patientId: string): Promise<Patient> => {
   return axios.get("/api/patients/" + patientId)
     .then((response): Patient => {

src/services/instances.ts

@@ -1,8 +1,11 @@
 
 //! This is a basic spinner component , maybe needs to change later
-const Spinner = () => {
+type SpinnerProps = {
+  className? : string
+}
+const Spinner = ({className = ""} : SpinnerProps) => {
     return (
-      <div className="flex items-center justify-center">
+      <div className={"flex items-center justify-center"+ className}>
         <div className="size-16 animate-spin rounded-full border-b-2 border-primary bg-white"></div>
       </div>
     );