ui(feat): Adds light/dark mode support for viewport overlay text and markers (#5041)

Co-authored-by: sedghi <ar.sedghi@gmail.com>

.circleci/config.yml

@@ -339,7 +339,6 @@ jobs:
     resource_class: large
     parallelism: 8
     steps:
-      - install_bun
       - run:
           name: Install System Dependencies
           command: |
@@ -353,12 +352,11 @@ jobs:
           name: Export Display Variable
           command: export DISPLAY=:99
       - cypress/install:
-          install-command: bun install --no-save
-          package-manager: yarn
+          install-command: yarn install --no-save
       - cypress/run-tests:
           cypress-command: |
             npx wait-on@latest http://localhost:3000 && cd platform/app && npx cypress run --record --parallel
-          start-command: bun run test:data && bun run test:e2e:serve
+          start-command: yarn run test:data && yarn run test:e2e:serve
 
   DOCKER_MULTIARCH_MANIFEST:
     <<: *defaults

bun.lock

@@ -22,6 +22,8 @@
         "@babel/preset-typescript": "^7.13.0",
         "@istanbuljs/nyc-config-typescript": "^1.0.2",
         "babel-plugin-istanbul": "^7.0.0",
+        "cypress": "14.1.0",
+        "cypress-file-upload": "^5.0.8",
         "istanbul": "0.4.5",
         "nyc": "^17.1.0",
         "patch-package": "^8.0.0",
@@ -34,8 +36,6 @@
       "optionalDependencies": {
         "@percy/cypress": "^3.1.1",
         "@playwright/test": "^1.48.0",
-        "cypress": "14.3.1",
-        "cypress-file-upload": "^5.0.8",
       },
     },
     "addOns/externals/devDependencies": {
@@ -2674,7 +2674,7 @@
 
     "csstype": ["csstype@3.1.3", "", {}, "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="],
 
-    "cypress": ["cypress@14.3.1", "", { "dependencies": { "@cypress/request": "^3.0.8", "@cypress/xvfb": "^1.2.4", "@types/sinonjs__fake-timers": "8.1.1", "@types/sizzle": "^2.3.2", "arch": "^2.2.0", "blob-util": "^2.0.2", "bluebird": "^3.7.2", "buffer": "^5.7.1", "cachedir": "^2.3.0", "chalk": "^4.1.0", "check-more-types": "^2.24.0", "ci-info": "^4.1.0", "cli-cursor": "^3.1.0", "cli-table3": "~0.6.5", "commander": "^6.2.1", "common-tags": "^1.8.0", "dayjs": "^1.10.4", "debug": "^4.3.4", "enquirer": "^2.3.6", "eventemitter2": "6.4.7", "execa": "4.1.0", "executable": "^4.1.1", "extract-zip": "2.0.1", "figures": "^3.2.0", "fs-extra": "^9.1.0", "getos": "^3.2.1", "is-installed-globally": "~0.4.0", "lazy-ass": "^1.6.0", "listr2": "^3.8.3", "lodash": "^4.17.21", "log-symbols": "^4.0.0", "minimist": "^1.2.8", "ospath": "^1.2.2", "pretty-bytes": "^5.6.0", "process": "^0.11.10", "proxy-from-env": "1.0.0", "request-progress": "^3.0.0", "semver": "^7.7.1", "supports-color": "^8.1.1", "tmp": "~0.2.3", "tree-kill": "1.2.2", "untildify": "^4.0.0", "yauzl": "^2.10.0" }, "bin": { "cypress": "bin/cypress" } }, "sha512-/2q06qvHMK3PNiadnRW1Je0lJ43gAFPQJUAK2zIxjr22kugtWxVQznTBLVu1AvRH+RP3oWZhCdWqiEi+0NuqCg=="],
+    "cypress": ["cypress@14.1.0", "", { "dependencies": { "@cypress/request": "^3.0.7", "@cypress/xvfb": "^1.2.4", "@types/sinonjs__fake-timers": "8.1.1", "@types/sizzle": "^2.3.2", "arch": "^2.2.0", "blob-util": "^2.0.2", "bluebird": "^3.7.2", "buffer": "^5.7.1", "cachedir": "^2.3.0", "chalk": "^4.1.0", "check-more-types": "^2.24.0", "ci-info": "^4.1.0", "cli-cursor": "^3.1.0", "cli-table3": "~0.6.1", "commander": "^6.2.1", "common-tags": "^1.8.0", "dayjs": "^1.10.4", "debug": "^4.3.4", "enquirer": "^2.3.6", "eventemitter2": "6.4.7", "execa": "4.1.0", "executable": "^4.1.1", "extract-zip": "2.0.1", "figures": "^3.2.0", "fs-extra": "^9.1.0", "getos": "^3.2.1", "is-installed-globally": "~0.4.0", "lazy-ass": "^1.6.0", "listr2": "^3.8.3", "lodash": "^4.17.21", "log-symbols": "^4.0.0", "minimist": "^1.2.8", "ospath": "^1.2.2", "pretty-bytes": "^5.6.0", "process": "^0.11.10", "proxy-from-env": "1.0.0", "request-progress": "^3.0.0", "semver": "^7.5.3", "supports-color": "^8.1.1", "tmp": "~0.2.3", "tree-kill": "1.2.2", "untildify": "^4.0.0", "yauzl": "^2.10.0" }, "bin": { "cypress": "bin/cypress" } }, "sha512-pPPj8Uu9NwjaaiXAEcjYZZmgsq6v9Zs1Nw6a+zRF+ANgYSNhH4S32SjFRsvMcuOHR/8dp4GBJhBPqIPSs+TxaA=="],
 
     "cypress-file-upload": ["cypress-file-upload@5.0.8", "", { "peerDependencies": { "cypress": ">3.0.0" } }, "sha512-+8VzNabRk3zG6x8f8BWArF/xA/W0VK4IZNx3MV0jFWrJS/qKn8eHfa5nU73P9fOQAgwHFJx7zjg4lwOnljMO8g=="],
 

extensions/cornerstone/src/Viewport/Overlays/CustomizableViewportOverlay.tsx

@@ -10,6 +10,7 @@ import { utils } from '@ohif/core';
 import { StackViewportData, VolumeViewportData } from '../../types/CornerstoneCacheService';
 
 import './CustomizableViewportOverlay.css';
+import { useViewportRendering } from '../../hooks';
 
 const EPSILON = 1e-4;
 const { formatPN } = utils;
@@ -67,6 +68,7 @@ function CustomizableViewportOverlay({
     servicesManager.services;
   const [voi, setVOI] = useState({ windowCenter: null, windowWidth: null });
   const [scale, setScale] = useState(1);
+  const { isViewportBackgroundLight: isLight } = useViewportRendering(viewportId);
   const { imageIndex } = imageSliceData;
 
   // Historical usage defined the overlays as separate items due to lack of
@@ -170,6 +172,7 @@ function CustomizableViewportOverlay({
         viewportId,
         servicesManager,
         customization: item,
+        isLight,
         formatters: {
           formatPN,
           formatDate: formatDICOMDate,
@@ -219,6 +222,7 @@ function CustomizableViewportOverlay({
         instanceNumber,
         viewportId,
         toolGroupService,
+        isLight,
       };
 
       return (
@@ -241,6 +245,8 @@ function CustomizableViewportOverlay({
       topRight={getContent(topRightCustomization, 'topRightOverlayItem')}
       bottomLeft={getContent(bottomLeftCustomization, 'bottomLeftOverlayItem')}
       bottomRight={getContent(bottomRightCustomization, 'bottomRightOverlayItem')}
+      color={isLight ? 'text-neutral-dark' : 'text-neutral-light'}
+      shadowClass={isLight ? 'shadow-light' : 'shadow-dark'}
     />
   );
 }
@@ -375,6 +381,7 @@ function OverlayItem(props) {
 
 /**
  * Window Level / Center Overlay item
+ * //
  */
 function VOIOverlayItem({ voi, customization }: OverlayItemProps) {
   const { windowWidth, windowCenter } = voi;
@@ -387,9 +394,9 @@ function VOIOverlayItem({ voi, customization }: OverlayItemProps) {
       className="overlay-item flex flex-row"
       style={{ color: customization?.color }}
     >
-      <span className="mr-0.5 shrink-0 opacity-[0.67]">W:</span>
+      <span className="mr-0.5 shrink-0 opacity-[0.70]">W:</span>
       <span className="mr-2.5 shrink-0">{windowWidth.toFixed(0)}</span>
-      <span className="mr-0.5 shrink-0 opacity-[0.67]">L:</span>
+      <span className="mr-0.5 shrink-0 opacity-[0.70]">L:</span>
       <span className="shrink-0">{windowCenter.toFixed(0)}</span>
     </div>
   );
@@ -404,7 +411,7 @@ function ZoomOverlayItem({ scale, customization }: OverlayItemProps) {
       className="overlay-item flex flex-row"
       style={{ color: (customization && customization.color) || undefined }}
     >
-      <span className="mr-0.5 shrink-0 opacity-[0.67]">Zoom:</span>
+      <span className="mr-0.5 shrink-0 opacity-[0.70]">Zoom:</span>
       <span>{scale.toFixed(2)}x</span>
     </div>
   );
@@ -428,7 +435,7 @@ function InstanceNumberOverlayItem({
       <span>
         {instanceNumber !== undefined && instanceNumber !== null ? (
           <>
-            <span className="mr-0.5 shrink-0 opacity-[0.67]">I:</span>
+            <span className="mr-0.5 shrink-0 opacity-[0.70]">I:</span>
             <span>{`${instanceNumber} (${imageIndex + 1}/${numberOfSlices})`}</span>
           </>
         ) : (

extensions/cornerstone/src/Viewport/Overlays/ViewportOrientationMarkers.tsx

@@ -1,11 +1,17 @@
 import React, { useEffect, useState, useMemo, useRef } from 'react';
 import classNames from 'classnames';
-import { metaData, Enums, Types, getEnabledElement } from '@cornerstonejs/core';
+import {
+  metaData,
+  Enums,
+  Types,
+  getEnabledElement,
+  utilities as coreUtilities,
+} from '@cornerstonejs/core';
 import { utilities } from '@cornerstonejs/tools';
 import { vec3 } from 'gl-matrix';
 
 import './ViewportOrientationMarkers.css';
-
+import { useViewportRendering } from '../../hooks';
 const { getOrientationStringLPS, invertOrientationStringLPS } = utilities.orientation;
 
 function ViewportOrientationMarkers({
@@ -20,6 +26,7 @@ function ViewportOrientationMarkers({
   const [rotation, setRotation] = useState(0);
   const [flipHorizontal, setFlipHorizontal] = useState(false);
   const [flipVertical, setFlipVertical] = useState(false);
+  const { isViewportBackgroundLight: isLight } = useViewportRendering(viewportId);
   const { cornerstoneViewportService } = servicesManager.services;
 
   // Store initial viewUp and viewRight for volume viewports
@@ -151,7 +158,8 @@ function ViewportOrientationMarkers({
         className={classNames(
           'overlay-text',
           `${m}-mid orientation-marker`,
-          'text-highlight/65',
+          isLight ? 'text-neutral-dark/70' : 'text-neutral-light/70',
+          isLight ? 'shadow-light' : 'shadow-dark',
           'text-base',
           'leading-5'
         )}
@@ -168,6 +176,7 @@ function ViewportOrientationMarkers({
     flipHorizontal,
     orientationMarkers,
     element,
+    isLight,
   ]);
 
   return <div className="ViewportOrientationMarkers select-none">{markers}</div>;

package.json

@@ -79,9 +79,8 @@
   },
   "optionalDependencies": {
     "@percy/cypress": "^3.1.1",
-    "@playwright/test": "^1.48.0",
-    "cypress": "14.3.1",
-    "cypress-file-upload": "^5.0.8"
+    "@playwright/test": "^1.48.0"
+
   },
   "devDependencies": {
     "@babel/core": "7.24.7",
@@ -106,7 +105,9 @@
     "nyc": "^17.1.0",
     "patch-package": "^8.0.0",
     "prettier-plugin-tailwindcss": "0.6.9",
-    "playwright-test-coverage": "^1.2.12"
+    "playwright-test-coverage": "^1.2.12",
+     "cypress": "14.1.0",
+    "cypress-file-upload": "^5.0.8"
   },
   "husky": {
     "hooks": {

platform/app/cypress/support/commands.js

@@ -108,7 +108,7 @@ Cypress.Commands.add('isPageLoaded', (url = '/basic-test') => {
 
 Cypress.Commands.add('openStudyList', () => {
   cy.initRouteAliases();
-  cy.visit('/', { timeout: 30000 });
+  cy.visit('/', { timeout: 300000 });
 
   // For some reason cypress 12.x does not like to stub the network request
   // so we just wait here for querying to be done.

platform/docs/tailwind.config.js

@@ -44,6 +44,8 @@ module.exports = {
       colors: {
         highlight: 'hsl(var(--highlight))',
         neutral: 'hsl(var(--neutral))',
+        'neutral-light': 'hsl(var(--neutral-light))',
+        'neutral-dark': 'hsl(var(--neutral-dark))',
         border: 'hsl(var(--border))',
         input: 'hsl(var(--input))',
         ring: 'hsl(var(--ring))',

platform/ui-next/src/components/Viewport/ViewportOverlay.css

@@ -7,7 +7,6 @@
 .ViewportOverlay .overlay-element {
   position: absolute;
   font-weight: 400;
-  text-shadow: 1px 1px #000;
   pointer-events: none;
 }
 .overlay-top {
@@ -17,6 +16,17 @@
   bottom: 2.15rem;
 }
 
+/* Base text styling without shadow */
 .overlay-text {
+  /* No default shadow - will be applied by shadow classes */
+}
+
+/* Dark shadow for light backgrounds */
+.shadow-dark {
   text-shadow: 0.8px 0.8px 0.5px rgba(0, 0, 0, 0.65);
 }
+
+/* Light shadow for dark backgrounds */
+.shadow-light {
+  text-shadow: 0.8px 0.8px 0.5px rgba(255, 255, 255, 0.65);
+}

platform/ui-next/src/components/Viewport/ViewportOverlay.tsx

@@ -17,11 +17,11 @@ const classes = {
   bottomLeft: 'overlay-bottom left-viewport',
 };
 
-function ViewportOverlay({ topLeft, topRight, bottomRight, bottomLeft, color = 'text-highlight' }) {
+function ViewportOverlay({ topLeft, topRight, bottomRight, bottomLeft, color = 'text-highlight', shadowClass = 'shadow-dark' }) {
   const overlay = 'absolute pointer-events-none viewport-overlay';
 
   return (
-    <div className={classNames(color, 'overlay-text text-base leading-5')}>
+    <div className={classNames(color, 'overlay-text', shadowClass, 'text-base leading-5')}>
       <div
         data-cy="viewport-overlay-top-left"
         className={classNames(overlay, classes.topLeft)}
@@ -58,6 +58,7 @@ ViewportOverlay.propTypes = {
   bottomRight: PropTypes.node,
   bottomLeft: PropTypes.node,
   color: PropTypes.string,
+  shadowClass: PropTypes.string,
 };
 
-export { ViewportOverlay };
+export { ViewportOverlay };

platform/ui-next/src/tailwind.css

@@ -10,6 +10,8 @@
   :root {
     --highlight: 191 74% 63%;
     --neutral: 213 22% 59%;
+    --neutral-light: 214 69% 81%;
+    --neutral-dark: 214 16% 21%;
     --background: 236 62% 5%;
     --foreground: 0 0% 98%;
     --card: 234 64% 10%;

platform/ui-next/tailwind.config.js

@@ -45,6 +45,8 @@ module.exports = {
       colors: {
         highlight: 'hsl(var(--highlight))',
         neutral: 'hsl(var(--neutral))',
+        'neutral-light': 'hsl(var(--neutral-light))',
+        'neutral-dark': 'hsl(var(--neutral-dark))',
         border: 'hsl(var(--border))',
         input: 'hsl(var(--input))',
         ring: 'hsl(var(--ring))',

tests/SRHydration.spec.ts

@@ -57,6 +57,6 @@ test('should hydrate SR reports correctly', async ({ page }) => {
   });
 
   await page.getByTestId('data-row').first().click();
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(5000);
   await checkForScreenshot(page, page, screenShotPaths.srHydration.srJumpToMeasurement);
 });

yarn.lock

@@ -1605,7 +1605,7 @@
   resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-2.2.0.tgz#2cbcf822bf3764c9658c4d2e568bd0c0cb748016"
   integrity sha512-+OJ9konv95ClSTOJCmMZqpd5+YGsB2S+x6w3E1oaM8UuR5j8nTNHYSz8c9BEPGDOCMQYIEEGlVPj/VY64iTbGw==
 
-"@cypress/request@^3.0.8":
+"@cypress/request@^3.0.7":
   version "3.0.8"
   resolved "https://registry.yarnpkg.com/@cypress/request/-/request-3.0.8.tgz#992f1f42ba03ebb14fa5d97290abe9d015ed0815"
   integrity sha512-h0NFgh1mJmm1nr4jCwkGHwKneVYKghUyWe6TMNrk0B9zsjAJxpg8C4/+BAcmLgCPa1vj1V8rNUaILl+zYRUWBQ==
@@ -7862,7 +7862,7 @@ cli-spinners@^2.5.0:
   resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-2.9.2.tgz#1773a8f4b9c4d6ac31563df53b3fc1d79462fe41"
   integrity sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==
 
-cli-table3@^0.6.1, cli-table3@~0.6.5:
+cli-table3@^0.6.1, cli-table3@~0.6.1:
   version "0.6.5"
   resolved "https://registry.yarnpkg.com/cli-table3/-/cli-table3-0.6.5.tgz#013b91351762739c16a9567c21a04632e449bf2f"
   integrity sha512-+W/5efTR7y5HRD7gACw9yQjqMVvEMLBHmboM/kPWam+H+Hmyrgjh6YncVKK122YZkXrLudzTuAukUw9FnMf7IQ==
@@ -8734,12 +8734,12 @@ cypress-file-upload@^5.0.8:
   resolved "https://registry.yarnpkg.com/cypress-file-upload/-/cypress-file-upload-5.0.8.tgz#d8824cbeaab798e44be8009769f9a6c9daa1b4a1"
   integrity sha512-+8VzNabRk3zG6x8f8BWArF/xA/W0VK4IZNx3MV0jFWrJS/qKn8eHfa5nU73P9fOQAgwHFJx7zjg4lwOnljMO8g==
 
-cypress@14.3.1:
-  version "14.3.1"
-  resolved "https://registry.yarnpkg.com/cypress/-/cypress-14.3.1.tgz#b0570c0e5b198d930a2c0f640d099e777bec2d2f"
-  integrity sha512-/2q06qvHMK3PNiadnRW1Je0lJ43gAFPQJUAK2zIxjr22kugtWxVQznTBLVu1AvRH+RP3oWZhCdWqiEi+0NuqCg==
+cypress@14.1.0:
+  version "14.1.0"
+  resolved "https://registry.yarnpkg.com/cypress/-/cypress-14.1.0.tgz#b2dbe7bbc529dc0c93ffd4e0e9fa59763afba0b8"
+  integrity sha512-pPPj8Uu9NwjaaiXAEcjYZZmgsq6v9Zs1Nw6a+zRF+ANgYSNhH4S32SjFRsvMcuOHR/8dp4GBJhBPqIPSs+TxaA==
   dependencies:
-    "@cypress/request" "^3.0.8"
+    "@cypress/request" "^3.0.7"
     "@cypress/xvfb" "^1.2.4"
     "@types/sinonjs__fake-timers" "8.1.1"
     "@types/sizzle" "^2.3.2"
@@ -8752,7 +8752,7 @@ cypress@14.3.1:
     check-more-types "^2.24.0"
     ci-info "^4.1.0"
     cli-cursor "^3.1.0"
-    cli-table3 "~0.6.5"
+    cli-table3 "~0.6.1"
     commander "^6.2.1"
     common-tags "^1.8.0"
     dayjs "^1.10.4"
@@ -8776,7 +8776,7 @@ cypress@14.3.1:
     process "^0.11.10"
     proxy-from-env "1.0.0"
     request-progress "^3.0.0"
-    semver "^7.7.1"
+    semver "^7.5.3"
     supports-color "^8.1.1"
     tmp "~0.2.3"
     tree-kill "1.2.2"
@@ -19182,11 +19182,6 @@ semver@^7.0.0, semver@^7.1.1, semver@^7.3.4, semver@^7.3.5, semver@^7.3.7, semve
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.3.tgz#980f7b5550bc175fb4dc09403085627f9eb33143"
   integrity sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==
 
-semver@^7.7.1:
-  version "7.7.2"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.7.2.tgz#67d99fdcd35cec21e6f8b87a7fd515a33f982b58"
-  integrity sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==
-
 send@0.19.0:
   version "0.19.0"
   resolved "https://registry.yarnpkg.com/send/-/send-0.19.0.tgz#bbc5a388c8ea6c048967049dbeac0e4a3f09d7f8"