@haniffalab/cherita-react 0.2.0-dev.2024-02-14.667fdce7 → 0.2.0-dev.2024-03-27.a8e5c1a7
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/App.scss +128 -0
- package/dist/components/Offcanvas/index.js +111 -0
- package/dist/components/obs-list/ObsList.js +2 -2
- package/dist/components/scatterplot/Legend.js +2 -2
- package/dist/components/scatterplot/Scatterplot.js +10 -10
- package/dist/index.js +32 -1
- package/package.json +2 -2
- /package/dist/helpers/{color.js → color-helper.js} +0 -0
- /package/dist/helpers/{map.js → map-helper.js} +0 -0
- /package/dist/helpers/{zarr.js → zarr-helper.js} +0 -0
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
|
+
}
|
|
@@ -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
|
+
}
|
|
@@ -11,7 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
11
11
|
var _DatasetContext = require("../../context/DatasetContext");
|
|
12
12
|
var _requests = require("../../utils/requests");
|
|
13
13
|
var _chromaJs = _interopRequireDefault(require("chroma-js"));
|
|
14
|
-
var
|
|
14
|
+
var _colorHelper = require("../../helpers/color-helper");
|
|
15
15
|
var _LoadingSpinner = require("../../utils/LoadingSpinner");
|
|
16
16
|
var _reactBootstrap = require("react-bootstrap");
|
|
17
17
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
@@ -58,7 +58,7 @@ function ObsColsList() {
|
|
|
58
58
|
const [params, setParams] = (0, _react.useState)({
|
|
59
59
|
url: dataset.url
|
|
60
60
|
});
|
|
61
|
-
const colorHelper = new
|
|
61
|
+
const colorHelper = new _colorHelper.ColorHelper();
|
|
62
62
|
(0, _react.useEffect)(() => {
|
|
63
63
|
setParams(p => {
|
|
64
64
|
return {
|
|
@@ -9,7 +9,7 @@ var _Dropdown = _interopRequireDefault(require("react-bootstrap/Dropdown"));
|
|
|
9
9
|
var _react = require("react");
|
|
10
10
|
var _DatasetContext = require("../../context/DatasetContext");
|
|
11
11
|
var _lodash = _interopRequireDefault(require("lodash"));
|
|
12
|
-
var
|
|
12
|
+
var _colorHelper = require("../../helpers/color-helper");
|
|
13
13
|
var _OverlayTrigger = _interopRequireDefault(require("react-bootstrap/OverlayTrigger"));
|
|
14
14
|
var _layers = require("@nebula.gl/layers");
|
|
15
15
|
var _chromaJs = _interopRequireDefault(require("chroma-js"));
|
|
@@ -28,7 +28,7 @@ function Legend(_ref) {
|
|
|
28
28
|
values
|
|
29
29
|
} = _ref;
|
|
30
30
|
const dataset = (0, _DatasetContext.useDataset)();
|
|
31
|
-
const colorHelper = new
|
|
31
|
+
const colorHelper = new _colorHelper.ColorHelper();
|
|
32
32
|
if (dataset.colorEncoding === "var") {
|
|
33
33
|
let c = colorHelper.getScale(dataset, values);
|
|
34
34
|
var dom = c.domain ? c.domain() : [0, 1],
|
|
@@ -18,9 +18,9 @@ var _Toolbox = require("./Toolbox");
|
|
|
18
18
|
var _Legend = require("./Legend");
|
|
19
19
|
var _constants = require("../../constants/constants");
|
|
20
20
|
var _DatasetContext = require("../../context/DatasetContext");
|
|
21
|
-
var
|
|
22
|
-
var
|
|
23
|
-
var
|
|
21
|
+
var _mapHelper = require("../../helpers/map-helper");
|
|
22
|
+
var _zarrHelper = require("../../helpers/zarr-helper");
|
|
23
|
+
var _colorHelper = require("../../helpers/color-helper");
|
|
24
24
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
25
25
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
26
26
|
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); }
|
|
@@ -75,7 +75,7 @@ function Scatterplot(_ref) {
|
|
|
75
75
|
});
|
|
76
76
|
(0, _react.useEffect)(() => {
|
|
77
77
|
setData(function (prevState, props) {
|
|
78
|
-
const colorHelper = new
|
|
78
|
+
const colorHelper = new _colorHelper.ColorHelper();
|
|
79
79
|
let scale = dataset.colorEncoding === "var" ? colorHelper.getScale(dataset, values) : null;
|
|
80
80
|
var data = position.map(function (e, i) {
|
|
81
81
|
return {
|
|
@@ -90,11 +90,11 @@ function Scatterplot(_ref) {
|
|
|
90
90
|
}, [position, values, dataset.controls.colorScale]);
|
|
91
91
|
(0, _react.useEffect)(() => {
|
|
92
92
|
if (dataset.selectedObsm) {
|
|
93
|
-
const helper = new
|
|
94
|
-
const zarrHelper = new
|
|
93
|
+
const helper = new _mapHelper.MapHelper();
|
|
94
|
+
const zarrHelper = new _zarrHelper.ZarrHelper();
|
|
95
95
|
const fetchObsm = async () => {
|
|
96
96
|
const z = await zarrHelper.open(dataset.url, "obsm/" + dataset.selectedObsm);
|
|
97
|
-
await z.get(null,
|
|
97
|
+
await z.get(null, _zarrHelper.GET_OPTIONS).then(result => {
|
|
98
98
|
const {
|
|
99
99
|
latitude,
|
|
100
100
|
longitude,
|
|
@@ -116,10 +116,10 @@ function Scatterplot(_ref) {
|
|
|
116
116
|
}, [dataset.url, dataset.selectedObsm]);
|
|
117
117
|
(0, _react.useEffect)(() => {
|
|
118
118
|
if (dataset.selectedVar) {
|
|
119
|
-
const zarrHelper = new
|
|
119
|
+
const zarrHelper = new _zarrHelper.ZarrHelper();
|
|
120
120
|
const fetchData = async () => {
|
|
121
121
|
const z = await zarrHelper.open(dataset.url, "X");
|
|
122
|
-
await z.get([null, dataset.selectedVar.matrix_index],
|
|
122
|
+
await z.get([null, dataset.selectedVar.matrix_index], _zarrHelper.GET_OPTIONS).then(result => {
|
|
123
123
|
setValues(result.data);
|
|
124
124
|
dispatch({
|
|
125
125
|
type: "set.colorEncoding",
|
|
@@ -132,7 +132,7 @@ function Scatterplot(_ref) {
|
|
|
132
132
|
}, [dataset.url, dataset.selectedVar]);
|
|
133
133
|
(0, _react.useEffect)(() => {
|
|
134
134
|
if (dataset.selectedObs) {
|
|
135
|
-
const zarrHelper = new
|
|
135
|
+
const zarrHelper = new _zarrHelper.ZarrHelper();
|
|
136
136
|
const fetchData = async () => {
|
|
137
137
|
const z = await zarrHelper.open(dataset.url, "obs/" + dataset.selectedObs.name + "/codes");
|
|
138
138
|
await z.get().then(result => {
|
package/dist/index.js
CHANGED
|
@@ -57,6 +57,36 @@ Object.defineProperty(exports, "ObsmKeysList", {
|
|
|
57
57
|
return _ObsmList.ObsmKeysList;
|
|
58
58
|
}
|
|
59
59
|
});
|
|
60
|
+
Object.defineProperty(exports, "OffcanvasControls", {
|
|
61
|
+
enumerable: true,
|
|
62
|
+
get: function () {
|
|
63
|
+
return _Offcanvas.OffcanvasControls;
|
|
64
|
+
}
|
|
65
|
+
});
|
|
66
|
+
Object.defineProperty(exports, "OffcanvasInfo", {
|
|
67
|
+
enumerable: true,
|
|
68
|
+
get: function () {
|
|
69
|
+
return _Offcanvas.OffcanvasInfo;
|
|
70
|
+
}
|
|
71
|
+
});
|
|
72
|
+
Object.defineProperty(exports, "OffcanvasObs", {
|
|
73
|
+
enumerable: true,
|
|
74
|
+
get: function () {
|
|
75
|
+
return _Offcanvas.OffcanvasObs;
|
|
76
|
+
}
|
|
77
|
+
});
|
|
78
|
+
Object.defineProperty(exports, "OffcanvasObsm", {
|
|
79
|
+
enumerable: true,
|
|
80
|
+
get: function () {
|
|
81
|
+
return _Offcanvas.OffcanvasObsm;
|
|
82
|
+
}
|
|
83
|
+
});
|
|
84
|
+
Object.defineProperty(exports, "OffcanvasVars", {
|
|
85
|
+
enumerable: true,
|
|
86
|
+
get: function () {
|
|
87
|
+
return _Offcanvas.OffcanvasVars;
|
|
88
|
+
}
|
|
89
|
+
});
|
|
60
90
|
Object.defineProperty(exports, "PLOTLY_COLORSCALES", {
|
|
61
91
|
enumerable: true,
|
|
62
92
|
get: function () {
|
|
@@ -114,4 +144,5 @@ var _Scatterplot = require("./components/scatterplot/Scatterplot");
|
|
|
114
144
|
var _Matrixplot = require("./components/matrixplot/Matrixplot");
|
|
115
145
|
var _Violin = require("./components/violin/Violin");
|
|
116
146
|
var _constants = require("./constants/constants");
|
|
117
|
-
var _DatasetContext = require("./context/DatasetContext");
|
|
147
|
+
var _DatasetContext = require("./context/DatasetContext");
|
|
148
|
+
var _Offcanvas = require("./components/Offcanvas");
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@haniffalab/cherita-react",
|
|
3
|
-
"version": "0.2.0-dev.2024-
|
|
3
|
+
"version": "0.2.0-dev.2024-03-27.a8e5c1a7",
|
|
4
4
|
"author": "",
|
|
5
5
|
"license": "",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -78,5 +78,5 @@
|
|
|
78
78
|
"url": "https://github.com/haniffalab/cherita-react/issues"
|
|
79
79
|
},
|
|
80
80
|
"homepage": "https://github.com/haniffalab/cherita-react#readme",
|
|
81
|
-
"prereleaseSha": "
|
|
81
|
+
"prereleaseSha": "a8e5c1a7b55fec28a4e93515943b1e13e7e212bd"
|
|
82
82
|
}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|