@haniffalab/cherita-react 0.2.0-dev.2024-05-21.ca7d726c → 0.2.0-dev.2024-05-22.5ce64346

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 (8) hide show
  1. package/dist/App.scss +25 -4
  2. package/dist/components/obs-list/ObsList.js +64 -24
  3. package/dist/components/obsm-list/ObsmList.js +26 -10
  4. package/dist/components/scatterplot/Scatterplot.js +6 -0
  5. package/dist/components/scatterplot/SpatialControls.js +121 -0
  6. package/dist/components/scatterplot/Toolbox.js +10 -60
  7. package/dist/components/var-list/VarList.js +66 -31
  8. package/package.json +2 -2
package/dist/App.scss CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
  .cherita-navbar {
16
16
  position: absolute;
17
- z-index: 10;
17
+ z-index: 11;
18
18
  top: 20px;
19
19
  right: 20px;
20
20
  left: 20px;
@@ -59,20 +59,41 @@
59
59
 
60
60
  .cherita-container-scatterplot {
61
61
  position: relative;
62
- min-height: 500px;
62
+ min-height: 300px;
63
+ height: 100%;
63
64
  }
64
65
 
65
66
  .cherita-toolbox {
66
67
  position: absolute;
67
68
  z-index: 10;
68
69
  bottom: 20px;
69
- right: 20px;
70
+ left: 20px;
71
+ }
72
+ .cherita-spatial-controls {
73
+ position: absolute;
74
+ z-index: 10;
75
+ top: 20px;
76
+ left: 20px;
70
77
  }
78
+
79
+ @include media-breakpoint-down(xl) {
80
+ .cherita-spatial-controls {
81
+ top: 100px;
82
+ }
83
+ .cherita-toolbox {
84
+ right: 20px;
85
+ left: auto;
86
+ }
87
+ }
88
+
89
+
90
+
91
+
71
92
  .cherita-legend {
72
93
  position: absolute;
73
94
  z-index: 10;
74
95
  bottom: 20px;
75
- left: 20px;
96
+ right: 20px;
76
97
  width: 200px;
77
98
  }
78
99
 
package/dist/components/obs-list/ObsList.js CHANGED
@@ -13,6 +13,8 @@ var _requests = require("../../utils/requests");
13
13
  var _chromaJs = _interopRequireDefault(require("chroma-js"));
14
14
  var _LoadingSpinner = require("../../utils/LoadingSpinner");
15
15
  var _reactBootstrap = require("react-bootstrap");
16
+ var _reactFontawesome = require("@fortawesome/react-fontawesome");
17
+ var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
16
18
  var _jsxRuntime = require("react/jsx-runtime");
17
19
  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
20
  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; }
@@ -139,22 +141,71 @@ function ObsColsList() {
139
141
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Accordion.Header, {
140
142
  children: item.name
141
143
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Accordion.Body, {
142
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup, {
143
- variant: "flush",
144
- children: item.values.map((value, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup.Item, {
144
+ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.ListGroup, {
145
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup.Item, {
145
146
  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
146
- className: "d-flex justify-content-between",
147
+ class: "d-flex",
147
148
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
148
- className: "text-wrap text-break",
149
- children: value
150
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
151
- className: "cm-string cm-color",
152
- style: {
153
- backgroundColor: "rgb(".concat(obs[item.name]["state"][index]["color"], ")")
154
- }
149
+ class: "flex-grow-1",
150
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form.Check, {
151
+ // prettier-ignore
152
+ type: "switch",
153
+ id: "custom-switch",
154
+ label: "Toggle all"
155
+ })
156
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
157
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ButtonGroup, {
158
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
159
+ variant: "secondary",
160
+ size: "sm",
161
+ onClick: key => {
162
+ if (key != null) {
163
+ dispatch({
164
+ type: "obsSelected",
165
+ obs: obsColsList.find(obs => obs.name === item.name)
166
+ });
167
+ dispatch({
168
+ type: "set.colorEncoding",
169
+ value: "obs"
170
+ });
171
+ }
172
+ },
173
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
174
+ icon: _freeSolidSvgIcons.faDroplet
175
+ })
176
+ })
177
+ })
155
178
  })]
156
179
  })
157
- }, index))
180
+ }), item.values.map((value, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup.Item, {
181
+ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
182
+ class: "d-flex",
183
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
184
+ class: "flex-grow-1",
185
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form.Check, {
186
+ // prettier-ignore
187
+ type: "switch",
188
+ id: "custom-switch",
189
+ label: value
190
+ })
191
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
192
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
193
+ xmlns: "http://www.w3.org/2000/svg",
194
+ width: "24",
195
+ height: "24",
196
+ fill: "currentColor",
197
+ viewBox: "0 0 10 10",
198
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
199
+ x: "0",
200
+ y: "0",
201
+ width: "10",
202
+ height: "10",
203
+ fill: "rgb(".concat(obs[item.name]["state"][index]["color"], ")")
204
+ })
205
+ })
206
+ })]
207
+ })
208
+ }, value))]
158
209
  })
159
210
  })]
160
211
  }, item.name);
@@ -210,18 +261,7 @@ function ObsColsList() {
210
261
  children: [isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingSpinner.LoadingSpinner, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Accordion, {
211
262
  flush: true,
212
263
  defaultActiveKey: active,
213
- onSelect: key => {
214
- if (key != null) {
215
- dispatch({
216
- type: "obsSelected",
217
- obs: obsColsList.find(obs => obs.name === key)
218
- });
219
- dispatch({
220
- type: "set.colorEncoding",
221
- value: "obs"
222
- });
223
- }
224
- },
264
+ alwaysOpen: true,
225
265
  children: obsList
226
266
  })]
227
267
  })
package/dist/components/obsm-list/ObsmList.js CHANGED
@@ -10,7 +10,14 @@ var _requests = require("../../utils/requests");
10
10
  var _DatasetContext = require("../../context/DatasetContext");
11
11
  var _LoadingSpinner = require("../../utils/LoadingSpinner");
12
12
  var _reactBootstrap = require("react-bootstrap");
13
+ var _Dropdown = _interopRequireDefault(require("react-bootstrap/Dropdown"));
14
+ var _Button = _interopRequireDefault(require("react-bootstrap/Button"));
15
+ var _DropdownButton = _interopRequireDefault(require("react-bootstrap/DropdownButton"));
16
+ var _ButtonGroup = _interopRequireDefault(require("react-bootstrap/ButtonGroup"));
17
+ var _OverlayTrigger = _interopRequireDefault(require("react-bootstrap/OverlayTrigger"));
18
+ var _Tooltip = _interopRequireDefault(require("react-bootstrap/Tooltip"));
13
19
  var _jsxRuntime = require("react/jsx-runtime");
20
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14
21
  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); }
15
22
  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; }
16
23
  function ObsmKeysList() {
@@ -48,9 +55,8 @@ function ObsmKeysList() {
48
55
  }
49
56
  }, [dataset.selectedObsm]);
50
57
  const obsmList = obsmKeysList.map(item => {
51
- return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
52
- type: "button",
53
- className: "list-group-item list-grou-item-action ".concat(active === item && "active"),
58
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Item, {
59
+ className: "custom ".concat(active === item && "active"),
54
60
  onClick: () => {
55
61
  dispatch({
56
62
  type: "obsmSelected",
@@ -61,18 +67,28 @@ function ObsmKeysList() {
61
67
  }, item);
62
68
  });
63
69
  if (!serverError) {
64
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
65
- className: "",
66
- children: [isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingSpinner.LoadingSpinner, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
67
- className: "list-group overflow-auto mh-100",
70
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
71
+ children: [isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingSpinner.LoadingSpinner, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropdownButton.default, {
72
+ as: _ButtonGroup.default,
73
+ title: dataset.selectedObsm,
74
+ id: "bg-nested-dropdown",
75
+ size: "sm",
68
76
  children: obsmList
69
77
  })]
70
78
  });
71
79
  } else {
72
- return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
73
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Alert, {
74
- variant: "danger",
80
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_OverlayTrigger.default, {
81
+ placement: "top",
82
+ delay: {
83
+ show: 100,
84
+ hide: 200
85
+ },
86
+ overlay: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
75
87
  children: serverError.message
88
+ }),
89
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
90
+ variant: "danger",
91
+ children: "Error"
76
92
  })
77
93
  });
78
94
  }
package/dist/components/scatterplot/Scatterplot.js CHANGED
@@ -14,6 +14,7 @@ var _layers2 = require("@nebula.gl/layers");
14
14
  var _editModes = require("@nebula.gl/edit-modes");
15
15
  var _Dropdown = _interopRequireDefault(require("react-bootstrap/Dropdown"));
16
16
  var _Toolbox = require("./Toolbox");
17
+ var _SpatialControls = require("./SpatialControls");
17
18
  var _Legend = require("./Legend");
18
19
  var _constants = require("../../constants/constants");
19
20
  var _DatasetContext = require("../../context/DatasetContext");
@@ -292,6 +293,11 @@ function Scatterplot(_ref) {
292
293
  controller: true,
293
294
  layers: layers,
294
295
  onClick: onLayerClick
296
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SpatialControls.SpatialControls, {
297
+ mode: mode,
298
+ setMode: setMode,
299
+ features: mode,
300
+ setFeatures: setFeatures
295
301
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbox.Toolbox, {
296
302
  mode: mode,
297
303
  setMode: setMode,
package/dist/components/scatterplot/SpatialControls.js ADDED
@@ -0,0 +1,121 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.SpatialControls = SpatialControls;
7
+ require("bootstrap/dist/css/bootstrap.min.css");
8
+ var _Dropdown = _interopRequireDefault(require("react-bootstrap/Dropdown"));
9
+ var _react = require("react");
10
+ var _editModes = require("@nebula.gl/edit-modes");
11
+ var _Button = _interopRequireDefault(require("react-bootstrap/Button"));
12
+ var _DropdownButton = _interopRequireDefault(require("react-bootstrap/DropdownButton"));
13
+ var _ButtonGroup = _interopRequireDefault(require("react-bootstrap/ButtonGroup"));
14
+ var _reactFontawesome = require("@fortawesome/react-fontawesome");
15
+ var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
16
+ var _cheritaReact = require("@haniffalab/cherita-react");
17
+ var _jsxRuntime = require("react/jsx-runtime");
18
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
+ function SpatialControls(_ref) {
20
+ let {
21
+ mode,
22
+ setMode,
23
+ features,
24
+ setFeatures
25
+ } = _ref;
26
+ const [showControls, setShowControls] = (0, _react.useState)(false);
27
+ const handleCloseControls = () => setShowControls(false);
28
+ const handleShowControls = () => setShowControls(true);
29
+ const onSelect = (eventKey, event) => {
30
+ console.log(eventKey); // selected event will trigger
31
+ switch (eventKey) {
32
+ case "DrawPolygonMode":
33
+ setMode(() => _editModes.DrawPolygonMode);
34
+ break;
35
+ case "DrawLineStringMode":
36
+ setMode(() => _editModes.DrawLineStringMode);
37
+ break;
38
+ case "DrawPolygonByDraggingMode":
39
+ setMode(() => _editModes.DrawPolygonByDraggingMode);
40
+ break;
41
+ case "DrawRectangleMode":
42
+ setMode(() => _editModes.DrawRectangleMode);
43
+ break;
44
+ case "ModifyMode":
45
+ setMode(() => _editModes.ModifyMode);
46
+ break;
47
+ default:
48
+ setMode(() => _editModes.ViewMode);
49
+ }
50
+ };
51
+ const deleteFeatures = (eventKey, event) => {
52
+ console.log(eventKey); // selected event will trigger
53
+ setFeatures({
54
+ type: "FeatureCollection",
55
+ features: []
56
+ });
57
+ };
58
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
59
+ className: "cherita-spatial-controls",
60
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_ButtonGroup.default, {
61
+ vertical: true,
62
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
63
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
64
+ icon: _freeSolidSvgIcons.faPlus
65
+ })
66
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
67
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
68
+ icon: _freeSolidSvgIcons.faMinus
69
+ })
70
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
71
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
72
+ icon: _freeSolidSvgIcons.faCrosshairs
73
+ })
74
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
75
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
76
+ icon: _freeSolidSvgIcons.faHand
77
+ })
78
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_DropdownButton.default, {
79
+ as: _ButtonGroup.default,
80
+ title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
81
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
82
+ icon: _freeSolidSvgIcons.faDrawPolygon
83
+ })
84
+ }),
85
+ drop: "end",
86
+ id: "bg-vertical-dropdown-1",
87
+ className: "caret-off",
88
+ onSelect: onSelect,
89
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Header, {
90
+ children: "Selection tools"
91
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Divider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Item, {
92
+ eventKey: "DrawPolygonMode",
93
+ children: "Draw a polygon"
94
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Item, {
95
+ eventKey: "DrawPolygonByDraggingMode",
96
+ children: "Draw a Polygon by Dragging"
97
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Item, {
98
+ eventKey: "ModifyMode",
99
+ children: "Modify polygons"
100
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Item, {
101
+ eventKey: "ViewMode",
102
+ children: "ViewMode"
103
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Dropdown.default.Item, {
104
+ onClick: deleteFeatures,
105
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
106
+ icon: _freeSolidSvgIcons.faTrash
107
+ }), " Delete Plydons"]
108
+ })]
109
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
110
+ onClick: handleShowControls,
111
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
112
+ icon: _freeSolidSvgIcons.faSliders
113
+ })
114
+ })]
115
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_cheritaReact.OffcanvasControls, {
116
+ show: showControls,
117
+ handleClose: handleCloseControls,
118
+ Controls: _cheritaReact.ScatterplotControls
119
+ })]
120
+ });
121
+ }
package/dist/components/scatterplot/Toolbox.js CHANGED
@@ -7,7 +7,9 @@ exports.Toolbox = Toolbox;
7
7
  require("bootstrap/dist/css/bootstrap.min.css");
8
8
  var _Dropdown = _interopRequireDefault(require("react-bootstrap/Dropdown"));
9
9
  var _react = require("react");
10
+ var _DatasetContext = require("../../context/DatasetContext");
10
11
  var _editModes = require("@nebula.gl/edit-modes");
12
+ var _cheritaReact = require("@haniffalab/cherita-react");
11
13
  var _Button = _interopRequireDefault(require("react-bootstrap/Button"));
12
14
  var _DropdownButton = _interopRequireDefault(require("react-bootstrap/DropdownButton"));
13
15
  var _ButtonGroup = _interopRequireDefault(require("react-bootstrap/ButtonGroup"));
@@ -22,70 +24,18 @@ function Toolbox(_ref) {
22
24
  features,
23
25
  setFeatures
24
26
  } = _ref;
25
- const onSelect = (eventKey, event) => {
26
- console.log(eventKey); // selected event will trigger
27
- switch (eventKey) {
28
- case "DrawPolygonMode":
29
- setMode(() => _editModes.DrawPolygonMode);
30
- break;
31
- case "DrawLineStringMode":
32
- setMode(() => _editModes.DrawLineStringMode);
33
- break;
34
- case "DrawPolygonByDraggingMode":
35
- setMode(() => _editModes.DrawPolygonByDraggingMode);
36
- break;
37
- case "DrawRectangleMode":
38
- setMode(() => _editModes.DrawRectangleMode);
39
- break;
40
- case "ModifyMode":
41
- setMode(() => _editModes.ModifyMode);
42
- break;
43
- default:
44
- setMode(() => _editModes.ViewMode);
45
- }
46
- };
47
- const deleteFeatures = (eventKey, event) => {
48
- console.log(eventKey); // selected event will trigger
49
- setFeatures({
50
- type: "FeatureCollection",
51
- features: []
52
- });
53
- };
27
+ const dataset = (0, _DatasetContext.useDataset)();
54
28
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
55
29
  className: "cherita-toolbox",
56
30
  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ButtonGroup.default, {
57
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_DropdownButton.default, {
58
- as: _ButtonGroup.default,
59
- title: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
60
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
61
- icon: _freeSolidSvgIcons.faArrowPointer
62
- }), " Mode"]
63
- }),
64
- id: "bg-nested-dropdown",
65
- onSelect: onSelect,
66
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Item, {
67
- eventKey: "DrawPolygonMode",
68
- children: "DrawPolygonMode"
69
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Item, {
70
- eventKey: "DrawLineStringMode",
71
- children: "DrawLineStringMode"
72
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Item, {
73
- eventKey: "DrawPolygonByDraggingMode",
74
- children: "DrawPolygonByDraggingMode"
75
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Item, {
76
- eventKey: "DrawRectangleMode",
77
- children: "DrawRectangleMode"
78
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Item, {
79
- eventKey: "ModifyMode",
80
- children: "ModifyMode"
81
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Item, {
82
- eventKey: "ViewMode",
83
- children: "ViewMode"
84
- })]
31
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_cheritaReact.ObsmKeysList, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
32
+ size: "sm",
33
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
34
+ icon: _freeSolidSvgIcons.faDroplet
35
+ }), " CD14"]
85
36
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
86
- variant: "primary",
87
- onClick: deleteFeatures,
88
- children: "Delete"
37
+ size: "sm",
38
+ children: "Cells XXXX"
89
39
  })]
90
40
  })
91
41
  });
package/dist/components/var-list/VarList.js CHANGED
@@ -7,9 +7,11 @@ exports.VarNamesList = VarNamesList;
7
7
  require("bootstrap/dist/css/bootstrap.min.css");
8
8
  var _react = _interopRequireWildcard(require("react"));
9
9
  var _lodash = _interopRequireDefault(require("lodash"));
10
+ var _reactBootstrap = require("react-bootstrap");
11
+ var _reactFontawesome = require("@fortawesome/react-fontawesome");
12
+ var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
10
13
  var _DatasetContext = require("../../context/DatasetContext");
11
14
  var _constants = require("../../constants/constants");
12
- var _reactBootstrap = require("react-bootstrap");
13
15
  var _jsxRuntime = require("react/jsx-runtime");
14
16
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
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); }
@@ -69,36 +71,67 @@ function VarNamesList(_ref) {
69
71
  const makeList = (0, _react.useCallback)(vars => {
70
72
  return vars.map(item => {
71
73
  if (item && mode === _constants.SELECTION_MODES.SINGLE) {
72
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
73
- type: "button",
74
- variant: item.matrix_index !== -1 ? "outline-primary" : "outline-secondary",
75
- className: "".concat(active === item.matrix_index && "active", " m-1"),
76
- onClick: () => {
77
- selectVar(item);
78
- },
79
- disabled: item.matrix_index === -1,
80
- title: item.matrix_index === -1 ? "Not present in data" : "",
81
- children: item.name
82
- }, item.matrix_index);
74
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup.Item, {
75
+ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
76
+ class: "d-flex gap-1",
77
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
78
+ class: "flex-grow-1",
79
+ children: item.name
80
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
81
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
82
+ icon: _freeSolidSvgIcons.faCircleInfo
83
+ })
84
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
85
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
86
+ type: "button",
87
+ className: "m-0 p-0 px-1 btn-link ".concat(active === item.matrix_index && "active"),
88
+ onClick: () => {
89
+ selectVar(item);
90
+ },
91
+ disabled: item.matrix_index === -1,
92
+ title: item.matrix_index === -1 ? "Not present in data" : "",
93
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
94
+ icon: _freeSolidSvgIcons.faDroplet
95
+ })
96
+ }, item.matrix_index)
97
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
98
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
99
+ icon: _freeSolidSvgIcons.faTrash
100
+ })
101
+ })]
102
+ })
103
+ }, item);
83
104
  } else if (mode === _constants.SELECTION_MODES.MULTIPLE) {
84
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
85
- type: "button",
86
- variant: item.matrix_index !== -1 ? "outline-primary" : "outline-secondary",
87
- className: "".concat(active.includes(item.matrix_index) && "active", " m-1"),
88
- onClick: () => {
89
- if (active.includes(item.matrix_index)) {
90
- dispatch({
91
- type: "multiVarDeselected",
92
- var: item
93
- });
94
- } else {
95
- selectVar(item);
96
- }
97
- },
98
- disabled: item.matrix_index === -1,
99
- title: item.matrix_index === -1 ? "Not present in data" : "",
100
- children: item.name
101
- }, item.matrix_index);
105
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup.Item, {
106
+ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
107
+ class: "d-flex",
108
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
109
+ class: "flex-grow-1",
110
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
111
+ type: "button",
112
+ variant: item.matrix_index !== -1 ? "outline-primary" : "outline-secondary",
113
+ className: "".concat(active.includes(item.matrix_index) && "active", " m-1"),
114
+ onClick: () => {
115
+ if (active.includes(item.matrix_index)) {
116
+ dispatch({
117
+ type: "multiVarDeselected",
118
+ var: item
119
+ });
120
+ } else {
121
+ selectVar(item);
122
+ }
123
+ },
124
+ disabled: item.matrix_index === -1,
125
+ title: item.matrix_index === -1 ? "Not present in data" : "",
126
+ children: item.name
127
+ }, item.matrix_index)
128
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
129
+ children: [" ", /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
130
+ icon: _freeSolidSvgIcons.faPlus
131
+ })]
132
+ })]
133
+ })
134
+ }, item);
102
135
  } else {
103
136
  return null;
104
137
  }
@@ -128,7 +161,9 @@ function VarNamesList(_ref) {
128
161
  },
129
162
  children: "clear"
130
163
  })]
131
- }), varList]
164
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup, {
165
+ children: varList
166
+ })]
132
167
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
133
168
  children: ((_dataset$selectedDise = dataset.selectedDisease) === null || _dataset$selectedDise === void 0 ? void 0 : _dataset$selectedDise.id) && ((_dataset$selectedDise2 = dataset.selectedDisease) === null || _dataset$selectedDise2 === void 0 || (_dataset$selectedDise2 = _dataset$selectedDise2.genes) === null || _dataset$selectedDise2 === void 0 ? void 0 : _dataset$selectedDise2.length) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
134
169
  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@haniffalab/cherita-react",
3
- "version": "0.2.0-dev.2024-05-21.ca7d726c",
3
+ "version": "0.2.0-dev.2024-05-22.5ce64346",
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": "ca7d726c238e548f4db9899190cd6773f79ea5d0"
81
+ "prereleaseSha": "5ce64346f33423368e217552e04ebebf2022de06"
82
82
  }