Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
@salimkanoun
salimkanoun committed Dec 10, 2024
1 parent f9178d7 commit 1de1963
Show file tree
Hide file tree
Showing 3 changed files with 302 additions and 122 deletions.
274 changes: 170 additions & 104 deletions src/autorouting/AutoRoutingRoot.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,118 +1,184 @@
import React, { useState, ChangeEvent } from 'react';
import { Input, SelectInput } from "../ui";
import React, { useState, ChangeEvent } from "react";
import { Input, SelectInput, Label } from "../ui";
import { AutoroutingEventType, AutoRoutingRule, Destination, RuleCondition } from "./types";

const AutoRoutingRoot = () => {
const [name, setName] = useState('');
const [eventType, setEventType] = useState([]);
const [isActivated, setIsActivated] = useState(false);
const [condition, setCondition] = useState('AND');
const [rule, setRule] = useState('value1');
const [destination, setDestination] = useState('value1');
const [name, setName] = useState<string>("");
const [eventType, setEventType] = useState<AutoroutingEventType|null>(null);
const [isActivated, setIsActivated] = useState(false);
const [condition, setCondition] = useState<RuleCondition>(RuleCondition.AND);
const [rules, setRules] = useState<AutoRoutingRule[]>("value1");
const [destinations, setDestinations] = useState<Destination[]>("value1");

const eventTypeOptions = [
{ label: 'NewInstance', value: 'NewInstance' },
{ label: 'NewSerie', value: 'NewSerie' },
{ label: 'NewStudies', value: 'NewStudies' },
{ label: 'NewPatient', value: 'NewPatient' }
];
const eventTypeOptions = [
{ label: "New Instance", value: AutoroutingEventType.NEW_INSTANCE },
{ label: "New Series", value: AutoroutingEventType.NEW_SERIES },
{ label: "New Study", value: AutoroutingEventType.NEW_STUDY },
{ label: "New Patient", value: AutoroutingEventType.NEW_PATIENT },
{ label: "Stable Series", value: AutoroutingEventType.STABLE_SERIES },
{ label: "Stable Study", value: AutoroutingEventType.STABLE_STUDY },
{ label: "Stable Patient", value: AutoroutingEventType.STABLE_PATIENT }
];

const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
setName(event.target.value);
};
const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
setName(event.target.value);
};

const handleEventTypeChange = (selectedOptions: any) => {
setEventType(selectedOptions);
};
const handleEventTypeChange = (selectedOptions: any) => {
setEventType(selectedOptions);
};

const handleSwitchChange = () => {
setIsActivated(!isActivated);
};
const handleSwitchChange = () => {
setIsActivated(!isActivated);
};

const handleConditionChange = (event: ChangeEvent<HTMLSelectElement>) => {
setCondition(event.target.value);
};
const handleConditionChange = (event: ChangeEvent<HTMLSelectElement>) => {
setCondition(event.target.value);
};

const handleRuleChange = (event: ChangeEvent<HTMLSelectElement>) => {
setRule(event.target.value);
};
const handleRuleChange = (event: ChangeEvent<HTMLSelectElement>) => {
setRules(event.target.value);
};

const handleDestinationChange = (event: ChangeEvent<HTMLSelectElement>) => {
setDestination(event.target.value);
};
const handleDestinationChange = (event: ChangeEvent<HTMLSelectElement>) => {
setDestinations(event.target.value);
};

const handleAddClick = () => {
const selectedLabels = eventType.map(option => option.label).join(', ');
alert(`Name: ${name}, Event Type: ${selectedLabels}, Activated: ${isActivated}, Condition: ${condition}, Rule: ${rule}, Destination: ${destination}`);
};

return (
<div style={{ padding: '20px', fontFamily: 'Arial, sans-serif', maxWidth: '600px', margin: 'auto', backgroundColor: '#f9f9f9', borderRadius: '8px', boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)' }}>
<label htmlFor="nameInput" style={{ display: 'block', marginBottom: '8px', fontWeight: 'bold' }}>Name: </label>
<Input
placeholder="Name"
value={name}
onChange={handleInputChange}
/>
<label htmlFor="eventTypeSelect" style={{ display: 'block', marginBottom: '8px', fontWeight: 'bold' }}>Event Type: </label>
<SelectInput
isMulti
value={eventType}
onChange={handleEventTypeChange}
options={eventTypeOptions}
placeholder="Select Label(s)"
aria-label="Labels"
/>
<label htmlFor="activatedSwitch" style={{ display: 'block', marginBottom: '8px', fontWeight: 'bold' }}>Activated: </label>
<input
id="activatedSwitch"
type="checkbox"
checked={isActivated}
onChange={handleSwitchChange}
style={{ marginBottom: '16px' }}
/>
<label htmlFor="conditionSelect" style={{ display: 'block', marginBottom: '8px', fontWeight: 'bold' }}>Condition: </label>
<select
id="conditionSelect"
value={condition}
onChange={handleConditionChange}
style={{ padding: '8px', width: '100%', marginBottom: '16px', border: '1px solid #ccc', borderRadius: '4px' }}
>
<option value="AND">AND</option>
<option value="OR">OR</option>
</select>
<label htmlFor="ruleSelect" style={{ display: 'block', marginBottom: '8px', fontWeight: 'bold' }}>Rule: </label>
<select
id="ruleSelect"
value={rule}
onChange={handleRuleChange}
style={{ padding: '8px', width: '100%', marginBottom: '16px', border: '1px solid #ccc', borderRadius: '4px' }}
>
<option value="value1">value1</option>
<option value="value2">value2</option>
<option value="value3">value3</option>
</select>
<label htmlFor="destinationSelect" style={{ display: 'block', marginBottom: '8px', fontWeight: 'bold' }}>Destination: </label>
<select
id="destinationSelect"
value={destination}
onChange={handleDestinationChange}
style={{ padding: '8px', width: '100%', marginBottom: '16px', border: '1px solid #ccc', borderRadius: '4px' }}
>
<option value="value1">value1</option>
<option value="value2">value2</option>
<option value="value3">value3</option>
</select>
<button
onClick={handleAddClick}
style={{ padding: '10px 20px', backgroundColor: '#007BFF', color: '#fff', border: 'none', borderRadius: '4px', cursor: 'pointer', fontWeight: 'bold' }}
>
Add
</button>
<p style={{ marginTop: '20px', color: '#333' }}>
Hello, {name || 'world'}! Selected event type: {eventType.map(option => option.label).join(', ')}. Activated: {isActivated ? 'Yes' : 'No'}. Condition: {condition}. Rule: {rule}. Destination: {destination}.
</p>
</div>
const handleAddClick = () => {
const selectedLabels = eventType.map((option) => option.label).join(", ");
alert(
`Name: ${name}, Event Type: ${selectedLabels}, Activated: ${isActivated}, Condition: ${condition}, Rule: ${rule}, Destination: ${destination}`
);
};

return (
<div
style={{
padding: "20px",
fontFamily: "Arial, sans-serif",
maxWidth: "600px",
margin: "auto",
backgroundColor: "#f9f9f9",
borderRadius: "8px",
boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
}}
>
<Input
label="Name : "
placeholder="Name"
value={name}
onChange={handleInputChange}
/>
<Label value="Event Type : " htmlFor="eventTypeSelect" />
<SelectInput
isMulti
name="eventTypeSelect"
value={eventType}
onChange={handleEventTypeChange}
options={eventTypeOptions}
placeholder="Select Label(s)"
aria-label="Labels"
/>
<label
htmlFor="activatedSwitch"
style={{ display: "block", marginBottom: "8px", fontWeight: "bold" }}
>
Activated:{" "}
</label>
<input
id="activatedSwitch"
type="checkbox"
checked={isActivated}
onChange={handleSwitchChange}
style={{ marginBottom: "16px" }}
/>
<label
htmlFor="conditionSelect"
style={{ display: "block", marginBottom: "8px", fontWeight: "bold" }}
>
Condition:{" "}
</label>
<select
id="conditionSelect"
value={condition}
onChange={handleConditionChange}
style={{
padding: "8px",
width: "100%",
marginBottom: "16px",
border: "1px solid #ccc",
borderRadius: "4px",
}}
>
<option value="AND">AND</option>
<option value="OR">OR</option>
</select>
<label
htmlFor="ruleSelect"
style={{ display: "block", marginBottom: "8px", fontWeight: "bold" }}
>
Rule:{" "}
</label>
<select
id="ruleSelect"
value={rule}
onChange={handleRuleChange}
style={{
padding: "8px",
width: "100%",
marginBottom: "16px",
border: "1px solid #ccc",
borderRadius: "4px",
}}
>
<option value="value1">value1</option>
<option value="value2">value2</option>
<option value="value3">value3</option>
</select>
<label
htmlFor="destinationSelect"
style={{ display: "block", marginBottom: "8px", fontWeight: "bold" }}
>
Destination:{" "}
</label>
<select
id="destinationSelect"
value={destination}
onChange={handleDestinationChange}
style={{
padding: "8px",
width: "100%",
marginBottom: "16px",
border: "1px solid #ccc",
borderRadius: "4px",
}}
>
<option value="value1">value1</option>
<option value="value2">value2</option>
<option value="value3">value3</option>
</select>
<button
onClick={handleAddClick}
style={{
padding: "10px 20px",
backgroundColor: "#007BFF",
color: "#fff",
border: "none",
borderRadius: "4px",
cursor: "pointer",
fontWeight: "bold",
}}
>
Add
</button>
<p style={{ marginTop: "20px", color: "#333" }}>
Hello, {name || "world"}! Selected event type:{" "}
{eventType.map((option) => option.label).join(", ")}. Activated:{" "}
{isActivated ? "Yes" : "No"}. Condition: {condition}. Rule: {rule}.
Destination: {destination}.
</p>
</div>
);
};

export default AutoRoutingRoot;
101 changes: 101 additions & 0 deletions src/autorouting/types.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
export enum AutoroutingEventType {
NEW_INSTANCE = 'NewInstance',
NEW_SERIES = 'NewSeries',
NEW_STUDY = 'NewStudy',
NEW_PATIENT = 'NewPatient',
STABLE_SERIES = 'StableSeries',
STABLE_STUDY = 'StableStudy',
STABLE_PATIENT = 'StablePatient',
}

export enum RuleCondition {
AND = 'AND',
OR = 'OR',
}

export enum Condition {
EQUALS = 'EQUALS',
DIFFERENT = 'DIFFERENT',
IN = 'IN', // in array
NOT_IN = 'NOT_IN', // not in array
LESS_THAN = 'LESS_THAN',
GREATER_THAN = 'GREATER_THAN',
}

export enum DestinationType {
AET = 'AET',
TMTVJOB = 'TMTVJob',
PEER = 'Peer',
}

export enum ValueRepresentation {
STRING = 'string',
NUMBER = 'number',
DATE = 'date',
}

export enum DicomTag {
PATIENT_NAME = 'PatientName',
PATIENT_ID = 'PatientID',
PATIENT_BIRTHDATE = 'PatientBirthDate',
PATIENT_SEX = 'PatientSex',
OTHER_PATIENT_IDS = 'OtherPatientIDs',

STUDY_DATE = 'StudyDate',
STUDY_TIME = 'StudyTime',
STUDY_ID = 'StudyID',
STUDY_DESCRIPTION = 'StudyDescription',
ACCESSION_NUMBER = 'AccessionNumber',
STUDY_INSTANCE_UID = 'StudyInstanceUID',
REQUESTED_PROCEDURE_DESCRIPTION = 'RequestedProcedureDescription',
INSTITUTION_NAME = 'InstitutionName',
REQUESTING_PHYSICIAN = 'RequestingPhysician',
REFERRING_PHYSICIAN_NAME = 'ReferringPhysicianName',

SERIES_DATE = 'SeriesDate',
SERIES_TIME = 'SeriesTime',
MODALITY = 'Modality',
MANUFACTURER = 'Manufacturer',
STATION_NAME = 'StationName',
SERIES_DESCRIPTION = 'SeriesDescription',
BODY_PART_EXAMINED = 'BodyPartExamined',
SEQUENCE_NAME = 'SequenceName',
PROTOCOL_NAME = 'ProtocolName',
SERIES_NUMBER = 'SeriesNumber',
CARDIAC_NUMBER_OF_IMAGES = 'CardiacNumberOfImages',
IMAGES_IN_ACQUISITION = 'ImagesInAcquisition',
NUMBER_OF_TEMPORAL_POSITIONS = 'NumberOfTemporalPositions',
NUMBER_OF_SLICES = 'NumberOfSlices',
NUMBER_OF_TIME_SLICES = 'NumberOfTimeSlices',
SERIES_INSTANCE_UID = 'SeriesInstanceUID',
IMAGE_ORIENTATION_PATIENT = 'ImageOrientationPatient',
SERIES_TYPE = 'SeriesType',
OPERATORS_NAME = 'OperatorsName',
PERFORMED_PROCEDURE_STEP_DESCRIPTION = 'PerformedProcedureStepDescription',
ACQUISITION_DEVICE_PROCESSING_DESCRIPTION = 'AcquisitionDeviceProcessingDescription',
CONTRAST_BOLUS_AGENT = 'ContrastBolusAgent',

INSTANCE_CREATION_DATE = 'InstanceCreationDate',
INSTANCE_CREATION_TIME = 'InstanceCreationTime',
ACQUISITION_NUMBER = 'AcquisitionNumber',
IMAGE_INDEX = 'ImageIndex',
INSTANCE_NUMBER = 'InstanceNumber',
NUMBER_OF_FRAMES = 'NumberOfFrames',
TEMPORAL_POSITION_IDENTIFIER = 'TemporalPositionIdentifier',
SOP_INSTANCE_UID = 'SOPInstanceUID',
IMAGE_POSITION_PATIENT = 'ImagePositionPatient',
IMAGE_COMMENTS = 'ImageComments',
}

export type AutoRoutingRule = {
DicomTag: DicomTag;
ValueRepresentation: ValueRepresentation;
Value: string | number;
Condition: Condition;
}


export type Destination {
Destination: DestinationType;
Name: string;
}
Loading

0 comments on commit 1de1963

Please sign in to comment.