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

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

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

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

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

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

@ -19,48 +19,46 @@ import { Dropdown } from '@ohif/ui';
```
```jsx live
{
() => {
const handleClick = () => {
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>
);
function() {
const handleClick = () => {
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>
);
}
```

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

@ -19,68 +19,66 @@ import { ExpandableToolbarButton, ListMenu } from '@ohif/ui';
```
```jsx live
{
() => {
const props = {
content: ListMenu,
contentProps: {
options: [
{
value: 'windowLevelPreset1',
title: 'Soft tissue',
subtitle: '400 / 40',
},
{
value: 'windowLevelPreset2',
title: 'Lung',
subtitle: '1500 / -600',
},
{ value: 'windowLevelPreset3', title: 'Liver', subtitle: '150 / 90' },
{ value: 'windowLevelPreset4', title: 'Bone', subtitle: '80 / 40' },
{
value: 'windowLevelPreset5',
title: 'Brain',
subtitle: '2500 / 480',
},
],
renderer: ({ title, subtitle, isActive, index }) => (
<>
<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>
function() {
const props = {
content: ListMenu,
contentProps: {
options: [
{
value: 'windowLevelPreset1',
title: 'Soft tissue',
subtitle: '400 / 40',
},
{
value: 'windowLevelPreset2',
title: 'Lung',
subtitle: '1500 / -600',
},
{ value: 'windowLevelPreset3', title: 'Liver', subtitle: '150 / 90' },
{ value: 'windowLevelPreset4', title: 'Bone', subtitle: '80 / 40' },
{
value: 'windowLevelPreset5',
title: 'Brain',
subtitle: '2500 / 480',
},
],
renderer: ({ title, subtitle, isActive, index }) => (
<>
<div>
<span
className={classnames(
isActive ? 'text-black' : 'text-primary-active',
'text-sm'
isActive ? 'text-black' : 'text-white',
'mr-2 text-base'
)}
>
{index + 1}
{title}
</span>
</>
),
},
};
return (
<div className="py-10 flex justify-center">
<ExpandableToolbarButton {...props} />
</div>
);
<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>
</>
),
},
};
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
```jsx live
{
() => {
const [inputValue, setInputValue] = React.useState('');
return (
<div className="p-4">
<Input
transparent
containerClassName="mb-3"
label="Label"
placeholder="With Label"
/>
<Input placeholder="Without label" />
</div>
);
};
function() {
const [inputValue, setInputValue] = React.useState('');
return (
<div className="p-4">
<Input
transparent
containerClassName="mb-3"
label="Label"
placeholder="With Label"
/>
<Input placeholder="Without label" />
</div>
);
}
```

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

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

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

@ -19,71 +19,69 @@ import { InputGroup } from '@ohif/ui';
## Basic usage
```jsx live
{
() => {
const [filterValues, setFilterValues] = useState({
patient: '',
studyDate: {
startDate: null,
endDate: null,
function() {
const [filterValues, setFilterValues] = useState({
patient: '',
studyDate: {
startDate: 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: [],
});
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' },
],
},
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>
);
};
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
```jsx live
{
() => {
const [values, setValues] = useState([]);
return (
<div className="flex flex-col flex-1 p-4 items-center">
<div className="w-56">
<InputMultiSelect
label="Modality"
options={[
{ value: 'SEG', label: 'SEG' },
{ value: 'CT', label: 'CT' },
{ value: 'MR', label: 'MR' },
{ value: 'SR', label: 'SR' },
]}
value={values}
onChange={values => {
setValues(values);
}}
/>
</div>
function() {
const [values, setValues] = useState([]);
return (
<div className="flex flex-col flex-1 p-4 items-center">
<div className="w-56">
<InputMultiSelect
label="Modality"
options={[
{ value: 'SEG', label: 'SEG' },
{ value: 'CT', label: 'CT' },
{ value: 'MR', label: 'MR' },
{ value: 'SR', label: 'SR' },
]}
value={values}
onChange={values => {
setValues(values);
}}
/>
</div>
);
};
</div>
);
}
```

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

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

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

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

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

@ -19,62 +19,60 @@ import { ListMenu, ToolbarButton } from '@ohif/ui';
```
```jsx live
{
() => {
return (
<ToolbarButton
items={[
{
value: 'windowLevelPreset1',
title: 'Soft tissue',
subtitle: '400 / 40',
},
{
value: 'windowLevelPreset2',
title: 'Lung',
subtitle: '1500 / -600',
},
{ value: 'windowLevelPreset3', title: 'Liver', subtitle: '150 / 90' },
{ value: 'windowLevelPreset4', title: 'Bone', subtitle: '80 / 40' },
{
value: 'windowLevelPreset5',
title: 'Brain',
subtitle: '2500 / 480',
},
]}
renderer={({ title, subtitle, isActive, index }) => (
<>
<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>
function() {
return (
<ToolbarButton
items={[
{
value: 'windowLevelPreset1',
title: 'Soft tissue',
subtitle: '400 / 40',
},
{
value: 'windowLevelPreset2',
title: 'Lung',
subtitle: '1500 / -600',
},
{ value: 'windowLevelPreset3', title: 'Liver', subtitle: '150 / 90' },
{ value: 'windowLevelPreset4', title: 'Bone', subtitle: '80 / 40' },
{
value: 'windowLevelPreset5',
title: 'Brain',
subtitle: '2500 / 480',
},
]}
renderer={({ title, subtitle, isActive, index }) => (
<>
<div>
<span
className={classnames(
isActive ? 'text-black' : 'text-primary-active',
'text-sm'
isActive ? 'text-black' : 'text-white',
'mr-2 text-base'
)}
>
{index + 1}
{title}
</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
```jsx live
{
() => {
return (
<div className="p-4 w-full lg:w-2/3">
<Notification
message="Track all measurement for this series?"
type="info"
actions={[
{
type: 'cancel',
text: 'No',
value: 0,
},
{
type: 'secondary',
text: 'No, do not ask again',
value: -1,
},
{
type: 'primary',
text: 'Yes',
value: 1,
},
]}
onSubmit={value => {
window.alert(value);
}}
/>
</div>
);
};
function() {
return (
<div className="p-4 w-full lg:w-2/3">
<Notification
message="Track all measurement for this series?"
type="info"
actions={[
{
type: 'cancel',
text: 'No',
value: 0,
},
{
type: 'secondary',
text: 'No, do not ask again',
value: -1,
},
{
type: 'primary',
text: 'Yes',
value: 1,
},
]}
onSubmit={value => {
window.alert(value);
}}
/>
</div>
);
}
```

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

@ -17,19 +17,17 @@ import { SegmentationTable } from '@ohif/ui';
## Basic usage
```jsx live
{
() => {
const tableData = {
title: 'Segments',
amount: 12,
data: new Array(12).fill(''),
};
return (
<div className="p-4 w-80">
<SegmentationTable {...tableData} />
</div>
);
function() {
const tableData = {
title: 'Segments',
amount: 12,
data: new Array(12).fill(''),
};
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
{
() => {
const mockedProps = {
bState: {
primaryToolId: 'WWWC',
toggles: {},
function() {
const mockedProps = {
bState: {
primaryToolId: 'WWWC',
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',
type: 'tool',
{
id: '2',
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',
label: '',
isActive: true,
tooltip: 'More Measure Tools',
{
id: '3',
icon: 'tool-length',
label: 'Length',
onClick: args => console.debug('Item click!', args),
},
items: [
{
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>
);
],
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>
);
}
```

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

@ -17,93 +17,91 @@ import { StudyBrowser } from '@ohif/ui';
## Basic usage
```jsx live
{
() => {
const studyWithSR = {
studyInstanceUid: '1',
date: '07-Sept-2010',
description: 'CHEST/ABD/PELVIS W/CONTRAST',
numInstances: 902,
modalities: 'CT,SR',
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 = [
function() {
const studyWithSR = {
studyInstanceUid: '1',
date: '07-Sept-2010',
description: 'CHEST/ABD/PELVIS W/CONTRAST',
numInstances: 902,
modalities: 'CT,SR',
displaySets: [
{
name: 'primary',
label: 'Primary',
studies: [studySimple],
displaySetInstanceUID: 'f69f6asdasd48c-223e-db7f-c4af-b8906641a66e',
description: 'Multiple line image series description lorem sit',
seriesNumber: 1,
numInstances: 68,
componentType: 'thumbnailTracked',
viewportIdentificator: 'A',
isTracked: true,
},
{
name: 'recent',
label: 'Recent',
studies: [studyWithSR, studySimple],
displaySetInstanceUID: 'f69f648c-223e-db7f-c4asdasdaf-b8906641a66e',
description: 'Multiple line image series description lorem sit',
seriesNumber: 1,
numInstances: 68,
componentType: 'thumbnailTracked',
viewportIdentificator: 'B',
},
{
name: 'all',
label: 'All',
studies: [studySimple, studyWithSR],
displaySetInstanceUID: 'f69f648c-223e-dasdasdb7f-c4af-b8906641a66e',
description: 'Multiple line image series description lorem sit',
seriesNumber: 1,
numInstances: 68,
componentType: 'thumbnailTracked',
},
];
return (
<div className="flex flex-1" style={{ height: '400px' }}>
<div className="overflow-hidden w-64">
<StudyBrowser
tabs={tabs}
activeTabName="primary"
expandedStudyInstanceUIDs={[]}
/>
</div>
</div>
);
{
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',
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
```jsx live
{
() => {
const [studyActive, setStudyActive] = useState(null);
return (
<div className="flex flex-1 items-center justify-center p-4">
<div className="w-56">
<StudyItem
studyInstanceUid="1"
date="07-Sept-2010"
description="CHEST/ABD/PELVIS W/CONTRAST"
numInstances={902}
modalities="CT,SR"
isActive={studyActive}
onClick={() => setStudyActive(studyActive === '1' ? null : '1')}
/>
</div>
function() {
const [studyActive, setStudyActive] = useState(null);
return (
<div className="flex flex-1 items-center justify-center p-4">
<div className="w-56">
<StudyItem
studyInstanceUid="1"
date="07-Sept-2010"
description="CHEST/ABD/PELVIS W/CONTRAST"
numInstances={902}
modalities="CT,SR"
isActive={studyActive}
onClick={() => setStudyActive(studyActive === '1' ? null : '1')}
/>
</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
```jsx live
{
() => {
const defaultFilterValues = {
patientName: '',
mrn: '',
studyDate: {
startDate: null,
endDate: null,
},
description: '',
modality: undefined,
accession: '',
sortBy: '',
sortDirection: 'none',
page: 0,
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>
);
function() {
const defaultFilterValues = {
patientName: '',
mrn: '',
studyDate: {
startDate: null,
endDate: null,
},
description: '',
modality: undefined,
accession: '',
sortBy: '',
sortDirection: 'none',
page: 0,
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>
);
}
```

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

@ -19,26 +19,24 @@ import { StudyListPagination } from '@ohif/ui';
## Basic usage
```jsx live
{
() => {
const [currentPage, setCurrentPage] = useState(1);
const [perPage, setPerPage] = useState(25);
const onChangePage = page => {
setCurrentPage(page);
};
const onChangePerPage = perPage => {
setPerPage(perPage);
setCurrentPage(1);
};
return (
<StudyListPagination
onChangePage={onChangePage}
onChangePerPage={onChangePerPage}
currentPage={currentPage}
perPage={perPage}
/>
);
function() {
const [currentPage, setCurrentPage] = useState(1);
const [perPage, setPerPage] = useState(25);
const onChangePage = page => {
setCurrentPage(page);
};
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
```jsx live
{
() => {
const studies = new Array(10).fill('');
const [expandedRows, setExpandedRows] = useState([]);
const tableDataSource = studies.map((study, key) => {
const rowKey = key + 1;
const isExpanded = expandedRows.some(k => k === rowKey);
return {
row: [
{ key: 'Cell 01', content: 'Cell 01', gridCol: 2 },
{ key: 'Cell 02', content: 'Cell 02', gridCol: 4 },
{ key: 'Cell 03', content: 'Cell 03', gridCol: 4 },
{ key: 'Cell 04', content: 'Cell 04', gridCol: 4 },
],
expandedContent: (
<td className="w-full p-8">
Custom expanded content for row {rowKey}
</td>
function() {
const studies = new Array(10).fill('');
const [expandedRows, setExpandedRows] = useState([]);
const tableDataSource = studies.map((study, key) => {
const rowKey = key + 1;
const isExpanded = expandedRows.some(k => k === rowKey);
return {
row: [
{ key: 'Cell 01', content: 'Cell 01', gridCol: 2 },
{ key: 'Cell 02', content: 'Cell 02', gridCol: 4 },
{ key: 'Cell 03', content: 'Cell 03', gridCol: 4 },
{ key: 'Cell 04', content: 'Cell 04', gridCol: 4 },
],
expandedContent: (
<td className="w-full p-8">
Custom expanded content for row {rowKey}
</td>
),
onClickRow: () =>
setExpandedRows(rows =>
isExpanded ? rows.filter(n => rowKey !== n) : [...rows, rowKey]
),
onClickRow: () =>
setExpandedRows(rows =>
isExpanded ? rows.filter(n => rowKey !== n) : [...rows, rowKey]
),
isExpanded,
};
});
return (
<div className="py-4">
<StudyListTable
tableDataSource={tableDataSource}
numOfStudies={studies.length}
/>
</div>
);
};
isExpanded,
};
});
return (
<div className="py-4">
<StudyListTable
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
{
() => {
return (
<div className="py-10 flex justify-center">
<ListMenu renderer={WindowLevelMenuItem} items={[]} />
</div>
);
};
function() {
return (
<div className="py-10 flex justify-center">
<ListMenu renderer={WindowLevelMenuItem} items={[]} />
</div>
);
}
```

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

@ -55,13 +55,15 @@ component across all application.
);
};
const ViewportActionButtons = () => {
const [dialogState, dialogApi] = useViewportDialog();
return (
<Button onClick={() => dialogApi.show({ content: ViewportNotification })}>
Open Dialog
</Button>
);
};
const [dialogState, dialogApi] = useViewportDialog();
return (
<Button onClick={() => dialogApi.show({ content: ViewportNotification })}>
Open Dialog
</Button>
);
};
}
return (
<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">