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>
This commit is contained in:
AlirezaandErik Ziegler authored and GitHub committed
1 parent
08c58b0634
commit
83ea228d86
254 files changed
+12856
-3141
No files matched your search
@@ -0,0 +1,26 @@
|
||||
input[type='range'] {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
input[type='range']::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
border: none;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
border-radius: 50%;
|
||||
background: #5acce6;
|
||||
}
|
||||
|
||||
input[type='range']::-moz-range-thumb {
|
||||
-webkit-appearance: none;
|
||||
border: none;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
border-radius: 50%;
|
||||
background: #5acce6;
|
||||
}
|
||||
|
||||
.input-range-thumb-design[type='range']::-webkit-slider-thumb {
|
||||
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.521);
|
||||
border: 1.5px solid #090c29;
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
import React, { useState, useCallback } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import Typography from '../Typography';
|
||||
import './InputRange.css';
|
||||
|
||||
/**
|
||||
* React Range Input component
|
||||
* it has two props, value and onChange
|
||||
* value is a number value
|
||||
* onChange is a function that will be called when the range input is changed
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
const InputRange: React.FC<{
|
||||
value: number;
|
||||
onChange: (value) => void;
|
||||
minValue: number;
|
||||
maxValue: number;
|
||||
step: number;
|
||||
unit?: string;
|
||||
containerClassName?: string;
|
||||
inputClassName?: string;
|
||||
labelClassName?: string;
|
||||
labelVariant?: string;
|
||||
}> = ({
|
||||
value,
|
||||
onChange,
|
||||
minValue,
|
||||
maxValue,
|
||||
step = 1,
|
||||
unit = '',
|
||||
containerClassName,
|
||||
inputClassName,
|
||||
labelClassName,
|
||||
labelVariant,
|
||||
}) => {
|
||||
const [rangeValue, setRangeValue] = useState(value);
|
||||
|
||||
const handleChange = useCallback(
|
||||
e => {
|
||||
const rangeValue = e.target.value;
|
||||
setRangeValue(rangeValue);
|
||||
onChange(rangeValue);
|
||||
},
|
||||
[onChange, setRangeValue]
|
||||
);
|
||||
|
||||
const rangeValuePercentage =
|
||||
((rangeValue - minValue) / (maxValue - minValue)) * 100;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`flex items-center cursor-pointer space-x-1 ${
|
||||
containerClassName ? containerClassName : ''
|
||||
}`}
|
||||
>
|
||||
<input
|
||||
type="range"
|
||||
min={minValue}
|
||||
max={maxValue}
|
||||
value={rangeValue}
|
||||
className={`appearance-none h-[3px] rounded-lg input-range-thumb-design ${
|
||||
inputClassName ? inputClassName : ''
|
||||
}`}
|
||||
style={{
|
||||
background: `linear-gradient(to right, #5acce6 0%, #5acce6 ${rangeValuePercentage -
|
||||
10}%, #3a3f99 ${rangeValuePercentage + 10}%, #3a3f99 100%)`,
|
||||
}}
|
||||
onChange={handleChange}
|
||||
id="myRange"
|
||||
step={step}
|
||||
/>
|
||||
<Typography
|
||||
variant={labelVariant ?? 'subtitle'}
|
||||
component="p"
|
||||
className={classNames('w-8', labelClassName ?? 'text-white')}
|
||||
>
|
||||
{rangeValue}
|
||||
{unit}
|
||||
</Typography>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default InputRange;
|
||||
@@ -0,0 +1,50 @@
|
||||
import InputRange from '../InputRange';
|
||||
import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
|
||||
|
||||
export const argTypes = {
|
||||
component: InputRange,
|
||||
title: 'Components/InputRange',
|
||||
};
|
||||
|
||||
<Meta title="Components/InputRange" component={InputRange} />
|
||||
|
||||
export const RangeInputTemplate = args => (
|
||||
<div className="w-3">
|
||||
<InputRange {...args} />
|
||||
</div>
|
||||
)
|
||||
|
||||
<Heading title="InputRange" componentRelativePath="InputRange/InputRange.tsx" />
|
||||
|
||||
- [Overview](#overview)
|
||||
- [Props](#props)
|
||||
- [Contribute](#contribute)
|
||||
|
||||
## Overview
|
||||
|
||||
InputRange is a component that allows you to use as a boolean value
|
||||
|
||||
<Canvas>
|
||||
<Story
|
||||
name="Overview"
|
||||
args={{
|
||||
value: 10,
|
||||
minValue: 0,
|
||||
maxValue: 300,
|
||||
step: 10,
|
||||
unit: '%',
|
||||
onChange: () => console.log('input range change'),
|
||||
labelClassName: 'text-black'
|
||||
}}
|
||||
>
|
||||
{RangeInputTemplate.bind({})}
|
||||
</Story>
|
||||
</Canvas>
|
||||
|
||||
## Props
|
||||
|
||||
<ArgsTable of={InputRange} />
|
||||
|
||||
## Contribute
|
||||
|
||||
<Footer componentRelativePath="InputRange/__stories__/InputRange.stories.mdx" />
|
||||
@@ -0,0 +1,3 @@
|
||||
import InputRange from './InputRange';
|
||||
|
||||
export default InputRange;
|
||||
Reference in new issue
Block a user