Add loaded meshes to sharing link

.circleci/config.yml

@@ -247,6 +247,7 @@ jobs:
   nightly:
     docker:
       - image: scalableminds/puppeteer:master
+    resource_class: large
     steps:
       - checkout
       - run:

docs/sharing.md

@@ -124,33 +124,57 @@ To get the sharing link of an annotation, follow the same steps as for changing
 
 #### Sharing Link Format
 
-As already indicated, the sharing link encodes certain properties, like the current position, rotation, zoom, and active mapping to ensure that users you share the link with see the same things you saw when you copied the link. Alternatively, the link can be crafted manually or programmatically to direct users to specific locations in a dataset. The information is json encoded in the URL fragment and has the following format (flow type definition):
-
-```javascript
-type MappingType = "JSON" | "HDF5";
-type ViewMode = "orthogonal" | "oblique" | "flight" | "volume";
-type Vector3 = [number, number, number];
-
-type UrlStateByLayer = {
-  [layerName: string]: {
-    mappingInfo?: {
-      mappingName: string,
-      mappingType: MappingType,
-      agglomerateIdsToImport?: [number],
+As already indicated, the sharing link encodes certain properties, like the current position, rotation, zoom, active mapping, and visible meshes to ensure that users you share the link with see the same things you saw when you copied the link. Alternatively, the link can be crafted manually or programmatically to direct users to specific locations in a dataset. The information is json encoded in the URL fragment and has the following format (flow type definition):
+
+<details>
+  <summary>URL Fragment Format</summary>
+  ```javascript
+  type MappingType = "JSON" | "HDF5";
+  type ViewMode = "orthogonal" | "oblique" | "flight" | "volume";
+  type Vector3 = [number, number, number];
+
+  type BaseMeshUrlDescriptor = {|
+    +segmentId: number,
+    +seedPosition: Vector3,
+  |};
+  type AdHocMeshUrlDescriptor = {|
+    ...BaseMeshUrlDescriptor,
+    +isPrecomputed: false,
+    mappingName: ?string,
+    mappingType: ?MappingType,
+  |};
+  type PrecomputedMeshUrlDescriptor = {|
+    ...BaseMeshUrlDescriptor,
+    +isPrecomputed: true,
+    meshFileName: string,
+  |};
+  type MeshUrlDescriptor = AdHocMeshUrlDescriptor | PrecomputedMeshUrlDescriptor;
+
+  type UrlStateByLayer = {
+    [layerName: string]: {
+      meshInfo?: {
+        meshFileName: ?string,
+        meshes: Array<MeshUrlDescriptor>,
+      },
+      mappingInfo?: {
+        mappingName: string,
+        mappingType: MappingType,
+        agglomerateIdsToImport?: Array<number>,
+      },
     },
-  },
-};
-
-type UrlManagerState = {|
-  position?: Vector3,
-  mode?: ViewMode,
-  zoomStep?: number,
-  activeNode?: number,
-  rotation?: Vector3,
-  stateByLayer?: UrlStateByLayer,
-|};
-
-```
+  };
+
+  type UrlManagerState = {|
+    position?: Vector3,
+    mode?: ViewMode,
+    zoomStep?: number,
+    activeNode?: number,
+    rotation?: Vector3,
+    stateByLayer?: UrlStateByLayer,
+  |};
+
+  ```
+</details>
 
 To avoid having to create annotations in advance when programmatically crafting links, a sandbox tracing can be used. A sandbox tracing is always accessible through the same URL and offers all available tracing features, however, changes are not saved. At any point, users can decide to copy the current state to their account. The sandbox can be accessed at `<webknossos_host>/datasets/<organization>/<dataset>/sandbox/skeleton`.
 

frontend/javascripts/test/puppeteer/dataset_rendering.screenshot.js

@@ -5,7 +5,7 @@ import fetch, { Headers, Request, Response, FetchError } from "node-fetch";
 import path from "path";
 import puppeteer, { type Browser } from "puppeteer";
 
-import { compareScreenshot } from "./screenshot_helpers";
+import { compareScreenshot, isPixelEquivalent } from "./screenshot_helpers";
 import {
   screenshotDataset,
   screenshotDatasetWithMapping,
@@ -61,9 +61,11 @@ test.beforeEach(async t => {
       "--no-sandbox",
       "--disable-setuid-sandbox",
       "--disable-dev-shm-usage",
+      "--use-gl=swiftshader",
     ],
     dumpio: true,
   });
+  console.log(`\nRunning chrome version ${await t.context.browser.version()}\n`);
   global.Headers = Headers;
   global.fetch = fetch;
   global.Request = Request;
@@ -89,6 +91,8 @@ const viewOverrides: { [key: string]: string } = {
   "Multi-Channel-Test": "1201,1072,7,0,0.683",
   "test-agglomerate-file":
     '{"position":[60,60,60],"mode":"orthogonal","zoomStep":0.5,"stateByLayer":{"segmentation":{"mappingInfo":{"mappingName":"agglomerate_view_70","mappingType":"HDF5","agglomerateIdsToImport":[1, 6]}}}}',
+  "test-agglomerate-file-with-meshes":
+    '{"position":[63,67,118],"mode":"orthogonal","zoomStep":0.826,"stateByLayer":{"segmentation":{"meshInfo":{"meshFileName":"meshfile-with-name","meshes":[{"segmentId":4,"seedPosition":[64,75,118],"isPrecomputed":true,"meshFileName":"meshfile-with-name"},{"segmentId":12,"seedPosition":[107,125,118],"isPrecomputed":false,"mappingName":"agglomerate_view_70","mappingType":"HDF5"},{"segmentId":79,"seedPosition":[110,78,118],"isPrecomputed":false,"mappingName":null,"mappingType":null}]}}}}',
 };
 
 const datasetConfigOverrides: { [key: string]: DatasetConfiguration } = {
@@ -128,16 +132,10 @@ async function withRetry(
       resolveFn(condition);
       return;
     }
+    console.error(`Test failed, retrying. This will be attempt ${i + 2}/${retryCount}.`);
   }
 }
 
-function isPixelEquivalent(changedPixels, width, height) {
-  // There may be a difference of 0.1 %
-  const allowedThreshold = 0.1 / 100;
-  const allowedChangedPixel = allowedThreshold * width * height;
-  return changedPixels < allowedChangedPixel;
-}
-
 datasetNames.map(async datasetName => {
   test.serial(`it should render dataset ${datasetName} correctly`, async t => {
     await withRetry(
@@ -274,6 +272,41 @@ test.serial(
   },
 );
 
+test.serial(
+  "it should render a dataset linked to with ad-hoc and precomputed meshes correctly",
+  async t => {
+    const datasetName = "test-agglomerate-file";
+    const viewOverride = viewOverrides["test-agglomerate-file-with-meshes"];
+    await withRetry(
+      3,
+      async () => {
+        const datasetId = { name: datasetName, owningOrganization: "sample_organization" };
+        const { screenshot, width, height } = await screenshotDataset(
+          await getNewPage(t.context.browser),
+          URL,
+          datasetId,
+          viewOverride,
+        );
+        const changedPixels = await compareScreenshot(
+          screenshot,
+          width,
+          height,
+          BASE_PATH,
+          `${datasetName}_with_meshes_link`,
+        );
+
+        return isPixelEquivalent(changedPixels, width, height);
+      },
+      condition => {
+        t.true(
+          condition,
+          `Dataset with name: "${datasetName}", ad-hoc and precomputed meshes does not look the same.`,
+        );
+      },
+    );
+  },
+);
+
 test.afterEach(async t => {
   await t.context.browser.close();
 });

frontend/javascripts/test/puppeteer/dataset_rendering_helpers.js

@@ -9,6 +9,7 @@ import pixelmatch from "pixelmatch";
 
 import type { APIDatasetId } from "../../types/api_flow_types";
 import { createExplorational, updateDatasetConfiguration } from "../../admin/admin_rest_api";
+import { bufferToPng, isPixelEquivalent } from "./screenshot_helpers";
 
 export const { WK_AUTH_TOKEN } = process.env;
 if (!WK_AUTH_TOKEN) {
@@ -106,13 +107,15 @@ export async function screenshotSandboxWithMappingLink(
 }
 
 async function waitForMappingEnabled(page: Page) {
+  console.log("Waiting for mapping to be enabled");
   let isMappingEnabled;
   while (!isMappingEnabled) {
     await page.waitForTimeout(5000);
     isMappingEnabled = await page.evaluate(
       "webknossos.apiReady().then(async api => api.data.isMappingEnabled())",
     );
   }
+  console.log("Mapping was enabled");
 }
 
 async function waitForTracingViewLoad(page: Page) {
@@ -124,17 +127,29 @@ async function waitForTracingViewLoad(page: Page) {
 }
 
 async function waitForRenderingFinish(page: Page) {
+  const width = 1920;
+  const height = 1080;
   let currentShot;
   let lastShot = await page.screenshot({ fullPage: true });
   let changedPixels = Infinity;
   // If the screenshot of the page didn't change in the last x seconds, rendering should be finished
-  while (currentShot == null || changedPixels > 0) {
+  while (currentShot == null || !isPixelEquivalent(changedPixels, width, height)) {
+    console.log(`Waiting for rendering to finish. Changed pixels: ${changedPixels}`);
     await page.waitForTimeout(10000);
     currentShot = await page.screenshot({ fullPage: true });
     if (lastShot != null) {
-      changedPixels = pixelmatch(lastShot, currentShot, {}, 1920, 1080, {
-        threshold: 0.0,
-      });
+      changedPixels = pixelmatch(
+        // The buffers need to be converted to png before comparing them
+        // as they might have different lengths, otherwise (probably due to different png encodings)
+        (await bufferToPng(lastShot, width, height)).data,
+        (await bufferToPng(currentShot, width, height)).data,
+        null,
+        width,
+        height,
+        {
+          threshold: 0.0,
+        },
+      );
     }
     lastShot = currentShot;
   }
@@ -147,12 +162,16 @@ async function openTracingView(
   optionalViewOverride: ?string,
 ) {
   const urlSlug = optionalViewOverride != null ? `#${optionalViewOverride}` : "";
-  await page.goto(urljoin(baseUrl, `/annotations/Explorational/${annotationId}${urlSlug}`), {
+  const url = urljoin(baseUrl, `/annotations/Explorational/${annotationId}${urlSlug}`);
+  await page.goto(url, {
     timeout: 0,
   });
 
+  console.log(`Opening tracing view at ${url}`);
   await waitForTracingViewLoad(page);
+  console.log("Loaded tracing view");
   await waitForRenderingFinish(page);
+  console.log("Finished rendering tracing view");
 }
 
 async function openSandboxView(
@@ -162,21 +181,23 @@ async function openSandboxView(
   optionalViewOverride: ?string,
 ) {
   const urlSlug = optionalViewOverride != null ? `#${optionalViewOverride}` : "";
-  await page.goto(
-    urljoin(
-      baseUrl,
-      `/datasets/${datasetId.owningOrganization}/${datasetId.name}/sandbox/skeleton${urlSlug}`,
-    ),
-    {
-      timeout: 0,
-    },
+  const url = urljoin(
+    baseUrl,
+    `/datasets/${datasetId.owningOrganization}/${datasetId.name}/sandbox/skeleton${urlSlug}`,
   );
+  await page.goto(url, {
+    timeout: 0,
+  });
 
+  console.log(`Opening sandbox tracing view at ${url}`);
   await waitForTracingViewLoad(page);
+  console.log("Loaded tracing view");
   await waitForRenderingFinish(page);
+  console.log("Finished rendering tracing view");
 }
 
 async function screenshotTracingView(page: Page): Promise<Screenshot> {
+  console.log("Screenshot tracing view");
   // Take screenshots of the other rendered planes
   const PLANE_IDS = [
     "#inputcatcher_TDView",

frontend/javascripts/test/puppeteer/screenshot_helpers.js

@@ -3,6 +3,13 @@ import { PNG } from "pngjs";
 import fs from "fs";
 import pixelmatch from "pixelmatch";
 
+export function isPixelEquivalent(changedPixels: number, width: number, height: number) {
+  // There may be a difference of 0.1 %
+  const allowedThreshold = 0.1 / 100;
+  const allowedChangedPixel = allowedThreshold * width * height;
+  return changedPixels < allowedChangedPixel;
+}
+
 function openScreenshot(path: string, name: string): Promise<typeof PNG> {
   return new Promise(resolve => {
     fs.createReadStream(`${path}/${name}.png`)
@@ -29,7 +36,7 @@ function saveScreenshot(png: typeof PNG, path: string, name: string): Promise<vo
   });
 }
 
-function bufferToPng(buffer: Buffer, width: number, height: number): Promise<typeof PNG> {
+export function bufferToPng(buffer: Buffer, width: number, height: number): Promise<typeof PNG> {
   return new Promise(resolve => {
     const png = new PNG({ width, height });
     png.parse(buffer, () => resolve(png));

package.json

@@ -63,11 +63,11 @@
     "node-fetch": "^2.6.7",
     "nyc": "^13.3.0",
     "pg": "^7.4.1",
-    "pixelmatch": "^4.0.2",
+    "pixelmatch": "^5.2.0",
     "pngjs": "^3.3.3",
     "prettier": "1.16.4",
     "proto-loader6": "^0.4.0",
-    "puppeteer": "^11.0.0",
+    "puppeteer": "^13.3.2",
     "randomstring": "^1.1.5",
     "react-test-renderer": "^16.8.0",
     "redux-mock-store": "^1.2.2",