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

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

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

# Viewer

<Playground>
  {() => {
    const measurementTableData = {
      title: 'Measurements',
      amount: 10,
      data: new Array(10).fill(''),
    };
    const segmentationTableData = {
      title: 'Segments',
      amount: 12,
      data: new Array(12).fill(''),
    };
    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 />
          </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={false}
          >
            <div className="overflow-y-auto overflow-x-hidden invisible-scrollbar">
              <div className="p-2">
                <div className="leading-none">
                  <span className="text-white text-base mr-2">07-Sep-2010</span>
                  <span className="px-1 text-black bg-common-bright text-base rounded-sm font-bold">
                    CT
                  </span>
                </div>
                <div className="leading-none">
                  <span className="text-base text-primary-light">
                    CHEST/ABD/PELVIS W CONTRAST
                  </span>
                </div>
              </div>
              <MeasurementTable {...measurementTableData} />
              <SegmentationTable {...segmentationTableData} />
            </div>
            <div className="p-4 flex justify-center">
              <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>
            </div>
          </SidePanel>
        </div>
      </div>
    );
  }}
</Playground>