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

import { useState } from 'react';
import { Playground, Props } from 'docz';
import {
  NavBar,
  SidePanel,
  Svg,
  SegmentationTable,
  ButtonGroup,
  Button,
  Icon,
  IconButton,
  StudyBrowser,
  ViewportActionBar,
  Notification,
  DragAndDropProvider,
  Viewport,
  ViewportGrid,
  ViewportPane,
} from '../../components';

import Header from './components/Header';

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}`),
    };
    const [activeViewportIndex, setActiveViewportIndex] = useState(0);
    return (
      <DragAndDropProvider>
        <Header />
        <div
          className="flex flex-row flex-no-wrap items-stretch overflow-hidden w-full"
          style={{ height: 'calc(100vh - 57px' }}
        >
          {/* LEFT SIDEPANELS */}
          <SidePanel
            side="left"
            defaultComponentOpen='studies'
            childComponents={{
              iconName: 'group-layers',
              iconLabel: 'Studies',
              label: 'Studies',
              name: 'studies',
              content: (
                <StudyBrowser tabs={tabs} />
              )
            }}
          />
          {/* TOOLBAR + GRID */}
          <div className="flex flex-col flex-1 h-full">
            <div className="flex flex-2 w-100 border-b border-transparent h-12">
              {/* <ViewportToolbar /> Secondary Toolbar */}
            </div>
            {/* VIEWPORT GRID CONTAINER */}
            <div className="flex flex-1 h-full overflow-hidden bg-black items-center justify-center pb-2 pt-1">
              <ViewportGrid numRows={1} numCols={2}>
                {[0, 1].map(viewportIndex => (
                  <ViewportPane key={viewportIndex} className="m-1" isActive={false} onDrop={() => {}}>
                    <Viewport
                      viewportIndex={viewportIndex}
                      onSeriesChange={(direction) => alert(`Series ${direction}`)}
                      studyData={{
                        label: 'A',
                        isTracked: true,
                        isLocked: false,
                        studyDate: '07-Sep-2011',
                        currentSeries: 1,
                        seriesDescription:
                          'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ',
                        modality: 'CT',
                        patientInformation: {
                          patientName: 'Smith, Jane',
                          patientSex: 'F',
                          patientAge: '59',
                          MRN: '10000001',
                          thickness: '5.0mm',
                          spacing: '1.25mm',
                          scanner: 'Aquilion',
                        },
                      }}
                    >
                      <div className="flex justify-center items-center h-full">
                        CONTENT
                      </div>
                    </Viewport>
                  </ViewportPane>)
                )}
              </ViewportGrid>
            </div>
          </div>
          <SidePanel
            side="right"
            defaultComponentOpen="measurements"
            childComponents={{
              iconName: 'list-bullets',
              iconLabel: 'Measure',
              label: 'Measurements',
              name: 'measurements',
              content: (
                <>
                  <div className="overflow-x-hidden overflow-y-auto invisible-scrollbar">
                    <StudySummary
                      date={descriptionData.date}
                      modality={descriptionData.modality}
                      description={descriptionData.description}
                    />
                    <MeasurementTable
                      title="Measurements"
                      amount={measurementTableData.data.length}
                      data={measurementTableData.data}
                      onClick={() => {}}
                      onEdit={id => alert(`Edit: ${id}`)}
                    />
                  </div>
                  <div className="flex justify-center p-4">
                    <React.Fragment>
                      <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>
                    </React.Fragment>
                  </div>
                </>
              )
            }}
          />
        </div>
      </DragAndDropProvider>
    );
  }}
</Playground>