Skip to content

Client | Editor

Jump to bottom
High-drogen edited this page Apr 17, 2020 · 28 revisions

Table of contents

Visualization Features

Brightness, contrast and pre-treatment

Methods to change brightness, contrast and pretreatment are all implemented in the VisualizationService.

Zoom feature

The zoom feature's logic is in canvas-dimension.service.ts. This specialized zoom service is used by EditorService. It handles the vector transformation as well as updating the miniature window in the top-right corner of the editor view.

The other zoom component takes care of the small top-right image inside the editor.

The zoom event is triggered within the editor. When you use the scroll wheel on your mouse, a method inside canvas-dimension.service.ts called applyRedraw redraws the image to scale it properly. This method is triggered at a refresh rate of 10fps. This solution limits the latency while still providing a quality image within the editor view.

Graphic Bitmap Annotation

Biomarkers

Biomarkers are annotations of different colour which can be created with the brush or fill brush tools. They are managed in BiomarkerService, BiomarkerVisibilityService and LayersService.

BiomarkerService

This service includes methods to build the data source for the biomarker menu, to delete biomarkers data, change opacity of biomarkers and other methods to help find biomarkers in data structures.

initJsonRecursive creates a list with all the Biomarkers that were loaded from the server or the local storage.

buildTreeRecursive creates a tree which is used in biomarker.component.ts to create the detailed biomarkers list.

BiomarkerVisibilityService

This service includes methods to set the visibility of biomarkers. Its methods are used by the BiomarkerComponent and make it possible to hide biomarker, delete biomarkers and select a biomarker. It also permits to do the hide and delete operations recursively.

LayersService

This service manages the layers in which the biomarkers are placed and the undo/redo stacks.

Tools

In this section, we present the tools' architecture.

Tools are services placed in this subdirectory : client/src/app/shared/services/Editor/Tools, and inherit from the Tool service. This service is implemented in tool.service.ts and provides methods which can be implemented or reimplemented in tools that inherit from it.

To make a tool available in the toolbar, it has to be added to the ToolboxService. This service has an attribute named listOfTools which creates an instance of each tool. This services then manages the selected tool and operations that come from it.

Create new tool

To create a new tool, we simply have to create a new service in shared/services/Editor/Tools and then reference it in ToolboxService.

ToolPropertiesService

This service implements methods that are used by the ToolPropertiesComponent, which gives the user the possibility to customize the tools. For example, it permits the user to change the stroke size of the brush or eraser. All methods related to that are present in this service.

Non-Graphic Annotation

Comment feature

The comments component architecture is as follow :

  • comment-box.component.html contains the HTML code of the component.

  • comment-box.component.ts manages the comment-box events.

  • comment-box.service.ts behaves like the MVC's "controller". It manages some logic for the comments' mechanism such as Subject event handling and communication between sibling components.

  • comment-box.singleton.model.ts follows the Singleton design pattern. It will store all of the user's comments before sending them to the server.

Components are being created dynamically at runtim in editor-service component. This is because comments are not defined beforehand (at compilation time).

createCommentBox(textArea?: string) creates comment-boxes.

Widgets

Widgets are a modular non-graphic annotation that can be added or removed from an existing task through the Management page. Their content is saved in their own DB table.

Create a new widget type

Add the new widget type name to the widget model's enum on the server widget.model.ts.

export enum WidgetType {
    multiLine = 'multiLine',
    singleLine = 'singleLine',
    numerical = 'numerical',
    multiButton = 'multiButton',

}

widget.component.html is responsible for displaying the respective widgets in the editor's right-side menu. Create a new component in \client\src\app\editor\right-menu\widget\widgetTypes\ and display it through widget.component.html.

<app-widget-single-line *ngFor="let widget of singleLineWidgets" [widget]="widget" (saveEntryEvent)="saveEntry($event)"></app-widget-single-line>
<app-widget-multiple-lines *ngFor="let widget of multiLineWidgets" ></app-widget-multiple-lines>

Create an array of Widget as an attribute in widget.component.ts and assign it its sorted value in initWidgets().

Saving a Annotation Version

The submission of a current task work saves for a user the Annotation, the Comments and the Widgets on the DataBase.

Save Confirmation

The Submit button at the bottom of the right menu displays a pop-up when the user clicks on it. The pop-up displays the following options for the user:

  • Cancel: Cancels the saving
  • Save: Save the work on the DataBase.
  • Save & Load Next: Save the work on the DataBase and load the next task to complete

The user can also mark the current Task as completed or not.

Local Storage

The local storage saves the Annotation of a current work in a local Annotation Version. All graphical modifications are saved every 10 seconds. In case the navigator crashes or is closed by mistake, these modifications can be restored once the page is reloaded.

Home

CLI

Server

Client

Clone this wiki locally