Add clusteringPixelSizeThreshold + memory monitoring (#363)

* Add clusteringPixelSizeThreshold

* Update style

* Add progress indicator to bulk ann retrieve and processing

* Add toggle for clusters

* Update progress dialog

* Lock dicomweb-client verison

* Revert "Add progress indicator to bulk ann retrieve and processing"

This reverts commit 44c4dd8.

* Auto select series (dicomtagbrowser)

* Add memory monitoring

* Add configuration

* Enable memory profilling by default

* CR Update: Copilot

* Lint fix

* CR Updates: Copilot

* CR Updates

* CR Updates

* Use bun

* Add biome and format code

* Update scripts to use bun

* Fix build issues

* Address build errors

* Fix dockerfile

* Adjust reactivity of toggle

* Address code quality

* Add strict rules

* Address quality issues

* Update dmv

* Deep source

Author: igoroctaviano

.eslintrc.strict.cjs

@@ -0,0 +1,41 @@
+/**
+ * ESLint config that approximates DeepSource + SonarQube rules.
+ * Run with: bun run lint:strict  (or: bunx eslint --config .eslintrc.strict.cjs src/)
+ *
+ * DeepSource's JavaScript analyzer uses ESLint under the hood and supports
+ * style_guide (e.g. "standard"). SonarQube rules are available via eslint-plugin-sonarjs.
+ * This config enables rules that catch the kinds of issues both report.
+ */
+module.exports = {
+  root: true,
+  extends: [
+    'react-app',
+    'react-app/jest',
+    'plugin:sonarjs/recommended',
+  ],
+  plugins: ['sonarjs'],
+  overrides: [
+    {
+      files: ['src/**/*.{ts,tsx,js,jsx}'],
+      rules: {
+        // DeepSource JS-0050: use === and !==
+        eqeqeq: ['error', 'always'],
+        // Avoid console in browser code (DeepSource JS-0002)
+        'no-console': ['warn', { allow: ['warn', 'error'] }],
+        // Object shorthand (DeepSource JS-0240)
+        'object-shorthand': ['warn', 'always'],
+        // Empty callbacks (DeepSource JS-0321)
+        'no-empty-function': ['warn', { allow: ['arrowFunctions'] }],
+        // Prefer named exports when re-exporting (DeepSource JS-P1003)
+        'sonarjs/prefer-single-boolean-return': 'warn',
+      },
+    },
+  ],
+  ignorePatterns: [
+    'build/',
+    'node_modules/',
+    'coverage/',
+    '*.config.js',
+    '*.config.cjs',
+  ],
+};

.github/workflows/deploy-to-firebase.yml

@@ -15,19 +15,16 @@ jobs:
       - name: Checkout to repository
         uses: actions/checkout@v4.2.2
 
-      - name: Setup Node
-        uses: actions/setup-node@v4.4.0
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v2
         with:
-          node-version: 20.8.1
-
-      - name: Install Yarn
-        run: sudo npm i -g yarn
+          bun-version: latest
 
       - name: Install dependencies
-        run: yarn
+        run: bun install --frozen-lockfile
 
       - name: Build
-        run: REACT_APP_CONFIG=preview PUBLIC_URL=/ yarn build
+        run: REACT_APP_CONFIG=preview PUBLIC_URL=/ bun run build
 
       - name: Deploy
         uses: FirebaseExtended/action-hosting-deploy@v0

.github/workflows/deploy-to-github-pages.yml

@@ -14,20 +14,17 @@ jobs:
       - name: Checkout to repository
         uses: actions/checkout@v4.2.2
 
-      - name: Setup Node
-        uses: actions/setup-node@v4.4.0
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v2
         with:
-          node-version: 20.8.1
-
-      - name: Install Yarn
-        run: sudo npm i -g yarn
+          bun-version: latest
 
       - name: Install dependencies
-        run: yarn
+        run: bun install --frozen-lockfile
 
       - name: Build and deploy to GitHub Pages
         run: |
           git remote set-url origin https://git:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git
-          yarn deploy -- -u "github-actions-bot <support+actions@github.com>"
+          bun run deploy -- -u "github-actions-bot <support+actions@github.com>"
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/release.yml

@@ -16,16 +16,16 @@ jobs:
           ref: master
           persist-credentials: false
 
-      - name: Setup Node
-        uses: actions/setup-node@v4.4.0
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v2
         with:
-          node-version: 20.8.1
+          bun-version: latest
 
       - name: Install dependencies
-        run: yarn
+        run: bun install --frozen-lockfile
 
       - name: Build
-        run: yarn build
+        run: bun run build
 
       - name: Zip build
         run: zip -r build.zip build
@@ -37,4 +37,4 @@ jobs:
           GIT_AUTHOR_EMAIL: ${{ vars.RELEASE_GIT_AUTHOR_EMAIL }}
           GIT_COMMITTER_NAME: ${{ vars.RELEASE_GIT_COMMITTER_NAME }}
           GIT_COMMITTER_EMAIL: ${{ vars.RELEASE_GIT_COMMITTER_EMAIL }}
-        run: npx semantic-release --branches master
+        run: bunx semantic-release --branches master

.github/workflows/unit-tests.yml

@@ -14,19 +14,19 @@ jobs:
       - name: Checkout to repository
         uses: actions/checkout@v4.2.2
 
-      - name: Setup Node
-        uses: actions/setup-node@v4.4.0
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v2
         with:
-          node-version: 20.8.1
+          bun-version: latest
 
       - name: Install dependencies
-        run: yarn
+        run: bun install --frozen-lockfile
 
       - name: Build
-        run: yarn build
+        run: bun run build
 
       - name: Lint
-        run: yarn lint
+        run: bun run lint
 
       - name: Test
-        run: yarn test
+        run: bun run test

.gitignore

@@ -9,6 +9,8 @@
 /coverage
 .env
 
+.cursorrules
+
 # production
 /build
 

.husky/pre-commit

@@ -0,0 +1,3 @@
+#!/usr/bin/env sh
+# Block commit if typecheck or lint fails
+bun run typecheck && bun run lint

CONTRIBUTING.md

@@ -31,15 +31,17 @@ The app is built using [craco](https://github.com/gsoft-inc/craco) (with the [cr
 
 Tests are written and run using the [jest](https://jestjs.io/) framework.
 
-The [yarn](https://yarnpkg.com/) package manager is used to manage dependencies and run scripts specified in `package.json` (`build`, `lint`, `test`, etc.).
+The [Bun](https://bun.sh/) runtime and package manager is used to manage dependencies and run scripts specified in `package.json` (`build`, `lint`, `test`, etc.).
 
 ## Coding style
 
-Source code is linted using [ts-standard](https://github.com/standard/ts-standard) (based on [eslint](https://eslint.org/)) and TypeScript is used with [strict type checking compiler options](https://www.typescriptlang.org/tsconfig#Strict_Type_Checking_Options_6173) enabled.
+Source code is linted and formatted using [Biome](https://biomejs.dev/). TypeScript is used with [strict type checking compiler options](https://www.typescriptlang.org/tsconfig#Strict_Type_Checking_Options_6173) enabled. Semicolons are not used at the end of statements (Biome uses `asNeeded`).
 
-Use the following command to identify potential coding style and type annotation violations:
+Use the following commands to check and fix style:
 
-    $ yarn lint
+    $ bun run lint        # check for issues
+    $ bun run lint:fix    # auto-fix issues
+    $ bun run fmt         # format code
 
 
 ### Documentation

Dockerfile

@@ -10,28 +10,27 @@ RUN apt-get update && \
     curl \
     dumb-init \
     gnupg \
-    nginx && \
+    nginx \
+    unzip && \
     apt-get clean
 
 RUN curl -fsSL https://deb.nodesource.com/setup_21.x | bash - && \
-    curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - && \
-    echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list && \
-    curl -sS https://deb.nodesource.com/setup_21.x | bash - && \
     apt-get update && \
     apt-get install -y --no-install-suggests --no-install-recommends \
-    nodejs \
-    yarn && \
+    nodejs && \
     apt-get clean
 
+# Install Bun (matches packageManager in package.json)
+ENV BUN_INSTALL=/usr/local
+RUN curl -fsSL https://bun.sh/install | bash -
+
 WORKDIR /usr/local/share/mghcomputationalpathology/slim
 
 # Install dependencies first and then include code for efficient caching
 COPY package.json .
-COPY yarn.lock .
+COPY bun.lock .
 
-# There are sometimes weird network errors. Increasing the network timeout
-#  seems to help (see https://github.com/yarnpkg/yarn/issues/5259)
-RUN yarn install --frozen-lockfile --network-timeout 100000
+RUN bun install --frozen-lockfile
 
 COPY craco.config.js .
 COPY tsconfig.json .
@@ -57,7 +56,7 @@ RUN addgroup --system --gid 101 nginx && \
             --shell /bin/false \
             nginx
 
-RUN NODE_OPTIONS=--max_old_space_size=8192 yarn run build && \
+RUN NODE_OPTIONS=--max_old_space_size=8192 bun run build && \
         mkdir -p /var/www/html && \
         cp -R build/* /var/www/html/
 
@@ -82,4 +81,4 @@ RUN useradd -m -s /bin/bash tester && \
 
 USER tester
 
-ENTRYPOINT ["/usr/bin/dumb-init", "--", "yarn", "test"]
+ENTRYPOINT ["/usr/bin/dumb-init", "--", "bun", "run", "test"]

README.md

@@ -16,6 +16,7 @@ It relies on [DICOMweb](https://www.dicomstandard.org/dicomweb/) RESTful service
   - [Display of images](#display-of-images)
   - [Display of image annotations and analysis results](#display-of-image-annotations-and-analysis-results)
   - [Annotation of images](#annotation-of-images)
+  - [Memory Monitoring](#memory-monitoring)
 - [Authentication and Authorization](#autentication-and-authorization)
 - [Configuration](#configuration)
   - [Server Configuration](#server-configuration)
@@ -105,6 +106,22 @@ ROIs are stored as 3D spatial coordinates (SCOORD3D) in millimeter unit accordin
 Specifically, [Image Region](http://dicom.nema.org/medical/dicom/current/output/chtml/part16/chapter_A.html#para_b68aa0a9-d0b1-475c-9630-fbbd48dc581d) is used to store the vector graphic data and [Finding](http://dicom.nema.org/medical/dicom/current/output/chtml/part16/chapter_A.html#para_c4ac1cac-ee86-4a86-865a-8137ebe1bd95) is used to describe what has been annotated using a standard medical terminology such as [SNOMED CT](https://www.snomed.org/).
 The terms that can be chosen by a user can be configured (see [AppConfig.d.ts](src/AppConfig.d.ts)).
 
+### Memory Monitoring
+
+_Slim_ includes automatic memory monitoring to help track browser memory usage when viewing large whole slide images. The memory monitor:
+
+- Displays real-time memory usage in the footer (used memory, heap limit, usage percentage, remaining memory)
+- Automatically monitors memory every 5 seconds using modern browser APIs when available
+- Shows color-coded status indicators (green/orange/red) based on usage levels
+- Issues warnings when memory usage exceeds 80% (high) or 90% (critical)
+- Falls back to Chrome-specific APIs when modern APIs aren't available
+
+The memory footer appears at the bottom of all pages and updates automatically. When memory usage is high, users receive notifications with recommendations to refresh the page or close other tabs.
+
+Memory monitoring is enabled by default and can be disabled via configuration by setting `enableMemoryMonitoring: false` in the application config.
+
+For technical details, see [Memory Monitoring Documentation](docs/MEMORY_MONITORING.md).
+
 ## Autentication and authorization
 
 Users can authenticate and authorize the application to access data via [OpenID Connect (OIDC)](https://openid.net/connect/) based on the [OAuth 2.0](https://oauth.net/2/) protocol using either the [authorization code grant type](https://oauth.net/2/grant-types/authorization-code/) (with [Proof Key for Code Exchange (PKCE)](https://oauth.net/2/pkce/) extension) or the legacy [implicit grant type](https://oauth.net/2/grant-types/implicit/).
@@ -198,13 +215,29 @@ Default values if not specified:
 - `duration`: 5 seconds
 - `top`: 100 pixels
 
+### Memory Monitoring Configuration
+
+Memory monitoring can be enabled or disabled through configuration:
+
+```javascript
+window.config = {
+  // ... other config options ...
+  enableMemoryMonitoring: false, // Set to false to disable memory monitoring footer
+};
+```
+
+- **Default**: Memory monitoring is enabled (`enableMemoryMonitoring: true` or undefined)
+- **Disable**: Set `enableMemoryMonitoring: false` to hide the memory footer and stop monitoring
+
+When enabled, the memory footer appears at the bottom of all pages and monitors memory usage every 5 seconds.
+
 ## Deployment
 
 Download the latest release from [github.com/imagingdatacommons/slim/releases](https://github.com/imagingdatacommons/slim/releases) and then run the following commands to install build dependencies and build the app:
 
 ```none
-yarn install
-PUBLIC_URL=/ yarn build
+bun install
+PUBLIC_URL=/ bun run build
 ```
 
 Once the app has been built, the content of the `build` folder can be directly served by a static web server at the location specified by `PUBLIC_URL` (in this case at `/`).
@@ -341,57 +374,57 @@ For the time being, the legacy implicit grand type has to be used.
 To install requirements and run the app for local development, run the following commands:
 
 ```none
-yarn install
-yarn start
+bun install
+bun run start
 ```
 
 This will serve the app via a development server at [http://localhost:3000](http://localhost:3000) using the default `local` configuration.
 
 The configuration can be specified using the `REACT_APP_CONFIG` environment variable, which can be set either in the `.env` file or directly in the command line:
 
 ```none
-REACT_APP_CONFIG=local yarn start
+REACT_APP_CONFIG=local bun run start
 ```
 
 ## Linking Slim to a Local dicom-microscopy-viewer Library
 
-If you are developing features or fixing bugs that require changes in both Slim and the underlying [`dicom-microscopy-viewer`](https://github.com/ImagingDataCommons/dicom-microscopy-viewer) library, you can use `yarn link` to connect your local Slim project to a local clone of `dicom-microscopy-viewer`. This allows Slim to immediately use the latest local changes from the library without publishing to npm.
+If you are developing features or fixing bugs that require changes in both Slim and the underlying [`dicom-microscopy-viewer`](https://github.com/ImagingDataCommons/dicom-microscopy-viewer) library, you can use `bun link` to connect your local Slim project to a local clone of `dicom-microscopy-viewer`. This allows Slim to immediately use the latest local changes from the library without publishing to npm.
 
 ### Steps
 
 1. **Clone dicom-microscopy-viewer**  
    If you haven't already, clone the `dicom-microscopy-viewer` repository to your machine.
 
-2. **Set up yarn link in dicom-microscopy-viewer**  
+2. **Set up bun link in dicom-microscopy-viewer**  
    In the root directory of your local `dicom-microscopy-viewer` repository, run:
    ```sh
-   yarn link
+   bun link
    ```
 
 3. **Link dicom-microscopy-viewer in Slim**  
    In the root directory of your Slim project, run:
    ```sh
-   yarn link dicom-microscopy-viewer
+   bun link dicom-microscopy-viewer
    ```
 
 4. **Enable live rebuilding in dicom-microscopy-viewer**  
    To automatically rebuild `dicom-microscopy-viewer` when you make changes, run the following command in the `dicom-microscopy-viewer` directory:
    ```sh
-   yarn webpack:dynamic-import:watch
+   bun run webpack:dynamic-import:watch
    ```
    This will watch for file changes and rebuild the library, so Slim can immediately use the updated code.
 
 5. **Run Slim as usual**  
    In the Slim directory, start the development server:
    ```sh
-   yarn start
+   bun run start
    ```
    Slim will now use your locally linked version of `dicom-microscopy-viewer`.
 
 ### Notes
 
-- If you want to unlink and return to the npm-published version, run `yarn unlink dicom-microscopy-viewer` and `yarn install --force` in the Slim directory.
-- Make sure both projects use compatible Node and Yarn versions to avoid dependency issues.
+- If you want to unlink and return to the npm-published version, run `bun unlink dicom-microscopy-viewer` and `bun install` in the Slim directory.
+- Make sure both projects use compatible Bun versions to avoid dependency issues.
 
 ## Citation