diff --git a/platform/docs/docs/README.md b/platform/docs/docs/README.md
index 6dccdd483..749c38bd6 100644
--- a/platform/docs/docs/README.md
+++ b/platform/docs/docs/README.md
@@ -17,8 +17,7 @@ sidebar_position: 1
> ATTENTION! You are looking at the docs for the `OHIF-v3` Viewer (third time is always a charm). If you're looking for the our `OHIF-v2` (React stable version) or OHIF-v1 (deprecated `Meteor` version) select it's version from the dropdown box in the top left corner
> of this page.
-
-# Introduction
+
The [Open Health Imaging Foundation][ohif-org] (OHIF) Viewer is an open source,
web-based, medical imaging viewer. It can be configured to connect to Image
@@ -100,13 +99,13 @@ Below, you can find the gap analysis between the `OHIF-v2` and `OHIF-v3`:
Internationalization
-
π
-
Not Started
+
β
+
Drag/drop DICOM data into the viewer (see https://viewer.ohif.org/local)
-
π
-
Not Started
+
β
+
IHE Invoke Image Display - Standard-compliant launching of the viewer (e.g. from PACS or RIS)
@@ -121,7 +120,7 @@ Below, you can find the gap analysis between the `OHIF-v2` and `OHIF-v3`:
DICOM Whole-slide imaging viewport
π
-
Not Started
+
In Progress
Displaying non-renderable DICOM as HTML
@@ -140,8 +139,8 @@ Below, you can find the gap analysis between the `OHIF-v2` and `OHIF-v3`:
White-labelling: Easily replace the OHIF Logo with your logo
-
π
-
Not Started
+
β
+
DICOM upload to PACS
diff --git a/platform/docs/docs/architecture/index.md b/platform/docs/docs/architecture.md
similarity index 92%
rename from platform/docs/docs/architecture/index.md
rename to platform/docs/docs/architecture.md
index 52726d4a9..8415c4a96 100644
--- a/platform/docs/docs/architecture/index.md
+++ b/platform/docs/docs/architecture.md
@@ -1,3 +1,8 @@
+---
+sidebar_position: 7
+sidebar_label: Architecture
+---
+
# Architecture
@@ -9,17 +14,6 @@ In order to achieve a platform that can support various workflows and be extensi
Below, we aim to demystify that complexity by providing insight into how `OHIF Platform` is
architected, and the role each of it's dependent libraries plays.
-- [Architecture](#architecture)
- - [Overview](#overview)
- - [Extensions](#extensions)
- - [Modes](#modes)
- - [Platform](#platform)
- - [`@ohif/viewer`](#ohifviewer)
- - [`@ohif/core`](#ohifcore)
- - [`@ohif/ui`](#ohifui)
- - [Overview of the architecture](#overview-of-the-architecture)
- - [Common Questions](#common-questions)
-
## Overview
@@ -30,7 +24,6 @@ single project, contains many projects. If you explore our project structure,
you'll see the following:
```bash
-.
β
βββ extensions
β βββ _example # Skeleton of example extension
@@ -80,12 +73,12 @@ in `OHIF-v3` and their api is expanded. In summary:
OHIF team maintains several high value and commonly used functionalities in its
own extensions. For a list of extensions maintained by OHIF,
-[check out this helpful table](../extensions/index.md#maintained-extensions).
+[check out this helpful table](./extensions/index.md#maintained-extensions).
As an example `default` extension provides a default viewer layout,
a study/series browser and a datasource that maps to a DICOMWeb compliant backend.
-[Click here to read more about extensions!](../extensions/index.md)
+[Click here to read more about extensions!](./extensions/index.md)
@@ -131,7 +124,7 @@ To summarize the difference between extensions and modes in `OHIF-v3` and extens
> - In v2 extensions are βpluginsβ that add functionality to a core viewer.
> - In v3 extensions are building blocks that a mode uses to build an entire viewer layout.
-[Click here to read more about modes!](../modes/index.md)
+[Click here to read more about modes!](./modes/index.md)
@@ -169,7 +162,7 @@ These components are presentational only, so you can reuse them with whatever lo
OHIF-v3 architecture can be seen in the following figure. We will explore each
piece in more detail.
-
+
@@ -206,7 +199,7 @@ your functionality in one of the modules of your new extension, and let the mod
[viewers-project]: https://github.com/OHIF/Viewers
[viewer-npm]: https://www.npmjs.com/package/@ohif/viewer
[pwa]: https://developers.google.com/web/progressive-web-apps/
-[configuration]: ../configuring/index.md
+[configuration]: ./configuring/index.md
[extensions]: ../extensions/index.md
[core-github]: https://github.com/OHIF/viewers/platform/core
[ui-github]: https://github.com/OHIF/Viewers/tree/master/platform/ui
diff --git a/platform/docs/docs/configuring/_category_.json b/platform/docs/docs/configuring/_category_.json
new file mode 100644
index 000000000..1bfe6f8f8
--- /dev/null
+++ b/platform/docs/docs/configuring/_category_.json
@@ -0,0 +1,4 @@
+{
+ "label": "Configuring",
+ "position": 5
+}
diff --git a/platform/docs/docs/configuring/data-source.md b/platform/docs/docs/configuring/data-source.md
index f47b12241..c15ed232d 100644
--- a/platform/docs/docs/configuring/data-source.md
+++ b/platform/docs/docs/configuring/data-source.md
@@ -1,13 +1,11 @@
-## Set up a local DICOM server
+---
+sidebar_position: 2
+sidebar_label: Data Source
+---
-- [Set up a local DICOM server](#set-up-a-local-dicom-server)
- - [Requirements](#requirements)
-- [Open Source DICOM Image Archives](#open-source-dicom-image-archives)
- - [Running Orthanc](#running-orthanc)
- - [Orthanc: Learn More](#orthanc-learn-more)
- - [Connecting to Orthanc](#connecting-to-orthanc)
- - [Configuration: Learn More](#configuration-learn-more)
- - [Running DCM4CHEE](#running-dcm4chee)
+# Data Source
+
+## Set up a local DICOM server
ATTENTION! Already have a remote or local server? Skip to the
@@ -176,7 +174,10 @@ DCM4chee installation is out of scope for these tutorials and can be found [here
An overview of steps for running OHIF Viewer using a local DCM4CHEE is shown below:
-
+
+
+
+
diff --git a/platform/docs/docs/configuring/index.md b/platform/docs/docs/configuring/index.md
index fc0b8b62d..4d0068b1b 100644
--- a/platform/docs/docs/configuring/index.md
+++ b/platform/docs/docs/configuring/index.md
@@ -1,14 +1,9 @@
-# Configuring Data Source
+---
+sidebar_position: 1
+sidebar_label: Overview
+---
-
-
-- [Configuring Data Source](#configuring-data-source)
- - [Overview](#overview)
- - [Configuration Files](#configuration-files)
- - [Environment Variables](#environment-variables)
-
-
-## Overview
+# Overview
After following the steps outlined in
[Getting Started](./../development/getting-started.md), you'll notice that the
@@ -31,9 +26,8 @@ and registered extension's features, are configured using this file.
The simplest way is to update the existing default config:
-> _/platform/viewer/public/config/default.js_
-```js
+```js title="platform/viewer/public/config/default.js"
window.config = {
routerBasename: '/',
extensions: [],
diff --git a/platform/docs/docs/deployment/_category_.json b/platform/docs/docs/deployment/_category_.json
new file mode 100644
index 000000000..3585022c8
--- /dev/null
+++ b/platform/docs/docs/deployment/_category_.json
@@ -0,0 +1,4 @@
+{
+ "label": "Deployment",
+ "position": 13
+}
diff --git a/platform/docs/docs/deployment/_embedded-viewer-diagram.md b/platform/docs/docs/deployment/_embedded-viewer-diagram.md
deleted file mode 100644
index 6af9e0a30..000000000
--- a/platform/docs/docs/deployment/_embedded-viewer-diagram.md
+++ /dev/null
@@ -1,4 +0,0 @@
-
diff --git a/platform/docs/docs/deployment/recipes/build-for-production.md b/platform/docs/docs/deployment/build-for-production.md
similarity index 76%
rename from platform/docs/docs/deployment/recipes/build-for-production.md
rename to platform/docs/docs/deployment/build-for-production.md
index a77ab21cb..1365d8177 100644
--- a/platform/docs/docs/deployment/recipes/build-for-production.md
+++ b/platform/docs/docs/deployment/build-for-production.md
@@ -1,10 +1,9 @@
+---
+sidebar_position: 2
+---
+
# Build for Production
-> If you've already followed the
-> ["Getting Started" Guide](/development/getting-started.md), you can skip ahead
-> to [Configuration](#configuration)
-
-## Overview
### Build Machine Requirements
@@ -33,7 +32,7 @@ _From .zip:_
Open your terminal, and navigate to the directory containing the source files.
Next run these commands:
-```js
+```bash
// If you haven't already, enable yarn workspaces
yarn config set workspaces-experimental true
@@ -47,8 +46,7 @@ yarn run build
If everything worked as expected, you should have a new `dist/` directory in the
project's folder. It should roughly resemble the following:
-```bash
-platform/viewer/dist/
+```bash title="platform/viewer/dist/"
βββ app-config.js
βββ app.bundle.js
βββ app.css
@@ -73,7 +71,7 @@ and registered extension's features, are configured using this file.
The easiest way to apply your own configuration is to modify the `default.js`
file. For more advanced cofiguration options, check out our
-[configuration essentials guide](/configuring/index.md).
+[configuration essentials guide](../configuring/index.md).
## Next Steps
@@ -81,18 +79,18 @@ file. For more advanced cofiguration options, check out our
_Drag-n-drop_
-- [Netlify: Drop](/deployment/recipes/static-assets.md#netlify-drop)
+- [Netlify: Drop](./static-assets#netlify-drop)
_Easy_
-- [Surge.sh](/deployment/recipes/static-assets.md#surgesh)
-- [GitHub Pages](/deployment/recipes/static-assets.md#github-pages)
+- [Surge.sh](./static-assets#surgesh)
+- [GitHub Pages](./static-assets#github-pages)
_Advanced_
-- [AWS S3 + Cloudfront](/deployment/recipes/static-assets.md#aws-s3--cloudfront)
-- [GCP + Cloudflare](/deployment/recipes/static-assets.md#gcp--cloudflare)
-- [Azure](/deployment/recipes/static-assets.md#azure)
+- [AWS S3 + Cloudfront](./static-assets#aws-s3--cloudfront)
+- [GCP + Cloudflare](./static-assets#gcp--cloudflare)
+- [Azure](./static-assets#azure)
### Testing Build Output Locally
@@ -100,7 +98,7 @@ A quick way to test your build output locally is to spin up a small webserver.
You can do this by running the following commands in the `dist/` output
directory:
-```js
+```bash
// Install http-server as a globally available package
yarn global add http-server
@@ -111,7 +109,10 @@ yarn global add http-server
npx http-server ./dist
```
-
+
+
+
+
### Automating Builds and Deployments
diff --git a/platform/docs/docs/connecting-to-image-archives/google-cloud-healthcare.md b/platform/docs/docs/deployment/google-cloud-healthcare.md
similarity index 78%
rename from platform/docs/docs/connecting-to-image-archives/google-cloud-healthcare.md
rename to platform/docs/docs/deployment/google-cloud-healthcare.md
index 3bf2e6833..532bf4cc6 100644
--- a/platform/docs/docs/connecting-to-image-archives/google-cloud-healthcare.md
+++ b/platform/docs/docs/deployment/google-cloud-healthcare.md
@@ -1,3 +1,7 @@
+---
+sidebar_position: 6
+---
+
# Google Cloud Healthcare
> Coming soon - We are working on bringing Google Cloud Healthcare to OHIF-v3
diff --git a/platform/docs/docs/deployment/index.md b/platform/docs/docs/deployment/index.md
index e60e4ed39..1245e4464 100644
--- a/platform/docs/docs/deployment/index.md
+++ b/platform/docs/docs/deployment/index.md
@@ -1,3 +1,7 @@
+---
+sidebar_position: 1
+sidebar_label: Overview
+---
# Deployment
The OHIF Viewer can be embedded in other web applications via it's [packaged
@@ -139,7 +143,7 @@ The returned JSON object must contain a single root object with a 'studies' arra
You can read more about using different data sources for mode's routes [here](../modes/routes.md#route-path)
*Sample JSON format:*
-```JSON
+```json
{
"studies": [
{
diff --git a/platform/docs/docs/deployment/recipes/nginx--image-archive.md b/platform/docs/docs/deployment/nginx--image-archive.md
similarity index 95%
rename from platform/docs/docs/deployment/recipes/nginx--image-archive.md
rename to platform/docs/docs/deployment/nginx--image-archive.md
index 869988b48..b6e2d536d 100644
--- a/platform/docs/docs/deployment/recipes/nginx--image-archive.md
+++ b/platform/docs/docs/deployment/nginx--image-archive.md
@@ -1,3 +1,7 @@
+---
+sidebar_position: 4
+---
+
# Nginx + Image Archive
> DISCLAIMER! We make no claims or guarantees of this approach's security. If in
@@ -11,7 +15,7 @@ control.
Do not use this recipe to host sensitive medical data on the open web. Depending
on your company's policies, this may be an appropriate setup on an internal
network when protected with a server's basic authentication. For a more robust
-setup, check out our [user account control recipe](./user-account-control.md)
+setup, check out our [user account control recipe](./user-account-control)
that builds on the lessons learned here.
## Overview
@@ -58,7 +62,9 @@ CORS][understanding-cors]
This setup allows us to create a setup similar to the one pictured below:
-{% include "./../_nginx-image-archive-diagram.md" %}
+
+
+
- All web requests are routed through `nginx` on our `OpenResty` image
- `/pacs` is a reverse proxy for `orthanc`'s `DICOM Web` endpoints
@@ -89,7 +95,10 @@ in command prompt or terminal_
You can see the overview of the mentioned steps:
-
+
+
+
+
-
+
## Registering an Extension
@@ -158,7 +161,6 @@ import MySecondExtension from '@ohif/extension-second'
const extensionConfig = {/* extension configuration */}
-// prettier-ignore
const config = {
routerBasename: '/',
extensions: [
@@ -193,9 +195,9 @@ You can update the list of bundled extensions by:
1. Having your `@ohif/viewer` project depend on the extension
2. Importing and adding it to the list of extensions in the
- `/platform/src/index.js` entrypoint:
+ entrypoint:
- ```js
+ ```js title="/platform/src/index.js"
import OHIFDefaultExtension from '@ohif/extension-default';
import OHIFCornerstoneExtension from '@ohif/extension-cornerstone';
import OHIFMeasurementTrackingExtension from '@ohif/extension-measurement-tracking';
@@ -242,10 +244,94 @@ Each module type has a special purpose, and is consumed by our viewer
differently.
-{% include "./_modules.md" %}
+
-Tbl. Module types with abridged descriptions and examples. Each module links to a dedicated documentation page.
+Tbl. Module types with abridged descriptions and examples. Each module links to a dedicated documentation page.
+
diff --git a/platform/docs/docs/extensions/lifecycle/_category_.json b/platform/docs/docs/extensions/lifecycle/_category_.json
new file mode 100644
index 000000000..a1d7be979
--- /dev/null
+++ b/platform/docs/docs/extensions/lifecycle/_category_.json
@@ -0,0 +1,4 @@
+{
+ "label": "LifeCycle",
+ "position": 1
+}
diff --git a/platform/docs/docs/extensions/lifecycle/on-mode-enter.md b/platform/docs/docs/extensions/lifecycle/on-mode-enter.md
index 9c785e129..5332711ed 100644
--- a/platform/docs/docs/extensions/lifecycle/on-mode-enter.md
+++ b/platform/docs/docs/extensions/lifecycle/on-mode-enter.md
@@ -1,3 +1,7 @@
+---
+sidebar_position: 2
+sidebar_label: Mode Enter
+---
# Lifecycle Hook: onModeEnter
If an extension defines the `onModeEnter` lifecycle hook, it is called
diff --git a/platform/docs/docs/extensions/lifecycle/on-mode-exit.md b/platform/docs/docs/extensions/lifecycle/on-mode-exit.md
index bfd1a7727..06d1fd2e7 100644
--- a/platform/docs/docs/extensions/lifecycle/on-mode-exit.md
+++ b/platform/docs/docs/extensions/lifecycle/on-mode-exit.md
@@ -1,4 +1,8 @@
-# Lifecylce Hook: onModeExit
+---
+sidebar_position: 3
+sidebar_label: Mode Exit
+---
+# Lifecycle Hook: onModeExit
If an extension defines the `onModeExit` lifecycle hook, it is called when navigating
away from a mode. This hook can be used to clean up data tasks such as unregistering services,
diff --git a/platform/docs/docs/extensions/lifecycle/pre-registration.md b/platform/docs/docs/extensions/lifecycle/pre-registration.md
index 0cb256a54..c4336a06a 100644
--- a/platform/docs/docs/extensions/lifecycle/pre-registration.md
+++ b/platform/docs/docs/extensions/lifecycle/pre-registration.md
@@ -1,3 +1,7 @@
+---
+sidebar_position: 1
+sidebar_label: Pre Registration
+---
# Lifecylce Hook: preRegistration
If an extension defines the `preRegistration` lifecycle hook, it is called
@@ -18,7 +22,6 @@ available in the app. We will talk more in details for creating a new service fo
`OHIF-v3`.
```js
-
// new service inside new extension
import MyNewService from './MyNewService';
diff --git a/platform/docs/docs/extensions/modules/_category_.json b/platform/docs/docs/extensions/modules/_category_.json
new file mode 100644
index 000000000..c131ccdd7
--- /dev/null
+++ b/platform/docs/docs/extensions/modules/_category_.json
@@ -0,0 +1,4 @@
+{
+ "label": "Modules",
+ "position": 3
+}
diff --git a/platform/docs/docs/extensions/modules/commands.md b/platform/docs/docs/extensions/modules/commands.md
index b90040c98..b50787327 100644
--- a/platform/docs/docs/extensions/modules/commands.md
+++ b/platform/docs/docs/extensions/modules/commands.md
@@ -1,14 +1,10 @@
+---
+sidebar_position: 2
+sidebar_label: Commands
+---
# Module: Commands
-
-- [Module: Commands](#module-commands)
- - [Overview](#overview)
- - [Command Definitions](#command-definitions)
- - [Command Behavior](#command-behavior)
- - [`CommandsManager` Public API](#commandsmanager-public-api)
- - [Contexts](#contexts)
-
## Overview
`CommandsModule` includes list of arbitrary functions. These may activate tools, communicate with a server, open a modal, etc.
The significant difference between `OHIF-v3` and `OHIF-v2` is that in `v3` a `mode` defines
diff --git a/platform/docs/docs/extensions/modules/contextModule.md b/platform/docs/docs/extensions/modules/contextModule.md
index 4dcfce360..35de381a3 100644
--- a/platform/docs/docs/extensions/modules/contextModule.md
+++ b/platform/docs/docs/extensions/modules/contextModule.md
@@ -1,9 +1,9 @@
+---
+sidebar_position: 9
+sidebar_label: Context
+---
# Module: Context
-- [Module: Context](#module-context)
- - [Overview](#overview)
-
-
## Overview
This new module type allows you to connect components via a shared context. You can create a context that two components, e.g. a viewport and a panel can use to synchronize and communicate. An extensive example of this can be seen in the longitudinal modeβs custom extensions.
diff --git a/platform/docs/docs/extensions/modules/data-source.md b/platform/docs/docs/extensions/modules/data-source.md
index 861a64d44..72a121542 100644
--- a/platform/docs/docs/extensions/modules/data-source.md
+++ b/platform/docs/docs/extensions/modules/data-source.md
@@ -1,7 +1,10 @@
+---
+sidebar_position: 3
+sidebar_label: Data Source
+---
# Module: Data Source
-
## Overview
The internal data structure of OHIFβs metadata follows naturalized DICOM JSON, A format pioneered by `dcmjs`. In short DICOM metadata headers with DICOM Keywords instead of tags and sequences as arrays, for easy development and clear code.
@@ -57,9 +60,7 @@ You need to make sure, you implement the following functions for the data source
-```js
-// platform/core/src/DataSources/IWebApiDataSource.js
-
+```js title="platform/core/src/DataSources/IWebApiDataSource.js"
function create({
query,
retrieve,
diff --git a/platform/docs/docs/extensions/modules/hpModule.md b/platform/docs/docs/extensions/modules/hpModule.md
index f0ed28c8f..649d6644e 100644
--- a/platform/docs/docs/extensions/modules/hpModule.md
+++ b/platform/docs/docs/extensions/modules/hpModule.md
@@ -1,10 +1,16 @@
-Module: Hanging Protocol
+---
+sidebar_position: 8
+sidebar_label: Hanging Protocol
+---
+# Module: Hanging Protocol
## Overview
`hangingProtocolModule` provides the protocols for hanging the displaySets in the viewer.
This module can be as simple as loading a list of pre-defined protocols, or it can be more complex
and `fetch` the protocols from a server.
+You can read more about hanging protocols in HangingProtocolService.
+
```js
const deafultProtocol = {
id: 'defaultProtocol',
diff --git a/platform/docs/docs/extensions/modules/layout-template.md b/platform/docs/docs/extensions/modules/layout-template.md
index eb053beeb..7184ae952 100644
--- a/platform/docs/docs/extensions/modules/layout-template.md
+++ b/platform/docs/docs/extensions/modules/layout-template.md
@@ -1,10 +1,9 @@
+---
+sidebar_position: 7
+sidebar_label: Layout Template
+---
# Module: Layout Template
-- [Module: Layout Template](#module-layout-template)
- - [Overview](#overview)
- - [Overview Video](#overview-video)
-
-
## Overview
`LayoutTemplates` are a new concept in v3 that modes use to control the layout of a route.
A layout template is a React component that is given a set of managers that define apis to access toolbar state, commands, and hotkeys, as well as props defined by the layout template.
@@ -34,8 +33,7 @@ LayoutTemplate leverages extensionManager to grab typed extension module entries
A simplified code for `Default extention`'s layout template is:
-```jsx
-// extensions/default/src/ViewerLayout/index.jsx
+```jsx title="extensions/default/src/ViewerLayout/index.jsx"
import React from 'react'
import { SidePanel } from '@ohif/ui'
@@ -133,4 +131,6 @@ function ViewerLayout({
## Overview Video
-
+
+
+
diff --git a/platform/docs/docs/extensions/modules/panel.md b/platform/docs/docs/extensions/modules/panel.md
index b23b6a8f0..edc747a6c 100644
--- a/platform/docs/docs/extensions/modules/panel.md
+++ b/platform/docs/docs/extensions/modules/panel.md
@@ -1,7 +1,11 @@
+---
+sidebar_position: 6
+sidebar_label: Panel
+---
# Module: Panel
## Overview
-UI that is intended to be displayed within a panel. The default LayoutTemplate has panels on the left and right sides, however one could make a template with panels at the top or bottom and make extensions with panels intended for such slots.
+The default LayoutTemplate has panels on the left and right sides, however one could make a template with panels at the top or bottom and make extensions with panels intended for such slots.
An extension can register a Panel Module by defining a `getPanelModule` method.
@@ -10,18 +14,19 @@ that can be used by the consuming application. `components` are React Components
that can be displayed in the consuming application's "Panel" Component.
-
-The `menuOptions`'s `target` key points to a registered `components`'s `id`. A
+
+
+
+
+The `menuOptions`'s `target` key, points to a registered `components`'s `id`. A
`defaultContext` is applied to all `menuOption`s; however, each `menuOption` can
-optional provide it's own `context` value.
+optionally provide it's own `context` value.
The `getPanelModule` receives an object containing the `ExtensionManager`'s
associated `ServicesManager` and `CommandsManager`.
-
-
-```js
+```jsx
import PanelMeasurementTable from './PanelMeasurementTable.js';
@@ -96,6 +101,4 @@ export default function mode({ modeConfiguration }) {
],
};
}
-
-
```
diff --git a/platform/docs/docs/extensions/modules/sop-class-handler.md b/platform/docs/docs/extensions/modules/sop-class-handler.md
index 57f2f487a..812bf03fb 100644
--- a/platform/docs/docs/extensions/modules/sop-class-handler.md
+++ b/platform/docs/docs/extensions/modules/sop-class-handler.md
@@ -1,6 +1,9 @@
+---
+sidebar_position: 4
+sidebar_label: SOP Class Handler
+---
# Module: SOP Class Handler
-
## Overview
This module defines how a specific DICOM SOP class should be processed to make a displaySet, something that can be hung in a viewport. An extension can register a [SOP Class][sop-class-link] Handler Module by defining a `getSopClassHandlerModule` method. The [SOP Class][sop-class-link].
diff --git a/platform/docs/docs/extensions/modules/toolbar.md b/platform/docs/docs/extensions/modules/toolbar.md
index 8e44e81f6..c834b26cc 100644
--- a/platform/docs/docs/extensions/modules/toolbar.md
+++ b/platform/docs/docs/extensions/modules/toolbar.md
@@ -1,17 +1,12 @@
+---
+sidebar_position: 1
+sidebar_label: Toolbar
+---
# Module: Toolbar
An extension can register a Toolbar Module by defining a `getToolbarModule`
method. `OHIF-v3`'s `default` extension (`"ohif.org.default"`) provides 5 main toolbar button types:
-- [Module: Toolbar](#module-toolbar)
- - [Example Toolbar Module](#example-toolbar-module)
- - [Toolbar buttons consumed in modes](#toolbar-buttons-consumed-in-modes)
- - [Button Definitions](#button-definitions)
- - [Nested Buttons](#nested-buttons)
- - [Layout Template](#layout-template)
- - [Custom Button](#custom-button)
- - [Custom tool](#custom-tool)
-
@@ -150,9 +145,7 @@ You can see below how `longitudinal` mode is using the available toolbarModule t
-```js
-// modes/longitudinal/src/toolbarButtons.js
-
+```js title="modes/longitudinal/src/toolbarButtons.js"
{
id: 'MeasurementTools',
type: 'ohif.splitButton',
@@ -210,7 +203,13 @@ You can see below how `longitudinal` mode is using the available toolbarModule t
}
```
-
+
+
+
+
+
+
+
## Layout Template
Layout selector button and logic is also provided by the OHIF-v3 `default` extension.
@@ -224,8 +223,9 @@ To use it, you can just add the following definition to the list of `toolDefinit
}
```
-
-
+
+
+
## Custom Button
You can also create your own extension, and add your new custom tool appearance (e.g., split horizantlly instead of vertically for split tool).
diff --git a/platform/docs/docs/extensions/modules/viewport.md b/platform/docs/docs/extensions/modules/viewport.md
index a6d7c9d82..415c0cff1 100644
--- a/platform/docs/docs/extensions/modules/viewport.md
+++ b/platform/docs/docs/extensions/modules/viewport.md
@@ -1,6 +1,9 @@
+---
+sidebar_position: 5
+sidebar_label: Viewport
+---
# Module: Viewport
-
## Overview
Viewports consume a displaySet and display/allow the user to interact with data. An extension can register a Viewport Module by defining a `getViewportModule`
method that returns a React component. Currently, we use viewport components to
@@ -18,7 +21,7 @@ add support for:
The general pattern is that a mode can define which `Viewport` to use for which specific
`SOPClassHandlerUID`, so if you want to fork just a single Viewport component for a specialized mode, this is possible.
-```JSX
+```jsx
// displaySet, viewportIndex, dataSource
const getViewportModule = () => {
const wrappedViewport = props => {
@@ -44,7 +47,7 @@ a cornerstone viewport and and action bar on top of it.
-```JSX
+```jsx
function TrackedCornerstoneViewport({
children,
dataSource,
diff --git a/platform/docs/docs/faq/_category_.json b/platform/docs/docs/faq/_category_.json
new file mode 100644
index 000000000..1f05f1a06
--- /dev/null
+++ b/platform/docs/docs/faq/_category_.json
@@ -0,0 +1,4 @@
+{
+ "label": "FAQ",
+ "position": 14
+}
diff --git a/platform/docs/docs/faq/browser-support.md b/platform/docs/docs/faq/browser-support.md
index d5f1a1cf3..77107e029 100644
--- a/platform/docs/docs/faq/browser-support.md
+++ b/platform/docs/docs/faq/browser-support.md
@@ -1,3 +1,6 @@
+---
+sidebar_position: 2
+---
# Browser Support
The browsers that we support are specified in the `.browserlistrc` file located
diff --git a/platform/docs/docs/faq/index.md b/platform/docs/docs/faq/index.md
index 7f8c9e670..d7e6a35ac 100644
--- a/platform/docs/docs/faq/index.md
+++ b/platform/docs/docs/faq/index.md
@@ -1,3 +1,7 @@
+---
+sidebar_position: 4
+---
+
# Frequently Asked Questions
## Index
diff --git a/platform/docs/docs/faq/pwa-vs-packaged.md b/platform/docs/docs/faq/pwa-vs-packaged.md
index a6f001abc..c4a0c6651 100644
--- a/platform/docs/docs/faq/pwa-vs-packaged.md
+++ b/platform/docs/docs/faq/pwa-vs-packaged.md
@@ -1,3 +1,7 @@
+---
+sidebar_position: 3
+---
+
# PWA vs Packaged
It's important to know that the OHIF Viewer project provides two different build
@@ -26,7 +30,7 @@ that subsequent requests are from the local file system instead of over the
network.
You can read more about this particular strategy in our
-[Build for Production Deployment Guide](./../deployment/recipes/build-for-production.md)
+[Build for Production Deployment Guide](./../deployment/build-for-production.md)
## Commonjs Bundle (Packaged Script)
diff --git a/platform/docs/docs/faq/scope-of-project.md b/platform/docs/docs/faq/scope-of-project.md
index 4229bb38d..91d254450 100644
--- a/platform/docs/docs/faq/scope-of-project.md
+++ b/platform/docs/docs/faq/scope-of-project.md
@@ -1,3 +1,6 @@
+---
+sidebar_position: 1
+---
# Scope of Project
The OHIF Viewer is a web based medical imaging viewer. This allows it to be used
diff --git a/platform/docs/docs/help.md b/platform/docs/docs/help.md
index a6c36d676..e2b0992e5 100644
--- a/platform/docs/docs/help.md
+++ b/platform/docs/docs/help.md
@@ -1,3 +1,6 @@
+---
+sidebar_position: 15
+---
# Help
We all need a little help sometimes. Don't let a few roadblocks stand in the way
diff --git a/platform/docs/docs/managers/_category_.json b/platform/docs/docs/managers/_category_.json
new file mode 100644
index 000000000..309407792
--- /dev/null
+++ b/platform/docs/docs/managers/_category_.json
@@ -0,0 +1,4 @@
+{
+ "label": "Managers",
+ "position": 11
+}
diff --git a/platform/docs/docs/managers/_managers.md b/platform/docs/docs/managers/_managers.md
deleted file mode 100644
index 0f8e8e18f..000000000
--- a/platform/docs/docs/managers/_managers.md
+++ /dev/null
@@ -1,50 +0,0 @@
-
diff --git a/platform/docs/docs/managers/commands.md b/platform/docs/docs/managers/commands.md
index 488fbc715..fab666dac 100644
--- a/platform/docs/docs/managers/commands.md
+++ b/platform/docs/docs/managers/commands.md
@@ -1,3 +1,7 @@
+---
+sidebar_position: 4
+sidebar_label: Commands Manager
+---
# Commands Manager
## Overview
@@ -70,9 +74,7 @@ These methods are used internally to help determine which commands are currently
valid, and how to provide them with any state they may need at the time they are
called.
-```js
-// platform/viewer/src/appInit.js
-
+```js title="platform/viewer/src/appInit.js"
const commandsManagerConfig = {
getAppState: () => {},
/** Used by commands to determine active context */
@@ -167,7 +169,6 @@ use `runCommand(commandName, options = {}, contextName)`.
```js
-
// Run a command, it will run all the `speak` commands in all contexts
commandsManager.runCommand('speak', { command: 'hello' });
diff --git a/platform/docs/docs/managers/extension.md b/platform/docs/docs/managers/extension.md
index cab349c51..8851ffc10 100644
--- a/platform/docs/docs/managers/extension.md
+++ b/platform/docs/docs/managers/extension.md
@@ -1,3 +1,7 @@
+---
+sidebar_position: 2
+sidebar_label: Extension Manager
+---
# Extension Manager
## Overview
diff --git a/platform/docs/docs/managers/hotkeys.md b/platform/docs/docs/managers/hotkeys.md
index 0ac4e9994..c5b1a985c 100644
--- a/platform/docs/docs/managers/hotkeys.md
+++ b/platform/docs/docs/managers/hotkeys.md
@@ -1,3 +1,7 @@
+---
+sidebar_position: 5
+sidebar_label: Hotkeys Manager
+---
# Hotkeys Managers
## Overview
diff --git a/platform/docs/docs/managers/index.md b/platform/docs/docs/managers/index.md
index 88e384783..c2f4a30d8 100644
--- a/platform/docs/docs/managers/index.md
+++ b/platform/docs/docs/managers/index.md
@@ -1,3 +1,7 @@
+---
+sidebar_position: 1
+sidebar_label: Introduction
+---
# Managers
## Overview
@@ -7,7 +11,56 @@
`OHIF-v3` provides the following managers which we will discuss in depth.
-{% include "./_managers.md" %}
+
diff --git a/platform/docs/docs/managers/service.md b/platform/docs/docs/managers/service.md
index 0e4dd71be..d60ec83e1 100644
--- a/platform/docs/docs/managers/service.md
+++ b/platform/docs/docs/managers/service.md
@@ -1,3 +1,7 @@
+---
+sidebar_position: 3
+sidebar_label: Service Manager
+---
# Services Manager
## Overview
@@ -39,9 +43,7 @@ export default class ServicesManager {
## Default Registered Services
By default, `OHIF-v3` registers the following services in the `appInit`.
-```js
-// platform/viewer/src/appInit.js
-
+```js title="platform/viewer/src/appInit.js"
servicesManager.registerServices([
UINotificationService,
UIModalService,
@@ -64,9 +66,7 @@ find out that services need to be exported as an object with `name` and `create`
For instance, `ToolbarService` is exported as:
-```js
-// platform/core/src/services/ToolBarService/index.js
-
+```js title="platform/core/src/services/ToolBarService/index.js"
import ToolBarService from './ToolBarService';
export default {
@@ -112,9 +112,7 @@ function PanelMeasurementTableTracking({ servicesManager }) {
## Registering Custom Services
You might need to write you own custom service in an extension. `preRegistration` hook inside your extension is the place for registering your custom service.
-```js
-// extensions/customExtension/src/index.js
-
+```js title="extensions/customExtension/src/index.js"
import WrappedBackEndService from './services/backEndService'
export default {
@@ -129,8 +127,7 @@ export default {
and the logic for your service shall be
-```js
-// extensions/customExtension/src/services/backEndService/index.js
+```js title="extensions/customExtension/src/services/backEndService/index.js"
import backEndService from './backEndService';
export default function WrappedBackEndService(serviceManager) {
diff --git a/platform/docs/docs/modes/_anatomy.md b/platform/docs/docs/modes/_anatomy.md
deleted file mode 100644
index 86c216192..000000000
--- a/platform/docs/docs/modes/_anatomy.md
+++ /dev/null
@@ -1,95 +0,0 @@
-
-
-
-
Property
-
Description
-
-
-
-
-
- id
-
-
unique mode id used to refer to the mode
-
-
-
- displayName
-
-
actual name of the mode being displayed for each study in the study summary panel
@@ -96,9 +182,7 @@ For instance, if a mode requires the left panel with name of `AIPanel` that is a
In the background `OHIF` will handle grabbing the correct panel via `ExtensionManager`.
-```js
-// extensions/myAIExtension/getPanelModule.js
-
+```js title="extensions/myAIExtension/getPanelModule.js"
import PanelAI from './PanelAI.js';
@@ -127,7 +211,6 @@ function getPanelModule({
},
];
}
-
```
@@ -194,15 +277,13 @@ export default function mode({ modeConfiguration }) {
}
```
-### routes
+### Routes
routes config is an array of route settings, and the overall look and behavior of the viewer at the designated route is defined by the `layoutTemplate` and `init` functions for the route. We will learn more about each of the above properties inside the [route documentation](./routes.md)
-### extensions
+### Extensions
Currently `extensions` property in the mode config is used to add *contextModule* of the mentioned extensions to the list of contexts and provide them through out the app. Since extensions are registered by the ExtensionManager, modes have access to the them even if they have not been referred in the mode config file inside *extensions* property. [Read more about extension registration](../extensions/index.md#registering-an-extension)
-```js
-// platform/viewer/src/routes/Mode/Mode.jsx
-
+```js title="platform/viewer/src/routes/Mode/Mode.jsx"
const { extensions } = mode;
extensions.forEach(extensionId => {
@@ -216,13 +297,11 @@ extensions.forEach(extensionId => {
});
```
-### hangingProtocols
+### HangingProtocols
Currently, you can pass your defined hanging protocols inside the `hangingProtocols` property of
the mode's config. This will get used inside the `Mode.jsx` to configure the `HangingProtocolService`.
-```js
-// platform/viewer/src/routes/Mode/Mode.jsx
-
+```js title="platform/viewer/src/routes/Mode/Mode.jsx"
const { hangingProtocols } = mode;
hangingProtocols.forEach(extentionProtocols => {
@@ -231,20 +310,18 @@ hangingProtocols.forEach(extentionProtocols => {
});
```
-### sopClassHandlers
+### SopClassHandlers
Mode's configuration also accepts the `sopClassHandler` modules that have been added by the extensions.
This information will get used inside the `Mode.jsx` to initialize the `DisplaySetService` with the provided
SOPClass modules which handles creation of the displaySets.
-```js
-// platform/viewer/src/routes/Mode/Mode.jsx
-
+```js title="platform/viewer/src/routes/Mode/Mode.jsx"
const { sopClassHandlers } = mode;
DisplaySetService.init(extensionManager, sopClassHandlers);
```
-### hotkeys
+### Hotkeys
`hotkeys` is another property in the configuration of a mode that can be defined to add the specific hotkeys to the viewer at all routes.
```js
@@ -281,9 +358,7 @@ export default function mode() {
```
-```js
-// platform/viewer/src/routes/Mode/Mode.jsx
-
+```js title="platform/viewer/src/routes/Mode/Mode.jsx"
hotkeysManager.setDefaultHotKeys(hotkeys);
hotkeysManager.setHotkeys(hotkeys);
```
@@ -299,9 +374,7 @@ hotkeysManager.setHotkeys(hotkeys);
Upon release modes will also be plugged into the app via configuration, but this is still an area which is under development/discussion, and they are currently pulled from the `window` in beta.
-```js
-// modes/longitudinal/src/index.js
-
+```js title="modes/longitudinal/src/index.js"
export default function mode() {
return {
id: 'viewer',
@@ -325,14 +398,11 @@ export default function mode() {
}
window.longitudinalMode = mode({});
-
```
and inside `@ohif/viwer` we have:
-```js
-// platform/viewer/src/appInit.js
-
+```js title="platform/viewer/src/appInit.js"
if (!appConfig.modes.length) {
appConfig.modes.push(window.longitudinalMode);
// appConfig.modes.push(window.segmentationMode);
diff --git a/platform/docs/docs/modes/lifeCycle.md b/platform/docs/docs/modes/lifeCycle.md
index d56a1e80f..8d7606102 100644
--- a/platform/docs/docs/modes/lifeCycle.md
+++ b/platform/docs/docs/modes/lifeCycle.md
@@ -1,11 +1,10 @@
+---
+sidebar_position: 2
+sidebar_label: Life Cycle
+---
# Mode: LifeCycle
-- [Mode: LifeCycle](#mode-lifecycle)
- - [Overview](#overview)
- - [onModeEnter](#onmodeenter)
- - [onModeExit](#onmodeexit)
-
## Overview
Currently there are two hooks that are called for modes.
diff --git a/platform/docs/docs/modes/routes.md b/platform/docs/docs/modes/routes.md
index a9efbf0c4..3e616b2c8 100644
--- a/platform/docs/docs/modes/routes.md
+++ b/platform/docs/docs/modes/routes.md
@@ -1,3 +1,7 @@
+---
+sidebar_position: 3
+sidebar_label: Routes
+---
# Mode: Routes
## Overview
diff --git a/platform/docs/docs/modes/validity.md b/platform/docs/docs/modes/validity.md
index 4683f613c..44835652a 100644
--- a/platform/docs/docs/modes/validity.md
+++ b/platform/docs/docs/modes/validity.md
@@ -1,8 +1,9 @@
+---
+sidebar_position: 4
+sidebar_label: Validity
+---
# Mode: Validity
-- [Mode: Validity](#mode-validity)
- - [Overview](#overview)
- - [isValidMode](#isvalidmode)
## Overview
There are two mechanism for checking the validity of a mode for a study.
diff --git a/platform/docs/docs/our-process.md b/platform/docs/docs/our-process.md
index c17947be3..ac600bb76 100644
--- a/platform/docs/docs/our-process.md
+++ b/platform/docs/docs/our-process.md
@@ -1,3 +1,6 @@
+---
+sidebar_position: 2
+---
# Our Process
Our process is a living, breathing thing. We strive to have regular
@@ -8,14 +11,6 @@ that process in an effort to:
- Strengthen community member involvement and understanding
- Welcome feedback and helpful suggestions
-## Overview
-
-- [Issue Triage](#issue-triage)
-- [Issue Curation ("backlog grooming")](#issue-curation-backlog-grooming)
-- [Contributions (Pull Requests)](#contributions-pull-requests)
-- [Releases](#releases)
-
-
## Issue Triage
[GitHub issues][gh-issues] are the best way to provide feedback, ask questions,
diff --git a/platform/docs/docs/quick-start.md b/platform/docs/docs/quick-start.md
deleted file mode 100644
index 2d3430c0e..000000000
--- a/platform/docs/docs/quick-start.md
+++ /dev/null
@@ -1,28 +0,0 @@
-# Quick Start
-
-This page details how to get an instance of the OHIF Viewer up and running as
-fast as possible. It shows how to grab a pre-built version of the application,
-point it at your data source (PACS), and plop it on a web server.
-
-## Options
-
-### 1. Pre-built PWA
-
-...
-
-### 2. Script-Tag
-
-...
-
-### 3. Docker
-
-...
-
-## Security Concerns
-
-- Secure your data
-
-## Common Issues
-
-- Missing server rewrite rules
-- CORS issues when requesting data from PACS
diff --git a/platform/docs/docs/services/_category_.json b/platform/docs/docs/services/_category_.json
new file mode 100644
index 000000000..8b57449b2
--- /dev/null
+++ b/platform/docs/docs/services/_category_.json
@@ -0,0 +1,4 @@
+{
+ "label": "Services",
+ "position": 12
+}
diff --git a/platform/docs/docs/services/_services.md b/platform/docs/docs/services/_services.md
deleted file mode 100644
index dacfa85b2..000000000
--- a/platform/docs/docs/services/_services.md
+++ /dev/null
@@ -1,132 +0,0 @@
-
diff --git a/platform/docs/docs/services/data/DicomMetadataStore.md b/platform/docs/docs/services/data/DicomMetadataStore.md
index 1818c065c..957002ea3 100644
--- a/platform/docs/docs/services/data/DicomMetadataStore.md
+++ b/platform/docs/docs/services/data/DicomMetadataStore.md
@@ -1,3 +1,7 @@
+---
+sidebar_position: 2
+sidebar_label: DICOM Metadata Store
+---
# DICOM Metadata Store
@@ -62,9 +66,7 @@ stored and in what format and hierarchy. `_model` is a private variable in the s
which holds all the metadata for all studies, series, and instances, and it looks like:
-```js
-// platform/core/src/services/DicomMetadataStore/DicomMetadataStore.js
-
+```js title="platform/core/src/services/DicomMetadataStore/DicomMetadataStore.js"
const _model = {
studies: [
{
@@ -107,5 +109,4 @@ const _model = {
},
],
}
-
```
diff --git a/platform/docs/docs/services/data/DisplaySetService.md b/platform/docs/docs/services/data/DisplaySetService.md
index 2645cb60e..f6c053cb6 100644
--- a/platform/docs/docs/services/data/DisplaySetService.md
+++ b/platform/docs/docs/services/data/DisplaySetService.md
@@ -1,3 +1,7 @@
+---
+sidebar_position: 3
+sidebar_label: DisplaySet Service
+---
# DisplaySet Service
@@ -7,9 +11,7 @@
> Based on the instanceMetadata's `SOPClassHandlerId`, the correct module from the registered extensions is found by `OHIF` and its `getDisplaySetsFromSeries` runs to create a DisplaySet for the Series.
-```js
-// platform/core/src/services/DisplaySetService/DisplaySetService.js
-
+```js title="platform/core/src/services/DisplaySetService/DisplaySetService.js"
init(extensionManager, SOPClassHandlerIds) {
this.extensionManager = extensionManager;
this.SOPClassHandlerIds = SOPClassHandlerIds;
@@ -19,9 +21,7 @@ init(extensionManager, SOPClassHandlerIds) {
in `Mode.jsx`
-```js
-// platform/viewer/src/routes/Mode/Mode.jsx
-
+```js title="platform/viewer/src/routes/Mode/Mode.jsx"
export default function ModeRoute(/** ... **/) {
/** ... **/
const { DisplaySetService } = servicesManager.services
diff --git a/platform/docs/docs/services/data/HangingProtocolService.md b/platform/docs/docs/services/data/HangingProtocolService.md
index aa6f683db..6132a0ed3 100644
--- a/platform/docs/docs/services/data/HangingProtocolService.md
+++ b/platform/docs/docs/services/data/HangingProtocolService.md
@@ -1,3 +1,7 @@
+---
+sidebar_position: 4
+sidebar_label: Hanging Protocol Service
+---
# Hanging Protocol Service
## Overview
diff --git a/platform/docs/docs/services/data/MeasurementService.md b/platform/docs/docs/services/data/MeasurementService.md
index 65bb7c6a8..b669c273c 100644
--- a/platform/docs/docs/services/data/MeasurementService.md
+++ b/platform/docs/docs/services/data/MeasurementService.md
@@ -1,3 +1,7 @@
+---
+sidebar_position: 6
+sidebar_label: Measurement Service
+---
# Measurement Service
@@ -75,9 +79,7 @@ provide three mappers:
- `toMeasurement`: a function that converts the tool data to OHIF internal representation of measurement data.
-```js
-// extensions/cornerstone/src/utils/measurementServiceMappings/Length.js
-
+```js title="extensions/cornerstone/src/utils/measurementServiceMappings/Length.js"
function toMeasurement(
csToolsAnnotation,
DisplaySetService,
diff --git a/platform/docs/docs/services/data/ToolbarService.md b/platform/docs/docs/services/data/ToolbarService.md
index 8837e1b7d..3271ef797 100644
--- a/platform/docs/docs/services/data/ToolbarService.md
+++ b/platform/docs/docs/services/data/ToolbarService.md
@@ -1,3 +1,7 @@
+---
+sidebar_position: 5
+sidebar_label: Toolbar Service
+---
# Toolbar Service
@@ -6,9 +10,12 @@
the user.
-
+
+
+
+
## Events
@@ -158,9 +165,7 @@ You can see below how `longitudinal` mode is using the available toolbarModule t
-```js
-// modes/longitudinal/src/toolbarButtons.js
-
+```js title="modes/longitudinal/src/toolbarButtons.js"
{
id: 'MeasurementTools',
type: 'ohif.splitButton',
diff --git a/platform/docs/docs/services/data/_category_.json b/platform/docs/docs/services/data/_category_.json
new file mode 100644
index 000000000..984ac9a42
--- /dev/null
+++ b/platform/docs/docs/services/data/_category_.json
@@ -0,0 +1,4 @@
+{
+ "label": "Data Services",
+ "position": 2
+}
diff --git a/platform/docs/docs/services/data/default.md b/platform/docs/docs/services/data/default.md
deleted file mode 100644
index 2de44b2a1..000000000
--- a/platform/docs/docs/services/data/default.md
+++ /dev/null
@@ -1,65 +0,0 @@
-# Services (default)
-
-- [Overview](#overview)
-- [Example](#example)
-
-## Overview
-
-Services are a work in progress. As we are still in the progress of creating a
-non-ui maintained service, this usage may change.
-
-
Diagram showing relationship between React Context and UI Service
-
-
-## Example
-
-The simplest service return a new object that has a `name` property, and
-methods/properties that give the service its functionality. The "Factory
-Function" that creates the service is provided with the implementation (this is
-slightly different for UI Services).
-
-```js
-const _speak = () => {
- console.warn('Speak is not implemented');
-};
-
-/**
- * Factory function to create `HelloWorldService`
- *
- * @param {object} implementation
- * @param {function} implementation.speak - Speak's implementation
- * @returns HelloWorldService
- */
-export default function createHelloWorldService({ speak }) {
- return {
- name: 'HelloWorldService',
- speak: speak || _speak,
- };
-}
-```
-
-A service, once created, can be registered with the `ServicesManager` to make it
-accessible to extensions. Similarly, the application code can access named
-services from the `ServicesManager`.
-
-```js
-// In the application
-const speak = () => {
- window.alert('HELLO WORLD');
-};
-const HelloWorldService = createHelloWorldService({ speak });
-const servicesManager = new ServicesManager();
-
-servicesManager.registerService(HelloWorldService);
-
-// In an extension
-const { HelloWorldService } = servicesManager.services;
-
-if (HelloWorldService) {
- HelloWorldService.speak();
-}
-```
diff --git a/platform/docs/docs/services/data/index.md b/platform/docs/docs/services/data/index.md
index c49e2edc2..37704fea5 100644
--- a/platform/docs/docs/services/data/index.md
+++ b/platform/docs/docs/services/data/index.md
@@ -1,8 +1,11 @@
-# Services (default)
+---
+sidebar_position: 1
+sidebar_label: Overview
+---
+# Overview
-## Overview
Data services are the first category of services which deal with handling non-ui related state
Each services have their own internal state which they handle.
diff --git a/platform/docs/docs/services/index.md b/platform/docs/docs/services/index.md
index 01fe35d4d..93cfd0866 100644
--- a/platform/docs/docs/services/index.md
+++ b/platform/docs/docs/services/index.md
@@ -1,8 +1,9 @@
-# Services And Managers
+---
+sidebar_position: 1
+sidebar_label: Introduction
+---
+# Services
-- [Services And Managers](#services-and-managers)
- - [Overview](#overview)
- - [Services](#services)
## Overview
Services are "concern-specific" code modules that can be consumed across layers. Services provide
@@ -25,7 +26,138 @@ Each service should be:
## Services
The following services is available in the `OHIF-v3`.
-{% include "./_services.md" %}
+
- 
- 
- 
-
-