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,17 @@
+input[type='text'] {
+  -webkit-appearance: none;
+}
+
+input[type='text']:focus {
+  border: none;
+  outline: none;
+}
+
+.up-arrowsize svg {
+  width: 7px;
+  height: 7px;
+}
+
+.up-arrowsize svg path {
+  fill: #726f7e;
+}
@@ -0,0 +1,96 @@
+import React, { useState, useCallback } from 'react';
+import IconButton from '../IconButton';
+import Icon from '../Icon';
+import './InputNumber.css';
+
+/**
+ * React Number Input component'
+ * it has two props, value and onChange
+ * value is a number value
+ * onChange is a function that will be called when the number input is changed
+ * it can get changed by clicking on the up and down buttons
+ * or by typing a number in the input
+ */
+
+const sizesClasses = {
+  sm: 'w-[45px] h-[28px]',
+};
+
+const InputNumber: React.FC<{
+  value: number;
+  onChange: (value) => void;
+  step: number;
+  size?: string;
+  className?: string;
+}> = ({ value, onChange, step = 1, className, size = 'sm' }) => {
+  const [numberValue, setNumberValue] = useState(value);
+
+  const handleChange = useCallback(
+    e => {
+      const numberValue = e.target.value;
+      setNumberValue(numberValue);
+      onChange(numberValue);
+    },
+    [onChange, setNumberValue]
+  );
+
+  const handleIncrement = useCallback(
+    e => {
+      const newNum = Number(numberValue) + step;
+      setNumberValue(newNum);
+      onChange(newNum);
+    },
+    [onChange, setNumberValue, step, numberValue]
+  );
+
+  const handleDecrement = useCallback(
+    e => {
+      const newNum = Number(numberValue) - step;
+      setNumberValue(newNum);
+      onChange(newNum);
+    },
+    [onChange, setNumberValue, step, numberValue]
+  );
+
+  return (
+    <div
+      className={`flex items-center bg-black border-2 px-1 overflow-hidden justify-center border-secondary-light rounded-md ${
+        sizesClasses[size]
+      } ${className ? className : ''}`}
+    >
+      <div className="flex">
+        <input
+          type="text"
+          value={numberValue}
+          onChange={handleChange}
+          className={`bg-black text-white text-[12px] w-full text-center`}
+        />
+
+        <div className="up-arrowsize flex flex-col items-center justify-around">
+          <IconButton
+            id={'down-arrow-icon'}
+            variant="text"
+            color="inherit"
+            size="initial"
+            className="text-[#726f7e] transform rotate-180"
+            onClick={handleIncrement}
+          >
+            <Icon name="ui-arrow-down" />
+          </IconButton>
+          <IconButton
+            id={'down-arrow-icon'}
+            variant="text"
+            color="inherit"
+            size="initial"
+            className="text-[#726f7e]"
+            onClick={handleDecrement}
+          >
+            <Icon name="ui-arrow-down" />
+          </IconButton>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default InputNumber;
@@ -0,0 +1,47 @@
+import InputNumber from '../InputNumber';
+import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
+
+export const argTypes = {
+  component: InputNumber,
+  title: 'Components/InputNumber',
+};
+
+<Meta title="Components/InputNumber" component={InputNumber} />
+
+export const InputNumberTemplate = args => (
+  <div className="w-16">
+    <InputNumber {...args} />
+  </div>
+)
+
+<Heading title="InputNumber" componentRelativePath="InputNumber/InputNumber.tsx" />
+
+- [Overview](#overview)
+- [Props](#props)
+- [Contribute](#contribute)
+
+## Overview
+
+InputNumber is a component that allows you to use as a number value
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      step: 1,
+      value: 3,
+      size: 'sm',
+      onChange: () => console.log('input range change'),
+    }}
+  >
+    {InputNumberTemplate.bind({})}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable of={InputNumber} />
+
+## Contribute
+
+<Footer componentRelativePath="InputNumber/__stories__/InputNumber.stories.mdx" />
@@ -0,0 +1,3 @@
+import InputNumber from './InputNumber';
+
+export default InputNumber;