fix(ui): Enhance UI Components and Update CornerstoneJS Dependencies and resizable panels (#4938)

Co-authored-by: Joe Boccanfuso <joe.boccanfuso@radicalimaging.com>

extensions/default/src/Actions/createReportAsync.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { DicomMetadataStore } from '@ohif/core';
 
 /**

extensions/default/src/DicomTagBrowser/DicomTagBrowser.tsx

@@ -153,7 +153,7 @@ const DicomTagBrowser = ({
             </Select>
           </div>
           {shouldShowInstanceList && (
-            <div className="mx-auto flex w-1/5 flex-col">
+            <div className="mx-auto mt-0.5 flex w-1/4 flex-col">
               <span className="text-muted-foreground flex h-6 items-center text-xs">
                 Instance Number ({instanceNumber} of {activeDisplaySet?.images?.length})
               </span>
@@ -169,7 +169,7 @@ const DicomTagBrowser = ({
               />
             </div>
           )}
-          <div className="ml-auto flex w-1/3 flex-col">
+          <div className="ml-auto mr-1 flex w-1/3 flex-col">
             <span className="text-muted-foreground flex h-6 items-center text-xs">
               Search metadata
             </span>

extensions/default/src/ViewerLayout/ResizablePanelsHook.tsx

@@ -28,7 +28,9 @@ const useResizablePanels = (
   leftPanelClosed,
   setLeftPanelClosed,
   rightPanelClosed,
-  setRightPanelClosed
+  setRightPanelClosed,
+  hasLeftPanels,
+  hasRightPanels
 ) => {
   const [leftPanelExpandedWidth, setLeftPanelExpandedWidth] = useState(
     panelGroupDefinition.left.initialExpandedWidth
@@ -156,6 +158,8 @@ const useResizablePanels = (
     rightPanelExpandedWidth,
     leftResizablePanelMinimumSize,
     rightResizablePanelMinimumSize,
+    hasLeftPanels,
+    hasRightPanels,
   ]);
 
   /**

extensions/default/src/ViewerLayout/index.tsx

@@ -52,7 +52,9 @@ function ViewerLayout({
     leftPanelClosed,
     setLeftPanelClosed,
     rightPanelClosed,
-    setRightPanelClosed
+    setRightPanelClosed,
+    hasLeftPanels,
+    hasRightPanels
   );
 
   const handleMouseEnter = () => {

extensions/default/src/customizations/reportDialogCustomization.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { InputDialog } from '@ohif/ui-next';
+import { InputDialog, cn } from '@ohif/ui-next';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@ohif/ui-next';
 import { useSystem } from '@ohif/core';
 
@@ -71,69 +71,93 @@ function ReportDialog({ dataSources, hide, onSave, onCancel }: ReportDialogProps
   const showDataSourceSelect = dataSources?.length > 1;
 
   return (
-    <div className="text-foreground mt-2 flex min-w-[400px] max-w-md flex-col gap-4">
-      <div className="flex flex-col gap-3">
+    <div className="text-foreground flex min-w-[400px] max-w-md flex-col">
+      <div className="flex flex-col gap-4">
         <div className="flex gap-4">
           {showDataSourceSelect && (
-            <div className="mt-1 w-1/2">
-              <div className="mb-1 pl-1 text-base">Data source</div>
+            <>
+              <div className="mt-1 w-1/2">
+                <div className="mb-1 pl-1 text-base">Data source</div>
+                <Select
+                  value={selectedDataSource}
+                  onValueChange={setSelectedDataSource}
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select a data source" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {dataSources.map(source => (
+                      <SelectItem
+                        key={source.value}
+                        value={source.value}
+                      >
+                        {source.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className={showDataSourceSelect ? 'mt-1 w-1/2' : 'mt-1 w-full'}>
+                <div className="mb-1 pl-1 text-base">Series</div>
+                <Select
+                  value={selectedSeries}
+                  onValueChange={setSelectedSeries}
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select a series" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {seriesOptions.map(series => (
+                      <SelectItem
+                        key={series.value}
+                        value={series.value}
+                      >
+                        {series.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            </>
+          )}
+        </div>
+        <div className="flex items-end gap-4">
+          {!showDataSourceSelect && (
+            <div className="w-1/3">
+              <div className="mb-1 pl-1 text-base">Series</div>
               <Select
-                value={selectedDataSource}
-                onValueChange={setSelectedDataSource}
+                value={selectedSeries}
+                onValueChange={setSelectedSeries}
               >
                 <SelectTrigger>
-                  <SelectValue placeholder="Select a data source" />
+                  <SelectValue placeholder="Select a series" />
                 </SelectTrigger>
                 <SelectContent>
-                  {dataSources.map(source => (
+                  {seriesOptions.map(series => (
                     <SelectItem
-                      key={source.value}
-                      value={source.value}
+                      key={series.value}
+                      value={series.value}
                     >
-                      {source.label}
+                      {series.label}
                     </SelectItem>
                   ))}
                 </SelectContent>
               </Select>
             </div>
           )}
-          <div className={showDataSourceSelect ? 'mt-1 w-1/2' : 'mt-1 w-full'}>
-            <div className="mb-1 pl-1 text-base">Series</div>
-            <Select
-              value={selectedSeries}
-              onValueChange={setSelectedSeries}
-            >
-              <SelectTrigger>
-                <SelectValue placeholder="Select a series" />
-              </SelectTrigger>
-              <SelectContent>
-                {seriesOptions.map(series => (
-                  <SelectItem
-                    key={series.value}
-                    value={series.value}
-                  >
-                    {series.label}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
-        </div>
-        <div className={showDataSourceSelect ? 'flex gap-4' : ''}>
-          <div className="mt-4 w-full">
-            <InputDialog
-              value={reportName}
-              onChange={setReportName}
-              submitOnEnter
-            >
-              <InputDialog.Field>
-                <InputDialog.Input
-                  placeholder="Report name"
-                  disabled={!!selectedSeries}
-                />
-              </InputDialog.Field>
-            </InputDialog>
-          </div>
+          <InputDialog
+            value={reportName}
+            onChange={setReportName}
+            submitOnEnter
+            className="flex-1"
+          >
+            <InputDialog.Field className="mb-0">
+              <InputDialog.Input
+                placeholder="Report name"
+                disabled={!!selectedSeries}
+              />
+            </InputDialog.Field>
+          </InputDialog>
         </div>
 
         <div className="flex justify-end gap-2">