ohif-viewer/platform/ui/src/views/Viewer/Viewer.mdx

---
name: Viewer
menu: Views
route: examples/viewer
---

import { Playground, Props } from 'docz';
import {
  NavBar,
  SidePanel,
  Svg,
  MeasurementsPanel,
  SegmentationTable,
  ButtonGroup,
  Button,
  Icon,
  IconButton,
  StudyBrowser,
  ViewportActionBar,
  ViewportGrid,
  Notification,
} from '@ohif/ui';

import Header from './components/Header';
import ViewportToolbar from './components/ViewportToolBar';

import { tabs } from './studyBrowserMockData';

# Viewer

<Playground>
  {() => {
    const [activeMeasurementItem, setActiveMeasurementItem] = useState(null);
    const descriptionData = {
      date: '07-Sep-2010',
      modality: 'CT',
      description: 'CHEST/ABD/PELVIS W CONTRAST',
    };
    const measurementTableData = {
      title: 'Measurements',
      amount: 10,
      data: new Array(10).fill({}).map((el, i) => ({
        id: i + 1,
        label: 'Label short description',
        displayText: '24.0 x 24.0 mm (S:4, I:22)',
        isActive: activeMeasurementItem === i + 1,
      })),
      onClick: (id) => setActiveMeasurementItem((s) => (s === id ? null : id)),
      onEdit: (id) => alert(`Edit: ${id}`),
    };
    return (
      <div>
        <Header />
        <div
          className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full"
          style={{ height: 'calc(100vh - 57px' }}
        >
          <SidePanel
            side="left"
            iconName="group-layers"
            iconLabel="Studies"
            componentLabel="Studies"
            defaultIsOpen={true}
          >
            <StudyBrowser tabs={tabs} />
          </SidePanel>
          <div className="flex flex-col flex-1 h-100">
            <div className="flex flex-2 w-100 border-b border-transparent h-12">
              <ViewportToolbar />
            </div>
            <div className="flex flex-1 h-full overflow-hidden bg-black items-center justify-center">
              <ViewportGrid
                rows={1}
                cols={2}
                viewportContents={[
                  <div className="flex flex-col h-full">
                    <ViewportActionBar isTracked modality="CT" />
                    <Notification
                      text="Track all measurement for this series?"
                      type="info"
                      actionButtons={
                        <div>
                          <Button>No</Button>
                          <Button className="ml-2">No, do not ask again</Button>
                          <Button className="ml-2" color="primary">
                            Yes
                          </Button>
                        </div>
                      }
                    />
                  </div>,
                  <div className="flex flex-col h-full">
                    <ViewportActionBar isTracked={false} modality="CT" />
                  </div>,
                ]}
                setActiveViewportIndex={setActiveViewportIndex}
                activeViewportIndex={activeViewportIndex}
              />
            </div>
          </div>
          <SidePanel
            side="right"
            iconName="list-bullets"
            iconLabel="Measure"
            componentLabel="Measurements"
            defaultIsOpen={true}
          >
            <MeasurementsPanel
              descriptionData={descriptionData}
              measurementTableData={measurementTableData}
              actionButtons={
                <>
                  <ButtonGroup onClick={() => alert('Export')}>
                    <Button
                      className="text-white border-primary-main bg-black text-base py-2 px-2"
                      size="initial"
                      color="inherit"
                    >
                      Export
                    </Button>
                    <IconButton
                      className="bg-black border-primary-main px-2 text-white px-2"
                      color="inherit"
                      size="initial"
                    >
                      <Icon name="arrow-down" />
                    </IconButton>
                  </ButtonGroup>
                  <Button
                    className="text-white border border-primary-main bg-black text-base py-2 px-2 ml-2"
                    variant="outlined"
                    size="initial"
                    color="inherit"
                    onClick={() => alert('Create Report')}
                  >
                    Create Report
                  </Button>
                </>
              }
            />
          </SidePanel>
        </div>
      </div>
    );
  }}
</Playground>