OHIF with Cornerstone3D 2.0 (#4347)

platform/ui/src/components/ProgressDropdown/ProgressItemDetail.tsx

@@ -69,7 +69,9 @@ const ProgressItemDetail = ({ option }: { option: ProgressDropdownOption }): Rea
       )}
       {!info && iconContent}
 
-      <div className="grow text-base leading-6">{label}</div>
+      <div className="grow overflow-hidden text-ellipsis whitespace-nowrap text-base leading-6">
+        {label}
+      </div>
     </>
   );
 };

platform/ui/src/components/SegmentationGroupTable/SegmentationConfig.tsx

@@ -161,7 +161,7 @@ const SegmentationConfig = ({
           />
         )}
       </div>
-      <div className="h-[6px] bg-black "></div>
+      <div className="h-[6px] bg-black"></div>
     </div>
   );
 };

platform/ui/src/components/SegmentationGroupTable/SegmentationDropDownRow.tsx

@@ -98,7 +98,7 @@ function SegmentationDropDownRow({
             ],
           ]}
         >
-          <div className="hover:bg-secondary-dark  grid h-[28px] w-[28px]  cursor-pointer place-items-center rounded-[4px]">
+          <div className="hover:bg-secondary-dark grid h-[28px] w-[28px] cursor-pointer place-items-center rounded-[4px]">
             <Icon name="icon-more-menu"></Icon>
           </div>
         </Dropdown>
@@ -138,7 +138,7 @@ function SegmentationDropDownRow({
           />
         </Tooltip>
         <div
-          className="hover:bg-secondary-dark  mr-1 grid h-[28px]  w-[28px] cursor-pointer place-items-center rounded-[4px]"
+          className="hover:bg-secondary-dark mr-1 grid h-[28px] w-[28px] cursor-pointer place-items-center rounded-[4px]"
           onClick={() => onToggleSegmentationVisibility(activeSegmentation.id)}
         >
           {activeSegmentation.isVisible ? (

platform/ui/src/components/SegmentationGroupTable/SegmentationGroupTable.tsx

@@ -94,7 +94,7 @@ const SegmentationGroupTable = ({
             segmentationConfig={segmentationConfig}
           />
         )}
-        <div className="bg-primary-dark ">
+        <div className="bg-primary-dark">
           {segmentations?.length === 0 ? (
             <div className="select-none bg-black py-[3px]">
               {showAddSegmentation && !disableEditing && (

platform/ui/src/components/StudyItem/StudyItem.tsx

@@ -49,7 +49,7 @@ const StudyItem = ({
         <div className="flex-2 flex">
           <div
             className={classnames(
-              'bg-secondary-main mt-2 flex flex-row py-1 pl-2 pr-4 text-base text-white ',
+              'bg-secondary-main mt-2 flex flex-row py-1 pl-2 pr-4 text-base text-white',
               isActive
                 ? 'border-secondary-light flex-1 justify-center border-t'
                 : 'mx-4 mb-4 rounded-sm'

platform/ui/src/components/StudySummary/StudySummary.tsx

@@ -1,7 +1,12 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
-const StudySummary = ({ date, modality, description }) => {
+interface StudySummaryProps {
+  date: string;
+  modality: string;
+  description?: string;
+}
+
+const StudySummary: React.FC<StudySummaryProps> = ({ date, modality, description }) => {
   return (
     <div className="p-2">
       <div className="leading-none">
@@ -17,10 +22,4 @@ const StudySummary = ({ date, modality, description }) => {
   );
 };
 
-StudySummary.propTypes = {
-  date: PropTypes.string.isRequired,
-  modality: PropTypes.string.isRequired,
-  description: PropTypes.string,
-};
-
 export default StudySummary;

platform/ui/src/components/ViewportPane/ViewportPane.tsx

@@ -64,7 +64,7 @@ function ViewportPane({
       onScroll={onInteractionHandler}
       onWheel={onInteractionHandler}
       className={classnames(
-        'group h-full w-full overflow-hidden rounded-md transition duration-300',
+        'group/pane h-full w-full overflow-hidden rounded-md transition duration-300',
         {
           'border-primary-light border-2': isActive,
           'border-2 border-transparent': !isActive,
@@ -80,7 +80,7 @@ function ViewportPane({
           'h-full w-full overflow-hidden rounded-md',
           {
             'border border-transparent': isActive,
-            'border-secondary-light group-hover:border-primary-light/70 border': !isActive,
+            'border-secondary-light group-hover/pane:border-primary-light/70 border': !isActive,
           },
           className
         )}

platform/ui/src/components/WindowLevel/WindowLevel.tsx

@@ -143,11 +143,12 @@ const WindowLevel = ({
                 inputClassName="grow"
                 maxValue={1}
                 minValue={0}
-                step={0.1}
+                step={0.05}
                 value={opacity}
                 showLabel={true}
                 allowNumberEdit={true}
                 onChange={handleOpacityChange}
+                showAdjustmentArrows={false}
               />
             </div>
           )}