Merge branch 'main' into feature-player-filter

.github/workflows/ci.yml

@@ -0,0 +1,98 @@
+name: PullRequestChecker
+
+# Since there are PRs sent from external users, do not trigger automatically but manually
+on:
+  pull_request_target:
+    types: [labeled]
+
+jobs:
+  check:
+    if: contains(github.event.pull_request.labels.*.name, 'run-check')
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout User's PR
+        uses: actions/checkout@v2
+        with:
+          ref: ${{ github.event.pull_request.head.sha }}
+      - name: Use Node.js 18.x
+        uses: actions/setup-node@v2
+        with:
+          node-version: 18.x
+      - name: Install dependencies
+        run: npm install
+      - name: Lint
+        run: npm run lint-check
+      - name: Format
+        run: npm run format-check
+      - name: Test
+        run: npm run test
+
+  remove-label:
+    needs: check
+    if: always()
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+      pull-requests: write
+    steps:
+      - name: Remove run-check label
+        uses: actions/github-script@v5
+        with:
+          script: |
+            const issue_number = context.issue.number;
+            const label = 'run-check';
+            github.rest.issues.removeLabel({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: issue_number,
+              name: label
+            });
+
+  notify-failer:
+    needs: check
+    if: always()
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+      pull-requests: write
+    steps:
+      - name: If CI fails, notify the user who created the PR
+        if: ${{ needs.check.result == 'failure' }}
+        uses: actions/github-script@v5
+        with:
+          script: |
+            const issue_number = context.issue.number;
+            const pr = await github.rest.pulls.get({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              pull_number: issue_number,
+            });
+            const pr_author = pr.data.user.login;
+            const message = `@${pr_author} The CI checks failed. Please review the errors and push fixes.`;
+            github.rest.issues.createComment({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: issue_number,
+              body: message
+            });
+
+  notify-success:
+    needs: check
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+      pull-requests: write
+    steps:
+      - name: If the CI is successful, notify the user who created the PR.
+        if: ${{ needs.check.result == 'success' }}
+        uses: actions/github-script@v5
+        with:
+          script: |
+            const issue_number = context.issue.number;
+            const message = `The CI checks passed.`;
+            github.rest.issues.createComment({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: issue_number,
+              body: message
+            });

package.json

@@ -100,7 +100,9 @@
     "webpack-dev": "webpack --mode development --watch",
     "test": "jest",
     "lint": "eslint \"src/**/*.{js,ts}\"",
-    "format": "prettier --write \"src/**/*.{js,ts,css}\""
+    "format": "prettier --write \"src/**/*.{js,ts,css}\"",
+    "lint-check": "eslint \"src/**/*.{js,ts}\" || (echo \"Lint errors found\" && exit 1)",
+    "format-check": "prettier --check \"src/**/*.ts\" || (echo \"Formatting errors found\" && exit 1)"
   },
   "devDependencies": {
     "@types/jest": "^27.4.1",

src/webview/components/waveform/waveFormComponent.ts

@@ -1,8 +1,11 @@
 import "../../styles/figure.css";
 import AnalyzeService from "../../services/analyzeService";
+import AnalyzeSettingsService from "../../services/analyzeSettingsService";
 import { AnalyzeSettingsProps } from "../../services/analyzeSettingsService";
 
 export default class WaveFormComponent {
+  public static readonly MIN_DATA_POINTS_PER_PIXEL = 5;
+
   constructor(
     componentRootSelector: string,
     width: number,
@@ -21,6 +24,7 @@ export default class WaveFormComponent {
     canvas.height = height;
     const context = canvas.getContext("2d", { alpha: false });
     context.fillStyle = "rgb(160,60,200)";
+    context.strokeStyle = "rgb(160,60,200)";
     componentRoot.appendChild(canvas);
 
     const axisCanvas = document.createElement("canvas");
@@ -101,7 +105,24 @@ export default class WaveFormComponent {
 
       const x = (i / data.length) * width;
       const y = height * (1 - d);
-      context.fillRect(x, y, 1, 1);
+
+      if (
+        data.length >
+        AnalyzeSettingsService.WAVEFORM_CANVAS_WIDTH *
+          WaveFormComponent.MIN_DATA_POINTS_PER_PIXEL
+      ) {
+        context.fillRect(x, y, 1, 1);
+      } else {
+        if (i === 0) {
+          context.beginPath();
+          context.moveTo(x, y);
+        } else if (i === data.length - 1) {
+          context.lineTo(x, y);
+          context.stroke();
+        } else {
+          context.lineTo(x, y);
+        }
+      }
     }
 
     // draw channel label