feat: cornerstone3D stack and volume viewports (#2787)

* feat: cs3d working stack viewport and tools (#19) * Squashed everything * fix weird react issue * fix eslint / prettier stuff * thumbnails work now with cpu rendering * feat: use new loadImageToCanvas in cs3d * make jump to measurement work * fix active thumbnail * fix measurement delete * fix window level presets * remove segmentation and sync groups for now * fix the dicom pdf and dicom video * fix cornerstone window assignment for cypress * apply review comments Co-authored-by: Erik <erik.sweed@gmail.com> * feat: cs3d tools and toolGroups (#20) * add more tools to work with cs3d mode * fix hotkeys * add stack manager usage for stach viewports * add image scrollbar * wip viewport overlay * fix toAnnotation schema for tools * fix the unnecessary size change that triggered resize * hanging protocol improvement to allow unmatched errors * study description matching for hanging protocol * fix the displaysetOptions to work * fix handle the active tool when a new viewport is added * fix separate toolGroups for mode * apply review comments * apply review comments * yarn lock * feat: overlay component (#21) * fix default displayset options * add viewport overlay * apply review comments * feat: loading and orientation indicators (#22) * add loading indicator * add orientation marker initial work * apply review comments * fix: orientation markers (#23) * finished the orientation markers * fix various broken cypress tests * apply review comments * update yarn lock * feat: re-working measurement tracking mode with cornerstone3d (#2805) * feat: cs3d working stack viewport and tools (#19) * Squashed everything * fix weird react issue * fix eslint / prettier stuff * thumbnails work now with cpu rendering * feat: use new loadImageToCanvas in cs3d * make jump to measurement work * fix active thumbnail * fix measurement delete * fix window level presets * remove segmentation and sync groups for now * fix the dicom pdf and dicom video * fix cornerstone window assignment for cypress * apply review comments Co-authored-by: Erik <erik.sweed@gmail.com> * feat: Add Measurement tracking mode with cs3D (#2789) * feat: first render for cornerstone3d tracked viewport * make tool active work * wip for SR extension * renamed dicom sr to cornerstone dicom sr * remove cornerstone from dicom pdf and video * move dicom sr logic to sr extension * feat: Add hydration for the length tool * fix SR display tool for length using cs3d * fix default config * fix: various bugs with sr viewport and tracking * fix promptying to continue tracking for when SR is created * feat: add keep trackign of unique identifiers * fix hydration for same imageIds * feat: Add SR toolGroup creation on modeEnter * feat: remove the need for separate mapper for SR hydration * add SR display for ellipse * handle hydration of elliptical ROI tool * remove cornerstone extension * add arrow mapping * feat: Add ArrowAnnotate SR display and hydration * apply review comments * apply review comments * move viewport labels to the viewportData * apply review comments * fix: integration cypress tests with cornerstone3D and add CINE tool (#2795) * fix: integration cypress tests with cornerstone3D * revert to addOrUpdate as it makes more sense * fix local drag and drop * fix tests * move dicomLoaderService to cornerstone extension * fix various import bugs * fix bug for local PT series * fix various unit tests * bump cs3d versions * add angle and magnify tool * bump dependencies to avoid broken peerDeps * feat: add initial work for capture using cs3d * feat: show annotations on the image capture * feat: add svg layer export * feat: Add CINE Tool * feat: remove unnecessary viewport rendering for cine state changes Co-authored-by: Erik Ziegler <erik.sweed@gmail.com> * docs: modify and improve documentation (#2800) * cleanup docs versionings * feat: Add all version explanations * version docs for 3.0 * wip for changing docs * wip for updated docs * add utility module documentation * fix demo with nohoisting of history * add slides and video to resources * apply review comments * fix: drag and drop SR into SR viewport (#2803) * update yarn lock Co-authored-by: Erik <erik.sweed@gmail.com> * update pathnames to match v3-stable * update the e2e pathname * fix: various bugs with regard to tracking workflow (#2811) * fix: various issues with measurement panel * fix: update default tool style for annotations * fix: annotatoin label getting removed * feat: Add backward compatibility for SR hydration with legacy cornerstone * fix: cursors and ellipse ROI max style * fix: ArrowAnnotate SRDisplay * apply review comments * bump package versions * fix: bugin rehydration of SR * fix: e2e tests * fix active viewport thickness and arrowTool ui * add readme for measurement tracking * use uploaded image for readme * add back images * try to fix e2e test * fix: window level presets hotkeys * Update README.md * update yarn lock * feat: volume api and TMTV mode (#2817) * feat: volumeAPI and TMTV mode * feat: use cs3d cache service to obtain viewportData * wip for volume api * wip: fusion viewport * feat: add blend mode option * wip for image scrollbar * fix drag and drop thumbnail * wip for image scrollbar for voluems * fix: element mismatch bug for scroll * feat: Add image scrollbar to volumes * feat: add syncGroups to volume api * feat: add tmtv mode initial setup * feat: add initial image options for the stack viewports * feat: Add custom load strategy for volume viewports via HP * apply review comments fix: Jump presets cs3d (#2812) * feat: Add JumpPreset to OHIF for Cornerstone3D * fix: accessing viewport service from servicesManager feat: volume API and TMTV mode (#2814) * fix: do not display overlays on mip viewports * feat: add optional disableCommands for toggle buttons * fix: toggleCrossharis * feat: config the crosshairs * feat: add PetSUV Panel for changing metadata * feat: initial work for the rectangleROIThreshold panel * wip: measurement service * roi threshold working * feat: Add displayText to segmentations * feat: add remove segmentation * feat: add csv export * feat: add RT export for annotations in tmtv mode * fix: fusion to use pt in tmtv mode and measuremet mappings * fix: various bugs * apply review comments * apply review comments * feat: add fusion color maps * add readme to tmtv mode * Update README.md * fix: try to fix build * fix unit tests * Update README.md * feat: add about to the panel * fix: changing strategy in roi panel * apply review comments * update package versions * wip for stackPrefetch * fix: cornerstone3d hydration and renaming (#2818) * update readme * renamed cornerstone extension * wip for renaming cornerstone3D variables * wip for renaming cornerstone3D variables * wip for fixing bugs for SR viewport * fix: jumpToMeasurement and initial label after hydration * fix: fileName capitalization * feat: use the new prefetch stack in the cs3d (#2820) * feat: use the new prefetch stack in the cs3d * use viewport scroll api for stack viewport * fix cine stop when scrollbar changes * feat: use new prefetch events * fix loading state to not show repeatedly * fix: various bugs for tmtv mode thresholding and new icons (#2823) * feat: make tmtv mode available in worklist * feat: add new icons for tmtv mode * feat: add fusion color icon * fix: parallel scale calculation * fix: bump Cornerstone to get large image support working * fix: Fix issues with CPU viewport flipping, including config files * fix: bump cornerstone to fix magnify tool * fix: Bump Cornerstone version to fix resetCamera issue in StackViewport * ci: Add _headers file to enable CORS headers for Netlify Drag/Drop deploys * fix: WADO-URI was not working. PET Metadata was coming from the wrong place. Fixed some minor React errors * feat(OHIF):Allow modes and extensions to be added after commpile time. (#2838) Also works with the compile time add that the existing cli uses, so that both build types work. Eric and I agreed this doesn't change existing functionality, but is almost entirely build issues/fixes. * bump: dependency versions to fix hydration bugs (#2848) * bump: dcmjs version to fix hydration bugs * try to fix tests * bump dependency versions Co-authored-by: Alireza <ar.sedghi@gmail.com> Co-authored-by: Bill Wallace <wayfarer3130@gmail.com>
2022-07-27 12:39:04 -04:00
1 parent 86dcaf6293
commit bd1c38c00c
@@ -0,0 +1,151 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { Icon } from '../';
+
+const SegmentationItem = ({
+  id,
+  index,
+  label,
+  displayText,
+  isActive,
+  isVisible,
+  onClick,
+  onEdit,
+  onDelete,
+  toggleVisibility,
+}) => {
+  const [isHovering, setIsHovering] = useState(false);
+
+  const onEditHandler = event => {
+    event.stopPropagation();
+    onEdit({ id, isActive, event });
+  };
+
+  const onClickHandler = event => onClick({ id, isActive, event });
+
+  const onMouseEnter = () => setIsHovering(true);
+  const onMouseLeave = () => setIsHovering(false);
+
+  return (
+    <div
+      className={classnames(
+        'group relative flex cursor-pointer items-stretch bg-black border outline-none border-transparent transition duration-300',
+        {
+          'rounded overflow-hidden border-primary-light': isActive,
+        }
+      )}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      onClick={onClickHandler}
+      role="button"
+      tabIndex="0"
+      data-cy={'measurement-item'}
+    >
+      <div
+        className={classnames(
+          'text-center flex items-center justify-center w-6 h-auto text-base transition duration-300',
+          {
+            'bg-primary-light text-black': isActive,
+            'bg-primary-dark text-primary-light group-hover:bg-secondary-main': !isActive,
+          }
+        )}
+      >
+        {isHovering ? (
+          <Icon
+            name="close"
+            className={classnames(
+              'w-5 transition duration-500 text-center hover:opacity-80',
+              {
+                'bg-primary-light text-black': isActive,
+                'bg-primary-dark text-primary-light group-hover:bg-secondary-main': !isActive,
+              }
+            )}
+            onClick={e => {
+              e.stopPropagation();
+              onDelete(id);
+            }}
+          />
+        ) : (
+          <span>{index}</span>
+        )}
+      </div>
+      <div className="relative flex flex-col w-full p-1">
+        <div className="flex items-center mb-1 ml-2">
+          <div className="flex items-center flex-1 text-base text-primary-light">
+            <div
+              className="w-3 h-3 mt-1 mr-2 rounded-full"
+              style={{ backgroundColor: 'red' }}
+            ></div>
+            {label}
+          </div>
+          <div className="flex items-center w-1/4">
+            <div>
+              <Icon
+                className={classnames(
+                  'text-white w-3 absolute cursor-pointer transition duration-300 hover:opacity-80',
+                  { 'invisible opacity-0 mr-2': !isActive && !isHovering },
+                  { 'visible opacity-1': !isActive && isHovering }
+                )}
+                name="pencil"
+                style={{
+                  top: 7,
+                  right: 14,
+                  transform: isActive || isHovering ? '' : 'translateX(100%)',
+                }}
+                onClick={e => onEditHandler(e)}
+              />
+            </div>
+            <div>
+              <Icon
+                className={classnames(
+                  'text-white w-4 cursor-pointer transition duration-300 hover:opacity-80'
+                )}
+                name={isVisible ? 'eye-visible' : 'eye-hidden'}
+                onClick={e => {
+                  // stopPropagation needed to avoid disable the current active item
+                  e.stopPropagation();
+                  toggleVisibility(e, id);
+                }}
+              />
+            </div>
+          </div>
+        </div>
+        <div className="ml-3">
+          {displayText &&
+            displayText.map(line => (
+              <span
+                key={line}
+                className="pl-2 text-base text-white border-l border-primary-light"
+              >
+                {line}
+              </span>
+            ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+SegmentationItem.propTypes = {
+  id: PropTypes.oneOfType([
+    PropTypes.number.isRequired,
+    PropTypes.string.isRequired,
+  ]),
+  index: PropTypes.number.isRequired,
+  label: PropTypes.string,
+  displayText: PropTypes.arrayOf(PropTypes.string),
+  isActive: PropTypes.bool,
+  isVisible: PropTypes.bool,
+  onClick: PropTypes.func,
+  onEdit: PropTypes.func,
+  onDelete: PropTypes.func,
+  toggleVisibility: PropTypes.func,
+};
+
+SegmentationItem.defaultProps = {
+  isActive: false,
+  displayText: [],
+};
+
+export default SegmentationItem;