@robotical/sensors-dashboard/dist/components/GraphControls/index.js

A dashboard tool for depicting Marty data by Robotical

"use strict";

require("core-js/modules/es.weak-map.js");
require("core-js/modules/web.dom-collections.iterator.js");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
require("core-js/modules/es.regexp.exec.js");
require("core-js/modules/es.string.replace.js");
require("core-js/modules/es.symbol.description.js");
var _react = _interopRequireWildcard(require("react"));
var _material = require("@mui/material");
var _fa = require("react-icons/fa");
var _Dropdown = _interopRequireDefault(require("../Dropdown"));
var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
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 _getRequireWildcardCache(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 getStatusCopy = (recordingState, endConditionReached) => {
  if (recordingState === "choose-signals") {
    return {
      title: "Choose signals",
      description: "Select at least one signal to enable recording."
    };
  }
  if (recordingState === "ready") {
    return {
      title: "Ready to record",
      description: "Your signals are selected. Start when you’re ready."
    };
  }
  if (recordingState === "recording") {
    return {
      title: "Recording active",
      description: "Data appears as readings arrive and the start condition is met."
    };
  }
  if (endConditionReached) {
    return {
      title: "Recording ended",
      description: "The end condition was met. Reset the graph to record again."
    };
  }
  return {
    title: "Recording paused",
    description: "Resume to continue this recording, or reset to start over."
  };
};
function GraphControls(_ref) {
  let {
    onClickPlay,
    onClickPause,
    onClickStop,
    onAutoScrollToggle,
    autoScrollEnabled,
    onStartOptionChange,
    onEndOptionChange,
    startSelectedOption,
    endSelectedOption,
    startOptions,
    endOptions,
    recordingState,
    hasData,
    endConditionReached = false,
    mode = "all"
  } = _ref;
  const reactId = (0, _react.useId)();
  const isRecording = recordingState === "recording";
  const canRecord = recordingState !== "choose-signals" && !isRecording && !endConditionReached;
  const canPause = isRecording;
  const canReset = hasData || recordingState === "recording" || recordingState === "paused";
  const statusCopy = getStatusCopy(recordingState, endConditionReached);
  const recordLabel = recordingState === "paused" ? "Resume" : "Record";
  const statusDescriptionId = "recording-status-".concat(reactId.replace(/:/g, ""));
  const showPrimaryControls = mode !== "advanced";
  const showAdvancedSettings = mode !== "primary";
  const sectionLabel = mode === "primary" ? "Recording controls" : mode === "advanced" ? "Advanced graph settings" : "Recording controls and graph settings";
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("section", {
    className: _stylesModule.default.container,
    "aria-label": sectionLabel,
    children: [showPrimaryControls && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: _stylesModule.default.primaryBar,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        className: _stylesModule.default.statusCopy,
        role: "status",
        "aria-live": "polite",
        "aria-atomic": "true",
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
          className: _stylesModule.default.statusTitle,
          children: statusCopy.title
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
          className: _stylesModule.default.statusDescription,
          id: statusDescriptionId,
          children: statusCopy.description
        })]
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        className: _stylesModule.default.primaryActions,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
          type: "button",
          className: [_stylesModule.default.controlButton, _stylesModule.default.recordButton, isRecording ? _stylesModule.default.controlButtonActive : ""].join(" "),
          onClick: onClickPlay,
          disabled: !canRecord,
          "aria-describedby": statusDescriptionId,
          "aria-pressed": isRecording,
          children: [isRecording ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaDotCircle, {
            "aria-hidden": "true"
          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaPlay, {
            "aria-hidden": "true"
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
            children: isRecording ? "Recording" : recordLabel
          })]
        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
          type: "button",
          className: _stylesModule.default.controlButton,
          onClick: onClickPause,
          disabled: !canPause,
          "aria-describedby": statusDescriptionId,
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaPause, {
            "aria-hidden": "true"
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
            children: "Pause"
          })]
        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
          type: "button",
          className: _stylesModule.default.controlButton,
          onClick: onClickStop,
          disabled: !canReset,
          "aria-describedby": statusDescriptionId,
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaStop, {
            "aria-hidden": "true"
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
            children: "Reset"
          })]
        })]
      })]
    }), showAdvancedSettings && /*#__PURE__*/(0, _jsxRuntime.jsxs)("details", {
      className: _stylesModule.default.advancedSettings,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("summary", {
        className: _stylesModule.default.advancedSummary,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {
            children: "Advanced settings"
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("small", {
            children: "Trigger conditions and chart scrolling"
          })]
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaChevronDown, {
          className: _stylesModule.default.chevron,
          "aria-hidden": "true"
        })]
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        className: _stylesModule.default.advancedContent,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
          className: _stylesModule.default.ruleBlock,
          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
            className: _stylesModule.default.blockHeading,
            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
              className: _stylesModule.default.blockLabel,
              children: "Trigger conditions"
            }), isRecording && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
              className: _stylesModule.default.disabledReason,
              role: "note",
              children: "Pause recording to edit trigger conditions."
            })]
          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
            className: _stylesModule.default.startEndRules,
            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default, {
              rule: "start",
              label: "Start when",
              onChange: onStartOptionChange,
              options: startOptions,
              selectedOption: startSelectedOption,
              disabled: isRecording
            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default, {
              rule: "end",
              label: "End when",
              onChange: onEndOptionChange,
              options: endOptions,
              selectedOption: endSelectedOption,
              disabled: isRecording
            })]
          })]
        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
          className: _stylesModule.default.autoScrollContainer,
          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {
              children: "Keep latest data in view"
            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("small", {
              children: "Automatically follow new readings along the time axis."
            })]
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Checkbox, {
            checked: autoScrollEnabled,
            onChange: onAutoScrollToggle,
            inputProps: {
              "aria-label": "Keep latest data in view"
            }
          })]
        })]
      })]
    })]
  });
}
var _default = exports.default = /*#__PURE__*/_react.default.memo(GraphControls);