@vitessce/neuroglancer 3.9.7 → 3.9.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{ReactNeuroglancer-pv4bM8Yp.js → ReactNeuroglancer-Bxe4YcLF.js} +64 -9
- package/dist/{index-BEPd2Tds.js → index-anGvS-pL.js} +120 -46
- package/dist/index.js +1 -1
- package/dist-tsc/Neuroglancer.d.ts.map +1 -1
- package/dist-tsc/Neuroglancer.js +2 -2
- package/dist-tsc/NeuroglancerSubscriber.d.ts.map +1 -1
- package/dist-tsc/NeuroglancerSubscriber.js +22 -6
- package/dist-tsc/ReactNeuroglancer.d.ts +11 -0
- package/dist-tsc/ReactNeuroglancer.d.ts.map +1 -1
- package/dist-tsc/ReactNeuroglancer.js +60 -5
- package/dist-tsc/data-hook-ng-utils.d.ts +1 -1
- package/dist-tsc/data-hook-ng-utils.d.ts.map +1 -1
- package/dist-tsc/data-hook-ng-utils.js +18 -4
- package/dist-tsc/shader-utils.d.ts +12 -12
- package/dist-tsc/shader-utils.d.ts.map +1 -1
- package/dist-tsc/shader-utils.js +51 -26
- package/dist-tsc/shader-utils.test.js +20 -0
- package/dist-tsc/use-memo-custom-comparison.d.ts.map +1 -1
- package/dist-tsc/use-memo-custom-comparison.js +5 -0
- package/package.json +9 -9
- package/src/Neuroglancer.js +2 -1
- package/src/NeuroglancerSubscriber.js +28 -4
- package/src/ReactNeuroglancer.js +67 -5
- package/src/data-hook-ng-utils.js +21 -2
- package/src/shader-utils.js +79 -26
- package/src/shader-utils.test.js +20 -0
- package/src/use-memo-custom-comparison.js +6 -0
|
@@ -296,6 +296,7 @@ const CoordinationType$1 = {
|
|
|
296
296
|
SPATIAL_LAYER_MODEL_MATRIX: "spatialLayerModelMatrix",
|
|
297
297
|
SPATIAL_SEGMENTATION_FILLED: "spatialSegmentationFilled",
|
|
298
298
|
SPATIAL_SEGMENTATION_STROKE_WIDTH: "spatialSegmentationStrokeWidth",
|
|
299
|
+
SPATIAL_POINT_STROKE_WIDTH: "spatialPointStrokeWidth",
|
|
299
300
|
SPATIAL_CHANNEL_COLOR: "spatialChannelColor",
|
|
300
301
|
SPATIAL_CHANNEL_VISIBLE: "spatialChannelVisible",
|
|
301
302
|
SPATIAL_CHANNEL_OPACITY: "spatialChannelOpacity",
|
|
@@ -664,7 +665,8 @@ const COMPONENT_COORDINATION_TYPES = {
|
|
|
664
665
|
CoordinationType$1.SPATIAL_CHANNEL_COLOR,
|
|
665
666
|
CoordinationType$1.SPATIAL_CHANNEL_OPACITY,
|
|
666
667
|
CoordinationType$1.SPATIAL_CHANNEL_VISIBLE,
|
|
667
|
-
CoordinationType$1.LEGEND_VISIBLE
|
|
668
|
+
CoordinationType$1.LEGEND_VISIBLE,
|
|
669
|
+
CoordinationType$1.SPATIAL_POINT_STROKE_WIDTH
|
|
668
670
|
],
|
|
669
671
|
[ViewType$1.SCATTERPLOT]: [
|
|
670
672
|
CoordinationType$1.DATASET,
|
|
@@ -1048,6 +1050,7 @@ const COMPONENT_COORDINATION_TYPES = {
|
|
|
1048
1050
|
CoordinationType$1.SPATIAL_CHANNEL_COLOR,
|
|
1049
1051
|
CoordinationType$1.SPATIAL_SEGMENTATION_FILLED,
|
|
1050
1052
|
CoordinationType$1.SPATIAL_SEGMENTATION_STROKE_WIDTH,
|
|
1053
|
+
CoordinationType$1.SPATIAL_POINT_STROKE_WIDTH,
|
|
1051
1054
|
CoordinationType$1.IMAGE_CHANNEL,
|
|
1052
1055
|
CoordinationType$1.IMAGE_LAYER,
|
|
1053
1056
|
CoordinationType$1.SEGMENTATION_CHANNEL,
|
|
@@ -10630,6 +10633,8 @@ z.object({
|
|
|
10630
10633
|
// projectionScale: z.number(),
|
|
10631
10634
|
// position: z.array(z.number()).length(3),
|
|
10632
10635
|
// projectionOrientation: z.array(z.number()).length(4),
|
|
10636
|
+
subsources: z.record(z.boolean()).describe("Subsources are the individual data components of a source (e.g. meshes, skeletons, etc.). Each entry explicitly enables or disables a subsource.").optional(),
|
|
10637
|
+
enableDefaultSubsources: z.boolean().describe("When true (default), automatically loads all subsources (defined in mesh metadata), when false loads what is explicitly enabled in `subsources`.").optional()
|
|
10633
10638
|
}).partial().nullable();
|
|
10634
10639
|
z.object({
|
|
10635
10640
|
projectionAnnotationSpacing: z.number(),
|
|
@@ -31842,7 +31847,9 @@ function Legend(props) {
|
|
|
31842
31847
|
isStaticColor,
|
|
31843
31848
|
missing,
|
|
31844
31849
|
showObsLabel,
|
|
31845
|
-
staticColor
|
|
31850
|
+
staticColor,
|
|
31851
|
+
featureColor,
|
|
31852
|
+
pointsLegendElements
|
|
31846
31853
|
]);
|
|
31847
31854
|
const showInteractiveSlider = !isPointsLayer && setFeatureValueColormapRange && ["geneSelection", "geneExpression"].includes(obsColorEncoding ?? "") && pointsVisible && featureValueColormap;
|
|
31848
31855
|
const globalExtent = useMemo(() => {
|
|
@@ -34680,7 +34687,7 @@ function NeuroglancerGlobalStyles(props) {
|
|
|
34680
34687
|
}
|
|
34681
34688
|
));
|
|
34682
34689
|
}
|
|
34683
|
-
const LazyReactNeuroglancer = React__default.lazy(() => import("./ReactNeuroglancer-
|
|
34690
|
+
const LazyReactNeuroglancer = React__default.lazy(() => import("./ReactNeuroglancer-Bxe4YcLF.js"));
|
|
34684
34691
|
function createWorker() {
|
|
34685
34692
|
const worker = new WorkerFactory$1();
|
|
34686
34693
|
worker.AsyncComputationWorker = WorkerFactory;
|
|
@@ -34752,13 +34759,14 @@ class NeuroglancerComp extends PureComponent {
|
|
|
34752
34759
|
}
|
|
34753
34760
|
}
|
|
34754
34761
|
render() {
|
|
34755
|
-
const { classes, viewerState, cellColorMapping } = this.props;
|
|
34762
|
+
const { classes, viewerState, cellColorMapping, onLayerLoadingChange } = this.props;
|
|
34756
34763
|
return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(NeuroglancerGlobalStyles, { classes }), /* @__PURE__ */ React__default.createElement("div", { className: classes.neuroglancerWrapper }, /* @__PURE__ */ React__default.createElement(Suspense, { fallback: /* @__PURE__ */ React__default.createElement("div", null, "Loading...") }, /* @__PURE__ */ React__default.createElement(
|
|
34757
34764
|
LazyReactNeuroglancer,
|
|
34758
34765
|
{
|
|
34759
34766
|
brainMapsClientId: "NOT_A_VALID_ID",
|
|
34760
34767
|
viewerState,
|
|
34761
34768
|
onViewerStateChanged: this.onViewerStateChanged,
|
|
34769
|
+
onLayerLoadingChange,
|
|
34762
34770
|
bundleRoot: this.bundleRoot,
|
|
34763
34771
|
cellColorMapping,
|
|
34764
34772
|
ref: this.onRef
|
|
@@ -34822,7 +34830,8 @@ function customIsEqualForCellColors(prevDeps, nextDeps) {
|
|
|
34822
34830
|
"obsColorEncoding",
|
|
34823
34831
|
"obsSetSelection",
|
|
34824
34832
|
"additionalObsSets",
|
|
34825
|
-
"spatialChannelColor"
|
|
34833
|
+
"spatialChannelColor",
|
|
34834
|
+
"spatialChannelOpacity"
|
|
34826
34835
|
])) {
|
|
34827
34836
|
forceUpdate = true;
|
|
34828
34837
|
}
|
|
@@ -34838,6 +34847,9 @@ function customIsEqualForInitialViewerState(prevDeps, nextDeps) {
|
|
|
34838
34847
|
const curriedShallowDiffByLayer = (depName, scopeName) => shallowDiffByLayer(prevDeps, nextDeps, depName, scopeName);
|
|
34839
34848
|
const curriedShallowDiffByLayerCoordinationWithKeys = (depName, layerScope, keys2) => shallowDiffByLayerCoordinationWithKeys(prevDeps, nextDeps, depName, layerScope, keys2);
|
|
34840
34849
|
const curriedShallowDiffByChannelCoordinationWithKeys = (depName, layerScope, channelScope, keys2) => shallowDiffByChannelCoordinationWithKeys(prevDeps, nextDeps, depName, layerScope, channelScope, keys2);
|
|
34850
|
+
if (["theme", "showAxisLines"].some(curriedShallowDiff)) {
|
|
34851
|
+
forceUpdate = true;
|
|
34852
|
+
}
|
|
34841
34853
|
if (["segmentationLayerScopes", "segmentationChannelScopesByLayer"].some(curriedShallowDiff)) {
|
|
34842
34854
|
forceUpdate = true;
|
|
34843
34855
|
} else {
|
|
@@ -34868,7 +34880,8 @@ function customIsEqualForInitialViewerState(prevDeps, nextDeps) {
|
|
|
34868
34880
|
"spatialLayerColor",
|
|
34869
34881
|
"featureSelection",
|
|
34870
34882
|
"featureFilterMode",
|
|
34871
|
-
"featureColor"
|
|
34883
|
+
"featureColor",
|
|
34884
|
+
"spatialPointStrokeWidth"
|
|
34872
34885
|
]) || Math.abs(((_c = (_b2 = (_a2 = prevDeps == null ? void 0 : prevDeps.pointLayerCoordination) == null ? void 0 : _a2[0]) == null ? void 0 : _b2[layerScope]) == null ? void 0 : _c.spatialLayerOpacity) - ((_f = (_e = (_d = nextDeps == null ? void 0 : nextDeps.pointLayerCoordination) == null ? void 0 : _d[0]) == null ? void 0 : _e[layerScope]) == null ? void 0 : _f.spatialLayerOpacity)) >= 0.05) {
|
|
34873
34886
|
forceUpdate = true;
|
|
34874
34887
|
}
|
|
@@ -34879,21 +34892,25 @@ function customIsEqualForInitialViewerState(prevDeps, nextDeps) {
|
|
|
34879
34892
|
function normalizeColor(rgbColor) {
|
|
34880
34893
|
return rgbColor.map((c) => c / 255);
|
|
34881
34894
|
}
|
|
34895
|
+
function borderWidthGlsl(borderWidth = 0) {
|
|
34896
|
+
return `setPointMarkerBorderWidth(${borderWidth.toFixed(1)});`;
|
|
34897
|
+
}
|
|
34882
34898
|
function toVec3(normalizedColor) {
|
|
34883
34899
|
return `vec3(${normalizedColor.join(", ")})`;
|
|
34884
34900
|
}
|
|
34885
34901
|
function toVec4(normalizedColor, alpha2) {
|
|
34886
34902
|
return `vec4(${normalizedColor.join(", ")}, ${alpha2})`;
|
|
34887
34903
|
}
|
|
34888
|
-
function getSpatialLayerColorShader(staticColor, opacity) {
|
|
34904
|
+
function getSpatialLayerColorShader(staticColor, opacity, borderWidth = 0) {
|
|
34889
34905
|
const norm = normalizeColor(staticColor);
|
|
34890
34906
|
return `
|
|
34891
34907
|
void main() {
|
|
34892
34908
|
setColor(${toVec4(norm, opacity)});
|
|
34909
|
+
${borderWidthGlsl(borderWidth)}
|
|
34893
34910
|
}
|
|
34894
34911
|
`;
|
|
34895
34912
|
}
|
|
34896
|
-
function getSpatialLayerColorWithSelectionShader(staticColor, opacity, featureIndices, defaultColor, featureIndexProp) {
|
|
34913
|
+
function getSpatialLayerColorWithSelectionShader(staticColor, opacity, featureIndices, defaultColor, featureIndexProp, borderWidth = 0) {
|
|
34897
34914
|
const normStatic = normalizeColor(staticColor);
|
|
34898
34915
|
const normDefault = normalizeColor(defaultColor);
|
|
34899
34916
|
const numFeatures = featureIndices.length;
|
|
@@ -34910,13 +34927,15 @@ function getSpatialLayerColorWithSelectionShader(staticColor, opacity, featureIn
|
|
|
34910
34927
|
}
|
|
34911
34928
|
if (isSelected) {
|
|
34912
34929
|
setColor(${toVec4(normStatic, opacity)});
|
|
34930
|
+
${borderWidthGlsl(borderWidth)}
|
|
34913
34931
|
} else {
|
|
34914
34932
|
setColor(${toVec4(normDefault, opacity)});
|
|
34933
|
+
${borderWidthGlsl(borderWidth)}
|
|
34915
34934
|
}
|
|
34916
34935
|
}
|
|
34917
34936
|
`;
|
|
34918
34937
|
}
|
|
34919
|
-
function getSpatialLayerColorFilteredShader(staticColor, opacity, featureIndices, featureIndexProp) {
|
|
34938
|
+
function getSpatialLayerColorFilteredShader(staticColor, opacity, featureIndices, featureIndexProp, borderWidth = 0) {
|
|
34920
34939
|
const normStatic = normalizeColor(staticColor);
|
|
34921
34940
|
const numFeatures = featureIndices.length;
|
|
34922
34941
|
const indicesArr = `int selectedIndices[${numFeatures}] = int[${numFeatures}](${featureIndices.join(", ")});`;
|
|
@@ -34934,18 +34953,20 @@ function getSpatialLayerColorFilteredShader(staticColor, opacity, featureIndices
|
|
|
34934
34953
|
discard;
|
|
34935
34954
|
}
|
|
34936
34955
|
setColor(${toVec4(normStatic, opacity)});
|
|
34956
|
+
${borderWidthGlsl(borderWidth)}
|
|
34937
34957
|
}
|
|
34938
34958
|
`;
|
|
34939
34959
|
}
|
|
34940
|
-
function getGeneSelectionNoSelectionShader(staticColor, opacity) {
|
|
34960
|
+
function getGeneSelectionNoSelectionShader(staticColor, opacity, borderWidth = 0) {
|
|
34941
34961
|
const norm = normalizeColor(staticColor);
|
|
34942
34962
|
return `
|
|
34943
34963
|
void main() {
|
|
34944
34964
|
setColor(${toVec4(norm, opacity)});
|
|
34965
|
+
${borderWidthGlsl(borderWidth)}
|
|
34945
34966
|
}
|
|
34946
34967
|
`;
|
|
34947
34968
|
}
|
|
34948
|
-
function getGeneSelectionWithSelectionShader(featureIndices, featureColors, staticColor, defaultColor, opacity, featureIndexProp) {
|
|
34969
|
+
function getGeneSelectionWithSelectionShader(featureIndices, featureColors, staticColor, defaultColor, opacity, featureIndexProp, borderWidth = 0) {
|
|
34949
34970
|
const numFeatures = featureIndices.length;
|
|
34950
34971
|
const normDefault = normalizeColor(defaultColor);
|
|
34951
34972
|
const normColors = featureColors.map((c) => normalizeColor(c));
|
|
@@ -34967,10 +34988,11 @@ function getGeneSelectionWithSelectionShader(featureIndices, featureColors, stat
|
|
|
34967
34988
|
}
|
|
34968
34989
|
}
|
|
34969
34990
|
setColor(color);
|
|
34991
|
+
${borderWidthGlsl(borderWidth)}
|
|
34970
34992
|
}
|
|
34971
34993
|
`;
|
|
34972
34994
|
}
|
|
34973
|
-
function getGeneSelectionFilteredShader(featureIndices, featureColors, staticColor, opacity, featureIndexProp) {
|
|
34995
|
+
function getGeneSelectionFilteredShader(featureIndices, featureColors, staticColor, opacity, featureIndexProp, borderWidth = 0) {
|
|
34974
34996
|
const numFeatures = featureIndices.length;
|
|
34975
34997
|
const normColors = featureColors.map((c) => normalizeColor(c));
|
|
34976
34998
|
const normStatic = normalizeColor(staticColor);
|
|
@@ -34996,10 +35018,11 @@ function getGeneSelectionFilteredShader(featureIndices, featureColors, staticCol
|
|
|
34996
35018
|
discard;
|
|
34997
35019
|
}
|
|
34998
35020
|
setColor(vec4(matchedColor, ${opacity}));
|
|
35021
|
+
${borderWidthGlsl(borderWidth)}
|
|
34999
35022
|
}
|
|
35000
35023
|
`;
|
|
35001
35024
|
}
|
|
35002
|
-
function getRandomByFeatureShader(opacity, featureIndexProp) {
|
|
35025
|
+
function getRandomByFeatureShader(opacity, featureIndexProp, borderWidth = 0) {
|
|
35003
35026
|
const paletteSize = PALETTE.length;
|
|
35004
35027
|
const normPalette = PALETTE.map((c) => normalizeColor(c));
|
|
35005
35028
|
const paletteDecl = `vec3 palette[${paletteSize}] = vec3[${paletteSize}](${normPalette.map((c) => toVec3(c)).join(", ")});`;
|
|
@@ -35011,10 +35034,11 @@ function getRandomByFeatureShader(opacity, featureIndexProp) {
|
|
|
35011
35034
|
if (colorIdx < 0) { colorIdx = -colorIdx; }
|
|
35012
35035
|
vec3 color = palette[colorIdx];
|
|
35013
35036
|
setColor(vec4(color, ${opacity}));
|
|
35037
|
+
${borderWidthGlsl(borderWidth)}
|
|
35014
35038
|
}
|
|
35015
35039
|
`;
|
|
35016
35040
|
}
|
|
35017
|
-
function getRandomByFeatureWithSelectionShader(featureIndices, defaultColor, opacity, featureIndexProp) {
|
|
35041
|
+
function getRandomByFeatureWithSelectionShader(featureIndices, defaultColor, opacity, featureIndexProp, borderWidth = 0) {
|
|
35018
35042
|
const paletteSize = PALETTE.length;
|
|
35019
35043
|
const normPalette = PALETTE.map((c) => normalizeColor(c));
|
|
35020
35044
|
const normDefault = normalizeColor(defaultColor);
|
|
@@ -35036,13 +35060,15 @@ function getRandomByFeatureWithSelectionShader(featureIndices, defaultColor, opa
|
|
|
35036
35060
|
int colorIdx = geneIndex - (geneIndex / ${paletteSize}) * ${paletteSize};
|
|
35037
35061
|
if (colorIdx < 0) { colorIdx = -colorIdx; }
|
|
35038
35062
|
setColor(vec4(palette[colorIdx], ${opacity}));
|
|
35063
|
+
${borderWidthGlsl(borderWidth)}
|
|
35039
35064
|
} else {
|
|
35040
35065
|
setColor(${toVec4(normDefault, opacity)});
|
|
35066
|
+
${borderWidthGlsl(borderWidth)}
|
|
35041
35067
|
}
|
|
35042
35068
|
}
|
|
35043
35069
|
`;
|
|
35044
35070
|
}
|
|
35045
|
-
function getRandomByFeatureFilteredShader(featureIndices, opacity, featureIndexProp) {
|
|
35071
|
+
function getRandomByFeatureFilteredShader(featureIndices, opacity, featureIndexProp, borderWidth = 0) {
|
|
35046
35072
|
const paletteSize = PALETTE.length;
|
|
35047
35073
|
const normPalette = PALETTE.map((c) => normalizeColor(c));
|
|
35048
35074
|
const numFeatures = featureIndices.length;
|
|
@@ -35065,6 +35091,7 @@ function getRandomByFeatureFilteredShader(featureIndices, opacity, featureIndexP
|
|
|
35065
35091
|
int colorIdx = geneIndex - (geneIndex / ${paletteSize}) * ${paletteSize};
|
|
35066
35092
|
if (colorIdx < 0) { colorIdx = -colorIdx; }
|
|
35067
35093
|
setColor(vec4(palette[colorIdx], ${opacity}));
|
|
35094
|
+
${borderWidthGlsl(borderWidth)}
|
|
35068
35095
|
}
|
|
35069
35096
|
`;
|
|
35070
35097
|
}
|
|
@@ -35079,7 +35106,7 @@ function hashToFloatGlsl() {
|
|
|
35079
35106
|
}
|
|
35080
35107
|
`;
|
|
35081
35108
|
}
|
|
35082
|
-
function getRandomPerPointShader(opacity, featureIndexProp, pointIndexProp) {
|
|
35109
|
+
function getRandomPerPointShader(opacity, featureIndexProp, pointIndexProp, borderWidth = 0) {
|
|
35083
35110
|
return `
|
|
35084
35111
|
${hashToFloatGlsl()}
|
|
35085
35112
|
void main() {
|
|
@@ -35089,10 +35116,11 @@ function getRandomPerPointShader(opacity, featureIndexProp, pointIndexProp) {
|
|
|
35089
35116
|
float g = hashToFloat(pointIndex, 1);
|
|
35090
35117
|
float b = hashToFloat(pointIndex, 2);
|
|
35091
35118
|
setColor(vec4(r, g, b, ${opacity}));
|
|
35119
|
+
${borderWidthGlsl(borderWidth)}
|
|
35092
35120
|
}
|
|
35093
35121
|
`;
|
|
35094
35122
|
}
|
|
35095
|
-
function getRandomPerPointWithSelectionShader(featureIndices, defaultColor, opacity, featureIndexProp, pointIndexProp) {
|
|
35123
|
+
function getRandomPerPointWithSelectionShader(featureIndices, defaultColor, opacity, featureIndexProp, pointIndexProp, borderWidth = 0) {
|
|
35096
35124
|
const normDefault = normalizeColor(defaultColor);
|
|
35097
35125
|
const numFeatures = featureIndices.length;
|
|
35098
35126
|
const indicesDecl = `int selectedIndices[${numFeatures}] = int[${numFeatures}](${featureIndices.join(", ")});`;
|
|
@@ -35113,13 +35141,15 @@ function getRandomPerPointWithSelectionShader(featureIndices, defaultColor, opac
|
|
|
35113
35141
|
float g = hashToFloat(pointIndex, 1);
|
|
35114
35142
|
float b = hashToFloat(pointIndex, 2);
|
|
35115
35143
|
setColor(vec4(r, g, b, ${opacity}));
|
|
35144
|
+
${borderWidthGlsl(borderWidth)}
|
|
35116
35145
|
} else {
|
|
35117
35146
|
setColor(${toVec4(normDefault, opacity)});
|
|
35147
|
+
${borderWidthGlsl(borderWidth)}
|
|
35118
35148
|
}
|
|
35119
35149
|
}
|
|
35120
35150
|
`;
|
|
35121
35151
|
}
|
|
35122
|
-
function getRandomPerPointFilteredShader(featureIndices, opacity, featureIndexProp, pointIndexProp) {
|
|
35152
|
+
function getRandomPerPointFilteredShader(featureIndices, opacity, featureIndexProp, pointIndexProp, borderWidth = 0) {
|
|
35123
35153
|
const numFeatures = featureIndices.length;
|
|
35124
35154
|
const indicesDecl = `int selectedIndices[${numFeatures}] = int[${numFeatures}](${featureIndices.join(", ")});`;
|
|
35125
35155
|
return `
|
|
@@ -35141,6 +35171,7 @@ function getRandomPerPointFilteredShader(featureIndices, opacity, featureIndexPr
|
|
|
35141
35171
|
float g = hashToFloat(pointIndex, 1);
|
|
35142
35172
|
float b = hashToFloat(pointIndex, 2);
|
|
35143
35173
|
setColor(vec4(r, g, b, ${opacity}));
|
|
35174
|
+
${borderWidthGlsl(borderWidth)}
|
|
35144
35175
|
}
|
|
35145
35176
|
`;
|
|
35146
35177
|
}
|
|
@@ -35154,6 +35185,7 @@ function getPointsShader(layerCoordination) {
|
|
|
35154
35185
|
featureSelection,
|
|
35155
35186
|
featureFilterMode,
|
|
35156
35187
|
featureColor,
|
|
35188
|
+
pointMarkerBorderWidth = 0,
|
|
35157
35189
|
featureIndexProp,
|
|
35158
35190
|
pointIndexProp
|
|
35159
35191
|
} = layerCoordination;
|
|
@@ -35174,14 +35206,15 @@ function getPointsShader(layerCoordination) {
|
|
|
35174
35206
|
}) : [];
|
|
35175
35207
|
if (obsColorEncoding === "spatialLayerColor") {
|
|
35176
35208
|
if (!hasFeatureSelection || !hasResolvedIndices) {
|
|
35177
|
-
return getSpatialLayerColorShader(staticColor, opacity);
|
|
35209
|
+
return getSpatialLayerColorShader(staticColor, opacity, pointMarkerBorderWidth);
|
|
35178
35210
|
}
|
|
35179
35211
|
if (isFiltered) {
|
|
35180
35212
|
return getSpatialLayerColorFilteredShader(
|
|
35181
35213
|
staticColor,
|
|
35182
35214
|
opacity,
|
|
35183
35215
|
featureIndices,
|
|
35184
|
-
featureIndexProp
|
|
35216
|
+
featureIndexProp,
|
|
35217
|
+
pointMarkerBorderWidth
|
|
35185
35218
|
);
|
|
35186
35219
|
}
|
|
35187
35220
|
return getSpatialLayerColorWithSelectionShader(
|
|
@@ -35189,7 +35222,8 @@ function getPointsShader(layerCoordination) {
|
|
|
35189
35222
|
opacity,
|
|
35190
35223
|
featureIndices,
|
|
35191
35224
|
defaultColor,
|
|
35192
|
-
featureIndexProp
|
|
35225
|
+
featureIndexProp,
|
|
35226
|
+
pointMarkerBorderWidth
|
|
35193
35227
|
);
|
|
35194
35228
|
}
|
|
35195
35229
|
if (obsColorEncoding === "geneSelection") {
|
|
@@ -35197,7 +35231,7 @@ function getPointsShader(layerCoordination) {
|
|
|
35197
35231
|
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.");
|
|
35198
35232
|
}
|
|
35199
35233
|
if (!hasFeatureSelection || !hasResolvedIndices) {
|
|
35200
|
-
return getGeneSelectionNoSelectionShader(staticColor, opacity);
|
|
35234
|
+
return getGeneSelectionNoSelectionShader(staticColor, opacity, pointMarkerBorderWidth);
|
|
35201
35235
|
}
|
|
35202
35236
|
if (isFiltered) {
|
|
35203
35237
|
return getGeneSelectionFilteredShader(
|
|
@@ -35205,7 +35239,8 @@ function getPointsShader(layerCoordination) {
|
|
|
35205
35239
|
resolvedFeatureColors,
|
|
35206
35240
|
staticColor,
|
|
35207
35241
|
opacity,
|
|
35208
|
-
featureIndexProp
|
|
35242
|
+
featureIndexProp,
|
|
35243
|
+
pointMarkerBorderWidth
|
|
35209
35244
|
);
|
|
35210
35245
|
}
|
|
35211
35246
|
return getGeneSelectionWithSelectionShader(
|
|
@@ -35214,7 +35249,8 @@ function getPointsShader(layerCoordination) {
|
|
|
35214
35249
|
staticColor,
|
|
35215
35250
|
defaultColor,
|
|
35216
35251
|
opacity,
|
|
35217
|
-
featureIndexProp
|
|
35252
|
+
featureIndexProp,
|
|
35253
|
+
pointMarkerBorderWidth
|
|
35218
35254
|
);
|
|
35219
35255
|
}
|
|
35220
35256
|
if (obsColorEncoding === "randomByFeature") {
|
|
@@ -35222,20 +35258,22 @@ function getPointsShader(layerCoordination) {
|
|
|
35222
35258
|
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.");
|
|
35223
35259
|
}
|
|
35224
35260
|
if (!hasFeatureSelection || !hasResolvedIndices) {
|
|
35225
|
-
return getRandomByFeatureShader(opacity, featureIndexProp);
|
|
35261
|
+
return getRandomByFeatureShader(opacity, featureIndexProp, pointMarkerBorderWidth);
|
|
35226
35262
|
}
|
|
35227
35263
|
if (isFiltered) {
|
|
35228
35264
|
return getRandomByFeatureFilteredShader(
|
|
35229
35265
|
featureIndices,
|
|
35230
35266
|
opacity,
|
|
35231
|
-
featureIndexProp
|
|
35267
|
+
featureIndexProp,
|
|
35268
|
+
pointMarkerBorderWidth
|
|
35232
35269
|
);
|
|
35233
35270
|
}
|
|
35234
35271
|
return getRandomByFeatureWithSelectionShader(
|
|
35235
35272
|
featureIndices,
|
|
35236
35273
|
defaultColor,
|
|
35237
35274
|
opacity,
|
|
35238
|
-
featureIndexProp
|
|
35275
|
+
featureIndexProp,
|
|
35276
|
+
pointMarkerBorderWidth
|
|
35239
35277
|
);
|
|
35240
35278
|
}
|
|
35241
35279
|
if (obsColorEncoding === "random") {
|
|
@@ -35243,14 +35281,20 @@ function getPointsShader(layerCoordination) {
|
|
|
35243
35281
|
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.");
|
|
35244
35282
|
}
|
|
35245
35283
|
if (!hasFeatureSelection || !hasResolvedIndices) {
|
|
35246
|
-
return getRandomPerPointShader(
|
|
35284
|
+
return getRandomPerPointShader(
|
|
35285
|
+
opacity,
|
|
35286
|
+
featureIndexProp,
|
|
35287
|
+
pointIndexProp,
|
|
35288
|
+
pointMarkerBorderWidth
|
|
35289
|
+
);
|
|
35247
35290
|
}
|
|
35248
35291
|
if (isFiltered) {
|
|
35249
35292
|
return getRandomPerPointFilteredShader(
|
|
35250
35293
|
featureIndices,
|
|
35251
35294
|
opacity,
|
|
35252
35295
|
featureIndexProp,
|
|
35253
|
-
pointIndexProp
|
|
35296
|
+
pointIndexProp,
|
|
35297
|
+
pointMarkerBorderWidth
|
|
35254
35298
|
);
|
|
35255
35299
|
}
|
|
35256
35300
|
return getRandomPerPointWithSelectionShader(
|
|
@@ -35258,10 +35302,11 @@ function getPointsShader(layerCoordination) {
|
|
|
35258
35302
|
defaultColor,
|
|
35259
35303
|
opacity,
|
|
35260
35304
|
featureIndexProp,
|
|
35261
|
-
pointIndexProp
|
|
35305
|
+
pointIndexProp,
|
|
35306
|
+
pointMarkerBorderWidth
|
|
35262
35307
|
);
|
|
35263
35308
|
}
|
|
35264
|
-
return getSpatialLayerColorShader(staticColor, opacity);
|
|
35309
|
+
return getSpatialLayerColorShader(staticColor, opacity, pointMarkerBorderWidth);
|
|
35265
35310
|
}
|
|
35266
35311
|
const DEFAULT_NG_PROPS = {
|
|
35267
35312
|
layout: "3d",
|
|
@@ -35291,7 +35336,7 @@ function toNgLayerName(dataType, layerScope, channelScope = null) {
|
|
|
35291
35336
|
}
|
|
35292
35337
|
throw new Error(`Unsupported data type: ${dataType}`);
|
|
35293
35338
|
}
|
|
35294
|
-
function useNeuroglancerViewerState(theme, segmentationLayerScopes, segmentationChannelScopesByLayer, segmentationLayerCoordination, segmentationChannelCoordination, obsSegmentationsUrls, obsSegmentationsData, pointLayerScopes, pointLayerCoordination, obsPointsUrls, obsPointsData, pointMultiIndicesData) {
|
|
35339
|
+
function useNeuroglancerViewerState(theme, showAxisLines, segmentationLayerScopes, segmentationChannelScopesByLayer, segmentationLayerCoordination, segmentationChannelCoordination, obsSegmentationsUrls, obsSegmentationsData, pointLayerScopes, pointLayerCoordination, obsPointsUrls, obsPointsData, pointMultiIndicesData) {
|
|
35295
35340
|
const viewerState = useMemoCustomComparison(() => {
|
|
35296
35341
|
let result = cloneDeep(DEFAULT_NG_PROPS);
|
|
35297
35342
|
segmentationLayerScopes.forEach((layerScope) => {
|
|
@@ -35305,18 +35350,25 @@ function useNeuroglancerViewerState(theme, segmentationLayerScopes, segmentation
|
|
|
35305
35350
|
spatialLayerVisible
|
|
35306
35351
|
} = layerCoordination || {};
|
|
35307
35352
|
channelScopes.forEach((channelScope) => {
|
|
35308
|
-
var _a2, _b2;
|
|
35353
|
+
var _a2, _b2, _c, _d;
|
|
35309
35354
|
const channelCoordination = (_b2 = (_a2 = segmentationChannelCoordination[0]) == null ? void 0 : _a2[layerScope]) == null ? void 0 : _b2[channelScope];
|
|
35310
35355
|
const {
|
|
35311
35356
|
spatialChannelVisible
|
|
35312
35357
|
} = channelCoordination || {};
|
|
35358
|
+
const { source: ngSource, ...otherNgOptions } = layerData.neuroglancerOptions ?? {};
|
|
35359
|
+
const hasNgSourceOptions = ((_c = layerData.neuroglancerOptions) == null ? void 0 : _c.subsources) || ((_d = layerData.neuroglancerOptions) == null ? void 0 : _d.enableDefaultSubsources) !== void 0;
|
|
35360
|
+
const source = hasNgSourceOptions ? {
|
|
35361
|
+
url: toPrecomputedSource(layerUrl),
|
|
35362
|
+
subsources: layerData.neuroglancerOptions.subsources,
|
|
35363
|
+
enableDefaultSubsources: layerData.neuroglancerOptions.enableDefaultSubsources ?? false
|
|
35364
|
+
} : toPrecomputedSource(layerUrl);
|
|
35313
35365
|
result = {
|
|
35314
35366
|
...result,
|
|
35315
35367
|
layers: [
|
|
35316
35368
|
...result.layers,
|
|
35317
35369
|
{
|
|
35318
35370
|
type: "segmentation",
|
|
35319
|
-
source
|
|
35371
|
+
source,
|
|
35320
35372
|
segments: [],
|
|
35321
35373
|
name: toNgLayerName(DataType$1.OBS_SEGMENTATIONS, layerScope, channelScope),
|
|
35322
35374
|
visible: spatialLayerVisible && spatialChannelVisible,
|
|
@@ -35324,7 +35376,7 @@ function useNeuroglancerViewerState(theme, segmentationLayerScopes, segmentation
|
|
|
35324
35376
|
// visibility must be true for the layer to be visible.
|
|
35325
35377
|
// TODO: update this to extract specific properties from
|
|
35326
35378
|
// neuroglancerOptions as needed.
|
|
35327
|
-
...
|
|
35379
|
+
...otherNgOptions
|
|
35328
35380
|
}
|
|
35329
35381
|
]
|
|
35330
35382
|
};
|
|
@@ -35345,7 +35397,8 @@ function useNeuroglancerViewerState(theme, segmentationLayerScopes, segmentation
|
|
|
35345
35397
|
spatialLayerColor,
|
|
35346
35398
|
featureSelection,
|
|
35347
35399
|
featureFilterMode,
|
|
35348
|
-
featureColor
|
|
35400
|
+
featureColor,
|
|
35401
|
+
spatialPointStrokeWidth
|
|
35349
35402
|
} = layerCoordination || {};
|
|
35350
35403
|
const shader = getPointsShader({
|
|
35351
35404
|
theme,
|
|
@@ -35357,7 +35410,8 @@ function useNeuroglancerViewerState(theme, segmentationLayerScopes, segmentation
|
|
|
35357
35410
|
featureFilterMode,
|
|
35358
35411
|
featureColor,
|
|
35359
35412
|
featureIndexProp: (_d = layerData.neuroglancerOptions) == null ? void 0 : _d.featureIndexProp,
|
|
35360
|
-
pointIndexProp: (_e = layerData.neuroglancerOptions) == null ? void 0 : _e.pointIndexProp
|
|
35413
|
+
pointIndexProp: (_e = layerData.neuroglancerOptions) == null ? void 0 : _e.pointIndexProp,
|
|
35414
|
+
pointMarkerBorderWidth: spatialPointStrokeWidth ?? 0
|
|
35361
35415
|
});
|
|
35362
35416
|
result = {
|
|
35363
35417
|
...result,
|
|
@@ -35394,6 +35448,7 @@ function useNeuroglancerViewerState(theme, segmentationLayerScopes, segmentation
|
|
|
35394
35448
|
return result;
|
|
35395
35449
|
}, {
|
|
35396
35450
|
theme,
|
|
35451
|
+
showAxisLines,
|
|
35397
35452
|
segmentationLayerScopes,
|
|
35398
35453
|
segmentationChannelScopesByLayer,
|
|
35399
35454
|
segmentationLayerCoordination,
|
|
@@ -37281,6 +37336,7 @@ function NeuroglancerSubscriber(props) {
|
|
|
37281
37336
|
downloadButtonVisible,
|
|
37282
37337
|
removeGridComponent,
|
|
37283
37338
|
theme,
|
|
37339
|
+
showAxisLines = false,
|
|
37284
37340
|
title = "Spatial",
|
|
37285
37341
|
subtitle = "Powered by Neuroglancer",
|
|
37286
37342
|
helpText = ViewHelpMapping.NEUROGLANCER,
|
|
@@ -37395,7 +37451,8 @@ function NeuroglancerSubscriber(props) {
|
|
|
37395
37451
|
CoordinationType$1.OBS_HIGHLIGHT,
|
|
37396
37452
|
CoordinationType$1.TOOLTIPS_VISIBLE,
|
|
37397
37453
|
CoordinationType$1.TOOLTIP_CROSSHAIRS_VISIBLE,
|
|
37398
|
-
CoordinationType$1.LEGEND_VISIBLE
|
|
37454
|
+
CoordinationType$1.LEGEND_VISIBLE,
|
|
37455
|
+
CoordinationType$1.SPATIAL_POINT_STROKE_WIDTH
|
|
37399
37456
|
],
|
|
37400
37457
|
coordinationScopes,
|
|
37401
37458
|
coordinationScopesBy,
|
|
@@ -37480,7 +37537,8 @@ function NeuroglancerSubscriber(props) {
|
|
|
37480
37537
|
obsColorEncoding,
|
|
37481
37538
|
obsSetSelection,
|
|
37482
37539
|
additionalObsSets,
|
|
37483
|
-
spatialChannelColor
|
|
37540
|
+
spatialChannelColor,
|
|
37541
|
+
spatialChannelOpacity
|
|
37484
37542
|
} = segmentationChannelCoordination[0][layerScope][channelScope];
|
|
37485
37543
|
if (obsColorEncoding === "spatialChannelColor") {
|
|
37486
37544
|
if (layerIndex && spatialChannelColor) {
|
|
@@ -37502,6 +37560,7 @@ function NeuroglancerSubscriber(props) {
|
|
|
37502
37560
|
});
|
|
37503
37561
|
}
|
|
37504
37562
|
result[layerScope][channelScope] = ngCellColors;
|
|
37563
|
+
result[layerScope].opacity = spatialChannelOpacity ?? 1;
|
|
37505
37564
|
}
|
|
37506
37565
|
} else if (layerSets && layerIndex) {
|
|
37507
37566
|
const mergedCellSets = mergeObsSets(layerSets, additionalObsSets);
|
|
@@ -37517,6 +37576,7 @@ function NeuroglancerSubscriber(props) {
|
|
|
37517
37576
|
ngCellColors[i] = rgbToHex(color2);
|
|
37518
37577
|
});
|
|
37519
37578
|
result[layerScope][channelScope] = ngCellColors;
|
|
37579
|
+
result[layerScope].opacity = spatialChannelOpacity ?? 1;
|
|
37520
37580
|
}
|
|
37521
37581
|
});
|
|
37522
37582
|
});
|
|
@@ -37532,6 +37592,7 @@ function NeuroglancerSubscriber(props) {
|
|
|
37532
37592
|
}, customIsEqualForCellColors);
|
|
37533
37593
|
const initalViewerState = useNeuroglancerViewerState(
|
|
37534
37594
|
theme,
|
|
37595
|
+
showAxisLines,
|
|
37535
37596
|
segmentationLayerScopes,
|
|
37536
37597
|
segmentationChannelScopesByLayer,
|
|
37537
37598
|
segmentationLayerCoordination,
|
|
@@ -37577,6 +37638,7 @@ function NeuroglancerSubscriber(props) {
|
|
|
37577
37638
|
z: spatialRotationZ,
|
|
37578
37639
|
orbit: spatialRotationOrbit
|
|
37579
37640
|
});
|
|
37641
|
+
const [isLayersLoaded, setIsLayersLoaded] = useState(false);
|
|
37580
37642
|
const prevCoordsRef = useRef({
|
|
37581
37643
|
zoom: spatialZoom,
|
|
37582
37644
|
rx: spatialRotationX,
|
|
@@ -37690,9 +37752,12 @@ function NeuroglancerSubscriber(props) {
|
|
|
37690
37752
|
const cellColorMappingByLayer = useMemo(() => {
|
|
37691
37753
|
const result = {};
|
|
37692
37754
|
segmentationLayerScopes == null ? void 0 : segmentationLayerScopes.forEach((layerScope) => {
|
|
37693
|
-
var _a2, _b;
|
|
37755
|
+
var _a2, _b, _c;
|
|
37694
37756
|
const channelScope = (_a2 = segmentationChannelScopesByLayer == null ? void 0 : segmentationChannelScopesByLayer[layerScope]) == null ? void 0 : _a2[0];
|
|
37695
|
-
result[layerScope] =
|
|
37757
|
+
result[layerScope] = {
|
|
37758
|
+
colors: ((_b = segmentationColorMapping == null ? void 0 : segmentationColorMapping[layerScope]) == null ? void 0 : _b[channelScope]) ?? {},
|
|
37759
|
+
opacity: ((_c = segmentationColorMapping == null ? void 0 : segmentationColorMapping[layerScope]) == null ? void 0 : _c.opacity) ?? 1
|
|
37760
|
+
};
|
|
37696
37761
|
});
|
|
37697
37762
|
return result;
|
|
37698
37763
|
}, [segmentationColorMapping, segmentationLayerScopes, segmentationChannelScopesByLayer]);
|
|
@@ -37767,13 +37832,15 @@ function NeuroglancerSubscriber(props) {
|
|
|
37767
37832
|
lastInteractionSource.current = null;
|
|
37768
37833
|
}
|
|
37769
37834
|
const updatedLayers = ((_c = current == null ? void 0 : current.layers) == null ? void 0 : _c.map((layer, idx) => {
|
|
37835
|
+
var _a3, _b2;
|
|
37770
37836
|
const layerScope = segmentationLayerScopes == null ? void 0 : segmentationLayerScopes[idx];
|
|
37771
|
-
const layerColorMapping = (cellColorMappingByLayer == null ? void 0 : cellColorMappingByLayer[layerScope]) ?? {};
|
|
37837
|
+
const layerColorMapping = ((_a3 = cellColorMappingByLayer == null ? void 0 : cellColorMappingByLayer[layerScope]) == null ? void 0 : _a3.colors) ?? {};
|
|
37772
37838
|
const layerSegments = Object.keys(layerColorMapping);
|
|
37773
37839
|
return {
|
|
37774
37840
|
...layer,
|
|
37775
37841
|
segments: layerSegments,
|
|
37776
|
-
segmentColors: layerColorMapping
|
|
37842
|
+
segmentColors: layerColorMapping,
|
|
37843
|
+
objectAlpha: ((_b2 = cellColorMappingByLayer == null ? void 0 : cellColorMappingByLayer[layerScope]) == null ? void 0 : _b2.opacity) ?? 1
|
|
37777
37844
|
};
|
|
37778
37845
|
})) ?? [];
|
|
37779
37846
|
const updated = {
|
|
@@ -37808,6 +37875,9 @@ function NeuroglancerSubscriber(props) {
|
|
|
37808
37875
|
const onSegmentHighlight = useCallback((obsId) => {
|
|
37809
37876
|
setCellHighlight(String(obsId));
|
|
37810
37877
|
}, [setCellHighlight]);
|
|
37878
|
+
const handleLayerLoadingChange = useCallback((isLoaded) => {
|
|
37879
|
+
setIsLayersLoaded(isLoaded);
|
|
37880
|
+
}, []);
|
|
37811
37881
|
const hasLayers = ((_a = derivedViewerState == null ? void 0 : derivedViewerState.layers) == null ? void 0 : _a.length) > 0;
|
|
37812
37882
|
return /* @__PURE__ */ React__default.createElement(
|
|
37813
37883
|
TitleInfo,
|
|
@@ -37820,7 +37890,7 @@ function NeuroglancerSubscriber(props) {
|
|
|
37820
37890
|
closeButtonVisible,
|
|
37821
37891
|
downloadButtonVisible,
|
|
37822
37892
|
removeGridComponent,
|
|
37823
|
-
isReady,
|
|
37893
|
+
isReady: isReady && isLayersLoaded,
|
|
37824
37894
|
errors,
|
|
37825
37895
|
withPadding: false,
|
|
37826
37896
|
guideUrl: GUIDE_URL
|
|
@@ -37833,7 +37903,10 @@ function NeuroglancerSubscriber(props) {
|
|
|
37833
37903
|
segmentationLayerScopes,
|
|
37834
37904
|
segmentationLayerCoordination,
|
|
37835
37905
|
segmentationChannelScopesByLayer,
|
|
37836
|
-
segmentationChannelCoordination
|
|
37906
|
+
segmentationChannelCoordination,
|
|
37907
|
+
pointLayerScopes,
|
|
37908
|
+
pointLayerCoordination,
|
|
37909
|
+
pointMultiIndicesData
|
|
37837
37910
|
}
|
|
37838
37911
|
)), /* @__PURE__ */ React__default.createElement(
|
|
37839
37912
|
NeuroglancerComp,
|
|
@@ -37843,7 +37916,8 @@ function NeuroglancerSubscriber(props) {
|
|
|
37843
37916
|
onSelectHoveredCoords: onSegmentHighlight,
|
|
37844
37917
|
viewerState: derivedViewerState,
|
|
37845
37918
|
cellColorMapping: cellColorMappingByLayer,
|
|
37846
|
-
setViewerState: handleStateUpdate
|
|
37919
|
+
setViewerState: handleStateUpdate,
|
|
37920
|
+
onLayerLoadingChange: handleLayerLoadingChange
|
|
37847
37921
|
}
|
|
37848
37922
|
)) : null
|
|
37849
37923
|
);
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Neuroglancer.d.ts","sourceRoot":"","sources":["../src/Neuroglancer.js"],"names":[],"mappings":"AAYA;IACE,wBAYC;IAVC,gBAAgC;IAChC,sBAA8C;IAC9C,oCAAuC;IACvC,2BAAiC;IACjC,sCAA4B;IA8D9B,2CAGC;IAzDD,4BAoDC;IAxDC,0BAAgD;IAChD,iCAA8D;IA8DhE,yCAKC;IAED,
|
|
1
|
+
{"version":3,"file":"Neuroglancer.d.ts","sourceRoot":"","sources":["../src/Neuroglancer.js"],"names":[],"mappings":"AAYA;IACE,wBAYC;IAVC,gBAAgC;IAChC,sBAA8C;IAC9C,oCAAuC;IACvC,2BAAiC;IACjC,sCAA4B;IA8D9B,2CAGC;IAzDD,4BAoDC;IAxDC,0BAAgD;IAChD,iCAA8D;IA8DhE,yCAKC;IAED,sBAqBC;CACF"}
|
package/dist-tsc/Neuroglancer.js
CHANGED
|
@@ -82,7 +82,7 @@ export class NeuroglancerComp extends PureComponent {
|
|
|
82
82
|
}
|
|
83
83
|
}
|
|
84
84
|
render() {
|
|
85
|
-
const { classes, viewerState, cellColorMapping } = this.props;
|
|
86
|
-
return (_jsxs(_Fragment, { children: [_jsx(NeuroglancerGlobalStyles, { classes: classes }), _jsx("div", { className: classes.neuroglancerWrapper, children: _jsx(Suspense, { fallback: _jsx("div", { children: "Loading..." }), children: _jsx(LazyReactNeuroglancer, { brainMapsClientId: "NOT_A_VALID_ID", viewerState: viewerState, onViewerStateChanged: this.onViewerStateChanged, bundleRoot: this.bundleRoot, cellColorMapping: cellColorMapping, ref: this.onRef }) }) })] }));
|
|
85
|
+
const { classes, viewerState, cellColorMapping, onLayerLoadingChange } = this.props;
|
|
86
|
+
return (_jsxs(_Fragment, { children: [_jsx(NeuroglancerGlobalStyles, { classes: classes }), _jsx("div", { className: classes.neuroglancerWrapper, children: _jsx(Suspense, { fallback: _jsx("div", { children: "Loading..." }), children: _jsx(LazyReactNeuroglancer, { brainMapsClientId: "NOT_A_VALID_ID", viewerState: viewerState, onViewerStateChanged: this.onViewerStateChanged, onLayerLoadingChange: onLayerLoadingChange, bundleRoot: this.bundleRoot, cellColorMapping: cellColorMapping, ref: this.onRef }) }) })] }));
|
|
87
87
|
}
|
|
88
88
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NeuroglancerSubscriber.d.ts","sourceRoot":"","sources":["../src/NeuroglancerSubscriber.js"],"names":[],"mappings":"AAwEA,
|
|
1
|
+
{"version":3,"file":"NeuroglancerSubscriber.d.ts","sourceRoot":"","sources":["../src/NeuroglancerSubscriber.js"],"names":[],"mappings":"AAwEA,gEA0vBC"}
|