fix(bugs): enhancements and bug fixes (#4036)

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

@@ -40,27 +40,30 @@ const ButtonGroup = ({
         'border-secondary-light rounded-[5px] border bg-black': !separated,
       })}
     >
-      {!separated &&
-        Children.map(children, (child, index) => {
-          if (React.isValidElement(child)) {
-            return cloneElement(child, {
-              key: index,
-              className: classnames(
-                'rounded-[4px] px-2 py-1',
-                index === activeIndex
-                  ? 'bg-customblue-40 text-white'
-                  : 'text-primary-active bg-black',
-                child.props.className,
-                disabled ? 'ohif-disabled' : ''
-              ),
-              onClick: e => {
-                child.props.onClick && child.props.onClick(e);
-                handleButtonClick(index);
-              },
-            });
-          }
-          return child;
-        })}
+      {!separated && (
+        <div className="flex h-[32px] w-full">
+          {Children.map(children, (child, index) => {
+            if (React.isValidElement(child)) {
+              return cloneElement(child, {
+                key: index,
+                className: classnames(
+                  'rounded-[4px] px-2 py-1',
+                  index === activeIndex
+                    ? 'bg-customblue-40 text-white'
+                    : 'text-primary-active bg-black',
+                  child.props.className,
+                  disabled ? 'ohif-disabled' : ''
+                ),
+                onClick: e => {
+                  child.props.onClick && child.props.onClick(e);
+                  handleButtonClick(index);
+                },
+              });
+            }
+            return child;
+          })}
+        </div>
+      )}
       {separated && (
         <div className="flex space-x-2">
           {Children.map(children, (child, index) => {

platform/ui/src/components/Header/Header.tsx

@@ -65,8 +65,7 @@ function Header({
           <div className="flex items-center justify-center space-x-2">{children}</div>
         </div>
         <div className="absolute right-0 top-1/2 flex -translate-y-1/2 select-none items-center">
-          {(showPatientInfo === PatientInfoVisibility.VISIBLE ||
-            showPatientInfo === PatientInfoVisibility.VISIBLE_COLLAPSED) && (
+          {showPatientInfo !== PatientInfoVisibility.DISABLED && (
             <HeaderPatientInfo
               servicesManager={servicesManager}
               appConfig={appConfig}

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

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { Icon } from '@ohif/ui';
 import { utils } from '@ohif/core';
+import { PatientInfoVisibility } from '../../types';
 
 const { formatDate, formatPN } = utils;
 
@@ -70,7 +71,9 @@ function usePatientInfo(servicesManager) {
 }
 
 function HeaderPatientInfo({ servicesManager, appConfig }) {
-  const initialExpandedState = appConfig.showPatientInfo === 'visible';
+  const initialExpandedState =
+    appConfig.showPatientInfo === PatientInfoVisibility.VISIBLE ||
+    appConfig.showPatientInfo === PatientInfoVisibility.VISIBLE_READONLY;
   const [expanded, setExpanded] = useState(initialExpandedState);
   const { patientInfo, isMixedPatients } = usePatientInfo(servicesManager);
 
@@ -81,7 +84,7 @@ function HeaderPatientInfo({ servicesManager, appConfig }) {
   }, [isMixedPatients, expanded]);
 
   const handleOnClick = () => {
-    if (!isMixedPatients) {
+    if (!isMixedPatients && appConfig.showPatientInfo !== PatientInfoVisibility.VISIBLE_READONLY) {
       setExpanded(!expanded);
     }
   };

platform/ui/src/components/Icon/getIcon.js

@@ -145,11 +145,11 @@ import iconAdd from './../../assets/icons/icon-add.svg';
 import iconRename from './../../assets/icons/icon-rename.svg';
 import iconDelete from './../../assets/icons/icon-delete.svg';
 import iconMoreMenu from './../../assets/icons/icon-more-menu.svg';
-import iconToolBrush from './../../assets/icons/icon-tool-brush.svg';
-import iconToolEraser from './../../assets/icons/icon-tool-eraser.svg';
+import iconToolBrush from './../../assets/icons/tool-seg-brush.svg';
+import iconToolEraser from './../../assets/icons/tool-seg-eraser.svg';
 import iconToolScissor from './../../assets/icons/icon-tool-scissor.svg';
-import iconToolShape from './../../assets/icons/icon-tool-shape.svg';
-import iconToolThreshold from './../../assets/icons/icon-tool-threshold.svg';
+import iconToolShape from './../../assets/icons/tool-seg-shape.svg';
+import iconToolThreshold from './../../assets/icons/tool-seg-threshold.svg';
 import viewportWindowLevel from './../../assets/icons/viewport-window-level.svg';
 import dicomTagBrowser from './../../assets/icons/tool-dicom-tag-browser.svg';
 import iconToolFreehandRoi from './../../assets/icons/tool-freehand-roi.svg';

platform/ui/src/components/IconButton/IconButton.tsx

@@ -64,6 +64,7 @@ const iconSizeClasses = {
   medium: 'w-5 h-5',
   large: 'w-6 h-6',
   toolbar: 'w-[28px] h-[28px]',
+  toolbox: 'w-[24px] h-[24px]',
 };
 
 const fullWidthClasses = {
@@ -92,7 +93,7 @@ const IconButton = ({
     onClick(e);
   };
 
-  const padding = size === 'toolbar' ? '6px' : size === 'toolbox' ? '6px' : null;
+  const padding = size === 'toolbar' ? '6px' : size === 'toolbox' ? '4px' : null;
 
   return (
     <button

platform/ui/src/components/InputRange/InputRange.tsx

@@ -63,7 +63,7 @@ const InputRange: React.FC<InputRangeProps> = ({
 }) => {
   const [rangeValue, setRangeValue] = useState(value);
   const maxDigits = getMaxDigits(maxValue, step);
-  const labelWidth = `${maxDigits * 10}px`;
+  const labelWidth = `${maxDigits * 15}px`;
 
   useEffect(() => setRangeValue(value), [value]);
 
@@ -93,7 +93,7 @@ const InputRange: React.FC<InputRangeProps> = ({
     />
   ) : (
     <span className={classNames(labelClassName ?? 'text-white')}>
-      {rangeValue.toFixed(maxDigits)} {unit}
+      {rangeValue} {unit}
     </span>
   );
 

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 rounded-md pt-2 pb-2">
+    <div className="bg-secondary-dark flex flex-col gap-[4px] rounded-md p-2">
       {items.map((item, index) => {
         return (
           <ListItem

platform/ui/src/components/Notification/Notification.tsx

@@ -66,7 +66,7 @@ const Notification = ({ id, type, message, actions, onSubmit, onOutsideClick, on
   return (
     <div
       ref={notificationRef}
-      className="border-customblue-10 bg-customblue-400 mx-2 mt-2 flex flex-col rounded-md border-2 p-2"
+      className="border-customblue-10 bg-customblue-400 mx-2 mt-2 flex flex-col rounded-md border-2 p-2 outline-none"
       data-cy={id}
       onKeyDown={onKeyPress}
       tabIndex={0}

platform/ui/src/components/PanelSection/PanelSection.tsx

@@ -38,7 +38,11 @@ const PanelSection = ({ title, children, actionIcons = [], childrenClassName })
       {areChildrenVisible && (
         <>
           <div className="h-[2px] bg-black"></div>
-          <div className={`bg-primary-dark rounded-b-[4px] ${childrenClassName}`}>{children}</div>
+          <div
+            className={`bg-primary-dark flex flex-col overflow-hidden rounded-b-[4px] ${childrenClassName}`}
+          >
+            {children}
+          </div>
         </>
       )}
     </>

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

@@ -29,7 +29,7 @@ const SegmentItem = ({
   return (
     <div
       className={classnames('text-aqua-pale group/row bg-primary-dark flex min-h-[28px] flex-col', {
-        'bg-primary-light border-primary-light rounded-l-[4px] border text-black': isActive,
+        'bg-primary-light border-primary-light rounded-l-[6px] border text-black': isActive,
       })}
       onClick={e => {
         e.stopPropagation();
@@ -65,10 +65,6 @@ const SegmentItem = ({
             <div>{segmentIndex}</div>
           )}
         </div>
-        <div
-          className=" h-[30px] bg-black"
-          style={{ width: '3px' }}
-        ></div>
         <div
           className={classnames('text-aqua-pale relative flex w-full', {
             'border border-l-0 border-transparent': !isActive,

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

@@ -74,7 +74,7 @@ const SegmentationGroupTable = ({
   const { t } = useTranslation('SegmentationTable');
 
   return (
-    <div className="flex min-h-0 flex-col bg-black text-[13px] font-[300]">
+    <div className="flex min-h-0 flex-1 flex-col bg-black text-[13px] font-[300]">
       <PanelSection
         title={t('Segmentation')}
         actionIcons={
@@ -98,7 +98,7 @@ const SegmentationGroupTable = ({
             segmentationConfig={segmentationConfig}
           />
         )}
-        <div className="bg-primary-dark">
+        <div className="bg-primary-dark ">
           {segmentations?.length === 0 ? (
             <div className="select-none bg-black pt-[5px] pb-[5px]">
               {showAddSegmentation && !disableEditing && (
@@ -127,7 +127,7 @@ const SegmentationGroupTable = ({
           )}
         </div>
         {activeSegmentation && (
-          <div className="ohif-scrollbar flex h-fit max-h-[500px] min-h-0 flex-col overflow-auto bg-black">
+          <div className="ohif-scrollbar flex h-fit min-h-0 flex-1 flex-col overflow-auto bg-black">
             {activeSegmentation?.segments?.map(segment => {
               if (!segment) {
                 return null;

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-col bg-black text-[13px] font-[300]">
+    <div className="flex min-h-0 flex-1 flex-col bg-black text-[13px] font-[300]">
       <PanelSection
         title={t('Segmentation')}
         actionIcons={
@@ -91,14 +91,14 @@ const SegmentationGroupTableExpanded = ({
             segmentationConfig={segmentationConfig}
           />
         )}
-        <div className="bg-primary-dark">
+        <div className="bg-primary-dark flex flex-1 flex-col overflow-hidden">
           <div className="select-none bg-black pt-[5px] pb-[5px]">
             {showAddSegmentation && !disableEditing && (
               <NoSegmentationRow onSegmentationAdd={onSegmentationAdd} />
             )}
           </div>
           {segmentations?.length > 0 && (
-            <div className="ohif-scrollbar flex max-h-[500px] select-none flex-col gap-[5px] overflow-auto bg-black">
+            <div className="ohif-scrollbar flex flex-1 select-none flex-col gap-[5px] overflow-auto bg-black">
               {segmentations?.map(segmentation => {
                 return (
                   <div key={segmentation.id}>

platform/ui/src/components/SidePanel/SidePanel.tsx

@@ -354,7 +354,7 @@ const SidePanel = ({
     return (
       <div
         className={classnames(
-          'text-primary-active flex grow cursor-pointer justify-center self-center text-[13px]'
+          'text-primary-active flex	 grow cursor-pointer select-none justify-center self-center text-[13px]'
         )}
         style={{
           ...(side === 'left'
@@ -371,7 +371,7 @@ const SidePanel = ({
 
   const getOpenStateComponent = () => {
     return (
-      <div className="bg-primary-dark flex rounded-t pt-1.5 pb-[2px]">
+      <div className="bg-primary-dark flex select-none rounded-t pt-1.5 pb-[2px]	">
         {getCloseIcon()}
         {tabs.length === 1 ? getOneTabComponent() : getTabGridComponent()}
       </div>
@@ -386,14 +386,12 @@ const SidePanel = ({
       {panelOpen ? (
         <>
           {getOpenStateComponent()}
-          {tabs.map((tab, tabIndex) => (
-            <div
-              key={tab.id}
-              className={tabIndex === activeTabIndex ? '' : 'hidden'}
-            >
-              <tab.content />
-            </div>
-          ))}
+          {tabs.map((tab, tabIndex) => {
+            if (tabIndex === activeTabIndex) {
+              return <tab.content key={tabIndex} />;
+            }
+            return null;
+          })}
         </>
       ) : (
         <React.Fragment>{getCloseStateComponent()}</React.Fragment>

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

@@ -63,7 +63,7 @@ const DefaultListItemRenderer = props => {
   return (
     <div
       className={classNames(
-        'flex h-8 w-full flex-row items-center p-3',
+        'flex h-8 w-full select-none flex-row items-center p-3',
         'whitespace-pre text-base',
         className,
         `${isActive ? 'hover:opacity-80' : 'hover:bg-primary-dark '}`

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

@@ -41,7 +41,7 @@ const StudyItem = ({
           </div>
         </div>
         <div className="flex flex-row py-1">
-          <div className="pr-5 text-xl text-blue-300">{modalities}</div>
+          <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>
       </div>
@@ -59,7 +59,7 @@ const StudyItem = ({
               name="tracked"
               className="text-primary-light mr-2 w-4"
             />
-            {t('Tracked series', {trackedSeries: trackedSeries})}
+            {t('Tracked series', { trackedSeries: trackedSeries })}
           </div>
         </div>
       )}

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

@@ -32,7 +32,7 @@ const ToolbarButton = ({
       ? toolTipClassName
       : sizeToUse === 'toolbar'
         ? 'w-[40px] h-[40px]'
-        : 'w-[40px] h-[40px]';
+        : 'w-[32px] h-[32px]';
 
   return (
     <div key={id}>