feat(ViewportActionMenu): window level per viewport / new patient info / colorbars/ 3D presets and 3D volume rendering (#3963)

Co-authored-by: Joe Boccanfuso <109477394+jbocce@users.noreply.github.com>
2024-04-02 09:35:30 -04:00
1 parent 07301fc020
commit b7f90e3951
@@ -0,0 +1,95 @@
+import { Icon } from '@ohif/ui';
+import { ButtonEnums } from '@ohif/ui';
+import React, { ReactElement, useState, useCallback } from 'react';
+import { Button, InputFilterText } from '@ohif/ui';
+import { ViewportPreset, VolumeRenderingPresetsContentProps } from '../../types/ViewportPresets';
+
+export function VolumeRenderingPresetsContent({
+  presets,
+  viewportId,
+  commandsManager,
+  onClose,
+}: VolumeRenderingPresetsContentProps): ReactElement {
+  const [filteredPresets, setFilteredPresets] = useState(presets);
+  const [searchValue, setSearchValue] = useState('');
+  const [selectedPreset, setSelectedPreset] = useState<ViewportPreset | null>(null);
+
+  const handleSearchChange = useCallback(
+    (value: string) => {
+      setSearchValue(value);
+      const filtered = value
+        ? presets.filter(preset => preset.name.toLowerCase().includes(value.toLowerCase()))
+        : presets;
+      setFilteredPresets(filtered);
+    },
+    [presets]
+  );
+
+  const handleApply = useCallback(
+    props => {
+      commandsManager.runCommand('setViewportPreset', {
+        ...props,
+      });
+    },
+    [commandsManager]
+  );
+
+  const formatLabel = (label: string, maxChars: number) => {
+    return label.length > maxChars ? `${label.slice(0, maxChars)}...` : label;
+  };
+
+  return (
+    <div className="flex min-h-full w-full flex-col justify-between">
+      <div className="border-secondary-light h-[433px] w-full overflow-hidden rounded border bg-black px-2.5">
+        <div className="flex h-[46px] w-full items-center justify-start">
+          <div className="h-[26px] w-[200px]">
+            <InputFilterText
+              value={searchValue}
+              onDebounceChange={handleSearchChange}
+              placeholder={'Search all'}
+            />
+          </div>
+        </div>
+        <div className="ohif-scrollbar overflow h-[385px] w-full overflow-y-auto">
+          <div className="grid grid-cols-4 gap-3 pt-2 pr-3">
+            {filteredPresets.map((preset, index) => (
+              <div
+                key={index}
+                className="flex cursor-pointer flex-col items-start"
+                onClick={() => {
+                  setSelectedPreset(preset);
+                  handleApply({ preset: preset.name, viewportId });
+                }}
+              >
+                <Icon
+                  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'
+                  }
+                />
+                <label className="text-aqua-pale mt-2 text-left text-xs">
+                  {formatLabel(preset.name, 11)}
+                </label>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+      <footer className="flex h-[60px] w-full items-center justify-end">
+        <div className="flex">
+          <Button
+            name="Cancel"
+            size={ButtonEnums.size.medium}
+            type={ButtonEnums.type.secondary}
+            onClick={onClose}
+          >
+            {' '}
+            Cancel{' '}
+          </Button>
+        </div>
+      </footer>
+    </div>
+  );
+}