@ohif/app 3.10.0-beta.76 → 3.10.0-beta.78

package/dist/{469.bundle.69efc7cbdeffc44f59d4.js → 9026.bundle.b8a3e1be70effe7ebe86.js}

@@ -1,7 +1,7 @@
 "use strict";
-(self["webpackChunk"] = self["webpackChunk"] || []).push([[469],{
+(self["webpackChunk"] = self["webpackChunk"] || []).push([[9026],{
 
-/***/ 30469:
+/***/ 99026:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 // ESM COMPAT FLAG
@@ -1168,876 +1168,8 @@ function OHIFViewportActionCorners({
   });
 }
 /* harmony default export */ const components_OHIFViewportActionCorners = (OHIFViewportActionCorners);
-// EXTERNAL MODULE: ../../../node_modules/react-i18next/dist/es/index.js + 15 modules
-var es = __webpack_require__(99993);
-// EXTERNAL MODULE: ../../ui-next/src/index.ts + 2624 modules
-var ui_next_src = __webpack_require__(18817);
-;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/components/WindowLevelActionMenu/Colormap.tsx
-
-
-
-function Colormap({
-  colormaps,
-  viewportId,
-  displaySets,
-  commandsManager,
-  servicesManager
-}) {
-  const {
-    cornerstoneViewportService
-  } = servicesManager.services;
-  const [activeDisplaySet, setActiveDisplaySet] = (0,react.useState)(displaySets[0]);
-  const [showPreview, setShowPreview] = (0,react.useState)(false);
-  const [prePreviewColormap, setPrePreviewColormap] = (0,react.useState)(null);
-  const showPreviewRef = (0,react.useRef)(showPreview);
-  showPreviewRef.current = showPreview;
-  const prePreviewColormapRef = (0,react.useRef)(prePreviewColormap);
-  prePreviewColormapRef.current = prePreviewColormap;
-  const activeDisplaySetRef = (0,react.useRef)(activeDisplaySet);
-  activeDisplaySetRef.current = activeDisplaySet;
-  const onSetColorLUT = (0,react.useCallback)(props => {
-    // TODO: Better way to check if it's a fusion
-    const oneOpacityColormaps = ['Grayscale', 'X Ray'];
-    const opacity = displaySets.length > 1 && !oneOpacityColormaps.includes(props.colormap.name) ? 0.5 : 1;
-    commandsManager.run({
-      commandName: 'setViewportColormap',
-      commandOptions: {
-        ...props,
-        opacity,
-        immediate: true
-      },
-      context: 'CORNERSTONE'
-    });
-  }, [commandsManager]);
-  const getViewportColormap = (viewportId, displaySet) => {
-    const {
-      displaySetInstanceUID
-    } = displaySet;
-    const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
-    if (viewport instanceof dist_esm.StackViewport) {
-      const {
-        colormap
-      } = viewport.getProperties();
-      if (!colormap) {
-        return colormaps.find(c => c.Name === 'Grayscale') || colormaps[0];
-      }
-      return colormap;
-    }
-    const actorEntries = viewport.getActors();
-    const actorEntry = actorEntries?.find(entry => entry.referencedId.includes(displaySetInstanceUID));
-    const {
-      colormap
-    } = viewport.getProperties(actorEntry.referencedId);
-    if (!colormap) {
-      return colormaps.find(c => c.Name === 'Grayscale') || colormaps[0];
-    }
-    return colormap;
-  };
-  const buttons = (0,react.useMemo)(() => {
-    return displaySets.map((displaySet, index) => ({
-      children: displaySet.Modality,
-      key: index,
-      style: {
-        minWidth: `calc(100% / ${displaySets.length})`,
-        fontSize: '0.8rem',
-        textAlign: 'center',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center'
-      }
-    }));
-  }, [displaySets]);
-  (0,react.useEffect)(() => {
-    setActiveDisplaySet(displaySets[displaySets.length - 1]);
-  }, [displaySets]);
-  return /*#__PURE__*/react.createElement(react.Fragment, null, buttons.length > 1 && /*#__PURE__*/react.createElement("div", {
-    className: "all-in-one-menu-item flex w-full justify-center"
-  }, /*#__PURE__*/react.createElement(ui_src/* ButtonGroup */.e2, {
-    onActiveIndexChange: index => {
-      setActiveDisplaySet(displaySets[index]);
-      setPrePreviewColormap(null);
-    },
-    activeIndex: displaySets.findIndex(ds => ds.displaySetInstanceUID === activeDisplaySetRef.current.displaySetInstanceUID) || 1,
-    className: "w-[70%] text-[10px]"
-  }, buttons.map(({
-    children,
-    key,
-    style
-  }) => /*#__PURE__*/react.createElement("div", {
-    key: key,
-    style: style
-  }, children)))), /*#__PURE__*/react.createElement("div", {
-    className: "all-in-one-menu-item flex w-full justify-center"
-  }, /*#__PURE__*/react.createElement(ui_src/* SwitchButton */.L$, {
-    label: "Preview in viewport",
-    checked: showPreview,
-    onChange: checked => {
-      setShowPreview(checked);
-    }
-  })), /*#__PURE__*/react.createElement(ui_src/* AllInOneMenu.DividerItem */.se.VG, null), /*#__PURE__*/react.createElement(ui_src/* AllInOneMenu.ItemPanel */.se.cV, null, colormaps.map((colormap, index) => /*#__PURE__*/react.createElement(ui_src/* AllInOneMenu.Item */.se.q7, {
-    key: index,
-    label: colormap.description,
-    onClick: () => {
-      onSetColorLUT({
-        viewportId,
-        colormap,
-        displaySetInstanceUID: activeDisplaySetRef.current.displaySetInstanceUID
-      });
-      setPrePreviewColormap(null);
-    },
-    onMouseEnter: () => {
-      if (showPreviewRef.current) {
-        setPrePreviewColormap(getViewportColormap(viewportId, activeDisplaySetRef.current));
-        onSetColorLUT({
-          viewportId,
-          colormap,
-          displaySetInstanceUID: activeDisplaySetRef.current.displaySetInstanceUID
-        });
-      }
-    },
-    onMouseLeave: () => {
-      if (showPreviewRef.current && prePreviewColormapRef.current) {
-        onSetColorLUT({
-          viewportId,
-          colormap: prePreviewColormapRef.current,
-          displaySetInstanceUID: activeDisplaySetRef.current.displaySetInstanceUID
-        });
-      }
-    }
-  }))));
-}
-;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/components/WindowLevelActionMenu/Colorbar.tsx
-
-
-
-
-function setViewportColorbar(viewportId, displaySets, commandsManager, servicesManager, colorbarOptions) {
-  const {
-    cornerstoneViewportService
-  } = servicesManager.services;
-  const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
-  const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);
-  const backgroundColor = viewportInfo.getViewportOptions().background;
-  const isLight = backgroundColor ? dist_esm.utilities.isEqual(backgroundColor, [1, 1, 1]) : false;
-  if (isLight) {
-    colorbarOptions.ticks = {
-      position: 'left',
-      style: {
-        font: '12px Arial',
-        color: '#000000',
-        maxNumTicks: 8,
-        tickSize: 5,
-        tickWidth: 1,
-        labelMargin: 3
-      }
-    };
-  }
-  const displaySetInstanceUIDs = [];
-  if (viewport instanceof dist_esm.StackViewport) {
-    displaySetInstanceUIDs.push(viewportId);
-  }
-  if (viewport instanceof dist_esm.VolumeViewport) {
-    displaySets.forEach(ds => {
-      displaySetInstanceUIDs.push(ds.displaySetInstanceUID);
-    });
-  }
-  commandsManager.run({
-    commandName: 'toggleViewportColorbar',
-    commandOptions: {
-      viewportId,
-      options: colorbarOptions,
-      displaySetInstanceUIDs
-    },
-    context: 'CORNERSTONE'
-  });
-}
-function Colorbar({
-  viewportId,
-  displaySets,
-  commandsManager,
-  servicesManager,
-  colorbarProperties
-}) {
-  const {
-    colorbarService
-  } = servicesManager.services;
-  const {
-    width: colorbarWidth,
-    colorbarTickPosition,
-    colorbarContainerPosition,
-    colormaps,
-    colorbarInitialColormap
-  } = colorbarProperties;
-  const [showColorbar, setShowColorbar] = (0,react.useState)(colorbarService.hasColorbar(viewportId));
-  const onSetColorbar = (0,react.useCallback)(() => {
-    setViewportColorbar(viewportId, displaySets, commandsManager, servicesManager, {
-      viewportId,
-      colormaps,
-      ticks: {
-        position: colorbarTickPosition
-      },
-      width: colorbarWidth,
-      position: colorbarContainerPosition,
-      activeColormapName: colorbarInitialColormap
-    });
-  }, [commandsManager]);
-  (0,react.useEffect)(() => {
-    const updateColorbarState = () => {
-      setShowColorbar(colorbarService.hasColorbar(viewportId));
-    };
-    const {
-      unsubscribe
-    } = colorbarService.subscribe(colorbarService.EVENTS.STATE_CHANGED, updateColorbarState);
-    return () => {
-      unsubscribe();
-    };
-  }, [viewportId]);
-  return /*#__PURE__*/react.createElement("div", {
-    className: "all-in-one-menu-item flex w-full justify-center"
-  }, /*#__PURE__*/react.createElement("div", {
-    className: "mr-2 w-[28px]"
-  }), /*#__PURE__*/react.createElement(ui_src/* SwitchButton */.L$, {
-    label: "Display Color bar",
-    checked: showColorbar,
-    onChange: () => {
-      onSetColorbar();
-    }
-  }));
-}
-;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/components/WindowLevelActionMenu/WindowLevel.tsx
-
-
-
-function WindowLevel({
-  viewportId,
-  commandsManager,
-  presets
-}) {
-  const {
-    t
-  } = (0,es/* useTranslation */.Bd)('WindowLevelActionMenu');
-  const onSetWindowLevel = (0,react.useCallback)(props => {
-    commandsManager.run({
-      commandName: 'setViewportWindowLevel',
-      commandOptions: {
-        ...props,
-        viewportId
-      },
-      context: 'CORNERSTONE'
-    });
-  }, [commandsManager, viewportId]);
-  return /*#__PURE__*/react.createElement(ui_src/* AllInOneMenu.ItemPanel */.se.cV, null, presets.map((modalityPresets, modalityIndex) => /*#__PURE__*/react.createElement(react.Fragment, {
-    key: modalityIndex
-  }, Object.entries(modalityPresets).map(([modality, presetsArray]) => /*#__PURE__*/react.createElement(react.Fragment, {
-    key: modality
-  }, /*#__PURE__*/react.createElement(ui_src/* AllInOneMenu.HeaderItem */.se.N5, null, t('Modality Presets', {
-    modality
-  })), presetsArray.map((preset, index) => /*#__PURE__*/react.createElement(ui_src/* AllInOneMenu.Item */.se.q7, {
-    key: `${modality}-${index}`,
-    label: preset.description,
-    secondaryLabel: `${preset.window} / ${preset.level}`,
-    onClick: () => onSetWindowLevel(preset)
-  })))))));
-}
-;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/components/WindowLevelActionMenu/VolumeRenderingPresetsContent.tsx
-
-
-
-
-function VolumeRenderingPresetsContent({
-  presets,
-  viewportId,
-  commandsManager,
-  onClose
-}) {
-  const [filteredPresets, setFilteredPresets] = (0,react.useState)(presets);
-  const [searchValue, setSearchValue] = (0,react.useState)('');
-  const [selectedPreset, setSelectedPreset] = (0,react.useState)(null);
-  const handleSearchChange = (0,react.useCallback)(value => {
-    setSearchValue(value);
-    const filtered = value ? presets.filter(preset => preset.name.toLowerCase().includes(value.toLowerCase())) : presets;
-    setFilteredPresets(filtered);
-  }, [presets]);
-  const handleApply = (0,react.useCallback)(props => {
-    commandsManager.runCommand('setViewportPreset', {
-      ...props
-    });
-  }, [commandsManager]);
-  const formatLabel = (label, maxChars) => {
-    return label.length > maxChars ? `${label.slice(0, maxChars)}...` : label;
-  };
-  return /*#__PURE__*/react.createElement("div", {
-    className: "flex min-h-full w-full flex-col justify-between"
-  }, /*#__PURE__*/react.createElement("div", {
-    className: "border-secondary-light h-[433px] w-full overflow-hidden rounded border bg-black px-2.5"
-  }, /*#__PURE__*/react.createElement("div", {
-    className: "flex h-[46px] w-full items-center justify-start"
-  }, /*#__PURE__*/react.createElement("div", {
-    className: "h-[26px] w-[200px]"
-  }, /*#__PURE__*/react.createElement(ui_src/* InputFilterText */.Cv, {
-    value: searchValue,
-    onDebounceChange: handleSearchChange,
-    placeholder: 'Search all'
-  }))), /*#__PURE__*/react.createElement("div", {
-    className: "ohif-scrollbar overflow h-[385px] w-full overflow-y-auto"
-  }, /*#__PURE__*/react.createElement("div", {
-    className: "grid grid-cols-4 gap-3 pt-2 pr-3"
-  }, filteredPresets.map((preset, index) => /*#__PURE__*/react.createElement("div", {
-    key: index,
-    className: "flex cursor-pointer flex-col items-start",
-    onClick: () => {
-      setSelectedPreset(preset);
-      handleApply({
-        preset: preset.name,
-        viewportId
-      });
-    }
-  }, /*#__PURE__*/react.createElement(ui_next_src/* Icons */.FI.ByName, {
-    name: preset.name,
-    className: selectedPreset?.name === preset.name ? 'border-primary-light h-[75px] w-[95px] max-w-none rounded border-2' : 'hover:border-primary-light h-[75px] w-[95px] max-w-none rounded border-2 border-black'
-  }), /*#__PURE__*/react.createElement("label", {
-    className: "text-aqua-pale mt-2 text-left text-xs"
-  }, formatLabel(preset.name, 11))))))), /*#__PURE__*/react.createElement("footer", {
-    className: "flex h-[60px] w-full items-center justify-end"
-  }, /*#__PURE__*/react.createElement("div", {
-    className: "flex"
-  }, /*#__PURE__*/react.createElement(ui_src/* Button */.$n, {
-    name: "Cancel",
-    size: ui_src/* ButtonEnums.size */.Ny.Ej.medium,
-    type: ui_src/* ButtonEnums.type */.Ny.NW.secondary,
-    onClick: onClose
-  }, ' ', "Cancel", ' '))));
-}
-;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/components/WindowLevelActionMenu/VolumeRenderingPresets.tsx
-
-
-
-
-function VolumeRenderingPresets({
-  viewportId,
-  servicesManager,
-  commandsManager,
-  volumeRenderingPresets
-}) {
-  const {
-    uiModalService
-  } = servicesManager.services;
-  const onClickPresets = () => {
-    uiModalService.show({
-      content: VolumeRenderingPresetsContent,
-      title: 'Rendering Presets',
-      movable: true,
-      contentProps: {
-        onClose: uiModalService.hide,
-        presets: volumeRenderingPresets,
-        viewportId,
-        commandsManager
-      },
-      containerDimensions: 'h-[543px] w-[460px]',
-      contentDimensions: 'h-[493px] w-[460px]  pl-[12px] pr-[12px]'
-    });
-  };
-  return /*#__PURE__*/react.createElement(ui_src/* AllInOneMenu.Item */.se.q7, {
-    label: "Rendering Presets",
-    icon: /*#__PURE__*/react.createElement(ui_next_src/* Icons */.FI.VolumeRendering, null),
-    rightIcon: /*#__PURE__*/react.createElement(ui_next_src/* Icons */.FI.ByName, {
-      name: "action-new-dialog"
-    }),
-    onClick: onClickPresets
-  });
-}
-;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/components/WindowLevelActionMenu/VolumeRenderingQuality.tsx
-
-function VolumeRenderingQuality({
-  volumeRenderingQualityRange,
-  commandsManager,
-  servicesManager,
-  viewportId
-}) {
-  const {
-    cornerstoneViewportService
-  } = servicesManager.services;
-  const {
-    min,
-    max,
-    step
-  } = volumeRenderingQualityRange;
-  const [quality, setQuality] = (0,react.useState)(null);
-  const onChange = (0,react.useCallback)(value => {
-    commandsManager.runCommand('setVolumeRenderingQulaity', {
-      viewportId,
-      volumeQuality: value
-    });
-    setQuality(value);
-  }, [commandsManager, viewportId]);
-  const calculateBackground = value => {
-    const percentage = (value - 0) / (1 - 0) * 100;
-    return `linear-gradient(to right, #5acce6 0%, #5acce6 ${percentage}%, #3a3f99 ${percentage}%, #3a3f99 100%)`;
-  };
-  (0,react.useEffect)(() => {
-    const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
-    const {
-      actor
-    } = viewport.getActors()[0];
-    const mapper = actor.getMapper();
-    const image = mapper.getInputData();
-    const spacing = image.getSpacing();
-    const sampleDistance = mapper.getSampleDistance();
-    const averageSpacing = spacing.reduce((a, b) => a + b) / 3.0;
-    if (sampleDistance === averageSpacing) {
-      setQuality(1);
-    } else {
-      setQuality(Math.sqrt(averageSpacing / (sampleDistance * 0.5)));
-    }
-  }, [cornerstoneViewportService, viewportId]);
-  return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("div", {
-    className: "all-in-one-menu-item flex  w-full flex-row !items-center justify-between gap-[10px]"
-  }, /*#__PURE__*/react.createElement("label", {
-    className: "block text-white",
-    htmlFor: "volume"
-  }, "Quality"), quality !== null && /*#__PURE__*/react.createElement("input", {
-    className: "bg-inputfield-main h-2 w-[120px] cursor-pointer appearance-none rounded-lg",
-    value: quality,
-    id: "volume",
-    max: max,
-    min: min,
-    type: "range",
-    step: step,
-    onChange: e => onChange(parseInt(e.target.value, 10)),
-    style: {
-      background: calculateBackground((quality - min) / (max - min)),
-      '--thumb-inner-color': '#5acce6',
-      '--thumb-outer-color': '#090c29'
-    }
-  })));
-}
-;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/components/WindowLevelActionMenu/VolumeShift.tsx
-
-function VolumeShift({
-  viewportId,
-  commandsManager,
-  servicesManager
-}) {
-  const {
-    cornerstoneViewportService
-  } = servicesManager.services;
-  const [minShift, setMinShift] = (0,react.useState)(null);
-  const [maxShift, setMaxShift] = (0,react.useState)(null);
-  const [shift, setShift] = (0,react.useState)(cornerstoneViewportService.getCornerstoneViewport(viewportId)?.shiftedBy || 0);
-  const [step, setStep] = (0,react.useState)(null);
-  const [isBlocking, setIsBlocking] = (0,react.useState)(false);
-  const prevShiftRef = (0,react.useRef)(shift);
-  const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
-  const {
-    actor
-  } = viewport.getActors()[0];
-  const ofun = actor.getProperty().getScalarOpacity(0);
-  (0,react.useEffect)(() => {
-    if (isBlocking) {
-      return;
-    }
-    const range = ofun.getRange();
-    const transferFunctionWidth = range[1] - range[0];
-    const minShift = -transferFunctionWidth;
-    const maxShift = transferFunctionWidth;
-    setMinShift(minShift);
-    setMaxShift(maxShift);
-    setStep(Math.pow(10, Math.floor(Math.log10(transferFunctionWidth / 500))));
-  }, [cornerstoneViewportService, viewportId, actor, ofun, isBlocking]);
-  const onChangeRange = (0,react.useCallback)(newShift => {
-    const shiftDifference = newShift - prevShiftRef.current;
-    prevShiftRef.current = newShift;
-    viewport.shiftedBy = newShift;
-    commandsManager.runCommand('shiftVolumeOpacityPoints', {
-      viewportId,
-      shift: shiftDifference
-    });
-  }, [commandsManager, viewportId, viewport]);
-  const calculateBackground = value => {
-    const percentage = (value - 0) / (1 - 0) * 100;
-    return `linear-gradient(to right, #5acce6 0%, #5acce6 ${percentage}%, #3a3f99 ${percentage}%, #3a3f99 100%)`;
-  };
-  return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("div", {
-    className: "all-in-one-menu-item flex  w-full flex-row !items-center justify-between gap-[10px]"
-  }, /*#__PURE__*/react.createElement("label", {
-    className: "block  text-white",
-    htmlFor: "shift"
-  }, "Shift"), step !== null && /*#__PURE__*/react.createElement("input", {
-    className: "bg-inputfield-main h-2 w-[120px] cursor-pointer appearance-none rounded-lg",
-    value: shift,
-    onChange: e => {
-      const shiftValue = parseInt(e.target.value, 10);
-      setShift(shiftValue);
-      onChangeRange(shiftValue);
-    },
-    id: "shift",
-    onMouseDown: () => setIsBlocking(true),
-    onMouseUp: () => setIsBlocking(false),
-    max: maxShift,
-    min: minShift,
-    type: "range",
-    step: step,
-    style: {
-      background: calculateBackground((shift - minShift) / (maxShift - minShift)),
-      '--thumb-inner-color': '#5acce6',
-      '--thumb-outer-color': '#090c29'
-    }
-  })));
-}
-;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/components/WindowLevelActionMenu/VolumeLighting.tsx
-
-function VolumeLighting({
-  servicesManager,
-  commandsManager,
-  viewportId,
-  hasShade
-}) {
-  const {
-    cornerstoneViewportService
-  } = servicesManager.services;
-  const [ambient, setAmbient] = (0,react.useState)(null);
-  const [diffuse, setDiffuse] = (0,react.useState)(null);
-  const [specular, setSpecular] = (0,react.useState)(null);
-  const onAmbientChange = (0,react.useCallback)(() => {
-    commandsManager.runCommand('setVolumeLighting', {
-      viewportId,
-      options: {
-        ambient
-      }
-    });
-  }, [ambient, commandsManager, viewportId]);
-  const onDiffuseChange = (0,react.useCallback)(() => {
-    commandsManager.runCommand('setVolumeLighting', {
-      viewportId,
-      options: {
-        diffuse
-      }
-    });
-  }, [diffuse, commandsManager, viewportId]);
-  const onSpecularChange = (0,react.useCallback)(() => {
-    commandsManager.runCommand('setVolumeLighting', {
-      viewportId,
-      options: {
-        specular
-      }
-    });
-  }, [specular, commandsManager, viewportId]);
-  const calculateBackground = value => {
-    const percentage = (value - 0) / (1 - 0) * 100;
-    return `linear-gradient(to right, #5acce6 0%, #5acce6 ${percentage}%, #3a3f99 ${percentage}%, #3a3f99 100%)`;
-  };
-  (0,react.useEffect)(() => {
-    const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
-    const {
-      actor
-    } = viewport.getActors()[0];
-    const ambient = actor.getProperty().getAmbient();
-    const diffuse = actor.getProperty().getDiffuse();
-    const specular = actor.getProperty().getSpecular();
-    setAmbient(ambient);
-    setDiffuse(diffuse);
-    setSpecular(specular);
-  }, [viewportId, cornerstoneViewportService]);
-  const disableOption = hasShade ? '' : 'ohif-disabled !opacity-40';
-  const disableSlider = !hasShade;
-  return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("div", {
-    className: `all-in-one-menu-item flex w-full flex-row !items-center justify-between gap-[10px] ${disableOption}`
-  }, /*#__PURE__*/react.createElement("label", {
-    className: "block text-white",
-    htmlFor: "ambient"
-  }, "Ambient"), ambient !== null && /*#__PURE__*/react.createElement("input", {
-    className: "bg-inputfield-main h-2 w-[120px] cursor-pointer appearance-none rounded-lg",
-    value: ambient,
-    onChange: e => {
-      setAmbient(e.target.value);
-      onAmbientChange();
-    },
-    id: "ambient",
-    disabled: disableSlider,
-    max: 1,
-    min: 0,
-    type: "range",
-    step: 0.1,
-    style: {
-      background: calculateBackground(ambient),
-      '--thumb-inner-color': '#5acce6',
-      '--thumb-outer-color': '#090c29'
-    }
-  })), /*#__PURE__*/react.createElement("div", {
-    className: `all-in-one-menu-item flex w-full flex-row !items-center justify-between gap-[10px] ${disableOption}`
-  }, /*#__PURE__*/react.createElement("label", {
-    className: "block text-white",
-    htmlFor: "diffuse"
-  }, "Diffuse"), diffuse !== null && /*#__PURE__*/react.createElement("input", {
-    className: "bg-inputfield-main h-2 w-[120px] cursor-pointer appearance-none rounded-lg",
-    value: diffuse,
-    onChange: e => {
-      setDiffuse(e.target.value);
-      onDiffuseChange();
-    },
-    disabled: disableSlider,
-    id: "diffuse",
-    max: 1,
-    min: 0,
-    type: "range",
-    step: 0.1,
-    style: {
-      background: calculateBackground(diffuse),
-      '--thumb-inner-color': '#5acce6',
-      '--thumb-outer-color': '#090c29'
-    }
-  })), /*#__PURE__*/react.createElement("div", {
-    className: `all-in-one-menu-item flex w-full flex-row !items-center justify-between gap-[10px] ${disableOption}`
-  }, /*#__PURE__*/react.createElement("label", {
-    className: "block text-white",
-    htmlFor: "specular"
-  }, "Specular"), specular !== null && /*#__PURE__*/react.createElement("input", {
-    className: "bg-inputfield-main h-2 w-[120px] cursor-pointer appearance-none rounded-lg",
-    value: specular,
-    disabled: disableSlider,
-    onChange: e => {
-      setSpecular(e.target.value);
-      onSpecularChange();
-    },
-    id: "specular",
-    max: 1,
-    min: 0,
-    type: "range",
-    step: 0.1,
-    style: {
-      background: calculateBackground(specular),
-      '--thumb-inner-color': '#5acce6',
-      '--thumb-outer-color': '#090c29'
-    }
-  })));
-}
-;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/components/WindowLevelActionMenu/VolumeShade.tsx
-
-
-function VolumeShade({
-  commandsManager,
-  viewportId,
-  servicesManager,
-  onClickShade = bool => {}
-}) {
-  const {
-    cornerstoneViewportService
-  } = servicesManager.services;
-  const [shade, setShade] = (0,react.useState)(true);
-  const [key, setKey] = (0,react.useState)(0);
-  const onShadeChange = (0,react.useCallback)(checked => {
-    commandsManager.runCommand('setVolumeLighting', {
-      viewportId,
-      options: {
-        shade: checked
-      }
-    });
-  }, [commandsManager, viewportId]);
-  (0,react.useEffect)(() => {
-    const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
-    const {
-      actor
-    } = viewport.getActors()[0];
-    const shade = actor.getProperty().getShade();
-    setShade(shade);
-    onClickShade(shade);
-    setKey(key + 1);
-  }, [viewportId, cornerstoneViewportService]);
-  return /*#__PURE__*/react.createElement(ui_src/* SwitchButton */.L$, {
-    key: key,
-    label: "Shade",
-    checked: shade,
-    onChange: () => {
-      setShade(!shade);
-      onClickShade(!shade);
-      onShadeChange(!shade);
-    }
-  });
-}
-;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/components/WindowLevelActionMenu/VolumeRenderingOptions.tsx
-
-
-
-
-
-
-function VolumeRenderingOptions({
-  viewportId,
-  commandsManager,
-  volumeRenderingQualityRange,
-  servicesManager
-}) {
-  const [hasShade, setShade] = (0,react.useState)(false);
-  return /*#__PURE__*/react.createElement(ui_src/* AllInOneMenu.ItemPanel */.se.cV, null, /*#__PURE__*/react.createElement(VolumeRenderingQuality, {
-    viewportId: viewportId,
-    commandsManager: commandsManager,
-    servicesManager: servicesManager,
-    volumeRenderingQualityRange: volumeRenderingQualityRange
-  }), /*#__PURE__*/react.createElement(VolumeShift, {
-    viewportId: viewportId,
-    commandsManager: commandsManager,
-    servicesManager: servicesManager
-  }), /*#__PURE__*/react.createElement("div", {
-    className: "all-in-one-menu-item mt-2 flex !h-[20px] w-full justify-start"
-  }, /*#__PURE__*/react.createElement("div", {
-    className: "text-aqua-pale text-[13px]"
-  }, "LIGHTING")), /*#__PURE__*/react.createElement("div", {
-    className: "bg-primary-dark mt-1 mb-1 h-[2px] w-full"
-  }), /*#__PURE__*/react.createElement("div", {
-    className: "all-in-one-menu-item flex w-full justify-center"
-  }, /*#__PURE__*/react.createElement(VolumeShade, {
-    commandsManager: commandsManager,
-    servicesManager: servicesManager,
-    viewportId: viewportId,
-    onClickShade: setShade
-  })), /*#__PURE__*/react.createElement(VolumeLighting, {
-    viewportId: viewportId,
-    commandsManager: commandsManager,
-    servicesManager: servicesManager,
-    hasShade: hasShade
-  }));
-}
-;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/components/WindowLevelActionMenu/WindowLevelActionMenu.tsx
-
-
-
-
-
-
-
-
-
-
-
-
-
-const nonWLModalities = ['SR', 'SEG', 'SM', 'RTSTRUCT', 'RTPLAN', 'RTDOSE'];
-function WindowLevelActionMenu({
-  viewportId,
-  element,
-  presets,
-  verticalDirection,
-  horizontalDirection,
-  commandsManager,
-  servicesManager,
-  colorbarProperties,
-  displaySets,
-  volumeRenderingPresets,
-  volumeRenderingQualityRange
-}) {
-  const {
-    colormaps,
-    colorbarContainerPosition,
-    colorbarInitialColormap,
-    colorbarTickPosition,
-    width: colorbarWidth
-  } = colorbarProperties;
-  const {
-    colorbarService,
-    cornerstoneViewportService
-  } = servicesManager.services;
-  const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);
-  const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
-  const backgroundColor = viewportInfo.getViewportOptions().background;
-  const isLight = backgroundColor ? dist_esm.utilities.isEqual(backgroundColor, [1, 1, 1]) : false;
-  const {
-    t
-  } = (0,es/* useTranslation */.Bd)('WindowLevelActionMenu');
-  const [viewportGrid] = (0,ui_next_src/* useViewportGrid */.ih)();
-  const {
-    activeViewportId
-  } = viewportGrid;
-  const [vpHeight, setVpHeight] = (0,react.useState)(element?.clientHeight);
-  const [menuKey, setMenuKey] = (0,react.useState)(0);
-  const [is3DVolume, setIs3DVolume] = (0,react.useState)(false);
-  const onSetColorbar = (0,react.useCallback)(() => {
-    setViewportColorbar(viewportId, displaySets, commandsManager, servicesManager, {
-      colormaps,
-      ticks: {
-        position: colorbarTickPosition
-      },
-      width: colorbarWidth,
-      position: colorbarContainerPosition,
-      activeColormapName: colorbarInitialColormap
-    });
-  }, [commandsManager]);
-  (0,react.useEffect)(() => {
-    const newVpHeight = element?.clientHeight;
-    if (vpHeight !== newVpHeight) {
-      setVpHeight(newVpHeight);
-    }
-  }, [element, vpHeight]);
-  (0,react.useEffect)(() => {
-    if (!colorbarService.hasColorbar(viewportId)) {
-      return;
-    }
-    window.setTimeout(() => {
-      colorbarService.removeColorbar(viewportId);
-      onSetColorbar();
-    }, 0);
-  }, [viewportId, displaySets, viewport]);
-  (0,react.useEffect)(() => {
-    setMenuKey(menuKey + 1);
-    const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
-    if (viewport instanceof dist_esm.VolumeViewport3D) {
-      setIs3DVolume(true);
-    } else {
-      setIs3DVolume(false);
-    }
-  }, [displaySets, viewportId, presets, volumeRenderingQualityRange, volumeRenderingPresets, colorbarProperties, activeViewportId, viewportGrid]);
-  return /*#__PURE__*/react.createElement(ui_src/* AllInOneMenu.IconMenu */.se.dd, {
-    icon: "viewport-window-level",
-    verticalDirection: verticalDirection,
-    horizontalDirection: horizontalDirection,
-    iconClassName: classnames_default()(
-    // Visible on hover and for the active viewport
-    activeViewportId === viewportId ? 'visible' : 'invisible group-hover/pane:visible', 'flex shrink-0 cursor-pointer rounded active:text-white text-primary-light', isLight ? ' hover:bg-secondary-dark' : 'hover:bg-secondary-light/60'),
-    menuStyle: {
-      maxHeight: vpHeight - 32,
-      minWidth: 218
-    },
-    onVisibilityChange: () => {
-      setVpHeight(element.clientHeight);
-    },
-    menuKey: menuKey
-  }, /*#__PURE__*/react.createElement(ui_src/* AllInOneMenu.ItemPanel */.se.cV, null, !is3DVolume && /*#__PURE__*/react.createElement(Colorbar, {
-    viewportId: viewportId,
-    displaySets: displaySets.filter(ds => !nonWLModalities.includes(ds.Modality)),
-    commandsManager: commandsManager,
-    servicesManager: servicesManager,
-    colorbarProperties: colorbarProperties
-  }), colormaps && !is3DVolume && /*#__PURE__*/react.createElement(ui_src/* AllInOneMenu.SubMenu */.se.g8, {
-    key: "colorLUTPresets",
-    itemLabel: "Color LUT",
-    itemIcon: "icon-color-lut"
-  }, /*#__PURE__*/react.createElement(Colormap, {
-    colormaps: colormaps,
-    viewportId: viewportId,
-    displaySets: displaySets.filter(ds => !nonWLModalities.includes(ds.Modality)),
-    commandsManager: commandsManager,
-    servicesManager: servicesManager
-  })), presets && presets.length > 0 && !is3DVolume && /*#__PURE__*/react.createElement(ui_src/* AllInOneMenu.SubMenu */.se.g8, {
-    key: "windowLevelPresets",
-    itemLabel: t('Modality Window Presets'),
-    itemIcon: "viewport-window-level"
-  }, /*#__PURE__*/react.createElement(WindowLevel, {
-    viewportId: viewportId,
-    commandsManager: commandsManager,
-    presets: presets
-  })), volumeRenderingPresets && is3DVolume && /*#__PURE__*/react.createElement(VolumeRenderingPresets, {
-    servicesManager: servicesManager,
-    viewportId: viewportId,
-    commandsManager: commandsManager,
-    volumeRenderingPresets: volumeRenderingPresets
-  }), volumeRenderingQualityRange && is3DVolume && /*#__PURE__*/react.createElement(ui_src/* AllInOneMenu.SubMenu */.se.g8, {
-    itemLabel: "Rendering Options"
-  }, /*#__PURE__*/react.createElement(VolumeRenderingOptions, {
-    viewportId: viewportId,
-    commandsManager: commandsManager,
-    volumeRenderingQualityRange: volumeRenderingQualityRange,
-    servicesManager: servicesManager
-  }))));
-}
+// EXTERNAL MODULE: ../../../extensions/cornerstone/src/components/WindowLevelActionMenu/WindowLevelActionMenu.tsx + 10 modules
+var WindowLevelActionMenu_WindowLevelActionMenu = __webpack_require__(35392);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/components/WindowLevelActionMenu/getWindowLevelActionMenu.tsx
 
 
@@ -2059,12 +1191,13 @@ function getWindowLevelActionMenu({
     volumeRenderingPresets,
     volumeRenderingQualityRange
   } = customizationService.getCustomization('cornerstone.3dVolumeRendering');
+  const WindowLevelActionMenu = customizationService.getCustomization('cornerstone.windowLevelActionMenu');
   const displaySetPresets = displaySets.filter(displaySet => presets[displaySet.Modality]).map(displaySet => {
     return {
       [displaySet.Modality]: presets[displaySet.Modality]
     };
   });
-  const modalities = displaySets.map(displaySet => displaySet.Modality).filter(modality => !nonWLModalities.includes(modality));
+  const modalities = displaySets.map(displaySet => displaySet.Modality).filter(modality => !WindowLevelActionMenu_WindowLevelActionMenu/* nonWLModalities */.i.includes(modality));
   if (modalities.length === 0) {
     return null;
   }
@@ -2082,6 +1215,8 @@ function getWindowLevelActionMenu({
     volumeRenderingQualityRange: volumeRenderingQualityRange
   });
 }
+// EXTERNAL MODULE: ../../ui-next/src/index.ts + 2624 modules
+var ui_next_src = __webpack_require__(18817);
 // EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/tools/dist/esm/enums/index.js + 2 modules
 var enums = __webpack_require__(99737);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/components/ViewportDataOverlaySettingMenu/ViewportSegmentationMenu.tsx