fix(viewport): Reset viewport state and fix CINE looping, thumbnail resolution, and dynamic tool settings (#4037)

platform/ui/src/components/LayoutPreset/LayoutPreset.tsx

@@ -1,11 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import Icon from '../Icon/Icon';
 
-function LayoutPreset({ onSelection, title, icon, commandOptions, classNames }) {
+function LayoutPreset({
+  onSelection,
+  title,
+  icon,
+  commandOptions,
+  classNames: classNameProps,
+  disabled,
+}) {
   return (
     <div
-      className={classNames}
+      className={classNames(classNameProps, disabled && 'ohif-disabled')}
       onClick={() => {
         onSelection(commandOptions);
       }}
@@ -29,6 +37,7 @@ LayoutPreset.propTypes = {
   icon: PropTypes.string.isRequired,
   commandOptions: PropTypes.object.isRequired,
   classNames: PropTypes.string,
+  disabled: PropTypes.bool,
 };
 
 export default LayoutPreset;

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

@@ -7,7 +7,7 @@ function AddSegmentRow({ onClick, onToggleSegmentationVisibility = null, segment
   return (
     <div className="flex justify-between bg-black pl-[34px] hover:cursor-pointer">
       <div
-        className="group pt-[5px] pb-[5px]"
+        className="group py-[5px] pb-[5px]"
         onClick={onClick}
       >
         <div className="text-primary-active group-hover:bg-secondary-dark flex items-center rounded-[4px] pr-2">

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

@@ -2,11 +2,11 @@ import React from 'react';
 import Icon from '../Icon';
 import { useTranslation } from 'react-i18next';
 
-function NoSegmentationRow({ onSegmentationAdd }) {
+function NoSegmentationRow({ onSegmentationAdd, addSegmentationClassName }) {
   const { t } = useTranslation('SegmentationTable');
   return (
     <div
-      className="group"
+      className={`group ${addSegmentationClassName}`}
       onClick={onSegmentationAdd}
     >
       <div className="text-primary-active group-hover:bg-secondary-dark flex items-center rounded-[4px] group-hover:cursor-pointer">

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

@@ -15,6 +15,7 @@ function SegmentationDropDownRow({
   storeSegmentation,
   onSegmentationDelete,
   onSegmentationAdd,
+  addSegmentationClassName,
 }) {
   const handleChange = option => {
     onActiveSegmentationChange(option.value); // Notify the parent
@@ -41,7 +42,7 @@ function SegmentationDropDownRow({
           id="segmentation-dropdown"
           showDropdownIcon={false}
           alignment="left"
-          itemsClassName="text-primary-active"
+          itemsClassName={`text-primary-active ${addSegmentationClassName}`}
           showBorders={false}
           maxCharactersPerLine={30}
           list={[

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

@@ -42,6 +42,7 @@ const SegmentationGroupTable = ({
   setRenderFill,
   setRenderInactiveSegmentations,
   setRenderOutline,
+  addSegmentationClassName,
 }) => {
   const [isConfigOpen, setIsConfigOpen] = useState(false);
   const [activeSegmentationId, setActiveSegmentationId] = useState(null);
@@ -100,9 +101,12 @@ const SegmentationGroupTable = ({
         )}
         <div className="bg-primary-dark ">
           {segmentations?.length === 0 ? (
-            <div className="select-none bg-black pt-[5px] pb-[5px]">
+            <div className="select-none bg-black py-[3px]">
               {showAddSegmentation && !disableEditing && (
-                <NoSegmentationRow onSegmentationAdd={onSegmentationAdd} />
+                <NoSegmentationRow
+                  onSegmentationAdd={onSegmentationAdd}
+                  addSegmentationClassName={addSegmentationClassName}
+                />
               )}
             </div>
           ) : (
@@ -118,6 +122,7 @@ const SegmentationGroupTable = ({
                 onSegmentationDownloadRTSS={onSegmentationDownloadRTSS}
                 storeSegmentation={storeSegmentation}
                 onSegmentationAdd={onSegmentationAdd}
+                addSegmentationClassName={addSegmentationClassName}
                 onToggleSegmentationVisibility={onToggleSegmentationVisibility}
               />
               {!disableEditing && showAddSegment && (

platform/ui/src/components/Thumbnail/Thumbnail.tsx

@@ -51,7 +51,7 @@ const Thumbnail = ({
       <div ref={drag}>
         <div
           className={classnames(
-            'min-h-32 flex flex-1 items-center justify-center overflow-hidden rounded-md bg-black text-base text-white',
+            'flex h-32 flex-1 items-center justify-center overflow-hidden rounded-md bg-black text-base text-white',
             isActive
               ? 'border-primary-light border-2'
               : 'border-secondary-light border hover:border-blue-300'
@@ -64,7 +64,7 @@ const Thumbnail = ({
             <img
               src={imageSrc}
               alt={imageAltText}
-              className="min-h-32 object-contain"
+              className="h-full w-full object-contain"
               crossOrigin="anonymous"
             />
           ) : (

platform/ui/src/components/ThumbnailList/ThumbnailList.tsx

@@ -16,7 +16,7 @@ const ThumbnailList = ({
   return (
     <div
       id="ohif-thumbnail-list"
-      className="ohif-scrollbar study-min-height overflow-y-hidden bg-black py-3"
+      className="ohif-scrollbar study-min-height overflow-y-hidden bg-black py-5"
     >
       {thumbnails.map(
         ({

platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.tsx

@@ -32,10 +32,7 @@ function ThumbnailTracked({
 
   return (
     <div
-      className={classnames(
-        'flex flex-1 cursor-pointer flex-row px-3 py-2 outline-none',
-        className
-      )}
+      className={classnames('flex flex-1 cursor-pointer flex-row px-3 outline-none', className)}
       id={`thumbnail-${displaySetInstanceUID}`}
     >
       <div className="flex-2 flex flex-col items-center">

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

@@ -65,6 +65,7 @@ function Toolbox({ servicesManager, buttonSectionId, commandsManager, title, ...
                 cmds.forEach(command => {
                   const isString = typeof command === 'string';
                   const isObject = typeof command === 'object';
+                  const isFunction = typeof command === 'function';
 
                   if (isString) {
                     commandsManager.run(command, { value });
@@ -73,6 +74,8 @@ function Toolbox({ servicesManager, buttonSectionId, commandsManager, title, ...
                       ...command,
                       commandOptions: { ...command.commandOptions, ...option, value },
                     });
+                  } else if (isFunction) {
+                    command({ value, commandsManager, servicesManager });
                   }
                 });
               },