@vitessce/neuroglancer 3.9.7 → 3.9.9

package/dist-tsc/shader-utils.js

@@ -12,6 +12,16 @@ import { PALETTE, getDefaultColor } from '@vitessce/utils';
 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
@@ -39,12 +49,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)}
         }
     `;
 }
@@ -58,7 +69,7 @@ export function getSpatialLayerColorShader(staticColor, opacity) {
  * @param {string} featureIndexProp The property name for the feature index in the shader.
  * @returns {string} A GLSL shader string.
  */
-export function getSpatialLayerColorWithSelectionShader(staticColor, opacity, featureIndices, defaultColor, featureIndexProp) {
+export function getSpatialLayerColorWithSelectionShader(staticColor, opacity, featureIndices, defaultColor, featureIndexProp, borderWidth = 0.0) {
     const normStatic = normalizeColor(staticColor);
     const normDefault = normalizeColor(defaultColor);
     const numFeatures = featureIndices.length;
@@ -76,8 +87,10 @@ export function getSpatialLayerColorWithSelectionShader(staticColor, opacity, fe
             }
             if (isSelected) {
                 setColor(${toVec4(normStatic, opacity)});
+                ${borderWidthGlsl(borderWidth)}
             } else {
                 setColor(${toVec4(normDefault, opacity)});
+                ${borderWidthGlsl(borderWidth)}
             }
         }
     `;
@@ -91,7 +104,7 @@ export function getSpatialLayerColorWithSelectionShader(staticColor, opacity, fe
  * @param {string} featureIndexProp The property name for the feature index in the shader.
  * @returns {string} A GLSL shader string.
  */
-export function getSpatialLayerColorFilteredShader(staticColor, opacity, featureIndices, featureIndexProp) {
+export function getSpatialLayerColorFilteredShader(staticColor, opacity, featureIndices, featureIndexProp, borderWidth = 0.0) {
     const normStatic = normalizeColor(staticColor);
     const numFeatures = featureIndices.length;
     const indicesArr = `int selectedIndices[${numFeatures}] = int[${numFeatures}](${featureIndices.join(', ')});`;
@@ -110,6 +123,7 @@ export function getSpatialLayerColorFilteredShader(staticColor, opacity, feature
                 discard;
             }
             setColor(${toVec4(normStatic, opacity)});
+            ${borderWidthGlsl(borderWidth)}
         }
     `;
 }
@@ -124,12 +138,13 @@ export function getSpatialLayerColorFilteredShader(staticColor, opacity, feature
  * @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)}
         }
     `;
 }
@@ -148,7 +163,7 @@ export function getGeneSelectionNoSelectionShader(staticColor, opacity) {
  * @param {string} featureIndexProp The property name for the feature index in the shader.
  * @returns {string} A GLSL shader string.
  */
-export function getGeneSelectionWithSelectionShader(featureIndices, featureColors, staticColor, defaultColor, opacity, featureIndexProp) {
+export function getGeneSelectionWithSelectionShader(featureIndices, featureColors, staticColor, defaultColor, opacity, featureIndexProp, borderWidth = 0.0) {
     const numFeatures = featureIndices.length;
     const normDefault = normalizeColor(defaultColor);
     const normColors = featureColors.map(c => normalizeColor(c));
@@ -169,6 +184,7 @@ export function getGeneSelectionWithSelectionShader(featureIndices, featureColor
                 }
             }
             setColor(color);
+            ${borderWidthGlsl(borderWidth)}
         }
     `;
 }
@@ -183,7 +199,7 @@ export function getGeneSelectionWithSelectionShader(featureIndices, featureColor
  * @param {string} featureIndexProp The property name for the feature index in the shader.
  * @returns {string} A GLSL shader string.
  */
-export function getGeneSelectionFilteredShader(featureIndices, featureColors, staticColor, opacity, featureIndexProp) {
+export function getGeneSelectionFilteredShader(featureIndices, featureColors, staticColor, opacity, featureIndexProp, borderWidth = 0.0) {
     const numFeatures = featureIndices.length;
     const normColors = featureColors.map(c => normalizeColor(c));
     const normStatic = normalizeColor(staticColor);
@@ -208,6 +224,7 @@ export function getGeneSelectionFilteredShader(featureIndices, featureColors, st
                 discard;
             }
             setColor(vec4(matchedColor, ${opacity}));
+            ${borderWidthGlsl(borderWidth)}
         }
     `;
 }
@@ -221,7 +238,7 @@ export function getGeneSelectionFilteredShader(featureIndices, featureColors, st
  * @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(', ')});`;
@@ -234,6 +251,7 @@ export function getRandomByFeatureShader(opacity, featureIndexProp) {
             if (colorIdx < 0) { colorIdx = -colorIdx; }
             vec3 color = palette[colorIdx];
             setColor(vec4(color, ${opacity}));
+            ${borderWidthGlsl(borderWidth)}
         }
     `;
 }
@@ -247,7 +265,7 @@ export function getRandomByFeatureShader(opacity, featureIndexProp) {
  * @param {string} featureIndexProp The property name for the feature index in the shader.
  * @returns {string} A GLSL shader string.
  */
-export function getRandomByFeatureWithSelectionShader(featureIndices, defaultColor, opacity, featureIndexProp) {
+export function getRandomByFeatureWithSelectionShader(featureIndices, defaultColor, opacity, featureIndexProp, borderWidth = 0.0) {
     const paletteSize = PALETTE.length;
     const normPalette = PALETTE.map(c => normalizeColor(c));
     const normDefault = normalizeColor(defaultColor);
@@ -270,8 +288,10 @@ export function getRandomByFeatureWithSelectionShader(featureIndices, defaultCol
                 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)}
             }
         }
     `;
@@ -284,7 +304,7 @@ export function getRandomByFeatureWithSelectionShader(featureIndices, defaultCol
  * @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;
@@ -308,6 +328,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)}
         }
     `;
 }
@@ -338,7 +359,7 @@ 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()}
@@ -349,6 +370,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)}
         }
     `;
 }
@@ -362,7 +384,7 @@ export function getRandomPerPointShader(opacity, featureIndexProp, pointIndexPro
  * @param {string} pointIndexProp The property name for the point index in the shader.
  * @returns {string} A GLSL shader string.
  */
-export function getRandomPerPointWithSelectionShader(featureIndices, defaultColor, opacity, featureIndexProp, pointIndexProp) {
+export function getRandomPerPointWithSelectionShader(featureIndices, defaultColor, opacity, featureIndexProp, pointIndexProp, borderWidth = 0.0) {
     const normDefault = normalizeColor(defaultColor);
     const numFeatures = featureIndices.length;
     const indicesDecl = `int selectedIndices[${numFeatures}] = int[${numFeatures}](${featureIndices.join(', ')});`;
@@ -384,8 +406,10 @@ export function getRandomPerPointWithSelectionShader(featureIndices, defaultColo
                 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)}
             }
         }
     `;
@@ -399,7 +423,7 @@ export function getRandomPerPointWithSelectionShader(featureIndices, defaultColo
  * @param {string} pointIndexProp The property name for the point index in the shader.
  * @returns {string} A GLSL shader string.
  */
-export function getRandomPerPointFilteredShader(featureIndices, opacity, featureIndexProp, pointIndexProp) {
+export function getRandomPerPointFilteredShader(featureIndices, opacity, featureIndexProp, pointIndexProp, borderWidth = 0.0) {
     const numFeatures = featureIndices.length;
     const indicesDecl = `int selectedIndices[${numFeatures}] = int[${numFeatures}](${featureIndices.join(', ')});`;
     // lang: glsl
@@ -422,11 +446,12 @@ export function getRandomPerPointFilteredShader(featureIndices, opacity, feature
             float g = hashToFloat(pointIndex, 1);
             float b = hashToFloat(pointIndex, 2);
             setColor(vec4(r, g, b, ${opacity}));
+            ${borderWidthGlsl(borderWidth)}
         }
     `;
 }
 export function getPointsShader(layerCoordination) {
-    const { theme, featureIndex, spatialLayerOpacity, obsColorEncoding, spatialLayerColor, featureSelection, featureFilterMode, featureColor, featureIndexProp, pointIndexProp, } = layerCoordination;
+    const { theme, featureIndex, spatialLayerOpacity, obsColorEncoding, spatialLayerColor, featureSelection, featureFilterMode, featureColor, pointMarkerBorderWidth = 0.0, featureIndexProp, pointIndexProp, } = layerCoordination;
     const defaultColor = getDefaultColor(theme);
     const opacity = spatialLayerOpacity ?? 1.0;
     const staticColor = (Array.isArray(spatialLayerColor) && spatialLayerColor.length === 3
@@ -496,12 +521,12 @@ 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);
+            return getSpatialLayerColorFilteredShader(staticColor, opacity, featureIndices, featureIndexProp, pointMarkerBorderWidth);
         }
-        return getSpatialLayerColorWithSelectionShader(staticColor, opacity, featureIndices, defaultColor, featureIndexProp);
+        return getSpatialLayerColorWithSelectionShader(staticColor, opacity, featureIndices, defaultColor, featureIndexProp, pointMarkerBorderWidth);
     }
     // ---- geneSelection ----
     if (obsColorEncoding === 'geneSelection') {
@@ -509,12 +534,12 @@ 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);
+            return getGeneSelectionFilteredShader(featureIndices, resolvedFeatureColors, staticColor, opacity, featureIndexProp, pointMarkerBorderWidth);
         }
-        return getGeneSelectionWithSelectionShader(featureIndices, resolvedFeatureColors, staticColor, defaultColor, opacity, featureIndexProp);
+        return getGeneSelectionWithSelectionShader(featureIndices, resolvedFeatureColors, staticColor, defaultColor, opacity, featureIndexProp, pointMarkerBorderWidth);
     }
     // ---- randomByFeature ----
     if (obsColorEncoding === 'randomByFeature') {
@@ -522,12 +547,12 @@ 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);
+            return getRandomByFeatureFilteredShader(featureIndices, opacity, featureIndexProp, pointMarkerBorderWidth);
         }
-        return getRandomByFeatureWithSelectionShader(featureIndices, defaultColor, opacity, featureIndexProp);
+        return getRandomByFeatureWithSelectionShader(featureIndices, defaultColor, opacity, featureIndexProp, pointMarkerBorderWidth);
     }
     // ---- random (per point) ----
     if (obsColorEncoding === 'random') {
@@ -535,13 +560,13 @@ 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);
+            return getRandomPerPointFilteredShader(featureIndices, opacity, featureIndexProp, pointIndexProp, pointMarkerBorderWidth);
         }
-        return getRandomPerPointWithSelectionShader(featureIndices, defaultColor, opacity, featureIndexProp, pointIndexProp);
+        return getRandomPerPointWithSelectionShader(featureIndices, defaultColor, opacity, featureIndexProp, pointIndexProp, pointMarkerBorderWidth);
     }
     // Fallback: static color.
-    return getSpatialLayerColorShader(staticColor, opacity);
+    return getSpatialLayerColorShader(staticColor, opacity, pointMarkerBorderWidth);
 }

package/dist-tsc/shader-utils.test.js

@@ -29,6 +29,7 @@ describe('getSpatialLayerColorShader', () => {
         const expected = `
 void main() {
     setColor(vec4(1, 0.5019607843137255, 0, 0.8));
+    setPointMarkerBorderWidth(0.0);
 }
 `;
         expectShaderEqual(result, expected);
@@ -38,6 +39,7 @@ void main() {
         const expected = `
 void main() {
     setColor(vec4(0, 0, 0, 0));
+    setPointMarkerBorderWidth(0.0);
 }
 `;
         expectShaderEqual(result, expected);
@@ -47,6 +49,7 @@ void main() {
         const expected = `
 void main() {
     setColor(vec4(1, 1, 1, 1));
+    setPointMarkerBorderWidth(0.0);
 }
 `;
         expectShaderEqual(result, expected);
@@ -67,8 +70,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);
     }
 }
 `;
@@ -88,8 +93,10 @@ void main() {
     }
     if (isSelected) {
         setColor(vec4(0, 1, 0, 1));
+        setPointMarkerBorderWidth(0.0);
     } else {
         setColor(vec4(0, 0, 0, 1));
+        setPointMarkerBorderWidth(0.0);
     }
 }
 `;
@@ -113,6 +120,7 @@ void main() {
         discard;
     }
     setColor(vec4(0, 0, 1, 0.9));
+    setPointMarkerBorderWidth(0.0);
 }
 `;
         expectShaderEqual(result, expected);
@@ -127,6 +135,7 @@ describe('getGeneSelectionNoSelectionShader', () => {
         const expected = `
 void main() {
     setColor(vec4(0.39215686274509803, 0.7843137254901961, 0.19607843137254902, 0.7));
+    setPointMarkerBorderWidth(0.0);
 }
 `;
         expectShaderEqual(result, expected);
@@ -147,6 +156,7 @@ void main() {
         }
     }
     setColor(color);
+    setPointMarkerBorderWidth(0.0);
 }
 `;
         expectShaderEqual(result, expected);
@@ -169,6 +179,7 @@ void main() {
         }
     }
     setColor(color);
+    setPointMarkerBorderWidth(0.0);
 }
 `;
         expectShaderEqual(result, expected);
@@ -194,6 +205,7 @@ void main() {
         discard;
     }
     setColor(vec4(matchedColor, 0.75));
+    setPointMarkerBorderWidth(0.0);
 }
 `;
         expectShaderEqual(result, expected);
@@ -213,6 +225,7 @@ void main() {
     if (colorIdx < 0) { colorIdx = -colorIdx; }
     vec3 color = palette[colorIdx];
     setColor(vec4(color, 0.5));
+    setPointMarkerBorderWidth(0.0);
 }
 `;
         expectShaderEqual(result, expected);
@@ -236,8 +249,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);
     }
 }
 `;
@@ -264,6 +279,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);
@@ -290,6 +306,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);
@@ -321,8 +338,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);
     }
 }
 `;
@@ -357,6 +376,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/dist-tsc/use-memo-custom-comparison.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-memo-custom-comparison.d.ts","sourceRoot":"","sources":["../src/use-memo-custom-comparison.js"],"names":[],"mappings":"AAIA;;;;;;;;;GASG;AACH,wCAPa,CAAC,WACH,MAAM,CAAC,gBACP,GAAG,iBACH,CAAC,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,KAAK,OAAO,GAEvC,CAAC,CAUb;AA6CD,kFA+CC;AAED,0FAyEC"}
+{"version":3,"file":"use-memo-custom-comparison.d.ts","sourceRoot":"","sources":["../src/use-memo-custom-comparison.js"],"names":[],"mappings":"AAIA;;;;;;;;;GASG;AACH,wCAPa,CAAC,WACH,MAAM,CAAC,gBACP,GAAG,iBACH,CAAC,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,KAAK,OAAO,GAEvC,CAAC,CAUb;AA6CD,kFAgDC;AAED,0FA8EC"}

package/dist-tsc/use-memo-custom-comparison.js

@@ -74,6 +74,7 @@ export function customIsEqualForCellColors(prevDeps, nextDeps) {
                         'obsSetSelection',
                         'additionalObsSets',
                         'spatialChannelColor',
+                        'spatialChannelOpacity',
                     ])) {
                     forceUpdate = true;
                 }
@@ -96,6 +97,9 @@ export function customIsEqualForInitialViewerState(prevDeps, nextDeps) {
     const curriedShallowDiffByLayerCoordinationWithKeys = (depName, layerScope, keys) => shallowDiffByLayerCoordinationWithKeys(prevDeps, nextDeps, depName, layerScope, keys);
     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.
@@ -136,6 +140,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.
                 || (Math.abs(prevDeps?.pointLayerCoordination?.[0]?.[layerScope]?.spatialLayerOpacity - nextDeps?.pointLayerCoordination?.[0]?.[layerScope]?.spatialLayerOpacity)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/neuroglancer",
-  "version": "3.9.7",
+  "version": "3.9.9",
   "author": "Gehlenborg Lab",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -20,14 +20,14 @@
     "lodash-es": "^4.17.21",
     "three": "^0.154.0",
     "react": "18.3.1",
-    "@vitessce/styles": "3.9.7",
-    "@vitessce/constants-internal": "3.9.7",
-    "@vitessce/vit-s": "3.9.7",
-    "@vitessce/utils": "3.9.7",
-    "@vitessce/neuroglancer-workers": "3.9.7",
-    "@vitessce/sets-utils": "3.9.7",
-    "@vitessce/tooltip": "3.9.7",
-    "@vitessce/legend": "3.9.7"
+    "@vitessce/constants-internal": "3.9.9",
+    "@vitessce/neuroglancer-workers": "3.9.9",
+    "@vitessce/styles": "3.9.9",
+    "@vitessce/sets-utils": "3.9.9",
+    "@vitessce/utils": "3.9.9",
+    "@vitessce/vit-s": "3.9.9",
+    "@vitessce/tooltip": "3.9.9",
+    "@vitessce/legend": "3.9.9"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",

package/src/Neuroglancer.js

@@ -92,7 +92,7 @@ export class NeuroglancerComp extends PureComponent {
   }
 
   render() {
-    const { classes, viewerState, cellColorMapping } = this.props;
+    const { classes, viewerState, cellColorMapping, onLayerLoadingChange } = this.props;
 
     return (
       <>
@@ -103,6 +103,7 @@ export class NeuroglancerComp extends PureComponent {
               brainMapsClientId="NOT_A_VALID_ID"
               viewerState={viewerState}
               onViewerStateChanged={this.onViewerStateChanged}
+              onLayerLoadingChange={onLayerLoadingChange}
               bundleRoot={this.bundleRoot}
               cellColorMapping={cellColorMapping}
               ref={this.onRef}

package/src/NeuroglancerSubscriber.js

@@ -79,6 +79,7 @@ export function NeuroglancerSubscriber(props) {
     downloadButtonVisible,
     removeGridComponent,
     theme,
+    showAxisLines = false,
     title = 'Spatial',
     subtitle = 'Powered by Neuroglancer',
     helpText = ViewHelpMapping.NEUROGLANCER,
@@ -207,6 +208,7 @@ export function NeuroglancerSubscriber(props) {
       CoordinationType.TOOLTIPS_VISIBLE,
       CoordinationType.TOOLTIP_CROSSHAIRS_VISIBLE,
       CoordinationType.LEGEND_VISIBLE,
+      CoordinationType.SPATIAL_POINT_STROKE_WIDTH,
     ],
     coordinationScopes,
     coordinationScopesBy,
@@ -289,8 +291,8 @@ export function NeuroglancerSubscriber(props) {
           obsSetSelection,
           additionalObsSets,
           spatialChannelColor,
+          spatialChannelOpacity,
         } = segmentationChannelCoordination[0][layerScope][channelScope];
-
         if (obsColorEncoding === 'spatialChannelColor') {
           // All segments get the same static channel color
           if (layerIndex && spatialChannelColor) {
@@ -315,6 +317,7 @@ export function NeuroglancerSubscriber(props) {
               });
             }
             result[layerScope][channelScope] = ngCellColors;
+            result[layerScope].opacity = spatialChannelOpacity ?? 1.0;
           }
         } else if (layerSets && layerIndex) {
           const mergedCellSets = mergeObsSets(layerSets, additionalObsSets);
@@ -331,6 +334,7 @@ export function NeuroglancerSubscriber(props) {
             ngCellColors[i] = rgbToHex(color);
           });
           result[layerScope][channelScope] = ngCellColors;
+          result[layerScope].opacity = spatialChannelOpacity ?? 1.0;
         }
       });
     });
@@ -349,6 +353,7 @@ export function NeuroglancerSubscriber(props) {
   // Obtain the Neuroglancer viewerState object.
   const initalViewerState = useNeuroglancerViewerState(
     theme,
+    showAxisLines,
     segmentationLayerScopes,
     segmentationChannelScopesByLayer,
     segmentationLayerCoordination,
@@ -403,6 +408,9 @@ export function NeuroglancerSubscriber(props) {
     orbit: spatialRotationOrbit,
   });
 
+  // Track layer loading state for showing loading indicator
+  const [isLayersLoaded, setIsLayersLoaded] = useState(false);
+
   // Track the last coord values we saw, and only mark "vitessce"
   // when *those* actually change. This prevents cell set renders
   // from spoofing the source.
@@ -566,7 +574,10 @@ export function NeuroglancerSubscriber(props) {
     const result = {};
     segmentationLayerScopes?.forEach((layerScope) => {
       const channelScope = segmentationChannelScopesByLayer?.[layerScope]?.[0];
-      result[layerScope] = segmentationColorMapping?.[layerScope]?.[channelScope] ?? {};
+      result[layerScope] = {
+        colors: segmentationColorMapping?.[layerScope]?.[channelScope] ?? {},
+        opacity: segmentationColorMapping?.[layerScope]?.opacity ?? 1.0,
+      };
     });
     return result;
   }, [segmentationColorMapping, segmentationLayerScopes, segmentationChannelScopesByLayer]);
@@ -720,12 +731,13 @@ export function NeuroglancerSubscriber(props) {
 
     const updatedLayers = current?.layers?.map((layer, idx) => {
       const layerScope = segmentationLayerScopes?.[idx];
-      const layerColorMapping = cellColorMappingByLayer?.[layerScope] ?? {};
+      const layerColorMapping = cellColorMappingByLayer?.[layerScope]?.colors ?? {};
       const layerSegments = Object.keys(layerColorMapping);
       return {
         ...layer,
         segments: layerSegments,
         segmentColors: layerColorMapping,
+        objectAlpha: cellColorMappingByLayer?.[layerScope]?.opacity ?? 1.0,
       };
     }) ?? [];
 
@@ -758,6 +770,10 @@ export function NeuroglancerSubscriber(props) {
     setCellHighlight(String(obsId));
   }, [setCellHighlight]);
 
+  const handleLayerLoadingChange = useCallback((isLoaded) => {
+    setIsLayersLoaded(isLoaded);
+  }, []);
+
   // TODO: if all cells are deselected, a black view is shown, rather we want to show empty NG view?
   // if (!cellColorMapping || Object.keys(cellColorMapping).length === 0) {
   //   return;
@@ -777,7 +793,7 @@ export function NeuroglancerSubscriber(props) {
       closeButtonVisible={closeButtonVisible}
       downloadButtonVisible={downloadButtonVisible}
       removeGridComponent={removeGridComponent}
-      isReady={isReady}
+      isReady={isReady && isLayersLoaded}
       errors={errors}
       withPadding={false}
       guideUrl={GUIDE_URL}
@@ -788,10 +804,17 @@ export function NeuroglancerSubscriber(props) {
             <MultiLegend
               theme="dark"
               maxHeight={ngHeight}
+
+              // Segmentations
               segmentationLayerScopes={segmentationLayerScopes}
               segmentationLayerCoordination={segmentationLayerCoordination}
               segmentationChannelScopesByLayer={segmentationChannelScopesByLayer}
               segmentationChannelCoordination={segmentationChannelCoordination}
+
+              // Points
+              pointLayerScopes={pointLayerScopes}
+              pointLayerCoordination={pointLayerCoordination}
+              pointMultiIndicesData={pointMultiIndicesData}
             />
           </div>
 
@@ -802,6 +825,7 @@ export function NeuroglancerSubscriber(props) {
             viewerState={derivedViewerState}
             cellColorMapping={cellColorMappingByLayer}
             setViewerState={handleStateUpdate}
+            onLayerLoadingChange={handleLayerLoadingChange}
           />
         </div>
       ) : null}