@vitessce/neuroglancer 3.9.7 → 3.9.8

package/src/ReactNeuroglancer.js

@@ -67,6 +67,10 @@ let viewerNoKey;
  * @property {() => void} onSelectionDetailsStateChanged
  * A function of the form `() => {}` to respond to selection changes in the viewer.
  * @property {() => void} onViewerStateChanged
+ * @property {(isLoaded: boolean) => void} onLayerLoadingChange
+ * A function of the form `(isLoaded) => {}`, called when layer loading state changes.
+ * The `isLoaded` argument will be `true` when all segmentation layers have finished loading
+ * their data sources, or `false` when layers are still loading.
  *
  * @property {Array<Object>} callbacks
  * // ngServer: string,
@@ -411,6 +415,7 @@ export default class Neuroglancer extends React.Component {
     onVisibleChanged: null,
     onSelectionDetailsStateChanged: null,
     onViewerStateChanged: null,
+    onLayerLoadingChange: null,
     key: null,
     callbacks: [],
     ngServer: 'https://neuroglancer-demo.appspot.com/',
@@ -488,7 +493,7 @@ export default class Neuroglancer extends React.Component {
       // "obsSegmentations-init_A_obsSegmentations_0-init_A_obsSegmentations_0"
       const layerScope = Object.keys(cellColorMappingByLayer).find(scope => layer.name?.includes(scope));
 
-      const selected = { ...(cellColorMappingByLayer[layerScope] || {}) };
+      const selected = { ...(cellColorMappingByLayer[layerScope]?.colors || {}) };
 
       // Track all known IDs for this layer scope
       if (!this.allKnownIdsByLayer) this.allKnownIdsByLayer = {};
@@ -625,7 +630,41 @@ export default class Neuroglancer extends React.Component {
       viewerNoKey = this.viewer;
     }
 
-    // TODO: This is purely for debugging and we need to remove it.
+    const { visibleChunksChanged } = this.viewer.chunkQueueManager;
+    let firstChunkLoaded = false;
+    this.disposers.push(visibleChunksChanged.add(() => {
+      if (!firstChunkLoaded) {
+        for (const layer of this.viewer.layerManager.managedLayers) {
+          if (layer.layer instanceof SegmentationUserLayer) {
+            const hasVisibleChunk = layer.layer.renderLayers?.some((rl) => {
+              const {
+                numVisibleChunksAvailable,
+                numVisibleChunksNeeded,
+              } = rl.layerChunkProgressInfo || {};
+              if (!numVisibleChunksNeeded || !numVisibleChunksAvailable) return false;
+              // Neuroglancer only shows chunks when a certain % is loaded.
+              // The 0.25 is from testing different values, can be reduced to 0.2 to shorten loader time
+              return (numVisibleChunksAvailable / numVisibleChunksNeeded) > 0.25;
+            });
+            if (hasVisibleChunk) {
+              firstChunkLoaded = true;
+              // Two frames to avoid flash while the following two happens
+              // Neuroglancer issues WebGL draw calls
+              requestAnimationFrame(() => {
+              // GPU has painted, pixels visible on screen
+                requestAnimationFrame(() => {
+                  this.props.onLayerLoadingChange?.(true);
+                });
+              });
+              return;
+            }
+          }
+        }
+      }
+    }));
+    this.disposers.push(() => { firstChunkLoaded = false; });
+
+    // TODO: This is purely for debugging - exposes the NG viewer to be tested via console
     // window.viewer = this.viewer;
   }
 
@@ -667,6 +706,27 @@ export default class Neuroglancer extends React.Component {
       if (layer.layer instanceof SegmentationUserLayer) {
         const { segmentSelectionState } = layer.layer.displayState;
         segmentSelectionState.set(selectedSegments[layer.name]);
+        const layerScope = Object.keys(cellColorMappingByLayer).find(
+          scope => layer.name?.includes(scope),
+        );
+        if (layerScope) {
+          const opacity = cellColorMappingByLayer[layerScope]?.opacity ?? 1.0;
+          layer.layer.displayState.objectAlpha.value = opacity;
+        }
+      }
+      // Update annotation layer shaders from viewerState config,
+      // skipping update if shader is unchanged to avoid costly re-renders
+      if (layer.layer instanceof AnnotationUserLayer) {
+        const matchingLayer = (viewerState?.layers || []).find(
+          l => l.name === layer.name,
+        );
+        if (matchingLayer?.shader) {
+          /* eslint-disable-next-line no-underscore-dangle */
+          const currentShader = layer.layer.annotationDisplayState.shader.value_;
+          if (currentShader !== matchingLayer.shader) {
+            layer.layer.annotationDisplayState.shader.value = matchingLayer.shader;
+          }
+        }
       }
     }
 
@@ -717,9 +777,11 @@ export default class Neuroglancer extends React.Component {
     // If colors changed (but layers didn’t): re-apply colors
     // this was to avid NG randomly assigning colors to the segments by resetting them
     const prevSize = prevProps.cellColorMapping
-      ? Object.keys(prevProps.cellColorMapping).length : 0;
+      ? Object.values(prevProps.cellColorMapping)
+        .reduce((acc, v) => acc + Object.keys(v?.colors || {}).length, 0) : 0;
     const currSize = cellColorMappingByLayer
-      ? Object.keys(cellColorMappingByLayer).length : 0;
+      ? Object.values(cellColorMappingByLayer)
+        .reduce((acc, v) => acc + Object.keys(v?.colors || {}).length, 0) : 0;
     const mappingRefChanged = prevProps.cellColorMapping !== this.props.cellColorMapping;
     if (!this.didLayersChange(prevVS, viewerState)
       && (mappingRefChanged || prevSize !== currSize)) {
@@ -732,7 +794,7 @@ export default class Neuroglancer extends React.Component {
     // We only restore layers (not pose) when sources change OR on the first time segments appear.
     const stripSegFields = layers => (layers || []).map((l) => {
       if (!l) return l;
-      const { segments, segmentColors, ...rest } = l;
+      const { segments, segmentColors, objectAlpha, ...rest } = l;
       return rest; // ignore segments + segmentColors for comparison
     });
 

package/src/data-hook-ng-utils.js

@@ -106,6 +106,7 @@ export function toNgLayerName(dataType, layerScope, channelScope = null) {
  */
 export function useNeuroglancerViewerState(
   theme,
+  showAxisLines,
   segmentationLayerScopes,
   segmentationChannelScopesByLayer,
   segmentationLayerCoordination,
@@ -140,20 +141,35 @@ export function useNeuroglancerViewerState(
           const {
             spatialChannelVisible,
           } = channelCoordination || {};
+          const { source: ngSource, ...otherNgOptions } = layerData.neuroglancerOptions ?? {};
+
+          // Build source: if neuroglancerOptions has subsources
+          const hasNgSourceOptions = layerData.neuroglancerOptions?.subsources
+            || layerData.neuroglancerOptions?.enableDefaultSubsources !== undefined;
+
+          const source = hasNgSourceOptions
+            ? {
+              url: toPrecomputedSource(layerUrl),
+              subsources: layerData.neuroglancerOptions.subsources,
+              enableDefaultSubsources: layerData.neuroglancerOptions.enableDefaultSubsources
+                  ?? false,
+            }
+            : toPrecomputedSource(layerUrl);
+
           result = {
             ...result,
             layers: [
               ...result.layers,
               {
                 type: 'segmentation',
-                source: toPrecomputedSource(layerUrl),
+                source,
                 segments: [],
                 name: toNgLayerName(DataType.OBS_SEGMENTATIONS, layerScope, channelScope),
                 visible: spatialLayerVisible && spatialChannelVisible, // Both layer and channel
                 // visibility must be true for the layer to be visible.
                 // TODO: update this to extract specific properties from
                 // neuroglancerOptions as needed.
-                ...(layerData.neuroglancerOptions ?? {}),
+                ...otherNgOptions,
               },
             ],
           };
@@ -180,6 +196,7 @@ export function useNeuroglancerViewerState(
           featureSelection,
           featureFilterMode,
           featureColor,
+          spatialPointStrokeWidth,
         } = layerCoordination || {};
 
         // Dynamically construct the shader based on the color encoding
@@ -196,6 +213,7 @@ export function useNeuroglancerViewerState(
 
           featureIndexProp: layerData.neuroglancerOptions?.featureIndexProp,
           pointIndexProp: layerData.neuroglancerOptions?.pointIndexProp,
+          pointMarkerBorderWidth: spatialPointStrokeWidth ?? 0.0,
         });
 
         result = {
@@ -235,6 +253,7 @@ export function useNeuroglancerViewerState(
     return result;
   }, {
     theme,
+    showAxisLines,
     segmentationLayerScopes,
     segmentationChannelScopesByLayer,
     segmentationLayerCoordination,

package/src/shader-utils.js

@@ -15,6 +15,18 @@ function normalizeColor(rgbColor) {
   return rgbColor.map(c => c / 255);
 }
 
+/**
+ * GLSL call to set point marker border width.
+ * Set to 0.0 to remove the outline.
+ * @param {number} borderWidth
+ * @returns {string}
+ */
+function borderWidthGlsl(borderWidth = 0.0) {
+  // must be decimal/float value
+  return `setPointMarkerBorderWidth(${borderWidth.toFixed(1)});`;
+}
+
+
 /**
  * Format a normalized color as a GLSL vec3 literal.
  * @param {[number, number, number]} normalizedColor
@@ -45,12 +57,13 @@ function toVec4(normalizedColor, alpha) {
  * @param {number} opacity Opacity (0-1).
  * @returns {string} A GLSL shader string.
  */
-export function getSpatialLayerColorShader(staticColor, opacity) {
+export function getSpatialLayerColorShader(staticColor, opacity, borderWidth = 0.0) {
   const norm = normalizeColor(staticColor);
   // lang: glsl
   return `
         void main() {
             setColor(${toVec4(norm, opacity)});
+            ${borderWidthGlsl(borderWidth)}
         }
     `;
 }
@@ -67,7 +80,7 @@ export function getSpatialLayerColorShader(staticColor, opacity) {
  * @returns {string} A GLSL shader string.
  */
 export function getSpatialLayerColorWithSelectionShader(
-  staticColor, opacity, featureIndices, defaultColor, featureIndexProp,
+  staticColor, opacity, featureIndices, defaultColor, featureIndexProp, borderWidth = 0.0,
 ) {
   const normStatic = normalizeColor(staticColor);
   const normDefault = normalizeColor(defaultColor);
@@ -87,8 +100,10 @@ export function getSpatialLayerColorWithSelectionShader(
             }
             if (isSelected) {
                 setColor(${toVec4(normStatic, opacity)});
+                ${borderWidthGlsl(borderWidth)}
             } else {
                 setColor(${toVec4(normDefault, opacity)});
+                ${borderWidthGlsl(borderWidth)}
             }
         }
     `;
@@ -105,7 +120,7 @@ export function getSpatialLayerColorWithSelectionShader(
  * @returns {string} A GLSL shader string.
  */
 export function getSpatialLayerColorFilteredShader(
-  staticColor, opacity, featureIndices, featureIndexProp,
+  staticColor, opacity, featureIndices, featureIndexProp, borderWidth = 0.0,
 ) {
   const normStatic = normalizeColor(staticColor);
   const numFeatures = featureIndices.length;
@@ -126,6 +141,7 @@ export function getSpatialLayerColorFilteredShader(
                 discard;
             }
             setColor(${toVec4(normStatic, opacity)});
+            ${borderWidthGlsl(borderWidth)}
         }
     `;
 }
@@ -142,12 +158,13 @@ export function getSpatialLayerColorFilteredShader(
  * @param {number} opacity Opacity (0-1).
  * @returns {string} A GLSL shader string.
  */
-export function getGeneSelectionNoSelectionShader(staticColor, opacity) {
+export function getGeneSelectionNoSelectionShader(staticColor, opacity, borderWidth = 0.0) {
   const norm = normalizeColor(staticColor);
   // lang: glsl
   return `
         void main() {
             setColor(${toVec4(norm, opacity)});
+            ${borderWidthGlsl(borderWidth)}
         }
     `;
 }
@@ -168,7 +185,13 @@ export function getGeneSelectionNoSelectionShader(staticColor, opacity) {
  * @returns {string} A GLSL shader string.
  */
 export function getGeneSelectionWithSelectionShader(
-  featureIndices, featureColors, staticColor, defaultColor, opacity, featureIndexProp,
+  featureIndices,
+  featureColors,
+  staticColor,
+  defaultColor,
+  opacity,
+  featureIndexProp,
+  borderWidth = 0.0,
 ) {
   const numFeatures = featureIndices.length;
   const normDefault = normalizeColor(defaultColor);
@@ -194,6 +217,7 @@ export function getGeneSelectionWithSelectionShader(
                 }
             }
             setColor(color);
+            ${borderWidthGlsl(borderWidth)}
         }
     `;
 }
@@ -210,7 +234,7 @@ export function getGeneSelectionWithSelectionShader(
  * @returns {string} A GLSL shader string.
  */
 export function getGeneSelectionFilteredShader(
-  featureIndices, featureColors, staticColor, opacity, featureIndexProp,
+  featureIndices, featureColors, staticColor, opacity, featureIndexProp, borderWidth = 0.0,
 ) {
   const numFeatures = featureIndices.length;
   const normColors = featureColors.map(c => normalizeColor(c));
@@ -241,6 +265,7 @@ export function getGeneSelectionFilteredShader(
                 discard;
             }
             setColor(vec4(matchedColor, ${opacity}));
+            ${borderWidthGlsl(borderWidth)}
         }
     `;
 }
@@ -256,7 +281,7 @@ export function getGeneSelectionFilteredShader(
  * @param {string} featureIndexProp The property name for the feature index in the shader.
  * @returns {string} A GLSL shader string.
  */
-export function getRandomByFeatureShader(opacity, featureIndexProp) {
+export function getRandomByFeatureShader(opacity, featureIndexProp, borderWidth = 0.0) {
   const paletteSize = PALETTE.length;
   const normPalette = PALETTE.map(c => normalizeColor(c));
   const paletteDecl = `vec3 palette[${paletteSize}] = vec3[${paletteSize}](${normPalette.map(c => toVec3(c)).join(', ')});`;
@@ -270,6 +295,7 @@ export function getRandomByFeatureShader(opacity, featureIndexProp) {
             if (colorIdx < 0) { colorIdx = -colorIdx; }
             vec3 color = palette[colorIdx];
             setColor(vec4(color, ${opacity}));
+            ${borderWidthGlsl(borderWidth)}
         }
     `;
 }
@@ -285,7 +311,7 @@ export function getRandomByFeatureShader(opacity, featureIndexProp) {
  * @returns {string} A GLSL shader string.
  */
 export function getRandomByFeatureWithSelectionShader(
-  featureIndices, defaultColor, opacity, featureIndexProp,
+  featureIndices, defaultColor, opacity, featureIndexProp, borderWidth = 0.0,
 ) {
   const paletteSize = PALETTE.length;
   const normPalette = PALETTE.map(c => normalizeColor(c));
@@ -311,8 +337,10 @@ export function getRandomByFeatureWithSelectionShader(
                 int colorIdx = geneIndex - (geneIndex / ${paletteSize}) * ${paletteSize};
                 if (colorIdx < 0) { colorIdx = -colorIdx; }
                 setColor(vec4(palette[colorIdx], ${opacity}));
+                ${borderWidthGlsl(borderWidth)}
             } else {
                 setColor(${toVec4(normDefault, opacity)});
+                ${borderWidthGlsl(borderWidth)}
             }
         }
     `;
@@ -326,7 +354,12 @@ export function getRandomByFeatureWithSelectionShader(
  * @param {string} featureIndexProp The property name for the feature index in the shader.
  * @returns {string} A GLSL shader string.
  */
-export function getRandomByFeatureFilteredShader(featureIndices, opacity, featureIndexProp) {
+export function getRandomByFeatureFilteredShader(
+  featureIndices,
+  opacity,
+  featureIndexProp,
+  borderWidth = 0.0,
+) {
   const paletteSize = PALETTE.length;
   const normPalette = PALETTE.map(c => normalizeColor(c));
   const numFeatures = featureIndices.length;
@@ -352,6 +385,7 @@ export function getRandomByFeatureFilteredShader(featureIndices, opacity, featur
             int colorIdx = geneIndex - (geneIndex / ${paletteSize}) * ${paletteSize};
             if (colorIdx < 0) { colorIdx = -colorIdx; }
             setColor(vec4(palette[colorIdx], ${opacity}));
+            ${borderWidthGlsl(borderWidth)}
         }
     `;
 }
@@ -385,7 +419,12 @@ function hashToFloatGlsl() {
  * @param {string} pointIndexProp The property name for the point index in the shader.
  * @returns {string} A GLSL shader string.
  */
-export function getRandomPerPointShader(opacity, featureIndexProp, pointIndexProp) {
+export function getRandomPerPointShader(
+  opacity,
+  featureIndexProp,
+  pointIndexProp,
+  borderWidth = 0.0,
+) {
   // lang: glsl
   return `
         ${hashToFloatGlsl()}
@@ -396,6 +435,7 @@ export function getRandomPerPointShader(opacity, featureIndexProp, pointIndexPro
             float g = hashToFloat(pointIndex, 1);
             float b = hashToFloat(pointIndex, 2);
             setColor(vec4(r, g, b, ${opacity}));
+            ${borderWidthGlsl(borderWidth)}
         }
     `;
 }
@@ -411,7 +451,7 @@ export function getRandomPerPointShader(opacity, featureIndexProp, pointIndexPro
  * @returns {string} A GLSL shader string.
  */
 export function getRandomPerPointWithSelectionShader(
-  featureIndices, defaultColor, opacity, featureIndexProp, pointIndexProp,
+  featureIndices, defaultColor, opacity, featureIndexProp, pointIndexProp, borderWidth = 0.0,
 ) {
   const normDefault = normalizeColor(defaultColor);
   const numFeatures = featureIndices.length;
@@ -435,8 +475,10 @@ export function getRandomPerPointWithSelectionShader(
                 float g = hashToFloat(pointIndex, 1);
                 float b = hashToFloat(pointIndex, 2);
                 setColor(vec4(r, g, b, ${opacity}));
+                ${borderWidthGlsl(borderWidth)}
             } else {
                 setColor(${toVec4(normDefault, opacity)});
+                ${borderWidthGlsl(borderWidth)}
             }
         }
     `;
@@ -452,7 +494,7 @@ export function getRandomPerPointWithSelectionShader(
  * @returns {string} A GLSL shader string.
  */
 export function getRandomPerPointFilteredShader(
-  featureIndices, opacity, featureIndexProp, pointIndexProp,
+  featureIndices, opacity, featureIndexProp, pointIndexProp, borderWidth = 0.0,
 ) {
   const numFeatures = featureIndices.length;
   const indicesDecl = `int selectedIndices[${numFeatures}] = int[${numFeatures}](${featureIndices.join(', ')});`;
@@ -477,6 +519,7 @@ export function getRandomPerPointFilteredShader(
             float g = hashToFloat(pointIndex, 1);
             float b = hashToFloat(pointIndex, 2);
             setColor(vec4(r, g, b, ${opacity}));
+            ${borderWidthGlsl(borderWidth)}
         }
     `;
 }
@@ -492,7 +535,7 @@ export function getPointsShader(layerCoordination) {
     featureSelection,
     featureFilterMode,
     featureColor,
-
+    pointMarkerBorderWidth = 0.0,
     featureIndexProp,
     pointIndexProp,
   } = layerCoordination;
@@ -580,15 +623,15 @@ export function getPointsShader(layerCoordination) {
   // ---- spatialLayerColor ----
   if (obsColorEncoding === 'spatialLayerColor') {
     if (!hasFeatureSelection || !hasResolvedIndices) {
-      return getSpatialLayerColorShader(staticColor, opacity);
+      return getSpatialLayerColorShader(staticColor, opacity, pointMarkerBorderWidth);
     }
     if (isFiltered) {
       return getSpatialLayerColorFilteredShader(
-        staticColor, opacity, featureIndices, featureIndexProp,
+        staticColor, opacity, featureIndices, featureIndexProp, pointMarkerBorderWidth,
       );
     }
     return getSpatialLayerColorWithSelectionShader(
-      staticColor, opacity, featureIndices, defaultColor, featureIndexProp,
+      staticColor, opacity, featureIndices, defaultColor, featureIndexProp, pointMarkerBorderWidth,
     );
   }
 
@@ -598,17 +641,17 @@ export function getPointsShader(layerCoordination) {
       throw new Error('In order to use gene-based color encoding for Neuroglancer Points, options.featureIndexProp must be specified for the obsPoints.ng-annotations fileType in the Vitessce configuration.');
     }
     if (!hasFeatureSelection || !hasResolvedIndices) {
-      return getGeneSelectionNoSelectionShader(staticColor, opacity);
+      return getGeneSelectionNoSelectionShader(staticColor, opacity, pointMarkerBorderWidth);
     }
     if (isFiltered) {
       return getGeneSelectionFilteredShader(
         featureIndices, resolvedFeatureColors,
-        staticColor, opacity, featureIndexProp,
+        staticColor, opacity, featureIndexProp, pointMarkerBorderWidth,
       );
     }
     return getGeneSelectionWithSelectionShader(
       featureIndices, resolvedFeatureColors,
-      staticColor, defaultColor, opacity, featureIndexProp,
+      staticColor, defaultColor, opacity, featureIndexProp, pointMarkerBorderWidth,
     );
   }
 
@@ -618,15 +661,15 @@ export function getPointsShader(layerCoordination) {
       throw new Error('In order to use gene-based color encoding for Neuroglancer Points, options.featureIndexProp must be specified for the obsPoints.ng-annotations fileType in the Vitessce configuration.');
     }
     if (!hasFeatureSelection || !hasResolvedIndices) {
-      return getRandomByFeatureShader(opacity, featureIndexProp);
+      return getRandomByFeatureShader(opacity, featureIndexProp, pointMarkerBorderWidth);
     }
     if (isFiltered) {
       return getRandomByFeatureFilteredShader(
-        featureIndices, opacity, featureIndexProp,
+        featureIndices, opacity, featureIndexProp, pointMarkerBorderWidth,
       );
     }
     return getRandomByFeatureWithSelectionShader(
-      featureIndices, defaultColor, opacity, featureIndexProp,
+      featureIndices, defaultColor, opacity, featureIndexProp, pointMarkerBorderWidth,
     );
   }
 
@@ -636,18 +679,28 @@ export function getPointsShader(layerCoordination) {
       throw new Error('In order to use per-point color encoding for Neuroglancer Points, options.pointIndexProp must be specified for the obsPoints.ng-annotations fileType in the Vitessce configuration.');
     }
     if (!hasFeatureSelection || !hasResolvedIndices) {
-      return getRandomPerPointShader(opacity, featureIndexProp, pointIndexProp);
+      return getRandomPerPointShader(
+        opacity,
+        featureIndexProp,
+        pointIndexProp,
+        pointMarkerBorderWidth,
+      );
     }
     if (isFiltered) {
       return getRandomPerPointFilteredShader(
-        featureIndices, opacity, featureIndexProp, pointIndexProp,
+        featureIndices, opacity, featureIndexProp, pointIndexProp, pointMarkerBorderWidth,
       );
     }
     return getRandomPerPointWithSelectionShader(
-      featureIndices, defaultColor, opacity, featureIndexProp, pointIndexProp,
+      featureIndices,
+      defaultColor,
+      opacity,
+      featureIndexProp,
+      pointIndexProp,
+      pointMarkerBorderWidth,
     );
   }
 
   // Fallback: static color.
-  return getSpatialLayerColorShader(staticColor, opacity);
+  return getSpatialLayerColorShader(staticColor, opacity, pointMarkerBorderWidth);
 }

package/src/shader-utils.test.js

@@ -47,6 +47,7 @@ describe('getSpatialLayerColorShader', () => {
     const expected = `
 void main() {
     setColor(vec4(1, 0.5019607843137255, 0, 0.8));
+    setPointMarkerBorderWidth(0.0);
 }
 `;
     expectShaderEqual(result, expected);
@@ -57,6 +58,7 @@ void main() {
     const expected = `
 void main() {
     setColor(vec4(0, 0, 0, 0));
+    setPointMarkerBorderWidth(0.0);
 }
 `;
     expectShaderEqual(result, expected);
@@ -67,6 +69,7 @@ void main() {
     const expected = `
 void main() {
     setColor(vec4(1, 1, 1, 1));
+    setPointMarkerBorderWidth(0.0);
 }
 `;
     expectShaderEqual(result, expected);
@@ -90,8 +93,10 @@ void main() {
     }
     if (isSelected) {
         setColor(vec4(1, 0, 0, 0.5));
+        setPointMarkerBorderWidth(0.0);
     } else {
         setColor(vec4(0.5019607843137255, 0.5019607843137255, 0.5019607843137255, 0.5));
+        setPointMarkerBorderWidth(0.0);
     }
 }
 `;
@@ -114,8 +119,10 @@ void main() {
     }
     if (isSelected) {
         setColor(vec4(0, 1, 0, 1));
+        setPointMarkerBorderWidth(0.0);
     } else {
         setColor(vec4(0, 0, 0, 1));
+        setPointMarkerBorderWidth(0.0);
     }
 }
 `;
@@ -142,6 +149,7 @@ void main() {
         discard;
     }
     setColor(vec4(0, 0, 1, 0.9));
+    setPointMarkerBorderWidth(0.0);
 }
 `;
     expectShaderEqual(result, expected);
@@ -158,6 +166,7 @@ describe('getGeneSelectionNoSelectionShader', () => {
     const expected = `
 void main() {
     setColor(vec4(0.39215686274509803, 0.7843137254901961, 0.19607843137254902, 0.7));
+    setPointMarkerBorderWidth(0.0);
 }
 `;
     expectShaderEqual(result, expected);
@@ -186,6 +195,7 @@ void main() {
         }
     }
     setColor(color);
+    setPointMarkerBorderWidth(0.0);
 }
 `;
     expectShaderEqual(result, expected);
@@ -216,6 +226,7 @@ void main() {
         }
     }
     setColor(color);
+    setPointMarkerBorderWidth(0.0);
 }
 `;
     expectShaderEqual(result, expected);
@@ -248,6 +259,7 @@ void main() {
         discard;
     }
     setColor(vec4(matchedColor, 0.75));
+    setPointMarkerBorderWidth(0.0);
 }
 `;
     expectShaderEqual(result, expected);
@@ -269,6 +281,7 @@ void main() {
     if (colorIdx < 0) { colorIdx = -colorIdx; }
     vec3 color = palette[colorIdx];
     setColor(vec4(color, 0.5));
+    setPointMarkerBorderWidth(0.0);
 }
 `;
     expectShaderEqual(result, expected);
@@ -295,8 +308,10 @@ void main() {
         int colorIdx = geneIndex - (geneIndex / 3) * 3;
         if (colorIdx < 0) { colorIdx = -colorIdx; }
         setColor(vec4(palette[colorIdx], 0.8));
+        setPointMarkerBorderWidth(0.0);
     } else {
         setColor(vec4(0.19607843137254902, 0.19607843137254902, 0.19607843137254902, 0.8));
+        setPointMarkerBorderWidth(0.0);
     }
 }
 `;
@@ -324,6 +339,7 @@ void main() {
     int colorIdx = geneIndex - (geneIndex / 3) * 3;
     if (colorIdx < 0) { colorIdx = -colorIdx; }
     setColor(vec4(palette[colorIdx], 1));
+    setPointMarkerBorderWidth(0.0);
 }
 `;
     expectShaderEqual(result, expected);
@@ -352,6 +368,7 @@ void main() {
     float g = hashToFloat(pointIndex, 1);
     float b = hashToFloat(pointIndex, 2);
     setColor(vec4(r, g, b, 0.9));
+    setPointMarkerBorderWidth(0.0);
 }
 `;
     expectShaderEqual(result, expected);
@@ -386,8 +403,10 @@ void main() {
         float g = hashToFloat(pointIndex, 1);
         float b = hashToFloat(pointIndex, 2);
         setColor(vec4(r, g, b, 0.5));
+        setPointMarkerBorderWidth(0.0);
     } else {
         setColor(vec4(0.39215686274509803, 0.39215686274509803, 0.39215686274509803, 0.5));
+        setPointMarkerBorderWidth(0.0);
     }
 }
 `;
@@ -425,6 +444,7 @@ void main() {
     float g = hashToFloat(pointIndex, 1);
     float b = hashToFloat(pointIndex, 2);
     setColor(vec4(r, g, b, 1));
+    setPointMarkerBorderWidth(0.0);
 }
 `;
     expectShaderEqual(result, expected);

package/src/use-memo-custom-comparison.js

@@ -101,6 +101,7 @@ export function customIsEqualForCellColors(prevDeps, nextDeps) {
               'obsSetSelection',
               'additionalObsSets',
               'spatialChannelColor',
+              'spatialChannelOpacity',
             ])
         ) {
           forceUpdate = true;
@@ -128,6 +129,10 @@ export function customIsEqualForInitialViewerState(prevDeps, nextDeps) {
   const curriedShallowDiffByChannelCoordination = (depName, layerScope, channelScope) => shallowDiffByChannelCoordination(prevDeps, nextDeps, depName, layerScope, channelScope);
   const curriedShallowDiffByChannelCoordinationWithKeys = (depName, layerScope, channelScope, keys) => shallowDiffByChannelCoordinationWithKeys(prevDeps, nextDeps, depName, layerScope, channelScope, keys);
 
+  if (['theme', 'showAxisLines'].some(curriedShallowDiff)) {
+    forceUpdate = true;
+  }
+
   // Segmentation layers/channels.
   if (['segmentationLayerScopes', 'segmentationChannelScopesByLayer'].some(curriedShallowDiff)) {
     // Force update for all layers since the layerScopes array changed.
@@ -172,6 +177,7 @@ export function customIsEqualForInitialViewerState(prevDeps, nextDeps) {
             'featureSelection',
             'featureFilterMode',
             'featureColor',
+            'spatialPointStrokeWidth',
           ])
           // For opacity, use an epsilon comparison to avoid too many re-renders, as it affects performance.
           || (