@haniffalab/cherita-react 0.2.0-dev.2024-02-12.9498443 → 0.2.0-dev.2024-02-13.c21dcf17
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/components/dotplot/Dotplot.js +104 -129
- package/dist/components/heatmap/Heatmap.js +48 -74
- package/dist/components/matrixplot/Matrixplot.js +59 -87
- package/dist/components/obs-list/ObsList.js +68 -93
- package/dist/components/obsm-list/ObsmList.js +26 -45
- package/dist/components/scatterplot/Legend.js +7 -5
- package/dist/components/scatterplot/Scatterplot.js +103 -198
- package/dist/components/scatterplot/Toolbox.js +14 -24
- package/dist/components/var-list/VarList.js +66 -112
- package/dist/components/violin/Violin.js +48 -77
- package/dist/constants/constants.js +9 -17
- package/dist/context/DatasetContext.js +114 -107
- package/dist/helpers/color.js +18 -21
- package/dist/helpers/map.js +41 -43
- package/dist/helpers/zarr.js +20 -42
- package/dist/index.js +17 -17
- package/dist/utils/LoadingSpinner.js +4 -4
- package/dist/utils/errors.js +22 -21
- package/dist/utils/requests.js +67 -105
- package/package.json +6 -6
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
@@ -15,46 +14,31 @@ var _reactBootstrap = require("react-bootstrap");
|
|
|
15
14
|
var _requests = require("../../utils/requests");
|
|
16
15
|
var _LoadingSpinner = require("../../utils/LoadingSpinner");
|
|
17
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
18
|
-
function _getRequireWildcardCache(
|
|
19
|
-
function _interopRequireWildcard(
|
|
20
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
21
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
22
|
-
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
23
|
-
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
24
|
-
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
25
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
26
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
27
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
28
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
29
|
-
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
|
|
30
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
17
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
18
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
31
19
|
function MatrixplotControls() {
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
});
|
|
55
|
-
}
|
|
56
|
-
}, item.name);
|
|
57
|
-
});
|
|
20
|
+
const dataset = (0, _DatasetContext.useDataset)();
|
|
21
|
+
const dispatch = (0, _DatasetContext.useDatasetDispatch)();
|
|
22
|
+
const colorScaleList = _constants.PLOTLY_COLORSCALES.map(item => /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
|
|
23
|
+
key: item,
|
|
24
|
+
active: dataset.controls.colorScale === item,
|
|
25
|
+
onClick: () => {
|
|
26
|
+
dispatch({
|
|
27
|
+
type: "set.controls.colorScale",
|
|
28
|
+
colorScale: item
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
}, item));
|
|
32
|
+
const standardScaleList = _constants.MATRIXPLOT_STANDARDSCALES.map(item => /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
|
|
33
|
+
key: item.value,
|
|
34
|
+
active: dataset.controls.standardScale === item.name,
|
|
35
|
+
onClick: () => {
|
|
36
|
+
dispatch({
|
|
37
|
+
type: "set.controls.standardScale",
|
|
38
|
+
standardScale: item.value
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
}, item.name));
|
|
58
42
|
return /*#__PURE__*/_react.default.createElement(_reactBootstrap.ButtonToolbar, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ButtonGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Toggle, {
|
|
59
43
|
id: "dropdownColorscale",
|
|
60
44
|
variant: "light"
|
|
@@ -64,72 +48,60 @@ function MatrixplotControls() {
|
|
|
64
48
|
}, dataset.controls.standardScale), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Menu, null, standardScaleList)))));
|
|
65
49
|
}
|
|
66
50
|
function Matrixplot() {
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
hasSelections = _useState6[0],
|
|
81
|
-
setHasSelections = _useState6[1];
|
|
82
|
-
var _useState7 = (0, _react.useState)({
|
|
83
|
-
url: dataset.url,
|
|
84
|
-
selectedObs: dataset.selectedObs,
|
|
85
|
-
selectedMultiVar: dataset.selectedMultiVar.map(function (i) {
|
|
86
|
-
return i.name;
|
|
87
|
-
}),
|
|
88
|
-
standardScale: dataset.controls.standardScale
|
|
89
|
-
}),
|
|
90
|
-
_useState8 = _slicedToArray(_useState7, 2),
|
|
91
|
-
params = _useState8[0],
|
|
92
|
-
setParams = _useState8[1];
|
|
93
|
-
(0, _react.useEffect)(function () {
|
|
51
|
+
const ENDPOINT = "matrixplot";
|
|
52
|
+
const dataset = (0, _DatasetContext.useDataset)();
|
|
53
|
+
const colorscale = (0, _react.useRef)(dataset.controls.colorScale);
|
|
54
|
+
const [data, setData] = (0, _react.useState)([]);
|
|
55
|
+
const [layout, setLayout] = (0, _react.useState)({});
|
|
56
|
+
const [hasSelections, setHasSelections] = (0, _react.useState)(false);
|
|
57
|
+
const [params, setParams] = (0, _react.useState)({
|
|
58
|
+
url: dataset.url,
|
|
59
|
+
selectedObs: dataset.selectedObs,
|
|
60
|
+
selectedMultiVar: dataset.selectedMultiVar.map(i => i.name),
|
|
61
|
+
standardScale: dataset.controls.standardScale
|
|
62
|
+
});
|
|
63
|
+
(0, _react.useEffect)(() => {
|
|
94
64
|
if (dataset.selectedObs && dataset.selectedMultiVar.length) {
|
|
95
65
|
setHasSelections(true);
|
|
96
66
|
} else {
|
|
97
67
|
setHasSelections(false);
|
|
98
68
|
}
|
|
99
|
-
setParams(
|
|
100
|
-
return
|
|
69
|
+
setParams(p => {
|
|
70
|
+
return {
|
|
71
|
+
...p,
|
|
101
72
|
url: dataset.url,
|
|
102
73
|
selectedObs: dataset.selectedObs,
|
|
103
|
-
selectedMultiVar: dataset.selectedMultiVar.map(
|
|
104
|
-
return i.name;
|
|
105
|
-
}),
|
|
74
|
+
selectedMultiVar: dataset.selectedMultiVar.map(i => i.name),
|
|
106
75
|
standardScale: dataset.controls.standardScale
|
|
107
|
-
}
|
|
76
|
+
};
|
|
108
77
|
});
|
|
109
78
|
}, [dataset.controls.standardScale, dataset.selectedMultiVar, dataset.selectedObs, dataset.url]);
|
|
110
|
-
|
|
111
|
-
setLayout(
|
|
112
|
-
return
|
|
113
|
-
|
|
79
|
+
const updateColorscale = (0, _react.useCallback)(colorscale => {
|
|
80
|
+
setLayout(l => {
|
|
81
|
+
return {
|
|
82
|
+
...l,
|
|
83
|
+
coloraxis: {
|
|
84
|
+
...l.coloraxis,
|
|
114
85
|
colorscale: colorscale
|
|
115
|
-
}
|
|
116
|
-
}
|
|
86
|
+
}
|
|
87
|
+
};
|
|
117
88
|
});
|
|
118
89
|
}, []);
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
90
|
+
const {
|
|
91
|
+
fetchedData,
|
|
92
|
+
isPending,
|
|
93
|
+
serverError
|
|
94
|
+
} = (0, _requests.useDebouncedFetch)(ENDPOINT, params, 500, {
|
|
95
|
+
enabled: !!params.selectedObs && !!params.selectedMultiVar.length
|
|
96
|
+
});
|
|
97
|
+
(0, _react.useEffect)(() => {
|
|
126
98
|
if (hasSelections && !isPending && !serverError) {
|
|
127
99
|
setData(fetchedData.data);
|
|
128
100
|
setLayout(fetchedData.layout);
|
|
129
101
|
updateColorscale(colorscale.current);
|
|
130
102
|
}
|
|
131
103
|
}, [fetchedData, hasSelections, isPending, serverError, updateColorscale]);
|
|
132
|
-
(0, _react.useEffect)(
|
|
104
|
+
(0, _react.useEffect)(() => {
|
|
133
105
|
colorscale.current = dataset.controls.colorScale;
|
|
134
106
|
updateColorscale(colorscale.current);
|
|
135
107
|
}, [dataset.controls.colorScale, updateColorscale]);
|
|
@@ -14,85 +14,66 @@ var _chromaJs = _interopRequireDefault(require("chroma-js"));
|
|
|
14
14
|
var _color = require("../../helpers/color");
|
|
15
15
|
var _LoadingSpinner = require("../../utils/LoadingSpinner");
|
|
16
16
|
var _reactBootstrap = require("react-bootstrap");
|
|
17
|
-
function _getRequireWildcardCache(
|
|
18
|
-
function _interopRequireWildcard(
|
|
17
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
18
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
19
19
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
20
|
-
|
|
21
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
22
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
23
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
24
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
25
|
-
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
|
|
26
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
27
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
28
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
29
|
-
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
30
|
-
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
31
|
-
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
32
|
-
var N_BINS = 5;
|
|
20
|
+
const N_BINS = 5;
|
|
33
21
|
function binContinuous(data) {
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
22
|
+
let nBins = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : N_BINS;
|
|
23
|
+
const binSize = (data.max - data.min) * (1 / nBins);
|
|
24
|
+
const thresholds = _lodash.default.range(nBins + 1).map(b => {
|
|
37
25
|
return data.min + binSize * b;
|
|
38
26
|
});
|
|
39
|
-
|
|
27
|
+
const bins = {
|
|
40
28
|
nBins: nBins,
|
|
41
29
|
binSize: binSize,
|
|
42
30
|
thresholds: thresholds
|
|
43
31
|
};
|
|
44
|
-
return
|
|
32
|
+
return {
|
|
33
|
+
...data,
|
|
34
|
+
...bins
|
|
35
|
+
};
|
|
45
36
|
}
|
|
46
37
|
function binDiscrete(data) {
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
38
|
+
let nBins = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : N_BINS;
|
|
39
|
+
const binSize = _lodash.default.round(data.n_values * (1 / nBins));
|
|
40
|
+
const bins = {
|
|
50
41
|
nBins: nBins,
|
|
51
42
|
binSize: binSize
|
|
52
43
|
};
|
|
53
|
-
return
|
|
44
|
+
return {
|
|
45
|
+
...data,
|
|
46
|
+
...bins
|
|
47
|
+
};
|
|
54
48
|
}
|
|
55
49
|
function ObsColsList() {
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
var _useState7 = (0, _react.useState)(null),
|
|
72
|
-
_useState8 = _slicedToArray(_useState7, 2),
|
|
73
|
-
active = _useState8[0],
|
|
74
|
-
setActive = _useState8[1];
|
|
75
|
-
var _useState9 = (0, _react.useState)({
|
|
76
|
-
url: dataset.url
|
|
77
|
-
}),
|
|
78
|
-
_useState10 = _slicedToArray(_useState9, 2),
|
|
79
|
-
params = _useState10[0],
|
|
80
|
-
setParams = _useState10[1];
|
|
81
|
-
var colorHelper = new _color.ColorHelper();
|
|
82
|
-
(0, _react.useEffect)(function () {
|
|
83
|
-
setParams(function (p) {
|
|
84
|
-
return _objectSpread(_objectSpread({}, p), {}, {
|
|
50
|
+
const ENDPOINT = "obs/cols";
|
|
51
|
+
const dataset = (0, _DatasetContext.useDataset)();
|
|
52
|
+
const dispatch = (0, _DatasetContext.useDatasetDispatch)();
|
|
53
|
+
const [obsColsList, setObsColsList] = (0, _react.useState)([]);
|
|
54
|
+
const [obs, setObs] = (0, _react.useState)([]);
|
|
55
|
+
const [updatedObsColsList, setUpdatedObsColsList] = (0, _react.useState)(false);
|
|
56
|
+
const [active, setActive] = (0, _react.useState)(null);
|
|
57
|
+
const [params, setParams] = (0, _react.useState)({
|
|
58
|
+
url: dataset.url
|
|
59
|
+
});
|
|
60
|
+
const colorHelper = new _color.ColorHelper();
|
|
61
|
+
(0, _react.useEffect)(() => {
|
|
62
|
+
setParams(p => {
|
|
63
|
+
return {
|
|
64
|
+
...p,
|
|
85
65
|
url: dataset.url
|
|
86
|
-
}
|
|
66
|
+
};
|
|
87
67
|
});
|
|
88
68
|
}, [dataset.url]);
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
69
|
+
const {
|
|
70
|
+
fetchedData,
|
|
71
|
+
isPending,
|
|
72
|
+
serverError
|
|
73
|
+
} = (0, _requests.useFetch)(ENDPOINT, params, {
|
|
74
|
+
refetchOnMount: false
|
|
75
|
+
});
|
|
76
|
+
const validateSelection = (0, _react.useCallback)(selectedObs => {
|
|
96
77
|
if (updatedObsColsList) {
|
|
97
78
|
if (!_lodash.default.some(obsColsList, selectedObs)) {
|
|
98
79
|
setActive(null);
|
|
@@ -103,10 +84,10 @@ function ObsColsList() {
|
|
|
103
84
|
}
|
|
104
85
|
}
|
|
105
86
|
}, [dispatch, obsColsList, updatedObsColsList]);
|
|
106
|
-
(0, _react.useEffect)(
|
|
87
|
+
(0, _react.useEffect)(() => {
|
|
107
88
|
if (!isPending && !serverError) {
|
|
108
|
-
setObs(fetchedData.reduce(
|
|
109
|
-
|
|
89
|
+
setObs(fetchedData.reduce((result, key) => {
|
|
90
|
+
const colors = _chromaJs.default.scale("Accent").colors(key.n_values, "rgb");
|
|
110
91
|
result[key.name] = {
|
|
111
92
|
type: key.type
|
|
112
93
|
};
|
|
@@ -114,7 +95,7 @@ function ObsColsList() {
|
|
|
114
95
|
result[key.name]["is_truncated"] = key.is_truncated;
|
|
115
96
|
result[key.name]["n_values"] = key.n_values;
|
|
116
97
|
result[key.name]["values"] = key.values;
|
|
117
|
-
result[key.name]["state"] = key.values.map(
|
|
98
|
+
result[key.name]["state"] = key.values.map((value, index) => {
|
|
118
99
|
return {
|
|
119
100
|
value: value,
|
|
120
101
|
color: (0, _chromaJs.default)(colors[index]).rgb(),
|
|
@@ -124,7 +105,7 @@ function ObsColsList() {
|
|
|
124
105
|
}
|
|
125
106
|
return result;
|
|
126
107
|
}, {}));
|
|
127
|
-
setObsColsList(fetchedData.map(
|
|
108
|
+
setObsColsList(fetchedData.map(d => {
|
|
128
109
|
if (d.type === "continuous") {
|
|
129
110
|
d = binContinuous(d);
|
|
130
111
|
}
|
|
@@ -136,13 +117,13 @@ function ObsColsList() {
|
|
|
136
117
|
setUpdatedObsColsList(true);
|
|
137
118
|
}
|
|
138
119
|
}, [fetchedData, isPending, serverError]);
|
|
139
|
-
(0, _react.useEffect)(
|
|
120
|
+
(0, _react.useEffect)(() => {
|
|
140
121
|
if (dataset.selectedObs) {
|
|
141
122
|
validateSelection(dataset.selectedObs);
|
|
142
123
|
setActive(dataset.selectedObs.name);
|
|
143
124
|
}
|
|
144
125
|
}, [dataset.selectedObs, validateSelection]);
|
|
145
|
-
(0, _react.useEffect)(
|
|
126
|
+
(0, _react.useEffect)(() => {
|
|
146
127
|
dispatch({
|
|
147
128
|
type: "set.obs",
|
|
148
129
|
value: obs
|
|
@@ -155,16 +136,14 @@ function ObsColsList() {
|
|
|
155
136
|
eventKey: item.name
|
|
156
137
|
}, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Accordion.Header, null, item.name), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Accordion.Body, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup, {
|
|
157
138
|
variant: "flush"
|
|
158
|
-
}, item.values.map(
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
}));
|
|
167
|
-
}))));
|
|
139
|
+
}, item.values.map((value, index) => /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup.Item, {
|
|
140
|
+
key: index
|
|
141
|
+
}, value, /*#__PURE__*/_react.default.createElement("span", {
|
|
142
|
+
className: "cm-string cm-color",
|
|
143
|
+
style: {
|
|
144
|
+
backgroundColor: "rgb(".concat(obs[item.name]["state"][index]["color"], ")")
|
|
145
|
+
}
|
|
146
|
+
}))))));
|
|
168
147
|
}
|
|
169
148
|
function continuousList(item) {
|
|
170
149
|
return /*#__PURE__*/_react.default.createElement(_reactBootstrap.Accordion.Item, {
|
|
@@ -178,17 +157,15 @@ function ObsColsList() {
|
|
|
178
157
|
eventKey: item.name
|
|
179
158
|
}, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Accordion.Header, null, item.name), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Accordion.Body, null, item.type));
|
|
180
159
|
}
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
});
|
|
191
|
-
}, [obsColsList]);
|
|
160
|
+
const obsList = (0, _react.useMemo)(() => obsColsList.map(item => {
|
|
161
|
+
if (item.type === "categorical") {
|
|
162
|
+
return categoricalList(item);
|
|
163
|
+
} else if (item.type === "continuous") {
|
|
164
|
+
return continuousList(item);
|
|
165
|
+
} else {
|
|
166
|
+
return otherList(item);
|
|
167
|
+
}
|
|
168
|
+
}), [obsColsList]);
|
|
192
169
|
if (!serverError) {
|
|
193
170
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
194
171
|
className: "position-relative"
|
|
@@ -197,13 +174,11 @@ function ObsColsList() {
|
|
|
197
174
|
}, isPending && /*#__PURE__*/_react.default.createElement(_LoadingSpinner.LoadingSpinner, null), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Accordion, {
|
|
198
175
|
flush: true,
|
|
199
176
|
activeKey: active,
|
|
200
|
-
onSelect:
|
|
177
|
+
onSelect: key => {
|
|
201
178
|
if (key != null) {
|
|
202
179
|
dispatch({
|
|
203
180
|
type: "obsSelected",
|
|
204
|
-
obs: obsColsList.find(
|
|
205
|
-
return obs.name === key;
|
|
206
|
-
})
|
|
181
|
+
obs: obsColsList.find(obs => obs.name === key)
|
|
207
182
|
});
|
|
208
183
|
}
|
|
209
184
|
}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
@@ -11,66 +10,48 @@ var _requests = require("../../utils/requests");
|
|
|
11
10
|
var _DatasetContext = require("../../context/DatasetContext");
|
|
12
11
|
var _LoadingSpinner = require("../../utils/LoadingSpinner");
|
|
13
12
|
var _reactBootstrap = require("react-bootstrap");
|
|
14
|
-
function _getRequireWildcardCache(
|
|
15
|
-
function _interopRequireWildcard(
|
|
16
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
17
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
18
|
-
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
19
|
-
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
20
|
-
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
21
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
22
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
23
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
24
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
25
|
-
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
|
|
26
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
13
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
14
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
27
15
|
function ObsmKeysList() {
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
url: dataset.url
|
|
41
|
-
}),
|
|
42
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
|
43
|
-
params = _useState6[0],
|
|
44
|
-
setParams = _useState6[1];
|
|
45
|
-
(0, _react.useEffect)(function () {
|
|
46
|
-
setParams(function (p) {
|
|
47
|
-
return _objectSpread(_objectSpread({}, p), {}, {
|
|
16
|
+
const ENDPOINT = "obsm/keys";
|
|
17
|
+
const dataset = (0, _DatasetContext.useDataset)();
|
|
18
|
+
const dispatch = (0, _DatasetContext.useDatasetDispatch)();
|
|
19
|
+
const [obsmKeysList, setObsmKeysList] = (0, _react.useState)([]);
|
|
20
|
+
const [active, setActive] = (0, _react.useState)(null);
|
|
21
|
+
const [params, setParams] = (0, _react.useState)({
|
|
22
|
+
url: dataset.url
|
|
23
|
+
});
|
|
24
|
+
(0, _react.useEffect)(() => {
|
|
25
|
+
setParams(p => {
|
|
26
|
+
return {
|
|
27
|
+
...p,
|
|
48
28
|
url: dataset.url
|
|
49
|
-
}
|
|
29
|
+
};
|
|
50
30
|
});
|
|
51
31
|
}, [dataset.url]);
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
32
|
+
const {
|
|
33
|
+
fetchedData,
|
|
34
|
+
isPending,
|
|
35
|
+
serverError
|
|
36
|
+
} = (0, _requests.useFetch)(ENDPOINT, params, {
|
|
37
|
+
refetchOnMount: false
|
|
38
|
+
});
|
|
39
|
+
(0, _react.useEffect)(() => {
|
|
59
40
|
if (!isPending && !serverError) {
|
|
60
41
|
setObsmKeysList(fetchedData);
|
|
61
42
|
}
|
|
62
43
|
}, [fetchedData, isPending, serverError]);
|
|
63
|
-
(0, _react.useEffect)(
|
|
44
|
+
(0, _react.useEffect)(() => {
|
|
64
45
|
if (dataset.selectedObsm) {
|
|
65
46
|
setActive(dataset.selectedObsm);
|
|
66
47
|
}
|
|
67
48
|
}, [dataset.selectedObsm]);
|
|
68
|
-
|
|
49
|
+
const obsmList = obsmKeysList.map(item => {
|
|
69
50
|
return /*#__PURE__*/_react.default.createElement("button", {
|
|
70
51
|
type: "button",
|
|
71
52
|
key: item,
|
|
72
53
|
className: "list-group-item list-grou-item-action ".concat(active === item && "active"),
|
|
73
|
-
onClick:
|
|
54
|
+
onClick: () => {
|
|
74
55
|
dispatch({
|
|
75
56
|
type: "obsmSelected",
|
|
76
57
|
obsm: item
|
|
@@ -23,15 +23,17 @@ var _reactFontawesome = require("@fortawesome/react-fontawesome");
|
|
|
23
23
|
var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
|
|
24
24
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
25
25
|
function Legend(_ref) {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
26
|
+
let {
|
|
27
|
+
values
|
|
28
|
+
} = _ref;
|
|
29
|
+
const dataset = (0, _DatasetContext.useDataset)();
|
|
30
|
+
const colorHelper = new _color.ColorHelper();
|
|
29
31
|
if (dataset.colorEncoding === "var") {
|
|
30
|
-
|
|
32
|
+
let c = colorHelper.getScale(dataset, values);
|
|
31
33
|
var dom = c.domain ? c.domain() : [0, 1],
|
|
32
34
|
dmin = Math.min(dom[0], dom[dom.length - 1]),
|
|
33
35
|
dmax = Math.max(dom[dom.length - 1], dom[0]);
|
|
34
|
-
|
|
36
|
+
let legendList = [];
|
|
35
37
|
for (var i = 0; i <= 100; i++) {
|
|
36
38
|
var color = c(dmin + i / 100 * (dmax - dmin));
|
|
37
39
|
//console.log(color.hex());
|