Release v2.4.0

.gemini/skills/issue-creator/SKILL.md

@@ -0,0 +1,46 @@
+---
+name: issue-creator
+description: Specialized in creating high-quality GitHub issues following repository-specific templates for bugs and feature requests. Use when asked to report a bug or suggest a feature.
+---
+# Issue Creator Skill
+
+This skill provides a structured workflow for Gemini CLI to generate and submit well-formatted GitHub issues based on project-specific templates.
+
+## Objective
+To streamline the issue creation process by automatically gathering necessary information and applying correct templates, ensuring all relevant details for reproduction or feature justification are captured.
+
+## Workflow Instructions
+
+When invoked to create an issue (bug report or feature request), follow these steps:
+
+1. **Identify Issue Type:**
+   - Determine if the request is for a **Bug Report** or a **Feature Request**.
+
+2. **Gather Required Information:**
+   - **For Bug Reports:**
+     - A clear and concise **Title**.
+     - **Description:** What is the bug?
+     - **Steps to Reproduce:** List steps sequentially.
+     - **Expected vs. Actual Behavior:** What should have happened vs. what actually happened.
+     - **Environment Details:** OS, Browser, Version (if applicable).
+     - **Additional Context:** Any other relevant information.
+   - **For Feature Requests:**
+     - A clear and concise **Title**.
+     - **Problem Statement:** What problem does this feature solve?
+     - **Proposed Solution:** Describe the desired functionality.
+     - **Alternatives Considered:** Any other ways to solve the problem.
+     - **Additional Context:** Any other relevant information.
+
+3. **Format the Issue Body:**
+   - Use the repository's templates found in `.github/ISSUE_TEMPLATE/` as a base for formatting the Markdown body.
+   - Ensure clear headings and bullet points for readability.
+
+4. **Execute Creation:**
+   - Use `gh issue create --repo epam/med3web --title "TITLE" --body "BODY"` to create the issue.
+   - If the user provides labels or assignees, include them using `--label` and `--assignee` flags.
+
+## Constraints
+- **Accuracy:** Ensure all "To Reproduce" steps are logical and based on the reported problem.
+- **Completeness:** Do not skip sections from the template unless they are truly irrelevant.
+- **Tone:** Maintain a professional and helpful tone in the issue description.
+- **Verification:** Confirm with the user if any critical information is missing before submitting the issue.

.gemini/skills/pr-reviewer/SKILL.md

@@ -0,0 +1,44 @@
+---
+name: pr-reviewer
+description: Generates high-quality PR descriptions and reviews. Use when asked to review a Pull Request, provide its purpose, value, architecture, weak points, or assess its current state considering latest comments and fixes.
+---
+# PR Reviewer Skill
+
+This skill provides a structured workflow for Gemini CLI to analyze a Pull Request and generate a comprehensive review or description.
+
+## Objective
+To provide a high-quality summary and critical analysis of a Pull Request, incorporating recent comments and code changes to reflect its actual, current state.
+
+## Workflow Instructions
+
+When invoked to review a PR or generate a description, follow these steps systematically:
+
+1. **Gather PR Context & Metadata:**
+   - Run `gh pr view <PR_NUMBER_OR_URL>` to understand the title, description, and high-level status.
+   - Run `gh pr comments <PR_NUMBER_OR_URL>` or `gh pr view <PR_NUMBER_OR_URL> --comments` to read the latest feedback and discussion. This is crucial for understanding the current state and any unresolved issues.
+
+2. **Analyze Code Changes (The Diff):**
+   - Run `gh pr diff <PR_NUMBER_OR_URL>` to see the exact code modifications.
+   - Analyze the diff carefully. Pay special attention to how recent fixes address the comments retrieved in Step 1.
+
+3. **Synthesize the Review / Description:**
+   Construct a response formatted in Markdown with the following structured sections:
+
+   ### 🎯 Purpose
+   - A concise, one-sentence summary of what this PR does and why it was opened.
+
+   ### 💎 Value Brought
+   - Explain the tangible benefits this PR delivers to the user, the developer experience, or the business (e.g., fixes a critical bug, improves rendering performance, adds a requested feature).
+
+   ### 🏗️ Architecture & Implementation Strategy
+   - Summarize *how* the problem was solved. Mention key files modified, new patterns introduced, or existing systems altered.
+
+   ### ⚠️ Disadvantages & Weak Points
+   - Provide a critical analysis. Point out potential edge cases, missing test coverage, performance bottlenecks, or architectural compromises. If the PR is perfect, explicitly state that no obvious weak points were found.
+
+   ### 💬 Current State & Recent Adjustments
+   - Summarize the latest review comments and how the most recent code changes address them. State clearly if the PR is ready for merge, blocked, or requires further action based on the discussion.
+
+## Constraints
+- Focus on the *diff* and *comments*. Do not hallucinate context not present in the PR.
+- If the diff is too large, suggest reviewing it file-by-file or focusing only on critical areas.

.github/workflows/aws-dev.yml

@@ -14,17 +14,17 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js 16.x
-        uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
+      - name: Use Node.js 20.x
+        uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version: 20.x
       - name: Reconfigure git to use HTTP authentication
         run: >
           git config --global url."https://github.com/".insteadOf
           ssh://git@github.com/
       - name: Cache Node.js modules
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: ~/.npm
           key: ${{ runner.OS }}-node-${{ hashFiles('**/package-lock.json') }}
@@ -33,7 +33,7 @@ jobs:
             ${{ runner.OS }}-
       - run: node --version
       - run: npm --version
-      - run: npm ci --no-optional
+      - run: npm ci
       - run: npm run build
       - run: npm run lint
       - run: npm test
@@ -47,7 +47,7 @@ jobs:
           aws-region: eu-central-1
       - name: Copy files to the test website with the AWS CLI
         run: |
-          aws s3 sync ./build/ s3://mri-viewer-dev --delete
+          aws s3 sync ./dist/ s3://mri-viewer-dev --delete
       - name: Invalidate cache with the AWS CLI
         run: |
           aws cloudfront create-invalidation --distribution-id E361BUPYLO4Y4S --paths "/*"

.github/workflows/aws-prd.yml

@@ -14,17 +14,17 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js 16.x
-        uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
+      - name: Use Node.js 20.x
+        uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version: 20.x
       - name: Reconfigure git to use HTTP authentication
         run: >
           git config --global url."https://github.com/".insteadOf
           ssh://git@github.com/
       - name: Cache Node.js modules
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: ~/.npm
           key: ${{ runner.OS }}-node-${{ hashFiles('**/package-lock.json') }}
@@ -33,7 +33,7 @@ jobs:
             ${{ runner.OS }}-
       - run: node --version
       - run: npm --version
-      - run: npm ci --no-optional
+      - run: npm ci
       - run: npm run build
       - run: npm run lint
       - run: npm test
@@ -47,7 +47,7 @@ jobs:
           aws-region: eu-central-1
       - name: Copy files to the test website with the AWS CLI
         run: |
-          aws s3 sync ./build/ s3://mri-viewer-prd --delete
+          aws s3 sync ./dist/ s3://mri-viewer-prd --delete
       - name: Invalidate cache with the AWS CLI
         run: |
           aws cloudfront create-invalidation --distribution-id E3O0OMPB0HHSIG --paths "/*"

.github/workflows/aws-tst.yml

@@ -10,17 +10,17 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js 16.x
-        uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
+      - name: Use Node.js 20.x
+        uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version: 20.x
       - name: Reconfigure git to use HTTP authentication
         run: >
           git config --global url."https://github.com/".insteadOf
           ssh://git@github.com/
       - name: Cache Node.js modules
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: ~/.npm
           key: ${{ runner.OS }}-node-${{ hashFiles('**/package-lock.json') }}
@@ -29,7 +29,7 @@ jobs:
             ${{ runner.OS }}-
       - run: node --version
       - run: npm --version
-      - run: npm ci --no-optional
+      - run: npm ci
       - run: npm run build
       - run: npm run lint
       - run: npm test
@@ -43,7 +43,7 @@ jobs:
           aws-region: eu-central-1
       - name: Copy files to the test website with the AWS CLI
         run: |
-          aws s3 sync ./build/ s3://mri-viewer-tst --delete
+          aws s3 sync ./dist/ s3://mri-viewer-tst --delete
       - name: Invalidate cache with the AWS CLI
         run: |
           aws cloudfront create-invalidation --distribution-id E1JDJAC4CVCUAO --paths "/*"

.github/workflows/build.yml

@@ -13,17 +13,17 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js 16.x
-        uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
+      - name: Use Node.js 20.x
+        uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version: 20.x
       - name: Reconfigure git to use HTTP authentication
         run: >
           git config --global url."https://github.com/".insteadOf
           ssh://git@github.com/
       - name: Cache Node.js modules
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: ~/.npm
           key: ${{ runner.OS }}-node-${{ hashFiles('**/package-lock.json') }}
@@ -32,7 +32,7 @@ jobs:
             ${{ runner.OS }}-
       - run: node --version
       - run: npm --version
-      - run: npm ci --no-optional
+      - run: npm ci
       - run: npm run build
       - run: npm run lint
       - run: npm test

.github/workflows/codeql-analysis.yml

@@ -35,11 +35,11 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@v2
+        uses: github/codeql-action/init@v3
         with:
           languages: ${{ matrix.language }}
           # If you wish to specify custom queries, you can do so here or in a config file.
@@ -50,7 +50,7 @@ jobs:
       # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
       # If this step fails, then you should remove it and run the build manually (see below)
       - name: Autobuild
-        uses: github/codeql-action/autobuild@v2
+        uses: github/codeql-action/autobuild@v3
 
       # ℹ️ Command-line programs to run using the OS shell.
       # 📚 https://git.io/JvXDl
@@ -64,4 +64,4 @@ jobs:
       #   make release
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v2
+        uses: github/codeql-action/analyze@v3

.github/workflows/playwright.yml

@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ develop, master ]
+  pull_request:
+    branches: [ develop, master ]
+jobs:
+  test:
+    timeout-minutes: 20
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: 20
+    - name: Install Docker Compose
+      run: sudo apt-get update && sudo apt-get install -y docker-compose
+    - name: Prepare for tests run
+      run: cd e2e-tests && npm run docker:build
+    - name: Run Playwright tests
+      run: cd e2e-tests && npm run docker:test
+    - uses: actions/upload-artifact@v4
+      if: ${{ !cancelled() }}
+      with:
+        name: playwright-report
+        path: e2e-tests/playwright-report/
+        retention-days: 30

.github/workflows/release.yml

@@ -10,7 +10,7 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
       - name: Fetch all history for all tags and branches
         run: git fetch --prune --unshallow
@@ -24,13 +24,13 @@ jobs:
         uses: gittools/actions/gitversion/execute@v0.9.7
         id: gitversion
 
-      - name: Use Node.js 16
-        uses: actions/setup-node@v1
+      - name: Use Node.js 20
+        uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version: 20.x
 
       - name: Cache Node.js modules
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: ~/.npm
           key: ${{ runner.OS }}-node-${{ hashFiles('**/package-lock.json') }}
@@ -51,17 +51,17 @@ jobs:
       - run: mv ./build ./docker/build
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v1
+        uses: docker/setup-buildx-action@v2
 
       - name: Login to DockerHub
-        uses: docker/login-action@v1
+        uses: docker/login-action@v2
         with:
           username: ${{ secrets.DOCKER_HUB_USER }}
           password: ${{ secrets.DOCKER_HUB_TOKEN }}
 
       - name: Build and push
         id: docker_build
-        uses: docker/build-push-action@v2
+        uses: docker/build-push-action@v5
         with:
           context: ./docker/
           file: ./docker/Dockerfile

CONTRIBUTING.md

@@ -54,3 +54,33 @@ export default {
 ```
 Demo data should have at least 32 dcm files (slices).
 
+## E2E testing
+
+### Overview
+E2E testing is based on Playwright framework. Tests execution is configured to run in Chrome browser on Linux OS using docker.
+
+### Run tests locally in docker
+It needs to update screenshots or to check the result in same environment as in CI/CD pipeline.
+
+1. Open terminal
+2. Go to e2e-tests folder - `cd e2e-tests`
+3. Prepare project for testing - `npm run docker:build`
+4. Run test in docker 
+   - Using "test" script to see the test result and log - `test=<test_file_name>:<test_row_number> npm run docker:test` (e.g. `test=test.spec.ts:10 npm run docker:test`)
+   - Using "test:update" script to generate screenshots - `test=<test_file_name>:<test_row_number> npm run docker:test:update` (e.g. `test=test.spec.ts:10 npm run docker:test:update`)
+
+### Debug tests locally without docker
+It needs to go through the tests step by step and visually check the test behaviour in the browser.
+
+1. Open terminal
+2. Go to e2e-tests folder - `cd e2e-tests`
+3. Run test in debug mode locally without docker - `npm run test:debug -- <test_file_name>:<test_row_number>` (e.g. `npm run test:debug -- test1.spec.ts:10`)
+   - If you see such error please follow the instructions provided in it and install playwrite locally
+     ![error-tests-exec-1.png](docs/images/error-tests-exec-1.png)
+
+### Additional information
+
+#### Detailed commands description
+- `npm run docker:build` will create docker images for application and for testing. It will also run scripts to prepare environment (install dependencies for application and testing and build application).
+- `[test=<test_file_name>:<test_row_number>] npm run docker:test` will run tests in docker container.
+- `[test=<test_file_name>:<test_row_number>] npm run docker:test:updage` will run tests in docker container and generate screenshots if it does not exist or differs from existing one.