@haniffalab/cherita-react 0.2.0-dev.2025-01-22.f523ac5e → 0.2.0-dev.2025-01-28.7a60aa67

package/dist/components/var-list/VarList.js

@@ -15,12 +15,10 @@ var _constants = require("../../constants/constants");
 var _DatasetContext = require("../../context/DatasetContext");
 var _LoadingIndicators = require("../../utils/LoadingIndicators");
 var _requests = require("../../utils/requests");
-var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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); }
 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 && {}.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; }
-const useVarMean = function (varKeys) {
-  let enabled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+const useVarMean = (varKeys, enabled = false) => {
   const ENDPOINT = "matrix/mean";
   const dataset = (0, _DatasetContext.useDataset)();
   const [params, setParams] = (0, _react.useState)({
@@ -51,10 +49,9 @@ const useVarMean = function (varKeys) {
 
 // @TODO: display where disease data comes from
 // add to disease dataset metadata
-function DiseaseVarList(_ref) {
-  let {
-    makeListItem
-  } = _ref;
+function DiseaseVarList({
+  makeListItem
+}) {
   const ENDPOINT = "disease/genes";
   const dataset = (0, _DatasetContext.useDataset)();
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
@@ -101,50 +98,30 @@ function DiseaseVarList(_ref) {
     return makeListItem(item, true);
   });
   const isPending = diseaseData.isPending || varMeans.isPending && dataset.varSort.disease.sort === _constants.VAR_SORT.MATRIX;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: dataset.selectedDisease && (!isPending && !diseaseVars?.length ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "d-flex justify-content-between mt-3",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("h5", {
-          children: "Disease genes"
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Alert, {
-        variant: "light",
-        children: "No disease genes found."
-      })]
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "d-flex justify-content-between mt-3",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h5", {
-          children: "Disease genes"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
-          variant: "link",
-          onClick: () => {
-            dispatch({
-              type: "reset.disease"
-            });
-          },
-          children: "clear"
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-        children: dataset.selectedDisease?.name
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_VarListToolbar.VarListToolbar, {
-        varType: "disease"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "position-relative",
-        children: [isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicators.LoadingSpinner, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup, {
-          children: diseaseVarList
-        })]
-      })]
-    }))
-  });
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, dataset.selectedDisease && (!isPending && !diseaseVars?.length ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "d-flex justify-content-between mt-3"
+  }, /*#__PURE__*/_react.default.createElement("h5", null, "Disease genes")), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Alert, {
+    variant: "light"
+  }, "No disease genes found.")) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "d-flex justify-content-between mt-3"
+  }, /*#__PURE__*/_react.default.createElement("h5", null, "Disease genes"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+    variant: "link",
+    onClick: () => {
+      dispatch({
+        type: "reset.disease"
+      });
+    }
+  }, "clear")), /*#__PURE__*/_react.default.createElement("p", null, dataset.selectedDisease?.name), /*#__PURE__*/_react.default.createElement(_VarListToolbar.VarListToolbar, {
+    varType: "disease"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "position-relative"
+  }, isPending && /*#__PURE__*/_react.default.createElement(_LoadingIndicators.LoadingSpinner, null), /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup, null, diseaseVarList)))));
 }
-function VarNamesList(_ref2) {
-  let {
-    mode = _constants.SELECTION_MODES.SINGLE,
-    displayName = "genes",
-    showDiseaseVarList = true
-  } = _ref2;
+function VarNamesList({
+  mode = _constants.SELECTION_MODES.SINGLE,
+  displayName = "genes",
+  showDiseaseVarList = true
+}) {
   const dataset = (0, _DatasetContext.useDataset)();
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
   const [varButtons, setVarButtons] = (0, _react.useState)(mode === _constants.SELECTION_MODES.SINGLE ? dataset.selectedVar ? _lodash.default.unionWith([dataset.selectedVar], dataset.varSets, _lodash.default.isEqual) : [...dataset.varSets] : [...dataset.selectedMultiVar, ...dataset.varSets]);
@@ -215,26 +192,25 @@ function VarNamesList(_ref2) {
       setSortedVarButtons(varButtons);
     }
   }, [dataset.varSort.var.sort, dataset.varSort.var.sortOrder, varButtons, varMeans.isPending, varMeans.serverError, varMeans.fetchedData]);
-  const makeListItem = function (item) {
-    let isDiseaseGene = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup.Item, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VarItem.VarItem, {
-        item: item,
-        active: active,
-        setVarButtons: setVarButtons,
-        mode: mode,
-        isDiseaseGene: isDiseaseGene
-      })
-    }, item.matrix_index);
+  const makeListItem = (item, isDiseaseGene = false) => {
+    return /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup.Item, {
+      key: item.matrix_index
+    }, /*#__PURE__*/_react.default.createElement(_VarItem.VarItem, {
+      item: item,
+      active: active,
+      setVarButtons: setVarButtons,
+      mode: mode,
+      isDiseaseGene: isDiseaseGene
+    }));
   };
   const makeSetListItem = set => {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup.Item, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VarSet.VarSet, {
-        set: set,
-        active: active,
-        mode: mode
-      })
-    }, set.name);
+    return /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup.Item, {
+      key: set.name
+    }, /*#__PURE__*/_react.default.createElement(_VarSet.VarSet, {
+      set: set,
+      active: active,
+      mode: mode
+    }));
   };
   const varList = _lodash.default.map(sortedVarButtons, item => {
     if (item.isSet) {
@@ -256,60 +232,41 @@ function VarNamesList(_ref2) {
     return setName;
   };
   const isPending = varMeans.isPending && dataset.varSort.var.sort === _constants.VAR_SORT.MATRIX;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: "position-relative",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "overflow-auto mt-3",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "d-flex justify-content-between",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h5", {
-          children: _lodash.default.capitalize(displayName)
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Button, {
-            variant: "light",
-            className: "p-1",
-            onClick: () => {
-              dispatch({
-                type: "add.varSet",
-                varSet: {
-                  name: newSetName(),
-                  vars: [],
-                  isSet: true
-                }
-              });
-            },
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.Add, {}), "New set"]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
-            variant: "link",
-            onClick: () => {
-              setVarButtons([]);
-              dispatch({
-                type: mode === _constants.SELECTION_MODES.SINGLE ? "reset.var" : "reset.multiVar"
-              });
-              dispatch({
-                type: "reset.varSets"
-              });
-            },
-            children: "clear"
-          })]
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-        children: !varList.length ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Alert, {
-          variant: "light",
-          children: "Search for a feature."
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_VarListToolbar.VarListToolbar, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: "position-relative",
-            children: [isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicators.LoadingSpinner, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup, {
-              children: varList
-            })]
-          })]
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-        children: showDiseaseVarList && /*#__PURE__*/(0, _jsxRuntime.jsx)(DiseaseVarList, {
-          makeListItem: makeListItem
-        })
-      })]
-    })
-  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "position-relative"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "overflow-auto mt-3"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "d-flex justify-content-between"
+  }, /*#__PURE__*/_react.default.createElement("h5", null, _lodash.default.capitalize(displayName)), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+    variant: "light",
+    className: "p-1",
+    onClick: () => {
+      dispatch({
+        type: "add.varSet",
+        varSet: {
+          name: newSetName(),
+          vars: [],
+          isSet: true
+        }
+      });
+    }
+  }, /*#__PURE__*/_react.default.createElement(_iconsMaterial.Add, null), "New set"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+    variant: "link",
+    onClick: () => {
+      setVarButtons([]);
+      dispatch({
+        type: mode === _constants.SELECTION_MODES.SINGLE ? "reset.var" : "reset.multiVar"
+      });
+      dispatch({
+        type: "reset.varSets"
+      });
+    }
+  }, "clear"))), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !varList.length ? /*#__PURE__*/_react.default.createElement(_reactBootstrap.Alert, {
+    variant: "light"
+  }, "Search for a feature.") : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_VarListToolbar.VarListToolbar, null), /*#__PURE__*/_react.default.createElement("div", {
+    className: "position-relative"
+  }, isPending && /*#__PURE__*/_react.default.createElement(_LoadingIndicators.LoadingSpinner, null), /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup, null, varList)))), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showDiseaseVarList && /*#__PURE__*/_react.default.createElement(DiseaseVarList, {
+    makeListItem: makeListItem
+  }))));
 }

package/dist/components/var-list/VarListToolbar.js

@@ -11,14 +11,12 @@ var _material = require("@mui/material");
 var _reactBootstrap = require("react-bootstrap");
 var _constants = require("../../constants/constants");
 var _DatasetContext = require("../../context/DatasetContext");
-var _jsxRuntime = require("react/jsx-runtime");
 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); }
 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 && {}.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; }
 // @TODO: set option for "var" and "disease"
-function VarListToolbar(_ref) {
-  let {
-    varType = "var"
-  } = _ref;
+function VarListToolbar({
+  varType = "var"
+}) {
   const dataset = (0, _DatasetContext.useDataset)();
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
   const [sort, setSort] = (0, _react.useState)(dataset.varSort.var.sort);
@@ -44,58 +42,49 @@ function VarListToolbar(_ref) {
       });
     }
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Navbar, {
-    className: "var-list-toolbar",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.InputGroup, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.InputGroup.Text, {
-        children: "Sort by:"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ToggleButtonGroup, {
-        "aria-label": "Sort feature by",
-        size: "small",
-        className: "mh-100",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ToggleButton, {
-          value: _constants.VAR_SORT.NAME,
-          "aria-label": "alphabetical",
-          title: "Sort alphabetically",
-          selected: sort === _constants.VAR_SORT.NAME,
-          onChange: () => {
-            handleSort(_constants.VAR_SORT.NAME, nameSortOrder, setNameSortOrder);
-          },
-          children: nameSortOrder === _constants.VAR_SORT_ORDER.ASC ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
-            icon: _freeSolidSvgIcons.faArrowDownAZ
-          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
-            icon: _freeSolidSvgIcons.faArrowUpZA
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ToggleButton, {
-          value: _constants.VAR_SORT.MATRIX,
-          "aria-label": "matrix value",
-          title: "Sort by matrix value",
-          selected: sort === _constants.VAR_SORT.MATRIX,
-          onChange: () => {
-            handleSort(_constants.VAR_SORT.MATRIX, matrixSortOrder, setMatrixSortOrder);
-          },
-          children: matrixSortOrder === _constants.VAR_SORT_ORDER.ASC ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
-            icon: _freeSolidSvgIcons.faArrowDown19
-          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
-            icon: _freeSolidSvgIcons.faArrowUp91
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ToggleButton, {
-          value: "none",
-          "aria-label": "none",
-          title: "No sorting",
-          onClick: () => {
-            setSort(_constants.VAR_SORT.NONE);
-            dispatch({
-              type: "set.varSort.sort",
-              var: varType,
-              sort: _constants.VAR_SORT.NONE
-            });
-          },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
-            icon: _freeSolidSvgIcons.faXmark
-          })
-        })]
-      })]
-    })
-  });
+  return /*#__PURE__*/_react.default.createElement(_reactBootstrap.Navbar, {
+    className: "var-list-toolbar"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup.Text, null, "Sort by:"), /*#__PURE__*/_react.default.createElement(_material.ToggleButtonGroup, {
+    "aria-label": "Sort feature by",
+    size: "small",
+    className: "mh-100"
+  }, /*#__PURE__*/_react.default.createElement(_material.ToggleButton, {
+    value: _constants.VAR_SORT.NAME,
+    "aria-label": "alphabetical",
+    title: "Sort alphabetically",
+    selected: sort === _constants.VAR_SORT.NAME,
+    onChange: () => {
+      handleSort(_constants.VAR_SORT.NAME, nameSortOrder, setNameSortOrder);
+    }
+  }, nameSortOrder === _constants.VAR_SORT_ORDER.ASC ? /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: _freeSolidSvgIcons.faArrowDownAZ
+  }) : /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: _freeSolidSvgIcons.faArrowUpZA
+  })), /*#__PURE__*/_react.default.createElement(_material.ToggleButton, {
+    value: _constants.VAR_SORT.MATRIX,
+    "aria-label": "matrix value",
+    title: "Sort by matrix value",
+    selected: sort === _constants.VAR_SORT.MATRIX,
+    onChange: () => {
+      handleSort(_constants.VAR_SORT.MATRIX, matrixSortOrder, setMatrixSortOrder);
+    }
+  }, matrixSortOrder === _constants.VAR_SORT_ORDER.ASC ? /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: _freeSolidSvgIcons.faArrowDown19
+  }) : /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: _freeSolidSvgIcons.faArrowUp91
+  })), /*#__PURE__*/_react.default.createElement(_material.ToggleButton, {
+    value: "none",
+    "aria-label": "none",
+    title: "No sorting",
+    onClick: () => {
+      setSort(_constants.VAR_SORT.NONE);
+      dispatch({
+        type: "set.varSort.sort",
+        var: varType,
+        sort: _constants.VAR_SORT.NONE
+      });
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: _freeSolidSvgIcons.faXmark
+  })))));
 }

package/dist/components/var-list/VarSet.js

@@ -14,11 +14,11 @@ var _VarItem = require("./VarItem");
 var _constants = require("../../constants/constants");
 var _DatasetContext = require("../../context/DatasetContext");
 var _SearchBar = require("../search-bar/SearchBar");
-var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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); }
 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 && {}.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; }
 // @TODO: add button to score genes and plot
+
 const addVarToSet = (dispatch, set, v) => {
   dispatch({
     type: "add.varSet.var",
@@ -26,127 +26,102 @@ const addVarToSet = (dispatch, set, v) => {
     var: v
   });
 };
-function SingleSelectionSet(_ref) {
-  let {
-    set,
-    isActive,
-    selectSet,
-    removeSet,
-    removeSetVar,
-    showSearchBar = true
-  } = _ref;
+function SingleSelectionSet({
+  set,
+  isActive,
+  selectSet,
+  removeSet,
+  removeSetVar,
+  showSearchBar = true
+}) {
   const [openSet, setOpenSet] = (0, _react.useState)(false);
   const varList = set.vars.length ? _lodash.default.map(set.vars, v => {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup.Item, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VarItem.SingleSelectionItem, {
-        item: v,
-        showSetColorEncoding: false,
-        removeVar: () => removeSetVar(v)
-      })
-    }, v.name);
-  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup.Item, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "text-muted",
-      children: "No features in this set"
-    })
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "d-flex justify-content-between cursor-pointer",
-      onClick: () => {
-        setOpenSet(o => !o);
-      },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "d-flex justify-content-between align-items-center w-100",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          children: set.name
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "d-flex align-items-center gap-1",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.OverlayTrigger, {
-            placement: "top",
-            overlay: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Tooltip, {
-              children: "This set represents the mean value of its features"
-            }),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
-              icon: _freeSolidSvgIcons.faCircleInfo
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.List, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
-            type: "button",
-            variant: isActive ? "primary" : "outline-primary",
-            className: "m-0 p-0 px-1",
-            onClick: e => {
-              e.stopPropagation();
-              selectSet();
-            },
-            disabled: !set.vars.length,
-            title: "Set as color encoding",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
-              icon: _freeSolidSvgIcons.faDroplet
-            })
-          }, set.name), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
-            type: "button",
-            className: "m-0 p-0 px-1",
-            variant: "outline-secondary",
-            title: "Remove from list",
-            onClick: e => {
-              e.stopPropagation();
-              removeSet();
-            },
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
-              icon: _freeSolidSvgIcons.faTrash
-            })
-          })]
-        })]
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Collapse, {
-      in: openSet,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "mt-2",
-        children: [showSearchBar &&
-        /*#__PURE__*/
-        // @TODO: fix how results are displayed, should be placed on top of parent components
-        (0, _jsxRuntime.jsx)(_SearchBar.SearchBar, {
-          handleSelect: (d, i) => addVarToSet(d, set, i)
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "mx-2",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup, {
-            variant: "flush",
-            children: varList
-          })
-        })]
-      })
-    })]
-  });
+    return /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup.Item, {
+      key: v.name
+    }, /*#__PURE__*/_react.default.createElement(_VarItem.SingleSelectionItem, {
+      item: v,
+      showSetColorEncoding: false,
+      removeVar: () => removeSetVar(v)
+    }));
+  }) : /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup.Item, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "text-muted"
+  }, "No features in this set"));
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "d-flex justify-content-between cursor-pointer",
+    onClick: () => {
+      setOpenSet(o => !o);
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "d-flex justify-content-between align-items-center w-100"
+  }, /*#__PURE__*/_react.default.createElement("div", null, set.name), /*#__PURE__*/_react.default.createElement("div", {
+    className: "d-flex align-items-center gap-1"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.OverlayTrigger, {
+    placement: "top",
+    overlay: /*#__PURE__*/_react.default.createElement(_reactBootstrap.Tooltip, null, "This set represents the mean value of its features")
+  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: _freeSolidSvgIcons.faCircleInfo
+  })), /*#__PURE__*/_react.default.createElement(_iconsMaterial.List, null), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+    type: "button",
+    key: set.name,
+    variant: isActive ? "primary" : "outline-primary",
+    className: "m-0 p-0 px-1",
+    onClick: e => {
+      e.stopPropagation();
+      selectSet();
+    },
+    disabled: !set.vars.length,
+    title: "Set as color encoding"
+  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: _freeSolidSvgIcons.faDroplet
+  })), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+    type: "button",
+    className: "m-0 p-0 px-1",
+    variant: "outline-secondary",
+    title: "Remove from list",
+    onClick: e => {
+      e.stopPropagation();
+      removeSet();
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: _freeSolidSvgIcons.faTrash
+  }))))), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Collapse, {
+    in: openSet
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "mt-2"
+  }, showSearchBar &&
+  /*#__PURE__*/
+  // @TODO: fix how results are displayed, should be placed on top of parent components
+  _react.default.createElement(_SearchBar.SearchBar, {
+    handleSelect: (d, i) => addVarToSet(d, set, i)
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "mx-2"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup, {
+    variant: "flush"
+  }, varList)))));
 }
-function MultipleSelectionSet(_ref2) {
-  let {
-    set,
-    isActive,
-    toggleSet
-  } = _ref2;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "d-flex",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "flex-grow-1",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
-          type: "button",
-          variant: isActive ? "primary" : "outline-primary",
-          className: "m-0 p-0 px-1",
-          onClick: toggleSet,
-          title: set.name,
-          children: set.name
-        }, set.name)
-      })
-    })
-  });
+function MultipleSelectionSet({
+  set,
+  isActive,
+  toggleSet
+}) {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "d-flex"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex-grow-1"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+    type: "button",
+    key: set.name,
+    variant: isActive ? "primary" : "outline-primary",
+    className: "m-0 p-0 px-1",
+    onClick: toggleSet,
+    title: set.name
+  }, set.name))));
 }
-function VarSet(_ref3) {
-  let {
-    set,
-    active,
-    mode = _constants.SELECTION_MODES.SINGLE
-  } = _ref3;
+function VarSet({
+  set,
+  active,
+  mode = _constants.SELECTION_MODES.SINGLE
+}) {
   const dataset = (0, _DatasetContext.useDataset)();
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
   const selectSet = () => {
@@ -204,7 +179,7 @@ function VarSet(_ref3) {
     }
   };
   if (set && mode === _constants.SELECTION_MODES.SINGLE) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(SingleSelectionSet, {
+    return /*#__PURE__*/_react.default.createElement(SingleSelectionSet, {
       set: set,
       isActive: dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR && active === set.name,
       selectSet: selectSet,
@@ -212,7 +187,7 @@ function VarSet(_ref3) {
       removeSetVar: v => removeSetVar(v)
     });
   } else if (mode === _constants.SELECTION_MODES.MULTIPLE) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(MultipleSelectionSet, {
+    return /*#__PURE__*/_react.default.createElement(MultipleSelectionSet, {
       set: set,
       isActive: _lodash.default.includes(active, set.name),
       toggleSet: () => toggleSet(set)