@haniffalab/cherita-react 0.2.0-dev.2024-02-14.4bca94c0 → 0.2.0-dev.2024-02-14.0bb7b79c

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.
Files changed (16) hide show
  1. package/dist/App.scss +128 -0
  2. package/dist/components/Offcanvas/index.js +111 -0
  3. package/dist/components/dotplot/Dotplot.js +172 -125
  4. package/dist/components/heatmap/Heatmap.js +38 -26
  5. package/dist/components/matrixplot/Matrixplot.js +60 -33
  6. package/dist/components/obs-list/ObsList.js +70 -40
  7. package/dist/components/obsm-list/ObsmList.js +17 -11
  8. package/dist/components/scatterplot/Legend.js +19 -13
  9. package/dist/components/scatterplot/Scatterplot.js +31 -22
  10. package/dist/components/scatterplot/Toolbox.js +39 -25
  11. package/dist/components/var-list/VarList.js +65 -49
  12. package/dist/components/violin/Violin.js +52 -29
  13. package/dist/context/DatasetContext.js +12 -8
  14. package/dist/index.js +32 -1
  15. package/dist/utils/LoadingSpinner.js +27 -21
  16. package/package.json +2 -2
package/dist/App.scss ADDED
@@ -0,0 +1,128 @@
1
+ // Theme CSS
2
+ .cherita-container {
3
+ margin: 40px auto;
4
+ background-color: #fff;
5
+ border-radius: 0.25rem;
6
+ box-shadow: 0 0.5em 1em 0.3em rgba(10, 10, 10, .15), 0 0 0 1px rgba(10, 10, 10, .02);
7
+ color: #4a4a4a;
8
+ max-width: 100%;
9
+ position: relative;
10
+ overflow: hidden;
11
+ }
12
+
13
+ .cherita-navbar {
14
+ position: absolute;
15
+ z-index: 10;
16
+ top: 20px;
17
+ right: 20px;
18
+ left: 20px;
19
+ border-radius: 0.25rem;
20
+ }
21
+
22
+ .cherita-container .cherita-navbar-item>.dropdown-menu {
23
+ height: var(--dropdown-height);
24
+ overflow-x: hidden;
25
+ overflow-y: scroll;
26
+ }
27
+
28
+ /* Scrollbar styling */
29
+
30
+ /* Works on Firefox */
31
+ .cherita-container * {
32
+ scrollbar-width: thin;
33
+ scrollbar-color: rgb(70, 70, 70) auto;
34
+ }
35
+
36
+ /* Works on Chrome, Edge, and Safari */
37
+ .cherita-container *::-webkit-scrollbar {
38
+ width: 7px;
39
+ }
40
+
41
+ .cherita-container *::-webkit-scrollbar-track {
42
+ background: #212529;
43
+ }
44
+
45
+ .cherita-container *::-webkit-scrollbar-thumb {
46
+ background-color: rgb(70, 70, 70);
47
+ }
48
+
49
+ /* End scrollbar styling*/
50
+
51
+ .cherita-container-plot {
52
+ margin-top: 76px;
53
+ padding: 20px;
54
+ position: relative;
55
+ min-height: 500px;
56
+ }
57
+
58
+ .cherita-container-scatterplot {
59
+ position: relative;
60
+ min-height: 500px;
61
+ }
62
+
63
+ .cherita-toolbox {
64
+ position: absolute;
65
+ z-index: 10;
66
+ bottom: 20px;
67
+ right: 20px;
68
+ }
69
+ .cherita-legend {
70
+ position: absolute;
71
+ z-index: 10;
72
+ bottom: 20px;
73
+ left: 20px;
74
+ width: 200px;
75
+ }
76
+ .grad-step {
77
+ display: inline-block;
78
+ height: 20px;
79
+ width: 1%;
80
+ }
81
+ .gradient {
82
+ width: 85%;
83
+ white-space: nowrap;
84
+ position: relative;
85
+ display: inline-block;
86
+ top: 4px;
87
+ padding-bottom: 15px;
88
+ }
89
+
90
+ .gradient .domain-min {
91
+ position: absolute;
92
+ left: 0;
93
+ font-size: 11px;
94
+ bottom: 3px;
95
+ }
96
+ .gradient .domain-med {
97
+ position: absolute;
98
+ right: 25%;
99
+ left: 25%;
100
+ text-align: center;
101
+ font-size: 11px;
102
+ bottom: 3px;
103
+ }
104
+ .gradient .domain-max {
105
+ position: absolute;
106
+ right: 0;
107
+ font-size: 11px;
108
+ bottom: 3px;
109
+ }
110
+
111
+ .cm-string {
112
+ padding: 0px 4px;
113
+ display: inline-block;
114
+ min-width: 13px;
115
+ min-height: 13px;
116
+ border-radius: 3px;
117
+ box-sizing: border-box;
118
+ position: relative;
119
+ vertical-align: middle;
120
+ margin-left: 2px;
121
+ margin-bottom: 2px;
122
+ position: relative;
123
+ top: 1px;
124
+ }
125
+ .cm-small {
126
+ height: 15px;
127
+ width: 15px;
128
+ }
package/dist/components/Offcanvas/index.js ADDED
@@ -0,0 +1,111 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.OffcanvasControls = OffcanvasControls;
7
+ exports.OffcanvasInfo = OffcanvasInfo;
8
+ exports.OffcanvasObs = OffcanvasObs;
9
+ exports.OffcanvasObsm = OffcanvasObsm;
10
+ exports.OffcanvasVars = OffcanvasVars;
11
+ var _react = require("react");
12
+ var _Offcanvas = _interopRequireDefault(require("react-bootstrap/Offcanvas"));
13
+ var _cheritaReact = require("@haniffalab/cherita-react");
14
+ var _jsxRuntime = require("react/jsx-runtime");
15
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
16
+ function OffcanvasObs(_ref) {
17
+ let {
18
+ show,
19
+ handleClose
20
+ } = _ref;
21
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Offcanvas.default, {
22
+ show: show,
23
+ onHide: handleClose,
24
+ scroll: true,
25
+ backdrop: false,
26
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Header, {
27
+ closeButton: true,
28
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Title, {
29
+ children: "Categories"
30
+ })
31
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Body, {
32
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_cheritaReact.ObsColsList, {})
33
+ })]
34
+ });
35
+ }
36
+ function OffcanvasObsm(_ref2) {
37
+ let {
38
+ show,
39
+ handleClose
40
+ } = _ref2;
41
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Offcanvas.default, {
42
+ show: show,
43
+ onHide: handleClose,
44
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Header, {
45
+ closeButton: true,
46
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Title, {
47
+ children: "Embedding space"
48
+ })
49
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Body, {
50
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_cheritaReact.ObsmKeysList, {})
51
+ })]
52
+ });
53
+ }
54
+ function OffcanvasVars(_ref3) {
55
+ let {
56
+ show,
57
+ handleClose,
58
+ mode = _cheritaReact.SELECTION_MODES.MULTIPLE
59
+ } = _ref3;
60
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Offcanvas.default, {
61
+ show: show,
62
+ onHide: handleClose,
63
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Header, {
64
+ closeButton: true,
65
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Title, {
66
+ children: "Features"
67
+ })
68
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Body, {
69
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_cheritaReact.VarNamesList, {
70
+ mode: mode
71
+ })
72
+ })]
73
+ });
74
+ }
75
+ function OffcanvasControls(_ref4) {
76
+ let {
77
+ show,
78
+ handleClose,
79
+ Controls
80
+ } = _ref4;
81
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Offcanvas.default, {
82
+ show: show,
83
+ onHide: handleClose,
84
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Header, {
85
+ closeButton: true,
86
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Title, {
87
+ children: "Controls"
88
+ })
89
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Body, {
90
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Controls, {})
91
+ })]
92
+ });
93
+ }
94
+ function OffcanvasInfo(_ref5) {
95
+ let {
96
+ show,
97
+ handleClose
98
+ } = _ref5;
99
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Offcanvas.default, {
100
+ show: show,
101
+ onHide: handleClose,
102
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Header, {
103
+ closeButton: true,
104
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Title, {
105
+ children: "Info"
106
+ })
107
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default.Body, {
108
+ children: "Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc."
109
+ })]
110
+ });
111
+ }
package/dist/components/dotplot/Dotplot.js CHANGED
@@ -14,6 +14,7 @@ var _constants = require("../../constants/constants");
14
14
  var _requests = require("../../utils/requests");
15
15
  var _reactBootstrap = require("react-bootstrap");
16
16
  var _LoadingSpinner = require("../../utils/LoadingSpinner");
17
+ var _jsxRuntime = require("react/jsx-runtime");
17
18
  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
19
  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
20
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -37,125 +38,165 @@ function DotplotControls() {
37
38
  }
38
39
  }));
39
40
  }, [dataset.controls.colorAxis.cmin, dataset.controls.colorAxis.cmax]);
40
- const colorScaleList = _constants.PLOTLY_COLORSCALES.map(item => /*#__PURE__*/_react.default.createElement(_Dropdown.default.Item, {
41
- key: item,
41
+ const colorScaleList = _constants.PLOTLY_COLORSCALES.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Item, {
42
42
  active: dataset.controls.colorScale === item,
43
43
  onClick: () => {
44
44
  dispatch({
45
45
  type: "set.controls.colorScale",
46
46
  colorScale: item
47
47
  });
48
- }
48
+ },
49
+ children: item
49
50
  }, item));
50
- const standardScaleList = _constants.DOTPLOT_STANDARDSCALES.map(item => /*#__PURE__*/_react.default.createElement(_Dropdown.default.Item, {
51
- key: item.value,
51
+ const standardScaleList = _constants.DOTPLOT_STANDARDSCALES.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Item, {
52
52
  active: dataset.controls.standardScale === item.value,
53
53
  onClick: () => {
54
54
  dispatch({
55
55
  type: "set.controls.standardScale",
56
56
  standardScale: item.value
57
57
  });
58
- }
59
- }, item.name));
60
- 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, {
61
- id: "dropdownColorscale",
62
- variant: "light"
63
- }, dataset.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, {
64
- id: "dropdownStandardScale",
65
- variant: "light"
66
- }, dataset.controls.standardScale), /*#__PURE__*/_react.default.createElement(_Dropdown.default.Menu, null, standardScaleList)))), /*#__PURE__*/_react.default.createElement(_reactBootstrap.ButtonGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ToggleButton, {
67
- id: "toggleMeanOnlyExpressed",
68
- type: "checkbox",
69
- variant: "outline-primary",
70
- checked: dataset.controls.meanOnlyExpressed,
71
- onChange: () => {
72
- dispatch({
73
- type: "set.controls.meanOnlyExpressed",
74
- meanOnlyExpressed: !dataset.controls.meanOnlyExpressed
75
- });
76
- }
77
- }, "Average only above cutoff")), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form, {
78
- onSubmit: e => {
79
- e.preventDefault();
80
- dispatch({
81
- type: "set.controls.expressionCutoff",
82
- expressionCutoff: parseFloat(controls.expressionCutoff)
83
- });
84
- }
85
- }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup.Text, null, "Expression Cutoff"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Control, {
86
- size: "sm",
87
- type: "number",
88
- step: "0.1",
89
- min: 0.0,
90
- value: controls.expressionCutoff,
91
- onChange: e => {
92
- setControls({
93
- ...controls,
94
- expressionCutoff: e.target.value
95
- });
96
- }
97
- }), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
98
- type: "submit",
99
- variant: "outline-primary"
100
- }, "Apply"))), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form, {
101
- onSubmit: e => {
102
- e.preventDefault();
103
- dispatch({
104
- type: "set.controls.colorAxis.crange",
105
- cmin: controls.colorAxis.cmin,
106
- cmax: controls.colorAxis.cmax
107
- });
108
- }
109
- }, /*#__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, {
110
- name: "scaleMin",
111
- size: "sm",
112
- type: "number",
113
- value: controls.colorAxis.cmin,
114
- step: 0.1,
115
- min: Math.min(dataset.controls.colorAxis.dmin, 0.0),
116
- max: dataset.controls.colorAxis.dmax,
117
- onChange: e => {
118
- setControls({
119
- ...controls,
120
- colorAxis: {
121
- ...controls.colorAxis,
122
- cmin: e.target.value
123
- }
124
- });
125
- }
126
- }), /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup.Text, null, "max"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Control, {
127
- name: "scaleMax",
128
- size: "sm",
129
- type: "number",
130
- value: controls.colorAxis.cmax,
131
- step: 0.1,
132
- min: controls.colorAxis.cmin,
133
- max: dataset.controls.colorAxis.dmax,
134
- onChange: e => {
135
- if (parseFloat(e.target.value) > dataset.controls.colorAxis.dmax) {
136
- e.target.value = dataset.controls.colorAxis.dmax.toFixed(1);
137
- }
138
- setControls({
139
- ...controls,
140
- colorAxis: {
141
- ...controls.colorAxis,
142
- cmax: e.target.value
143
- }
144
- });
145
- }
146
- }), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
147
- type: "submit",
148
- variant: "outline-primary"
149
- }, "Apply"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
150
- variant: "outline-primary",
151
- onClick: () => {
152
- dispatch({
153
- type: "set.controls.colorAxis.crange",
154
- cmin: dataset.controls.colorAxis.dmin,
155
- cmax: dataset.controls.colorAxis.dmax
156
- });
157
- }
158
- }, "Autoscale"))));
58
+ },
59
+ children: item.name
60
+ }, item.value));
61
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.ButtonToolbar, {
62
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ButtonGroup, {
63
+ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Dropdown.default, {
64
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Toggle, {
65
+ id: "dropdownColorscale",
66
+ variant: "light",
67
+ children: dataset.controls.colorScale
68
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Menu, {
69
+ children: colorScaleList
70
+ })]
71
+ })
72
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ButtonGroup, {
73
+ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.InputGroup, {
74
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.InputGroup.Text, {
75
+ children: "Standard scale"
76
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Dropdown.default, {
77
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Toggle, {
78
+ id: "dropdownStandardScale",
79
+ variant: "light",
80
+ children: dataset.controls.standardScale
81
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Menu, {
82
+ children: standardScaleList
83
+ })]
84
+ })]
85
+ })
86
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ButtonGroup, {
87
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ToggleButton, {
88
+ id: "toggleMeanOnlyExpressed",
89
+ type: "checkbox",
90
+ variant: "outline-primary",
91
+ checked: dataset.controls.meanOnlyExpressed,
92
+ onChange: () => {
93
+ dispatch({
94
+ type: "set.controls.meanOnlyExpressed",
95
+ meanOnlyExpressed: !dataset.controls.meanOnlyExpressed
96
+ });
97
+ },
98
+ children: "Average only above cutoff"
99
+ })
100
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form, {
101
+ onSubmit: e => {
102
+ e.preventDefault();
103
+ dispatch({
104
+ type: "set.controls.expressionCutoff",
105
+ expressionCutoff: parseFloat(controls.expressionCutoff)
106
+ });
107
+ },
108
+ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.InputGroup, {
109
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.InputGroup.Text, {
110
+ children: "Expression Cutoff"
111
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form.Control, {
112
+ size: "sm",
113
+ type: "number",
114
+ step: "0.1",
115
+ min: 0.0,
116
+ value: controls.expressionCutoff,
117
+ onChange: e => {
118
+ setControls({
119
+ ...controls,
120
+ expressionCutoff: e.target.value
121
+ });
122
+ }
123
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
124
+ type: "submit",
125
+ variant: "outline-primary",
126
+ children: "Apply"
127
+ })]
128
+ })
129
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form, {
130
+ onSubmit: e => {
131
+ e.preventDefault();
132
+ dispatch({
133
+ type: "set.controls.colorAxis.crange",
134
+ cmin: controls.colorAxis.cmin,
135
+ cmax: controls.colorAxis.cmax
136
+ });
137
+ },
138
+ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.InputGroup, {
139
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.InputGroup.Text, {
140
+ children: "Colorscale"
141
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.InputGroup.Text, {
142
+ children: "min"
143
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form.Control, {
144
+ name: "scaleMin",
145
+ size: "sm",
146
+ type: "number",
147
+ value: controls.colorAxis.cmin,
148
+ step: 0.1,
149
+ min: Math.min(dataset.controls.colorAxis.dmin, 0.0),
150
+ max: dataset.controls.colorAxis.dmax,
151
+ onChange: e => {
152
+ setControls({
153
+ ...controls,
154
+ colorAxis: {
155
+ ...controls.colorAxis,
156
+ cmin: e.target.value
157
+ }
158
+ });
159
+ }
160
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.InputGroup.Text, {
161
+ children: "max"
162
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form.Control, {
163
+ name: "scaleMax",
164
+ size: "sm",
165
+ type: "number",
166
+ value: controls.colorAxis.cmax,
167
+ step: 0.1,
168
+ min: controls.colorAxis.cmin,
169
+ max: dataset.controls.colorAxis.dmax,
170
+ onChange: e => {
171
+ if (parseFloat(e.target.value) > dataset.controls.colorAxis.dmax) {
172
+ e.target.value = dataset.controls.colorAxis.dmax.toFixed(1);
173
+ }
174
+ setControls({
175
+ ...controls,
176
+ colorAxis: {
177
+ ...controls.colorAxis,
178
+ cmax: e.target.value
179
+ }
180
+ });
181
+ }
182
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
183
+ type: "submit",
184
+ variant: "outline-primary",
185
+ children: "Apply"
186
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
187
+ variant: "outline-primary",
188
+ onClick: () => {
189
+ dispatch({
190
+ type: "set.controls.colorAxis.crange",
191
+ cmin: dataset.controls.colorAxis.dmin,
192
+ cmax: dataset.controls.colorAxis.dmax
193
+ });
194
+ },
195
+ children: "Autoscale"
196
+ })]
197
+ })
198
+ })]
199
+ });
159
200
  }
160
201
  function Dotplot() {
161
202
  const ENDPOINT = "dotplot";
@@ -245,26 +286,32 @@ function Dotplot() {
245
286
  }, [dataset.controls.colorAxis.cmin, dataset.controls.colorAxis.cmax]);
246
287
  if (!serverError) {
247
288
  if (hasSelections) {
248
- return /*#__PURE__*/_react.default.createElement("div", {
249
- className: "cherita-dotplot position-relative"
250
- }, isPending && /*#__PURE__*/_react.default.createElement(_LoadingSpinner.LoadingSpinner, null), /*#__PURE__*/_react.default.createElement(_reactPlotly.default, {
251
- data: data,
252
- layout: layout,
253
- useResizeHandler: true,
254
- style: {
255
- maxWidth: "100%",
256
- maxHeight: "100%"
257
- }
258
- }));
289
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
290
+ className: "cherita-dotplot position-relative",
291
+ children: [isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingSpinner.LoadingSpinner, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactPlotly.default, {
292
+ data: data,
293
+ layout: layout,
294
+ useResizeHandler: true,
295
+ style: {
296
+ maxWidth: "100%",
297
+ maxHeight: "100%"
298
+ }
299
+ })]
300
+ });
259
301
  }
260
- return /*#__PURE__*/_react.default.createElement("div", {
261
- className: "cherita-dotplot"
262
- }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Alert, {
263
- variant: "light"
264
- }, "Select features and a category"));
302
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
303
+ className: "cherita-dotplot",
304
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Alert, {
305
+ variant: "light",
306
+ children: "Select features and a category"
307
+ })
308
+ });
265
309
  } else {
266
- return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Alert, {
267
- variant: "danger"
268
- }, serverError.message));
310
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
311
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Alert, {
312
+ variant: "danger",
313
+ children: serverError.message
314
+ })
315
+ });
269
316
  }
270
317
  }
package/dist/components/heatmap/Heatmap.js CHANGED
@@ -13,26 +13,32 @@ var _DatasetContext = require("../../context/DatasetContext");
13
13
  var _constants = require("../../constants/constants");
14
14
  var _requests = require("../../utils/requests");
15
15
  var _LoadingSpinner = require("../../utils/LoadingSpinner");
16
+ var _jsxRuntime = require("react/jsx-runtime");
16
17
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
18
  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
19
  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
20
  function HeatmapControls() {
20
21
  const dataset = (0, _DatasetContext.useDataset)();
21
22
  const dispatch = (0, _DatasetContext.useDatasetDispatch)();
22
- const colormapList = _constants.PLOTLY_COLORSCALES.map(item => /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
23
- key: item,
23
+ const colormapList = _constants.PLOTLY_COLORSCALES.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Item, {
24
24
  active: dataset.controls.colorScale === item,
25
25
  onClick: () => {
26
26
  dispatch({
27
27
  type: "set.controls.colorScale",
28
28
  colorScale: item
29
29
  });
30
- }
30
+ },
31
+ children: item
31
32
  }, item));
32
- return /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Toggle, {
33
- id: "dropdownColorscale",
34
- variant: "light"
35
- }, dataset.controls.colorScale), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Menu, null, colormapList));
33
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Dropdown, {
34
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Toggle, {
35
+ id: "dropdownColorscale",
36
+ variant: "light",
37
+ children: dataset.controls.colorScale
38
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Menu, {
39
+ children: colormapList
40
+ })]
41
+ });
36
42
  }
37
43
  function Heatmap() {
38
44
  const ENDPOINT = "heatmap";
@@ -92,26 +98,32 @@ function Heatmap() {
92
98
  }, [dataset.controls.colorScale, updateColorscale]);
93
99
  if (!serverError) {
94
100
  if (hasSelections) {
95
- return /*#__PURE__*/_react.default.createElement("div", {
96
- className: "cherita-heatmap position-relative"
97
- }, isPending && /*#__PURE__*/_react.default.createElement(_LoadingSpinner.LoadingSpinner, null), /*#__PURE__*/_react.default.createElement(_reactPlotly.default, {
98
- data: data,
99
- layout: layout,
100
- useResizeHandler: true,
101
- style: {
102
- maxWidth: "100%",
103
- maxHeight: "100%"
104
- }
105
- }));
101
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
102
+ className: "cherita-heatmap position-relative",
103
+ children: [isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingSpinner.LoadingSpinner, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactPlotly.default, {
104
+ data: data,
105
+ layout: layout,
106
+ useResizeHandler: true,
107
+ style: {
108
+ maxWidth: "100%",
109
+ maxHeight: "100%"
110
+ }
111
+ })]
112
+ });
106
113
  }
107
- return /*#__PURE__*/_react.default.createElement("div", {
108
- className: "cherita-heatmap"
109
- }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Alert, {
110
- variant: "light"
111
- }, "Select features and a category"));
114
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
115
+ className: "cherita-heatmap",
116
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Alert, {
117
+ variant: "light",
118
+ children: "Select features and a category"
119
+ })
120
+ });
112
121
  } else {
113
- return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Alert, {
114
- variant: "danger"
115
- }, serverError.message));
122
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
123
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Alert, {
124
+ variant: "danger",
125
+ children: serverError.message
126
+ })
127
+ });
116
128
  }
117
129
  }