feat: Revised user guides based on feedbacks

This commit is contained in:
Alireza 2021-06-25 16:35:12 -04:00
parent f0c5755cd0
commit 39cc3baaad
7 changed files with 89 additions and 70 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 68 KiB

After

Width:  |  Height:  |  Size: 78 KiB

View File

@ -1,4 +1,4 @@
{
"label": "User Manuals",
"label": "User Guides",
"position": 3
}

View File

@ -6,16 +6,17 @@ sidebar_label: Study list
# Study list
## Overview
The first page you will see when the viewer is loaded is called `Study List`.
The first page you will see when the viewer is loaded is the `Study List`.
In this page you can explore all the studies that are stored on the configured
server for the `OIHF Viewer`.
![user-study-list](../assets/img/user-study-list.png)
At the end of the page you can navigate to the next/previous page or change the
default number of studies that are shown
![user-study-next](../assets/img/user-study-next.png)
## Sorting
When the Study List is opened, the application queries the PACS for 101 studies by default. If there are greater than 100 studies returned, the default sort for the study list is dictated by the image archive that hosts these studies for the viewer and study list sorting will be disabled. If there are less than or equal to 100 studies returned, they will be sorted by study date (most recent to oldest) and study list sorting will be enabled. Whenever a query returns greater than 100 studies, use filters to narrow results below 100 studies to enable Study List sorting.
## Filters
There are certain filters that can be used to limit the study list to the desired
criteria.
@ -27,44 +28,49 @@ criteria.
- Modality: Filters the modalities
- Accession: Searches between patients accession number
An example of using study list filter is shown below:
![user-study-filter](../assets/img/user-study-filter.png)
Below the study list are pagination options for 25, 50, or 100 studies per page.
![user-study-next](../assets/img/user-study-next.png)
## Study Summary
If you you click on one of the studies, the panel for displaying the summary
of the study will shows up.
Click on a study to expand the study summary panel.
![user-study-summary](../assets/img/user-study-summary.png)
As you can see, a summary of series available in the study is shown, which contains
the series description, series number, modality of the series, and instances in the series.
Next, We will discuss the modes, and their enabled/disabled states.
A summary of series available in the study is shown, which contains the series description, series number, modality of the series, instances in the series, and buttons to launch viewer modes to display the study.
## Study Specific Modes
As seen for each study, all the available modes will get shown. What is a mode?
Modes define the higher-level functionalities and appearance for the viewer.
For instance, as seen, there are two modes shown for the selected study
All available modes are seen in the study expanded view. Modes can be enabled or disabled for a study based on the modalities contained within the study.
In the screenshot below, there are two modes shown for the selected study
- Basic Viewer: Default mode that enables rendering and measurement tracking
- PET/CT Fusion: Mode for visualizing the PET CT study in a 3x3 format.
However, based on the mode configurations (e.g., available modalities), they can be
enabled or disabled.
Based on the mode configurations (e.g., available modalities), PET/CT mode is disabled for studies that do not contain PET AND CT images.
<!-- This should be a screenshot that show an expanded study with multiple modalities (CT, MRI) but not PET. -->
Below, you can see two studies, In Study 1, Basic Viewer mode is enabled and
ready to be used; however, the PET/CT fusion is disabled by the viewer since
only PET images are found in the study.
![user-studyist-modespecific](../assets/img/user-studyist-modespecific.png)
The previous screenshot shows a study containing PET and CT images and both Basic Viewer and PET/CT Mode are available.
## View Study
You can click on the `Basic Viewer` to open the viewer for the selected study.
The `Basic Viewer` mode is available for all studies by default. Click on the mode button to launch the viewer.
![user-open-viewer](../assets/img/user-open-viewer.png)

View File

@ -2,23 +2,28 @@
sidebar_position: 3
---
# Measurement panel
# Measurement Panel
## Introduction
In `Basic Viewer` mode, right panel is the `Measurement Panel`. When you use an annotation tool, a pop up will show up and asks the user if they want to track measurements for the
series on which the annotation was drawn.
In `Basic Viewer` mode, the right panel is the `Measurement Panel`. The Measurement Panel can be expanded or hidden by clicking on the arrow to the left of `Measurements`.
<!-- We might want to make an entire section about the tracking workflow including SR hydration because it's pretty complicated. Let's review after the deploy branch is ready. Logic is in OHIF-63 OHIF-339 tickets for reference -->
Select a measurement tool and mark an image to initiate measurement tracking. A pop up will ask if you want to track measurements for the series on which the annotation was drawn.
![user-measurement-panel-modal](../../assets/img/user-measurement-panel-modal.png)
If you select `yes`, the series becomes a `tracked series`, and the current drawn measurement and next measurements will get shown up on the measurement panel on the right.
If you select `Yes`, the series becomes a `tracked series`, and the current drawn measurement and next measurements will get shown up on the measurement panel on the right.
![user-measurement-panel-tracked](../../assets/img/user-measurement-panel-tracked.png)
If you select `No`, the measurement becomes temporary. The next annotation made will repeat the measurement tracking prompt.
If you select `No, do not ask again`, all annotations made on the study will be temporary.
<!-- Temporary measurement screenshot -->
## Renaming Measurements
You can edit the measurement name by hovering over the measurement and selecting the edit icon.
## Labeling Measurements
You can edit the measurement name by hovering over the measurement and selecting the edit icon. You can also label or relabel a measurement by right-clicking on it in the viewport.
<!-- I would make this first screenshot smaller. Remove the other 2 screenshots as they are pretty self explanatory. Add another screenshot that shows the right-click menu option to lable/relabel measurement and justify the two screenshots in line together -->
![user-measurement-edit](../../assets/img/user-measurement-edit.png)
@ -30,21 +35,18 @@ Result:
## Deleting a Measurement
A measurement can be deleting by dragging it outside the image in the viewport. You can
take a look at the overview video to see this behavior.
A measurement can be deleting by dragging it outside the image in the viewport or by right-clicking on the measurement in the viewport and selecting 'Delete'.
## Jumping to a Measurement
Measurements that appear on the measurement panel are linked directly to their original
tool on the viewport. This enables the user to click on a measurement and the viewport will jump to the slice that the measurement has been drawn. You can
take a look at the overview video to see this behavior.
## Prev/Next Measurement
Measurement navigation inside the top viewport can be used to move to previous and next measurement.
![user-measurement-prevnext](../../assets/img/user-measurement-prevnext.png)
If a series containing a measurement is currently being displayed in a viewport, you can jump to display the measurement in the viewport by clicking on it in the Measurement Panel.
## Export Measurements
<!-- I think PDF and DICOM export didn't make it into this version but should be options. Let's confirm -->
You can export the measurements by clicking on the `Export`. A CSV file will get downloaded to your local computer containing the drawn measurements.
@ -67,7 +69,6 @@ For instance, running the Viewer on a local DCM4CHEE:
An overview of measurement drawing and exporting can be seen below:
<div style={{padding:"56.25% 0 0 0", position:"relative"}}>
<iframe src="https://player.vimeo.com/video/545986384?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameBorder="0" allow="autoplay; fullscreen; picture-in-picture" allowFullScreen style= {{ position:"absolute",top:0,left:0,width:"100%",height:"100%"}} title="measurement-report"></iframe>
</div>

View File

@ -7,14 +7,21 @@ sidebar_position: 2
In `Basic Viewer` mode, the left panel includes Studies related to the current patient.
You can see three main type of studies below
- Primary: The opened study from the study list
- Recent: Other studies for this patient
- All: Includes both primary and recent studies
- Primary: The opened study from the study list. This study is always expanded by default.
- Recent: All studies for the patient that contain study dates within 1 year of the primary study
- All: All studies available for the patient contained within the source repository
The `Study Panel` displays the measurement tracking status of each series within a study. As you can see in the first picture, the dashed circle on the left side of each series demonstrates whether the series is being tracked for measurement or not.
<!-- We should resize this screenshot to make it smaller. We might want to add both screenshots in-line to make better use of horizontal space. Let's ask Dan -->
![user-study-panel](../../assets/img/user-study-panel.png)
This is a new feature that we have added to `OHIF-v3`, that shows all the studies that the patient with the specific MRN had and are available from the data storage.
Studies can be expanded or collapsed by clicking on the study information in the Study Panel. If a series is being tracking within a study, the Measurement Panel will display this information while the study is collapsed.
![user-studylist-all](../../assets/img/user-studylist-all.png)
As you can see the first picture, the dashed circle on the left side of each series demonstrates whether the series is being tracked for measurement or not.
<!-- We should link to refer to measurement tracking section -->
<!-- We need to add SR functionality descriptions to this section -->

View File

@ -17,60 +17,68 @@ The four main components of the toolbar are:
## Tools
This section displays all the available tools inside the mode.
## Measurement tools
They can be used to measure the area of interest. This measurement can be performed
via:
The basic viewer comes with the following default measurement tools:
- Length Tool: Calculated the distance between two points
- Bidirectional Tool: A 2D Length tool in two main axis
- Annotation: To label and point to an area
- Ellipse: Calculates statistics on a ellipse area
- Rectangle: Calculates statistics on a rectangle area
- Probe: To read the intensity value at a location
- Length Tool: Calculates the linear distance between two points in *mm*
- Bidirectional Tool: Creates a measurement of longest diameter (LD) and longest perpendicular diameter (LPD) in *mm*
- Annotation: Used to create a qualitative marker with a freetext label
- Ellipse: Measures an ellipical area in *mm<sup>2</sup>* and Hounsfield Units (HU)
When a measurement tool is selected from the toolbar, it becomes the `active` tool. Use the caret to expand the measurement tools and select another tool.
<!-- We should add a smaller screenshot for each measurement tool. Maybe have a matrix with 4 identical sized screenshots in a box? Also we should make sure the screenshots have more realistic measurements -->
![user-viewer-toolbar-measurements](../../assets/img/user-viewer-toolbar-measurements.png)
To draw a measurement you can select it from the toolbar and click and drag mouse
to reach the desired shape, size and direction.
A sample tool drawing is shown below
## Window/Level
The `Window/Level` tool enables manipulating the window level and window width of the rendered image. Click on the tool to enable freeform adjustment, then click and drag on the viewport to freely adjust the window/level.
Click on the caret to expand the tool and choose from predefined W/L settings for common imaging scenarios.
## Presets
Preset tool enables manipulating the window level and window width of the rendered
image, which basically modifies the contrast and brightness.
You can also choose from the list of pre-defined presets by clicking on the triangle.
![user-toolbar-preset](../../assets/img/user-toolbar-preset.png)
## Download High Quality Image
By clicking on the Camera icon you can open the window for downloading the image as
common image formats (png, jpg)
## Pan and Zoom
With the Zoom tool selected, click and drag the cursor on an image to adjust the zoom. The magnification level is displayed in the viewport.
With the Pan tool selected, click and drag the cursor on an image to adjust the image position.
## Image Capture
Click on the Camera icon to download a high quality image capture using common image formats (png, jpg)
![user-toolbar-download-icon](../../assets/img/user-toolbar-download-icon.png)
In the opened modal, you can set the filename, image's width and height, and filetype and press download for downloading the image to your local computer.
In the opened modal, the filename, image's width and height, and filetype and can be configured before downloading the image to your local computer.
![user-toolbar-download](../../assets/img/user-toolbar-download.png)
## Extra tools
Lots of other tools are also available in the last tool icon drawer. If you
click on the triangle they will get appeared.
![user-toolbar-extra](../../assets/img/user-toolbar-extra.png)
## Layout Selector
Please see the `Viewport` section for details.
## More Tools Menu
- Reset View: Resets all image manipulation such as position, zoom, and W/L
- Rotate Right: Flips the image 90 degrees clockwise
- Flip Horizontally: Flips the image 180 degrees horizontally
- Stack Scroll: Links all viewports containing images to scroll together
- Magnify: Click on an image to magnify a particular area of interest
- Invert: Inverts the colorscale
- Cine: Toggles the Cine player control in the currently selected viewport. Click the `x` on the Cine player or click the tool again to toggle off.
- Angle: Measures an adjustable angle on an image
<!-- - Probe: Should probe be enabled in basic viewer? Doesn't look like it works currently -->
- Rectangle: Measures a rectangular area in mm^2 and HU
When a tool is selected from the `More Tools` menu, it becomes the active tool until it is replaced by clicking on a different tool in the More Tools menu or main toolbar.
<!-- Cine player tool -->
## Overview Video
An overview of tool usage can been seen below:
<div style={{padding:"56.25% 0 0 0", position:"relative"}}>
<iframe src="https://player.vimeo.com/video/545989422?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameBorder="0" allow="autoplay; fullscreen; picture-in-picture" allowFullScreen style= {{ position:"absolute",top:0,left:0,width:"100%",height:"100%"}} title="measurement-report"></iframe>
</div>

View File

@ -4,7 +4,6 @@ sidebar_position: 4
# Viewport
## Introduction
Image visualization happens at the viewport which contains canvas or canvases that
renders series.
@ -18,17 +17,16 @@ By default you can modify:
- Pan: middle click dragging
## Changing Series for display
To change the displayed series, you can drag and drop the desired series from the left panel. Start, by dragging the thumbnail of the series, and drop it on the viewport.
## Changing Layout
If you click on the layout icon on the toolbar, you can use the layout selector UI. After changing the layout, you can select studies for each new viewport by dragging and dropping in to the viewport.
After changing the layout from 1x1, you will see each viewport gets tagged by a letter,
which matches its series section in the study list.
![user-viewer-layout](../../assets/img/user-viewer-layout.png)
@ -36,7 +34,6 @@ which matches its series section in the study list.
An overview of viewport layout change, and manipulation can be seen below:
<div style={{padding:"56.25% 0 0 0", position:"relative"}}>
<iframe src="https://player.vimeo.com/video/545995881?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameBorder="0" allow="autoplay; fullscreen; picture-in-picture" allowFullScreen style= {{ position:"absolute",top:0,left:0,width:"100%",height:"100%"}} title="measurement-report"></iframe>
</div>