chore(release): publish [skip ci]

- @ohif/extension-cornerstone@2.0.2
 - @ohif/viewer@3.0.3

.circleci/config.yml

@@ -367,6 +367,31 @@ workflows:
           requires:
             - UNIT_TESTS
 
+  PR_OPTIONAL_VISUAL_TESTS:
+    jobs:
+      - AWAIT_APPROVAL:
+          type: approval
+      # Update hub.docker.org
+      - cypress/run:
+          name: 'Generate Percy Snapshots'
+          executor: cypress/browsers-chrome76
+          pre-steps:
+            - run: 'rm -rf ~/.yarn && npm i -g yarn && yarn -v && yarn global
+                add wait-on' # Use yarn latest
+          yarn: true
+          store_artifacts: false
+          working_directory: platform/viewer
+          build: npx cross-env QUICK_BUILD=true yarn run build
+          # start server --> verify running --> percy + chrome + cypress
+          command: yarn run test:e2e:dist
+          cache-key: 'yarn-packages-{{ checksum "yarn.lock" }}'
+          no-workspace: true # Don't persist workspace
+          post-steps:
+            - store_artifacts:
+                path: platform/viewer/cypress/screenshots
+          requires:
+            - AWAIT_APPROVAL
+
   PR_OPTIONAL_DOCKER_PUBLISH:
     jobs:
       # https://circleci.com/docs/2.0/workflows/#holding-a-workflow-for-a-manual-approval
@@ -419,6 +444,27 @@ workflows:
           filters:
             branches:
               only: master
+      # Update base branch snapshots
+      - cypress/run:
+          name: 'Generate Percy Snapshots'
+          executor: cypress/browsers-chrome76
+          pre-steps:
+            - run: 'rm -rf ~/.yarn && npm i -g yarn && yarn -v && yarn global
+                add wait-on' # Use yarn latest
+          yarn: true
+          store_artifacts: false
+          working_directory: platform/viewer
+          build: npx cross-env QUICK_BUILD=true yarn run build
+          # start server --> verify running --> percy + chrome + cypress
+          command: yarn run test:e2e:dist
+          cache-key: 'yarn-packages-{{ checksum "yarn.lock" }}'
+          no-workspace: true # Don't persist workspace
+          post-steps:
+            - store_artifacts:
+                path: platform/viewer/cypress/screenshots
+          filters:
+            branches:
+              only: master
       - DOCKER_MASTER_PUBLISH:
           requires:
             - NPM_PUBLISH

.github/stale.yml

@@ -9,7 +9,7 @@ daysUntilClose: 7
 exemptLabels:
   - 'Story :raised_hands:'
   - 'Bug: Verified :bug:'
-  - 'Task: CI/Tooling 🤖'
+  - 'Task: CI/Tooling :robot:'
   - 'Task: Docs 📖'
   - 'Task: Docs :book:'
   - 'Task: Refactor 🛠'

CODE_OF_CONDUCT.md

@@ -0,0 +1,76 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, sex characteristics, gender identity and expression,
+level of experience, education, socio-economic status, nationality, personal
+appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+ advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+ address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+ professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at danny.ri.brown+OHIFcoc@gmail.com. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see
+https://www.contributor-covenant.org/faq

CONTRIBUTING.md

@@ -0,0 +1 @@
+See our contributing guidelines at [`https://docs.ohif.org`](https://docs.ohif.org/development/contributing.html)

README.md

@@ -271,8 +271,8 @@ MIT © [OHIF](https://github.com/OHIF)
 <!-- Badges -->
 [lerna-image]: https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg
 [lerna-url]: https://lerna.js.org/
-[netlify-image]: https://api.netlify.com/api/v1/badges/a5d369ab-18a6-41c3-bcde-83805205ac7f/deploy-status
-[netlify-url]: https://app.netlify.com/sites/ohif/deploys
+[netlify-image]: https://api.netlify.com/api/v1/badges/32708787-c9b0-4634-b50f-7ca41952da77/deploy-status
+[netlify-url]: https://app.netlify.com/sites/ohif-dev/deploys
 [all-contributors-image]: https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square
 [circleci-image]: https://circleci.com/gh/OHIF/Viewers.svg?style=svg
 [circleci-url]: https://circleci.com/gh/OHIF/Viewers

docs/latest/extensions/modules/sop-class-handler.md

@@ -1,6 +1,37 @@
 # Module: SOP Class Handler
 
-...
+An extension can register a SOP Class Handler Module by defining a
+`getSopClassHandlerModule` method. The SOP Class Handler is a bit different from
+the other modules, as it doesn't provide a `1:1` schema for UI or provide it's
+own components. It instead defines:
+
+- `sopClassUids`: an array of string SOP Class UIDs that the
+  `getDisplaySetFromSeries` method should be applied to.
+- `getDisplaySetFromSeries`: a method that maps series and study metadata to a
+  display set
+
+A `displaySet` has the following shape:
+
+```js
+return {
+  plugin: 'html',
+  modality: 'SR',
+  displaySetInstanceUid: 0,
+  wadoRoot: study.getData().wadoRoot,
+  wadoUri: instance.getData().wadouri,
+  sopInstanceUid: instance.getSOPInstanceUID(),
+  seriesInstanceUid: series.getSeriesInstanceUID(),
+  studyInstanceUid: study.getStudyInstanceUID(),
+  authorizationHeaders,
+};
+```
+
+Where the `plugin` key is used to influence the default `ViewportComponent` for
+rendering the `displaySet`. Additional properties are passed to the
+`ViewportComponent` and used by the default `StudyBrowser` to render
+"thumbnails" for each `displaySet`
+
+## Example SOP Class Handler Module
 
 ```js
 const SOP_CLASS_UIDS = {
@@ -8,29 +39,52 @@ const SOP_CLASS_UIDS = {
   ENHANCED_SR: '1.2.840.10008.5.1.4.1.1.88.22',
 };
 
-const sopClassHandlerModule = {
-  id: 'OHIFDicomHtmlSopClassHandler',
-  sopClassUids: Object.values(SOP_CLASS_UIDS),
+export default {
+  id: 'example-sop-class-handler-module',
 
-  /**
-   * @param {object} series -
-   * @param {object} study -
-   * @param {object} dicomWebClient -
-   * @param {object} authorizationHeaders -
-   */
-  getDisplaySetFromSeries(series, study, dicomWebClient, authorizationHeaders) {
-    const instance = series.getFirstInstance();
+/**
+ * @param {object} params
+ * @param {ServicesManager} params.servicesManager
+ * @param {CommandsManager} params.commandsManager
+ */
+getSopClassHandlerModule({ servicesManager, commandsManager }) {
+  return {
+    id: 'OHIFDicomHtmlSopClassHandler',
+    sopClassUids: Object.values(SOP_CLASS_UIDS),
 
-    return {
-      plugin: 'html',
-      displaySetInstanceUid: 0,
-      wadoRoot: study.getData().wadoRoot,
-      wadoUri: instance.getData().wadouri,
-      sopInstanceUid: instance.getSOPInstanceUID(),
-      seriesInstanceUid: series.getSeriesInstanceUID(),
-      studyInstanceUid: study.getStudyInstanceUID(),
-      authorizationHeaders,
-    };
-  },
+    /**
+     * @param {object} series -
+     * @param {object} study -
+     * @param {object} dicomWebClient -
+     * @param {object} authorizationHeaders -
+     */
+    getDisplaySetFromSeries(series, study, dicomWebClient, authorizationHeaders) {
+      const instance = series.getFirstInstance();
+
+      return {
+        plugin: 'html',
+        displaySetInstanceUid: 0,
+        wadoRoot: study.getData().wadoRoot,
+        wadoUri: instance.getData().wadouri,
+        sopInstanceUid: instance.getSOPInstanceUID(),
+        seriesInstanceUid: series.getSeriesInstanceUID(),
+        studyInstanceUid: study.getStudyInstanceUID(),
+        authorizationHeaders,
+      };
+    },
+  }
 };
 ```
+
+## `@ohif/viewer` usage
+
+We use the `sopClassHandlerModule`s in three different places:
+
+- `ViewerLocalFileData.js`
+- `ViewerRetrieveStudyData.js`
+- `StandaloneRouting.js`
+
+Each time, it is used to map study and series data to `displaySets`. It does
+this by working alongside the `StudyMetadataManager` in `@ohif/core`. That
+manager has the method `createDisplaySets` that takes an array of
+`sopClassHandlerModules`.

docs/latest/services/ui/index.md

@@ -43,7 +43,7 @@ translate to in practice?
 
 ```js
 // In the application
-const UINotificationService = createUINotificationService();
+import UINotificationService from '@ohif/core';
 const servicesManager = new ServicesManager();
 
 servicesManager.registerService(UINotificationService);

extensions/cornerstone/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.2](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@2.0.1...@ohif/extension-cornerstone@2.0.2) (2019-12-11)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
+## [2.0.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@2.0.0...@ohif/extension-cornerstone@2.0.1) (2019-12-09)
+
+**Note:** Version bump only for package @ohif/extension-cornerstone
+
+
+
+
+
 # [2.0.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@1.7.2...@ohif/extension-cornerstone@2.0.0) (2019-12-09)
 
 

extensions/cornerstone/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-cornerstone",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "OHIF extension for Cornerstone",
   "author": "OHIF",
   "license": "MIT",

extensions/cornerstone/src/init.js

@@ -102,7 +102,7 @@ export default function init({ servicesManager, configuration }) {
   ];
 
   /* Add extension tools configuration here. */
-  const extensionToolsConfiguration = {
+  const internalToolsConfig = {
     ArrowAnnotate: {
       configuration: {
         getTextCallback: (callback, eventDetails) =>
@@ -113,19 +113,15 @@ export default function init({ servicesManager, configuration }) {
     },
   };
 
-  const isEmpty = obj => Object.keys(obj).length < 1;
-  if (!isEmpty(configuration.tools) || !isEmpty(extensionToolsConfiguration)) {
-    /* Add tools with its custom props through extension configuration. */
-    tools.forEach(tool => {
-      const toolName = tool.name.replace('Tool', '');
-      const configurationToolProps = configuration.tools[toolName] || {};
-      const extensionToolProps = extensionToolsConfiguration[toolName];
-      let props = merge(extensionToolProps, configurationToolProps);
-      csTools.addTool(tool, props);
-    });
-  } else {
-    tools.forEach(tool => csTools.addTool(tool));
-  }
+  /* Add tools with its custom props through extension configuration. */
+  tools.forEach(tool => {
+    const toolName = tool.name.replace('Tool', '');
+    const externalToolsConfig = configuration.tools || {};
+    const externalToolProps = externalToolsConfig[toolName] || {};
+    const internalToolProps = internalToolsConfig[toolName] || {};
+    const props = merge(internalToolProps, externalToolProps);
+    csTools.addTool(tool, props);
+  });
 
   csTools.setToolActive('Pan', { mouseButtonMask: 4 });
   csTools.setToolActive('Zoom', { mouseButtonMask: 2 });

extensions/vtk/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.2](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.0.1...@ohif/extension-vtk@1.0.2) (2019-12-11)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
+## [1.0.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.0.0...@ohif/extension-vtk@1.0.1) (2019-12-09)
+
+**Note:** Version bump only for package @ohif/extension-vtk
+
+
+
+
+
 # [1.0.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.54.6...@ohif/extension-vtk@1.0.0) (2019-12-09)
 
 

extensions/vtk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-vtk",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "OHIF extension for VTK.js",
   "author": "OHIF",
   "license": "MIT",
@@ -52,8 +52,8 @@
     "react-vtkjs-viewport": "^0.3.9"
   },
   "devDependencies": {
-    "@ohif/core": "^2.0.0",
-    "@ohif/ui": "^1.0.0",
+    "@ohif/core": "^2.0.2",
+    "@ohif/ui": "^1.0.1",
     "cornerstone-tools": "^4.8.0",
     "cornerstone-wado-image-loader": "^3.0.0",
     "dcmjs": "^0.6.1",

platform/core/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.2](https://github.com/OHIF/Viewers/compare/@ohif/core@2.0.1...@ohif/core@2.0.2) (2019-12-11)
+
+**Note:** Version bump only for package @ohif/core
+
+
+
+
+
+## [2.0.1](https://github.com/OHIF/Viewers/compare/@ohif/core@2.0.0...@ohif/core@2.0.1) (2019-12-09)
+
+**Note:** Version bump only for package @ohif/core
+
+
+
+
+
 # [2.0.0](https://github.com/OHIF/Viewers/compare/@ohif/core@1.13.3...@ohif/core@2.0.0) (2019-12-09)
 
 

platform/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/core",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "Generic business logic for web-based medical imaging applications",
   "author": "OHIF Core Team",
   "license": "MIT",

platform/core/src/index.js

@@ -20,11 +20,11 @@ import user from './user.js';
 import utils from './utils/';
 
 import {
-  createUINotificationService,
-  createUIModalService,
-  createUIDialogService,
-  createUIContextMenuService,
-  createUILabellingFlowService,
+  UINotificationService,
+  UIModalService,
+  UIDialogService,
+  UIContextMenuService,
+  UILabellingFlowService,
 } from './services';
 
 const OHIF = {
@@ -52,11 +52,11 @@ const OHIF = {
   measurements,
   hangingProtocols,
   //
-  createUINotificationService,
-  createUIModalService,
-  createUIDialogService,
-  createUIContextMenuService,
-  createUILabellingFlowService,
+  UINotificationService,
+  UIModalService,
+  UIDialogService,
+  UIContextMenuService,
+  UILabellingFlowService,
 };
 
 export {
@@ -83,11 +83,11 @@ export {
   measurements,
   hangingProtocols,
   //
-  createUINotificationService,
-  createUIModalService,
-  createUIDialogService,
-  createUIContextMenuService,
-  createUILabellingFlowService,
+  UINotificationService,
+  UIModalService,
+  UIDialogService,
+  UIContextMenuService,
+  UILabellingFlowService,
 };
 
 export { OHIF };

platform/core/src/index.test.js

@@ -10,11 +10,11 @@ describe('Top level exports', () => {
       'HotkeysManager',
       'ServicesManager',
       //
-      'createUINotificationService',
-      'createUIModalService',
-      'createUIDialogService',
-      'createUIContextMenuService',
-      'createUILabellingFlowService',
+      'UINotificationService',
+      'UIModalService',
+      'UIDialogService',
+      'UIContextMenuService',
+      'UILabellingFlowService',
       //
       'utils',
       'studies',

platform/core/src/services/ServicesManager.js

@@ -7,10 +7,12 @@ export default class ServicesManager {
   }
 
   /**
+   * Registers a new service.
    *
    * @param {Object} service
+   * @param {Object} configuration
    */
-  registerService(service) {
+  registerService(service, configuration = {}) {
     if (!service) {
       log.warn(
         'Attempting to register a null/undefined service. Exiting early.'
@@ -18,32 +20,45 @@ export default class ServicesManager {
       return;
     }
 
-    let serviceName = service.name;
-
-    if (!serviceName) {
+    if (!service.name) {
       log.warn(`Service name not set. Exiting early.`);
       return;
     }
 
-    if (this.registeredServiceNames.includes(serviceName)) {
+    if (this.registeredServiceNames.includes(service.name)) {
       log.warn(
-        `Extension name ${serviceName} has already been registered. Exiting before duplicating services.`
+        `Service name ${service.name} has already been registered. Exiting before duplicating services.`
       );
       return;
     }
 
-    this.services[service.name] = service;
+    if (service.create) {
+      this.services[service.name] = service.create({ configuration });
+    } else {
+      log.warn(`Service create factory function not defined. Exiting early.`);
+      return;
+    }
 
-    // Track service registration
-    this.registeredServiceNames.push(serviceName);
+    /* Track service registration */
+    this.registeredServiceNames.push(service.name);
   }
 
   /**
-   * An array of services.
+   * An array of services, or an array of arrays that contains service
+   * configuration pairs.
    *
    * @param {Object[]} services - Array of services
    */
   registerServices(services) {
-    services.forEach(service => this.registerService(service));
+    services.forEach(service => {
+      const hasConfiguration = Array.isArray(service);
+
+      if (hasConfiguration) {
+        const [ohifService, configuration] = service;
+        this.registerService(ohifService, configuration);
+      } else {
+        this.registerService(service);
+      }
+    });
   }
 }

platform/core/src/services/ServicesManager.test.js

@@ -16,18 +16,32 @@ describe('ServicesManager.js', () => {
     it('calls registerService() for each service', () => {
       servicesManager.registerService = jest.fn();
 
-      const fakeServices = [
-        { name: 'UINotificationTestService', hide: jest.fn() },
-        { name: 'UIModalTestService', hide: jest.fn() },
-      ];
-
-      servicesManager.registerServices(fakeServices);
+      servicesManager.registerServices([
+        { name: 'UINotificationTestService', create: jest.fn() },
+        { name: 'UIModalTestService', create: jest.fn() },
+      ]);
 
       expect(servicesManager.registerService.mock.calls.length).toBe(2);
     });
+
+    it('calls registerService() for each service passing its configuration if tuple', () => {
+      servicesManager.registerService = jest.fn();
+      const fakeConfiguration = { testing: true };
+
+      servicesManager.registerServices([
+        { name: 'UINotificationTestService', create: jest.fn() },
+        [{ name: 'UIModalTestService', create: jest.fn() }, fakeConfiguration],
+      ]);
+
+      expect(servicesManager.registerService.mock.calls[1]).toContain(
+        fakeConfiguration
+      );
+    });
   });
 
   describe('registerService()', () => {
+    const fakeService = { name: 'UINotificationService', create: jest.fn() };
+
     it('logs a warning if the service is null or undefined', () => {
       const undefinedService = undefined;
       const nullService = null;
@@ -39,8 +53,8 @@ describe('ServicesManager.js', () => {
     });
 
     it('logs a warning if the service does not have a name', () => {
-      const serviceWithEmptyName = { name: '', hide: jest.fn() };
-      const serviceWithoutName = { hide: jest.fn() };
+      const serviceWithEmptyName = { name: '', create: jest.fn() };
+      const serviceWithoutName = { create: jest.fn() };
 
       servicesManager.registerService(serviceWithEmptyName);
       servicesManager.registerService(serviceWithoutName);
@@ -48,23 +62,37 @@ describe('ServicesManager.js', () => {
       expect(log.warn.mock.calls.length).toBe(2);
     });
 
-    it('tracks which services have been registered', () => {
-      const service = {
-        name: 'UINotificationService',
-      };
+    it('logs a warning if the service does not have a create factory function', () => {
+      const serviceWithoutCreate = { name: 'UINotificationService' };
 
-      servicesManager.registerService(service);
-
-      expect(servicesManager.registeredServiceNames).toContain(service.name);
-    });
-
-    it('logs a warning if the service has an name that has already been registered', () => {
-      const service = { name: 'UINotificationService' };
-
-      servicesManager.registerService(service);
-      servicesManager.registerService(service);
+      servicesManager.registerService(serviceWithoutCreate);
 
       expect(log.warn.mock.calls.length).toBe(1);
     });
+
+    it('tracks which services have been registered', () => {
+      servicesManager.registerService(fakeService);
+
+      expect(servicesManager.registeredServiceNames).toContain(
+        fakeService.name
+      );
+    });
+
+    it('logs a warning if the service has an name that has already been registered', () => {
+      servicesManager.registerService(fakeService);
+      servicesManager.registerService(fakeService);
+
+      expect(log.warn.mock.calls.length).toBe(1);
+    });
+
+    it('pass configuration to service create factory function', () => {
+      const configuration = { config: 'Some configuration' };
+
+      servicesManager.registerService(fakeService, configuration);
+
+      expect(fakeService.create.mock.calls[0][0]).toEqual({
+        configuration,
+      });
+    });
   });
 });

platform/core/src/services/UIContextMenuService/index.js

@@ -5,29 +5,27 @@
  * @property {Event} event The event with tool information.
  */
 
-const uiContextMenuServicePublicAPI = {
-  name: 'UIContextMenuService',
-  hide,
-  show,
+const name = 'UIContextMenuService';
+
+const publicAPI = {
+  name,
+  hide: _hide,
+  show: _show,
   setServiceImplementation,
 };
 
-const uiContextMenuServiceImplementation = {
+const serviceImplementation = {
   _show: () => console.warn('show() NOT IMPLEMENTED'),
   _hide: () => console.warn('hide() NOT IMPLEMENTED'),
 };
 
-function createUIContextMenuService() {
-  return uiContextMenuServicePublicAPI;
-}
-
 /**
  * Show a new UI ContextMenu dialog;
  *
  * @param {ContextMenuProps} props { event }
  */
-function show({ event }) {
-  return uiContextMenuServiceImplementation._show({
+function _show({ event }) {
+  return serviceImplementation._show({
     event,
   });
 }
@@ -36,8 +34,8 @@ function show({ event }) {
  * Hide a UI ContextMenu dialog;
  *
  */
-function hide() {
-  return uiContextMenuServiceImplementation._hide();
+function _hide() {
+  return serviceImplementation._hide();
 }
 
 /**
@@ -53,11 +51,16 @@ function setServiceImplementation({
   hide: hideImplementation,
 }) {
   if (showImplementation) {
-    uiContextMenuServiceImplementation._show = showImplementation;
+    serviceImplementation._show = showImplementation;
   }
   if (hideImplementation) {
-    uiContextMenuServiceImplementation._hide = hideImplementation;
+    serviceImplementation._hide = hideImplementation;
   }
 }
 
-export default createUIContextMenuService;
+export default {
+  name,
+  create: ({ configuration = {} }) => {
+    return publicAPI;
+  },
+};

platform/core/src/services/UIDialogService/index.js

@@ -25,30 +25,28 @@
  * @property {Function} onDrag Called while dragging.
  */
 
-const uiDialogServicePublicAPI = {
-  name: 'UIDialogService',
-  dismiss,
-  dismissAll,
-  create,
+const name = 'UIDialogService';
+
+const publicAPI = {
+  name,
+  dismiss: _dismiss,
+  dismissAll: _dismissAll,
+  create: _create,
   setServiceImplementation,
 };
 
-const uiDialogServiceImplementation = {
+const serviceImplementation = {
   _dismiss: () => console.warn('dismiss() NOT IMPLEMENTED'),
   _dismissAll: () => console.warn('dismissAll() NOT IMPLEMENTED'),
   _create: () => console.warn('create() NOT IMPLEMENTED'),
 };
 
-function createUIDialogService() {
-  return uiDialogServicePublicAPI;
-}
-
 /**
  * Show a new UI dialog;
  *
  * @param {DialogProps} props { id, content, contentProps, onStart, onDrag, onStop, centralize, isDraggable, showOverlay, preservePosition, defaultPosition }
  */
-function create({
+function _create({
   id,
   content,
   contentProps,
@@ -61,7 +59,7 @@ function create({
   showOverlay = false,
   defaultPosition,
 }) {
-  return uiDialogServiceImplementation._create({
+  return serviceImplementation._create({
     id,
     content,
     contentProps,
@@ -81,8 +79,8 @@ function create({
  *
  * @returns void
  */
-function dismissAll() {
-  return uiDialogServiceImplementation._dismissAll();
+function _dismissAll() {
+  return serviceImplementation._dismissAll();
 }
 
 /**
@@ -90,8 +88,8 @@ function dismissAll() {
  *
  * @returns void
  */
-function dismiss({ id }) {
-  return uiDialogServiceImplementation._dismiss({ id });
+function _dismiss({ id }) {
+  return serviceImplementation._dismiss({ id });
 }
 
 /**
@@ -109,14 +107,19 @@ function setServiceImplementation({
   create: createImplementation,
 }) {
   if (dismissImplementation) {
-    uiDialogServiceImplementation._dismiss = dismissImplementation;
+    serviceImplementation._dismiss = dismissImplementation;
   }
   if (dismissAllImplementation) {
-    uiDialogServiceImplementation._dismissAll = dismissAllImplementation;
+    serviceImplementation._dismissAll = dismissAllImplementation;
   }
   if (createImplementation) {
-    uiDialogServiceImplementation._create = createImplementation;
+    serviceImplementation._create = createImplementation;
   }
 }
 
-export default createUIDialogService;
+export default {
+  name,
+  create: ({ configuration = {} }) => {
+    return publicAPI;
+  },
+};

platform/core/src/services/UILabellingFlowService/index.js

@@ -8,28 +8,26 @@
  *
  */
 
-const uiLabellingFlowServicePublicAPI = {
-  name: 'UILabellingFlowService',
-  show,
-  hide,
+const name = 'UILabellingFlowService';
+
+const publicAPI = {
+  name,
+  show: _show,
+  hide: _hide,
   setServiceImplementation,
 };
 
-const uiLabellingFlowServiceImplementation = {
+const serviceImplementation = {
   _show: () => console.warn('show() NOT IMPLEMENTED'),
   _hide: () => console.warn('hide() NOT IMPLEMENTED'),
 };
 
-function createUILabellingFlowService() {
-  return uiLabellingFlowServicePublicAPI;
-}
-
 /**
  * Hide a UI LabellingFlow dialog;
  *
  */
-function hide() {
-  return uiLabellingFlowServiceImplementation._hide();
+function _hide() {
+  return serviceImplementation._hide();
 }
 
 /**
@@ -37,8 +35,8 @@ function hide() {
  *
  * @param {LabellingFlowProps} props { defaultPosition, centralize, props }
  */
-function show({ defaultPosition, centralize, props }) {
-  return uiLabellingFlowServiceImplementation._show({
+function _show({ defaultPosition, centralize, props }) {
+  return serviceImplementation._show({
     defaultPosition,
     centralize,
     props,
@@ -58,11 +56,16 @@ function setServiceImplementation({
   hide: hideImplementation,
 }) {
   if (showImplementation) {
-    uiLabellingFlowServiceImplementation._show = showImplementation;
+    serviceImplementation._show = showImplementation;
   }
   if (hideImplementation) {
-    uiLabellingFlowServiceImplementation._hide = hideImplementation;
+    serviceImplementation._hide = hideImplementation;
   }
 }
 
-export default createUILabellingFlowService;
+export default {
+  name,
+  create: ({ configuration = {} }) => {
+    return publicAPI;
+  },
+};

platform/core/src/services/UIModalService/index.js

@@ -11,28 +11,26 @@
  * @property {string} [customClassName=null] The custom class to style the modal.
  */
 
-const uiModalServicePublicAPI = {
-  name: 'UIModalService',
-  hide,
-  show,
+const name = 'UIModalService';
+
+const publicAPI = {
+  name,
+  hide: _hide,
+  show: _show,
   setServiceImplementation,
 };
 
-const uiModalServiceImplementation = {
+const serviceImplementation = {
   _hide: () => console.warn('hide() NOT IMPLEMENTED'),
   _show: () => console.warn('show() NOT IMPLEMENTED'),
 };
 
-function createUIModalService() {
-  return uiModalServicePublicAPI;
-}
-
 /**
  * Show a new UI modal;
  *
  * @param {ModalProps} props { content, contentProps, shouldCloseOnEsc, isOpen, closeButton, title, customClassName }
  */
-function show({
+function _show({
   content = null,
   contentProps = null,
   shouldCloseOnEsc = false,
@@ -41,7 +39,7 @@ function show({
   title = null,
   customClassName = null,
 }) {
-  return uiModalServiceImplementation._show({
+  return serviceImplementation._show({
     content,
     contentProps,
     shouldCloseOnEsc,
@@ -57,8 +55,8 @@ function show({
  *
  * @returns void
  */
-function hide() {
-  return uiModalServiceImplementation._hide();
+function _hide() {
+  return serviceImplementation._hide();
 }
 
 /**
@@ -74,11 +72,16 @@ function setServiceImplementation({
   show: showImplementation,
 }) {
   if (hideImplementation) {
-    uiModalServiceImplementation._hide = hideImplementation;
+    serviceImplementation._hide = hideImplementation;
   }
   if (showImplementation) {
-    uiModalServiceImplementation._show = showImplementation;
+    serviceImplementation._show = showImplementation;
   }
 }
 
-export default createUIModalService;
+export default {
+  name,
+  create: ({ configuration = {} }) => {
+    return publicAPI;
+  },
+};

platform/core/src/services/UINotificationService/index.js

@@ -10,22 +10,20 @@
  * @property {boolean} [autoClose=true]
  */
 
-const uiNotificationServicePublicAPI = {
-  name: 'UINotificationService',
-  hide,
-  show,
+const name = 'UINotificationService';
+
+const publicAPI = {
+  name,
+  hide: _hide,
+  show: _show,
   setServiceImplementation,
 };
 
-const uiNotificationServiceImplementation = {
+const serviceImplementation = {
   _hide: () => console.warn('hide() NOT IMPLEMENTED'),
   _show: () => console.warn('show() NOT IMPLEMENTED'),
 };
 
-function createUINotificationService() {
-  return uiNotificationServicePublicAPI;
-}
-
 /**
  * Create and show a new UI notification; returns the
  * ID of the created notification.
@@ -33,7 +31,7 @@ function createUINotificationService() {
  * @param {Notification} notification { title, message, duration, position, type, autoClose}
  * @returns {number} id
  */
-function show({
+function _show({
   title,
   message,
   duration = 5000,
@@ -41,7 +39,7 @@ function show({
   type = 'info',
   autoClose = true,
 }) {
-  return uiNotificationServiceImplementation._show({
+  return serviceImplementation._show({
     title,
     message,
     duration,
@@ -57,8 +55,8 @@ function show({
  * @param {number} id - id of the notification to hide/dismiss
  * @returns undefined
  */
-function hide(id) {
-  return uiNotificationServiceImplementation._hide({ id });
+function _hide(id) {
+  return serviceImplementation._hide({ id });
 }
 
 /**
@@ -74,11 +72,16 @@ function setServiceImplementation({
   show: showImplementation,
 }) {
   if (hideImplementation) {
-    uiNotificationServiceImplementation._hide = hideImplementation;
+    serviceImplementation._hide = hideImplementation;
   }
   if (showImplementation) {
-    uiNotificationServiceImplementation._show = showImplementation;
+    serviceImplementation._show = showImplementation;
   }
 }
 
-export default createUINotificationService;
+export default {
+  name,
+  create: ({ configuration = {} }) => {
+    return publicAPI;
+  },
+};

platform/core/src/services/index.js

@@ -1,15 +1,15 @@
 import ServicesManager from './ServicesManager.js';
-import createUINotificationService from './UINotificationService';
-import createUIModalService from './UIModalService';
-import createUIDialogService from './UIDialogService';
-import createUIContextMenuService from './UIContextMenuService';
-import createUILabellingFlowService from './UILabellingFlowService';
+import UINotificationService from './UINotificationService';
+import UIModalService from './UIModalService';
+import UIDialogService from './UIDialogService';
+import UIContextMenuService from './UIContextMenuService';
+import UILabellingFlowService from './UILabellingFlowService';
 
 export {
-  createUINotificationService,
-  createUIModalService,
-  createUIDialogService,
-  createUIContextMenuService,
-  createUILabellingFlowService,
+  UINotificationService,
+  UIModalService,
+  UIDialogService,
+  UIContextMenuService,
+  UILabellingFlowService,
   ServicesManager,
 };

platform/ui/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.1](https://github.com/OHIF/Viewers/compare/@ohif/ui@1.0.0...@ohif/ui@1.0.1) (2019-12-09)
+
+**Note:** Version bump only for package @ohif/ui
+
+
+
+
+
 # [1.0.0](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.65.4...@ohif/ui@1.0.0) (2019-12-09)
 
 

platform/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/ui",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A set of React components for Medical Imaging Viewers",
   "author": "OHIF Contributors",
   "license": "MIT",

platform/viewer/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.3](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.0.2...@ohif/viewer@3.0.3) (2019-12-11)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [3.0.2](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.0.1...@ohif/viewer@3.0.2) (2019-12-11)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
+## [3.0.1](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.0.0...@ohif/viewer@3.0.1) (2019-12-09)
+
+**Note:** Version bump only for package @ohif/viewer
+
+
+
+
+
 # [3.0.0](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.11.8...@ohif/viewer@3.0.0) (2019-12-09)
 
 

platform/viewer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/viewer",
-  "version": "3.0.0",
+  "version": "3.0.3",
   "description": "OHIF Viewer",
   "author": "OHIF Contributors",
   "license": "MIT",
@@ -45,14 +45,14 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.5.5",
-    "@ohif/core": "^2.0.0",
-    "@ohif/extension-cornerstone": "^2.0.0",
+    "@ohif/core": "^2.0.2",
+    "@ohif/extension-cornerstone": "^2.0.2",
     "@ohif/extension-dicom-html": "^1.0.2",
     "@ohif/extension-dicom-microscopy": "^0.50.6",
     "@ohif/extension-dicom-pdf": "^1.0.0",
-    "@ohif/extension-vtk": "^1.0.0",
+    "@ohif/extension-vtk": "^1.0.2",
     "@ohif/i18n": "^0.52.2",
-    "@ohif/ui": "^1.0.0",
+    "@ohif/ui": "^1.0.1",
     "@tanem/react-nprogress": "^1.1.25",
     "classnames": "^2.2.6",
     "core-js": "^3.2.1",

platform/viewer/public/config/default.js

@@ -70,5 +70,5 @@ window.config = {
     // ~ Cornerstone Tools
     { commandName: 'setZoomTool', label: 'Zoom', keys: ['z'] },
   ],
-  cornerstoneExtensionConfig: { tools: {} },
+  cornerstoneExtensionConfig: {},
 };

platform/viewer/src/App.js

@@ -9,7 +9,7 @@ import { hot } from 'react-hot-loader/root';
 import OHIFCornerstoneExtension from '@ohif/extension-cornerstone';
 
 import ToolContextMenu from './connectedComponents/ToolContextMenu';
-import LabellingManager from './components/Labelling/LabellingManager';
+import LabellingFlow from './components/Labelling/LabellingFlow';
 
 import {
   SnackbarProvider,
@@ -28,11 +28,11 @@ import {
   ExtensionManager,
   ServicesManager,
   HotkeysManager,
-  createUINotificationService,
-  createUIModalService,
-  createUIDialogService,
-  createUIContextMenuService,
-  createUILabellingFlowService,
+  UINotificationService,
+  UIModalService,
+  UIDialogService,
+  UIContextMenuService,
+  UILabellingFlowService,
   utils,
   redux as reduxOHIF,
 } from '@ohif/core';
@@ -70,13 +70,6 @@ const commandsManagerConfig = {
   getActiveContexts: () => getActiveContexts(store.getState()),
 };
 
-/** Services */
-const UINotificationService = createUINotificationService();
-const UIModalService = createUIModalService();
-const UIDialogService = createUIDialogService();
-const UIContextMenuService = createUIContextMenuService();
-const UILabellingFlowService = createUILabellingFlowService();
-
 /** Managers */
 const commandsManager = new CommandsManager(commandsManagerConfig);
 const hotkeysManager = new HotkeysManager(commandsManager);
@@ -165,6 +158,14 @@ class App extends Component {
 
   render() {
     const { whiteLabelling, routerBasename } = this._appConfig;
+    const {
+      UINotificationService,
+      UIDialogService,
+      UILabellingFlowService,
+      UIModalService,
+      UIContextMenuService,
+    } = servicesManager.services;
+
     if (this._userManager) {
       return (
         <AppContext.Provider value={{ appConfig: this._appConfig }}>
@@ -182,7 +183,7 @@ class App extends Component {
                           >
                             <LabellingFlowProvider
                               service={UILabellingFlowService}
-                              labellingComponent={LabellingManager}
+                              labellingComponent={LabellingFlow}
                               commandsManager={commandsManager}
                             >
                               <ContextMenuProvider
@@ -219,7 +220,7 @@ class App extends Component {
                     <ModalProvider modal={OHIFModal} service={UIModalService}>
                       <LabellingFlowProvider
                         service={UILabellingFlowService}
-                        labellingComponent={LabellingManager}
+                        labellingComponent={LabellingFlow}
                         commandsManager={commandsManager}
                       >
                         <ContextMenuProvider

platform/viewer/src/components/Labelling/LabellingFlow.css

@@ -6,8 +6,7 @@
   max-height: 500px;
 }
 
-.labellingComponent .selectedLabel,
-.labellingComponent .selectedDescription {
+.labellingComponent .selectedLabel, .labellingComponent .selectedDescription {
   padding: 5px;
   background-color: white;
   width: 150px;
@@ -86,14 +85,12 @@
   color: #337ab7;
 }
 
-.labellingComponent .commonButtons,
-.labellingComponent.editDescription .editDescriptionButtons {
+.labellingComponent .commonButtons, .labellingComponent.editDescription .editDescriptionButtons {
   display: block;
   margin-left: 55px;
 }
 
-.labellingComponent.editDescription .commonButtons,
-.labellingComponent .editDescriptionButtons {
+.labellingComponent.editDescription .commonButtons, .labellingComponent .editDescriptionButtons {
   display: none;
 }
 

platform/viewer/src/components/Labelling/LabellingFlow.js

@@ -1,112 +1,165 @@
 import { Icon, SelectTree } from '@ohif/ui';
-import React, { Component } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import cloneDeep from 'lodash.clonedeep';
 
 import LabellingTransition from './LabellingTransition.js';
 import OHIFLabellingData from './OHIFLabellingData.js';
+import EditDescriptionDialog from './../EditDescriptionDialog/EditDescriptionDialog.js';
+import './LabellingFlow.css';
 
-export default class LabellingFlow extends Component {
-  static propTypes = {
-    measurementData: PropTypes.object.isRequired,
-    labellingDoneCallback: PropTypes.func.isRequired,
-    updateLabelling: PropTypes.func.isRequired,
-    initialTopDistance: PropTypes.number,
-    skipAddLabelButton: PropTypes.bool,
-    editLocation: PropTypes.bool,
-    editDescription: PropTypes.bool,
+const LabellingFlow = ({
+  measurementData,
+  editLocation,
+  editDescription,
+  skipAddLabelButton,
+  updateLabelling,
+  labellingDoneCallback,
+  editDescriptionOnDialog,
+}) => {
+  const [fadeOutTimer, setFadeOutTimer] = useState();
+  const [showComponent, setShowComponent] = useState(true);
+  const descriptionInput = useRef();
+  const [state, setState] = useState({
+    measurementData,
+    editLocation,
+    editDescription,
+    skipAddLabelButton,
+  });
+
+  useEffect(() => {
+    const newMeasurementData = cloneDeep(measurementData);
+
+    if (editDescription) {
+      newMeasurementData.description = undefined;
+    }
+
+    if (editLocation) {
+      newMeasurementData.location = undefined;
+    }
+
+    let newEditLocation = editLocation;
+    if (!editDescription && !editLocation) {
+      newEditLocation = true;
+    }
+
+    setState(state => ({
+      ...state,
+      editLocation: newEditLocation,
+      measurementData: newMeasurementData,
+    }));
+  }, [editDescription, editLocation, measurementData]);
+
+  useEffect(() => {
+    if (descriptionInput.current) {
+      descriptionInput.current.focus();
+    }
+  }, [state]);
+
+  const relabel = event =>
+    setState(state => ({ ...state, editLocation: true }));
+
+  const setDescriptionUpdateMode = () => {
+    descriptionInput.current.focus();
+    setState(state => ({ ...state, editDescription: true }));
   };
 
-  constructor(props) {
-    super(props);
+  const descriptionCancel = () => {
+    const { description = '' } = cloneDeep(state);
+    descriptionInput.current.value = description;
+    setState(state => ({ ...state, editDescription: false }));
+  };
 
-    const { location, locationLabel, description } = props.measurementData;
-
-    this.state = {
-      location,
-      locationLabel,
-      description,
-      skipAddLabelButton: props.skipAddLabelButton,
-      editDescription: props.editDescription,
-      editLocation: props.editLocation,
-      confirmationState: false,
-      displayComponent: true,
-    };
-
-    this.mainElement = React.createRef();
-    this.descriptionInput = React.createRef();
-    this.initialItems = OHIFLabellingData;
-    this.currentItems = cloneDeep(this.initialItems);
-  }
-
-  componentDidUpdate = () => {
-    if (this.state.editDescription) {
-      this.descriptionInput.current.focus();
+  const handleKeyPress = event => {
+    if (event.key === 'Enter') {
+      descriptionSave();
     }
   };
 
-  render() {
-    let mainElementClassName = 'labellingComponent';
-    if (this.state.editDescription) {
-      mainElementClassName += ' editDescription';
-    }
+  const descriptionSave = () => {
+    const description = descriptionInput.current.value;
+    updateLabelling({ description });
 
-    return (
-      <LabellingTransition
-        displayComponent={this.state.displayComponent}
-        onTransitionExit={this.props.labellingDoneCallback}
-      >
-        <>
-          <div
-            className={mainElementClassName}
-            ref={this.mainElement}
-            onMouseLeave={this.fadeOutAndLeave}
-            onMouseEnter={this.clearFadeOutTimer}
-          >
-            {this.labellingStateFragment()}
-          </div>
-        </>
-      </LabellingTransition>
-    );
-  }
-
-  labellingStateFragment = () => {
-    const {
-      skipAddLabelButton,
-      editLocation,
+    setState(state => ({
+      ...state,
       description,
-      locationLabel,
-    } = this.state;
+      editDescription: false,
+    }));
+  };
+
+  const selectTreeSelectCallback = (event, itemSelected) => {
+    const location = itemSelected.value;
+    const locationLabel = itemSelected.label;
+    updateLabelling({ location });
+
+    setState(state => ({
+      ...state,
+      editLocation: false,
+      measurementData: {
+        ...state.measurementData,
+        location,
+        locationLabel,
+      },
+    }));
+  };
+
+  const showLabelling = () => {
+    setState(state => ({
+      ...state,
+      skipAddLabelButton: true,
+      editLocation: false,
+    }));
+  };
+
+  /*
+   * Waits for 1 sec to dismiss the labelling component.
+   *
+   */
+  const fadeOutAndLeave = () =>
+    setFadeOutTimer(setTimeout(fadeOutAndLeaveFast, 1000));
+
+  const fadeOutAndLeaveFast = () => setShowComponent(false);
+
+  const clearFadeOutTimer = () => {
+    if (fadeOutTimer) {
+      clearTimeout(fadeOutTimer);
+      setFadeOutTimer(null);
+    }
+  };
+
+  const descriptionDialogUpdate = description => {
+    updateLabelling({ description });
+    labellingDoneCallback();
+  };
+
+  const labellingStateFragment = () => {
+    const { skipAddLabelButton, editLocation, measurementData } = state;
+    const { description, locationLabel, location } = measurementData;
 
     if (!skipAddLabelButton) {
       return (
-        <>
-          <button
-            type="button"
-            className="addLabelButton"
-            onClick={this.showLabelling}
-          >
-            {this.state.location ? 'Edit' : 'Add'} Label
-          </button>
-        </>
+        <button
+          type="button"
+          className="addLabelButton"
+          onClick={showLabelling}
+        >
+          {location ? 'Edit' : 'Add'} Label
+        </button>
       );
     } else {
       if (editLocation) {
         return (
           <SelectTree
-            items={this.currentItems}
+            items={OHIFLabellingData}
             columns={1}
-            onSelected={this.selectTreeSelectCallback}
+            onSelected={selectTreeSelectCallback}
             selectTreeFirstTitle="Assign Label"
           />
         );
       } else {
         return (
           <>
-            <div
-              className="checkIconWrapper"
-              onClick={this.fadeOutAndLeaveFast}
-            >
+            <div className="checkIconWrapper" onClick={fadeOutAndLeaveFast}>
               <Icon name="check" className="checkIcon" />
             </div>
             <div className="locationDescriptionWrapper">
@@ -114,10 +167,10 @@ export default class LabellingFlow extends Component {
               <div className="description">
                 <input
                   id="descriptionInput"
-                  ref={this.descriptionInput}
+                  ref={descriptionInput}
                   defaultValue={description || ''}
                   autoComplete="off"
-                  onKeyPress={this.handleKeyPress}
+                  onKeyPress={handleKeyPress}
                 />
               </div>
             </div>
@@ -125,14 +178,14 @@ export default class LabellingFlow extends Component {
               <button
                 type="button"
                 className="commonButton left"
-                onClick={this.relabel}
+                onClick={relabel}
               >
                 Relabel
               </button>
               <button
                 type="button"
                 className="commonButton right"
-                onClick={this.setDescriptionUpdateMode}
+                onClick={setDescriptionUpdateMode}
               >
                 {description ? 'Edit ' : 'Add '}
                 Description
@@ -142,14 +195,14 @@ export default class LabellingFlow extends Component {
               <button
                 type="button"
                 className="commonButton left"
-                onClick={this.descriptionCancel}
+                onClick={descriptionCancel}
               >
                 Cancel
               </button>
               <button
                 type="button"
                 className="commonButton right"
-                onClick={this.descriptionSave}
+                onClick={descriptionSave}
               >
                 Save
               </button>
@@ -160,77 +213,51 @@ export default class LabellingFlow extends Component {
     }
   };
 
-  relabel = event => this.setState({ editLocation: true });
-
-  setDescriptionUpdateMode = () => {
-    this.descriptionInput.current.focus();
-    this.setState({ editDescription: true });
-  };
-
-  descriptionCancel = () => {
-    const { description = '' } = cloneDeep(this.state);
-    this.descriptionInput.current.value = description;
-    this.setState({ editDescription: false });
-  };
-
-  handleKeyPress = e => {
-    if (e.key === 'Enter') {
-      this.descriptionSave();
-    }
-  };
-
-  descriptionSave = () => {
-    const description = this.descriptionInput.current.value;
-    this.props.updateLabelling({ description });
-
-    this.setState({
-      description,
-      editDescription: false,
-    });
-  };
-
-  selectTreeSelectCallback = (event, itemSelected) => {
-    const location = itemSelected.value;
-    this.props.updateLabelling({ location });
-
-    this.setState({
-      editLocation: false,
-      confirmationState: true,
-      location: itemSelected.value,
-      locationLabel: itemSelected.label,
-    });
-
-    if (this.isTouchScreen) {
-      this.setTimeout = setTimeout(() => {
-        this.setState({
-          displayComponent: false,
-        });
-      }, 2000);
-    }
-  };
-
-  showLabelling = () => {
-    this.setState({
-      skipAddLabelButton: true,
-      editLocation: false,
-    });
-  };
-
-  fadeOutAndLeave = () => {
-    // Wait for 1 sec to dismiss the labelling component
-    this.fadeOutTimer = setTimeout(
-      () => this.setState({ displayComponent: false }),
-      1000
+  if (editDescriptionOnDialog) {
+    return (
+      <EditDescriptionDialog
+        onCancel={labellingDoneCallback}
+        onUpdate={descriptionDialogUpdate}
+        measurementData={state.measurementData}
+      />
     );
-  };
+  }
 
-  fadeOutAndLeaveFast = () => this.setState({ displayComponent: false });
+  return (
+    <LabellingTransition
+      displayComponent={showComponent}
+      onTransitionExit={labellingDoneCallback}
+    >
+      <>
+        <div
+          className={`labellingComponent ${state.editDescription &&
+            'editDescription'}`}
+          onMouseLeave={fadeOutAndLeave}
+          onMouseEnter={clearFadeOutTimer}
+        >
+          {labellingStateFragment()}
+        </div>
+      </>
+    </LabellingTransition>
+  );
+};
 
-  clearFadeOutTimer = () => {
-    if (!this.fadeOutTimer) {
-      return;
-    }
+LabellingFlow.propTypes = {
+  measurementData: PropTypes.object.isRequired,
+  labellingDoneCallback: PropTypes.func.isRequired,
+  updateLabelling: PropTypes.func.isRequired,
+  initialTopDistance: PropTypes.number,
+  skipAddLabelButton: PropTypes.bool,
+  editLocation: PropTypes.bool,
+  editDescription: PropTypes.bool,
+  editDescriptionOnDialog: PropTypes.bool,
+};
 
-    clearTimeout(this.fadeOutTimer);
-  };
-}
+LabellingFlow.defaultProps = {
+  skipAddLabelButton: false,
+  editLocation: false,
+  editDescription: false,
+  editDescriptionOnDialog: false,
+};
+
+export default LabellingFlow;

platform/viewer/src/components/Labelling/LabellingManager.js

@@ -1,103 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import cloneDeep from 'lodash.clonedeep';
-
-import EditDescriptionDialog from './../EditDescriptionDialog/EditDescriptionDialog.js';
-import LabellingFlow from './LabellingFlow.js';
-import './LabellingManager.css';
-
-export default class LabellingManager extends Component {
-  static propTypes = {
-    measurementData: PropTypes.object.isRequired,
-    labellingDoneCallback: PropTypes.func.isRequired,
-    updateLabelling: PropTypes.func.isRequired,
-    skipAddLabelButton: PropTypes.bool,
-    editLocation: PropTypes.bool,
-    editDescription: PropTypes.bool,
-    editDescriptionOnDialog: PropTypes.bool,
-  };
-
-  static defaultProps = {
-    skipAddLabelButton: false,
-    editLocation: false,
-    editDescription: false,
-    editDescriptionOnDialog: false,
-  };
-
-  constructor(props) {
-    super(props);
-
-    const measurementData = cloneDeep(props.measurementData);
-    this.treatMeasurementData(measurementData);
-
-    let editLocation = props.editLocation;
-    if (!props.editDescription && !props.editLocation) {
-      editLocation = true;
-    }
-
-    this.state = {
-      skipAddLabelButton: props.skipAddLabelButton,
-      editLocation: editLocation,
-      editDescription: props.editDescription,
-      editDescriptionOnDialog: props.editDescriptionOnDialog,
-      measurementData: measurementData,
-    };
-  }
-
-  componentDidMount = () => {
-    document.addEventListener('touchstart', this.onTouchStart);
-  };
-
-  componentWillUnmount = () => {
-    document.removeEventListener('touchstart', this.onTouchStart);
-  };
-
-  render() {
-    return this.getRenderComponent();
-  }
-
-  getRenderComponent = () => {
-    const {
-      editLocation,
-      editDescription,
-      editDescriptionOnDialog,
-      measurementData,
-    } = this.state;
-
-    if (editDescriptionOnDialog) {
-      return (
-        <EditDescriptionDialog
-          onCancel={this.props.labellingDoneCallback}
-          onUpdate={this.descriptionDialogUpdate}
-          measurementData={measurementData}
-        />
-      );
-    }
-
-    if (editLocation || editDescription) {
-      return <LabellingFlow {...this.props} />;
-    }
-  };
-
-  treatMeasurementData = measurementData => {
-    const { editDescription, editLocation } = this.props;
-
-    if (editDescription) {
-      measurementData.description = undefined;
-    }
-
-    if (editLocation) {
-      measurementData.location = undefined;
-    }
-  };
-
-  responseDialogUpdate = response => {
-    this.props.updateLabelling({ response });
-    this.props.labellingDoneCallback();
-  };
-
-  descriptionDialogUpdate = description => {
-    this.props.updateLabelling({ description });
-    this.props.labellingDoneCallback();
-  };
-}

yarn.lock

@@ -2654,16 +2654,6 @@
   dependencies:
     "@types/node" "^12.11.1"
 
-"@ohif/extension-cornerstone@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@ohif/extension-cornerstone/-/extension-cornerstone-2.0.0.tgz#b4ee3b594212502192cdd311a100354857280548"
-  integrity sha512-hvJ3t2GRcu906NiYpUWaJIB9ja/M/MKEYLy19t4XBFpqf4VqoezR2KJpZelmZjQscXGaDQeZgvr3DJO5Nva8Uw==
-  dependencies:
-    "@babel/runtime" "^7.5.5"
-    classnames "^2.2.6"
-    lodash.throttle "^4.1.1"
-    react-cornerstone-viewport "0.1.30"
-
 "@ohif/i18n@^0.2.3":
   version "0.2.5"
   resolved "https://registry.yarnpkg.com/@ohif/i18n/-/i18n-0.2.5.tgz#2b92a78109823ce0f50dd590201d980a5fd64974"
@@ -13103,7 +13093,7 @@ modify-values@^1.0.0:
   resolved "https://registry.yarnpkg.com/modify-values/-/modify-values-1.0.1.tgz#b3939fa605546474e3e3e3c63d64bd43b4ee6022"
   integrity sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==
 
-moment@2.24.0, moment@>=1.6.0, moment@^2.23.0, moment@^2.24.0:
+moment@2.24.0, moment@>=1.6.0, moment@^2.24.0:
   version "2.24.0"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
   integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
@@ -15839,15 +15829,6 @@ react-codemirror2@^6.0.0:
   resolved "https://registry.yarnpkg.com/react-codemirror2/-/react-codemirror2-6.0.0.tgz#180065df57a64026026cde569a9708fdf7656525"
   integrity sha512-D7y9qZ05FbUh9blqECaJMdDwKluQiO3A9xB+fssd5jKM7YAXucRuEOlX32mJQumUvHUkHRHqXIPBjm6g0FW0Ag==
 
-react-cornerstone-viewport@0.1.30:
-  version "0.1.30"
-  resolved "https://registry.yarnpkg.com/react-cornerstone-viewport/-/react-cornerstone-viewport-0.1.30.tgz#3546a5164feef5f1f3b45ade10fd9a66f82fd101"
-  integrity sha512-DGxdpS7FJvWi57NhpKhKMdaW3go/Fs/zfWJFtaEzGVHq2zQnEEV5G1pamC4ttRhKMfzy7T7y4h14xUVzE7IqPA==
-  dependencies:
-    lodash.debounce "^4.0.8"
-    moment "^2.23.0"
-    stylus "^0.54.5"
-
 react-cornerstone-viewport@2.x.x:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/react-cornerstone-viewport/-/react-cornerstone-viewport-2.1.0.tgz#1f353e3b0a57c45add70e5040b819290d9f55f4b"