labels

Pixilib · Oct 9, 2024 · 23fc1fa · 23fc1fa
1 parent a2cdbd0
commit 23fc1fa
Show file tree

Hide file tree

Showing 6 changed files with 136 additions and 32 deletions.
diff --git a/src/content/ContentRoot.tsx b/src/content/ContentRoot.tsx
@@ -26,7 +26,9 @@ import {
 } from "../utils/actionsUtils";
 import { Colors } from "../utils";
 import AnonIcon from "../assets/Anon.svg?react";
-import { Export, Label as LabelIcon, Trash } from "../icons";
+import { Export } from "../icons";
+import Labels from "./Labels";
+
 
 const ContentRoot: React.FC = () => {
     const { confirm } = useConfirm();
@@ -37,6 +39,7 @@ const ContentRoot: React.FC = () => {
     const [queryPayload, setQueryPayload] = useState<QueryPayload | null>(null);
     const [editingPatient, setEditingPatient] = useState<Patient | null>(null);
 
+
     const patients = useMemo(() => model?.getPatients() || [], [model]);
 
     const handleDeletePatient = async (patient: Patient) => {
@@ -113,8 +116,8 @@ const ContentRoot: React.FC = () => {
     };
 
     const handleStudySelectedChange = (changeObject) => {
-        setSelectedStudies(changeObject)
-    }
+        setSelectedStudies(changeObject);
+    };
 
     const refreshFind = () => queryPayload && mutateToolsFind(queryPayload);
 
@@ -143,7 +146,7 @@ const ContentRoot: React.FC = () => {
                 patient={editingPatient as Patient}
                 onEditPatient={handlePatientUpdate}
                 onClose={closeEditModal}
-                show={editingPatient != null}
+                show={!!editingPatient}
             />
             <FormCard className="bg-white" title="Search" collapsible>
                 <SearchForm onSubmit={handleSubmit} existingLabels={labelsData} withAets={false} />
@@ -161,6 +164,7 @@ const ContentRoot: React.FC = () => {
 
                 <div className="flex flex-wrap gap-2 mb-4">
                     <Button
+                        color={Colors.primary}
                         className="flex items-center text-sm transition-transform duration-200 bg-blue-700 hover:scale-105"
                         onClick={handleSendAnonymizeList}
                     >
@@ -182,39 +186,30 @@ const ContentRoot: React.FC = () => {
                         className="flex items-center text-sm transition-transform duration-200 hover:scale-105"
                         onClick={handleSendDeleteList}
                     >
-                        <Trash className="text-xl" />
+                        <Export className="text-xl" />
                         <span className="ml-2">Send to Delete</span>
                     </Button>
 
-                    <Button
-                        color={Colors.primary}
-                        className="flex items-center text-sm transition-transform duration-200 hover:scale-105"
-                        onClick={handleSendDeleteList}
-                    >
-                        <LabelIcon className="text-xl" />
-                        <span className="ml-2">Labels</span>
-                    </Button>
+                    <Labels selectedStudies={selectedStudies} />
 
                 </div>
             </div>
 
-            <div className="w-full mt-4">
-                {isPending ? (
-                    <Spinner />
-                ) : (
-                    patients.map((patient: Patient) => (
+            <div className="flex flex-col w-full gap-4">
+                {patients.length > 0 ? (
+                    patients.map((patient) => (
                         <AccordionPatient
                             key={patient.id}
                             patient={patient}
                             onPatientSelectionChange={handlePatientSelectionChange}
                             onDeletePatient={handleDeletePatient}
-                            onEditPatient={(patient) => setEditingPatient(patient)}
+                            onEditPatient={setEditingPatient}
                             onStudyUpdated={refreshFind}
                             selectedStudies={selectedStudies}
                             onSelectedStudyChange={handleStudySelectedChange}
                         />
                     ))
-                )}
+                ) : null}
             </div>
         </div>
     );

diff --git a/src/content/Labels.tsx b/src/content/Labels.tsx
@@ -0,0 +1,90 @@
+import { useMemo, useState } from "react";
+import { Button } from "../ui";
+import { Add, Cancel, Label } from "../icons";
+import ToggleChevron from "../ui/menu/ToogleChevron";
+import { Colors, useCustomMutation } from "../utils";
+import SelectLabels from "../datasets/SelectLabels";
+import { useQueries } from "@tanstack/react-query";
+import { addLabelForStudy, removeLabelForStudy } from "../services/orthanc";
+
+type LabelProps = {
+    selectedStudies: { [studyId: string]: boolean };
+}
+const Labels = ({ selectedStudies }: LabelProps) => {
+
+    const [isLabelDropdownOpen, setIsLabelDropdownOpen] = useState(false);
+    const [selectedLabels, setSelectedLabels] = useState<string[]>([]);
+
+    const { mutateAsync: addMutate } = useCustomMutation(
+        ({ studyId, label }) => addLabelForStudy(studyId, label)
+    )
+
+    const { mutateAsync: deleteMutate } = useCustomMutation(
+        ({ studyId, label }) => removeLabelForStudy(studyId, label)
+    )
+
+    const selectedStudiesId = useMemo(() => {
+        return Object.entries(selectedStudies)?.filter(([id, status]) => status === true).map(([id, status]) => id)
+    }, [selectedStudies])
+
+    const handleAddLabels = async () => {
+        for (const studyId of selectedStudiesId) {
+            for (const label of selectedLabels) {
+                await addMutate({ studyId, label })
+            }
+        }
+    };
+
+    const handleRemoveLabels = async () => {
+        for (const studyId of selectedStudiesId) {
+            for (const label of selectedLabels) {
+                await deleteMutate({ studyId, label })
+            }
+
+        }
+    };
+
+    return (
+        <div className="flex items-center gap-3">
+            <Button
+                color={Colors.primary}
+                className="flex items-center text-sm transition-transform duration-200 hover:scale-105"
+                onClick={() => setIsLabelDropdownOpen(!isLabelDropdownOpen)}
+            >
+                <Label className="text-xl" />
+                <span className="ml-2">Assign Labels</span>
+                <ToggleChevron
+                    isOpen={isLabelDropdownOpen}
+                    className="ml-2" />
+            </Button>
+            {
+                isLabelDropdownOpen && (
+                    <div className="flex gap-3">
+
+                        <div className="flex items-center gap-3">
+                            <SelectLabels
+                                values={selectedLabels}
+                                onChange={setSelectedLabels}
+                            />
+                            <Add
+                                className="cursor-pointer text-primary hover:text-success-hover"
+                                onClick={handleAddLabels}
+                            />
+                            <Cancel
+                                className="cursor-pointer"
+                                onClick={handleRemoveLabels}
+                            />
+                        </div>
+                        <div className="flex justify-start mt-2">
+                            <span>Apply to {selectedStudiesId.length} studies</span>
+                        </div>
+                    </div>
+
+                )
+
+            }
+        </div>)
+
+}
+
+export default Labels
diff --git a/src/content/studies/LabelModal.tsx b/src/content/studies/LabelModal.tsx
@@ -43,7 +43,9 @@ const LabelModal: React.FC<LabelModalProps> = ({ studyId, onClose, show }) => {
         <Modal show={show} size='lg'>
             <Modal.Header onClose={onClose}>Assign Labels</Modal.Header>
             <Modal.Body>
-                <SelectLabels values={existingLabelsOptions} onChange={handleLabelChanges} />
+                <SelectLabels 
+                values={existingLabelsOptions} 
+                onChange={handleLabelChanges} />
                 <p>{studyId}</p>
             </Modal.Body>
         </Modal>

diff --git a/src/icons/Add.tsx b/src/icons/Add.tsx
@@ -1,10 +1,18 @@
-
 import { FaPlus } from 'react-icons/fa';
 
-const Add = (props) => {
+type AddProps = {
+    className?: string
+    [key: string]: any
+}
+const Add = ({ className = '', ...props }: AddProps) => {
+
     return (
-        <FaPlus {...props} />
-    )
+        <FaPlus
+            className={`transition-transform duration-200 hover:transform hover:scale-125 ${className}`}
+            aria-label="Add"
+            {...props}
+        />
+    );
 }
 
-export default Add
+export default Add;
diff --git a/src/icons/Cancel.tsx b/src/icons/Cancel.tsx
@@ -1,9 +1,18 @@
 import { FaTimes } from "react-icons/fa";
 
-const Cancel = (props) => {
+type CancelProps = {
+    className? : string
+    [key : string] : any
+}
+const Cancel = ({className, ...props } : CancelProps) => {
+
     return (
-        <FaTimes {...props} />
-    )
+        <FaTimes
+            className={`transition-transform duration-200 hover:text-danger-hover text-danger hover:transform hover:scale-125 ${className}`}
+            {...props}
+
+        />
+    );
 }
 
-export default Cancel
+export default Cancel;
diff --git a/src/ui/SelectInput.tsx b/src/ui/SelectInput.tsx
@@ -22,13 +22,13 @@ interface SelectInputProps {
 const customClass: ClassNamesConfig<OptionType, boolean> = {
   control: (state) => {
     const borderRadius = state.selectProps.rounded ? 'rounded-3xl' : 'rounded-xl';
-    return `border border-gray-300 min-h-[48px] bg-white ${borderRadius} focus:border-blue-500 hover:border-blue-500`;
+    return `border border-gray-300 min-h-[48px] bg-white ${borderRadius} focus:border-primary hover:border-blue-500`;
   },
   menu: (state) => {
     return 'rounded-3xl p-2 bg-white';
   },
   option: (state) => {
-    return `rounded-lg p-3 ${state.isSelected ? ' text-white' : 'bg-white text-gray-800'} hover:bg-blue-500 hover:text-white`;
+    return `rounded-lg p-3 ${state.isSelected ? ' text-white' : 'bg-white text-gray-800'} hover:bg-primary hover:text-white`;
   },
   multiValue: () => 'bg-gray-200 rounded-3xl px-2 py-1',
   multiValueLabel: () => 'text-gray-800',