fix(ui): Update dependencies and add missing icons (#4699)

OHIF · Jan 21, 2025 · cf97fa9 · cf97fa9
1 parent ad7ade2
commit cf97fa9
Show file tree

Hide file tree

Showing 16 changed files with 132 additions and 83 deletions.
diff --git a/addOns/externals/devDependencies/package.json b/addOns/externals/devDependencies/package.json
@@ -72,7 +72,7 @@
     "prettier-plugin-tailwindcss": "^0.5.4",
     "react-refresh": "^0.14.2",
     "semver": "^7.5.1",
-    "serve": "^14.2.0",
+    "serve": "^14.2.4",
     "shader-loader": "^1.3.1",
     "shx": "^0.3.3",
     "source-map-loader": "^4.0.1",

diff --git a/extensions/cornerstone-dynamic-volume/src/panels/PanelGenerateImage.tsx b/extensions/cornerstone-dynamic-volume/src/panels/PanelGenerateImage.tsx
@@ -218,10 +218,6 @@ export default function PanelGenerateImage({ servicesManager, commandsManager }:
     setTimePointsRangeToUseForGenerate(newValues);
   }
 
-  if (!dynamicVolume || timePointsRange.length === 0) {
-    return null;
-  }
-
   return (
     <DynamicVolumeControls
       fps={frameRate}

diff --git a/extensions/cornerstone/src/panels/PanelSegmentation.tsx b/extensions/cornerstone/src/panels/PanelSegmentation.tsx
@@ -243,6 +243,14 @@ export default function PanelSegmentation({
     const firstImageId = referencedImageIds[0];
 
     const instance = metaData.get('instance', firstImageId);
+
+    if (!instance) {
+      return {
+        segmentationId,
+        isExportable: false,
+      };
+    }
+
     const SOPInstanceUID = instance.SOPInstanceUID || instance.SopInstanceUID;
     const SeriesInstanceUID = instance.SeriesInstanceUID;
 

diff --git a/extensions/cornerstone/src/stores/usePositionPresentationStore.ts b/extensions/cornerstone/src/stores/usePositionPresentationStore.ts
@@ -4,7 +4,7 @@ import { PositionPresentation } from '../types/Presentation';
 import { addUniqueIndex, JOIN_STR } from './presentationUtils';
 
 const PRESENTATION_TYPE_ID = 'positionPresentationId';
-const DEBUG_STORE = true;
+const DEBUG_STORE = false;
 
 /**
  * Represents the state and actions for managing position presentations.

diff --git a/extensions/default/src/Panels/WrappedPanelStudyBrowser.tsx b/extensions/default/src/Panels/WrappedPanelStudyBrowser.tsx
@@ -13,7 +13,7 @@ import requestDisplaySetCreationForStudy from './requestDisplaySetCreationForStu
  * @param {object} commandsManager
  * @param {object} extensionManager
  */
-function WrappedPanelStudyBrowser({ extensionManager, servicesManager }) {
+function WrappedPanelStudyBrowser({ extensionManager, servicesManager, commandsManager }) {
   // TODO: This should be made available a different way; route should have
   // already determined our datasource
   const [dataSource] = extensionManager.getActiveDataSource();

diff --git a/extensions/default/src/stores/useViewportsByPositionStore.ts b/extensions/default/src/stores/useViewportsByPositionStore.ts
@@ -2,7 +2,7 @@ import { create } from 'zustand';
 import { devtools } from 'zustand/middleware';
 
 const PRESENTATION_TYPE_ID = 'viewportsByPositionId';
-const DEBUG_STORE = true;
+const DEBUG_STORE = false;
 
 /**
  * Represents the state and actions for managing viewports by position.

diff --git a/platform/docs/docs/platform/extensions/modules/hpModule.md b/platform/docs/docs/platform/extensions/modules/hpModule.md
@@ -505,7 +505,7 @@ running OHIF with two studies, and a comparison hanging protocol available by
 default.
 
 ```bash
-http://localhost:3000/viewer?StudyInstanceUIDs=1.3.6.1.4.1.25403.345050719074.3824.20170125095438.5&StudyInstanceUIDs=1.3.6.1.4.1.25403.345050719074.3824.20170125095722.1&hangingprotocolId=@ohif/hpCompare
+https://viewer-dev.ohif.org/viewer?StudyInstanceUIDs=1.3.6.1.4.1.25403.345050719074.3824.20170125095438.5&StudyInstanceUIDs=1.3.6.1.4.1.25403.345050719074.3824.20170125095258.1&hangingprotocolId=@ohif/hpCompare
 ```
 
 The `&hangingProtocolId` option forces the specific hanging protocol to be

diff --git a/platform/ui-next/src/components/Icons/Icons.tsx b/platform/ui-next/src/components/Icons/Icons.tsx
@@ -184,7 +184,8 @@ import LoadingOHIFMark from './Sources/LoadingOHIFMark';
 import ArrowLeftBold from './Sources/ArrowLeftBold';
 import Pencil from './Sources/Pencil';
 import NotificationWarning from './Sources/NotificationWarning';
-//
+import ArrowRight from './Sources/ArrowRight';
+import ChevronLeft from './Sources/ChevronLeft';
 //
 //
 type IconProps = React.HTMLAttributes<SVGElement>;
@@ -481,6 +482,23 @@ export const Icons = {
   ViewportViews,
   ChevronClosed,
   ChevronOpen,
+  ChevronRight: (props: IconProps) => {
+    return (
+      <ChevronLeft
+        {...props}
+        className={`${props.className || ''} rotate-180`.trim()}
+      />
+    );
+  },
+  ChevronLeft,
+  ChevronDown: (props: IconProps) => {
+    return (
+      <ChevronLeft
+        {...props}
+        className={`${props.className || ''} -rotate-90`.trim()}
+      />
+    );
+  },
   Alert,
   AlertOutline,
   NotificationInfo,
@@ -495,28 +513,21 @@ export const Icons = {
   Link,
   LoadingOHIFMark,
   ArrowLeft: ChevronClosed,
-  ArrowRight: (props: IconProps) => {
-    return (
-      <ChevronClosed
-        {...props}
-        className="rotate-180"
-      />
-    );
-  },
+  ArrowRight,
   ArrowLeftBold,
   ArrowRightBold: (props: IconProps) => {
     return (
       <ArrowLeftBold
         {...props}
-        className="rotate-180"
+        className={`${props.className || ''} rotate-180`.trim()}
       />
     );
   },
   ArrowDown: (props: IconProps) => {
     return (
       <ChevronOpen
         {...props}
-        className="rotate-180"
+        className={`${props.className || ''} -rotate-90`.trim()}
       />
     );
   },
@@ -675,6 +686,9 @@ export const Icons = {
   pencil: (props: IconProps) => Pencil(props),
   'icon-list-view': (props: IconProps) => ListView(props),
   'chevron-menu': 'chevron-down',
+  'icon-status-alert': (props: IconProps) => Alert(props),
+  'info-link': (props: IconProps) => InfoLink(props),
+  'launch-info': (props: IconProps) => LaunchInfo(props),
   clipboard: (props: IconProps) => Clipboard(props),
 
   /** Adds an icon to the set of icons */

diff --git a/platform/ui-next/src/components/Icons/Sources/ArrowRight.tsx b/platform/ui-next/src/components/Icons/Sources/ArrowRight.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import type { IconProps } from '../types';
+
+export const ArrowLeftBold = (props: IconProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <g fillRule="evenodd">
+      <path
+        fill="currentcolor"
+        fillRule="nonzero"
+        d="M17.207 10.793c.36.36.388.928.083 1.32l-.083.094-5 5c-.39.39-1.024.39-1.414 0-.36-.36-.388-.928-.083-1.32l.083-.094 4.292-4.293-4.292-4.293c-.36-.36-.388-.928-.083-1.32l.083-.094c.36-.36.928-.388 1.32-.083l.094.083 5 5z"
+      />
+      <path
+        fill="currentcolor"
+        fillRule="nonzero"
+        d="M17.5 11.5c0 .513-.386.936-.883.993l-.117.007H6c-.552 0-1-.448-1-1 0-.513.386-.936.883-.993L6 10.5h10.5c.552 0 1 .448 1 1z"
+      />
+    </g>
+  </svg>
+);
+
+export default ArrowLeftBold;
diff --git a/platform/ui-next/src/components/Icons/Sources/ChevronLeft.tsx b/platform/ui-next/src/components/Icons/Sources/ChevronLeft.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import type { IconProps } from '../types';
+
+export const ChevronLeft = (props: IconProps) => (
+  <svg
+    width="7"
+    height="12"
+    viewBox="0 0 7 12"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g
+      fill="none"
+      fillRule="evenodd"
+    >
+      <path d="M0 0h7v12H0z" />
+      <path
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M5.757 1.757 1.515 6l4.242 4.243"
+      />
+    </g>
+  </svg>
+);
+
+export default ChevronLeft;
diff --git a/platform/ui-next/src/components/Icons/Sources/LaunchInfo.tsx b/platform/ui-next/src/components/Icons/Sources/LaunchInfo.tsx
@@ -6,6 +6,7 @@ export const LaunchInfo = (props: IconProps) => (
     xmlns="http://www.w3.org/2000/svg"
     width="20"
     height="20"
+    {...props}
     viewBox="0 0 21 22"
   >
     <g fillRule="evenodd">

diff --git a/platform/ui-next/src/components/Icons/Sources/StatusTracking.tsx b/platform/ui-next/src/components/Icons/Sources/StatusTracking.tsx
@@ -3,48 +3,33 @@ import type { IconProps } from '../types';
 
 export const StatusTracking = (props: IconProps) => (
   <svg
-    width="24px"
-    height="24px"
-    viewBox="0 0 24 24"
-    version="1.1"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
     xmlns="http://www.w3.org/2000/svg"
     {...props}
   >
-    <title>status-tracking</title>
     <g
-      id="status-tracking"
-      stroke="none"
-      strokeWidth="1"
       fill="none"
       fillRule="evenodd"
     >
-      <g>
-        <rect
-          id="Rectangle"
-          x="0"
-          y="0"
-          width="24"
-          height="24"
-        ></rect>
-        <rect
-          id="Rectangle"
-          stroke="#5ACCE6"
-          fill="#5ACCE6"
-          x="4.5"
-          y="4.5"
-          width="15"
-          height="15"
-          rx="7.5"
-        ></rect>
-        <path
-          d="M15.388889,9 L11.7739644,14.5948033 C11.6112717,14.8456871 11.3630166,15.0025668 11.0931982,15.0249993 C10.8233798,15.0474318 10.5584004,14.9332222 10.3665704,14.7118131 L8.5,12.5449644"
-          id="Path"
-          stroke="#090C29"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        ></path>
-      </g>
+      <path d="M0 0h16v16H0z" />
+      <rect
+        stroke="#5ACCE6"
+        fill="#5ACCE6"
+        x=".5"
+        y=".5"
+        width="15"
+        height="15"
+        rx="7.5"
+      />
+      <path
+        d="m11.389 5-3.615 5.595a.91.91 0 0 1-.68.43.866.866 0 0 1-.727-.313L4.5 8.545"
+        stroke="#000"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
     </g>
   </svg>
 );

diff --git a/platform/ui/src/components/CinePlayer/CinePlayer.tsx b/platform/ui/src/components/CinePlayer/CinePlayer.tsx
@@ -120,7 +120,7 @@ const CinePlayer: React.FC<CinePlayerProps> = ({
             onClick={() => handleSetFrameRate(frameRate - 1)}
             data-cy={'cine-player-left-arrow'}
           >
-            <Icons.ArrowLeft />
+            <Icons.ChevronLeft />
           </div>
           <Tooltip
             position="top"
@@ -152,7 +152,7 @@ const CinePlayer: React.FC<CinePlayerProps> = ({
             onClick={() => handleSetFrameRate(frameRate + 1)}
             data-cy={'cine-player-right-arrow'}
           >
-            <Icons.ArrowRight />
+            <Icons.ChevronRight />
           </div>
         </div>
         <Icons.Close

diff --git a/platform/ui/src/components/InputNumber/InputNumber.tsx b/platform/ui/src/components/InputNumber/InputNumber.tsx
@@ -130,7 +130,7 @@ const InputNumber: React.FC<{
               className={arrowHorizontalClassName}
               onClick={() => decrement()}
             >
-              <Icons.ByName name="arrow-left" />
+              <Icons.ChevronLeft />
             </div>
           )}
           <input
@@ -148,7 +148,7 @@ const InputNumber: React.FC<{
               className={arrowHorizontalClassName}
               onClick={() => increment()}
             >
-              <Icons.ByName name="arrow-right" />
+              <Icons.ChevronRight />
             </div>
           )}
           {showAdjustmentArrows && arrowsDirection === 'vertical' && (

diff --git a/platform/ui/src/components/ProgressDropdown/ProgressDropdown.tsx b/platform/ui/src/components/ProgressDropdown/ProgressDropdown.tsx
@@ -108,7 +108,7 @@ const ProgressDropdown = ({
 
               {!selectedOption && <div className="ml-1 grow text-base leading-6">{children}</div>}
             </div>
-            <Icons.ChevronOpen className="text-primary-active mt-0.5 ml-1" />
+            <Icons.ChevronDown className="text-primary-active mt-1.5 ml-1 mr-2" />
           </div>
           <button
             className={classnames('ml-1.5 w-[26px] rounded text-base', {