feat: Add DICOM SEG support and MPR, referenceLines and StackSync and more (#3015)

* feat: add initial sop class handler for SEG

* feat: move segmentation service

* update segmentation service methods

* fix: viewport data structure

* feat: Add initial render for the DICOM SEG for each displaySet

* fix: various wrong architectural dependencies between services

* feat: initial separate SEG display in each viewport

* feat: refactore viewport action bar

* initial work for SEG hydration

* fix: various bugs regarding drag and dropping different viewports

* fix: rendering issues for multiple seg displaysets

* fix: bugs for thumbnail and hydration

* feat: fix the initial segment color

* update after rebase

* feat: initial design for the segmentation group table

* feat: initial new design for the segmentation panel

* feat: segmentation panel

* feat: make segmentation appear on all related viewports

* fix: segmentation load bug based on functional groups

* initial work for segmentation crosshairs

* fix: various stylings and functionality

* fix: various stylings for the seg panel

* fix: overflow styles

* feat: add more ui components

* feat: added segmentation config

* feat: add jump to segment

* feat: add jump to segment for DICOM SEG viewport

* fix: bugs after rebase

* feat: jump in segmentation viewport

* fix: mpr support for seg

* feat: add more icons

* feat: new icons

* feat: add new side panel

* feat: add segmentation config

* feat: add loading indicator to ohif

* feat: make hanging protocols follow matching rules for viewports

* feat: enhance drag and drop to be hanging protocol aware

* fix: mpr restore previous layout

* fix: crosshairs toggle

* fix: add auth headers to the dicom loader via dicomwebclient

* fix: bug for crosshairs toggle in mpr

* fix: seg viewport reusing old toolGroup

* feat: add loading animation with lottie

* fix: various bugs for Segmentation hydration in mpr

* feat: change outline alpha to outline opacity

* feat: loading indicator for seg viewport

* fix: various segmentation group styles

* fix: local mode for seg

* feat: add animation for the highlight

* fix: loading indicatro to show segment indices

* feat: enhance modality drop down ui

* fix: panels

* fix: download form

* fix: layout shift in loading indicator

* fix: loading indicator to have correct values

* fix: update software number

* fix: image jump between MPR and default

* fix: segmentation cleanup and cine service cleanup

* fix: segmentation toolgroup clena up

* fix: highlight interval should not trigger again

* fix: issue with multiframe sorting

* rename: change onSeriesChange to onArrowsClick

* fix: buttons for tmtv and layout shift

* fix: various bugs wrt crosshairs

* fix: crosshairs re init on reset camera

* fix: middle slice calculation different from cs middle reset camera

* fix: reset camera should reset viewport camera

* fix: loading segments in MPR mode

* fix: tmtv hp back to before

* fix: layout shift

* feat: orientation markers for volume viewport

* fix: capture for volume viewports

* fix: memory leak for back to worklist

* fix: loading bar bg color

* fix: side panel for only one panel

* fix: react select style in production

* fix: various styling for segmentation groups

* fix: various ui styles

* feat: add new segmentation config styles

* fix: hover state for segmentation item

* fix: side panel layout shift

* temp add panels

* try to fix scrollbar for thimbnail

* fix: scroll not appearing for side panels

* feat: changed styles for scrollbar

* feat: add cpu fallback warning

* fix: webworker destroy

* fix: select styles

* fix: orientation marker color and position

* fix: capture screenshot for volume viewports

* fix: hide segment visibility on mpr

* fix: reloading an already loaded seg displayset

* feat: add is equal

* fix: mpr jump to measurements

* apply review comments

* fix: optimization for the segmentation load

* fix: remove unnecessary context menu and hp service reset

* fix: segmentation service wrt brush settings

* feat: initial work for the stack synchronization

* fix: add validateDisplaySetSelectorsForNewDisplaySets to make sure drag and drop can follow requirements

* fix: various react proptypes

* fix: thumbnails for the tmtv and change default props to default params

* feat: make showing loading indicator configurable and add docs

* bump versions and add more docs

* fix demo

* update cornerstone versions

* apply review comments

* feat: add reference lines

* fix build

* fix unit tests

* add reference lines icon

* fix: e2e tests

* fix static wado config

* docs: add segmentation service docs

* fix: docker build

* fix: keep camera and bump versions

* Try re-enabling minification to fix deploy previews

Co-authored-by: Erik Ziegler <erik.sweed@gmail.com>

platform/ui/src/components/Snackbar/Snackbar.css

@@ -38,45 +38,10 @@
   margin: 0 0 10px;
 }
 
-.sb-closeBtn {
-  text-shadow: none;
-  width: 20px;
-  height: 20px;
-  right: 5px;
-  top: 5px;
-  @apply overflow-hidden opacity-100 rounded-full p-1 bg-white cursor-pointer absolute text-center duration-300 transition-all ease-in-out;
-}
-
 .sb-closeBtn:hover {
   background: #fff;
 }
 
-.sb-closeIcon {
-  @apply w-full relative overflow-hidden h-full block leading-none;
-}
-
-.sb-closeIcon:after,
-.sb-closeIcon:before {
-  content: ' ';
-  height: 2px;
-  width: 12px;
-  @apply duration-300 transition-all ease-in-out block bg-black opacity-100 absolute;
-}
-
-.sb-closeIcon:before {
-  left: 4px;
-  top: 3px;
-  transform: rotate(45deg);
-  transform-origin: 0px 50%;
-}
-
-.sb-closeIcon:after {
-  right: 3px;
-  top: 5px;
-  transform: rotate(-45deg);
-  transform-origin: calc(100% - 3px) 50%;
-}
-
 .sb-title {
   @apply break-normal text-lg font-bold;
 }

platform/ui/src/components/Snackbar/SnackbarItem.tsx

@@ -1,5 +1,7 @@
 import React, { useEffect } from 'react';
 import classNames from 'classnames';
+import Icon from '../Icon';
+import IconButton from '../IconButton';
 
 import SnackbarTypes from './SnackbarTypes';
 
@@ -16,10 +18,11 @@ const SnackbarItem = ({ options, onClose }) => {
     [SnackbarTypes.INFO]: 'bg-primary-active',
     [SnackbarTypes.WARNING]: 'bg-yellow-600',
     [SnackbarTypes.SUCCESS]: 'bg-green-600',
-    [SnackbarTypes.ERROR]: 'bg-red-600'
+    [SnackbarTypes.ERROR]: 'bg-red-600',
   };
 
-  const hidden = 'duration-300 transition-all ease-in-out h-0 opacity-0 pt-0 mb-0 pb-0';
+  const hidden =
+    'duration-300 transition-all ease-in-out h-0 opacity-0 pt-0 mb-0 pb-0';
 
   return (
     <div
@@ -28,9 +31,15 @@ const SnackbarItem = ({ options, onClose }) => {
         typeClasses[options.type]
       )}
     >
-      <span className="sb-closeBtn" onClick={handleClose}>
-        <span className="sb-closeIcon">x</span>
-      </span>
+      {/* <span className="sb-closeBtn" onClick={handleClose}> */}
+      {/* <span className="sb-closeIcon">x</span> */}
+      <div
+        onClick={handleClose}
+        className="w-5 h-5 rounded-full absolute bg-white flex items-center justify-center right-0 top-0 mr-2 mt-2"
+      >
+        <Icon name="close" className="w-4 text-black" />
+      </div>
+      {/* </span> */}
       {options.title && <div className="sb-title">{options.title}</div>}
       {options.message && <div className="sb-message">{options.message}</div>}
     </div>