@haniffalab/cherita-react 1.2.0-dev.2025-05-21.e8f5ce54 → 1.2.0-dev.2025-05-21.6154c7e3
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/cjs/components/controls/Controls.js +60 -0
- package/dist/cjs/components/dotplot/Dotplot.js +29 -22
- package/dist/cjs/components/dotplot/DotplotControls.js +62 -99
- package/dist/cjs/components/full-page/FullPage.js +9 -7
- package/dist/cjs/components/full-page/FullPagePseudospatial.js +9 -7
- package/dist/cjs/components/heatmap/Heatmap.js +22 -13
- package/dist/cjs/components/heatmap/HeatmapControls.js +2 -19
- package/dist/cjs/components/matrixplot/Matrixplot.js +25 -16
- package/dist/cjs/components/matrixplot/MatrixplotControls.js +4 -34
- package/dist/cjs/components/obs-list/ObsItem.js +37 -29
- package/dist/cjs/components/obs-list/ObsList.js +47 -44
- package/dist/cjs/components/obsm-list/ObsmList.js +9 -6
- package/dist/cjs/components/offcanvas/index.js +13 -9
- package/dist/cjs/components/pseudospatial/Pseudospatial.js +61 -53
- package/dist/cjs/components/pseudospatial/PseudospatialToolbar.js +17 -11
- package/dist/cjs/components/scatterplot/Scatterplot.js +52 -52
- package/dist/cjs/components/scatterplot/ScatterplotControls.js +11 -24
- package/dist/cjs/components/scatterplot/SpatialControls.js +4 -4
- package/dist/cjs/components/search-bar/SearchBar.js +12 -10
- package/dist/cjs/components/search-bar/SearchInfo.js +14 -13
- package/dist/cjs/components/search-bar/SearchResults.js +16 -14
- package/dist/cjs/components/var-list/VarItem.js +10 -7
- package/dist/cjs/components/var-list/VarList.js +14 -9
- package/dist/cjs/components/var-list/VarListToolbar.js +1 -2
- package/dist/cjs/components/var-list/VarSet.js +1 -2
- package/dist/cjs/components/violin/Violin.js +48 -39
- package/dist/cjs/components/violin/ViolinControls.js +4 -20
- package/dist/cjs/context/DatasetContext.js +17 -11
- package/dist/cjs/context/FilterContext.js +9 -8
- package/dist/cjs/context/SettingsContext.js +172 -240
- package/dist/cjs/context/ZarrDataContext.js +1 -2
- package/dist/cjs/helpers/color-helper.js +3 -3
- package/dist/cjs/helpers/zarr-helper.js +15 -12
- package/dist/cjs/utils/Filter.js +13 -9
- package/dist/cjs/utils/Histogram.js +4 -3
- package/dist/cjs/utils/ImageViewer.js +1 -2
- package/dist/cjs/utils/Legend.js +3 -3
- package/dist/cjs/utils/LoadingIndicators.js +1 -1
- package/dist/cjs/utils/VirtualizedList.js +16 -13
- package/dist/cjs/utils/errors.js +20 -22
- package/dist/cjs/utils/requests.js +13 -10
- package/dist/cjs/utils/zarrData.js +12 -8
- package/dist/css/cherita.css +13 -9
- package/dist/css/cherita.css.map +1 -1
- package/dist/esm/components/controls/Controls.js +51 -0
- package/dist/esm/components/dotplot/Dotplot.js +28 -20
- package/dist/esm/components/dotplot/DotplotControls.js +62 -97
- package/dist/esm/components/full-page/FullPage.js +8 -5
- package/dist/esm/components/full-page/FullPagePseudospatial.js +8 -5
- package/dist/esm/components/heatmap/Heatmap.js +21 -11
- package/dist/esm/components/heatmap/HeatmapControls.js +3 -20
- package/dist/esm/components/matrixplot/Matrixplot.js +24 -14
- package/dist/esm/components/matrixplot/MatrixplotControls.js +5 -35
- package/dist/esm/components/obs-list/ObsItem.js +36 -27
- package/dist/esm/components/obs-list/ObsList.js +46 -42
- package/dist/esm/components/obsm-list/ObsmList.js +8 -4
- package/dist/esm/components/offcanvas/index.js +13 -9
- package/dist/esm/components/pseudospatial/Pseudospatial.js +60 -51
- package/dist/esm/components/pseudospatial/PseudospatialToolbar.js +16 -9
- package/dist/esm/components/scatterplot/Scatterplot.js +51 -50
- package/dist/esm/components/scatterplot/ScatterplotControls.js +11 -22
- package/dist/esm/components/scatterplot/SpatialControls.js +3 -2
- package/dist/esm/components/search-bar/SearchBar.js +11 -8
- package/dist/esm/components/search-bar/SearchInfo.js +13 -11
- package/dist/esm/components/search-bar/SearchResults.js +15 -12
- package/dist/esm/components/var-list/VarItem.js +9 -5
- package/dist/esm/components/var-list/VarList.js +13 -7
- package/dist/esm/components/violin/Violin.js +47 -37
- package/dist/esm/components/violin/ViolinControls.js +5 -21
- package/dist/esm/context/DatasetContext.js +16 -9
- package/dist/esm/context/FilterContext.js +8 -6
- package/dist/esm/context/SettingsContext.js +171 -238
- package/dist/esm/helpers/color-helper.js +3 -3
- package/dist/esm/helpers/zarr-helper.js +15 -12
- package/dist/esm/utils/Filter.js +13 -9
- package/dist/esm/utils/Histogram.js +4 -3
- package/dist/esm/utils/Legend.js +2 -1
- package/dist/esm/utils/LoadingIndicators.js +1 -1
- package/dist/esm/utils/VirtualizedList.js +15 -11
- package/dist/esm/utils/errors.js +20 -22
- package/dist/esm/utils/requests.js +13 -10
- package/dist/esm/utils/zarrData.js +12 -8
- package/package.json +4 -2
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.ScaleSelect = exports.ColorscaleSelect = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _lodash = _interopRequireDefault(require("lodash"));
|
|
9
|
+
var _reactBootstrap = require("react-bootstrap");
|
|
10
|
+
var _colorscales = require("../../constants/colorscales");
|
|
11
|
+
var _constants = require("../../constants/constants");
|
|
12
|
+
var _SettingsContext = require("../../context/SettingsContext");
|
|
13
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
14
|
+
const ColorscaleSelect = () => {
|
|
15
|
+
const settings = (0, _SettingsContext.useSettings)();
|
|
16
|
+
const dispatch = (0, _SettingsContext.useSettingsDispatch)();
|
|
17
|
+
return /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Group, {
|
|
18
|
+
className: "mb-2"
|
|
19
|
+
}, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Label, null, "Colorscale"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Select, {
|
|
20
|
+
value: settings.controls.colorScale,
|
|
21
|
+
onChange: e => {
|
|
22
|
+
dispatch({
|
|
23
|
+
type: "set.controls.colorScale",
|
|
24
|
+
colorScale: e.target.value
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
}, _lodash.default.keys(_colorscales.COLORSCALES).map(key => /*#__PURE__*/_react.default.createElement("option", {
|
|
28
|
+
key: key,
|
|
29
|
+
value: key
|
|
30
|
+
}, key))));
|
|
31
|
+
};
|
|
32
|
+
exports.ColorscaleSelect = ColorscaleSelect;
|
|
33
|
+
const ScaleSelect = _ref => {
|
|
34
|
+
let {
|
|
35
|
+
plot
|
|
36
|
+
} = _ref;
|
|
37
|
+
const settings = (0, _SettingsContext.useSettings)();
|
|
38
|
+
const dispatch = (0, _SettingsContext.useSettingsDispatch)();
|
|
39
|
+
const SCALES = {
|
|
40
|
+
dotplot: _constants.DOTPLOT_SCALES,
|
|
41
|
+
matrixplot: _constants.MATRIXPLOT_SCALES,
|
|
42
|
+
violinplot: _constants.VIOLINPLOT_SCALES
|
|
43
|
+
};
|
|
44
|
+
return /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Group, {
|
|
45
|
+
className: "mb-2"
|
|
46
|
+
}, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Label, null, "Standard scale"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Select, {
|
|
47
|
+
value: settings.controls.scale[plot] || "",
|
|
48
|
+
onChange: e => {
|
|
49
|
+
dispatch({
|
|
50
|
+
type: "set.controls.scale",
|
|
51
|
+
plot: plot,
|
|
52
|
+
scale: !e.target.value.length ? null : e.target.value
|
|
53
|
+
});
|
|
54
|
+
}
|
|
55
|
+
}, _lodash.default.values(SCALES[plot]).map(scale => /*#__PURE__*/_react.default.createElement("option", {
|
|
56
|
+
key: scale.value,
|
|
57
|
+
value: scale.value || ""
|
|
58
|
+
}, scale.name))));
|
|
59
|
+
};
|
|
60
|
+
exports.ScaleSelect = ScaleSelect;
|
|
@@ -14,9 +14,14 @@ var _SettingsContext = require("../../context/SettingsContext");
|
|
|
14
14
|
var _LoadingIndicators = require("../../utils/LoadingIndicators");
|
|
15
15
|
var _requests = require("../../utils/requests");
|
|
16
16
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
17
|
-
function
|
|
18
|
-
function
|
|
17
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
18
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
19
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
20
|
+
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; }
|
|
21
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
22
|
+
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); }
|
|
19
23
|
function Dotplot() {
|
|
24
|
+
var _settings$selectedObs, _settings$selectedObs2, _settings$selectedObs3;
|
|
20
25
|
const ENDPOINT = "dotplot";
|
|
21
26
|
const dataset = (0, _DatasetContext.useDataset)();
|
|
22
27
|
const settings = (0, _SettingsContext.useSettings)();
|
|
@@ -32,13 +37,16 @@ function Dotplot() {
|
|
|
32
37
|
const [params, setParams] = (0, _react.useState)({
|
|
33
38
|
url: dataset.url,
|
|
34
39
|
obsCol: settings.selectedObs,
|
|
35
|
-
obsValues: !settings.selectedObs
|
|
40
|
+
obsValues: !((_settings$selectedObs = settings.selectedObs) !== null && _settings$selectedObs !== void 0 && _settings$selectedObs.omit.length) ? null : _lodash.default.difference(_lodash.default.values((_settings$selectedObs2 = settings.selectedObs) === null || _settings$selectedObs2 === void 0 ? void 0 : _settings$selectedObs2.codes), (_settings$selectedObs3 = settings.selectedObs) === null || _settings$selectedObs3 === void 0 ? void 0 : _settings$selectedObs3.omit).map(c => {
|
|
41
|
+
var _settings$selectedObs4;
|
|
42
|
+
return (_settings$selectedObs4 = settings.selectedObs) === null || _settings$selectedObs4 === void 0 ? void 0 : _settings$selectedObs4.codesMap[c];
|
|
43
|
+
}),
|
|
36
44
|
varKeys: settings.selectedMultiVar.map(i => i.isSet ? {
|
|
37
45
|
name: i.name,
|
|
38
46
|
indices: i.vars.map(v => v.index)
|
|
39
47
|
} : i.index),
|
|
40
48
|
obsIndices: isSliced ? [...(obsIndices || [])] : null,
|
|
41
|
-
standardScale: settings.controls.
|
|
49
|
+
standardScale: settings.controls.scale.dotplot,
|
|
42
50
|
meanOnlyExpressed: settings.controls.meanOnlyExpressed,
|
|
43
51
|
expressionCutoff: settings.controls.expressionCutoff,
|
|
44
52
|
varNamesCol: dataset.varNamesCol
|
|
@@ -52,32 +60,33 @@ function Dotplot() {
|
|
|
52
60
|
setHasSelections(false);
|
|
53
61
|
}
|
|
54
62
|
setParams(p => {
|
|
55
|
-
|
|
56
|
-
|
|
63
|
+
var _settings$selectedObs5, _settings$selectedObs6, _settings$selectedObs7;
|
|
64
|
+
return _objectSpread(_objectSpread({}, p), {}, {
|
|
57
65
|
url: dataset.url,
|
|
58
66
|
obsCol: settings.selectedObs,
|
|
59
|
-
obsValues: !settings.selectedObs
|
|
67
|
+
obsValues: !((_settings$selectedObs5 = settings.selectedObs) !== null && _settings$selectedObs5 !== void 0 && _settings$selectedObs5.omit.length) ? null : _lodash.default.difference(_lodash.default.values((_settings$selectedObs6 = settings.selectedObs) === null || _settings$selectedObs6 === void 0 ? void 0 : _settings$selectedObs6.codes), (_settings$selectedObs7 = settings.selectedObs) === null || _settings$selectedObs7 === void 0 ? void 0 : _settings$selectedObs7.omit).map(c => {
|
|
68
|
+
var _settings$selectedObs8;
|
|
69
|
+
return (_settings$selectedObs8 = settings.selectedObs) === null || _settings$selectedObs8 === void 0 ? void 0 : _settings$selectedObs8.codesMap[c];
|
|
70
|
+
}),
|
|
60
71
|
varKeys: settings.selectedMultiVar.map(i => i.isSet ? {
|
|
61
72
|
name: i.name,
|
|
62
73
|
indices: i.vars.map(v => v.index)
|
|
63
74
|
} : i.index),
|
|
64
75
|
obsIndices: isSliced ? [...(obsIndices || [])] : null,
|
|
65
|
-
standardScale: settings.controls.
|
|
76
|
+
standardScale: settings.controls.scale.dotplot,
|
|
66
77
|
meanOnlyExpressed: settings.controls.meanOnlyExpressed,
|
|
67
78
|
expressionCutoff: settings.controls.expressionCutoff,
|
|
68
79
|
varNamesCol: dataset.varNamesCol
|
|
69
|
-
};
|
|
80
|
+
});
|
|
70
81
|
});
|
|
71
|
-
}, [dataset.url, settings.selectedObs, settings.selectedMultiVar, settings.controls.
|
|
82
|
+
}, [dataset.url, settings.selectedObs, settings.selectedMultiVar, settings.controls.scale.dotplot, settings.controls.meanOnlyExpressed, settings.controls.expressionCutoff, dataset.varNamesCol, isSliced, obsIndices]);
|
|
72
83
|
const updateColorscale = (0, _react.useCallback)(colorscale => {
|
|
73
84
|
setLayout(l => {
|
|
74
|
-
return {
|
|
75
|
-
|
|
76
|
-
coloraxis: {
|
|
77
|
-
...l.coloraxis,
|
|
85
|
+
return _objectSpread(_objectSpread({}, l), {}, {
|
|
86
|
+
coloraxis: _objectSpread(_objectSpread({}, l.coloraxis), {}, {
|
|
78
87
|
colorscale: colorscale
|
|
79
|
-
}
|
|
80
|
-
};
|
|
88
|
+
})
|
|
89
|
+
});
|
|
81
90
|
});
|
|
82
91
|
}, []);
|
|
83
92
|
const {
|
|
@@ -109,14 +118,12 @@ function Dotplot() {
|
|
|
109
118
|
}, [settings.controls.colorScale, updateColorscale]);
|
|
110
119
|
(0, _react.useEffect)(() => {
|
|
111
120
|
setLayout(l => {
|
|
112
|
-
return {
|
|
113
|
-
|
|
114
|
-
coloraxis: {
|
|
115
|
-
...l.coloraxis,
|
|
121
|
+
return _objectSpread(_objectSpread({}, l), {}, {
|
|
122
|
+
coloraxis: _objectSpread(_objectSpread({}, l.coloraxis), {}, {
|
|
116
123
|
cmin: settings.controls.colorAxis.cmin,
|
|
117
124
|
cmax: settings.controls.colorAxis.cmax
|
|
118
|
-
}
|
|
119
|
-
};
|
|
125
|
+
})
|
|
126
|
+
});
|
|
120
127
|
});
|
|
121
128
|
}, [settings.controls.colorAxis.cmin, settings.controls.colorAxis.cmax]);
|
|
122
129
|
if (!serverError) {
|
|
@@ -5,15 +5,15 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.DotplotControls = DotplotControls;
|
|
7
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
-
var _lodash = _interopRequireDefault(require("lodash"));
|
|
9
8
|
var _reactBootstrap = require("react-bootstrap");
|
|
10
|
-
var _Dropdown = _interopRequireDefault(require("react-bootstrap/Dropdown"));
|
|
11
|
-
var _colorscales = require("../../constants/colorscales");
|
|
12
|
-
var _constants = require("../../constants/constants");
|
|
13
9
|
var _SettingsContext = require("../../context/SettingsContext");
|
|
14
|
-
|
|
15
|
-
function
|
|
16
|
-
function
|
|
10
|
+
var _Controls = require("../controls/Controls");
|
|
11
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
12
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
13
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
14
|
+
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; }
|
|
15
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
16
|
+
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); }
|
|
17
17
|
function DotplotControls() {
|
|
18
18
|
const settings = (0, _SettingsContext.useSettings)();
|
|
19
19
|
const dispatch = (0, _SettingsContext.useSettingsDispatch)();
|
|
@@ -25,8 +25,7 @@ function DotplotControls() {
|
|
|
25
25
|
}
|
|
26
26
|
});
|
|
27
27
|
(0, _react.useEffect)(() => {
|
|
28
|
-
setControls(c => ({
|
|
29
|
-
...c,
|
|
28
|
+
setControls(c => _objectSpread(_objectSpread({}, c), {}, {
|
|
30
29
|
colorAxis: {
|
|
31
30
|
cmin: settings.controls.colorAxis.cmin,
|
|
32
31
|
cmax: settings.controls.colorAxis.cmax
|
|
@@ -34,77 +33,9 @@ function DotplotControls() {
|
|
|
34
33
|
expressionCutoff: settings.controls.expressionCutoff
|
|
35
34
|
}));
|
|
36
35
|
}, [settings.controls.colorAxis.cmin, settings.controls.colorAxis.cmax, settings.controls.expressionCutoff]);
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
onClick: () => {
|
|
41
|
-
dispatch({
|
|
42
|
-
type: "set.controls.colorScale",
|
|
43
|
-
colorScale: key
|
|
44
|
-
});
|
|
45
|
-
}
|
|
46
|
-
}, key));
|
|
47
|
-
const standardScaleList = _lodash.default.values(_constants.DOTPLOT_SCALES).map(scale => /*#__PURE__*/_react.default.createElement(_Dropdown.default.Item, {
|
|
48
|
-
key: scale.value,
|
|
49
|
-
active: settings.controls.scale.dotplot === scale,
|
|
50
|
-
onClick: () => {
|
|
51
|
-
dispatch({
|
|
52
|
-
type: "set.controls.scale",
|
|
53
|
-
plot: "dotplot",
|
|
54
|
-
scale: scale
|
|
55
|
-
});
|
|
56
|
-
}
|
|
57
|
-
}, scale.name));
|
|
58
|
-
return /*#__PURE__*/_react.default.createElement(_reactBootstrap.ButtonToolbar, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ButtonGroup, null, /*#__PURE__*/_react.default.createElement(_Dropdown.default, null, /*#__PURE__*/_react.default.createElement(_Dropdown.default.Toggle, {
|
|
59
|
-
id: "dropdownColorscale",
|
|
60
|
-
variant: "light"
|
|
61
|
-
}, settings.controls.colorScale), /*#__PURE__*/_react.default.createElement(_Dropdown.default.Menu, null, colorScaleList))), /*#__PURE__*/_react.default.createElement(_reactBootstrap.ButtonGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup.Text, null, "Standard scale"), /*#__PURE__*/_react.default.createElement(_Dropdown.default, null, /*#__PURE__*/_react.default.createElement(_Dropdown.default.Toggle, {
|
|
62
|
-
id: "dropdownStandardScale",
|
|
63
|
-
variant: "light"
|
|
64
|
-
}, settings.controls.scale.dotplot.name), /*#__PURE__*/_react.default.createElement(_Dropdown.default.Menu, null, standardScaleList)))), /*#__PURE__*/_react.default.createElement(_reactBootstrap.ButtonGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ToggleButton, {
|
|
65
|
-
id: "toggleMeanOnlyExpressed",
|
|
66
|
-
type: "checkbox",
|
|
67
|
-
variant: "outline-primary",
|
|
68
|
-
checked: settings.controls.meanOnlyExpressed,
|
|
69
|
-
onChange: () => {
|
|
70
|
-
dispatch({
|
|
71
|
-
type: "set.controls.meanOnlyExpressed",
|
|
72
|
-
meanOnlyExpressed: !settings.controls.meanOnlyExpressed
|
|
73
|
-
});
|
|
74
|
-
}
|
|
75
|
-
}, "Average only above cutoff")), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form, {
|
|
76
|
-
onSubmit: e => {
|
|
77
|
-
e.preventDefault();
|
|
78
|
-
dispatch({
|
|
79
|
-
type: "set.controls.expressionCutoff",
|
|
80
|
-
expressionCutoff: parseFloat(controls.expressionCutoff)
|
|
81
|
-
});
|
|
82
|
-
}
|
|
83
|
-
}, /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup.Text, null, "Expression Cutoff"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Control, {
|
|
84
|
-
size: "sm",
|
|
85
|
-
type: "number",
|
|
86
|
-
step: "0.1",
|
|
87
|
-
min: 0.0,
|
|
88
|
-
value: controls.expressionCutoff,
|
|
89
|
-
onChange: e => {
|
|
90
|
-
setControls({
|
|
91
|
-
...controls,
|
|
92
|
-
expressionCutoff: e.target.value
|
|
93
|
-
});
|
|
94
|
-
}
|
|
95
|
-
}), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
|
|
96
|
-
type: "submit",
|
|
97
|
-
variant: "outline-primary"
|
|
98
|
-
}, "Apply"))), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form, {
|
|
99
|
-
onSubmit: e => {
|
|
100
|
-
e.preventDefault();
|
|
101
|
-
dispatch({
|
|
102
|
-
type: "set.controls.colorAxis.crange",
|
|
103
|
-
cmin: controls.colorAxis.cmin,
|
|
104
|
-
cmax: controls.colorAxis.cmax
|
|
105
|
-
});
|
|
106
|
-
}
|
|
107
|
-
}, /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup.Text, null, "Colorscale"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup.Text, null, "min"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Control, {
|
|
36
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form, null, /*#__PURE__*/_react.default.createElement(_Controls.ColorscaleSelect, null), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Group, {
|
|
37
|
+
className: "mb-2"
|
|
38
|
+
}, /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup.Text, null, "min"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Control, {
|
|
108
39
|
name: "scaleMin",
|
|
109
40
|
size: "sm",
|
|
110
41
|
type: "number",
|
|
@@ -113,13 +44,11 @@ function DotplotControls() {
|
|
|
113
44
|
min: Math.min(settings.controls.colorAxis.dmin, 0.0),
|
|
114
45
|
max: settings.controls.colorAxis.dmax,
|
|
115
46
|
onChange: e => {
|
|
116
|
-
setControls({
|
|
117
|
-
|
|
118
|
-
colorAxis: {
|
|
119
|
-
...controls.colorAxis,
|
|
47
|
+
setControls(_objectSpread(_objectSpread({}, controls), {}, {
|
|
48
|
+
colorAxis: _objectSpread(_objectSpread({}, controls.colorAxis), {}, {
|
|
120
49
|
cmin: e.target.value
|
|
121
|
-
}
|
|
122
|
-
});
|
|
50
|
+
})
|
|
51
|
+
}));
|
|
123
52
|
}
|
|
124
53
|
}), /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup.Text, null, "max"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Control, {
|
|
125
54
|
name: "scaleMax",
|
|
@@ -133,25 +62,59 @@ function DotplotControls() {
|
|
|
133
62
|
if (parseFloat(e.target.value) > settings.controls.colorAxis.dmax) {
|
|
134
63
|
e.target.value = settings.controls.colorAxis.dmax.toFixed(1);
|
|
135
64
|
}
|
|
136
|
-
setControls({
|
|
137
|
-
|
|
138
|
-
colorAxis: {
|
|
139
|
-
...controls.colorAxis,
|
|
65
|
+
setControls(_objectSpread(_objectSpread({}, controls), {}, {
|
|
66
|
+
colorAxis: _objectSpread(_objectSpread({}, controls.colorAxis), {}, {
|
|
140
67
|
cmax: e.target.value
|
|
141
|
-
}
|
|
142
|
-
});
|
|
68
|
+
})
|
|
69
|
+
}));
|
|
143
70
|
}
|
|
144
71
|
}), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
|
|
145
|
-
|
|
146
|
-
|
|
72
|
+
variant: "outline-primary",
|
|
73
|
+
onClick: () => dispatch({
|
|
74
|
+
type: "set.controls.colorAxis.crange",
|
|
75
|
+
cmin: controls.colorAxis.cmin,
|
|
76
|
+
cmax: controls.colorAxis.cmax
|
|
77
|
+
})
|
|
147
78
|
}, "Apply"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
|
|
148
79
|
variant: "outline-primary",
|
|
149
|
-
onClick: () => {
|
|
80
|
+
onClick: () => dispatch({
|
|
81
|
+
type: "set.controls.colorAxis.crange",
|
|
82
|
+
cmin: settings.controls.colorAxis.dmin,
|
|
83
|
+
cmax: settings.controls.colorAxis.dmax
|
|
84
|
+
})
|
|
85
|
+
}, "Reset"))), /*#__PURE__*/_react.default.createElement(_Controls.ScaleSelect, {
|
|
86
|
+
plot: "dotplot"
|
|
87
|
+
}), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Group, {
|
|
88
|
+
className: "mb-2"
|
|
89
|
+
}, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Label, null, "Expression Cutoff"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Control, {
|
|
90
|
+
size: "sm",
|
|
91
|
+
type: "number",
|
|
92
|
+
step: "0.1",
|
|
93
|
+
min: 0.0,
|
|
94
|
+
value: controls.expressionCutoff,
|
|
95
|
+
onChange: e => {
|
|
96
|
+
setControls(_objectSpread(_objectSpread({}, controls), {}, {
|
|
97
|
+
expressionCutoff: e.target.value
|
|
98
|
+
}));
|
|
99
|
+
}
|
|
100
|
+
}), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
|
|
101
|
+
variant: "outline-primary",
|
|
102
|
+
onClick: () => dispatch({
|
|
103
|
+
type: "set.controls.expressionCutoff",
|
|
104
|
+
expressionCutoff: parseFloat(controls.expressionCutoff)
|
|
105
|
+
})
|
|
106
|
+
}, "Apply"))), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Group, {
|
|
107
|
+
className: "mb-2"
|
|
108
|
+
}, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Check, {
|
|
109
|
+
type: "switch",
|
|
110
|
+
id: "meanOnlyExpressed",
|
|
111
|
+
label: "Average only above cutoff",
|
|
112
|
+
checked: settings.controls.meanOnlyExpressed,
|
|
113
|
+
onChange: () => {
|
|
150
114
|
dispatch({
|
|
151
|
-
type: "set.controls.
|
|
152
|
-
|
|
153
|
-
cmax: settings.controls.colorAxis.dmax
|
|
115
|
+
type: "set.controls.meanOnlyExpressed",
|
|
116
|
+
meanOnlyExpressed: !settings.controls.meanOnlyExpressed
|
|
154
117
|
});
|
|
155
118
|
}
|
|
156
|
-
}
|
|
119
|
+
}))));
|
|
157
120
|
}
|
|
@@ -20,16 +20,18 @@ var _ScatterplotControls = require("../scatterplot/ScatterplotControls");
|
|
|
20
20
|
var _SearchBar = require("../search-bar/SearchBar");
|
|
21
21
|
var _VarList = require("../var-list/VarList");
|
|
22
22
|
var _Violin = require("../violin/Violin");
|
|
23
|
-
|
|
24
|
-
function _interopRequireWildcard(e, r) { if (!
|
|
23
|
+
const _excluded = ["children", "varMode", "searchDiseases"];
|
|
24
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
25
25
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
26
|
+
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
|
27
|
+
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
|
26
28
|
function FullPage(_ref) {
|
|
27
29
|
let {
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
30
|
+
children,
|
|
31
|
+
varMode = _constants.SELECTION_MODES.SINGLE,
|
|
32
|
+
searchDiseases = false
|
|
33
|
+
} = _ref,
|
|
34
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
33
35
|
const appRef = (0, _react.useRef)();
|
|
34
36
|
const [appDimensions, setAppDimensions] = (0, _react.useState)({
|
|
35
37
|
width: 0,
|
|
@@ -19,16 +19,18 @@ var _Scatterplot = require("../scatterplot/Scatterplot");
|
|
|
19
19
|
var _ScatterplotControls = require("../scatterplot/ScatterplotControls");
|
|
20
20
|
var _SearchBar = require("../search-bar/SearchBar");
|
|
21
21
|
var _VarList = require("../var-list/VarList");
|
|
22
|
-
|
|
23
|
-
function _interopRequireWildcard(e, r) { if (!
|
|
22
|
+
const _excluded = ["children", "varMode", "searchDiseases"];
|
|
23
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
24
24
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
25
|
+
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
|
26
|
+
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
|
25
27
|
function FullPage(_ref) {
|
|
26
28
|
let {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
29
|
+
children,
|
|
30
|
+
varMode = _constants.SELECTION_MODES.SINGLE,
|
|
31
|
+
searchDiseases = false
|
|
32
|
+
} = _ref,
|
|
33
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
32
34
|
const appRef = (0, _react.useRef)();
|
|
33
35
|
const [appDimensions, setAppDimensions] = (0, _react.useState)({
|
|
34
36
|
width: 0,
|
|
@@ -14,9 +14,14 @@ var _SettingsContext = require("../../context/SettingsContext");
|
|
|
14
14
|
var _LoadingIndicators = require("../../utils/LoadingIndicators");
|
|
15
15
|
var _requests = require("../../utils/requests");
|
|
16
16
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
17
|
-
function
|
|
18
|
-
function
|
|
17
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
18
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
19
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
20
|
+
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; }
|
|
21
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
22
|
+
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); }
|
|
19
23
|
function Heatmap() {
|
|
24
|
+
var _settings$selectedObs, _settings$selectedObs2, _settings$selectedObs3;
|
|
20
25
|
const ENDPOINT = "heatmap";
|
|
21
26
|
const dataset = (0, _DatasetContext.useDataset)();
|
|
22
27
|
const settings = (0, _SettingsContext.useSettings)();
|
|
@@ -31,7 +36,10 @@ function Heatmap() {
|
|
|
31
36
|
const [params, setParams] = (0, _react.useState)({
|
|
32
37
|
url: dataset.url,
|
|
33
38
|
obsCol: settings.selectedObs,
|
|
34
|
-
obsValues: !settings.selectedObs
|
|
39
|
+
obsValues: !((_settings$selectedObs = settings.selectedObs) !== null && _settings$selectedObs !== void 0 && _settings$selectedObs.omit.length) ? null : _lodash.default.difference(_lodash.default.values((_settings$selectedObs2 = settings.selectedObs) === null || _settings$selectedObs2 === void 0 ? void 0 : _settings$selectedObs2.codes), (_settings$selectedObs3 = settings.selectedObs) === null || _settings$selectedObs3 === void 0 ? void 0 : _settings$selectedObs3.omit).map(c => {
|
|
40
|
+
var _settings$selectedObs4;
|
|
41
|
+
return (_settings$selectedObs4 = settings.selectedObs) === null || _settings$selectedObs4 === void 0 ? void 0 : _settings$selectedObs4.codesMap[c];
|
|
42
|
+
}),
|
|
35
43
|
varKeys: settings.selectedMultiVar.map(i => i.isSet ? {
|
|
36
44
|
name: i.name,
|
|
37
45
|
indices: i.vars.map(v => v.index)
|
|
@@ -46,29 +54,30 @@ function Heatmap() {
|
|
|
46
54
|
setHasSelections(false);
|
|
47
55
|
}
|
|
48
56
|
setParams(p => {
|
|
49
|
-
|
|
50
|
-
|
|
57
|
+
var _settings$selectedObs5, _settings$selectedObs6, _settings$selectedObs7;
|
|
58
|
+
return _objectSpread(_objectSpread({}, p), {}, {
|
|
51
59
|
url: dataset.url,
|
|
52
60
|
obsCol: settings.selectedObs,
|
|
53
|
-
obsValues: !settings.selectedObs
|
|
61
|
+
obsValues: !((_settings$selectedObs5 = settings.selectedObs) !== null && _settings$selectedObs5 !== void 0 && _settings$selectedObs5.omit.length) ? null : _lodash.default.difference(_lodash.default.values((_settings$selectedObs6 = settings.selectedObs) === null || _settings$selectedObs6 === void 0 ? void 0 : _settings$selectedObs6.codes), (_settings$selectedObs7 = settings.selectedObs) === null || _settings$selectedObs7 === void 0 ? void 0 : _settings$selectedObs7.omit).map(c => {
|
|
62
|
+
var _settings$selectedObs8;
|
|
63
|
+
return (_settings$selectedObs8 = settings.selectedObs) === null || _settings$selectedObs8 === void 0 ? void 0 : _settings$selectedObs8.codesMap[c];
|
|
64
|
+
}),
|
|
54
65
|
varKeys: settings.selectedMultiVar.map(i => i.isSet ? {
|
|
55
66
|
name: i.name,
|
|
56
67
|
indices: i.vars.map(v => v.index)
|
|
57
68
|
} : i.index),
|
|
58
69
|
obsIndices: isSliced ? [...(obsIndices || [])] : null,
|
|
59
70
|
varNamesCol: dataset.varNamesCol
|
|
60
|
-
};
|
|
71
|
+
});
|
|
61
72
|
});
|
|
62
73
|
}, [settings.selectedMultiVar, settings.selectedObs, dataset.url, dataset.varNamesCol, obsIndices, isSliced]);
|
|
63
74
|
const updateColorscale = (0, _react.useCallback)(colorscale => {
|
|
64
75
|
setLayout(l => {
|
|
65
|
-
return {
|
|
66
|
-
|
|
67
|
-
coloraxis: {
|
|
68
|
-
...l.coloraxis,
|
|
76
|
+
return _objectSpread(_objectSpread({}, l), {}, {
|
|
77
|
+
coloraxis: _objectSpread(_objectSpread({}, l.coloraxis), {}, {
|
|
69
78
|
colorscale: colorscale
|
|
70
|
-
}
|
|
71
|
-
};
|
|
79
|
+
})
|
|
80
|
+
});
|
|
72
81
|
});
|
|
73
82
|
}, []);
|
|
74
83
|
const {
|
|
@@ -5,26 +5,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.HeatmapControls = HeatmapControls;
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
|
-
var _lodash = _interopRequireDefault(require("lodash"));
|
|
9
8
|
var _reactBootstrap = require("react-bootstrap");
|
|
10
|
-
var
|
|
11
|
-
var _SettingsContext = require("../../context/SettingsContext");
|
|
9
|
+
var _Controls = require("../controls/Controls");
|
|
12
10
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
13
11
|
function HeatmapControls() {
|
|
14
|
-
|
|
15
|
-
const dispatch = (0, _SettingsContext.useSettingsDispatch)();
|
|
16
|
-
const colormapList = _lodash.default.keys(_colorscales.COLORSCALES).map(key => /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
|
|
17
|
-
key: key,
|
|
18
|
-
active: settings.controls.colorScale === key,
|
|
19
|
-
onClick: () => {
|
|
20
|
-
dispatch({
|
|
21
|
-
type: "set.controls.colorScale",
|
|
22
|
-
colorScale: key
|
|
23
|
-
});
|
|
24
|
-
}
|
|
25
|
-
}, key));
|
|
26
|
-
return /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Toggle, {
|
|
27
|
-
id: "dropdownColorscale",
|
|
28
|
-
variant: "light"
|
|
29
|
-
}, settings.controls.colorScale), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Menu, null, colormapList));
|
|
12
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form, null, /*#__PURE__*/_react.default.createElement(_Controls.ColorscaleSelect, null)));
|
|
30
13
|
}
|
|
@@ -14,9 +14,14 @@ var _SettingsContext = require("../../context/SettingsContext");
|
|
|
14
14
|
var _LoadingIndicators = require("../../utils/LoadingIndicators");
|
|
15
15
|
var _requests = require("../../utils/requests");
|
|
16
16
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
17
|
-
function
|
|
18
|
-
function
|
|
17
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
18
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
19
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
20
|
+
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; }
|
|
21
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
22
|
+
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); }
|
|
19
23
|
function Matrixplot() {
|
|
24
|
+
var _settings$selectedObs, _settings$selectedObs2, _settings$selectedObs3;
|
|
20
25
|
const ENDPOINT = "matrixplot";
|
|
21
26
|
const dataset = (0, _DatasetContext.useDataset)();
|
|
22
27
|
const settings = (0, _SettingsContext.useSettings)();
|
|
@@ -31,13 +36,16 @@ function Matrixplot() {
|
|
|
31
36
|
const [params, setParams] = (0, _react.useState)({
|
|
32
37
|
url: dataset.url,
|
|
33
38
|
obsCol: settings.selectedObs,
|
|
34
|
-
obsValues: !settings.selectedObs
|
|
39
|
+
obsValues: !((_settings$selectedObs = settings.selectedObs) !== null && _settings$selectedObs !== void 0 && _settings$selectedObs.omit.length) ? null : _lodash.default.difference(_lodash.default.values((_settings$selectedObs2 = settings.selectedObs) === null || _settings$selectedObs2 === void 0 ? void 0 : _settings$selectedObs2.codes), (_settings$selectedObs3 = settings.selectedObs) === null || _settings$selectedObs3 === void 0 ? void 0 : _settings$selectedObs3.omit).map(c => {
|
|
40
|
+
var _settings$selectedObs4;
|
|
41
|
+
return (_settings$selectedObs4 = settings.selectedObs) === null || _settings$selectedObs4 === void 0 ? void 0 : _settings$selectedObs4.codesMap[c];
|
|
42
|
+
}),
|
|
35
43
|
varKeys: settings.selectedMultiVar.map(i => i.isSet ? {
|
|
36
44
|
name: i.name,
|
|
37
45
|
indices: i.vars.map(v => v.index)
|
|
38
46
|
} : i.index),
|
|
39
47
|
obsIndices: isSliced ? [...(obsIndices || [])] : null,
|
|
40
|
-
standardScale: settings.controls.
|
|
48
|
+
standardScale: settings.controls.scale.matrixplot,
|
|
41
49
|
varNamesCol: dataset.varNamesCol
|
|
42
50
|
});
|
|
43
51
|
(0, _react.useEffect)(() => {
|
|
@@ -47,30 +55,31 @@ function Matrixplot() {
|
|
|
47
55
|
setHasSelections(false);
|
|
48
56
|
}
|
|
49
57
|
setParams(p => {
|
|
50
|
-
|
|
51
|
-
|
|
58
|
+
var _settings$selectedObs5, _settings$selectedObs6, _settings$selectedObs7;
|
|
59
|
+
return _objectSpread(_objectSpread({}, p), {}, {
|
|
52
60
|
url: dataset.url,
|
|
53
61
|
obsCol: settings.selectedObs,
|
|
54
|
-
obsValues: !settings.selectedObs
|
|
62
|
+
obsValues: !((_settings$selectedObs5 = settings.selectedObs) !== null && _settings$selectedObs5 !== void 0 && _settings$selectedObs5.omit.length) ? null : _lodash.default.difference(_lodash.default.values((_settings$selectedObs6 = settings.selectedObs) === null || _settings$selectedObs6 === void 0 ? void 0 : _settings$selectedObs6.codes), (_settings$selectedObs7 = settings.selectedObs) === null || _settings$selectedObs7 === void 0 ? void 0 : _settings$selectedObs7.omit).map(c => {
|
|
63
|
+
var _settings$selectedObs8;
|
|
64
|
+
return (_settings$selectedObs8 = settings.selectedObs) === null || _settings$selectedObs8 === void 0 ? void 0 : _settings$selectedObs8.codesMap[c];
|
|
65
|
+
}),
|
|
55
66
|
varKeys: settings.selectedMultiVar.map(i => i.isSet ? {
|
|
56
67
|
name: i.name,
|
|
57
68
|
indices: i.vars.map(v => v.index)
|
|
58
69
|
} : i.index),
|
|
59
70
|
obsIndices: isSliced ? [...(obsIndices || [])] : null,
|
|
60
|
-
standardScale: settings.controls.
|
|
71
|
+
standardScale: settings.controls.scale.matrixplot,
|
|
61
72
|
varNamesCol: dataset.varNamesCol
|
|
62
|
-
};
|
|
73
|
+
});
|
|
63
74
|
});
|
|
64
|
-
}, [settings.controls.
|
|
75
|
+
}, [settings.controls.scale.matrixplot, settings.selectedMultiVar, settings.selectedObs, dataset.url, dataset.varNamesCol, obsIndices, isSliced]);
|
|
65
76
|
const updateColorscale = (0, _react.useCallback)(colorscale => {
|
|
66
77
|
setLayout(l => {
|
|
67
|
-
return {
|
|
68
|
-
|
|
69
|
-
coloraxis: {
|
|
70
|
-
...l.coloraxis,
|
|
78
|
+
return _objectSpread(_objectSpread({}, l), {}, {
|
|
79
|
+
coloraxis: _objectSpread(_objectSpread({}, l.coloraxis), {}, {
|
|
71
80
|
colorscale: colorscale
|
|
72
|
-
}
|
|
73
|
-
};
|
|
81
|
+
})
|
|
82
|
+
});
|
|
74
83
|
});
|
|
75
84
|
}, []);
|
|
76
85
|
const {
|