chore(prettier): full repo linting and code reformatting once and for all (#3627)

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

@@ -15,9 +15,9 @@ const ActiveSegmentationConfig = ({
   setFillAlpha,
 }) => {
   return (
-    <div className="flex justify-between text-[12px] pt-[13px] px-2">
+    <div className="flex justify-between px-2 pt-[13px] text-[12px]">
       <div className="flex flex-col items-start">
-        <div className="text-white mb-[12px]">Active</div>
+        <div className="mb-[12px] text-white">Active</div>
         <CheckBox
           label="Outline"
           checked={config.renderOutline}
@@ -34,8 +34,8 @@ const ActiveSegmentationConfig = ({
         />
       </div>
 
-      <div className="flex flex-col items-center col-span-2">
-        <div className="text-[#b3b3b3] text-[10px] mb-[12px]">Opacity</div>
+      <div className="col-span-2 flex flex-col items-center">
+        <div className="mb-[12px] text-[10px] text-[#b3b3b3]">Opacity</div>
         <InputRange
           minValue={0}
           maxValue={100}
@@ -61,7 +61,7 @@ const ActiveSegmentationConfig = ({
       </div>
 
       <div className="flex flex-col items-center">
-        <div className="text-[#b3b3b3] text-[10px] mb-[12px]">Size</div>
+        <div className="mb-[12px] text-[10px] text-[#b3b3b3]">Size</div>
         <InputNumber
           value={config.outlineWidthActive}
           onChange={setOutlineWidthActive}
@@ -89,7 +89,7 @@ const InactiveSegmentationConfig = ({
         onChange={setRenderInactiveSegmentations}
       />
 
-      <div className="flex pl-4 items-center space-x-2">
+      <div className="flex items-center space-x-2 pl-4">
         <span className="text-[10px] text-[#b3b3b3]">Opacity</span>
         <InputRange
           minValue={0}
@@ -130,16 +130,11 @@ const SegmentationConfig = ({
       >
         <Icon
           name="panel-group-open-close"
-          className={classNames(
-            'w-5 h-5 text-white transition duration-300 cursor-pointer',
-            {
-              'transform rotate-90': !isMinimized,
-            }
-          )}
+          className={classNames('h-5 w-5 cursor-pointer text-white transition duration-300', {
+            'rotate-90 transform': !isMinimized,
+          })}
         />
-        <span className="text-[#d8d8d8] text-[12px] font-[300]">
-          {'Segmentation Appearance'}
-        </span>
+        <span className="text-[12px] font-[300] text-[#d8d8d8]">{'Segmentation Appearance'}</span>
       </div>
       {/* active segmentation */}
       {!isMinimized && (
@@ -153,13 +148,13 @@ const SegmentationConfig = ({
             setRenderOutline={setRenderOutline}
           />
           {/* A small line  */}
-          <div className="h-[1px] bg-[#212456] mb-[8px] mx-1"></div>
+          <div className="mx-1 mb-[8px] h-[1px] bg-[#212456]"></div>
           {/* inactive segmentation */}
           <div
             onClick={() => setIsMinimized(!isMinimized)}
-            className="flex items-center cursor-pointer pl-2 pb-[9px]"
+            className="flex cursor-pointer items-center pl-2 pb-[9px]"
           >
-            <span className="text-[#d8d8d8] text-[12px] font-[300]">
+            <span className="text-[12px] font-[300] text-[#d8d8d8]">
               {'Inactive Segmentations'}
             </span>
           </div>

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

@@ -17,10 +17,16 @@ const AddNewSegmentRow = ({
 }) => {
   return (
     <div>
-      <div className="flex items-center pl-[29px] bg-black text-primary-active hover:opacity-80 cursor-pointer text-[12px] py-1">
+      <div className="text-primary-active flex cursor-pointer items-center bg-black py-1 pl-[29px] text-[12px] hover:opacity-80">
         {showAddSegment && !disableEditing && (
-          <div className="flex items-center" onClick={() => onSegmentAdd()}>
-            <Icon name="row-add" className="w-5 h-5" />
+          <div
+            className="flex items-center"
+            onClick={() => onSegmentAdd()}
+          >
+            <Icon
+              name="row-add"
+              className="h-5 w-5"
+            />
             <div className="">Add Segment</div>
           </div>
         )}
@@ -32,9 +38,15 @@ const AddNewSegmentRow = ({
           }}
         >
           {isVisible ? (
-            <Icon name="row-show-all" className="w-5 h-5" />
+            <Icon
+              name="row-show-all"
+              className="h-5 w-5"
+            />
           ) : (
-            <Icon name="row-hide-all" className="w-5 h-5" />
+            <Icon
+              name="row-hide-all"
+              className="h-5 w-5"
+            />
           )}
         </div>
       </div>
@@ -60,7 +72,7 @@ const SegmentGroupHeader = ({
   return (
     <div
       className={classnames(
-        'flex flex-static items-center pr-2 pl-[3px] h-[27px] gap-2 rounded-t-md border-b border-secondary-light cursor-pointer text-[12px]',
+        'flex-static border-secondary-light flex h-[27px] cursor-pointer items-center gap-2 rounded-t-md border-b pr-2 pl-[3px] text-[12px]',
         {
           'bg-secondary-main': isActive,
           'bg-secondary-dark': !isActive,
@@ -77,14 +89,11 @@ const SegmentGroupHeader = ({
           evt.stopPropagation();
           onToggleMinimizeSegmentation(id);
         }}
-        className={classnames(
-          'w-5 h-5 text-white transition duration-300 cursor-pointer',
-          {
-            'transform rotate-90': !isMinimized,
-          }
-        )}
+        className={classnames('h-5 w-5 cursor-pointer text-white transition duration-300', {
+          'rotate-90 transform': !isMinimized,
+        })}
       />
-      <span className="text-white w-full whitespace-nowrap text-ellipsis overflow-hidden">
+      <span className="w-full overflow-hidden text-ellipsis whitespace-nowrap text-white">
         {label.toUpperCase()}
       </span>
       <div className="flex-grow" />
@@ -156,7 +165,7 @@ const SegmentationGroup = ({
   onSegmentEdit,
 }) => {
   return (
-    <div className="flex flex-col flex-auto min-h-0">
+    <div className="flex min-h-0 flex-auto flex-col">
       <SegmentGroupHeader
         id={id}
         label={label}
@@ -170,7 +179,7 @@ const SegmentationGroup = ({
         disableEditing={disableEditing}
       />
       {!isMinimized && (
-        <div className="flex flex-col flex-auto min-h-0">
+        <div className="flex min-h-0 flex-auto flex-col">
           <AddNewSegmentRow
             onConfigChange={onSegmentationConfigChange}
             onSegmentAdd={onSegmentAdd}
@@ -180,22 +189,19 @@ const SegmentationGroup = ({
             disableEditing={disableEditing}
             showAddSegment={showAddSegment}
           />
-          <div className="flex flex-col min-h-0 ohif-scrollbar overflow-y-hidden">
+          <div className="ohif-scrollbar flex min-h-0 flex-col overflow-y-hidden">
             {!!segments.length &&
               segments.map(segment => {
                 if (segment === undefined || segment === null) {
                   return null;
                 }
 
-                const {
-                  segmentIndex,
-                  color,
-                  label,
-                  isVisible,
-                  isLocked,
-                } = segment;
+                const { segmentIndex, color, label, isVisible, isLocked } = segment;
                 return (
-                  <div className="mb-[1px]" key={segmentIndex}>
+                  <div
+                    className="mb-[1px]"
+                    key={segmentIndex}
+                  >
                     <SegmentationGroupSegment
                       segmentationId={id}
                       segmentIndex={segmentIndex}

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

@@ -32,7 +32,7 @@ const SegmentItem = ({
   return (
     <div
       className={classnames(
-        'group relative flex cursor-pointer bg-primary-dark transition duration-300 text-[12px] overflow-hidden border',
+        'bg-primary-dark group relative flex cursor-pointer overflow-hidden border text-[12px] transition duration-300',
         {
           'border-primary-light rounded-[3px]': isActive,
         },
@@ -52,14 +52,12 @@ const SegmentItem = ({
     >
       <div
         className={classnames(
-          'w-[27px] flex items-center justify-center border-r border-r-black text-[12px]',
+          'flex w-[27px] items-center justify-center border-r border-r-black text-[12px]',
           {
-            'bg-primary-light text-black border-l border-l-primary-light rounded-l-sm': isActive,
-            'bg-[#1d3c58]  border-l border-l-[#1d3c58] rounded-l-sm':
-              !isActive && isHovering,
-            'bg-primary-dark text-aqua-pale':
-              !isActive && !isHovering && isVisible,
-            'bg-[#140e2e] opacity-60 text-[#537594]': !isActive && !isVisible,
+            'bg-primary-light border-l-primary-light rounded-l-sm border-l text-black': isActive,
+            'rounded-l-sm  border-l border-l-[#1d3c58] bg-[#1d3c58]': !isActive && isHovering,
+            'bg-primary-dark text-aqua-pale': !isActive && !isHovering && isVisible,
+            'bg-[#140e2e] text-[#537594] opacity-60': !isActive && !isVisible,
           }
         )}
         onMouseEnter={() => setIsSegmentIndexHovering(true)}
@@ -75,24 +73,22 @@ const SegmentItem = ({
             }}
           />
         ) : (
-          <div className={classnames('flex items-center pr-2 ')}>
-            {segmentIndex}
-          </div>
+          <div className={classnames('flex items-center pr-2 ')}>{segmentIndex}</div>
         )}
       </div>
       <div
         className={classnames(
-          'flex items-center justify-between w-full pl-2 py-1 text-white border-r border-r-black relative ',
+          'relative flex w-full items-center justify-between border-r border-r-black py-1 pl-2 text-white ',
           {
             'bg-primary-dark text-primary-light': isActive,
             'bg-primary-dark text-aqua-pale': !isActive && isVisible,
-            'bg-[#140e2e] opacity-60 text-[#3d5871]': !isVisible,
+            'bg-[#140e2e] text-[#3d5871] opacity-60': !isVisible,
           }
         )}
       >
         <div className={classnames('flex items-baseline gap-2')}>
           <div
-            className={classnames('shrink-0 w-[8px] h-[8px] rounded-full')}
+            className={classnames('h-[8px] w-[8px] shrink-0 rounded-full')}
             style={{ backgroundColor: cssColor }}
             onClick={e => {
               e.stopPropagation();
@@ -102,12 +98,12 @@ const SegmentItem = ({
           <div className="">{label}</div>
         </div>
         {/* with faded background */}
-        <div className="absolute right-0 bg-black/15 rounded-lg pr-[7px]">
+        <div className="bg-black/15 absolute right-0 rounded-lg pr-[7px]">
           {!isVisible && !isHovering && (
             <div>
               <Icon
                 name="row-hidden"
-                className={classnames('w-5 h-5 text-[#3d5871] ')}
+                className={classnames('h-5 w-5 text-[#3d5871] ')}
                 onClick={e => {
                   e.stopPropagation();
                   onToggleVisibility(segmentationId, segmentIndex);
@@ -120,7 +116,7 @@ const SegmentItem = ({
               {!disableEditing && (
                 <Icon
                   name="row-edit"
-                  className={classnames('w-5 h-5', {
+                  className={classnames('h-5 w-5', {
                     'text-white': isLocked,
                     'text-primary-light': !isLocked,
                   })}
@@ -133,7 +129,7 @@ const SegmentItem = ({
               {isVisible ? (
                 <Icon
                   name="row-hide"
-                  className={classnames('w-5 h-5', {
+                  className={classnames('h-5 w-5', {
                     'text-white': isLocked,
                     'text-primary-light': !isLocked,
                   })}
@@ -145,7 +141,7 @@ const SegmentItem = ({
               ) : (
                 <Icon
                   name="row-unhide"
-                  className={classnames('w-5 h-5', {
+                  className={classnames('h-5 w-5', {
                     'text-white': isLocked,
                     'text-primary-light': !isLocked,
                   })}

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

@@ -32,7 +32,7 @@ const SegmentationGroupTable = ({
   setRenderOutline,
 }) => {
   return (
-    <div className="flex flex-col min-h-0 font-inter font-[300]">
+    <div className="font-inter flex min-h-0 flex-col font-[300]">
       <SegmentationConfig
         setFillAlpha={setFillAlpha}
         setFillAlphaInactive={setFillAlphaInactive}
@@ -43,7 +43,7 @@ const SegmentationGroupTable = ({
         setRenderOutline={setRenderOutline}
         segmentationConfig={segmentationConfig}
       />
-      <div className="flex flex-col min-h-0 pr-[1px] mt-1">
+      <div className="mt-1 flex min-h-0 flex-col pr-[1px]">
         {!!segmentations.length &&
           segmentations.map((segmentation, index) => {
             const {
@@ -86,10 +86,13 @@ const SegmentationGroupTable = ({
       </div>
       {showAddSegmentation && !disableEditing && (
         <div
-          className="flex items-center cursor-pointer hover:opacity-80 text-primary-active bg-black text-[12px] pl-1 h-[45px]"
+          className="text-primary-active flex h-[45px] cursor-pointer items-center bg-black pl-1 text-[12px] hover:opacity-80"
           onClick={() => onSegmentationAdd()}
         >
-          <Icon name="row-add" className="w-5 h-5" />
+          <Icon
+            name="row-add"
+            className="h-5 w-5"
+          />
           <div className="pl-1">Add New Segmentation</div>
         </div>
       )}

platform/ui/src/components/SegmentationGroupTable/__stories__/segmentationGroupTable.stories.mdx

@@ -14,7 +14,7 @@ export const argTypes = {
 />
 
 export const SegmentationGroupTableTemplate = args => (
-  <div className="w-64 h-96 bg-primary-dark">
+  <div className="bg-primary-dark h-96 w-64">
     <SegmentationGroupTable {...args} />
   </div>
 );
@@ -38,94 +38,78 @@ SegmentationGroupTable is a component that renders the SegmentationGroupTables.
     args={{
       activeSegmentationId: 'ed8d6f8d-4035-438d-9032-36d5912aaa3a',
       showAddSegmentation: true,
-      isMinimized: {"4be5-b9b2-ed33-fa86970568e7": false},
+      isMinimized: { '4be5-b9b2-ed33-fa86970568e7': false },
       showAddSegment: true,
-       segmentations: [
-  {
-    "id": "4be5-b9b2-ed33-fa86970568e7",
-    "volumeId": "a3b0f15f-4be5-b9b2-ed33-fa86970568e7",
-    "activeSegmentIndex": 1,
-    "cachedStats": {},
-    "label": "Segmentation",
-    "segmentsLocked": {},
-    "type": "LABELMAP",
-    "displayText": [],
-    "hydrated": true,
-    "segmentCount": 3,
-    "segments": [
-      null,
-      {
-        "label": "Segment 1",
-        "segmentIndex": 1,
-        "color": [
-          128,
-          174,
-          128
-        ],
-        "opacity": 255,
-        "isVisible": true,
-        "isLocked": false,
-      },
-      {
-        "label": "Segment 2",
-        "segmentIndex": 2,
-        "color": [
-          241,
-          214,
-          145
-        ],
-        "opacity": 255,
-        "isVisible": true,
-        "isLocked": false,
-      },
-      {
-        "label": "Segment 3",
-        "segmentIndex": 3,
-        "color": [
-          141,
-          114,
-          145
-        ],
-        "opacity": 255,
-        "isVisible": false,
-        "isLocked": false
-      }
-    ],
-    "isActive": false,
-    "colorLUTIndex": 1,
-    "isVisible": true
-  },
-  {
-    "id": "a3b0f15f-4be5-b9b2-ed33-fa86970568e7",
-    "volumeId": "a3b0f15f-4be5-b9b2-ed33-fa86970568e7",
-    "activeSegmentIndex": 1,
-    "cachedStats": {},
-    "label": "Segmentation2",
-    "segmentsLocked": {},
-    "type": "LABELMAP",
-    "displayText": [],
-    "hydrated": true,
-    "segmentCount": 2,
-    "segments": [
-      null,
-      {
-        "label": "Segment 1",
-        "segmentIndex": 1,
-        "color": [
-          228,
-          174,
-          128
-        ],
-        "opacity": 255,
-        "isVisible": true,
-        "isLocked": false,
-      },
-    ],
-    "isActive": true,
-    "colorLUTIndex": 1,
-    "isVisible": true
-  }
-]
+      segmentations: [
+        {
+          id: '4be5-b9b2-ed33-fa86970568e7',
+          volumeId: 'a3b0f15f-4be5-b9b2-ed33-fa86970568e7',
+          activeSegmentIndex: 1,
+          cachedStats: {},
+          label: 'Segmentation',
+          segmentsLocked: {},
+          type: 'LABELMAP',
+          displayText: [],
+          hydrated: true,
+          segmentCount: 3,
+          segments: [
+            null,
+            {
+              label: 'Segment 1',
+              segmentIndex: 1,
+              color: [128, 174, 128],
+              opacity: 255,
+              isVisible: true,
+              isLocked: false,
+            },
+            {
+              label: 'Segment 2',
+              segmentIndex: 2,
+              color: [241, 214, 145],
+              opacity: 255,
+              isVisible: true,
+              isLocked: false,
+            },
+            {
+              label: 'Segment 3',
+              segmentIndex: 3,
+              color: [141, 114, 145],
+              opacity: 255,
+              isVisible: false,
+              isLocked: false,
+            },
+          ],
+          isActive: false,
+          colorLUTIndex: 1,
+          isVisible: true,
+        },
+        {
+          id: 'a3b0f15f-4be5-b9b2-ed33-fa86970568e7',
+          volumeId: 'a3b0f15f-4be5-b9b2-ed33-fa86970568e7',
+          activeSegmentIndex: 1,
+          cachedStats: {},
+          label: 'Segmentation2',
+          segmentsLocked: {},
+          type: 'LABELMAP',
+          displayText: [],
+          hydrated: true,
+          segmentCount: 2,
+          segments: [
+            null,
+            {
+              label: 'Segment 1',
+              segmentIndex: 1,
+              color: [228, 174, 128],
+              opacity: 255,
+              isVisible: true,
+              isLocked: false,
+            },
+          ],
+          isActive: true,
+          colorLUTIndex: 1,
+          isVisible: true,
+        },
+      ],
     }}
   >
     {SegmentationGroupTableTemplate.bind({})}