Feature/high resolution screenshot

src/display_context.ts

@@ -25,6 +25,10 @@ import { FramerateMonitor } from "#src/util/framerate.js";
 import type { mat4 } from "#src/util/geom.js";
 import { parseFixedLengthArray, verifyFloat01 } from "#src/util/json.js";
 import { NullarySignal } from "#src/util/signal.js";
+import {
+  TrackableScreenshotMode,
+  ScreenshotMode,
+} from "#src/util/trackable_screenshot_mode.js";
 import type { WatchableVisibilityPriority } from "#src/visibility_priority/frontend.js";
 import type { GL } from "#src/webgl/context.js";
 import { initializeWebGL } from "#src/webgl/context.js";
@@ -221,8 +225,15 @@ export abstract class RenderedPanel extends RefCounted {
       0,
       clippedBottom - clippedTop,
     ));
-    viewport.logicalWidth = logicalWidth;
-    viewport.logicalHeight = logicalHeight;
+    if (this.context.screenshotMode.value !== ScreenshotMode.OFF) {
+      viewport.width = logicalWidth * screenToCanvasPixelScaleX;
+      viewport.height = logicalHeight * screenToCanvasPixelScaleY;
+      viewport.logicalWidth = logicalWidth * screenToCanvasPixelScaleX;
+      viewport.logicalHeight = logicalHeight * screenToCanvasPixelScaleY;
+    } else {
+      viewport.logicalWidth = logicalWidth;
+      viewport.logicalHeight = logicalHeight;
+    }
     viewport.visibleLeftFraction = (clippedLeft - logicalLeft) / logicalWidth;
     viewport.visibleTopFraction = (clippedTop - logicalTop) / logicalHeight;
     viewport.visibleWidthFraction = clippedWidth / logicalWidth;
@@ -403,6 +414,9 @@ export class DisplayContext extends RefCounted implements FrameNumberCounter {
   rootRect: DOMRect | undefined;
   resizeGeneration = 0;
   boundsGeneration = -1;
+  screenshotMode: TrackableScreenshotMode = new TrackableScreenshotMode(
+    ScreenshotMode.OFF,
+  );
   private framerateMonitor = new FramerateMonitor();
 
   private continuousCameraMotionInProgress = false;
@@ -575,8 +589,10 @@ export class DisplayContext extends RefCounted implements FrameNumberCounter {
     const { resizeGeneration } = this;
     if (this.boundsGeneration === resizeGeneration) return;
     const { canvas } = this;
-    canvas.width = canvas.offsetWidth;
-    canvas.height = canvas.offsetHeight;
+    if (this.screenshotMode.value === ScreenshotMode.OFF) {
+      canvas.width = canvas.offsetWidth;
+      canvas.height = canvas.offsetHeight;
+    }
     this.canvasRect = canvas.getBoundingClientRect();
     this.rootRect = this.container.getBoundingClientRect();
     this.boundsGeneration = resizeGeneration;

src/python_integration/screenshots.ts

@@ -28,11 +28,49 @@ import { convertEndian32, Endianness } from "#src/util/endian.js";
 import { verifyOptionalString } from "#src/util/json.js";
 import { Signal } from "#src/util/signal.js";
 import { getCachedJson } from "#src/util/trackable.js";
+import { ScreenshotMode } from "#src/util/trackable_screenshot_mode.js";
 import type { Viewer } from "#src/viewer.js";
 
+export interface ScreenshotActionState {
+  viewerState: any;
+  selectedValues: any;
+  screenshot: {
+    id: string;
+    image: string;
+    imageType: string;
+    depthData: string | undefined;
+    width: number;
+    height: number;
+  };
+}
+
+export interface ScreenshotChunkStatistics {
+  downloadLatency: number;
+  visibleChunksDownloading: number;
+  visibleChunksFailed: number;
+  visibleChunksGpuMemory: number;
+  visibleChunksSystemMemory: number;
+  visibleChunksTotal: number;
+  visibleGpuMemory: number;
+}
+
+export interface StatisticsActionState {
+  viewerState: any;
+  selectedValues: any;
+  screenshotStatistics: {
+    id: string;
+    chunkSources: any[];
+    total: ScreenshotChunkStatistics;
+  };
+}
+
 export class ScreenshotHandler extends RefCounted {
-  sendScreenshotRequested = new Signal<(state: any) => void>();
-  sendStatisticsRequested = new Signal<(state: any) => void>();
+  sendScreenshotRequested = new Signal<
+    (state: ScreenshotActionState) => void
+  >();
+  sendStatisticsRequested = new Signal<
+    (state: StatisticsActionState) => void
+  >();
   requestState = new TrackableValue<string | undefined>(
     undefined,
     verifyOptionalString,
@@ -124,12 +162,14 @@ export class ScreenshotHandler extends RefCounted {
       return;
     }
     const { viewer } = this;
-    if (!viewer.isReady()) {
+    const shouldForceScreenshot =
+      this.viewer.display.screenshotMode.value === ScreenshotMode.FORCE;
+    if (!viewer.isReady() && !shouldForceScreenshot) {
       this.wasAlreadyVisible = false;
       this.throttledSendStatistics(requestState);
       return;
     }
-    if (!this.wasAlreadyVisible) {
+    if (!this.wasAlreadyVisible && !shouldForceScreenshot) {
       this.throttledSendStatistics(requestState);
       this.wasAlreadyVisible = true;
       this.debouncedMaybeSendScreenshot();

src/sliceview/volume/renderlayer.ts

@@ -341,6 +341,7 @@ export abstract class SliceViewVolumeRenderLayer<
   >;
   private tempChunkPosition: Float32Array;
   shaderParameters: WatchableValueInterface<ShaderParameters>;
+  highestResolutionLoadedVoxelSize: Float32Array | undefined;
   private vertexIdHelper: VertexIdHelper;
 
   constructor(
@@ -570,6 +571,7 @@ void main() {
         this.chunkManager.chunkQueueManager.frameNumberCounter.frameNumber,
       );
     }
+    this.highestResolutionLoadedVoxelSize = undefined;
 
     let shaderResult: ParameterizedShaderGetterResult<
       ShaderParameters,
@@ -692,6 +694,18 @@ void main() {
           effectiveVoxelSize[1],
           effectiveVoxelSize[2],
         );
+        if (presentCount > 0) {
+          const medianStoredVoxelSize = this.highestResolutionLoadedVoxelSize
+            ? medianOf3(
+                this.highestResolutionLoadedVoxelSize[0],
+                this.highestResolutionLoadedVoxelSize[1],
+                this.highestResolutionLoadedVoxelSize[2],
+              )
+            : Infinity;
+          if (medianVoxelSize <= medianStoredVoxelSize) {
+            this.highestResolutionLoadedVoxelSize = effectiveVoxelSize;
+          }
+        }
         renderScaleHistogram.add(
           medianVoxelSize,
           medianVoxelSize / projectionParameters.pixelSize,

src/ui/screenshot_menu.css

@@ -0,0 +1,83 @@
+/**
+ * @license
+ * Copyright 2024 Google Inc.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.neuroglancer-screenshot-dialog {
+  width: 60%;
+}
+
+.neuroglancer-screenshot-scale-radio {
+  display: inline-block;
+  width: 20px;
+  margin-right: -2px;
+  cursor: pointer;
+}
+
+.neuroglancer-screenshot-filename-and-buttons {
+  margin-bottom: 5px;
+}
+
+.neuroglancer-screenshot-name-input {
+  width: 50%;
+  margin-right: 10px;
+  border: 1px solid #ccc;
+}
+
+.neuroglancer-screenshot-button {
+  cursor: pointer;
+  margin: 2px;
+}
+
+.neuroglancer-screenshot-close-button {
+  position: absolute;
+  right: 15px;
+}
+
+.neuroglancer-screenshot-statistics-title {
+  margin-top: 5px;
+}
+
+.neuroglancer-screenshot-statistics-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 5px;
+}
+
+.neuroglancer-screenshot-statistics-table th,
+.neuroglancer-screenshot-statistics-table td {
+  padding: 12px 15px;
+  text-align: left;
+  border-bottom: 1px solid #ddd;
+}
+
+.neuroglancer-screenshot-statistics-table th {
+  background-color: #f8f8f8;
+  font-weight: bold;
+  color: #555;
+}
+
+.neuroglancer-screenshot-warning {
+  color: red;
+}
+
+.neuroglancer-screenshot-tooltip {
+  user-select: none;
+  text-align: center;
+  padding: 0.1em;
+  border: 0.1em solid black;
+  width: 1.1em;
+  height: 1.1em;
+  border-radius: 100%;
+}