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
@@ -32,10 +32,11 @@ const FILE_TYPE_OPTIONS = [
 ];

 const DEFAULT_FILENAME = 'image';
-const REFRESH_VIEWPORT_TIMEOUT = 1000;
+
+const REFRESH_VIEWPORT_TIMEOUT = 100;

 const ViewportDownloadForm = ({
-  activeViewport,
+  activeViewportElement,
  onClose,
  updateViewportPreview,
  enableViewport,
@@ -180,13 +181,13 @@ const ViewportDownloadForm = ({

  const loadAndUpdateViewports = useCallback(async () => {
    const { width: scaledWidth, height: scaledHeight } = await loadImage(
-      activeViewport,
+      activeViewportElement,
      viewportElement,
      dimensions.width,
      dimensions.height
    );

-    toggleAnnotations(showAnnotations, viewportElement);
+    toggleAnnotations(showAnnotations, viewportElement, activeViewportElement);

    const scaledDimensions = {
      height: validSize(scaledHeight),
@@ -217,7 +218,7 @@ const ViewportDownloadForm = ({
    }));
  }, [
    loadImage,
-    activeViewport,
+    activeViewportElement,
    viewportElement,
    dimensions.width,
    dimensions.height,
@@ -247,7 +248,7 @@ const ViewportDownloadForm = ({
      loadAndUpdateViewports();
    }, REFRESH_VIEWPORT_TIMEOUT);
  }, [
-    activeViewport,
+    activeViewportElement,
    viewportElement,
    showAnnotations,
    dimensions,
@@ -275,7 +276,9 @@ const ViewportDownloadForm = ({
  return (
    <div>
      <Typography variant="h6">
-        {t('Please specify the dimensions, filename, and desired type for the output image.')}
+        {t(
+          'Please specify the dimensions, filename, and desired type for the output image.'
+        )}
      </Typography>

      <div className="flex flex-col mt-6">
@@ -284,7 +287,7 @@ const ViewportDownloadForm = ({
            data-cy="file-name"
            value={filename}
            onChange={evt => setFilename(evt.target.value)}
-            label={t("File Name")}
+            label={t('File Name')}
          />
          {renderErrorHandler('filename')}
        </div>
@@ -296,9 +299,11 @@ const ViewportDownloadForm = ({
                  type="number"
                  min={minimumSize}
                  max={maximumSize}
-                  label={t("Image width (px)")}
+                  label={t('Image width (px)')}
                  value={dimensions.width}
-                  onChange={evt => onDimensionsChange(evt.target.value, 'width')}
+                  onChange={evt =>
+                    onDimensionsChange(evt.target.value, 'width')
+                  }
                  data-cy="image-width"
                />
                {renderErrorHandler('width')}
@@ -308,9 +313,11 @@ const ViewportDownloadForm = ({
                  type="number"
                  min={minimumSize}
                  max={maximumSize}
-                  label={t("Image height (px)")}
+                  label={t('Image height (px)')}
                  value={dimensions.height}
-                  onChange={evt => onDimensionsChange(evt.target.value, 'height')}
+                  onChange={evt =>
+                    onDimensionsChange(evt.target.value, 'height')
+                  }
                  data-cy="image-height"
                />
                {renderErrorHandler('height')}
@@ -337,7 +344,7 @@ const ViewportDownloadForm = ({
            <div>
              <InputLabelWrapper
                sortDirection="none"
-                label={t("File Type")}
+                label={t('File Type')}
                isSortable={false}
                onLabelClick={() => {}}
              >
@@ -365,7 +372,7 @@ const ViewportDownloadForm = ({
                  checked={showAnnotations}
                  onChange={event => setShowAnnotations(event.target.checked)}
                />
-                <Typography>{t("Show Annotations")}</Typography>
+                <Typography>{t('Show Annotations')}</Typography>
              </label>
            </div>
          </div>
@@ -373,41 +380,32 @@ const ViewportDownloadForm = ({
      </div>

      <div className="mt-8">
-          <div
-            className="p-4 rounded bg-secondary-dark border-secondary-primary"
-            data-cy="image-preview"
-          >
-          <Typography variant="h5">{t("Image preview")}</Typography>
-            {activeViewport && (<div
-            className="mx-auto my-0"
+        <div
+          className="p-4 rounded bg-secondary-dark border-secondary-primary"
+          data-cy="image-preview"
+        >
+          <Typography variant="h5">{t('Image preview')}</Typography>
+          {activeViewportElement && (
+            <div
+              className="mx-auto my-0"
              style={{
                height: viewportElementDimensions.height,
                width: viewportElementDimensions.width,
              }}
              ref={ref => setViewportElement(ref)}
-            >
-              <canvas
-                className={classnames('block', canvasClass)}
-                style={{
-                  height: downloadCanvas.height,
-                  width: downloadCanvas.width,
-                }}
-                width={downloadCanvas.width}
-                height={downloadCanvas.height}
-                ref={downloadCanvas.ref}
-              ></canvas>
-            </div>)}
-            {!activeViewport &&
-              <Typography className="mt-4">
-            {t("Active viewport has no displayed image")}
-              </Typography>
-            }
-          </div>
+            ></div>
+          )}
+          {!activeViewportElement && (
+            <Typography className="mt-4">
+              {t('Active viewport has no displayed image')}
+            </Typography>
+          )}
+        </div>
      </div>

      <div className="flex justify-end mt-4">
        <Button data-cy="cancel-btn" variant="outlined" onClick={onClose}>
-          {t("Cancel")}
+          {t('Cancel')}
        </Button>
        <Button
          className="ml-2"
@@ -416,7 +414,7 @@ const ViewportDownloadForm = ({
          color="primary"
          data-cy="download-btn"
        >
-          {t("Download")}
+          {t('Download')}
        </Button>
      </div>
    </div>