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>
2022-11-16 14:19:52 -05:00
1 parent 08c58b0634
commit 83ea228d86
@@ -0,0 +1,256 @@
+import React, { useState } from 'react';
+import { Icon, InputRange, CheckBox, InputNumber } from '../';
+import classNames from 'classnames';
+import { reducer } from './segmentationConfigReducer';
+
+const ActiveSegmentationConfig = ({
+  config,
+  dispatch,
+  setRenderOutline,
+  setOutlineOpacityActive,
+  setOutlineWidthActive,
+  setRenderFill,
+  setFillAlpha,
+  usePercentage,
+}) => {
+  return (
+    <div className="flex justify-between text-[12px] pt-[13px] px-2">
+      <div className="flex flex-col items-start">
+        <div className="text-white mb-[12px]">Active</div>
+        <CheckBox
+          label="Outline"
+          checked={config.renderOutline}
+          labelClassName="text-[12px] pl-1 pt-1"
+          className="mb-[9px]"
+          onChange={value => {
+            dispatch({
+              type: 'RENDER_OUTLINE',
+              payload: {
+                value,
+              },
+            });
+
+            setRenderOutline(value);
+          }}
+        />
+        <CheckBox
+          label="Fill"
+          checked={config.renderFill}
+          labelClassName="text-[12px] pl-1 pt-1"
+          className="mb-[9px]"
+          onChange={value => {
+            dispatch({
+              type: 'RENDER_FILL',
+              payload: {
+                value,
+              },
+            });
+
+            setRenderFill(value);
+          }}
+        />
+      </div>
+
+      <div className="flex flex-col items-center col-span-2">
+        <div className="text-[#b3b3b3] text-[10px] mb-[12px]">Opacity</div>
+        <InputRange
+          minValue={0}
+          maxValue={usePercentage ? 100 : 1}
+          value={
+            usePercentage ? config.outlineOpacity * 100 : config.outlineOpacity
+          }
+          onChange={value => {
+            dispatch({
+              type: 'SET_OUTLINE_OPACITY',
+              payload: {
+                value: value,
+              },
+            });
+
+            setOutlineOpacityActive(value);
+          }}
+          step={1}
+          containerClassName="mt-[4px] mb-[9px]"
+          inputClassName="w-[64px]"
+          labelClassName="text-white text-[12px]"
+          unit="%"
+        />
+        <InputRange
+          minValue={0}
+          maxValue={usePercentage ? 100 : 1}
+          value={usePercentage ? config.fillAlpha * 100 : config.fillAlpha}
+          onChange={value => {
+            dispatch({
+              type: 'SET_FILL_ALPHA',
+              payload: {
+                value,
+              },
+            });
+
+            setFillAlpha(value);
+          }}
+          step={1}
+          containerClassName="mt-[4px] mb-[9px]"
+          inputClassName="w-[64px]"
+          labelClassName="text-white text-[12px]"
+          unit="%"
+        />
+      </div>
+
+      <div className="flex flex-col items-center">
+        <div className="text-[#b3b3b3] text-[10px] mb-[12px]">Size</div>
+        <InputNumber
+          value={config.outlineWidthActive}
+          onChange={value => {
+            dispatch({
+              type: 'SET_OUTLINE_WIDTH',
+              payload: {
+                value,
+              },
+            });
+
+            setOutlineWidthActive(value);
+          }}
+          className="-mt-1"
+        />
+      </div>
+    </div>
+  );
+};
+
+const InactiveSegmentationConfig = ({
+  config,
+  dispatch,
+  setRenderInactiveSegmentations,
+  setFillAlphaInactive,
+  usePercentage,
+}) => {
+  return (
+    <div className="px-2">
+      <CheckBox
+        label="Display Inactive Segmentations"
+        checked={config.renderInactiveSegmentations}
+        labelClassName="text-[12px] pt-1"
+        className="mb-[9px]"
+        onChange={value => {
+          dispatch({
+            type: 'RENDER_INACTIVE_SEGMENTATIONS',
+            payload: {
+              value,
+            },
+          });
+
+          setRenderInactiveSegmentations(value);
+        }}
+      />
+
+      <div className="flex pl-4 items-center space-x-2">
+        <span className="text-[10px] text-[#b3b3b3]">Opacity</span>
+        <InputRange
+          minValue={0}
+          maxValue={usePercentage ? 100 : 1}
+          value={
+            usePercentage
+              ? config.fillAlphaInactive * 100
+              : config.fillAlphaInactive
+          }
+          onChange={value => {
+            dispatch({
+              type: 'SET_FILL_ALPHA_INACTIVE',
+              payload: {
+                value: value,
+              },
+            });
+
+            setFillAlphaInactive(value);
+          }}
+          step={1}
+          containerClassName="mt-[4px]"
+          inputClassName="w-[64px]"
+          labelClassName="text-white text-[12px]"
+          unit="%"
+        />
+      </div>
+    </div>
+  );
+};
+
+const SegmentationConfig = ({
+  segmentationConfig,
+  setFillAlpha,
+  setFillAlphaInactive,
+  setOutlineWidthActive,
+  setOutlineOpacityActive,
+  setRenderFill,
+  setRenderInactiveSegmentations,
+  setRenderOutline,
+}) => {
+  const [config, dispatch] = React.useReducer(
+    reducer,
+    segmentationConfig.initialConfig
+  );
+
+  const [isMinimized, setIsMinimized] = useState(true);
+  return (
+    <div className="bg-primary-dark">
+      <div
+        className="flex cursor-pointer items-center"
+        onClick={evt => {
+          evt.stopPropagation();
+          setIsMinimized(!isMinimized);
+        }}
+      >
+        <Icon
+          name="panel-group-open-close"
+          className={classNames(
+            'w-5 h-5 text-white transition duration-300 cursor-pointer',
+            {
+              'transform rotate-90': !isMinimized,
+            }
+          )}
+        />
+        <span className="text-[#d8d8d8] text-[12px] font-[300]">
+          {'Segmentation Appearance'}
+        </span>
+      </div>
+      {/* active segmentation */}
+      {!isMinimized && (
+        <div>
+          <ActiveSegmentationConfig
+            config={config}
+            dispatch={dispatch}
+            setFillAlpha={setFillAlpha}
+            setOutlineWidthActive={setOutlineWidthActive}
+            setOutlineOpacityActive={setOutlineOpacityActive}
+            setRenderFill={setRenderFill}
+            setRenderOutline={setRenderOutline}
+            usePercentage={segmentationConfig.usePercentage}
+          />
+          {/* A small line  */}
+          <div className="h-[1px] bg-[#212456] mb-[8px] mx-1"></div>
+          {/* inactive segmentation */}
+          <div
+            onClick={() => setIsMinimized(!isMinimized)}
+            className="flex items-center cursor-pointer pl-2 pb-[9px]"
+          >
+            <span className="text-[#d8d8d8] text-[12px] font-[300]">
+              {'Inactive Segmentations'}
+            </span>
+          </div>
+          <InactiveSegmentationConfig
+            config={config}
+            dispatch={dispatch}
+            setRenderInactiveSegmentations={setRenderInactiveSegmentations}
+            setFillAlphaInactive={setFillAlphaInactive}
+            usePercentage={segmentationConfig.usePercentage}
+          />
+        </div>
+      )}
+      <div className="h-[6px] bg-black "></div>
+    </div>
+  );
+};
+
+SegmentationConfig.propTypes = {};
+
+export default SegmentationConfig;