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

2025-01-21 09:34:19 -05:00 · 2025-01-21 09:34:19 -05:00 · cf97fa9b7b
commit cf97fa9b7b
parent ad7ade28ea
16 changed files with 132 additions and 83 deletions
--- 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",
--- 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}
--- 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;

--- 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.
--- 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();
--- 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.
--- 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
--- 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,20 +513,13 @@ 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()}
      />
    );
  },
@ -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 */
--- 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;
--- 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;
--- 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">
--- 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>
 );
--- 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
--- 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' && (
--- 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', {
--- a/yarn.lock
+++ b/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:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-2.2.1.tgz#90b617025a16381a879bc82a38d4e8bdeb2bcf45"
-  integrity sha512-gu9bD6Ta5bwGrrU8muHzVOBFFREpp2iRkVfhBJahwJ6p6Xw20SjT0MxLnwkjOibQmGSYhiUnf2FLe7k+jcFmGQ==
+path-to-regexp@3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-3.3.0.tgz#f7f31d32e8518c2660862b644414b6d5c63a611b"
+  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:
-  version "6.1.5"
-  resolved "https://registry.yarnpkg.com/serve-handler/-/serve-handler-6.1.5.tgz#a4a0964f5c55c7e37a02a633232b6f0d6f068375"
-  integrity sha512-ijPFle6Hwe8zfmBxJdE+5fta53fdIY0lHISJvuikXB3VYFafRjMRpOffSPvCYsbKyBA7pvy9oYr/BT1O3EArlg==
+serve-handler@6.1.6:
+  version "6.1.6"
+  resolved "https://registry.yarnpkg.com/serve-handler/-/serve-handler-6.1.6.tgz#50803c1d3e947cd4a341d617f8209b22bd76cfa1"
+  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:
-  version "14.2.3"
-  resolved "https://registry.yarnpkg.com/serve/-/serve-14.2.3.tgz#047ba2b349354255bc09e0332cd41a92787836c9"
-  integrity sha512-VqUFMC7K3LDGeGnJM9h56D3XGKb6KGgOw0cVNtA26yYXHCcpxf3xwCTUaQoWlVS7i8Jdh3GjQkOB23qsXyjoyQ==
+serve@^14.2.4:
+  version "14.2.4"
+  resolved "https://registry.yarnpkg.com/serve/-/serve-14.2.4.tgz#ba4c425c3c965f496703762e808f34b913f42fb0"
+  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: