From c227c5742a81808afabe79407c84429f8b60496c Mon Sep 17 00:00:00 2001
From: Dan Rukas <dan.rukas@gmail.com>
Date: Mon, 17 Mar 2025 22:57:19 -0400
Subject: [PATCH] ui(panels): PetSUV updates for ui-next and responsive layout
 (#4864)

---
 extensions/tmtv/src/Panels/PanelPetSUV.tsx | 214 ++++++++++++---------
 1 file changed, 120 insertions(+), 94 deletions(-)

diff --git a/extensions/tmtv/src/Panels/PanelPetSUV.tsx b/extensions/tmtv/src/Panels/PanelPetSUV.tsx
index 259a4c7fe..21814cff4 100644
--- a/extensions/tmtv/src/Panels/PanelPetSUV.tsx
+++ b/extensions/tmtv/src/Panels/PanelPetSUV.tsx
@@ -1,9 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { PanelSection, Input, Button } from '@ohif/ui';
 import { DicomMetadataStore } from '@ohif/core';
 import { useTranslation } from 'react-i18next';
-import { Separator } from '@ohif/ui-next';
+import { Button, Input, Label, PanelSection, Separator } from '@ohif/ui-next';
 
 const DEFAULT_MEATADATA = {
   PatientWeight: null,
@@ -23,6 +22,38 @@ const DEFAULT_MEATADATA = {
  * @param param0
  * @returns
  */
+
+// InputRow compound component
+const InputRow = ({ children, className, ...props }) => {
+  return (
+    <div
+      className={`flex flex-row items-center space-x-4 ${className || ''}`}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+// InputRow sub-components
+InputRow.Label = ({ children, unit, className, ...props }) => (
+  <Label className={`min-w-32 flex-shrink-0 ${className || ''}`} {...props}>
+    {children}
+    {unit && <span className="text-muted-foreground"> {unit}</span>}
+  </Label>
+);
+
+InputRow.Input = ({ className, ...props }) => (
+  <Input
+    className={`h-7 flex-1 ${className || ''}`}
+    {...props}
+  />
+);
+
+// Set display names for better debugging
+InputRow.Label.displayName = 'InputRow.Label';
+InputRow.Input.displayName = 'InputRow.Input';
+
 export default function PanelPetSUV({ servicesManager, commandsManager }: withAppTypes) {
   const { t } = useTranslation('PanelSUV');
   const { displaySetService, toolGroupService, toolbarService, hangingProtocolService } =
@@ -128,103 +159,98 @@ export default function PanelPetSUV({ servicesManager, commandsManager }: withAp
   return (
     <>
       <div className="ohif-scrollbar flex min-h-0 flex-auto select-none flex-col justify-between overflow-auto">
-        <div className="flex min-h-0 flex-1 flex-col bg-black text-[13px] font-[300]">
-          <PanelSection title={t('Patient Information')}>
-            <div className="flex flex-col">
-              <div className="bg-primary-dark flex flex-col gap-4 p-2">
-                <Input
-                  containerClassName={'!flex-row !justify-between items-center'}
-                  label={t('Patient Sex')}
-                  labelClassName="text-[13px] font-inter text-white"
-                  className="!m-0 !h-[26px] !w-[117px]"
-                  value={metadata.PatientSex || ''}
-                  onChange={e => {
-                    handleMetadataChange({
-                      PatientSex: e.target.value,
-                    });
-                  }}
-                />
-                <Input
-                  containerClassName={'!flex-row !justify-between items-center'}
-                  label={t('Weight')}
-                  labelChildren={<span className="text-aqua-pale"> kg</span>}
-                  labelClassName="text-[13px] font-inter text-white"
-                  className="!m-0 !h-[26px] !w-[117px]"
-                  value={metadata.PatientWeight || ''}
-                  onChange={e => {
-                    handleMetadataChange({
-                      PatientWeight: e.target.value,
-                    });
-                  }}
-                  id="weight-input"
-                />
-                <Input
-                  containerClassName={'!flex-row !justify-between items-center'}
-                  label={t('Total Dose')}
-                  labelChildren={<span className="text-aqua-pale"> bq</span>}
-                  labelClassName="text-[13px] font-inter text-white"
-                  className="!m-0 !h-[26px] !w-[117px]"
-                  value={
-                    metadata.RadiopharmaceuticalInformationSequence.RadionuclideTotalDose || ''
-                  }
-                  onChange={e => {
-                    handleMetadataChange({
-                      RadiopharmaceuticalInformationSequence: {
-                        RadionuclideTotalDose: e.target.value,
-                      },
-                    });
-                  }}
-                />
-                <Input
-                  containerClassName={'!flex-row !justify-between items-center'}
-                  label={t('Half Life')}
-                  labelChildren={<span className="text-aqua-pale"> s</span>}
-                  labelClassName="text-[13px] font-inter text-white"
-                  className="!m-0 !h-[26px] !w-[117px]"
-                  value={metadata.RadiopharmaceuticalInformationSequence.RadionuclideHalfLife || ''}
-                  onChange={e => {
-                    handleMetadataChange({
-                      RadiopharmaceuticalInformationSequence: {
-                        RadionuclideHalfLife: e.target.value,
-                      },
-                    });
-                  }}
-                />
-                <Input
-                  containerClassName={'!flex-row !justify-between items-center'}
-                  label={t('Injection Time')}
-                  labelChildren={<span className="text-aqua-pale"> s</span>}
-                  labelClassName="text-[13px] font-inter text-white"
-                  className="!m-0 !h-[26px] !w-[117px]"
-                  value={
-                    metadata.RadiopharmaceuticalInformationSequence.RadiopharmaceuticalStartTime ||
-                    ''
-                  }
-                  onChange={e => {
-                    handleMetadataChange({
-                      RadiopharmaceuticalInformationSequence: {
-                        RadiopharmaceuticalStartTime: e.target.value,
-                      },
-                    });
-                  }}
-                />
-                <Input
-                  containerClassName={'!flex-row !justify-between items-center'}
-                  label={t('Acquisition Time')}
-                  labelChildren={<span className="text-aqua-pale"> s</span>}
-                  labelClassName="text-[13px] font-inter text-white"
-                  className="!m-0 !h-[26px] !w-[117px]"
-                  value={metadata.SeriesTime || ''}
-                  onChange={() => {}}
-                />
+        <div className="flex min-h-0 flex-1 flex-col bg-black text-base">
+          <PanelSection defaultOpen={true}>
+            <PanelSection.Header>{t('Patient Information')}</PanelSection.Header>
+            <PanelSection.Content>
+              <div className="bg-primary-dark flex flex-col gap-3 p-2">
+                <InputRow>
+                  <InputRow.Label>{t('Patient Sex')}</InputRow.Label>
+                  <InputRow.Input
+                    value={metadata.PatientSex || ''}
+                    onChange={e => {
+                      handleMetadataChange({
+                        PatientSex: e.target.value,
+                      });
+                    }}
+                  />
+                </InputRow>
+
+                <InputRow>
+                  <InputRow.Label unit="kg">{t('Weight')}</InputRow.Label>
+                  <InputRow.Input
+                    value={metadata.PatientWeight || ''}
+                    onChange={e => {
+                      handleMetadataChange({
+                        PatientWeight: e.target.value,
+                      });
+                    }}
+                    id="weight-input"
+                  />
+                </InputRow>
+
+                <InputRow>
+                  <InputRow.Label unit="bq">{t('Total Dose')}</InputRow.Label>
+                  <InputRow.Input
+                    value={metadata.RadiopharmaceuticalInformationSequence.RadionuclideTotalDose || ''}
+                    onChange={e => {
+                      handleMetadataChange({
+                        RadiopharmaceuticalInformationSequence: {
+                          RadionuclideTotalDose: e.target.value,
+                        },
+                      });
+                    }}
+                  />
+                </InputRow>
+
+                <InputRow>
+                  <InputRow.Label unit="s">{t('Half Life')}</InputRow.Label>
+                  <InputRow.Input
+                    value={metadata.RadiopharmaceuticalInformationSequence.RadionuclideHalfLife || ''}
+                    onChange={e => {
+                      handleMetadataChange({
+                        RadiopharmaceuticalInformationSequence: {
+                          RadionuclideHalfLife: e.target.value,
+                        },
+                      });
+                    }}
+                  />
+                </InputRow>
+
+                <InputRow>
+                  <InputRow.Label unit="s">{t('Injection Time')}</InputRow.Label>
+                  <InputRow.Input
+                    value={
+                      metadata.RadiopharmaceuticalInformationSequence.RadiopharmaceuticalStartTime || ''
+                    }
+                    onChange={e => {
+                      handleMetadataChange({
+                        RadiopharmaceuticalInformationSequence: {
+                          RadiopharmaceuticalStartTime: e.target.value,
+                        },
+                      });
+                    }}
+                  />
+                </InputRow>
+
+                <InputRow>
+                  <InputRow.Label unit="s">{t('Acquisition Time')}</InputRow.Label>
+                  <InputRow.Input
+                    value={metadata.SeriesTime || ''}
+                    onChange={() => {}}
+                  />
+                </InputRow>
+
                 <Button
-                  className="!h-[26px] !w-[115px] self-end !p-0"
+                  variant="default"
+                  size="sm"
+                  className="w-28 self-end"
                   onClick={updateMetadata}
                 >
                   Reload Data
                 </Button>
               </div>
-            </div>
+            </PanelSection.Content>
           </PanelSection>
         </div>
       </div>
@@ -243,4 +269,4 @@ PanelPetSUV.propTypes = {
       }).isRequired,
     }).isRequired,
   }).isRequired,
-};
+};
\ No newline at end of file