mario/ohif-viewer
2
0
Fork 0
Code Issues 7 Pull Requests Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
mario
2025-03-07 13:47:44 +07:00
commit c4efec5a14
3358 changed files with 303774 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
platform/ui/src/views/StudyList/components/Header.js Normal file
View File

@@ -0,0 +1,47 @@
import React from 'react';
import PropTypes from 'prop-types';
import { withTranslation } from 'react-i18next';
import { IconButton, Icon, NavBar } from '../../../components';
import OHIFLogo from './OHIFLogo';
function Header({ appLogo = OHIFLogo(), children, t }) {
const showSettingsDropdown = () => {
// TODO: Update once dropdown component is created
};
return (
<NavBar
className="justify-between"
isSticky
>
<div className="flex items-center">
<div className="mx-3">{appLogo}</div>
<div>{children}</div>
</div>
<div className="flex items-center">
<span className="text-common-light mr-3 text-lg">{t('FOR INVESTIGATIONAL USE ONLY')}</span>
<IconButton
variant="text"
color="inherit"
className="text-primary-active"
onClick={showSettingsDropdown}
>
<React.Fragment>
<Icon name="settings" />
<Icon name="chevron-down" />
</React.Fragment>
</IconButton>
</div>
</NavBar>
);
}
Header.propTypes = {
appLogo: PropTypes.node,
children: PropTypes.node,
t: PropTypes.func.isRequired,
};
export default withTranslation(['Header'])(Header);

12
platform/ui/src/views/StudyList/components/OHIFLogo.js Normal file
View File

@@ -0,0 +1,12 @@
import React from 'react';
import { Svg } from '../../../components';
function OHIFLogo() {
return (
<React.Fragment>
<Svg name="logo-ohif" />
</React.Fragment>
);
}
export default OHIFLogo;

2
platform/ui/src/views/StudyList/index.js Normal file
View File

@@ -0,0 +1,2 @@
import StudyList from './StudyList';
export default StudyList;

44
platform/ui/src/views/Viewer/Viewer.js Normal file
View File

@@ -0,0 +1,44 @@
import React from 'react';
import { LegacySidePanel, StudyBrowser } from '../../components';
import { DragAndDropProvider } from '../../contextProviders';
import Header from './components/Header';
const Viewer = () => {
return (
<DragAndDropProvider>
<div>
<Header />
<div
className="flex w-full flex-1 flex-row flex-nowrap items-stretch overflow-hidden"
style={{ height: 'calc(100vh - 52px' }}
>
<LegacySidePanel
side="left"
iconName="group-layers"
iconLabel="Studies"
componentLabel="Studies"
defaultIsOpen={true}
>
<StudyBrowser />
</LegacySidePanel>
<div className="h-100 bg-primary-main flex flex-1 items-center justify-center overflow-hidden text-white">
{/* <ViewportToolbar /> */}
<div>CONTENT</div>
</div>
<LegacySidePanel
side="right"
iconName="list-bullets"
iconLabel="Measure"
componentLabel="Measurements"
defaultIsOpen={false}
>
<div className="flex justify-center p-2 text-white">panel placeholder</div>
</LegacySidePanel>
</div>
</div>
</DragAndDropProvider>
);
};
export default Viewer;

42
platform/ui/src/views/Viewer/components/Header.js Normal file
View File

@@ -0,0 +1,42 @@
import React from 'react';
import { NavBar, Svg, Icon, IconButton } from '../../../components';
const Header = () => {
return (
<NavBar className="justify-between border-b-4 border-black">
<div className="flex flex-1 justify-between">
<div className="flex items-center">
<div className="mr-3 inline-flex items-center">
<Icon
name="chevron-left"
className="text-primary-active w-8 cursor-pointer"
onClick={() => alert('Navigate to previous page')}
/>
<a
href="#"
className="ml-4"
>
<Svg name="logo-ohif" />
</a>
</div>
</div>
<div className="flex items-center"></div>
<div className="flex items-center">
<span className="text-common-light mr-3 text-lg">FOR INVESTIGATIONAL USE ONLY</span>
<IconButton
variant="text"
color="inherit"
className="text-primary-active"
onClick={() => {}}
>
<React.Fragment>
<Icon name="settings" /> <Icon name="chevron-down" />
</React.Fragment>
</IconButton>
</div>
</div>
</NavBar>
);
};
export default Header;

2
platform/ui/src/views/Viewer/index.js Normal file
View File

@@ -0,0 +1,2 @@
import Viewer from './Viewer';
export default Viewer;

75
platform/ui/src/views/Viewer/studyBrowserMockData.js Normal file
View File

@@ -0,0 +1,75 @@
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',
isTracked: true,
},
{
displaySetInstanceUID: 'f69f648c-223e-db7f-c4asdasdaf-b8906641a66e',
description: 'Multiple line image series description lorem sit',
seriesNumber: 1,
numInstances: 68,
componentType: 'thumbnailTracked',
},
{
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',
label: 'Primary',
studies: [studySimple],
},
{
name: 'recent',
label: 'Recent',
studies: [studyWithSR, studySimple],
},
{
name: 'all',
label: 'All',
studies: [studySimple, studyWithSR],
},
];
export { tabs };

4
platform/ui/src/views/index.js Normal file
View File

@@ -0,0 +1,4 @@
import StudyList from './StudyList';
import Viewer from './Viewer';
export { StudyList, Viewer };