@haniffalab/cherita-react 0.1.8 → 0.1.9

package/dist/components/Dotplot.js

@@ -12,6 +12,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactPlotly = _interopRequireDefault(require("react-plotly.js"));
 var _DatasetContext = require("../context/DatasetContext");
 var _constants = require("../constants/constants");
+var _reactBootstrap = require("react-bootstrap");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -26,20 +27,52 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-function DotplotControls() {
+function DotplotControls(_ref) {
+  var scaleRange = _ref.scaleRange,
+    expressionCutoff = _ref.expressionCutoff,
+    meanOnlyExpressed = _ref.meanOnlyExpressed,
+    dataRange = _ref.dataRange,
+    setScaleRange = _ref.setScaleRange,
+    setExpressionCutoff = _ref.setExpressionCutoff,
+    setMeanOnlyExpressed = _ref.setMeanOnlyExpressed,
+    setStandardScale = _ref.setStandardScale;
   var dataset = (0, _DatasetContext.useDataset)();
   var dispatch = (0, _DatasetContext.useDatasetDispatch)();
   var _useState = (0, _react.useState)(dataset.colorscale),
     _useState2 = _slicedToArray(_useState, 2),
-    active = _useState2[0],
-    setActive = _useState2[1];
+    activeColorscale = _useState2[0],
+    setActiveColorscale = _useState2[1];
+  var _useState3 = (0, _react.useState)("None"),
+    _useState4 = _slicedToArray(_useState3, 2),
+    activeStandardScale = _useState4[0],
+    setActiveStandardScale = _useState4[1];
+  var _useState5 = (0, _react.useState)(expressionCutoff),
+    _useState6 = _slicedToArray(_useState5, 2),
+    cutoff = _useState6[0],
+    setCutoff = _useState6[1];
+  var scaleMinRef = (0, _react.useRef)(null);
+  var scaleMaxRef = (0, _react.useRef)(null);
+  var standardScaleOptions = [{
+    value: null,
+    name: "None"
+  }, {
+    value: "group",
+    name: "Group"
+  }, {
+    value: "var",
+    name: "Var"
+  }];
   (0, _react.useEffect)(function () {
-    setActive(dataset.colorscale);
+    setActiveColorscale(dataset.colorscale);
   }, [dataset.colorscale]);
+  (0, _react.useEffect)(function () {
+    scaleMinRef.current.value = scaleRange.min;
+    scaleMaxRef.current.value = scaleRange.max;
+  }, [scaleRange]);
   var colormapList = _constants.PLOTLY_COLORSCALES.map(function (item) {
     return /*#__PURE__*/_react.default.createElement(_Dropdown.default.Item, {
       key: item,
-      active: active === item,
+      active: activeColorscale === item,
       onClick: function onClick() {
         dispatch({
           type: "colorscaleSelected",
@@ -48,26 +81,137 @@ function DotplotControls() {
       }
     }, item);
   });
-  return /*#__PURE__*/_react.default.createElement(_Dropdown.default, null, /*#__PURE__*/_react.default.createElement(_Dropdown.default.Toggle, {
+  var standardScaleList = standardScaleOptions.map(function (item) {
+    return /*#__PURE__*/_react.default.createElement(_Dropdown.default.Item, {
+      key: item.value,
+      active: activeStandardScale === item.name,
+      onClick: function onClick() {
+        setActiveStandardScale(item.name);
+        setStandardScale(item.value);
+      }
+    }, item.name);
+  });
+  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, {
     id: "dropdownColorscale",
     variant: "light"
-  }, dataset.colorscale), /*#__PURE__*/_react.default.createElement(_Dropdown.default.Menu, null, colormapList));
+  }, dataset.colorscale), /*#__PURE__*/_react.default.createElement(_Dropdown.default.Menu, null, colormapList))), /*#__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, {
+    id: "dropdownStandardScale",
+    variant: "light"
+  }, activeStandardScale), /*#__PURE__*/_react.default.createElement(_Dropdown.default.Menu, null, standardScaleList)))), /*#__PURE__*/_react.default.createElement(_reactBootstrap.ButtonGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ToggleButton, {
+    id: "toggleMeanOnlyExpressed",
+    type: "checkbox",
+    variant: "outline-primary",
+    checked: meanOnlyExpressed,
+    onChange: function onChange() {
+      setMeanOnlyExpressed(function (c) {
+        return !c;
+      });
+    }
+  }, "Average only above cutoff")), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form, {
+    onSubmit: function onSubmit(e) {
+      e.preventDefault();
+      setExpressionCutoff(parseFloat(cutoff));
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup.Text, null, "Expression Cutoff"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Control, {
+    size: "sm",
+    type: "number",
+    step: "0.1",
+    min: 0.0,
+    value: cutoff,
+    onChange: function onChange(e) {
+      setCutoff(e.target.value);
+    }
+  }), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+    type: "submit",
+    variant: "outline-primary"
+  }, "Apply"))), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form, {
+    onSubmit: function onSubmit(e) {
+      e.preventDefault();
+      var formData = new FormData(e.target),
+        formDataObj = Object.fromEntries(formData.entries());
+      setScaleRange({
+        min: parseFloat(formDataObj.scaleMin),
+        max: parseFloat(formDataObj.scaleMax)
+      });
+    }
+  }, /*#__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, {
+    ref: scaleMinRef,
+    name: "scaleMin",
+    size: "sm",
+    type: "number",
+    step: "0.1",
+    min: 0.0,
+    max: scaleRange.max,
+    defaultValue: scaleRange.min
+  }), /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup.Text, null, "max"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Control, {
+    ref: scaleMaxRef,
+    name: "scaleMax",
+    size: "sm",
+    type: "number",
+    step: "0.1",
+    min: scaleRange.min,
+    max: dataRange.max,
+    defaultValue: scaleRange.max,
+    onChange: function onChange(e) {
+      if (parseFloat(e.target.value) > dataRange.max) {
+        e.target.value = dataRange.max.toFixed(1);
+      }
+    }
+  }), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+    type: "submit",
+    variant: "outline-primary"
+  }, "Apply"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+    variant: "outline-primary",
+    onClick: function onClick() {
+      var scale = {
+        min: 0.0,
+        max: dataRange.max.toFixed(1)
+      };
+      setScaleRange(scale);
+    }
+  }, "Autoscale"))));
 }
 function Dotplot() {
   var dataset = (0, _DatasetContext.useDataset)();
   var colorscale = (0, _react.useRef)(dataset.colorscale);
-  var _useState3 = (0, _react.useState)([]),
-    _useState4 = _slicedToArray(_useState3, 2),
-    data = _useState4[0],
-    setData = _useState4[1];
-  var _useState5 = (0, _react.useState)({}),
-    _useState6 = _slicedToArray(_useState5, 2),
-    layout = _useState6[0],
-    setLayout = _useState6[1];
-  var _useState7 = (0, _react.useState)(false),
+  var _useState7 = (0, _react.useState)([]),
     _useState8 = _slicedToArray(_useState7, 2),
-    hasSelections = _useState8[0],
-    setHasSelections = _useState8[1];
+    data = _useState8[0],
+    setData = _useState8[1];
+  var _useState9 = (0, _react.useState)({}),
+    _useState10 = _slicedToArray(_useState9, 2),
+    layout = _useState10[0],
+    setLayout = _useState10[1];
+  var _useState11 = (0, _react.useState)(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    hasSelections = _useState12[0],
+    setHasSelections = _useState12[1];
+  var _useState13 = (0, _react.useState)(0.0),
+    _useState14 = _slicedToArray(_useState13, 2),
+    expressionCutoff = _useState14[0],
+    setExpressionCutoff = _useState14[1];
+  var _useState15 = (0, _react.useState)(false),
+    _useState16 = _slicedToArray(_useState15, 2),
+    meanOnlyExpressed = _useState16[0],
+    setMeanOnlyExpressed = _useState16[1];
+  var _useState17 = (0, _react.useState)(null),
+    _useState18 = _slicedToArray(_useState17, 2),
+    standardScale = _useState18[0],
+    setStandardScale = _useState18[1];
+  var _useState19 = (0, _react.useState)({
+      min: 0.0,
+      max: 0.0
+    }),
+    _useState20 = _slicedToArray(_useState19, 2),
+    dataRange = _useState20[0],
+    setDataRange = _useState20[1];
+  var _useState21 = (0, _react.useState)({
+      min: null,
+      max: null
+    }),
+    _useState22 = _slicedToArray(_useState21, 2),
+    scaleRange = _useState22[0],
+    setScaleRange = _useState22[1];
   var updateColorscale = (0, _react.useCallback)(function (colorscale) {
     setLayout(function (l) {
       return _objectSpread(_objectSpread({}, l), {}, {
@@ -78,6 +222,7 @@ function Dotplot() {
     });
   }, []);
   (0, _react.useEffect)(function () {
+    console.log("fetchdata");
     if (dataset.selectedObs && dataset.selectedMultiVar.length) {
       setHasSelections(true);
       fetch(new URL("dotplot", process.env.REACT_APP_API_URL), {
@@ -90,34 +235,62 @@ function Dotplot() {
         body: JSON.stringify({
           url: dataset.url,
           selectedObs: dataset.selectedObs,
-          selectedMultiVar: dataset.selectedMultiVar
+          selectedMultiVar: dataset.selectedMultiVar,
+          expressionCutoff: expressionCutoff,
+          meanOnlyExpressed: meanOnlyExpressed,
+          standardScale: standardScale
         })
       }).then(function (response) {
         return response.json();
       }).then(function (data) {
         setData(data.data);
         setLayout(data.layout);
+        setDataRange(data.range);
+        setScaleRange(function (s) {
+          return {
+            min: 0.0,
+            max: data.range.max.toFixed(1)
+          };
+        });
         updateColorscale(colorscale.current);
       });
     } else {
       setHasSelections(false);
     }
-  }, [dataset.url, dataset.selectedObs, dataset.selectedMultiVar, updateColorscale]);
+  }, [dataset.url, dataset.selectedObs, dataset.selectedMultiVar, expressionCutoff, meanOnlyExpressed, standardScale, updateColorscale]);
   (0, _react.useEffect)(function () {
-    console.log("update colorscale");
     colorscale.current = dataset.colorscale;
     updateColorscale(colorscale.current);
   }, [dataset.colorscale, updateColorscale]);
+  (0, _react.useEffect)(function () {
+    setLayout(function (l) {
+      return _objectSpread(_objectSpread({}, l), {}, {
+        coloraxis: _objectSpread(_objectSpread({}, l.coloraxis), {}, {
+          cmin: scaleRange.min,
+          cmax: scaleRange.max
+        })
+      });
+    });
+  }, [scaleRange]);
   if (hasSelections) {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "container text-center"
-    }, /*#__PURE__*/_react.default.createElement("h5", null, dataset.url), /*#__PURE__*/_react.default.createElement(DotplotControls, null), /*#__PURE__*/_react.default.createElement(_reactPlotly.default, {
+    }, /*#__PURE__*/_react.default.createElement("h5", null, dataset.url), /*#__PURE__*/_react.default.createElement(DotplotControls, {
+      scaleRange: scaleRange,
+      expressionCutoff: expressionCutoff,
+      meanOnlyExpressed: meanOnlyExpressed,
+      dataRange: dataRange,
+      setScaleRange: setScaleRange,
+      setExpressionCutoff: setExpressionCutoff,
+      setMeanOnlyExpressed: setMeanOnlyExpressed,
+      setStandardScale: setStandardScale
+    }), /*#__PURE__*/_react.default.createElement(_reactPlotly.default, {
       data: data,
       layout: layout,
       useResizeHandler: true,
       style: {
-        width: "100%",
-        height: "100%"
+        maxWidth: "100%",
+        maxHeight: "100%"
       }
     }));
   }

package/dist/components/Heatmap.js

@@ -116,8 +116,8 @@ function Heatmap() {
       layout: layout,
       useResizeHandler: true,
       style: {
-        width: "100%",
-        height: "100%"
+        maxWidth: "100%",
+        maxHeight: "100%"
       }
     }));
   }

package/dist/index.js

@@ -1,53 +1,53 @@
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
-  value: true,
+  value: true
 });
 Object.defineProperty(exports, "DatasetProvider", {
   enumerable: true,
   get: function get() {
     return _DatasetContext.DatasetProvider;
-  },
+  }
 });
 Object.defineProperty(exports, "Dotplot", {
   enumerable: true,
   get: function get() {
     return _Dotplot.Dotplot;
-  },
+  }
 });
 Object.defineProperty(exports, "Heatmap", {
   enumerable: true,
   get: function get() {
     return _Heatmap.Heatmap;
-  },
+  }
 });
 Object.defineProperty(exports, "MultiVarNamesList", {
   enumerable: true,
   get: function get() {
     return _VarList.MultiVarNamesList;
-  },
+  }
 });
 Object.defineProperty(exports, "ObsColsList", {
   enumerable: true,
   get: function get() {
     return _ObsList.ObsColsList;
-  },
+  }
 });
 Object.defineProperty(exports, "PLOTLY_COLORSCALES", {
   enumerable: true,
   get: function get() {
     return _constants.PLOTLY_COLORSCALES;
-  },
+  }
 });
 Object.defineProperty(exports, "VarNamesList", {
   enumerable: true,
   get: function get() {
     return _VarList.VarNamesList;
-  },
+  }
 });
 var _ObsList = require("./components/ObsList");
 var _VarList = require("./components/VarList");
 var _Heatmap = require("./components/Heatmap");
 var _Dotplot = require("./components/Dotplot");
 var _constants = require("./constants/constants");
-var _DatasetContext = require("./context/DatasetContext");
+var _DatasetContext = require("./context/DatasetContext");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haniffalab/cherita-react",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "author": "",
   "license": "",
   "main": "dist/index.js",
@@ -54,4 +54,4 @@
       "last 1 safari version"
     ]
   }
-}
+}