Support progressive rendering

.github/workflows/check-release.yml

@@ -27,7 +27,7 @@ jobs:
           version_spec: next
 
       - name: Upload Distributions
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v4
         with:
           name: voila-releaser-dist-${{ github.run_number }}
           path: .jupyter_releaser_checkout/dist

.github/workflows/packaging.yml

@@ -46,37 +46,37 @@ jobs:
           sha256sum * | tee SHA256SUMS
 
       - name: Upload distributions
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v4
         with:
           name: dist ${{ github.run_number }}
           path: ./dist
 
   install:
-    runs-on: ${{ matrix.os }}-latest
+    runs-on: ${{ matrix.os }}
     needs: [build]
     strategy:
       fail-fast: false
       matrix:
-        os: [ubuntu, macos, windows]
+        os: [ubuntu-latest, macos-12, windows-latest]
         python: ['3.8', '3.10']
         include:
           - python: '3.8'
             dist: 'voila*.tar.gz'
           - python: '3.10'
             dist: 'voila*.whl'
-          - os: windows
+          - os: windows-latest
             py_cmd: python
-          - os: macos
+          - os: macos-12
             py_cmd: python3
-          - os: ubuntu
+          - os: ubuntu-latest
             py_cmd: python
     steps:
       - name: Install Python
         uses: actions/setup-python@v4
         with:
           python-version: ${{ matrix.python }}
           architecture: 'x64'
-      - uses: actions/download-artifact@v2
+      - uses: actions/download-artifact@v4
         with:
           name: dist ${{ github.run_number }}
           path: ./dist

.github/workflows/ui-tests.yml

@@ -8,8 +8,9 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        python-version: [3.8]
+        python-version: ['3.10']
         node-version: [18.x]
+        progressive_rendering: [false, true]
       fail-fast: false
 
     steps:
@@ -31,7 +32,7 @@ jobs:
       - name: Launch Voila
         run: |
           # Mount a volume to overwrite the server configuration
-          jlpm start 2>&1 > /tmp/voila_server.log &
+          jlpm start --progressive_rendering=${{ matrix.progressive_rendering }} 2>&1 > /tmp/voila_server.log &
         working-directory: ui-tests
 
       - name: Install browser
@@ -45,30 +46,46 @@ jobs:
           timeout: 360000
 
       - name: Test
+        env:
+          PROGRESSIVE_RENDERING: ${{ matrix.progressive_rendering }}
         run: jlpm run test
         working-directory: ui-tests
 
+      - name: Set test report name for progressive rendering
+        if: always() && matrix.progressive_rendering == true
+        run: |
+          echo "TEST_REPORT_NAME=progressive-voila-test-report" >> $GITHUB_ENV
+          echo "TEST_ASSETS_NAME=progressive-voila-test-assets" >> $GITHUB_ENV
+          echo "TEST_BENCHMARK_NAME=progressive-voila-test-benchmark" >> $GITHUB_ENV
+
+      - name: Set test report name for non-progressive rendering
+        if: always() && matrix.progressive_rendering == false
+        run: |
+          echo "TEST_REPORT_NAME=voila-test-report" >> $GITHUB_ENV
+          echo "TEST_ASSETS_NAME=voila-test-assets" >> $GITHUB_ENV
+          echo "TEST_BENCHMARK_NAME=voila-test-benchmark" >> $GITHUB_ENV
+
       - name: Upload Playwright Test assets
         if: always()
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v4
         with:
-          name: voila-test-assets
+          name: ${{ env.TEST_ASSETS_NAME }}
           path: |
             ui-tests/test-results
 
       - name: Upload Playwright Benchmark report
         if: always()
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v4
         with:
-          name: voila-benchmark-report
+          name: ${{ env.TEST_BENCHMARK_NAME }}
           path: |
             ui-tests/benchmark-results
 
       - name: Upload Playwright Test report
         if: always()
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v4
         with:
-          name: voila-test-report
+          name: ${{ env.TEST_REPORT_NAME }}
           path: |
             ui-tests/playwright-report
 

.github/workflows/update_galata_references.yaml

@@ -15,29 +15,71 @@ defaults:
 jobs:
   update-reference-screenshots:
     name: Update Galata References
-    if: ${{ github.event.issue.pull_request && contains(github.event.comment.body, 'update galata references') }}
+    if: >
+      (
+        github.event.comment.author_association == 'OWNER' ||
+        github.event.comment.author_association == 'COLLABORATOR' ||
+        github.event.comment.author_association == 'MEMBER'
+      ) && github.event.issue.pull_request && contains(github.event.comment.body, 'please update snapshots')
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        python-version: [3.8]
-        node-version: [16.x]
+        python-version: [3.10]
+        node-version: [18.x]
 
     steps:
-      - name: Base Setup
-        uses: jupyterlab/maintainer-tools/.github/actions/base-setup@v1
+
+      - name: React to the triggering comment
+        run: |
+          gh api repos/${{ github.repository }}/issues/comments/${{ github.event.comment.id }}/reactions --raw-field 'content=+1'
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Configure git to use https
-        run: git config --global hub.protocol https
+      - name: Get PR Info
+        id: pr
+        env:
+          PR_NUMBER: ${{ github.event.issue.number }}
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GH_REPO: ${{ github.repository }}
+          COMMENT_AT: ${{ github.event.comment.created_at }}
+        run: |
+          pr="$(gh api /repos/${GH_REPO}/pulls/${PR_NUMBER})"
+          head_sha="$(echo "$pr" | jq -r .head.sha)"
+          pushed_at="$(echo "$pr" | jq -r .pushed_at)"
+
+          if [[ $(date -d "$pushed_at" +%s) -gt $(date -d "$COMMENT_AT" +%s) ]]; then
+              echo "Updating is not allowed because the PR was pushed to (at $pushed_at) after the triggering comment was issued (at $COMMENT_AT)"
+              exit 1
+          fi
+
+          echo "head_sha=$head_sha" >> $GITHUB_OUTPUT
 
       - name: Checkout the branch from the PR that triggered the job
-        run: hub pr checkout ${{ github.event.issue.number }}
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: gh pr checkout ${{ github.event.issue.number }}
+
+      - name: Validate the fetched branch HEAD revision
+        env:
+          EXPECTED_SHA: ${{ steps.pr.outputs.head_sha }}
+        run: |
+          actual_sha="$(git rev-parse HEAD)"
+
+          if [[ "$actual_sha" != "$EXPECTED_SHA" ]]; then
+              echo "The HEAD of the checked out branch ($actual_sha) differs from the HEAD commit available at the time when trigger comment was submitted ($EXPECTED_SHA)"
+              exit 1
+          fi
+
+      - name: Base Setup
+        uses: jupyterlab/maintainer-tools/.github/actions/base-setup@v1
+
+      - name: Configure git to use https
+        run: git config --global hub.protocol https
 
       - name: Install dependencies
         run: |
@@ -54,3 +96,11 @@ jobs:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           server_url: http-get://localhost:8866/
           test_folder: ui-tests
+
+      - uses: jupyterlab/maintainer-tools/.github/actions/update-snapshots@main
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          server_url: http-get://localhost:8866/
+          test_folder: ui-tests
+          start_server_script : start:progressive_rendering
+          update_script: test:update:progressive_rendering

docs/customize.md

@@ -665,3 +665,33 @@ By default, Voilà will attempt to resolve a kernel spec to the best fit, based
 ```py
 c.VoilaConfiguration.attempt_fix_notebook = False
 ```
+
+## Changing dashboard rendering technique
+
+There are two dashboard rendering techniques in Voilà:
+
+- **Blocking rendering** (default): In this method, Voilà completes the execution of the entire notebook before displaying the dashboard. It is ideal for lightweight notebooks, as a loading spinner is shown until execution finishes..
+- **Progressive rendering** (introduced in Voilà 0.6): With this method, the dashboard appears immediately, with placeholders filling the cell outputs. These outputs are updated as each cell is executed by the kernel.
+
+To start Voilà with progressive rendering mode using CLI:
+
+```bash
+voila ... --progressive_rendering=True
+```
+
+or using `voila.json` file
+
+```python
+# voila.json
+{
+   ...
+   "VoilaConfiguration": {
+      "progressive_rendering": true,
+      ...
+   }
+}
+```
+
+:::{warning}
+Progressive rendering mode is incompatible with the preheated kernels functionality.
+:::

packages/voila/src/app.ts

@@ -10,7 +10,7 @@ import { PageConfig } from '@jupyterlab/coreutils';
 
 import { IRenderMime } from '@jupyterlab/rendermime';
 
-import { KernelWidgetManager } from '@jupyter-widgets/jupyterlab-manager';
+import { VoilaWidgetManager } from './plugins/widget';
 
 import { IShell, VoilaShell } from './shell';
 
@@ -121,23 +121,23 @@ export class VoilaApp extends JupyterFrontEnd<IShell> {
   /**
    * A promise that resolves when the Voila Widget Manager is created
    */
-  get widgetManagerPromise(): PromiseDelegate<KernelWidgetManager> {
+  get widgetManagerPromise(): PromiseDelegate<VoilaWidgetManager> {
     return this._widgetManagerPromise;
   }
 
-  set widgetManager(manager: KernelWidgetManager | null) {
+  set widgetManager(manager: VoilaWidgetManager | null) {
     this._widgetManager = manager;
     if (this._widgetManager) {
       this._widgetManagerPromise.resolve(this._widgetManager);
     }
   }
 
-  get widgetManager(): KernelWidgetManager | null {
+  get widgetManager(): VoilaWidgetManager | null {
     return this._widgetManager;
   }
 
-  protected _widgetManager: KernelWidgetManager | null = null;
-  protected _widgetManagerPromise = new PromiseDelegate<KernelWidgetManager>();
+  protected _widgetManager: VoilaWidgetManager | null = null;
+  protected _widgetManagerPromise = new PromiseDelegate<VoilaWidgetManager>();
 }
 
 /**