othmane/ohif-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cleanup in component mdx for docusaurus

Browse Source
This commit is contained in:
Erik Ziegler 2021-07-14 00:24:05 +02:00
parent 7a79e42929
commit 31e3e03490
22 changed files with 661 additions and 699 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
platform/docs/docs/component-library/components/ButtonGroup.mdx
View File

@ -23,17 +23,17 @@ import { ButtonGroup } from '@ohif/ui';
<ButtonGroup color="primary" className="m-2"> <ButtonGroup color="primary" className="m-2">
<Button>One</Button> <Button>One</Button>
<Button>Two</Button> <Button>Two</Button>
<Button>Tree</Button> <Button>Three</Button>
</ButtonGroup> </ButtonGroup>
<ButtonGroup color="primary" variant="contained" className="m-2"> <ButtonGroup color="primary" variant="contained" className="m-2">
<Button>One</Button> <Button>One</Button>
<Button>Two</Button> <Button>Two</Button>
<Button>Tree</Button> <Button>Three</Button>
</ButtonGroup> </ButtonGroup>
<ButtonGroup color="primary" variant="text" className="m-2"> <ButtonGroup color="primary" variant="text" className="m-2">
<Button>One</Button> <Button>One</Button>
<Button>Two</Button> <Button>Two</Button>
<Button>Tree</Button> <Button>Three</Button>
</ButtonGroup> </ButtonGroup>
</div> </div>
``` ```
@ -45,17 +45,17 @@ import { ButtonGroup } from '@ohif/ui';
<ButtonGroup color="default" size="small" className="m-2"> <ButtonGroup color="default" size="small" className="m-2">
<Button>One</Button> <Button>One</Button>
<Button>Two</Button> <Button>Two</Button>
<Button>Tree</Button> <Button>Three</Button>
</ButtonGroup> </ButtonGroup>
<ButtonGroup color="primary" size="medium" className="m-2"> <ButtonGroup color="primary" size="medium" className="m-2">
<Button>One</Button> <Button>One</Button>
<Button>Two</Button> <Button>Two</Button>
<Button>Tree</Button> <Button>Three</Button>
</ButtonGroup> </ButtonGroup>
<ButtonGroup color="secondary" size="large" className="m-2"> <ButtonGroup color="secondary" size="large" className="m-2">
<Button>One</Button> <Button>One</Button>
<Button>Two</Button> <Button>Two</Button>
<Button>Tree</Button> <Button>Three</Button>
</ButtonGroup> </ButtonGroup>
</div> </div>
``` ```
@ -67,7 +67,7 @@ import { ButtonGroup } from '@ohif/ui';
<ButtonGroup orientation="vertical" color="primary" className="m-2"> <ButtonGroup orientation="vertical" color="primary" className="m-2">
<Button>One</Button> <Button>One</Button>
<Button>Two</Button> <Button>Two</Button>
<Button>Tree</Button> <Button>Three</Button>
</ButtonGroup> </ButtonGroup>
<ButtonGroup <ButtonGroup
orientation="vertical" orientation="vertical"
@ -77,7 +77,7 @@ import { ButtonGroup } from '@ohif/ui';
> >
<Button>One</Button> <Button>One</Button>
<Button>Two</Button> <Button>Two</Button>
<Button>Tree</Button> <Button>Three</Button>
</ButtonGroup> </ButtonGroup>
<ButtonGroup <ButtonGroup
orientation="vertical" orientation="vertical"
@ -87,7 +87,7 @@ import { ButtonGroup } from '@ohif/ui';
> >
<Button>One</Button> <Button>One</Button>
<Button>Two</Button> <Button>Two</Button>
<Button>Tree</Button> <Button>Three</Button>
</ButtonGroup> </ButtonGroup>
</div> </div>
``` ```

28
platform/docs/docs/component-library/components/CinePlayer.mdx
View File

@ -19,22 +19,20 @@ import { CinePlayer } from '@ohif/ui';
## Basic usage ## Basic usage
```jsx live ```jsx live
{ function() {
() => { return (
return ( <div className="flex flex-col flex-1 p-4 items-center">
<div className="flex flex-col flex-1 p-4 items-center"> <div className="w-56">
<div className="w-56"> <CinePlayer
<CinePlayer cineMinFrameRate={1}
cineMinFrameRate={1} cineMaxFrameRate={90}
cineMaxFrameRate={90} cineStepFrameRate={1}
cineStepFrameRate={1} cineFrameRate={24}
cineFrameRate={24} isPlaying={false}
isPlaying={false} />
/>
</div>
</div> </div>
); </div>
}; );
} }
``` ```

48
platform/docs/docs/component-library/components/ContextMenu.mdx
View File

@ -17,31 +17,29 @@ import { ContextMenu } from '@ohif/ui';
``` ```
```jsx live ```jsx live
{ function() {
() => { const items = [
const items = [ {
{ label: 'Delete measurement',
label: 'Delete measurement', actionType: 'Delete',
actionType: 'Delete', action: () => alert('Delete'),
action: () => alert('Delete'), },
}, {
{ label: 'Relabel',
label: 'Relabel', actionType: 'setLabel',
actionType: 'setLabel', action: () => alert('Relabel'),
action: () => alert('Relabel'), },
}, {
{ label: 'Add Description',
label: 'Add Description', actionType: 'setDescription',
actionType: 'setDescription', action: () => alert('Add Description'),
action: () => alert('Add Description'), },
}, ];
]; return (
return ( <div className="p-4">
<div className="p-4"> <ContextMenu items={items} />
<ContextMenu items={items} /> </div>
</div> );
);
};
} }
``` ```

80
platform/docs/docs/component-library/components/Dropdown.mdx
View File

@ -19,48 +19,46 @@ import { Dropdown } from '@ohif/ui';
``` ```
```jsx live ```jsx live
{ function() {
() => { const handleClick = () => {
const handleClick = () => { alert('Clicked');
alert('Clicked');
};
return (
<div className="py-4">
<Dropdown
showDropdownIcon={false}
list={[
{
title: 'Option 1',
icon: 'info',
onClick: handleClick,
},
{
title: 'Option 2',
icon: 'settings',
onClick: handleClick,
},
]}
>
<IconButton
variant="text"
color="inherit"
size="initial"
className="text-primary-active"
>
<Icon name="settings" />
</IconButton>
<IconButton
variant="text"
color="inherit"
size="initial"
className="text-primary-active"
>
<Icon name="chevron-down" />
</IconButton>
</Dropdown>
</div>
);
}; };
return (
<div className="py-4">
<Dropdown
showDropdownIcon={false}
list={[
{
title: 'Option 1',
icon: 'info',
onClick: handleClick,
},
{
title: 'Option 2',
icon: 'settings',
onClick: handleClick,
},
]}
>
<IconButton
variant="text"
color="inherit"
size="initial"
className="text-primary-active"
>
<Icon name="settings" />
</IconButton>
<IconButton
variant="text"
color="inherit"
size="initial"
className="text-primary-active"
>
<Icon name="chevron-down" />
</IconButton>
</Dropdown>
</div>
);
} }
``` ```

110
platform/docs/docs/component-library/components/ExpandableToolbarButton.mdx
View File

@ -19,68 +19,66 @@ import { ExpandableToolbarButton, ListMenu } from '@ohif/ui';
``` ```
```jsx live ```jsx live
{ function() {
() => { const props = {
const props = { content: ListMenu,
content: ListMenu, contentProps: {
contentProps: { options: [
options: [ {
{ value: 'windowLevelPreset1',
value: 'windowLevelPreset1', title: 'Soft tissue',
title: 'Soft tissue', subtitle: '400 / 40',
subtitle: '400 / 40', },
}, {
{ value: 'windowLevelPreset2',
value: 'windowLevelPreset2', title: 'Lung',
title: 'Lung', subtitle: '1500 / -600',
subtitle: '1500 / -600', },
}, { value: 'windowLevelPreset3', title: 'Liver', subtitle: '150 / 90' },
{ value: 'windowLevelPreset3', title: 'Liver', subtitle: '150 / 90' }, { value: 'windowLevelPreset4', title: 'Bone', subtitle: '80 / 40' },
{ value: 'windowLevelPreset4', title: 'Bone', subtitle: '80 / 40' }, {
{ value: 'windowLevelPreset5',
value: 'windowLevelPreset5', title: 'Brain',
title: 'Brain', subtitle: '2500 / 480',
subtitle: '2500 / 480', },
}, ],
], renderer: ({ title, subtitle, isActive, index }) => (
renderer: ({ title, subtitle, isActive, index }) => ( <>
<> <div>
<div>
<span
className={classnames(
isActive ? 'text-black' : 'text-white',
'mr-2 text-base'
)}
>
{title}
</span>
<span
className={classnames(
isActive ? 'text-black' : 'text-aqua-pale',
'font-thin text-sm'
)}
>
{subtitle}
</span>
</div>
<span <span
className={classnames( className={classnames(
isActive ? 'text-black' : 'text-primary-active', isActive ? 'text-black' : 'text-white',
'text-sm' 'mr-2 text-base'
)} )}
> >
{index + 1} {title}
</span> </span>
</> <span
), className={classnames(
}, isActive ? 'text-black' : 'text-aqua-pale',
}; 'font-thin text-sm'
return ( )}
<div className="py-10 flex justify-center"> >
<ExpandableToolbarButton {...props} /> {subtitle}
</div> </span>
); </div>
<span
className={classnames(
isActive ? 'text-black' : 'text-primary-active',
'text-sm'
)}
>
{index + 1}
</span>
</>
),
},
}; };
return (
<div className="py-10 flex justify-center">
<ExpandableToolbarButton {...props} />
</div>
);
} }
``` ```

28
platform/docs/docs/component-library/components/Input.mdx
View File

@ -17,21 +17,19 @@ import { Input } from '@ohif/ui';
## Basic usage ## Basic usage
```jsx live ```jsx live
{ function() {
() => { const [inputValue, setInputValue] = React.useState('');
const [inputValue, setInputValue] = React.useState(''); return (
return ( <div className="p-4">
<div className="p-4"> <Input
<Input transparent
transparent containerClassName="mb-3"
containerClassName="mb-3" label="Label"
label="Label" placeholder="With Label"
placeholder="With Label" />
/> <Input placeholder="Without label" />
<Input placeholder="Without label" /> </div>
</div> );
);
};
} }
``` ```

32
platform/docs/docs/component-library/components/InputDateRange.mdx
View File

@ -19,24 +19,22 @@ import { InputDateRange } from '@ohif/ui';
## Basic usage ## Basic usage
```jsx live ```jsx live
{ function() {
() => { const [dates, setDates] = useState({
const [dates, setDates] = useState({ startDate: null,
startDate: null, endDate: null,
endDate: null, });
}); return (
return ( <div className="p-4 flex flex-col items-center">
<div className="p-4 flex flex-col items-center"> <div className="w-56">
<div className="w-56"> <InputDateRange
<InputDateRange label="Dates"
label="Dates" value={dates}
value={dates} onChange={dates => setDates(dates)}
onChange={dates => setDates(dates)} />
/>
</div>
</div> </div>
); </div>
}; );
} }
``` ```

126
platform/docs/docs/component-library/components/InputGroup.mdx
View File

@ -19,71 +19,69 @@ import { InputGroup } from '@ohif/ui';
## Basic usage ## Basic usage
```jsx live ```jsx live
{ function() {
() => { const [filterValues, setFilterValues] = useState({
const [filterValues, setFilterValues] = useState({ patient: '',
patient: '', studyDate: {
studyDate: { startDate: null,
startDate: null, endDate: null,
endDate: null, },
modality: [],
});
const [filterSorting, setFilterSorting] = useState({
sortBy: '',
sortDirection: 'none',
});
const filtersMeta = [
{
name: 'patient',
displayName: 'Patient Name',
inputType: 'Text',
isSortable: true,
gridCol: 6,
},
{
name: 'studyDate',
displayName: 'Study date',
inputType: 'DateRange',
isSortable: true,
gridCol: 6,
},
{
name: 'modality',
displayName: 'Modality',
inputType: 'MultiSelect',
inputProps: {
options: [
{ value: 'SEG', label: 'SEG' },
{ value: 'CT', label: 'CT' },
{ value: 'MR', label: 'MR' },
{ value: 'SR', label: 'SR' },
],
}, },
modality: [], isSortable: true,
}); gridCol: 6,
const [filterSorting, setFilterSorting] = useState({ },
sortBy: '', {
sortDirection: 'none', name: 'numberOfInstance',
}); displayName: 'Number of Instances',
const filtersMeta = [ inputType: 'None',
{ isSortable: true,
name: 'patient', gridCol: 6,
displayName: 'Patient Name', },
inputType: 'Text', ];
isSortable: true, return (
gridCol: 6, <div className="py-4">
}, <InputGroup
{ inputMeta={filtersMeta}
name: 'studyDate', values={filterValues}
displayName: 'Study date', onValuesChange={setFilterValues}
inputType: 'DateRange', sorting={filterSorting}
isSortable: true, onSortingChange={setFilterSorting}
gridCol: 6, isSortingEnable={true}
}, />
{ </div>
name: 'modality', );
displayName: 'Modality',
inputType: 'MultiSelect',
inputProps: {
options: [
{ value: 'SEG', label: 'SEG' },
{ value: 'CT', label: 'CT' },
{ value: 'MR', label: 'MR' },
{ value: 'SR', label: 'SR' },
],
},
isSortable: true,
gridCol: 6,
},
{
name: 'numberOfInstance',
displayName: 'Number of Instances',
inputType: 'None',
isSortable: true,
gridCol: 6,
},
];
return (
<div className="py-4">
<InputGroup
inputMeta={filtersMeta}
values={filterValues}
onValuesChange={setFilterValues}
sorting={filterSorting}
onSortingChange={setFilterSorting}
isSortingEnable={true}
/>
</div>
);
};
} }
``` ```

42
platform/docs/docs/component-library/components/InputMultiSelect.mdx
View File

@ -19,29 +19,27 @@ import { InputMultiSelect } from '@ohif/ui';
## Basic usage ## Basic usage
```jsx live ```jsx live
{ function() {
() => { const [values, setValues] = useState([]);
const [values, setValues] = useState([]); return (
return ( <div className="flex flex-col flex-1 p-4 items-center">
<div className="flex flex-col flex-1 p-4 items-center"> <div className="w-56">
<div className="w-56"> <InputMultiSelect
<InputMultiSelect label="Modality"
label="Modality" options={[
options={[ { value: 'SEG', label: 'SEG' },
{ value: 'SEG', label: 'SEG' }, { value: 'CT', label: 'CT' },
{ value: 'CT', label: 'CT' }, { value: 'MR', label: 'MR' },
{ value: 'MR', label: 'MR' }, { value: 'SR', label: 'SR' },
{ value: 'SR', label: 'SR' }, ]}
]} value={values}
value={values} onChange={values => {
onChange={values => { setValues(values);
setValues(values); }}
}} />
/>
</div>
</div> </div>
); </div>
}; );
} }
``` ```

30
platform/docs/docs/component-library/components/InputText.mdx
View File

@ -19,23 +19,21 @@ import { InputText } from '@ohif/ui';
## Basic usage ## Basic usage
```jsx live ```jsx live
{ function() {
() => { const [text, setText] = useState('');
const [text, setText] = useState(''); return (
return ( <div className="flex flex-col flex-1 p-4 items-center">
<div className="flex flex-col flex-1 p-4 items-center"> <div className="w-56">
<div className="w-56"> <InputText
<InputText label="Name"
label="Name" value={text}
value={text} onChange={value => {
onChange={value => { setText(value);
setText(value); }}
}} />
/>
</div>
</div> </div>
); </div>
}; );
} }
``` ```

14
platform/docs/docs/component-library/components/Label.mdx
View File

@ -17,14 +17,12 @@ import { Label } from '@ohif/ui';
## Basic usage ## Basic usage
```jsx live ```jsx live
{ function() {
() => { return (
return ( <div className="p-4">
<div className="p-4"> <Label text="Label" />
<Label text="Label" /> </div>
</div> );
);
};
} }
``` ```

100
platform/docs/docs/component-library/components/ListMenu.mdx
View File

@ -19,62 +19,60 @@ import { ListMenu, ToolbarButton } from '@ohif/ui';
``` ```
```jsx live ```jsx live
{ function() {
() => { return (
return ( <ToolbarButton
<ToolbarButton items={[
items={[ {
{ value: 'windowLevelPreset1',
value: 'windowLevelPreset1', title: 'Soft tissue',
title: 'Soft tissue', subtitle: '400 / 40',
subtitle: '400 / 40', },
}, {
{ value: 'windowLevelPreset2',
value: 'windowLevelPreset2', title: 'Lung',
title: 'Lung', subtitle: '1500 / -600',
subtitle: '1500 / -600', },
}, { value: 'windowLevelPreset3', title: 'Liver', subtitle: '150 / 90' },
{ value: 'windowLevelPreset3', title: 'Liver', subtitle: '150 / 90' }, { value: 'windowLevelPreset4', title: 'Bone', subtitle: '80 / 40' },
{ value: 'windowLevelPreset4', title: 'Bone', subtitle: '80 / 40' }, {
{ value: 'windowLevelPreset5',
value: 'windowLevelPreset5', title: 'Brain',
title: 'Brain', subtitle: '2500 / 480',
subtitle: '2500 / 480', },
}, ]}
]} renderer={({ title, subtitle, isActive, index }) => (
renderer={({ title, subtitle, isActive, index }) => ( <>
<> <div>
<div>
<span
className={classnames(
isActive ? 'text-black' : 'text-white',
'mr-2 text-base'
)}
>
{title}
</span>
<span
className={classnames(
isActive ? 'text-black' : 'text-aqua-pale',
'font-thin text-sm'
)}
>
{subtitle}
</span>
</div>
<span <span
className={classnames( className={classnames(
isActive ? 'text-black' : 'text-primary-active', isActive ? 'text-black' : 'text-white',
'text-sm' 'mr-2 text-base'
)} )}
> >
{index + 1} {title}
</span> </span>
</> <span
)} className={classnames(
/> isActive ? 'text-black' : 'text-aqua-pale',
); 'font-thin text-sm'
}; )}
>
{subtitle}
</span>
</div>
<span
className={classnames(
isActive ? 'text-black' : 'text-primary-active',
'text-sm'
)}
>
{index + 1}
</span>
</>
)}
/>
);
} }
``` ```

60
platform/docs/docs/component-library/components/Notification.mdx
View File

@ -20,37 +20,35 @@ import { Notification } from '@ohif/ui';
## Basic usage ## Basic usage
```jsx live ```jsx live
{ function() {
() => { return (
return ( <div className="p-4 w-full lg:w-2/3">
<div className="p-4 w-full lg:w-2/3"> <Notification
<Notification message="Track all measurement for this series?"
message="Track all measurement for this series?" type="info"
type="info" actions={[
actions={[ {
{ type: 'cancel',
type: 'cancel', text: 'No',
text: 'No', value: 0,
value: 0, },
}, {
{ type: 'secondary',
type: 'secondary', text: 'No, do not ask again',
text: 'No, do not ask again', value: -1,
value: -1, },
}, {
{ type: 'primary',
type: 'primary', text: 'Yes',
text: 'Yes', value: 1,
value: 1, },
}, ]}
]} onSubmit={value => {
onSubmit={value => { window.alert(value);
window.alert(value); }}
}} />
/> </div>
</div> );
);
};
} }
``` ```

22
platform/docs/docs/component-library/components/SegmentationTable.mdx
View File

@ -17,19 +17,17 @@ import { SegmentationTable } from '@ohif/ui';
## Basic usage ## Basic usage
```jsx live ```jsx live
{ function() {
() => { const tableData = {
const tableData = { title: 'Segments',
title: 'Segments', amount: 12,
amount: 12, data: new Array(12).fill(''),
data: new Array(12).fill(''),
};
return (
<div className="p-4 w-80">
<SegmentationTable {...tableData} />
</div>
);
}; };
return (
<div className="p-4 w-80">
<SegmentationTable {...tableData} />
</div>
);
} }
``` ```

112
platform/docs/docs/component-library/components/SplitButton.mdx
View File

@ -19,68 +19,66 @@ import { SplitButton, WindowLevelMenuItem } from '@ohif/ui';
``` ```
```jsx live ```jsx live
{ function() {
() => { const mockedProps = {
const mockedProps = { bState: {
bState: { primaryToolId: 'WWWC',
primaryToolId: 'WWWC', toggles: {},
toggles: {}, },
primary: {
tooltip: 'W/L',
type: 'tool',
icon: 'tool-window-level',
onClick: args => console.debug('Primary click!', args),
},
secondary: {
icon: 'chevron-down',
label: '',
isActive: true,
tooltip: 'More Measure Tools',
},
items: [
{
id: '1',
icon: 'tool-layout',
label: 'Layout',
onClick: args => console.debug('Item click!', args),
}, },
primary: { {
tooltip: 'W/L', id: '2',
type: 'tool',
icon: 'tool-window-level', icon: 'tool-window-level',
onClick: args => console.debug('Primary click!', args), label: 'W/L',
onClick: args => console.debug('Item click!', args),
}, },
secondary: { {
icon: 'chevron-down', id: '3',
label: '', icon: 'tool-length',
isActive: true, label: 'Length',
tooltip: 'More Measure Tools', onClick: args => console.debug('Item click!', args),
}, },
items: [ ],
{ onClick: args => console.debug('Any click!', args),
id: '1',
icon: 'tool-layout',
label: 'Layout',
onClick: args => console.debug('Item click!', args),
},
{
id: '2',
icon: 'tool-window-level',
label: 'W/L',
onClick: args => console.debug('Item click!', args),
},
{
id: '3',
icon: 'tool-length',
label: 'Length',
onClick: args => console.debug('Item click!', args),
},
],
onClick: args => console.debug('Any click!', args),
};
return (
<div className="mb-2">
<div className="flex flex-row w-full justify-center items-center bg-secondary-dark">
<SplitButton {...mockedProps} isRadio />
<SplitButton
{...mockedProps}
isAction
renderer={WindowLevelMenuItem}
items={[
{ id: '1', value: 1, title: 'Soft tissue', subtitle: '400 / 40' },
{ id: '2', value: 2, title: 'Lung', subtitle: '1500 / -600' },
{ id: '3', value: 3, title: 'Liver', subtitle: '150 / 90' },
{ id: '4', value: 4, title: 'Bone', subtitle: '80 / 40' },
{ id: '5', value: 5, title: 'Brain', subtitle: '2500 / 480' },
]}
/>
<SplitButton {...mockedProps} />
</div>
</div>
);
}; };
return (
<div className="mb-2">
<div className="flex flex-row w-full justify-center items-center bg-secondary-dark">
<SplitButton {...mockedProps} isRadio />
<SplitButton
{...mockedProps}
isAction
renderer={WindowLevelMenuItem}
items={[
{ id: '1', value: 1, title: 'Soft tissue', subtitle: '400 / 40' },
{ id: '2', value: 2, title: 'Lung', subtitle: '1500 / -600' },
{ id: '3', value: 3, title: 'Liver', subtitle: '150 / 90' },
{ id: '4', value: 4, title: 'Bone', subtitle: '80 / 40' },
{ id: '5', value: 5, title: 'Brain', subtitle: '2500 / 480' },
]}
/>
<SplitButton {...mockedProps} />
</div>
</div>
);
} }
``` ```

158
platform/docs/docs/component-library/components/StudyBrowser.mdx
View File

@ -17,93 +17,91 @@ import { StudyBrowser } from '@ohif/ui';
## Basic usage ## Basic usage
```jsx live ```jsx live
{ function() {
() => { const studyWithSR = {
const studyWithSR = { studyInstanceUid: '1',
studyInstanceUid: '1', date: '07-Sept-2010',
date: '07-Sept-2010', description: 'CHEST/ABD/PELVIS W/CONTRAST',
description: 'CHEST/ABD/PELVIS W/CONTRAST', numInstances: 902,
numInstances: 902, modalities: 'CT,SR',
modalities: 'CT,SR', displaySets: [
displaySets: [
{
displaySetInstanceUID: 'f69f6asdasd48c-223e-db7f-c4af-b8906641a66e',
description: 'Multiple line image series description lorem sit',
seriesNumber: 1,
numInstances: 68,
componentType: 'thumbnailTracked',
viewportIdentificator: 'A',
isTracked: true,
},
{
displaySetInstanceUID: 'f69f648c-223e-db7f-c4asdasdaf-b8906641a66e',
description: 'Multiple line image series description lorem sit',
seriesNumber: 1,
numInstances: 68,
componentType: 'thumbnailTracked',
viewportIdentificator: 'B',
},
{
displaySetInstanceUID: 'f69f648c-223e-dasdasdb7f-c4af-b8906641a66e',
description: 'Multiple line image series description lorem sit',
seriesNumber: 1,
numInstances: 68,
componentType: 'thumbnailTracked',
},
{
displaySetInstanceUID: 'f69f648c-223e-db7f-c4afas-b8906asd641a66e',
description: 'Multiple line description lorem ipsum dolor sit amet',
modality: 'SR',
componentType: 'thumbnailNoImage',
seriesDate: '07-Sept-2010',
},
],
};
const studySimple = {
studyInstanceUid: '2',
date: '07-Sept-2010',
description: 'CHEST/ABD/PELVIS W/CONTRAST',
numInstances: 902,
modalities: 'CT',
displaySets: [
{
displaySetInstanceUID: 'f69f648c-223e-db7f-c4af-b8906641a66e',
description: 'Multiple line image series description lorem sit',
seriesNumber: 1,
numInstances: 68,
componentType: 'thumbnailTracked',
},
],
};
const tabs = [
{ {
name: 'primary', displaySetInstanceUID: 'f69f6asdasd48c-223e-db7f-c4af-b8906641a66e',
label: 'Primary', description: 'Multiple line image series description lorem sit',
studies: [studySimple], seriesNumber: 1,
numInstances: 68,
componentType: 'thumbnailTracked',
viewportIdentificator: 'A',
isTracked: true,
}, },
{ {
name: 'recent', displaySetInstanceUID: 'f69f648c-223e-db7f-c4asdasdaf-b8906641a66e',
label: 'Recent', description: 'Multiple line image series description lorem sit',
studies: [studyWithSR, studySimple], seriesNumber: 1,
numInstances: 68,
componentType: 'thumbnailTracked',
viewportIdentificator: 'B',
}, },
{ {
name: 'all', displaySetInstanceUID: 'f69f648c-223e-dasdasdb7f-c4af-b8906641a66e',
label: 'All', description: 'Multiple line image series description lorem sit',
studies: [studySimple, studyWithSR], seriesNumber: 1,
numInstances: 68,
componentType: 'thumbnailTracked',
}, },
]; {
return ( displaySetInstanceUID: 'f69f648c-223e-db7f-c4afas-b8906asd641a66e',
<div className="flex flex-1" style={{ height: '400px' }}> description: 'Multiple line description lorem ipsum dolor sit amet',
<div className="overflow-hidden w-64"> modality: 'SR',
<StudyBrowser componentType: 'thumbnailNoImage',
tabs={tabs} seriesDate: '07-Sept-2010',
activeTabName="primary" },
expandedStudyInstanceUIDs={[]} ],
/>
</div>
</div>
);
}; };
const studySimple = {
studyInstanceUid: '2',
date: '07-Sept-2010',
description: 'CHEST/ABD/PELVIS W/CONTRAST',
numInstances: 902,
modalities: 'CT',
displaySets: [
{
displaySetInstanceUID: 'f69f648c-223e-db7f-c4af-b8906641a66e',
description: 'Multiple line image series description lorem sit',
seriesNumber: 1,
numInstances: 68,
componentType: 'thumbnailTracked',
},
],
};
const tabs = [
{
name: 'primary',
label: 'Primary',
studies: [studySimple],
},
{
name: 'recent',
label: 'Recent',
studies: [studyWithSR, studySimple],
},
{
name: 'all',
label: 'All',
studies: [studySimple, studyWithSR],
},
];
return (
<div className="flex flex-1" style={{ height: '400px' }}>
<div className="overflow-hidden w-64">
<StudyBrowser
tabs={tabs}
activeTabName="primary"
expandedStudyInstanceUIDs={[]}
/>
</div>
</div>
);
} }
``` ```

34
platform/docs/docs/component-library/components/StudyItem.mdx
View File

@ -21,25 +21,23 @@ import { StudyItem } from '@ohif/ui';
## Basic usage ## Basic usage
```jsx live ```jsx live
{ function() {
() => { const [studyActive, setStudyActive] = useState(null);
const [studyActive, setStudyActive] = useState(null); return (
return ( <div className="flex flex-1 items-center justify-center p-4">
<div className="flex flex-1 items-center justify-center p-4"> <div className="w-56">
<div className="w-56"> <StudyItem
<StudyItem studyInstanceUid="1"
studyInstanceUid="1" date="07-Sept-2010"
date="07-Sept-2010" description="CHEST/ABD/PELVIS W/CONTRAST"
description="CHEST/ABD/PELVIS W/CONTRAST" numInstances={902}
numInstances={902} modalities="CT,SR"
modalities="CT,SR" isActive={studyActive}
isActive={studyActive} onClick={() => setStudyActive(studyActive === '1' ? null : '1')}
onClick={() => setStudyActive(studyActive === '1' ? null : '1')} />
/>
</div>
</div> </div>
); </div>
}; );
} }
``` ```

186
platform/docs/docs/component-library/components/StudyListFilter.mdx
View File

@ -20,101 +20,99 @@ import { StudyListFilter, ModalProvider, Modal } from '@ohif/ui';
## Basic usage ## Basic usage
```jsx live ```jsx live
{ function() {
() => { const defaultFilterValues = {
const defaultFilterValues = { patientName: '',
patientName: '', mrn: '',
mrn: '', studyDate: {
studyDate: { startDate: null,
startDate: null, endDate: null,
endDate: null, },
}, description: '',
description: '', modality: undefined,
modality: undefined, accession: '',
accession: '', sortBy: '',
sortBy: '', sortDirection: 'none',
sortDirection: 'none', page: 0,
page: 0, resultsPerPage: 25,
resultsPerPage: 25,
};
const [filterValues, setFilterValues] = useState(defaultFilterValues);
const filtersMeta = [
{
name: 'patientName',
displayName: 'Patient Name',
inputType: 'Text',
isSortable: true,
gridCol: 4,
},
{
name: 'mrn',
displayName: 'MRN',
inputType: 'Text',
isSortable: true,
gridCol: 2,
},
{
name: 'studyDate',
displayName: 'Study date',
inputType: 'DateRange',
isSortable: true,
gridCol: 5,
},
{
name: 'description',
displayName: 'Description',
inputType: 'Text',
isSortable: true,
gridCol: 4,
},
{
name: 'modality',
displayName: 'Modality',
inputType: 'MultiSelect',
inputProps: {
options: [
{ value: 'SEG', label: 'SEG' },
{ value: 'CT', label: 'CT' },
{ value: 'MR', label: 'MR' },
{ value: 'SR', label: 'SR' },
],
},
isSortable: true,
gridCol: 3,
},
{
name: 'accession',
displayName: 'Accession',
inputType: 'Text',
isSortable: true,
gridCol: 4,
},
{
name: 'instances',
displayName: 'Instances',
inputType: 'None',
isSortable: true,
gridCol: 2,
},
];
const isFiltering = (filterValues, defaultFilterValues) => {
return Object.keys(defaultFilterValues).some(name => {
return filterValues[name] !== defaultFilterValues[name];
});
};
return (
<ModalProvider modal={Modal}>
<StudyListFilter
numOfStudies={100}
filtersMeta={filtersMeta}
filterValues={filterValues}
onChange={setFilterValues}
clearFilters={() => setFilterValues(defaultFilterValues)}
isFiltering={isFiltering(filterValues, defaultFilterValues)}
/>
</ModalProvider>
);
}; };
const [filterValues, setFilterValues] = useState(defaultFilterValues);
const filtersMeta = [
{
name: 'patientName',
displayName: 'Patient Name',
inputType: 'Text',
isSortable: true,
gridCol: 4,
},
{
name: 'mrn',
displayName: 'MRN',
inputType: 'Text',
isSortable: true,
gridCol: 2,
},
{
name: 'studyDate',
displayName: 'Study date',
inputType: 'DateRange',
isSortable: true,
gridCol: 5,
},
{
name: 'description',
displayName: 'Description',
inputType: 'Text',
isSortable: true,
gridCol: 4,
},
{
name: 'modality',
displayName: 'Modality',
inputType: 'MultiSelect',
inputProps: {
options: [
{ value: 'SEG', label: 'SEG' },
{ value: 'CT', label: 'CT' },
{ value: 'MR', label: 'MR' },
{ value: 'SR', label: 'SR' },
],
},
isSortable: true,
gridCol: 3,
},
{
name: 'accession',
displayName: 'Accession',
inputType: 'Text',
isSortable: true,
gridCol: 4,
},
{
name: 'instances',
displayName: 'Instances',
inputType: 'None',
isSortable: true,
gridCol: 2,
},
];
const isFiltering = (filterValues, defaultFilterValues) => {
return Object.keys(defaultFilterValues).some(name => {
return filterValues[name] !== defaultFilterValues[name];
});
};
return (
<ModalProvider modal={Modal}>
<StudyListFilter
numOfStudies={100}
filtersMeta={filtersMeta}
filterValues={filterValues}
onChange={setFilterValues}
clearFilters={() => setFilterValues(defaultFilterValues)}
isFiltering={isFiltering(filterValues, defaultFilterValues)}
/>
</ModalProvider>
);
} }
``` ```

36
platform/docs/docs/component-library/components/StudyListPagination.mdx
View File

@ -19,26 +19,24 @@ import { StudyListPagination } from '@ohif/ui';
## Basic usage ## Basic usage
```jsx live ```jsx live
{ function() {
() => { const [currentPage, setCurrentPage] = useState(1);
const [currentPage, setCurrentPage] = useState(1); const [perPage, setPerPage] = useState(25);
const [perPage, setPerPage] = useState(25); const onChangePage = page => {
const onChangePage = page => { setCurrentPage(page);
setCurrentPage(page);
};
const onChangePerPage = perPage => {
setPerPage(perPage);
setCurrentPage(1);
};
return (
<StudyListPagination
onChangePage={onChangePage}
onChangePerPage={onChangePerPage}
currentPage={currentPage}
perPage={perPage}
/>
);
}; };
const onChangePerPage = perPage => {
setPerPage(perPage);
setCurrentPage(1);
};
return (
<StudyListPagination
onChangePage={onChangePage}
onChangePerPage={onChangePerPage}
currentPage={currentPage}
perPage={perPage}
/>
);
} }
``` ```

66
platform/docs/docs/component-library/components/StudyListTable.mdx
View File

@ -21,41 +21,39 @@ import { StudyListTable } from '@ohif/ui';
## Basic usage ## Basic usage
```jsx live ```jsx live
{ function() {
() => { const studies = new Array(10).fill('');
const studies = new Array(10).fill(''); const [expandedRows, setExpandedRows] = useState([]);
const [expandedRows, setExpandedRows] = useState([]); const tableDataSource = studies.map((study, key) => {
const tableDataSource = studies.map((study, key) => { const rowKey = key + 1;
const rowKey = key + 1; const isExpanded = expandedRows.some(k => k === rowKey);
const isExpanded = expandedRows.some(k => k === rowKey); return {
return { row: [
row: [ { key: 'Cell 01', content: 'Cell 01', gridCol: 2 },
{ key: 'Cell 01', content: 'Cell 01', gridCol: 2 }, { key: 'Cell 02', content: 'Cell 02', gridCol: 4 },
{ key: 'Cell 02', content: 'Cell 02', gridCol: 4 }, { key: 'Cell 03', content: 'Cell 03', gridCol: 4 },
{ key: 'Cell 03', content: 'Cell 03', gridCol: 4 }, { key: 'Cell 04', content: 'Cell 04', gridCol: 4 },
{ key: 'Cell 04', content: 'Cell 04', gridCol: 4 }, ],
], expandedContent: (
expandedContent: ( <td className="w-full p-8">
<td className="w-full p-8"> Custom expanded content for row {rowKey}
Custom expanded content for row {rowKey} </td>
</td> ),
onClickRow: () =>
setExpandedRows(rows =>
isExpanded ? rows.filter(n => rowKey !== n) : [...rows, rowKey]
), ),
onClickRow: () => isExpanded,
setExpandedRows(rows => };
isExpanded ? rows.filter(n => rowKey !== n) : [...rows, rowKey] });
), return (
isExpanded, <div className="py-4">
}; <StudyListTable
}); tableDataSource={tableDataSource}
return ( numOfStudies={studies.length}
<div className="py-4"> />
<StudyListTable </div>
tableDataSource={tableDataSource} );
numOfStudies={studies.length}
/>
</div>
);
};
} }
``` ```

14
platform/docs/docs/component-library/components/WindowLevelMenuItem.mdx
View File

@ -19,14 +19,12 @@ import { WindowLevelMenuItem, ListMenu } from '@ohif/ui';
``` ```
```jsx live ```jsx live
{ function() {
() => { return (
return ( <div className="py-10 flex justify-center">
<div className="py-10 flex justify-center"> <ListMenu renderer={WindowLevelMenuItem} items={[]} />
<ListMenu renderer={WindowLevelMenuItem} items={[]} /> </div>
</div> );
);
};
} }
``` ```

16
platform/docs/docs/component-library/context-providers/ViewportDialogProvider.mdx
View File

@ -55,13 +55,15 @@ component across all application.
); );
}; };
const ViewportActionButtons = () => { const ViewportActionButtons = () => {
const [dialogState, dialogApi] = useViewportDialog(); const [dialogState, dialogApi] = useViewportDialog();
return ( return (
<Button onClick={() => dialogApi.show({ content: ViewportNotification })}> <Button onClick={() => dialogApi.show({ content: ViewportNotification })}>
Open Dialog Open Dialog
</Button> </Button>
); );
}; };
}
return ( return (
<div className="w-full flex flex-row p-4" style={{height: '400px'}}> <div className="w-full flex flex-row p-4" style={{height: '400px'}}>
<div className="flex flex-1 items-center justify-center h-full w-full bg-black text-white border border-primary-main"> <div className="flex flex-1 items-center justify-center h-full w-full bg-black text-white border border-primary-main">