fix(bugs): enhancements and bug fixes - more (#4043)

platform/ui/src/components/AdvancedToolbox/AdvancedToolbox.tsx

@@ -19,7 +19,10 @@ const AdvancedToolbox = ({ title, items }) => {
   const activeItemOptions = items?.find(item => item.name === activeItemName)?.options;
 
   return (
-    <PanelSection title={title}>
+    <PanelSection
+      title={title}
+      childrenClassName="flex-shrink-0"
+    >
       <div className="flex flex-col bg-black">
         <div className="bg-primary-dark mt-0.5 flex flex-wrap py-2">
           {items?.map(item => {

platform/ui/src/components/ButtonGroup/ButtonGroup.tsx

@@ -37,7 +37,7 @@ const ButtonGroup = ({
   return (
     <div
       className={classnames(wrapperClasses, ' text-[13px]', {
-        'border-secondary-light rounded-[5px] border bg-black': !separated,
+        ' rounded-md  bg-black': !separated,
       })}
     >
       {!separated && (
@@ -52,7 +52,7 @@ const ButtonGroup = ({
                     ? 'bg-customblue-40 text-white'
                     : 'text-primary-active bg-black',
                   child.props.className,
-                  disabled ? 'ohif-disabled' : ''
+                  child.props.disabled ? 'ohif-disabled' : ''
                 ),
                 onClick: e => {
                   child.props.onClick && child.props.onClick(e);
@@ -76,7 +76,7 @@ const ButtonGroup = ({
                     ? 'bg-customblue-40 text-white'
                     : 'text-primary-active bg-black border-secondary-light rounded-[5px] border',
                   child.props.className,
-                  disabled ? 'ohif-disabled' : ''
+                  child.props.disabled ? 'ohif-disabled' : ''
                 ),
                 onClick: e => {
                   child.props.onClick && child.props.onClick(e);

platform/ui/src/components/HeaderPatientInfo/HeaderPatientInfo.tsx

@@ -94,7 +94,7 @@ function HeaderPatientInfo({ servicesManager, appConfig }) {
 
   return (
     <div
-      className="align-items-center hover:bg-primary-dark flex cursor-pointer justify-center gap-1 rounded-lg"
+      className="hover:bg-primary-dark flex cursor-pointer items-center justify-center gap-1 rounded-lg"
       onClick={handleOnClick}
     >
       <Icon

platform/ui/src/components/ListMenu/ListMenu.tsx

@@ -30,7 +30,7 @@ const ListMenu = ({ items = [], renderer, onClick }) => {
   };
 
   return (
-    <div className="bg-secondary-dark flex flex-col gap-[4px] rounded-md p-2">
+    <div className="bg-secondary-dark flex flex-col gap-[4px] rounded-md p-1">
       {items.map((item, index) => {
         return (
           <ListItem

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

@@ -20,20 +20,21 @@ const ActiveSegmentationConfig = ({
 }) => {
   const { t } = useTranslation('SegmentationTable');
   return (
-    <div className="flex justify-between px-3 pt-[13px] text-[12px]">
-      <div className="flex flex-col items-start">
+    <div className="flex justify-between gap-[5px] px-2 pt-[13px] text-[12px]">
+      <div className="flex h-[89px] flex-col items-start">
         <div className="mb-[12px] text-white">{t('Active')}</div>
         <CheckBox
           label={t('Outline')}
           checked={config.renderOutline}
-          labelClassName="text-[12px] pl-1 pt-1"
+          labelClassName="text-[12px]"
           className="mb-[9px]"
           onChange={setRenderOutline}
         />
+        <div className="mt-2"></div>
         <CheckBox
           label={t('Fill')}
           checked={config.renderFill}
-          labelClassName="text-[12px] pl-1 pt-1"
+          labelClassName="text-[12px]"
           className="mb-[9px]"
           onChange={setRenderFill}
         />
@@ -47,9 +48,9 @@ const ActiveSegmentationConfig = ({
           value={getRoundedValue(config.outlineOpacity * 100)}
           onChange={setOutlineOpacityActive}
           step={1}
-          containerClassName="mt-[4px] mb-[9px]"
+          containerClassName="mt-[4px] mb-[9px] w-[100px]"
           inputClassName="w-[64px]"
-          labelClassName="text-white text-[12px]"
+          labelClassName="text-white text-[12px] whitespace-nowrap"
           unit="%"
         />
         <InputRange
@@ -58,9 +59,9 @@ const ActiveSegmentationConfig = ({
           value={getRoundedValue(config.fillAlpha * 100)}
           onChange={setFillAlpha}
           step={1}
-          containerClassName="mt-[4px] mb-[9px]"
+          containerClassName="mt-[4px] mb-[9px] w-[100px]"
           inputClassName="w-[64px]"
-          labelClassName="text-white text-[12px]"
+          labelClassName="text-white text-[12px] whitespace-nowrap"
           unit="%"
         />
       </div>

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

@@ -70,7 +70,7 @@ const SegmentItem = ({
             'border border-l-0 border-transparent': !isActive,
           })}
           style={{
-            width: 'calc(100% - 40px)',
+            width: 'calc(100% - 28px)',
           }}
         >
           <div className="bg-primary-dark flex h-full flex-grow items-center">
@@ -93,7 +93,7 @@ const SegmentItem = ({
           </div>
           <div
             className={classnames(
-              'absolute right-3 top-0 flex flex-row-reverse rounded-lg pt-[3px]',
+              'absolute right-[8px] top-0 flex flex-row-reverse rounded-lg pt-[3px]',
               {}
             )}
           >

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

@@ -75,7 +75,7 @@ const SegmentationGroupTable = ({
   const { t } = useTranslation('SegmentationTable');
 
   return (
-    <div className="flex min-h-0 flex-1 flex-col bg-black text-[13px] font-[300]">
+    <div className="flex min-h-0 flex-col bg-black text-[13px] font-[300]">
       <PanelSection
         title={t('Segmentation')}
         actionIcons={

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

@@ -67,7 +67,7 @@ const SegmentationGroupTableExpanded = ({
   const { t } = useTranslation('SegmentationTable');
 
   return (
-    <div className="flex min-h-0 flex-1 flex-col bg-black text-[13px] font-[300]">
+    <div className="flex min-h-0 flex-col bg-black text-[13px] font-[300]">
       <PanelSection
         title={t('Segmentation')}
         actionIcons={

platform/ui/src/components/SplitButton/SplitButton.tsx

@@ -31,7 +31,7 @@ const classes = {
       isActive
         ? isExpanded
           ? 'border-primary-dark !bg-primary-dark hover:border-primary-dark !text-primary-light'
-          : 'border-primary-light bg-primary-light border-2 rounded-md'
+          : 'border-primary-light bg-primary-light rounded-md'
         : `focus:!text-black focus:!rounded-md focus:!border-primary-light focus:!bg-primary-light ${isExpanded ? 'border-primary-dark bg-primary-dark !text-primary-light' : 'border-secondary-dark bg-secondary-dark group-hover/button:border-primary-dark group-hover/button:text-primary-light hover:!bg-primary-dark hover:border-primary-dark focus:!text-black'}`
     ),
   Secondary: ({ isExpanded, primary }) =>

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

@@ -40,9 +40,9 @@ const StudyItem = ({
             {numInstances}
           </div>
         </div>
-        <div className="flex flex-row py-1">
-          <div className="text-l pr-5 text-blue-300">{modalities}</div>
-          <div className="truncate-2-lines break-words text-base text-blue-300">{description}</div>
+        <div className="flex flex-row items-center py-1">
+          <div className="text-l flex items-center pr-5 text-blue-300">{modalities}</div>
+          <div className="flex items-center break-words text-base text-blue-300">{description}</div>
         </div>
       </div>
       {!!trackedSeries && (

platform/ui/src/components/ToolbarButton/ToolbarButton.tsx

@@ -39,14 +39,14 @@ const ToolbarButton = ({
       <Tooltip
         isSticky={shouldShowDropdown}
         content={shouldShowDropdown ? dropdownContent : label}
-        secondaryContent={disabledText}
+        secondaryContent={disabled ? disabledText : null}
         tight={shouldShowDropdown}
         className={toolTipClassNameToUse}
         isDisabled={disableToolTip}
       >
         <IconButton
           size={sizeToUse}
-          className={classNames(className, disabled ? '!cursor-default' : '')}
+          className={classNames(className, disabled ? 'ohif-disabled' : '')}
           onClick={() => {
             onInteraction({
               itemId: id,

platform/ui/src/components/Toolbox/Toolbox.tsx

@@ -107,6 +107,12 @@ function Toolbox({ servicesManager, buttonSectionId, commandsManager, title, ...
     api.handleToolOptionChange(toolName, optionName, newValue);
   };
 
+  useEffect(() => {
+    return () => {
+      api.handleToolSelect(null);
+    };
+  }, []);
+
   return (
     <ToolboxUI
       {...props}

platform/ui/src/components/Toolbox/ToolboxUI.tsx

@@ -46,38 +46,20 @@ function ToolboxUI(props) {
                   key={id}
                   className={classnames({
                     [toolClasses]: true,
-                    'flex flex-col items-center justify-center': true,
+                    'border-secondary-light flex flex-col items-center justify-center rounded-md border':
+                      true,
                   })}
                 >
-                  {componentProps.disabled ? (
-                    <Tooltip
-                      position="bottom"
-                      content={componentProps.label}
-                      secondaryContent={componentProps.disabledText}
-                    >
-                      <div className="bg-black">
-                        <Component
-                          {...componentProps}
-                          {...props}
-                          id={id}
-                          servicesManager={servicesManager}
-                          onInteraction={onInteraction}
-                          size="toolbox"
-                        />
-                      </div>
-                    </Tooltip>
-                  ) : (
-                    <div className="bg-black">
-                      <Component
-                        {...componentProps}
-                        {...props}
-                        id={id}
-                        servicesManager={servicesManager}
-                        onInteraction={onInteraction}
-                        size="toolbox"
-                      />
-                    </div>
-                  )}
+                  <div className="flex rounded-md bg-black">
+                    <Component
+                      {...componentProps}
+                      {...props}
+                      id={id}
+                      servicesManager={servicesManager}
+                      onInteraction={onInteraction}
+                      size="toolbox"
+                    />
+                  </div>
                 </div>
               );
             })}
@@ -90,7 +72,16 @@ function ToolboxUI(props) {
     );
   };
 
-  return useCollapsedPanel ? <PanelSection title={title}>{render()}</PanelSection> : render();
+  return useCollapsedPanel ? (
+    <PanelSection
+      childrenClassName="flex-shrink-0"
+      title={title}
+    >
+      {render()}
+    </PanelSection>
+  ) : (
+    render()
+  );
 }
 
 export { ToolboxUI };

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

@@ -141,7 +141,7 @@ const WindowLevel = ({
             </div>
           </div>
           {showOpacitySlider && (
-            <div className="flex items-center justify-between text-base">
+            <div className="flex items-center justify-between gap-2 text-base">
               <div className="text-xs text-white">Opacity</div>
               <InputRange
                 inputClassName="grow"