@geode/opengeodeweb-front 10.29.1 → 10.30.0-rc.10

package/app/stores/cloud.js

@@ -1,4 +1,6 @@
 import { Status } from "@ogw_front/utils/status";
+import { fetchSchema } from "@ogw_shared/utils/fetch_schema";
+import { setAppBaseUrl } from "@ogw_shared/scripts";
 import { useAppStore } from "./app";
 import { useFeedbackStore } from "./feedback";
 import { useInfraStore } from "./infra";
@@ -25,7 +27,7 @@ export const useCloudStore = defineStore("cloud", {
       console.log("[CLOUD] params", params);
       const appStore = useAppStore();
       const feedbackStore = useFeedbackStore();
-      return appStore.request(
+      return fetchSchema(
         { schema, params },
         {
           request_error_function: () => {
@@ -40,6 +42,10 @@ export const useCloudStore = defineStore("cloud", {
             infraStore.$patch({
               domain_name: response.url,
             });
+            setAppBaseUrl(appStore.base_url);
+            appStore.$patch({
+              projectFolderPath: "/project",
+            });
           },
           response_error_function: () => {
             feedbackStore.$patch({ server_error: true });

package/app/stores/data.js

@@ -11,6 +11,33 @@ import { useViewerStore } from "@ogw_front/stores/viewer";
 
 const viewer_generic_schemas = viewer_schemas.opengeodeweb_viewer.generic;
 
+function checkItemViewable(item) {
+  if (!item || typeof item !== "object") {
+    return false;
+  }
+  if (item.is_viewable !== undefined) {
+    return Boolean(item.is_viewable);
+  }
+  if (item.binary_light_viewable !== undefined) {
+    return item.binary_light_viewable !== "not_viewable";
+  }
+  if (
+    item.geode_object_type === "HorizonStack3D" ||
+    item.id === "HorizonStack3D" ||
+    item.title === "HorizonStack3D"
+  ) {
+    return false;
+  }
+  return true;
+}
+
+function isItemViewable(itemOrId) {
+  if (typeof itemOrId === "string") {
+    return database.data.get(itemOrId).then(checkItemViewable);
+  }
+  return checkItemViewable(itemOrId);
+}
+
 // oxlint-disable-next-line max-lines-per-function, max-statements
 export const useDataStore = defineStore("data", () => {
   const viewerStore = useViewerStore();
@@ -93,8 +120,11 @@ export const useDataStore = defineStore("data", () => {
       geode_object_type: new_item.geode_object_type,
       visible: true,
       created_at: new Date().toISOString(),
-      binary_light_viewable: new_item.binary_light_viewable,
+      is_viewable: new_item.is_viewable,
     };
+    if (new_item.binary_light_viewable !== undefined && new_item.binary_light_viewable !== null) {
+      itemData.binary_light_viewable = new_item.binary_light_viewable;
+    }
     return data_db.put(itemData);
   }
 
@@ -213,6 +243,7 @@ export const useDataStore = defineStore("data", () => {
     item,
     allItems,
     refItem,
+    isItemViewable,
     meshComponentType,
     registerObject,
     deregisterObject,

package/app/stores/data_style.js

@@ -21,6 +21,10 @@ export const useDataStyleStore = defineStore("dataStyle", () => {
 
   async function setVisibility(id, visibility) {
     const item = await dataStore.item(id);
+    if (!(await dataStore.isItemViewable(item))) {
+      return dataStyleState.mutateStyle(id, { visibility });
+    }
+
     const { viewer_type } = item;
 
     if (viewer_type === "mesh") {
@@ -34,6 +38,10 @@ export const useDataStyleStore = defineStore("dataStyle", () => {
 
   async function applyDefaultStyle(id) {
     const item = await dataStore.item(id);
+    if (!(await dataStore.isItemViewable(item))) {
+      throw new Error(`applyDefaultStyle called for non-viewable item: ${id}`);
+    }
+
     const { viewer_type } = item;
 
     if (viewer_type === "mesh") {
@@ -81,6 +89,9 @@ export const useDataStyleStore = defineStore("dataStyle", () => {
     const ids = Object.keys(dataStyleState.styles.value);
     const promises = ids.map(async (id) => {
       const meta = await dataStore.item(id);
+      if (!(await dataStore.isItemViewable(meta))) {
+        return;
+      }
       const viewerType = meta.viewer_type;
       if (viewerType === "mesh") {
         return meshStyleStore.applyMeshStyle(id);

package/app/stores/hybrid_viewer.js

@@ -12,7 +12,10 @@ import {
   performSyncRemoteCamera,
 } from "@ogw_internal/stores/hybrid_viewer_camera";
 import {
-  computeAverageBrightness,
+  createClearHoverData,
+  createHoverHighlight,
+} from "@ogw_internal/stores/hybrid_viewer_highlight";
+import {
   performAddItem,
   performClear,
   performClearHoverHighlight,
@@ -22,10 +25,7 @@ import {
   performSetVisibility,
   performSetZScaling,
 } from "@ogw_internal/stores/hybrid_viewer";
-import {
-  createClearHoverData,
-  createHoverHighlight,
-} from "@ogw_internal/stores/hybrid_viewer_highlight";
+import { computeAverageBrightness } from "@ogw_internal/stores/hybrid_viewer_brightness";
 import { newInstance as vtkActor } from "@kitware/vtk.js/Rendering/Core/Actor";
 import { newInstance as vtkGenericRenderWindow } from "@kitware/vtk.js/Rendering/Misc/GenericRenderWindow";
 import { newInstance as vtkMapper } from "@kitware/vtk.js/Rendering/Core/Mapper";
@@ -137,6 +137,13 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     });
   }
 
+  async function setClippingPlanes(ids, planes) {
+    const schema = viewer_schemas.opengeodeweb_viewer.viewer.clipping_planes;
+    const params = { ids, planes };
+    await viewerStore.request({ schema, params });
+    await remoteRender();
+  }
+
   function resetCamera() {
     genericRenderWindow.value.getRenderer().resetCamera();
     genericRenderWindow.value.getRenderWindow().render();
@@ -307,6 +314,7 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     removeItem,
     setVisibility,
     setZScaling,
+    setClippingPlanes,
     syncRemoteCamera,
     setCamera,
     initHybridViewer,

package/app/stores/infra.js

@@ -1,5 +1,5 @@
 import { Status } from "@ogw_front/utils/status";
-import { appMode } from "@ogw_front/utils/local/app_mode";
+import { appMode } from "@ogw_shared/app_mode";
 import { registerRunningExtensions } from "@ogw_front/utils/extension";
 import { useAppStore } from "@ogw_front/stores/app";
 import { useCloudStore } from "@ogw_front/stores/cloud";
@@ -9,7 +9,7 @@ export const useInfraStore = defineStore("infra", {
     app_mode: useRuntimeConfig().public.MODE,
     status: Status.NOT_CREATED,
     microservices: [],
-    domain_name: "localhost",
+    domain_name: globalThis.location.hostname,
   }),
   getters: {
     microservices_connected() {
@@ -77,11 +77,6 @@ export const useInfraStore = defineStore("infra", {
     },
     async create_connection() {
       console.log("[INFRA] Starting create_connection");
-      console.log(
-        "[INFRA] Connecting microservices:",
-        this.microservices.map((store) => store.$id),
-      );
-
       await Promise.all(
         this.microservices.map(async (store) => {
           console.log("[INFRA] Connecting to microservice:", store.$id);

package/app/stores/viewer.js

@@ -8,8 +8,12 @@ import { connectImageStream } from "@kitware/vtk.js/Rendering/Misc/RemoteView";
 import schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
 // Local imports
+import {
+  getWebsocketApiPort,
+  getWebsocketApiProtocol,
+  isCloudMode,
+} from "@ogw_front/utils/stores.js";
 import { Status } from "@ogw_front/utils/status";
-import { appMode } from "@ogw_front/utils/local/app_mode";
 import { useAppStore } from "@ogw_front/stores/app";
 import { useInfraStore } from "@ogw_front/stores/infra";
 import { viewer_call } from "@ogw_internal/utils/viewer_call";
@@ -33,23 +37,13 @@ export const useViewerStore = defineStore(
     const version = ref("0.0.0");
     const busy = ref(0);
 
-    const protocol = computed(() => {
-      if (infraStore.app_mode === appMode.CLOUD) {
-        return "wss";
-      }
-      return "ws";
-    });
+    const protocol = computed(() => getWebsocketApiProtocol());
 
-    const port = computed(() => {
-      if (infraStore.app_mode === appMode.CLOUD) {
-        return "443";
-      }
-      return default_local_port.value;
-    });
+    const port = computed(() => getWebsocketApiPort(default_local_port.value));
 
     const base_url = computed(() => {
       let viewer_url = `${protocol.value}://${infraStore.domain_name}:${port.value}`;
-      if (infraStore.app_mode === appMode.CLOUD) {
+      if (isCloudMode()) {
         viewer_url += `/viewer`;
       }
       viewer_url += "/ws";
@@ -133,7 +127,7 @@ export const useViewerStore = defineStore(
 
       const { COMMAND_VIEWER, NUXT_ROOT_PATH } = useRuntimeConfig().public;
       const schema = {
-        $id: "/api/local/run_viewer",
+        $id: "/api/local/app/run_viewer",
         methods: ["POST"],
         type: "object",
         properties: { COMMAND_VIEWER: { type: "string" }, NUXT_ROOT_PATH: { type: "string" } },
@@ -162,25 +156,13 @@ export const useViewerStore = defineStore(
     }
 
     function request({ schema, params = {}, timeout = request_timeout }, callbacks = {}) {
-      console.log("[VIEWER] Request:", schema.$id);
-      const start = Date.now();
-
-      // Get current store instance to pass to viewer_call
       const store = useViewerStore();
-
       return viewer_call(
         store,
         { schema, params, timeout },
         {
           ...callbacks,
           response_function: async (response) => {
-            console.log(
-              "[VIEWER] Request completed:",
-              schema.$id,
-              "in",
-              (Date.now() - start) / MS_PER_SECOND,
-              "s",
-            );
             if (callbacks.response_function) {
               await callbacks.response_function(response);
             }

package/app/utils/clipping_planes.js

@@ -0,0 +1,110 @@
+const AXIS_SCALE = 0.45;
+const SIZE_RATIO = 0.1;
+const DEBOUNCE_DELAY = 200;
+const CHANGE_THRESHOLD = 1e-4;
+// oxlint-disable no-magic-numbers
+const COLOR_BLUE = [0.12, 0.53, 0.9];
+const COLOR_GREEN = [0.26, 0.63, 0.28];
+const COLOR_ORANGE = [0.98, 0.55, 0];
+const COLOR_PURPLE = [0.55, 0.14, 0.67];
+const COLOR_RED = [0.9, 0.22, 0.21];
+// oxlint-enable no-magic-numbers
+const PLANE_COLORS = [COLOR_BLUE, COLOR_GREEN, COLOR_ORANGE, COLOR_PURPLE, COLOR_RED];
+const NORMAL_X = [1, 0, 0];
+const NORMAL_Y = [0, 1, 0];
+const NORMAL_Z = [0, 0, 1];
+const DEFAULT_NORMALS = [NORMAL_X, NORMAL_Y, NORMAL_Z];
+const RGB_MAX_VALUE = 255;
+
+function getPlaneCssColor(index) {
+  const rgb = PLANE_COLORS[index % PLANE_COLORS.length];
+  return `rgb(${rgb.map((channel) => Math.round(channel * RGB_MAX_VALUE)).join(",")})`;
+}
+
+function hasPlaneChanged(origin, normal, currentOrigin, currentNormal) {
+  if (!currentOrigin) {
+    return true;
+  }
+  return (
+    origin.some((val, idx) => Math.abs(val - currentOrigin[idx]) > CHANGE_THRESHOLD) ||
+    normal.some((val, idx) => Math.abs(val - currentNormal[idx]) > CHANGE_THRESHOLD)
+  );
+}
+
+function getPlaneStyle(rgb) {
+  return {
+    active: {
+      plane: { opacity: 1, color: rgb },
+      normal: { opacity: 1, color: rgb },
+      origin: { opacity: 1, color: rgb },
+    },
+    inactive: {
+      plane: { opacity: 0.5, color: rgb },
+      normal: { opacity: 1, color: rgb },
+      origin: { opacity: 1, color: rgb },
+    },
+    static: {
+      display2D: { representation: 0 },
+      outline: { color: [1, 1, 1], opacity: 1, representation: 1, interpolation: 0 },
+    },
+  };
+}
+
+function computeSceneBounds(actors) {
+  let bounds = [Infinity, -Infinity, Infinity, -Infinity, Infinity, -Infinity];
+  for (const actor of actors) {
+    const boundsOfActor = actor.getBounds();
+    bounds = [
+      Math.min(bounds[0], boundsOfActor[0]),
+      Math.max(bounds[1], boundsOfActor[1]),
+      Math.min(bounds[2], boundsOfActor[2]),
+      Math.max(bounds[3], boundsOfActor[3]),
+      Math.min(bounds[4], boundsOfActor[4]),
+      Math.max(bounds[5], boundsOfActor[5]),
+    ];
+  }
+  return bounds;
+}
+
+function computeSceneBoundsInfo(actors) {
+  if (!actors || actors.length === 0) {
+    return { center: [0, 0, 0], cubicBounds: [-1, 1, -1, 1, -1, 1] };
+  }
+  const [xmin, xmax, ymin, ymax, zmin, zmax] = computeSceneBounds(actors);
+  const center = [
+    Number(((xmin + xmax) / 2).toFixed(4)),
+    Number(((ymin + ymax) / 2).toFixed(4)),
+    Number(((zmin + zmax) / 2).toFixed(4)),
+  ];
+
+  const maxActorExtent = Math.max(
+    ...actors.map((actor) => {
+      const bounds = actor.getBounds();
+      return Math.max(bounds[1] - bounds[0], bounds[3] - bounds[2], bounds[5] - bounds[4]);
+    }),
+  );
+  const halfExtent = maxActorExtent / 2;
+  const cubicBounds = [
+    center[0] - halfExtent,
+    center[0] + halfExtent,
+    center[1] - halfExtent,
+    center[1] + halfExtent,
+    center[2] - halfExtent,
+    center[2] + halfExtent,
+  ];
+  return { center, cubicBounds };
+}
+
+export {
+  AXIS_SCALE,
+  SIZE_RATIO,
+  DEBOUNCE_DELAY,
+  CHANGE_THRESHOLD,
+  PLANE_COLORS,
+  DEFAULT_NORMALS,
+  getPlaneCssColor,
+  hasPlaneChanged,
+  getPlaneStyle,
+  computeSceneBounds,
+  computeSceneBoundsInfo,
+};

package/app/utils/extension.js

@@ -12,6 +12,11 @@ async function importExtensionFile(file) {
   return registerRunningExtensions();
 }
 
+async function importExtensionURL(url) {
+  await downloadExtension(url);
+  return registerRunningExtensions();
+}
+
 async function registerRunningExtensions() {
   const appStore = useAppStore();
   const infraStore = useInfraStore();
@@ -74,6 +79,27 @@ async function uploadExtension(file) {
   await appStore.upload(file);
 }
 
+function downloadExtension({ url, extensionFileName }) {
+  const appStore = useAppStore();
+  const { PROJECT: projectName } = useRuntimeConfig().public;
+  const params = { projectName, url, extensionFileName };
+
+  const schema = {
+    $id: "/api/microservice/extensions/download",
+    methods: ["POST"],
+    type: "object",
+    properties: {
+      extensionFileName: { type: "string" },
+      projectName: { type: "string" },
+      url: { type: "string" },
+    },
+    required: ["extensionFileName", "projectName", "url"],
+    additionalProperties: false,
+  };
+
+  return appStore.request({ schema, params });
+}
+
 function runExtensions() {
   const appStore = useAppStore();
   const { projectFolderPath } = appStore;
@@ -121,9 +147,10 @@ function killExtension(extensionId) {
 
 export {
   importExtensionFile,
-  unloadExtension,
-  uploadExtension,
+  importExtensionURL,
+  killExtension,
   registerRunningExtensions,
   runExtensions,
-  killExtension,
+  unloadExtension,
+  uploadExtension,
 };

package/app/utils/import_workflow.js

@@ -35,13 +35,6 @@ async function importWorkflow(files) {
   return results;
 }
 
-function buildImportItemFromPayloadApi(value, geode_object_type) {
-  return {
-    geode_object_type,
-    ...value,
-  };
-}
-
 async function importItem(item) {
   const dataStore = useDataStore();
   const dataStyleStore = useDataStyleStore();
@@ -61,14 +54,19 @@ async function importItem(item) {
     item.viewer_type === "model" ? dataStore.addComponentRelations(item) : Promise.resolve();
   treeviewStore.addItem(item.geode_object_type, item.name, item.id, item.viewer_type);
   const addDataStyleTask = dataStyleStore.addDataStyle(item.id, item.geode_object_type);
-  const addViewerTask = addDataTask.then(() => {
-    if (item.nb_vertices === 0) {
+  const addViewerTask = addDataTask.then(async () => {
+    if (!(await dataStore.isItemViewable(item))) {
       return;
     }
     return hybridViewerStore.addItem(item.id);
   });
   const applyStyleTask = Promise.all([registerTask, addDataComponentsTask, addDataStyleTask]).then(
-    () => dataStyleStore.applyDefaultStyle(item.id),
+    async () => {
+      if (await dataStore.isItemViewable(item)) {
+        return dataStyleStore.applyDefaultStyle(item.id);
+      }
+      return undefined;
+    },
   );
   await Promise.all([
     registerTask,
@@ -89,8 +87,7 @@ async function importFile(filename, geode_object_type) {
     filename,
   };
   const response = await backStore.request({ schema, params });
-  const item = buildImportItemFromPayloadApi(response, geode_object_type);
-  return importItem(item);
+  return importItem(response);
 }
 
 async function importWorkflowFromSnapshot(items) {

package/app/utils/log.js

@@ -0,0 +1,18 @@
+function startRequestLog(microservice, schema) {
+  console.log(`[${microservice.$id}] Request:`, schema.$id);
+  const requestStartingTime = new Date(Date.now());
+  return requestStartingTime;
+}
+
+function endRequestLog(microservice, schema, requestStartingTime) {
+  const requestEndingTime = new Date(Date.now());
+  console.log(
+    `[${microservice.$id}] Request completed:`,
+    schema.$id,
+    "in",
+    requestEndingTime.getSeconds() - requestStartingTime.getSeconds(),
+    "s",
+  );
+}
+
+export { startRequestLog, endRequestLog };

package/app/utils/stores.js

@@ -0,0 +1,32 @@
+import { appMode } from "@ogw_shared/app_mode";
+import { useInfraStore } from "@ogw_front/stores/infra";
+
+function isCloudMode() {
+  const infraStore = useInfraStore();
+  return infraStore.app_mode === appMode.CLOUD;
+}
+
+function getRestApiProtocol() {
+  const protocol = isCloudMode() ? "https" : "http";
+  return protocol;
+}
+function getRestApiPort(defaultLocalPort) {
+  const port = isCloudMode() ? "443" : defaultLocalPort;
+  return port;
+}
+function getWebsocketApiProtocol() {
+  const protocol = isCloudMode() ? "wss" : "ws";
+  return protocol;
+}
+function getWebsocketApiPort(defaultLocalPort) {
+  const port = isCloudMode() ? "443" : defaultLocalPort;
+  return port;
+}
+
+export {
+  isCloudMode,
+  getRestApiPort,
+  getRestApiProtocol,
+  getWebsocketApiProtocol,
+  getWebsocketApiPort,
+};

package/internal/stores/hybrid_viewer.js

@@ -1,65 +1,5 @@
-import { BACKGROUND_GREY_VALUE, RGB_MAX } from "./hybrid_viewer_constants";
 import { centerCameraOnPosition } from "./hybrid_viewer_camera";
 
-const RGBA_CHANNELS = 4;
-const SAMPLE_SIZE = 10;
-const TOTAL_CHANNELS = 400;
-
-function mapRect(rect, latestImage, canvasRect) {
-  const scaleX = latestImage.width / canvasRect.width;
-  const scaleY = latestImage.height / canvasRect.height;
-  return {
-    relX: (rect.x - canvasRect.left) * scaleX,
-    relY: (rect.y - canvasRect.top) * scaleY,
-    relW: rect.width * scaleX,
-    relH: rect.height * scaleY,
-  };
-}
-
-function computeAverageBrightness(rect, options) {
-  const { latestImage, offscreenCtx, offscreenCanvas, genericRenderWindow } = options;
-  if (!latestImage || !offscreenCtx || !offscreenCanvas || !genericRenderWindow) {
-    return BACKGROUND_GREY_VALUE / RGB_MAX;
-  }
-  const canvas = genericRenderWindow.getApiSpecificRenderWindow().getCanvas();
-  if (!canvas) {
-    return BACKGROUND_GREY_VALUE / RGB_MAX;
-  }
-  if (rect.width <= 0 || rect.height <= 0) {
-    return BACKGROUND_GREY_VALUE / RGB_MAX;
-  }
-  const { relX, relY, relW, relH } = mapRect(rect, latestImage, canvas.getBoundingClientRect());
-  if (relW <= 0 || relH <= 0) {
-    return BACKGROUND_GREY_VALUE / RGB_MAX;
-  }
-  offscreenCanvas.width = SAMPLE_SIZE;
-  offscreenCanvas.height = SAMPLE_SIZE;
-  try {
-    offscreenCtx.drawImage(
-      latestImage,
-      Math.max(0, relX),
-      Math.max(0, relY),
-      Math.min(latestImage.width, relW),
-      Math.min(latestImage.height, relH),
-      0,
-      0,
-      SAMPLE_SIZE,
-      SAMPLE_SIZE,
-    );
-    const { data } = offscreenCtx.getImageData(0, 0, SAMPLE_SIZE, SAMPLE_SIZE);
-    let minBrightness = 1;
-    for (let i = 0; i < TOTAL_CHANNELS; i += RGBA_CHANNELS) {
-      const brightness = (data[i] + data[i + 1] + data[i + 2]) / (3 * RGB_MAX);
-      if (brightness < minBrightness) {
-        minBrightness = brightness;
-      }
-    }
-    return minBrightness;
-  } catch {
-    return BACKGROUND_GREY_VALUE / RGB_MAX;
-  }
-}
-
 function performClickPicking(event, options) {
   const { container, viewerStore, viewer_schemas, genericRenderWindow, syncRemoteCamera } = options;
   const rect = container.getBoundingClientRect();
@@ -148,8 +88,11 @@ async function performAddItem(id, options) {
   if (!genericRenderWindow) {
     return;
   }
-  const reader = vtkXMLPolyDataReader(),
-    value = await dataStore.item(id);
+  const value = await dataStore.item(id);
+  if (value && !dataStore.isItemViewable(value)) {
+    return;
+  }
+  const reader = vtkXMLPolyDataReader();
   await reader.parseAsArrayBuffer(new TextEncoder().encode(value.binary_light_viewable));
   const actor = vtkActor(),
     mapper = vtkMapper(),
@@ -158,6 +101,9 @@ async function performAddItem(id, options) {
   actor.getProperty().setColor(actorColor);
   actor.setMapper(mapper);
   const renderer = genericRenderWindow.getRenderer();
+  if (hybridDb[id] && hybridDb[id].actor) {
+    renderer.removeActor(hybridDb[id].actor);
+  }
   const isFirst = renderer.getActors().length === 0;
   renderer.addActor(actor);
   if (isFirst) {
@@ -307,7 +253,6 @@ function performClear(options) {
 }
 
 export {
-  computeAverageBrightness,
   performAddItem,
   performClearHoverHighlight,
   performClickPicking,

package/internal/stores/hybrid_viewer_brightness.js

@@ -0,0 +1,62 @@
+import { BACKGROUND_GREY_VALUE, RGB_MAX } from "./hybrid_viewer_constants";
+
+const RGBA_CHANNELS = 4;
+const SAMPLE_SIZE = 10;
+const TOTAL_CHANNELS = 400;
+
+function mapRect(rect, latestImage, canvasRect) {
+  const scaleX = latestImage.width / canvasRect.width;
+  const scaleY = latestImage.height / canvasRect.height;
+  return {
+    relX: (rect.x - canvasRect.left) * scaleX,
+    relY: (rect.y - canvasRect.top) * scaleY,
+    relW: rect.width * scaleX,
+    relH: rect.height * scaleY,
+  };
+}
+
+function computeAverageBrightness(rect, options) {
+  const { latestImage, offscreenCtx, offscreenCanvas, genericRenderWindow } = options;
+  if (!latestImage || !offscreenCtx || !offscreenCanvas || !genericRenderWindow) {
+    return BACKGROUND_GREY_VALUE / RGB_MAX;
+  }
+  const canvas = genericRenderWindow.getApiSpecificRenderWindow().getCanvas();
+  if (!canvas) {
+    return BACKGROUND_GREY_VALUE / RGB_MAX;
+  }
+  if (rect.width <= 0 || rect.height <= 0) {
+    return BACKGROUND_GREY_VALUE / RGB_MAX;
+  }
+  const { relX, relY, relW, relH } = mapRect(rect, latestImage, canvas.getBoundingClientRect());
+  if (relW <= 0 || relH <= 0) {
+    return BACKGROUND_GREY_VALUE / RGB_MAX;
+  }
+  offscreenCanvas.width = SAMPLE_SIZE;
+  offscreenCanvas.height = SAMPLE_SIZE;
+  try {
+    offscreenCtx.drawImage(
+      latestImage,
+      Math.max(0, relX),
+      Math.max(0, relY),
+      Math.min(latestImage.width, relW),
+      Math.min(latestImage.height, relH),
+      0,
+      0,
+      SAMPLE_SIZE,
+      SAMPLE_SIZE,
+    );
+    const { data } = offscreenCtx.getImageData(0, 0, SAMPLE_SIZE, SAMPLE_SIZE);
+    let minBrightness = 1;
+    for (let i = 0; i < TOTAL_CHANNELS; i += RGBA_CHANNELS) {
+      const brightness = (data[i] + data[i + 1] + data[i + 2]) / (3 * RGB_MAX);
+      if (brightness < minBrightness) {
+        minBrightness = brightness;
+      }
+    }
+    return minBrightness;
+  } catch {
+    return BACKGROUND_GREY_VALUE / RGB_MAX;
+  }
+}
+
+export { computeAverageBrightness };