@haniffalab/cherita-react 1.3.0 → 1.4.0-dev.2025-06-09.7cd38232
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/assets/images/plots/dotplot.svg +152 -0
- package/dist/assets/images/plots/heatmap.svg +193 -0
- package/dist/assets/images/plots/matrixplot.svg +275 -0
- package/dist/assets/images/plots/scatterplot.svg +198 -0
- package/dist/assets/images/plots/violin.svg +50 -0
- package/dist/cjs/components/dotplot/Dotplot.js +35 -5
- package/dist/cjs/components/full-page/FullPage.js +109 -50
- package/dist/cjs/components/full-page/PlotTypeSelector.js +57 -0
- package/dist/cjs/components/heatmap/Heatmap.js +35 -5
- package/dist/cjs/components/matrixplot/Matrixplot.js +35 -5
- package/dist/cjs/components/obs-list/ObsItem.js +49 -22
- package/dist/cjs/components/obs-list/ObsList.js +9 -5
- package/dist/cjs/components/scatterplot/Scatterplot.js +115 -95
- package/dist/cjs/components/scatterplot/SpatialControls.js +3 -3
- package/dist/cjs/components/search-bar/SearchInfo.js +3 -35
- package/dist/cjs/components/toolbar/Toolbar.js +102 -0
- package/dist/cjs/components/var-list/VarList.js +11 -3
- package/dist/cjs/components/violin/Violin.js +37 -6
- package/dist/cjs/constants/constants.js +14 -2
- package/dist/cjs/context/DatasetContext.js +5 -3
- package/dist/cjs/context/SettingsContext.js +77 -46
- package/dist/cjs/helpers/map-helper.js +2 -1
- package/dist/cjs/index.js +15 -21
- package/dist/css/cherita.css +76 -23
- package/dist/css/cherita.css.map +1 -1
- package/dist/esm/components/dotplot/Dotplot.js +36 -6
- package/dist/esm/components/full-page/FullPage.js +111 -50
- package/dist/esm/components/full-page/PlotTypeSelector.js +50 -0
- package/dist/esm/components/heatmap/Heatmap.js +36 -6
- package/dist/esm/components/matrixplot/Matrixplot.js +36 -6
- package/dist/esm/components/obs-list/ObsItem.js +49 -22
- package/dist/esm/components/obs-list/ObsList.js +9 -5
- package/dist/esm/components/scatterplot/Scatterplot.js +115 -95
- package/dist/esm/components/scatterplot/SpatialControls.js +3 -3
- package/dist/esm/components/search-bar/SearchInfo.js +1 -33
- package/dist/esm/components/toolbar/Toolbar.js +91 -0
- package/dist/esm/components/var-list/VarList.js +10 -5
- package/dist/esm/components/violin/Violin.js +39 -8
- package/dist/esm/constants/constants.js +13 -1
- package/dist/esm/context/DatasetContext.js +5 -3
- package/dist/esm/context/SettingsContext.js +77 -46
- package/dist/esm/helpers/map-helper.js +2 -1
- package/dist/esm/index.js +4 -4
- package/package.json +7 -4
- package/scss/cherita.scss +0 -1
- package/scss/components/layouts.scss +69 -1
- package/scss/components/plotly.scss +19 -14
- package/dist/cjs/components/full-page/FullPagePseudospatial.js +0 -157
- package/dist/esm/components/full-page/FullPagePseudospatial.js +0 -149
|
@@ -1,149 +0,0 @@
|
|
|
1
|
-
const _excluded = ["children", "varMode", "searchDiseases"];
|
|
2
|
-
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); }
|
|
3
|
-
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; }
|
|
4
|
-
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; }
|
|
5
|
-
import React, { useEffect, useRef, useState } from "react";
|
|
6
|
-
import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
|
|
7
|
-
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
8
|
-
import { Button, Card, Container, Modal } from "react-bootstrap";
|
|
9
|
-
import { SELECTION_MODES } from "../../constants/constants";
|
|
10
|
-
import { DatasetProvider } from "../../context/DatasetContext";
|
|
11
|
-
import { ObsColsList } from "../obs-list/ObsList";
|
|
12
|
-
import { OffcanvasControls, OffcanvasObs, OffcanvasObsm, OffcanvasVars } from "../offcanvas";
|
|
13
|
-
import { Pseudospatial } from "../pseudospatial/Pseudospatial";
|
|
14
|
-
import { PseudospatialToolbar } from "../pseudospatial/PseudospatialToolbar";
|
|
15
|
-
import { Scatterplot } from "../scatterplot/Scatterplot";
|
|
16
|
-
import { ScatterplotControls } from "../scatterplot/ScatterplotControls";
|
|
17
|
-
import { SearchBar } from "../search-bar/SearchBar";
|
|
18
|
-
import { VarNamesList } from "../var-list/VarList";
|
|
19
|
-
export function FullPage(_ref) {
|
|
20
|
-
let {
|
|
21
|
-
children,
|
|
22
|
-
varMode = SELECTION_MODES.SINGLE,
|
|
23
|
-
searchDiseases = false
|
|
24
|
-
} = _ref,
|
|
25
|
-
props = _objectWithoutProperties(_ref, _excluded);
|
|
26
|
-
const appRef = useRef();
|
|
27
|
-
const [appDimensions, setAppDimensions] = useState({
|
|
28
|
-
width: 0,
|
|
29
|
-
height: 0
|
|
30
|
-
});
|
|
31
|
-
const [showObs, setShowObs] = useState(false);
|
|
32
|
-
const [showObsm, setShowObsm] = useState(false);
|
|
33
|
-
const [showVars, setShowVars] = useState(false);
|
|
34
|
-
const [showControls, setShowControls] = useState(false);
|
|
35
|
-
const [showPseudospatialControls, setShowPseudospatialControls] = useState(false);
|
|
36
|
-
const [showModal, setShowModal] = useState(false);
|
|
37
|
-
const [pseudospatialPlotType, setpseudospatialPlotType] = useState(null);
|
|
38
|
-
useEffect(() => {
|
|
39
|
-
const updateDimensions = () => {
|
|
40
|
-
if (appRef.current) {
|
|
41
|
-
// Get the distance from the top of the page to the target element
|
|
42
|
-
const rect = appRef.current.getBoundingClientRect();
|
|
43
|
-
const distanceFromTop = rect.top + window.scrollY;
|
|
44
|
-
|
|
45
|
-
// Calculate the available height for the Cherita app
|
|
46
|
-
const availableHeight = window.innerHeight - distanceFromTop;
|
|
47
|
-
|
|
48
|
-
// Update the dimensions to fit the viewport minus the navbar height
|
|
49
|
-
setAppDimensions({
|
|
50
|
-
width: appRef.current.offsetWidth,
|
|
51
|
-
height: availableHeight
|
|
52
|
-
});
|
|
53
|
-
}
|
|
54
|
-
};
|
|
55
|
-
window.addEventListener("resize", updateDimensions);
|
|
56
|
-
updateDimensions(); // Initial update
|
|
57
|
-
return () => window.removeEventListener("resize", updateDimensions);
|
|
58
|
-
}, []);
|
|
59
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
60
|
-
ref: appRef,
|
|
61
|
-
className: "cherita-app",
|
|
62
|
-
style: {
|
|
63
|
-
height: appDimensions.height
|
|
64
|
-
}
|
|
65
|
-
}, /*#__PURE__*/React.createElement(DatasetProvider, props, /*#__PURE__*/React.createElement(Container, {
|
|
66
|
-
fluid: true,
|
|
67
|
-
className: "d-flex g-0",
|
|
68
|
-
style: {
|
|
69
|
-
height: appDimensions.height
|
|
70
|
-
}
|
|
71
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
72
|
-
className: "cherita-app-obs modern-scrollbars border-end h-100"
|
|
73
|
-
}, /*#__PURE__*/React.createElement(ObsColsList, props)), /*#__PURE__*/React.createElement("div", {
|
|
74
|
-
className: "cherita-app-canvas flex-grow-1"
|
|
75
|
-
}, children({
|
|
76
|
-
setShowObs,
|
|
77
|
-
setShowVars
|
|
78
|
-
})), /*#__PURE__*/React.createElement("div", {
|
|
79
|
-
className: "cherita-app-sidebar p-3"
|
|
80
|
-
}, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(Card.Header, {
|
|
81
|
-
className: "d-flex justify-content-evenly align-items-center"
|
|
82
|
-
}, /*#__PURE__*/React.createElement(Button, {
|
|
83
|
-
variant: "link",
|
|
84
|
-
onClick: () => setShowModal(true)
|
|
85
|
-
}, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
86
|
-
icon: faArrowUpRightFromSquare
|
|
87
|
-
}))), /*#__PURE__*/React.createElement(Card.Body, {
|
|
88
|
-
className: "d-flex flex-column p-0"
|
|
89
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
90
|
-
className: "sidebar-pseudospatial"
|
|
91
|
-
}, /*#__PURE__*/React.createElement(Pseudospatial, {
|
|
92
|
-
className: "sidebar-pseudospatial",
|
|
93
|
-
plotType: pseudospatialPlotType,
|
|
94
|
-
setPlotType: setpseudospatialPlotType,
|
|
95
|
-
setShowControls: setShowPseudospatialControls
|
|
96
|
-
})), /*#__PURE__*/React.createElement("div", {
|
|
97
|
-
className: "sidebar-features modern-scrollbars"
|
|
98
|
-
}, /*#__PURE__*/React.createElement(SearchBar, {
|
|
99
|
-
searchDiseases: searchDiseases,
|
|
100
|
-
searchVar: true
|
|
101
|
-
}), /*#__PURE__*/React.createElement(VarNamesList, {
|
|
102
|
-
mode: varMode
|
|
103
|
-
})))))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Modal, {
|
|
104
|
-
show: showModal,
|
|
105
|
-
onHide: () => setShowModal(false),
|
|
106
|
-
centered: true
|
|
107
|
-
}, /*#__PURE__*/React.createElement(Modal.Header, {
|
|
108
|
-
closeButton: true
|
|
109
|
-
}), /*#__PURE__*/React.createElement(Modal.Body, null, /*#__PURE__*/React.createElement(Pseudospatial, {
|
|
110
|
-
plotType: pseudospatialPlotType,
|
|
111
|
-
setPlotType: setpseudospatialPlotType,
|
|
112
|
-
setShowControls: setShowPseudospatialControls,
|
|
113
|
-
height: 500
|
|
114
|
-
}))), /*#__PURE__*/React.createElement(OffcanvasObs, {
|
|
115
|
-
show: showObs,
|
|
116
|
-
handleClose: () => setShowObs(false)
|
|
117
|
-
}), /*#__PURE__*/React.createElement(OffcanvasVars, {
|
|
118
|
-
show: showVars,
|
|
119
|
-
handleClose: () => setShowVars(false),
|
|
120
|
-
mode: varMode
|
|
121
|
-
}), /*#__PURE__*/React.createElement(OffcanvasControls, {
|
|
122
|
-
show: showControls,
|
|
123
|
-
handleClose: () => setShowControls(false),
|
|
124
|
-
Controls: ScatterplotControls
|
|
125
|
-
}), /*#__PURE__*/React.createElement(OffcanvasControls, {
|
|
126
|
-
show: showPseudospatialControls,
|
|
127
|
-
handleClose: () => setShowPseudospatialControls(false),
|
|
128
|
-
Controls: PseudospatialToolbar,
|
|
129
|
-
plotType: pseudospatialPlotType
|
|
130
|
-
}), /*#__PURE__*/React.createElement(OffcanvasObsm, {
|
|
131
|
-
show: showObsm,
|
|
132
|
-
handleClose: () => setShowObsm(false)
|
|
133
|
-
}))));
|
|
134
|
-
}
|
|
135
|
-
export function FullPagePseudospatial(props) {
|
|
136
|
-
return /*#__PURE__*/React.createElement(FullPage, _extends({}, props, {
|
|
137
|
-
varMode: SELECTION_MODES.SINGLE
|
|
138
|
-
}), _ref2 => {
|
|
139
|
-
let {
|
|
140
|
-
setShowObs,
|
|
141
|
-
setShowVars
|
|
142
|
-
} = _ref2;
|
|
143
|
-
return /*#__PURE__*/React.createElement(Scatterplot, {
|
|
144
|
-
setShowObs: setShowObs,
|
|
145
|
-
setShowVars: setShowVars,
|
|
146
|
-
isFullscreen: true
|
|
147
|
-
});
|
|
148
|
-
});
|
|
149
|
-
}
|