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/SidePanel/SidePanel.tsx

@@ -1,13 +1,25 @@
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { useTranslation } from 'react-i18next';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import SwiperCore, {
+  A11y,
+  Controller,
+  Pagination,
+  Scrollbar,
+  Navigation,
+} from 'swiper';
 
-import { Button, Icon } from '../';
+import { Button, Icon, IconButton, Tooltip } from '../';
+
+import 'swiper/css';
+import 'swiper/css/navigation';
+import './style.css';
 
 const borderSize = 4;
 const expandedWidth = 248;
-const collapsedWidth = 56;
+const collapsedWidth = 25;
 
 const baseStyle = {
   maxWidth: `${expandedWidth}px`,
@@ -27,20 +39,20 @@ const styleMap = {
 };
 
 const baseClasses =
-  'transition-all duration-300 ease-in-out h-100 bg-primary-dark border-black flex flex-col justify-start box-content';
+  'transition-all duration-300 ease-in-out h-100 bg-black border-black justify-start box-content flex flex-col';
 
 const classesMap = {
   open: {
-    left: `border-r-4`,
-    right: `border-l-4`,
+    left: `mr-1`,
+    right: `ml-1`,
   },
   closed: {
-    left: `border-r-4 items-end`,
-    right: `border-l-4 items-start`,
+    left: `mr-2 items-end`,
+    right: `ml-2 items-start`,
   },
 };
 
-const openIconName = {
+const openStateIconName = {
   left: 'push-left',
   right: 'push-right',
 };
@@ -54,62 +66,100 @@ const position = {
   },
 };
 
-const getChildComponent = (childComponents, componentOpen) => {
-  if (Array.isArray(childComponents)) {
-    return childComponents.find(
-      _childComponent => _childComponent.name === componentOpen
-    );
-  } else {
-    return childComponents;
-  }
-};
-
 const SidePanel = ({
   side,
   className,
-  defaultComponentOpen,
-  childComponents,
+  activeTabIndex: activeTabIndexProp,
+  tabs,
 }) => {
   const { t } = useTranslation('SidePanel');
 
-  const [componentOpen, setComponentOpen] = useState(defaultComponentOpen);
+  const [panelOpen, setPanelOpen] = useState(activeTabIndexProp !== null);
+  const [activeTabIndex, setActiveTabIndex] = useState(activeTabIndexProp || 0);
+  const swiperRef = useRef() as any;
+  const [swiper, setSwiper] = useState<any>();
 
-  const openStatus = componentOpen ? 'open' : 'closed';
+  const prevRef = React.useRef();
+  const nextRef = React.useRef();
+
+  const openStatus = panelOpen ? 'open' : 'closed';
   const style = Object.assign({}, styleMap[openStatus][side], baseStyle);
 
-  const childComponent = getChildComponent(childComponents, componentOpen);
+  const ActiveComponent = tabs[activeTabIndex].content;
 
-  const getPanelButtons = () => {
-    const _childComponents = Array.isArray(childComponents)
-      ? childComponents
-      : [childComponents];
-    return _childComponents.map((childComponent, i) => {
-      return (
-        <Button
-          key={i}
-          variant="text"
-          color="inherit"
-          border="none"
+  useEffect(() => {
+    if (panelOpen && swiper) {
+      swiper.slideTo(activeTabIndex, 500);
+    }
+  }, [panelOpen, swiper]);
+
+  useEffect(() => {
+    if (swiper) {
+      swiper.params.navigation.prevEl = prevRef.current;
+      swiper.params.navigation.nextEl = nextRef.current;
+      swiper.navigation.init();
+      swiper.navigation.update();
+    }
+  }, [swiper]);
+
+  const getCloseStateComponent = () => {
+    const _childComponents = Array.isArray(tabs) ? tabs : [tabs];
+    return (
+      <>
+        <div
+          className={classnames(
+            'bg-secondary-dark h-[28px] flex items-center w-full rounded-md cursor-pointer',
+            side === 'left' ? 'pr-2 justify-end' : 'pl-2 justify-start'
+          )}
           onClick={() => {
-            setComponentOpen(childComponent.name);
+            setPanelOpen(prev => !prev);
           }}
-          style={{
-            minWidth: `${collapsedWidth}px`,
-            width: `${collapsedWidth}px`,
-          }}
-          name={childComponent.name}
-          className="flex flex-col text-xs px-1 text-white border-transparent border-b"
+          data-cy={`side-panel-header-${side}`}
         >
           <Icon
-            name={childComponent.iconName}
-            className="text-primary-active"
+            name={'navigation-panel-right-reveal'}
+            className={classnames(
+              'text-primary-active',
+              side === 'left' && 'transform rotate-180'
+            )}
           />
-          <span className="mt-2 text-white text-xs">
-            {t(childComponent.iconLabel)}
-          </span>
-        </Button>
-      );
-    });
+        </div>
+        <div className={classnames('flex flex-col space-y-3 mt-3')}>
+          {_childComponents.map((childComponent, index) => (
+            <Tooltip
+              position={side === 'left' ? 'right' : 'left'}
+              key={index}
+              content={`${childComponent.label}`}
+              className={classnames(
+                'flex items-center',
+                side === 'left' ? 'justify-end ' : 'justify-start '
+              )}
+            >
+              <IconButton
+                id={`${childComponent.name}-btn`}
+                variant="text"
+                color="inherit"
+                size="initial"
+                className="text-primary-active"
+                onClick={() => {
+                  setActiveTabIndex(index);
+                  setPanelOpen(true);
+                }}
+              >
+                <Icon
+                  name={childComponent.iconName}
+                  className="text-primary-active"
+                  style={{
+                    width: '22px',
+                    height: '22px',
+                  }}
+                />
+              </IconButton>
+            </Tooltip>
+          ))}
+        </div>
+      </>
+    );
   };
 
   return (
@@ -121,37 +171,75 @@ const SidePanel = ({
       )}
       style={style}
     >
-      {componentOpen ? (
+      {panelOpen ? (
         <React.Fragment>
-          <div className="px-3 border-b border-secondary-light">
+          {/** Panel Header with Arrow and Close Actions */}
+          <div
+            className={classnames(
+              'px-[10px] bg-primary-dark h-9 cursor-pointer flex shrink-0',
+              tabs.length === 1 && 'mb-1'
+            )}
+            onClick={() => {
+              setPanelOpen(prev => !prev);
+              // slideToActivePanel();
+            }}
+            data-cy={`side-panel-header-${side}`}
+          >
             <Button
               variant="text"
               color="inherit"
               border="none"
               rounded="none"
-              onClick={() => {
-                setComponentOpen(null);
-              }}
-              name={childComponent.name}
-              className="flex flex-row items-center px-3 h-12 relative w-full"
+              className="flex flex-row items-center px-3 relative w-full"
+              name={tabs.length === 1 ? `${tabs[activeTabIndex].name}` : ''}
             >
               <Icon
-                name={openIconName[side]}
+                name={openStateIconName[side]}
                 className={classnames(
                   'text-primary-active absolute',
                   side === 'left' && 'order-last'
                 )}
                 style={{ ...position[side] }}
               />
-              <span className="flex-1 text-primary-active">
-                {t(childComponent.label)}
+              {/* Todo: ass secondary label here */}
+              <span className="text-primary-active">
+                {tabs.length === 1 && tabs[activeTabIndex].label}
               </span>
             </Button>
           </div>
-          <childComponent.content />
+          {tabs.length > 1 &&
+            _getMoreThanOneTabLayout(
+              swiperRef,
+              setSwiper,
+              prevRef,
+              nextRef,
+              tabs,
+              activeTabIndex,
+              setActiveTabIndex,
+              setPanelOpen
+            )}
+          {/** carousel navigation with the arrows */}
+          {/** only show carousel nav if tabs are more than 3 tabs */}
+          {tabs.length > 3 && (
+            <div className="text-primary-active w-full flex justify-end gap-2 bg-primary-dark py-1 px-2">
+              <button ref={prevRef} className="swiper-button-prev-custom">
+                <Icon
+                  name={'icon-prev'}
+                  className={classnames('text-primary-active')}
+                />
+              </button>
+              <button ref={nextRef} className="swiper-button-next-custom">
+                <Icon
+                  name={'icon-next'}
+                  className={classnames('text-primary-active')}
+                />
+              </button>
+            </div>
+          )}
+          <ActiveComponent />
         </React.Fragment>
       ) : (
-        <React.Fragment>{getPanelButtons()}</React.Fragment>
+        <React.Fragment>{getCloseStateComponent()}</React.Fragment>
       )}
     </div>
   );
@@ -164,15 +252,8 @@ SidePanel.defaultProps = {
 SidePanel.propTypes = {
   side: PropTypes.oneOf(['left', 'right']).isRequired,
   className: PropTypes.string,
-  defaultComponentOpen: PropTypes.string,
-  childComponents: PropTypes.oneOfType([
-    PropTypes.shape({
-      iconName: PropTypes.string.isRequired,
-      iconLabel: PropTypes.string.isRequired,
-      name: PropTypes.string.isRequired,
-      label: PropTypes.string.isRequired,
-      content: PropTypes.func, // TODO: Should be node, but it keeps complaining?
-    }),
+  activeTabIndex: PropTypes.number,
+  tabs: PropTypes.oneOfType([
     PropTypes.arrayOf(
       PropTypes.shape({
         iconName: PropTypes.string.isRequired,
@@ -185,4 +266,78 @@ SidePanel.propTypes = {
   ]),
 };
 
+function _getMoreThanOneTabLayout(
+  swiperRef: any,
+  setSwiper: React.Dispatch<any>,
+  prevRef: React.MutableRefObject<undefined>,
+  nextRef: React.MutableRefObject<undefined>,
+  tabs: any,
+  activeTabIndex: any,
+  setActiveTabIndex: React.Dispatch<any>,
+  setPanelOpen: React.Dispatch<React.SetStateAction<boolean>>
+) {
+  return (
+    <div
+      className="collapse-sidebar relative"
+      style={{
+        backgroundColor: '#06081f',
+      }}
+    >
+      <div className="w-full">
+        <Swiper
+          onInit={(core: SwiperCore) => {
+            swiperRef.current = core.el;
+          }}
+          simulateTouch={false}
+          modules={[Navigation, Pagination, Scrollbar, A11y, Controller]}
+          slidesPerView={3}
+          spaceBetween={5}
+          onSwiper={swiper => setSwiper(swiper)}
+          navigation={{
+            prevEl: prevRef?.current,
+            nextEl: nextRef?.current,
+          }}
+        >
+          {tabs.map((obj, index) => (
+            <SwiperSlide key={index}>
+              <div
+                className={classnames(
+                  index === activeTabIndex
+                    ? 'bg-secondary-main text-white'
+                    : 'text-aqua-pale',
+                  'flex cursor-pointer px-4 py-1 rounded-[4px]  flex-col justify-center items-center text-center hover:text-white'
+                )}
+                key={index}
+                onClick={() => {
+                  setActiveTabIndex(index);
+                  setPanelOpen(true);
+                }}
+                data-cy={`${obj.name}-btn`}
+              >
+                <span>
+                  <Icon
+                    name={obj.iconName}
+                    className={classnames(
+                      index === activeTabIndex
+                        ? 'text-white'
+                        : 'text-primary-active'
+                    )}
+                    style={{
+                      width: '22px',
+                      height: '22px',
+                    }}
+                  />
+                </span>
+                <span className="text-[10px] select-none font-medium whitespace-nowrap mt-[5px]">
+                  {obj.label}
+                </span>
+              </div>
+            </SwiperSlide>
+          ))}
+        </Swiper>
+      </div>
+    </div>
+  );
+}
+
 export default SidePanel;