Timeline resource streaming (#1929)

Author: dandelany

docs/TESTING.md

@@ -30,6 +30,14 @@ If this is your first time running the tests you may need to install the Playwri
 npx playwright install
 ```
 
+#### Auth failures
+
+If several tests are failing due to auth issues, you may need to clear your Playwright cache first:
+
+```sh
+npm run test:e2e:clear-cache
+```
+
 #### New backend service:
 
 If a new backend service has been added to PlanDev, make sure to update the [docker-compose-test.yml](../docker-compose-test.yml) in order for the CI to be able to spin up the backend correctly.

e2e-tests/fixtures/Plan.ts

@@ -467,6 +467,7 @@ export class Plan {
   async goto(planId = this.plans.planId) {
     await this.page.goto(`/plans/${planId}`, { waitUntil: 'load' });
     await this.page.waitForURL(`/plans/${planId}`, { waitUntil: 'load' });
+    await this.planTitle.waitFor({ state: 'visible' });
     await this.waitForTimelineLoading();
   }
 

e2e-tests/tests/model-derivation-group.test.ts

@@ -89,6 +89,7 @@ test.afterAll(async () => {
 
 test.describe.serial('Model Derivation Group Linking', () => {
   test('Derivation groups can be linked to a model and show in plan', async ({ baseURL }) => {
+    test.setTimeout(60 * 1000);
     // check the current plan...
     await originalPlan.goto();
     await setup.page.waitForURL(`${baseURL}/plans/${originalPlanId}`, { timeout: 3000 });
@@ -115,14 +116,15 @@ test.describe.serial('Model Derivation Group Linking', () => {
     // now, create a new plan
     await setup.plans.goto();
     await setup.page.waitForURL(`${baseURL}/plans`, { timeout: 3000 });
-    await setup.plans.createPlan('secondPlan', setup.modelName);
+    const newPlanName = 'secondPlan';
+    await setup.plans.createPlan(newPlanName, setup.modelName);
     newPlan = new Plan(
       setup.page,
       setup.plans,
       setup.constraints,
       setup.schedulingGoals,
       setup.schedulingConditions,
-      setup.planName,
+      newPlanName,
     );
     newPlanId = Number(setup.plans.planId);
 

e2e-tests/tests/plan-external-source.test.ts

@@ -1,6 +1,7 @@
 import test, { expect } from '@playwright/test';
 import { ExternalSources } from '../fixtures/ExternalSources.js';
 import { PanelNames, Plan } from '../fixtures/Plan.js';
+import { anyCanvasHasContent } from '../utilities/canvas.js';
 import {
   cleanupApiResources,
   closeBrowserResources,
@@ -157,22 +158,7 @@ test.describe.serial('Plan External Sources', () => {
   });
 
   test('Zero-duration events are properly drawn in the timeline', async () => {
-    // Get the current timeline canvas' pixels - use a set to just determine that non-0 RGB values exist
-    const doPixelsExist: boolean = await setup.page.evaluate(() => {
-      const canvas = document.querySelector('canvas');
-      if (canvas !== null && canvas !== undefined) {
-        const context = canvas.getContext('2d');
-        if (context !== null && context !== undefined) {
-          const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
-          const pixelData = Array.from(imageData.data);
-          return pixelData.length > 0 ? true : false;
-          // Assert that the number of unique RGB pixel values for the canvas is more than 0 (i.e., not empty)
-        }
-      }
-      return false;
-    });
-
-    expect(doPixelsExist).toBeTruthy();
+    expect(await anyCanvasHasContent(setup.page, '[data-component-name="TimelinePanel"] canvas')).toBeTruthy();
   });
 
   test('Linked derivation groups should be expandable in panel', async () => {

e2e-tests/tests/simulation.test.ts

@@ -2,6 +2,7 @@ import test, { expect } from '@playwright/test';
 import { Status } from '../../src/enums/status.js';
 import { PanelNames } from '../fixtures/Plan.js';
 import { setupTest, teardownTest, type FullSetupResult } from '../utilities/api.js';
+import { anyCanvasHasContent } from '../utilities/canvas.js';
 
 let setup: FullSetupResult;
 
@@ -61,9 +62,31 @@ test.describe.serial('Simulation', async () => {
     await setup.plan.showPanel(PanelNames.SIMULATION, true);
   });
 
+  // Smoke test for the windowed-pull pipeline: indicator settles cleanly and
+  // canvases render non-transparent content (catches the "blank plot" bug an
+  // indicator-only check would miss).
+  test(`Streaming pipeline: indicator settles + canvases render across two re-sims`, async () => {
+    const timelineErrorIndicator = setup.plan.page.getByRole('status', { name: 'Timeline data error' });
+    const timelineLoadingIndicator = setup.plan.page.getByRole('status', { name: 'Timeline loading' });
+    const timelineCanvasContent = () => anyCanvasHasContent(setup.page, '[data-component-name="TimelinePanel"] canvas');
+
+    await setup.plan.reRunSimulation();
+    await expect(timelineErrorIndicator).not.toBeVisible();
+    await expect(timelineLoadingIndicator).not.toBeVisible();
+    await expect.poll(timelineCanvasContent, { timeout: 10000 }).toBe(true);
+
+    await setup.plan.reRunSimulation();
+    await expect(timelineErrorIndicator).not.toBeVisible();
+    await expect(timelineLoadingIndicator).not.toBeVisible();
+    await expect.poll(timelineCanvasContent, { timeout: 10000 }).toBe(true);
+  });
+
   test(`Plans with an invalid activity should fail simulation`, async () => {
+    const timelineLoadingIndicator = setup.plan.page.getByRole('status', { name: 'Timeline loading' });
     await setup.plan.addActivityByDragAndDrop('BakeBananaBread');
     await setup.plan.runSimulation(Status.Failed);
+    // Regression: indicator must settle for terminal-null sims too.
+    await expect(timelineLoadingIndicator).not.toBeVisible();
   });
 
   test(`Modified plans should indicate that simulation is out of date`, async () => {

e2e-tests/utilities/canvas.ts

@@ -0,0 +1,25 @@
+import type { Page } from '@playwright/test';
+
+/**
+ * True if any canvas matched by `selector` has a pixel with non-zero alpha.
+ * Stronger than checking the canvas exists — a transparent canvas would
+ * pass that. Pair with `expect.poll` for post-async-update checks.
+ */
+export function anyCanvasHasContent(page: Page, selector: string = 'canvas'): Promise<boolean> {
+  return page.evaluate(sel => {
+    const canvases = document.querySelectorAll<HTMLCanvasElement>(sel);
+    for (const canvas of Array.from(canvases)) {
+      const ctx = canvas.getContext('2d');
+      if (!ctx) {
+        continue;
+      }
+      const data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
+      for (let i = 3; i < data.length; i += 4) {
+        if (data[i] > 0) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }, selector);
+}

src/components/ResourceList.svelte

@@ -4,12 +4,7 @@
   import CloseIcon from '@nasa-jpl/stellar/icons/close.svg?component';
   import UploadIcon from '@nasa-jpl/stellar/icons/upload.svg?component';
   import { plan } from '../stores/plan';
-  import {
-    allResourceTypes,
-    fetchingResourcesExternal,
-    resourceTypesLoading,
-    simulationDatasetId,
-  } from '../stores/simulation';
+  import { allResourceTypes, resourceTypesLoading, simulationDatasetId } from '../stores/simulation';
   import type { User } from '../types/app';
   import type { ResourceType } from '../types/simulation';
   import type { TimelineItemType } from '../types/timeline';
@@ -34,7 +29,7 @@
   let loading: boolean = false;
 
   $: resourceDataTypes = [...new Set($allResourceTypes.map(t => t.schema.type))];
-  $: loading = $fetchingResourcesExternal || $resourceTypesLoading;
+  $: loading = $resourceTypesLoading;
   $: if (user !== null && $plan !== null) {
     hasUploadPermission = featurePermissions.externalResources.canCreate(user, $plan);
   }