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

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",

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}

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;
 

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.

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();

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.

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

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,20 +513,13 @@ export const Icons = {
   Link,
   LoadingOHIFMark,
   ArrowLeft: ChevronClosed,
-  ArrowRight: (props: IconProps) => {
+  ArrowRight,
-    return (
-      <ChevronClosed
-        {...props}
-        className="rotate-180"
-      />
-    );
-  },
   ArrowLeftBold,
   ArrowRightBold: (props: IconProps) => {
     return (
       <ArrowLeftBold
         {...props}
-        className="rotate-180"
+        className={`${props.className || ''} rotate-180`.trim()}
       />
     );
   },
@@ -516,7 +527,7 @@ export const Icons = {
     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 */

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;

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;

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">

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"
+    width="16"
-    height="24px"
+    height="16"
-    viewBox="0 0 24 24"
+    viewBox="0 0 16 16"
-    version="1.1"
     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>
+      <path d="M0 0h16v16H0z" />
-        <rect
+      <rect
-          id="Rectangle"
+        stroke="#5ACCE6"
-          x="0"
+        fill="#5ACCE6"
-          y="0"
+        x=".5"
-          width="24"
+        y=".5"
-          height="24"
+        width="15"
-        ></rect>
+        height="15"
-        <rect
+        rx="7.5"
-          id="Rectangle"
+      />
-          stroke="#5ACCE6"
+      <path
-          fill="#5ACCE6"
+        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"
-          x="4.5"
+        stroke="#000"
-          y="4.5"
+        strokeWidth="2"
-          width="15"
+        strokeLinecap="round"
-          height="15"
+        strokeLinejoin="round"
-          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>
     </g>
   </svg>
 );

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

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' && (

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', {

yarn.lock

@@ -10274,13 +10274,6 @@ fast-uri@^3.0.1:
   resolved "https://registry.yarnpkg.com/fast-uri/-/fast-uri-3.0.2.tgz#d78b298cf70fd3b752fd951175a3da6a7b48f024"
   integrity sha512-GR6f0hD7XXyNJa25Tb9BuIdN0tdr+0BMi6/CJPH3wJO1JjNG3n/VsSw38AwRdKZABm8lGbPfakLRkYzx2V9row==
 
-fast-url-parser@1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/fast-url-parser/-/fast-url-parser-1.1.3.tgz#f4af3ea9f34d8a271cf58ad2b3759f431f0b318d"
-  integrity sha512-5jOCVXADYNuRkKFzNJ0dCCewsZiYo0dz8QNYljkOpFC6r2U4OBmKtvm/Tsuh4w1YYdDqDb31a8TVhBJ2OJKdqQ==
-  dependencies:
-    punycode "^1.3.2"
-
 fastest-levenshtein@^1.0.12:
   version "1.0.16"
   resolved "https://registry.yarnpkg.com/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz#210e61b6ff181de91ea9b3d1b84fdedd47e034e5"
@@ -15713,10 +15706,10 @@ path-to-regexp@0.1.12:
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.12.tgz#d5e1a12e478a976d432ef3c58d534b9923164bb7"
   integrity sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==
 
-path-to-regexp@2.2.1:
+path-to-regexp@3.3.0:
-  version "2.2.1"
+  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-2.2.1.tgz#90b617025a16381a879bc82a38d4e8bdeb2bcf45"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-3.3.0.tgz#f7f31d32e8518c2660862b644414b6d5c63a611b"
-  integrity sha512-gu9bD6Ta5bwGrrU8muHzVOBFFREpp2iRkVfhBJahwJ6p6Xw20SjT0MxLnwkjOibQmGSYhiUnf2FLe7k+jcFmGQ==
+  integrity sha512-qyCH421YQPS2WFDxDjftfc1ZR5WKQzVzqsp4n9M2kQhVOo/ByahFoUNJfl58kOcEGfQ//7weFTDhm+ss8Ecxgw==
 
 path-type@^3.0.0:
   version "3.0.0"
@@ -16749,7 +16742,7 @@ pumpify@^1.3.3:
     inherits "^2.0.3"
     pump "^2.0.0"
 
-punycode@^1.3.2, punycode@^1.4.1:
+punycode@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
   integrity sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==
@@ -18026,18 +18019,17 @@ serialize-javascript@^6.0.0, serialize-javascript@^6.0.1:
   dependencies:
     randombytes "^2.1.0"
 
-serve-handler@6.1.5:
+serve-handler@6.1.6:
-  version "6.1.5"
+  version "6.1.6"
-  resolved "https://registry.yarnpkg.com/serve-handler/-/serve-handler-6.1.5.tgz#a4a0964f5c55c7e37a02a633232b6f0d6f068375"
+  resolved "https://registry.yarnpkg.com/serve-handler/-/serve-handler-6.1.6.tgz#50803c1d3e947cd4a341d617f8209b22bd76cfa1"
-  integrity sha512-ijPFle6Hwe8zfmBxJdE+5fta53fdIY0lHISJvuikXB3VYFafRjMRpOffSPvCYsbKyBA7pvy9oYr/BT1O3EArlg==
+  integrity sha512-x5RL9Y2p5+Sh3D38Fh9i/iQ5ZK+e4xuXRd/pGbM4D13tgo/MGwbttUk8emytcr1YYzBYs+apnUngBDFYfpjPuQ==
   dependencies:
     bytes "3.0.0"
     content-disposition "0.5.2"
-    fast-url-parser "1.1.3"
     mime-types "2.1.18"
     minimatch "3.1.2"
     path-is-inside "1.0.2"
-    path-to-regexp "2.2.1"
+    path-to-regexp "3.3.0"
     range-parser "1.2.0"
 
 serve-index@^1.9.1:
@@ -18063,10 +18055,10 @@ serve-static@1.16.2:
     parseurl "~1.3.3"
     send "0.19.0"
 
-serve@^14.2.0:
+serve@^14.2.4:
-  version "14.2.3"
+  version "14.2.4"
-  resolved "https://registry.yarnpkg.com/serve/-/serve-14.2.3.tgz#047ba2b349354255bc09e0332cd41a92787836c9"
+  resolved "https://registry.yarnpkg.com/serve/-/serve-14.2.4.tgz#ba4c425c3c965f496703762e808f34b913f42fb0"
-  integrity sha512-VqUFMC7K3LDGeGnJM9h56D3XGKb6KGgOw0cVNtA26yYXHCcpxf3xwCTUaQoWlVS7i8Jdh3GjQkOB23qsXyjoyQ==
+  integrity sha512-qy1S34PJ/fcY8gjVGszDB3EXiPSk5FKhUa7tQe0UPRddxRidc2V6cNHPNewbE1D7MAkgLuWEt3Vw56vYy73tzQ==
   dependencies:
     "@zeit/schemas" "2.36.0"
     ajv "8.12.0"
@@ -18077,7 +18069,7 @@ serve@^14.2.0:
     clipboardy "3.0.0"
     compression "1.7.4"
     is-port-reachable "4.0.0"
-    serve-handler "6.1.5"
+    serve-handler "6.1.6"
     update-check "1.5.4"
 
 set-blocking@^2.0.0: