@aics/vole-app 3.3.1 → 3.4.0
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/es/aics-image-viewer/components/App/index.js +1 -0
- package/es/aics-image-viewer/components/BottomPanel/index.js +48 -19
- package/es/aics-image-viewer/components/BottomPanel/styles.css +16 -7
- package/es/aics-image-viewer/components/CellViewerCanvasWrapper/index.js +39 -19
- package/es/aics-image-viewer/components/ControlPanel/index.js +2 -0
- package/es/aics-image-viewer/components/dimension_sliders/AxisClipSliders.js +148 -0
- package/es/aics-image-viewer/components/dimension_sliders/RotationSliders.js +165 -0
- package/es/aics-image-viewer/components/dimension_sliders/SliderRows.js +167 -0
- package/es/aics-image-viewer/components/{AxisClipSliders → dimension_sliders}/styles.css +7 -1
- package/es/aics-image-viewer/components/shared/NumericInput/index.js +4 -2
- package/es/aics-image-viewer/components/shared/SliderRow/index.js +2 -0
- package/es/aics-image-viewer/components/shared/SliderRow/styles.css +2 -1
- package/es/aics-image-viewer/shared/constants.js +1 -1
- package/es/aics-image-viewer/shared/utils/camera.js +122 -0
- package/es/aics-image-viewer/shared/utils/test/camera.test.js +127 -0
- package/es/aics-image-viewer/shared/utils/test/urlParsing.test.js +23 -702
- package/es/aics-image-viewer/shared/utils/urlParsing.js +14 -828
- package/es/aics-image-viewer/state/deserialize.js +437 -0
- package/es/aics-image-viewer/state/serialize.js +145 -0
- package/es/aics-image-viewer/state/test/deserialize.test.js +432 -0
- package/es/aics-image-viewer/state/test/serialize.test.js +97 -0
- package/es/aics-image-viewer/state/test/test_data.js +168 -0
- package/es/aics-image-viewer/state/types.js +265 -1
- package/package.json +2 -1
- package/type-declarations/aics-image-viewer/components/App/types.d.ts +1 -1
- package/type-declarations/aics-image-viewer/components/BottomPanel/index.d.ts +6 -3
- package/type-declarations/aics-image-viewer/components/CellViewerCanvasWrapper/index.d.ts +1 -0
- package/type-declarations/aics-image-viewer/components/{AxisClipSliders/index.d.ts → dimension_sliders/AxisClipSliders.d.ts} +2 -3
- package/type-declarations/aics-image-viewer/components/dimension_sliders/RotationSliders.d.ts +6 -0
- package/type-declarations/aics-image-viewer/components/dimension_sliders/SliderRows.d.ts +31 -0
- package/type-declarations/aics-image-viewer/components/shared/NumericInput/index.d.ts +1 -0
- package/type-declarations/aics-image-viewer/components/shared/SliderRow/index.d.ts +3 -1
- package/type-declarations/aics-image-viewer/shared/utils/camera.d.ts +19 -0
- package/type-declarations/aics-image-viewer/shared/utils/urlParsing.d.ts +1 -307
- package/type-declarations/aics-image-viewer/state/deserialize.d.ts +70 -0
- package/type-declarations/aics-image-viewer/state/serialize.d.ts +20 -0
- package/type-declarations/aics-image-viewer/state/types.d.ts +216 -0
- package/es/aics-image-viewer/components/AxisClipSliders/index.js +0 -295
|
@@ -0,0 +1,168 @@
|
|
|
1
|
+
import { ImageType, RenderMode, ViewMode } from "../../shared/enums";
|
|
2
|
+
export var DEFAULT_TEST_VIEWER_STATE = {
|
|
3
|
+
viewMode: ViewMode.threeD,
|
|
4
|
+
// "XY", "XZ", "YZ"
|
|
5
|
+
renderMode: RenderMode.volumetric,
|
|
6
|
+
// "pathtrace", "maxproject"
|
|
7
|
+
imageType: ImageType.segmentedCell,
|
|
8
|
+
showAxes: false,
|
|
9
|
+
showBoundingBox: false,
|
|
10
|
+
backgroundColor: [0, 0, 0],
|
|
11
|
+
boundingBoxColor: [255, 255, 255],
|
|
12
|
+
autorotate: false,
|
|
13
|
+
maskAlpha: 0,
|
|
14
|
+
brightness: 70,
|
|
15
|
+
density: 50,
|
|
16
|
+
levels: [35, 140, 255],
|
|
17
|
+
interpolationEnabled: true,
|
|
18
|
+
region: {
|
|
19
|
+
x: [0, 1],
|
|
20
|
+
y: [0, 1],
|
|
21
|
+
z: [0, 1]
|
|
22
|
+
},
|
|
23
|
+
slice: {
|
|
24
|
+
x: 0.5,
|
|
25
|
+
y: 0.5,
|
|
26
|
+
z: 0.5
|
|
27
|
+
},
|
|
28
|
+
time: 0,
|
|
29
|
+
scene: 0,
|
|
30
|
+
cameraState: undefined,
|
|
31
|
+
singleChannelMode: false,
|
|
32
|
+
singleChannelIndex: 0,
|
|
33
|
+
useExactScaleLevel: false,
|
|
34
|
+
scaleLevelIndex: 0
|
|
35
|
+
};
|
|
36
|
+
export var SERIALIZED_DEFAULT_TEST_VIEWER_STATE = {
|
|
37
|
+
mode: "volumetric",
|
|
38
|
+
view: "3D",
|
|
39
|
+
image: "cell",
|
|
40
|
+
axes: "0",
|
|
41
|
+
bb: "0",
|
|
42
|
+
bgcol: "000000",
|
|
43
|
+
bbcol: "ffffff",
|
|
44
|
+
rot: "0",
|
|
45
|
+
mask: "0",
|
|
46
|
+
bright: "70",
|
|
47
|
+
dens: "50",
|
|
48
|
+
lvl: "35,140,255",
|
|
49
|
+
interp: "1",
|
|
50
|
+
reg: "0:1,0:1,0:1",
|
|
51
|
+
slice: "0.5,0.5,0.5",
|
|
52
|
+
t: "0",
|
|
53
|
+
scene: "0",
|
|
54
|
+
scm: "0",
|
|
55
|
+
sci: "0",
|
|
56
|
+
esl: "0",
|
|
57
|
+
scl: "0"
|
|
58
|
+
};
|
|
59
|
+
export var CUSTOM_TEST_VIEWER_STATE = {
|
|
60
|
+
renderMode: RenderMode.pathTrace,
|
|
61
|
+
viewMode: ViewMode.xy,
|
|
62
|
+
imageType: ImageType.fullField,
|
|
63
|
+
showAxes: true,
|
|
64
|
+
showBoundingBox: true,
|
|
65
|
+
backgroundColor: [255, 0, 0],
|
|
66
|
+
boundingBoxColor: [0, 255, 0],
|
|
67
|
+
autorotate: true,
|
|
68
|
+
maskAlpha: 55,
|
|
69
|
+
brightness: 100,
|
|
70
|
+
density: 75,
|
|
71
|
+
levels: [0, 250, 251],
|
|
72
|
+
interpolationEnabled: false,
|
|
73
|
+
region: {
|
|
74
|
+
x: [0, 0.5],
|
|
75
|
+
y: [0, 1],
|
|
76
|
+
z: [0, 1]
|
|
77
|
+
},
|
|
78
|
+
slice: {
|
|
79
|
+
x: 0.25,
|
|
80
|
+
y: 0.75,
|
|
81
|
+
z: 0.5
|
|
82
|
+
},
|
|
83
|
+
time: 100,
|
|
84
|
+
scene: 3,
|
|
85
|
+
singleChannelMode: true,
|
|
86
|
+
singleChannelIndex: 3,
|
|
87
|
+
useExactScaleLevel: true,
|
|
88
|
+
scaleLevelIndex: 3,
|
|
89
|
+
cameraState: {
|
|
90
|
+
position: [-1.05, -4, 45],
|
|
91
|
+
target: [0, 0, 0],
|
|
92
|
+
up: [0, 1, 0],
|
|
93
|
+
orthoScale: 3.534,
|
|
94
|
+
fov: 43.5
|
|
95
|
+
}
|
|
96
|
+
};
|
|
97
|
+
export var SERIALIZED_CUSTOM_TEST_VIEWER_STATE = {
|
|
98
|
+
mode: "pathtrace",
|
|
99
|
+
view: "Z",
|
|
100
|
+
image: "fov",
|
|
101
|
+
axes: "1",
|
|
102
|
+
bb: "1",
|
|
103
|
+
bgcol: "ff0000",
|
|
104
|
+
bbcol: "00ff00",
|
|
105
|
+
rot: "1",
|
|
106
|
+
mask: "55",
|
|
107
|
+
bright: "100",
|
|
108
|
+
dens: "75",
|
|
109
|
+
lvl: "0,250,251",
|
|
110
|
+
interp: "0",
|
|
111
|
+
reg: "0:0.5,0:1,0:1",
|
|
112
|
+
slice: "0.25,0.75,0.5",
|
|
113
|
+
t: "100",
|
|
114
|
+
scene: "3",
|
|
115
|
+
scm: "1",
|
|
116
|
+
sci: "3",
|
|
117
|
+
esl: "1",
|
|
118
|
+
scl: "3",
|
|
119
|
+
cam: "pos:-1.05:-4:45,tar:0:0:0,up:0:1:0,ort:3.534,fov:43.5"
|
|
120
|
+
};
|
|
121
|
+
export var DEFAULT_TEST_CHANNEL_STATE = {
|
|
122
|
+
name: "",
|
|
123
|
+
displayName: "",
|
|
124
|
+
color: [255, 0, 0],
|
|
125
|
+
volumeEnabled: true,
|
|
126
|
+
isosurfaceEnabled: true,
|
|
127
|
+
isovalue: 128,
|
|
128
|
+
opacity: 0.75,
|
|
129
|
+
colorizeEnabled: true,
|
|
130
|
+
colorizeAlpha: 0.5,
|
|
131
|
+
useControlPoints: false,
|
|
132
|
+
controlPoints: [{
|
|
133
|
+
x: 0,
|
|
134
|
+
opacity: 0.5,
|
|
135
|
+
color: [255, 255, 255]
|
|
136
|
+
}, {
|
|
137
|
+
x: 255,
|
|
138
|
+
opacity: 1.0,
|
|
139
|
+
color: [50, 100, 150]
|
|
140
|
+
}],
|
|
141
|
+
ramp: [0, 255],
|
|
142
|
+
plotMin: 0,
|
|
143
|
+
plotMax: 255,
|
|
144
|
+
keepIntensityRange: false
|
|
145
|
+
};
|
|
146
|
+
export var SERIALIZED_DEFAULT_TEST_CHANNEL_STATE = {
|
|
147
|
+
col: "ff0000",
|
|
148
|
+
ven: "1",
|
|
149
|
+
sen: "1",
|
|
150
|
+
isv: "128",
|
|
151
|
+
isa: "0.75",
|
|
152
|
+
clz: "1",
|
|
153
|
+
cza: "0.5",
|
|
154
|
+
cpe: "0",
|
|
155
|
+
cpt: "0:0.5:1:255:1:326496",
|
|
156
|
+
ram: "0:255",
|
|
157
|
+
pin: "0"
|
|
158
|
+
};
|
|
159
|
+
export var DEFAULT_TEST_VIEWER_CHANNEL_SETTING = {
|
|
160
|
+
match: 0,
|
|
161
|
+
color: undefined,
|
|
162
|
+
enabled: undefined,
|
|
163
|
+
surfaceEnabled: undefined,
|
|
164
|
+
isovalue: undefined,
|
|
165
|
+
surfaceOpacity: undefined,
|
|
166
|
+
colorizeEnabled: undefined,
|
|
167
|
+
colorizeAlpha: undefined
|
|
168
|
+
};
|
|
@@ -1 +1,265 @@
|
|
|
1
|
-
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
+
var _ViewerStateKeys$View, _ViewerStateKeys$Mode, _ViewerStateKeys$Mask, _ViewerStateKeys$Imag, _ViewerStateKeys$Axes, _ViewerStateKeys$Boun, _ViewerStateKeys$Sing, _ViewerStateKeys$Sing2, _ViewerStateKeys$Boun2, _ViewerStateKeys$Back, _ViewerStateKeys$Auto, _ViewerStateKeys$Brig, _ViewerStateKeys$Dens, _ViewerStateKeys$Leve, _ViewerStateKeys$Inte, _ViewerStateKeys$Regi, _ViewerStateKeys$Slic, _ViewerStateKeys$Time, _ViewerStateKeys$Scen, _ViewerStateKeys$UseE, _ViewerStateKeys$Scal, _ViewerStateKeys$Came, _ViewerChannelSetting, _ViewerChannelSetting2, _ViewerChannelSetting3, _ViewerChannelSetting4, _ViewerChannelSetting5, _ViewerChannelSetting6, _ViewerChannelSetting7, _ViewerChannelSetting8, _ViewerChannelSetting9, _ViewerChannelSetting10, _ViewerChannelSetting11, _ViewerChannelSetting12, _ViewerChannelSetting13, _ViewerChannelSetting14;
|
|
3
|
+
function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
|
|
4
|
+
function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
|
|
5
|
+
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
|
|
6
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
7
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
8
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
9
|
+
/** Global (not per-channel) viewer state which may be changed in the UI */
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* Enum keys for serialized viewer settings. These are stored as enums for
|
|
13
|
+
* better readability, and are mapped to types in `ViewerStateParams`.
|
|
14
|
+
*/
|
|
15
|
+
export var ViewerStateKeys = /*#__PURE__*/function (ViewerStateKeys) {
|
|
16
|
+
ViewerStateKeys["View"] = "view";
|
|
17
|
+
ViewerStateKeys["Mode"] = "mode";
|
|
18
|
+
ViewerStateKeys["Mask"] = "mask";
|
|
19
|
+
ViewerStateKeys["Image"] = "image";
|
|
20
|
+
ViewerStateKeys["Axes"] = "axes";
|
|
21
|
+
ViewerStateKeys["BoundingBox"] = "bb";
|
|
22
|
+
ViewerStateKeys["BoundingBoxColor"] = "bbcol";
|
|
23
|
+
ViewerStateKeys["BackgroundColor"] = "bgcol";
|
|
24
|
+
ViewerStateKeys["Autorotate"] = "rot";
|
|
25
|
+
ViewerStateKeys["Brightness"] = "bright";
|
|
26
|
+
ViewerStateKeys["Density"] = "dens";
|
|
27
|
+
ViewerStateKeys["Levels"] = "lvl";
|
|
28
|
+
ViewerStateKeys["Interpolation"] = "interp";
|
|
29
|
+
ViewerStateKeys["Region"] = "reg";
|
|
30
|
+
ViewerStateKeys["Slice"] = "slice";
|
|
31
|
+
ViewerStateKeys["Time"] = "t";
|
|
32
|
+
ViewerStateKeys["Scene"] = "scene";
|
|
33
|
+
ViewerStateKeys["CameraState"] = "cam";
|
|
34
|
+
ViewerStateKeys["SingleChannelMode"] = "scm";
|
|
35
|
+
ViewerStateKeys["SingleChannelIndex"] = "sci";
|
|
36
|
+
ViewerStateKeys["UseExactScaleLevel"] = "esl";
|
|
37
|
+
ViewerStateKeys["ScaleLevelIndex"] = "scl";
|
|
38
|
+
return ViewerStateKeys;
|
|
39
|
+
}({});
|
|
40
|
+
export var CameraTransformKeys = /*#__PURE__*/function (CameraTransformKeys) {
|
|
41
|
+
CameraTransformKeys["Position"] = "pos";
|
|
42
|
+
CameraTransformKeys["Target"] = "tar";
|
|
43
|
+
CameraTransformKeys["Up"] = "up";
|
|
44
|
+
CameraTransformKeys["OrthoScale"] = "ort";
|
|
45
|
+
CameraTransformKeys["Fov"] = "fov";
|
|
46
|
+
return CameraTransformKeys;
|
|
47
|
+
}({});
|
|
48
|
+
|
|
49
|
+
/** Serialized version of `ViewerState`. */
|
|
50
|
+
_ViewerStateKeys$View = ViewerStateKeys.View;
|
|
51
|
+
_ViewerStateKeys$Mode = ViewerStateKeys.Mode;
|
|
52
|
+
_ViewerStateKeys$Mask = ViewerStateKeys.Mask;
|
|
53
|
+
_ViewerStateKeys$Imag = ViewerStateKeys.Image;
|
|
54
|
+
_ViewerStateKeys$Axes = ViewerStateKeys.Axes;
|
|
55
|
+
_ViewerStateKeys$Boun = ViewerStateKeys.BoundingBox;
|
|
56
|
+
_ViewerStateKeys$Sing = ViewerStateKeys.SingleChannelMode;
|
|
57
|
+
_ViewerStateKeys$Sing2 = ViewerStateKeys.SingleChannelIndex;
|
|
58
|
+
_ViewerStateKeys$Boun2 = ViewerStateKeys.BoundingBoxColor;
|
|
59
|
+
_ViewerStateKeys$Back = ViewerStateKeys.BackgroundColor;
|
|
60
|
+
_ViewerStateKeys$Auto = ViewerStateKeys.Autorotate;
|
|
61
|
+
_ViewerStateKeys$Brig = ViewerStateKeys.Brightness;
|
|
62
|
+
_ViewerStateKeys$Dens = ViewerStateKeys.Density;
|
|
63
|
+
_ViewerStateKeys$Leve = ViewerStateKeys.Levels;
|
|
64
|
+
_ViewerStateKeys$Inte = ViewerStateKeys.Interpolation;
|
|
65
|
+
_ViewerStateKeys$Regi = ViewerStateKeys.Region;
|
|
66
|
+
_ViewerStateKeys$Slic = ViewerStateKeys.Slice;
|
|
67
|
+
_ViewerStateKeys$Time = ViewerStateKeys.Time;
|
|
68
|
+
_ViewerStateKeys$Scen = ViewerStateKeys.Scene;
|
|
69
|
+
_ViewerStateKeys$UseE = ViewerStateKeys.UseExactScaleLevel;
|
|
70
|
+
_ViewerStateKeys$Scal = ViewerStateKeys.ScaleLevelIndex;
|
|
71
|
+
_ViewerStateKeys$Came = ViewerStateKeys.CameraState;
|
|
72
|
+
export var ViewerStateParams = /*#__PURE__*/_createClass(function ViewerStateParams() {
|
|
73
|
+
_classCallCheck(this, ViewerStateParams);
|
|
74
|
+
/** Axis to view. Valid values are "3D", "X", "Y", and "Z". Defaults to "3D". */
|
|
75
|
+
_defineProperty(this, _ViewerStateKeys$View, undefined);
|
|
76
|
+
/**
|
|
77
|
+
* Render mode. Valid values are "volumetric", "maxproject", and "pathtrace".
|
|
78
|
+
* Defaults to "volumetric".
|
|
79
|
+
*/
|
|
80
|
+
_defineProperty(this, _ViewerStateKeys$Mode, undefined);
|
|
81
|
+
/** The opacity of the mask channel, an integer in the range [0, 100]. Defaults to 50. */
|
|
82
|
+
_defineProperty(this, _ViewerStateKeys$Mask, undefined);
|
|
83
|
+
/** The type of image to display. Valid values are "cell" and "fov". Defaults to "cell". */
|
|
84
|
+
_defineProperty(this, _ViewerStateKeys$Imag, undefined);
|
|
85
|
+
/** Whether to show the axes helper. "1" is enabled. Disabled by default. */
|
|
86
|
+
_defineProperty(this, _ViewerStateKeys$Axes, undefined);
|
|
87
|
+
/** Whether to show the bounding box. "1" is enabled. Disabled by default. */
|
|
88
|
+
_defineProperty(this, _ViewerStateKeys$Boun, undefined);
|
|
89
|
+
/** Whether single-channel mode is active. "1" is active. Inactive by default. */
|
|
90
|
+
_defineProperty(this, _ViewerStateKeys$Sing, undefined);
|
|
91
|
+
/** If single-channel mode is active, which channel index is shown. Defaults to 0. */
|
|
92
|
+
_defineProperty(this, _ViewerStateKeys$Sing2, undefined);
|
|
93
|
+
/** The color of the bounding box, as a 6-digit hex color. */
|
|
94
|
+
_defineProperty(this, _ViewerStateKeys$Boun2, undefined);
|
|
95
|
+
/** The background color, as a 6-digit hex color. */
|
|
96
|
+
_defineProperty(this, _ViewerStateKeys$Back, undefined);
|
|
97
|
+
/** Whether to autorotate the view. "1" is enabled. Disabled by default. */
|
|
98
|
+
_defineProperty(this, _ViewerStateKeys$Auto, undefined);
|
|
99
|
+
/** The brightness of the image, an float in the range [0, 100]. Defaults to 70. */
|
|
100
|
+
_defineProperty(this, _ViewerStateKeys$Brig, undefined);
|
|
101
|
+
/** Density, a float in the range [0, 100]. Defaults to 50. */
|
|
102
|
+
_defineProperty(this, _ViewerStateKeys$Dens, undefined);
|
|
103
|
+
/**
|
|
104
|
+
* Levels for image intensity adjustment. Should be three numeric values separated
|
|
105
|
+
* by commas, representing the low, middle, and high values in a [0, 255] range.
|
|
106
|
+
* Values will be sorted in ascending order; empty values will be parsed as 0.
|
|
107
|
+
*/
|
|
108
|
+
_defineProperty(this, _ViewerStateKeys$Leve, undefined);
|
|
109
|
+
/** Whether to enable interpolation. "1" is enabled. Enabled by default. */
|
|
110
|
+
_defineProperty(this, _ViewerStateKeys$Inte, undefined);
|
|
111
|
+
/** Subregions per axis, as min:max pairs separated by commas.
|
|
112
|
+
* Defaults to full range (`0:1`) for each axis.
|
|
113
|
+
*/
|
|
114
|
+
_defineProperty(this, _ViewerStateKeys$Regi, undefined);
|
|
115
|
+
/** Slice position per X, Y, and Z axes, as a list of comma-separated floats.
|
|
116
|
+
* 0.5 for all axes by default (e.g. `0.5,0.5,0.5`)
|
|
117
|
+
*/
|
|
118
|
+
_defineProperty(this, _ViewerStateKeys$Slic, undefined);
|
|
119
|
+
/** Frame number, for time-series volumes. 0 by default. */
|
|
120
|
+
_defineProperty(this, _ViewerStateKeys$Time, undefined);
|
|
121
|
+
/** Scene number, for multiscene images. 0 by default. */
|
|
122
|
+
_defineProperty(this, _ViewerStateKeys$Scen, undefined);
|
|
123
|
+
/** Whether to use an exact scale level index. 0 by default. */
|
|
124
|
+
_defineProperty(this, _ViewerStateKeys$UseE, undefined);
|
|
125
|
+
/** The exact scale level index to use, if `UseExactScaleLevel` is 1. 0 by default. */
|
|
126
|
+
_defineProperty(this, _ViewerStateKeys$Scal, undefined);
|
|
127
|
+
/**
|
|
128
|
+
* Camera transform settings, as a list of `key:value` pairs separated by commas.
|
|
129
|
+
* Valid keys are defined in `CameraTransformKeys`:
|
|
130
|
+
* - `pos`: position
|
|
131
|
+
* - `tar`: target
|
|
132
|
+
* - `up`: up
|
|
133
|
+
* - `ort`: orthographic scale
|
|
134
|
+
* - `fov`: field of view
|
|
135
|
+
*
|
|
136
|
+
* Vector values are encoded as three floats separated by colons (e.g. `1:2:3`) and
|
|
137
|
+
* encoded using `encodeURIComponent`.
|
|
138
|
+
*/
|
|
139
|
+
_defineProperty(this, _ViewerStateKeys$Came, undefined);
|
|
140
|
+
});
|
|
141
|
+
|
|
142
|
+
/**
|
|
143
|
+
* Mapped to types in `ViewerChannelStateParams`.
|
|
144
|
+
*/
|
|
145
|
+
export var ViewerChannelSettingKeys = /*#__PURE__*/function (ViewerChannelSettingKeys) {
|
|
146
|
+
ViewerChannelSettingKeys["Color"] = "col";
|
|
147
|
+
ViewerChannelSettingKeys["Colorize"] = "clz";
|
|
148
|
+
ViewerChannelSettingKeys["ColorizeAlpha"] = "cza";
|
|
149
|
+
ViewerChannelSettingKeys["IsosurfaceAlpha"] = "isa";
|
|
150
|
+
ViewerChannelSettingKeys["Lut"] = "lut";
|
|
151
|
+
ViewerChannelSettingKeys["ControlPoints"] = "cpt";
|
|
152
|
+
ViewerChannelSettingKeys["ControlPointsLegacy"] = "cps";
|
|
153
|
+
ViewerChannelSettingKeys["Ramp"] = "ram";
|
|
154
|
+
ViewerChannelSettingKeys["RampLegacy"] = "rmp";
|
|
155
|
+
ViewerChannelSettingKeys["ControlPointsEnabled"] = "cpe";
|
|
156
|
+
ViewerChannelSettingKeys["VolumeEnabled"] = "ven";
|
|
157
|
+
ViewerChannelSettingKeys["SurfaceEnabled"] = "sen";
|
|
158
|
+
ViewerChannelSettingKeys["IsosurfaceValue"] = "isv";
|
|
159
|
+
ViewerChannelSettingKeys["KeepRange"] = "pin";
|
|
160
|
+
return ViewerChannelSettingKeys;
|
|
161
|
+
}({});
|
|
162
|
+
|
|
163
|
+
/**
|
|
164
|
+
* The serialized form of a ViewerChannelSetting, as a dictionary object.
|
|
165
|
+
*/
|
|
166
|
+
_ViewerChannelSetting = ViewerChannelSettingKeys.Color;
|
|
167
|
+
_ViewerChannelSetting2 = ViewerChannelSettingKeys.Colorize;
|
|
168
|
+
_ViewerChannelSetting3 = ViewerChannelSettingKeys.ColorizeAlpha;
|
|
169
|
+
_ViewerChannelSetting4 = ViewerChannelSettingKeys.IsosurfaceAlpha;
|
|
170
|
+
_ViewerChannelSetting5 = ViewerChannelSettingKeys.Lut;
|
|
171
|
+
_ViewerChannelSetting6 = ViewerChannelSettingKeys.ControlPointsLegacy;
|
|
172
|
+
_ViewerChannelSetting7 = ViewerChannelSettingKeys.ControlPoints;
|
|
173
|
+
_ViewerChannelSetting8 = ViewerChannelSettingKeys.ControlPointsEnabled;
|
|
174
|
+
_ViewerChannelSetting9 = ViewerChannelSettingKeys.RampLegacy;
|
|
175
|
+
_ViewerChannelSetting10 = ViewerChannelSettingKeys.Ramp;
|
|
176
|
+
_ViewerChannelSetting11 = ViewerChannelSettingKeys.VolumeEnabled;
|
|
177
|
+
_ViewerChannelSetting12 = ViewerChannelSettingKeys.SurfaceEnabled;
|
|
178
|
+
_ViewerChannelSetting13 = ViewerChannelSettingKeys.IsosurfaceValue;
|
|
179
|
+
_ViewerChannelSetting14 = ViewerChannelSettingKeys.KeepRange;
|
|
180
|
+
export var ViewerChannelStateParams = /*#__PURE__*/_createClass(function ViewerChannelStateParams() {
|
|
181
|
+
_classCallCheck(this, ViewerChannelStateParams);
|
|
182
|
+
/** Color, as a 6-digit hex color. */
|
|
183
|
+
_defineProperty(this, _ViewerChannelSetting, undefined);
|
|
184
|
+
/** Colorize. "1" is enabled. Disabled by default. */
|
|
185
|
+
_defineProperty(this, _ViewerChannelSetting2, undefined);
|
|
186
|
+
/** Colorize alpha, in the [0, 1] range. Set to `1.0` by default. */
|
|
187
|
+
_defineProperty(this, _ViewerChannelSetting3, undefined);
|
|
188
|
+
/** Isosurface alpha, in the [0, 1 range]. Set to `1.0` by default.*/
|
|
189
|
+
_defineProperty(this, _ViewerChannelSetting4, undefined);
|
|
190
|
+
/**
|
|
191
|
+
* Lookup table (LUT) to map from volume intensity to opacity. Should be two
|
|
192
|
+
* alphanumeric values separated by a colon, where the first value is the
|
|
193
|
+
* minimum and the second is the maximum. Defaults to [0, 255].
|
|
194
|
+
*
|
|
195
|
+
* Min and max values are determined as following:
|
|
196
|
+
* - Plain numbers are indices of histogram bins, typically in the range [0,
|
|
197
|
+
* 255].
|
|
198
|
+
* - `v{n}` represents a raw intensity value, where `n` is a number.
|
|
199
|
+
* - `p{n}` represents a percentile, where `n` is a percentile in the [0, 100]
|
|
200
|
+
* range.
|
|
201
|
+
* - `m{n}` represents the median multiplied by `n / 100`.
|
|
202
|
+
* - `autoij` in either the min or max fields will use the "auto" algorithm
|
|
203
|
+
* from ImageJ to select the min AND max.
|
|
204
|
+
*
|
|
205
|
+
* Values will be used to determine the initial control points and ramp if
|
|
206
|
+
* those fields are not provided.
|
|
207
|
+
*
|
|
208
|
+
* @example
|
|
209
|
+
* ```
|
|
210
|
+
* "0:255" // min: intensity 0, max: intensity 255.
|
|
211
|
+
* "p50:p90" // min: 50th percentile, max: 90th percentile.
|
|
212
|
+
* "m1:p75" // min: median, max: 75th percentile.
|
|
213
|
+
* "autoij:0" // use Auto-IJ to calculate min and max.
|
|
214
|
+
* ```
|
|
215
|
+
*/
|
|
216
|
+
_defineProperty(this, _ViewerChannelSetting5, undefined);
|
|
217
|
+
/**
|
|
218
|
+
* Legacy specifier for control points for the transfer function as a list of
|
|
219
|
+
* `x:opacity:color` triplets, separated by colon. Uses histogram bin indices
|
|
220
|
+
* instead of intensity values.
|
|
221
|
+
* - `x` is a histogram bin index in the [0, 255] range.
|
|
222
|
+
* - `opacity` is a float in the [0, 1] range.
|
|
223
|
+
* - `color` is a 6-digit hex color, e.g. `ff0000`.
|
|
224
|
+
*
|
|
225
|
+
* Will be overridden by the ControlPoints field (`cpt`) if provided.
|
|
226
|
+
*/
|
|
227
|
+
_defineProperty(this, _ViewerChannelSetting6, undefined);
|
|
228
|
+
/**
|
|
229
|
+
* Control points for the transfer function, formatted as a list of
|
|
230
|
+
* `x:opacity:color` triplets, separated by colons.
|
|
231
|
+
* - `x` is a numeric intensity value.
|
|
232
|
+
* - `opacity` is a float in the [0, 1] range.
|
|
233
|
+
* - `color` is a 6-digit hex color, e.g. `ff0000`.
|
|
234
|
+
*
|
|
235
|
+
* If provided, overrides the `lut` field when calculating the control points.
|
|
236
|
+
*/
|
|
237
|
+
_defineProperty(this, _ViewerChannelSetting7, undefined);
|
|
238
|
+
/**
|
|
239
|
+
* Whether to show advanced mode, which will show control points instead of
|
|
240
|
+
* ramp values defined by the LUT. "1" is enabled, disabled by default.
|
|
241
|
+
*/
|
|
242
|
+
_defineProperty(this, _ViewerChannelSetting8, undefined);
|
|
243
|
+
/**
|
|
244
|
+
* Legacy specifier for the transfer function ramp which uses histogram bin
|
|
245
|
+
* indices instead of intensity values, formatted as `min:max`. Will be
|
|
246
|
+
* overridden by the Ramp field (`ram`) if provided.
|
|
247
|
+
*/
|
|
248
|
+
_defineProperty(this, _ViewerChannelSetting9, undefined);
|
|
249
|
+
/**
|
|
250
|
+
* Ramp min and max intensity values (`min:max`). If provided, overrides the
|
|
251
|
+
* `lut` field when calculating the ramp.
|
|
252
|
+
*/
|
|
253
|
+
_defineProperty(this, _ViewerChannelSetting10, undefined);
|
|
254
|
+
/** Volume enabled. "1" is enabled. Disabled by default. */
|
|
255
|
+
_defineProperty(this, _ViewerChannelSetting11, undefined);
|
|
256
|
+
/** Isosurface enabled. "1" is enabled. Disabled by default. */
|
|
257
|
+
_defineProperty(this, _ViewerChannelSetting12, undefined);
|
|
258
|
+
/** Isosurface value, in the [0, 255] range. Set to `128` by default. */
|
|
259
|
+
_defineProperty(this, _ViewerChannelSetting13, undefined);
|
|
260
|
+
/**
|
|
261
|
+
* Whether to keep the current contrast settings when loading a new volume.
|
|
262
|
+
* "1" is enabled. Disabled by default.
|
|
263
|
+
*/
|
|
264
|
+
_defineProperty(this, _ViewerChannelSetting14, undefined);
|
|
265
|
+
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aics/vole-app",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.4.0",
|
|
4
4
|
"description": "web view of cell volume images",
|
|
5
5
|
"main": "es/index.js",
|
|
6
6
|
"module": "es/index.js",
|
|
@@ -54,6 +54,7 @@
|
|
|
54
54
|
"color-string": "^1.5.3",
|
|
55
55
|
"d3": "^7.9.0",
|
|
56
56
|
"fuse.js": "^7.0.0",
|
|
57
|
+
"gl-matrix": "^3.4.4",
|
|
57
58
|
"lodash": "^4.17.20",
|
|
58
59
|
"nouislider-react": "^3.4.2",
|
|
59
60
|
"react-color": "^2.19.3",
|
|
@@ -5,7 +5,7 @@ import type { ViewerChannelSettings } from "../../shared/utils/viewerChannelSett
|
|
|
5
5
|
import type { ViewerState } from "../../state/types";
|
|
6
6
|
/** `typeof useEffect`, but the effect handler takes a `Volume` as an argument */
|
|
7
7
|
export type UseImageEffectType = (effect: (image: Volume) => void | (() => void), deps: React.DependencyList) => void;
|
|
8
|
-
type ControlNames = "alphaMaskSlider" | "autoRotateButton" | "axisClipSliders" | "brightnessSlider" | "backgroundColorPicker" | "boundingBoxColorPicker" | "colorPresetsDropdown" | "densitySlider" | "levelsSliders" | "interpolationControl" | "saveSurfaceButtons" | "fovCellSwitchControls" | "viewModeRadioButtons" | "resetCameraButton" | "showAxesButton" | "showBoundingBoxButton" | "metadataViewer" | "scaleLevelControls";
|
|
8
|
+
type ControlNames = "alphaMaskSlider" | "autoRotateButton" | "axisClipSliders" | "rotationSliders" | "brightnessSlider" | "backgroundColorPicker" | "boundingBoxColorPicker" | "colorPresetsDropdown" | "densitySlider" | "levelsSliders" | "interpolationControl" | "saveSurfaceButtons" | "fovCellSwitchControls" | "viewModeRadioButtons" | "resetCameraButton" | "showAxesButton" | "showBoundingBoxButton" | "metadataViewer" | "scaleLevelControls";
|
|
9
9
|
/** Show/hide different elements of the UI */
|
|
10
10
|
export type ControlVisibilityFlags = {
|
|
11
11
|
[K in ControlNames]: boolean;
|
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import "./styles.css";
|
|
3
3
|
type BottomPanelProps = {
|
|
4
|
-
|
|
4
|
+
contents: {
|
|
5
|
+
title: string;
|
|
6
|
+
children: React.ReactNode;
|
|
7
|
+
}[];
|
|
5
8
|
open?: boolean;
|
|
6
|
-
|
|
7
|
-
|
|
9
|
+
pageIndex?: number;
|
|
10
|
+
onPageChange?: (page: number | null) => void;
|
|
8
11
|
height?: number;
|
|
9
12
|
};
|
|
10
13
|
declare const BottomPanel: React.FC<BottomPanelProps>;
|
|
@@ -4,7 +4,6 @@ import type { ViewMode } from "../../shared/enums";
|
|
|
4
4
|
import { type AxisName, type PerAxis } from "../../shared/types";
|
|
5
5
|
import type PlayControls from "../../shared/utils/playControls";
|
|
6
6
|
import type { ViewerStateActions } from "../../state/store";
|
|
7
|
-
import "./styles.css";
|
|
8
7
|
type AxisClipSlidersProps = {
|
|
9
8
|
mode: ViewMode;
|
|
10
9
|
image: Volume | null;
|
|
@@ -20,5 +19,5 @@ type AxisClipSlidersProps = {
|
|
|
20
19
|
playingAxis: AxisName | "t" | null;
|
|
21
20
|
playControls: PlayControls;
|
|
22
21
|
};
|
|
23
|
-
declare const AxisClipSliders: React.FC<AxisClipSlidersProps>;
|
|
24
|
-
export
|
|
22
|
+
export declare const AxisClipSliders: React.FC<AxisClipSlidersProps>;
|
|
23
|
+
export {};
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./styles.css";
|
|
3
|
+
type SharedSliderRowProps<Value = number> = {
|
|
4
|
+
label: string;
|
|
5
|
+
val: Value;
|
|
6
|
+
valReadout?: Value;
|
|
7
|
+
min: number;
|
|
8
|
+
max: number;
|
|
9
|
+
onSlide?: (value: Value) => void;
|
|
10
|
+
/** `onChange` is called on the corresponding noUiSlider event AND on interaction with a spinbox. */
|
|
11
|
+
onChange?: (value: Value) => void;
|
|
12
|
+
onStart?: () => void;
|
|
13
|
+
onEnd?: () => void;
|
|
14
|
+
};
|
|
15
|
+
type DimensionSliderRowProps = SharedSliderRowProps<number[]> & {
|
|
16
|
+
hideMax?: boolean;
|
|
17
|
+
unitSymbol?: string;
|
|
18
|
+
};
|
|
19
|
+
type IndexSliderRowProps = Omit<SharedSliderRowProps, "min">;
|
|
20
|
+
type PlaySliderRowProps = Omit<SharedSliderRowProps, "valReadout" | "min" | "onSlide"> & {
|
|
21
|
+
playing: boolean;
|
|
22
|
+
updateWhileSliding?: boolean;
|
|
23
|
+
onTogglePlayback: (play: boolean) => void;
|
|
24
|
+
};
|
|
25
|
+
/** A single slider row, with a slider, one or two spinbox inputs, and a max value. */
|
|
26
|
+
export declare const DimensionSliderRow: React.FC<DimensionSliderRowProps>;
|
|
27
|
+
/** Extremely thin wrapper around `SliderRow` for adjusting 0-indexed values that the user should see as 1-indexed. */
|
|
28
|
+
export declare const IndexSliderRow: React.FC<IndexSliderRowProps>;
|
|
29
|
+
/** Wrapper around `SliderRow` that adds a play button and accounts for the case where not all of an axis is loaded. */
|
|
30
|
+
export declare const PlaySliderRow: React.FC<PlaySliderRowProps>;
|
|
31
|
+
export {};
|
|
@@ -8,9 +8,11 @@ type SliderRowProps = {
|
|
|
8
8
|
formatInteger?: boolean;
|
|
9
9
|
min?: number;
|
|
10
10
|
max?: number;
|
|
11
|
+
hideSlider?: boolean;
|
|
12
|
+
disabled?: boolean;
|
|
13
|
+
onSlide?: NouisliderProps["onSlide"];
|
|
11
14
|
onUpdate?: NouisliderProps["onUpdate"];
|
|
12
15
|
onChange?: NouisliderProps["onChange"];
|
|
13
|
-
hideSlider?: boolean;
|
|
14
16
|
children?: React.ReactNode;
|
|
15
17
|
};
|
|
16
18
|
/** A component to ensure a single unified style across the many labeled slider rows in the control panel */
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import type { CameraState, View3d } from "@aics/vole-core";
|
|
2
|
+
import { mat3 } from "gl-matrix";
|
|
3
|
+
/** Multiply every vector in `state` by `matrix` */
|
|
4
|
+
export declare const applyMatrix: (state: CameraState, matrix: mat3) => CameraState;
|
|
5
|
+
/** Creates a XYZ rotation matrix with the given angles */
|
|
6
|
+
export declare const rotationMatrix: (x: number, y: number, z: number) => mat3;
|
|
7
|
+
/** Extract Tait-Bryan angles from a `CameraState` */
|
|
8
|
+
export declare const getRotationAngles: (state: CameraState) => {
|
|
9
|
+
x: number;
|
|
10
|
+
y: number;
|
|
11
|
+
z: number;
|
|
12
|
+
};
|
|
13
|
+
/**
|
|
14
|
+
* Constructs a new `CameraState` equivalent to rotating `state` about the origin such that the camera returns to its
|
|
15
|
+
* default *orientation* (looking towards -Z, +Y up), though not necessarily its default *position*.
|
|
16
|
+
*/
|
|
17
|
+
export declare const defaultOrientedCamera: (state: CameraState) => CameraState;
|
|
18
|
+
/** Creates a callback that performs some action on the camera, by applying `transform` to the current camera state. */
|
|
19
|
+
export declare const useCameraCallback: <T extends any[]>(transform: (state: CameraState, ...args: T) => Partial<CameraState>, view3d: View3d) => ((...args: T) => CameraState);
|