OHIF Viewer

https://docs.ohif.org
Admin
The OHIF Viewer is an open-source, web-based medical imaging platform that provides a core framework...
Tokens:55,376
Snippets:745
Trust Score:9
Update:3 months ago
Show doc for...
Tokens:
Raw
### Start Development Server

Source: https://docs.ohif.org/development/getting-started

Commands to install dependencies and launch the local development environment.

```bash
# Restore dependencies  

yarn install --frozen-lockfile  

  

# Start local development server  

yarn run dev  
```

--------------------------------

### Launch OHIF Viewer with Azure Config

Source: https://docs.ohif.org/deployment/azure

Commands to install dependencies and start the development server using a specific configuration file.

```bash
cd OHIFViewer

yarn install --frozen-lockfile

APP_CONFIG=config/azure.js yarn run dev
```

--------------------------------

### Start Docker Services

Source: https://docs.ohif.org/deployment/user-account-control

Command to build and start the containerized services.

```bash
docker-compose up --build  
```

--------------------------------

### Run OHIF Viewer with Google Cloud Configuration

Source: https://docs.ohif.org/deployment/google-cloud-healthcare

Commands to install dependencies and start the development server using the Google Cloud configuration file.

```bash
cd OHIFViewer  

yarn install --frozen-lockfile  

APP_CONFIG=config/google.js yarn run dev  
```

--------------------------------

### Build and Run with Simple Setup

Source: https://docs.ohif.org/deployment/custom-url-access

Commands to build and run the viewer when assets are served from the root.

```bash
APP_CONFIG=config/myConfig.js yarn build
```

```bash
APP_CONFIG=config/myConfig.js yarn dev
```

--------------------------------

### List installed plugins

Source: https://docs.ohif.org/development/ohif-cli

Lists all installed extensions and modes by reading the PluginConfig.json file.

```bash
yarn run cli list
```

--------------------------------

### Initialize Nginx-Orthanc Services

Source: https://docs.ohif.org/deployment/nginx--image-archive

Commands to navigate to the recipe directory and start the Docker services.

```bash
cd platform/app/.recipes/Nginx-Orthanc
docker-compose up --build
```

--------------------------------

### Deploying with Surge.sh

Source: https://docs.ohif.org/deployment/static-assets

Install the Surge CLI globally and run the deployment command from your build directory.

```bash
# Add surge command  

yarn global add surge  

  

# In the build directory  

surge  
```

--------------------------------

### Start viewer with e2e configuration

Source: https://docs.ohif.org/development/testing

Launches the OHIF viewer using the specific end-to-end configuration file.

```bash
APP_CONFIG=config/e2e.js yarn start
```

--------------------------------

### Check Docker Version

Source: https://docs.ohif.org/deployment/nginx--image-archive

Verify that Docker is installed on your system.

```bash
docker --version
```

--------------------------------

### Restore Dependencies and Build

Source: https://docs.ohif.org/deployment/build-for-production

Configure yarn workspaces, install dependencies, and compile the source code for production.

```bash

# If you haven't already, enable yarn workspaces  

yarn config set workspaces-experimental true  

  

# Restore dependencies  

yarn install --frozen-lockfile  

  

# Build source code for production  

yarn run build  


```

--------------------------------

### Add an OHIF extension

Source: https://docs.ohif.org/development/ohif-cli

Installs an OHIF extension from the NPM registry into the Viewer.

```bash
yarn run cli add-extension <packageName> [version]
```

--------------------------------

### Define a Mode Configuration

Source: https://docs.ohif.org/migration-guide/from-v2

Example of defining extension modules and a mode factory to configure layout, panels, and viewports.

```javascript


const ohif = {  

  layout: '@ohif/extension-default.layoutTemplateModule.viewerLayout',  

  sopClassHandler: '@ohif/extension-default.sopClassHandlerModule.stack',  

  measurements: '@ohif/extension-default.panelModule.measure',  

  thumbnailList: '@ohif/extension-default.panelModule.seriesList',  

};  

  

const cs3d = {  

  viewport: '@ohif/extension-cornerstone.viewportModule.cornerstone',  

};  

  

const tmtv = {  

  hangingProtocol: '@ohif/extension-tmtv.hangingProtocolModule.ptCT',  

  petSUV: '@ohif/extension-tmtv.panelModule.petSUV',  

  ROIThresholdPanel: '@ohif/extension-tmtv.panelModule.ROIThresholdSeg',  

};  

  

function modeFactory({ modeConfiguration }) {  

  routes: [  

    {  

      path: 'tmtv',  

      layoutTemplate: ({ location, servicesManager }) => {  

        return {  

          id: ohif.layout,  

          props: {  

            // leftPanels: [ohif.thumbnailList],  

            rightPanels: [tmtv.ROIThresholdPanel, tmtv.petSUV],  

            viewports: [  

              {  

                namespace: cs3d.viewport,  

                displaySetsToDisplay: [ohif.sopClassHandler],  

              },  

            ],  

          },  

        };  

      },  

    },  

  ],  

}  



```

--------------------------------

### Define Dynamic Configuration

Source: https://docs.ohif.org/configuration/configurationFiles

Example configuration object for enabling and restricting dynamic configuration loading.

```javascript
dangerouslyUseDynamicConfig: {  

  enabled: false,  

  regex: /.*/  

}  
```

--------------------------------

### Numeric Component Usage Examples

Source: https://docs.ohif.org/components/numeric

Demonstrates how to implement different input modes using the Numeric.Container and its sub-components.

```javascript
import { Numeric } from '@ohif/ui-next';

// Number input
<Numeric.Container mode="number" min={0} max={10}>
  <Numeric.Label>Width</Numeric.Label>
  <Numeric.NumberInput />
</Numeric.Container>

// Stepper
<Numeric.Container mode="stepper" min={1} max={30} defaultValue={1}>
  <Numeric.Label>Frame</Numeric.Label>
  <Numeric.NumberStepper direction="horizontal" />
</Numeric.Container>

// Single range slider
<Numeric.Container mode="singleRange" min={0} max={100}>
  <Numeric.Label>Opacity</Numeric.Label>
  <Numeric.SingleRange showNumberInput />
</Numeric.Container>

// Double range slider
<Numeric.Container mode="doubleRange" min={-1000} max={3000} step={10}>
  <Numeric.Label showValue>CT Window</Numeric.Label>
  <Numeric.DoubleRange showNumberInputs />
</Numeric.Container>
```

--------------------------------

### Install @ohif/i18n package

Source: https://docs.ohif.org/platform/internationalization

Use yarn or npm to add the internationalization package to your project.

```bash
yarn add @ohif/i18n
```

```bash
npm install --save @ohif/i18n
```

--------------------------------

### Customize Docker Build with Arguments

Source: https://docs.ohif.org/deployment/docker

Examples of using build arguments to configure the OHIF Viewer image during the build process.

```bash
docker build . --build-arg PUBLIC_URL=/ohif/  
```

```bash
docker build . --build-arg APP_CONFIG=config/kheops.js  
```

```bash
docker build . --build-arg PORT=6000  
```

```bash
docker build . --build-arg PUBLIC_URL=/ohif/ --build-arg APP_CONFIG=config/kheops.js --build-arg PORT=6000  
```

--------------------------------

### Run unit tests

Source: https://docs.ohif.org/development/testing

Executes the unit test suite and generates a detailed report. Ensure all packages are installed via yarn install --frozen-lockfile before running.

```bash
yarn run test:unit:ci
```

--------------------------------

### Proxy Configuration for Local Development

Source: https://docs.ohif.org/deployment/custom-url-access

Example proxy rewrite configuration to handle relative asset paths during development.

```javascript
proxy: {  

  '/dicom-microscopy-viewer': {  

    target: 'http://localhost:3000',  

    pathRewrite: {  

      '^/dicom-microscopy-viewer': `/${PUBLIC_URL}/dicom-microscopy-viewer`,  

    },  

  },  

}
```

--------------------------------

### Manage Docker Services

Source: https://docs.ohif.org/deployment/nginx--image-archive

Commands for starting services in detached mode or rebuilding after configuration changes.

```bash
docker-compose up -d
docker-compose up --build
```

--------------------------------

### Custom Mode Initialization Pattern

Source: https://docs.ohif.org/platform/modes/routes

Example of a custom init function that subscribes to display set events to perform additional logic, such as fetching measurements.

```javascript
init: async ({  

  servicesManager,  

  extensionManager,  

  hotkeysManager,  

  dataSource,  

  studyInstanceUIDs,  

}) => {  

  const { DisplaySetService } = servicesManager.services;  

  

  /**  

  ...  

  **/  

  

  const onDisplaySetsAdded = ({ displaySetsAdded, options }) => {  

    const displaySet = displaySetsAdded[0];  

    const { SeriesInstanceUID } = displaySet;  

  

    const toolData = myServer.fetchMeasurements(SeriesInstanceUID);  

  

    if (!toolData.length) {  

      return;  

    }  

  

    toolData.forEach(tool => {  

      const instance = displaySet.images.find(  

        image => image.SOPInstanceUID === tool.SOPInstanceUID  

      );  

    });  

  

    MeasurementService.addMeasurement(/**...**/);  

  };  

  

  // subscription to the DISPLAY_SETS_ADDED  

  const { unsubscribe } = DisplaySetService.subscribe(  

    DisplaySetService.EVENTS.DISPLAY_SETS_ADDED,  

    onDisplaySetsAdded  

  );  

  

  /**  

  ...  

  **/  

  

  return unsubscriptions;  

};  
```

--------------------------------

### Run the OHIF Docker container

Source: https://docs.ohif.org/deployment/docker

Starts the container in the background and maps the host port to the container's nginx port.

```bash
docker run -d -p 3000:80/tcp --name ohif-viewer-container ohif-viewer-image
```

--------------------------------

### Configure OHIF Resolutions for dicom-microscopy-viewer

Source: https://docs.ohif.org/development/link

Example of updating the root package.json in OHIF to link the dicom-microscopy-viewer package.

```json
  ...  

  "resolutions": {  

    "commander": "8.3.0",  

    "path-to-regexp": "0.1.12",  

    "dicom-microscopy-viewer": "link:dicom-microscopy-viewer",  

    ...  

  },  

  ...  
```

--------------------------------

### Configure OHIF Resolutions for Cornerstone3D

Source: https://docs.ohif.org/development/link

Example of updating the root package.json in OHIF to link Cornerstone3D packages.

```json
  ...  

  "resolutions": {  

    "commander": "8.3.0",  

    "path-to-regexp": "0.1.12",  

    "@cornerstonejs/core": "link:@cornerstonejs/core",  

    "@cornerstonejs/tools": "link:@cornerstonejs/tools",  

    ...  

  },  

  ...  
```

--------------------------------

### Defining Language File Structure

Source: https://docs.ohif.org/platform/internationalization

Example directory structure for extending languages within the locales folder.

```text

 |-- src  

    |-- locales  

    index.js  

        |-- en  

            |-- Buttons.json  

            index.js  

            | UK  

               |-- Buttons.js  

               index.js  

            | US  

               |-- Buttons.js  

               index.js  

  ...  


```

--------------------------------

### Run OHIF Docker Container

Source: https://docs.ohif.org/deployment/docker

Commands to start the OHIF Viewer container using pre-built images from Docker Hub.

```bash
#  beta version  

docker run -d -p 3000:80 ohif/app:v3.10.0-beta.33  

  

# release version  

docker run -d -p 3000:80 ohif/app:v3.9.2  
```

--------------------------------

### Add an OHIF mode

Source: https://docs.ohif.org/development/ohif-cli

Installs a mode from the NPM registry and its peer dependency extensions. Requires the package to have 'ohif-mode' as a keyword.

```bash
yarn run cli add-mode <packageName> [version]
```

```bash
yarn run cli add-mode @ohif-test/mode-clock
```

--------------------------------

### Token Authentication via URL Query String

Source: https://docs.ohif.org/deployment/authorization

Example URL format for passing an authentication token via the query string, which the viewer automatically processes and removes.

```text
http://localhost:3000/viewer?StudyInstanceUIDs=1.2.3.4.5.6.6.7&token=e123125jsdfahsdf  
```

--------------------------------

### Implement HoverCard components

Source: https://docs.ohif.org/components/hover-card

Examples demonstrating basic usage, a card-based layout for data sources, and side-positioned cards for segmentation statistics.

```tsx
import {
  HoverCard, HoverCardTrigger, HoverCardContent,
  Card, CardHeader, CardTitle, CardContent, CardDescription,
  Button, Icons,
} from '@ohif/ui-next';

// Basic hover card
<HoverCard>
  <HoverCardTrigger asChild>
    <Button variant="link">Hover me</Button>
  </HoverCardTrigger>
  <HoverCardContent>
    <p>Rich preview content here.</p>
  </HoverCardContent>
</HoverCard>

// With Card inside (data source pattern)
<HoverCard>
  <HoverCardTrigger asChild>
    <Button variant="ghost" size="sm">
      <Icons.CloudSettings className="h-5 w-5" />
      Source
    </Button>
  </HoverCardTrigger>
  <HoverCardContent align="center" className="w-72 p-0">
    <Card className="border-0 shadow-none">
      <CardHeader className="p-3 pb-1">
        <CardDescription>Server configuration details</CardDescription>
      </CardHeader>
      <CardContent className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 p-3 pt-0 text-sm">
        <span className="text-muted-foreground">Project</span>
        <span>my-project</span>
      </CardContent>
    </Card>
  </HoverCardContent>
</HoverCard>

// Side positioning (segmentation list pattern)
<HoverCard openDelay={300} closeDelay={200}>
  <HoverCardTrigger asChild>
    <div>{/* DataRow or other trigger */}</div>
  </HoverCardTrigger>
  <HoverCardContent side="left" align="start" className="w-64 p-0">
    {/* Statistics card */}
  </HoverCardContent>
</HoverCard>
```

--------------------------------

### Create a New Extension

Source: https://docs.ohif.org/development/ohif-cli

Initialize a new extension template in a specified directory.

```bash
yarn run cli create-extension
```

--------------------------------

### Set Up CS3D Worktree Locally

Source: https://docs.ohif.org/development/cs3d-integration

Use the link script from the cornerstone3D repository to create a git worktree for local development.

```bash
# From your cornerstone3D repo:  

bun run link:cs3d /path/to/ohif main  

# or with a specific branch:  

bun run link:cs3d /path/to/ohif origin:feat/my-feature
```

--------------------------------

### Build and Serve with Custom Asset Path

Source: https://docs.ohif.org/deployment/custom-url-access

Commands and configuration for building and serving the viewer when assets are hosted at a custom location.

```bash
PUBLIC_URL=/my-private-assets/ APP_CONFIG=config/myConfig.js yarn build
```

```json
{

  "rewrites": [{ "source": "*", "destination": "/abc/index.html" }]

}
```

```bash
cd platform/app  

mv dist abc  # Rename dist folder to match your viewer route  

npx serve -c ./public/serve.json
```

--------------------------------

### Test Build Output Locally

Source: https://docs.ohif.org/deployment/build-for-production

Serve the production build locally using a web server to verify the application.

```bash

# Install http-server as a globally available package  

yarn global add http-server  

  

# Change the directory to the platform/app  

cd platform/app  

  

# Serve the files in our current directory  

npx serve ./dist -c ../public/serve.json  


```

--------------------------------

### Serve OHIF Build Locally

Source: https://docs.ohif.org/deployment/iframe

Commands to serve the build directory locally for testing the iframe integration.

```bash
npx http-server unzipped-folder

# you can use npx serve ./dist -c ../public/serve.json as an alternative to http-server
```

--------------------------------

### Display CLI Help

Source: https://docs.ohif.org/development/ohif-cli

View the list of available commands and options for the OHIF CLI.

```bash
yarn run cli --help
```

--------------------------------

### Update DICOMweb Submodule

Source: https://docs.ohif.org/development/testing

Commands to install the conversion tool and generate DICOMweb data from local DICOM files.

```bash
npm install -g dicomp10-to-dicomweb

mkdicomweb -d dicomweb dcm
```

--------------------------------

### Basic Button Usage

Source: https://docs.ohif.org/components/button

Demonstrates importing the Button component and applying different variants and sizes.

```javascript
import { Button } from '@ohif/ui-next';

<Button variant="default">Click me</Button>
<Button variant="ghost" size="sm">Settings</Button>
<Button variant="destructive">Delete</Button>
```

--------------------------------

### Link dicom-microscopy-viewer Locally

Source: https://docs.ohif.org/development/link

Commands to execute in the local dicom-microscopy-viewer directory to prepare it for linking.

```bash
# In the local dicom-microscopy-viewer directory  

bun unlink  

bun link  

bun webpack:dynamic-import:watch  
```

--------------------------------

### Use useViewportSegmentations in a Component

Source: https://docs.ohif.org/platform/hooks/useViewportSegmentations

Example of using the hook to retrieve and display segmentation data within a React component.

```javascript
function SegmentationPanel({ viewportId }) {  

  const { segmentationsWithRepresentations, disabled } = useViewportSegmentations({  

    viewportId,  

    subscribeToDataModified: true,  

    debounceTime: 100,  

  });  

  

  if (disabled) {  

    return <div>Segmentations not available for this modality</div>;  

  }  

  

  if (!segmentationsWithRepresentations.length) {  

    return <div>No segmentations available</div>;  

  }  

  

  return (  

    <div>  

      {segmentationsWithRepresentations.map(({ segmentation, representation }) => (  

        <div key={segmentation.id}>  

          <h3>{segmentation.label}</h3>  

          {Object.entries(segmentation.segments).map(([segmentIndex, segment]) => (  

            <div key={segmentIndex}>  

              <h4>{segment.label}</h4>  

              {segment.displayText.primary.map((text, i) => (  

                <p key={i}>{text}</p>  

              ))}  

            </div>  

          ))}  

        </div>  

      ))}  

    </div>  

  );  

}  
```

--------------------------------

### Search for plugins

Source: https://docs.ohif.org/development/ohif-cli

Searches the NPM registry for OHIF extensions and modes. Use the --verbose flag for detailed information.

```bash
yarn run cli search [--verbose]
```

--------------------------------

### Configure Toolbar Button in OHIF v3

Source: https://docs.ohif.org/migration-guide/from-v2

Example of defining a button using the ohif.radioGroup type within a mode configuration.

```javascript
// toolbar button
{

  id: 'Zoom',

  type: 'ohif.radioGroup',

  props: {

    type: 'tool',

    icon: 'tool-zoom',

    label: 'Zoom',

    commands: _createSetToolActiveCommands('Zoom'),

  },

},
```

--------------------------------

### Link Cornerstone3D Locally

Source: https://docs.ohif.org/development/link

Commands to execute in the local Cornerstone3D package directory to prepare it for linking.

```bash
# In cornerstone/packages/core  

bun unlink  

bun link  

bun dev  
```

--------------------------------

### Create a New Mode

Source: https://docs.ohif.org/development/ohif-cli

Initialize a new mode template in a specified directory. The command prompts for metadata to populate the package.json file.

```bash
yarn run cli create-mode
```

--------------------------------

### Methods for Setting Environment Variables

Source: https://docs.ohif.org/platform/environment-variables

Common approaches for defining environment variables during the build process.

```text
npx cross-env
```

```text
.env files
```

```text
env variables on build machine, or for terminal session
```

--------------------------------

### Clone the Repository

Source: https://docs.ohif.org/deployment/build-for-production

Use Git to download the OHIF Viewer source code to your local machine.

```bash

# Clone the remote repository to your local machine  

git clone https://github.com/OHIF/Viewers.git  


```

--------------------------------

### Mount Nginx Volumes in Docker Compose

Source: https://docs.ohif.org/deployment/nginx--image-archive

Example configuration for mounting Nginx configuration and log files within the Docker Compose file.

```yaml
volumes:  

  # Nginx config  

  - ./config/nginx.conf:/etc/nginx/nginx.conf  

  # Logs  

  - ./logs/nginx:/var/logs/nginx
```

--------------------------------

### Implement a basic Dialog component

Source: https://docs.ohif.org/components/dialog

Standard implementation using the @ohif/ui-next library components to create a modal with a header, description, and footer actions.

```jsx
import {
  Dialog, DialogTrigger, DialogContent,
  DialogHeader, DialogFooter,
  DialogTitle, DialogDescription, DialogClose,
} from '@ohif/ui-next';

<Dialog>
  <DialogTrigger asChild>
    <Button>Open</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Title</DialogTitle>
    </DialogHeader>
    <DialogDescription>Description text.</DialogDescription>
    <DialogFooter>
      <DialogClose asChild>
        <Button variant="ghost">Cancel</Button>
      </DialogClose>
      <DialogClose asChild>
        <Button>Confirm</Button>
      </DialogClose>
    </DialogFooter>
  </DialogContent>
</Dialog>
```

--------------------------------

### Link a Mode

Source: https://docs.ohif.org/development/ohif-cli

Link a local OHIF mode to the Viewer for development purposes.

```bash
yarn run cli link-mode <modeDir>
```

--------------------------------

### Clone and Configure Repository

Source: https://docs.ohif.org/development/getting-started

Commands to clone the repository and set up the upstream remote for a triangular workflow.

```bash
git clone https://github.com/YOUR-USERNAME/Viewers
```

```bash
git remote add upstream https://github.com/OHIF/Viewers.git
```

--------------------------------

### Default Route Initialization Logic

Source: https://docs.ohif.org/platform/modes/routes

Pseudocode representing the default initialization process, including metadata retrieval and event subscriptions for display sets and hanging protocols.

```javascript
async function defaultRouteInit({  

  servicesManager,  

  studyInstanceUIDs,  

  dataSource,  

}) {  

  const {  

    DisplaySetService,  

    HangingProtocolService,  

  } = servicesManager.services;  

  

  // subscribe to run the function after the event happens  

  DicomMetadataStore.subscribe(  

    'instancesAdded',  

    ({ StudyInstanceUID, SeriesInstanceUID }) => {  

      const seriesMetadata = DicomMetadataStore.getSeries(  

        StudyInstanceUID,  

        SeriesInstanceUID  

      );  

      DisplaySetService.makeDisplaySets(seriesMetadata.instances);  

    }  

  );  

  

  studyInstanceUIDs.forEach(StudyInstanceUID => {  

    dataSource.retrieve.series.metadata({ StudyInstanceUID });  

  });  

  

  DicomMetadataStore.subscribe('seriesAdded', ({ StudyInstanceUID }) => {  

    const studyMetadata = // get study metadata and displaySets  

    HangingProtocolService.run({studies, displaySets, activeStudy});  

  });  

  

  return unsubscriptions;  

}  
```

--------------------------------

### View Build Output Structure

Source: https://docs.ohif.org/deployment/build-for-production

The expected file structure within the dist directory after a successful build.

```text

├── app-config.js  

├── app.bundle.js  

├── app.css  

├── index.html  

├── manifest.json  

├── service-worker.js  

└── ...  


```

--------------------------------

### Configure nginx port during build

Source: https://docs.ohif.org/deployment/docker

Bakes the port configuration into the image and runs it with the updated port mapping.

```bash
docker build . --build-arg PORT=8080
```

```bash
docker run -d -p 3000:8080/tcp --name ohif-viewer-container ohif-viewer-image
```

--------------------------------

### Mount configuration file as a volume

Source: https://docs.ohif.org/deployment/docker

Mounts a local configuration file into the container at runtime. Ensure the local path is absolute.

```bash
docker run -d -p 3000:80/tcp -v /path/to/config/file.js:/usr/share/nginx/html/app-config.js --name ohif-viewer-container ohif-viewer-image
```

--------------------------------

### Build production assets

Source: https://docs.ohif.org/development/getting-started

Generates static assets for hosting the OHIF PWA.

```bash
yarn run build
```

--------------------------------

### Implement PanelSection with default and collapsed states

Source: https://docs.ohif.org/components/panel-section

Demonstrates how to import and use the PanelSection component, including both default-open and default-closed configurations.

```javascript
import { PanelSection } from '@ohif/ui-next';

<PanelSection defaultOpen>
  <PanelSection.Header>Series Information</PanelSection.Header>
  <PanelSection.Content>
    <div className="p-2 text-sm text-muted-foreground">
      <div>Images: 120</div>
      <div>Modality: MR</div>
    </div>
  </PanelSection.Content>
</PanelSection>

// Collapsed by default
<PanelSection defaultOpen={false}>
  <PanelSection.Header>Advanced Settings</PanelSection.Header>
  <PanelSection.Content>
    {/* Tool configuration controls */}
  </PanelSection.Content>
</PanelSection>
```

--------------------------------

### Import useViewportSegmentations

Source: https://docs.ohif.org/platform/hooks/useViewportSegmentations

Import the hook from the @ohif/extension-cornerstone package.

```javascript
import { useViewportSegmentations } from '@ohif/extension-cornerstone';
```

--------------------------------

### Navigate to DCM4CHEE Directory

Source: https://docs.ohif.org/deployment/user-account-control

Path to the directory required for setting up DCM4CHEE.

```text
platform\app\.recipes\Nginx-Dcm4chee-Keycloak
```

--------------------------------

### Configure Yarn Workspaces

Source: https://docs.ohif.org/development/getting-started

Enable experimental yarn workspaces required for the project structure.

```bash
yarn config set workspaces-experimental true
```

--------------------------------

### Define toolbar buttons and sections

Source: https://docs.ohif.org/migration-guide/from-3p7-to-3p8

Use addButtons and createButtonSection to configure toolbar layout.

```javascript
toolbarService.addButtons([...toolbarButtons, ...moreTools]);  

toolbarService.createButtonSection("primary", [  

  "MeasurementTools",  

  "Zoom",  

  "WindowLevel",  

  "Pan",  

  "Capture",  

  "Layout",  

  "MPR",  

  "Crosshairs",  

  "MoreTools",  

]);
```

--------------------------------

### Basic Select Implementation

Source: https://docs.ohif.org/components/select

Standard implementation using Radix UI primitives. Requires importing the necessary components from @ohif/ui-next.

```tsx
import {
  Select, SelectTrigger, SelectContent,
  SelectItem, SelectValue,
} from '@ohif/ui-next';

<Select>
  <SelectTrigger className="w-[180px]">
    <SelectValue placeholder="Theme" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="light">Light</SelectItem>
    <SelectItem value="dark">Dark</SelectItem>
    <SelectItem value="system">System</SelectItem>
  </SelectContent>
</Select>
```

--------------------------------

### Implement prefetch call site

Source: https://docs.ohif.org/behaviours/segmentation-multiframe-part10-prefetch

Logic for checking configuration and executing the prefetch before segmentation creation.

```typescript
const loadMultiframeAsPart10 =  

  (dataSource?.getConfig?.()?.loadMultiframeAsPart10 as boolean | undefined) ??  

  (customizationService?.getCustomization?.(  

    'cornerstone.segmentation.loadMultiframeAsPart10'  

  ) as boolean | undefined) ??  

  true;  

  

let prefetch;  

if (loadMultiframeAsPart10) {  

  prefetch = dataSource.retrieve?.prefetchInstanceFrames?.({  

    instance,  

    imageId: segImageIdForMetadata,  

  });  

  if (prefetch?.done) {  

    // Wait for the bulk fetch to complete or fail — no timeout.  

    await prefetch.done;  

  }  

}  

  

try {  

  results = await adaptersSEG.Cornerstone3D.Segmentation.createFromDicomSegImageId(  

    imageIds,  

    segImageIdForMetadata,  

    { metadataProvider: metaData, tolerance, parserType, frameImageIds,  

      concurrency: SEG_FRAME_DECODE_CONCURRENCY }  

  );  

} finally {  

  eventTarget.removeEventListener(Enums.Events.SEGMENTATION_LOAD_PROGRESS, onProgress);  

  prefetch?.cancel?.();  

}
```

--------------------------------

### Configure Mode via modeFactory

Source: https://docs.ohif.org/configuration/configurationFiles

Demonstrates how to allow mode configuration overwrites by destructuring modeConfiguration within the mode factory function.

```javascript
function modeFactory({ modeConfiguration }) {  

  return {  

    id,  

    routeName: 'viewer',  

    displayName: 'Basic Viewer',  

    ...  

    onModeEnter: ({ servicesManager, extensionManager, commandsManager }) => {  

      ...  

    },  

    /**  

     * This mode allows its configuration to be overwritten by  

     * destructuring the modeConfiguration value from the mode fatory function  

     * at the end of the mode configuration definition.  

     */  

    ...modeConfiguration,  

  };  

}  
```

--------------------------------

### Implement a ToolButtonList

Source: https://docs.ohif.org/components/tool-button-list

Use this structure to pair a primary tool with a dropdown menu containing related tool items. Ensure all sub-components are imported from @ohif/ui-next.

```jsx
import {
  ToolButton, ToolButtonList, ToolButtonListDefault,
  ToolButtonListDropDown, ToolButtonListItem, ToolButtonListDivider,
} from '@ohif/ui-next';

<ToolButtonList>
  <ToolButtonListDefault>
    <ToolButton
      id="Length"
      icon="ToolLength"
      label="Length"
      tooltip="Length Tool"
      onInteraction={({ itemId }) => handleTool(itemId)}
    />
  </ToolButtonListDefault>
  <ToolButtonListDivider />
  <ToolButtonListDropDown>
    <ToolButtonListItem icon="ToolLength" onSelect={() => selectTool('Length')}>
      <span className="pl-1">Length</span>
    </ToolButtonListItem>
    <ToolButtonListItem icon="ToolBidirectional" onSelect={() => selectTool('Bidirectional')}>
      <span className="pl-1">Bidirectional</span>
    </ToolButtonListItem>
  </ToolButtonListDropDown>
</ToolButtonList>
```
Tokens:
Raw