fix: dot size calculation

.infra/rdev/values.yaml

@@ -2,7 +2,7 @@ stack:
   services:
     explorer:
       image:
-        tag: sha-687399d7
+        tag: sha-7f216e01
       replicaCount: 1
       env:
         # env vars common to all deployment stages

client/src/components/Graph/Graph.tsx

@@ -24,7 +24,7 @@ import { Dataframe } from "util/dataframe";
 import { RootState } from "reducers";
 import { Field } from "common/types/schema";
 import { Query } from "annoMatrix/query";
-import { THROTTLE_MS } from "util/constants";
+import { SLIDE_SIZE, THROTTLE_MS } from "util/constants";
 import { isSpatialMode, shouldShowOpenseadragon } from "common/selectors";
 import { fetchDeepZoomImageFailed } from "actions/config";
 import { track } from "analytics";
@@ -1163,6 +1163,7 @@ class Graph extends React.Component<GraphProps, GraphState> {
       isSidePanel = false,
       imageUnderlay,
       imageOpacity,
+      unsMetadata,
     } = this.props;
 
     if (
@@ -1188,15 +1189,19 @@ class Graph extends React.Component<GraphProps, GraphState> {
       opacity: imageOpacity / 100,
     });
 
+    const { imageHeight } = unsMetadata;
+
+    const calculatedPixelsPerMeter = imageHeight / SLIDE_SIZE;
+
     this.openseadragon.scalebar({
       type: Openseadragon.ScalebarType.MICROSCOPY,
-      pixelsPerMeter: 1000000, // this needs to be adjusted based on the image
+      pixelsPerMeter: calculatedPixelsPerMeter,
       minWidth: "75px",
       location: Openseadragon.ScalebarLocation.BOTTOM_LEFT,
-      color: "white",
+      color: "black",
       fontColor: "black",
       backgroundColor: "rgba(255, 255, 255, 0.5)",
-      barThickness: 3,
+      barThickness: 2,
     });
 
     /**

client/src/components/Graph/drawPointsRegl.ts

@@ -61,7 +61,7 @@ export default function drawPointsRegl(regl: Regl) {
       getFlags(flag, isBackground, isSelected, isHighlight);
 
       if (isSpatial) {
-        size = pointSizeSpatial(nPoints, minViewportDimension, isSelected, isHighlight, distance, imageHeight, scaleref, spotDiameterFullres);
+        size = pointSizeSpatial(minViewportDimension, isSelected, isHighlight, distance, imageHeight, scaleref, spotDiameterFullres);
       } else {
         size = pointSize(nPoints, minViewportDimension, isSelected, isHighlight);
       }

client/src/components/Graph/openseadragon-scalebar.js

@@ -110,7 +110,7 @@
     this.setDrawScalebarFunction(options.type || $.ScalebarType.MICROSCOPY);
     this.color = options.color || "black";
     this.fontColor = options.fontColor || "black";
-    this.backgroundColor = options.backgroundColor || "none";
+    this.backgroundColor = options.backgroundColor || "black";
     this.fontSize = options.fontSize || "";
     this.fontFamily = options.fontFamily || "";
     this.barThickness = options.barThickness || 2;
@@ -268,15 +268,44 @@
       this.divElt.style.top = `${location.y}px`;
     },
     drawMicroscopyScalebar(size, text) {
+      // this.divElt.style.display = "flex";
+      // this.divElt.style.alignItems = "flex-end"; // Align the ticks to the bottom
+      // this.divElt.style.justifyContent = "space-between";
+
+      // OG code ****************************************************
       this.divElt.style.fontSize = this.fontSize;
       this.divElt.style.fontFamily = this.fontFamily;
       this.divElt.style.textAlign = "center";
       this.divElt.style.color = this.fontColor;
       this.divElt.style.border = "none";
       this.divElt.style.borderBottom = `${this.barThickness}px solid ${this.color}`;
+
+      this.divElt.style.borderRight = `${this.barThickness}px solid ${this.color}`;
+      this.divElt.style.borderLeft = `${this.barThickness}px solid ${this.color}`;
+
       this.divElt.style.backgroundColor = this.backgroundColor;
       this.divElt.innerHTML = text;
       this.divElt.style.width = `${size}px`;
+
+      // // New code ****************************************************
+
+      // // Create the first label (0)
+      // const label0 = document.createElement("div");
+      // label0.className = "label";
+      // label0.innerHTML = "0";
+      // label0.style.top = "3px";
+      // label0.style.fontSize = "12px";
+
+      // const tick1 = document.createElement("span");
+      // tick1.className = "tick";
+      // tick1.style.position = "absolute";
+      // tick1.style.top = "10px"; // Align tick above the line
+      // tick1.style.left = "7px";
+      // tick1.style.height = "6px"; // Smaller tick
+      // tick1.style.width = "2px";
+      // tick1.style.backgroundColor = "black";
+      // label0.appendChild(tick1);
+      // this.divElt.appendChild(label0);
     },
     drawMapScalebar(size, text) {
       this.divElt.style.fontSize = this.fontSize;

client/src/global.d.ts

@@ -3,7 +3,8 @@ import { Viewer, Options } from "openseadragon";
 /**
  * We use v4, but the types are for v3. This is a temporary workaround.
  * https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/openseadragon
- */ declare module "openseadragon" {
+ */
+declare module "openseadragon" {
   interface Viewer {
     scalebar: (options: ScalebarOptions) => void;
   }

client/src/reducers/controls.ts

@@ -91,7 +91,7 @@ const Controls = (
       loading: false,
     },
     imageOpacity: isTest ? 0 : 100,
-    dotOpacity: 50,
+    dotOpacity: 100,
     expandedCategories: [],
   },
   action: AnyAction

client/src/util/constants.ts

@@ -8,6 +8,12 @@ export const SCALE_MAX = 80.0;
 
 export const SCALE_MAX_HIRES = 12.0;
 
+/**
+ *  8mm is the default slide size including contorls
+ *  https://kb.10xgenomics.com/hc/en-us/articles/360035487572-What-is-the-spatial-resolution-and-configuration-of-the-capture-area-of-the-Visium-v1-Gene-Expression-Slide
+ */
+export const SLIDE_SIZE = 0.008;
+
 export const LAYOUT_CHOICE_TEST_ID = "layout-choice";
 
 export const GRAPH_AS_IMAGE_TEST_ID = "capture-and-display-graph";

client/src/util/glHelpers.ts

@@ -86,29 +86,27 @@ export const glPointSize = `
   }
 `;
 
-export const densityFactor = 0.9;
-
 export const glPointSizeSpatial = `
-
-  float pointSizeSpatial(float nPoints, float minViewportDimension, bool isSelected, bool isHighlight, float distance, float imageHeight, float scaleref, float spotDiameterFullres) {
-
+  float pointSizeSpatial(float minViewportDimension, bool isSelected, bool isHighlight, float distance, float imageHeight, float scaleref, float spotDiameterFullres) {
     float scaleFactor = (minViewportDimension / imageHeight) ;
 
+    /*
+    * Spot size in full or high resolution
+    */
+    float defaultPointSize = spotDiameterFullres * scaleref; 
 
-    // Adjust base size based on distance (zoom level)
-    float adjustedDistance = clamp(distance, 1., 2.5); // Clamp the distance to avoid extreme values
-    float zoomFactor = 1.0 / adjustedDistance * distance * ${densityFactor}; // Inverse of adjustedDistance and multiply by distnace and density factor to get smoother dot size change
-    float adjustedZoomFactor = clamp(zoomFactor, 0.1, .9); // Clamp the zoom factor to avoid extreme values and overlapping dots
-
-    float baseSize = spotDiameterFullres * scaleref * scaleFactor * adjustedZoomFactor; // Base size proportional to viewport
+    /*
+    * Adjusted for zoom/distance and viewport to image size ratio
+    */
+    float pointSize = defaultPointSize * sqrt(distance) * scaleFactor;
 
     // isHighlight has to be checked before isSelected to ensure that highlight works as intended
     if (isHighlight) {
-      return baseSize * 2.0; // Increase size if selected
+      return pointSize * 1.25; // Increase size if highlighted
     } else if (isSelected) {
-      return baseSize * 1.5; // Increase size if highlighted
+      return pointSize;
     } else {
-      return baseSize;
+      return pointSize * 0.75; // Decrease size for unselected
     }
   }
 `;